{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"select","title":"Select","type":"registry:ui","description":"Displays a list of options for the user to pick from—triggered by a button.","dependencies":["@radix-ui/react-select","@radix-ui/react-popover","class-variance-authority"],"registryDependencies":["utils","https://fysk.dev/r/fysk-provider.json","https://fysk.dev/r/fysk-hooks.json"],"files":[{"path":"fysk/select.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\r\nimport * as Popover from \"@radix-ui/react-popover\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { useFyskConfig } from \"@/components/fysk-provider\"\r\nimport { useFyskAnimation } from \"@/components/hooks/useFyskAnimation\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\n// Changed h-10 to h-9 to match Button 'md' size for consistency\r\nconst selectTriggerVariants = cva(\r\n    \"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"border border-input bg-background\",\r\n                outline: \"border-2 border-border bg-transparent\",\r\n                ghost: \"border border-transparent bg-transparent hover:bg-muted\",\r\n                glass: \"bg-foreground/5 backdrop-blur-md border border-border/50\",\r\n                destructive: \"border border-destructive/50 bg-destructive/5 text-destructive\",\r\n                success: \"border border-green-500/50 bg-green-500/5 text-green-700 dark:text-green-400\",\r\n                warning: \"border border-yellow-500/50 bg-yellow-500/5 text-yellow-700 dark:text-yellow-400\",\r\n                info: \"border border-blue-500/50 bg-blue-500/5 text-blue-700 dark:text-blue-400\",\r\n            },\r\n            size: {\r\n                default: \"h-9 px-3 py-2\",\r\n                xs: \"h-7 px-2 py-1 text-xs\",\r\n                sm: \"h-8 px-2.5 py-1 text-sm\",\r\n                md: \"h-9 px-3 py-2\",\r\n                lg: \"h-10 px-4 py-2\",\r\n                xl: \"h-12 px-5 py-3 text-lg\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n            size: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\n// --- CONTEXT & TYPES ---\r\n\r\ntype SelectionMode = \"single\" | \"multiple\"\r\n\r\ninterface SelectContextValue {\r\n    selection: SelectionMode\r\n    selectedValues: string[]\r\n    onValueChange: (value: string) => void\r\n    onValueRemove: (value: string) => void\r\n    onValuesClear: () => void\r\n    placeholder?: string\r\n}\r\n\r\nconst SelectContext = React.createContext<SelectContextValue | null>(null)\r\n\r\nfunction useSelectContext() {\r\n    return React.useContext(SelectContext)\r\n}\r\n\r\n// --- SINGLE SELECT COMPONENTS (Internal Re-exports) ---\r\n\r\nconst SelectGroupRoot = SelectPrimitive.Group\r\nconst SelectValueRoot = SelectPrimitive.Value\r\n\r\n// --- SHARED UTILS ---\r\n\r\nconst SelectScrollUpButton = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\r\n>(({ className, ...props }, ref) => {\r\n    const config = useFyskConfig()\r\n    return (\r\n        <SelectPrimitive.ScrollUpButton\r\n            ref={ref}\r\n            className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\r\n            {...props}\r\n        >\r\n            <span className=\"h-4 w-4 flex items-center justify-center [&_svg]:size-full\">\r\n                {config.icons?.chevronUp}\r\n            </span>\r\n        </SelectPrimitive.ScrollUpButton>\r\n    )\r\n})\r\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\r\n\r\nconst SelectScrollDownButton = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\r\n>(({ className, ...props }, ref) => {\r\n    const config = useFyskConfig()\r\n    return (\r\n        <SelectPrimitive.ScrollDownButton\r\n            ref={ref}\r\n            className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\r\n            {...props}\r\n        >\r\n            <span className=\"h-4 w-4 flex items-center justify-center [&_svg]:size-full\">\r\n                {config.icons?.chevronDown}\r\n            </span>\r\n        </SelectPrimitive.ScrollDownButton>\r\n    )\r\n})\r\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\r\n\r\n// --- MULTI SELECT INTERNAL COMPONENTS ---\r\n\r\nconst MultiSelectGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n    ({ className, ...props }, ref) => <div ref={ref} className={cn(\"\", className)} {...props} />\r\n)\r\nMultiSelectGroup.displayName = \"MultiSelectGroup\"\r\n\r\nconst MultiSelectLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n    ({ className, ...props }, ref) => (\r\n        <div ref={ref} className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)} {...props} />\r\n    )\r\n)\r\nMultiSelectLabel.displayName = \"MultiSelectLabel\"\r\n\r\nconst MultiSelectItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { value: string; disabled?: boolean }>(\r\n    ({ className, children, value, disabled = false, ...props }, ref) => {\r\n        const context = useSelectContext()\r\n        const config = useFyskConfig()\r\n\r\n        if (!context) {\r\n            throw new Error(\"MultiSelectItem must be used within a MultiSelect\")\r\n        }\r\n\r\n        const { selectedValues, onValueChange } = context\r\n        const isSelected = selectedValues.includes(value)\r\n\r\n        return (\r\n            <div\r\n                ref={ref}\r\n                role=\"option\"\r\n                aria-selected={isSelected}\r\n                data-state={isSelected ? \"checked\" : \"unchecked\"}\r\n                className={cn(\r\n                    \"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\r\n                    disabled && \"pointer-events-none opacity-50\",\r\n                    className\r\n                )}\r\n                onClick={() => !disabled && onValueChange(value)}\r\n                onKeyDown={(e) => {\r\n                    if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\r\n                        e.preventDefault()\r\n                        onValueChange(value)\r\n                    }\r\n                }}\r\n                tabIndex={disabled ? -1 : 0}\r\n                {...props}\r\n            >\r\n                <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n                    {isSelected && (\r\n                        <span className=\"h-4 w-4 flex items-center justify-center [&_svg]:size-full text-primary\">\r\n                            {config.icons?.success}\r\n                        </span>\r\n                    )}\r\n                </span>\r\n                {children}\r\n            </div>\r\n        )\r\n    }\r\n)\r\nMultiSelectItem.displayName = \"MultiSelectItem\"\r\n\r\nconst MultiSelectSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n    ({ className, ...props }, ref) => (\r\n        <div ref={ref} className={cn(\"-mx-1 my-1 h-px bg-muted\", className)} {...props} />\r\n    )\r\n)\r\nMultiSelectSeparator.displayName = \"MultiSelectSeparator\"\r\n\r\nconst MultiSelectContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { align?: \"start\" | \"center\" | \"end\"; sideOffset?: number; position?: \"item-aligned\" | \"popper\" }>(\r\n    ({ className, children, align = \"start\", sideOffset = 4, position = \"popper\", ...props }, ref) => (\r\n        <Popover.Portal>\r\n            <Popover.Content\r\n                ref={ref}\r\n                align={align}\r\n                sideOffset={sideOffset}\r\n                className={cn(\r\n                    \"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n                    className\r\n                )}\r\n                {...props}\r\n            >\r\n                <div className=\"max-h-[300px] overflow-y-auto p-1\">{children}</div>\r\n            </Popover.Content>\r\n        </Popover.Portal>\r\n    )\r\n)\r\nMultiSelectContent.displayName = \"MultiSelectContent\"\r\n\r\ninterface MultiSelectTriggerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof selectTriggerVariants> {\r\n    placeholder?: string\r\n    state?: \"idle\" | \"loading\" | \"success\" | \"error\"\r\n    children?: React.ReactNode\r\n}\r\n\r\nconst MultiSelectTrigger = React.forwardRef<HTMLDivElement, MultiSelectTriggerProps>(\r\n    ({ className, variant, size, state = \"idle\", placeholder, children, ...props }, ref) => {\r\n        const context = useSelectContext()\r\n        const config = useFyskConfig()\r\n        const { isEnabled, motion, AnimatePresence } = useFyskAnimation()\r\n\r\n        if (!context) {\r\n            throw new Error(\"MultiSelectTrigger must be used within a MultiSelect\")\r\n        }\r\n\r\n        const { selectedValues, onValueRemove, onValuesClear, placeholder: contextPlaceholder } = context\r\n\r\n        const effectivePlaceholder = placeholder ?? contextPlaceholder ?? \"Select items...\"\r\n        const effectiveMax = 1\r\n\r\n        const hasValues = selectedValues.length > 0\r\n        const displayValues = selectedValues.slice(0, effectiveMax)\r\n        const remainingCount = selectedValues.length - effectiveMax\r\n\r\n        const isLoading = state === \"loading\"\r\n        const isSuccess = state === \"success\"\r\n        const isError = state === \"error\"\r\n\r\n        const stateIcon = isLoading ? config.icons?.loading : isSuccess ? config.icons?.success : isError ? config.icons?.error : null\r\n\r\n        return (\r\n            <Popover.Trigger asChild>\r\n                <div\r\n                    ref={ref}\r\n                    role=\"combobox\"\r\n                    aria-expanded=\"false\"\r\n                    aria-haspopup=\"listbox\"\r\n                    tabIndex={0}\r\n                    data-state={state}\r\n                    className={cn(\r\n                        selectTriggerVariants({\r\n                            variant: (isSuccess || isError) ? (isSuccess ? \"success\" : \"destructive\") : variant,\r\n                            size\r\n                        }),\r\n                        \"group min-h-[2.25rem] cursor-pointer overflow-hidden\",\r\n                        size === \"xs\" && \"min-h-[1.75rem]\",\r\n                        size === \"sm\" && \"min-h-[2rem]\",\r\n                        className\r\n                    )}\r\n                    onKeyDown={(e) => {\r\n                        if (e.key === \"Enter\" || e.key === \" \") {\r\n                            e.preventDefault()\r\n                            e.currentTarget.click()\r\n                        }\r\n                    }}\r\n                    {...props}\r\n                >\r\n                    <div className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden\">\r\n                        <AnimatePresence {...(isEnabled && { mode: \"popover\" })}>\r\n                            {hasValues ? (\r\n                                <>\r\n                                    {displayValues.map((value) => (\r\n                                        <motion.span\r\n                                            key={value}\r\n                                            {...(isEnabled ? {\r\n                                                initial: { scale: 0.8, opacity: 0 },\r\n                                                animate: { scale: 1, opacity: 1 },\r\n                                                exit: { scale: 0.8, opacity: 0 },\r\n                                                transition: { duration: 0.15 }\r\n                                            } : {})}\r\n                                            title={value}\r\n                                            className=\"inline-flex items-center gap-1 rounded-sm bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground max-w-[150px]\"\r\n                                        >\r\n                                            <span className=\"truncate\">{value}</span>\r\n                                            <span\r\n                                                role=\"button\"\r\n                                                tabIndex={0}\r\n                                                onClick={(e) => { e.stopPropagation(); onValueRemove(value) }}\r\n                                                onKeyDown={(e) => {\r\n                                                    if (e.key === \"Enter\" || e.key === \" \") {\r\n                                                        e.stopPropagation()\r\n                                                        e.preventDefault()\r\n                                                        onValueRemove(value)\r\n                                                    }\r\n                                                }}\r\n                                                className=\"ml-0.5 rounded-xs hover:bg-muted p-0.5 transition-colors focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer\"\r\n                                                aria-label={`Remove ${value}`}\r\n                                            >\r\n                                                <span className=\"h-3 w-3 flex items-center justify-center [&_svg]:size-full\">\r\n                                                    {config.icons?.close}\r\n                                                </span>\r\n                                            </span>\r\n                                        </motion.span>\r\n                                    ))}\r\n                                    {remainingCount > 0 && (\r\n                                        <span className=\"inline-flex items-center rounded-sm bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">\r\n                                            +{remainingCount} more\r\n                                        </span>\r\n                                    )}\r\n                                </>\r\n                            ) : (\r\n                                <span className=\"text-muted-foreground\">{effectivePlaceholder}</span>\r\n                            )}\r\n                        </AnimatePresence>\r\n                        {/* Render any non-SelectValue children (custom icons, etc) */}\r\n                        {React.Children.map(children, child => {\r\n                            if (React.isValidElement(child) && (child.type as any).displayName === \"SelectValue\") return null\r\n                            return child\r\n                        })}\r\n                    </div>\r\n                    <div className=\"flex items-center gap-1 shrink-0 ml-2\">\r\n                        {hasValues && !isLoading && (\r\n                            <span\r\n                                role=\"button\"\r\n                                tabIndex={0}\r\n                                title=\"Clear all\"\r\n                                onClick={(e) => { e.stopPropagation(); onValuesClear() }}\r\n                                onKeyDown={(e) => {\r\n                                    if (e.key === \"Enter\" || e.key === \" \") {\r\n                                        e.stopPropagation()\r\n                                        e.preventDefault()\r\n                                        onValuesClear()\r\n                                    }\r\n                                }}\r\n                                className=\"opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity p-0.5 rounded-sm hover:bg-muted\"\r\n                            >\r\n                                <span className=\"h-3.5 w-3.5 flex items-center justify-center [&_svg]:size-full\">\r\n                                    {config.icons?.close}\r\n                                </span>\r\n                            </span>\r\n                        )}\r\n                        <span className={cn(\r\n                            \"flex items-center justify-center [&_svg]:size-full\",\r\n                            size === \"xs\" ? \"h-3.5 w-3.5\" : \"h-4 w-4\",\r\n                            stateIcon ? \"\" : \"opacity-50\",\r\n                            isLoading && \"[&_svg]:animate-spin text-primary\",\r\n                            isSuccess && \"text-success\",\r\n                            isError && \"text-destructive\"\r\n                        )}>\r\n                            {stateIcon || config.icons?.chevronDown}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </Popover.Trigger>\r\n        )\r\n    }\r\n)\r\nMultiSelectTrigger.displayName = \"MultiSelectTrigger\"\r\n\r\ninterface MultiSelectProps {\r\n    values: string[]\r\n    disabled?: boolean\r\n    children?: React.ReactNode\r\n    open?: boolean\r\n    onValueChange?: (v: string) => void\r\n    onValueRemove?: (v: string) => void\r\n    onValuesClear?: () => void\r\n    onOpenChange?: (open: boolean) => void\r\n    placeholder?: string\r\n}\r\n\r\nconst MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(\r\n    ({ values, disabled = false, children, open, onOpenChange }, ref) => {\r\n        return (\r\n            <Popover.Root open={open} onOpenChange={onOpenChange}>\r\n                <div ref={ref} data-disabled={disabled ? \"\" : undefined} className={cn(disabled && \"pointer-events-none opacity-50\")}>\r\n                    {children}\r\n                </div>\r\n            </Popover.Root>\r\n        )\r\n    }\r\n)\r\nMultiSelect.displayName = \"MultiSelect\"\r\n\r\n// --- PUBLIC UNIFIED COMPONENTS ---\r\n\r\nconst SelectValue = SelectPrimitive.Value\r\nSelectValue.displayName = \"SelectValue\"\r\n\r\nconst SelectGroup = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Group>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\r\n>(({ className, ...props }, ref) => {\r\n    const context = useSelectContext()\r\n    if (context?.selection === \"multiple\") {\r\n        return <MultiSelectGroup className={className} {...(props as any)} ref={ref} />\r\n    }\r\n    return <SelectPrimitive.Group className={className} {...props} ref={ref} />\r\n})\r\nSelectGroup.displayName = \"SelectGroup\"\r\n\r\ninterface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {\r\n    placeholder?: string\r\n    state?: \"idle\" | \"loading\" | \"success\" | \"error\"\r\n}\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Trigger>,\r\n    SelectTriggerProps\r\n>(({ className, children, placeholder, variant, size, state = \"idle\", ...props }, ref) => {\r\n    const context = useSelectContext()\r\n    const config = useFyskConfig()\r\n\r\n    const isLoading = state === \"loading\"\r\n    const isSuccess = state === \"success\"\r\n    const isError = state === \"error\"\r\n\r\n    // Extract placeholder from SelectValue child if not provided\r\n    let effectivePlaceholder = placeholder\r\n    if (!effectivePlaceholder) {\r\n        React.Children.forEach(children, child => {\r\n            if (React.isValidElement(child) && (child.type as any).displayName === \"SelectValue\") {\r\n                effectivePlaceholder = (child.props as any).placeholder\r\n            }\r\n        })\r\n    }\r\n    if (!effectivePlaceholder) effectivePlaceholder = \"Select items...\"\r\n\r\n    if (context && context.selection === \"multiple\") {\r\n        return (\r\n            <MultiSelectTrigger\r\n                className={className}\r\n                placeholder={effectivePlaceholder}\r\n                variant={variant}\r\n                size={size}\r\n                state={state}\r\n                {...(props as any)}\r\n                ref={ref}\r\n            />\r\n        )\r\n    }\r\n\r\n    const stateIcon = isLoading ? config.icons?.loading : isSuccess ? config.icons?.success : isError ? config.icons?.error : null\r\n\r\n    return (\r\n        <SelectPrimitive.Trigger\r\n            ref={ref}\r\n            data-group={state !== \"idle\" ? \"state\" : undefined}\r\n            data-state={state}\r\n            className={cn(\r\n                selectTriggerVariants({\r\n                    variant: (isSuccess || isError) ? (isSuccess ? \"success\" : \"destructive\") : variant,\r\n                    size\r\n                }),\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n            <SelectPrimitive.Icon asChild>\r\n                <span className={cn(\r\n                    \"flex items-center justify-center [&_svg]:size-full\",\r\n                    size === \"xs\" ? \"h-3.5 w-3.5\" : \"h-4 w-4\",\r\n                    stateIcon ? \"\" : \"opacity-50\",\r\n                    isLoading && \"[&_svg]:animate-spin text-primary\",\r\n                    isSuccess && \"text-success\",\r\n                    isError && \"text-destructive\"\r\n                )}>\r\n                    {stateIcon || config.icons?.chevronDown}\r\n                </span>\r\n            </SelectPrimitive.Icon>\r\n        </SelectPrimitive.Trigger>\r\n    )\r\n})\r\nSelectTrigger.displayName = \"SelectTrigger\"\r\n\r\nconst SelectContent = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Content>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\r\n>(({ className, children, position = \"popper\", ...props }, ref) => {\r\n    const context = useSelectContext()\r\n\r\n    if (context?.selection === \"multiple\") {\r\n        return (\r\n            <MultiSelectContent className={className} {...(props as any)} ref={ref}>\r\n                {children}\r\n            </MultiSelectContent>\r\n        )\r\n    }\r\n\r\n    return (\r\n        <SelectPrimitive.Portal>\r\n            <SelectPrimitive.Content\r\n                ref={ref}\r\n                className={cn(\r\n                    \"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border/25 bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n                    position === \"popper\" &&\r\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\r\n                    className\r\n                )}\r\n                position={position}\r\n                {...props}\r\n            >\r\n                <SelectScrollUpButton />\r\n                <SelectPrimitive.Viewport\r\n                    className={cn(\r\n                        \"p-1\",\r\n                        position === \"popper\" &&\r\n                        \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\r\n                    )}\r\n                >\r\n                    {children}\r\n                </SelectPrimitive.Viewport>\r\n                <SelectScrollDownButton />\r\n            </SelectPrimitive.Content>\r\n        </SelectPrimitive.Portal>\r\n    )\r\n})\r\nSelectContent.displayName = \"SelectContent\"\r\n\r\nconst SelectLabel = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Label>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\r\n>(({ className, ...props }, ref) => {\r\n    const context = useSelectContext()\r\n    if (context?.selection === \"multiple\") {\r\n        return <MultiSelectLabel className={className} {...(props as any)} ref={ref} />\r\n    }\r\n    return (\r\n        <SelectPrimitive.Label\r\n            ref={ref}\r\n            className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\nSelectLabel.displayName = \"SelectLabel\"\r\n\r\nconst SelectItem = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Item>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\r\n>(({ className, children, ...props }, ref) => {\r\n    const context = useSelectContext()\r\n    const config = useFyskConfig()\r\n\r\n    if (context?.selection === \"multiple\") {\r\n        return (\r\n            <MultiSelectItem\r\n                className={className}\r\n                value={(props as any).value}\r\n                disabled={(props as any).disabled}\r\n                {...(props as any)}\r\n                ref={ref}\r\n            >\r\n                {children}\r\n            </MultiSelectItem>\r\n        )\r\n    }\r\n\r\n    return (\r\n        <SelectPrimitive.Item\r\n            ref={ref}\r\n            className={cn(\r\n                \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n                <SelectPrimitive.ItemIndicator>\r\n                    <span className=\"h-4 w-4 flex items-center justify-center [&_svg]:size-full\">\r\n                        {config.icons?.success}\r\n                    </span>\r\n                </SelectPrimitive.ItemIndicator>\r\n            </span>\r\n            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\r\n        </SelectPrimitive.Item>\r\n    )\r\n})\r\nSelectItem.displayName = \"SelectItem\"\r\n\r\nconst SelectSeparator = React.forwardRef<\r\n    React.ComponentRef<typeof SelectPrimitive.Separator>,\r\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\r\n>(({ className, ...props }, ref) => {\r\n    const context = useSelectContext()\r\n    if (context?.selection === \"multiple\") {\r\n        return <MultiSelectSeparator className={className} {...(props as any)} ref={ref} />\r\n    }\r\n    return (\r\n        <SelectPrimitive.Separator\r\n            ref={ref}\r\n            className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\nSelectSeparator.displayName = \"SelectSeparator\"\r\n\r\n// --- MAIN WRAPPER ---\r\n\r\ninterface SelectProps {\r\n    selection?: SelectionMode\r\n    value?: string\r\n    defaultValue?: string\r\n    onValueChange?: (value: any) => void\r\n    values?: string[]\r\n    defaultValues?: string[]\r\n    onValuesChange?: (values: string[]) => void\r\n    disabled?: boolean\r\n    open?: boolean\r\n    defaultOpen?: boolean\r\n    onOpenChange?: (open: boolean) => void\r\n    children?: React.ReactNode\r\n    placeholder?: string\r\n}\r\n\r\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\r\n    (\r\n        {\r\n            selection = \"single\",\r\n            value,\r\n            defaultValue,\r\n            onValueChange,\r\n            values: controlledValues,\r\n            defaultValues = [],\r\n            onValuesChange,\r\n            disabled,\r\n            open: controlledOpen,\r\n            defaultOpen = false,\r\n            onOpenChange,\r\n            children,\r\n            placeholder\r\n        },\r\n        ref\r\n    ) => {\r\n        const [internalValues, setInternalValues] = React.useState<string[]>(defaultValues)\r\n        const [internalOpen, setInternalOpen] = React.useState(defaultOpen)\r\n\r\n        const selectedValues = controlledValues !== undefined ? controlledValues : internalValues\r\n        const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen\r\n\r\n        const handleMultiValueChange = React.useCallback(\r\n            (v: string) => {\r\n                const newValue = selectedValues.includes(v)\r\n                    ? selectedValues.filter((x) => x !== v)\r\n                    : [...selectedValues, v]\r\n                if (controlledValues === undefined) setInternalValues(newValue)\r\n                onValuesChange?.(newValue)\r\n            },\r\n            [selectedValues, controlledValues, onValuesChange]\r\n        )\r\n\r\n        const handleMultiValueRemove = React.useCallback(\r\n            (v: string) => {\r\n                const newValue = selectedValues.filter((x) => x !== v)\r\n                if (controlledValues === undefined) setInternalValues(newValue)\r\n                onValuesChange?.(newValue)\r\n            },\r\n            [selectedValues, controlledValues, onValuesChange]\r\n        )\r\n\r\n        const handleMultiValuesClear = React.useCallback(() => {\r\n            if (controlledValues === undefined) setInternalValues([])\r\n            onValuesChange?.([])\r\n        }, [controlledValues, onValuesChange])\r\n\r\n        if (selection === \"multiple\") {\r\n            return (\r\n                <SelectContext.Provider\r\n                    value={{\r\n                        selection: \"multiple\",\r\n                        selectedValues,\r\n                        onValueChange: handleMultiValueChange,\r\n                        onValueRemove: handleMultiValueRemove,\r\n                        onValuesClear: handleMultiValuesClear,\r\n                        placeholder,\r\n                    }}\r\n                >\r\n                    <MultiSelect\r\n                        ref={ref}\r\n                        values={selectedValues}\r\n                        disabled={disabled}\r\n                        open={isOpen}\r\n                        onOpenChange={(o) => {\r\n                            if (controlledOpen === undefined) setInternalOpen(o)\r\n                            onOpenChange?.(o)\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </MultiSelect>\r\n                </SelectContext.Provider>\r\n            )\r\n        }\r\n\r\n        return (\r\n            <SelectContext.Provider value={{\r\n                selection: \"single\",\r\n                selectedValues: [],\r\n                onValueChange: () => { },\r\n                onValueRemove: () => { },\r\n                onValuesClear: () => { },\r\n                placeholder\r\n            }}>\r\n                <SelectPrimitive.Root\r\n                    value={value}\r\n                    defaultValue={defaultValue}\r\n                    onValueChange={onValueChange}\r\n                    disabled={disabled}\r\n                    open={isOpen}\r\n                    defaultOpen={defaultOpen}\r\n                    onOpenChange={(o) => {\r\n                        if (controlledOpen === undefined) setInternalOpen(o)\r\n                        onOpenChange?.(o)\r\n                    }}\r\n                >\r\n                    {children}\r\n                </SelectPrimitive.Root>\r\n            </SelectContext.Provider>\r\n        )\r\n    }\r\n)\r\nSelect.displayName = \"Select\"\r\n\r\nexport {\r\n    Select,\r\n    SelectGroup,\r\n    SelectValue,\r\n    SelectTrigger,\r\n    SelectContent,\r\n    SelectLabel,\r\n    SelectItem,\r\n    SelectSeparator,\r\n    SelectScrollUpButton,\r\n    SelectScrollDownButton,\r\n    MultiSelect,\r\n    MultiSelectTrigger,\r\n    MultiSelectContent,\r\n    MultiSelectGroup,\r\n    MultiSelectLabel,\r\n    MultiSelectItem,\r\n    MultiSelectSeparator,\r\n    type SelectProps,\r\n    type SelectionMode,\r\n}\r\n"}]}