52: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"] 53: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"] 54:T1c33,"use client"; import { ChevronLeft } from "lucide-react"; import { MotionConfig, motion, useReducedMotion } from "motion/react"; import { type CSSProperties, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import useMeasure from "react-use-measure"; import { cn } from "@/lib/sona-utils"; export interface ExpandingActionItem { /** Stable value passed to `onValueSelect` when the item is chosen. */ value: string; /** Content displayed inside the choice button. */ label: ReactNode; /** Whether the choice is unavailable. @default false */ disabled?: boolean; } export interface ExpandingActionProps { /** Short choices revealed when the action expands. */ items: ExpandingActionItem[]; /** Content displayed inside the collapsed trigger. */ trigger: ReactNode; /** Optional icon displayed before the trigger content. @default undefined */ triggerIcon?: ReactNode; /** Controlled expanded state. @default undefined */ open?: boolean; /** Initial expanded state for uncontrolled usage. @default false */ defaultOpen?: boolean; /** Called whenever the expanded state changes. @default undefined */ onOpenChange?: (open: boolean) => void; /** Called with the selected item value before the action collapses. @default undefined */ onValueSelect?: (value: string) => void; /** Accessible label for the control that returns to the trigger. @default "Back" */ backLabel?: string; /** Whether the trigger and choices are unavailable. @default false */ disabled?: boolean; /** Additional classes for the rendered state container. @default undefined */ className?: string; /** Additional classes for the collapsed trigger. @default undefined */ triggerClassName?: string; /** Additional classes applied to every choice button. @default undefined */ optionClassName?: string; } const widthSpring = { type: "spring", stiffness: 260, damping: 48, mass: 0.9, } as const; const tokenStyle = { "--expanding-action-surface": "var(--background)", "--expanding-action-foreground": "var(--foreground)", "--expanding-action-muted": "var(--muted-foreground)", "--expanding-action-hover": "color-mix(in oklab, var(--accent) 55%, transparent)", "--expanding-action-border": "var(--border)", "--expanding-action-ring": "var(--ring)", } as CSSProperties; export default function ExpandingAction({ items, trigger, triggerIcon, open, defaultOpen = false, onOpenChange, onValueSelect, backLabel = "Back", disabled = false, className, triggerClassName, optionClassName, }: ExpandingActionProps) { const [contentRef, contentBounds] = useMeasure(); const [internalOpen, setInternalOpen] = useState(defaultOpen); const [isSurfaceAnimating, setIsSurfaceAnimating] = useState(false); const shouldReduceMotion = useReducedMotion(); const isOpen = open ?? internalOpen; const previousIsOpen = useRef(isOpen); const hasEnabledItem = items.some((item) => !item.disabled); const widthTransition = shouldReduceMotion ? { duration: 0 } : widthSpring; const setOpen = (nextOpen: boolean) => { if (open === undefined) setInternalOpen(nextOpen); onOpenChange?.(nextOpen); }; useLayoutEffect(() => { if (previousIsOpen.current === isOpen) return; previousIsOpen.current = isOpen; setIsSurfaceAnimating(true); }, [isOpen]); return ( setIsSurfaceAnimating(true)} onAnimationComplete={() => setIsSurfaceAnimating(false)} className={cn( "relative inline-flex max-w-full items-center rounded-full", isSurfaceAnimating ? "overflow-x-hidden" : "overflow-x-auto", className, )} style={tokenStyle} transition={widthTransition} >

{!isOpen ? ( ) : (

{items.map((item) => ( ))}

)}

); } 51:["$","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","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","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}]]}],["$","$L52",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/sonaui/expanding-action/expanding-action.tsx","content":"$54","type":"registry:ui","target":"components/ui/expanding-action/expanding-action.tsx"}],"className":"h-[70svh] min-h-80"}]]}]