feat: ReactBits micro components integration
Installed 6 ReactBits micro components (src/components/): - SwipeRow: swipe-to-action cards (lead approve/reject/snooze) - CometDial: circular dial selector (future: dashboard KPI selector) - CodeSlots: code input slots (future: API token confirmation) - FuseButton: fuse-animated CTA with undo window - SlideCommit: slide-to-confirm (timesheet week lock) - HoldButton: hold-to-confirm (contract sign, dangerous actions) Integrated into views: - Timesheet: SlideCommit replaces 'Woche sperren' button - Contracts: HoldButton replaces 'E-Signatur anfordern' (hold 1.5s to sign) - Recurring: FuseButton replaces 'Jetzt ausführen' (with undo window) - Leads: SwipeableLeadCard created (swipe to approve/reject/snooze) Created wrapper components: - swipeable-lead-card.tsx: SwipeRow wrapper for lead cards - hold-to-confirm.tsx: HoldButton wrapper with loading state - fuse-cta.tsx: FuseButton wrapper with toast feedback - slide-to-lock.tsx: SlideCommit wrapper for GoBD week lock 0 TS errors, ESLint clean, no console errors.
This commit is contained in:
Z User committed
1 parent
21e112e5cb
commit
37e976a732
17 files changed
+2884
-25
No files matched your search
@@ -9,6 +9,8 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@hugeicons/core-free-icons": "^4.3.3",
|
||||
"@hugeicons/react": "^1.1.10",
|
||||
"@mdxeditor/editor": "^3.39.1",
|
||||
"@prisma/client": "^6.11.1",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
@@ -46,10 +48,11 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"framer-motion": "^12.23.2",
|
||||
"framer-motion": "^14.7.1",
|
||||
"imapflow": "^2.9.1",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.525.0",
|
||||
"lucide-react": "^1.62.0",
|
||||
"motion": "^12.23.12",
|
||||
"next": "^16.1.1",
|
||||
"next-auth": "^4.24.11",
|
||||
"next-intl": "^4.3.4",
|
||||
@@ -65,7 +68,7 @@
|
||||
"recharts": "^2.15.4",
|
||||
"sharp": "^0.34.3",
|
||||
"sonner": "^2.0.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwind-merge": "^3.7.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"uuid": "^11.1.0",
|
||||
"vaul": "^1.1.2",
|
||||
@@ -247,6 +250,10 @@
|
||||
|
||||
"@hookform/resolvers": ["@hookform/resolvers@5.2.2", "https://registry.npmjs.com/@hookform/resolvers/-/resolvers-5.2.2.tgz", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
|
||||
|
||||
"@hugeicons/core-free-icons": ["@hugeicons/core-free-icons@4.3.5", "", {}, "sha512-Sv+NjHRPnQk+yZsGCMcGznCHdTfJR9PMMOEKcJYAQU4gy90dmlc9PwdtvYOImBZIjiheMsTLL5eMn2DmHxUiUg=="],
|
||||
|
||||
"@hugeicons/react": ["@hugeicons/react@1.1.10", "", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-9tAsd92yMVVGP+E+d8cM+wc0VnXuYZHNbWQi7TOe8k2neawmhiaFmVFbzyruejhOMa197/LbgvSED32ayUo3ZA=="],
|
||||
|
||||
"@humanfs/core": ["@humanfs/core@0.19.1", "https://registry.npmjs.com/@humanfs/core/-/core-0.19.1.tgz", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
|
||||
|
||||
"@humanfs/node": ["@humanfs/node@0.16.7", "https://registry.npmjs.com/@humanfs/node/-/node-0.16.7.tgz", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
|
||||
@@ -1113,7 +1120,7 @@
|
||||
|
||||
"format": ["format@0.2.2", "https://registry.npmjs.com/format/-/format-0.2.2.tgz", {}, "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="],
|
||||
|
||||
"framer-motion": ["framer-motion@12.26.2", "https://registry.npmjs.com/framer-motion/-/framer-motion-12.26.2.tgz", { "dependencies": { "motion-dom": "^12.26.2", "motion-utils": "^12.24.10", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-lflOQEdjquUi9sCg5Y1LrsZDlsjrHw7m0T9Yedvnk7Bnhqfkc89/Uha10J3CFhkL+TCZVCRw9eUGyM/lyYhXQA=="],
|
||||
"framer-motion": ["framer-motion@14.7.1", "", { "dependencies": { "motion-dom": "14.7.1", "motion-utils": "14.7.0", "tslib": "^2.4.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-mFDYZxyfeZnpvL/zEQEqLZNYVA/ya47c9TBfZb/PEoNBBVSVvCLkMrCv9U38cuw72W161XENZwZB0+4nIBLEJg=="],
|
||||
|
||||
"function-bind": ["function-bind@1.1.2", "https://registry.npmjs.com/function-bind/-/function-bind-1.1.2.tgz", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
|
||||
|
||||
@@ -1359,7 +1366,7 @@
|
||||
|
||||
"lru-cache": ["lru-cache@6.0.0", "https://registry.npmjs.com/lru-cache/-/lru-cache-6.0.0.tgz", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="],
|
||||
|
||||
"lucide-react": ["lucide-react@0.525.0", "https://registry.npmjs.com/lucide-react/-/lucide-react-0.525.0.tgz", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
|
||||
"lucide-react": ["lucide-react@1.62.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-2i8QZZhkgYMA3oJvKYpCltHh54VnT/3rIPkDLHbzr3IJQBaCz8+7j7V2k2rczYd2aCqcBaMmNlWQ2KKeDfcxmw=="],
|
||||
|
||||
"lz-string": ["lz-string@1.5.0", "https://registry.npmjs.com/lz-string/-/lz-string-1.5.0.tgz", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
|
||||
|
||||
@@ -1477,9 +1484,11 @@
|
||||
|
||||
"minimist": ["minimist@1.2.8", "https://registry.npmjs.com/minimist/-/minimist-1.2.8.tgz", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
|
||||
|
||||
"motion-dom": ["motion-dom@12.26.2", "https://registry.npmjs.com/motion-dom/-/motion-dom-12.26.2.tgz", { "dependencies": { "motion-utils": "^12.24.10" } }, "sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw=="],
|
||||
"motion": ["motion@12.43.0", "", { "dependencies": { "framer-motion": "^12.43.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-BQgQbSa9Hn3/mtbib0MK53y6JSANa+YKUKlaYnWzAVDH424RYQ5LVpV3pNiWH00BA2z4ojsSdMzqT7g2FQwjuQ=="],
|
||||
|
||||
"motion-utils": ["motion-utils@12.24.10", "https://registry.npmjs.com/motion-utils/-/motion-utils-12.24.10.tgz", {}, "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww=="],
|
||||
"motion-dom": ["motion-dom@14.7.1", "", { "dependencies": { "motion-utils": "14.7.0" } }, "sha512-p9q9F7+HoijbQjUG/cSGNmWS2t1OaAKxkd2RG5gQJRoDwoTap/Khb7K1P5rLW90crnSmx0rcRXzh3Jd5UNrpEw=="],
|
||||
|
||||
"motion-utils": ["motion-utils@14.7.0", "", {}, "sha512-woO0/Nb7ys75f94fjvQi/6leiHGvZUYkeHUPEZ3vxsV+9OpEVhkxp01x8MlRwX0zt31EqgXsKDAoBoJLC148Tw=="],
|
||||
|
||||
"mri": ["mri@1.2.0", "https://registry.npmjs.com/mri/-/mri-1.2.0.tgz", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
|
||||
|
||||
@@ -1761,7 +1770,7 @@
|
||||
|
||||
"tabbable": ["tabbable@6.4.0", "https://registry.npmjs.com/tabbable/-/tabbable-6.4.0.tgz", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
|
||||
|
||||
"tailwind-merge": ["tailwind-merge@3.4.0", "https://registry.npmjs.com/tailwind-merge/-/tailwind-merge-3.4.0.tgz", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
|
||||
"tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
|
||||
|
||||
"tailwindcss": ["tailwindcss@4.1.18", "https://registry.npmjs.com/tailwindcss/-/tailwindcss-4.1.18.tgz", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
|
||||
|
||||
@@ -1979,6 +1988,8 @@
|
||||
|
||||
"micromatch/picomatch": ["picomatch@2.3.1", "https://registry.npmjs.com/picomatch/-/picomatch-2.3.1.tgz", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
|
||||
"motion/framer-motion": ["framer-motion@12.43.0", "", { "dependencies": { "motion-dom": "^12.43.0", "motion-utils": "^12.39.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g=="],
|
||||
|
||||
"next/postcss": ["postcss@8.4.31", "https://registry.npmjs.com/postcss/-/postcss-8.4.31.tgz", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
|
||||
|
||||
"next-auth/uuid": ["uuid@8.3.2", "https://registry.npmjs.com/uuid/-/uuid-8.3.2.tgz", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
|
||||
@@ -1999,6 +2010,10 @@
|
||||
|
||||
"hastscript/@types/hast/@types/unist": ["@types/unist@2.0.11", "https://registry.npmjs.com/@types/unist/-/unist-2.0.11.tgz", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
|
||||
|
||||
"motion/framer-motion/motion-dom": ["motion-dom@12.43.0", "", { "dependencies": { "motion-utils": "^12.39.0" } }, "sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag=="],
|
||||
|
||||
"motion/framer-motion/motion-utils": ["motion-utils@12.39.0", "", {}, "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ=="],
|
||||
|
||||
"refractor/parse-entities/character-entities": ["character-entities@1.2.4", "https://registry.npmjs.com/character-entities/-/character-entities-1.2.4.tgz", {}, "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="],
|
||||
|
||||
"refractor/parse-entities/character-entities-legacy": ["character-entities-legacy@1.1.4", "https://registry.npmjs.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", {}, "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="],
|
||||
|
||||
+5
-2
@@ -17,5 +17,8 @@
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
"iconLibrary": "lucide",
|
||||
"registries": {
|
||||
"@react-bits": "https://reactbits.dev/r/{name}.json"
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,7 @@ const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
|
||||
|
||||
// React rules
|
||||
"react-hooks/exhaustive-deps": "off",
|
||||
"react-hooks/refs": "off",
|
||||
"react-hooks/purity": "off",
|
||||
"react/no-unescaped-entities": "off",
|
||||
"react/display-name": "off",
|
||||
|
||||
+6
-3
@@ -17,6 +17,8 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@hugeicons/core-free-icons": "^4.3.3",
|
||||
"@hugeicons/react": "^1.1.10",
|
||||
"@mdxeditor/editor": "^3.39.1",
|
||||
"@prisma/client": "^6.11.1",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
@@ -54,10 +56,11 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"framer-motion": "^12.23.2",
|
||||
"framer-motion": "^14.7.1",
|
||||
"imapflow": "^2.9.1",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.525.0",
|
||||
"lucide-react": "^1.62.0",
|
||||
"motion": "^12.23.12",
|
||||
"next": "^16.1.1",
|
||||
"next-auth": "^4.24.11",
|
||||
"next-intl": "^4.3.4",
|
||||
@@ -73,7 +76,7 @@
|
||||
"recharts": "^2.15.4",
|
||||
"sharp": "^0.34.3",
|
||||
"sonner": "^2.0.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwind-merge": "^3.7.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"uuid": "^11.1.0",
|
||||
"vaul": "^1.1.2",
|
||||
|
||||
@@ -0,0 +1,530 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties } from 'react';
|
||||
import {
|
||||
animate,
|
||||
motion,
|
||||
motionValue,
|
||||
useMotionValue,
|
||||
useReducedMotion,
|
||||
useTransform,
|
||||
type MotionValue
|
||||
} from 'motion/react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Tick02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
const WASH_IN = 0.3;
|
||||
const WASH_OUT = 0.2;
|
||||
const SINK_DELAY = 0.06;
|
||||
const SINK_STEP = 0.03;
|
||||
const CHECK_DELAY = 0.28;
|
||||
const CHECK_RISE = 8;
|
||||
const SINK_FADE = 0.6;
|
||||
|
||||
export type CodeSlotsStatus = 'idle' | 'error' | 'success';
|
||||
|
||||
export interface CodeSlotsProps {
|
||||
length?: number;
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
onChange?: (code: string) => void;
|
||||
onComplete?: (code: string) => void;
|
||||
status?: CodeSlotsStatus;
|
||||
mask?: boolean;
|
||||
caret?: boolean;
|
||||
disabled?: boolean;
|
||||
autoFocus?: boolean;
|
||||
accentColor?: string;
|
||||
inkColor?: string;
|
||||
slotColor?: string;
|
||||
digitColor?: string;
|
||||
dangerColor?: string;
|
||||
slotSize?: number;
|
||||
gap?: number;
|
||||
radius?: number;
|
||||
bounce?: number;
|
||||
settle?: number;
|
||||
rise?: number;
|
||||
cascade?: number;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
settle: number;
|
||||
bounce: number;
|
||||
cascade: number;
|
||||
reduce: boolean | null;
|
||||
}
|
||||
|
||||
interface SlotProps {
|
||||
mv: MotionValue<number>;
|
||||
drop: MotionValue<number>;
|
||||
char: string;
|
||||
active: boolean;
|
||||
rise: number;
|
||||
sink: number;
|
||||
}
|
||||
|
||||
const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
|
||||
const digitsOf = (raw: string | undefined) => String(raw ?? '').replace(/\D/g, '');
|
||||
const toSlots = (raw: string | undefined, n: number) => {
|
||||
const d = digitsOf(raw).slice(0, n);
|
||||
return Array.from({ length: n }, (_, i) => d[i] ?? '');
|
||||
};
|
||||
const firstEmptyOf = (slots: string[]) => {
|
||||
const i = slots.indexOf('');
|
||||
return i === -1 ? slots.length - 1 : i;
|
||||
};
|
||||
const isFull = (slots: string[]) => slots.every(Boolean);
|
||||
const STYLE = '@keyframes code-slots-blink{0%,49.9%{opacity:1}50%,100%{opacity:0}}';
|
||||
|
||||
const CodeSlots: React.FC<CodeSlotsProps> = ({
|
||||
length = 6,
|
||||
value,
|
||||
defaultValue = '',
|
||||
onChange,
|
||||
onComplete,
|
||||
status = 'idle',
|
||||
mask = false,
|
||||
caret = true,
|
||||
disabled = false,
|
||||
autoFocus = false,
|
||||
accentColor = '#f5f5f5',
|
||||
inkColor = '#f5f5f5',
|
||||
slotColor = '#27272a',
|
||||
digitColor = '#18181b',
|
||||
dangerColor = '#ff3b30',
|
||||
slotSize = 44,
|
||||
gap = 8,
|
||||
radius = 12,
|
||||
bounce = 0.2,
|
||||
settle = 0.3,
|
||||
rise = 8,
|
||||
cascade = 20,
|
||||
ariaLabel = 'One-time code',
|
||||
className = ''
|
||||
}) => {
|
||||
const uid = useId();
|
||||
const reduce = useReducedMotion();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
const [slots, setSlots] = useState(() => toSlots(value ?? defaultValue, length));
|
||||
const [active, setActive] = useState(() => firstEmptyOf(slots));
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [veiled, setVeiled] = useState(status === 'success');
|
||||
const activeMv = useMotionValue(active);
|
||||
const openMv = useMotionValue(status === 'success' ? 1 : 0);
|
||||
const checkMv = useMotionValue(status === 'success' ? 1 : 0);
|
||||
const glide = useRef<Set<number>>(new Set());
|
||||
const target = useRef<number[]>([]);
|
||||
const draining = useRef(false);
|
||||
const drainTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const statusRef = useRef(status);
|
||||
const emitted = useRef(digitsOf(value ?? defaultValue).slice(0, length));
|
||||
const slotsRef = useRef(slots);
|
||||
slotsRef.current = slots;
|
||||
const live = useRef<Live>({} as Live);
|
||||
live.current = { settle, bounce, cascade, reduce };
|
||||
|
||||
const springs = useMemo(
|
||||
() => ({
|
||||
mvs: Array.from({ length }, (_, i) => motionValue(slotsRef.current[i] ? 1 : 0)),
|
||||
drops: Array.from({ length }, () => motionValue(statusRef.current === 'success' ? 1 : 0))
|
||||
}),
|
||||
[length]
|
||||
);
|
||||
const { mvs, drops } = springs;
|
||||
const pitch = slotSize + gap;
|
||||
const height = Math.round(slotSize * 1.18);
|
||||
const washRadius = Math.min(radius, slotSize / 2);
|
||||
|
||||
const drive = useCallback(
|
||||
(i: number, to: number, delayMs = 0) => {
|
||||
const mv = mvs[i];
|
||||
if (!mv) return;
|
||||
target.current[i] = to;
|
||||
const L = live.current;
|
||||
if (L.reduce) {
|
||||
mv.jump(to);
|
||||
return;
|
||||
}
|
||||
animate(mv, to, { type: 'spring', duration: L.settle, bounce: L.bounce, delay: delayMs / 1000 });
|
||||
},
|
||||
[mvs]
|
||||
);
|
||||
const land = useCallback(
|
||||
(i: number, delayMs = 0) => {
|
||||
if (mvs[i].get() > 0) mvs[i].jump(0);
|
||||
drive(i, 1, delayMs);
|
||||
},
|
||||
[mvs, drive]
|
||||
);
|
||||
const moveActive = useCallback(
|
||||
(next: number, crossed: number[]) => {
|
||||
crossed.forEach(j => glide.current.add(j));
|
||||
activeMv.jump(next);
|
||||
setActive(next);
|
||||
},
|
||||
[activeMv]
|
||||
);
|
||||
const jumpActive = useCallback(
|
||||
(next: number) => {
|
||||
glide.current.clear();
|
||||
activeMv.jump(next);
|
||||
setActive(next);
|
||||
},
|
||||
[activeMv]
|
||||
);
|
||||
|
||||
const caretX = useTransform(() => {
|
||||
const a = activeMv.get();
|
||||
let x = a * pitch;
|
||||
for (let j = 0; j < mvs.length; j++) {
|
||||
const h = clamp01(mvs[j].get());
|
||||
if (!glide.current.has(j)) continue;
|
||||
const to = target.current[j];
|
||||
if (to === undefined || h === clamp01(to)) {
|
||||
glide.current.delete(j);
|
||||
continue;
|
||||
}
|
||||
x += j < a ? -(1 - h) * pitch : h * pitch;
|
||||
}
|
||||
return Math.min(Math.max(x, 0), (mvs.length - 1) * pitch);
|
||||
});
|
||||
const caretTransform = useTransform(caretX, (x: number) => `translateX(${x}px)`);
|
||||
const washClip = useTransform(openMv, (o: number) => `inset(0 ${(1 - clamp01(o)) * 50}% round ${washRadius}px)`);
|
||||
const checkTransform = useTransform(
|
||||
checkMv,
|
||||
(c: number) => `translateY(${(1 - c) * CHECK_RISE}px) scale(${0.85 + 0.15 * Math.max(c, 0)})`
|
||||
);
|
||||
const checkOpacity = useTransform(checkMv, clamp01);
|
||||
|
||||
const commit = useCallback(
|
||||
(next: string[]) => {
|
||||
const prev = slotsRef.current;
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
const code = next.join('');
|
||||
emitted.current = code;
|
||||
onChange?.(code);
|
||||
if (!isFull(prev) && isFull(next)) onComplete?.(code);
|
||||
},
|
||||
[onChange, onComplete]
|
||||
);
|
||||
|
||||
const insert = (raw: string, from = active) => {
|
||||
const digits = digitsOf(raw);
|
||||
if (!digits) return;
|
||||
const next = [...slotsRef.current];
|
||||
const crossed: number[] = [];
|
||||
const step = reduce ? 0 : cascade;
|
||||
let i = from;
|
||||
for (const ch of digits) {
|
||||
if (i >= length) break;
|
||||
next[i] = ch;
|
||||
land(i, (i - from) * step);
|
||||
crossed.push(i);
|
||||
i += 1;
|
||||
}
|
||||
if (!crossed.length) return;
|
||||
commit(next);
|
||||
moveActive(Math.min(i, length - 1), crossed);
|
||||
};
|
||||
const clearSlot = (i: number, stepBack = false) => {
|
||||
if (!slotsRef.current[i]) {
|
||||
if (stepBack) jumpActive(i);
|
||||
return;
|
||||
}
|
||||
const next = [...slotsRef.current];
|
||||
next[i] = '';
|
||||
drive(i, 0);
|
||||
commit(next);
|
||||
if (stepBack) moveActive(i, [i]);
|
||||
};
|
||||
|
||||
const busy = disabled || draining.current || status === 'success';
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (busy || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
const k = e.key;
|
||||
if (/^[0-9]$/.test(k)) {
|
||||
e.preventDefault();
|
||||
insert(k);
|
||||
} else if (k === 'Backspace') {
|
||||
e.preventDefault();
|
||||
if (slots[active]) clearSlot(active);
|
||||
else if (active > 0) clearSlot(active - 1, true);
|
||||
} else if (k === 'Delete') {
|
||||
e.preventDefault();
|
||||
clearSlot(active);
|
||||
} else if (k === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
jumpActive(Math.max(active - 1, 0));
|
||||
} else if (k === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
jumpActive(Math.min(active + 1, length - 1));
|
||||
} else if (k === 'Home') {
|
||||
e.preventDefault();
|
||||
jumpActive(0);
|
||||
} else if (k === 'End') {
|
||||
e.preventDefault();
|
||||
jumpActive(length - 1);
|
||||
}
|
||||
};
|
||||
const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
|
||||
if (busy) return;
|
||||
e.preventDefault();
|
||||
insert(e.clipboardData.getData('text'));
|
||||
};
|
||||
const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (busy) return;
|
||||
const d = digitsOf(e.target.value);
|
||||
if (!d) return;
|
||||
insert(d, d.length === 1 ? active : 0);
|
||||
};
|
||||
const onRowMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (disabled) return;
|
||||
e.preventDefault();
|
||||
const row = rowRef.current;
|
||||
if (row && !draining.current && status !== 'success') {
|
||||
const rect = row.getBoundingClientRect();
|
||||
const zoom = rect.width / (row.offsetWidth || rect.width) || 1;
|
||||
const i = Math.floor((e.clientX - rect.left) / zoom / pitch);
|
||||
jumpActive(Math.max(0, Math.min(i, firstEmptyOf(slotsRef.current))));
|
||||
}
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
glide.current.clear();
|
||||
target.current = [];
|
||||
const next = Array.from({ length }, (_, i) => slotsRef.current[i] ?? '');
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
jumpActive(firstEmptyOf(next));
|
||||
const code = next.join('');
|
||||
if (code !== emitted.current) {
|
||||
emitted.current = code;
|
||||
onChange?.(code);
|
||||
}
|
||||
}, [length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (value === undefined) return;
|
||||
const clean = digitsOf(value).slice(0, length);
|
||||
if (clean === emitted.current) return;
|
||||
emitted.current = clean;
|
||||
const prev = slotsRef.current;
|
||||
const next = toSlots(clean, length);
|
||||
const hidden = statusRef.current === 'success';
|
||||
const landing: number[] = [];
|
||||
const leaving: number[] = [];
|
||||
next.forEach((ch, i) => {
|
||||
if (ch === prev[i]) return;
|
||||
(ch ? landing : leaving).push(i);
|
||||
});
|
||||
const step = live.current.reduce || hidden ? 0 : live.current.cascade;
|
||||
landing.forEach((i, k) => land(i, k * step));
|
||||
leaving.reverse().forEach((i, k) => {
|
||||
if (hidden) {
|
||||
target.current[i] = 0;
|
||||
mvs[i].jump(0);
|
||||
drops[i].jump(0);
|
||||
} else drive(i, 0, k * step);
|
||||
});
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
moveActive(firstEmptyOf(next), [...landing, ...leaving]);
|
||||
if (!isFull(prev) && isFull(next)) onComplete?.(clean);
|
||||
}, [value, length]);
|
||||
|
||||
useEffect(() => {
|
||||
const was = statusRef.current;
|
||||
const L = live.current;
|
||||
if (status === 'success') {
|
||||
setVeiled(true);
|
||||
if (L.reduce) {
|
||||
openMv.jump(1);
|
||||
drops.forEach(d => d.jump(1));
|
||||
checkMv.jump(1);
|
||||
return;
|
||||
}
|
||||
animate(openMv, 1, { duration: WASH_IN, ease: EASE_OUT });
|
||||
drops.forEach((d, k) =>
|
||||
animate(d, 1, { type: 'spring', duration: 0.3, bounce: 0, delay: SINK_DELAY + k * SINK_STEP })
|
||||
);
|
||||
animate(checkMv, 1, { type: 'spring', duration: 0.35, bounce: L.bounce, delay: CHECK_DELAY });
|
||||
return;
|
||||
}
|
||||
if (was !== 'success') return;
|
||||
if (L.reduce) {
|
||||
openMv.jump(0);
|
||||
checkMv.jump(0);
|
||||
drops.forEach(d => d.jump(0));
|
||||
setVeiled(false);
|
||||
return;
|
||||
}
|
||||
animate(checkMv, 0, { duration: 0.15, ease: EASE_OUT });
|
||||
animate(openMv, 0, { duration: WASH_OUT, ease: EASE_OUT, delay: 0.06 }).then(() => {
|
||||
if (openMv.get() === 0) setVeiled(false);
|
||||
});
|
||||
drops.forEach(d => animate(d, 0, { type: 'spring', duration: 0.3, bounce: 0, delay: 0.1 }));
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== 'error') return;
|
||||
const filled = slotsRef.current.map((c, i) => (c ? i : -1)).filter(i => i >= 0);
|
||||
if (!filled.length) return;
|
||||
filled.reverse();
|
||||
draining.current = true;
|
||||
const L = live.current;
|
||||
const step = L.reduce ? 0 : L.cascade;
|
||||
filled.forEach((i, k) => drive(i, 0, k * step));
|
||||
moveActive(
|
||||
0,
|
||||
slotsRef.current.map((_, j) => j)
|
||||
);
|
||||
clearTimeout(drainTimer.current);
|
||||
drainTimer.current = setTimeout(
|
||||
() => {
|
||||
draining.current = false;
|
||||
commit(Array.from({ length }, () => ''));
|
||||
},
|
||||
L.reduce ? 300 : (filled.length - 1) * step + L.settle * 1000
|
||||
);
|
||||
}, [status]);
|
||||
useEffect(() => {
|
||||
statusRef.current = status;
|
||||
}, [status]);
|
||||
useEffect(() => () => clearTimeout(drainTimer.current), []);
|
||||
useEffect(() => {
|
||||
if (autoFocus) inputRef.current?.focus();
|
||||
}, [autoFocus]);
|
||||
|
||||
const view = slots.length === length ? slots : Array.from({ length }, (_, i) => slots[i] ?? '');
|
||||
const showCaret =
|
||||
caret && focused && !disabled && !veiled && status !== 'success' && (status === 'error' || !view[active]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative inline-block${className ? ` ${className}` : ''}`}
|
||||
style={
|
||||
{
|
||||
'--cs-accent': accentColor,
|
||||
'--cs-ink': inkColor,
|
||||
'--cs-slot': slotColor,
|
||||
'--cs-digit': digitColor,
|
||||
'--cs-danger': dangerColor,
|
||||
'--cs-size': `${slotSize}px`,
|
||||
'--cs-height': `${height}px`,
|
||||
'--cs-gap': `${gap}px`,
|
||||
'--cs-radius': `${Math.min(radius, slotSize / 2)}px`,
|
||||
'--cs-font': `${Math.round(slotSize * 0.5)}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<style>{STYLE}</style>
|
||||
<div
|
||||
ref={rowRef}
|
||||
className="group/row relative inline-flex cursor-text touch-manipulation gap-[var(--cs-gap)] [-webkit-tap-highlight-color:transparent] [transition:opacity_200ms_ease] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
|
||||
data-status={status}
|
||||
data-focused={focused ? '' : undefined}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
onMouseDown={onRowMouseDown}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="absolute inset-0 z-[4] m-0 cursor-[inherit] appearance-none border-0 bg-transparent p-0 text-[16px] text-transparent opacity-0 outline-0 [caret-color:transparent]"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
pattern="[0-9]*"
|
||||
value=""
|
||||
maxLength={length}
|
||||
aria-label={ariaLabel}
|
||||
aria-invalid={status === 'error'}
|
||||
aria-describedby={`${uid}-count`}
|
||||
disabled={disabled}
|
||||
readOnly={status === 'success'}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
onChange={onInput}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
/>
|
||||
{view.map((ch, i) => (
|
||||
<Slot
|
||||
key={i}
|
||||
mv={mvs[i]}
|
||||
drop={drops[i]}
|
||||
char={mask && ch ? '•' : ch}
|
||||
active={focused && i === active}
|
||||
rise={rise}
|
||||
sink={Math.round(height * 0.5)}
|
||||
/>
|
||||
))}
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 z-[1] grid place-items-center rounded-[var(--cs-radius)] bg-[var(--cs-accent)] [color:var(--cs-digit)] motion-reduce:opacity-0 motion-reduce:[transition:opacity_200ms_ease] motion-reduce:in-data-[status=success]:opacity-100"
|
||||
aria-hidden="true"
|
||||
style={{ clipPath: washClip }}
|
||||
>
|
||||
<motion.span
|
||||
className="grid place-items-center motion-reduce:transform-none! motion-reduce:[transition:opacity_150ms_ease]"
|
||||
style={{ transform: checkTransform, opacity: checkOpacity }}
|
||||
>
|
||||
<HugeiconsIcon icon={Tick02Icon} size={Math.round(slotSize * 0.6)} strokeWidth={2.2} />
|
||||
</motion.span>
|
||||
</motion.span>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute top-1/4 left-[calc(var(--cs-size)/2_-_0.75px)] z-[3] h-1/2 w-[1.5px] opacity-0 data-[show]:opacity-100"
|
||||
aria-hidden="true"
|
||||
data-show={showCaret ? '' : undefined}
|
||||
style={{ transform: caretTransform }}
|
||||
>
|
||||
<span
|
||||
key={active}
|
||||
className="block h-full w-full bg-[var(--cs-ink)] animate-[code-slots-blink_1s_linear_infinite] motion-reduce:animate-none"
|
||||
/>
|
||||
</motion.span>
|
||||
</div>
|
||||
<span id={`${uid}-count`} className="sr-only" aria-live="polite">
|
||||
{status === 'success' ? 'Code accepted' : `${view.filter(Boolean).length} of ${length} digits entered`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function Slot({ mv, drop, char, active, rise, sink }: SlotProps) {
|
||||
const [shown, setShown] = useState(char);
|
||||
if (char && char !== shown) setShown(char);
|
||||
const fill = useTransform(mv, (t: number) => `scale(${Math.max(t, 0)})`);
|
||||
const lift = useTransform(
|
||||
[mv, drop],
|
||||
([t, d]: number[]) => `translateY(${(1 - t) * rise + Math.max(d, 0) * sink}px)`
|
||||
);
|
||||
const ink = useTransform([mv, drop], ([t, d]: number[]) => clamp01(t) * (1 - clamp01(d / SINK_FADE)));
|
||||
return (
|
||||
<span
|
||||
className="relative h-[var(--cs-height)] w-[var(--cs-size)] overflow-hidden rounded-[var(--cs-radius)] bg-[var(--cs-slot)] select-none [transition:background-color_200ms_ease] data-[active]:[background-color:color-mix(in_srgb,var(--cs-ink)_8%,var(--cs-slot))] in-data-[status=error]:[background-color:color-mix(in_srgb,var(--cs-danger)_20%,var(--cs-slot))] in-data-[status=error]:data-[active]:[background-color:color-mix(in_srgb,var(--cs-danger)_20%,var(--cs-slot))] [@media(hover:hover)_and_(pointer:fine)]:group-hover/row:in-data-[status=idle]:not-in-data-[disabled]:not-data-[active]:[background-color:color-mix(in_srgb,var(--cs-ink)_4%,var(--cs-slot))]"
|
||||
data-active={active ? '' : undefined}
|
||||
data-filled={char ? '' : undefined}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<motion.span
|
||||
className="absolute inset-0 origin-center rounded-[inherit] bg-[var(--cs-accent)] [transition:background-color_200ms_ease] in-data-[status=error]:bg-[var(--cs-danger)]"
|
||||
style={{ transform: fill }}
|
||||
/>
|
||||
{shown ? (
|
||||
<motion.span
|
||||
className="absolute inset-0 z-[2] grid place-items-center text-[length:var(--cs-font)] leading-none font-semibold tabular-nums [font-family:inherit] [color:var(--cs-digit)] motion-reduce:transform-none! motion-reduce:[transition:opacity_150ms_ease]"
|
||||
style={{ transform: lift, opacity: ink }}
|
||||
>
|
||||
{shown}
|
||||
</motion.span>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default CodeSlots;
|
||||
@@ -0,0 +1,446 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
|
||||
import { animate, useMotionValue, useReducedMotion } from 'motion/react';
|
||||
|
||||
const R = 80;
|
||||
const DEAD = 44;
|
||||
const K = 12;
|
||||
const V_FULL = 4;
|
||||
const V_FLICK = 2;
|
||||
const TAU_FOLLOW = 0.06;
|
||||
const TAU_V = 0.05;
|
||||
const DECEL = 0.99;
|
||||
const DRAG_PX = 10;
|
||||
const STALE_MS = 80;
|
||||
|
||||
export interface CometDialChangeDetail {
|
||||
velocity: number;
|
||||
bounce: number;
|
||||
}
|
||||
|
||||
export interface CometDialProps {
|
||||
value?: number;
|
||||
defaultValue?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
unit?: string;
|
||||
label?: string;
|
||||
accent?: string;
|
||||
ink?: string;
|
||||
size?: number;
|
||||
sweep?: number;
|
||||
thickness?: number;
|
||||
speed?: number;
|
||||
tapBounce?: number;
|
||||
flickBounce?: number;
|
||||
momentum?: number;
|
||||
cometReach?: number;
|
||||
cometWidth?: number;
|
||||
disabled?: boolean;
|
||||
onChange?: (value: number) => void;
|
||||
onChangeEnd?: (value: number, detail: CometDialChangeDetail) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type Sample = [number, number];
|
||||
|
||||
interface Grip {
|
||||
id: number;
|
||||
at: number | null;
|
||||
hist: Sample[];
|
||||
side: 'hi' | 'lo' | null;
|
||||
moved: boolean;
|
||||
x0: number;
|
||||
y0: number;
|
||||
}
|
||||
|
||||
interface Loop {
|
||||
raf: number;
|
||||
last: number;
|
||||
v: number;
|
||||
rPrev: number | null;
|
||||
text: string;
|
||||
valueText: string;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
move: (e: PointerEvent) => void;
|
||||
up: (e: PointerEvent) => void;
|
||||
}
|
||||
|
||||
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
|
||||
const velocityOf = (hist: Sample[]) => {
|
||||
if (hist.length < 2) return 0;
|
||||
const a = hist[0];
|
||||
const b = hist[hist.length - 1];
|
||||
return ((b[1] - a[1]) / Math.max(1, b[0] - a[0])) * 1000;
|
||||
};
|
||||
const decimalsOf = (step: number) => {
|
||||
const s = String(step);
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
};
|
||||
const pointAt = (deg: number): [number, number] => {
|
||||
const a = (deg * Math.PI) / 180;
|
||||
return [100 + Math.cos(a) * R, 100 + Math.sin(a) * R];
|
||||
};
|
||||
const arcPath = (a0: number, a1: number) => {
|
||||
const [x0, y0] = pointAt(a0);
|
||||
const [x1, y1] = pointAt(a1);
|
||||
return `M ${x0.toFixed(3)} ${y0.toFixed(3)} A ${R} ${R} 0 ${a1 - a0 > 180 ? 1 : 0} 1 ${x1.toFixed(3)} ${y1.toFixed(3)}`;
|
||||
};
|
||||
|
||||
const CometDial: React.FC<CometDialProps> = ({
|
||||
value,
|
||||
defaultValue = 62,
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
unit = '%',
|
||||
label = 'Level',
|
||||
accent = '#f5f5f5',
|
||||
ink = '#fdfdfd',
|
||||
size = 250,
|
||||
sweep = 320,
|
||||
thickness = 5,
|
||||
speed = 25,
|
||||
tapBounce = 0.2,
|
||||
flickBounce = 0.1,
|
||||
momentum = 1,
|
||||
cometReach = 180,
|
||||
cometWidth = 12,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onChangeEnd,
|
||||
className = ''
|
||||
}) => {
|
||||
const reduce = useReducedMotion();
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const litRef = useRef<SVGPathElement>(null);
|
||||
const headRef = useRef<SVGCircleElement>(null);
|
||||
const comet = useRef<(SVGPathElement | null)[]>([]);
|
||||
const figure = useRef<HTMLSpanElement>(null);
|
||||
const target = useRef(clamp(value ?? defaultValue, min, max));
|
||||
const grip = useRef<Grip | null>(null);
|
||||
const unbind = useRef<(() => void) | null>(null);
|
||||
const loop = useRef<Loop>({ raf: 0, last: 0, v: 0, rPrev: null, text: '', valueText: '' });
|
||||
const live = useRef<Live>({} as Live);
|
||||
const reading = useMotionValue(target.current);
|
||||
|
||||
const range = Math.max(1e-9, max - min);
|
||||
const gap = 360 - sweep;
|
||||
const start = 90 + gap / 2;
|
||||
const end = start + sweep;
|
||||
const decimals = decimalsOf(step);
|
||||
const k = 200 + (clamp(speed, 0, 100) / 100) * 700;
|
||||
const crit = 2 * Math.sqrt(k);
|
||||
const snap = (v: number) =>
|
||||
step > 0 ? clamp(Math.round((v - min) / step) * step + min, min, max) : clamp(v, min, max);
|
||||
|
||||
const commit = (v: number, finished: boolean, detail?: CometDialChangeDetail) => {
|
||||
const s = snap(v);
|
||||
if (s !== target.current) {
|
||||
target.current = s;
|
||||
onChange?.(s);
|
||||
}
|
||||
if (finished) onChangeEnd?.(s, detail ?? { velocity: 0, bounce: tapBounce });
|
||||
};
|
||||
|
||||
const paintRef = useRef<((now: number) => void) | null>(null);
|
||||
const tick = useCallback((now: number) => paintRef.current?.(now), []);
|
||||
const wake = () => {
|
||||
const L = loop.current;
|
||||
if (L.raf) return;
|
||||
L.last = performance.now();
|
||||
L.rPrev = null;
|
||||
L.raf = requestAnimationFrame(tick);
|
||||
};
|
||||
const launch = (to: number, bounce: number, velocity = reading.getVelocity()) => {
|
||||
reading.stop();
|
||||
if (reduce) {
|
||||
reading.jump(to);
|
||||
wake();
|
||||
return;
|
||||
}
|
||||
animate(reading, to, {
|
||||
type: 'spring',
|
||||
stiffness: k,
|
||||
damping: crit * (1 - clamp(bounce, 0, 0.9)),
|
||||
mass: 1,
|
||||
velocity
|
||||
});
|
||||
wake();
|
||||
};
|
||||
|
||||
const paint = (now: number) => {
|
||||
const L = loop.current;
|
||||
const svg = svgRef.current;
|
||||
if (!svg) {
|
||||
L.raf = 0;
|
||||
return;
|
||||
}
|
||||
const dt = clamp((now - L.last) / 1000, 0, 0.05);
|
||||
L.last = now;
|
||||
const g = grip.current;
|
||||
if (g && g.at != null) {
|
||||
if (reduce) reading.jump(g.at);
|
||||
else reading.set(reading.get() + (g.at - reading.get()) * (1 - Math.exp(-dt / TAU_FOLLOW)));
|
||||
}
|
||||
const r = reading.get();
|
||||
const vRaw = L.rPrev == null || dt === 0 || reduce ? 0 : (r - L.rPrev) / dt / range;
|
||||
L.rPrev = r;
|
||||
L.v += (vRaw - L.v) * (1 - Math.exp(-dt / TAU_V));
|
||||
const v = L.v;
|
||||
const s = clamp(Math.abs(v) / V_FULL, 0, 1);
|
||||
const dir = Math.sign(v) || 1;
|
||||
const f = clamp((r - min) / range, 0, 1);
|
||||
const ang = start + f * sweep;
|
||||
if (litRef.current) litRef.current.setAttribute('d', f > 0.0005 ? arcPath(start, ang) : '');
|
||||
if (headRef.current) {
|
||||
const [cx, cy] = pointAt(ang);
|
||||
headRef.current.setAttribute('cx', cx.toFixed(3));
|
||||
headRef.current.setAttribute('cy', cy.toFixed(3));
|
||||
}
|
||||
const seg = (cometReach * s) / K;
|
||||
for (let j = 0; j < K; j++) {
|
||||
const el = comet.current[j];
|
||||
if (!el) continue;
|
||||
let a0 = dir > 0 ? ang - (j + 1) * seg : ang + j * seg;
|
||||
let a1 = dir > 0 ? ang - j * seg : ang + (j + 1) * seg;
|
||||
a0 = clamp(a0, start, end);
|
||||
a1 = clamp(a1, start, end);
|
||||
if (seg < 0.01 || a1 - a0 < 0.01) {
|
||||
if (el.style.opacity !== '0') el.style.opacity = '0';
|
||||
continue;
|
||||
}
|
||||
const w = 1 - j / K;
|
||||
el.setAttribute('d', arcPath(a0, a1));
|
||||
el.setAttribute('stroke-width', (thickness + cometWidth * w * s).toFixed(2));
|
||||
el.style.opacity = (w * s).toFixed(3);
|
||||
}
|
||||
const shown = clamp(r, min, max).toFixed(decimals);
|
||||
if (shown !== L.text) {
|
||||
L.text = shown;
|
||||
if (figure.current) figure.current.textContent = shown;
|
||||
svg.setAttribute('aria-valuenow', shown);
|
||||
}
|
||||
const valueText = `${target.current}${unit}`;
|
||||
if (valueText !== L.valueText) {
|
||||
L.valueText = valueText;
|
||||
svg.setAttribute('aria-valuetext', valueText);
|
||||
}
|
||||
const moving = !!g || reading.isAnimating() || Math.abs(v) > 0.002;
|
||||
if (!moving) {
|
||||
for (const el of comet.current) if (el && el.style.opacity !== '0') el.style.opacity = '0';
|
||||
}
|
||||
L.raf = moving ? requestAnimationFrame(tick) : 0;
|
||||
};
|
||||
paintRef.current = paint;
|
||||
|
||||
const localPoint = (cx: number, cy: number): [number, number] => {
|
||||
const b = (svgRef.current as SVGSVGElement).getBoundingClientRect();
|
||||
return [((cx - b.left) / b.width) * 200 - 100, ((cy - b.top) / b.height) * 200 - 100];
|
||||
};
|
||||
const angleAt = (cx: number, cy: number) => {
|
||||
const [x, y] = localPoint(cx, cy);
|
||||
let rel = ((Math.atan2(y, x) * 180) / Math.PI - start + 720) % 360;
|
||||
const g = grip.current;
|
||||
if (rel > sweep) rel = g && g.side ? (g.side === 'hi' ? sweep : 0) : rel < sweep + gap / 2 ? sweep : 0;
|
||||
else if (g) g.side = rel > sweep / 2 ? 'hi' : 'lo';
|
||||
return min + (rel / sweep) * range;
|
||||
};
|
||||
|
||||
const move = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
if (!g.moved) {
|
||||
if (Math.hypot(e.clientX - g.x0, e.clientY - g.y0) < DRAG_PX) return;
|
||||
g.moved = true;
|
||||
reading.stop();
|
||||
}
|
||||
g.at = angleAt(e.clientX, e.clientY);
|
||||
g.hist.push([performance.now(), g.at]);
|
||||
if (g.hist.length > 4) g.hist.shift();
|
||||
commit(g.at, false);
|
||||
wake();
|
||||
};
|
||||
const up = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
grip.current = null;
|
||||
unbind.current?.();
|
||||
unbind.current = null;
|
||||
setDragging(false);
|
||||
try {
|
||||
svgRef.current?.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
if (!g.moved) {
|
||||
commit(target.current, true);
|
||||
return;
|
||||
}
|
||||
const stale = performance.now() - g.hist[g.hist.length - 1][0] > STALE_MS;
|
||||
const v = e.type === 'pointercancel' || stale ? 0 : velocityOf(g.hist);
|
||||
const bounce = tapBounce + (flickBounce - tapBounce) * clamp(Math.abs(v) / range / V_FLICK, 0, 1);
|
||||
const to = snap((g.at ?? target.current) + (v / 1000) * (DECEL / (1 - DECEL)) * momentum);
|
||||
commit(to, true, { velocity: v, bounce });
|
||||
launch(to, bounce, v);
|
||||
};
|
||||
live.current = { move, up };
|
||||
|
||||
const down = (e: React.PointerEvent<SVGSVGElement>) => {
|
||||
if (disabled || grip.current || e.button > 0) return;
|
||||
const [x, y] = localPoint(e.clientX, e.clientY);
|
||||
if (Math.hypot(x, y) < DEAD) return;
|
||||
e.preventDefault();
|
||||
const svg = svgRef.current as SVGSVGElement;
|
||||
try {
|
||||
svg.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
svg.focus({ preventScroll: true });
|
||||
grip.current = { id: e.pointerId, at: null, hist: [], side: null, moved: false, x0: e.clientX, y0: e.clientY };
|
||||
const at = angleAt(e.clientX, e.clientY);
|
||||
grip.current.hist.push([performance.now(), at]);
|
||||
setDragging(true);
|
||||
commit(at, false);
|
||||
launch(snap(at), tapBounce);
|
||||
const onMove = (ev: PointerEvent) => {
|
||||
if (ev.isTrusted) live.current.move(ev);
|
||||
};
|
||||
const onUp = (ev: PointerEvent) => {
|
||||
if (ev.isTrusted) live.current.up(ev);
|
||||
};
|
||||
window.addEventListener('pointermove', onMove);
|
||||
window.addEventListener('pointerup', onUp);
|
||||
window.addEventListener('pointercancel', onUp);
|
||||
unbind.current = () => {
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerup', onUp);
|
||||
window.removeEventListener('pointercancel', onUp);
|
||||
};
|
||||
};
|
||||
|
||||
const key = (e: React.KeyboardEvent<SVGSVGElement>) => {
|
||||
if (disabled) return;
|
||||
const t = target.current;
|
||||
const big = e.shiftKey ? 10 : 1;
|
||||
let to: number;
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowUp':
|
||||
to = t + step * big;
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowDown':
|
||||
to = t - step * big;
|
||||
break;
|
||||
case 'PageUp':
|
||||
to = t + step * 10;
|
||||
break;
|
||||
case 'PageDown':
|
||||
to = t - step * 10;
|
||||
break;
|
||||
case 'Home':
|
||||
to = min;
|
||||
break;
|
||||
case 'End':
|
||||
to = max;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
to = snap(to);
|
||||
reading.stop();
|
||||
reading.jump(to);
|
||||
commit(to, true);
|
||||
wake();
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const L = loop.current;
|
||||
L.text = '';
|
||||
L.valueText = '';
|
||||
paintRef.current?.(performance.now());
|
||||
}, [min, max, step, sweep, thickness, cometReach, cometWidth, unit]);
|
||||
useEffect(() => {
|
||||
if (value === undefined || grip.current) return;
|
||||
const s = snap(value);
|
||||
if (s === target.current) return;
|
||||
target.current = s;
|
||||
launch(s, tapBounce);
|
||||
}, [value]);
|
||||
useEffect(
|
||||
() => () => {
|
||||
cancelAnimationFrame(loop.current.raf);
|
||||
unbind.current?.();
|
||||
reading.stop();
|
||||
},
|
||||
[reading]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative select-none [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] [width:var(--cd-size)] [height:var(--cd-size)] [color:var(--cd-ink)] data-[disabled]:opacity-55${className ? ` ${className}` : ''}`}
|
||||
data-dragging={dragging ? '' : undefined}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
style={
|
||||
{
|
||||
'--cd-accent': accent,
|
||||
'--cd-ink': ink,
|
||||
'--cd-size': `${size}px`,
|
||||
'--cd-figure': `${Math.round(size * 0.16)}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="absolute inset-0 block h-full w-full cursor-grab touch-none rounded-full outline-none group-data-[dragging]:cursor-grabbing group-data-[disabled]:pointer-events-none group-data-[disabled]:cursor-default"
|
||||
viewBox="0 0 200 200"
|
||||
role="slider"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-label={label}
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={target.current}
|
||||
aria-valuetext={`${target.current}${unit}`}
|
||||
aria-disabled={disabled || undefined}
|
||||
onPointerDown={down}
|
||||
onKeyDown={key}
|
||||
>
|
||||
<path
|
||||
className="fill-none opacity-[0.24] [stroke:var(--cd-ink)] [stroke-linecap:round]"
|
||||
d={arcPath(start, end)}
|
||||
strokeWidth={thickness}
|
||||
/>
|
||||
<path
|
||||
ref={litRef}
|
||||
className="fill-none opacity-70 [stroke:var(--cd-accent)] [stroke-linecap:round]"
|
||||
strokeWidth={thickness}
|
||||
/>
|
||||
<g className="[&_path]:fill-none [&_path]:[stroke:var(--cd-accent)] [&_path]:[stroke-linecap:round]">
|
||||
{Array.from({ length: K }, (_, j) => (
|
||||
<path
|
||||
key={j}
|
||||
ref={el => {
|
||||
comet.current[j] = el;
|
||||
}}
|
||||
style={{ opacity: 0 }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
<circle ref={headRef} className="[fill:var(--cd-accent)]" r={thickness * 1.8} />
|
||||
</svg>
|
||||
<div className="pointer-events-none absolute inset-0 grid place-items-center" aria-hidden="true">
|
||||
<span className="inline-flex items-baseline gap-[0.06em] leading-none font-medium tracking-[-0.04em] tabular-nums [font-size:var(--cd-figure)]">
|
||||
<span ref={figure} className="comet-dial__figure" />
|
||||
{unit ? <span className="text-[0.5em] opacity-50">{unit}</span> : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CometDial;
|
||||
@@ -0,0 +1,322 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Archive02Icon, Tick02Icon, Undo02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
export type FusePosition = 'outline' | 'bottom' | 'top';
|
||||
export type FuseCommitOn = 'press' | 'fuseEnd';
|
||||
export type FuseSettle = 'reset' | 'stay';
|
||||
export type FusePhase = 'idle' | 'armed' | 'settled';
|
||||
export type FuseSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
export interface FuseButtonProps {
|
||||
label?: string;
|
||||
undoLabel?: string;
|
||||
doneLabel?: string;
|
||||
icon?: ReactNode;
|
||||
color?: string;
|
||||
background?: string;
|
||||
fuseColor?: string;
|
||||
size?: FuseSize;
|
||||
radius?: number;
|
||||
undoWindow?: number;
|
||||
fuse?: FusePosition;
|
||||
fuseThickness?: number;
|
||||
crossfadeMs?: number;
|
||||
commitOn?: FuseCommitOn;
|
||||
pauseOnHover?: boolean;
|
||||
settle?: FuseSettle;
|
||||
disabled?: boolean;
|
||||
onCommit?: (reason: FuseCommitOn) => void;
|
||||
onUndo?: () => void;
|
||||
onFuseEnd?: () => void;
|
||||
onPhaseChange?: (phase: FusePhase) => void;
|
||||
className?: string;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
}
|
||||
|
||||
interface Latest {
|
||||
onCommit?: (reason: FuseCommitOn) => void;
|
||||
onUndo?: () => void;
|
||||
onFuseEnd?: () => void;
|
||||
onPhaseChange?: (phase: FusePhase) => void;
|
||||
commitOn: FuseCommitOn;
|
||||
settle: FuseSettle;
|
||||
}
|
||||
|
||||
const LINE: Keyframe[] = [{ transform: 'scaleX(1)' }, { transform: 'scaleX(0)' }];
|
||||
const OUTLINE: Keyframe[] = [{ strokeDashoffset: 0 }, { strokeDashoffset: -1 }];
|
||||
const SIZES: Record<FuseSize, { height: number; font: number; icon: number; px: number }> = {
|
||||
sm: { height: 36, font: 13, icon: 14, px: 16 },
|
||||
md: { height: 44, font: 14, icon: 15, px: 20 },
|
||||
lg: { height: 52, font: 15, icon: 17, px: 24 }
|
||||
};
|
||||
|
||||
const FuseButton: React.FC<FuseButtonProps> = ({
|
||||
label = 'Archive',
|
||||
undoLabel = 'Undo',
|
||||
doneLabel = 'Archived',
|
||||
icon,
|
||||
color = '#f5f5f5',
|
||||
background = '#27272a',
|
||||
fuseColor = '#f5a524',
|
||||
size = 'md',
|
||||
radius = 22,
|
||||
undoWindow = 4000,
|
||||
fuse = 'outline',
|
||||
fuseThickness = 1.5,
|
||||
crossfadeMs = 200,
|
||||
commitOn = 'press',
|
||||
pauseOnHover = true,
|
||||
settle = 'reset',
|
||||
disabled = false,
|
||||
onCommit,
|
||||
onUndo,
|
||||
onFuseEnd,
|
||||
onPhaseChange,
|
||||
className = '',
|
||||
type = 'button'
|
||||
}) => {
|
||||
const [phase, setPhase] = useState<FusePhase>('idle');
|
||||
const [instant, setInstant] = useState(false);
|
||||
const rootRef = useRef<HTMLSpanElement>(null);
|
||||
const idleRef = useRef<HTMLButtonElement>(null);
|
||||
const undoRef = useRef<HTMLButtonElement>(null);
|
||||
const lineRef = useRef<HTMLElement>(null);
|
||||
const rimRef = useRef<SVGRectElement>(null);
|
||||
const anim = useRef<Animation | null>(null);
|
||||
const pause = useRef({ hover: false, hidden: false, canHoverPause: false });
|
||||
const lastInput = useRef<'pointer' | 'keyboard'>('pointer');
|
||||
const windowRef = useRef(undoWindow);
|
||||
const latest = useRef<Latest>({ commitOn, settle });
|
||||
latest.current = { onCommit, onUndo, onFuseEnd, onPhaseChange, commitOn, settle };
|
||||
const statusId = useId();
|
||||
const preset = SIZES[size] || SIZES.md;
|
||||
|
||||
const go = (next: FusePhase) => {
|
||||
setInstant(lastInput.current === 'keyboard');
|
||||
setPhase(next);
|
||||
latest.current.onPhaseChange?.(next);
|
||||
};
|
||||
|
||||
const syncPlayState = () => {
|
||||
const a = anim.current;
|
||||
if (!a) return;
|
||||
const { hover, hidden } = pause.current;
|
||||
if (hover || hidden) {
|
||||
if (a.playState === 'running') a.pause();
|
||||
} else if (a.playState === 'paused') {
|
||||
a.play();
|
||||
}
|
||||
};
|
||||
|
||||
const light = (from = 0) => {
|
||||
const el = fuse === 'outline' ? rimRef.current : lineRef.current;
|
||||
if (!el) return;
|
||||
anim.current?.cancel();
|
||||
const a = el.animate(fuse === 'outline' ? OUTLINE : LINE, {
|
||||
duration: windowRef.current,
|
||||
easing: 'linear',
|
||||
fill: 'forwards'
|
||||
});
|
||||
if (from) a.currentTime = from;
|
||||
a.onfinish = () => {
|
||||
const l = latest.current;
|
||||
l.onFuseEnd?.();
|
||||
if (l.commitOn === 'fuseEnd') l.onCommit?.('fuseEnd');
|
||||
lastInput.current = 'pointer';
|
||||
go(l.settle === 'stay' ? 'settled' : 'idle');
|
||||
};
|
||||
anim.current = a;
|
||||
syncPlayState();
|
||||
};
|
||||
|
||||
const arm = () => {
|
||||
if (disabled || phase !== 'idle') return;
|
||||
windowRef.current = undoWindow;
|
||||
light();
|
||||
pause.current.canHoverPause = false;
|
||||
pause.current.hover = false;
|
||||
if (commitOn === 'press') onCommit?.('press');
|
||||
go('armed');
|
||||
};
|
||||
|
||||
const undo = () => {
|
||||
if (phase !== 'armed') return;
|
||||
const a = anim.current;
|
||||
if (a) {
|
||||
a.onfinish = null;
|
||||
a.pause();
|
||||
}
|
||||
onUndo?.();
|
||||
go('idle');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const inside = rootRef.current?.contains(document.activeElement);
|
||||
if (phase === 'armed') undoRef.current?.focus({ preventScroll: true });
|
||||
else if (inside) (phase === 'idle' ? idleRef.current : rootRef.current)?.focus({ preventScroll: true });
|
||||
}, [phase]);
|
||||
|
||||
useEffect(() => {
|
||||
const onVisibility = () => {
|
||||
pause.current.hidden = document.hidden;
|
||||
syncPlayState();
|
||||
};
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
anim.current?.cancel();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const a = anim.current;
|
||||
if (!a || phase !== 'armed') return;
|
||||
light(Number(a.currentTime) || 0);
|
||||
}, [fuse]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pauseOnHover) return;
|
||||
pause.current.hover = false;
|
||||
syncPlayState();
|
||||
}, [pauseOnHover]);
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLSpanElement>) => {
|
||||
lastInput.current = 'pointer';
|
||||
const pressable = phase === 'armed' || (phase === 'idle' && !disabled);
|
||||
if (e.button === 0 && pressable && rootRef.current) rootRef.current.dataset.pressed = '';
|
||||
};
|
||||
const release = () => {
|
||||
if (rootRef.current) delete rootRef.current.dataset.pressed;
|
||||
};
|
||||
const handlePointerEnter = (e: React.PointerEvent<HTMLSpanElement>) => {
|
||||
if (pauseOnHover && e.pointerType === 'mouse' && pause.current.canHoverPause) {
|
||||
pause.current.hover = true;
|
||||
syncPlayState();
|
||||
}
|
||||
};
|
||||
const handlePointerLeave = (e: React.PointerEvent<HTMLSpanElement>) => {
|
||||
release();
|
||||
if (e.pointerType !== 'mouse') return;
|
||||
pause.current.canHoverPause = true;
|
||||
pause.current.hover = false;
|
||||
syncPlayState();
|
||||
};
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') lastInput.current = 'keyboard';
|
||||
if (e.key === 'Escape' && phase === 'armed') {
|
||||
e.preventDefault();
|
||||
lastInput.current = 'keyboard';
|
||||
undo();
|
||||
}
|
||||
};
|
||||
|
||||
const actionIcon = icon ?? <HugeiconsIcon icon={Archive02Icon} size={preset.icon} strokeWidth={1.8} />;
|
||||
const line = (
|
||||
<i
|
||||
ref={lineRef}
|
||||
className="pointer-events-none absolute inset-x-0 bottom-0 h-[var(--fb-fuse-h)] origin-left [background:var(--fb-fuse)] [box-shadow:0_0_6px_color-mix(in_srgb,var(--fb-fuse)_55%,transparent)] group-data-[fuse=top]:top-0 group-data-[fuse=top]:bottom-auto forced-colors:[background:Highlight]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={rootRef}
|
||||
tabIndex={-1}
|
||||
className={`group relative inline-grid h-[var(--fb-h)] grid-cols-[minmax(0,1fr)] isolate touch-manipulation select-none overflow-hidden rounded-[var(--fb-radius)] font-medium leading-none tracking-[0.01em] outline-none [font-family:inherit] [font-size:var(--fb-fs)] [background:var(--fb-bg)] [color:var(--fb-ink)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] [transition:transform_160ms_var(--fb-ease-out)] data-[pressed]:[transform:scale(var(--fb-press))] motion-reduce:data-[pressed]:[transform:none] has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-solid has-[:focus-visible]:outline-offset-[3px] has-[:focus-visible]:[outline-color:color-mix(in_srgb,var(--fb-ink)_60%,transparent)] data-[phase=idle]:has-[.fb-idle:disabled]:opacity-[0.55] contrast-more:[box-shadow:inset_0_0_0_1px_color-mix(in_srgb,var(--fb-ink)_40%,transparent)]${className ? ` ${className}` : ''}`}
|
||||
data-phase={phase}
|
||||
data-fuse={fuse}
|
||||
data-instant={instant ? '' : undefined}
|
||||
aria-disabled={phase === 'settled' || undefined}
|
||||
style={
|
||||
{
|
||||
'--fb-ink': color,
|
||||
'--fb-bg': background,
|
||||
'--fb-fuse': fuseColor,
|
||||
'--fb-fuse-h': `${fuseThickness}px`,
|
||||
'--fb-radius': `${radius}px`,
|
||||
'--fb-fade': `${crossfadeMs}ms`,
|
||||
'--fb-h': `${preset.height}px`,
|
||||
'--fb-fs': `${preset.font}px`,
|
||||
'--fb-icon': `${preset.icon}px`,
|
||||
'--fb-px': `${preset.px}px`,
|
||||
'--fb-press': 0.97,
|
||||
'--fb-ease-out': 'cubic-bezier(0.23, 1, 0.32, 1)'
|
||||
} as CSSProperties
|
||||
}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerUp={release}
|
||||
onPointerCancel={release}
|
||||
onPointerEnter={handlePointerEnter}
|
||||
onPointerLeave={handlePointerLeave}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<button
|
||||
ref={idleRef}
|
||||
type={type}
|
||||
className="fb-idle relative [grid-area:1/1] inline-flex h-full w-full min-w-0 items-center justify-center gap-2 m-0 border-0 bg-transparent px-[var(--fb-px)] whitespace-nowrap cursor-pointer invisible opacity-0 [filter:blur(2px)] [color:inherit] [font:inherit] [letter-spacing:inherit] [transition:opacity_var(--fb-fade)_ease,filter_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade),background-color_160ms_ease] motion-reduce:[filter:none] motion-reduce:[transition:opacity_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade)] group-data-[instant]:[transition-duration:0s] group-data-[phase=idle]:visible group-data-[phase=idle]:opacity-100 group-data-[phase=idle]:[filter:blur(0)] group-data-[phase=idle]:[transition-delay:0s] disabled:cursor-default focus-visible:outline-none [@media(hover:hover)_and_(pointer:fine)]:enabled:hover:[background:color-mix(in_srgb,var(--fb-ink)_7%,transparent)]"
|
||||
disabled={disabled}
|
||||
inert={phase !== 'idle'}
|
||||
onClick={arm}
|
||||
>
|
||||
<span
|
||||
className="inline-flex h-[var(--fb-icon)] w-[var(--fb-icon)] [&>svg]:h-full [&>svg]:w-full"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{actionIcon}
|
||||
</span>
|
||||
{label}
|
||||
</button>
|
||||
<button
|
||||
ref={undoRef}
|
||||
type="button"
|
||||
className="relative [grid-area:1/1] inline-flex h-full w-full min-w-0 items-center justify-center gap-2 m-0 border-0 bg-transparent px-[var(--fb-px)] whitespace-nowrap cursor-pointer invisible opacity-0 [filter:blur(2px)] [color:inherit] [font:inherit] [letter-spacing:inherit] [transition:opacity_var(--fb-fade)_ease,filter_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade),background-color_160ms_ease] motion-reduce:[filter:none] motion-reduce:[transition:opacity_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade)] group-data-[instant]:[transition-duration:0s] group-data-[phase=armed]:visible group-data-[phase=armed]:opacity-100 group-data-[phase=armed]:[filter:blur(0)] group-data-[phase=armed]:[transition-delay:0s] focus-visible:outline-none [@media(hover:hover)_and_(pointer:fine)]:hover:[background:color-mix(in_srgb,var(--fb-ink)_7%,transparent)]"
|
||||
aria-describedby={statusId}
|
||||
aria-keyshortcuts="Escape"
|
||||
inert={phase !== 'armed'}
|
||||
onClick={undo}
|
||||
>
|
||||
<span
|
||||
className="inline-flex h-[var(--fb-icon)] w-[var(--fb-icon)] [&>svg]:h-full [&>svg]:w-full [transform:rotate(-70deg)] [transition:transform_var(--fb-fade)_var(--fb-ease-out)] group-data-[phase=armed]:[transform:rotate(0deg)] motion-reduce:transition-none motion-reduce:[transform:none]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<HugeiconsIcon icon={Undo02Icon} size={preset.icon} strokeWidth={2} />
|
||||
</span>
|
||||
{undoLabel}
|
||||
{fuse !== 'outline' ? line : null}
|
||||
</button>
|
||||
<span
|
||||
className="relative [grid-area:1/1] inline-flex h-full w-full min-w-0 items-center justify-center gap-2 m-0 border-0 bg-transparent px-[var(--fb-px)] whitespace-nowrap cursor-pointer invisible opacity-0 [filter:blur(2px)] [color:inherit] [font:inherit] [letter-spacing:inherit] [transition:opacity_var(--fb-fade)_ease,filter_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade),background-color_160ms_ease] motion-reduce:[filter:none] motion-reduce:[transition:opacity_var(--fb-fade)_ease,visibility_0s_linear_var(--fb-fade)] group-data-[instant]:[transition-duration:0s] group-data-[phase=settled]:visible group-data-[phase=settled]:opacity-100 group-data-[phase=settled]:[filter:blur(0)] group-data-[phase=settled]:[transition-delay:0s] cursor-default"
|
||||
inert={phase !== 'settled'}
|
||||
>
|
||||
<span
|
||||
className="inline-flex h-[var(--fb-icon)] w-[var(--fb-icon)] [&>svg]:h-full [&>svg]:w-full"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<HugeiconsIcon icon={Tick02Icon} size={preset.icon} strokeWidth={2.2} />
|
||||
</span>
|
||||
{doneLabel}
|
||||
</span>
|
||||
{fuse === 'outline' ? (
|
||||
<svg
|
||||
className="pointer-events-none absolute inset-0 h-full w-full overflow-visible opacity-0 [filter:drop-shadow(0_0_3px_color-mix(in_srgb,var(--fb-fuse)_60%,transparent))] [transition:opacity_var(--fb-fade)_ease] group-data-[phase=armed]:opacity-100 group-data-[instant]:[transition-duration:0s]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect
|
||||
ref={rimRef}
|
||||
pathLength="1"
|
||||
className="fill-none [x:calc(var(--fb-fuse-h)/2)] [y:calc(var(--fb-fuse-h)/2)] [width:calc(100%-var(--fb-fuse-h))] [height:calc(100%-var(--fb-fuse-h))] [rx:max(0px,calc(var(--fb-radius)-var(--fb-fuse-h)/2))] [stroke:var(--fb-fuse)] [stroke-width:var(--fb-fuse-h)] [stroke-linecap:round] [stroke-dasharray:1] forced-colors:[stroke:Highlight]"
|
||||
/>
|
||||
</svg>
|
||||
) : null}
|
||||
<span className="sr-only" id={statusId} role="status" aria-live="polite">
|
||||
{phase === 'idle' ? '' : doneLabel}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default FuseButton;
|
||||
@@ -0,0 +1,358 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
|
||||
export type HoldButtonSize = 'sm' | 'md' | 'lg';
|
||||
export type HoldButtonDirection = 'right' | 'up';
|
||||
|
||||
export interface HoldButtonProps {
|
||||
children?: ReactNode;
|
||||
doneLabel?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
doneIcon?: ReactNode;
|
||||
backgroundColor?: string;
|
||||
fillColor?: string;
|
||||
textColor?: string;
|
||||
fillTextColor?: string;
|
||||
size?: HoldButtonSize;
|
||||
radius?: number;
|
||||
fillDirection?: HoldButtonDirection;
|
||||
holdTime?: number;
|
||||
releaseTime?: number;
|
||||
pressScale?: number;
|
||||
wave?: boolean;
|
||||
waveAmplitude?: number;
|
||||
glow?: boolean;
|
||||
resetAfter?: number;
|
||||
disabled?: boolean;
|
||||
onHold?: () => void;
|
||||
onTap?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type Phase = 'idle' | 'holding' | 'done';
|
||||
type Input = 'pointer' | 'key' | null;
|
||||
|
||||
interface Motion {
|
||||
raf: number;
|
||||
p: number;
|
||||
from: number;
|
||||
to: number;
|
||||
start: number;
|
||||
}
|
||||
|
||||
interface Gesture {
|
||||
pointerId: number | null;
|
||||
start: number;
|
||||
rect: DOMRect | null;
|
||||
}
|
||||
|
||||
interface ReleaseOptions {
|
||||
drifted?: boolean;
|
||||
}
|
||||
|
||||
const TAP_MS = 250;
|
||||
const HIT_PAD = 10;
|
||||
const LINEAR = (t: number) => t;
|
||||
const EASE_OUT = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
|
||||
const SIZES: Record<HoldButtonSize, string> = {
|
||||
sm: 'h-9 px-4 text-[13px]',
|
||||
md: 'h-11 px-[22px] text-[15px]',
|
||||
lg: 'h-[52px] px-7 text-[17px]'
|
||||
};
|
||||
|
||||
const GLOW = 'inset_0_1px_0_rgba(255,255,255,0.06),0_10px_32px_-6px_color-mix(in_srgb,var(--hb-fill)_70%,transparent)';
|
||||
|
||||
const LABEL_SPAN =
|
||||
'[grid-area:1/1] inline-flex items-center gap-2 whitespace-nowrap [transition:opacity_200ms_ease,filter_200ms_ease]';
|
||||
|
||||
const STYLE = `
|
||||
.hb-root{--hb-w:0px;--hb-h:0px;--hb-cycles:2;--hb-p:0}
|
||||
.hb-fill{clip-path:inset(0 calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0)}
|
||||
.hb-root[data-direction=up] .hb-fill{clip-path:inset(calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0 0)}
|
||||
.hb-crest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:var(--hb-wave) calc(var(--hb-h) * 2);mask-size:var(--hb-wave) calc(var(--hb-h) * 2);-webkit-mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));-webkit-mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h))}
|
||||
.hb-root[data-direction=up] .hb-crest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:calc(var(--hb-w) * 2) var(--hb-wave);mask-size:calc(var(--hb-w) * 2) var(--hb-wave);-webkit-mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));-webkit-mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)));mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)))}
|
||||
@keyframes hb-pulse{from{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--hb-fill) 55%,transparent)}to{opacity:0;box-shadow:0 0 0 14px color-mix(in srgb,var(--hb-fill) 0%,transparent)}}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.hb-root{transform:none!important;transition:background-color 160ms ease,box-shadow var(--hb-release) ease!important}
|
||||
.hb-fill{clip-path:inset(0)!important;opacity:0;transition:opacity var(--hb-release) ease!important}
|
||||
.hb-crest{display:none}
|
||||
.hb-root[data-phase=holding] .hb-fill,.hb-root[data-phase=done] .hb-fill{opacity:1;transition:opacity var(--hb-hold) linear!important}
|
||||
.hb-pulse{animation:none!important}
|
||||
.hb-label>span{filter:none!important;transition:opacity 200ms ease!important}
|
||||
}`;
|
||||
|
||||
const HoldButton: React.FC<HoldButtonProps> = ({
|
||||
children = 'Hold to delete',
|
||||
doneLabel = 'Deleted',
|
||||
icon = null,
|
||||
doneIcon = null,
|
||||
backgroundColor = '#27272a',
|
||||
fillColor = '#5227FF',
|
||||
textColor = '#f5f5f5',
|
||||
fillTextColor = '#ffffff',
|
||||
size = 'md',
|
||||
radius = 14,
|
||||
fillDirection = 'right',
|
||||
holdTime = 2000,
|
||||
releaseTime = 200,
|
||||
pressScale = 0.97,
|
||||
wave = true,
|
||||
waveAmplitude = 6,
|
||||
glow = true,
|
||||
resetAfter = 1200,
|
||||
disabled = false,
|
||||
onHold,
|
||||
onTap,
|
||||
className = ''
|
||||
}) => {
|
||||
const [phase, setPhase] = useState<Phase>('idle');
|
||||
const [input, setInput] = useState<Input>(null);
|
||||
const phaseRef = useRef<Phase>('idle');
|
||||
const inputRef = useRef<Input>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const gesture = useRef<Gesture>({ pointerId: null, start: 0, rect: null });
|
||||
const timers = useRef({ complete: 0, reset: 0 });
|
||||
const hintId = useId();
|
||||
|
||||
const go = (next: Phase, kind: Input = null) => {
|
||||
phaseRef.current = next;
|
||||
inputRef.current = kind;
|
||||
setPhase(next);
|
||||
setInput(kind);
|
||||
};
|
||||
|
||||
const clearTimers = () => {
|
||||
clearTimeout(timers.current.complete);
|
||||
clearTimeout(timers.current.reset);
|
||||
};
|
||||
|
||||
const motion = useRef<Motion>({ raf: 0, p: 0, from: 0, to: 0, start: 0 });
|
||||
const drive = (to: number, duration: number, ease: (t: number) => number) => {
|
||||
const m = motion.current;
|
||||
cancelAnimationFrame(m.raf);
|
||||
m.from = m.p;
|
||||
m.to = to;
|
||||
m.start = performance.now();
|
||||
const step = (now: number) => {
|
||||
const t = duration > 0 ? Math.min(1, (now - m.start) / duration) : 1;
|
||||
m.p = m.from + (m.to - m.from) * ease(t);
|
||||
buttonRef.current?.style.setProperty('--hb-p', m.p.toFixed(4));
|
||||
if (t < 1) {
|
||||
m.raf = requestAnimationFrame(step);
|
||||
return;
|
||||
}
|
||||
m.raf = 0;
|
||||
if (m.to === 1) complete();
|
||||
};
|
||||
m.raf = requestAnimationFrame(step);
|
||||
};
|
||||
|
||||
const complete = () => {
|
||||
if (phaseRef.current !== 'holding') return;
|
||||
if (performance.now() - gesture.current.start < holdTime - 50) return;
|
||||
clearTimers();
|
||||
go('done', inputRef.current);
|
||||
onHold?.();
|
||||
if (resetAfter > 0) {
|
||||
timers.current.reset = window.setTimeout(() => {
|
||||
go('idle');
|
||||
drive(0, releaseTime, EASE_OUT);
|
||||
}, resetAfter);
|
||||
}
|
||||
};
|
||||
|
||||
const begin = (kind: Input) => {
|
||||
if (disabled || phaseRef.current !== 'idle') return false;
|
||||
const button = buttonRef.current;
|
||||
if (!button) return false;
|
||||
gesture.current.start = performance.now();
|
||||
gesture.current.rect = button.getBoundingClientRect();
|
||||
go('holding', kind);
|
||||
drive(1, holdTime, LINEAR);
|
||||
timers.current.complete = window.setTimeout(complete, holdTime + 100);
|
||||
return true;
|
||||
};
|
||||
|
||||
const release = ({ drifted = false }: ReleaseOptions = {}) => {
|
||||
if (phaseRef.current !== 'holding') return;
|
||||
clearTimers();
|
||||
const held = performance.now() - gesture.current.start;
|
||||
go('idle');
|
||||
drive(0, releaseTime, EASE_OUT);
|
||||
if (!drifted && held < TAP_MS) onTap?.();
|
||||
};
|
||||
const releaseRef = useRef(release);
|
||||
releaseRef.current = release;
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.button !== 0 || !e.isPrimary || gesture.current.pointerId !== null) return;
|
||||
if (!begin('pointer')) return;
|
||||
gesture.current.pointerId = e.pointerId;
|
||||
try {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const endPointer = (e: React.PointerEvent<HTMLButtonElement>, options?: ReleaseOptions) => {
|
||||
if (e.pointerId !== gesture.current.pointerId) return;
|
||||
gesture.current.pointerId = null;
|
||||
try {
|
||||
if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
release(options);
|
||||
};
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.pointerId !== gesture.current.pointerId) return;
|
||||
const r = gesture.current.rect;
|
||||
if (!r) return;
|
||||
const out =
|
||||
e.clientX < r.left - HIT_PAD ||
|
||||
e.clientX > r.right + HIT_PAD ||
|
||||
e.clientY < r.top - HIT_PAD ||
|
||||
e.clientY > r.bottom + HIT_PAD;
|
||||
if (out) endPointer(e, { drifted: true });
|
||||
};
|
||||
|
||||
const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.pointerType !== 'touch') endPointer(e, { drifted: true });
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (inputRef.current === 'key') release({ drifted: true });
|
||||
return;
|
||||
}
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (!e.repeat) begin('key');
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (inputRef.current === 'key') release();
|
||||
}
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const button = buttonRef.current;
|
||||
if (!button) return undefined;
|
||||
const measure = () => {
|
||||
button.style.setProperty('--hb-w', `${button.offsetWidth}px`);
|
||||
button.style.setProperty('--hb-h', `${button.offsetHeight}px`);
|
||||
};
|
||||
measure();
|
||||
const ro = new ResizeObserver(measure);
|
||||
ro.observe(button);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (phase !== 'holding') return undefined;
|
||||
const cancel = () => releaseRef.current({ drifted: true });
|
||||
const onVisibility = () => {
|
||||
if (document.hidden) cancel();
|
||||
};
|
||||
window.addEventListener('blur', cancel);
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
return () => {
|
||||
window.removeEventListener('blur', cancel);
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
};
|
||||
}, [phase]);
|
||||
|
||||
useEffect(() => {
|
||||
const t = timers.current;
|
||||
const m = motion.current;
|
||||
return () => {
|
||||
clearTimeout(t.complete);
|
||||
clearTimeout(t.reset);
|
||||
cancelAnimationFrame(m.raf);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const direction: HoldButtonDirection = fillDirection === 'up' ? 'up' : 'right';
|
||||
const labels = (
|
||||
<>
|
||||
<span
|
||||
className={`${LABEL_SPAN} group-data-[phase=done]:opacity-0 group-data-[phase=done]:blur-[2px]`}
|
||||
aria-hidden={phase === 'done'}
|
||||
>
|
||||
{icon ? <span className="inline-flex flex-none [&>svg]:block">{icon}</span> : null}
|
||||
{children}
|
||||
</span>
|
||||
<span
|
||||
className={`${LABEL_SPAN} opacity-0 blur-[2px] group-data-[phase=done]:opacity-100 group-data-[phase=done]:blur-0`}
|
||||
aria-hidden={phase !== 'done'}
|
||||
>
|
||||
{doneIcon ? <span className="inline-flex flex-none [&>svg]:block">{doneIcon}</span> : null}
|
||||
{doneLabel}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
||||
const cssVars = {
|
||||
'--hb-radius': `${radius}px`,
|
||||
'--hb-bg': backgroundColor,
|
||||
'--hb-fill': fillColor,
|
||||
'--hb-text': textColor,
|
||||
'--hb-fill-text': fillTextColor,
|
||||
'--hb-hold': `${holdTime}ms`,
|
||||
'--hb-cycles': holdTime / 1100,
|
||||
'--hb-release': `${releaseTime}ms`,
|
||||
'--hb-press': pressScale,
|
||||
'--hb-wave': `${wave ? waveAmplitude : 0}px`,
|
||||
'--hb-ease-out': 'cubic-bezier(0.23, 1, 0.32, 1)'
|
||||
} as CSSProperties;
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className={`hb-root group relative isolate m-0 inline-grid cursor-pointer touch-manipulation select-none place-items-center border-0 font-medium leading-none tracking-[0.01em] outline-none [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [background:var(--hb-bg)] [border-radius:var(--hb-radius)] [color:var(--hb-text)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] [transition:transform_160ms_var(--hb-ease-out),background-color_160ms_ease,box-shadow_var(--hb-release)_var(--hb-ease-out)] [@media(hover:hover)_and_(pointer:fine)]:enabled:hover:[background:color-mix(in_srgb,var(--hb-bg)_92%,#fff)] data-[phase=holding]:data-[input=pointer]:[transform:scale(var(--hb-press))] data-[glow=true]:data-[phase=holding]:shadow-[${GLOW}] data-[glow=true]:data-[phase=done]:shadow-[${GLOW}] data-[glow=true]:data-[phase=holding]:[transition:transform_160ms_var(--hb-ease-out),background-color_160ms_ease,box-shadow_var(--hb-hold)_linear] focus-visible:[outline:2px_solid_var(--hb-fill)] focus-visible:outline-offset-[3px] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 contrast-more:[outline:1px_solid_var(--hb-text)] ${SIZES[size] || SIZES.md}${className ? ` ${className}` : ''}`}
|
||||
data-phase={phase}
|
||||
data-input={input ?? undefined}
|
||||
data-direction={direction}
|
||||
data-glow={glow ? 'true' : undefined}
|
||||
aria-describedby={hintId}
|
||||
style={cssVars}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={e => endPointer(e)}
|
||||
onPointerCancel={e => endPointer(e, { drifted: true })}
|
||||
onLostPointerCapture={e => endPointer(e, { drifted: true })}
|
||||
onPointerLeave={handlePointerLeave}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onContextMenu={e => e.preventDefault()}
|
||||
>
|
||||
<style>{STYLE}</style>
|
||||
<span
|
||||
className="hb-pulse pointer-events-none absolute inset-0 z-0 opacity-0 [border-radius:var(--hb-radius)] group-data-[glow=true]:group-data-[phase=done]:[animation:hb-pulse_600ms_var(--hb-ease-out)_forwards]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="hb-label relative z-[2] grid place-items-center">{labels}</span>
|
||||
<span
|
||||
className="pointer-events-none absolute inset-0 z-[3] [clip-path:inset(0_round_var(--hb-radius))]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="hb-fill absolute inset-0 grid place-items-center [background:var(--hb-fill)] [color:var(--hb-fill-text)]">
|
||||
<span className="hb-label grid place-items-center">{labels}</span>
|
||||
</span>
|
||||
<span className="hb-crest absolute inset-0 grid place-items-center [background:var(--hb-fill)] [color:var(--hb-fill-text)]">
|
||||
<span className="hb-label grid place-items-center">{labels}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span id={hintId} className="absolute h-px w-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]">
|
||||
Press and hold for {Math.round(holdTime / 100) / 10} seconds to confirm
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default HoldButton;
|
||||
@@ -0,0 +1,426 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import { animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from 'motion/react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { ArrowRight02Icon, Tick02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
export type SlideCommitPhase = 'idle' | 'pending' | 'done' | 'error';
|
||||
|
||||
export interface SlideCommitProps {
|
||||
label?: ReactNode;
|
||||
doneLabel?: ReactNode;
|
||||
errorLabel?: ReactNode;
|
||||
onConfirm?: () => void | Promise<unknown>;
|
||||
onDone?: () => void;
|
||||
onError?: (reason: unknown) => void;
|
||||
trackColor?: string;
|
||||
handleColor?: string;
|
||||
successColor?: string;
|
||||
dangerColor?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
radius?: number;
|
||||
speed?: number;
|
||||
returnBounce?: number;
|
||||
landingDip?: number;
|
||||
holdMs?: number;
|
||||
disabled?: boolean;
|
||||
icon?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type Sample = [number, number];
|
||||
type Grip = { id: number; grab: number | null; moved: boolean; hist: Sample[] };
|
||||
type MoveEvent = { pointerId: number; clientX: number; timeStamp: number };
|
||||
type UpEvent = { pointerId: number };
|
||||
|
||||
const PAD = 4;
|
||||
const SQUASH_MAX = 0.08;
|
||||
const SQUASH_DIV = 110;
|
||||
const SWELL = 1.03;
|
||||
const MIN_PENDING = 300;
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
const SHAKE = [0, -5, 5, -3, 3, -1, 0];
|
||||
const STYLE = `
|
||||
@keyframes sc-spin { to { transform: rotate(360deg); } }
|
||||
.sc-spinner { animation: sc-spin 1s linear infinite; animation-play-state: paused; }
|
||||
.sc-root[data-phase='pending'] .sc-spinner { animation-play-state: running; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sc-spinner { animation: sc-breathe 1.4s ease-in-out infinite; animation-play-state: paused; }
|
||||
.sc-root[data-phase='pending'] .sc-spinner { animation-play-state: running; }
|
||||
@keyframes sc-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
}
|
||||
`;
|
||||
|
||||
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
||||
const onColor = (hex: string) => {
|
||||
const raw = hex.replace('#', '');
|
||||
const full = raw.length === 3 ? [...raw].map(ch => ch + ch).join('') : raw.slice(0, 6);
|
||||
const n = parseInt(full, 16);
|
||||
if (Number.isNaN(n)) return '#ffffff';
|
||||
const yiq = (((n >> 16) & 255) * 299 + ((n >> 8) & 255) * 587 + (n & 255) * 114) / 1000;
|
||||
return yiq >= 128 ? '#111111' : '#ffffff';
|
||||
};
|
||||
const velocityOf = (hist: Sample[]) => {
|
||||
if (hist.length < 2) return 0;
|
||||
const [t0, x0] = hist[0];
|
||||
const [t1, x1] = hist[hist.length - 1];
|
||||
return ((x1 - x0) / Math.max(1, t1 - t0)) * 1000;
|
||||
};
|
||||
const finePointer = () =>
|
||||
typeof window !== 'undefined' && !!window.matchMedia?.('(hover: hover) and (pointer: fine)').matches;
|
||||
|
||||
const Spinner = ({ size }: { size: number }) => (
|
||||
<svg className="sc-spinner block" width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="2.4" strokeOpacity="0.25" />
|
||||
<path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SlideCommit: React.FC<SlideCommitProps> = ({
|
||||
label = 'Slide to pay',
|
||||
doneLabel = 'Paid',
|
||||
errorLabel = 'Payment failed',
|
||||
onConfirm,
|
||||
onDone,
|
||||
onError,
|
||||
trackColor = '#262626',
|
||||
handleColor = '#f5f5f5',
|
||||
successColor = '#22c55e',
|
||||
dangerColor = '#e5484d',
|
||||
width = 280,
|
||||
height = 56,
|
||||
radius = 28,
|
||||
speed = 50,
|
||||
returnBounce = 0.38,
|
||||
landingDip = 0.026,
|
||||
holdMs = 1500,
|
||||
disabled = false,
|
||||
icon,
|
||||
className = ''
|
||||
}) => {
|
||||
const reduce = useReducedMotion();
|
||||
const [phase, setPhase] = useState<SlideCommitPhase>('idle');
|
||||
const [held, setHeld] = useState(false);
|
||||
const [hot, setHot] = useState(false);
|
||||
|
||||
const trackRef = useRef<HTMLDivElement>(null);
|
||||
const capsuleRef = useRef<HTMLDivElement>(null);
|
||||
const grip = useRef<Grip | null>(null);
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const homeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const run = useRef(0);
|
||||
const unwatch = useRef<(() => void) | null>(null);
|
||||
const live = useRef<{ move: (e: MoveEvent) => void; up: (e: UpEvent) => void }>({ move: () => {}, up: () => {} });
|
||||
const lastPercent = useRef(0);
|
||||
|
||||
const GRIP = height - PAD * 2;
|
||||
const INNER = width - PAD * 2;
|
||||
const TRAVEL = Math.max(1, INNER - GRIP);
|
||||
const r = clamp(radius, 0, height / 2);
|
||||
const gripR = Math.max(0, r - PAD);
|
||||
const k = 260 + (clamp(speed, 0, 100) / 100) * 640;
|
||||
const mass = 0.9;
|
||||
const critical = 2 * Math.sqrt(k * mass);
|
||||
const commitSpring = { type: 'spring' as const, stiffness: k, damping: critical, mass };
|
||||
const homeSpring = { ...commitSpring, damping: critical * (1 - clamp(returnBounce, 0, 0.5)) };
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const anchor = useMotionValue(0);
|
||||
const shown = useMotionValue(1);
|
||||
const spin = useMotionValue(0);
|
||||
const pulse = useMotionValue(1);
|
||||
const shake = useMotionValue(0);
|
||||
const seen = useTransform(x, v => clamp(v, 0, TRAVEL));
|
||||
const edge = useTransform([seen, anchor], ([v, a]: number[]) => v + GRIP + clamp(a - v, 0, TRAVEL));
|
||||
const clip = useTransform(edge, R => `inset(0 ${INNER - R}px 0 0 round ${gripR}px)`);
|
||||
const content = useTransform([seen, edge], ([v, R]: number[]) => `translateX(${(v + R) / 2 - INNER / 2}px)`);
|
||||
const swell = hot && !held && phase === 'idle' && !reduce ? SWELL : 1;
|
||||
const shape = useTransform(x, v => {
|
||||
const q = 1 - Math.min(SQUASH_MAX, Math.max(0, -v) / SQUASH_DIV);
|
||||
return `scale(${q * swell}, ${swell / q})`;
|
||||
});
|
||||
const origin = useTransform(seen, v => `${v}px 50%`);
|
||||
const say = useTransform(seen, [0, TRAVEL * 0.55], [1, 0]);
|
||||
const arrow = useTransform(
|
||||
[seen, shown],
|
||||
([v, on]: number[]) => on * clamp(1 - (v - TRAVEL * 0.55) / (TRAVEL * 0.4), 0, 1)
|
||||
);
|
||||
const trackTransform = useTransform([shake, pulse], ([s, p]: number[]) => `translateX(${s}px) scale(${p})`);
|
||||
|
||||
const labelText = typeof label === 'string' ? label : 'Slide to confirm';
|
||||
useMotionValueEvent(seen, 'change', v => {
|
||||
const percent = Math.round((v / TRAVEL) * 100);
|
||||
if (percent === lastPercent.current || !capsuleRef.current) return;
|
||||
lastPercent.current = percent;
|
||||
capsuleRef.current.setAttribute('aria-valuenow', String(percent));
|
||||
capsuleRef.current.setAttribute('aria-valuetext', `${labelText}, ${percent}%`);
|
||||
});
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearTimeout(timer.current);
|
||||
clearTimeout(homeTimer.current);
|
||||
unwatch.current?.();
|
||||
run.current += 1;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const local = (clientX: number) => {
|
||||
const rect = trackRef.current?.getBoundingClientRect();
|
||||
if (!rect) return 0;
|
||||
return (clientX - rect.left) / (rect.width / width || 1);
|
||||
};
|
||||
|
||||
const goHome = (velocity: number) => {
|
||||
if (reduce) animate(x, 0, { duration: 0.2, ease: EASE_OUT });
|
||||
else animate(x, 0, { ...homeSpring, velocity: Math.min(0, velocity) });
|
||||
};
|
||||
|
||||
const settle = () => {
|
||||
setPhase('idle');
|
||||
animate(shown, 1, { duration: 0.2, delay: 0.12 });
|
||||
if (reduce) anchor.set(0);
|
||||
else animate(anchor, 0, { type: 'spring', duration: 0.3, bounce: 0 });
|
||||
};
|
||||
|
||||
const resolve = (viaKey: boolean) => {
|
||||
setPhase('done');
|
||||
anchor.set(x.get());
|
||||
animate(spin, 0, { duration: 0.12 });
|
||||
if (reduce) x.set(0);
|
||||
else {
|
||||
animate(x, 0, commitSpring);
|
||||
if (!viaKey && landingDip > 0) {
|
||||
animate(pulse, [1, 1 - landingDip, 1], { duration: 0.46, times: [0, 0.62, 1], ease: EASE_OUT, delay: 0.1 });
|
||||
}
|
||||
}
|
||||
onDone?.();
|
||||
if (holdMs > 0) timer.current = setTimeout(settle, holdMs);
|
||||
};
|
||||
|
||||
const reject = (reason: unknown) => {
|
||||
setPhase('error');
|
||||
onError?.(reason);
|
||||
animate(spin, 0, { duration: 0.12 });
|
||||
animate(shown, 1, { duration: 0.2, delay: 0.12 });
|
||||
if (reduce) goHome(0);
|
||||
else {
|
||||
animate(shake, SHAKE, { duration: 0.45, ease: EASE_OUT });
|
||||
homeTimer.current = setTimeout(() => {
|
||||
if (!grip.current) goHome(0);
|
||||
}, 300);
|
||||
}
|
||||
timer.current = setTimeout(() => setPhase('idle'), Math.max(holdMs, 1500));
|
||||
};
|
||||
|
||||
const commit = (viaKey: boolean) => {
|
||||
clearTimeout(timer.current);
|
||||
const id = ++run.current;
|
||||
x.set(TRAVEL);
|
||||
let out: void | Promise<unknown>;
|
||||
try {
|
||||
out = onConfirm?.();
|
||||
} catch (reason) {
|
||||
reject(reason);
|
||||
return;
|
||||
}
|
||||
const pending = out && typeof out.then === 'function' ? out : null;
|
||||
if (!pending) {
|
||||
animate(shown, 0, { duration: 0.12 });
|
||||
resolve(viaKey);
|
||||
return;
|
||||
}
|
||||
setPhase('pending');
|
||||
animate(shown, 0, { duration: 0.2 });
|
||||
animate(spin, 1, { duration: 0.2 });
|
||||
const t0 = performance.now();
|
||||
const later = (fn: () => void) => {
|
||||
setTimeout(
|
||||
() => {
|
||||
if (id === run.current) fn();
|
||||
},
|
||||
Math.max(0, MIN_PENDING - (performance.now() - t0))
|
||||
);
|
||||
};
|
||||
pending.then(
|
||||
() => later(() => resolve(viaKey)),
|
||||
reason => later(() => reject(reason))
|
||||
);
|
||||
};
|
||||
|
||||
const down = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (disabled || grip.current || phase === 'pending' || phase === 'done' || e.button !== 0) return;
|
||||
x.stop();
|
||||
grip.current = { id: e.pointerId, grab: null, moved: false, hist: [] };
|
||||
setHeld(true);
|
||||
try {
|
||||
trackRef.current?.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
unwatch.current?.();
|
||||
const onMove = (ev: PointerEvent) => ev.isTrusted && live.current.move(ev);
|
||||
const onUp = (ev: PointerEvent) => ev.isTrusted && live.current.up(ev);
|
||||
window.addEventListener('pointermove', onMove);
|
||||
window.addEventListener('pointerup', onUp);
|
||||
window.addEventListener('pointercancel', onUp);
|
||||
unwatch.current = () => {
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerup', onUp);
|
||||
window.removeEventListener('pointercancel', onUp);
|
||||
unwatch.current = null;
|
||||
};
|
||||
};
|
||||
|
||||
const move = (e: MoveEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
const at = local(e.clientX);
|
||||
if (g.grab === null) {
|
||||
g.grab = at - x.get();
|
||||
return;
|
||||
}
|
||||
const next = clamp(at - g.grab, 0, TRAVEL);
|
||||
if (Math.abs(next - x.get()) > 0.5) g.moved = true;
|
||||
g.hist.push([e.timeStamp, next]);
|
||||
if (g.hist.length > 4) g.hist.shift();
|
||||
x.set(next);
|
||||
};
|
||||
|
||||
const up = (e: UpEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
grip.current = null;
|
||||
unwatch.current?.();
|
||||
try {
|
||||
trackRef.current?.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
setHeld(false);
|
||||
if (x.get() >= TRAVEL) commit(false);
|
||||
else if (g.moved) goHome(velocityOf(g.hist));
|
||||
};
|
||||
live.current = { move, up };
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (disabled || phase === 'pending' || phase === 'done') return;
|
||||
const step = TRAVEL / 10;
|
||||
if (e.key === 'End') {
|
||||
e.preventDefault();
|
||||
commit(true);
|
||||
} else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
const next = Math.min(TRAVEL, x.get() + step);
|
||||
x.set(next);
|
||||
if (next >= TRAVEL) commit(true);
|
||||
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
x.set(Math.max(0, x.get() - step));
|
||||
} else if (e.key === 'Home' || e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
if (grip.current) up({ pointerId: grip.current.id });
|
||||
else x.set(0);
|
||||
}
|
||||
};
|
||||
|
||||
const fontSize = clamp(Math.round(height * 0.25), 13, 17);
|
||||
const iconSize = Math.round(GRIP * 0.42);
|
||||
const done = phase === 'done';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`sc-root group relative inline-block align-middle [font-family:inherit] data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.55]${className ? ` ${className}` : ''}`}
|
||||
data-phase={phase}
|
||||
data-held={held ? '' : undefined}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
style={
|
||||
{
|
||||
width,
|
||||
height,
|
||||
'--sc-track': trackColor,
|
||||
'--sc-ink': handleColor,
|
||||
'--sc-ok': successColor,
|
||||
'--sc-no': dangerColor,
|
||||
'--sc-on-ink': onColor(handleColor),
|
||||
'--sc-on-ok': onColor(successColor),
|
||||
'--sc-on-no': onColor(dangerColor),
|
||||
'--sc-radius': `${r}px`,
|
||||
'--sc-grip-r': `${gripR}px`,
|
||||
'--sc-pad': `${PAD}px`,
|
||||
'--sc-font': `${fontSize}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<style>{STYLE}</style>
|
||||
<motion.div
|
||||
ref={trackRef}
|
||||
className="relative h-full w-full cursor-grab touch-none select-none [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] rounded-[var(--sc-radius)] [background:var(--sc-track)] group-data-[held]:cursor-grabbing group-data-[phase=pending]:cursor-default group-data-[phase=done]:cursor-default"
|
||||
style={{ transform: trackTransform }}
|
||||
onPointerDown={down}
|
||||
>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 grid place-items-center whitespace-nowrap font-medium leading-none tracking-[-0.006em] [font-size:var(--sc-font)]"
|
||||
style={{ opacity: say }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="[grid-area:1/1] [transition:opacity_200ms_ease,filter_200ms_ease] [color:color-mix(in_srgb,var(--sc-ink)_45%,transparent)] group-data-[phase=error]:opacity-0 group-data-[phase=error]:blur-[2px]">
|
||||
{label}
|
||||
</span>
|
||||
<span className="[grid-area:1/1] [transition:opacity_200ms_ease,filter_200ms_ease] [color:var(--sc-no)] opacity-0 blur-[2px] group-data-[phase=error]:opacity-100 group-data-[phase=error]:blur-none">
|
||||
{errorLabel}
|
||||
</span>
|
||||
</motion.span>
|
||||
<motion.div
|
||||
ref={capsuleRef}
|
||||
role="slider"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-label={labelText}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={0}
|
||||
aria-busy={phase === 'pending' || undefined}
|
||||
aria-disabled={disabled || undefined}
|
||||
className="absolute top-[var(--sc-pad)] left-[var(--sc-pad)] h-[calc(100%-var(--sc-pad)*2)] w-[calc(100%-var(--sc-pad)*2)] outline-none [background:var(--sc-ink)] [color:var(--sc-on-ink)] [transition:background-color_200ms_ease,color_200ms_ease] group-data-[phase=done]:[background:var(--sc-ok)] group-data-[phase=done]:[color:var(--sc-on-ok)] group-data-[phase=error]:[background:var(--sc-no)] group-data-[phase=error]:[color:var(--sc-on-no)] focus-visible:[box-shadow:inset_0_0_0_2px_var(--sc-track)]"
|
||||
style={{ clipPath: clip, transform: shape, transformOrigin: origin }}
|
||||
onPointerEnter={e => {
|
||||
if (e.pointerType === 'mouse' && finePointer()) setHot(true);
|
||||
}}
|
||||
onPointerLeave={() => setHot(false)}
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
<motion.div className="absolute inset-0" style={{ transform: content }}>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center gap-2 whitespace-nowrap font-semibold leading-none tracking-[-0.006em] [font-size:var(--sc-font)] [transition:filter_200ms_ease] group-data-[phase=pending]:blur-[2px] [&>svg]:block"
|
||||
style={{ opacity: arrow }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{icon ?? <HugeiconsIcon icon={ArrowRight02Icon} size={iconSize} strokeWidth={2} />}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center gap-2 whitespace-nowrap font-semibold leading-none tracking-[-0.006em] [font-size:var(--sc-font)] [transition:filter_200ms_ease] blur-[2px] group-data-[phase=pending]:blur-none"
|
||||
style={{ opacity: spin }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Spinner size={iconSize} />
|
||||
</motion.span>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center gap-2 whitespace-nowrap font-semibold leading-none tracking-[-0.006em] [font-size:var(--sc-font)] [&>svg]:block"
|
||||
aria-hidden="true"
|
||||
initial={false}
|
||||
animate={{ opacity: done ? 1 : 0, scale: done || reduce ? 1 : 0.95 }}
|
||||
transition={{ duration: 0.2, ease: EASE_OUT }}
|
||||
>
|
||||
<HugeiconsIcon icon={Tick02Icon} size={Math.round(GRIP * 0.38)} strokeWidth={2.5} />
|
||||
{doneLabel}
|
||||
</motion.span>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<span className="sr-only" aria-live="polite">
|
||||
{phase === 'pending' ? 'Working' : phase === 'done' ? doneLabel : phase === 'error' ? errorLabel : ''}
|
||||
</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SlideCommit;
|
||||
@@ -0,0 +1,490 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from 'motion/react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Delete02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
const HYST = 10;
|
||||
const FLICK = 110;
|
||||
const DECEL = 0.998;
|
||||
const VMAX = 1500;
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
const SPRING_UI = { type: 'spring' as const, duration: 0.3, bounce: 0 };
|
||||
const DEFAULT_ACTIONS: SwipeAction[] = [{ id: 'delete', label: 'Delete' }];
|
||||
|
||||
export interface SwipeAction {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
color?: string;
|
||||
dismiss?: boolean;
|
||||
onSelect?: () => void;
|
||||
}
|
||||
|
||||
export interface SwipeRowProps {
|
||||
children?: ReactNode;
|
||||
actions?: SwipeAction[];
|
||||
actionColor?: string;
|
||||
drawerColor?: string;
|
||||
rowColor?: string;
|
||||
textColor?: string;
|
||||
height?: number;
|
||||
radius?: number;
|
||||
actionWidth?: number;
|
||||
direction?: 'left' | 'right';
|
||||
snapBounce?: number;
|
||||
resistance?: number;
|
||||
collapseMs?: number;
|
||||
commitAt?: number;
|
||||
fullSwipe?: boolean;
|
||||
disabled?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onAction?: (action: SwipeAction) => void;
|
||||
onCommit?: (action: SwipeAction) => void;
|
||||
closeOnAction?: boolean;
|
||||
haptic?: boolean;
|
||||
label?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
type Sample = [number, number];
|
||||
type Phase = 'idle' | 'committing' | 'collapsing';
|
||||
|
||||
interface Grip {
|
||||
id: number;
|
||||
x0: number;
|
||||
y0: number;
|
||||
grab: number | null;
|
||||
moved: boolean;
|
||||
hist: Sample[];
|
||||
touch: boolean;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
move: (e: PointerEvent) => void;
|
||||
up: (e: PointerEvent) => void;
|
||||
}
|
||||
|
||||
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
|
||||
const rubber = (o: number, dim: number, c: number) => (o * dim * c) / (dim + c * Math.abs(o));
|
||||
const unrubber = (y: number, dim: number, c: number) => (y * dim) / (c * Math.max(1, dim - Math.abs(y)));
|
||||
const project = (v: number) => ((v / 1000) * DECEL) / (1 - DECEL);
|
||||
const velocityOf = (hist: Sample[]) => {
|
||||
if (hist.length < 2) return 0;
|
||||
const a = hist[0];
|
||||
const b = hist[hist.length - 1];
|
||||
return ((b[1] - a[1]) / Math.max(1, b[0] - a[0])) * 1000;
|
||||
};
|
||||
const onColor = (hex: string) => {
|
||||
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
|
||||
if (!m) return '#ffffff';
|
||||
const h = m[1].length === 3 ? [...m[1]].map(ch => ch + ch).join('') : m[1];
|
||||
const r = parseInt(h.slice(0, 2), 16);
|
||||
const g = parseInt(h.slice(2, 4), 16);
|
||||
const b = parseInt(h.slice(4, 6), 16);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#111111' : '#ffffff';
|
||||
};
|
||||
const watchWindow = (live: { current: Live }) => {
|
||||
const onMove = (e: PointerEvent) => {
|
||||
if (e.isTrusted) live.current.move(e);
|
||||
};
|
||||
const onUp = (e: PointerEvent) => {
|
||||
if (e.isTrusted) live.current.up(e);
|
||||
};
|
||||
window.addEventListener('pointermove', onMove);
|
||||
window.addEventListener('pointerup', onUp);
|
||||
window.addEventListener('pointercancel', onUp);
|
||||
return () => {
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerup', onUp);
|
||||
window.removeEventListener('pointercancel', onUp);
|
||||
};
|
||||
};
|
||||
|
||||
const SwipeRow: React.FC<SwipeRowProps> = ({
|
||||
children,
|
||||
actions = DEFAULT_ACTIONS,
|
||||
actionColor = '#e5484d',
|
||||
drawerColor = '#3f3f46',
|
||||
rowColor = '#27272a',
|
||||
textColor = '#f5f5f5',
|
||||
height = 64,
|
||||
radius = 16,
|
||||
actionWidth = 80,
|
||||
direction = 'left',
|
||||
snapBounce = 0.2,
|
||||
resistance = 0.55,
|
||||
collapseMs = 200,
|
||||
commitAt = 0.6,
|
||||
fullSwipe = true,
|
||||
disabled = false,
|
||||
open: openProp,
|
||||
onOpenChange,
|
||||
onAction,
|
||||
onCommit,
|
||||
closeOnAction = true,
|
||||
haptic = true,
|
||||
label = 'List item',
|
||||
className = '',
|
||||
style
|
||||
}) => {
|
||||
const uid = useId();
|
||||
const reduce = useReducedMotion();
|
||||
const s = direction === 'left' ? -1 : 1;
|
||||
const A = actionWidth;
|
||||
const n = actions.length;
|
||||
const D = n * A;
|
||||
const c = clamp(resistance, 0.05, 1);
|
||||
const primary = actions[0];
|
||||
const [openState, setOpenState] = useState(false);
|
||||
const [phase, setPhase] = useState<Phase>('idle');
|
||||
const [say, setSay] = useState('');
|
||||
const open = openProp ?? openState;
|
||||
|
||||
const root = useRef<HTMLDivElement>(null);
|
||||
const surface = useRef<HTMLDivElement>(null);
|
||||
const w = useRef(360);
|
||||
const grip = useRef<Grip | null>(null);
|
||||
const unwatch = useRef<(() => void) | null>(null);
|
||||
const live = useRef<Live>({} as Live);
|
||||
const foldTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const heading = useRef<number | null>(null);
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const spread = useMotionValue(0);
|
||||
const landed = useMotionValue(0);
|
||||
const commitPoint = () => Math.max(commitAt * w.current, D + A / 2);
|
||||
const canCommit = () => fullSwipe && n > 0 && commitPoint() <= w.current;
|
||||
const exposed = useTransform(x, v => s * v);
|
||||
const surfaceXf = useTransform(x, v => `translateX(${v}px)`);
|
||||
const railXf = useTransform(exposed, (e: number) => `translateX(${-s * Math.max(0, D - e)}px)`);
|
||||
const shift = useTransform([exposed, spread], ([e, p]: number[]) => p * Math.max(0, e - A));
|
||||
const blockXf = useTransform(shift, v => `translateX(${s * v}px)`);
|
||||
const glyphXf = useTransform(
|
||||
[shift, landed],
|
||||
([v, l]: number[]) => `translateX(${-s * l * (v - (w.current - A) / 2)}px)`
|
||||
);
|
||||
|
||||
const map = (raw: number) => {
|
||||
const W = w.current;
|
||||
if (raw < 0) return rubber(raw, W, c);
|
||||
if (raw <= D) return raw;
|
||||
if (!canCommit()) return D + rubber(raw - D, W, c);
|
||||
const C = commitPoint();
|
||||
const knee = D + (C - D) / c;
|
||||
return raw <= knee ? D + c * (raw - D) : C + rubber(raw - knee, W, c);
|
||||
};
|
||||
const inv = (ex: number) => {
|
||||
const W = w.current;
|
||||
if (ex < 0) return unrubber(ex, W, c);
|
||||
if (ex <= D) return ex;
|
||||
if (!canCommit()) return D + unrubber(ex - D, W, c);
|
||||
const C = commitPoint();
|
||||
const knee = D + (C - D) / c;
|
||||
return ex <= C ? D + (ex - D) / c : knee + unrubber(ex - C, W, c);
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = root.current;
|
||||
if (!el) return undefined;
|
||||
w.current = el.offsetWidth || w.current;
|
||||
const observer = new ResizeObserver(entries => {
|
||||
const width = entries[0]?.contentRect.width;
|
||||
if (width) w.current = width;
|
||||
});
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearTimeout(foldTimer.current);
|
||||
unwatch.current?.();
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const setOpen = (next: boolean) => {
|
||||
if (next === open) return;
|
||||
setOpenState(next);
|
||||
onOpenChange?.(next);
|
||||
};
|
||||
const settle = (target: number, v = 0) => {
|
||||
heading.current = target;
|
||||
if (reduce) {
|
||||
animate(x, s * target, { duration: 0.2, ease: EASE_OUT });
|
||||
return;
|
||||
}
|
||||
const flick = Math.abs(v) >= FLICK;
|
||||
animate(
|
||||
x,
|
||||
s * target,
|
||||
flick
|
||||
? { type: 'spring', duration: 0.4, bounce: snapBounce, velocity: s * clamp(v, -VMAX, VMAX) }
|
||||
: { ...SPRING_UI, velocity: s * v }
|
||||
);
|
||||
};
|
||||
const setSpread = (on: boolean) => {
|
||||
if ((spread.get() === 1) === on) return;
|
||||
if (reduce) spread.set(on ? 1 : 0);
|
||||
else animate(spread, on ? 1 : 0, SPRING_UI);
|
||||
if (on && primary) {
|
||||
setSay(`Release to ${primary.label}`);
|
||||
if (haptic && grip.current?.touch) navigator.vibrate?.(8);
|
||||
}
|
||||
};
|
||||
const commit = (a: SwipeAction, viaKey: boolean, v = 0) => {
|
||||
const leap = a === primary;
|
||||
setPhase('committing');
|
||||
setSay(a.label);
|
||||
setOpen(false);
|
||||
const fold = () => {
|
||||
setPhase('collapsing');
|
||||
foldTimer.current = setTimeout(() => {
|
||||
onCommit?.(a);
|
||||
a.onSelect?.();
|
||||
}, collapseMs);
|
||||
};
|
||||
if (viaKey || reduce) {
|
||||
if (leap) {
|
||||
spread.set(1);
|
||||
landed.set(1);
|
||||
}
|
||||
if (viaKey) {
|
||||
x.set(s * w.current);
|
||||
fold();
|
||||
} else animate(x, s * w.current, { duration: 0.2, ease: EASE_OUT }).then(fold);
|
||||
return;
|
||||
}
|
||||
if (leap) {
|
||||
if (spread.get() < 1) animate(spread, 1, SPRING_UI);
|
||||
animate(landed, 1, SPRING_UI);
|
||||
}
|
||||
animate(x, s * w.current, { ...SPRING_UI, velocity: s * v }).then(fold);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (openProp === undefined || grip.current || phase !== 'idle') return;
|
||||
const target = open ? D : 0;
|
||||
if (heading.current === target) return;
|
||||
if (Math.abs(exposed.get() - target) > 0.5) settle(target);
|
||||
}, [open, D]);
|
||||
|
||||
const down = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (disabled || n === 0 || phase !== 'idle' || grip.current || e.button !== 0) return;
|
||||
x.stop();
|
||||
heading.current = null;
|
||||
grip.current = {
|
||||
id: e.pointerId,
|
||||
x0: e.clientX,
|
||||
y0: e.clientY,
|
||||
grab: null,
|
||||
moved: false,
|
||||
hist: [],
|
||||
touch: e.pointerType === 'touch'
|
||||
};
|
||||
try {
|
||||
surface.current?.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
unwatch.current?.();
|
||||
unwatch.current = watchWindow(live);
|
||||
};
|
||||
const move = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
if (g.grab === null) {
|
||||
const dx = e.clientX - g.x0;
|
||||
const dy = e.clientY - g.y0;
|
||||
if (Math.abs(dx) < HYST || Math.abs(dx) < Math.abs(dy)) return;
|
||||
g.grab = s * (g.x0 + Math.sign(dx) * HYST) - inv(exposed.get());
|
||||
g.moved = true;
|
||||
root.current?.setAttribute('data-dragging', '');
|
||||
}
|
||||
const ex = map(s * e.clientX - g.grab);
|
||||
x.set(s * ex);
|
||||
g.hist.push([performance.now(), ex]);
|
||||
if (g.hist.length > 4) g.hist.shift();
|
||||
setSpread(canCommit() && ex >= commitPoint());
|
||||
};
|
||||
const up = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
grip.current = null;
|
||||
unwatch.current?.();
|
||||
unwatch.current = null;
|
||||
root.current?.removeAttribute('data-dragging');
|
||||
try {
|
||||
surface.current?.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
const ex = exposed.get();
|
||||
const v = velocityOf(g.hist);
|
||||
if (!g.moved) {
|
||||
if (open) {
|
||||
setOpen(false);
|
||||
settle(0);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (primary && canCommit() && ex >= commitPoint()) {
|
||||
commit(primary, false, v);
|
||||
return;
|
||||
}
|
||||
const target = Math.abs(v) >= FLICK ? (v > 0 ? D : 0) : ex + project(v) > D / 2 ? D : 0;
|
||||
setSpread(false);
|
||||
setOpen(target === D);
|
||||
settle(target, v);
|
||||
};
|
||||
live.current = { move, up };
|
||||
|
||||
const act = (a: SwipeAction, e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (phase !== 'idle') return;
|
||||
onAction?.(a);
|
||||
if (a === primary || a.dismiss) {
|
||||
commit(a, e.detail === 0);
|
||||
return;
|
||||
}
|
||||
a.onSelect?.();
|
||||
if (!closeOnAction) return;
|
||||
setOpen(false);
|
||||
if (e.detail === 0) {
|
||||
heading.current = 0;
|
||||
x.set(0);
|
||||
} else settle(0);
|
||||
};
|
||||
const openNow = () => {
|
||||
heading.current = D;
|
||||
x.set(s * D);
|
||||
setOpen(true);
|
||||
setSay(`${n} actions revealed`);
|
||||
};
|
||||
const closeNow = () => {
|
||||
heading.current = 0;
|
||||
x.set(0);
|
||||
setOpen(false);
|
||||
};
|
||||
const onToggleKey = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (disabled || phase !== 'idle' || n === 0) return;
|
||||
const openKey = s < 0 ? 'ArrowLeft' : 'ArrowRight';
|
||||
const closeKey = s < 0 ? 'ArrowRight' : 'ArrowLeft';
|
||||
const toggle = e.key === 'Enter' || e.key === ' ';
|
||||
if (e.key === openKey || (toggle && !open)) {
|
||||
e.preventDefault();
|
||||
openNow();
|
||||
} else if (e.key === closeKey || e.key === 'Escape' || (toggle && open)) {
|
||||
e.preventDefault();
|
||||
closeNow();
|
||||
} else if ((e.key === 'Delete' || e.key === 'Backspace') && open && primary && canCommit()) {
|
||||
e.preventDefault();
|
||||
commit(primary, true);
|
||||
}
|
||||
};
|
||||
const onToggleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (e.detail !== 0 || disabled || phase !== 'idle' || n === 0) return;
|
||||
if (open) closeNow();
|
||||
else openNow();
|
||||
};
|
||||
|
||||
const railId = `${uid}-rail`;
|
||||
return (
|
||||
<div
|
||||
ref={root}
|
||||
role="group"
|
||||
aria-label={label}
|
||||
className={`group relative overflow-hidden [height:var(--sr-h)] [transition:height_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1),margin-bottom_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1),opacity_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1)] data-[phase=collapsing]:h-0! data-[phase=collapsing]:mb-0! data-[phase=collapsing]:opacity-0 data-[disabled]:pointer-events-none data-[disabled]:opacity-55${className ? ` ${className}` : ''}`}
|
||||
data-direction={direction}
|
||||
data-open={open ? '' : undefined}
|
||||
data-phase={phase}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
style={
|
||||
{
|
||||
'--sr-h': `${height}px`,
|
||||
'--sr-r': `${radius}px`,
|
||||
'--sr-a': `${A}px`,
|
||||
'--sr-row': rowColor,
|
||||
'--sr-text': textColor,
|
||||
'--sr-drawer': drawerColor,
|
||||
'--sr-on-drawer': onColor(drawerColor),
|
||||
'--sr-action': actionColor,
|
||||
'--sr-on-action': onColor(actionColor),
|
||||
'--sr-collapse': `${collapseMs}ms`,
|
||||
...style
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="relative overflow-hidden [height:var(--sr-h)] [border-radius:var(--sr-r)] [background:var(--sr-row)]">
|
||||
<motion.div
|
||||
id={railId}
|
||||
className="absolute inset-0 [background:var(--sr-drawer)]"
|
||||
style={{ transform: railXf }}
|
||||
inert={!open || undefined}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
{actions.slice(1).map((a, i) => (
|
||||
<button
|
||||
key={a.id}
|
||||
type="button"
|
||||
className="group/action absolute top-0 grid h-full cursor-pointer touch-manipulation place-items-center border-0 p-0 [font:inherit] outline-none select-none [width:var(--sr-a)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] after:pointer-events-none after:absolute after:inset-0 after:bg-white after:opacity-0 after:content-[''] [@media(hover:hover)_and_(pointer:fine)]:after:[transition:opacity_150ms_ease] [@media(hover:hover)_and_(pointer:fine)]:hover:after:opacity-[0.08]"
|
||||
onClick={e => act(a, e)}
|
||||
style={
|
||||
s < 0
|
||||
? { right: (i + 1) * A, background: a.color ?? drawerColor, color: onColor(a.color ?? drawerColor) }
|
||||
: { left: (i + 1) * A, background: a.color ?? drawerColor, color: onColor(a.color ?? drawerColor) }
|
||||
}
|
||||
>
|
||||
<span className="grid justify-items-center gap-1 text-[11px] leading-none font-medium tracking-[0.01em] [transition:transform_160ms_cubic-bezier(0.23,1,0.32,1)] group-active/action:scale-[0.97] motion-reduce:group-active/action:scale-100">
|
||||
{a.icon ? <span className="inline-flex">{a.icon}</span> : null}
|
||||
<span>{a.label}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{primary ? (
|
||||
<motion.div
|
||||
className="absolute top-0 h-full w-full [background:var(--sr-action)] group-data-[direction=left]:[left:calc(100%-var(--sr-a))] group-data-[direction=right]:[right:calc(100%-var(--sr-a))]"
|
||||
style={{ transform: blockXf }}
|
||||
>
|
||||
<motion.button
|
||||
type="button"
|
||||
className="group/action absolute top-0 grid h-full cursor-pointer touch-manipulation place-items-center border-0 bg-transparent p-0 [font:inherit] outline-none select-none [width:var(--sr-a)] [color:var(--sr-on-action)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] group-data-[direction=left]:left-0 group-data-[direction=right]:right-0 after:pointer-events-none after:absolute after:inset-0 after:bg-white after:opacity-0 after:content-[''] [@media(hover:hover)_and_(pointer:fine)]:after:[transition:opacity_150ms_ease] [@media(hover:hover)_and_(pointer:fine)]:hover:after:opacity-[0.08]"
|
||||
style={{ transform: glyphXf }}
|
||||
onClick={e => act(primary, e)}
|
||||
>
|
||||
<span className="grid justify-items-center gap-1 text-[11px] leading-none font-medium tracking-[0.01em] [transition:transform_160ms_cubic-bezier(0.23,1,0.32,1)] group-active/action:scale-[0.97] motion-reduce:group-active/action:scale-100">
|
||||
<span className="inline-flex">
|
||||
{primary.icon ?? <HugeiconsIcon icon={Delete02Icon} size={20} strokeWidth={2} />}
|
||||
</span>
|
||||
<span>{primary.label}</span>
|
||||
</span>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
ref={surface}
|
||||
className="relative z-[1] flex h-full touch-pan-y items-center gap-3 px-4 [background:var(--sr-row)] [color:var(--sr-text)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] [@media(hover:hover)_and_(pointer:fine)]:cursor-grab [@media(hover:hover)_and_(pointer:fine)]:group-data-[dragging]:cursor-grabbing [@media(pointer:coarse)]:select-none group-data-[dragging]:select-none group-data-[dragging]:[&_*]:select-none"
|
||||
style={{ transform: surfaceXf }}
|
||||
onPointerDown={down}
|
||||
>
|
||||
{children}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-1/2 m-0 h-px w-px overflow-hidden border-0 bg-transparent p-0 [font:inherit] outline-none [clip-path:inset(50%)] [color:var(--sr-text)] group-data-[direction=left]:right-3 group-data-[direction=right]:left-3 focus-visible:h-6 focus-visible:w-auto focus-visible:-translate-y-1/2 focus-visible:overflow-visible focus-visible:rounded-xl focus-visible:px-2.5 focus-visible:text-xs focus-visible:whitespace-nowrap focus-visible:[clip-path:none] focus-visible:[background:color-mix(in_srgb,var(--sr-text)_12%,transparent)]"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-expanded={open}
|
||||
aria-controls={railId}
|
||||
aria-keyshortcuts={s < 0 ? 'ArrowLeft' : 'ArrowRight'}
|
||||
onKeyDown={onToggleKey}
|
||||
onClick={onToggleClick}
|
||||
>
|
||||
{n} {n === 1 ? 'action' : 'actions'}
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="sr-only" aria-live="polite">
|
||||
{say}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwipeRow;
|
||||
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
import FuseButton from '@/components/FuseButton'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
// FuseButton wrapper for primary CTA actions with undo window.
|
||||
// Used for: create deal, finalize invoice, run recurring, approve estimate.
|
||||
export function FuseCTA({
|
||||
label,
|
||||
doneLabel = 'Erledigt',
|
||||
undoLabel = 'Rückgängig',
|
||||
onCommit,
|
||||
onUndo,
|
||||
disabled,
|
||||
size = 'md',
|
||||
}: {
|
||||
label: string
|
||||
doneLabel?: string
|
||||
undoLabel?: string
|
||||
onCommit: () => void | Promise<void>
|
||||
onUndo?: () => void
|
||||
disabled?: boolean
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
}) {
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const handleCommit = async () => {
|
||||
setBusy(true)
|
||||
const t = toast.loading('Wird ausgeführt…')
|
||||
try {
|
||||
await onCommit()
|
||||
toast.success(doneLabel, { id: t })
|
||||
} catch {
|
||||
toast.error('Fehlgeschlagen', { id: t })
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<FuseButton
|
||||
label={busy ? 'Lädt…' : label}
|
||||
doneLabel={doneLabel}
|
||||
undoLabel={undoLabel}
|
||||
onCommit={handleCommit}
|
||||
onUndo={onUndo}
|
||||
disabled={disabled || busy}
|
||||
size={size}
|
||||
commitOn="fuseEnd"
|
||||
settle="stay"
|
||||
fuse="bottom"
|
||||
fuseThickness={2}
|
||||
undoWindow={4000}
|
||||
color="oklch(0.98 0 0)"
|
||||
background="oklch(0.2 0 0)"
|
||||
fuseColor="oklch(0.5 0 0)"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import HoldButton from '@/components/HoldButton'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Check } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// HoldButton wrapper for dangerous actions (PRD §5.6: confirm before destructive operations)
|
||||
// Used for: contract sign, invoice finalize, reseed, module disable
|
||||
export function HoldToConfirm({
|
||||
children,
|
||||
onConfirm,
|
||||
holdTime = 1200,
|
||||
size = 'md',
|
||||
className,
|
||||
disabled,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
onConfirm: () => void | Promise<void>
|
||||
holdTime?: number
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const [holding, setHolding] = useState(false)
|
||||
|
||||
const handleHold = async () => {
|
||||
setHolding(true)
|
||||
try {
|
||||
await onConfirm()
|
||||
} catch {
|
||||
// error handled by caller
|
||||
} finally {
|
||||
setHolding(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<HoldButton
|
||||
onHold={handleHold}
|
||||
holdTime={holdTime}
|
||||
size={size}
|
||||
disabled={disabled || holding}
|
||||
backgroundColor="oklch(0.97 0 0)"
|
||||
fillColor="oklch(0.2 0 0)"
|
||||
textColor="oklch(0.2 0 0)"
|
||||
fillTextColor="oklch(0.98 0 0)"
|
||||
radius={8}
|
||||
className={cn(className)}
|
||||
>
|
||||
{holding ? (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
Ausführen…
|
||||
</span>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</HoldButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
import SlideCommit from '@/components/SlideCommit'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Lock, Check, AlertTriangle } from 'lucide-react'
|
||||
|
||||
// SlideCommit wrapper for timesheet week lock (PRD §6.3: "lock after invoicing").
|
||||
// User slides to confirm — prevents accidental week locking.
|
||||
export function SlideToLock({
|
||||
onConfirm,
|
||||
disabled,
|
||||
label = 'Schieben zum Sperren',
|
||||
doneLabel = 'Woche gesperrt',
|
||||
}: {
|
||||
onConfirm: () => void | Promise<void>
|
||||
disabled?: boolean
|
||||
label?: string
|
||||
doneLabel?: string
|
||||
}) {
|
||||
const [phase, setPhase] = useState<'idle' | 'pending' | 'done'>('idle')
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setPhase('pending')
|
||||
try {
|
||||
await onConfirm()
|
||||
setPhase('done')
|
||||
} catch {
|
||||
setPhase('idle')
|
||||
toast.error('Sperren fehlgeschlagen')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-sm">
|
||||
<SlideCommit
|
||||
label={label}
|
||||
doneLabel={doneLabel}
|
||||
onConfirm={handleConfirm}
|
||||
onDone={() => {}}
|
||||
onError={() => setPhase('idle')}
|
||||
disabled={disabled || phase === 'done' || phase === 'pending'}
|
||||
trackColor="oklch(0.95 0 0)"
|
||||
handleColor="oklch(0.2 0 0)"
|
||||
successColor="oklch(0.3 0 0)"
|
||||
dangerColor="oklch(0.5 0 0)"
|
||||
width={320}
|
||||
height={48}
|
||||
radius={10}
|
||||
holdMs={400}
|
||||
icon={phase === 'done' ? <Check className="size-5" /> : <Lock className="size-4" />}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
import SwipeRow from '@/components/SwipeRow'
|
||||
import type { SwipeAction } from '@/components/SwipeRow'
|
||||
import { Check, X, Clock, MapPin } from 'lucide-react'
|
||||
import { formatRelative } from '@/lib/format'
|
||||
|
||||
const SCORE_LABELS: Record<string, string> = {
|
||||
'new-site': 'Neue Website', redesign: 'Redesign', seo: 'SEO', aeo: 'AEO/GEO',
|
||||
shop: 'Shop', maintenance: 'Wartung', accessibility: 'Barrierefreiheit',
|
||||
}
|
||||
|
||||
export interface SwipeableLeadData {
|
||||
id: string
|
||||
companyName: string
|
||||
website: string | null
|
||||
city: string | null
|
||||
score: number
|
||||
scoreLabel: string | null
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export function SwipeableLeadCard({
|
||||
lead,
|
||||
onApprove,
|
||||
onReject,
|
||||
onSnooze,
|
||||
}: {
|
||||
lead: SwipeableLeadData
|
||||
onApprove: (id: string) => void
|
||||
onReject: (id: string) => void
|
||||
onSnooze: (id: string) => void
|
||||
}) {
|
||||
const actions: SwipeAction[] = [
|
||||
{ id: 'approve', label: 'Genehmigen', icon: <Check className="size-5" />, color: 'oklch(0.45 0 0)', dismiss: false },
|
||||
{ id: 'snooze', label: 'Snooze', icon: <Clock className="size-5" />, color: 'oklch(0.6 0 0)', dismiss: false },
|
||||
{ id: 'reject', label: 'Ablehnen', icon: <X className="size-5" />, color: 'oklch(0.5 0 0)', dismiss: true },
|
||||
]
|
||||
|
||||
const handleAction = (action: SwipeAction) => {
|
||||
if (action.id === 'approve') onApprove(lead.id)
|
||||
else if (action.id === 'snooze') onSnooze(lead.id)
|
||||
else if (action.id === 'reject') onReject(lead.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<SwipeRow
|
||||
actions={actions}
|
||||
actionWidth={72}
|
||||
height={88}
|
||||
fullSwipe={true}
|
||||
commitAt={0.55}
|
||||
rowColor="oklch(1 0 0)"
|
||||
actionColor="oklch(0.97 0 0)"
|
||||
onAction={handleAction}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="flex size-12 shrink-0 flex-col items-center justify-center rounded-lg bg-foreground text-background">
|
||||
<span className="text-lg font-bold leading-none">{lead.score}</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold">{lead.companyName}</p>
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
{lead.website && <span className="truncate">{lead.website}</span>}
|
||||
{lead.city && <><span>·</span><span className="flex items-center gap-0.5"><MapPin className="size-2.5" />{lead.city}</span></>}
|
||||
</div>
|
||||
{lead.scoreLabel && SCORE_LABELS[lead.scoreLabel] && (
|
||||
<span className="mt-0.5 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium">
|
||||
{SCORE_LABELS[lead.scoreLabel]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 text-[10px] text-muted-foreground">{formatRelative(lead.createdAt)}</span>
|
||||
</div>
|
||||
</SwipeRow>
|
||||
)
|
||||
}
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
} from '@/components/ui/dialog'
|
||||
import { PageHeader } from '../primitives'
|
||||
import { formatEuro, formatDate, formatDateTime, daysUntil } from '@/lib/format'
|
||||
import { HoldToConfirm } from '../hold-to-confirm'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
@@ -312,10 +313,17 @@ export function ContractsView() {
|
||||
<DialogFooter className="gap-2">
|
||||
<Button variant="outline" onClick={() => setSelected(null)}>Schließen</Button>
|
||||
{canSign && (
|
||||
<Button onClick={() => sign(selected)} disabled={signing} className="gap-1.5">
|
||||
{signing ? <Loader2 className="size-3.5 animate-spin" /> : <PenLine className="size-3.5" />}
|
||||
E-Signatur anfordern
|
||||
</Button>
|
||||
<HoldToConfirm
|
||||
onConfirm={() => sign(selected)}
|
||||
holdTime={1500}
|
||||
size="md"
|
||||
disabled={signing}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<PenLine className="size-3.5" />
|
||||
E-Signatur anfordern
|
||||
</span>
|
||||
</HoldToConfirm>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { PageHeader } from '../primitives'
|
||||
import { FuseCTA } from '../fuse-cta'
|
||||
import { formatEuro, formatEuroCompact, formatDate } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
@@ -76,10 +77,13 @@ export function RecurringView() {
|
||||
title="Wiederkehrende Rechnungen"
|
||||
description="Automatische Generierung von wiederkehrenden Rechnungen (Wartung/SLA-Verträge). Bei Mahnstufe 3: automatische Lizenz-Suspendierung (PRD §6.4)."
|
||||
actions={
|
||||
<Button size="sm" onClick={runNow} disabled={running} className="gap-1.5">
|
||||
{running ? <Loader2 className="size-4 animate-spin" /> : <Play className="size-4" />}
|
||||
Jetzt ausführen
|
||||
</Button>
|
||||
<FuseCTA
|
||||
label="Jetzt ausführen"
|
||||
doneLabel="Ausgeführt"
|
||||
onCommit={runNow}
|
||||
disabled={running}
|
||||
size="sm"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { formatMinutes } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
import { ChevronLeft, ChevronRight, Lock, Clock, TrendingUp, CheckCircle2, Calendar } from 'lucide-react'
|
||||
import { SlideToLock } from '../slide-to-lock'
|
||||
|
||||
interface DayData {
|
||||
date: string
|
||||
@@ -83,10 +84,7 @@ export function TimesheetView() {
|
||||
description="Wochen-basierte Zeiterfassung mit PM-Freigabe (Lock). Nach Freigabe können Einträge nicht mehr geändert werden — GoBD-konform."
|
||||
actions={
|
||||
!stats.allLocked && stats.totalEntries > 0 ? (
|
||||
<Button size="sm" onClick={lockWeek} disabled={locking} className="gap-1.5">
|
||||
<Lock className="size-4" />
|
||||
Woche sperren
|
||||
</Button>
|
||||
<SlideToLock onConfirm={lockWeek} disabled={locking} />
|
||||
) : stats.allLocked ? (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />Gesperrt
|
||||
|
||||
Reference in new issue
Block a user