@stratakit/structures 0.3.2 → 0.4.1

package/dist/DEV/DropdownMenu.js

@@ -25,7 +25,7 @@ import {
 import cx from "classnames";
 import { Checkmark } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
-function DropdownMenuRoot(props) {
+function DropdownMenuProvider(props) {
   const {
     children,
     placement,
@@ -45,7 +45,7 @@ function DropdownMenuRoot(props) {
     }
   );
 }
-DEV: DropdownMenuRoot.displayName = "DropdownMenu.Root";
+DEV: DropdownMenuProvider.displayName = "DropdownMenu.Provider";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
     const context = useMenuContext();
@@ -61,7 +61,7 @@ const DropdownMenuContent = forwardRef(
         gutter: 4,
         style: { ...popoverProps.style, ...props.style },
         wrapperProps: { popover: popoverProps.popover },
-        className: cx("\u{1F95D}-dropdown-menu", props.className),
+        className: cx("\u{1F95D}DropdownMenu", props.className),
         ref: forwardedRef
       }
     );
@@ -81,7 +81,7 @@ const DropdownMenuButton = forwardRef(
           children,
           /* @__PURE__ */ jsx(DisclosureArrow, {})
         ] }),
-        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        className: cx("\u{1F95D}DropdownMenuButton", props.className),
         "data-has-popover-open": open || void 0,
         ref: forwardedRef
       }
@@ -106,7 +106,7 @@ const DropdownMenuItem = forwardRef(
                 accessibleWhenDisabled: true,
                 "aria-describedby": dotId,
                 ...rest,
-                className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+                className: cx("\u{1F95D}DropdownMenuItem", props.className),
                 ref: forwardedRef
               }
             )
@@ -119,7 +119,7 @@ const DropdownMenuItem = forwardRef(
           unstable_dot ? /* @__PURE__ */ jsx(
             ListItem.Decoration,
             {
-              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
             }
           ) : null
         ]
@@ -141,7 +141,7 @@ const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
     {
       render: /* @__PURE__ */ jsx("span", {}),
       ...rest,
-      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      className: cx("\u{1F95D}DropdownMenuItemShortcuts", props.className),
       ref: forwardedRef,
       children: shortcutKeys.map(({ key, isSymbol }, index) => {
         if (isSymbol) {
@@ -209,7 +209,7 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
             {
               accessibleWhenDisabled: true,
               ...rest,
-              className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+              className: cx("\u{1F95D}DropdownMenuItem", props.className),
               ref: forwardedRef
             }
           )
@@ -221,7 +221,7 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {
-            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}DropdownMenuCheckmark" })
           }
         )
       ]
@@ -234,5 +234,5 @@ export {
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenuRoot as Root
+  DropdownMenuProvider as Provider
 };

package/dist/DEV/ErrorRegion.js

@@ -40,7 +40,7 @@ const ErrorRegionRoot = forwardRef(
     const pulse = () => {
       const el = containerRef.current;
       if (!el) return;
-      const id = "--\u{1F95D}error-region-pulse";
+      const id = "--\u{1F95D}ErrorRegion-pulse";
       const animations = el.getAnimations({ subtree: true });
       if (animations.find((animation) => animation.id === id)) return;
       el.animate(
@@ -87,24 +87,24 @@ const ErrorRegionRoot = forwardRef(
         {
           ...rest,
           "aria-labelledby": sectionLabelledBy,
-          className: cx("\u{1F95D}-error-region", props.className),
-          "data-kiwi-visible": !!label,
-          "data-kiwi-expanded": open,
+          className: cx("\u{1F95D}ErrorRegion", props.className),
+          "data-_sk-visible": !!label,
+          "data-_sk-expanded": open,
           ref: forwardedRef,
-          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", ref: containerRef, children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}ErrorRegionContainer", ref: containerRef, children: [
             /* @__PURE__ */ jsxs(
               DialogDisclosure,
               {
-                className: "\u{1F95D}-error-region-header",
+                className: "\u{1F95D}ErrorRegionHeader",
                 render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
                 children: [
-                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}ErrorRegionIcon" }),
                   /* @__PURE__ */ jsx(
                     Text,
                     {
                       render: /* @__PURE__ */ jsx("span", {}),
                       id: labelId,
-                      className: "\u{1F95D}-error-region-label",
+                      className: "\u{1F95D}ErrorRegionLabel",
                       variant: "body-sm",
                       children: label
                     }
@@ -116,7 +116,7 @@ const ErrorRegionRoot = forwardRef(
             /* @__PURE__ */ jsx(
               Dialog,
               {
-                className: "\u{1F95D}-error-region-dialog",
+                className: "\u{1F95D}ErrorRegionDialog",
                 portal: false,
                 modal: false,
                 autoFocusOnShow: false,
@@ -125,7 +125,7 @@ const ErrorRegionRoot = forwardRef(
                   Collection,
                   {
                     store,
-                    className: "\u{1F95D}-error-region-items",
+                    className: "\u{1F95D}ErrorRegionItems",
                     role: "list",
                     children: items
                   }
@@ -153,11 +153,11 @@ const ErrorRegionItem = forwardRef(
       {
         ...rest,
         role: "listitem",
-        className: cx("\u{1F95D}-error-region-item", props.className),
+        className: cx("\u{1F95D}ErrorRegionItem", props.className),
         ref: forwardedRef,
         children: [
           /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
-          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}ErrorRegionItemActions", children: actions })
         ]
       }
     );

package/dist/DEV/NavigationRail.js

@@ -0,0 +1,213 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { Tooltip, VisuallyHidden } from "@stratakit/bricks";
+import { Icon } from "@stratakit/foundations";
+import {
+  forwardRef,
+  useEventHandlers,
+  useSafeContext
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { createStore, useStore } from "zustand";
+function createNavigationRailStore() {
+  return createStore((set) => ({
+    collapsed: true,
+    setCollapsed: (collapsed) => set({ collapsed })
+  }));
+}
+const NavigationRailContext = React.createContext(void 0);
+function NavigationRailProvider(props) {
+  const [store] = React.useState(() => createNavigationRailStore());
+  return /* @__PURE__ */ jsx(NavigationRailContext.Provider, { value: store, children: props.children });
+}
+function useNavigationRailState(selectorFn) {
+  const store = useSafeContext(NavigationRailContext);
+  return useStore(store, selectorFn);
+}
+const NavigationRailRoot = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(NavigationRailProvider, { children: /* @__PURE__ */ jsx(NavigationRailRootInner, { ...props, ref: forwardedRef }) });
+  }
+);
+DEV: NavigationRailRoot.displayName = "NavigationRail.Root";
+const NavigationRailRootInner = forwardRef(
+  (props, forwardedRef) => {
+    const collapsed = useNavigationRailState((state) => state.collapsed);
+    return /* @__PURE__ */ jsx(
+      Role.nav,
+      {
+        ...props,
+        className: cx("\u{1F95D}NavigationRail", props.className),
+        "data-_sk-expanded": collapsed ? "false" : "true",
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailRootInner.displayName = "NavigationRail.RootInner";
+const NavigationRailHeader = forwardRef(
+  (props, forwardedRef) => {
+    const collapsed = useNavigationRailState((state) => state.collapsed);
+    return /* @__PURE__ */ jsx(
+      Role.header,
+      {
+        ...props,
+        className: cx("\u{1F95D}NavigationRailHeader", props.className),
+        "data-_sk-collapsed": collapsed ? "true" : void 0,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailHeader.displayName = "NavigationRail.Header";
+const NavigationRailToggleButton = forwardRef((props, forwardedRef) => {
+  const { label = "Expand navigation", ...rest } = props;
+  const collapsed = useNavigationRailState((state) => state.collapsed);
+  const setCollapsed = useNavigationRailState((state) => state.setCollapsed);
+  return /* @__PURE__ */ jsxs(
+    Role.button,
+    {
+      "aria-expanded": collapsed ? "false" : "true",
+      ...rest,
+      className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
+      ref: forwardedRef,
+      onClick: useEventHandlers(props.onClick, () => setCollapsed(!collapsed)),
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M5.405 2.845a.75.75 0 1 0-1.06 1.06L6.439 6 4.345 8.095a.75.75 0 0 0 1.06 1.06L8.03 6.53a.75.75 0 0 0 0-1.06L5.405 2.845Z"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+      ]
+    }
+  );
+});
+DEV: NavigationRailToggleButton.displayName = "NavigationRail.ToggleButton";
+const NavigationRailContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}NavigationRailContent", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailContent.displayName = "NavigationRail.Content";
+const NavigationRailList = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "list",
+        ...props,
+        className: cx("\u{1F95D}NavigationRailList", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailList.displayName = "NavigationRail.List";
+const NavigationRailListItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "listitem",
+        ...props,
+        className: cx("\u{1F95D}NavigationRailListItem", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailListItem.displayName = "NavigationRail.Item";
+const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
+  const collapsed = useNavigationRailState((state) => state.collapsed);
+  const { label, icon, ...rest } = props;
+  DEV: if (!label || !icon) throw new Error("label and icon are required");
+  const action = /* @__PURE__ */ jsxs(
+    Role,
+    {
+      ...rest,
+      className: cx("\u{1F95D}NavigationRailItemAction", props.className),
+      ref: forwardedRef,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+        /* @__PURE__ */ jsx(
+          Role.span,
+          {
+            className: "\u{1F95D}NavigationRailItemActionLabel",
+            render: collapsed ? /* @__PURE__ */ jsx(VisuallyHidden, {}) : void 0,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, placement: "right", type: "none", children: action });
+  }
+  return action;
+});
+DEV: NavigationRailItemAction.displayName = "NavigationRail.ItemAction";
+const NavigationRailAnchor = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, active, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      NavigationRailItemAction,
+      {
+        label,
+        icon,
+        "aria-current": active ? "page" : void 0,
+        render: /* @__PURE__ */ jsx(Role.a, { ...rest, ref: forwardedRef })
+      }
+    );
+  }
+);
+DEV: NavigationRailAnchor.displayName = "NavigationRail.Anchor";
+const NavigationRailButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      NavigationRailItemAction,
+      {
+        label,
+        icon,
+        render: /* @__PURE__ */ jsx(Role.button, { ...rest, ref: forwardedRef })
+      }
+    );
+  }
+);
+DEV: NavigationRailButton.displayName = "NavigationRail.Button";
+const NavigationRailFooter = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        render: /* @__PURE__ */ jsx("footer", {}),
+        ...props,
+        className: cx("\u{1F95D}NavigationRailFooter", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: NavigationRailFooter.displayName = "NavigationRail.Footer";
+export {
+  NavigationRailAnchor as Anchor,
+  NavigationRailButton as Button,
+  NavigationRailContent as Content,
+  NavigationRailFooter as Footer,
+  NavigationRailHeader as Header,
+  NavigationRailList as List,
+  NavigationRailListItem as ListItem,
+  NavigationRailRoot as Root,
+  NavigationRailToggleButton as ToggleButton
+};

package/dist/DEV/Table.js

@@ -20,7 +20,7 @@ const HtmlTable = forwardRef((props, forwardedRef) => {
       render: /* @__PURE__ */ jsx("table", {}),
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table", props.className)
+      className: cx("\u{1F95D}Table", props.className)
     }
   ) });
 });
@@ -39,7 +39,7 @@ const CustomTable = forwardRef(
         "aria-labelledby": captionId,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table", props.className)
+        className: cx("\u{1F95D}Table", props.className)
       }
     ) });
   }
@@ -57,7 +57,7 @@ const TableHeader = forwardRef(
         role,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table-header", props.className)
+        className: cx("\u{1F95D}TableHeader", props.className)
       }
     ) });
   }
@@ -73,7 +73,7 @@ const TableBody = forwardRef((props, forwardedRef) => {
       role: void 0,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-body", props.className)
+      className: cx("\u{1F95D}TableBody", props.className)
     }
   );
 });
@@ -89,7 +89,7 @@ const TableRow = forwardRef((props, forwardedRef) => {
       role,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-row", props.className)
+      className: cx("\u{1F95D}TableRow", props.className)
     }
   );
 });
@@ -113,7 +113,7 @@ const TableCaption = forwardRef(
         ...rest,
         id,
         ref: useMergedRefs(forwardedRef, captionIdRef),
-        className: cx("\u{1F95D}-table-caption", props.className)
+        className: cx("\u{1F95D}TableCaption", props.className)
       }
     );
   }
@@ -135,7 +135,7 @@ const TableCell = forwardRef((props, forwardedRef) => {
       role,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}-table-cell", props.className)
+      className: cx("\u{1F95D}TableCell", props.className)
     }
   );
 });

package/dist/DEV/Tabs.js

@@ -9,7 +9,7 @@ import {
 import cx from "classnames";
 const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
-function Tabs(props) {
+function TabsProvider(props) {
   const {
     defaultSelectedId,
     selectedId,
@@ -57,15 +57,15 @@ function Tabs(props) {
     }
   );
 }
-DEV: Tabs.displayName = "Tabs.Root";
+DEV: TabsProvider.displayName = "Tabs.Provider";
 const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   return /* @__PURE__ */ jsx(
     AkTab.TabList,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      className: cx("\u{1F95D}-tab-list", props.className),
+      "data-_sk-tone": tone,
+      className: cx("\u{1F95D}TabList", props.className),
       ref: forwardedRef
     }
   );
@@ -77,7 +77,7 @@ const Tab = forwardRef((props, forwardedRef) => {
     {
       accessibleWhenDisabled: true,
       ...props,
-      className: cx("\u{1F95D}-tab", props.className),
+      className: cx("\u{1F95D}Tab", props.className),
       ref: forwardedRef
     }
   );
@@ -88,14 +88,14 @@ const TabPanel = forwardRef((props, forwardedRef) => {
     AkTab.TabPanel,
     {
       ...props,
-      className: cx("\u{1F95D}-tab-panel", props.className),
+      className: cx("\u{1F95D}TabPanel", props.className),
       ref: forwardedRef
     }
   );
 });
 DEV: TabPanel.displayName = "Tabs.TabPanel";
 export {
-  Tabs as Root,
+  TabsProvider as Provider,
   Tab,
   TabList,
   TabPanel

package/dist/DEV/Toolbar.js

@@ -1,29 +1,52 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Toolbar from "@ariakit/react/toolbar";
-import { IconButtonContext } from "@stratakit/bricks/secret-internals";
+import {
+  IconButtonContext,
+  TooltipContext
+} from "@stratakit/bricks/secret-internals";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const ToolbarGroup = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    IconButtonContext.Provider,
-    {
-      value: React.useMemo(() => ({ iconSize: "large" }), []),
-      children: /* @__PURE__ */ jsx(
-        Toolbar.Toolbar,
-        {
-          ...props,
-          className: cx("\u{1F95D}-toolbar", props.className),
-          ref: forwardedRef
-        }
-      )
-    }
-  );
-});
+const ToolbarGroup = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      IconButtonContext.Provider,
+      {
+        value: React.useMemo(() => ({ iconSize: "large" }), []),
+        children: /* @__PURE__ */ jsx(
+          TooltipContext.Provider,
+          {
+            value: React.useMemo(
+              () => ({
+                placement: props.orientation === "vertical" ? "right" : "top"
+              }),
+              [props.orientation]
+            ),
+            children: /* @__PURE__ */ jsx(
+              Toolbar.Toolbar,
+              {
+                ...props,
+                className: cx("\u{1F95D}Toolbar", props.className),
+                ref: forwardedRef
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
 DEV: ToolbarGroup.displayName = "Toolbar.Group";
 const ToolbarItem = forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ jsx(
+      Toolbar.ToolbarItem,
+      {
+        ...props,
+        className: cx("\u{1F95D}ToolbarItem", props.className),
+        ref: forwardedRef
+      }
+    );
   }
 );
 DEV: ToolbarItem.displayName = "Toolbar.Item";

package/dist/DEV/Tree.js

@@ -12,7 +12,7 @@ const Tree = forwardRef((props, forwardedRef) => {
       role: "tree",
       ...props,
       render: /* @__PURE__ */ jsx(Composite, { store: composite }),
-      className: cx("\u{1F95D}-tree", props.className),
+      className: cx("\u{1F95D}Tree", props.className),
       ref: forwardedRef,
       children: props.children
     }

package/dist/DEV/TreeItem.js

@@ -156,7 +156,7 @@ const TreeItemRoot = React.memo(
     const style = React.useMemo(
       () => ({
         ...styleProp,
-        "--\u{1F95D}tree-item-level": level
+        "--\u{1F95D}TreeItem-level": level
       }),
       [styleProp, level]
     );
@@ -173,7 +173,7 @@ const TreeItemRoot = React.memo(
             "aria-labelledby": labelId,
             "aria-describedby": describedBy,
             "aria-level": level,
-            className: cx("\u{1F95D}-tree-item", props.className),
+            className: cx("\u{1F95D}TreeItem", props.className),
             style,
             ref: forwardedRef
           }
@@ -210,10 +210,10 @@ const TreeItemNode = React.memo((props) => {
   return /* @__PURE__ */ jsxs(
     ListItem.Root,
     {
-      "data-kiwi-expanded": expanded,
-      "data-kiwi-selected": selected,
-      "data-kiwi-error": error ? true : void 0,
-      className: "\u{1F95D}-tree-item-node",
+      "data-_sk-expanded": expanded,
+      "data-_sk-selected": selected,
+      "data-_sk-error": error ? true : void 0,
+      className: "\u{1F95D}TreeItemNode",
       role: void 0,
       ref,
       children: [
@@ -240,7 +240,7 @@ function TreeItemDecoration() {
   return icon || decorations ? /* @__PURE__ */ jsx(
     Role,
     {
-      className: "\u{1F95D}-tree-item-decoration",
+      className: "\u{1F95D}TreeItemDecoration",
       id: decorationId,
       render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
       children: !icon ? decorations : null
@@ -251,13 +251,13 @@ DEV: TreeItemDecoration.displayName = "TreeItemDecoration";
 const TreeItemContent = React.memo(() => {
   const labelId = React.useContext(TreeItemLabelIdContext);
   const label = React.useContext(TreeItemLabelContext);
-  return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label });
+  return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}TreeItemContent", children: label });
 });
 DEV: TreeItemContent.displayName = "TreeItemContent";
 const TreeItemDescription = React.memo(() => {
   const description = React.useContext(TreeItemDescriptionContext);
   const descriptionId = React.useContext(TreeItemDescriptionIdContext);
-  return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}-tree-item-description", children: description }) : void 0;
+  return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}TreeItemDescription", children: description }) : void 0;
 });
 DEV: TreeItemDescription.displayName = "TreeItemDescription";
 const TreeItemActions = React.memo(
@@ -271,7 +271,7 @@ const TreeItemActions = React.memo(
           props.onKeyDown,
           (e) => e.stopPropagation()
         ),
-        className: cx("\u{1F95D}-tree-item-actions-container", props.className),
+        className: cx("\u{1F95D}TreeItemActionsContainer", props.className),
         ref: forwardedRef,
         render: /* @__PURE__ */ jsx(Toolbar, { focusLoop: false }),
         children: [
@@ -305,7 +305,7 @@ const TreeItemActionMenu = React.memo(
       }
     }, []);
     if (!displayMenu) return null;
-    return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, children: [
+    return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Provider, { open, setOpen, children: [
       /* @__PURE__ */ jsx(
         DropdownMenu.Button,
         {
@@ -386,8 +386,8 @@ const TreeItemInlineAction = React.memo(
         render: /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }),
         dot,
         variant: "ghost",
-        className: cx("\u{1F95D}-tree-item-action", props.className),
-        "data-kiwi-visible": visible,
+        className: cx("\u{1F95D}TreeItemAction", props.className),
+        "data-_sk-visible": visible,
         ref: forwardedRef
       }
     );
@@ -403,7 +403,7 @@ const TreeItemExpander = forwardRef(
         "aria-hidden": "true",
         ...props,
         onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        className: cx("\u{1F95D}TreeItemExpander", props.className),
         variant: "ghost",
         ref: forwardedRef,
         children: /* @__PURE__ */ jsx(ChevronDown, {})

package/dist/DEV/index.js

@@ -2,8 +2,10 @@
 import * as unstable_AccordionItem from "./AccordionItem.js";
 import { default as default2 } from "./Banner.js";
 import { default as default3 } from "./Chip.js";
+import * as unstable_Dialog from "./Dialog.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 import * as unstable_ErrorRegion from "./ErrorRegion.js";
+import * as unstable_NavigationRail from "./NavigationRail.js";
 import * as Table from "./Table.js";
 import * as Tabs from "./Tabs.js";
 import * as unstable_Toolbar from "./Toolbar.js";
@@ -16,6 +18,8 @@ export {
   Tree,
   unstable_AccordionItem,
   default2 as unstable_Banner,
+  unstable_Dialog,
   unstable_ErrorRegion,
+  unstable_NavigationRail,
   unstable_Toolbar
 };