@moduix/react 2.5.0 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +44 -86
  2. package/dist/components/carousel/Carousel_module.css +3 -3
  3. package/dist/components/date-picker/DatePicker_module.css +9 -2
  4. package/dist/components/lightbox/Lightbox_module.css +0 -1
  5. package/dist/components/sidebar/Sidebar.d.ts +10 -8
  6. package/dist/components/sidebar/Sidebar.js +59 -33
  7. package/dist/components/sidebar/Sidebar_module.css +109 -79
  8. package/package.json +8 -8
package/README.md CHANGED
@@ -6,28 +6,18 @@
6
6
 
7
7
  # @moduix/react
8
8
 
9
- Polished React components for product interfaces, built on
10
- [Ark UI](https://ark-ui.com/) and styled with native CSS.
9
+ React components built on [Ark UI](https://ark-ui.com/), with accessible behavior, explicit
10
+ composition, and CSS Modules styling.
11
11
 
12
- The package combines Ark's accessible interaction model with shadcn-inspired clarity: calm defaults,
13
- explicit named parts, consistent states, and a token-first theme contract. No styling framework is
14
- required.
12
+ moduix gives Ark UI primitives a coherent visual system without adding a styling runtime. Components
13
+ are composed from named parts, styled with regular CSS, and customizable through CSS custom
14
+ properties, `className`, stable `data-slot` hooks, and Ark state attributes.
15
15
 
16
16
  [Documentation](https://moduix.dev/) ·
17
17
  [Quick start](https://moduix.dev/docs/quick-start) ·
18
18
  [Components](https://moduix.dev/docs/components) ·
19
19
  [Tokens](https://moduix.dev/docs/tokens)
20
20
 
21
- ## Highlights
22
-
23
- - Ark-aligned composition, controlled and uncontrolled state, context, callbacks, and form behavior.
24
- - Consistent `36px` primary controls and `32px` popup rows through shared size tokens.
25
- - Native CSS, CSS Modules, cascade layers, semantic tokens, and component-level variables.
26
- - Stable moduix `data-slot` hooks alongside Ark part and state attributes.
27
- - Optional reset and curated `dense`, `soft`, and `contrast` presets.
28
- - React 18 and 19 support.
29
- - A matching hosted shadcn registry when source ownership is the better workflow.
30
-
31
21
  ## Install
32
22
 
33
23
  Install the package and its Ark UI peer dependency:
@@ -36,42 +26,35 @@ Install the package and its Ark UI peer dependency:
36
26
  npm install @moduix/react @ark-ui/react
37
27
  ```
38
28
 
39
- `react`, `react-dom`, and `@ark-ui/react` are peer dependencies, so the package does not ship
40
- duplicate framework or primitive runtimes.
41
-
42
- ## Compatibility
29
+ `react`, `react-dom`, and `@ark-ui/react` are peer dependencies. moduix supports React 18 and 19.
43
30
 
44
- | Environment | Supported versions |
45
- | ----------- | ------------------------------------------------------------------------- |
46
- | React | 18 and 19 |
47
- | Browsers | The latest two stable releases of Chrome, Edge, and Firefox; Safari 16.4+ |
48
- | SSR | Node.js 20+ with native ESM imports |
31
+ The optional `Chart` component also requires its TanStack peer dependency:
49
32
 
50
- Published JavaScript uses ES2023 syntax. `@moduix/react` is ESM-only: use `import` (or dynamic
51
- `import()` from CommonJS); `require()` is not supported. Transpile the package in your application
52
- build if you support an older environment.
33
+ ```bash
34
+ npm install @tanstack/charts
35
+ ```
53
36
 
54
- ## Add Styles
37
+ ## Add styles
55
38
 
56
- Import the required foundation stylesheet once in your application entry point:
39
+ Import the shared foundation stylesheet once in your application entry point:
57
40
 
58
41
  ```tsx
59
42
  import '@moduix/react/style.css';
60
43
  ```
61
44
 
62
- This entrypoint provides shared design tokens and base styles. Component imports bring along their
63
- own CSS.
45
+ It provides the shared tokens and base layer styles. Component imports carry their own CSS Modules,
46
+ so their styles follow the components that use them.
64
47
 
65
- The reset is optional and intentionally separate:
48
+ The reset is optional. Import it first when you choose to use it:
66
49
 
67
50
  ```tsx
68
51
  import '@moduix/react/reset.css';
69
52
  import '@moduix/react/style.css';
70
53
  ```
71
54
 
72
- ## Use Components
55
+ ## Use components
73
56
 
74
- Import the component subpaths you use and compose their named parts:
57
+ Import component subpaths and compose their named parts:
75
58
 
76
59
  ```tsx
77
60
  import { Button } from '@moduix/react/button';
@@ -79,7 +62,7 @@ import { Dialog } from '@moduix/react/dialog';
79
62
 
80
63
  export function Example() {
81
64
  return (
82
- <Dialog.Root>
65
+ <Dialog>
83
66
  <Dialog.Trigger asChild>
84
67
  <Button>Open settings</Button>
85
68
  </Dialog.Trigger>
@@ -97,52 +80,39 @@ export function Example() {
97
80
  </Dialog.Footer>
98
81
  </Dialog.Content>
99
82
  </Dialog.Positioner>
100
- </Dialog.Root>
83
+ </Dialog>
101
84
  );
102
85
  }
103
86
  ```
104
87
 
105
- moduix keeps important Ark anatomy visible. Higher-level convenience parts are documented as the
106
- recommended path where they exist, while low-level composition remains available for advanced
107
- cases.
88
+ Use the short root alias, such as `Dialog`, in application code. The matching `Dialog.Root` export is
89
+ available when an explicit namespace improves a local abstraction, but it is not required.
108
90
 
109
- ## Theme the System
91
+ ## Customize deliberately
110
92
 
111
- Theme values are CSS custom properties. Change broad semantic decisions first and use component
112
- aliases for deliberate exceptions:
93
+ CSS Modules keep the package defaults locally scoped while leaving clear extension points for your
94
+ application:
113
95
 
114
- ```css
115
- :root {
116
- --moduix-primary: oklch(0.52 0.18 145);
117
- --moduix-radius: 0.75rem;
118
- --moduix-size-md: 36px;
119
- --moduix-size-sm: 32px;
120
- }
96
+ - use `className` on a root or named part for local CSS;
97
+ - use stable moduix `data-slot` hooks and Ark state attributes for structural or state-specific
98
+ selectors;
99
+ - override public CSS custom properties at the theme, semantic, or component layer.
121
100
 
122
- .compact-toolbar {
123
- --moduix-button-size-md: 32px;
124
- }
125
- ```
126
-
127
- The token hierarchy is:
128
-
129
- 1. theme primitives such as `--moduix-primary`, `--moduix-spacing-2`, `--moduix-size-md`, and `--moduix-radius`;
130
- 2. semantic aliases such as `--moduix-color-primary`, `--moduix-spacing-md`, and `--moduix-radius-md`;
131
- 3. shared family defaults such as `--moduix-popup-item-min-height` and `--moduix-focus-ring-width`;
132
- 4. component aliases such as `--moduix-input-height` and `--moduix-select-item-min-height`.
133
-
134
- Library styles use predictable cascade layers:
101
+ For example, set product-level theme primitives in your own stylesheet:
135
102
 
136
103
  ```css
137
- @layer moduix.reset, moduix.tokens, moduix.base, moduix.components;
104
+ :root {
105
+ --moduix-primary: oklch(0.5 0.17 285);
106
+ --moduix-radius: 0.875rem;
107
+ }
138
108
  ```
139
109
 
140
- Components also expose `className`, `data-slot`, and the Ark `data-scope`, `data-part`, and
141
- state attributes supported by their primitives.
110
+ See [Tokens](https://moduix.dev/docs/tokens) and [Themes](https://moduix.dev/docs/themes) for the
111
+ token hierarchy and component-specific variables.
142
112
 
143
- ## Optional Presets
113
+ ## Optional presets
144
114
 
145
- Import one preset after `style.css` and activate it on the document root:
115
+ Import one preset after `style.css` and enable it on the document root:
146
116
 
147
117
  ```tsx
148
118
  import '@moduix/react/style.css';
@@ -153,32 +123,20 @@ import '@moduix/react/presets/soft.css';
153
123
  <html data-moduix-theme="soft"></html>
154
124
  ```
155
125
 
156
- Available presets are `dense`, `soft`, and `contrast`. See
157
- [Themes](https://moduix.dev/docs/themes) before combining presets or creating a reusable custom
158
- theme.
126
+ The available presets are `dense`, `soft`, and `contrast`.
159
127
 
160
- ## Prefer to Own the Source?
128
+ ## Prefer to own the source?
161
129
 
162
- The moduix registry uses the shadcn distribution format while preserving the same Ark-aligned
163
- component contracts. Create the ready-to-use `components.json` from the
164
- [complete Quick Start](https://moduix.dev/docs/quick-start), then add the components you need:
130
+ The hosted shadcn-compatible registry provides the same Ark-aligned component contracts in source
131
+ form. Set up `components.json` with the [Quick start](https://moduix.dev/docs/quick-start), then add
132
+ the components you need:
165
133
 
166
134
  ```bash
167
135
  npx shadcn@latest add @moduix-react/button @moduix-react/dialog
168
136
  ```
169
137
 
170
- Generated files are installed under `@/components/moduix/*` and `@/lib/moduix/*`. Read the
171
- [complete Quick Start](https://moduix.dev/docs/quick-start) for alias setup, registry inspection,
172
- dry runs, and generated stylesheet imports.
173
-
174
- ## Acknowledgements
175
-
176
- - [Ark UI](https://ark-ui.com/) provides the primitive behavior and composition model.
177
- - [Chakra UI](https://chakra-ui.com/) informs Ark-aligned ergonomics and design-system craft.
178
- - [shadcn/ui](https://ui.shadcn.com/) inspires open-code delivery, beautiful defaults, and practical
179
- documentation.
180
- - [UnoCSS](https://unocss.dev/) and [Tailwind CSS](https://tailwindcss.com/) provide foundations
181
- adapted by the optional reset.
138
+ Generated files include the component source, CSS Modules, and required supporting files. Their
139
+ destination paths are controlled by your `components.json` aliases.
182
140
 
183
141
  ## Links
184
142
 
package/dist/components/carousel/Carousel_module.css CHANGED
@@ -47,7 +47,7 @@
47
47
  user-select: none;
48
48
  }
49
49
 
50
- .root-WpPvZz[data-orientation="vertical"] > .itemGroup-a7LtFI {
50
+ .itemGroup-a7LtFI[data-orientation="vertical"] {
51
51
  overscroll-behavior-x: auto;
52
52
  overscroll-behavior-y: contain;
53
53
  height: 100%;
@@ -130,7 +130,7 @@
130
130
  display: flex;
131
131
  }
132
132
 
133
- .root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ {
133
+ .indicatorGroup-TO_gj_[data-orientation="vertical"] {
134
134
  flex-direction: column;
135
135
  }
136
136
 
@@ -170,7 +170,7 @@
170
170
  opacity: var(--moduix-opacity-disabled);
171
171
  }
172
172
 
173
- :is(.root-WpPvZz[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK, .control-WlsxZf[data-orientation="vertical"] > .indicatorGroup-TO_gj_ .indicator-cjLdPK)[data-current] {
173
+ .indicator-cjLdPK[data-orientation="vertical"][data-current] {
174
174
  width: var(--moduix-carousel-indicator-size, var(--moduix-spacing-2));
175
175
  height: calc(var(--moduix-carousel-indicator-size, var(--moduix-spacing-2)) * 3);
176
176
  }
package/dist/components/date-picker/DatePicker_module.css CHANGED
@@ -111,12 +111,12 @@
111
111
  cursor: default;
112
112
  }
113
113
 
114
- .control-pfUmnK:has(.input-c9DrcO + .input-c9DrcO) .input-c9DrcO {
114
+ .control-pfUmnK:has(.input-c9DrcO[data-index="1"]) .input-c9DrcO {
115
115
  min-width: min(var(--moduix-date-picker-range-input-min-width, 7.5rem), 100%);
116
116
  padding-inline-end: var(--moduix-date-picker-input-padding-x-start, var(--moduix-spacing-3-5));
117
117
  }
118
118
 
119
- .control-pfUmnK:has(.input-c9DrcO + .input-c9DrcO) .input-c9DrcO:last-of-type {
119
+ .control-pfUmnK .input-c9DrcO[data-index="1"] {
120
120
  padding-inline-end: var(--moduix-date-picker-input-padding-x-end, 4.25rem);
121
121
  }
122
122
 
@@ -246,6 +246,13 @@
246
246
  pointer-events: none;
247
247
  }
248
248
 
249
+ @media (prefers-reduced-motion: reduce) {
250
+ .content-pUiIqD[data-state] {
251
+ animation-duration: 1ms;
252
+ animation-delay: 0s;
253
+ }
254
+ }
255
+
249
256
  .root-sgMq4I[data-inline] .content-pUiIqD {
250
257
  min-width: var(--moduix-date-picker-inline-content-min-width, 18rem);
251
258
  box-shadow: var(--moduix-date-picker-inline-content-shadow, none);
package/dist/components/lightbox/Lightbox_module.css CHANGED
@@ -119,7 +119,6 @@
119
119
 
120
120
  .gallery-d_JY9F {
121
121
  --moduix-carousel-gap: var(--moduix-lightbox-gallery-gap, var(--moduix-spacing-4));
122
- width: auto;
123
122
  max-width: min(var(--moduix-lightbox-gallery-max-width, 72rem),
124
123
  calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
125
124
  justify-self: center;
package/dist/components/sidebar/Sidebar.d.ts CHANGED
@@ -27,6 +27,8 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
27
27
  }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
28
28
  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
29
29
  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
30
+ ExpandedContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
31
+ CollapsedContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
30
32
  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
31
33
  Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
32
34
  orientation?: "horizontal" | "vertical";
@@ -37,22 +39,22 @@ declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<SidebarRoo
37
39
  GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
38
40
  GroupAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
39
41
  GroupContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
40
- Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
41
- MenuItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
42
+ NavigationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
43
+ NavigationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
42
44
  Tooltip: ({ children, content, openDelay, closeDelay, positioning, ...props }: Omit<ComponentProps<typeof Tooltip>, "children" | "disabled" | "positioning"> & {
43
45
  children: ComponentProps<typeof Tooltip.Trigger>["children"];
44
46
  content: ComponentProps<typeof Tooltip.Content>["children"];
45
47
  positioning?: ComponentProps<typeof Tooltip>["positioning"];
46
48
  }) => import("react").JSX.Element;
47
- MenuButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
49
+ NavigationButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
48
50
  active?: boolean;
49
51
  size?: "sm" | "md" | "lg";
50
52
  } & import("react").RefAttributes<HTMLButtonElement>>;
51
- MenuAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
52
- MenuBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
53
- MenuSub: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
54
- MenuSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
55
- MenuSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
53
+ NavigationAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
54
+ NavigationBadge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
55
+ NavigationSubList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLUListElement>>;
56
+ NavigationSubItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
57
+ NavigationSubButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
56
58
  active?: boolean;
57
59
  } & import("react").RefAttributes<HTMLAnchorElement>>;
58
60
  };
package/dist/components/sidebar/Sidebar.js CHANGED
@@ -176,6 +176,30 @@ const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ..
176
176
  ...props
177
177
  });
178
178
  });
179
+ const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
180
+ const { collapsed } = useSidebar();
181
+ return /*#__PURE__*/ jsx(ark.div, {
182
+ ref: ref,
183
+ "data-scope": "sidebar",
184
+ "data-part": "expanded-content",
185
+ "data-slot": "sidebar-expanded-content",
186
+ className: normalizeClassName(className),
187
+ ...props,
188
+ hidden: collapsed
189
+ });
190
+ });
191
+ const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
192
+ const { collapsed } = useSidebar();
193
+ return /*#__PURE__*/ jsx(ark.div, {
194
+ ref: ref,
195
+ "data-scope": "sidebar",
196
+ "data-part": "collapsed-content",
197
+ "data-slot": "sidebar-collapsed-content",
198
+ className: normalizeClassName(className),
199
+ ...props,
200
+ hidden: !collapsed
201
+ });
202
+ });
179
203
  const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
180
204
  return /*#__PURE__*/ jsx(ark.footer, {
181
205
  ref: ref,
@@ -227,93 +251,93 @@ const Sidebar_SidebarGroupContent = /*#__PURE__*/ forwardRef(function({ classNam
227
251
  ...props
228
252
  });
229
253
  });
230
- const Sidebar_SidebarMenu = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
254
+ const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
231
255
  return /*#__PURE__*/ jsx(ark.ul, {
232
256
  ref: ref,
233
257
  "data-scope": "sidebar",
234
- "data-part": "menu",
235
- "data-slot": "sidebar-menu",
258
+ "data-part": "navigation-list",
259
+ "data-slot": "sidebar-navigation-list",
236
260
  className: clsx(Sidebar_module.menu, normalizeClassName(className)),
237
261
  ...props
238
262
  });
239
263
  });
240
- const Sidebar_SidebarMenuItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
264
+ const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
241
265
  return /*#__PURE__*/ jsx(ark.li, {
242
266
  ref: ref,
243
267
  "data-scope": "sidebar",
244
- "data-part": "menu-item",
245
- "data-slot": "sidebar-menu-item",
268
+ "data-part": "navigation-item",
269
+ "data-slot": "sidebar-navigation-item",
246
270
  className: clsx(Sidebar_module.menuItem, normalizeClassName(className)),
247
271
  ...props
248
272
  });
249
273
  });
250
- const Sidebar_SidebarMenuButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
274
+ const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
251
275
  return /*#__PURE__*/ jsx(ark.button, {
252
276
  ref: ref,
253
277
  type: type,
254
278
  "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
255
279
  "data-scope": "sidebar",
256
- "data-part": "menu-button",
257
- "data-slot": "sidebar-menu-button",
280
+ "data-part": "navigation-button",
281
+ "data-slot": "sidebar-navigation-button",
258
282
  "data-active": active ? '' : void 0,
259
283
  "data-size": size,
260
284
  className: clsx(Sidebar_module.menuButton, normalizeClassName(className)),
261
285
  ...props
262
286
  });
263
287
  });
264
- const Sidebar_SidebarMenuAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
288
+ const Sidebar_SidebarNavigationAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
265
289
  return /*#__PURE__*/ jsx(ark.button, {
266
290
  ref: ref,
267
291
  type: type,
268
292
  "data-scope": "sidebar",
269
- "data-part": "menu-action",
270
- "data-slot": "sidebar-menu-action",
293
+ "data-part": "navigation-action",
294
+ "data-slot": "sidebar-navigation-action",
271
295
  className: clsx(Sidebar_module.menuAction, normalizeClassName(className)),
272
296
  ...props
273
297
  });
274
298
  });
275
- const Sidebar_SidebarMenuBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
299
+ const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
276
300
  return /*#__PURE__*/ jsx(ark.div, {
277
301
  ref: ref,
278
302
  "data-scope": "sidebar",
279
- "data-part": "menu-badge",
280
- "data-slot": "sidebar-menu-badge",
303
+ "data-part": "navigation-badge",
304
+ "data-slot": "sidebar-navigation-badge",
281
305
  className: clsx(Sidebar_module.menuBadge, normalizeClassName(className)),
282
306
  ...props
283
307
  });
284
308
  });
285
- const Sidebar_SidebarMenuSub = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
309
+ const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
286
310
  return /*#__PURE__*/ jsx(ark.ul, {
287
311
  ref: ref,
288
312
  "data-scope": "sidebar",
289
- "data-part": "menu-sub",
290
- "data-slot": "sidebar-menu-sub",
313
+ "data-part": "navigation-sub-list",
314
+ "data-slot": "sidebar-navigation-sub-list",
291
315
  className: clsx(Sidebar_module.menuSub, normalizeClassName(className)),
292
316
  ...props
293
317
  });
294
318
  });
295
- const Sidebar_SidebarMenuSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
319
+ const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
296
320
  return /*#__PURE__*/ jsx(ark.li, {
297
321
  ref: ref,
298
322
  "data-scope": "sidebar",
299
- "data-part": "menu-sub-item",
300
- "data-slot": "sidebar-menu-sub-item",
323
+ "data-part": "navigation-sub-item",
324
+ "data-slot": "sidebar-navigation-sub-item",
301
325
  className: clsx(Sidebar_module.menuSubItem, normalizeClassName(className)),
302
326
  ...props
303
327
  });
304
328
  });
305
- const Sidebar_SidebarMenuSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
329
+ const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
306
330
  return /*#__PURE__*/ jsx(ark.a, {
307
331
  ref: ref,
308
332
  "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
309
333
  "data-scope": "sidebar",
310
- "data-part": "menu-sub-button",
311
- "data-slot": "sidebar-menu-sub-button",
334
+ "data-part": "navigation-sub-button",
335
+ "data-slot": "sidebar-navigation-sub-button",
312
336
  "data-active": active ? '' : void 0,
313
337
  className: clsx(Sidebar_module.menuSubButton, normalizeClassName(className)),
314
338
  ...props,
315
339
  children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
316
- "data-slot": "sidebar-menu-sub-label",
340
+ "data-slot": "sidebar-navigation-sub-label",
317
341
  children: children
318
342
  }) : children
319
343
  });
@@ -369,20 +393,22 @@ const Sidebar = Object.assign(Sidebar_SidebarRoot, {
369
393
  Input: Sidebar_SidebarInput,
370
394
  Header: Sidebar_SidebarHeader,
371
395
  Content: Sidebar_SidebarContent,
396
+ ExpandedContent: Sidebar_SidebarExpandedContent,
397
+ CollapsedContent: Sidebar_SidebarCollapsedContent,
372
398
  Footer: Sidebar_SidebarFooter,
373
399
  Separator: Sidebar_SidebarSeparator,
374
400
  Group: Sidebar_SidebarGroup,
375
401
  GroupLabel: Sidebar_SidebarGroupLabel,
376
402
  GroupAction: Sidebar_SidebarGroupAction,
377
403
  GroupContent: Sidebar_SidebarGroupContent,
378
- Menu: Sidebar_SidebarMenu,
379
- MenuItem: Sidebar_SidebarMenuItem,
404
+ NavigationList: Sidebar_SidebarNavigationList,
405
+ NavigationItem: Sidebar_SidebarNavigationItem,
380
406
  Tooltip: Sidebar_SidebarTooltip,
381
- MenuButton: Sidebar_SidebarMenuButton,
382
- MenuAction: Sidebar_SidebarMenuAction,
383
- MenuBadge: Sidebar_SidebarMenuBadge,
384
- MenuSub: Sidebar_SidebarMenuSub,
385
- MenuSubItem: Sidebar_SidebarMenuSubItem,
386
- MenuSubButton: Sidebar_SidebarMenuSubButton
407
+ NavigationButton: Sidebar_SidebarNavigationButton,
408
+ NavigationAction: Sidebar_SidebarNavigationAction,
409
+ NavigationBadge: Sidebar_SidebarNavigationBadge,
410
+ NavigationSubList: Sidebar_SidebarNavigationSubList,
411
+ NavigationSubItem: Sidebar_SidebarNavigationSubItem,
412
+ NavigationSubButton: Sidebar_SidebarNavigationSubButton
387
413
  });
388
414
  export { Sidebar, useSidebar };
package/dist/components/sidebar/Sidebar_module.css CHANGED
@@ -24,6 +24,7 @@
24
24
  display: flex;
25
25
  position: relative;
26
26
  overflow: hidden;
27
+ container-type: inline-size;
27
28
  }
28
29
 
29
30
  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV, .panel-l44YAX[data-state="collapsed"] .footer-RydM38, .panel-l44YAX[data-state="collapsed"] .group-cwd3z7 {
@@ -34,6 +35,10 @@
34
35
  justify-content: center;
35
36
  }
36
37
 
38
+ .panel-l44YAX[data-state="collapsed"] .header-YkNEAV > :only-child {
39
+ width: auto;
40
+ }
41
+
37
42
  .panel-l44YAX[data-state="collapsed"] .content-v0UxPJ {
38
43
  scrollbar-gutter: auto;
39
44
  scrollbar-width: none;
@@ -95,28 +100,39 @@
95
100
 
96
101
  .trigger-_fUcgc {
97
102
  box-sizing: border-box;
103
+ z-index: 4;
98
104
  width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
99
105
  min-width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
100
106
  height: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
107
+ margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
108
+ border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
109
+ var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
101
110
  border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
111
+ background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
102
112
  color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
103
113
  appearance: none;
104
114
  cursor: pointer;
115
+ translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
116
+ box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
105
117
  transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
106
118
  color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
107
119
  box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
108
- background-color: #0000;
109
- border: 0;
110
120
  flex: none;
111
121
  justify-content: center;
112
122
  align-items: center;
113
123
  padding: 0;
114
124
  display: inline-flex;
125
+ position: relative;
115
126
  }
116
127
 
117
128
  .trigger-_fUcgc > svg {
118
129
  width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
119
130
  height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
131
+ transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
132
+ }
133
+
134
+ .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
135
+ transform: rotate(180deg);
120
136
  }
121
137
 
122
138
  .trigger-_fUcgc:focus-visible {
@@ -137,30 +153,6 @@
137
153
  }
138
154
  }
139
155
 
140
- .trigger-_fUcgc {
141
- z-index: 4;
142
- margin-block-start: 0;
143
- margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
144
- border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
145
- var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
146
- border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
147
- background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
148
- box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
149
- position: relative;
150
- }
151
-
152
- .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
153
- transform: rotate(180deg);
154
- }
155
-
156
- .trigger-_fUcgc > svg {
157
- transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
158
- }
159
-
160
- .trigger-_fUcgc {
161
- translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
162
- }
163
-
164
156
  .label-trHnso, .groupLabel-IvBtsR {
165
157
  text-overflow: ellipsis;
166
158
  white-space: nowrap;
@@ -181,6 +173,10 @@
181
173
  var(--moduix-sidebar-border-color, var(--moduix-color-border));
182
174
  }
183
175
 
176
+ .header-YkNEAV > :only-child {
177
+ width: 100%;
178
+ }
179
+
184
180
  .footer-RydM38 {
185
181
  border-block-start: var(--moduix-sidebar-section-border-width, 0) solid
186
182
  var(--moduix-sidebar-border-color, var(--moduix-color-border));
@@ -216,7 +212,7 @@
216
212
  .groupAction-aoQPc4 {
217
213
  width: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
218
214
  height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
219
- border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
215
+ border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
220
216
  color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
221
217
  appearance: none;
222
218
  cursor: pointer;
@@ -256,12 +252,16 @@
256
252
  }
257
253
 
258
254
  .group-cwd3z7:has(.groupAction-aoQPc4) .groupLabel-IvBtsR {
255
+ min-height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
259
256
  grid-column: 1;
257
+ align-items: center;
258
+ display: flex;
260
259
  }
261
260
 
262
261
  .group-cwd3z7:has(.groupAction-aoQPc4) .groupAction-aoQPc4 {
263
262
  grid-column: 2;
264
263
  align-self: center;
264
+ margin-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
265
265
  }
266
266
 
267
267
  .groupContent-_s9yul {
@@ -273,8 +273,12 @@
273
273
  grid-column: 1 / -1;
274
274
  }
275
275
 
276
+ .group-cwd3z7:has(.groupAction-aoQPc4) .menu-UwagMF {
277
+ grid-column: 1 / -1;
278
+ }
279
+
276
280
  .menu-UwagMF, .menuSub-xn2r86 {
277
- gap: var(--moduix-sidebar-menu-gap, var(--moduix-spacing-1));
281
+ gap: var(--moduix-sidebar-navigation-gap, var(--moduix-spacing-1));
278
282
  flex-direction: column;
279
283
  width: 100%;
280
284
  min-width: 0;
@@ -284,15 +288,23 @@
284
288
  display: flex;
285
289
  }
286
290
 
287
- .menuItem-ktGhRk, .menuSubItem-NeKVH5 {
291
+ .menuItem-ktGhRk {
288
292
  min-width: 0;
289
293
  position: relative;
290
294
  }
291
295
 
296
+ .menuSubItem-NeKVH5 {
297
+ min-width: 0;
298
+ }
299
+
300
+ .menuItem-ktGhRk > [data-scope="select"][data-part="root"] {
301
+ --moduix-select-width: 100%;
302
+ }
303
+
292
304
  .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
293
305
  box-sizing: border-box;
294
- border: var(--moduix-sidebar-menu-button-border-width, 0) solid transparent;
295
- border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
306
+ border: var(--moduix-sidebar-navigation-button-border-width, 0) solid transparent;
307
+ border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
296
308
  width: 100%;
297
309
  min-width: 0;
298
310
  color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
@@ -355,36 +367,32 @@
355
367
  }
356
368
 
357
369
  .menuButton-OAl6eQ {
358
- gap: var(--moduix-sidebar-menu-button-gap, var(--moduix-spacing-2));
359
- min-height: var(--moduix-sidebar-menu-button-height, var(--moduix-size-md));
360
- padding-block: var(--moduix-sidebar-menu-button-padding-y, var(--moduix-spacing-1));
361
- padding-inline: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
362
- font-size: var(--moduix-sidebar-menu-button-font-size, var(--moduix-text-sm));
363
- line-height: var(--moduix-sidebar-menu-button-line-height, var(--moduix-line-height-text-sm));
370
+ gap: var(--moduix-sidebar-navigation-button-gap, var(--moduix-spacing-2));
371
+ min-height: var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md));
372
+ padding-block: var(--moduix-sidebar-navigation-button-padding-y, var(--moduix-spacing-1));
373
+ padding-inline: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
374
+ font-size: var(--moduix-sidebar-navigation-button-font-size, var(--moduix-text-sm));
375
+ line-height: var(--moduix-sidebar-navigation-button-line-height, var(--moduix-line-height-text-sm));
364
376
  }
365
377
 
366
378
  .menuButton-OAl6eQ[data-size="sm"] {
367
- min-height: var(--moduix-sidebar-menu-button-height-sm, var(--moduix-size-sm));
368
- font-size: var(--moduix-sidebar-menu-button-font-size-sm, var(--moduix-text-xs));
379
+ min-height: var(--moduix-sidebar-navigation-button-height-sm, var(--moduix-size-sm));
380
+ font-size: var(--moduix-sidebar-navigation-button-font-size-sm, var(--moduix-text-xs));
369
381
  }
370
382
 
371
383
  .menuButton-OAl6eQ[data-size="lg"] {
372
- min-height: var(--moduix-sidebar-menu-button-height-lg, var(--moduix-size-lg));
384
+ min-height: var(--moduix-sidebar-navigation-button-height-lg, var(--moduix-size-lg));
373
385
  }
374
386
 
375
- .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
387
+ .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"], .menuButton-OAl6eQ > [data-scope="select"][data-part="indicator"] {
376
388
  margin-inline-start: auto;
377
389
  }
378
390
 
379
- .panel-l44YAX .menuButton-OAl6eQ {
380
- justify-content: flex-start;
381
- }
382
-
383
391
  .menuAction-_BDfHY {
384
392
  z-index: 1;
385
- width: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
386
- height: var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs));
387
- border-radius: var(--moduix-sidebar-menu-button-radius, var(--moduix-radius-md));
393
+ width: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
394
+ height: var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs));
395
+ border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
388
396
  color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
389
397
  appearance: none;
390
398
  cursor: pointer;
@@ -397,10 +405,10 @@
397
405
  padding: 0;
398
406
  display: inline-flex;
399
407
  position: absolute;
400
- inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
401
- var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs))) /
408
+ inset-block-start: calc((var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md)) -
409
+ var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs))) /
402
410
  2);
403
- inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
411
+ inset-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
404
412
  }
405
413
 
406
414
  .menuAction-_BDfHY > svg {
@@ -423,45 +431,57 @@
423
431
 
424
432
  .menuBadge-GKf4u4 {
425
433
  z-index: 1;
426
- min-width: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
427
- min-height: var(--moduix-sidebar-menu-badge-min-width, 1.5rem);
428
- padding-inline: var(--moduix-sidebar-menu-badge-padding-x, var(--moduix-spacing-1));
434
+ min-width: var(--moduix-sidebar-navigation-badge-min-width, 1.125rem);
435
+ min-height: var(--moduix-sidebar-navigation-badge-min-width, 1.125rem);
436
+ padding-inline: var(--moduix-sidebar-navigation-badge-padding-x, var(--moduix-spacing-0-5));
429
437
  border-radius: var(--moduix-radius-full);
430
438
  background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
431
439
  color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
432
- font-size: var(--moduix-text-xs);
440
+ font-size: var(--moduix-sidebar-navigation-badge-font-size, .625rem);
441
+ font-weight: var(--moduix-sidebar-navigation-badge-font-weight, var(--moduix-weight-medium));
433
442
  font-variant-numeric: tabular-nums;
434
443
  justify-content: center;
435
444
  align-items: center;
436
445
  line-height: 1;
437
446
  display: inline-flex;
438
447
  position: absolute;
439
- inset-block-start: calc((var(--moduix-sidebar-menu-button-height, var(--moduix-size-md)) -
440
- var(--moduix-sidebar-menu-badge-min-width, 1.5rem)) /
448
+ inset-block-start: calc((var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md)) -
449
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
450
+ 2);
451
+ inset-inline-end: calc(var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) +
452
+ (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
453
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
441
454
  2);
442
- inset-inline-end: var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2));
443
455
  }
444
456
 
445
- :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
446
- padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
447
- var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
457
+ .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ {
458
+ padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
459
+ var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2);
448
460
  }
449
461
 
450
- :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) > [data-slot="sidebar-menu-sub-label"] {
451
- text-overflow: ellipsis;
452
- min-width: 0;
453
- overflow: hidden;
462
+ .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
463
+ padding-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
464
+ var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
465
+ (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
466
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
467
+ 2);
454
468
  }
455
469
 
456
470
  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuButton-OAl6eQ {
457
- padding-inline-end: calc(var(--moduix-sidebar-menu-action-size, var(--moduix-size-xs)) +
458
- var(--moduix-sidebar-menu-badge-min-width, 1.5rem) +
459
- var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 3);
471
+ padding-inline-end: calc(var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) +
472
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
473
+ var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 3 +
474
+ (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
475
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
476
+ 2);
460
477
  }
461
478
 
462
479
  .menuItem-ktGhRk:has(.menuAction-_BDfHY):has(.menuBadge-GKf4u4) .menuAction-_BDfHY {
463
- inset-inline-end: calc(var(--moduix-sidebar-menu-badge-min-width, 1.5rem) +
464
- var(--moduix-sidebar-menu-button-padding-x, var(--moduix-spacing-2)) * 2);
480
+ inset-inline-end: calc(var(--moduix-sidebar-navigation-badge-min-width, 1.125rem) +
481
+ var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2)) * 2 +
482
+ (var(--moduix-sidebar-navigation-action-size, var(--moduix-size-xs)) -
483
+ var(--moduix-sidebar-navigation-badge-min-width, 1.125rem)) /
484
+ 2);
465
485
  }
466
486
 
467
487
  :is(.panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .panel-l44YAX[data-state="collapsed"] .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
@@ -471,19 +491,29 @@
471
491
  .menuSub-xn2r86 {
472
492
  box-sizing: border-box;
473
493
  width: auto;
474
- border-inline-start: var(--moduix-sidebar-menu-sub-border-width, var(--moduix-border-width-sm))
494
+ border-inline-start: var(--moduix-sidebar-navigation-sub-border-width, var(--moduix-border-width-sm))
475
495
  solid var(--moduix-sidebar-border-color, var(--moduix-color-border));
476
- margin-block-start: var(--moduix-sidebar-menu-sub-margin-y, var(--moduix-spacing-1));
477
- margin-inline-start: var(--moduix-sidebar-menu-sub-margin-x, var(--moduix-spacing-4));
478
- padding-inline-start: var(--moduix-sidebar-menu-sub-padding-x, var(--moduix-spacing-2));
496
+ margin-block-start: var(--moduix-sidebar-navigation-sub-margin-y, var(--moduix-spacing-1));
497
+ margin-inline-start: var(--moduix-sidebar-navigation-sub-margin-x, var(--moduix-spacing-4));
498
+ padding-inline-start: var(--moduix-sidebar-navigation-sub-padding-x, var(--moduix-spacing-2));
479
499
  }
480
500
 
481
501
  .menuSubButton-MjeEfX {
482
- gap: var(--moduix-sidebar-menu-sub-button-gap, var(--moduix-spacing-2));
483
- min-height: var(--moduix-sidebar-menu-sub-button-height, var(--moduix-size-sm));
484
- padding-inline: var(--moduix-sidebar-menu-sub-button-padding-x, var(--moduix-spacing-2));
485
- font-size: var(--moduix-sidebar-menu-sub-button-font-size, var(--moduix-text-sm));
486
- line-height: var(--moduix-sidebar-menu-sub-button-line-height, var(--moduix-line-height-text-sm));
502
+ gap: var(--moduix-sidebar-navigation-sub-button-gap, var(--moduix-spacing-2));
503
+ min-height: var(--moduix-sidebar-navigation-sub-button-height, var(--moduix-size-sm));
504
+ padding-inline: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
505
+ font-size: var(--moduix-sidebar-navigation-sub-button-font-size, var(--moduix-text-sm));
506
+ line-height: var(--moduix-sidebar-navigation-sub-button-line-height, var(--moduix-line-height-text-sm));
507
+ }
508
+
509
+ @container (width <= 7rem) {
510
+ .groupAction-aoQPc4, .menuAction-_BDfHY, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
511
+ display: none;
512
+ }
513
+
514
+ :is(.menuItem-ktGhRk:has(.menuAction-_BDfHY) .menuButton-OAl6eQ, .menuItem-ktGhRk:has(.menuBadge-GKf4u4) .menuButton-OAl6eQ) {
515
+ padding-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
516
+ }
487
517
  }
488
518
 
489
519
  .input-nqDU3w {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moduix/react",
3
- "version": "2.5.0",
3
+ "version": "2.5.1",
4
4
  "description": "React implementation of the moduix component system, built on Ark UI primitives.",
5
5
  "keywords": [
6
6
  "accessible",
@@ -418,22 +418,22 @@
418
418
  "@ark-ui/react": "^5.39.0",
419
419
  "@internationalized/date": "^3.12.3",
420
420
  "@microsoft/api-extractor": "^7.59.0",
421
- "@rsbuild/core": "~2.1.13",
421
+ "@rsbuild/core": "^2.2.0",
422
422
  "@rsbuild/plugin-react": "^2.1.0",
423
423
  "@rslib/core": "^0.23.2",
424
- "@rstest/adapter-rslib": "^0.11.9",
425
- "@rstest/core": "^0.11.9",
424
+ "@rstest/adapter-rslib": "^0.11.10",
425
+ "@rstest/core": "^0.11.10",
426
426
  "@storybook/addon-docs": "^10.5.10",
427
427
  "@storybook/react": "^10.5.10",
428
- "@tanstack/charts": "^0.14.0",
428
+ "@tanstack/charts": "^0.16.0",
429
429
  "@testing-library/dom": "^10.4.1",
430
430
  "@testing-library/jest-dom": "^6.10.0",
431
431
  "@testing-library/react": "^16.3.2",
432
432
  "@testing-library/user-event": "^14.6.6",
433
433
  "@types/node": "^24.13.3",
434
434
  "@types/react": "^19.2.18",
435
- "@types/react-dom": "^19.2.4",
436
- "happy-dom": "^20.11.6",
435
+ "@types/react-dom": "^19.2.5",
436
+ "happy-dom": "^20.11.8",
437
437
  "react": "^19.2.8",
438
438
  "react-dom": "^19.2.8",
439
439
  "storybook": "^10.5.10",
@@ -443,7 +443,7 @@
443
443
  },
444
444
  "peerDependencies": {
445
445
  "@ark-ui/react": "^5.37.2",
446
- "@tanstack/charts": "^0.14.0",
446
+ "@tanstack/charts": "^0.16.0",
447
447
  "react": "^18 || ^19",
448
448
  "react-dom": "^18 || ^19"
449
449
  },