silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-F3NATTQG.cjs → chunk-IGJEZLHP.cjs}

@@ -1,152 +1,193 @@
 'use strict';
 
-var chunkSSOAZZNR_cjs = require('./chunk-SSOAZZNR.cjs');
-var chunkPYPXJC35_cjs = require('./chunk-PYPXJC35.cjs');
+var chunkSUWRSJAN_cjs = require('./chunk-SUWRSJAN.cjs');
+var chunkKUXFEAT4_cjs = require('./chunk-KUXFEAT4.cjs');
 var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
-var chunkBAPCHFNX_cjs = require('./chunk-BAPCHFNX.cjs');
-var chunkW3KMDQKP_cjs = require('./chunk-W3KMDQKP.cjs');
-var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
-var chunkKFDHP4WP_cjs = require('./chunk-KFDHP4WP.cjs');
-var chunkQEFE4QBL_cjs = require('./chunk-QEFE4QBL.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
+var chunkFFF57VHO_cjs = require('./chunk-FFF57VHO.cjs');
+var chunkL5JS6P62_cjs = require('./chunk-L5JS6P62.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunkBSI4BQEX_cjs = require('./chunk-BSI4BQEX.cjs');
+var chunk3Z5PF75J_cjs = require('./chunk-3Z5PF75J.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
-var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var styles = {
-  wrapper: chunkRU6JG3FS_cjs.css({
-    cursor: "pointer"
-  }),
-  wrapperDisabled: chunkRU6JG3FS_cjs.css({
-    cursor: "not-allowed"
-  }),
-  trigger: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "2",
-    flex: 1,
-    minW: 0,
-    p: 0,
-    borderWidth: 0,
-    bg: "transparent",
-    color: "inherit",
-    cursor: "pointer",
-    fontFamily: "body",
-    outline: "none",
-    textAlign: "start",
-    _disabled: { cursor: "not-allowed" }
-  }),
-  triggerText: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    minW: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }),
-  placeholder: chunkRU6JG3FS_cjs.css({ color: "fg.muted" }),
-  iconSlot: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0,
-    color: "fg.muted"
-  }),
-  badges: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "1",
-    minW: 0,
-    overflow: "hidden"
-  }),
-  menu: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5",
-    maxH: "80",
-    overflowY: "auto",
-    p: "1"
-  }),
-  search: chunkRU6JG3FS_cjs.css({
-    w: "full",
-    px: "2",
-    py: "1",
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "border.emphasized",
-    borderRadius: "md",
-    fontFamily: "body",
-    outline: "none",
-    _focus: { borderColor: "primary" }
-  }),
-  option: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    w: "full",
-    px: "2",
-    py: "2",
-    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"
+// src/components/MultiSelect/MultiSelect.recipe.ts
+var multiSelectMenuRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: [
+    "menu",
+    "search",
+    "option",
+    "optionContent",
+    "checkbox",
+    "iconSlot",
+    "sectionHeading",
+    "divider"
+  ],
+  base: {
+    menu: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      maxH: "80",
+      overflowY: "auto",
+      p: "1"
     },
-    '&[aria-disabled="true"]': {
-      opacity: 0.55,
-      cursor: "not-allowed",
-      pointerEvents: "none"
+    search: {
+      w: "full",
+      px: "2",
+      py: "1",
+      borderWidth: "default",
+      borderStyle: "solid",
+      borderColor: "border.emphasized",
+      borderRadius: "md",
+      fontFamily: "body",
+      outline: "none",
+      _focus: {
+        borderColor: "primary"
+      }
+    },
+    option: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      w: "full",
+      px: "2",
+      py: "2",
+      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"
+      },
+      '&[aria-disabled="true"]': {
+        opacity: 0.55,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    },
+    optionContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      minW: 0,
+      flex: 1
+    },
+    checkbox: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      w: "5",
+      h: "5",
+      borderWidth: "default",
+      borderStyle: "solid",
+      borderColor: "fg.muted",
+      borderRadius: "sm",
+      bg: "bg",
+      color: "fg.onPrimary"
+    },
+    iconSlot: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0,
+      color: "fg.muted"
+    },
+    sectionHeading: {
+      px: "2",
+      py: "1",
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "sm",
+      fontWeight: "semibold"
+    },
+    divider: {
+      h: "1px",
+      bg: "border",
+      my: "1"
+    }
+  },
+  variants: {
+    isHighlighted: {
+      true: { option: { bg: "bg.subtle" } },
+      false: {}
+    },
+    isSelected: {
+      true: { checkbox: { bg: "primary", borderColor: "primary" } },
+      false: {}
     }
-  }),
-  checkbox: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "5",
-    h: "5",
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "fg.muted",
-    borderRadius: "sm",
-    bg: "bg",
-    color: "fg.onPrimary"
-  }),
-  checkboxSelected: chunkRU6JG3FS_cjs.css({
-    bg: "primary",
-    borderColor: "primary"
-  }),
-  optionHighlighted: chunkRU6JG3FS_cjs.css({ bg: "bg.subtle" }),
-  optionContent: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0,
-    flex: 1
-  }),
-  sectionHeading: chunkRU6JG3FS_cjs.css({
-    px: "2",
-    py: "1",
-    color: "fg.muted",
-    fontFamily: "body",
-    fontSize: "sm",
-    fontWeight: "semibold"
-  }),
-  divider: chunkRU6JG3FS_cjs.css({
-    h: "1px",
-    bg: "border",
-    my: "1"
-  })
-};
+  },
+  defaultVariants: {
+    isHighlighted: false,
+    isSelected: false
+  }
+});
+var multiSelectTriggerRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["wrapper", "trigger", "triggerText", "badges"],
+  base: {
+    wrapper: {
+      cursor: "pointer"
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      flex: 1,
+      minW: 0,
+      p: 0,
+      borderWidth: 0,
+      bg: "transparent",
+      color: "inherit",
+      cursor: "pointer",
+      fontFamily: "body",
+      outline: "none",
+      textAlign: "start",
+      _disabled: {
+        cursor: "not-allowed"
+      }
+    },
+    triggerText: {
+      flex: 1,
+      minW: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    badges: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1",
+      minW: 0,
+      overflow: "hidden"
+    }
+  },
+  variants: {
+    isDisabled: {
+      true: { wrapper: { cursor: "not-allowed" } },
+      false: {}
+    },
+    isPlaceholder: {
+      true: { triggerText: { color: "fg.muted" } },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isDisabled: false,
+    isPlaceholder: false
+  }
+});
 function MultiSelect({
   children,
   className,
@@ -179,12 +220,6 @@ function MultiSelect({
   value
 }) {
   const selectedValues = react.useMemo(() => new Set(value), [value]);
-  const commitChange = react.useCallback(
-    (nextValue) => {
-      onChange(nextValue);
-    },
-    [onChange]
-  );
   const toggleValue = react.useCallback(
     (option) => {
       if (option.isDisabled === true) {
@@ -196,10 +231,10 @@ function MultiSelect({
       } else {
         nextValues.add(option.value);
       }
-      commitChange(Array.from(nextValues));
+      onChange(Array.from(nextValues));
       return true;
     },
-    [commitChange, value]
+    [onChange, value]
   );
   const {
     activeDescendantId,
@@ -223,7 +258,7 @@ function MultiSelect({
     statusMessageID,
     triggerRef,
     visibleSelectableOptions
-  } = chunkSSOAZZNR_cjs.useSelectListbox({
+  } = chunkSUWRSJAN_cjs.useSelectListbox({
     description,
     isDefaultOpen,
     isDisabled,
@@ -245,7 +280,7 @@ function MultiSelect({
   const allSelected = enabledVisibleOptions.length > 0 && enabledVisibleOptions.every((option) => selectedValues.has(option.value));
   const toggleAll = react.useCallback(() => {
     if (allSelected) {
-      commitChange(
+      onChange(
         value.filter(
           (optionValue) => !enabledVisibleOptions.some((option) => option.value === optionValue)
         )
@@ -256,30 +291,35 @@ function MultiSelect({
     for (const option of enabledVisibleOptions) {
       nextValues.add(option.value);
     }
-    commitChange(Array.from(nextValues));
-  }, [allSelected, commitChange, enabledVisibleOptions, value]);
+    onChange(Array.from(nextValues));
+  }, [allSelected, onChange, enabledVisibleOptions, value]);
+  const menuClasses = multiSelectMenuRecipe();
+  const triggerClasses = multiSelectTriggerRecipe({
+    isDisabled: isInteractionDisabled,
+    isPlaceholder: selectedOptions.length === 0
+  });
   const renderTriggerValue = () => {
     if (selectedOptions.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkSPDVNY2Z_cjs.cx(styles.triggerText, styles.placeholder), children: placeholder });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: triggerClasses.triggerText, children: placeholder });
     }
     if (triggerDisplay === "labels") {
       const labels = selectedOptions.map(
         (option) => option.label ?? option.value
       );
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.triggerText, children: labels.join(", ") });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: triggerClasses.triggerText, children: labels.join(", ") });
     }
     if (triggerDisplay === "badges") {
       const visible = selectedOptions.slice(0, maxBadges);
       const overflow = selectedOptions.length - visible.length;
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.badges, children: [
-        visible.map((option) => /* @__PURE__ */ jsxRuntime.jsx(chunkPYPXJC35_cjs.Badge, { label: option.label ?? option.value }, option.value)),
-        overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(chunkQEFE4QBL_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: triggerClasses.badges, children: [
+        visible.map((option) => /* @__PURE__ */ jsxRuntime.jsx(chunkKUXFEAT4_cjs.Badge, { label: option.label ?? option.value }, option.value)),
+        overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(chunk3Z5PF75J_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: [
           "+",
           overflow
         ] }) : null
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.triggerText, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: triggerClasses.triggerText, children: [
       selectedOptions.length,
       " selected"
     ] });
@@ -290,6 +330,7 @@ function MultiSelect({
     }
     const isSelected = selectedValues.has(option.value);
     const isHighlighted = highlightedValue === option.value;
+    const optionClasses = multiSelectMenuRecipe({ isHighlighted, isSelected });
     return (
       // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events -- keyboard navigation is handled by the combobox input, not individual options
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -297,10 +338,7 @@ function MultiSelect({
         {
           "aria-disabled": option.isDisabled ?? void 0,
           "aria-selected": isSelected,
-          className: chunkSPDVNY2Z_cjs.cx(
-            styles.option,
-            isHighlighted ? styles.optionHighlighted : void 0
-          ),
+          className: optionClasses.option,
           "data-value": option.value,
           id: getOptionId(option.value),
           onClick: option.isDisabled ? void 0 : handleOptionClick,
@@ -308,19 +346,9 @@ function MultiSelect({
           role: "option",
           tabIndex: isHighlighted ? 0 : -1,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: chunkSPDVNY2Z_cjs.cx(
-                  styles.checkbox,
-                  isSelected ? styles.checkboxSelected : void 0
-                ),
-                children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.Check, size: "sm" }) : null
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.optionContent, children: children == null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              option.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: optionClasses.checkbox, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.Check, size: "sm" }) : null }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: optionClasses.optionContent, children: children == null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              option.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: optionClasses.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
               option.label
             ] }) : children(option) })
           ]
@@ -329,13 +357,14 @@ function MultiSelect({
       )
     );
   };
-  const optionNodes = chunkSSOAZZNR_cjs.renderSelectListboxOptions({
-    dividerClassName: styles.divider,
+  const optionNodes = chunkSUWRSJAN_cjs.renderSelectListboxOptions({
+    dividerClassName: menuClasses.divider ?? "",
     inputId,
     options,
     renderOption,
-    sectionHeadingClassName: styles.sectionHeading
+    sectionHeadingClassName: menuClasses.sectionHeading ?? ""
   });
+  const selectAllClasses = multiSelectMenuRecipe({ isSelected: allSelected });
   const menu = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -344,7 +373,7 @@ function MultiSelect({
         "aria-autocomplete": "list",
         "aria-controls": listboxId,
         "aria-label": `Search ${label}`,
-        className: styles.search,
+        className: menuClasses.search,
         onChange: (event) => {
           setQuery(event.target.value);
           setHighlightedValue(null);
@@ -360,7 +389,7 @@ function MultiSelect({
       {
         "aria-label": `${label} options`,
         "aria-multiselectable": "true",
-        className: styles.menu,
+        className: menuClasses.menu,
         id: listboxId,
         role: "listbox",
         children: [
@@ -370,23 +399,13 @@ function MultiSelect({
               "div",
               {
                 "aria-selected": allSelected,
-                className: styles.option,
+                className: selectAllClasses.option,
                 onClick: toggleAll,
                 role: "option",
                 tabIndex: -1,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: chunkSPDVNY2Z_cjs.cx(
-                        styles.checkbox,
-                        allSelected ? styles.checkboxSelected : void 0
-                      ),
-                      children: allSelected ? /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.Check, size: "sm" }) : null
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.optionContent, children: selectAllLabel })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: selectAllClasses.checkbox, children: allSelected ? /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.Check, size: "sm" }) : null }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectAllClasses.optionContent, children: selectAllLabel })
                 ]
               }
             )
@@ -407,8 +426,7 @@ function MultiSelect({
             status: status?.type,
             isDisabled
           }),
-          styles.wrapper,
-          isInteractionDisabled ? styles.wrapperDisabled : void 0
+          triggerClasses.wrapper
         ),
         onClick: () => {
           if (!isInteractionDisabled) {
@@ -417,7 +435,7 @@ function MultiSelect({
         },
         ref: triggerRef,
         children: [
-          startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuClasses.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -428,7 +446,7 @@ function MultiSelect({
               "aria-expanded": isOpen,
               "aria-haspopup": "listbox",
               "aria-invalid": status?.type === "error" || void 0,
-              className: styles.trigger,
+              className: triggerClasses.trigger,
               "data-testid": dataTestId,
               disabled: isInteractionDisabled,
               id: inputId,
@@ -439,29 +457,29 @@ function MultiSelect({
               children: renderTriggerValue()
             }
           ),
-          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkKFDHP4WP_cjs.Spinner, { size: "sm" }) : null,
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkBSI4BQEX_cjs.Spinner, { size: "sm" }) : null,
           hasClear && value.length > 0 && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBRB52QFV_cjs.Button,
+            chunk5XMWGK3O_cjs.Button,
             {
               icon: lucideReact.X,
               isIconOnly: true,
               label: `Clear ${label}`,
               onClick: (event) => {
                 event.stopPropagation();
-                commitChange([]);
+                onChange([]);
               },
               size: "sm",
               variant: "ghost"
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: menuClasses.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) })
         ]
       }
     )
   );
-  const necessity = chunkBAPCHFNX_cjs.getNecessity(isOptional, isRequired);
+  const necessity = chunkFFF57VHO_cjs.getNecessity(isOptional, isRequired);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkBAPCHFNX_cjs.Field,
+    chunkFFF57VHO_cjs.Field,
     {
       className,
       description,
@@ -478,7 +496,7 @@ function MultiSelect({
       children: [
         trigger,
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkW3KMDQKP_cjs.Popover,
+          chunkL5JS6P62_cjs.Popover,
           {
             anchorRef: triggerRef,
             content: menu,
@@ -496,5 +514,5 @@ function MultiSelect({
 MultiSelect.displayName = "MultiSelect";
 
 exports.MultiSelect = MultiSelect;
-//# sourceMappingURL=chunk-F3NATTQG.cjs.map
-//# sourceMappingURL=chunk-F3NATTQG.cjs.map
+//# sourceMappingURL=chunk-IGJEZLHP.cjs.map
+//# sourceMappingURL=chunk-IGJEZLHP.cjs.map