4f: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"] 50: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"] 51:T3c29,"use client"; // karaui.kamisama-v0.my.id/components/blocks/comparison-table import { Check, ChevronDown, Minus } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type CSSProperties, type ReactNode, useCallback, useMemo, useState } from "react"; import { Button } from "@/components/motion/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, useCollapsible, } from "@/components/motion/collapsible"; import { NumberTicker } from "@/components/motion/number-ticker"; import { SegmentedControl } from "@/components/motion/segmented-control"; import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type ComparisonBilling = "monthly" | "yearly"; /** true = included, false = not included, "partial" = limited, anything else renders as text. */ export type ComparisonValue = boolean | "partial" | ReactNode; export interface ComparisonPlan { id: string; name: string; description?: string; /** Price per month for each billing period (yearly = monthly equivalent). */ price: { monthly: number; yearly: number }; cta?: string; /** Highlights the whole column. */ recommended?: boolean; } export interface ComparisonFeature { id: string; label: ReactNode; /** Secondary line under the label. */ hint?: ReactNode; /** Value per plan id. Missing ids read as not included. */ values: Record; } export interface ComparisonGroup { id: string; label: string; features: ComparisonFeature[]; } export interface ComparisonTableProps { plans: ComparisonPlan[]; groups: ComparisonGroup[]; billing?: ComparisonBilling; defaultBilling?: ComparisonBilling; onBillingChange?: (billing: ComparisonBilling) => void; /** Groups open initially. Default: all. */ defaultOpenGroups?: string[]; /** Plan shown in the narrow (single-column) layout. */ mobilePlan?: string; defaultMobilePlan?: string; onMobilePlanChange?: (planId: string) => void; onSelect?: (plan: ComparisonPlan, billing: ComparisonBilling) => void; /** ISO 4217 code. Default "USD". */ currency?: string; /** Default "en-US" so server and client agree. */ locale?: string; /** Badge beside "Yearly". Default "−20%"; null hides it. */ yearlyBadge?: ReactNode; /** Label on the recommended column. Default "Recommended". */ recommendedLabel?: ReactNode; /** Classes for the scrolling body (set a max height here). Default `max-h-[22rem]`. */ bodyClassName?: string; className?: string; } function useControllable( value: T | undefined, defaultValue: T, onChange: ((next: T) => void) | undefined, ) { const [internal, setInternal] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : internal; const set = useCallback( (next: T) => { if (!controlled) setInternal(next); onChange?.(next); }, [controlled, onChange], ); return [current, set] as const; } /** * Plan comparison grid: a monthly/yearly switch rolls every price, plan * columns sit in a sticky header while feature rows scroll beneath, feature * groups collapse with a height morph, cells read check / dash / partial or * text, and the recommended plan's column is tinted top to bottom. In a * narrow container the columns give way to a plan switcher with one value * column that cross-fades between plans. Complements `PricingTable` (cards) * as the detailed "compare all features" section. */ export function ComparisonTable({ plans, groups, billing: billingProp, defaultBilling = "monthly", onBillingChange, defaultOpenGroups, mobilePlan: mobilePlanProp, defaultMobilePlan, onMobilePlanChange, onSelect, currency = "USD", locale = "en-US", yearlyBadge = "−20%", recommendedLabel = "Recommended", bodyClassName, className, }: ComparisonTableProps) { const [billing, setBilling] = useControllable(billingProp, defaultBilling, onBillingChange); const [mobilePlan, setMobilePlan] = useControllable( mobilePlanProp, defaultMobilePlan ?? plans.find((p) => p.recommended)?.id ?? plans[0]?.id ?? "", onMobilePlanChange, ); const openSet = useMemo( () => new Set(defaultOpenGroups ?? groups.map((g) => g.id)), [defaultOpenGroups, groups], ); const fractional = plans.some( (p) => !Number.isInteger(p.price.monthly) || !Number.isInteger(p.price.yearly), ); const money = useMemo( () => new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: fractional ? 2 : 0, maximumFractionDigits: fractional ? 2 : 0, }), [locale, currency, fractional], ); const columns: CSSProperties = { gridTemplateColumns: `minmax(8.5rem, 1.35fr) repeat(${plans.length}, minmax(0, 1fr))`, }; const current = plans.find((p) => p.id === mobilePlan) ?? plans[0]; return (

setBilling(v as ComparisonBilling)} options={[ { value: "monthly", label: "Monthly" }, { value: "yearly", label: ( Yearly {yearlyBadge ? ( {yearlyBadge} ) : null} ), }, ]} />

{/* Wide layout: all plan columns */}

Compare plans

{plans.map((plan) => (

{plan.recommended ? ( <> {recommendedLabel} ) : ( )} {plan.name}

))}

{groups.map((group) => ( {group.features.map((feature) => (

{plans.map((plan) => (

))}

))} ))}

{/* Narrow layout: plan switcher + one value column */}

({ value: p.id, label: p.name }))} /> {current ? (

{current.name} {current.recommended ? ( {recommendedLabel} ) : null}

) : null}

{groups.map((group) => ( {group.features.map((feature) => (

))} ))}

); } function PlanPrice({ plan, billing, money, }: { plan: ComparisonPlan; billing: ComparisonBilling; money: Intl.NumberFormat; }) { const amount = plan.price[billing]; const free = plan.price.monthly === 0 && plan.price.yearly === 0; return ( money.format(cents / 100)} duration={0.6} stagger={0.03} startOnView={false} className="text-lg font-semibold tracking-tight" /> {free ? null : /mo} ); } function GroupTrigger({ label, count }: { label: string; count: number }) { const { open } = useCollapsible("GroupTrigger"); const reduce = useReducedMotion(); return ( {label} {count} {count === 1 ? "feature" : "features"} ); } function FeatureLabel({ feature }: { feature: ComparisonFeature }) { return (

{feature.label}

{feature.hint ?

{feature.hint}

: null}

); } function Cell({ value, planName }: { value: ComparisonValue | undefined; planName: string }) { if (value === true) { return ( {planName}: included ); } if (value === false || value === undefined || value === null) { return ( {planName}: not included ); } if (value === "partial") { return ( {planName}: partial ); } return ( {planName}: {value} ); } 52:T190c,"use client"; import { motion, useReducedMotion, type Transition } from "motion/react"; import { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useId, useState, type ButtonHTMLAttributes, type HTMLAttributes, type MouseEvent, type ReactElement, type ReactNode, } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; // Collapsible is the unstyled disclosure primitive: one trigger, one panel. // `Accordion` (accordion.tsx) is built from it; `BouncyAccordion` is the // springy, single-open icon-row variant. Reach for this when a single region // should show or hide in flow ("Show 3 more", an expandable activity row). /** Entrance is a touch longer than the exit — exits should feel faster. */ const OPEN_TRANSITION: Transition = { duration: 0.28, ease: EASE_OUT }; const CLOSE_TRANSITION: Transition = { duration: 0.2, ease: EASE_OUT }; interface CollapsibleContextValue { open: boolean; setOpen: (open: boolean) => void; disabled: boolean; triggerId: string; contentId: string; } const CollapsibleContext = createContext(null); export function useCollapsible(component = "useCollapsible") { const context = useContext(CollapsibleContext); if (!context) { throw new Error(`${component} must be used within .`); } return context; } export interface CollapsibleProps extends Omit, "onChange"> { /** Controlled open state. */ open?: boolean; /** Initial open state when uncontrolled. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean; /** Override the generated trigger id (the content is labelled by it). */ triggerId?: string; /** Override the generated content id (the trigger controls it). */ contentId?: string; children?: ReactNode; } export const Collapsible = forwardRef( function Collapsible( { open: openProp, defaultOpen = false, onOpenChange, disabled = false, triggerId: triggerIdProp, contentId: contentIdProp, className, children, ...rest }, ref, ) { const [internal, setInternal] = useState(defaultOpen); const controlled = openProp !== undefined; const open = controlled ? openProp : internal; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternal(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const baseId = useId(); const triggerId = triggerIdProp ?? `${baseId}-trigger`; const contentId = contentIdProp ?? `${baseId}-content`; return (

{children}

); }, ); type ClonableChild = ReactElement<{ onClick?: (event: MouseEvent) => void; [key: string]: unknown; }>; export interface CollapsibleTriggerProps extends ButtonHTMLAttributes { /** Merge trigger behaviour onto the single child element instead of rendering a ` ); }); export interface CollapsibleContentProps extends HTMLAttributes { /** Class for the inner wrapper that holds the children (padding goes here, * never on the animated outer element, so the closed height is truly 0). */ innerClassName?: string; /** Set to give the panel `role="region"` labelled by its trigger. */ region?: boolean; children?: ReactNode; } /** The disclosed panel. Stays mounted (inert while closed) so `aria-controls` always resolves. */ export function CollapsibleContent({ className, innerClassName, region = false, children, style, ...rest }: CollapsibleContentProps) { const { open, triggerId, contentId } = useCollapsible("CollapsibleContent"); const reduce = useReducedMotion(); const fade = open ? OPEN_TRANSITION : CLOSE_TRANSITION; return ( // Height is animated on purpose: disclosure is a layout job — the panel // has to push the content below it down in flow, which transforms can't. // Reduced motion snaps the height and keeps only the opacity fade. )} id={contentId} role={region ? "region" : undefined} aria-labelledby={region ? triggerId : undefined} data-state={open ? "open" : "closed"} inert={!open} initial={false} animate={{ height: open ? "auto" : 0, opacity: open ? 1 : 0 }} transition={ reduce ? { height: { duration: 0 }, opacity: { duration: 0.15 } } : fade } style={style} className={cn("overflow-hidden", className)} >

{children}

); } 53: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} ))} ); } 54:T3402,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useId, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; import { SPRING_LAYOUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease"; import { cn } from "@/lib/utils"; // SegmentedControl vs Tabs: `Tabs` (tabs.tsx, variants pill/segment/underline) // switches *panels* with tablist/tab semantics. `SegmentedControl` is a form // control: it picks one *value* with radiogroup/radio semantics, can post that // value with a form via `name`, supports disabled options, icon-only options // and a full-width layout, and its thumb is a raised card surface rather than // a filled accent pill. Reach for Tabs when each option owns content below it. export type SegmentedControlSize = "sm" | "md" | "lg"; export interface SegmentedControlOption { value: string; label?: ReactNode; icon?: ReactNode; disabled?: boolean; /** Required when the option has only an icon. */ "aria-label"?: string; } const trackSize: Record = { sm: "h-8 p-0.5 text-xs", md: "h-10 p-1 text-sm", lg: "h-12 p-1 text-sm", }; const itemSize: Record = { sm: "gap-1.5 px-2.5 [&_svg]:size-3.5", md: "gap-2 px-3.5 [&_svg]:size-4", lg: "gap-2 px-5 [&_svg]:size-[18px]", }; function useControllable( value: T | undefined, defaultValue: T, onChange: ((next: T) => void) | undefined, ) { const [internal, setInternal] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : internal; const set = useCallback( (next: T) => { if (!controlled) setInternal(next); onChange?.(next); }, [controlled, onChange], ); return [current, set] as const; } /** Index of the next enabled option from `from` in `dir`, wrapping around. */ function nextEnabled(options: { disabled?: boolean }[], from: number, dir: 1 | -1) { const n = options.length; for (let step = 1; step <= n; step++) { const i = (((from + dir * step) % n) + n) % n; if (!options[i].disabled) return i; } return from; } export interface SegmentedControlProps { options: SegmentedControlOption[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; size?: SegmentedControlSize; /** Stretch to the container width with equal-width segments. */ fullWidth?: boolean; disabled?: boolean; /** When set, a hidden input posts the value with the surrounding form. */ name?: string; "aria-label"?: string; "aria-labelledby"?: string; className?: string; thumbClassName?: string; } export function SegmentedControl({ options, value, defaultValue, onValueChange, size = "md", fullWidth = false, disabled = false, name, className, thumbClassName, ...aria }: SegmentedControlProps) { const [current, setValue] = useControllable( value, defaultValue ?? options.find((o) => !o.disabled)?.value ?? "", onValueChange, ); const reduce = useReducedMotion(); const layoutId = useId(); const refs = useRef<(HTMLButtonElement | null)[]>([]); const items = options.map((o) => ({ ...o, disabled: disabled || o.disabled })); const selectedIndex = items.findIndex((o) => o.value === current); // Roving tab stop: the checked radio, or the first enabled one when none is. const tabStop = selectedIndex >= 0 && !items[selectedIndex].disabled ? selectedIndex : items.findIndex((o) => !o.disabled); const onKeyDown = (event: KeyboardEvent, index: number) => { let next: number | null = null; switch (event.key) { case "ArrowRight": case "ArrowDown": next = nextEnabled(items, index, 1); break; case "ArrowLeft": case "ArrowUp": next = nextEnabled(items, index, -1); break; case "Home": next = nextEnabled(items, -1, 1); break; case "End": next = nextEnabled(items, items.length, -1); break; default: return; } event.preventDefault(); if (next === null || items[next].disabled) return; // Selection follows focus, as the WAI-ARIA radio group pattern prescribes. refs.current[next]?.focus(); if (items[next].value !== current) setValue(items[next].value); }; return ( // layoutRoot keeps the thumb's shared-layout projection local, so scrolled // or fixed ancestors never leak offsets into its glide. {name ? : null} {items.map((option, index) => { const checked = option.value === current; const iconOnly = !option.label; return ( { refs.current[index] = el; }} type="button" role="radio" aria-checked={checked} aria-label={option["aria-label"]} disabled={option.disabled} tabIndex={index === tabStop ? 0 : -1} data-state={checked ? "checked" : "unchecked"} onClick={() => !checked && setValue(option.value)} onKeyDown={(e) => onKeyDown(e, index)} whileTap={reduce || option.disabled ? undefined : { scale: 0.96 }} transition={SPRING_PRESS} className={cn( "relative inline-flex min-w-0 select-none items-center justify-center whitespace-nowrap rounded-[9px] font-medium outline-none transition-colors duration-200", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted", "disabled:cursor-not-allowed disabled:opacity-50", fullWidth && "flex-1", itemSize[size], iconOnly && "aspect-square px-0", checked ? "text-foreground" : "text-muted-foreground enabled:hover:text-foreground", )} > {checked ? ( ) : null} {option.icon ? ( {option.icon} ) : null} {option.label ? {option.label} : null} ); })} ); } /* ------------------------------------------------------------------------ */ /* ToggleGroup */ /* ------------------------------------------------------------------------ */ export interface ToggleGroupItem { value: string; label?: ReactNode; icon?: ReactNode; disabled?: boolean; /** Required when the item has only an icon. */ "aria-label"?: string; } type ToggleGroupBase = { items: ToggleGroupItem[]; size?: SegmentedControlSize; disabled?: boolean; "aria-label"?: string; "aria-labelledby"?: string; className?: string; }; export type ToggleGroupSingleProps = ToggleGroupBase & { type: "single"; /** The pressed item, or `""` when none is pressed. */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Disallow un-pressing the active item, so one is always pressed. */ required?: boolean; }; export type ToggleGroupMultipleProps = ToggleGroupBase & { type: "multiple"; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; }; export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps; const toggleSize: Record = { sm: "h-7 min-w-7 gap-1.5 px-2 text-xs [&_svg]:size-3.5", md: "h-9 min-w-9 gap-2 px-2.5 text-sm [&_svg]:size-4", lg: "h-11 min-w-11 gap-2 px-3.5 text-sm [&_svg]:size-[18px]", }; export function ToggleGroup(props: ToggleGroupProps) { const { items, size = "md", disabled = false, className } = props; const reduce = useReducedMotion(); const refs = useRef<(HTMLButtonElement | null)[]>([]); const [focusIndex, setFocusIndex] = useState(null); // Normalise both modes to a string[] internally. const single = props.type === "single"; const [current, setCurrent] = useControllable( props.value === undefined ? undefined : single ? (props.value ? [props.value as string] : []) : (props.value as string[]), single ? props.defaultValue ? [props.defaultValue as string] : [] : ((props.defaultValue as string[] | undefined) ?? []), (next) => { if (props.type === "single") props.onValueChange?.(next[0] ?? ""); else props.onValueChange?.(next); }, ); const list = items.map((i) => ({ ...i, disabled: disabled || i.disabled })); const firstEnabled = list.findIndex((i) => !i.disabled); const tabStop = focusIndex !== null && !list[focusIndex]?.disabled ? focusIndex : firstEnabled; const toggle = (itemValue: string) => { const pressed = current.includes(itemValue); if (props.type === "single") { if (pressed && props.required) return; setCurrent(pressed ? [] : [itemValue]); } else { setCurrent(pressed ? current.filter((v) => v !== itemValue) : [...current, itemValue]); } }; const onKeyDown = (event: KeyboardEvent, index: number) => { let next: number | null = null; if (event.key === "ArrowRight" || event.key === "ArrowDown") next = nextEnabled(list, index, 1); else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = nextEnabled(list, index, -1); else if (event.key === "Home") next = nextEnabled(list, -1, 1); else if (event.key === "End") next = nextEnabled(list, list.length, -1); if (next === null) return; event.preventDefault(); // Focus moves; pressing stays on Space/Enter (toggle buttons, not radios). setFocusIndex(next); refs.current[next]?.focus(); }; return ( {list.map((item, index) => { const pressed = current.includes(item.value); return ( { refs.current[index] = el; }} type="button" aria-pressed={pressed} aria-label={item["aria-label"]} disabled={item.disabled} tabIndex={index === tabStop ? 0 : -1} data-state={pressed ? "on" : "off"} onClick={() => { setFocusIndex(index); toggle(item.value); }} onFocus={() => setFocusIndex(index)} onKeyDown={(e) => onKeyDown(e, index)} whileTap={reduce || item.disabled ? undefined : { scale: 0.88 }} transition={SPRING_PRESS} className={cn( "relative isolate inline-flex select-none items-center justify-center rounded-lg font-medium outline-none transition-colors duration-200", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card", "disabled:cursor-not-allowed disabled:opacity-50", toggleSize[size], pressed ? "text-foreground" : "text-muted-foreground enabled:hover:bg-muted/60 enabled:hover:text-foreground", )} > {pressed ? ( ) : null} {item.icon ? ( {item.icon} ) : null} {item.label ? {item.label} : null} ); })} ); } 55: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; 56: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} ); }, ); 57:T1b47,"use client"; 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 ( ); }); 58:T5a6,"use client"; import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { useRef, type ReactNode } from "react"; import { SPRING_MOUSE } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export interface MagneticProps { children: ReactNode; strength?: number; className?: string; } export function Magnetic({ children, strength = 0.35, className }: MagneticProps) { const ref = useRef(null); const reduce = useReducedMotion(); const canHover = useHoverCapable(); // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion. const enabled = !reduce && canHover; const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, SPRING_MOUSE); const sy = useSpring(y, SPRING_MOUSE); const onMove = (e: React.MouseEvent) => { const el = ref.current; if (!el || !enabled) return; const rect = el.getBoundingClientRect(); x.set((e.clientX - rect.left - rect.width / 2) * strength); y.set((e.clientY - rect.top - rect.height / 2) * strength); }; const onLeave = () => { x.set(0); y.set(0); }; return ( {children} ); } 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/comparison-table.tsx","content":"$51","type":"registry:component","target":"@components/motion/comparison-table.tsx"},{"path":"components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n","type":"registry:component","target":"@components/motion/button/index.tsx"},{"path":"components/motion/collapsible.tsx","content":"$52","type":"registry:component","target":"@components/motion/collapsible.tsx"},{"path":"components/motion/number-ticker.tsx","content":"$53","type":"registry:component","target":"@components/motion/number-ticker.tsx"},{"path":"components/motion/segmented-control.tsx","content":"$54","type":"registry:component","target":"@components/motion/segmented-control.tsx"},{"path":"lib/ease.ts","content":"$55","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"},{"path":"components/motion/button/base.tsx","content":"$56","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"components/motion/button/magnetic.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Magnetic } from \"../magnetic\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport interface MagneticButtonProps extends ButtonProps {\n /** Magnetic pull strength. Default 0.25. */\n strength?: number;\n /** Class applied to the magnetic wrapper. */\n magneticClassName?: string;\n}\n\nexport const MagneticButton = forwardRef(function MagneticButton(\n { strength = 0.25, magneticClassName, children, ...rest },\n ref,\n) {\n return (\n \n \n \n );\n});\n","type":"registry:component","target":"@components/motion/button/magnetic.tsx"},{"path":"components/motion/button/stateful.tsx","content":"$57","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"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":"components/motion/magnetic.tsx","content":"$58","type":"registry:component","target":"@components/motion/magnetic.tsx"}],"className":"h-[70svh] min-h-80"}]]}]