4e: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"] 4f: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"] 50:T3a28,"use client"; // karaui.kamisama-v0.my.id/components/motion/progress import { motion, useReducedMotion, useSpring, useTransform, } from "motion/react"; import { type ReactNode, useEffect, useId, useRef } from "react"; import { NumberTicker } from "@/components/motion/number-ticker"; import { EASE_IN_OUT, EASE_OUT, SPRING_GLIDE } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type ProgressSize = "sm" | "md" | "lg"; // Reduced motion: indeterminate states drop every transform and keep a calm // opacity pulse (same rhythm as Loader's reduced variant). const REDUCED_PULSE = { animate: { opacity: [0.35, 0.85, 0.35] }, transition: { duration: 1.4, ease: EASE_IN_OUT, repeat: Infinity }, }; const clamp01 = (n: number) => (Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0); /** * A spring-smoothed 0..1 fraction. Uses SPRING_GLIDE (critically damped) so * the fill never rebounds past the true value. Reduced motion jumps instead. */ function useFraction(fraction: number) { const reduce = useReducedMotion(); const spring = useSpring(0, SPRING_GLIDE); useEffect(() => { if (reduce) spring.jump(fraction); else spring.set(fraction); }, [fraction, reduce, spring]); return spring; } function defaultValueText(percent: number) { return `${percent}%`; } interface ProgressCommonProps { /** Current value. Omit (or pass `null`) together with `indeterminate`. */ value?: number | null; /** Upper bound. Defaults to 100. */ max?: number; /** Unknown-duration mode: a sliding segment (bar) or a spinning arc (circle). */ indeterminate?: boolean; /** Visible label. When it is not a string, also pass `aria-label`. */ label?: ReactNode; /** Show the rolling percentage. */ showValue?: boolean; /** Screen-reader value text. Defaults to "42%". */ getValueText?: (percent: number, value: number, max: number) => string; "aria-label"?: string; className?: string; } function useProgressState( value: number | null | undefined, max: number, indeterminate: boolean, ) { const safeMax = max > 0 ? max : 100; const isIndeterminate = indeterminate || value == null; const current = isIndeterminate ? 0 : Math.min(safeMax, Math.max(0, value ?? 0)); const fraction = clamp01(current / safeMax); const percent = Math.round(fraction * 100); return { safeMax, isIndeterminate, current, fraction, percent }; } /* -------------------------------------------------------------------------- */ /* Progress */ /* -------------------------------------------------------------------------- */ const TRACK_SIZE: Record = { sm: "h-1", md: "h-2", lg: "h-3", }; export interface ProgressProps extends ProgressCommonProps { size?: ProgressSize; /** Classes for the fill (e.g. `bg-emerald-500`). */ indicatorClassName?: string; /** Classes for the track. */ trackClassName?: string; } /** * Linear progress bar. The fill is an HTML element scaled on X from its left * edge (transform only), smoothed by a critically damped spring. */ export function Progress({ value, max = 100, indeterminate = false, label, showValue = false, size = "md", getValueText = defaultValueText, indicatorClassName, trackClassName, className, "aria-label": ariaLabel, }: ProgressProps) { const reduce = useReducedMotion(); const labelId = useId(); const { safeMax, isIndeterminate, current, fraction, percent } = useProgressState(value, max, indeterminate); const scaleX = useFraction(fraction); const hasHeader = label != null || (showValue && !isIndeterminate); return (

{hasHeader ? (

{label != null ? ( {label} ) : ( )} {showValue && !isIndeterminate ? ( ) : null}

) : null}

{isIndeterminate ? ( reduce ? ( ) : ( // A 40%-wide segment travels from fully off the left edge // (-100% of itself) to fully off the right (250% of itself). ) ) : ( )}

); } /* -------------------------------------------------------------------------- */ /* ProgressCircle */ /* -------------------------------------------------------------------------- */ export interface ProgressCircleProps extends ProgressCommonProps { /** Diameter in px. */ size?: number; /** Stroke width in px. */ thickness?: number; /** Replace the centered percentage with custom content. */ children?: ReactNode; /** Classes for the progress arc (stroke via `text-*`). */ indicatorClassName?: string; } /** * Ring progress. The arc draws with `pathLength`; the 12 o'clock start and * the indeterminate spin rotate whole HTML/SVG boxes with CSS transforms, so * no transform-origin is ever set on an inner SVG shape. */ export function ProgressCircle({ value, max = 100, indeterminate = false, label, showValue = true, size = 64, thickness, getValueText = defaultValueText, children, indicatorClassName, className, "aria-label": ariaLabel, }: ProgressCircleProps) { const reduce = useReducedMotion(); const labelId = useId(); const { safeMax, isIndeterminate, current, fraction, percent } = useProgressState(value, max, indeterminate); const stroke = thickness ?? Math.max(3, Math.round(size * 0.09)); const r = (size - stroke) / 2; const c = size / 2; const pathLength = useFraction(fraction); // A round cap on a zero-length path still paints a dot; hide it at 0. const arcOpacity = useTransform(pathLength, (v) => (v > 0.002 ? 1 : 0)); const fontSize = Math.max(10, Math.round(size * 0.22)); const center = children ?? (showValue && !isIndeterminate ? ( ) : null); const ring = ( ); return (

{isIndeterminate ? ( // The spin lives on an HTML wrapper, never on an SVG child. {ring} ) : ( ring )} {center != null ? ( ) : null}

{label != null ? ( {label} ) : null}

); } /* -------------------------------------------------------------------------- */ /* ProgressSteps */ /* -------------------------------------------------------------------------- */ export type ProgressStep = { label: string }; export interface ProgressStepsProps { /** Number of segments, or labelled steps (labels render under segments). */ steps: number | ProgressStep[]; /** * Completed steps. Fractions partially fill the next segment, e.g. `2.5` * fills two segments and half of the third. */ value: number; size?: ProgressSize; /** Hide the step labels even when `steps` carries them. */ hideLabels?: boolean; "aria-label"?: string; indicatorClassName?: string; className?: string; } // Delay between neighbouring segments so a jump of several steps reads as a // sequence (stage 1 completes, then stage 2…) instead of all at once. const SEGMENT_STAGGER = 0.14; /** * Segmented progress: N tracks that fill one after another, e.g. upload * stages or onboarding steps. Increases fill left→right; decreases unwind * right→left. */ export function ProgressSteps({ steps, value, size = "md", hideLabels = false, indicatorClassName, className, "aria-label": ariaLabel = "Progress", }: ProgressStepsProps) { const reduce = useReducedMotion(); const list: ProgressStep[] = typeof steps === "number" ? Array.from({ length: Math.max(1, steps) }, (_, i) => ({ label: `Step ${i + 1}` })) : steps; const count = list.length; const current = Math.min(count, Math.max(0, Number.isFinite(value) ? value : 0)); const showLabels = !hideLabels && typeof steps !== "number"; // Previous value decides the sequence direction and where it starts. const prevRef = useRef(current); const from = prevRef.current; useEffect(() => { prevRef.current = current; }, [current]); const growing = current >= from; const activeIndex = Math.min(count - 1, Math.floor(current)); const valueText = current >= count ? `All ${count} steps complete` : `Step ${activeIndex + 1} of ${count}: ${list[activeIndex]?.label ?? ""}`; return (

{list.map((_step, i) => { const fill = clamp01(current - i); const order = growing ? Math.max(0, i - Math.floor(from)) : Math.max(0, Math.ceil(from) - 1 - i); return (

); })}

{showLabels ? ( ) : null}

); } 51:T14cc,"use client"; import { animate, motion, useInView, useReducedMotion } from "motion/react"; import { useEffect, useMemo, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface NumberTickerProps { value: number; /** Digits to pad to (left). */ pad?: number; /** Per-digit roll duration in seconds. */ duration?: number; /** Stagger between digits. */ stagger?: number; /** Render only after the element enters the viewport. */ startOnView?: boolean; prefix?: string; suffix?: string; /** Add a small blur during digit rolls. */ blur?: boolean; className?: string; digitClassName?: string; /** Insert en-US group separators (commas); fixed so server and client match. Server-component safe. */ locale?: boolean; /** Custom formatter. Client-only — server components must use `locale` instead. */ format?: (value: number) => string; } const DIGIT_HEIGHT_EM = 1.1; const DIGITS = Array.from({ length: 10 }, (_, n) => n); export function NumberTicker({ value, pad, duration = 0.9, stagger = 0.04, startOnView = true, prefix, suffix, blur = false, className, digitClassName, locale, format, }: NumberTickerProps) { const containerRef = useRef(null); const inView = useInView(containerRef, { once: true, amount: 0.6 }); const [armed, setArmed] = useState(!startOnView); useEffect(() => { if (startOnView && inView) setArmed(true); }, [startOnView, inView]); const text = useMemo(() => { const rounded = Math.round(value); const formatted = format ? format(rounded) : locale ? rounded.toLocaleString("en-US") : rounded.toString(); return pad ? formatted.padStart(pad, "0") : formatted; }, [value, pad, format, locale]); const glyphs = useMemo(() => { const chars = text.split(""); // Key by place value (position from the right): a changing digit keeps its // identity and rolls to the new value instead of remounting and replaying // from 0. Growing numbers add glyphs on the left without re-keying the // ones, tens, hundreds already on screen. return chars.map((char, i) => ({ char, id: `g-${chars.length - 1 - i}` })); }, [text]); const readableText = `${prefix ?? ""}${text}${suffix ?? ""}`; // Stagger is an entrance flourish. Once the reveal has played, value // changes roll every digit immediately — a per-digit delay on live updates // reads as lag. const [entered, setEntered] = useState(false); useEffect(() => { if (!armed || entered) return; const total = (duration + glyphs.length * stagger) * 1000; const t = window.setTimeout(() => setEntered(true), total); return () => window.clearTimeout(t); }, [armed, entered, duration, stagger, glyphs.length]); return ( {readableText} ); } function Digit({ digit, delay, duration, blur, className, }: { digit: number; delay: number; duration: number; blur: boolean; className?: string; }) { const reduce = useReducedMotion(); const columnRef = useRef(null); useEffect(() => { if (reduce || !blur || !columnRef.current || !Number.isFinite(digit)) { return; } const node = columnRef.current; const controls = animate( node, { filter: ["blur(10px)", "blur(0px)"] }, { duration: Math.min(duration * 0.75, 0.32), delay, ease: EASE_OUT, }, ); return () => { controls.stop(); node.style.filter = "blur(0px)"; }; }, [blur, delay, digit, duration, reduce]); return ( {DIGITS.map((n) => ( {n} ))} ); } 52: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; 4d:["$","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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/motion/progress.tsx","content":"$50","type":"registry:component","target":"@components/motion/progress.tsx"},{"path":"components/motion/number-ticker.tsx","content":"$51","type":"registry:component","target":"@components/motion/number-ticker.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.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"}]]}]