@stratakit/structures 0.3.2 → 0.4.1

package/dist/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
                   }
@@ -152,11 +152,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/NavigationRail.d.ts

@@ -0,0 +1,203 @@
+import * as React from "react";
+import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
+interface NavigationRailProps extends BaseProps<"nav"> {
+}
+/**
+ * The `NavigationRail` presents top-level navigation items in a vertical orientation.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Root>
+ *   <NavigationRail.Header>
+ *     <IconButton label="Home" icon={applicationIcon} href="/" />
+ *     <NavigationRail.ToggleButton />
+ *   </NavigationRail.Header>
+ *
+ *   <NavigationRail.Content>
+ *     <NavigationRail.List>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Dashboard" icon={dashboardIcon} href="/dashboard" />
+ *       </NavigationRail.ListItem>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Projects" icon={projectsIcon} href="/projects" />
+ *       </NavigationRail.ListItem>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Reports" icon={reportsIcon} href="/reports" />
+ *       </NavigationRail.ListItem>
+ *     </NavigationRail.List>
+ *
+ *     <NavigationRail.Footer>
+ *       <NavigationRail.List>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Help" icon={helpIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Profile" icon={userIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *       </NavigationRail.List>
+ *    </NavigationRail.Footer>
+ *   </NavigationRail.Content>
+ * </NavigationRail.Root>
+ * ```
+ */
+declare const NavigationRailRoot: React.ForwardRefExoticComponent<NavigationRailProps & React.RefAttributes<HTMLElement>>;
+interface NavigationRailHeaderProps extends BaseProps<"header"> {
+}
+/**
+ * `NavigationRail.Header` represents the header (i.e. top) section of the `NavigationRail` and is
+ * visually aligned with the page header next to it.
+ *
+ * Can contain a logo and a `NavigationRail.ToggleButton` to collapse/expand the `NavigationRail`.
+ *
+ * **Note**: This component is expected to hug the top edge of the page.
+ */
+declare const NavigationRailHeader: React.ForwardRefExoticComponent<NavigationRailHeaderProps & React.RefAttributes<HTMLElement>>;
+interface NavigationRailToggleButtonProps extends Omit<FocusableProps<"button">, "children"> {
+    /**
+     * Customize the accessible label of the toggle button.
+     *
+     * @default "Expand navigation".
+     */
+    label?: string;
+}
+/**
+ * `NavigationRail.ToggleButton` toggles the collapsed state of the `NavigationRail`.
+ * It is typically placed inside `NavigationRail.Header`, next to the logo.
+ */
+declare const NavigationRailToggleButton: React.ForwardRefExoticComponent<NavigationRailToggleButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface NavigationRailContentProps extends BaseProps {
+}
+/**
+ * `NavigationRail.Content` is a wraps the main content of the `NavigationRail`, including
+ * the primary navigation list and an optional footer.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Content>
+ *   <NavigationRail.List>…</NavigationRail.List>
+ *
+ *   <NavigationRail.Footer>
+ *     <NavigationRail.List>…</NavigationRail.List>
+ *   </NavigationRail.Footer>
+ * </NavigationRail.Content>
+ * ```
+ */
+declare const NavigationRailContent: React.ForwardRefExoticComponent<NavigationRailContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailListProps extends BaseProps<"div"> {
+}
+/**
+ * The `NavigationRail.List` represents a list of top-level navigation items.
+ *
+ * It should be used within `NavigationRail.Content` and should contain `NavigationRail.ListItem` elements,
+ * which in turn can contain `NavigationRail.Anchor` or `NavigationRail.Button`.
+ *
+ * Example (with `NavigationRail.Anchor`):
+ * ```tsx
+ * <NavigationRail.List>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ *   </NavigationRail.ListItem>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Anchor label="Projects" icon={projectsIcon} href="/projects" />
+ *   </NavigationRail.ListItem>
+ * </NavigationRail.List>
+ * ```
+ *
+ * Example (with `NavigationRail.Button`):
+ * ```tsx
+ * <NavigationRail.List>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Button label="Help" icon={helpIcon} onClick={…} />
+ *   </NavigationRail.ListItem>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…}  />
+ *   </NavigationRail.ListItem>
+ * </NavigationRail.List>
+ * ```
+ *
+ * Multiple `NavigationRail.List` elements can be used together and be separated by a `Divider`.
+ */
+declare const NavigationRailList: React.ForwardRefExoticComponent<NavigationRailListProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailListItemProps extends BaseProps<"div"> {
+}
+/**
+ * The `NavigationRail.Item` represents a single navigation list item, which should contain
+ * either a `NavigationRail.Anchor` or a `NavigationRail.Button`.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ * </NavigationRail.ListItem>
+ * // or
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…} />
+ * </NavigationRail.ListItem>
+ * ```
+ *
+ * **Note:** This is a non-interactive wrapper element and should not directly handle user interactions.
+ */
+declare const NavigationRailListItem: React.ForwardRefExoticComponent<NavigationRailListItemProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailItemActionOwnProps {
+    label: string;
+    icon: string | React.JSX.Element;
+}
+interface NavigationRailAnchorProps extends Omit<BaseProps<"a">, "children">, NavigationRailItemActionOwnProps {
+    /**
+     * Whether the anchor is currently active (i.e. represents the current page).
+     */
+    active?: boolean;
+}
+/**
+ * `NavigationRail.Anchor` is used for top-level navigation items that link to major pages.
+ *
+ * Should be used inside `NavigationRail.ListItem` and must have a short `label` and a recognizable `icon`.
+ * The `label` will be shown as a tooltip when the `NavigationRail` is collapsed.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ * </NavigationRail.ListItem>
+ * ```
+ */
+declare const NavigationRailAnchor: React.ForwardRefExoticComponent<NavigationRailAnchorProps & React.RefAttributes<HTMLElement | HTMLAnchorElement>>;
+interface NavigationRailButtonProps extends Omit<BaseProps<"button">, "children">, NavigationRailItemActionOwnProps {
+}
+/**
+ * `NavigationRail.Button` is used for actions that do not navigate to a new page, but rather perform
+ * an in-page action, such as opening a dialog or menu.
+ *
+ * Should be used inside `NavigationRail.ListItem` and must have a short `label` and a recognizable `icon`.
+ * The `label` will be shown as a tooltip when the `NavigationRail` is collapsed.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Button label="Notifications" icon={notificationsIcon} onClick={showNotificationsDialog} />
+ * </NavigationRail.ListItem>
+ * ```
+ */
+declare const NavigationRailButton: React.ForwardRefExoticComponent<NavigationRailButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface NavigationRailFooterProps extends BaseProps<"footer"> {
+}
+/**
+ * `NavigationRail.Footer` is typically used for grouping secondary actions list near the bottom
+ * of the `NavigationRail`, away from the main navigation items.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Content>
+ *   <NavigationRail.List>…</NavigationRail.List>
+ *
+ *   <NavigationRail.Footer>
+ *     <NavigationRail.List>…</NavigationRail.List>
+ *   </NavigationRail.Footer>
+ * </NavigationRail.Content>
+ * ```
+ */
+declare const NavigationRailFooter: React.ForwardRefExoticComponent<NavigationRailFooterProps & React.RefAttributes<HTMLElement>>;
+export { NavigationRailRoot as Root, NavigationRailHeader as Header, NavigationRailToggleButton as ToggleButton, NavigationRailContent as Content, NavigationRailList as List, NavigationRailListItem as ListItem, NavigationRailButton as Button, NavigationRailAnchor as Anchor, NavigationRailFooter as Footer, };

package/dist/NavigationRail.js

@@ -0,0 +1,201 @@
+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 }) });
+  }
+);
+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
+      }
+    );
+  }
+);
+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
+      }
+    );
+  }
+);
+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 })
+      ]
+    }
+  );
+});
+const NavigationRailContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}NavigationRailContent", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const NavigationRailList = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "list",
+        ...props,
+        className: cx("\u{1F95D}NavigationRailList", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const NavigationRailListItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "listitem",
+        ...props,
+        className: cx("\u{1F95D}NavigationRailListItem", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
+  const collapsed = useNavigationRailState((state) => state.collapsed);
+  const { label, icon, ...rest } = props;
+  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;
+});
+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 })
+      }
+    );
+  }
+);
+const NavigationRailButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      NavigationRailItemAction,
+      {
+        label,
+        icon,
+        render: /* @__PURE__ */ jsx(Role.button, { ...rest, ref: forwardedRef })
+      }
+    );
+  }
+);
+const NavigationRailFooter = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        render: /* @__PURE__ */ jsx("footer", {}),
+        ...props,
+        className: cx("\u{1F95D}NavigationRailFooter", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+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/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)
     }
   ) });
 });
@@ -38,7 +38,7 @@ const CustomTable = forwardRef(
         "aria-labelledby": captionId,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table", props.className)
+        className: cx("\u{1F95D}Table", props.className)
       }
     ) });
   }
@@ -55,7 +55,7 @@ const TableHeader = forwardRef(
         role,
         ...props,
         ref: forwardedRef,
-        className: cx("\u{1F95D}-table-header", props.className)
+        className: cx("\u{1F95D}TableHeader", props.className)
       }
     ) });
   }
@@ -70,7 +70,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)
     }
   );
 });
@@ -85,7 +85,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)
     }
   );
 });
@@ -108,7 +108,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)
       }
     );
   }
@@ -129,7 +129,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/Tabs.d.ts

@@ -1,6 +1,6 @@
 import * as AkTab from "@ariakit/react/tab";
 import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
-interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+interface TabsProviderProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
 }
 /**
  * A set of tabs that can be used to switch between different views.
@@ -9,7 +9,7 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
  *
  * Example:
  * ```tsx
- * <Tabs.Root>
+ * <Tabs.Provider>
  *   <Tabs.TabList>
  *     <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
  *     <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
@@ -19,7 +19,7 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
  *   <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
  *   <Tabs.TabPanel tabId="tab-2">Tab 2 content</Tabs.TabPanel>
  *   <Tabs.TabPanel tabId="tab-3">Tab 3 content</Tabs.TabPanel>
- * </Tabs.Root>
+ * </Tabs.Provider>
  * ```
  *
  * The tabs and their panels are connected by matching the `id` prop on the `Tabs.Tab` component with
@@ -30,8 +30,8 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
  *
  * **Note**: `Tabs` should _not_ be used for navigation; it is only intended for switching smaller views within an existing page.
  */
-declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Tabs {
+declare function TabsProvider(props: TabsProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsProvider {
     var displayName: string;
 }
 interface TabListProps extends BaseProps {
@@ -40,7 +40,7 @@ interface TabListProps extends BaseProps {
 }
 /**
  * A simple container for the tab buttons.
- * Should be used as a child of `Tabs.Root` and consist of the individual `Tabs.Tab` components.
+ * Should be used as a child of `Tabs.Provider` and consist of the individual `Tabs.Tab` components.
  *
  * Example:
  * ```tsx
@@ -57,7 +57,7 @@ interface TabProps extends Omit<FocusableProps<"button">, "id"> {
      * The globally unique id of the tab. This will be used to identify the tab
      * and connect it to the corresponding `Tabs.TabPanel` via the `tabId`.
      *
-     * The `selectedId` state of `Tabs.Root` will also be based on this id.
+     * The `selectedId` state of `Tabs.Provider` will also be based on this id.
      */
     id: string;
 }
@@ -86,7 +86,7 @@ declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("
 interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "unmountOnHide" | "focusable">, Required<Pick<AkTab.TabPanelProps, "tabId">> {
 }
 /**
- * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.
+ * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Provider`.
  * The `tabId` prop should match the `id` prop of the corresponding `Tabs.Tab` component.
  *
  * Example:
@@ -95,4 +95,4 @@ interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps,
  * ```
  */
 declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
-export { Tabs as Root, TabList, Tab, TabPanel };
+export { TabsProvider as Provider, TabList, Tab, TabPanel };

package/dist/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,
@@ -63,8 +63,8 @@ const TabList = forwardRef((props, forwardedRef) => {
     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
     }
   );
@@ -75,7 +75,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
     }
   );
@@ -85,13 +85,13 @@ 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
     }
   );
 });
 export {
-  Tabs as Root,
+  TabsProvider as Provider,
   Tab,
   TabList,
   TabPanel