silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-L7BOLGF2.cjs → chunk-3VJIUZAY.cjs}

@@ -1,29 +1,52 @@
 'use strict';
 
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.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 react = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var styles = {
-  container: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    h: "full",
-    w: "5"
-  }),
-  line: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    insetInline: 0,
-    m: "auto",
-    w: "1px",
-    h: "calc(100% + 1px)",
-    borderRadius: "xs",
-    bg: "border.emphasized"
-  })
-};
+// src/components/TreeView/TreeView.recipe.ts
+var treeViewRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["root", "header", "list"],
+  base: {
+    root: {
+      position: "relative"
+    },
+    header: {
+      mb: "2"
+    },
+    list: {
+      m: 0,
+      p: 0,
+      listStyleType: "none"
+    }
+  }
+});
+
+// src/components/TreeView/TreeViewBranches.recipe.ts
+var treeViewBranchesRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: ["container", "line"],
+  base: {
+    container: {
+      position: "absolute",
+      h: "full",
+      w: "5"
+    },
+    line: {
+      position: "absolute",
+      insetInline: 0,
+      m: "auto",
+      w: "1px",
+      h: "calc(100% + 1px)",
+      borderRadius: "xs",
+      bg: "border.emphasized"
+    }
+  }
+});
+var styles = treeViewBranchesRecipe();
 var branchOffset = "6px";
 function TreeViewBranches({
   ancestorsIsLast,
@@ -55,150 +78,195 @@ function TreeViewBranches({
   ] });
 }
 TreeViewBranches.displayName = "TreeViewBranches";
-var styles2 = {
-  childGroup: chunkRU6JG3FS_cjs.css({
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  }),
-  content: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flex: 1,
-    minW: 0,
-    flexDirection: "column",
-    textAlign: "start"
-  }),
-  contentWrapper: chunkRU6JG3FS_cjs.css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    overflow: "hidden",
-    px: "2",
-    borderRadius: "md",
-    outline: "none",
-    textAlign: "start"
-  }),
-  density: {
-    balanced: chunkRU6JG3FS_cjs.css({
-      py: "2",
-      fontSize: "sm",
-      lineHeight: "normal"
-    }),
-    compact: chunkRU6JG3FS_cjs.css({
-      py: "1",
-      fontSize: "sm",
-      lineHeight: "normal"
-    }),
-    spacious: chunkRU6JG3FS_cjs.css({
-      py: "3",
-      fontSize: "sm",
+
+// src/components/TreeView/TreeViewItem.recipe.ts
+var treeViewItemRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: [
+    "wrapper",
+    "treeBranches",
+    "rowWrapper",
+    "contentWrapper",
+    "toggleButton",
+    "toggleSpacer",
+    "toggleIcon",
+    "startContent",
+    "content",
+    "invisibleAction",
+    "label",
+    "description",
+    "endContent",
+    "childGroup"
+  ],
+  base: {
+    wrapper: {
+      position: "relative",
+      m: 0,
+      p: 0,
+      w: "full",
+      listStyleType: "none",
+      outline: "none"
+    },
+    treeBranches: {
+      ps: "2"
+    },
+    rowWrapper: {
+      position: "relative"
+    },
+    contentWrapper: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      overflow: "hidden",
+      px: "2",
+      borderRadius: "md",
+      outline: "none",
+      textAlign: "start"
+    },
+    toggleButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      w: "4",
+      h: "4",
+      borderRadius: "sm",
+      color: "fg.muted",
+      cursor: "pointer"
+    },
+    toggleSpacer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      w: "4",
+      h: "4",
+      color: "fg.muted"
+    },
+    toggleIcon: {
+      display: "flex",
+      transitionDuration: "fast",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default"
+    },
+    startContent: {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: 0
+    },
+    content: {
+      display: "flex",
+      flex: 1,
+      minW: 0,
+      flexDirection: "column",
+      textAlign: "start"
+    },
+    invisibleAction: {
+      display: "flex",
+      flex: 1,
+      minW: 0,
+      flexDirection: "column",
+      color: "inherit",
+      cursor: "inherit",
+      font: "inherit",
+      textAlign: "start",
+      textDecoration: "none",
+      outline: "none"
+    },
+    label: {
+      color: "fg"
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "xs",
       lineHeight: "normal"
-    })
-  },
-  description: chunkRU6JG3FS_cjs.css({
-    color: "fg.muted",
-    fontSize: "xs",
-    lineHeight: "normal"
-  }),
-  disabled: chunkRU6JG3FS_cjs.css({
-    cursor: "not-allowed",
-    opacity: 0.5,
-    pointerEvents: "none"
-  }),
-  endContent: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    flexShrink: 0,
-    ml: "auto"
-  }),
-  interactive: chunkRU6JG3FS_cjs.css({
-    cursor: "pointer",
-    transitionDuration: "fast",
-    transitionProperty: "background-color",
-    transitionTimingFunction: "default",
-    _active: {
-      bg: "bg.hover"
     },
-    _hover: {
-      "@media (hover: hover)": {
-        bg: "bg.subtle"
+    endContent: {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: 0,
+      ml: "auto"
+    },
+    childGroup: {
+      m: 0,
+      p: 0,
+      listStyleType: "none"
+    }
+  },
+  variants: {
+    density: {
+      balanced: {
+        contentWrapper: { py: "2", fontSize: "sm", lineHeight: "normal" }
+      },
+      compact: {
+        contentWrapper: { py: "1", fontSize: "sm", lineHeight: "normal" }
+      },
+      spacious: {
+        contentWrapper: { py: "3", fontSize: "sm", lineHeight: "normal" }
       }
+    },
+    isInteractive: {
+      true: {
+        contentWrapper: {
+          cursor: "pointer",
+          transitionDuration: "fast",
+          transitionProperty: "background-color",
+          transitionTimingFunction: "default",
+          _active: {
+            bg: "bg.hover"
+          },
+          _hover: {
+            "@media (hover: hover)": {
+              bg: "bg.subtle"
+            }
+          }
+        }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        contentWrapper: {
+          cursor: "not-allowed",
+          opacity: 0.5,
+          pointerEvents: "none"
+        }
+      },
+      false: {}
+    },
+    isSelected: {
+      true: {
+        contentWrapper: { bg: "bg.selected" }
+      },
+      false: {}
+    },
+    isFocused: {
+      true: {
+        contentWrapper: {
+          outlineWidth: "focus",
+          outlineStyle: "solid",
+          outlineColor: "primary",
+          outlineOffset: "focusOffset"
+        }
+      },
+      false: {}
+    },
+    isExpanded: {
+      true: {
+        toggleIcon: { transform: "rotate(90deg)" }
+      },
+      false: {}
     }
-  }),
-  invisibleAction: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flex: 1,
-    minW: 0,
-    flexDirection: "column",
-    color: "inherit",
-    cursor: "inherit",
-    font: "inherit",
-    textAlign: "start",
-    textDecoration: "none",
-    outline: "none"
-  }),
-  label: chunkRU6JG3FS_cjs.css({
-    color: "fg"
-  }),
-  rowWrapper: chunkRU6JG3FS_cjs.css({
-    position: "relative"
-  }),
-  selected: chunkRU6JG3FS_cjs.css({
-    bg: "bg.selected"
-  }),
-  focused: chunkRU6JG3FS_cjs.css({
-    outlineWidth: "focus",
-    outlineStyle: "solid",
-    outlineColor: "primary",
-    outlineOffset: "focusOffset"
-  }),
-  startContent: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  toggleButton: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "4",
-    h: "4",
-    borderRadius: "sm",
-    color: "fg.muted",
-    cursor: "pointer"
-  }),
-  toggleIcon: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    transitionDuration: "fast",
-    transitionProperty: "transform",
-    transitionTimingFunction: "default"
-  }),
-  toggleIconExpanded: chunkRU6JG3FS_cjs.css({
-    transform: "rotate(90deg)"
-  }),
-  toggleSpacer: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "4",
-    h: "4",
-    color: "fg.muted"
-  }),
-  treeBranches: chunkRU6JG3FS_cjs.css({
-    ps: "2"
-  }),
-  wrapper: chunkRU6JG3FS_cjs.css({
-    position: "relative",
-    m: 0,
-    p: 0,
-    w: "full",
-    listStyleType: "none",
-    outline: "none"
-  })
-};
+  },
+  defaultVariants: {
+    density: "balanced",
+    isInteractive: false,
+    isDisabled: false,
+    isSelected: false,
+    isFocused: false,
+    isExpanded: false
+  }
+});
 function TreeViewItem({
   ariaLabel,
   ancestorsIsLast,
@@ -211,7 +279,6 @@ function TreeViewItem({
   isDisabled = false,
   isExpanded,
   isFocused,
-  isLast: _isLast,
   isSelected = false,
   label,
   nestedLevel,
@@ -230,6 +297,14 @@ function TreeViewItem({
   const actionRef = react.useRef(null);
   const isInteractive = onClick != null || href != null;
   const togglesOnRow = hasChildren && onClick == null && onToggle != null;
+  const styles3 = treeViewItemRecipe({
+    density,
+    isInteractive: isInteractive || togglesOnRow,
+    isDisabled,
+    isSelected,
+    isFocused,
+    isExpanded
+  });
   const textLabel = ariaLabel ?? (typeof label === "string" || typeof label === "number" ? String(label) : id);
   const handleToggle = react.useCallback(
     (event) => {
@@ -286,40 +361,31 @@ function TreeViewItem({
     [isDisabled]
   );
   const labelAndDescription = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.label, id: labelId, children: label }),
-    description == null ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.description, id: descriptionId, children: description })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.label, id: labelId, children: label }),
+    description == null ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.description, id: descriptionId, children: description })
   ] });
-  const toggleIcon = /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: chunkSPDVNY2Z_cjs.cx(
-        styles2.toggleIcon,
-        isExpanded ? styles2.toggleIconExpanded : void 0
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.ChevronRight, size: "sm" })
-    }
-  );
+  const toggleIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.toggleIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.ChevronRight, size: "sm" }) });
   const toggle = hasChildren ? onClick != null ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       "aria-label": `Toggle ${textLabel} children`,
-      className: styles2.toggleButton,
+      className: styles3.toggleButton,
       onClick: handleToggle,
       tabIndex: -1,
       type: "button",
       children: toggleIcon
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.toggleSpacer, children: toggleIcon }) : null;
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.toggleSpacer, children: toggleIcon }) : null;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     toggle,
-    !chunkQAO6QMNQ_cjs.isReactNode(startContent) ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.startContent, children: startContent }),
+    !chunkQAO6QMNQ_cjs.isReactNode(startContent) ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.startContent, children: startContent }),
     href != null ? /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
         "aria-describedby": description == null ? void 0 : descriptionId,
         "aria-disabled": isDisabled || void 0,
         "aria-labelledby": labelId,
-        className: styles2.invisibleAction,
+        className: styles3.invisibleAction,
         href,
         onClick: handleDisabledLinkClick,
         ref: actionRef,
@@ -332,7 +398,7 @@ function TreeViewItem({
       {
         "aria-describedby": description == null ? void 0 : descriptionId,
         "aria-labelledby": labelId,
-        className: styles2.invisibleAction,
+        className: styles3.invisibleAction,
         disabled: isDisabled,
         onClick,
         ref: actionRef,
@@ -340,8 +406,8 @@ function TreeViewItem({
         type: "button",
         children: labelAndDescription
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.content, children: labelAndDescription }),
-    !chunkQAO6QMNQ_cjs.isReactNode(endContent) ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.endContent, children: endContent })
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.content, children: labelAndDescription }),
+    !chunkQAO6QMNQ_cjs.isReactNode(endContent) ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.endContent, children: endContent })
   ] });
   const marginLeft = hasChildren ? `calc(${nestedLevel} * 16px)` : `calc(${nestedLevel} * 16px + 24px)`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -352,58 +418,37 @@ function TreeViewItem({
       "aria-expanded": hasChildren ? isExpanded : void 0,
       "aria-labelledby": labelId,
       "aria-selected": isSelected || void 0,
-      className: styles2.wrapper,
+      className: styles3.wrapper,
       onFocus: handleFocus,
       onKeyDown: handleRowKeyDown,
       ref,
       role: "treeitem",
       tabIndex: isDisabled ? -1 : tabIndex,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.treeBranches, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.treeBranches, children: /* @__PURE__ */ jsxRuntime.jsx(
           TreeViewBranches,
           {
             ancestorsIsLast,
             nestedLevel
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.rowWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.rowWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: chunkSPDVNY2Z_cjs.cx(
-              "silver-tree-view-item",
-              styles2.contentWrapper,
-              styles2.density[density],
-              isInteractive || togglesOnRow ? styles2.interactive : void 0,
-              isDisabled ? styles2.disabled : void 0,
-              isSelected ? styles2.selected : void 0,
-              isFocused ? styles2.focused : void 0
-            ),
+            className: chunkSPDVNY2Z_cjs.cx("silver-tree-view-item", styles3.contentWrapper),
             onClick: handleRowClick,
             onPointerDown: handlePointerDown,
             style: { marginLeft },
-            tabIndex: void 0,
             children: content
           }
         ) }),
-        isExpanded && chunkQAO6QMNQ_cjs.isReactNode(renderedChildren) ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles2.childGroup, role: "group", children: renderedChildren }) : null
+        isExpanded && chunkQAO6QMNQ_cjs.isReactNode(renderedChildren) ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles3.childGroup, role: "group", children: renderedChildren }) : null
       ]
     }
   );
 }
 TreeViewItem.displayName = "TreeViewItem";
-var styles3 = {
-  header: chunkRU6JG3FS_cjs.css({
-    mb: "2"
-  }),
-  list: chunkRU6JG3FS_cjs.css({
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  }),
-  root: chunkRU6JG3FS_cjs.css({
-    position: "relative"
-  })
-};
+var styles2 = treeViewRecipe();
 function collectExpandedKeys(items) {
   const keys = [];
   for (const item of items) {
@@ -531,16 +576,6 @@ function TreeView({
   const handlePointerDownCapture = react.useCallback(() => {
     inputModalityRef.current = "pointer";
   }, []);
-  const registerItem = react.useCallback(
-    (id) => (element) => {
-      if (element == null) {
-        itemElementsRef.current.delete(id);
-        return;
-      }
-      itemElementsRef.current.set(id, element);
-    },
-    []
-  );
   const handleItemKeyDown = react.useCallback(
     (event, id) => {
       const currentIndex = focusableItems.findIndex((item) => item.id === id);
@@ -648,7 +683,6 @@ function TreeView({
           isDisabled: item.isDisabled,
           isExpanded,
           isFocused: hasFocusWithin && focusVisibleId === item.id,
-          isLast,
           isSelected: item.isSelected,
           label: item.label,
           nestedLevel,
@@ -656,7 +690,13 @@ function TreeView({
           onFocusItem: handleItemFocus,
           onItemKeyDown: handleItemKeyDown,
           onToggle: handleToggle,
-          ref: registerItem(item.id),
+          ref: (element) => {
+            if (element == null) {
+              itemElementsRef.current.delete(item.id);
+            } else {
+              itemElementsRef.current.set(item.id, element);
+            }
+          },
           renderedChildren,
           startContent: item.startContent,
           tabIndex: activeFocusedId === item.id ? 0 : -1,
@@ -674,14 +714,13 @@ function TreeView({
       hasFocusWithin,
       handleItemFocus,
       handleItemKeyDown,
-      handleToggle,
-      registerItem
+      handleToggle
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkSPDVNY2Z_cjs.cx("silver-tree-view", styles3.root, className),
+      className: chunkSPDVNY2Z_cjs.cx(styles2.root, className),
       "data-testid": dataTestId,
       onBlurCapture: handleBlurCapture,
       onFocusCapture: handleFocusCapture,
@@ -690,12 +729,12 @@ function TreeView({
       ref,
       style,
       children: [
-        !chunkQAO6QMNQ_cjs.isReactNode(header) ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.header, id: headerId, children: header }),
+        !chunkQAO6QMNQ_cjs.isReactNode(header) ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.header, id: headerId, children: header }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "ul",
           {
             "aria-labelledby": !chunkQAO6QMNQ_cjs.isReactNode(header) ? void 0 : headerId,
-            className: styles3.list,
+            className: styles2.list,
             role: "tree",
             children: renderItems(items, 0, [])
           }
@@ -707,5 +746,5 @@ function TreeView({
 TreeView.displayName = "TreeView";
 
 exports.TreeView = TreeView;
-//# sourceMappingURL=chunk-L7BOLGF2.cjs.map
-//# sourceMappingURL=chunk-L7BOLGF2.cjs.map
+//# sourceMappingURL=chunk-3VJIUZAY.cjs.map
+//# sourceMappingURL=chunk-3VJIUZAY.cjs.map