silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-3ZFEBOXD.cjs → chunk-VV72PGKH.cjs}

@@ -1,21 +1,127 @@
 'use strict';
 
-var chunkQRKRVCA3_cjs = require('./chunk-QRKRVCA3.cjs');
-var chunkU5GTHA44_cjs = require('./chunk-U5GTHA44.cjs');
+var chunkGY2ZZR4Z_cjs = require('./chunk-GY2ZZR4Z.cjs');
+var chunk2RZNX26F_cjs = require('./chunk-2RZNX26F.cjs');
 var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
-var chunkBAPCHFNX_cjs = require('./chunk-BAPCHFNX.cjs');
-var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
-var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
-var chunkU2WVHZ24_cjs = require('./chunk-U2WVHZ24.cjs');
+var chunkFFF57VHO_cjs = require('./chunk-FFF57VHO.cjs');
+var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunkQ4HAXT5C_cjs = require('./chunk-Q4HAXT5C.cjs');
 var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
-var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+// src/components/TagsInput/TagsInput.recipe.ts
+var tagsInputRecipe = chunkZ6RT3WPE_cjs.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: chunkRU6JG3FS_cjs.css({
     display: "flex",
@@ -115,10 +221,10 @@ function OverflowList({
     },
     [calculate]
   );
-  chunkU2WVHZ24_cjs.useIsomorphicLayoutEffect(() => {
+  chunkQ4HAXT5C_cjs.useIsomorphicLayoutEffect(() => {
     calculate();
   }, [calculate]);
-  chunkU2WVHZ24_cjs.useIsomorphicLayoutEffect(() => {
+  chunkQ4HAXT5C_cjs.useIsomorphicLayoutEffect(() => {
     const container = containerRef.current;
     if (container == null || typeof ResizeObserver === "undefined") {
       return;
@@ -171,66 +277,6 @@ function OverflowList({
   ] });
 }
 var CREATABLE_ID_PREFIX = "__silver_create__";
-var styles2 = {
-  wrapper: chunkRU6JG3FS_cjs.css({
-    cursor: "text",
-    flexWrap: "wrap",
-    alignItems: "center",
-    h: "auto"
-  }),
-  wrapperWithTags: chunkRU6JG3FS_cjs.css({
-    rowGap: "1"
-  }),
-  wrapperWithTagsSize: {
-    sm: chunkRU6JG3FS_cjs.css({ pt: "0px", pb: "0.5" }),
-    md: chunkRU6JG3FS_cjs.css({ py: "1" }),
-    lg: chunkRU6JG3FS_cjs.css({ py: "1" })
-  },
-  layerPopover: chunkRU6JG3FS_cjs.css({
-    w: "anchor-size(width)"
-  }),
-  truncatedWrapper: chunkRU6JG3FS_cjs.css({
-    flexWrap: "nowrap",
-    overflow: "hidden"
-  }),
-  truncatedSize: {
-    sm: chunkRU6JG3FS_cjs.css({ h: "component.sm" }),
-    md: chunkRU6JG3FS_cjs.css({ h: "component.md" }),
-    lg: chunkRU6JG3FS_cjs.css({ h: "component.lg" })
-  },
-  tag: chunkRU6JG3FS_cjs.css({ flexShrink: 0 }),
-  input: chunkRU6JG3FS_cjs.css({
-    minW: "10",
-    flex: "1 1 40px"
-  }),
-  inputHidden: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    opacity: 0,
-    w: 0,
-    minW: 0,
-    flexBasis: 0
-  }),
-  endContent: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  overflowText: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0,
-    whiteSpace: "nowrap",
-    fontSize: "sm",
-    color: "fg.muted",
-    px: "1"
-  }),
-  liveRegion: chunkRU6JG3FS_cjs.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);
 }
@@ -241,6 +287,7 @@ function TagsInput({
   description,
   emptySearchResultsText,
   endContent,
+  createItem,
   hasAutoFocus = false,
   hasClear = false,
   hasCreate = false,
@@ -274,22 +321,32 @@ function TagsInput({
 }) {
   const inputId = react.useId();
   const descriptionID = chunkQAO6QMNQ_cjs.isReactNode(description) ? `${inputId}-description` : void 0;
-  const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
-  const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const statusMessageID = chunkXPHXAZCE_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunkXPHXAZCE_cjs.getDescribedBy(descriptionID, statusMessageID);
   const inputRef = react.useRef(null);
   const wrapperRef = react.useRef(null);
   const [isFocusedWithin, setIsFocusedWithin] = react.useState(false);
   const [announcement, setAnnouncement] = react.useState("");
   const [queryValue, setQueryValue] = react.useState("");
   const isLayerMode = tagOverflowBehavior === "unfocusedLayer";
-  const layer = chunkU2WVHZ24_cjs.useLayer();
+  const layer = chunkQ4HAXT5C_cjs.useLayer();
   const layerContentRef = react.useRef(null);
-  const selectedIDsRef = react.useRef(/* @__PURE__ */ new Set());
-  selectedIDsRef.current = new Set(value.map((item) => item.id));
+  const selectedIDsRef = chunkQ4HAXT5C_cjs.useLatest_default(new Set(value.map((item) => item.id)));
   const isAtMax = maxEntries != null && value.length >= maxEntries;
-  const isAtMaxRef = react.useRef(false);
-  isAtMaxRef.current = isAtMax;
+  const isAtMaxRef = chunkQ4HAXT5C_cjs.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 = react.useCallback(
     (element) => {
       if (isLayerMode) {
@@ -356,10 +413,8 @@ function TagsInput({
     }),
     []
   );
-  const valueRef = react.useRef(value);
-  valueRef.current = value;
-  const onChangeRef = react.useRef(onChange);
-  onChangeRef.current = onChange;
+  const valueRef = chunkQ4HAXT5C_cjs.useLatest_default(value);
+  const onChangeRef = chunkQ4HAXT5C_cjs.useLatest_default(onChange);
   const announce = react.useCallback((message) => {
     setAnnouncement("");
     requestAnimationFrame(() => setAnnouncement(message));
@@ -416,9 +471,9 @@ function TagsInput({
       );
     }
   }, [isDisabled, isFocusInTagsInput, isLayerMode, layer]);
-  const necessity = chunkBAPCHFNX_cjs.getNecessity(isOptional, isRequired);
-  const tokens = value.map((item) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.tag, children: renderTag == null ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunkU5GTHA44_cjs.Tag,
+  const necessity = chunkFFF57VHO_cjs.getNecessity(isOptional, isRequired);
+  const tokens = value.map((item) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.tag, children: renderTag == null ? /* @__PURE__ */ jsxRuntime.jsx(
+    chunk2RZNX26F_cjs.Tag,
     {
       isDisabled,
       label: item.label,
@@ -426,126 +481,119 @@ function TagsInput({
       size
     }
   ) : renderTag(item, () => removeItem(item)) }, item.id));
-  const wrapperContent = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "aria-label": label,
-      className: chunkSPDVNY2Z_cjs.cx(
-        chunkVXBVSYPA_cjs.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__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
-        isTruncated ? /* @__PURE__ */ jsxRuntime.jsx(
-          OverflowList,
-          {
-            behavior: "observeParent",
-            gap: 4,
-            overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.overflowText, children: [
-              "+",
-              overflowItems.length,
-              " more"
-            ] }),
-            children: tokens
-          }
-        ) : tokens,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkQRKRVCA3_cjs.BaseAutocompleteInput,
-          {
-            anchorRef: wrapperRef,
-            ariaDescribedBy: describedBy,
-            className: chunkSPDVNY2Z_cjs.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-label": label,
+        className: chunkSPDVNY2Z_cjs.cx(
+          chunkVXBVSYPA_cjs.inputRecipe({
             size,
-            value: null
-          }
+            status: status?.type,
+            isDisabled
+          }),
+          classes.wrapper
         ),
-        chunkQAO6QMNQ_cjs.isReactNode(endContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.endContent, children: endContent }) : null,
-        hasClear && value.length > 0 && !isDisabled && !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBRB52QFV_cjs.Button,
-          {
-            icon: lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          isTruncated ? /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowList,
+            {
+              behavior: "observeParent",
+              gap: 4,
+              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.overflowText, children: [
+                "+",
+                overflowItems.length,
+                " more"
+              ] }),
+              children: tokens
+            }
+          ) : tokens,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkGY2ZZR4Z_cjs.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
+            }
+          ),
+          chunkQAO6QMNQ_cjs.isReactNode(endContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.endContent, children: endContent }) : null,
+          hasClear && value.length > 0 && !isDisabled && !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+            chunk5XMWGK3O_cjs.Button,
+            {
+              icon: lucideReact.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__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: classes.liveRegion, role: "status", children: announcement })
+        ]
+      }
+    )
+  );
   const popoverOverrideStyle = {
     positionArea: void 0,
     positionTryFallbacks: void 0,
@@ -562,20 +610,18 @@ function TagsInput({
             status: status?.type,
             isDisabled
           }),
-          styles2.wrapper,
-          isTruncated ? styles2.truncatedWrapper : void 0,
-          styles2.truncatedSize[size]
+          placeholderClasses.wrapper
         ),
         onPointerDown: handleWrapperPointerDown,
         ref: placeholderRef,
         children: isTruncated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             OverflowList,
             {
               behavior: "observeParent",
               gap: 4,
-              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.overflowText, children: [
+              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classes.overflowText, children: [
                 "+",
                 overflowItems.length,
                 " more"
@@ -597,14 +643,14 @@ function TagsInput({
       ),
       {
         alignment: "start",
-        className: styles2.layerPopover,
+        className: classes.layerPopover,
         placement: "below",
         style: popoverOverrideStyle
       }
     )
   ] }) : wrapperContent;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBAPCHFNX_cjs.Field,
+    chunkFFF57VHO_cjs.Field,
     {
       className,
       description,
@@ -626,5 +672,5 @@ function TagsInput({
 TagsInput.displayName = "TagsInput";
 
 exports.TagsInput = TagsInput;
-//# sourceMappingURL=chunk-3ZFEBOXD.cjs.map
-//# sourceMappingURL=chunk-3ZFEBOXD.cjs.map
+//# sourceMappingURL=chunk-VV72PGKH.cjs.map
+//# sourceMappingURL=chunk-VV72PGKH.cjs.map