silver-ui 0.1.0

package/dist/chunk-PBZWX2RJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MetadataList/MetadataListContext.ts","../src/components/MetadataList/MetadataList.tsx","../src/components/MetadataList/MetadataListItem.tsx"],"names":["styles","jsxs","jsx"],"mappings":"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","file":"chunk-PBZWX2RJ.js","sourcesContent":["import {createContext, use} from 'react';\n\nexport interface MetadataListContextValue {\n  labelPosition: 'start' | 'top';\n}\n\nexport const MetadataListContext =\n  createContext<MetadataListContextValue | null>(null);\n\nMetadataListContext.displayName = 'MetadataListContext';\n\nexport function useMetadataList(): MetadataListContextValue | null {\n  return use(MetadataListContext);\n}\n","import {\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Heading} from '../Text';\nimport {MetadataListContext} from './MetadataListContext';\n\nexport type MetadataListLabelPosition = 'start' | 'top';\n\nexport interface MetadataListProps {\n  /**\n   * Metadata items to render inside the list.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Position of item labels relative to their values.\n   * @default 'start'\n   */\n  labelPosition?: MetadataListLabelPosition;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n  /**\n   * Optional title rendered above the list as a heading.\n   */\n  title?: string;\n}\n\nconst styles = {\n  root: css({display: 'flex', flexDirection: 'column'}),\n  title: css({mb: '3'}),\n  dl: css({m: 0, p: 0}),\n  grid: css({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    rowGap: '3',\n    columnGap: '6',\n    alignItems: 'start',\n  }),\n  gridStacked: css({\n    display: 'grid',\n    gridTemplateColumns: '1fr',\n    gap: '3',\n  }),\n} as const;\n\n/**\n * Displays a list of label-value metadata pairs in configurable layouts.\n */\nexport function MetadataList({\n  children,\n  labelPosition = 'start',\n  title,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListProps): React.JSX.Element {\n  const titleId = useId();\n  const contextValue = useMemo(() => ({labelPosition}), [labelPosition]);\n  const dlClassName =\n    labelPosition === 'top' ? styles.gridStacked : styles.grid;\n\n  return (\n    <MetadataListContext value={contextValue}>\n      <div\n        className={cx(styles.root, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        {title != null ? (\n          <Heading className={styles.title} id={titleId} level={5}>\n            {title}\n          </Heading>\n        ) : null}\n        <dl\n          aria-labelledby={title != null ? titleId : undefined}\n          className={cx(styles.dl, dlClassName)}>\n          {children}\n        </dl>\n      </div>\n    </MetadataListContext>\n  );\n}\n\nMetadataList.displayName = 'MetadataList';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useMetadataList} from './MetadataListContext';\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport interface MetadataListItemProps {\n  /**\n   * Value content rendered beside or below the label.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional icon rendered before the label text.\n   */\n  icon?: IconComponent;\n  /**\n   * Descriptive label for this metadata entry.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  label: css({\n    color: 'fg.muted',\n    fontSize: 'md',\n    fontWeight: 'bold',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    m: 0,\n    minH: '6',\n  }),\n  value: css({\n    color: 'fg',\n    fontSize: 'md',\n    m: 0,\n    minH: '6',\n    overflowWrap: 'break-word',\n  }),\n  stacked: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n  }),\n  inline: css({\n    display: 'contents',\n  }),\n} as const;\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport function MetadataListItem({\n  children,\n  icon,\n  label,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListItemProps): React.JSX.Element {\n  const context = useMetadataList();\n\n  if (context == null && process.env.NODE_ENV !== 'production') {\n    throw new Error('MetadataListItem must be rendered inside a MetadataList.');\n  }\n\n  const isStacked = context?.labelPosition === 'top';\n  const labelContent = (\n    <>\n      {icon != null ? <Icon color=\"secondary\" icon={icon} size=\"sm\" /> : null}\n      {label}\n    </>\n  );\n\n  if (isStacked) {\n    return (\n      <div\n        className={cx(styles.stacked, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        <dt className={styles.label}>{labelContent}</dt>\n        <dd className={styles.value}>{children}</dd>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cx(styles.inline, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <dt className={styles.label}>{labelContent}</dt>\n      <dd className={styles.value}>{children}</dd>\n    </div>\n  );\n}\n\nMetadataListItem.displayName = 'MetadataListItem';\n"]}

package/dist/chunk-PDXZDPOY.cjs

@@ -0,0 +1,617 @@
+'use strict';
+
+var chunkQRDRZNCS_cjs = require('./chunk-QRDRZNCS.cjs');
+var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
+var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
+var chunkWSAZHUB3_cjs = require('./chunk-WSAZHUB3.cjs');
+var chunkNILB6Y4Z_cjs = require('./chunk-NILB6Y4Z.cjs');
+var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
+var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  root: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    minW: 0
+  }),
+  icon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    flexShrink: 0,
+    color: "fg.muted"
+  }),
+  text: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    minW: 0
+  }),
+  disabled: chunkAZDWQGAX_cjs.css({ opacity: 0.55 })
+};
+function AutocompleteInputItem({
+  className,
+  "data-testid": dataTestId,
+  description,
+  icon,
+  item,
+  isDisabled = false,
+  ref,
+  style
+}) {
+  if (item.element != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: item.element });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.root,
+        isDisabled ? styles.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon, size: "sm" }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.text, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "inherit", type: "label", children: item.label }),
+          description != null ? /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
+AutocompleteInputItem.displayName = "AutocompleteInputItem";
+var styles2 = {
+  input: chunkAZDWQGAX_cjs.css({
+    display: "block",
+    flex: 1,
+    minW: "15",
+    borderWidth: 0,
+    p: 0,
+    fontFamily: "body",
+    fontSize: "md",
+    lineHeight: "normal",
+    color: "fg",
+    bg: "transparent",
+    outline: "none",
+    _placeholder: { color: "fg.muted" },
+    _disabled: { cursor: "not-allowed" }
+  }),
+  menu: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    maxH: "80",
+    overflowY: "auto",
+    p: "1"
+  }),
+  option: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "2",
+    w: "full",
+    borderWidth: 0,
+    borderRadius: "md",
+    bg: "transparent",
+    color: "fg",
+    cursor: "pointer",
+    fontFamily: "body",
+    textAlign: "start",
+    _hover: { bg: "bg.subtle" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffsetTight"
+    }
+  }),
+  optionHighlighted: chunkAZDWQGAX_cjs.css({ bg: "bg.subtle" }),
+  optionSelected: chunkAZDWQGAX_cjs.css({ fontWeight: "medium" }),
+  optionSize: {
+    sm: chunkAZDWQGAX_cjs.css({ px: "2", py: "1" }),
+    md: chunkAZDWQGAX_cjs.css({ px: "2", py: "2" }),
+    lg: chunkAZDWQGAX_cjs.css({ px: "3", py: "2.5" })
+  },
+  check: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    flexShrink: 0,
+    color: "primary"
+  }),
+  loading: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1",
+    p: "2",
+    color: "fg.muted",
+    "& > svg": {
+      animation: "spin 0.8s linear infinite"
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      "& > svg": { animation: "none" }
+    }
+  }),
+  empty: chunkAZDWQGAX_cjs.css({
+    p: "3",
+    textAlign: "center"
+  })
+};
+function BaseAutocompleteInput({
+  anchorRef,
+  ariaDescribedBy,
+  className,
+  "data-testid": dataTestId,
+  debounceMs = 150,
+  emptySearchResultsText = "No results found",
+  hasAutoFocus = false,
+  hasEntriesOnFocus = false,
+  inputId,
+  isDisabled = false,
+  maxMenuItems = 10,
+  onChange,
+  onKeyDown,
+  onOpenChange,
+  onQueryChange,
+  placeholder = "Search...",
+  ref,
+  renderItem,
+  searchSource,
+  size = "md",
+  style,
+  value
+}) {
+  const generatedId = react.useId();
+  const listboxId = react.useId();
+  const resolvedInputId = inputId ?? generatedId;
+  const inputRef = react.useRef(null);
+  const fallbackAnchorRef = react.useRef(null);
+  const timeoutRef = react.useRef(null);
+  const generationRef = react.useRef(0);
+  const [query, setQuery] = react.useState("");
+  const [results, setResults] = react.useState([]);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [hasSearched, setHasSearched] = react.useState(false);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const pointerActiveRef = react.useRef(false);
+  const selectingRef = react.useRef(false);
+  const setOpen = react.useCallback(
+    (isNextOpen) => {
+      setIsOpen(isNextOpen);
+      onOpenChange?.(isNextOpen);
+      if (!isNextOpen) {
+        searchSource.cancel?.();
+        setHighlightedIndex(-1);
+      }
+    },
+    [onOpenChange, searchSource]
+  );
+  const showMenu = react.useCallback(() => {
+    if (pointerActiveRef.current) {
+      document.addEventListener(
+        "click",
+        () => requestAnimationFrame(() => setOpen(true)),
+        { once: true }
+      );
+    } else {
+      setOpen(true);
+    }
+  }, [setOpen]);
+  const runSearch = react.useCallback(
+    async (nextQuery, kind) => {
+      const generation = ++generationRef.current;
+      searchSource.cancel?.();
+      setIsLoading(true);
+      setHasSearched(true);
+      try {
+        const nextResults = kind === "bootstrap" ? await searchSource.bootstrap() : await searchSource.search(nextQuery);
+        if (generationRef.current !== generation) {
+          return;
+        }
+        const limitedResults = nextResults.slice(0, maxMenuItems);
+        setResults(limitedResults);
+        setHighlightedIndex(limitedResults.length > 0 ? 0 : -1);
+        if (limitedResults.length > 0 || nextQuery !== "") {
+          showMenu();
+        } else {
+          setOpen(false);
+        }
+      } catch {
+        if (generationRef.current === generation) {
+          setResults([]);
+          setHighlightedIndex(-1);
+          setOpen(false);
+        }
+      } finally {
+        if (generationRef.current === generation) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [maxMenuItems, searchSource, setOpen, showMenu]
+  );
+  const updateQuery = react.useCallback(
+    (nextQuery) => {
+      setQuery(nextQuery);
+      onQueryChange?.(nextQuery);
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (nextQuery === "" && !hasEntriesOnFocus) {
+        generationRef.current++;
+        searchSource.cancel?.();
+        setResults([]);
+        setHasSearched(false);
+        setIsLoading(false);
+        setOpen(false);
+        return;
+      }
+      const searchKind = nextQuery === "" ? "bootstrap" : "search";
+      if (debounceMs <= 0) {
+        void runSearch(nextQuery, searchKind);
+        return;
+      }
+      timeoutRef.current = setTimeout(() => {
+        void runSearch(nextQuery, searchKind);
+      }, debounceMs);
+    },
+    [
+      debounceMs,
+      hasEntriesOnFocus,
+      onQueryChange,
+      runSearch,
+      searchSource,
+      setOpen
+    ]
+  );
+  const selectItem = react.useCallback(
+    (item) => {
+      generationRef.current++;
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+      }
+      searchSource.cancel?.();
+      setQuery("");
+      setResults([]);
+      setHasSearched(false);
+      setIsLoading(false);
+      onChange(item);
+      selectingRef.current = true;
+      inputRef.current?.focus();
+      selectingRef.current = false;
+      if (hasEntriesOnFocus) {
+        void runSearch("", "bootstrap");
+      } else {
+        setOpen(false);
+      }
+    },
+    [hasEntriesOnFocus, onChange, runSearch, searchSource, setOpen]
+  );
+  react.useEffect(() => {
+    return () => {
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+      }
+      searchSource.cancel?.();
+    };
+  }, [searchSource]);
+  const menu = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": "Search results",
+      className: styles2.menu,
+      id: listboxId,
+      role: "listbox",
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.loading, role: "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.LoaderCircle, size: "sm" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: "Loading" })
+      ] }) : results.length === 0 && hasSearched ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.empty, children: /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: emptySearchResultsText }) }) : results.map((item, index) => {
+        const isSelected = value?.id === item.id;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            "aria-selected": isSelected,
+            className: chunkSPDVNY2Z_cjs.cx(
+              styles2.option,
+              styles2.optionSize[size],
+              index === highlightedIndex ? styles2.optionHighlighted : void 0,
+              isSelected ? styles2.optionSelected : void 0
+            ),
+            id: `${listboxId}-option-${index}`,
+            onClick: () => selectItem(item),
+            onMouseEnter: () => setHighlightedIndex(index),
+            role: "option",
+            type: "button",
+            children: [
+              renderItem == null ? /* @__PURE__ */ jsxRuntime.jsx(AutocompleteInputItem, { item }) : renderItem(item),
+              isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.check, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "accent", icon: lucideReact.Check, size: "sm" }) }) : null
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "aria-activedescendant": isOpen && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": isOpen,
+        autoComplete: "off",
+        autoFocus: hasAutoFocus,
+        className: chunkSPDVNY2Z_cjs.cx(styles2.input, className),
+        "data-autofocus": hasAutoFocus || void 0,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        id: resolvedInputId,
+        onChange: (event) => updateQuery(event.target.value),
+        onFocus: () => {
+          if (selectingRef.current) {
+            return;
+          }
+          if (hasEntriesOnFocus && query === "" && results.length === 0) {
+            void runSearch("", "bootstrap");
+          } else if (results.length > 0) {
+            showMenu();
+          }
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!isOpen) {
+              if (results.length > 0) {
+                showMenu();
+              } else if (hasEntriesOnFocus) {
+                void runSearch("", "bootstrap");
+              }
+              return;
+            }
+            setHighlightedIndex(
+              (index) => results.length === 0 ? -1 : (index + 1) % results.length
+            );
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHighlightedIndex(
+              (index) => results.length === 0 ? -1 : (index - 1 + results.length) % results.length
+            );
+          } else if (event.key === "Enter" && isOpen && highlightedIndex >= 0 && highlightedIndex < results.length) {
+            event.preventDefault();
+            selectItem(results[highlightedIndex]);
+          } else if (event.key === "Escape" && isOpen) {
+            event.preventDefault();
+            setOpen(false);
+          }
+        },
+        onPointerDown: () => {
+          pointerActiveRef.current = true;
+          document.addEventListener(
+            "click",
+            () => {
+              pointerActiveRef.current = false;
+            },
+            { once: true }
+          );
+        },
+        placeholder,
+        ref: chunk6SHL7FYO_cjs.mergeRefs(ref, inputRef, fallbackAnchorRef),
+        role: "combobox",
+        style,
+        type: "text",
+        value: query
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkWSAZHUB3_cjs.Popover,
+      {
+        anchorRef: anchorRef ?? fallbackAnchorRef,
+        content: menu,
+        hasAutoFocus: false,
+        hasCloseButton: false,
+        isOpen,
+        onOpenChange: setOpen
+      }
+    )
+  ] });
+}
+BaseAutocompleteInput.displayName = "BaseAutocompleteInput";
+var styles3 = {
+  wrapper: chunkAZDWQGAX_cjs.css({
+    cursor: "text",
+    flexWrap: "wrap"
+  }),
+  tag: chunkAZDWQGAX_cjs.css({
+    my: "-1",
+    ms: "-1"
+  }),
+  inputHidden: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    opacity: 0,
+    w: 0,
+    minW: 0,
+    flexBasis: 0
+  }),
+  clearButton: chunkAZDWQGAX_cjs.css({
+    ms: "auto"
+  })
+};
+function AutocompleteInput({
+  className,
+  "data-testid": dataTestId,
+  debounceMs,
+  description,
+  emptySearchResultsText,
+  hasAutoFocus = false,
+  hasClear = true,
+  hasEntriesOnFocus = false,
+  isDisabled = false,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  maxMenuItems,
+  onChange,
+  onOpenChange,
+  onQueryChange,
+  placeholder,
+  ref,
+  renderItem,
+  searchSource,
+  size = "md",
+  startIcon,
+  status,
+  style,
+  value
+}) {
+  const inputId = react.useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const wrapperRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const [isEditing, setIsEditing] = react.useState(false);
+  const showTag = value != null && !isEditing;
+  const fieldStatus = react.useMemo(
+    () => status == null ? void 0 : { ...status, messageID: statusMessageID },
+    [status, statusMessageID]
+  );
+  const necessity = { isOptional, isRequired };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkI6IGTQLG_cjs.Field,
+    {
+      className,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      ref,
+      status: fieldStatus,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: chunkSPDVNY2Z_cjs.cx(
+            chunkI6IGTQLG_cjs.inputRecipe({
+              size,
+              status: status?.type,
+              isDisabled
+            }),
+            styles3.wrapper
+          ),
+          "data-testid": dataTestId,
+          ref: wrapperRef,
+          children: [
+            startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+            showTag ? /* @__PURE__ */ jsxRuntime.jsx(
+              chunkQRDRZNCS_cjs.Tag,
+              {
+                className: styles3.tag,
+                isDisabled,
+                label: value.label,
+                onClick: () => {
+                  setIsEditing(true);
+                  requestAnimationFrame(() => inputRef.current?.focus());
+                },
+                size
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BaseAutocompleteInput,
+              {
+                anchorRef: wrapperRef,
+                ariaDescribedBy: describedBy,
+                className: showTag ? styles3.inputHidden : void 0,
+                debounceMs,
+                emptySearchResultsText,
+                hasAutoFocus,
+                hasEntriesOnFocus,
+                inputId,
+                isDisabled,
+                maxMenuItems,
+                onChange: (item) => {
+                  setIsEditing(false);
+                  onChange(item);
+                },
+                onOpenChange,
+                onQueryChange,
+                placeholder: showTag ? void 0 : placeholder,
+                ref: inputRef,
+                renderItem,
+                searchSource,
+                size,
+                value
+              }
+            ),
+            hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+              chunkNILB6Y4Z_cjs.Button,
+              {
+                className: styles3.clearButton,
+                icon: lucideReact.X,
+                isIconOnly: true,
+                label: `Clear ${label}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setIsEditing(false);
+                  onChange(null);
+                  inputRef.current?.focus();
+                },
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+AutocompleteInput.displayName = "AutocompleteInput";
+
+// src/components/AutocompleteInput/types.ts
+function createStaticSource(items, options) {
+  return {
+    bootstrap: () => items,
+    search(query) {
+      const normalizedQuery = query.trim().toLowerCase();
+      if (normalizedQuery === "") {
+        return items;
+      }
+      return items.filter((item) => {
+        if (item.label.toLowerCase().includes(normalizedQuery)) {
+          return true;
+        }
+        return options?.keywords?.(item).some((keyword) => keyword.toLowerCase().includes(normalizedQuery)) ?? false;
+      });
+    }
+  };
+}
+
+exports.AutocompleteInput = AutocompleteInput;
+exports.AutocompleteInputItem = AutocompleteInputItem;
+exports.BaseAutocompleteInput = BaseAutocompleteInput;
+exports.createStaticSource = createStaticSource;
+//# sourceMappingURL=chunk-PDXZDPOY.cjs.map
+//# sourceMappingURL=chunk-PDXZDPOY.cjs.map