silver-ui 0.4.0 → 0.6.0

package/dist/chunk-CPDWUT2H.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/dismissBehavior.ts","../src/internal/useBackdropDismiss.ts"],"names":["useRef"],"mappings":";;;;;AAgBO,SAAS,uBACd,eAAA,EACsE;AACtE,EAAA,IAAI,mBAAmB,IAAA,EAAM;AAC3B,IAAA,OAAO,EAAC,wBAAA,EAA0B,IAAA,EAAM,sBAAA,EAAwB,IAAA,EAAI;AAAA,EACtE;AAEA,EAAA,IAAI,OAAO,oBAAoB,SAAA,EAAW;AACxC,IAAA,OAAO;AAAA,MACL,wBAAA,EAA0B,eAAA;AAAA,MAC1B,sBAAA,EAAwB;AAAA,KAC1B;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,wBAAA,EAA0B,gBAAgB,wBAAA,IAA4B,IAAA;AAAA,IACtE,sBAAA,EAAwB,gBAAgB,sBAAA,IAA0B;AAAA,GACpE;AACF;AC1BA,SAAS,uBAAA,CACP,OAAA,EACA,OAAA,EACA,OAAA,EACS;AACT,EAAA,MAAM,IAAA,GAAO,QAAQ,qBAAA,EAAsB;AAC3C,EAAA,OACE,OAAA,GAAU,IAAA,CAAK,IAAA,IACf,OAAA,GAAU,IAAA,CAAK,SACf,OAAA,GAAU,IAAA,CAAK,GAAA,IACf,OAAA,GAAU,IAAA,CAAK,MAAA;AAEnB;AAaO,SAAS,kBAAA,CAA0C;AAAA,EACxD,SAAA;AAAA,EACA;AACF,CAAA,EAG+B;AAC7B,EAAA,MAAM,wBAAA,GAA2BA,aAAO,KAAK,CAAA;AAE7C,EAAA,OAAO;AAAA,IACL,SAAS,CAAA,KAAA,KAAS;AAChB,MAAA,MAAM,oBAAoB,wBAAA,CAAyB,OAAA;AACnD,MAAA,wBAAA,CAAyB,OAAA,GAAU,KAAA;AAInC,MAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,QAAA;AAAA,MACF;AACA,MAAA,MAAM,kBAAA,GAAqB,uBAAA;AAAA,QACzB,KAAA,CAAM,aAAA;AAAA,QACN,KAAA,CAAM,OAAA;AAAA,QACN,KAAA,CAAM;AAAA,OACR;AACA,MAAA,IAAI,iBAAA,IAAqB,sBAAsB,SAAA,EAAW;AACxD,QAAA,SAAA,EAAU;AAAA,MACZ;AAAA,IACF,CAAA;AAAA,IACA,eAAe,CAAA,KAAA,KAAS;AACtB,MAAA,wBAAA,CAAyB,OAAA,GAAU,uBAAA;AAAA,QACjC,KAAA,CAAM,aAAA;AAAA,QACN,KAAA,CAAM,OAAA;AAAA,QACN,KAAA,CAAM;AAAA,OACR;AAAA,IACF;AAAA,GACF;AACF","file":"chunk-CPDWUT2H.cjs","sourcesContent":["/**\n * Controls whether Escape and backdrop clicks request dismissal of an overlay\n * surface. Pass a boolean to enable or disable both behaviors together, or an\n * object to configure each independently.\n */\nexport type DismissBehavior =\n  | boolean\n  | {\n      isBackdropDismissEnabled?: boolean;\n      isEscapeDismissEnabled?: boolean;\n    };\n\n/**\n * Resolves a {@link DismissBehavior} value into explicit flags. Both behaviors\n * default to enabled when unspecified.\n */\nexport function resolveDismissBehavior(\n  dismissBehavior: DismissBehavior | undefined,\n): {isBackdropDismissEnabled: boolean; isEscapeDismissEnabled: boolean} {\n  if (dismissBehavior == null) {\n    return {isBackdropDismissEnabled: true, isEscapeDismissEnabled: true};\n  }\n\n  if (typeof dismissBehavior === 'boolean') {\n    return {\n      isBackdropDismissEnabled: dismissBehavior,\n      isEscapeDismissEnabled: dismissBehavior,\n    };\n  }\n\n  return {\n    isBackdropDismissEnabled: dismissBehavior.isBackdropDismissEnabled ?? true,\n    isEscapeDismissEnabled: dismissBehavior.isEscapeDismissEnabled ?? true,\n  };\n}\n","import {useRef, type MouseEvent, type PointerEvent} from 'react';\n\n/**\n * Whether a pointer coordinate falls outside an element's border box. Native\n * `<dialog>` renders its backdrop outside this box, so a click whose\n * coordinates land outside the dialog rect is a backdrop click — regardless of\n * any padding, border, or margin on the dialog element.\n */\nfunction isPointerOutsideElement(\n  element: HTMLElement,\n  clientX: number,\n  clientY: number,\n): boolean {\n  const rect = element.getBoundingClientRect();\n  return (\n    clientX < rect.left ||\n    clientX > rect.right ||\n    clientY < rect.top ||\n    clientY > rect.bottom\n  );\n}\n\nexport interface BackdropDismissHandlers<T extends HTMLElement> {\n  onClick: (event: MouseEvent<T>) => void;\n  onPointerDown: (event: PointerEvent<T>) => void;\n}\n\n/**\n * Pointer handlers that dismiss a native `<dialog>` when the backdrop is\n * clicked. Dismissal requires that both the press and the release land on the\n * backdrop, so clicks on dialog padding (inside the rect) and inside-out drags\n * (e.g. text selection that overshoots onto the backdrop) are ignored.\n */\nexport function useBackdropDismiss<T extends HTMLElement>({\n  isEnabled,\n  onDismiss,\n}: {\n  isEnabled: boolean;\n  onDismiss: () => void;\n}): BackdropDismissHandlers<T> {\n  const pointerDownOnBackdropRef = useRef(false);\n\n  return {\n    onClick: event => {\n      const startedOnBackdrop = pointerDownOnBackdropRef.current;\n      pointerDownOnBackdropRef.current = false;\n      // Keyboard-synthesized clicks (Enter/Space on a child control) report\n      // detail 0 and 0,0 coordinates; ignore them so they are not mistaken\n      // for a backdrop click.\n      if (event.detail === 0) {\n        return;\n      }\n      const releasedOnBackdrop = isPointerOutsideElement(\n        event.currentTarget,\n        event.clientX,\n        event.clientY,\n      );\n      if (startedOnBackdrop && releasedOnBackdrop && isEnabled) {\n        onDismiss();\n      }\n    },\n    onPointerDown: event => {\n      pointerDownOnBackdropRef.current = isPointerOutsideElement(\n        event.currentTarget,\n        event.clientX,\n        event.clientY,\n      );\n    },\n  };\n}\n"]}

package/dist/{chunk-C6EYCIKJ.cjs → chunk-CVT7JW6C.cjs}

@@ -1,29 +1,53 @@
 'use strict';
 
+var chunkVPWNRWNO_cjs = require('./chunk-VPWNRWNO.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
-var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.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 +79,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 +280,6 @@ function TreeViewItem({
   isDisabled = false,
   isExpanded,
   isFocused,
-  isLast: _isLast,
   isSelected = false,
   label,
   nestedLevel,
@@ -230,6 +298,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) => {
@@ -275,73 +351,54 @@ function TreeViewItem({
   const handlePointerDown = react.useCallback(() => {
     onFocusItem(id, false);
   }, [id, onFocusItem]);
-  const handleDisabledLinkClick = react.useCallback(
+  const handleActionClick = react.useCallback(
     (event) => {
-      if (!isDisabled) {
+      if (isDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
+      onClick?.(event);
     },
-    [isDisabled]
+    [isDisabled, onClick]
   );
   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 }),
-    href != null ? /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
+    !chunkQAO6QMNQ_cjs.isReactNode(startContent) ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.startContent, children: startContent }),
+    href != null || onClick != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      chunkVPWNRWNO_cjs.ActionElement,
       {
         "aria-describedby": description == null ? void 0 : descriptionId,
-        "aria-disabled": isDisabled || void 0,
+        "aria-disabled": href != null && isDisabled ? true : void 0,
         "aria-labelledby": labelId,
-        className: styles2.invisibleAction,
+        className: styles3.invisibleAction,
         href,
-        onClick: handleDisabledLinkClick,
+        isDisabled: href == null ? isDisabled : void 0,
+        isLink: href != null,
+        onClick: handleActionClick,
         ref: actionRef,
         tabIndex: -1,
-        target,
+        target: href != null ? target : void 0,
         children: labelAndDescription
       }
-    ) : onClick != null ? /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        "aria-describedby": description == null ? void 0 : descriptionId,
-        "aria-labelledby": labelId,
-        className: styles2.invisibleAction,
-        disabled: isDisabled,
-        onClick,
-        ref: actionRef,
-        tabIndex: -1,
-        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 +409,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 +567,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 +674,6 @@ function TreeView({
           isDisabled: item.isDisabled,
           isExpanded,
           isFocused: hasFocusWithin && focusVisibleId === item.id,
-          isLast,
           isSelected: item.isSelected,
           label: item.label,
           nestedLevel,
@@ -656,7 +681,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 +705,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 +720,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 +737,5 @@ function TreeView({
 TreeView.displayName = "TreeView";
 
 exports.TreeView = TreeView;
-//# sourceMappingURL=chunk-C6EYCIKJ.cjs.map
-//# sourceMappingURL=chunk-C6EYCIKJ.cjs.map
+//# sourceMappingURL=chunk-CVT7JW6C.cjs.map
+//# sourceMappingURL=chunk-CVT7JW6C.cjs.map