@apliteni/apliteni-ui 0.61.2 → 0.63.0

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 (11) hide show
  1. package/README.md +9 -0
  2. package/package.json +1 -1
  3. package/react/README.md +25 -1
  4. package/react/dist/index.css +254 -235
  5. package/react/dist/index.d.ts +68 -2
  6. package/react/dist/index.js +483 -334
  7. package/src/components/index.js +2 -2
  8. package/src/components/shell.js +10 -5
  9. package/src/styles/input.css +23 -1
  10. package/src/styles/layout.css +40 -10
  11. package/src/styles/nav.css +50 -11
package/README.md CHANGED
@@ -170,6 +170,9 @@ See Storybook's **Button / Busy Transition** for the live vanilla example.
170
170
 
171
171
  ## Theming
172
172
 
173
+ React forms can use [Checkbox, radio and Switch](react/README.md#checkbox-and-switch)
174
+ with native labels, keyboard behavior and controlled or uncontrolled state.
175
+
173
176
  React pages can use [ThemeToggle and its pre-paint script](react/README.md#themetoggle)
174
177
  to save dark, light or auto choices. Auto resolves to dark or light on the root.
175
178
 
@@ -220,6 +223,12 @@ react/ # React components — private workspace, built to reac
220
223
  dist/ # tsup output; shipped as …/react and …/react/css
221
224
  ```
222
225
 
226
+ `SidebarNav` renders flat items or captioned sections with one level of nested
227
+ disclosure, counts, disabled and danger rows, an artwork slot, and a footer slot. Its
228
+ `renderLink(item, linkProps)` hook supports router links; spread the supplied props
229
+ to retain names, children and current-page semantics. `collapsed` changes only
230
+ presentation, keeping nested links reachable and named.
231
+
223
232
  ## Contribute
224
233
 
225
234
  Use Node 20 or newer. Install [jq](https://jqlang.github.io/jq/), then run `npm ci` at
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apliteni/apliteni-ui",
3
- "version": "0.61.2",
3
+ "version": "0.63.0",
4
4
  "workspaces": [
5
5
  "react"
6
6
  ],
package/react/README.md CHANGED
@@ -29,7 +29,7 @@ import '@apliteni/apliteni-ui/react/css'; // React components' shell styles (mo
29
29
  import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
30
30
  ```
31
31
 
32
- Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
32
+ Components: `Checkbox`, `Switch`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
33
33
 
34
34
  `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
35
35
  metadata or use `live` or `soon`. Its children accept React content.
@@ -538,3 +538,27 @@ Tooltip accepts text and inline children, without nested controls. Hovering or f
538
538
  ```tsx
539
539
  <Tooltip text="Updated daily">Balance</Tooltip>
540
540
  ```
541
+
542
+ ## Checkbox and Switch
543
+
544
+ `Checkbox` wraps a native checkbox and its visible `label`. Set `type="radio"`
545
+ and give related options the same `name` for a native radio group. Use a fieldset
546
+ and legend to name the group. `Switch` has the same native checkbox behavior,
547
+ with the kit's switch track; its required `label` supplies the accessible name.
548
+ Place visible setting text beside a switch.
549
+
550
+ Both accept native input props: `checked` with `onChange` for controlled state,
551
+ `defaultChecked` for uncontrolled state, and `disabled`, `name`, `value`,
552
+ `required`, and ARIA attributes. Refs and every other prop reach the input.
553
+ `className` reaches the input on `Checkbox` and the `.ui-switch` label on
554
+ `Switch`, whose input is a hidden zero-size box that paints nothing. An empty
555
+ `Switch` label falls back to "Toggle", as the vanilla factory does. Disabled
556
+ controls do not activate, submit, or enter the Tab order, and the shared
557
+ stylesheet paints them with the kit's disabled ink, surface and edge and drops
558
+ the accent from a checked box.
559
+
560
+ ```tsx
561
+ <Checkbox label="Read only" type="radio" name="scope" value="read" defaultChecked />
562
+ <Checkbox label="Full access" type="radio" name="scope" value="full" />
563
+ <Switch label="Email notifications" checked={email} onChange={event => setEmail(event.currentTarget.checked)} />
564
+ ```
package/react/dist/index.css CHANGED
@@ -26,6 +26,260 @@
26
26
  }
27
27
  }
28
28
 
29
+ /* ../src/styles/input.css */
30
+ .ui-field {
31
+ display: block;
32
+ }
33
+ .ui-field__label {
34
+ display: block;
35
+ color: var(--strong);
36
+ font-size: var(--text-base);
37
+ font-weight: var(--weight-medium);
38
+ margin-bottom: 8px;
39
+ }
40
+ .ui-field__req {
41
+ color: var(--pink);
42
+ margin-left: 4px;
43
+ }
44
+ .ui-field__hint {
45
+ color: var(--text);
46
+ font-size: var(--text-sm);
47
+ margin-top: 7px;
48
+ line-height: 1.5;
49
+ }
50
+ .ui-field__error {
51
+ color: var(--pink);
52
+ font-size: var(--text-sm);
53
+ margin-top: 7px;
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 6px;
57
+ }
58
+ .ui-field__error svg {
59
+ width: 16px;
60
+ height: 16px;
61
+ flex: none;
62
+ stroke-width: 2.4;
63
+ }
64
+ .ui-input,
65
+ .ui-textarea,
66
+ .ui-select {
67
+ font-family: var(--font-sans);
68
+ font-size: var(--text-base);
69
+ color: var(--strong);
70
+ background: var(--field-bg);
71
+ border: 1px solid var(--field-edge);
72
+ border-radius: var(--radius-md);
73
+ padding: 12px 15px;
74
+ width: 100%;
75
+ transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
76
+ }
77
+ .ui-textarea {
78
+ resize: vertical;
79
+ min-height: 96px;
80
+ line-height: 1.55;
81
+ }
82
+ .ui-input:hover,
83
+ .ui-textarea:hover,
84
+ .ui-select:hover {
85
+ border-color: var(--field-edge-hover);
86
+ }
87
+ .ui-input:focus-visible,
88
+ .ui-textarea:focus-visible,
89
+ .ui-select:focus-visible {
90
+ outline: 2px solid transparent;
91
+ border-color: var(--accent);
92
+ box-shadow: var(--ring);
93
+ }
94
+ .ui-input::placeholder,
95
+ .ui-textarea::placeholder {
96
+ color: var(--muted);
97
+ opacity: 0.9;
98
+ }
99
+ .ui-input:disabled,
100
+ .ui-select:disabled,
101
+ .ui-textarea:disabled {
102
+ background: var(--disabled-surface);
103
+ border-color: var(--disabled-border);
104
+ color: var(--disabled-ink);
105
+ cursor: not-allowed;
106
+ }
107
+ .ui-input.is-invalid,
108
+ .ui-select.is-invalid,
109
+ .ui-textarea.is-invalid {
110
+ border-color: var(--pink);
111
+ }
112
+ .ui-input[type=search]::-webkit-search-cancel-button {
113
+ appearance: none;
114
+ display: none;
115
+ }
116
+ .ui-input-group {
117
+ position: relative;
118
+ display: flex;
119
+ align-items: center;
120
+ }
121
+ .ui-input-group .ui-input {
122
+ padding-left: 42px;
123
+ }
124
+ .ui-input-group__icon {
125
+ position: absolute;
126
+ left: 14px;
127
+ width: 17px;
128
+ height: 17px;
129
+ color: var(--muted);
130
+ pointer-events: none;
131
+ }
132
+ .ui-input-group__icon svg {
133
+ width: 100%;
134
+ height: 100%;
135
+ stroke: currentColor;
136
+ fill: none;
137
+ stroke-width: 2.2;
138
+ }
139
+ .ui-select {
140
+ appearance: none;
141
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a29db6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
142
+ background-repeat: no-repeat;
143
+ background-position: right 15px center;
144
+ padding-right: 40px;
145
+ cursor: pointer;
146
+ }
147
+ :root[data-theme=light] .ui-select {
148
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
149
+ }
150
+ .ui-check {
151
+ display: inline-flex;
152
+ align-items: flex-start;
153
+ gap: 11px;
154
+ cursor: pointer;
155
+ font-size: var(--text-base);
156
+ color: var(--text);
157
+ line-height: 1.5;
158
+ }
159
+ .ui-check input {
160
+ appearance: none;
161
+ width: 19px;
162
+ height: 19px;
163
+ flex: none;
164
+ margin-top: 1px;
165
+ border: 1.5px solid var(--border-strong);
166
+ border-radius: var(--radius-xs);
167
+ background: var(--surface-2);
168
+ cursor: pointer;
169
+ transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
170
+ position: relative;
171
+ }
172
+ .ui-check input::before {
173
+ content: "";
174
+ position: absolute;
175
+ left: 50%;
176
+ top: 50%;
177
+ width: 24px;
178
+ height: 24px;
179
+ transform: translate(-50%, -50%);
180
+ }
181
+ .ui-check input[type=radio] {
182
+ border-radius: 50%;
183
+ }
184
+ .ui-check input:enabled:hover {
185
+ border-color: var(--accent);
186
+ }
187
+ .ui-check input:checked {
188
+ background: var(--accent);
189
+ border-color: var(--accent);
190
+ }
191
+ .ui-check input[type=checkbox]:checked::after {
192
+ content: "";
193
+ position: absolute;
194
+ left: 5px;
195
+ top: 1.5px;
196
+ width: 5px;
197
+ height: 10px;
198
+ border: solid var(--accent-contrast);
199
+ border-width: 0 2px 2px 0;
200
+ transform: rotate(45deg);
201
+ }
202
+ .ui-check input[type=radio]:checked::after {
203
+ content: "";
204
+ position: absolute;
205
+ inset: 4px;
206
+ border-radius: 50%;
207
+ background: var(--accent-contrast);
208
+ }
209
+ .ui-check input:focus-visible {
210
+ outline: 2px solid transparent;
211
+ box-shadow: var(--ring);
212
+ }
213
+ .ui-check input:disabled {
214
+ background: var(--disabled-surface);
215
+ border-color: var(--disabled-border);
216
+ cursor: not-allowed;
217
+ }
218
+ .ui-check input:disabled:checked {
219
+ background: var(--disabled-ink);
220
+ border-color: var(--disabled-ink);
221
+ }
222
+ .ui-check input[type=checkbox]:disabled:checked::after {
223
+ border-color: var(--disabled-surface);
224
+ }
225
+ .ui-check input[type=radio]:disabled:checked::after {
226
+ background: var(--disabled-surface);
227
+ }
228
+ .ui-check:has(input:disabled) {
229
+ color: var(--disabled-ink);
230
+ cursor: not-allowed;
231
+ }
232
+ .ui-switch {
233
+ --sw-w: 44px;
234
+ --sw-h: 26px;
235
+ position: relative;
236
+ display: inline-block;
237
+ width: var(--sw-w);
238
+ height: var(--sw-h);
239
+ flex: none;
240
+ }
241
+ .ui-switch input {
242
+ position: absolute;
243
+ opacity: 0;
244
+ width: 0;
245
+ height: 0;
246
+ }
247
+ .ui-switch__track {
248
+ position: absolute;
249
+ inset: 0;
250
+ background: var(--surface-3);
251
+ border-radius: var(--radius-pill);
252
+ cursor: pointer;
253
+ transition: background var(--dur-med) var(--ease);
254
+ }
255
+ .ui-switch__track::before {
256
+ content: "";
257
+ position: absolute;
258
+ top: 3px;
259
+ left: 3px;
260
+ width: calc(var(--sw-h) - 6px);
261
+ height: calc(var(--sw-h) - 6px);
262
+ background: var(--control-knob);
263
+ border: 1px solid var(--border-strong);
264
+ box-sizing: border-box;
265
+ border-radius: 50%;
266
+ transition: transform var(--dur-med) var(--ease);
267
+ }
268
+ .ui-switch input:checked + .ui-switch__track {
269
+ background: var(--accent);
270
+ }
271
+ .ui-switch input:checked + .ui-switch__track::before {
272
+ transform: translateX(calc(var(--sw-w) - var(--sw-h)));
273
+ }
274
+ .ui-switch input:focus-visible + .ui-switch__track {
275
+ outline: 2px solid transparent;
276
+ box-shadow: var(--ring);
277
+ }
278
+ .ui-switch input:disabled + .ui-switch__track {
279
+ opacity: 0.5;
280
+ cursor: not-allowed;
281
+ }
282
+
29
283
  /* ../src/styles/tooltip.css */
30
284
  .ui-tip-host {
31
285
  position: relative;
@@ -333,241 +587,6 @@
333
587
  animation: m-scale-in var(--dur-med) var(--ease-out) var(--delay-1) both;
334
588
  }
335
589
 
336
- /* ../src/styles/input.css */
337
- .ui-field {
338
- display: block;
339
- }
340
- .ui-field__label {
341
- display: block;
342
- color: var(--strong);
343
- font-size: var(--text-base);
344
- font-weight: var(--weight-medium);
345
- margin-bottom: 8px;
346
- }
347
- .ui-field__req {
348
- color: var(--pink);
349
- margin-left: 4px;
350
- }
351
- .ui-field__hint {
352
- color: var(--text);
353
- font-size: var(--text-sm);
354
- margin-top: 7px;
355
- line-height: 1.5;
356
- }
357
- .ui-field__error {
358
- color: var(--pink);
359
- font-size: var(--text-sm);
360
- margin-top: 7px;
361
- display: flex;
362
- align-items: center;
363
- gap: 6px;
364
- }
365
- .ui-field__error svg {
366
- width: 16px;
367
- height: 16px;
368
- flex: none;
369
- stroke-width: 2.4;
370
- }
371
- .ui-input,
372
- .ui-textarea,
373
- .ui-select {
374
- font-family: var(--font-sans);
375
- font-size: var(--text-base);
376
- color: var(--strong);
377
- background: var(--field-bg);
378
- border: 1px solid var(--field-edge);
379
- border-radius: var(--radius-md);
380
- padding: 12px 15px;
381
- width: 100%;
382
- transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
383
- }
384
- .ui-textarea {
385
- resize: vertical;
386
- min-height: 96px;
387
- line-height: 1.55;
388
- }
389
- .ui-input:hover,
390
- .ui-textarea:hover,
391
- .ui-select:hover {
392
- border-color: var(--field-edge-hover);
393
- }
394
- .ui-input:focus-visible,
395
- .ui-textarea:focus-visible,
396
- .ui-select:focus-visible {
397
- outline: 2px solid transparent;
398
- border-color: var(--accent);
399
- box-shadow: var(--ring);
400
- }
401
- .ui-input::placeholder,
402
- .ui-textarea::placeholder {
403
- color: var(--muted);
404
- opacity: 0.9;
405
- }
406
- .ui-input:disabled,
407
- .ui-select:disabled,
408
- .ui-textarea:disabled {
409
- background: var(--disabled-surface);
410
- border-color: var(--disabled-border);
411
- color: var(--disabled-ink);
412
- cursor: not-allowed;
413
- }
414
- .ui-input.is-invalid,
415
- .ui-select.is-invalid,
416
- .ui-textarea.is-invalid {
417
- border-color: var(--pink);
418
- }
419
- .ui-input[type=search]::-webkit-search-cancel-button {
420
- appearance: none;
421
- display: none;
422
- }
423
- .ui-input-group {
424
- position: relative;
425
- display: flex;
426
- align-items: center;
427
- }
428
- .ui-input-group .ui-input {
429
- padding-left: 42px;
430
- }
431
- .ui-input-group__icon {
432
- position: absolute;
433
- left: 14px;
434
- width: 17px;
435
- height: 17px;
436
- color: var(--muted);
437
- pointer-events: none;
438
- }
439
- .ui-input-group__icon svg {
440
- width: 100%;
441
- height: 100%;
442
- stroke: currentColor;
443
- fill: none;
444
- stroke-width: 2.2;
445
- }
446
- .ui-select {
447
- appearance: none;
448
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a29db6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
449
- background-repeat: no-repeat;
450
- background-position: right 15px center;
451
- padding-right: 40px;
452
- cursor: pointer;
453
- }
454
- :root[data-theme=light] .ui-select {
455
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
456
- }
457
- .ui-check {
458
- display: inline-flex;
459
- align-items: flex-start;
460
- gap: 11px;
461
- cursor: pointer;
462
- font-size: var(--text-base);
463
- color: var(--text);
464
- line-height: 1.5;
465
- }
466
- .ui-check input {
467
- appearance: none;
468
- width: 19px;
469
- height: 19px;
470
- flex: none;
471
- margin-top: 1px;
472
- border: 1.5px solid var(--border-strong);
473
- border-radius: var(--radius-xs);
474
- background: var(--surface-2);
475
- cursor: pointer;
476
- transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
477
- position: relative;
478
- }
479
- .ui-check input::before {
480
- content: "";
481
- position: absolute;
482
- left: 50%;
483
- top: 50%;
484
- width: 24px;
485
- height: 24px;
486
- transform: translate(-50%, -50%);
487
- }
488
- .ui-check input[type=radio] {
489
- border-radius: 50%;
490
- }
491
- .ui-check input:hover {
492
- border-color: var(--accent);
493
- }
494
- .ui-check input:checked {
495
- background: var(--accent);
496
- border-color: var(--accent);
497
- }
498
- .ui-check input[type=checkbox]:checked::after {
499
- content: "";
500
- position: absolute;
501
- left: 5px;
502
- top: 1.5px;
503
- width: 5px;
504
- height: 10px;
505
- border: solid var(--accent-contrast);
506
- border-width: 0 2px 2px 0;
507
- transform: rotate(45deg);
508
- }
509
- .ui-check input[type=radio]:checked::after {
510
- content: "";
511
- position: absolute;
512
- inset: 4px;
513
- border-radius: 50%;
514
- background: var(--accent-contrast);
515
- }
516
- .ui-check input:focus-visible {
517
- outline: 2px solid transparent;
518
- box-shadow: var(--ring);
519
- }
520
- .ui-switch {
521
- --sw-w: 44px;
522
- --sw-h: 26px;
523
- position: relative;
524
- display: inline-block;
525
- width: var(--sw-w);
526
- height: var(--sw-h);
527
- flex: none;
528
- }
529
- .ui-switch input {
530
- position: absolute;
531
- opacity: 0;
532
- width: 0;
533
- height: 0;
534
- }
535
- .ui-switch__track {
536
- position: absolute;
537
- inset: 0;
538
- background: var(--surface-3);
539
- border-radius: var(--radius-pill);
540
- cursor: pointer;
541
- transition: background var(--dur-med) var(--ease);
542
- }
543
- .ui-switch__track::before {
544
- content: "";
545
- position: absolute;
546
- top: 3px;
547
- left: 3px;
548
- width: calc(var(--sw-h) - 6px);
549
- height: calc(var(--sw-h) - 6px);
550
- background: var(--control-knob);
551
- border: 1px solid var(--border-strong);
552
- box-sizing: border-box;
553
- border-radius: 50%;
554
- transition: transform var(--dur-med) var(--ease);
555
- }
556
- .ui-switch input:checked + .ui-switch__track {
557
- background: var(--accent);
558
- }
559
- .ui-switch input:checked + .ui-switch__track::before {
560
- transform: translateX(calc(var(--sw-w) - var(--sw-h)));
561
- }
562
- .ui-switch input:focus-visible + .ui-switch__track {
563
- outline: 2px solid transparent;
564
- box-shadow: var(--ring);
565
- }
566
- .ui-switch input:disabled + .ui-switch__track {
567
- opacity: 0.5;
568
- cursor: not-allowed;
569
- }
570
-
571
590
  /* src/Field.css */
572
591
  .ui-field-number {
573
592
  display: flex;
package/react/dist/index.d.ts CHANGED
@@ -1,10 +1,26 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ButtonHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
2
+ import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
3
3
 
4
4
  declare function Icon({ name }: {
5
5
  name: string;
6
6
  }): react.JSX.Element;
7
7
 
8
+ type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> & {
9
+ label: ReactNode;
10
+ type?: 'checkbox' | 'radio';
11
+ };
12
+ declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & {
13
+ label: ReactNode;
14
+ type?: "checkbox" | "radio";
15
+ } & react.RefAttributes<HTMLInputElement>>;
16
+
17
+ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> & {
18
+ label: string;
19
+ };
20
+ declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & {
21
+ label: string;
22
+ } & react.RefAttributes<HTMLInputElement>>;
23
+
8
24
  type ButtonProps = {
9
25
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
10
26
  size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -659,7 +675,57 @@ type TooltipProps = {
659
675
  };
660
676
  declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
661
677
 
678
+ type SidebarNavBadge = string | number | {
679
+ text: string | number;
680
+ tone?: 'neutral' | 'accent' | 'live' | 'danger';
681
+ };
682
+ /** A row that goes somewhere. A group takes these as its children. */
683
+ type SidebarNavLeaf = {
684
+ id: string;
685
+ label: string;
686
+ href?: string;
687
+ target?: string;
688
+ icon?: string;
689
+ leading?: ReactNode;
690
+ badge?: SidebarNavBadge;
691
+ disabled?: boolean;
692
+ danger?: boolean;
693
+ };
694
+ /**
695
+ * One level of nesting, the depth `sidebarNav()` renders: its `sideGroup()` maps
696
+ * children through `sideLeaf()`, which has no group branch. A child's own `items`
697
+ * are dropped here too, so the two halves render the same tree.
698
+ */
699
+ type SidebarNavItem = SidebarNavLeaf & {
700
+ items?: SidebarNavLeaf[];
701
+ defaultOpen?: boolean;
702
+ };
703
+ type SidebarNavSection = {
704
+ label?: string;
705
+ items: SidebarNavItem[];
706
+ };
707
+ type SidebarNavProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
708
+ items?: SidebarNavItem[];
709
+ sections?: SidebarNavSection[];
710
+ active?: string;
711
+ activeIs?: 'page' | 'section';
712
+ collapsed?: boolean;
713
+ footer?: ReactNode;
714
+ /** Spread all link props onto the router link to retain its name and current state. */
715
+ renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<'a'>) => ReactNode;
716
+ };
717
+ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
718
+ items?: SidebarNavItem[];
719
+ sections?: SidebarNavSection[];
720
+ active?: string;
721
+ activeIs?: "page" | "section";
722
+ collapsed?: boolean;
723
+ footer?: ReactNode;
724
+ /** Spread all link props onto the router link to retain its name and current state. */
725
+ renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<"a">) => ReactNode;
726
+ } & react.RefAttributes<HTMLElement>>;
727
+
662
728
  declare const PAGE_SIZES: readonly number[];
663
729
  declare const DEFAULT_PAGE_SIZE: number;
664
730
 
665
- export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
731
+ export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };