@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Combobox/index.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Combobox.module.scss.js";
+import { ComboboxItemIndicator } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/item-indicator/ComboboxItemIndicator.js";
+import { ComboboxRoot as ComboboxRoot$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/root/ComboboxRoot.js";
+import { ComboboxGroupLabel as ComboboxGroupLabel$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/group-label/ComboboxGroupLabel.js";
+import { ComboboxGroup as ComboboxGroup$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/group/ComboboxGroup.js";
+import { ComboboxEmpty as ComboboxEmpty$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/empty/ComboboxEmpty.js";
+import { ComboboxItem as ComboboxItem$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/item/ComboboxItem.js";
+import { ComboboxPortal } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/portal/ComboboxPortal.js";
+import { ComboboxPositioner } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/positioner/ComboboxPositioner.js";
+import { ComboboxPopup } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/popup/ComboboxPopup.js";
+import { ComboboxTrigger as ComboboxTrigger$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/trigger/ComboboxTrigger.js";
+import { ComboboxInput as ComboboxInput$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/input/ComboboxInput.js";
+import { ComboboxChips } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chips/ComboboxChips.js";
+import { ComboboxChip } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chip/ComboboxChip.js";
+import { ComboboxChipRemove } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chip-remove/ComboboxChipRemove.js";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+const ComboboxContext = React.createContext({
+  selectedValues: [],
+  itemsRef: { current: /* @__PURE__ */ new Map() },
+  itemsVersion: 0,
+  incrementItemsVersion: () => {
+  }
+});
+function ComboboxRoot({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  required,
+  name,
+  placeholder,
+  autoHighlight = true
+}) {
+  const [internalValue, setInternalValue] = React.useState(
+    value ?? defaultValue ?? (multiple ? [] : null)
+  );
+  React.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const [itemsVersion, setItemsVersion] = React.useState(0);
+  const incrementItemsVersion = React.useCallback(() => {
+    setItemsVersion((v) => v + 1);
+  }, []);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [value, onValueChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (nextOpen) => {
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const itemToStringLabel = React.useCallback(
+    (itemValue) => {
+      return itemsRef.current.get(itemValue) ?? itemValue;
+    },
+    []
+  );
+  const currentValue = value !== void 0 ? value : internalValue;
+  const selectedValues = React.useMemo(() => {
+    if (currentValue == null) return [];
+    if (Array.isArray(currentValue)) return currentValue;
+    return [currentValue];
+  }, [currentValue]);
+  const contextValue = React.useMemo(
+    () => ({ placeholder, multiple, selectedValues, itemsRef, itemsVersion, incrementItemsVersion }),
+    [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    ComboboxRoot$1,
+    {
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      disabled,
+      required,
+      name,
+      multiple,
+      autoHighlight,
+      itemToStringLabel,
+      children
+    }
+  ) });
+}
+function ComboboxInput({ className, ...htmlProps }) {
+  const context = React.useContext(ComboboxContext);
+  const classes = [styles.input, className].filter(Boolean).join(" ");
+  if (context.multiple) {
+    return /* @__PURE__ */ jsxs("div", { className: styles.multiContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+        /* @__PURE__ */ jsx(
+          ComboboxInput$1,
+          {
+            placeholder: context.selectedValues.length === 0 ? context.placeholder : void 0,
+            ...htmlProps,
+            className: classes
+          }
+        ),
+        /* @__PURE__ */ jsx(ComboboxTrigger$1, { className: styles.trigger, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      ] }),
+      context.selectedValues.length > 0 && /* @__PURE__ */ jsx(ComboboxChips, { className: styles.chips, children: context.selectedValues.map((chipValue) => /* @__PURE__ */ jsxs(ComboboxChip, { className: styles.chip, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.chipLabel, children: context.itemsRef.current.get(chipValue) ?? chipValue }),
+        /* @__PURE__ */ jsx(ComboboxChipRemove, { className: styles.chipRemove, children: /* @__PURE__ */ jsx(XIcon, {}) })
+      ] }, chipValue)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    /* @__PURE__ */ jsx(
+      ComboboxInput$1,
+      {
+        placeholder: context.placeholder,
+        ...htmlProps,
+        className: classes
+      }
+    ),
+    /* @__PURE__ */ jsx(ComboboxTrigger$1, { className: styles.trigger, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+  ] });
+}
+function ComboboxTrigger({ children, className, ...htmlProps }) {
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(ComboboxTrigger$1, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {}) });
+}
+function ComboboxContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = "start",
+  maxVisibleItems,
+  ...htmlProps
+}) {
+  const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
+  const popupStyle = maxVisibleItems != null ? { "--fui-select-max-items": maxVisibleItems + 0.5, ...htmlProps.style } : htmlProps.style;
+  return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(
+    ComboboxPositioner,
+    {
+      side: "bottom",
+      sideOffset,
+      align,
+      className: styles.positioner,
+      children: /* @__PURE__ */ jsx(ComboboxPopup, { ...htmlProps, className: popupClasses, style: popupStyle, children })
+    }
+  ) });
+}
+function ComboboxItem({ children, value, disabled, className }) {
+  const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);
+  const classes = [styles.item, className].filter(Boolean).join(" ");
+  const label = typeof children === "string" ? children : String(children);
+  React.useEffect(() => {
+    const items = itemsRef.current;
+    items.set(value, label);
+    incrementItemsVersion();
+    return () => {
+      items.delete(value);
+    };
+  }, [itemsRef, incrementItemsVersion, value, label]);
+  return /* @__PURE__ */ jsxs(ComboboxItem$1, { value, disabled, className: classes, children: [
+    children,
+    /* @__PURE__ */ jsx(ComboboxItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+  ] });
+}
+function ComboboxEmpty({ children, className }) {
+  const classes = [styles.empty, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(ComboboxEmpty$1, { className: classes, children });
+}
+function ComboboxGroup({ children, className }) {
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(ComboboxGroup$1, { className: classes, children });
+}
+function ComboboxGroupLabel({ children, className }) {
+  const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(ComboboxGroupLabel$1, { className: classes, children });
+}
+const Combobox = Object.assign(ComboboxRoot, {
+  Input: ComboboxInput,
+  Trigger: ComboboxTrigger,
+  Content: ComboboxContent,
+  Item: ComboboxItem,
+  ItemIndicator: ComboboxItemIndicator,
+  Empty: ComboboxEmpty,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel
+});
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxRoot,
+  ComboboxTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Combobox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Combobox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport styles from './Combobox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ComboboxProps {\n  children: React.ReactNode;\n  /** Controlled selected value (string for single, string[] for multiple) */\n  value?: string | string[] | null;\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string | string[];\n  /** Called when selection changes */\n  onValueChange?: (value: string | string[] | null) => void;\n  /** Whether multiple items can be selected */\n  multiple?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n  /** Auto-highlight first matching item while filtering */\n  autoHighlight?: boolean;\n}\n\nexport interface ComboboxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  className?: string;\n}\n\nexport interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  /** Maximum number of visible options before scrolling. Shows half of the next item as a scroll hint. @default 4 */\n  maxVisibleItems?: number;\n}\n\nexport interface ComboboxItemProps {\n  children: React.ReactNode;\n  value: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ComboboxEmptyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface ComboboxGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface ComboboxGroupLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction XIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Context for Combobox state\n// ============================================\n\ninterface ComboboxContextValue {\n  placeholder?: string;\n  multiple?: boolean;\n  selectedValues: string[];\n  itemsRef: React.MutableRefObject<Map<string, string>>;\n  itemsVersion: number;\n  incrementItemsVersion: () => void;\n}\n\nconst ComboboxContext = React.createContext<ComboboxContextValue>({\n  selectedValues: [],\n  itemsRef: { current: new Map() },\n  itemsVersion: 0,\n  incrementItemsVersion: () => {},\n});\n\n// ============================================\n// Components\n// ============================================\n\nfunction ComboboxRoot({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  multiple = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  required,\n  name,\n  placeholder,\n  autoHighlight = true,\n}: ComboboxProps) {\n  // Track selected values for chip rendering\n  const [internalValue, setInternalValue] = React.useState<string | string[] | null>(\n    value ?? defaultValue ?? (multiple ? [] : null)\n  );\n\n  // Sync with controlled value\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  // Registry for item value → label mapping\n  const itemsRef = React.useRef<Map<string, string>>(new Map());\n  const [itemsVersion, setItemsVersion] = React.useState(0);\n  const incrementItemsVersion = React.useCallback(() => {\n    setItemsVersion((v) => v + 1);\n  }, []);\n\n  const handleValueChange = React.useCallback(\n    (newValue: string | string[] | null) => {\n      if (value === undefined) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [value, onValueChange]\n  );\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      onOpenChange?.(nextOpen);\n    },\n    [onOpenChange]\n  );\n\n  // Convert value → label for input display\n  const itemToStringLabel = React.useCallback(\n    (itemValue: string) => {\n      return itemsRef.current.get(itemValue) ?? itemValue;\n    },\n    []\n  );\n\n  // Derive selected values array for chip rendering\n  const currentValue = value !== undefined ? value : internalValue;\n  const selectedValues = React.useMemo(() => {\n    if (currentValue == null) return [];\n    if (Array.isArray(currentValue)) return currentValue;\n    return [currentValue];\n  }, [currentValue]);\n\n  const contextValue = React.useMemo(\n    () => ({ placeholder, multiple, selectedValues, itemsRef, itemsVersion, incrementItemsVersion }),\n    [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion]\n  );\n\n  return (\n    <ComboboxContext.Provider value={contextValue}>\n      <BaseCombobox.Root\n        value={value as any}\n        defaultValue={defaultValue as any}\n        onValueChange={handleValueChange as any}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange as any}\n        disabled={disabled}\n        required={required}\n        name={name}\n        multiple={multiple as any}\n        autoHighlight={autoHighlight}\n        itemToStringLabel={itemToStringLabel}\n      >\n        {children}\n      </BaseCombobox.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nfunction ComboboxInput({ className, ...htmlProps }: ComboboxInputProps) {\n  const context = React.useContext(ComboboxContext);\n  const classes = [styles.input, className].filter(Boolean).join(' ');\n\n  if (context.multiple) {\n    return (\n      <div className={styles.multiContainer}>\n        <div className={styles.inputWrapper}>\n          <BaseCombobox.Input\n            placeholder={context.selectedValues.length === 0 ? context.placeholder : undefined}\n            {...htmlProps}\n            className={classes}\n          />\n          <BaseCombobox.Trigger className={styles.trigger}>\n            <ChevronDownIcon />\n          </BaseCombobox.Trigger>\n        </div>\n        {context.selectedValues.length > 0 && (\n          <BaseCombobox.Chips className={styles.chips}>\n            {context.selectedValues.map((chipValue) => (\n              <BaseCombobox.Chip key={chipValue} className={styles.chip}>\n                <span className={styles.chipLabel}>\n                  {context.itemsRef.current.get(chipValue) ?? chipValue}\n                </span>\n                <BaseCombobox.ChipRemove className={styles.chipRemove}>\n                  <XIcon />\n                </BaseCombobox.ChipRemove>\n              </BaseCombobox.Chip>\n            ))}\n          </BaseCombobox.Chips>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.inputWrapper}>\n      <BaseCombobox.Input\n        placeholder={context.placeholder}\n        {...htmlProps}\n        className={classes}\n      />\n      <BaseCombobox.Trigger className={styles.trigger}>\n        <ChevronDownIcon />\n      </BaseCombobox.Trigger>\n    </div>\n  );\n}\n\nfunction ComboboxTrigger({ children, className, ...htmlProps }: ComboboxTriggerProps) {\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseCombobox.Trigger {...htmlProps} className={classes}>\n      {children ?? <ChevronDownIcon />}\n    </BaseCombobox.Trigger>\n  );\n}\n\nfunction ComboboxContent({\n  children,\n  className,\n  sideOffset = 4,\n  align = 'start',\n  maxVisibleItems,\n  ...htmlProps\n}: ComboboxContentProps) {\n  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');\n\n  const popupStyle = maxVisibleItems != null\n    ? { '--fui-select-max-items': maxVisibleItems + 0.5, ...htmlProps.style } as React.CSSProperties\n    : htmlProps.style;\n\n  return (\n    <BaseCombobox.Portal>\n      <BaseCombobox.Positioner\n        side=\"bottom\"\n        sideOffset={sideOffset}\n        align={align}\n        className={styles.positioner}\n      >\n        <BaseCombobox.Popup {...htmlProps} className={popupClasses} style={popupStyle}>\n          {children}\n        </BaseCombobox.Popup>\n      </BaseCombobox.Positioner>\n    </BaseCombobox.Portal>\n  );\n}\n\nfunction ComboboxItem({ children, value, disabled, className }: ComboboxItemProps) {\n  const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);\n  const classes = [styles.item, className].filter(Boolean).join(' ');\n\n  // Register this item's label in the registry so the input can display it\n  const label = typeof children === 'string' ? children : String(children);\n  React.useEffect(() => {\n    const items = itemsRef.current;\n    items.set(value, label);\n    incrementItemsVersion();\n    return () => {\n      items.delete(value);\n    };\n    // itemsRef is a stable ref, incrementItemsVersion is a stable callback\n  }, [itemsRef, incrementItemsVersion, value, label]);\n\n  return (\n    <BaseCombobox.Item value={value} disabled={disabled} className={classes}>\n      {children}\n      <BaseCombobox.ItemIndicator className={styles.itemIndicator}>\n        <CheckIcon />\n      </BaseCombobox.ItemIndicator>\n    </BaseCombobox.Item>\n  );\n}\n\nfunction ComboboxEmpty({ children, className }: ComboboxEmptyProps) {\n  const classes = [styles.empty, className].filter(Boolean).join(' ');\n  return <BaseCombobox.Empty className={classes}>{children}</BaseCombobox.Empty>;\n}\n\nfunction ComboboxGroup({ children, className }: ComboboxGroupProps) {\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n  return <BaseCombobox.Group className={classes}>{children}</BaseCombobox.Group>;\n}\n\nfunction ComboboxGroupLabel({ children, className }: ComboboxGroupLabelProps) {\n  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');\n  return <BaseCombobox.GroupLabel className={classes}>{children}</BaseCombobox.GroupLabel>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Combobox = Object.assign(ComboboxRoot, {\n  Input: ComboboxInput,\n  Trigger: ComboboxTrigger,\n  Content: ComboboxContent,\n  Item: ComboboxItem,\n  ItemIndicator: BaseCombobox.ItemIndicator,\n  Empty: ComboboxEmpty,\n  Group: ComboboxGroup,\n  GroupLabel: ComboboxGroupLabel,\n});\n\n// Re-export individual components\nexport {\n  ComboboxRoot,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxContent,\n  ComboboxItem,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n};\n"],"names":["BaseCombobox.Root","BaseCombobox.Input","BaseCombobox.Trigger","BaseCombobox.Chips","BaseCombobox.Chip","BaseCombobox.ChipRemove","BaseCombobox.Portal","BaseCombobox.Positioner","BaseCombobox.Popup","BaseCombobox.Item","BaseCombobox.ItemIndicator","BaseCombobox.Empty","BaseCombobox.Group","BaseCombobox.GroupLabel"],"mappings":"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"}

package/dist/components/Command/Command.module.scss.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const command = "_command_krhel_1";
+const inputWrapper = "_inputWrapper_krhel_11";
+const input = "_input_krhel_11";
+const list = "_list_krhel_44";
+const item = "_item_krhel_50";
+const itemActive = "_itemActive_krhel_88";
+const itemDisabled = "_itemDisabled_krhel_92";
+const group = "_group_krhel_100";
+const groupHeading = "_groupHeading_krhel_104";
+const empty = "_empty_krhel_111";
+const separator = "_separator_krhel_118";
+const styles = {
+  command,
+  inputWrapper,
+  input,
+  list,
+  item,
+  itemActive,
+  itemDisabled,
+  group,
+  groupHeading,
+  empty,
+  separator
+};
+exports.command = command;
+exports.default = styles;
+exports.empty = empty;
+exports.group = group;
+exports.groupHeading = groupHeading;
+exports.input = input;
+exports.inputWrapper = inputWrapper;
+exports.item = item;
+exports.itemActive = itemActive;
+exports.itemDisabled = itemDisabled;
+exports.list = list;
+exports.separator = separator;
+//# sourceMappingURL=Command.module.scss.cjs.map

package/dist/components/Command/Command.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Command/Command.module.scss.js

@@ -0,0 +1,39 @@
+const command = "_command_krhel_1";
+const inputWrapper = "_inputWrapper_krhel_11";
+const input = "_input_krhel_11";
+const list = "_list_krhel_44";
+const item = "_item_krhel_50";
+const itemActive = "_itemActive_krhel_88";
+const itemDisabled = "_itemDisabled_krhel_92";
+const group = "_group_krhel_100";
+const groupHeading = "_groupHeading_krhel_104";
+const empty = "_empty_krhel_111";
+const separator = "_separator_krhel_118";
+const styles = {
+  command,
+  inputWrapper,
+  input,
+  list,
+  item,
+  itemActive,
+  itemDisabled,
+  group,
+  groupHeading,
+  empty,
+  separator
+};
+export {
+  command,
+  styles as default,
+  empty,
+  group,
+  groupHeading,
+  input,
+  inputWrapper,
+  item,
+  itemActive,
+  itemDisabled,
+  list,
+  separator
+};
+//# sourceMappingURL=Command.module.scss.js.map

package/dist/components/Command/Command.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}