{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"card-folder","type":"registry:block","title":"Card Folder","description":"A landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam, with controlled open and card-detail visibility plus a separate overflow action.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/card-folder.tsx","type":"registry:component","target":"@components/motion/card-folder.tsx","content":"\"use client\";\n// beui.dev/components/blocks/card-folder\n\nimport { EllipsisVertical, Eye, EyeOff } from \"lucide-react\";\nimport {\n AnimatePresence,\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n useTransform,\n} from \"motion/react\";\nimport { type ReactNode, useCallback, useEffect, useState } from \"react\";\nimport { DigitSwap } from \"@/components/motion/digit-swap\";\nimport {\n EASE_IN_OUT,\n EASE_OUT,\n SPRING_LAYOUT,\n SPRING_PRESS,\n} from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\n// The two purse layers collapse as one material surface after the card starts\n// moving, then reverse immediately so closing feels like the card is caught.\nconst PURSE_MORPH_TRANSITION = {\n duration: 0.28,\n ease: EASE_IN_OUT,\n} as const;\nconst PURSE_REDUCED_TRANSITION = {\n duration: 0.16,\n ease: EASE_OUT,\n} as const;\n\nexport interface CardFolderProps {\n title: string;\n cardNumber: string;\n expiry: string;\n cvv: string;\n card: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n detailsVisible?: boolean;\n defaultDetailsVisible?: boolean;\n onDetailsVisibleChange?: (visible: boolean) => void;\n onClick?: () => void;\n onAction?: () => void;\n ariaLabel?: string;\n actionLabel?: string;\n disabled?: boolean;\n className?: string;\n cardClassName?: string;\n}\n\n/**\n * A landscape card tucked into an animated folder sleeve. Pressing the folder\n * lifts the card forward while the purse compresses into its bottom seam; a\n * separate privacy control reveals its number and CVV.\n */\nexport function CardFolder({\n title,\n cardNumber,\n expiry,\n cvv,\n card,\n open,\n defaultOpen = false,\n onOpenChange,\n detailsVisible,\n defaultDetailsVisible = false,\n onDetailsVisibleChange,\n onClick,\n onAction,\n ariaLabel,\n actionLabel,\n disabled = false,\n className,\n cardClassName,\n}: CardFolderProps) {\n const reduce = useReducedMotion();\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [internalDetailsVisible, setInternalDetailsVisible] = useState(\n defaultDetailsVisible,\n );\n const openControlled = open !== undefined;\n const detailsControlled = detailsVisible !== undefined;\n const isOpen = open ?? internalOpen;\n const areDetailsVisible = detailsVisible ?? internalDetailsVisible;\n const transition = reduce ? { duration: 0 } : SPRING_LAYOUT;\n const normalizedCardNumber = cardNumber.replace(/\\D/g, \"\");\n const visibleLastFour = normalizedCardNumber.slice(-4).padStart(4, \"•\");\n const revealedCardNumber =\n normalizedCardNumber.match(/.{1,4}/g)?.join(\" \") ?? visibleLastFour;\n const maskedCvv = \"•\".repeat(Math.max(3, cvv.length));\n const defaultAriaLabel = `${isOpen ? \"Close\" : \"Open\"} ${title}, card ending in ${visibleLastFour}, expires ${expiry}`;\n const progress = useMotionValue(isOpen ? 1 : 0);\n const cardTransform = useTransform(progress, (value) => {\n const boundedProgress = Math.min(1, Math.max(0, value));\n const lift = Math.sin(Math.PI * boundedProgress);\n return `translateY(${-8 * lift}%) scale(${1 + 0.01 * lift})`;\n });\n const backTransform = useTransform(\n progress,\n [0, 1],\n [\"translateY(0%) scaleY(1)\", \"translateY(18%) scaleY(0.18)\"],\n );\n const frontTransform = useTransform(\n progress,\n [0, 1],\n [\"translateY(0%) rotateX(0deg)\", \"translateY(18%) rotateX(-72deg)\"],\n );\n const purseOpacity = useTransform(progress, [0, 0.76, 1], [1, 1, 0]);\n\n useEffect(() => {\n const controls = animate(\n progress,\n isOpen ? 1 : 0,\n reduce ? { duration: 0 } : PURSE_MORPH_TRANSITION,\n );\n return () => controls.stop();\n }, [isOpen, progress, reduce]);\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (disabled) return;\n if (!openControlled) setInternalOpen(nextOpen);\n onOpenChange?.(nextOpen);\n },\n [disabled, onOpenChange, openControlled],\n );\n\n const handleClick = () => {\n setOpen(!isOpen);\n onClick?.();\n };\n\n const toggleDetails = () => {\n if (disabled) return;\n const nextVisible = !areDetailsVisible;\n if (!detailsControlled) setInternalDetailsVisible(nextVisible);\n onDetailsVisibleChange?.(nextVisible);\n };\n\n return (\n \n \n \n\n \n {card}\n \n \n\n \n \n \n \n \n\n \n \n \n \n \n {areDetailsVisible ? (\n \n ) : (\n \n )}\n \n \n \n\n \n \n \n Expiry\n \n \n {expiry}\n \n \n \n \n CVV\n \n \n \n \n \n \n \n {title}\n \n \n \n \n \n\n {onAction ? (\n \n \n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/digit-swap.tsx","type":"registry:component","target":"@components/motion/digit-swap.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DigitSwapDirection = \"up\" | \"down\";\n\nexport interface DigitSwapProps {\n /** Numeric or masked value rendered in fixed character slots. */\n value: string | number;\n /** Replays every glyph when the value itself contains unchanged characters. */\n animationKey?: string | number;\n /** Direction the next glyph enters from. */\n direction?: DigitSwapDirection;\n /** Per-glyph transition duration in seconds. */\n duration?: number;\n /** Delay in seconds between neighboring glyphs. */\n stagger?: number;\n /** Number of final characters that receive `suffixClassName`. */\n suffixLength?: number;\n className?: string;\n glyphClassName?: string;\n suffixClassName?: string;\n}\n\ntype GlyphMotionContext = {\n direction: DigitSwapDirection;\n reduceMotion: boolean;\n};\n\nconst GLYPH_VARIANTS = {\n enter: ({ direction, reduceMotion }: GlyphMotionContext) => ({\n opacity: 0,\n transform: reduceMotion\n ? \"none\"\n : `translateY(${direction === \"up\" ? \"45%\" : \"-45%\"})`,\n }),\n visible: {\n opacity: 1,\n transform: \"translateY(0%)\",\n },\n exit: ({ direction, reduceMotion }: GlyphMotionContext) => ({\n opacity: 0,\n transform: reduceMotion\n ? \"none\"\n : `translateY(${direction === \"up\" ? \"-45%\" : \"45%\"})`,\n }),\n};\n\n/** Fixed-slot digits and mask glyphs that roll when their value changes. */\nexport function DigitSwap({\n value,\n animationKey,\n direction = \"up\",\n duration = 0.18,\n stagger = 0.006,\n suffixLength = 0,\n className,\n glyphClassName,\n suffixClassName,\n}: DigitSwapProps) {\n const reduceMotion = useReducedMotion() ?? false;\n const text = String(value);\n const suffixStart = Math.max(0, text.length - Math.max(0, suffixLength));\n const motionContext: GlyphMotionContext = { direction, reduceMotion };\n const glyphs = Array.from(text, (character, position) => ({\n character,\n id: `glyph-${position}`,\n position,\n }));\n\n return (\n \n {text}\n \n {glyphs.map(({ character, id, position }) => {\n if (character === \" \") {\n return ;\n }\n\n const glyphKey =\n animationKey === undefined\n ? `${id}-${character}`\n : `${id}-${character}-${animationKey}`;\n\n return (\n \n \n = suffixStart ? suffixClassName : undefined,\n )}\n >\n {character}\n \n \n \n );\n })}\n \n \n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}