@moduix/react 2.4.0 → 2.5.1

package/README.md

@@ -6,28 +6,18 @@
 
 # @moduix/react
 
-Polished React components for product interfaces, built on
-[Ark UI](https://ark-ui.com/) and styled with native CSS.
+React components built on [Ark UI](https://ark-ui.com/), with accessible behavior, explicit
+composition, and CSS Modules styling.
 
-The package combines Ark's accessible interaction model with shadcn-inspired clarity: calm defaults,
-explicit named parts, consistent states, and a token-first theme contract. No styling framework is
-required.
+moduix gives Ark UI primitives a coherent visual system without adding a styling runtime. Components
+are composed from named parts, styled with regular CSS, and customizable through CSS custom
+properties, `className`, stable `data-slot` hooks, and Ark state attributes.
 
 [Documentation](https://moduix.dev/) ·
 [Quick start](https://moduix.dev/docs/quick-start) ·
 [Components](https://moduix.dev/docs/components) ·
 [Tokens](https://moduix.dev/docs/tokens)
 
-## Highlights
-
-- Ark-aligned composition, controlled and uncontrolled state, context, callbacks, and form behavior.
-- Consistent `36px` primary controls and `32px` popup rows through shared size tokens.
-- Native CSS, CSS Modules, cascade layers, semantic tokens, and component-level variables.
-- Stable moduix `data-slot` hooks alongside Ark part and state attributes.
-- Optional reset and curated `dense`, `soft`, and `contrast` presets.
-- React 18 and 19 support.
-- A matching hosted shadcn registry when source ownership is the better workflow.
-
 ## Install
 
 Install the package and its Ark UI peer dependency:
@@ -36,42 +26,35 @@ Install the package and its Ark UI peer dependency:
 npm install @moduix/react @ark-ui/react
 ```
 
-`react`, `react-dom`, and `@ark-ui/react` are peer dependencies, so the package does not ship
-duplicate framework or primitive runtimes.
-
-## Compatibility
+`react`, `react-dom`, and `@ark-ui/react` are peer dependencies. moduix supports React 18 and 19.
 
-| Environment | Supported versions                                                        |
-| ----------- | ------------------------------------------------------------------------- |
-| React       | 18 and 19                                                                 |
-| Browsers    | The latest two stable releases of Chrome, Edge, and Firefox; Safari 16.4+ |
-| SSR         | Node.js 20+ with native ESM imports                                       |
+The optional `Chart` component also requires its TanStack peer dependency:
 
-Published JavaScript uses ES2023 syntax. `@moduix/react` is ESM-only: use `import` (or dynamic
-`import()` from CommonJS); `require()` is not supported. Transpile the package in your application
-build if you support an older environment.
+```bash
+npm install @tanstack/charts
+```
 
-## Add Styles
+## Add styles
 
-Import the required foundation stylesheet once in your application entry point:
+Import the shared foundation stylesheet once in your application entry point:
 
 ```tsx
 import '@moduix/react/style.css';
 ```
 
-This entrypoint provides shared design tokens and base styles. Component imports bring along their
-own CSS.
+It provides the shared tokens and base layer styles. Component imports carry their own CSS Modules,
+so their styles follow the components that use them.
 
-The reset is optional and intentionally separate:
+The reset is optional. Import it first when you choose to use it:
 
 ```tsx
 import '@moduix/react/reset.css';
 import '@moduix/react/style.css';
 ```
 
-## Use Components
+## Use components
 
-Import the component subpaths you use and compose their named parts:
+Import component subpaths and compose their named parts:
 
 ```tsx
 import { Button } from '@moduix/react/button';
@@ -79,7 +62,7 @@ import { Dialog } from '@moduix/react/dialog';
 
 export function Example() {
   return (
-    <Dialog.Root>
+    <Dialog>
       <Dialog.Trigger asChild>
         <Button>Open settings</Button>
       </Dialog.Trigger>
@@ -97,52 +80,39 @@ export function Example() {
           </Dialog.Footer>
         </Dialog.Content>
       </Dialog.Positioner>
-    </Dialog.Root>
+    </Dialog>
   );
 }
 ```
 
-moduix keeps important Ark anatomy visible. Higher-level convenience parts are documented as the
-recommended path where they exist, while low-level composition remains available for advanced
-cases.
+Use the short root alias, such as `Dialog`, in application code. The matching `Dialog.Root` export is
+available when an explicit namespace improves a local abstraction, but it is not required.
 
-## Theme the System
+## Customize deliberately
 
-Theme values are CSS custom properties. Change broad semantic decisions first and use component
-aliases for deliberate exceptions:
+CSS Modules keep the package defaults locally scoped while leaving clear extension points for your
+application:
 
-```css
-:root {
-  --moduix-primary: oklch(0.52 0.18 145);
-  --moduix-radius: 0.75rem;
-  --moduix-size-md: 36px;
-  --moduix-size-sm: 32px;
-}
+- use `className` on a root or named part for local CSS;
+- use stable moduix `data-slot` hooks and Ark state attributes for structural or state-specific
+  selectors;
+- override public CSS custom properties at the theme, semantic, or component layer.
 
-.compact-toolbar {
-  --moduix-button-size-md: 32px;
-}
-```
-
-The token hierarchy is:
-
-1. theme primitives such as `--moduix-primary`, `--moduix-spacing-2`, `--moduix-size-md`, and `--moduix-radius`;
-2. semantic aliases such as `--moduix-color-primary`, `--moduix-spacing-md`, and `--moduix-radius-md`;
-3. shared family defaults such as `--moduix-popup-item-min-height` and `--moduix-focus-ring-width`;
-4. component aliases such as `--moduix-input-height` and `--moduix-select-item-min-height`.
-
-Library styles use predictable cascade layers:
+For example, set product-level theme primitives in your own stylesheet:
 
 ```css
-@layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
+:root {
+  --moduix-primary: oklch(0.5 0.17 285);
+  --moduix-radius: 0.875rem;
+}
 ```
 
-Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
-state attributes supported by their primitives.
+See [Tokens](https://moduix.dev/docs/tokens) and [Themes](https://moduix.dev/docs/themes) for the
+token hierarchy and component-specific variables.
 
-## Optional Presets
+## Optional presets
 
-Import one preset after `style.css` and activate it on the document root:
+Import one preset after `style.css` and enable it on the document root:
 
 ```tsx
 import '@moduix/react/style.css';
@@ -153,32 +123,20 @@ import '@moduix/react/presets/soft.css';
 <html data-moduix-theme="soft"></html>
 ```
 
-Available presets are `dense`, `soft`, and `contrast`. See
-[Themes](https://moduix.dev/docs/themes) before combining presets or creating a reusable custom
-theme.
+The available presets are `dense`, `soft`, and `contrast`.
 
-## Prefer to Own the Source?
+## Prefer to own the source?
 
-The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
-component contracts. Create the ready-to-use `components.json` from the
-[complete Quick Start](https://moduix.dev/docs/quick-start), then add the components you need:
+The hosted shadcn-compatible registry provides the same Ark-aligned component contracts in source
+form. Set up `components.json` with the [Quick start](https://moduix.dev/docs/quick-start), then add
+the components you need:
 
 ```bash
 npx shadcn@latest add @moduix-react/button @moduix-react/dialog
 ```
 
-Generated files are installed under `@/components/moduix/*` and `@/lib/moduix/*`. Read the
-[complete Quick Start](https://moduix.dev/docs/quick-start) for alias setup, registry inspection,
-dry runs, and generated stylesheet imports.
-
-## Acknowledgements
-
-- [Ark UI](https://ark-ui.com/) provides the primitive behavior and composition model.
-- [Chakra UI](https://chakra-ui.com/) informs Ark-aligned ergonomics and design-system craft.
-- [shadcn/ui](https://ui.shadcn.com/) inspires open-code delivery, beautiful defaults, and practical
-  documentation.
-- [UnoCSS](https://unocss.dev/) and [Tailwind CSS](https://tailwindcss.com/) provide foundations
-  adapted by the optional reset.
+Generated files include the component source, CSS Modules, and required supporting files. Their
+destination paths are controlled by your `components.json` aliases.
 
 ## Links
 

package/dist/components/angle-slider/AngleSlider_module.css

@@ -47,12 +47,12 @@
 
   @media (hover: hover) {
     .control-TKuxcQ:not([data-disabled], [data-readonly]):hover {
-      background-color: var(--moduix-angle-slider-track-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 92%, var(--moduix-color-foreground)));
+      background-color: var(--moduix-angle-slider-track-bg-hover, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
     }
   }
 
   .control-TKuxcQ:not([data-disabled], [data-readonly]):active {
-    background-color: var(--moduix-angle-slider-track-bg-active, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-foreground)));
+    background-color: var(--moduix-angle-slider-track-bg-active, var(--moduix-angle-slider-track-bg, var(--moduix-color-muted)));
   }
 
   .control-TKuxcQ:after {

package/dist/components/carousel/Carousel_module.css

@@ -47,7 +47,7 @@
     user-select: none;
   }
 
-  .root-WpPvZz[data-orientation="vertical"] > .itemGroup-a7LtFI {
+  .itemGroup-a7LtFI[data-orientation="vertical"] {
     overscroll-behavior-x: auto;
     overscroll-behavior-y: contain;
     height: 100%;
@@ -130,7 +130,7 @@
     display: flex;
   }
 
-  .root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ {
+  .indicatorGroup-TO_gj_[data-orientation="vertical"] {
     flex-direction: column;
   }
 
@@ -170,7 +170,7 @@
     opacity: var(--moduix-opacity-disabled);
   }
 
-  :is(.root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK)[data-current] {
+  .indicator-cjLdPK[data-orientation="vertical"][data-current] {
     width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
     height: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
   }

package/dist/components/date-picker/DatePicker_module.css

@@ -111,12 +111,12 @@
     cursor: default;
   }
 
-  .control-pfUmnK:has(.input-c9DrcO + .input-c9DrcO) .input-c9DrcO {
+  .control-pfUmnK:has(.input-c9DrcO[data-index="1"]) .input-c9DrcO {
     min-width: min(var(--moduix-date-picker-range-input-min-width, 7.5rem), 100%);
     padding-inline-end: var(--moduix-date-picker-input-padding-x-start, var(--moduix-spacing-3-5));
   }
 
-  .control-pfUmnK:has(.input-c9DrcO + .input-c9DrcO) .input-c9DrcO:last-of-type {
+  .control-pfUmnK .input-c9DrcO[data-index="1"] {
     padding-inline-end: var(--moduix-date-picker-input-padding-x-end, 4.25rem);
   }
 
@@ -246,6 +246,13 @@
     pointer-events: none;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .content-pUiIqD[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
   .root-sgMq4I[data-inline] .content-pUiIqD {
     min-width: var(--moduix-date-picker-inline-content-min-width, 18rem);
     box-shadow: var(--moduix-date-picker-inline-content-shadow, none);

package/dist/components/lightbox/Lightbox_module.css

@@ -119,7 +119,6 @@
 
   .gallery-d_JY9F {
     --moduix-carousel-gap: var(--moduix-lightbox-gallery-gap, var(--moduix-spacing-4));
-    width: auto;
     max-width: min(var(--moduix-lightbox-gallery-max-width, 72rem),
       calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
     justify-self: center;

package/dist/components/sidebar/Sidebar.d.ts

@@ -4,7 +4,6 @@ import { Tooltip } from '../tooltip';
 type SidebarSide = 'left' | 'right';
 type SidebarRootProps = Omit<ComponentProps<typeof Splitter.Root>, 'orientation' | 'panels'> & {
     panelId?: string;
-    panels?: ComponentProps<typeof Splitter.Root>['panels'];
     side?: SidebarSide;
 };
 type SidebarPanelProps = Omit<ComponentProps<typeof Splitter.Panel>, 'id'>;
@@ -28,6 +27,8 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
     }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
     Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    ExpandedContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    CollapsedContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
         orientation?: "horizontal" | "vertical";
@@ -38,22 +39,22 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
     GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
     GroupAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
     GroupContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
-    Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
-    MenuItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+    NavigationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
+    NavigationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
     Tooltip: ({ children, content, openDelay, closeDelay, positioning, ...props }: Omit<ComponentProps<typeof Tooltip>, "children" | "disabled" | "positioning"> & {
         children: ComponentProps<typeof Tooltip.Trigger>["children"];
         content: ComponentProps<typeof Tooltip.Content>["children"];
         positioning?: ComponentProps<typeof Tooltip>["positioning"];
     }) => import("react").JSX.Element;
-    MenuButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    NavigationButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
         active?: boolean;
         size?: "sm" | "md" | "lg";
     } & import("react").RefAttributes<HTMLButtonElement>>;
-    MenuAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
-    MenuBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
-    MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
-    MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
-    MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    NavigationAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+    NavigationBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    NavigationSubList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
+    NavigationSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+    NavigationSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
         active?: boolean;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };

package/dist/components/sidebar/Sidebar.js

@@ -53,7 +53,7 @@ function toggleSidebarPanel(splitter, panelId) {
     if (splitter.isPanelCollapsed(panelId)) return void splitter.expandPanel(panelId);
     splitter.collapsePanel(panelId);
 }
-const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, panels, defaultSize, panelId = 'sidebar', side = 'left', ...props }, ref) {
+const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defaultSize, panelId = 'sidebar', side = 'left', ...props }, ref) {
     return /*#__PURE__*/ jsx(SidebarConfigContext.Provider, {
         value: {
             panelId,
@@ -62,7 +62,7 @@ const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, panel
         children: /*#__PURE__*/ jsx(Splitter.Root, {
             ...props,
             ref: ref,
-            panels: panels ?? getDefaultPanels(side, panelId),
+            panels: getDefaultPanels(side, panelId),
             defaultSize: defaultSize ?? getDefaultSidebarSize(side),
             orientation: "horizontal",
             "data-side": side,
@@ -118,7 +118,7 @@ const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ childre
         "data-side": side,
         "data-slot": "sidebar-resize-trigger",
         className: clsx(Sidebar_module.resizeTrigger, normalizeClassName(className)),
-        children: void 0 === children ? null : children
+        children: children
     });
 });
 const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ className, children, onClick, type = 'button', 'aria-label': ariaLabel = 'Toggle sidebar', ...props }, ref) {
@@ -176,6 +176,30 @@ const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ 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: normalizeClassName(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: normalizeClassName(className),
+        ...props,
+        hidden: !collapsed
+    });
+});
 const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.footer, {
         ref: ref,
@@ -227,91 +251,95 @@ const Sidebar_SidebarGroupContent = /*#__PURE__*/ forwardRef(function({ classNam
         ...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",
+        "data-part": "navigation-list",
+        "data-slot": "sidebar-navigation-list",
         className: clsx(Sidebar_module.menu, normalizeClassName(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",
+        "data-part": "navigation-item",
+        "data-slot": "sidebar-navigation-item",
         className: clsx(Sidebar_module.menuItem, normalizeClassName(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) {
+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": "menu-action",
-        "data-slot": "sidebar-menu-action",
+        "data-part": "navigation-action",
+        "data-slot": "sidebar-navigation-action",
         className: clsx(Sidebar_module.menuAction, normalizeClassName(className)),
         ...props
     });
 });
-const Sidebar_SidebarMenuBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
         "data-scope": "sidebar",
-        "data-part": "menu-badge",
-        "data-slot": "sidebar-menu-badge",
+        "data-part": "navigation-badge",
+        "data-slot": "sidebar-navigation-badge",
         className: clsx(Sidebar_module.menuBadge, normalizeClassName(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",
+        "data-part": "navigation-sub-list",
+        "data-slot": "sidebar-navigation-sub-list",
         className: clsx(Sidebar_module.menuSub, normalizeClassName(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",
+        "data-part": "navigation-sub-item",
+        "data-slot": "sidebar-navigation-sub-item",
         className: clsx(Sidebar_module.menuSubItem, normalizeClassName(className)),
         ...props
     });
 });
-const Sidebar_SidebarMenuSubButton = /*#__PURE__*/ forwardRef(function({ active = false, 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)),
-        ...props
+        ...props,
+        children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
+            "data-slot": "sidebar-navigation-sub-label",
+            children: children
+        }) : children
     });
 });
 const Sidebar_SidebarTooltip = function({ children, content, openDelay = 200, closeDelay = 0, positioning, ...props }) {
@@ -365,20 +393,22 @@ 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,
     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,
+    NavigationAction: Sidebar_SidebarNavigationAction,
+    NavigationBadge: Sidebar_SidebarNavigationBadge,
+    NavigationSubList: Sidebar_SidebarNavigationSubList,
+    NavigationSubItem: Sidebar_SidebarNavigationSubItem,
+    NavigationSubButton: Sidebar_SidebarNavigationSubButton
 });
 export { Sidebar, useSidebar };