@moduix/react 2.5.0 → 2.6.0

package/dist/components/sidebar/Sidebar.js

@@ -4,7 +4,6 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
 import { ChevronLeftIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { Input } from "../input/index.js";
 import { Separator } from "../separator/index.js";
 import { Splitter, useSplitterContext } from "../splitter/index.js";
@@ -67,7 +66,7 @@ const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defau
             orientation: "horizontal",
             "data-side": side,
             "data-slot": "sidebar-root",
-            className: clsx(Sidebar_module.root, normalizeClassName(className))
+            className: clsx(Sidebar_module.root, className)
         })
     });
 });
@@ -93,7 +92,7 @@ const Sidebar_SidebarPanel = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-side": config.side,
         "data-slot": "sidebar-panel",
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: clsx(Sidebar_module.panel, normalizeClassName(className))
+        className: clsx(Sidebar_module.panel, className)
     });
 });
 const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -104,7 +103,7 @@ const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...p
         id: "content",
         "data-side": side,
         "data-slot": "sidebar-inset",
-        className: clsx(Sidebar_module.inset, normalizeClassName(className))
+        className: clsx(Sidebar_module.inset, className)
     });
 });
 const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
@@ -117,7 +116,7 @@ const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ childre
         "aria-label": ariaLabel,
         "data-side": side,
         "data-slot": "sidebar-resize-trigger",
-        className: clsx(Sidebar_module.resizeTrigger, normalizeClassName(className)),
+        className: clsx(Sidebar_module.resizeTrigger, className),
         children: children
     });
 });
@@ -140,7 +139,7 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
         "data-side": config.side,
         "data-slot": "sidebar-trigger",
         "data-state": collapsed ? 'collapsed' : 'expanded',
-        className: clsx(Sidebar_module.trigger, normalizeClassName(className)),
+        className: clsx(Sidebar_module.trigger, className),
         onClick: handleClick,
         ...props,
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
@@ -152,7 +151,7 @@ const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-scope": "sidebar",
         "data-part": "label",
         "data-slot": "sidebar-label",
-        className: clsx(Sidebar_module.label, normalizeClassName(className)),
+        className: clsx(Sidebar_module.label, className),
         ...props
     });
 });
@@ -162,7 +161,7 @@ const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...
         "data-scope": "sidebar",
         "data-part": "header",
         "data-slot": "sidebar-header",
-        className: clsx(Sidebar_module.header, normalizeClassName(className)),
+        className: clsx(Sidebar_module.header, className),
         ...props
     });
 });
@@ -172,17 +171,41 @@ const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ..
         "data-scope": "sidebar",
         "data-part": "content",
         "data-slot": "sidebar-content",
-        className: clsx(Sidebar_module.content, normalizeClassName(className)),
+        className: clsx(Sidebar_module.content, className),
         ...props
     });
 });
+const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const { collapsed } = useSidebar();
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
+        "data-slot": "sidebar-expanded-content",
+        className: className,
+        ...props,
+        hidden: collapsed
+    });
+});
+const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const { collapsed } = useSidebar();
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
+        "data-slot": "sidebar-collapsed-content",
+        className: className,
+        ...props,
+        hidden: !collapsed
+    });
+});
 const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.footer, {
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "footer",
         "data-slot": "sidebar-footer",
-        className: clsx(Sidebar_module.footer, normalizeClassName(className)),
+        className: clsx(Sidebar_module.footer, className),
         ...props
     });
 });
@@ -192,7 +215,7 @@ const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-scope": "sidebar",
         "data-part": "group",
         "data-slot": "sidebar-group",
-        className: clsx(Sidebar_module.group, normalizeClassName(className)),
+        className: clsx(Sidebar_module.group, className),
         ...props
     });
 });
@@ -202,118 +225,107 @@ const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className,
         "data-scope": "sidebar",
         "data-part": "group-label",
         "data-slot": "sidebar-group-label",
-        className: clsx(Sidebar_module.groupLabel, normalizeClassName(className)),
+        className: clsx(Sidebar_module.groupLabel, className),
         ...props
     });
 });
-const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
+const Sidebar_SidebarGroupHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        type: type,
         "data-scope": "sidebar",
-        "data-part": "group-action",
-        "data-slot": "sidebar-group-action",
-        className: clsx(Sidebar_module.groupAction, normalizeClassName(className)),
+        "data-part": "group-header",
+        "data-slot": "sidebar-group-header",
+        className: clsx(Sidebar_module.groupHeader, className),
         ...props
     });
 });
-const Sidebar_SidebarGroupContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.div, {
+const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.button, {
         ref: ref,
+        type: type,
         "data-scope": "sidebar",
-        "data-part": "group-content",
-        "data-slot": "sidebar-group-content",
-        className: clsx(Sidebar_module.groupContent, normalizeClassName(className)),
+        "data-part": "group-action",
+        "data-slot": "sidebar-group-action",
+        className: clsx(Sidebar_module.groupAction, className),
         ...props
     });
 });
-const Sidebar_SidebarMenu = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu",
-        "data-slot": "sidebar-menu",
-        className: clsx(Sidebar_module.menu, normalizeClassName(className)),
+        "data-part": "navigation-list",
+        "data-slot": "sidebar-navigation-list",
+        className: clsx(Sidebar_module.menu, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu-item",
-        "data-slot": "sidebar-menu-item",
-        className: clsx(Sidebar_module.menuItem, normalizeClassName(className)),
+        "data-part": "navigation-item",
+        "data-slot": "sidebar-navigation-item",
+        className: clsx(Sidebar_module.menuItem, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
+const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.button, {
         ref: ref,
         type: type,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
         "data-scope": "sidebar",
-        "data-part": "menu-button",
-        "data-slot": "sidebar-menu-button",
+        "data-part": "navigation-button",
+        "data-slot": "sidebar-navigation-button",
         "data-active": active ? '' : void 0,
         "data-size": size,
-        className: clsx(Sidebar_module.menuButton, normalizeClassName(className)),
-        ...props
-    });
-});
-const Sidebar_SidebarMenuAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
-        ref: ref,
-        type: type,
-        "data-scope": "sidebar",
-        "data-part": "menu-action",
-        "data-slot": "sidebar-menu-action",
-        className: clsx(Sidebar_module.menuAction, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuButton, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.div, {
+const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu-badge",
-        "data-slot": "sidebar-menu-badge",
-        className: clsx(Sidebar_module.menuBadge, normalizeClassName(className)),
+        "data-part": "navigation-badge",
+        "data-slot": "sidebar-navigation-badge",
+        className: clsx(Sidebar_module.menuBadge, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuSub = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ul, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu-sub",
-        "data-slot": "sidebar-menu-sub",
-        className: clsx(Sidebar_module.menuSub, normalizeClassName(className)),
+        "data-part": "navigation-sub-list",
+        "data-slot": "sidebar-navigation-sub-list",
+        className: clsx(Sidebar_module.menuSub, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu-sub-item",
-        "data-slot": "sidebar-menu-sub-item",
-        className: clsx(Sidebar_module.menuSubItem, normalizeClassName(className)),
+        "data-part": "navigation-sub-item",
+        "data-slot": "sidebar-navigation-sub-item",
+        className: clsx(Sidebar_module.menuSubItem, className),
         ...props
     });
 });
-const Sidebar_SidebarMenuSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
+const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.a, {
         ref: ref,
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
         "data-scope": "sidebar",
-        "data-part": "menu-sub-button",
-        "data-slot": "sidebar-menu-sub-button",
+        "data-part": "navigation-sub-button",
+        "data-slot": "sidebar-navigation-sub-button",
         "data-active": active ? '' : void 0,
-        className: clsx(Sidebar_module.menuSubButton, normalizeClassName(className)),
+        className: clsx(Sidebar_module.menuSubButton, className),
         ...props,
         children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
-            "data-slot": "sidebar-menu-sub-label",
+            "data-slot": "sidebar-navigation-sub-label",
             children: children
         }) : children
     });
@@ -347,7 +359,7 @@ const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...p
     return /*#__PURE__*/ jsx(Input.Root, {
         ref: ref,
         "data-slot": "sidebar-input",
-        className: clsx(Sidebar_module.input, normalizeClassName(className)),
+        className: clsx(Sidebar_module.input, className),
         ...props
     });
 });
@@ -355,7 +367,7 @@ const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className,
     return /*#__PURE__*/ jsx(Separator.Root, {
         ref: ref,
         "data-slot": "sidebar-separator",
-        className: clsx(Sidebar_module.separator, normalizeClassName(className)),
+        className: clsx(Sidebar_module.separator, className),
         ...props
     });
 });
@@ -369,20 +381,21 @@ const Sidebar = Object.assign(Sidebar_SidebarRoot, {
     Input: Sidebar_SidebarInput,
     Header: Sidebar_SidebarHeader,
     Content: Sidebar_SidebarContent,
+    ExpandedContent: Sidebar_SidebarExpandedContent,
+    CollapsedContent: Sidebar_SidebarCollapsedContent,
     Footer: Sidebar_SidebarFooter,
     Separator: Sidebar_SidebarSeparator,
     Group: Sidebar_SidebarGroup,
+    GroupHeader: Sidebar_SidebarGroupHeader,
     GroupLabel: Sidebar_SidebarGroupLabel,
     GroupAction: Sidebar_SidebarGroupAction,
-    GroupContent: Sidebar_SidebarGroupContent,
-    Menu: Sidebar_SidebarMenu,
-    MenuItem: Sidebar_SidebarMenuItem,
+    NavigationList: Sidebar_SidebarNavigationList,
+    NavigationItem: Sidebar_SidebarNavigationItem,
     Tooltip: Sidebar_SidebarTooltip,
-    MenuButton: Sidebar_SidebarMenuButton,
-    MenuAction: Sidebar_SidebarMenuAction,
-    MenuBadge: Sidebar_SidebarMenuBadge,
-    MenuSub: Sidebar_SidebarMenuSub,
-    MenuSubItem: Sidebar_SidebarMenuSubItem,
-    MenuSubButton: Sidebar_SidebarMenuSubButton
+    NavigationButton: Sidebar_SidebarNavigationButton,
+    NavigationBadge: Sidebar_SidebarNavigationBadge,
+    NavigationSubList: Sidebar_SidebarNavigationSubList,
+    NavigationSubItem: Sidebar_SidebarNavigationSubItem,
+    NavigationSubButton: Sidebar_SidebarNavigationSubButton
 });
 export { Sidebar, useSidebar };

package/dist/components/sidebar/Sidebar.module.js

@@ -10,17 +10,16 @@ const Sidebar_module = {
     groupLabel: "groupLabel-IvBtsR",
     menuSub: "menuSub-xn2r86",
     groupAction: "groupAction-aoQPc4",
-    menuAction: "menuAction-_BDfHY",
-    menuBadge: "menuBadge-GKf4u4",
     input: "input-nqDU3w",
     menuButton: "menuButton-OAl6eQ",
     inset: "inset-FQP9mn",
     resizeTrigger: "resizeTrigger-xFDgel",
     trigger: "trigger-_fUcgc",
-    groupContent: "groupContent-_s9yul",
+    groupHeader: "groupHeader-N4qFFK",
     menu: "menu-UwagMF",
     menuItem: "menuItem-ktGhRk",
     menuSubItem: "menuSubItem-NeKVH5",
+    menuBadge: "menuBadge-GKf4u4",
     menuSubButton: "menuSubButton-MjeEfX",
     separator: "separator-KuEG4k"
 };