silver-ui 0.4.0 → 0.5.0

package/dist/{chunk-PIZMCOKL.js → chunk-L5PJCLV6.js}

@@ -1,27 +1,50 @@
 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 { useId, useRef, useMemo, useState, useCallback } from 'react';
 import { ChevronRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var styles = {
-  container: css({
-    position: "absolute",
-    h: "full",
-    w: "5"
-  }),
-  line: 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 = 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 = 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,
@@ -53,150 +76,195 @@ function TreeViewBranches({
   ] });
 }
 TreeViewBranches.displayName = "TreeViewBranches";
-var styles2 = {
-  childGroup: css({
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  }),
-  content: css({
-    display: "flex",
-    flex: 1,
-    minW: 0,
-    flexDirection: "column",
-    textAlign: "start"
-  }),
-  contentWrapper: css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    overflow: "hidden",
-    px: "2",
-    borderRadius: "md",
-    outline: "none",
-    textAlign: "start"
-  }),
-  density: {
-    balanced: css({
-      py: "2",
-      fontSize: "sm",
-      lineHeight: "normal"
-    }),
-    compact: css({
-      py: "1",
-      fontSize: "sm",
-      lineHeight: "normal"
-    }),
-    spacious: css({
-      py: "3",
-      fontSize: "sm",
+
+// src/components/TreeView/TreeViewItem.recipe.ts
+var treeViewItemRecipe = 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: css({
-    color: "fg.muted",
-    fontSize: "xs",
-    lineHeight: "normal"
-  }),
-  disabled: css({
-    cursor: "not-allowed",
-    opacity: 0.5,
-    pointerEvents: "none"
-  }),
-  endContent: css({
-    display: "flex",
-    alignItems: "center",
-    flexShrink: 0,
-    ml: "auto"
-  }),
-  interactive: 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: css({
-    display: "flex",
-    flex: 1,
-    minW: 0,
-    flexDirection: "column",
-    color: "inherit",
-    cursor: "inherit",
-    font: "inherit",
-    textAlign: "start",
-    textDecoration: "none",
-    outline: "none"
-  }),
-  label: css({
-    color: "fg"
-  }),
-  rowWrapper: css({
-    position: "relative"
-  }),
-  selected: css({
-    bg: "bg.selected"
-  }),
-  focused: css({
-    outlineWidth: "focus",
-    outlineStyle: "solid",
-    outlineColor: "primary",
-    outlineOffset: "focusOffset"
-  }),
-  startContent: css({
-    display: "flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  toggleButton: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "4",
-    h: "4",
-    borderRadius: "sm",
-    color: "fg.muted",
-    cursor: "pointer"
-  }),
-  toggleIcon: css({
-    display: "flex",
-    transitionDuration: "fast",
-    transitionProperty: "transform",
-    transitionTimingFunction: "default"
-  }),
-  toggleIconExpanded: css({
-    transform: "rotate(90deg)"
-  }),
-  toggleSpacer: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "4",
-    h: "4",
-    color: "fg.muted"
-  }),
-  treeBranches: css({
-    ps: "2"
-  }),
-  wrapper: 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,
@@ -209,7 +277,6 @@ function TreeViewItem({
   isDisabled = false,
   isExpanded,
   isFocused,
-  isLast: _isLast,
   isSelected = false,
   label,
   nestedLevel,
@@ -228,6 +295,14 @@ function TreeViewItem({
   const actionRef = 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 = useCallback(
     (event) => {
@@ -284,40 +359,31 @@ function TreeViewItem({
     [isDisabled]
   );
   const labelAndDescription = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: styles2.label, id: labelId, children: label }),
-    description == null ? null : /* @__PURE__ */ jsx("span", { className: styles2.description, id: descriptionId, children: description })
+    /* @__PURE__ */ jsx("span", { className: styles3.label, id: labelId, children: label }),
+    description == null ? null : /* @__PURE__ */ jsx("span", { className: styles3.description, id: descriptionId, children: description })
   ] });
-  const toggleIcon = /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cx(
-        styles2.toggleIcon,
-        isExpanded ? styles2.toggleIconExpanded : void 0
-      ),
-      children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: "sm" })
-    }
-  );
+  const toggleIcon = /* @__PURE__ */ jsx("span", { className: styles3.toggleIcon, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: "sm" }) });
   const toggle = hasChildren ? onClick != null ? /* @__PURE__ */ jsx(
     "button",
     {
       "aria-label": `Toggle ${textLabel} children`,
-      className: styles2.toggleButton,
+      className: styles3.toggleButton,
       onClick: handleToggle,
       tabIndex: -1,
       type: "button",
       children: toggleIcon
     }
-  ) : /* @__PURE__ */ jsx("span", { className: styles2.toggleSpacer, children: toggleIcon }) : null;
+  ) : /* @__PURE__ */ jsx("span", { className: styles3.toggleSpacer, children: toggleIcon }) : null;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     toggle,
-    !isReactNode(startContent) ? null : /* @__PURE__ */ jsx("span", { className: styles2.startContent, children: startContent }),
+    !isReactNode(startContent) ? null : /* @__PURE__ */ jsx("span", { className: styles3.startContent, children: startContent }),
     href != null ? /* @__PURE__ */ 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,
@@ -330,7 +396,7 @@ function TreeViewItem({
       {
         "aria-describedby": description == null ? void 0 : descriptionId,
         "aria-labelledby": labelId,
-        className: styles2.invisibleAction,
+        className: styles3.invisibleAction,
         disabled: isDisabled,
         onClick,
         ref: actionRef,
@@ -338,8 +404,8 @@ function TreeViewItem({
         type: "button",
         children: labelAndDescription
       }
-    ) : /* @__PURE__ */ jsx("span", { className: styles2.content, children: labelAndDescription }),
-    !isReactNode(endContent) ? null : /* @__PURE__ */ jsx("span", { className: styles2.endContent, children: endContent })
+    ) : /* @__PURE__ */ jsx("span", { className: styles3.content, children: labelAndDescription }),
+    !isReactNode(endContent) ? null : /* @__PURE__ */ jsx("span", { className: styles3.endContent, children: endContent })
   ] });
   const marginLeft = hasChildren ? `calc(${nestedLevel} * 16px)` : `calc(${nestedLevel} * 16px + 24px)`;
   return /* @__PURE__ */ jsxs(
@@ -350,58 +416,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__ */ jsx("div", { className: styles2.treeBranches, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles3.treeBranches, children: /* @__PURE__ */ jsx(
           TreeViewBranches,
           {
             ancestorsIsLast,
             nestedLevel
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles2.rowWrapper, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles3.rowWrapper, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: 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: cx("silver-tree-view-item", styles3.contentWrapper),
             onClick: handleRowClick,
             onPointerDown: handlePointerDown,
             style: { marginLeft },
-            tabIndex: void 0,
             children: content
           }
         ) }),
-        isExpanded && isReactNode(renderedChildren) ? /* @__PURE__ */ jsx("ul", { className: styles2.childGroup, role: "group", children: renderedChildren }) : null
+        isExpanded && isReactNode(renderedChildren) ? /* @__PURE__ */ jsx("ul", { className: styles3.childGroup, role: "group", children: renderedChildren }) : null
       ]
     }
   );
 }
 TreeViewItem.displayName = "TreeViewItem";
-var styles3 = {
-  header: css({
-    mb: "2"
-  }),
-  list: css({
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  }),
-  root: css({
-    position: "relative"
-  })
-};
+var styles2 = treeViewRecipe();
 function collectExpandedKeys(items) {
   const keys = [];
   for (const item of items) {
@@ -529,16 +574,6 @@ function TreeView({
   const handlePointerDownCapture = useCallback(() => {
     inputModalityRef.current = "pointer";
   }, []);
-  const registerItem = useCallback(
-    (id) => (element) => {
-      if (element == null) {
-        itemElementsRef.current.delete(id);
-        return;
-      }
-      itemElementsRef.current.set(id, element);
-    },
-    []
-  );
   const handleItemKeyDown = useCallback(
     (event, id) => {
       const currentIndex = focusableItems.findIndex((item) => item.id === id);
@@ -646,7 +681,6 @@ function TreeView({
           isDisabled: item.isDisabled,
           isExpanded,
           isFocused: hasFocusWithin && focusVisibleId === item.id,
-          isLast,
           isSelected: item.isSelected,
           label: item.label,
           nestedLevel,
@@ -654,7 +688,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,
@@ -672,14 +712,13 @@ function TreeView({
       hasFocusWithin,
       handleItemFocus,
       handleItemKeyDown,
-      handleToggle,
-      registerItem
+      handleToggle
     ]
   );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("silver-tree-view", styles3.root, className),
+      className: cx(styles2.root, className),
       "data-testid": dataTestId,
       onBlurCapture: handleBlurCapture,
       onFocusCapture: handleFocusCapture,
@@ -688,12 +727,12 @@ function TreeView({
       ref,
       style,
       children: [
-        !isReactNode(header) ? null : /* @__PURE__ */ jsx("div", { className: styles3.header, id: headerId, children: header }),
+        !isReactNode(header) ? null : /* @__PURE__ */ jsx("div", { className: styles2.header, id: headerId, children: header }),
         /* @__PURE__ */ jsx(
           "ul",
           {
             "aria-labelledby": !isReactNode(header) ? void 0 : headerId,
-            className: styles3.list,
+            className: styles2.list,
             role: "tree",
             children: renderItems(items, 0, [])
           }
@@ -705,5 +744,5 @@ function TreeView({
 TreeView.displayName = "TreeView";
 
 export { TreeView };
-//# sourceMappingURL=chunk-PIZMCOKL.js.map
-//# sourceMappingURL=chunk-PIZMCOKL.js.map
+//# sourceMappingURL=chunk-L5PJCLV6.js.map
+//# sourceMappingURL=chunk-L5PJCLV6.js.map