silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-4H7X5FGX.js → chunk-K2WT7A64.js}

@@ -1,14 +1,146 @@
-import { Popover } from './chunk-ZAX2UJBC.js';
-import { useLinkComponent } from './chunk-MI5QU37D.js';
+import { Popover } from './chunk-JHMUMJF3.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { ActionElement } from './chunk-PG4CZRTU.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
-import { css } from './chunk-OD4DHHZH.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { createContext, use, useMemo, useState, useRef } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { ChevronDown, Check } from 'lucide-react';
 
+// src/components/Tabs/Tabs.recipe.ts
+var tabsRecipe = sva({
+  slots: [
+    "root",
+    "tab",
+    "icon",
+    "label",
+    "labelText",
+    "labelSizer",
+    "endContent"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "stretch",
+      maxW: "full",
+      minW: 0
+    },
+    tab: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      mb: "-1px",
+      px: "3",
+      borderWidth: 0,
+      borderBottomWidth: "emphasized",
+      borderBottomStyle: "solid",
+      borderBottomColor: "transparent",
+      bg: "transparent",
+      color: "fg.muted",
+      cursor: "pointer",
+      fontFamily: "body",
+      fontSize: "md",
+      fontWeight: "normal",
+      lineHeight: "normal",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+      transitionProperty: "color, background-color, border-color",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      _hover: {
+        bg: "bg.subtle"
+      },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    },
+    label: {
+      display: "inline-grid"
+    },
+    labelText: {
+      gridRowStart: 1,
+      gridColumnStart: 1
+    },
+    labelSizer: {
+      gridRowStart: 1,
+      gridColumnStart: 1,
+      visibility: "hidden",
+      pointerEvents: "none",
+      fontWeight: "semibold"
+    },
+    endContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    size: {
+      sm: { tab: { h: "component.sm" } },
+      md: { tab: { h: "component.md" } },
+      lg: { tab: { h: "component.lg" } }
+    },
+    layout: {
+      hug: {},
+      fill: {
+        root: { w: "full" },
+        tab: { flex: 1 }
+      }
+    },
+    isSelected: {
+      true: {
+        tab: {
+          borderBottomColor: "fg",
+          color: "fg",
+          fontWeight: "semibold"
+        }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        tab: {
+          color: "fg.disabled",
+          cursor: "not-allowed",
+          _hover: {
+            bg: "transparent"
+          }
+        }
+      },
+      false: {}
+    },
+    hasDivider: {
+      true: {
+        root: {
+          borderBlockEndWidth: "default",
+          borderBlockEndStyle: "solid",
+          borderBlockEndColor: "border"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    layout: "hug",
+    isSelected: false,
+    isDisabled: false,
+    hasDivider: false
+  }
+});
 var TabsContext = createContext(null);
 TabsContext.displayName = "TabsContext";
 function useTabsContext() {
@@ -18,87 +150,6 @@ function useTabsContext() {
   }
   return context;
 }
-var styles = {
-  root: css({
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "1",
-    mb: "-1px",
-    px: "3",
-    borderWidth: 0,
-    borderBottomWidth: "emphasized",
-    borderBottomStyle: "solid",
-    borderBottomColor: "transparent",
-    bg: "transparent",
-    color: "fg.muted",
-    cursor: "pointer",
-    fontFamily: "body",
-    fontSize: "md",
-    fontWeight: "normal",
-    lineHeight: "normal",
-    textDecoration: "none",
-    whiteSpace: "nowrap",
-    transitionProperty: "color, background-color, border-color",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default",
-    _hover: {
-      bg: "bg.subtle"
-    },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
-    }
-  }),
-  selected: css({
-    borderBottomColor: "fg",
-    color: "fg",
-    fontWeight: "semibold"
-  }),
-  disabled: css({
-    color: "fg.disabled",
-    cursor: "not-allowed",
-    _hover: {
-      bg: "transparent"
-    }
-  }),
-  fill: css({
-    flex: 1
-  }),
-  icon: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }),
-  label: css({
-    display: "inline-grid"
-  }),
-  labelText: css({
-    gridRowStart: 1,
-    gridColumnStart: 1
-  }),
-  labelSizer: css({
-    gridRowStart: 1,
-    gridColumnStart: 1,
-    visibility: "hidden",
-    pointerEvents: "none",
-    fontWeight: "semibold"
-  }),
-  endContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  size: {
-    sm: css({ h: "component.sm" }),
-    md: css({ h: "component.md" }),
-    lg: css({ h: "component.lg" })
-  }
-};
 function Tab({
   as,
   className,
@@ -116,68 +167,41 @@ function Tab({
   value
 }) {
   const context = useTabsContext();
-  const LinkComponent = useLinkComponent(as);
   const isSelected = context.value === value;
   const displayIcon = isSelected && selectedIcon != null ? selectedIcon : icon;
-  const rootClassName = cx(
-    styles.root,
-    styles.size[context.size],
-    isSelected ? styles.selected : void 0,
-    isDisabled ? styles.disabled : void 0,
-    context.layout === "fill" ? styles.fill : void 0,
-    className
-  );
+  const classes = tabsRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected,
+    isDisabled
+  });
+  const rootClassName = cx(classes.tab, className);
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    displayIcon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: displayIcon, size: context.size }) }) : null,
-    /* @__PURE__ */ jsxs("span", { className: styles.label, children: [
-      /* @__PURE__ */ jsx("span", { className: styles.labelText, children: label }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.labelSizer, children: label })
+    displayIcon != null ? /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { icon: displayIcon, size: context.size }) }) : null,
+    /* @__PURE__ */ jsxs("span", { className: classes.label, children: [
+      /* @__PURE__ */ jsx("span", { className: classes.labelText, children: label }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classes.labelSizer, children: label })
     ] }),
-    isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: styles.endContent, children: endContent }) : null
+    isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: classes.endContent, children: endContent }) : null
   ] });
-  if (href != null) {
-    return /* @__PURE__ */ jsx(
-      LinkComponent,
-      {
-        "aria-controls": controls,
-        "aria-disabled": isDisabled || void 0,
-        "aria-selected": isSelected,
-        className: rootClassName,
-        "data-tab-disabled": isDisabled ? "true" : void 0,
-        "data-tab-value": isDisabled ? void 0 : value,
-        "data-testid": dataTestId,
-        href,
-        id,
-        onClick: (event) => {
-          if (isDisabled) {
-            event.preventDefault();
-            return;
-          }
-          context.onChange(value);
-        },
-        ref,
-        role: "tab",
-        style,
-        tabIndex: isSelected && !isDisabled ? 0 : -1,
-        to: LinkComponent === "a" ? void 0 : href,
-        children: content
-      }
-    );
-  }
   return /* @__PURE__ */ jsx(
-    "button",
+    ActionElement,
     {
       "aria-controls": controls,
-      "aria-disabled": isDisabled || void 0,
+      "aria-disabled": href != null && isDisabled ? true : void 0,
       "aria-selected": isSelected,
+      as,
       className: rootClassName,
       "data-tab-disabled": isDisabled ? "true" : void 0,
       "data-tab-value": isDisabled ? void 0 : value,
       "data-testid": dataTestId,
-      disabled: isDisabled,
+      href,
       id,
-      onClick: () => {
+      isDisabled: href == null ? isDisabled : void 0,
+      isLink: href != null,
+      onClick: (event) => {
         if (isDisabled) {
+          event.preventDefault();
           return;
         }
         context.onChange(value);
@@ -192,22 +216,6 @@ function Tab({
   );
 }
 Tab.displayName = "Tab";
-var styles2 = {
-  root: css({
-    display: "flex",
-    alignItems: "stretch",
-    maxW: "full",
-    minW: 0
-  }),
-  fill: css({
-    w: "full"
-  }),
-  divider: css({
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  })
-};
 function Tabs({
   children,
   className,
@@ -225,6 +233,7 @@ function Tabs({
     () => ({ layout, onChange, size, value }),
     [layout, onChange, size, value]
   );
+  const classes = tabsRecipe({ hasDivider, layout });
   const handleKeyDown = (event) => {
     if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
       return;
@@ -257,12 +266,7 @@ function Tabs({
     "div",
     {
       "aria-label": label,
-      className: cx(
-        styles2.root,
-        layout === "fill" ? styles2.fill : void 0,
-        hasDivider ? styles2.divider : void 0,
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       onKeyDown: handleKeyDown,
       ref,
@@ -274,101 +278,74 @@ function Tabs({
   ) });
 }
 Tabs.displayName = "Tabs";
-var styles3 = {
-  trigger: css({
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "1",
-    mb: "-1px",
-    px: "3",
-    borderWidth: 0,
-    borderBottomWidth: "emphasized",
-    borderBottomStyle: "solid",
-    borderBottomColor: "transparent",
-    bg: "transparent",
-    color: "fg.muted",
-    cursor: "pointer",
-    fontFamily: "body",
-    fontSize: "md",
-    fontWeight: "normal",
-    lineHeight: "normal",
-    whiteSpace: "nowrap",
-    _hover: { bg: "bg.subtle" },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
+
+// src/components/Tabs/TabMenu.recipe.ts
+var tabMenuRecipe = sva({
+  slots: ["chevron", "menu", "item", "itemContent", "itemIcon", "check"],
+  base: {
+    chevron: {
+      display: "inline-flex"
+    },
+    menu: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      minW: "40",
+      p: "1"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      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"
+      }
+    },
+    itemContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      minW: 0
+    },
+    itemIcon: {
+      display: "inline-flex",
+      color: "fg.muted"
+    },
+    check: {
+      display: "inline-flex",
+      color: "primary"
     }
-  }),
-  triggerSelected: css({
-    borderBottomColor: "fg",
-    color: "fg",
-    fontWeight: "semibold"
-  }),
-  triggerDisabled: css({
-    color: "fg.disabled",
-    cursor: "not-allowed",
-    _hover: { bg: "transparent" }
-  }),
-  fill: css({ flex: 1 }),
-  size: {
-    sm: css({ h: "component.sm" }),
-    md: css({ h: "component.md" }),
-    lg: css({ h: "component.lg" })
   },
-  chevron: css({
-    display: "inline-flex"
-  }),
-  chevronOpen: css({ transform: "rotate(180deg)" }),
-  menu: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5",
-    minW: "40",
-    p: "1"
-  }),
-  item: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    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"
+  variants: {
+    isOpen: {
+      true: { chevron: { transform: "rotate(180deg)" } },
+      false: {}
+    },
+    isItemSelected: {
+      true: { item: { fontWeight: "medium" } },
+      false: {}
     }
-  }),
-  itemSelected: css({ fontWeight: "medium" }),
-  itemContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0
-  }),
-  itemIcon: css({
-    display: "inline-flex",
-    color: "fg.muted"
-  }),
-  check: css({
-    display: "inline-flex",
-    color: "primary"
-  })
-};
+  },
+  defaultVariants: {
+    isOpen: false,
+    isItemSelected: false
+  }
+});
 function TabMenu({
   className,
   "data-testid": dataTestId,
@@ -385,6 +362,13 @@ function TabMenu({
   const selectedOption = options.find((option) => option.value === context.value);
   const triggerLabel = selectedOption?.label ?? label;
   const hasSelectedOption = selectedOption != null;
+  const triggerClasses = tabsRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected: hasSelectedOption,
+    isDisabled
+  });
+  const classes = tabMenuRecipe({ isOpen });
   const focusMenuItem = (event, nextIndex) => {
     const menu = event.currentTarget.closest('[role="menu"]');
     const items = Array.from(
@@ -430,16 +414,13 @@ function TabMenu({
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      content: /* @__PURE__ */ jsx("div", { className: styles3.menu, children: options.map((option) => {
+      content: /* @__PURE__ */ jsx("div", { className: classes.menu, children: options.map((option) => {
         const isSelected = option.value === context.value;
         return /* @__PURE__ */ jsxs(
           "button",
           {
             "aria-current": isSelected ? "true" : void 0,
-            className: cx(
-              styles3.item,
-              isSelected ? styles3.itemSelected : void 0
-            ),
+            className: tabMenuRecipe({ isItemSelected: isSelected }).item,
             onClick: () => {
               context.onChange(option.value);
               setIsOpen(false);
@@ -448,11 +429,11 @@ function TabMenu({
             role: "menuitem",
             type: "button",
             children: [
-              /* @__PURE__ */ jsxs("span", { className: styles3.itemContent, children: [
-                option.icon != null ? /* @__PURE__ */ jsx("span", { className: styles3.itemIcon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
+              /* @__PURE__ */ jsxs("span", { className: classes.itemContent, children: [
+                option.icon != null ? /* @__PURE__ */ jsx("span", { className: classes.itemIcon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
                 option.label
               ] }),
-              isSelected ? /* @__PURE__ */ jsx("span", { className: styles3.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: Check, size: "sm" }) }) : null
+              isSelected ? /* @__PURE__ */ jsx("span", { className: classes.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: Check, size: "sm" }) }) : null
             ]
           },
           option.value
@@ -470,14 +451,7 @@ function TabMenu({
         {
           "aria-disabled": isDisabled || void 0,
           "aria-selected": hasSelectedOption,
-          className: cx(
-            styles3.trigger,
-            styles3.size[context.size],
-            hasSelectedOption ? styles3.triggerSelected : void 0,
-            isDisabled ? styles3.triggerDisabled : void 0,
-            context.layout === "fill" ? styles3.fill : void 0,
-            className
-          ),
+          className: cx(triggerClasses.tab, className),
           "data-tab-disabled": isDisabled ? "true" : void 0,
           "data-tab-value": hasSelectedOption && !isDisabled ? context.value : void 0,
           "data-testid": dataTestId,
@@ -497,16 +471,7 @@ function TabMenu({
           type: "button",
           children: [
             triggerLabel,
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cx(
-                  styles3.chevron,
-                  isOpen ? styles3.chevronOpen : void 0
-                ),
-                children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" })
-              }
-            )
+            /* @__PURE__ */ jsx("span", { className: classes.chevron, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) })
           ]
         }
       )
@@ -516,5 +481,5 @@ function TabMenu({
 TabMenu.displayName = "TabMenu";
 
 export { Tab, TabMenu, Tabs, TabsContext, useTabsContext };
-//# sourceMappingURL=chunk-4H7X5FGX.js.map
-//# sourceMappingURL=chunk-4H7X5FGX.js.map
+//# sourceMappingURL=chunk-K2WT7A64.js.map
+//# sourceMappingURL=chunk-K2WT7A64.js.map