silver-ui 0.4.0 → 0.6.0

package/dist/chunk-LLSWAAFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"chunk-LLSWAAFH.js","sourcesContent":["import {ChevronLeft, ChevronRight} from 'lucide-react';\nimport type {CSSProperties, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {Button} from 'components/Button';\nimport type {ButtonSize} from 'components/Button';\nimport {Text} from 'components/Text';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport type PaginationVariant = 'pages' | 'count' | 'compact' | 'none';\n\ninterface PaginationBaseProps {\n  /**\n   * Additional CSS class names applied to the navigation root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the navigation root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether another page exists when the total page count is unknown.\n   */\n  hasMore?: boolean;\n  /**\n   * Whether the pagination controls are disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the navigation landmark.\n   * @default 'Pagination'\n   */\n  label?: string;\n  /**\n   * Called when the page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Current page number, starting at 1.\n   */\n  page: number;\n  /**\n   * Number of items per page.\n   * @default 10\n   */\n  pageSize?: number;\n  /**\n   * Ref forwarded to the navigation root.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Number of page buttons to show on each side of the current page.\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * Control size.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the navigation root.\n   */\n  style?: CSSProperties;\n  /**\n   * Display variant.\n   * @default 'pages'\n   */\n  variant?: PaginationVariant;\n}\n\nexport type PaginationProps = PaginationBaseProps &\n  (\n    | {totalItems: number; totalPages?: never}\n    | {totalItems?: never; totalPages: number}\n    | {totalItems?: never; totalPages?: never}\n  );\n\nconst styles = {\n  root: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '4',\n  }),\n  controls: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '1',\n  }),\n  ellipsis: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    color: 'fg.muted',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    userSelect: 'none',\n  }),\n  infoText: css({\n    display: 'flex',\n    alignItems: 'center',\n    whiteSpace: 'nowrap',\n  }),\n  activePage: css({\n    bg: 'bg.hover',\n    fontWeight: 'medium',\n  }),\n} as const;\n\nfunction generatePageRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n): (number | '...')[] {\n  const totalSlots = 5 + 2 * siblingCount;\n\n  if (totalPages <= totalSlots) {\n    return Array.from({length: totalPages}, (_, index) => index + 1);\n  }\n\n  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n  const showLeftEllipsis = leftSiblingIndex > 2;\n  const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRange = 3 + 2 * siblingCount;\n    return [\n      ...Array.from({length: leftRange}, (_, index) => index + 1),\n      '...',\n      totalPages,\n    ];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightRange = 3 + 2 * siblingCount;\n    return [\n      1,\n      '...',\n      ...Array.from(\n        {length: rightRange},\n        (_, index) => totalPages - rightRange + index + 1,\n      ),\n    ];\n  }\n\n  return [\n    1,\n    '...',\n    ...Array.from(\n      {length: rightSiblingIndex - leftSiblingIndex + 1},\n      (_, index) => leftSiblingIndex + index,\n    ),\n    '...',\n    totalPages,\n  ];\n}\n\n/**\n * Page navigation controls with multiple display variants\n * (numbered pages, count summary, compact label, or none).\n */\nexport function Pagination({\n  className,\n  'data-testid': dataTestId,\n  hasMore,\n  isDisabled = false,\n  label = 'Pagination',\n  onChange,\n  page: pageFromProps,\n  pageSize: pageSizeFromProps = 10,\n  ref,\n  siblingCount: siblingCountFromProps = 1,\n  size = 'md',\n  style,\n  totalItems,\n  totalPages: totalPagesProp,\n  variant = 'pages',\n}: PaginationProps): React.JSX.Element | null {\n  const siblingCount = Math.max(0, siblingCountFromProps);\n  const pageSize = Math.max(1, pageSizeFromProps);\n  const computedTotalPages =\n    totalPagesProp ??\n    (totalItems != null ? Math.ceil(totalItems / pageSize) : undefined);\n  const page = Math.max(\n    1,\n    computedTotalPages != null\n      ? Math.min(pageFromProps, computedTotalPages)\n      : pageFromProps,\n  );\n  const hasPrevious = page > 1;\n  const hasNext =\n    computedTotalPages != null ? page < computedTotalPages : (hasMore ?? false);\n\n  const pageRange = useMemo(\n    () =>\n      computedTotalPages != null\n        ? generatePageRange(page, computedTotalPages, siblingCount)\n        : [],\n    [page, computedTotalPages, siblingCount],\n  );\n\n  if (totalItems != null && totalItems <= 0) {\n    return null;\n  }\n\n  if (computedTotalPages != null && computedTotalPages <= 0) {\n    return null;\n  }\n\n  const handlePageChange = (newPage: number) => {\n    if (isDisabled) {\n      return;\n    }\n\n    onChange(newPage);\n  };\n\n  const rangeStart = (page - 1) * pageSize + 1;\n  const rangeEnd =\n    totalItems == null\n      ? page * pageSize\n      : Math.min(page * pageSize, totalItems);\n\n  const renderIndicator = () => {\n    switch (variant) {\n      case 'pages': {\n        if (computedTotalPages == null) {\n          return null;\n        }\n\n        return pageRange.map((item, index) => {\n          if (item === '...') {\n            return (\n              <span\n                aria-hidden=\"true\"\n                className={styles.ellipsis}\n                key={`ellipsis-${pageRange[index - 1]}-${pageRange[index + 1]}`}>\n                ...\n              </span>\n            );\n          }\n\n          const isActive = item === page;\n          return (\n            <Button\n              aria-current={isActive ? 'page' : undefined}\n              aria-label={\n                isActive ? `Page ${item}, current page` : `Go to page ${item}`\n              }\n              className={isActive ? styles.activePage : undefined}\n              isDisabled={isDisabled}\n              key={item}\n              label={String(item)}\n              onClick={isActive ? undefined : () => handlePageChange(item)}\n              size={size}\n              variant=\"ghost\"\n            />\n          );\n        });\n      }\n\n      case 'count':\n        return totalItems == null ? null : (\n          <span aria-live=\"polite\" className={styles.infoText}>\n            <Text color=\"primary\" size=\"sm\" type=\"body\">\n              {`${rangeStart}-${rangeEnd} of ${totalItems}`}\n            </Text>\n          </span>\n        );\n\n      case 'compact':\n        return computedTotalPages == null ? null : (\n          <span aria-live=\"polite\" className={styles.infoText}>\n            <Text color=\"primary\" size=\"sm\" type=\"body\">\n              {`Page ${page} of ${computedTotalPages}`}\n            </Text>\n          </span>\n        );\n\n      case 'none':\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <nav\n      aria-label={label}\n      className={cx(styles.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <div className={styles.controls}>\n        <Button\n          icon={ChevronLeft}\n          isDisabled={isDisabled || !hasPrevious}\n          isIconOnly\n          label=\"Go to previous page\"\n          onClick={() => handlePageChange(page - 1)}\n          size={size}\n          variant=\"ghost\"\n        />\n        {renderIndicator()}\n        <Button\n          icon={ChevronRight}\n          isDisabled={isDisabled || !hasNext}\n          isIconOnly\n          label=\"Go to next page\"\n          onClick={() => handlePageChange(page + 1)}\n          size={size}\n          variant=\"ghost\"\n        />\n      </div>\n    </nav>\n  );\n}\n\nPagination.displayName = 'Pagination';\n"]}

package/dist/{chunk-J5IRFGUP.js → chunk-M64WMYYV.js}

@@ -1,19 +1,125 @@
-import { BaseAutocompleteInput } from './chunk-SBOXHIES.js';
-import { Tag } from './chunk-AFI4V7LI.js';
+import { BaseAutocompleteInput } from './chunk-KCI4I42U.js';
+import { Tag } from './chunk-EIJSWHG7.js';
 import { inputStyles, inputRecipe } from './chunk-3M23WX6K.js';
-import { getNecessity, Field } from './chunk-RLOGQBFD.js';
-import { getStatusMessageID, getDescribedBy } from './chunk-WOIWI2UO.js';
-import { Button } from './chunk-2LABTS4P.js';
-import { useLayer, useIsomorphicLayoutEffect } from './chunk-HINS4GY6.js';
+import { getNecessity, Field } from './chunk-SEDUAMDW.js';
+import { getStatusMessageID, getDescribedBy } from './chunk-G6HS52US.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { useLayer, useLatest_default, useIsomorphicLayoutEffect } from './chunk-KEPCKSDE.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { X } from 'lucide-react';
 import { useId, useRef, useState, useCallback, useMemo, useImperativeHandle, Children } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/components/TagsInput/TagsInput.recipe.ts
+var tagsInputRecipe = sva({
+  slots: [
+    "wrapper",
+    "tag",
+    "input",
+    "endContent",
+    "overflowText",
+    "liveRegion",
+    "layerPopover"
+  ],
+  base: {
+    wrapper: {
+      cursor: "text",
+      flexWrap: "wrap",
+      alignItems: "center",
+      h: "auto"
+    },
+    tag: { flexShrink: 0 },
+    input: {
+      minW: "10",
+      flex: "1 1 40px"
+    },
+    endContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0
+    },
+    overflowText: {
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+      fontSize: "sm",
+      color: "fg.muted",
+      px: "1"
+    },
+    liveRegion: {
+      position: "absolute",
+      w: "1px",
+      h: "1px",
+      overflow: "hidden",
+      clip: "rect(0 0 0 0)",
+      whiteSpace: "nowrap"
+    },
+    layerPopover: {
+      w: "anchor-size(width)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {},
+      md: {},
+      lg: {}
+    },
+    // Row gap + vertical padding for wrapped tags. Applied only while not
+    // truncated; the size-keyed padding lives in compoundVariants.
+    hasTags: {
+      true: {},
+      false: {}
+    },
+    // Collapses the wrapper to a single line for the "+N more" presentation.
+    isTruncated: {
+      true: { wrapper: { flexWrap: "nowrap", overflow: "hidden" } },
+      false: {}
+    },
+    // Fixed single-line height. Size-keyed values live in compoundVariants.
+    hasFixedHeight: {
+      true: {},
+      false: {}
+    },
+    // Hides the text input (when at max entries or in the collapsed view).
+    isInputHidden: {
+      true: {
+        input: {
+          position: "absolute",
+          opacity: 0,
+          w: 0,
+          minW: 0,
+          flexBasis: 0
+        }
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    { hasTags: true, isTruncated: false, css: { wrapper: { rowGap: "1" } } },
+    {
+      size: "sm",
+      hasTags: true,
+      isTruncated: false,
+      css: { wrapper: { pt: "0px", pb: "0.5" } }
+    },
+    { size: "md", hasTags: true, isTruncated: false, css: { wrapper: { py: "1" } } },
+    { size: "lg", hasTags: true, isTruncated: false, css: { wrapper: { py: "1" } } },
+    { size: "sm", hasFixedHeight: true, css: { wrapper: { h: "component.sm" } } },
+    { size: "md", hasFixedHeight: true, css: { wrapper: { h: "component.md" } } },
+    { size: "lg", hasFixedHeight: true, css: { wrapper: { h: "component.lg" } } }
+  ],
+  defaultVariants: {
+    size: "md",
+    hasTags: false,
+    isTruncated: false,
+    hasFixedHeight: false,
+    isInputHidden: false
+  }
+});
 var styles = {
   container: css({
     display: "flex",
@@ -39,8 +145,8 @@ var styles = {
     display: "inline-flex"
   })
 };
-function getAvailableWidth(container, observeParent) {
-  if (observeParent && container.parentElement != null) {
+function getAvailableWidth(container, isObservingParent) {
+  if (isObservingParent && container.parentElement != null) {
     const parent = container.parentElement;
     const parentStyle = window.getComputedStyle(parent);
     const paddingLeft = Number.parseFloat(parentStyle.paddingLeft) || 0;
@@ -62,7 +168,7 @@ function OverflowList({
 }) {
   const childArray = Children.toArray(children);
   const itemCount = childArray.length;
-  const observeParent = behavior === "observeParent";
+  const isObservingParent = behavior === "observeParent";
   const [visibleCount, setVisibleCount] = useState(itemCount);
   const containerRef = useRef(null);
   const measureRef = useRef(null);
@@ -73,7 +179,7 @@ function OverflowList({
       return;
     }
     const availableWidth = Math.min(
-      getAvailableWidth(container, observeParent),
+      getAvailableWidth(container, isObservingParent),
       container.offsetWidth || Number.POSITIVE_INFINITY
     );
     const allChildren = Array.from(measure.children);
@@ -100,7 +206,7 @@ function OverflowList({
       count++;
     }
     setVisibleCount(Math.max(Math.min(count, itemCount), minVisibleItems));
-  }, [collapseFrom, gap, itemCount, minVisibleItems, observeParent]);
+  }, [collapseFrom, gap, isObservingParent, itemCount, minVisibleItems]);
   const containerRefCallback = useCallback((element) => {
     containerRef.current = element;
   }, []);
@@ -121,11 +227,11 @@ function OverflowList({
     if (container == null || typeof ResizeObserver === "undefined") {
       return;
     }
-    const target = observeParent && container.parentElement != null ? container.parentElement : container;
+    const target = isObservingParent && container.parentElement != null ? container.parentElement : container;
     const observer = new ResizeObserver(calculate);
     observer.observe(target);
     return () => observer.disconnect();
-  }, [calculate, observeParent]);
+  }, [calculate, isObservingParent]);
   const allItems = childArray.map((child, index) => ({
     child,
     index
@@ -154,7 +260,7 @@ function OverflowList({
       {
         className: cx(
           styles.container,
-          observeParent && hasOverflow ? styles.fillParent : void 0,
+          isObservingParent && hasOverflow ? styles.fillParent : void 0,
           className
         ),
         ref: mergeRefs(ref, containerRefCallback),
@@ -169,66 +275,6 @@ function OverflowList({
   ] });
 }
 var CREATABLE_ID_PREFIX = "__silver_create__";
-var styles2 = {
-  wrapper: css({
-    cursor: "text",
-    flexWrap: "wrap",
-    alignItems: "center",
-    h: "auto"
-  }),
-  wrapperWithTags: css({
-    rowGap: "1"
-  }),
-  wrapperWithTagsSize: {
-    sm: css({ pt: "0px", pb: "0.5" }),
-    md: css({ py: "1" }),
-    lg: css({ py: "1" })
-  },
-  layerPopover: css({
-    w: "anchor-size(width)"
-  }),
-  truncatedWrapper: css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
-  }),
-  truncatedSize: {
-    sm: css({ h: "component.sm" }),
-    md: css({ h: "component.md" }),
-    lg: css({ h: "component.lg" })
-  },
-  tag: css({ flexShrink: 0 }),
-  input: css({
-    minW: "10",
-    flex: "1 1 40px"
-  }),
-  inputHidden: css({
-    position: "absolute",
-    opacity: 0,
-    w: 0,
-    minW: 0,
-    flexBasis: 0
-  }),
-  endContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  overflowText: css({
-    flexShrink: 0,
-    whiteSpace: "nowrap",
-    fontSize: "sm",
-    color: "fg.muted",
-    px: "1"
-  }),
-  liveRegion: css({
-    position: "absolute",
-    w: "1px",
-    h: "1px",
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-    whiteSpace: "nowrap"
-  })
-};
 function isCreatableItem(item) {
   return item.id.startsWith(CREATABLE_ID_PREFIX);
 }
@@ -239,6 +285,7 @@ function TagsInput({
   description,
   emptySearchResultsText,
   endContent,
+  createItem,
   hasAutoFocus = false,
   hasClear = false,
   hasCreate = false,
@@ -282,12 +329,22 @@ function TagsInput({
   const isLayerMode = tagOverflowBehavior === "unfocusedLayer";
   const layer = useLayer();
   const layerContentRef = useRef(null);
-  const selectedIDsRef = useRef(/* @__PURE__ */ new Set());
-  selectedIDsRef.current = new Set(value.map((item) => item.id));
+  const selectedIDsRef = useLatest_default(new Set(value.map((item) => item.id)));
   const isAtMax = maxEntries != null && value.length >= maxEntries;
-  const isAtMaxRef = useRef(false);
-  isAtMaxRef.current = isAtMax;
+  const isAtMaxRef = useLatest_default(isAtMax);
   const isTruncated = !isFocusedWithin && tagOverflowBehavior !== "none" && value.length > 0;
+  const classes = tagsInputRecipe({
+    size,
+    hasTags: value.length > 0,
+    isTruncated,
+    hasFixedHeight: isTruncated,
+    isInputHidden: isAtMax || isTruncated
+  });
+  const placeholderClasses = tagsInputRecipe({
+    size,
+    isTruncated,
+    hasFixedHeight: true
+  });
   const placeholderRef = useCallback(
     (element) => {
       if (isLayerMode) {
@@ -354,10 +411,8 @@ function TagsInput({
     }),
     []
   );
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  const valueRef = useLatest_default(value);
+  const onChangeRef = useLatest_default(onChange);
   const announce = useCallback((message) => {
     setAnnouncement("");
     requestAnimationFrame(() => setAnnouncement(message));
@@ -415,7 +470,7 @@ function TagsInput({
     }
   }, [isDisabled, isFocusInTagsInput, isLayerMode, layer]);
   const necessity = getNecessity(isOptional, isRequired);
-  const tokens = value.map((item) => /* @__PURE__ */ jsx("span", { className: styles2.tag, children: renderTag == null ? /* @__PURE__ */ jsx(
+  const tokens = value.map((item) => /* @__PURE__ */ jsx("span", { className: classes.tag, children: renderTag == null ? /* @__PURE__ */ jsx(
     Tag,
     {
       isDisabled,
@@ -424,126 +479,119 @@ function TagsInput({
       size
     }
   ) : renderTag(item, () => removeItem(item)) }, item.id));
-  const wrapperContent = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "aria-label": label,
-      className: cx(
-        inputRecipe({
-          size,
-          status: status?.type,
-          isDisabled
-        }),
-        styles2.wrapper,
-        value.length > 0 && !isTruncated ? styles2.wrapperWithTags : void 0,
-        value.length > 0 && !isTruncated ? styles2.wrapperWithTagsSize[size] : void 0,
-        isTruncated ? styles2.truncatedWrapper : void 0,
-        isTruncated ? styles2.truncatedSize[size] : void 0
-      ),
-      "data-testid": dataTestId,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onPointerDown: handleWrapperPointerDown,
-      ref: wrapperRef,
-      role: "group",
-      children: [
-        startIcon != null ? /* @__PURE__ */ jsx("span", { className: inputStyles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
-        isTruncated ? /* @__PURE__ */ jsx(
-          OverflowList,
-          {
-            behavior: "observeParent",
-            gap: 4,
-            overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxs("span", { className: styles2.overflowText, children: [
-              "+",
-              overflowItems.length,
-              " more"
-            ] }),
-            children: tokens
-          }
-        ) : tokens,
-        /* @__PURE__ */ jsx(
-          BaseAutocompleteInput,
-          {
-            anchorRef: wrapperRef,
-            ariaDescribedBy: describedBy,
-            className: cx(
-              styles2.input,
-              isAtMax || isTruncated ? styles2.inputHidden : void 0
-            ),
-            debounceMs,
-            emptySearchResultsText,
-            hasAutoFocus,
-            hasEntriesOnFocus,
-            hasReopenOnSelect: hasEntriesOnFocus,
-            inputId,
-            isDisabled: isDisabled || isReadOnly || isAtMax,
-            maxMenuItems,
-            onChange: (item) => {
-              if (item == null) {
-                return;
-              }
-              if (isCreatableItem(item)) {
-                const rawValue = typeof item.auxiliaryData === "object" && item.auxiliaryData != null && "value" in item.auxiliaryData ? String(item.auxiliaryData.value) : item.label;
-                const createdItem = {
-                  ...item,
-                  id: rawValue,
-                  label: rawValue
-                };
-                onChangeRef.current([...valueRef.current, createdItem], {
-                  item: createdItem,
-                  type: "create"
-                });
-                announce(`Added ${rawValue}`);
-                return;
-              }
-              onChangeRef.current([...valueRef.current, item], {
-                item,
-                type: "add"
-              });
-              announce(`Added ${item.label}`);
-            },
-            onKeyDown: (event) => {
-              if (event.key === "Backspace" && event.currentTarget.value === "" && valueRef.current.length > 0) {
-                const item = valueRef.current[valueRef.current.length - 1];
-                removeItem(item);
-              }
-            },
-            onQueryChange: (nextQuery) => {
-              setQueryValue(nextQuery);
-              onQueryChange?.(nextQuery);
-            },
-            placeholder: value.length === 0 ? placeholder : void 0,
-            query: queryValue,
-            ref: inputRef,
-            renderItem,
-            searchSource: filteredSource,
+  const wrapperContent = (
+    /* eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions -- pointerdown delegates to inner input for focus convenience */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": label,
+        className: cx(
+          inputRecipe({
             size,
-            value: null
-          }
+            status: status?.type,
+            isDisabled
+          }),
+          classes.wrapper
         ),
-        isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: styles2.endContent, children: endContent }) : null,
-        hasClear && value.length > 0 && !isDisabled && !isReadOnly ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: X,
-            isIconOnly: true,
-            label: `Clear ${label}`,
-            onClick: (event) => {
-              event.stopPropagation();
-              onChangeRef.current([], {
-                items: valueRef.current,
-                type: "remove-all"
-              });
-              announce("Cleared all tags");
-            },
-            size: "sm",
-            variant: "ghost"
-          }
-        ) : null,
-        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: styles2.liveRegion, role: "status", children: announcement })
-      ]
-    }
-  ) });
+        "data-testid": dataTestId,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onPointerDown: handleWrapperPointerDown,
+        ref: wrapperRef,
+        role: "group",
+        children: [
+          startIcon != null ? /* @__PURE__ */ jsx("span", { className: inputStyles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          isTruncated ? /* @__PURE__ */ jsx(
+            OverflowList,
+            {
+              behavior: "observeParent",
+              gap: 4,
+              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxs("span", { className: classes.overflowText, children: [
+                "+",
+                overflowItems.length,
+                " more"
+              ] }),
+              children: tokens
+            }
+          ) : tokens,
+          /* @__PURE__ */ jsx(
+            BaseAutocompleteInput,
+            {
+              anchorRef: wrapperRef,
+              ariaDescribedBy: describedBy,
+              className: classes.input,
+              debounceMs,
+              emptySearchResultsText,
+              hasAutoFocus,
+              hasEntriesOnFocus,
+              hasReopenOnSelect: hasEntriesOnFocus,
+              inputId,
+              isDisabled: isDisabled || isReadOnly || isAtMax,
+              maxMenuItems,
+              onChange: (item) => {
+                if (item == null) {
+                  return;
+                }
+                if (isCreatableItem(item)) {
+                  const rawValue = typeof item.auxiliaryData === "object" && item.auxiliaryData != null && "value" in item.auxiliaryData ? String(item.auxiliaryData.value) : item.label;
+                  const createdItem = createItem?.(rawValue) ?? // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                  { id: rawValue, label: rawValue };
+                  onChangeRef.current([...valueRef.current, createdItem], {
+                    item: createdItem,
+                    type: "create"
+                  });
+                  announce(`Added ${rawValue}`);
+                  return;
+                }
+                onChangeRef.current([...valueRef.current, item], {
+                  item,
+                  type: "add"
+                });
+                announce(`Added ${item.label}`);
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Backspace" && event.currentTarget.value === "" && valueRef.current.length > 0) {
+                  const item = valueRef.current[valueRef.current.length - 1];
+                  removeItem(item);
+                }
+              },
+              onQueryChange: (nextQuery) => {
+                setQueryValue(nextQuery);
+                onQueryChange?.(nextQuery);
+              },
+              placeholder: value.length === 0 ? placeholder : void 0,
+              query: queryValue,
+              ref: inputRef,
+              renderItem,
+              searchSource: filteredSource,
+              size,
+              value: null
+            }
+          ),
+          isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: classes.endContent, children: endContent }) : null,
+          hasClear && value.length > 0 && !isDisabled && !isReadOnly ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: X,
+              isIconOnly: true,
+              label: `Clear ${label}`,
+              onClick: (event) => {
+                event.stopPropagation();
+                onChangeRef.current([], {
+                  items: valueRef.current,
+                  type: "remove-all"
+                });
+                announce("Cleared all tags");
+              },
+              size: "sm",
+              variant: "ghost"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: classes.liveRegion, role: "status", children: announcement })
+        ]
+      }
+    )
+  );
   const popoverOverrideStyle = {
     positionArea: void 0,
     positionTryFallbacks: void 0,
@@ -560,9 +608,7 @@ function TagsInput({
             status: status?.type,
             isDisabled
           }),
-          styles2.wrapper,
-          isTruncated ? styles2.truncatedWrapper : void 0,
-          styles2.truncatedSize[size]
+          placeholderClasses.wrapper
         ),
         onPointerDown: handleWrapperPointerDown,
         ref: placeholderRef,
@@ -573,7 +619,7 @@ function TagsInput({
             {
               behavior: "observeParent",
               gap: 4,
-              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxs("span", { className: styles2.overflowText, children: [
+              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxs("span", { className: classes.overflowText, children: [
                 "+",
                 overflowItems.length,
                 " more"
@@ -595,7 +641,7 @@ function TagsInput({
       ),
       {
         alignment: "start",
-        className: styles2.layerPopover,
+        className: classes.layerPopover,
         placement: "below",
         style: popoverOverrideStyle
       }
@@ -624,5 +670,5 @@ function TagsInput({
 TagsInput.displayName = "TagsInput";
 
 export { TagsInput };
-//# sourceMappingURL=chunk-J5IRFGUP.js.map
-//# sourceMappingURL=chunk-J5IRFGUP.js.map
+//# sourceMappingURL=chunk-M64WMYYV.js.map
+//# sourceMappingURL=chunk-M64WMYYV.js.map