@arolariu/components 0.5.0 → 1.1.0

package/dist/components/ui/combobox.js

@@ -0,0 +1,206 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cn } from "../../lib/utilities.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import combobox_module from "./combobox.module.js";
+const ComboboxContext = /*#__PURE__*/ createContext(null);
+function useComboboxContext(componentName) {
+    const context = useContext(ComboboxContext);
+    if (!context) throw new Error(`${componentName} must be used within Combobox.`);
+    return context;
+}
+function Combobox(props) {
+    const { value: controlledValue, defaultValue = "", onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, placeholder = "Select an item...", searchPlaceholder = "Search...", emptyMessage = "No items found.", disabled = false, className, children } = props;
+    const [value, setValue] = useControllableState({
+        controlled: controlledValue,
+        defaultValue,
+        onChange: onValueChange
+    });
+    const [open, setOpen] = useControllableState({
+        controlled: controlledOpen,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange
+    });
+    const itemLabelsRef = useRef(new Map());
+    const registerItem = useCallback((itemValue, label)=>{
+        itemLabelsRef.current.set(itemValue, label);
+    }, []);
+    const unregisterItem = useCallback((itemValue)=>{
+        itemLabelsRef.current.delete(itemValue);
+    }, []);
+    const contextValue = useMemo(()=>({
+            value,
+            onValueChange: setValue,
+            open,
+            setOpen,
+            placeholder,
+            searchPlaceholder,
+            emptyMessage,
+            disabled,
+            itemLabels: itemLabelsRef.current,
+            registerItem,
+            unregisterItem
+        }), [
+        value,
+        setValue,
+        open,
+        setOpen,
+        placeholder,
+        searchPlaceholder,
+        emptyMessage,
+        disabled,
+        registerItem,
+        unregisterItem
+    ]);
+    return /*#__PURE__*/ jsx(ComboboxContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Popover, {
+            open: open,
+            onOpenChange: setOpen,
+            children: /*#__PURE__*/ jsx("div", {
+                className: cn(combobox_module.combobox, className),
+                children: children
+            })
+        })
+    });
+}
+Combobox.displayName = "Combobox";
+const ComboboxTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children } = props;
+    const { open, setOpen, value, placeholder, disabled, itemLabels } = useComboboxContext("ComboboxTrigger");
+    const [, forceUpdate] = useReducer((x)=>x + 1, 0);
+    useEffect(()=>{
+        forceUpdate();
+    }, [
+        value
+    ]);
+    const selectedLabel = itemLabels.get(value) || "";
+    return /*#__PURE__*/ jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx(Button, {
+            ref: ref,
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            disabled: disabled,
+            className: cn(combobox_module.trigger, className),
+            onClick: ()=>setOpen(!open),
+            children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: cn(combobox_module.triggerValue, !selectedLabel && combobox_module.triggerPlaceholder),
+                        children: selectedLabel || placeholder
+                    }),
+                    /*#__PURE__*/ jsx(ChevronsUpDown, {
+                        className: combobox_module.triggerIcon
+                    })
+                ]
+            })
+        })
+    });
+});
+ComboboxTrigger.displayName = "ComboboxTrigger";
+const ComboboxContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children } = props;
+    const { searchPlaceholder } = useComboboxContext("ComboboxContent");
+    return /*#__PURE__*/ jsx(PopoverContent, {
+        ref: ref,
+        className: cn(combobox_module.content, className),
+        sideOffset: 4,
+        children: /*#__PURE__*/ jsxs(Command, {
+            className: combobox_module.command,
+            children: [
+                /*#__PURE__*/ jsx(CommandInput, {
+                    placeholder: searchPlaceholder,
+                    className: combobox_module.commandInput
+                }),
+                /*#__PURE__*/ jsxs(CommandList, {
+                    className: combobox_module.commandList,
+                    children: [
+                        /*#__PURE__*/ jsx(ComboboxEmpty, {}),
+                        children
+                    ]
+                })
+            ]
+        })
+    });
+});
+ComboboxContent.displayName = "ComboboxContent";
+function ComboboxItem(props) {
+    const { value: itemValue, className, children, disabled = false, onSelect, keywords = [] } = props;
+    const { value: selectedValue, onValueChange, setOpen, registerItem, unregisterItem } = useComboboxContext("ComboboxItem");
+    const isSelected = selectedValue === itemValue;
+    const label = "string" == typeof children ? children : itemValue;
+    useEffect(()=>{
+        registerItem(itemValue, label);
+        return ()=>{
+            unregisterItem(itemValue);
+        };
+    }, [
+        itemValue,
+        label,
+        registerItem,
+        unregisterItem
+    ]);
+    const handleSelect = useCallback((currentValue)=>{
+        const newValue = currentValue === selectedValue ? "" : currentValue;
+        onValueChange(newValue);
+        setOpen(false);
+        onSelect?.(newValue);
+    }, [
+        selectedValue,
+        onValueChange,
+        setOpen,
+        onSelect
+    ]);
+    return /*#__PURE__*/ jsxs(CommandItem, {
+        value: itemValue,
+        disabled: disabled,
+        onSelect: handleSelect,
+        keywords: keywords,
+        className: cn(combobox_module.item, isSelected && combobox_module.itemSelected, className),
+        children: [
+            /*#__PURE__*/ jsx(Check, {
+                className: cn(combobox_module.itemCheck, isSelected && combobox_module.itemCheckVisible)
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: combobox_module.itemLabel,
+                children: children
+            })
+        ]
+    });
+}
+ComboboxItem.displayName = "ComboboxItem";
+function ComboboxEmpty(props) {
+    const { className, children } = props;
+    const { emptyMessage } = useComboboxContext("ComboboxEmpty");
+    return /*#__PURE__*/ jsx(CommandEmpty, {
+        className: cn(combobox_module.empty, className),
+        children: children ?? emptyMessage
+    });
+}
+ComboboxEmpty.displayName = "ComboboxEmpty";
+function ComboboxGroup(props) {
+    const { heading, className, children } = props;
+    return /*#__PURE__*/ jsx(CommandGroup, {
+        heading: heading,
+        className: cn(combobox_module.group, className),
+        children: children
+    });
+}
+ComboboxGroup.displayName = "ComboboxGroup";
+function ComboboxSeparator(props) {
+    const { className } = props;
+    return /*#__PURE__*/ jsx(CommandSeparator, {
+        className: cn(combobox_module.separator, className)
+    });
+}
+ComboboxSeparator.displayName = "ComboboxSeparator";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/ui/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/combobox.js","sources":["../../../src/components/ui/combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Check, ChevronsUpDown} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {useControllableState} from \"@/hooks/useControllableState\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nimport {Button} from \"./button\";\r\nimport {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator} from \"./command\";\r\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\r\n\r\nimport styles from \"./combobox.module.css\";\r\n\r\ninterface ComboboxContextValue {\r\n  value: string;\r\n  onValueChange: (value: string) => void;\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n  placeholder?: string;\r\n  searchPlaceholder?: string;\r\n  emptyMessage?: string;\r\n  disabled?: boolean;\r\n  itemLabels: Map<string, string>;\r\n  registerItem: (value: string, label: string) => void;\r\n  unregisterItem: (value: string) => void;\r\n}\r\n\r\nconst ComboboxContext = React.createContext<ComboboxContextValue | null>(null);\r\n\r\nfunction useComboboxContext(componentName: string): ComboboxContextValue {\r\n  const context = React.useContext(ComboboxContext);\r\n\r\n  if (!context) {\r\n    throw new Error(`${componentName} must be used within Combobox.`);\r\n  }\r\n\r\n  return context;\r\n}\r\n\r\ninterface ComboboxProps {\r\n  /**\r\n   * The controlled selected value.\r\n   * @default undefined\r\n   */\r\n  value?: string;\r\n  /**\r\n   * The default value when uncontrolled.\r\n   * @default \"\"\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * Callback fired when the selected value changes.\r\n   * @default undefined\r\n   */\r\n  onValueChange?: (value: string) => void;\r\n  /**\r\n   * Whether the popover is controlled open state.\r\n   * @default undefined\r\n   */\r\n  open?: boolean;\r\n  /**\r\n   * Whether the popover is open by default (uncontrolled).\r\n   * @default false\r\n   */\r\n  defaultOpen?: boolean;\r\n  /**\r\n   * Callback fired when the open state changes.\r\n   * @default undefined\r\n   */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /**\r\n   * Placeholder text shown when no value is selected.\r\n   * @default \"Select an item...\"\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Placeholder text shown in the search input.\r\n   * @default \"Search...\"\r\n   */\r\n  searchPlaceholder?: string;\r\n  /**\r\n   * Message shown when no items match the search.\r\n   * @default \"No items found.\"\r\n   */\r\n  emptyMessage?: string;\r\n  /**\r\n   * Whether the combobox is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Additional CSS classes merged with the combobox styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Combobox content and items.\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxTriggerProps {\r\n  /**\r\n   * Additional CSS classes merged with the trigger styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Trigger content. If not provided, shows selected item label or placeholder.\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxContentProps {\r\n  /**\r\n   * Additional CSS classes merged with the content styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Content children (typically ComboboxItem components).\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxItemProps {\r\n  /**\r\n   * The value associated with this item.\r\n   */\r\n  value: string;\r\n  /**\r\n   * Additional CSS classes merged with the item styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Item content (label).\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n  /**\r\n   * Whether the item is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Callback fired when the item is selected.\r\n   * @default undefined\r\n   */\r\n  onSelect?: (value: string) => void;\r\n  /**\r\n   * Additional search keywords for filtering.\r\n   * @default []\r\n   */\r\n  keywords?: string[];\r\n}\r\n\r\ninterface ComboboxEmptyProps {\r\n  /**\r\n   * Additional CSS classes merged with the empty state styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Content shown when no items match. Defaults to context emptyMessage.\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxGroupProps {\r\n  /**\r\n   * Group heading text.\r\n   * @default undefined\r\n   */\r\n  heading?: string;\r\n  /**\r\n   * Additional CSS classes merged with the group styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Group items.\r\n   * @default undefined\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxSeparatorProps {\r\n  /**\r\n   * Additional CSS classes merged with the separator styles.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * A searchable select component combining Command, Popover, and Button.\r\n *\r\n * @remarks\r\n * - Composes Command (search), Popover (positioning), and Button (trigger)\r\n * - Supports both controlled and uncontrolled modes\r\n * - Provides keyboard navigation and filtering\r\n * - Built with Base UI primitives and CSS Modules\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <Combobox value={value} onValueChange={setValue}>\r\n *   <ComboboxTrigger />\r\n *   <ComboboxContent>\r\n *     <ComboboxItem value=\"apple\">Apple</ComboboxItem>\r\n *     <ComboboxItem value=\"banana\">Banana</ComboboxItem>\r\n *   </ComboboxContent>\r\n * </Combobox>\r\n * ```\r\n *\r\n * @example With groups\r\n * ```tsx\r\n * <Combobox>\r\n *   <ComboboxTrigger />\r\n *   <ComboboxContent>\r\n *     <ComboboxGroup heading=\"Fruits\">\r\n *       <ComboboxItem value=\"apple\">Apple</ComboboxItem>\r\n *     </ComboboxGroup>\r\n *     <ComboboxSeparator />\r\n *     <ComboboxGroup heading=\"Vegetables\">\r\n *       <ComboboxItem value=\"carrot\">Carrot</ComboboxItem>\r\n *     </ComboboxGroup>\r\n *   </ComboboxContent>\r\n * </Combobox>\r\n * ```\r\n */\r\nfunction Combobox(props: Readonly<Combobox.Props>): React.ReactElement {\r\n  const {\r\n    value: controlledValue,\r\n    defaultValue = \"\",\r\n    onValueChange,\r\n    open: controlledOpen,\r\n    defaultOpen = false,\r\n    onOpenChange,\r\n    placeholder = \"Select an item...\",\r\n    searchPlaceholder = \"Search...\",\r\n    emptyMessage = \"No items found.\",\r\n    disabled = false,\r\n    className,\r\n    children,\r\n  } = props;\r\n\r\n  const [value, setValue] = useControllableState({\r\n    controlled: controlledValue,\r\n    defaultValue,\r\n    onChange: onValueChange,\r\n  });\r\n\r\n  const [open, setOpen] = useControllableState({\r\n    controlled: controlledOpen,\r\n    defaultValue: defaultOpen,\r\n    onChange: onOpenChange,\r\n  });\r\n\r\n  const itemLabelsRef = React.useRef(new Map<string, string>());\r\n\r\n  const registerItem = React.useCallback((itemValue: string, label: string) => {\r\n    itemLabelsRef.current.set(itemValue, label);\r\n  }, []);\r\n\r\n  const unregisterItem = React.useCallback((itemValue: string) => {\r\n    itemLabelsRef.current.delete(itemValue);\r\n  }, []);\r\n\r\n  const contextValue = React.useMemo<ComboboxContextValue>(\r\n    () => ({\r\n      value,\r\n      onValueChange: setValue,\r\n      open,\r\n      setOpen,\r\n      placeholder,\r\n      searchPlaceholder,\r\n      emptyMessage,\r\n      disabled,\r\n      itemLabels: itemLabelsRef.current,\r\n      registerItem,\r\n      unregisterItem,\r\n    }),\r\n    [value, setValue, open, setOpen, placeholder, searchPlaceholder, emptyMessage, disabled, registerItem, unregisterItem],\r\n  );\r\n\r\n  return (\r\n    <ComboboxContext.Provider value={contextValue}>\r\n      <Popover\r\n        open={open}\r\n        onOpenChange={setOpen}>\r\n        <div className={cn(styles.combobox, className)}>{children}</div>\r\n      </Popover>\r\n    </ComboboxContext.Provider>\r\n  );\r\n}\r\nCombobox.displayName = \"Combobox\";\r\n\r\n/**\r\n * Button that opens and closes the combobox popover.\r\n *\r\n * @remarks\r\n * - Renders as a Button with trigger behavior\r\n * - Shows selected item label or placeholder\r\n * - Supports custom children or auto-display\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxTrigger />\r\n * ```\r\n *\r\n * @example Custom content\r\n * ```tsx\r\n * <ComboboxTrigger>\r\n *   {selectedLabel || \"Choose...\"}\r\n * </ComboboxTrigger>\r\n * ```\r\n */\r\nconst ComboboxTrigger = React.forwardRef<HTMLButtonElement, ComboboxTrigger.Props>(\r\n  (props: Readonly<ComboboxTrigger.Props>, ref): React.ReactElement => {\r\n    const {className, children} = props;\r\n    const {open, setOpen, value, placeholder, disabled, itemLabels} = useComboboxContext(\"ComboboxTrigger\");\r\n\r\n    // Force re-render when value changes to update the selected label\r\n    const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);\r\n\r\n    React.useEffect(() => {\r\n      forceUpdate();\r\n    }, [value]);\r\n\r\n    const selectedLabel = itemLabels.get(value) || \"\";\r\n\r\n    return (\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant='outline'\r\n          role='combobox'\r\n          aria-expanded={open}\r\n          disabled={disabled}\r\n          className={cn(styles.trigger, className)}\r\n          onClick={() => setOpen(!open)}>\r\n          {children ?? (\r\n            <>\r\n              <span className={cn(styles.triggerValue, !selectedLabel && styles.triggerPlaceholder)}>{selectedLabel || placeholder}</span>\r\n              <ChevronsUpDown className={styles.triggerIcon} />\r\n            </>\r\n          )}\r\n        </Button>\r\n      </PopoverTrigger>\r\n    );\r\n  },\r\n);\r\nComboboxTrigger.displayName = \"ComboboxTrigger\";\r\n\r\n/**\r\n * The popover content containing the searchable command list.\r\n *\r\n * @remarks\r\n * - Wraps Command with Popover positioning\r\n * - Includes search input and items list\r\n * - Automatically closes on item selection\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxContent>\r\n *   <ComboboxItem value=\"item1\">Item 1</ComboboxItem>\r\n * </ComboboxContent>\r\n * ```\r\n */\r\nconst ComboboxContent = React.forwardRef<HTMLDivElement, ComboboxContent.Props>(\r\n  (props: Readonly<ComboboxContent.Props>, ref): React.ReactElement => {\r\n    const {className, children} = props;\r\n    const {searchPlaceholder} = useComboboxContext(\"ComboboxContent\");\r\n\r\n    return (\r\n      <PopoverContent\r\n        ref={ref}\r\n        className={cn(styles.content, className)}\r\n        sideOffset={4}>\r\n        <Command className={styles.command}>\r\n          <CommandInput\r\n            placeholder={searchPlaceholder}\r\n            className={styles.commandInput}\r\n          />\r\n          <CommandList className={styles.commandList}>\r\n            <ComboboxEmpty />\r\n            {children}\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    );\r\n  },\r\n);\r\nComboboxContent.displayName = \"ComboboxContent\";\r\n\r\n/**\r\n * A selectable item within the combobox.\r\n *\r\n * @remarks\r\n * - Uses CommandItem internally\r\n * - Shows check icon when selected\r\n * - Closes popover on selection\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxItem value=\"apple\">Apple</ComboboxItem>\r\n * ```\r\n *\r\n * @example With custom select handler\r\n * ```tsx\r\n * <ComboboxItem\r\n *   value=\"apple\"\r\n *   onSelect={(value) => console.log(\"Selected:\", value)}\r\n * >\r\n *   Apple\r\n * </ComboboxItem>\r\n * ```\r\n */\r\nfunction ComboboxItem(props: Readonly<ComboboxItem.Props>): React.ReactElement {\r\n  const {value: itemValue, className, children, disabled = false, onSelect, keywords = []} = props;\r\n  const {value: selectedValue, onValueChange, setOpen, registerItem, unregisterItem} = useComboboxContext(\"ComboboxItem\");\r\n\r\n  const isSelected = selectedValue === itemValue;\r\n  const label = typeof children === \"string\" ? children : itemValue;\r\n\r\n  // Register this item's label when mounted\r\n  React.useEffect(() => {\r\n    registerItem(itemValue, label);\r\n    return () => {\r\n      unregisterItem(itemValue);\r\n    };\r\n  }, [itemValue, label, registerItem, unregisterItem]);\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: string) => {\r\n      const newValue = currentValue === selectedValue ? \"\" : currentValue;\r\n      onValueChange(newValue);\r\n      setOpen(false);\r\n      onSelect?.(newValue);\r\n    },\r\n    [selectedValue, onValueChange, setOpen, onSelect],\r\n  );\r\n\r\n  return (\r\n    <CommandItem\r\n      value={itemValue}\r\n      disabled={disabled}\r\n      onSelect={handleSelect}\r\n      keywords={keywords}\r\n      className={cn(styles.item, isSelected && styles.itemSelected, className)}>\r\n      <Check className={cn(styles.itemCheck, isSelected && styles.itemCheckVisible)} />\r\n      <span className={styles.itemLabel}>{children}</span>\r\n    </CommandItem>\r\n  );\r\n}\r\nComboboxItem.displayName = \"ComboboxItem\";\r\n\r\n/**\r\n * Message shown when search returns no results.\r\n *\r\n * @remarks\r\n * - Uses CommandEmpty internally\r\n * - Defaults to context emptyMessage\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxEmpty />\r\n * ```\r\n *\r\n * @example Custom message\r\n * ```tsx\r\n * <ComboboxEmpty>Nothing found</ComboboxEmpty>\r\n * ```\r\n */\r\nfunction ComboboxEmpty(props: Readonly<ComboboxEmpty.Props>): React.ReactElement {\r\n  const {className, children} = props;\r\n  const {emptyMessage} = useComboboxContext(\"ComboboxEmpty\");\r\n\r\n  return <CommandEmpty className={cn(styles.empty, className)}>{children ?? emptyMessage}</CommandEmpty>;\r\n}\r\nComboboxEmpty.displayName = \"ComboboxEmpty\";\r\n\r\n/**\r\n * Groups related combobox items with an optional heading.\r\n *\r\n * @remarks\r\n * - Uses CommandGroup internally\r\n * - Supports visual grouping with headings\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxGroup heading=\"Fruits\">\r\n *   <ComboboxItem value=\"apple\">Apple</ComboboxItem>\r\n * </ComboboxGroup>\r\n * ```\r\n */\r\nfunction ComboboxGroup(props: Readonly<ComboboxGroup.Props>): React.ReactElement {\r\n  const {heading, className, children} = props;\r\n\r\n  return (\r\n    <CommandGroup\r\n      heading={heading}\r\n      className={cn(styles.group, className)}>\r\n      {children}\r\n    </CommandGroup>\r\n  );\r\n}\r\nComboboxGroup.displayName = \"ComboboxGroup\";\r\n\r\n/**\r\n * Visual separator between combobox groups.\r\n *\r\n * @remarks\r\n * - Uses CommandSeparator internally\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <ComboboxSeparator />\r\n * ```\r\n */\r\nfunction ComboboxSeparator(props: Readonly<ComboboxSeparator.Props>): React.ReactElement {\r\n  const {className} = props;\r\n\r\n  return <CommandSeparator className={cn(styles.separator, className)} />;\r\n}\r\nComboboxSeparator.displayName = \"ComboboxSeparator\";\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Combobox {\r\n  export type Props = ComboboxProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxTrigger {\r\n  export type Props = ComboboxTriggerProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxContent {\r\n  export type Props = ComboboxContentProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxItem {\r\n  export type Props = ComboboxItemProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxEmpty {\r\n  export type Props = ComboboxEmptyProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxGroup {\r\n  export type Props = ComboboxGroupProps;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace ComboboxSeparator {\r\n  export type Props = ComboboxSeparatorProps;\r\n}\r\n\r\nexport {Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger};\r\n"],"names":["ComboboxContext","React","useComboboxContext","componentName","context","Error","Combobox","props","controlledValue","defaultValue","onValueChange","controlledOpen","defaultOpen","onOpenChange","placeholder","searchPlaceholder","emptyMessage","disabled","className","children","value","setValue","useControllableState","open","setOpen","itemLabelsRef","Map","registerItem","itemValue","label","unregisterItem","contextValue","Popover","cn","styles","ComboboxTrigger","ref","itemLabels","forceUpdate","x","selectedLabel","PopoverTrigger","Button","ChevronsUpDown","ComboboxContent","PopoverContent","Command","CommandInput","CommandList","ComboboxEmpty","ComboboxItem","onSelect","keywords","selectedValue","isSelected","handleSelect","currentValue","newValue","CommandItem","Check","CommandEmpty","ComboboxGroup","heading","CommandGroup","ComboboxSeparator","CommandSeparator"],"mappings":"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"}

package/dist/components/ui/combobox.module.js

@@ -0,0 +1,23 @@
+import "./combobox_module.css";
+const combobox_module = {
+    combobox: "combobox-wmFvJE",
+    trigger: "trigger-asByxe",
+    triggerValue: "triggerValue-s6rRGO",
+    triggerPlaceholder: "triggerPlaceholder-T2THwp",
+    triggerIcon: "triggerIcon-Z1UTU8",
+    content: "content-uE5DAH",
+    command: "command-cdXzEx",
+    commandInput: "commandInput-s91u2v",
+    commandList: "commandList-YCmDON",
+    item: "item-ThEyJB",
+    itemSelected: "itemSelected-JsUZAF",
+    itemCheck: "itemCheck-j350UO",
+    itemCheckVisible: "itemCheckVisible-QMieBm",
+    itemLabel: "itemLabel-wCtpTY",
+    empty: "empty-EEImeI",
+    group: "group-w7Vcxw",
+    separator: "separator-nkP8ud"
+};
+export default combobox_module;
+
+//# sourceMappingURL=combobox.module.js.map

package/dist/components/ui/combobox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/combobox.module.js","sources":["../../../src/components/ui/combobox.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./combobox_module.css\"\nexport default {\"combobox\":\"combobox-wmFvJE\",\"trigger\":\"trigger-asByxe\",\"triggerValue\":\"triggerValue-s6rRGO\",\"triggerPlaceholder\":\"triggerPlaceholder-T2THwp\",\"triggerIcon\":\"triggerIcon-Z1UTU8\",\"content\":\"content-uE5DAH\",\"command\":\"command-cdXzEx\",\"commandInput\":\"commandInput-s91u2v\",\"commandList\":\"commandList-YCmDON\",\"item\":\"item-ThEyJB\",\"itemSelected\":\"itemSelected-JsUZAF\",\"itemCheck\":\"itemCheck-j350UO\",\"itemCheckVisible\":\"itemCheckVisible-QMieBm\",\"itemLabel\":\"itemLabel-wCtpTY\",\"empty\":\"empty-EEImeI\",\"group\":\"group-w7Vcxw\",\"separator\":\"separator-nkP8ud\"};"],"names":[],"mappings":";AAEA,wBAAe;IAAC,UAAW;IAAkB,SAAU;IAAiB,cAAe;IAAsB,oBAAqB;IAA4B,aAAc;IAAqB,SAAU;IAAiB,SAAU;IAAiB,cAAe;IAAsB,aAAc;IAAqB,MAAO;IAAc,cAAe;IAAsB,WAAY;IAAmB,kBAAmB;IAA0B,WAAY;IAAmB,OAAQ;IAAe,OAAQ;IAAe,WAAY;AAAkB"}

package/dist/components/ui/combobox_module.css

@@ -0,0 +1,142 @@
+.combobox-wmFvJE {
+  display: contents;
+}
+
+.trigger-asByxe {
+  justify-content: space-between;
+  width: 100%;
+  min-width: 200px;
+}
+
+.triggerValue-s6rRGO {
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+.triggerPlaceholder-T2THwp {
+  color: var(--ac-neutral-500);
+}
+
+.triggerIcon-Z1UTU8 {
+  height: 1rem;
+  margin-left: var(--ac-spacing-2);
+  opacity: .5;
+  flex-shrink: 0;
+  width: 1rem;
+}
+
+.content-uE5DAH {
+  min-width: 200px;
+  width: var(--anchor-width);
+  padding: 0;
+}
+
+.command-cdXzEx {
+  box-shadow: none;
+  border: none;
+}
+
+.commandInput-s91u2v {
+  border-bottom: 1px solid var(--ac-neutral-200);
+  border-radius: 0;
+}
+
+.commandList-YCmDON {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.item-ThEyJB {
+  border-radius: var(--ac-radius-sm);
+  cursor: pointer;
+  align-items: center;
+  gap: var(--ac-spacing-2);
+  padding: var(--ac-spacing-2) var(--ac-spacing-3);
+  transition: background-color .2s;
+  display: flex;
+}
+
+.item-ThEyJB:hover {
+  background-color: var(--ac-neutral-100);
+}
+
+.item-ThEyJB[data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+.itemSelected-JsUZAF {
+  background-color: var(--ac-neutral-100);
+}
+
+.itemCheck-j350UO {
+  opacity: 0;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  transition: opacity .2s;
+}
+
+.itemCheckVisible-QMieBm {
+  opacity: 1;
+}
+
+.itemLabel-wCtpTY {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+.empty-EEImeI {
+  color: var(--ac-neutral-500);
+  font-size: var(--ac-font-size-sm);
+  padding: var(--ac-spacing-6) var(--ac-spacing-4);
+  text-align: center;
+}
+
+.group-w7Vcxw {
+  padding: var(--ac-spacing-1) 0;
+}
+
+.separator-nkP8ud {
+  background-color: var(--ac-neutral-200);
+  height: 1px;
+  margin: var(--ac-spacing-1) 0;
+}
+
+.dark .triggerPlaceholder-T2THwp {
+  color: var(--ac-neutral-400);
+}
+
+.dark .commandInput-s91u2v {
+  border-bottom-color: var(--ac-neutral-700);
+}
+
+.dark .item-ThEyJB:hover {
+  background-color: var(--ac-neutral-800);
+}
+
+.dark .itemSelected-JsUZAF {
+  background-color: var(--ac-neutral-800);
+}
+
+.dark .empty-EEImeI {
+  color: var(--ac-neutral-400);
+}
+
+.dark .separator-nkP8ud {
+  background-color: var(--ac-neutral-700);
+}
+
+@media (width <= 640px) {
+  .content-uE5DAH, .trigger-asByxe {
+    min-width: 150px;
+  }
+}
+
+
+/*# sourceMappingURL=combobox_module.css.map */

package/dist/components/ui/combobox_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/combobox.module.css","webpack://./src/components/ui/combobox.module.css"],"names":[],"mappings":"AADA;ECEE,iBAAiB;AACnB;;AAEA;EACE,8BAA8B;EAC9B,WAAW;EACX,gBAAgB;AAClB;;AAEA;EACE,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,OAAO;EACP,gBAAgB;AAClB;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,YAAY;EACZ,gCAAgC;EAChC,WAAW;EACX,cAAc;EACd,WAAW;AACb;;AAEA;EACE,gBAAgB;EAChB,0BAA0B;EAC1B,UAAU;AACZ;;AAEA;EACE,gBAAgB;EAChB,YAAY;AACd;;AAEA;EACE,8CAA8C;EAC9C,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,kCAAkC;EAClC,eAAe;EACf,mBAAmB;EACnB,wBAAwB;EACxB,gDAAgD;EAChD,gCAAgC;EAChC,aAAa;AACf;;AAEA;EACE,uCAAuC;AACzC;;AAEA;EACE,WAAW;EACX,oBAAoB;AACtB;;AAEA;EACE,uCAAuC;AACzC;;AAEA;EACE,UAAU;EACV,cAAc;EACd,WAAW;EACX,YAAY;EACZ,uBAAuB;AACzB;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,OAAO;EACP,gBAAgB;AAClB;;AAEA;EACE,4BAA4B;EAC5B,iCAAiC;EACjC,gDAAgD;EAChD,kBAAkB;AACpB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,uCAAuC;EACvC,WAAW;EACX,6BAA6B;AAC/B;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,uCAAuC;AACzC;;AAEA;EACE,uCAAuC;AACzC;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,uCAAuC;AACzC;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":[".combobox{display:contents}.trigger{justify-content:space-between;min-width:200px;width:100%}.triggerValue{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.triggerPlaceholder{color:var(--ac-neutral-500)}.triggerIcon{flex-shrink:0;height:1rem;margin-left:var(--ac-spacing-2);opacity:.5;width:1rem}.content{min-width:200px;padding:0;width:var(--anchor-width)}.command{border:none;box-shadow:none}.commandInput{border-bottom:1px solid var(--ac-neutral-200);border-radius:0}.commandList{max-height:300px;overflow-y:auto}.item{align-items:center;border-radius:var(--ac-radius-sm);cursor:pointer;display:flex;gap:var(--ac-spacing-2);padding:var(--ac-spacing-2) var(--ac-spacing-3);transition:background-color .2s}.item:hover{background-color:var(--ac-neutral-100)}.item[data-disabled]{opacity:.5;pointer-events:none}.itemSelected{background-color:var(--ac-neutral-100)}.itemCheck{flex-shrink:0;height:1rem;opacity:0;transition:opacity .2s;width:1rem}.itemCheckVisible{opacity:1}.itemLabel{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty{color:var(--ac-neutral-500);font-size:var(--ac-font-size-sm);padding:var(--ac-spacing-6) var(--ac-spacing-4);text-align:center}.group{padding:var(--ac-spacing-1) 0}.separator{background-color:var(--ac-neutral-200);height:1px;margin:var(--ac-spacing-1) 0}:global(.dark) .triggerPlaceholder{color:var(--ac-neutral-400)}:global(.dark) .commandInput{border-bottom-color:var(--ac-neutral-700)}:global(.dark) .item:hover{background-color:var(--ac-neutral-800)}:global(.dark) .itemSelected{background-color:var(--ac-neutral-800)}:global(.dark) .empty{color:var(--ac-neutral-400)}:global(.dark) .separator{background-color:var(--ac-neutral-700)}@media (max-width:640px){.content,.trigger{min-width:150px}}",".combobox {\n  display: contents;\n}\n\n.trigger {\n  justify-content: space-between;\n  width: 100%;\n  min-width: 200px;\n}\n\n.triggerValue {\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  overflow: hidden;\n}\n\n.triggerPlaceholder {\n  color: var(--ac-neutral-500);\n}\n\n.triggerIcon {\n  height: 1rem;\n  margin-left: var(--ac-spacing-2);\n  opacity: .5;\n  flex-shrink: 0;\n  width: 1rem;\n}\n\n.content {\n  min-width: 200px;\n  width: var(--anchor-width);\n  padding: 0;\n}\n\n.command {\n  box-shadow: none;\n  border: none;\n}\n\n.commandInput {\n  border-bottom: 1px solid var(--ac-neutral-200);\n  border-radius: 0;\n}\n\n.commandList {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.item {\n  border-radius: var(--ac-radius-sm);\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ac-spacing-2);\n  padding: var(--ac-spacing-2) var(--ac-spacing-3);\n  transition: background-color .2s;\n  display: flex;\n}\n\n.item:hover {\n  background-color: var(--ac-neutral-100);\n}\n\n.item[data-disabled] {\n  opacity: .5;\n  pointer-events: none;\n}\n\n.itemSelected {\n  background-color: var(--ac-neutral-100);\n}\n\n.itemCheck {\n  opacity: 0;\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  transition: opacity .2s;\n}\n\n.itemCheckVisible {\n  opacity: 1;\n}\n\n.itemLabel {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  overflow: hidden;\n}\n\n.empty {\n  color: var(--ac-neutral-500);\n  font-size: var(--ac-font-size-sm);\n  padding: var(--ac-spacing-6) var(--ac-spacing-4);\n  text-align: center;\n}\n\n.group {\n  padding: var(--ac-spacing-1) 0;\n}\n\n.separator {\n  background-color: var(--ac-neutral-200);\n  height: 1px;\n  margin: var(--ac-spacing-1) 0;\n}\n\n:global(.dark) .triggerPlaceholder {\n  color: var(--ac-neutral-400);\n}\n\n:global(.dark) .commandInput {\n  border-bottom-color: var(--ac-neutral-700);\n}\n\n:global(.dark) .item:hover {\n  background-color: var(--ac-neutral-800);\n}\n\n:global(.dark) .itemSelected {\n  background-color: var(--ac-neutral-800);\n}\n\n:global(.dark) .empty {\n  color: var(--ac-neutral-400);\n}\n\n:global(.dark) .separator {\n  background-color: var(--ac-neutral-700);\n}\n\n@media (width <= 640px) {\n  .content, .trigger {\n    min-width: 150px;\n  }\n}\n"],"sourceRoot":""}