silver-ui 0.1.0

package/dist/chunk-WE3ECIRS.cjs

@@ -0,0 +1,616 @@
+'use strict';
+
+var chunkPDXZDPOY_cjs = require('./chunk-PDXZDPOY.cjs');
+var chunkQRDRZNCS_cjs = require('./chunk-QRDRZNCS.cjs');
+var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
+var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
+var chunk6SPQDYHC_cjs = require('./chunk-6SPQDYHC.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 = {
+  container: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    minW: 0
+  }),
+  fillParent: chunkAZDWQGAX_cjs.css({
+    flex: "1 1 0"
+  }),
+  measureContainer: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    visibility: "hidden",
+    h: 0,
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    pointerEvents: "none"
+  }),
+  measureIndicator: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex"
+  })
+};
+function getAvailableWidth(container, observeParent) {
+  if (observeParent && container.parentElement != null) {
+    const parent = container.parentElement;
+    const parentStyle = window.getComputedStyle(parent);
+    const paddingLeft = Number.parseFloat(parentStyle.paddingLeft) || 0;
+    const paddingRight = Number.parseFloat(parentStyle.paddingRight) || 0;
+    return parent.clientWidth - paddingLeft - paddingRight;
+  }
+  return container.offsetWidth;
+}
+function OverflowList({
+  behavior = "observeSelf",
+  children,
+  className,
+  collapseFrom = "end",
+  gap = 0,
+  minVisibleItems = 0,
+  overflowRenderer,
+  ref,
+  style
+}) {
+  const childArray = react.Children.toArray(children);
+  const itemCount = childArray.length;
+  const observeParent = behavior === "observeParent";
+  const [visibleCount, setVisibleCount] = react.useState(itemCount);
+  const containerRef = react.useRef(null);
+  const measureRef = react.useRef(null);
+  const calculate = react.useCallback(() => {
+    const container = containerRef.current;
+    const measure = measureRef.current;
+    if (container == null || measure == null) {
+      return;
+    }
+    const availableWidth = Math.min(
+      getAvailableWidth(container, observeParent),
+      container.offsetWidth || Number.POSITIVE_INFINITY
+    );
+    const allChildren = Array.from(measure.children);
+    const hasIndicator = allChildren.length > itemCount;
+    const measuredItems = hasIndicator ? allChildren.slice(0, itemCount) : allChildren;
+    const indicatorWidth = hasIndicator ? allChildren[allChildren.length - 1].offsetWidth : 0;
+    if (measuredItems.length === 0) {
+      setVisibleCount(0);
+      return;
+    }
+    const measuredWidths = measuredItems.map((item) => item.offsetWidth);
+    const orderedWidths = collapseFrom === "end" ? measuredWidths : [...measuredWidths].reverse();
+    let totalWidth = 0;
+    let count = 0;
+    for (const itemWidth of orderedWidths) {
+      const gapWidth = count > 0 ? gap : 0;
+      const candidateWidth = totalWidth + itemWidth + gapWidth;
+      const isLastItem = count === orderedWidths.length - 1;
+      const reservedWidth = isLastItem ? 0 : indicatorWidth + (count > 0 || indicatorWidth > 0 ? gap : 0);
+      if (candidateWidth + reservedWidth > availableWidth && count >= minVisibleItems) {
+        break;
+      }
+      totalWidth = candidateWidth;
+      count++;
+    }
+    setVisibleCount(Math.max(Math.min(count, itemCount), minVisibleItems));
+  }, [collapseFrom, gap, itemCount, minVisibleItems, observeParent]);
+  const containerRefCallback = react.useCallback((element) => {
+    containerRef.current = element;
+  }, []);
+  const measureRefCallback = react.useCallback(
+    (element) => {
+      measureRef.current = element;
+      if (element != null) {
+        calculate();
+      }
+    },
+    [calculate]
+  );
+  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+    calculate();
+  }, [calculate]);
+  chunk6SPQDYHC_cjs.useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    if (container == null || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const target = observeParent && container.parentElement != null ? container.parentElement : container;
+    const observer = new ResizeObserver(calculate);
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [calculate, observeParent]);
+  const allItems = childArray.map((child, index) => ({
+    child,
+    index
+  }));
+  const visibleItems = collapseFrom === "end" ? allItems.slice(0, visibleCount) : allItems.slice(itemCount - visibleCount);
+  const overflowItems = collapseFrom === "end" ? allItems.slice(visibleCount) : allItems.slice(0, itemCount - visibleCount);
+  const hasOverflow = visibleCount < itemCount;
+  const measureIndicator = overflowRenderer?.(allItems);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: styles.measureContainer,
+        inert: true,
+        ref: measureRefCallback,
+        style: { gap },
+        children: [
+          childArray,
+          measureIndicator != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.measureIndicator, children: measureIndicator }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkSPDVNY2Z_cjs.cx(
+          styles.container,
+          observeParent && hasOverflow ? styles.fillParent : void 0,
+          className
+        ),
+        ref: chunk6SHL7FYO_cjs.mergeRefs(ref, containerRefCallback),
+        style: { gap, ...style },
+        children: [
+          collapseFrom === "start" && hasOverflow ? overflowRenderer?.(overflowItems) : null,
+          visibleItems.map(({ child }) => child),
+          collapseFrom === "end" && hasOverflow ? overflowRenderer?.(overflowItems) : null
+        ]
+      }
+    )
+  ] });
+}
+var CREATABLE_ID_PREFIX = "__silver_create__";
+var styles2 = {
+  wrapper: chunkAZDWQGAX_cjs.css({
+    cursor: "text",
+    flexWrap: "wrap",
+    alignItems: "center",
+    h: "auto"
+  }),
+  wrapperWithTags: chunkAZDWQGAX_cjs.css({
+    rowGap: "1"
+  }),
+  wrapperWithTagsSize: {
+    sm: chunkAZDWQGAX_cjs.css({ pt: "1px", pb: "0.5" }),
+    md: chunkAZDWQGAX_cjs.css({ py: "1" }),
+    lg: chunkAZDWQGAX_cjs.css({ py: "1" })
+  },
+  layerPopover: chunkAZDWQGAX_cjs.css({
+    w: "anchor-size(width)"
+  }),
+  truncatedWrapper: chunkAZDWQGAX_cjs.css({
+    flexWrap: "nowrap",
+    overflow: "hidden"
+  }),
+  truncatedSize: {
+    sm: chunkAZDWQGAX_cjs.css({ h: "component.sm" }),
+    md: chunkAZDWQGAX_cjs.css({ h: "component.md" }),
+    lg: chunkAZDWQGAX_cjs.css({ h: "component.lg" })
+  },
+  tag: chunkAZDWQGAX_cjs.css({ flexShrink: 0 }),
+  input: chunkAZDWQGAX_cjs.css({
+    minW: "10",
+    flex: "1 1 40px"
+  }),
+  inputHidden: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    opacity: 0,
+    w: 0,
+    minW: 0,
+    flexBasis: 0
+  }),
+  endContent: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0
+  }),
+  overflowText: chunkAZDWQGAX_cjs.css({
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    fontSize: "sm",
+    color: "fg.muted",
+    px: "1"
+  }),
+  liveRegion: chunkAZDWQGAX_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);
+}
+function TagsInput({
+  className,
+  "data-testid": dataTestId,
+  debounceMs,
+  description,
+  emptySearchResultsText,
+  endContent,
+  hasAutoFocus = false,
+  hasClear = false,
+  hasCreate = false,
+  hasEntriesOnFocus = false,
+  handleRef,
+  isDisabled = false,
+  isLabelHidden = false,
+  isReadOnly = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  maxEntries,
+  maxMenuItems,
+  onBlur,
+  onChange,
+  onFocus,
+  onQueryChange,
+  placeholder,
+  ref,
+  renderItem,
+  renderTag,
+  searchSource,
+  size = "md",
+  startIcon,
+  status,
+  style,
+  tagOverflowBehavior = "none",
+  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 inputRef = react.useRef(null);
+  const wrapperRef = react.useRef(null);
+  const [isFocusedWithin, setIsFocusedWithin] = react.useState(false);
+  const [announcement, setAnnouncement] = react.useState("");
+  const isLayerMode = tagOverflowBehavior === "unfocusedLayer";
+  const layer = chunk6SPQDYHC_cjs.useLayer();
+  const layerContentRef = react.useRef(null);
+  const selectedIDsRef = react.useRef(/* @__PURE__ */ new Set());
+  selectedIDsRef.current = new Set(value.map((item) => item.id));
+  const isAtMax = maxEntries != null && value.length >= maxEntries;
+  const isAtMaxRef = react.useRef(false);
+  isAtMaxRef.current = isAtMax;
+  const isTruncated = !isFocusedWithin && tagOverflowBehavior !== "none" && value.length > 0;
+  const placeholderRef = react.useCallback(
+    (element) => {
+      if (isLayerMode) {
+        layer.ref(element);
+      }
+    },
+    [isLayerMode, layer]
+  );
+  const isFocusInTagsInput = react.useCallback(
+    (target) => {
+      if (!(target instanceof Node)) {
+        return false;
+      }
+      if (wrapperRef.current?.contains(target)) {
+        return true;
+      }
+      if (layerContentRef.current?.contains(target)) {
+        return true;
+      }
+      const popoverElement = document.getElementById(layer.id);
+      return popoverElement?.contains(target) ?? false;
+    },
+    [layer.id]
+  );
+  const filteredSource = react.useMemo(
+    () => ({
+      cancel: () => searchSource.cancel?.(),
+      async bootstrap() {
+        const results = await searchSource.bootstrap();
+        return results.filter((item) => !selectedIDsRef.current.has(item.id));
+      },
+      async search(searchQuery) {
+        const results = await searchSource.search(searchQuery);
+        const filteredResults = results.filter(
+          (item) => !selectedIDsRef.current.has(item.id)
+        );
+        if (!hasCreate || searchQuery.trim() === "" || isAtMaxRef.current) {
+          return filteredResults;
+        }
+        const existing = filteredResults.some(
+          (item) => item.label.toLowerCase() === searchQuery.trim().toLowerCase()
+        );
+        if (existing) {
+          return filteredResults;
+        }
+        return [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {
+            id: `${CREATABLE_ID_PREFIX}${searchQuery}`,
+            label: `Create "${searchQuery}"`,
+            auxiliaryData: { value: searchQuery }
+          },
+          ...filteredResults
+        ];
+      }
+    }),
+    [hasCreate, searchSource]
+  );
+  react.useImperativeHandle(
+    handleRef,
+    () => ({
+      blur: () => inputRef.current?.blur(),
+      focus: () => inputRef.current?.focus()
+    }),
+    []
+  );
+  const valueRef = react.useRef(value);
+  valueRef.current = value;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const announce = react.useCallback((message) => {
+    setAnnouncement("");
+    requestAnimationFrame(() => setAnnouncement(message));
+  }, []);
+  const removeItem = react.useCallback(
+    (item) => {
+      onChangeRef.current(
+        valueRef.current.filter((selectedItem) => selectedItem.id !== item.id),
+        { item, type: "remove" }
+      );
+      announce(`Removed ${item.label}`);
+    },
+    [announce]
+  );
+  const handleFocus = react.useCallback(
+    (event) => {
+      const comingFromOutside = !isFocusInTagsInput(event.relatedTarget);
+      setIsFocusedWithin(true);
+      if (isLayerMode) {
+        layer.show();
+      }
+      if (comingFromOutside) {
+        onFocus?.(event);
+      }
+    },
+    [isFocusInTagsInput, isLayerMode, layer, onFocus]
+  );
+  const handleBlur = react.useCallback(
+    (event) => {
+      if (!isFocusInTagsInput(event.relatedTarget)) {
+        setIsFocusedWithin(false);
+        if (isLayerMode) {
+          layer.hide();
+        }
+        onBlur?.(event);
+      }
+    },
+    [isFocusInTagsInput, isLayerMode, layer, onBlur]
+  );
+  const handleWrapperPointerDown = react.useCallback(() => {
+    if (!isDisabled) {
+      if (isLayerMode) {
+        layer.show();
+        setIsFocusedWithin(true);
+      }
+      document.addEventListener(
+        "click",
+        () => requestAnimationFrame(() => inputRef.current?.focus()),
+        { once: true }
+      );
+    }
+  }, [isDisabled, isLayerMode, layer]);
+  const necessity = { isOptional, isRequired };
+  const tokens = value.map((item) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.tag, children: renderTag == null ? /* @__PURE__ */ jsxRuntime.jsx(
+    chunkQRDRZNCS_cjs.Tag,
+    {
+      isDisabled,
+      label: item.label,
+      onRemove: () => removeItem(item),
+      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(
+        chunkI6IGTQLG_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: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_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(
+          chunkPDXZDPOY_cjs.BaseAutocompleteInput,
+          {
+            anchorRef: wrapperRef,
+            ariaDescribedBy: describedBy,
+            className: chunkSPDVNY2Z_cjs.cx(
+              styles2.input,
+              isAtMax || isTruncated ? styles2.inputHidden : void 0
+            ),
+            debounceMs,
+            emptySearchResultsText,
+            hasAutoFocus,
+            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,
+            placeholder: value.length === 0 ? placeholder : void 0,
+            ref: inputRef,
+            renderItem,
+            searchSource: filteredSource,
+            size,
+            value: null
+          }
+        ),
+        endContent != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.endContent, children: endContent }) : null,
+        hasClear && value.length > 0 && !isDisabled && !isReadOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            "aria-label": `Clear ${label}`,
+            className: chunkI6IGTQLG_cjs.inputStyles.clearButton,
+            onClick: (event) => {
+              event.stopPropagation();
+              onChangeRef.current([], {
+                items: valueRef.current,
+                type: "remove-all"
+              });
+              announce("Cleared all tags");
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.X, size: "sm" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", className: styles2.liveRegion, role: "status", children: announcement })
+      ]
+    }
+  ) });
+  const popoverOverrideStyle = {
+    positionArea: void 0,
+    positionTryFallbacks: void 0,
+    top: "anchor(top)",
+    left: "anchor(start)"
+  };
+  const inputContent = isLayerMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkSPDVNY2Z_cjs.cx(
+          chunkI6IGTQLG_cjs.inputRecipe({
+            size,
+            status: status?.type,
+            isDisabled
+          }),
+          styles2.wrapper,
+          isTruncated ? styles2.truncatedWrapper : void 0,
+          styles2.truncatedSize[size]
+        ),
+        onPointerDown: handleWrapperPointerDown,
+        ref: placeholderRef,
+        children: isTruncated ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowList,
+            {
+              behavior: "observeParent",
+              gap: 4,
+              overflowRenderer: (overflowItems) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.overflowText, children: [
+                "+",
+                overflowItems.length,
+                " more"
+              ] }),
+              children: tokens
+            }
+          )
+        ] }) : null
+      }
+    ),
+    layer.render(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-testid": dataTestId == null ? void 0 : `${dataTestId}-layer`,
+          ref: layerContentRef,
+          children: wrapperContent
+        }
+      ),
+      {
+        alignment: "start",
+        className: styles2.layerPopover,
+        placement: "below",
+        style: popoverOverrideStyle
+      }
+    )
+  ] }) : wrapperContent;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkI6IGTQLG_cjs.Field,
+    {
+      className,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      ref,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      style,
+      children: inputContent
+    }
+  );
+}
+TagsInput.displayName = "TagsInput";
+
+exports.TagsInput = TagsInput;
+//# sourceMappingURL=chunk-WE3ECIRS.cjs.map
+//# sourceMappingURL=chunk-WE3ECIRS.cjs.map