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:T3442,"use client"; // karaui.kamisama-v0.my.id/components/motion/segmented-control 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} ); })} ); } 53: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","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/segmented-control.tsx","content":"$52","type":"registry:component","target":"@components/motion/segmented-control.tsx"},{"path":"lib/ease.ts","content":"$53","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"}]]}]