@moduix/react 2.5.1 → 2.7.0

package/dist/components/sidebar/Sidebar.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
+import { Splitter } from "@ark-ui/react/splitter";
 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";
+import { Splitter as index_js_Splitter, useSplitterContext } from "../splitter/index.js";
+import Splitter_module from "../splitter/Splitter.module.js";
 import { Tooltip } from "../tooltip/index.js";
 import Sidebar_module from "./Sidebar.module.js";
 const sidebarPanel = {
@@ -53,7 +54,7 @@ function toggleSidebarPanel(splitter, panelId) {
     if (splitter.isPanelCollapsed(panelId)) return void splitter.expandPanel(panelId);
     splitter.collapsePanel(panelId);
 }
-const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defaultSize, panelId = 'sidebar', side = 'left', ...props }, ref) {
+const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defaultSize, panelId = 'sidebar', side = 'left', style, ...props }, ref) {
     return /*#__PURE__*/ jsx(SidebarConfigContext.Provider, {
         value: {
             panelId,
@@ -67,7 +68,12 @@ 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(Splitter_module.root, Sidebar_module.root, className),
+            style: {
+                width: 'var(--moduix-splitter-width, 100%)',
+                height: 'var(--moduix-splitter-height, 28rem)',
+                ...style
+            }
         })
     });
 });
@@ -93,7 +99,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(Splitter_module.panel, Sidebar_module.panel, className)
     });
 });
 const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -104,21 +110,22 @@ 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(Splitter_module.panel, Sidebar_module.inset, className)
     });
 });
-const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
+const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ asChild, children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
     const { panelId, side } = useContext(SidebarConfigContext);
     const id = 'left' === side ? `${panelId}:content` : `content:${panelId}`;
     return /*#__PURE__*/ jsx(Splitter.ResizeTrigger, {
         ...props,
         ref: ref,
+        asChild: asChild,
         id: id,
         "aria-label": ariaLabel,
         "data-side": side,
         "data-slot": "sidebar-resize-trigger",
-        className: clsx(Sidebar_module.resizeTrigger, normalizeClassName(className)),
-        children: children
+        className: clsx(Splitter_module.resizeTrigger, Sidebar_module.resizeTrigger, className),
+        children: void 0 !== children || asChild ? children : /*#__PURE__*/ jsx(index_js_Splitter.ResizeTriggerIndicator, {})
     });
 });
 const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, children, onClick, type = 'button', 'aria-label': ariaLabel = 'Toggle sidebar', ...props }, ref) {
@@ -138,11 +145,11 @@ const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, ch
         "data-scope": "sidebar",
         "data-part": "trigger",
         "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,
+        "data-slot": "sidebar-trigger",
         children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
     });
 });
@@ -151,9 +158,9 @@ const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...p
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "label",
-        "data-slot": "sidebar-label",
-        className: clsx(Sidebar_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.label, className),
+        ...props,
+        "data-slot": "sidebar-label"
     });
 });
 const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -161,9 +168,9 @@ const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "header",
-        "data-slot": "sidebar-header",
-        className: clsx(Sidebar_module.header, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.header, className),
+        ...props,
+        "data-slot": "sidebar-header"
     });
 });
 const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -171,9 +178,9 @@ const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ..
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "content",
-        "data-slot": "sidebar-content",
-        className: clsx(Sidebar_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.content, className),
+        ...props,
+        "data-slot": "sidebar-content"
     });
 });
 const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -182,9 +189,9 @@ const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ class
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "expanded-content",
-        "data-slot": "sidebar-expanded-content",
-        className: normalizeClassName(className),
+        className: className,
         ...props,
+        "data-slot": "sidebar-expanded-content",
         hidden: collapsed
     });
 });
@@ -194,9 +201,9 @@ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ clas
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "collapsed-content",
-        "data-slot": "sidebar-collapsed-content",
-        className: normalizeClassName(className),
+        className: className,
         ...props,
+        "data-slot": "sidebar-collapsed-content",
         hidden: !collapsed
     });
 });
@@ -205,9 +212,9 @@ const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "footer",
-        "data-slot": "sidebar-footer",
-        className: clsx(Sidebar_module.footer, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.footer, className),
+        ...props,
+        "data-slot": "sidebar-footer"
     });
 });
 const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -215,9 +222,9 @@ const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...p
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "group",
-        "data-slot": "sidebar-group",
-        className: clsx(Sidebar_module.group, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.group, className),
+        ...props,
+        "data-slot": "sidebar-group"
     });
 });
 const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -225,30 +232,30 @@ const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className,
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "group-label",
-        "data-slot": "sidebar-group-label",
-        className: clsx(Sidebar_module.groupLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.groupLabel, className),
+        ...props,
+        "data-slot": "sidebar-group-label"
     });
 });
-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)),
-        ...props
+        "data-part": "group-header",
+        className: clsx(Sidebar_module.groupHeader, className),
+        ...props,
+        "data-slot": "sidebar-group-header"
     });
 });
-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)),
-        ...props
+        "data-part": "group-action",
+        className: clsx(Sidebar_module.groupAction, className),
+        ...props,
+        "data-slot": "sidebar-group-action"
     });
 });
 const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -256,9 +263,9 @@ const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ classN
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-list",
-        "data-slot": "sidebar-navigation-list",
-        className: clsx(Sidebar_module.menu, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menu, className),
+        ...props,
+        "data-slot": "sidebar-navigation-list"
     });
 });
 const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -266,9 +273,9 @@ const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ classN
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-item",
-        "data-slot": "sidebar-navigation-item",
-        className: clsx(Sidebar_module.menuItem, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menuItem, className),
+        ...props,
+        "data-slot": "sidebar-navigation-item"
     });
 });
 const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
@@ -278,32 +285,21 @@ const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ acti
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
         "data-scope": "sidebar",
         "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_SidebarNavigationAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.button, {
-        ref: ref,
-        type: type,
-        "data-scope": "sidebar",
-        "data-part": "navigation-action",
-        "data-slot": "sidebar-navigation-action",
-        className: clsx(Sidebar_module.menuAction, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menuButton, className),
+        ...props,
+        "data-slot": "sidebar-navigation-button"
     });
 });
 const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
-    return /*#__PURE__*/ jsx(ark.div, {
+    return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-badge",
-        "data-slot": "sidebar-navigation-badge",
-        className: clsx(Sidebar_module.menuBadge, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menuBadge, className),
+        ...props,
+        "data-slot": "sidebar-navigation-badge"
     });
 });
 const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -311,9 +307,9 @@ const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ cla
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-sub-list",
-        "data-slot": "sidebar-navigation-sub-list",
-        className: clsx(Sidebar_module.menuSub, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menuSub, className),
+        ...props,
+        "data-slot": "sidebar-navigation-sub-list"
     });
 });
 const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -321,9 +317,9 @@ const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ cla
         ref: ref,
         "data-scope": "sidebar",
         "data-part": "navigation-sub-item",
-        "data-slot": "sidebar-navigation-sub-item",
-        className: clsx(Sidebar_module.menuSubItem, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.menuSubItem, className),
+        ...props,
+        "data-slot": "sidebar-navigation-sub-item"
     });
 });
 const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
@@ -332,10 +328,10 @@ const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ a
         "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
         "data-scope": "sidebar",
         "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,
+        "data-slot": "sidebar-navigation-sub-button",
         children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
             "data-slot": "sidebar-navigation-sub-label",
             children: children
@@ -370,17 +366,17 @@ const Sidebar_SidebarTooltip = function({ children, content, openDelay = 200, cl
 const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Input.Root, {
         ref: ref,
-        "data-slot": "sidebar-input",
-        className: clsx(Sidebar_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.input, className),
+        ...props,
+        "data-slot": "sidebar-input"
     });
 });
 const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Separator.Root, {
         ref: ref,
-        "data-slot": "sidebar-separator",
-        className: clsx(Sidebar_module.separator, normalizeClassName(className)),
-        ...props
+        className: clsx(Sidebar_module.separator, className),
+        ...props,
+        "data-slot": "sidebar-separator"
     });
 });
 const Sidebar = Object.assign(Sidebar_SidebarRoot, {
@@ -398,14 +394,13 @@ const Sidebar = Object.assign(Sidebar_SidebarRoot, {
     Footer: Sidebar_SidebarFooter,
     Separator: Sidebar_SidebarSeparator,
     Group: Sidebar_SidebarGroup,
+    GroupHeader: Sidebar_SidebarGroupHeader,
     GroupLabel: Sidebar_SidebarGroupLabel,
     GroupAction: Sidebar_SidebarGroupAction,
-    GroupContent: Sidebar_SidebarGroupContent,
     NavigationList: Sidebar_SidebarNavigationList,
     NavigationItem: Sidebar_SidebarNavigationItem,
     Tooltip: Sidebar_SidebarTooltip,
     NavigationButton: Sidebar_SidebarNavigationButton,
-    NavigationAction: Sidebar_SidebarNavigationAction,
     NavigationBadge: Sidebar_SidebarNavigationBadge,
     NavigationSubList: Sidebar_SidebarNavigationSubList,
     NavigationSubItem: Sidebar_SidebarNavigationSubItem,

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"
 };