@edux-design/forms 0.0.4 → 0.0.6

package/dist/index.mjs

@@ -25,6 +25,13 @@ var FieldProvider = ({ children }) => {
     if (!id) return;
     setDescribedByIds((prev) => prev.filter((x) => x !== id));
   }, []);
+  const getPartId = useCallback(
+    (part) => {
+      if (!part) return baseId;
+      return `${baseId}-${part}`;
+    },
+    [baseId]
+  );
   const value = useMemo(
     () => ({
       labelHTMLForId: baseId,
@@ -32,9 +39,17 @@ var FieldProvider = ({ children }) => {
       setType,
       describedByIds,
       registerDescription,
-      unregisterDescription
+      unregisterDescription,
+      getPartId
     }),
-    [baseId, type, describedByIds, registerDescription, unregisterDescription]
+    [
+      baseId,
+      type,
+      describedByIds,
+      registerDescription,
+      unregisterDescription,
+      getPartId
+    ]
   );
   return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children });
 };
@@ -100,7 +115,7 @@ var Input = forwardRef(
   }, ref) => {
     const { labelHTMLForId } = useFieldContext();
     const hasValue = Boolean(props.value);
-    const defaults = "h-[44px] w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
+    const defaults = "h-[44px] bg-white w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
     const fonts = "font-normal text-base";
     const variants = {
       primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
@@ -175,9 +190,16 @@ import React4, { useEffect, useId as useId2 } from "react";
 import { cx as cx2 } from "@edux-design/utils";
 import { Close as Close2 } from "@edux-design/icons";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Field = ({ children }) => {
+var Field = ({
+  children,
+  orientation = "vertical",
+  className
+}) => {
+  const orientationClasses = orientation === "horizontal" ? "flex-row items-center gap-6" : "flex-col items-start gap-8";
   const FIELD_GROUP_WRAPPER_STYLES = cx2(
-    "flex flex-col items-start relative gap-8"
+    "flex relative",
+    orientationClasses,
+    className
   );
   return /* @__PURE__ */ jsx4(FieldProvider, { children: /* @__PURE__ */ jsx4("div", { className: FIELD_GROUP_WRAPPER_STYLES, children }) });
 };
@@ -252,12 +274,376 @@ function Radio() {
   ] });
 }
 
-// src/elements/Textarea.jsx
-import React6, { forwardRef as forwardRef2 } from "react";
+// src/elements/Checkbox.jsx
+import React6, { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect2, useRef } from "react";
 import { cx as cx4 } from "@edux-design/utils";
-import { Close as Close3 } from "@edux-design/icons";
+import { Check, Indeterminate } from "@edux-design/icons";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var Textarea = forwardRef2(
+var VARIANT_INTENTS = {
+  primary: {
+    baseBorder: "border-border-base",
+    baseBg: "bg-bg-base",
+    hoverBorder: "peer-hover:border-border-primary-base",
+    activeBorder: "peer-active:border-border-primary-emphasis",
+    activeBg: "peer-active:bg-bg-primary-subtle",
+    peerSelectedBorder: "peer-checked:border-border-primary-base",
+    peerSelectedBg: "peer-checked:bg-bg-primary-base",
+    selectedBorder: "border-border-primary-base",
+    selectedBg: "bg-bg-primary-base",
+    iconColor: "text-white"
+  },
+  success: {
+    baseBorder: "border-border-success-base",
+    baseBg: "bg-bg-base",
+    hoverBorder: "peer-hover:border-border-success-emphasis",
+    activeBorder: "peer-active:border-border-success-emphasis",
+    activeBg: "peer-active:bg-bg-success-subtle",
+    peerSelectedBorder: "peer-checked:border-border-success-base",
+    peerSelectedBg: "peer-checked:bg-bg-success-base",
+    selectedBorder: "border-border-success-base",
+    selectedBg: "bg-bg-success-base",
+    iconColor: "text-white"
+  },
+  corrective: {
+    baseBorder: "border-border-corrective-base",
+    baseBg: "bg-bg-base",
+    hoverBorder: "peer-hover:border-border-corrective-emphasis",
+    activeBorder: "peer-active:border-border-corrective-emphasis",
+    activeBg: "peer-active:bg-bg-corrective-subtle",
+    peerSelectedBorder: "peer-checked:border-border-corrective-base",
+    peerSelectedBg: "peer-checked:bg-bg-corrective-base",
+    selectedBorder: "border-border-corrective-base",
+    selectedBg: "bg-bg-corrective-base",
+    iconColor: "text-fg-base"
+  },
+  error: {
+    baseBorder: "border-border-danger-base",
+    baseBg: "bg-bg-base",
+    hoverBorder: "peer-hover:border-border-danger-emphasis",
+    activeBorder: "peer-active:border-border-danger-emphasis",
+    activeBg: "peer-active:bg-bg-danger-subtle",
+    peerSelectedBorder: "peer-checked:border-border-danger-base",
+    peerSelectedBg: "peer-checked:bg-bg-danger-base",
+    selectedBorder: "border-border-danger-base",
+    selectedBg: "bg-bg-danger-base",
+    iconColor: "text-white"
+  },
+  inactive: {
+    baseBorder: "border-border-subtle",
+    baseBg: "bg-bg-inactive",
+    hoverBorder: null,
+    activeBorder: null,
+    activeBg: null,
+    peerSelectedBorder: null,
+    peerSelectedBg: null,
+    selectedBorder: "border-border-subtle",
+    selectedBg: "bg-bg-inactive",
+    iconColor: "text-fg-inactive"
+  }
+};
+var Checkbox = forwardRef2(
+  ({
+    className,
+    indeterminate = false,
+    variant = "primary",
+    disabled,
+    id: providedId,
+    ...rest
+  }, ref) => {
+    const {
+      ["aria-describedby"]: ariaDescribedByProp,
+      ["aria-checked"]: ariaCheckedProp,
+      ...inputProps
+    } = rest;
+    const {
+      labelHTMLForId,
+      describedByIds = []
+    } = useFieldContext();
+    const resolvedId = providedId ?? labelHTMLForId;
+    const intent = VARIANT_INTENTS[variant] ?? VARIANT_INTENTS.primary;
+    const derivedDisabled = Boolean(disabled);
+    const isInactiveVariant = variant === "inactive";
+    const isDisabled = derivedDisabled || isInactiveVariant;
+    const describedByTokens = [
+      ...describedByIds,
+      ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
+    ].filter(Boolean);
+    const describedBy = describedByTokens.length ? describedByTokens.join(" ") : void 0;
+    const ariaChecked = indeterminate ? "mixed" : ariaCheckedProp;
+    const inputRef = useRef(null);
+    const setRefs = useCallback3(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    useEffect2(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: cx4(
+          "relative inline-flex h-[28px] w-[28px] items-center justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              id: resolvedId,
+              ref: setRefs,
+              type: "checkbox",
+              className: cx4(
+                "peer absolute inset-0 h-full w-full cursor-pointer appearance-none rounded-md bg-transparent",
+                "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none",
+                isDisabled && "cursor-not-allowed"
+              ),
+              "aria-checked": ariaChecked,
+              "aria-describedby": describedBy,
+              "aria-disabled": isDisabled ? "true" : void 0,
+              "aria-invalid": variant === "error" ? "true" : void 0,
+              disabled: isDisabled,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              "data-slot": "checkbox-control",
+              "aria-hidden": "true",
+              className: cx4(
+                "flex h-full w-full items-center justify-center rounded-md border-2 transition-all duration-200 ease-in-out",
+                "peer-focus-visible:shadow-focus",
+                "peer-disabled:border-border-subtle peer-disabled:bg-bg-inactive peer-disabled:text-fg-inactive",
+                intent.baseBg,
+                intent.baseBorder,
+                !isDisabled && intent.hoverBorder,
+                !isDisabled && intent.activeBorder,
+                !isDisabled && intent.activeBg,
+                intent.peerSelectedBorder,
+                intent.peerSelectedBg,
+                indeterminate && intent.selectedBorder,
+                indeterminate && intent.selectedBg
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Check,
+            {
+              "aria-hidden": "true",
+              className: cx4(
+                "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
+                intent.iconColor,
+                "peer-disabled:text-fg-inactive",
+                indeterminate ? "opacity-0" : "opacity-0 peer-checked:opacity-100"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Indeterminate,
+            {
+              "aria-hidden": "true",
+              className: cx4(
+                "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150",
+                intent.iconColor,
+                "peer-disabled:text-fg-inactive",
+                indeterminate ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/elements/Switch.jsx
+import React7, { forwardRef as forwardRef3, useState as useState2 } from "react";
+import { cx as cx5 } from "@edux-design/utils";
+import { Check as Check2, Close as Close3 } from "@edux-design/icons";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var SWITCH_INTENTS = {
+  primary: {
+    trackBase: "bg-bg-subtle border-2 border-border-base",
+    trackChecked: "peer-checked:bg-bg-primary-subtle peer-checked:border-border-primary-base",
+    trackHover: "peer-hover:border-border-primary-base",
+    trackActive: "peer-active:border-border-primary-emphasis peer-active:bg-bg-primary-subtle",
+    thumbBase: "bg-fg-inactive border-border-base text-bg-emphasis",
+    thumbChecked: "peer-checked:bg-bg-primary-base peer-checked:border-border-primary-base peer-checked:text-white",
+    thumbHover: "peer-hover:border-border-primary-base",
+    thumbActive: "peer-active:border-border-primary-emphasis",
+    offIcon: "text-white",
+    onIcon: "text-white"
+  },
+  success: {
+    trackBase: "bg-bg-subtle border-2 border-border-success-base",
+    trackChecked: "peer-checked:bg-bg-success-subtle peer-checked:border-border-success-base",
+    trackHover: "peer-hover:border-border-success-emphasis",
+    trackActive: "peer-active:border-border-success-emphasis peer-active:bg-bg-success-subtle",
+    thumbBase: "bg-bg-success-subtle border-border-success-base text-fg-success-base",
+    thumbChecked: "peer-checked:bg-bg-success-base peer-checked:border-border-success-base peer-checked:text-white",
+    thumbHover: "peer-hover:border-border-success-emphasis",
+    thumbActive: "peer-active:border-border-success-emphasis",
+    offIcon: "text-fg-success-base",
+    onIcon: "text-white"
+  },
+  corrective: {
+    trackBase: "bg-bg-corrective-subtle border-2 border-border-corrective-base",
+    trackChecked: "peer-checked:bg-bg-corrective-subtle peer-checked:border-border-corrective-base",
+    trackHover: "peer-hover:border-border-corrective-emphasis",
+    trackActive: "peer-active:border-border-corrective-emphasis peer-active:bg-bg-corrective-subtle",
+    thumbBase: "bg-bg-corrective-base border-border-corrective-base text-fg-base",
+    thumbChecked: "peer-checked:bg-bg-corrective-base peer-checked:border-border-corrective-base peer-checked:text-fg-base",
+    thumbHover: "peer-hover:border-border-corrective-emphasis",
+    thumbActive: "peer-active:border-border-corrective-emphasis",
+    offIcon: "text-white",
+    onIcon: "text-white"
+  },
+  error: {
+    trackBase: "bg-bg-danger-subtle border-2 border-border-danger-base",
+    trackChecked: "peer-checked:bg-bg-danger-subtle peer-checked:border-border-danger-base",
+    trackHover: "peer-hover:border-border-danger-emphasis",
+    trackActive: "peer-active:border-border-danger-emphasis peer-active:bg-bg-danger-subtle",
+    thumbBase: "bg-white border-border-danger-base text-fg-danger-base",
+    thumbChecked: "peer-checked:bg-bg-danger-base peer-checked:border-border-danger-base peer-checked:text-white",
+    thumbHover: "peer-hover:border-border-danger-emphasis",
+    thumbActive: "peer-active:border-border-danger-emphasis",
+    offIcon: "text-fg-danger-base",
+    onIcon: "text-white"
+  },
+  inactive: {
+    trackBase: "bg-bg-inactive border-2 border-border-subtle",
+    trackChecked: "peer-checked:bg-bg-inactive peer-checked:border-border-subtle",
+    trackHover: null,
+    trackActive: null,
+    thumbBase: "bg-bg-inactive border-border-subtle text-fg-inactive",
+    thumbChecked: "peer-checked:bg-bg-inactive peer-checked:border-border-subtle peer-checked:text-fg-inactive",
+    thumbHover: null,
+    thumbActive: null,
+    offIcon: "text-fg-inactive",
+    onIcon: "text-fg-inactive"
+  }
+};
+var Switch = forwardRef3(
+  ({
+    className,
+    variant = "primary",
+    disabled,
+    id: providedId,
+    checked,
+    onChange,
+    ...rest
+  }, ref) => {
+    const { ["aria-describedby"]: ariaDescribedByProp, ...inputProps } = rest;
+    const { labelHTMLForId, describedByIds = [] } = useFieldContext();
+    const resolvedId = providedId ?? labelHTMLForId;
+    const describedByTokens = [
+      ...describedByIds,
+      ...ariaDescribedByProp ? ariaDescribedByProp.split(" ") : []
+    ].filter(Boolean);
+    const ariaDescribedBy = describedByTokens.length > 0 ? describedByTokens.join(" ") : void 0;
+    const intent = SWITCH_INTENTS[variant] ?? SWITCH_INTENTS.primary;
+    const derivedDisabled = Boolean(disabled);
+    const isInactiveVariant = variant === "inactive";
+    const isDisabled = derivedDisabled || isInactiveVariant;
+    const [unControlledChecked, setUnControlledChecked] = useState2(false);
+    const isOn = checked ?? unControlledChecked;
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: cx5(
+          "relative flex h-[28px] w-[46px] items-center justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              id: resolvedId,
+              ref,
+              onChange: onChange ? onChange : () => setUnControlledChecked(!unControlledChecked),
+              checked: checked ? checked : unControlledChecked,
+              type: "checkbox",
+              role: "switch",
+              className: cx5(
+                "peer absolute inset-0 z-10 h-full w-full cursor-pointer appearance-none rounded-full opacity-0",
+                "focus:shadow-focus focus-visible:shadow-focus focus:outline-none focus-visible:outline-none",
+                isDisabled && "cursor-not-allowed"
+              ),
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": variant === "error" ? "true" : void 0,
+              "aria-disabled": isDisabled ? "true" : void 0,
+              disabled: isDisabled,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-track",
+              className: cx5(
+                "pointer-events-none absolute inset-0 rounded-full border-1 transition-all duration-200 ease-out",
+                "peer-focus-visible:shadow-focus",
+                "peer-disabled:border-border-subtle peer-disabled:bg-bg-inactive",
+                intent.trackBase,
+                intent.trackChecked,
+                !isDisabled && intent.trackHover,
+                !isDisabled && intent.trackActive
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "span",
+            {
+              "data-slot": "switch-thumb",
+              "aria-hidden": "true",
+              className: cx5(
+                "pointer-events-none absolute left-[5px] top-[5px] flex h-[18px] w-[18px] items-center justify-center rounded-full transition-all duration-200 ease-out transform-gpu",
+                "peer-disabled:border-border-subtle peer-disabled:bg-bg-inactive",
+                intent.thumbBase,
+                intent.thumbChecked,
+                !isDisabled && intent.thumbHover,
+                !isDisabled && intent.thumbActive,
+                "peer-checked:translate-x-[19px]"
+              ),
+              children: !isOn ? /* @__PURE__ */ jsx7(
+                Close3,
+                {
+                  "aria-hidden": "true",
+                  className: cx5("absolute  duration-150", intent.offIcon)
+                }
+              ) : /* @__PURE__ */ jsx7(
+                Check2,
+                {
+                  "aria-hidden": "true",
+                  className: cx5("absolute   duration-150", intent.onIcon)
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/elements/Textarea.jsx
+import React8, { forwardRef as forwardRef4 } from "react";
+import { cx as cx6 } from "@edux-design/utils";
+import { Close as Close4 } from "@edux-design/icons";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
   ({
     children,
     validation,
@@ -270,7 +656,7 @@ var Textarea = forwardRef2(
   }, ref) => {
     const { labelHTMLForId } = useFieldContext();
     const hasValue = Boolean(props.value);
-    const defaults = "w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5 py-3 resize-y";
+    const defaults = "w-full bg-white border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5 py-3 resize-y";
     const fonts = "font-normal text-base leading-relaxed";
     const variants = {
       primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
@@ -279,7 +665,7 @@ var Textarea = forwardRef2(
       success: "border-border-success-base",
       inactive: "border-border-subtle bg-bg-subtle"
     };
-    const TEXTAREA_STYLES = cx4(
+    const TEXTAREA_STYLES = cx6(
       defaults,
       fonts,
       variants[variant],
@@ -287,8 +673,8 @@ var Textarea = forwardRef2(
       clearable && endIcon && "pr-10",
       clearable && !endIcon && "pr-5"
     );
-    return /* @__PURE__ */ jsxs5("div", { className: "w-full relative flex items-start", children: [
-      startIcon && /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs7("div", { className: "w-full relative flex items-start", children: [
+      startIcon && /* @__PURE__ */ jsx8(
         "span",
         {
           className: "absolute left-3 top-3 flex items-center pointer-events-none text-fg-subtle",
@@ -296,7 +682,7 @@ var Textarea = forwardRef2(
           children: startIcon
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "textarea",
         {
           id: labelHTMLForId,
@@ -309,7 +695,7 @@ var Textarea = forwardRef2(
           ...props
         }
       ),
-      clearable && /* @__PURE__ */ jsx6(
+      clearable && /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -318,20 +704,20 @@ var Textarea = forwardRef2(
             var _a;
             return (_a = props.onChange) == null ? void 0 : _a.call(props, { target: { value: "" } });
           },
-          className: cx4(
+          className: cx6(
             clearable && hasValue && endIcon ? "right-9" : "right-3",
             "absolute top-3 flex items-center p-1 rounded-full outline-none",
             "transition-all duration-300 ease-in-out",
             hasValue ? "opacity-100 scale-100" : "opacity-0 scale-90 pointer-events-none",
             "focus:shadow-focus"
           ),
-          children: /* @__PURE__ */ jsx6(Close3, { "aria-hidden": "true", className: "text-fg-subtle" })
+          children: /* @__PURE__ */ jsx8(Close4, { "aria-hidden": "true", className: "text-fg-subtle" })
         }
       ),
-      endIcon && /* @__PURE__ */ jsx6(
+      endIcon && /* @__PURE__ */ jsx8(
         "span",
         {
-          className: cx4(
+          className: cx6(
             "absolute flex items-center right-3 top-3 text-fg-subtle"
           ),
           "aria-hidden": typeof endIcon === "string" ? void 0 : "true",
@@ -341,11 +727,559 @@ var Textarea = forwardRef2(
     ] });
   }
 );
+
+// src/elements/Combobox.jsx
+import React9, {
+  forwardRef as forwardRef5,
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useId as useId3,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { cx as cx7 } from "@edux-design/utils";
+import { Popover, PopoverAnchor, PopoverContent } from "@edux-design/popovers";
+import { Chip } from "@edux-design/chips";
+import { Chevron } from "@edux-design/icons";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var OPTION_COMPONENT_NAME = "ComboboxOption";
+var MENU_ITEM_STYLES = cx7(
+  "flex items-center px-32 py-8 cursor-pointer min-w-[100px]",
+  "transition-colors duration-200 ease-in-out w-full text-sm",
+  "focus:bg-bg-focus focus:outline-none hover:underline hover:bg-bg-primary-subtle"
+);
+var getOptionLabel = (child) => {
+  if (!(child == null ? void 0 : child.props)) return "";
+  if (typeof child.props.label === "string") {
+    return child.props.label;
+  }
+  if (typeof child.props.children === "string") {
+    return child.props.children;
+  }
+  if (typeof child.props.value === "string") {
+    return child.props.value;
+  }
+  return "";
+};
+var defaultFilter = (option, query) => {
+  var _a;
+  const normalisedLabel = ((_a = option.label) == null ? void 0 : _a.toString().toLowerCase()) ?? "";
+  return normalisedLabel.includes(query.trim().toLowerCase());
+};
+var ComboboxRoot = forwardRef5(
+  ({
+    children,
+    value,
+    defaultValue = null,
+    onValueChange,
+    placeholder = "Select an option",
+    disabled = false,
+    autoComplete = false,
+    multiSelect = false,
+    emptyState = "No options found",
+    filterFunction = defaultFilter,
+    selectOnly = false,
+    wrapperClassName,
+    contentClassName,
+    listClassName,
+    optionClassName,
+    ...inputProps
+  }, ref) => {
+    const {
+      labelHTMLForId,
+      describedByIds = [],
+      getPartId
+    } = useFieldContext();
+    const optionElements = useMemo2(
+      () => React9.Children.toArray(children).filter(
+        (child) => {
+          var _a;
+          return React9.isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === OPTION_COMPONENT_NAME;
+        }
+      ),
+      [children]
+    );
+    const normalisedOptions = useMemo2(
+      () => optionElements.map((child) => {
+        if (child.props.value === void 0 || child.props.value === null) {
+          return null;
+        }
+        return {
+          value: child.props.value,
+          label: getOptionLabel(child),
+          disabled: Boolean(child.props.disabled),
+          element: child
+        };
+      }).filter(Boolean),
+      [optionElements]
+    );
+    const isMultiSelectEnabled = Boolean(multiSelect);
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState3(() => {
+      if (isMultiSelectEnabled) {
+        if (Array.isArray(defaultValue)) return defaultValue;
+        if (defaultValue === null || defaultValue === void 0) {
+          return [];
+        }
+        return [defaultValue];
+      }
+      return defaultValue ?? null;
+    });
+    const resolvedValue = isControlled ? value : internalValue;
+    const singleSelectedValue = !isMultiSelectEnabled ? resolvedValue ?? null : null;
+    const multiSelectedValues = isMultiSelectEnabled ? Array.isArray(resolvedValue) ? resolvedValue : resolvedValue === null || resolvedValue === void 0 ? [] : [resolvedValue] : [];
+    const selectedOption = useMemo2(() => {
+      if (isMultiSelectEnabled) return null;
+      return normalisedOptions.find(
+        (option) => option.value === singleSelectedValue
+      ) ?? null;
+    }, [isMultiSelectEnabled, normalisedOptions, singleSelectedValue]);
+    const multiSelectedOptions = useMemo2(() => {
+      if (!isMultiSelectEnabled) return [];
+      return normalisedOptions.filter(
+        (option) => multiSelectedValues.includes(option.value)
+      );
+    }, [isMultiSelectEnabled, normalisedOptions, multiSelectedValues]);
+    const selectionSummary = isMultiSelectEnabled ? multiSelectedOptions.map((option) => option.label).join(", ") : (selectedOption == null ? void 0 : selectedOption.label) ?? "";
+    const shouldFilter = !selectOnly && (autoComplete || isMultiSelectEnabled);
+    const [open, setOpen] = useState3(false);
+    const [inputValue, setInputValue] = useState3(
+      () => isMultiSelectEnabled && shouldFilter ? "" : selectionSummary
+    );
+    const [isUserTyping, setIsUserTyping] = useState3(false);
+    const [activeIndex, setActiveIndex] = useState3(-1);
+    const fallbackListboxId = useId3();
+    const listboxId = getPartId ? getPartId("listbox") : fallbackListboxId;
+    const anchorRef = useRef2(null);
+    const inputRef = useRef2(null);
+    const mergedRef = useCallback4(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    useEffect3(() => {
+      if (!isMultiSelectEnabled && !open) {
+        setInputValue((selectedOption == null ? void 0 : selectedOption.label) ?? "");
+      }
+    }, [isMultiSelectEnabled, open, selectedOption]);
+    const filteredOptions = useMemo2(() => {
+      const query = inputValue.trim();
+      if (!shouldFilter || !query) {
+        return normalisedOptions;
+      }
+      return normalisedOptions.filter(
+        (option) => filterFunction(option, query)
+      );
+    }, [normalisedOptions, filterFunction, inputValue, shouldFilter]);
+    useEffect3(() => {
+      if (!open) {
+        setActiveIndex(-1);
+        return;
+      }
+      if (!filteredOptions.length) {
+        setActiveIndex(-1);
+        return;
+      }
+      if (!isMultiSelectEnabled) {
+        const selectedIndex = filteredOptions.findIndex(
+          (option) => option.value === singleSelectedValue
+        );
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+        return;
+      }
+      setActiveIndex((prev) => prev >= 0 ? prev : 0);
+    }, [open, filteredOptions, singleSelectedValue, isMultiSelectEnabled]);
+    const [contentWidth, setContentWidth] = useState3(0);
+    useLayoutEffect(() => {
+      if (anchorRef.current) {
+        setContentWidth(anchorRef.current.offsetWidth);
+      }
+    }, [open]);
+    const emitChange = useCallback4(
+      (nextValue, option) => {
+        if (!isControlled) {
+          setInternalValue(nextValue);
+        }
+        onValueChange == null ? void 0 : onValueChange(nextValue, option);
+      },
+      [isControlled, onValueChange]
+    );
+    const selectOption = useCallback4(
+      (option) => {
+        if (!option || option.disabled) return;
+        if (isMultiSelectEnabled) {
+          const exists = multiSelectedValues.includes(option.value);
+          const nextValues = exists ? multiSelectedValues.filter((value2) => value2 !== option.value) : [...multiSelectedValues, option.value];
+          emitChange(nextValues, option);
+          if (shouldFilter) {
+            setInputValue("");
+            setIsUserTyping(false);
+          }
+          return;
+        }
+        emitChange(option.value, option);
+        setInputValue(option.label);
+        setOpen(false);
+      },
+      [emitChange, isMultiSelectEnabled, multiSelectedValues, shouldFilter]
+    );
+    const {
+      onFocus: userOnFocus,
+      onBlur: userOnBlur,
+      onKeyDown: userOnKeyDown,
+      onChange: userOnInputChange,
+      onMouseDown: userOnMouseDown,
+      ...restInputProps
+    } = inputProps;
+    const handleInputChange = (event) => {
+      if (disabled) return;
+      if (selectOnly) {
+        setOpen(true);
+        userOnInputChange == null ? void 0 : userOnInputChange(event);
+        return;
+      }
+      if (isMultiSelectEnabled && shouldFilter) {
+        setIsUserTyping(true);
+      }
+      setOpen(true);
+      setInputValue(event.target.value);
+      userOnInputChange == null ? void 0 : userOnInputChange(event);
+    };
+    const handleFocus = (event) => {
+      if (disabled) return;
+      setOpen(true);
+      if (isMultiSelectEnabled && autoComplete && !selectOnly) {
+        setIsUserTyping(true);
+      }
+      userOnFocus == null ? void 0 : userOnFocus(event);
+    };
+    const handleBlur = (event) => {
+      setIsUserTyping(false);
+      if (isMultiSelectEnabled) {
+        setInputValue("");
+      }
+      userOnBlur == null ? void 0 : userOnBlur(event);
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) {
+        userOnKeyDown == null ? void 0 : userOnKeyDown(event);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex((prev) => {
+          if (!filteredOptions.length) return -1;
+          const next = prev + 1;
+          return next >= filteredOptions.length ? filteredOptions.length - 1 : next;
+        });
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex((prev) => {
+          if (!filteredOptions.length) return -1;
+          const next = prev <= 0 ? 0 : prev - 1;
+          return next;
+        });
+      } else if (event.key === "Enter") {
+        if (open && activeIndex >= 0 && filteredOptions[activeIndex]) {
+          event.preventDefault();
+          selectOption(filteredOptions[activeIndex]);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+      } else if (event.key === "Tab") {
+        setOpen(false);
+      }
+      userOnKeyDown == null ? void 0 : userOnKeyDown(event);
+    };
+    const handleInputMouseDown = (event) => {
+      if (disabled) {
+        userOnMouseDown == null ? void 0 : userOnMouseDown(event);
+        return;
+      }
+      setOpen(true);
+      userOnMouseDown == null ? void 0 : userOnMouseDown(event);
+    };
+    const handleChevronMouseDown = (event) => {
+      var _a;
+      event.preventDefault();
+      if (disabled) return;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      setOpen((prev) => !prev);
+    };
+    const handleSingleAnchorMouseDown = (event) => {
+      var _a;
+      if (disabled || isMultiSelectEnabled) return;
+      if (!open) {
+        setOpen(true);
+      }
+      if (selectOnly) {
+        event.preventDefault();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    const handleOpenChange = (nextOpen) => {
+      if (disabled) return;
+      setOpen(nextOpen);
+    };
+    const activeDescendant = open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+    const describedBy = describedByIds.length ? describedByIds.join(" ") : void 0;
+    const selectionSummaryForDisplay = selectionSummary || "";
+    const inputDisplayValue = isMultiSelectEnabled ? inputValue : inputValue || selectionSummaryForDisplay;
+    const comboboxInputProps = {
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      "aria-activedescendant": activeDescendant,
+      "aria-autocomplete": shouldFilter ? "list" : "none",
+      "aria-disabled": disabled || void 0,
+      "aria-describedby": describedBy,
+      "aria-readonly": selectOnly ? "true" : void 0
+    };
+    const listboxAriaProps = isMultiSelectEnabled ? { "aria-multiselectable": "true" } : {};
+    const handleMultiContainerClick = () => {
+      var _a;
+      if (disabled) return;
+      setOpen(true);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const selectedChips = isMultiSelectEnabled && multiSelectedOptions.length > 0 ? multiSelectedOptions.map((option) => /* @__PURE__ */ jsx9(
+      Chip,
+      {
+        label: option.label,
+        size: "small",
+        onRemove: () => selectOption(option),
+        removeLabel: `Remove ${option.label}`,
+        disabled: disabled || option.disabled,
+        "data-slot": "combobox-selected-chip",
+        className: "max-w-full"
+      },
+      option.value
+    )) : null;
+    console.log(inputDisplayValue);
+    return /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx9(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: anchorRef,
+          className: cx7("w-full", wrapperClassName),
+          onMouseDown: isMultiSelectEnabled ? void 0 : handleSingleAnchorMouseDown,
+          children: isMultiSelectEnabled ? /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: cx7(
+                "w-full min-h-[44px] border-2 rounded-md bg-white px-4 py-2 flex items-center gap-3 cursor-text",
+                "border-border-base hover:border-border-primary-base focus-within:border-border-primary-base focus-within:shadow-focus",
+                disabled && "bg-bg-inactive text-fg-inactive cursor-not-allowed border-border-subtle"
+              ),
+              onClick: handleMultiContainerClick,
+              children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
+                  selectedChips,
+                  /* @__PURE__ */ jsx9(
+                    "input",
+                    {
+                      ref: mergedRef,
+                      className: cx7(
+                        "flex-1 basis-[140px] min-w-[120px] border-none bg-transparent outline-none text-base leading-tight py-1 pl-5",
+                        disabled && "cursor-not-allowed text-fg-inactive"
+                      ),
+                      value: inputDisplayValue,
+                      disabled,
+                      readOnly: selectOnly,
+                      autoComplete: "off",
+                      placeholder: multiSelectedOptions.length === 0 ? placeholder : "",
+                      onChange: handleInputChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      onKeyDown: handleKeyDown,
+                      ...comboboxInputProps,
+                      ...restInputProps
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": open ? "Collapse options" : "Expand options",
+                    onMouseDown: handleChevronMouseDown,
+                    className: "flex items-center justify-center rounded-full text-fg-subtle hover:text-fg-primary-base focus-visible:shadow-focus focus-visible:outline-none transition-colors mr-3",
+                    children: /* @__PURE__ */ jsx9(
+                      Chevron,
+                      {
+                        "aria-hidden": "true",
+                        className: cx7(
+                          "transition-transform duration-200 rotate-90",
+                          open && "rotate-270"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsx9(
+            Input,
+            {
+              ref: mergedRef,
+              placeholder,
+              value: inputDisplayValue,
+              disabled,
+              readOnly: selectOnly,
+              autoComplete: "off",
+              onChange: handleInputChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              onMouseDown: handleInputMouseDown,
+              endIcon: /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": open ? "Collapse options" : "Expand options",
+                  onMouseDown: handleChevronMouseDown,
+                  className: "flex items-center justify-center rounded-full text-fg-subtle hover:text-fg-primary-base focus-visible:shadow-focus focus-visible:outline-none transition-colors",
+                  children: /* @__PURE__ */ jsx9(
+                    Chevron,
+                    {
+                      "aria-hidden": "true",
+                      className: cx7(
+                        "transition-transform duration-200 rotate-90",
+                        open && "rotate-270"
+                      )
+                    }
+                  )
+                }
+              ),
+              ...comboboxInputProps,
+              ...restInputProps
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx9(
+        PopoverContent,
+        {
+          side: "bottom",
+          align: "start",
+          sideOffset: 4,
+          avoidCollisions: true,
+          forceMount: true,
+          trapFocus: false,
+          disableOutsidePointerEvents: false,
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          className: cx7(
+            "rounded-md border border-bg-base bg-white shadow-lg p-0 mt-1 max-h-60 overflow-auto",
+            contentClassName
+          ),
+          style: { width: contentWidth || void 0 },
+          "data-testid": "combobox-popover",
+          children: /* @__PURE__ */ jsx9(
+            "ul",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-labelledby": labelHTMLForId,
+              className: cx7("py-1", listClassName),
+              ...listboxAriaProps,
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx9(
+                "li",
+                {
+                  role: "presentation",
+                  className: "px-32 py-8 text-sm text-fg-subtle",
+                  children: emptyState
+                }
+              ) : filteredOptions.map((option, index) => {
+                const optionId = `${listboxId}-option-${index}`;
+                const isActive = index === activeIndex;
+                const isSelected = isMultiSelectEnabled ? multiSelectedValues.includes(option.value) : option.value === singleSelectedValue;
+                const mergedClassName = cx7(
+                  MENU_ITEM_STYLES,
+                  isActive && "bg-bg-subtle text-fg-base",
+                  isSelected && "font-medium",
+                  option.disabled && "opacity-50 cursor-not-allowed",
+                  optionClassName,
+                  option.element.props.className
+                );
+                const originalOnClick = option.element.props.onClick;
+                const originalOnMouseDown = option.element.props.onMouseDown;
+                const optionContent = option.element.props.children ?? option.label;
+                const checkboxIndicator = isMultiSelectEnabled && /* @__PURE__ */ jsx9(
+                  "span",
+                  {
+                    "data-slot": "combobox-option-checkbox",
+                    className: "pointer-events-none select-none shrink-0",
+                    children: /* @__PURE__ */ jsx9(
+                      Checkbox,
+                      {
+                        id: `${optionId}-checkbox`,
+                        checked: isSelected,
+                        readOnly: true,
+                        tabIndex: -1,
+                        "aria-hidden": "true",
+                        disabled: option.disabled
+                      }
+                    )
+                  }
+                );
+                return React9.cloneElement(option.element, {
+                  key: option.element.key ?? option.value ?? optionId,
+                  id: optionId,
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  tabIndex: -1,
+                  className: mergedClassName,
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    originalOnMouseDown == null ? void 0 : originalOnMouseDown(event);
+                  },
+                  onClick: (event) => {
+                    originalOnClick == null ? void 0 : originalOnClick(event);
+                    if (event.defaultPrevented) return;
+                    selectOption(option);
+                  },
+                  children: /* @__PURE__ */ jsxs8("span", { className: "flex w-full items-center justify-between gap-8", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "truncate", children: optionContent }),
+                    checkboxIndicator
+                  ] })
+                });
+              })
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+ComboboxRoot.displayName = "Combobox";
+var ComboboxOption = forwardRef5(function ComboboxOption2({ children, label, ...props }, ref) {
+  return /* @__PURE__ */ jsx9("li", { ref, ...props, children: children ?? label });
+});
+ComboboxOption.displayName = OPTION_COMPONENT_NAME;
+ComboboxRoot.Option = ComboboxOption;
+var Option = ComboboxOption;
 export {
+  Checkbox,
+  ComboboxRoot as Combobox,
+  Option as ComboboxOption,
   Feedback,
   Field,
   Input,
   Label,
+  Option,
   Radio,
+  Switch,
   Textarea
 };