@fanvue/ui 1.17.3 → 1.18.1

package/dist/components/Autocomplete/Autocomplete.mjs

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { SpinnerIcon } from "../Icons/SpinnerIcon.mjs";
+import { AutocompleteDropdownContent } from "./AutocompleteDropdownContent.mjs";
+import { AutocompleteTag } from "./AutocompleteTag.mjs";
+import { useAutocomplete } from "./useAutocomplete.mjs";
+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.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(props);
+  React.useImperativeHandle(ref, () => ac.inputRef.current);
+  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);
+  const bottomText = error && errorMessage ? errorMessage : helperText;
+  return /* @__PURE__ */ jsx(Popover.Root, { open: ac.isOpen && !disabled, onOpenChange: ac.handleOpenChange, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", fullWidth && "w-full", className),
+      "data-autocomplete-root": "",
+      "data-disabled": disabled ? "" : void 0,
+      "data-error": error ? "" : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: ac.inputId,
+            className: "typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: leftIcon }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [
+                ac.isMulti && ac.selectedMultiOptions.map((opt) => /* @__PURE__ */ jsx(
+                  AutocompleteTag,
+                  {
+                    option: opt,
+                    disabled,
+                    onRemove: () => ac.toggleMulti(opt.value),
+                    renderTag
+                  },
+                  opt.value
+                )),
+                /* @__PURE__ */ 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(
+                      "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__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                loading && /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin text-foreground-secondary" }),
+                clearable && ac.hasClearableValue && !disabled && /* @__PURE__ */ 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__ */ jsx(CloseIcon, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary", children: /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn("size-5 transition-transform", ac.isOpen && "rotate-180")
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            sideOffset: 4,
+            collisionPadding: 8,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)" },
+            className: 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__ */ 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__ */ jsx(
+                  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__ */ jsx(
+          "p",
+          {
+            id: ac.helperTextId,
+            className: cn(
+              "typography-regular-body-sm px-2 pt-1 pb-0.5",
+              error ? "text-error-default" : "text-foreground-secondary"
+            ),
+            children: bottomText
+          }
+        )
+      ]
+    }
+  ) });
+});
+Autocomplete.displayName = "Autocomplete";
+export {
+  Autocomplete
+};
+//# sourceMappingURL=Autocomplete.mjs.map

package/dist/components/Autocomplete/Autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.mjs","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":[],"mappings":"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"}

package/dist/components/Autocomplete/AutocompleteDropdownContent.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { SpinnerIcon } from "../Icons/SpinnerIcon.mjs";
+import { AutocompleteOptionItem } from "./AutocompleteOptionItem.mjs";
+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__ */ jsxs("div", { role: "status", className: "flex items-center justify-center py-4", children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, { className: "size-5 animate-spin text-foreground-secondary" }),
+        loadingText && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-md ml-2 text-foreground-secondary", children: loadingText })
+      ] })
+    );
+  }
+  if (visibleOptions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md block px-3 py-4 text-center text-foreground-secondary", children: emptyText });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: visibleOptions.map((option, index) => {
+    const isSelected = isMulti ? selectedMultiValues.includes(option.value) : option.value === selectedValue;
+    return /* @__PURE__ */ jsx(
+      AutocompleteOptionItem,
+      {
+        option,
+        optionId: `${listboxId}-option-${index}`,
+        index,
+        isSelected,
+        isActive: index === activeIndex,
+        onSelect: () => onSelect(option),
+        onMouseEnter: () => onMouseEnter(index),
+        renderOption
+      },
+      option.value
+    );
+  }) });
+}
+export {
+  AutocompleteDropdownContent
+};
+//# sourceMappingURL=AutocompleteDropdownContent.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteDropdownContent.mjs","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":[],"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,MAEE,qBAAC,OAAA,EAAI,MAAK,UAAS,WAAU,yCAC3B,UAAA;AAAA,QAAA,oBAAC,aAAA,EAAY,WAAU,gDAAA,CAAgD;AAAA,QACtE,eACC,oBAAC,QAAA,EAAK,WAAU,6DACb,UAAA,YAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA;AAAA,EAEJ;AAEA,MAAI,eAAe,WAAW,GAAG;AAC/B,WACE,oBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA,WACH;AAAA,EAEJ;AAEA,SACE,oBAAA,UAAA,EACG,UAAA,eAAe,IAAI,CAAC,QAAQ,UAAU;AACrC,UAAM,aAAa,UACf,oBAAoB,SAAS,OAAO,KAAK,IACzC,OAAO,UAAU;AAErB,WACE;AAAA,MAAC;AAAA,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/components/Autocomplete/AutocompleteOptionItem.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+import { CREATE_PREFIX, getLabel } from "./constants.mjs";
+function AutocompleteOptionItem({
+  option,
+  optionId,
+  index,
+  isSelected,
+  isActive,
+  onSelect,
+  onMouseEnter,
+  renderOption
+}) {
+  const isCreate = option.value.startsWith(CREATE_PREFIX);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: optionId,
+      role: "option",
+      tabIndex: -1,
+      "aria-selected": isSelected,
+      "aria-disabled": option.disabled || void 0,
+      "data-option-index": index,
+      className: 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: getLabel(option) }),
+        isSelected && /* @__PURE__ */ jsx("span", { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-foreground-default" }) })
+      ] })
+    }
+  );
+}
+export {
+  AutocompleteOptionItem
+};
+//# sourceMappingURL=AutocompleteOptionItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOptionItem.mjs","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":[],"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,WAAW,aAAa;AAEtD,SACE;AAAA,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,WAAW;AAAA,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/D,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2BAA2B,UAAA,SAAS,MAAM,GAAE;AAAA,QAC3D,kCACE,QAAA,EAAK,WAAU,4DACd,UAAA,oBAAC,WAAA,EAAU,WAAU,iCAAA,CAAiC,EAAA,CACxD;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Autocomplete/AutocompleteTag.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { getLabel } from "./constants.mjs";
+function AutocompleteTag({
+  option,
+  disabled,
+  onRemove,
+  renderTag
+}) {
+  if (renderTag) {
+    return /* @__PURE__ */ jsx("span", { children: renderTag(option, onRemove) });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate", children: getLabel(option) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": `Remove ${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__ */ jsx(CloseIcon, { className: "size-3" })
+      }
+    )
+  ] });
+}
+export {
+  AutocompleteTag
+};
+//# sourceMappingURL=AutocompleteTag.mjs.map

package/dist/components/Autocomplete/AutocompleteTag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTag.mjs","sources":["../../../src/components/Autocomplete/AutocompleteTag.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport type { AutocompleteOption } from \"./Autocomplete\";\nimport { getLabel } from \"./constants\";\n\nexport function AutocompleteTag({\n  option,\n  disabled,\n  onRemove,\n  renderTag,\n}: {\n  option: AutocompleteOption;\n  disabled: boolean;\n  onRemove: () => void;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n}) {\n  if (renderTag) {\n    return <span>{renderTag(option, onRemove)}</span>;\n  }\n\n  return (\n    <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\">\n      <span className=\"truncate\">{getLabel(option)}</span>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={`Remove ${getLabel(option)}`}\n        className=\"flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm text-foreground-secondary hover:text-foreground-default active:scale-95\"\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        disabled={disabled}\n      >\n        <CloseIcon className=\"size-3\" />\n      </button>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WAAO,oBAAC,QAAA,EAAM,UAAA,UAAU,QAAQ,QAAQ,GAAE;AAAA,EAC5C;AAEA,SACE,qBAAC,QAAA,EAAK,WAAU,sIACd,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,SAAS,MAAM,GAAE;AAAA,IAC7C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAY,UAAU,SAAS,MAAM,CAAC;AAAA,QACtC,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAA;AAAA,QACF;AAAA,QACA;AAAA,QAEA,UAAA,oBAAC,WAAA,EAAU,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACF;AAEJ;"}

package/dist/components/Autocomplete/constants.mjs

@@ -0,0 +1,15 @@
+"use client";
+const CREATE_PREFIX = "__create__";
+function defaultFilter(option, query) {
+  const label = option.label ?? option.value;
+  return label.toLowerCase().includes(query.toLowerCase());
+}
+function getLabel(option) {
+  return option.label ?? option.value;
+}
+export {
+  CREATE_PREFIX,
+  defaultFilter,
+  getLabel
+};
+//# sourceMappingURL=constants.mjs.map

package/dist/components/Autocomplete/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../../src/components/Autocomplete/constants.ts"],"sourcesContent":["import type { AutocompleteOption } from \"./Autocomplete\";\n\nexport const CREATE_PREFIX = \"__create__\";\n\nexport function defaultFilter(option: AutocompleteOption, query: string): boolean {\n  const label = option.label ?? option.value;\n  return label.toLowerCase().includes(query.toLowerCase());\n}\n\nexport function getLabel(option: AutocompleteOption): string {\n  return option.label ?? option.value;\n}\n"],"names":[],"mappings":";AAEO,MAAM,gBAAgB;AAEtB,SAAS,cAAc,QAA4B,OAAwB;AAChF,QAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,SAAO,MAAM,YAAA,EAAc,SAAS,MAAM,aAAa;AACzD;AAEO,SAAS,SAAS,QAAoC;AAC3D,SAAO,OAAO,SAAS,OAAO;AAChC;"}