Bookmark

{ "name": "save-button", "type": "registry:component", "dependencies": [ "lucide-react", "motion" ], "files": [ { "type": "registry:component", "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Save Button\n * @version: 1.0.0\n * @date: 2026-10-21\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { Check, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type FormEvent,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n/** How long the \"Saved to\" strip stays up when left alone. */\nconst STRIP_FOR = 4000;\n\nexport interface SaveCollection {\n id: string;\n name: string;\n /** Items already in it, before this one. */\n count: number;\n /** Tailwind background class for its swatch. */\n color: string;\n}\n\nexport interface SaveButtonProps {\n collections?: SaveCollection[];\n /** Where a tap saves to, by id. Defaults to the first collection. */\n defaultCollection?: string;\n defaultSaved?: boolean;\n onSave?: (collectionId: string) => void;\n onMove?: (collectionId: string) => void;\n onRemove?: () => void;\n className?: string;\n}\n\nconst DEFAULT_COLLECTIONS: SaveCollection[] = [\n { id: \"weekend\", name: \"Weekend trips\", count: 12, color: \"bg-orange-400\" },\n { id: \"tokyo\", name: \"Tokyo 2027\", count: 31, color: \"bg-sky-400\" },\n { id: \"food\", name: \"Places to eat\", count: 48, color: \"bg-emerald-400\" },\n { id: \"someday\", name: \"Someday\", count: 7, color: \"bg-violet-400\" },\n];\n\nconst SWATCHES = [\n \"bg-rose-400\",\n \"bg-amber-300\",\n \"bg-teal-400\",\n \"bg-indigo-400\",\n];\n\ntype View = \"closed\" | \"saved\" | \"picking\" | \"removed\";\n\n// The panel sits under AnimatePresence, so it's found by query, not ref.\nconst findPanel = (root: HTMLElement | null) =>\n root?.querySelector(\"[data-save-panel]\") ?? null;\n\nconst focusInPanel = (root: HTMLElement | null) =>\n Boolean(findPanel(root)?.contains(document.activeElement));\n\n// Whatever closes or swaps the panel's content would drop focus on ,\n// so it goes back to the button first.\nconst returnFocus = (root: HTMLElement | null, button: HTMLElement | null) => {\n if (focusInPanel(root)) {\n button?.focus();\n }\n};\n\n/** A bookmark whose ink drops in from the top like a ribbon when saved. */\nfunction Ribbon({\n saved,\n reduceMotion,\n}: {\n saved: boolean;\n reduceMotion: boolean;\n}) {\n const clip = useId();\n let ribbonTransition: object = { duration: 0.18, ease: EASE_OUT };\n if (reduceMotion) {\n ribbonTransition = { duration: 0 };\n } else if (saved) {\n ribbonTransition = { type: \"spring\", stiffness: 520, damping: 24 };\n }\n return (\n \n Bookmark\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport default function SaveButton({\n collections: initialCollections = DEFAULT_COLLECTIONS,\n defaultCollection,\n defaultSaved = false,\n onSave,\n onMove,\n onRemove,\n className,\n}: SaveButtonProps) {\n const [collections, setCollections] = useState(initialCollections);\n const [savedTo, setSavedTo] = useState(\n defaultSaved\n ? (defaultCollection ?? initialCollections[0]?.id ?? null)\n : null\n );\n const [lastUsed, setLastUsed] = useState(\n defaultCollection ?? initialCollections[0]?.id ?? \"\"\n );\n const [view, setView] = useState(\"closed\");\n const [draft, setDraft] = useState(\"\");\n const [moved, setMoved] = useState(false);\n const reduceMotion = Boolean(useReducedMotion());\n\n const rootRef = useRef(null);\n const buttonRef = useRef(null);\n const hoverRef = useRef(false);\n const timerRef = useRef>(undefined);\n\n const contentRef = useRef(null);\n const isOpen = view !== \"closed\";\n const [contentHeight, setContentHeight] = useState();\n\n // The strip grows into the picker and back by its measured height.\n useLayoutEffect(() => {\n const content = contentRef.current;\n if (!(isOpen && content)) {\n setContentHeight(undefined);\n return;\n }\n const observer = new ResizeObserver(() =>\n setContentHeight(content.offsetHeight)\n );\n observer.observe(content);\n return () => observer.disconnect();\n }, [isOpen]);\n\n const saved = savedTo !== null;\n const current = collections.find((c) => c.id === savedTo);\n\n // The strip closes on its own unless it is being read or used.\n const schedule = (ms = STRIP_FOR) => {\n clearTimeout(timerRef.current);\n timerRef.current = setTimeout(() => {\n if (!(hoverRef.current || focusInPanel(rootRef.current))) {\n setView((v) => (v === \"picking\" ? v : \"closed\"));\n }\n }, ms);\n };\n\n useEffect(() => () => clearTimeout(timerRef.current), []);\n\n useEffect(() => {\n if (view === \"closed\") {\n return;\n }\n const onPointer = (event: PointerEvent) => {\n if (!rootRef.current?.contains(event.target as Node)) {\n setView(\"closed\");\n }\n };\n const onKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n returnFocus(rootRef.current, buttonRef.current);\n setView(\"closed\");\n }\n };\n document.addEventListener(\"pointerdown\", onPointer);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"pointerdown\", onPointer);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [view]);\n\n // Opening the picker moves focus onto the collection it's saved in.\n useEffect(() => {\n if (view === \"picking\") {\n findPanel(rootRef.current)\n ?.querySelector('[aria-current=\"true\"]')\n ?.focus();\n }\n }, [view]);\n\n const toggle = () => {\n if (saved) {\n setSavedTo(null);\n setView(\"removed\");\n onRemove?.();\n schedule(1600);\n return;\n }\n setSavedTo(lastUsed);\n setMoved(false);\n setView(\"saved\");\n onSave?.(lastUsed);\n schedule();\n };\n\n const moveTo = (id: string) => {\n returnFocus(rootRef.current, buttonRef.current);\n setSavedTo(id);\n setLastUsed(id);\n setMoved(id !== savedTo);\n setView(\"saved\");\n if (id !== savedTo) {\n onMove?.(id);\n }\n schedule();\n };\n\n const create = (event: FormEvent) => {\n event.preventDefault();\n const name = draft.trim();\n if (!name) {\n return;\n }\n const id = `${name.toLowerCase().replace(/\\s+/g, \"-\")}-${collections.length}`;\n const color = SWATCHES[collections.length % SWATCHES.length];\n setCollections((list) => [...list, { id, name, count: 0, color }]);\n setDraft(\"\");\n moveTo(id);\n };\n\n const countFor = (collection: SaveCollection) =>\n collection.count + (savedTo === collection.id ? 1 : 0);\n\n const swap = reduceMotion\n ? { duration: 0 }\n : { duration: 0.2, ease: EASE_OUT };\n\n return (\n {\n hoverRef.current = true;\n }}\n onPointerLeave={() => {\n hoverRef.current = false;\n if (view === \"saved\" || view === \"removed\") {\n schedule(1800);\n }\n }}\n ref={rootRef}\n >\n \n \n \n \n \n {saved ? \"Saved\" : \"Save\"}\n \n \n \n \n\n \n {view !== \"closed\" && (\n \n \n

\n {view === \"picking\" ? (\n \n ) : (\n \n {view === \"removed\" || !current ? (\n \n Removed from saved\n \n ) : (\n <>\n \n \n {moved ? \"Moved to \" : \"Saved to \"}\n \n \n \n {current.name}\n \n \n \n \n {\n clearTimeout(timerRef.current);\n setView(\"picking\");\n }}\n type=\"button\"\n >\n Change\n \n \n )}\n

\n )}\n \n \n \n )}\n \n \n );\n}\n\nfunction Picker({\n collections,\n savedTo,\n countFor,\n moveTo,\n draft,\n setDraft,\n create,\n}: {\n collections: SaveCollection[];\n savedTo: string | null;\n countFor: (collection: SaveCollection) => number;\n moveTo: (id: string) => void;\n draft: string;\n setDraft: (value: string) => void;\n create: (event: FormEvent) => void;\n}) {\n return (\n

\n Save to\n

\n moveTo(collection.id)}\n type=\"button\"\n >\n \n \n \n {collection.name}\n \n \n {countFor(collection)} saved\n \n \n {active && (\n \n )}\n \n

\n \n \n \n \n setDraft(event.target.value)}\n placeholder=\"New collection\"\n value={draft}\n />\n \n {draft.trim() && (\n \n Create\n \n )}\n \n \n

\n );\n}\n", "path": "/components/kokonutui/save-button.tsx", "target": "components/kokonutui/save-button.tsx" } ] }