{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "BellToggle-TS-TW", "title": "BellToggle", "description": "Pill toggle where a press rings the bell, crossfades the label and unfurls the pill.", "type": "registry:component", "files": [ { "type": "registry:component", "path": "BellToggle/BellToggle.tsx", "content": "'use client';\n\nimport React, { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport {\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n type AnimationPlaybackControls,\n type MotionStyle\n} from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Notification03Icon } from '@hugeicons/core-free-icons';\nexport type BellToggleSize = 'sm' | 'md' | 'lg';\n\nexport interface BellToggleProps {\n offLabel?: string;\n onLabel?: string;\n icon?: ReactNode;\n label?: string;\n color?: string;\n background?: string;\n onColor?: string;\n onBackground?: string;\n size?: BellToggleSize;\n radius?: number;\n ringAmplitude?: number;\n ringPasses?: number;\n ringDecay?: number;\n ringDuration?: number;\n ringPivot?: number;\n crossfadeMs?: number;\n revealBounce?: number;\n count?: number;\n badge?: boolean;\n badgeColor?: string;\n badgeTextColor?: string;\n waves?: boolean;\n clapper?: boolean;\n pressed?: boolean;\n defaultPressed?: boolean;\n onChange?: (pressed: boolean) => void;\n disabled?: boolean;\n className?: string;\n}\n\nconst SPRING_UI = { type: 'spring' as const, duration: 0.3, bounce: 0 };\nconst SEG_EASE = 'cubic-bezier(0.77, 0, 0.175, 1)';\nconst WARP = 0.6;\nconst SIZES: Record = {\n sm: [36, 12.5, 14, 15, 8],\n md: [44, 13.5, 16, 19, 9],\n lg: [52, 15, 18, 23, 10]\n};\nconst WOBBLE = { amplitude: 0.4, passes: 3, duration: 420 };\nconst BELL_BODY = 'M6 16.5V10a6 6 0 0 1 12 0v6.5l1.6 2.3H4.4L6 16.5z';\n\nconst passOffset = (k: number, passes: number) => 1 - Math.pow(1 - (k + 2 / 3) / (passes + 1), WARP);\nconst ringKeyframes = (from: number, amplitude: number, passes: number, decay: number): Keyframe[] => {\n const frames: Keyframe[] = [{ transform: `rotate(${from}deg)`, offset: 0, easing: SEG_EASE }];\n for (let k = 0; k < passes; k++) {\n const angle = amplitude * Math.pow(1 - k / passes, decay) * (k % 2 ? 1 : -1);\n frames.push({ transform: `rotate(${angle.toFixed(2)}deg)`, offset: passOffset(k, passes), easing: SEG_EASE });\n }\n frames.push({ transform: 'rotate(0deg)', offset: 1 });\n return frames;\n};\nconst liveAngle = (el: Element) => {\n const tf = getComputedStyle(el).transform;\n if (!tf || tf === 'none') return 0;\n const m = new DOMMatrix(tf);\n return (Math.atan2(m.b, m.a) * 180) / Math.PI;\n};\n\nconst BellToggle: React.FC = ({\n offLabel = 'Notify me',\n onLabel = \"You'll be notified\",\n icon,\n label,\n color = '#f5f5f5',\n background = '#27272a',\n onColor = '#18181b',\n onBackground = '#f5f5f5',\n size = 'md',\n radius = 22,\n ringAmplitude = 17,\n ringPasses = 5,\n ringDecay = 1,\n ringDuration = 820,\n ringPivot = 16,\n crossfadeMs = 200,\n revealBounce = 0,\n count = 0,\n badge = true,\n badgeColor = '#ef4444',\n badgeTextColor = '#ffffff',\n waves = true,\n clapper = false,\n pressed,\n defaultPressed = false,\n onChange,\n disabled = false,\n className = ''\n}) => {\n const [inner, setInner] = useState(defaultPressed);\n const on = pressed ?? inner;\n const reduce = useReducedMotion();\n const rootRef = useRef(null);\n const glyphRef = useRef(null);\n const clapperRef = useRef(null);\n const waveLeft = useRef(null);\n const waveRight = useRef(null);\n const offRef = useRef(null);\n const onRef = useRef(null);\n const lastInput = useRef<'pointer' | 'keyboard'>('pointer');\n const pending = useRef<'pointer' | 'keyboard' | null>(null);\n const spring = useRef(null);\n const prevCount = useRef(count);\n const [h, fs, iconSize, px, gap] = SIZES[size] ?? SIZES.md;\n\n const t = useMotionValue(on ? 1 : 0);\n const wOff = useMotionValue(0);\n const wOn = useMotionValue(0);\n const clip = useTransform([t, wOff, wOn], ([v, a, b]: number[]) => `${Math.max(a, b) - (a + (b - a) * v)}px`);\n\n useLayoutEffect(() => {\n const measure = () => {\n if (offRef.current) wOff.set(offRef.current.offsetWidth);\n if (onRef.current) wOn.set(onRef.current.offsetWidth);\n };\n measure();\n const observer = new ResizeObserver(measure);\n if (offRef.current) observer.observe(offRef.current);\n if (onRef.current) observer.observe(onRef.current);\n document.fonts?.ready.then(measure);\n return () => observer.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [offLabel, onLabel, size]);\n\n const swing = (amplitude: number, passes: number, duration: number) => {\n const el = glyphRef.current;\n if (!el) return;\n el.getAnimations().forEach(a => a.cancel());\n el.animate(ringKeyframes(liveAngle(el), amplitude, passes, ringDecay), { duration, easing: 'linear' });\n const c = clapperRef.current;\n if (c) {\n c.getAnimations().forEach(a => a.cancel());\n c.animate(ringKeyframes(liveAngle(c), amplitude * 1.6, passes, ringDecay), {\n duration,\n delay: 70,\n easing: 'linear'\n });\n }\n if (!waves) return;\n for (let k = 0; k < passes; k++) {\n const side = k % 2 ? waveRight.current : waveLeft.current;\n if (!side) continue;\n const strength = Math.pow(1 - k / passes, ringDecay);\n side.animate(\n [\n { opacity: 0, transform: 'scale(0.55)' },\n { opacity: 0.9 * strength, offset: 0.3 },\n { opacity: 0, transform: 'scale(1.25)' }\n ],\n { duration: 380, delay: passOffset(k, passes) * duration, easing: 'ease-out' }\n );\n }\n };\n\n useLayoutEffect(() => {\n const pointer = pending.current === 'pointer' && !reduce;\n pending.current = null;\n spring.current?.stop();\n if (pointer) spring.current = animate(t, on ? 1 : 0, { ...SPRING_UI, bounce: revealBounce });\n else t.jump(on ? 1 : 0);\n if (on && pointer) swing(ringAmplitude, ringPasses, ringDuration);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [on]);\n useLayoutEffect(() => () => spring.current?.stop(), []);\n\n useEffect(() => {\n const was = prevCount.current;\n prevCount.current = count;\n if (count > was && on && !reduce) swing(ringAmplitude * WOBBLE.amplitude, WOBBLE.passes, WOBBLE.duration);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [count]);\n\n const toggle = () => {\n pending.current = lastInput.current;\n if (pressed === undefined) setInner(!on);\n onChange?.(!on);\n };\n const press = (e: React.PointerEvent) => {\n lastInput.current = 'pointer';\n if (e.button === 0 && !disabled && rootRef.current) rootRef.current.dataset.pressed = '';\n };\n const release = () => {\n if (rootRef.current) delete rootRef.current.dataset.pressed;\n };\n const key = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') lastInput.current = 'keyboard';\n };\n\n const showBadge = badge && on && count > 0;\n\n return (\n \n \n \n \n {clapper ? (\n \n \n \n \n ) : (\n (icon ?? )\n )}\n \n {clapper ? (\n \n \n \n \n \n ) : null}\n {waves ? (\n <>\n \n \n \n \n \n \n \n \n \n ) : null}\n {badge ? (\n \n \n {count > 9 ? '9+' : count}\n \n \n ) : null}\n \n \n \n {offLabel}\n \n \n {onLabel}\n \n \n \n \n );\n};\n\nexport default BellToggle;\n" } ], "registryDependencies": [], "dependencies": [ "motion@^12.23.12", "@hugeicons/react@^1.1.10", "@hugeicons/core-free-icons@^4.3.3" ] }