50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1b7c,"use client"; // karaui.kamisama-v0.my.id/components/motion/button import { Check, Loader2, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { forwardRef, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_SWAP } from "@/lib/ease"; import { Button, type ButtonProps } from "./base"; export type ButtonState = "idle" | "loading" | "success" | "error"; export interface StatefulButtonProps extends Omit { state?: ButtonState; children: ReactNode; loadingText?: ReactNode; successText?: ReactNode; errorText?: ReactNode; icon?: ReactNode; } const CASCADE_STAGGER = 0.025; const ROLL_BLUR = "blur(6px)"; const CASCADE_LETTER_VARIANTS: Variants = { initial: { opacity: 0, y: "105%", filter: ROLL_BLUR }, animate: (delay: number = 0) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay }, }), exit: (delay: number = 0) => ({ opacity: 0, y: "-105%", filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 }, }), }; const ICON_VARIANTS: Variants = { // Width collapses too, so the icon adds/removes its own space smoothly // instead of popping the row width in a single frame. initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR }, animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP, }, exit: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT }, }, }; function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } function TextSlot({ value, children, }: { value: string; children: ReactNode; }) { const reduce = useReducedMotion(); const measureRef = useRef(null); const [width, setWidth] = useState(); const label = typeof children === "string" ? children : null; const cascade = label !== null && !reduce; // Measure strings with the same per-letter layout as the cascade. Measuring // the whole string preserves kerning, which can make it narrower than the // inline-block letters and clip the final glyph during the width animation. useLayoutEffect(() => { const nextWidth = measureRef.current?.offsetWidth; if (!nextWidth) return; setWidth((current) => (current === nextWidth ? current : nextWidth)); }); return ( {cascade ? label.split("").map((char, index) => ( {char} )) : children} {cascade ? ( <> {label} {label.split("").map((char, index) => ( {char} ))} ) : ( {children} )} ); } export const StatefulButton = forwardRef(function StatefulButton( { state = "idle", children, loadingText = "Loading", successText = "Done", errorText = "Try again", icon, disabled, ...rest }, ref, ) { const isBusy = state === "loading"; const stateText = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; const textKey = typeof stateText === "string" ? `${state}-${stateText}` : state; return ( ); }); 53:T149a,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { forwardRef, type PointerEvent, type ReactNode, useCallback, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline"; export type ButtonSize = "sm" | "md" | "lg" | "icon"; export interface ButtonProps extends Omit< HTMLMotionProps<"button">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; /** Spawn a Material-style ripple from the press point. Off by default. */ ripple?: boolean; children?: ReactNode; } export interface ButtonLinkProps extends Omit< HTMLMotionProps<"a">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; children?: ReactNode; } type Ripple = { id: number; x: number; y: number; size: number }; const VARIANT_CLASS: Record = { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-primary/5", outline: "border border-border bg-transparent text-foreground hover:bg-primary/5", }; const SIZE_CLASS: Record = { sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg", }; export const Button = forwardRef( function Button( { variant = "primary", size = "md", pressScale = 0.93, ripple = false, className, children, onPointerDown, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const [ripples, setRipples] = useState([]); const nextId = useRef(0); const handlePointerDown = useCallback( (event: PointerEvent) => { if (ripple && !reduce) { const rect = event.currentTarget.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; const id = nextId.current++; setRipples((prev) => [ ...prev, { id, x: event.clientX - rect.left, y: event.clientY - rect.top, size, }, ]); } onPointerDown?.(event); }, [ripple, reduce, onPointerDown], ); return ( {ripple && !reduce ? ( {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } /> ))} ) : null} {children} ); }, ); export const ButtonLink = forwardRef( function ButtonLink( { variant = "primary", size = "md", pressScale = 0.93, className, children, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); return ( {children} ); }, ); 54:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/motion/button/stateful.tsx","content":"$52","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"path":"components/motion/button/base.tsx","content":"$53","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"lib/ease.ts","content":"$54","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"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","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]