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:T1ac0,"use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { Check, ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" // --- Architecture: Primitives (Unstyled but behaving) --- // We are using Radix UI Accordion and Checkbox primitives directly. // This component acts as a "Component" layer in the architecture: // - Wraps primitives with styling // - Supports controlled/uncontrolled usage // - Uses data-attributes for state and slots for targeting // --- Context --- // We use a context to share selection state between the root and items/checkboxes // This allows for the Compound Component pattern. interface AccordionMultiselectContextValue { selectedValues: string[] onSelectionChange: (value: string, checked: boolean) => void } const AccordionMultiselectContext = React.createContext(null) function useAccordionMultiselect() { const context = React.useContext(AccordionMultiselectContext) if (!context) { throw new Error("AccordionMultiselect subcomponents must be used within AccordionMultiselect") } return context } // --- Components --- // We can't directly extend AccordionPrimitive.Root because it has specific props that might conflict or be typed in a way TS doesn't like for intersection // Instead, we'll define our props and intersect with the primitive's props, excluding what we override/don't need if necessary type AccordionRootProps = React.ComponentPropsWithoutRef interface AccordionMultiselectProps extends Omit { value?: string[] onValueChange?: (value: string[]) => void defaultValue?: string[] } function AccordionMultiselect({ value: controlledValue, onValueChange, defaultValue = [], className, children, ...props }: AccordionMultiselectProps) { // Controlled/Uncontrolled pattern const [internalValue, setInternalValue] = React.useState(defaultValue) const isControlled = controlledValue !== undefined const selectedValues = isControlled ? controlledValue : internalValue const handleSelectionChange = React.useCallback( (value: string, checked: boolean) => { let newValues: string[] if (checked) { newValues = [...selectedValues, value] } else { newValues = selectedValues.filter(id => id !== value) } if (!isControlled) { setInternalValue(newValues) } onValueChange?.(newValues) }, [selectedValues, isControlled, onValueChange], ) return ( {children} ) } function AccordionMultiselectItem({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ) } function AccordionMultiselectTrigger({ className, children, ...props }: React.ComponentPropsWithoutRef) { return ( svg]:rotate-180 cursor-pointer", className, )} {...props} > {children} ) } function AccordionMultiselectContent({ className, children, ...props }: React.ComponentPropsWithoutRef) { return (

{children}

) } // --- Sub-components for Item Options --- interface AccordionMultiselectOptionProps extends React.HTMLAttributes { value: string showCheckbox?: boolean children: React.ReactNode } function AccordionMultiselectOption({ value, showCheckbox = false, className, onClick, children, ...props }: AccordionMultiselectOptionProps) { const { selectedValues, onSelectionChange } = useAccordionMultiselect() const isSelected = selectedValues.includes(value) const handleClick = (e: React.MouseEvent) => { onSelectionChange(value, !isSelected) onClick?.(e) } return (

{showCheckbox && (

onSelectionChange(value, checked as boolean)} onClick={e => e.stopPropagation()} className={cn( "peer h-4 w-4 shrink-0 rounded-[3px] border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", )} >

)}

{children}

) } export { AccordionMultiselect, AccordionMultiselectItem, AccordionMultiselectTrigger, AccordionMultiselectContent, AccordionMultiselectOption, } 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","@radix-ui/react-accordion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-accordion","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":"@radix-ui/react-accordion"}]]}]}],["$","li","@radix-ui/react-checkbox",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-checkbox","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":"@radix-ui/react-checkbox"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@abui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/abui/ui/accordion-multiselect.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]