@fanvue/ui 1.17.3 → 1.18.1

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -0,0 +1,29 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AccordionPrimitive = require("@radix-ui/react-accordion");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Accordion = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { ref, className: cn.cn("space-y-2", className), ...props }));
+Accordion.displayName = "Accordion";
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.cjs.map

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link Accordion} root component. Extends Radix `Accordion.Root` props. */\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;\n\n/**\n * Root container for an accordion interface. Manages the expand/collapse state\n * and coordinates {@link AccordionItem}, {@link AccordionTrigger}, and {@link AccordionContent}.\n *\n * Built on Radix UI `Accordion`.\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content 1</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Section 2</AccordionTrigger>\n *     <AccordionContent>Content 2</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport const Accordion = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Root ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n));\n\nAccordion.displayName = \"Accordion\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,YAAYA,iBAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA,IAACC,8BAAmB,MAAnB,EAAwB,KAAU,WAAWC,GAAAA,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,CACtF;AAED,UAAU,cAAc;;"}

package/dist/cjs/components/Accordion/AccordionContent.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AccordionPrimitive = require("@radix-ui/react-accordion");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AccordionContent = React__namespace.forwardRef(({ className, children, noPadding, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn.cn(
+      "overflow-hidden",
+      "typography-regular-body-md text-foreground-secondary",
+      "motion-safe:data-[state=closed]:animate-accordion-collapse",
+      "motion-safe:data-[state=open]:animate-accordion-expand",
+      !noPadding && "px-3 pb-3",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 overflow-wrap-anywhere", children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+exports.AccordionContent = AccordionContent;
+//# sourceMappingURL=AccordionContent.cjs.map

package/dist/cjs/components/Accordion/AccordionContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.cjs","sources":["../../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionContent} panel component. */\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Content\n> & {\n  /** Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout. */\n  noPadding?: boolean;\n};\n\n/** Renders the collapsible content panel for an {@link AccordionItem}. Animates open and closed. */\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, noPadding, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden\",\n      \"typography-regular-body-md text-foreground-secondary\",\n      \"motion-safe:data-[state=closed]:animate-accordion-collapse\",\n      \"motion-safe:data-[state=open]:animate-accordion-expand\",\n      !noPadding && \"px-3 pb-3\",\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"min-w-0 overflow-wrap-anywhere\">{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = \"AccordionContent\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,QAC/CC,2BAAAA;AAAAA,EAACC,8BAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,aAAa;AAAA,MACd;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,kCAAkC,SAAA,CAAS;AAAA,EAAA;AAC5D,CACD;AAED,iBAAiB,cAAc;;"}

package/dist/cjs/components/Accordion/AccordionItem.cjs

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AccordionPrimitive = require("@radix-ui/react-accordion");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AccordionItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn.cn(
+      "overflow-hidden rounded-xl bg-surface-container",
+      "border border-neutral-200",
+      className
+    ),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+exports.AccordionItem = AccordionItem;
+//# sourceMappingURL=AccordionItem.cjs.map

package/dist/cjs/components/Accordion/AccordionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.cjs","sources":["../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link AccordionItem} component. */\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;\n\n/** A single collapsible section within an {@link Accordion}. Contains an {@link AccordionTrigger} and {@link AccordionContent}. */\nexport const AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"overflow-hidden rounded-xl bg-surface-container\",\n      \"border border-neutral-200\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nAccordionItem.displayName = \"AccordionItem\";\n"],"names":["React","jsx","AccordionPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,gBAAgBA,iBAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,8BAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;;"}

package/dist/cjs/components/Accordion/AccordionTrigger.cjs

@@ -0,0 +1,55 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AccordionPrimitive = require("@radix-ui/react-accordion");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const ChevronDownIcon = require("../Icons/ChevronDownIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AccordionTrigger = React__namespace.forwardRef(({ className, children, icon, ...props }, ref) => {
+  const showIcon = icon !== null;
+  const iconElement = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, { className: "size-4 shrink-0 text-foreground-secondary" }) : icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn.cn(
+        "flex flex-1 items-center justify-between gap-3",
+        "rounded-xl px-3 py-3",
+        "typography-semibold-body-md text-foreground-default",
+        "cursor-pointer",
+        "motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out",
+        "hover:bg-neutral-100",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180", children: iconElement })
+      ]
+    }
+  ) });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+exports.AccordionTrigger = AccordionTrigger;
+//# sourceMappingURL=AccordionTrigger.cjs.map

package/dist/cjs/components/Accordion/AccordionTrigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-foreground-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-xl px-3 py-3\",\n          \"typography-semibold-body-md text-foreground-default\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-100\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-page\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":["React","ChevronDownIcon","jsx","AccordionPrimitive","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAmBA,iBAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,wCACNC,gBAAAA,iBAAA,EAAgB,WAAU,6CAA4C,IAEvE;AAGJ,SACEC,2BAAAA,IAACC,8BAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAAC,2BAAAA;AAAAA,IAACD,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAWE,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;;"}

package/dist/cjs/components/Autocomplete/Autocomplete.cjs

@@ -0,0 +1,239 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Popover = require("@radix-ui/react-popover");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const ChevronDownIcon = require("../Icons/ChevronDownIcon.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const SpinnerIcon = require("../Icons/SpinnerIcon.cjs");
+const AutocompleteDropdownContent = require("./AutocompleteDropdownContent.cjs");
+const AutocompleteTag = require("./AutocompleteTag.cjs");
+const useAutocomplete = require("./useAutocomplete.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Popover__namespace = /* @__PURE__ */ _interopNamespaceDefault(Popover);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const CONTAINER_HEIGHT = {
+  "48": "min-h-12",
+  "40": "min-h-10",
+  "32": "min-h-8"
+};
+const INPUT_SIZE_CLASSES = {
+  "48": "typography-regular-body-lg",
+  "40": "typography-regular-body-lg",
+  "32": "typography-regular-body-md"
+};
+const PADDING_CLASSES = {
+  "48": "px-4 py-1.5 gap-3",
+  "40": "px-4 py-1 gap-3",
+  "32": "px-3 py-1 gap-2"
+};
+function warnMissingAccessibleName(label, ariaLabel, ariaLabelledBy) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!label && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop."
+      );
+    }
+  }
+}
+const Autocomplete = React__namespace.forwardRef((props, ref) => {
+  const {
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    helperText,
+    size = "48",
+    error = false,
+    errorMessage,
+    placeholder,
+    leftIcon,
+    fullWidth = false,
+    disabled = false,
+    clearable = false,
+    clearAriaLabel = "Clear",
+    className,
+    loading = false,
+    loadingText,
+    emptyText = "No results",
+    renderOption,
+    renderTag
+  } = props;
+  const ac = useAutocomplete.useAutocomplete(props);
+  React__namespace.useImperativeHandle(ref, () => ac.inputRef.current);
+  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);
+  const bottomText = error && errorMessage ? errorMessage : helperText;
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Root, { open: ac.isOpen && !disabled, onOpenChange: ac.handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn.cn("flex flex-col", fullWidth && "w-full", className),
+      "data-autocomplete-root": "",
+      "data-disabled": disabled ? "" : void 0,
+      "data-error": error ? "" : void 0,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: ac.inputId,
+            className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn.cn(
+              "flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors",
+              error ? "border-error-default" : "border-transparent",
+              !disabled && !error && "hover:border-neutral-400",
+              ac.isOpen && !error && !disabled && "border-neutral-400",
+              CONTAINER_HEIGHT[size],
+              PADDING_CLASSES[size],
+              disabled && "opacity-50"
+            ),
+            onClick: ac.handleContainerClick,
+            children: [
+              leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: leftIcon }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [
+                ac.isMulti && ac.selectedMultiOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+                  AutocompleteTag.AutocompleteTag,
+                  {
+                    option: opt,
+                    disabled,
+                    onRemove: () => ac.toggleMulti(opt.value),
+                    renderTag
+                  },
+                  opt.value
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: ac.inputRef,
+                    id: ac.inputId,
+                    role: "combobox",
+                    type: "text",
+                    disabled,
+                    "aria-expanded": ac.isOpen,
+                    "aria-controls": ac.isOpen ? ac.listboxId : void 0,
+                    "aria-activedescendant": ac.activeDescendantId,
+                    "aria-autocomplete": "list",
+                    "aria-describedby": bottomText ? ac.helperTextId : void 0,
+                    "aria-invalid": error || void 0,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledby,
+                    autoComplete: "off",
+                    placeholder: ac.isMulti && ac.selectedMultiValues.length > 0 ? void 0 : placeholder,
+                    value: ac.displayInputValue,
+                    onChange: ac.handleInputChange,
+                    onKeyDown: ac.handleKeyDown,
+                    onFocus: ac.handleFocus,
+                    onBlur: ac.handleBlur,
+                    className: cn.cn(
+                      "min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+                      INPUT_SIZE_CLASSES[size]
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                loading && /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon.SpinnerIcon, { className: "size-4 animate-spin text-foreground-secondary" }),
+                clearable && ac.hasClearableValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    "aria-label": clearAriaLabel,
+                    className: "flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95",
+                    onClick: ac.handleClear,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ChevronDownIcon.ChevronDownIcon,
+                  {
+                    className: cn.cn("size-5 transition-transform", ac.isOpen && "rotate-180")
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Popover__namespace.Content,
+          {
+            sideOffset: 4,
+            collisionPadding: 8,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)" },
+            className: cn.cn(
+              "w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+              "data-[state=closed]:animate-out data-[state=open]:animate-in",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: ac.listRef,
+                id: ac.listboxId,
+                role: "listbox",
+                "aria-label": label ?? ariaLabel ?? "Options",
+                "aria-multiselectable": ac.isMulti || void 0,
+                className: "max-h-60 overflow-y-auto p-1",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AutocompleteDropdownContent.AutocompleteDropdownContent,
+                  {
+                    loading,
+                    loadingText,
+                    emptyText,
+                    visibleOptions: ac.visibleOptions,
+                    listboxId: ac.listboxId,
+                    activeIndex: ac.activeIndex,
+                    isMulti: ac.isMulti,
+                    selectedMultiValues: ac.selectedMultiValues,
+                    selectedValue: ac.selectedValue,
+                    onSelect: ac.handleSelect,
+                    onMouseEnter: ac.setActiveIndex,
+                    renderOption
+                  }
+                )
+              }
+            )
+          }
+        ) }),
+        bottomText && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: ac.helperTextId,
+            className: cn.cn(
+              "typography-regular-body-sm px-2 pt-1 pb-0.5",
+              error ? "text-error-default" : "text-foreground-secondary"
+            ),
+            children: bottomText
+          }
+        )
+      ]
+    }
+  ) });
+});
+Autocomplete.displayName = "Autocomplete";
+exports.Autocomplete = Autocomplete;
+//# sourceMappingURL=Autocomplete.cjs.map

package/dist/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n              error ? \"border-error-default\" : \"border-transparent\",\n              !disabled && !error && \"hover:border-neutral-400\",\n              ac.isOpen && !error && !disabled && \"border-neutral-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-foreground-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={8}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n              \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n              error ? \"text-error-default\" : \"text-foreground-secondary\",\n            )}\n          >\n            {bottomText}\n          </p>\n        )}\n      </div>\n    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","AutocompleteDropdownContent"],"mappings":"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"}

package/dist/cjs/components/Autocomplete/AutocompleteDropdownContent.cjs

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SpinnerIcon = require("../Icons/SpinnerIcon.cjs");
+const AutocompleteOptionItem = require("./AutocompleteOptionItem.cjs");
+function AutocompleteDropdownContent({
+  loading,
+  loadingText,
+  emptyText,
+  visibleOptions,
+  listboxId,
+  activeIndex,
+  isMulti,
+  selectedMultiValues,
+  selectedValue,
+  onSelect,
+  onMouseEnter,
+  renderOption
+}) {
+  if (loading) {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role="status" for live region announcements
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "flex items-center justify-center py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon.SpinnerIcon, { className: "size-5 animate-spin text-foreground-secondary" }),
+        loadingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-md ml-2 text-foreground-secondary", children: loadingText })
+      ] })
+    );
+  }
+  if (visibleOptions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md block px-3 py-4 text-center text-foreground-secondary", children: emptyText });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: visibleOptions.map((option, index) => {
+    const isSelected = isMulti ? selectedMultiValues.includes(option.value) : option.value === selectedValue;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AutocompleteOptionItem.AutocompleteOptionItem,
+      {
+        option,
+        optionId: `${listboxId}-option-${index}`,
+        index,
+        isSelected,
+        isActive: index === activeIndex,
+        onSelect: () => onSelect(option),
+        onMouseEnter: () => onMouseEnter(index),
+        renderOption
+      },
+      option.value
+    );
+  }) });
+}
+exports.AutocompleteDropdownContent = AutocompleteDropdownContent;
+//# sourceMappingURL=AutocompleteDropdownContent.cjs.map

package/dist/cjs/components/Autocomplete/AutocompleteDropdownContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteDropdownContent.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteDropdownContent.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { AutocompleteOptionItem } from \"./AutocompleteOptionItem\";\n\nexport function AutocompleteDropdownContent({\n  loading,\n  loadingText,\n  emptyText,\n  visibleOptions,\n  listboxId,\n  activeIndex,\n  isMulti,\n  selectedMultiValues,\n  selectedValue,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n}: {\n  loading: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  visibleOptions: AutocompleteOption[];\n  listboxId: string;\n  activeIndex: number;\n  isMulti: boolean;\n  selectedMultiValues: string[];\n  selectedValue: string | null;\n  onSelect: (option: AutocompleteOption) => void;\n  onMouseEnter: (index: number) => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n}) {\n  if (loading) {\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate here; using role=\"status\" for live region announcements\n      <div role=\"status\" className=\"flex items-center justify-center py-4\">\n        <SpinnerIcon className=\"size-5 animate-spin text-foreground-secondary\" />\n        {loadingText && (\n          <span className=\"typography-regular-body-md ml-2 text-foreground-secondary\">\n            {loadingText}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  if (visibleOptions.length === 0) {\n    return (\n      <div className=\"typography-regular-body-md block px-3 py-4 text-center text-foreground-secondary\">\n        {emptyText}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      {visibleOptions.map((option, index) => {\n        const isSelected = isMulti\n          ? selectedMultiValues.includes(option.value)\n          : option.value === selectedValue;\n\n        return (\n          <AutocompleteOptionItem\n            key={option.value}\n            option={option}\n            optionId={`${listboxId}-option-${index}`}\n            index={index}\n            isSelected={isSelected}\n            isActive={index === activeIndex}\n            onSelect={() => onSelect(option)}\n            onMouseEnter={() => onMouseEnter(index)}\n            renderOption={renderOption}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"names":["jsxs","jsx","SpinnerIcon","Fragment","AutocompleteOptionItem"],"mappings":";;;;;;AAKO,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAgBG;AACD,MAAI,SAAS;AACX;AAAA;AAAA,MAEEA,2BAAAA,KAAC,OAAA,EAAI,MAAK,UAAS,WAAU,yCAC3B,UAAA;AAAA,QAAAC,2BAAAA,IAACC,YAAAA,aAAA,EAAY,WAAU,gDAAA,CAAgD;AAAA,QACtE,eACCD,2BAAAA,IAAC,QAAA,EAAK,WAAU,6DACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA;AAAA,EAEJ;AAEA,MAAI,eAAe,WAAW,GAAG;AAC/B,WACEA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oFACZ,UAAA,WACH;AAAA,EAEJ;AAEA,SACEA,2BAAAA,IAAAE,WAAAA,UAAA,EACG,UAAA,eAAe,IAAI,CAAC,QAAQ,UAAU;AACrC,UAAM,aAAa,UACf,oBAAoB,SAAS,OAAO,KAAK,IACzC,OAAO,UAAU;AAErB,WACEF,2BAAAA;AAAAA,MAACG,uBAAAA;AAAAA,MAAA;AAAA,QAEC;AAAA,QACA,UAAU,GAAG,SAAS,WAAW,KAAK;AAAA,QACtC;AAAA,QACA;AAAA,QACA,UAAU,UAAU;AAAA,QACpB,UAAU,MAAM,SAAS,MAAM;AAAA,QAC/B,cAAc,MAAM,aAAa,KAAK;AAAA,QACtC;AAAA,MAAA;AAAA,MARK,OAAO;AAAA,IAAA;AAAA,EAWlB,CAAC,EAAA,CACH;AAEJ;;"}

package/dist/cjs/components/Autocomplete/AutocompleteOptionItem.cjs

@@ -0,0 +1,53 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const cn = require("../../utils/cn.cjs");
+const CheckIcon = require("../Icons/CheckIcon.cjs");
+const constants = require("./constants.cjs");
+function AutocompleteOptionItem({
+  option,
+  optionId,
+  index,
+  isSelected,
+  isActive,
+  onSelect,
+  onMouseEnter,
+  renderOption
+}) {
+  const isCreate = option.value.startsWith(constants.CREATE_PREFIX);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: optionId,
+      role: "option",
+      tabIndex: -1,
+      "aria-selected": isSelected,
+      "aria-disabled": option.disabled || void 0,
+      "data-option-index": index,
+      className: cn.cn(
+        "typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none",
+        isActive && "bg-neutral-100",
+        option.disabled && "pointer-events-none opacity-50",
+        isCreate && "italic"
+      ),
+      onMouseEnter,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => {
+        if (!option.disabled) onSelect();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!option.disabled) onSelect();
+        }
+      },
+      children: renderOption ? renderOption(option, { selected: isSelected, active: isActive }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: constants.getLabel(option) }),
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-foreground-default" }) })
+      ] })
+    }
+  );
+}
+exports.AutocompleteOptionItem = AutocompleteOptionItem;
+//# sourceMappingURL=AutocompleteOptionItem.cjs.map

package/dist/cjs/components/Autocomplete/AutocompleteOptionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOptionItem.cjs","sources":["../../../../src/components/Autocomplete/AutocompleteOptionItem.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { CREATE_PREFIX, getLabel } from \"./constants\";\n\nexport function AutocompleteOptionItem({\n  option,\n  optionId,\n  index,\n  isSelected,\n  isActive,\n  onSelect,\n  onMouseEnter,\n  renderOption,\n}: {\n  option: AutocompleteOption;\n  optionId: string;\n  index: number;\n  isSelected: boolean;\n  isActive: boolean;\n  onSelect: () => void;\n  onMouseEnter: () => void;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n}) {\n  const isCreate = option.value.startsWith(CREATE_PREFIX);\n\n  return (\n    <div\n      id={optionId}\n      role=\"option\"\n      tabIndex={-1}\n      aria-selected={isSelected}\n      aria-disabled={option.disabled || undefined}\n      data-option-index={index}\n      className={cn(\n        \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-foreground-default outline-none\",\n        isActive && \"bg-neutral-100\",\n        option.disabled && \"pointer-events-none opacity-50\",\n        isCreate && \"italic\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={() => {\n        if (!option.disabled) onSelect();\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          if (!option.disabled) onSelect();\n        }\n      }}\n    >\n      {renderOption ? (\n        renderOption(option, { selected: isSelected, active: isActive })\n      ) : (\n        <>\n          <span className=\"min-w-0 flex-1 truncate\">{getLabel(option)}</span>\n          {isSelected && (\n            <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n              <CheckIcon className=\"size-4 text-foreground-default\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["CREATE_PREFIX","jsx","cn","jsxs","Fragment","getLabel","CheckIcon"],"mappings":";;;;;;;AAMO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,QAAM,WAAW,OAAO,MAAM,WAAWA,UAAAA,aAAa;AAEtD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,iBAAe,OAAO,YAAY;AAAA,MAClC,qBAAmB;AAAA,MACnB,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,OAAO,YAAY;AAAA,QACnB,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,MACA,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,MACtB,SAAS,MAAM;AACb,YAAI,CAAC,OAAO,SAAU,UAAA;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAA;AACF,cAAI,CAAC,OAAO,SAAU,UAAA;AAAA,QACxB;AAAA,MACF;AAAA,MAEC,UAAA,eACC,aAAa,QAAQ,EAAE,UAAU,YAAY,QAAQ,SAAA,CAAU,IAE/DC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAH,+BAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAI,UAAAA,SAAS,MAAM,GAAE;AAAA,QAC3D,6CACE,QAAA,EAAK,WAAU,4DACd,UAAAJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,WAAU,iCAAA,CAAiC,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/cjs/components/Autocomplete/AutocompleteTag.cjs

@@ -0,0 +1,36 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const constants = require("./constants.cjs");
+function AutocompleteTag({
+  option,
+  disabled,
+  onRemove,
+  renderTag
+}) {
+  if (renderTag) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: renderTag(option, onRemove) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typography-regular-body-sm inline-flex max-w-full items-center gap-1 rounded-md bg-neutral-200 px-2 py-0.5 text-foreground-default", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: constants.getLabel(option) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": `Remove ${constants.getLabel(option)}`,
+        className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-foreground-secondary hover:text-foreground-default active:scale-95",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        disabled,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, { className: "size-3" })
+      }
+    )
+  ] });
+}
+exports.AutocompleteTag = AutocompleteTag;
+//# sourceMappingURL=AutocompleteTag.cjs.map