@hirobius/design-system 0.19.0 → 0.20.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.
- package/CONSUMING.md +9 -6
- package/DESIGN.md +7 -5
- package/README.md +14 -11
- package/codemods/hds-prefix.mjs +231 -0
- package/codemods/jsx-fold.mjs +515 -0
- package/codemods/not-found-pattern.mjs +71 -0
- package/codemods/patterns-subpath.mjs +242 -81
- package/codemods/patterns-subpath.names.json +41 -15
- package/codemods/removed-0.20.json +194 -0
- package/codemods/tile-grid.mjs +283 -0
- package/codemods/unrewritable.mjs +291 -0
- package/dist/chunks/DemoStateContext-Cz5TmrYu.js +32 -0
- package/dist/chunks/empty-state-BBqhCx0S.js +1217 -0
- package/dist/chunks/{form-BvNNnJ0t.js → form-COP3vK9_.js} +29 -27
- package/dist/contexts.js +157 -78
- package/dist/form.js +1 -1
- package/dist/hirobius-ui.js +1826 -5503
- package/dist/manifest.js +12 -13
- package/dist/patterns.js +820 -561
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.js +29 -8
- package/dist/types/src/app/components/avatar-group.d.ts +1 -2
- package/dist/types/src/app/components/badge.d.ts +8 -3
- package/dist/types/src/app/components/blockquote.d.ts +1 -2
- package/dist/types/src/app/components/box-sx.d.ts +110 -13
- package/dist/types/src/app/components/box.d.ts +6 -3
- package/dist/types/src/app/components/breadcrumb.d.ts +0 -5
- package/dist/types/src/app/components/button.d.ts +33 -4
- package/dist/types/src/app/components/card.d.ts +7 -8
- package/dist/types/src/app/components/combobox.d.ts +47 -11
- package/dist/types/src/app/components/container.d.ts +2 -2
- package/dist/types/src/app/components/data-table-section.d.ts +1 -1
- package/dist/types/src/app/components/dialog.d.ts +7 -1
- package/dist/types/src/app/components/disclosure.d.ts +1 -5
- package/dist/types/src/app/components/field.d.ts +1 -2
- package/dist/types/src/app/components/grid.d.ts +10 -6
- package/dist/types/src/app/components/hds-tooltip.d.ts +12 -2
- package/dist/types/src/app/components/inline-code.d.ts +1 -2
- package/dist/types/src/app/components/input.d.ts +8 -5
- package/dist/types/src/app/components/kbd.d.ts +1 -2
- package/dist/types/src/app/components/metadata-list.d.ts +1 -2
- package/dist/types/src/app/components/page-header.d.ts +0 -2
- package/dist/types/src/app/components/popover.d.ts +8 -0
- package/dist/types/src/app/components/progress.d.ts +33 -6
- package/dist/types/src/app/components/segmented-control.d.ts +2 -26
- package/dist/types/src/app/components/select.d.ts +10 -1
- package/dist/types/src/app/components/skeleton.d.ts +2 -3
- package/dist/types/src/app/components/spinner.d.ts +1 -2
- package/dist/types/src/app/components/stack.d.ts +4 -1
- package/dist/types/src/app/components/stat.d.ts +1 -2
- package/dist/types/src/app/components/status-dot.d.ts +18 -4
- package/dist/types/src/app/components/status-list-item.d.ts +1 -2
- package/dist/types/src/app/components/surface.d.ts +2 -3
- package/dist/types/src/app/components/switcher.d.ts +1 -1
- package/dist/types/src/app/components/table.d.ts +1 -15
- package/dist/types/src/app/components/tag.d.ts +0 -6
- package/dist/types/src/app/components/text.d.ts +1 -2
- package/dist/types/src/app/components/textarea.d.ts +1 -2
- package/dist/types/src/app/components/toast.d.ts +1 -2
- package/dist/types/src/app/components/tooltip.d.ts +1 -1
- package/dist/types/src/app/context/DemoStateContext.d.ts +1 -1
- package/dist/types/src/app/context/RouterContext.d.ts +5 -5
- package/dist/types/src/app/data/manifest-types.d.ts +6 -5
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +8 -0
- package/dist/types/src/app/design-system/generated-token-values.d.ts +1 -0
- package/dist/types/src/app/design-system/tokens.d.ts +22 -3
- package/dist/types/src/icons.d.ts +1 -1
- package/dist/types/src/index.d.ts +33 -124
- package/dist/types/src/patterns.d.ts +20 -25
- package/dist/variables.css +6 -0
- package/docs/CONSUMING.md +21 -13
- package/hirobius.tokens.json +48 -15
- package/llms.txt +19 -20
- package/package.json +18 -22
- package/public/hds-manifest.json +2400 -6488
- package/public/llms/components.txt +41 -423
- package/public/llms/layout.txt +4 -4
- package/public/llms-full.txt +67 -448
- package/public/llms.txt +19 -20
- package/src/app/data/component-api.json +1379 -3271
- package/dist/chunks/LanguageContext-CH_bwzCq.js +0 -83
- package/dist/chunks/TokenDisplayContext-evZi_214.js +0 -18
- package/dist/chunks/activity-feed-DIMeUJpW.js +0 -21950
- package/dist/types/src/app/components/activity-feed.d.ts +0 -73
- package/dist/types/src/app/components/app-shell.d.ts +0 -40
- package/dist/types/src/app/components/aspect-ratio.d.ts +0 -25
- package/dist/types/src/app/components/bleed.d.ts +0 -39
- package/dist/types/src/app/components/button-group.d.ts +0 -22
- package/dist/types/src/app/components/calendar.d.ts +0 -22
- package/dist/types/src/app/components/carousel.d.ts +0 -26
- package/dist/types/src/app/components/center.d.ts +0 -36
- package/dist/types/src/app/components/cinematic-link.d.ts +0 -18
- package/dist/types/src/app/components/circular-progress.d.ts +0 -28
- package/dist/types/src/app/components/cluster.d.ts +0 -39
- package/dist/types/src/app/components/command-palette.d.ts +0 -46
- package/dist/types/src/app/components/component-instance-matrix.d.ts +0 -27
- package/dist/types/src/app/components/context-menu.d.ts +0 -78
- package/dist/types/src/app/components/cover.d.ts +0 -43
- package/dist/types/src/app/components/date-input.d.ts +0 -31
- package/dist/types/src/app/components/date-range-input.d.ts +0 -34
- package/dist/types/src/app/components/date-time-input.d.ts +0 -30
- package/dist/types/src/app/components/doc-link-card.d.ts +0 -32
- package/dist/types/src/app/components/error-boundary.d.ts +0 -25
- package/dist/types/src/app/components/file-input.d.ts +0 -30
- package/dist/types/src/app/components/foundation-swatch.d.ts +0 -45
- package/dist/types/src/app/components/frame.d.ts +0 -38
- package/dist/types/src/app/components/heading-stack.d.ts +0 -52
- package/dist/types/src/app/components/history-card.d.ts +0 -12
- package/dist/types/src/app/components/hover-card.d.ts +0 -46
- package/dist/types/src/app/components/icon-button.d.ts +0 -22
- package/dist/types/src/app/components/image-lightbox.d.ts +0 -14
- package/dist/types/src/app/components/input-group.d.ts +0 -23
- package/dist/types/src/app/components/multi-selector.d.ts +0 -40
- package/dist/types/src/app/components/nav-group.d.ts +0 -29
- package/dist/types/src/app/components/nav-item.d.ts +0 -33
- package/dist/types/src/app/components/not-found-pattern.d.ts +0 -1
- package/dist/types/src/app/components/overflow-list.d.ts +0 -21
- package/dist/types/src/app/components/selectable-card.d.ts +0 -29
- package/dist/types/src/app/components/side-nav.d.ts +0 -23
- package/dist/types/src/app/components/sketch.d.ts +0 -19
- package/dist/types/src/app/components/stacked-card-rail.d.ts +0 -32
- package/dist/types/src/app/components/stepper-field.d.ts +0 -12
- package/dist/types/src/app/components/stepper.d.ts +0 -33
- package/dist/types/src/app/components/text-lockup.d.ts +0 -38
- package/dist/types/src/app/components/tile-grid.d.ts +0 -17
- package/dist/types/src/app/components/time-input.d.ts +0 -24
- package/dist/types/src/app/components/toggle-button.d.ts +0 -32
- package/dist/types/src/app/components/token.d.ts +0 -90
- package/dist/types/src/app/components/tokenUtils.d.ts +0 -38
- package/dist/types/src/app/components/tokenizer.d.ts +0 -24
- package/dist/types/src/app/components/toolbar.d.ts +0 -36
- package/dist/types/src/app/components/top-nav.d.ts +0 -23
- package/dist/types/src/app/components/tree-list.d.ts +0 -30
- package/dist/types/src/app/data/nav-model.d.ts +0 -39
- package/dist/types/src/app/hooks/useFocusVisible.d.ts +0 -9
- package/dist/types/src/app/layouts/CaseStudyLayout.d.ts +0 -20
- package/dist/types/src/app/layouts/DocLayout.d.ts +0 -14
- package/dist/types/src/app/layouts/EmbeddedDocLayoutContext.d.ts +0 -6
- package/dist/types/src/app/layouts/HdsDocsShell.d.ts +0 -72
- package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +0 -14
- package/dist/types/src/app/lib/hds-search.d.ts +0 -45
- package/dist/types/src/app/lib/nav-active.d.ts +0 -16
- package/dist/types/src/app/lib/navLevels.d.ts +0 -4
|
@@ -20,10 +20,6 @@ This file intentionally does not embed prop tables or long-form API docs.
|
|
|
20
20
|
|
|
21
21
|
Compact: name, first line of description, then prop: type = default. Full detail in `src/app/data/component-api.json`.
|
|
22
22
|
|
|
23
|
-
### ActivityFeed
|
|
24
|
-
ActivityFeed — chronological system event log. Renders a list of activity events using white space as the sole separator. No dividers, no borders between items…
|
|
25
|
-
- events: ActivityEvent[] = [ { id: 'evt-001', title: 'File Uploade…
|
|
26
|
-
|
|
27
23
|
### Alert
|
|
28
24
|
Alert - compact feedback surface with contextual severity.
|
|
29
25
|
- children: ReactNode
|
|
@@ -37,11 +33,6 @@ AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled
|
|
|
37
33
|
- onOpenChange: ((open: boolean) => void)
|
|
38
34
|
- open: boolean
|
|
39
35
|
|
|
40
|
-
### AspectRatio
|
|
41
|
-
Locks its single child to the given width-to-height `ratio` so media reserves its box up front and never causes layout shift while it loads.
|
|
42
|
-
- asChild: boolean
|
|
43
|
-
- ratio: number = 1
|
|
44
|
-
|
|
45
36
|
### AssetImg
|
|
46
37
|
AssetImg - responsive asset frame with fallback placeholder handling. Contexts: default, lightbox, and detail.
|
|
47
38
|
- alt: string
|
|
@@ -79,16 +70,10 @@ Renders up to `max` overlapping avatars followed by a `+N` overflow chip.
|
|
|
79
70
|
### Badge
|
|
80
71
|
Compact metadata/status chip. Tone is the only styling input.
|
|
81
72
|
- as: ElementType<any, keyof IntrinsicElements> = span
|
|
82
|
-
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
- amount: 'tight' | 'normal' | 'inset' | 'spacious' = normal
|
|
87
|
-
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
88
|
-
- axis: 'x' | 'y' | 'both' = x
|
|
89
|
-
- children: ReactNode
|
|
90
|
-
- className: string
|
|
91
|
-
- style: CSSProperties
|
|
73
|
+
- dot: boolean = false
|
|
74
|
+
- label: string
|
|
75
|
+
- size: "sm" | "md" | "lg"
|
|
76
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress" | null
|
|
92
77
|
|
|
93
78
|
### Blockquote
|
|
94
79
|
A quoted passage; pass `cite` for the source URL and `attribution` for a byline.
|
|
@@ -109,23 +94,19 @@ Breadcrumb trail. Links route through the HDS router seam (plain anchors with no
|
|
|
109
94
|
### Button
|
|
110
95
|
Triggers an action when activated.
|
|
111
96
|
- asChild: boolean = false
|
|
97
|
+
- defaultPressed: boolean
|
|
112
98
|
- disabled: boolean
|
|
113
99
|
- iconLeft: ReactNode
|
|
114
100
|
- iconOnly: boolean = false
|
|
115
101
|
- iconRight: ReactNode
|
|
116
102
|
- label: string
|
|
117
103
|
- loading: boolean = false
|
|
104
|
+
- onPressedChange: ((pressed: boolean) => void)
|
|
105
|
+
- pressed: boolean
|
|
118
106
|
- size: "sm" | "md" | "lg" | null
|
|
119
|
-
- tone: "
|
|
107
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" | null
|
|
120
108
|
- variant: "primary" | "secondary" | "tertiary" | null
|
|
121
109
|
|
|
122
|
-
### ButtonGroup
|
|
123
|
-
Groups Button (or button-like) children into a single attached segment.
|
|
124
|
-
- orientation: "horizontal" | "vertical" | null
|
|
125
|
-
|
|
126
|
-
### Calendar
|
|
127
|
-
Renders an accessible month grid; compose it inside a Popover for the date inputs.
|
|
128
|
-
|
|
129
110
|
### Callout
|
|
130
111
|
Tone-driven side-rule callout for status, quotes, hypotheses.
|
|
131
112
|
- italic: boolean = false
|
|
@@ -137,7 +118,10 @@ Tagged per-export, not on the file block: this module exports eight components a
|
|
|
137
118
|
- bordered: boolean = false
|
|
138
119
|
- gap: GapOption = tight
|
|
139
120
|
- noPadding: boolean = false
|
|
121
|
+
- onSelectedChange: ((selected: boolean) => void)
|
|
140
122
|
- padding: PaddingOption = component
|
|
123
|
+
- selectable: boolean = false
|
|
124
|
+
- selected: boolean = false
|
|
141
125
|
- tone: 'neutral' | 'danger' | 'success' | 'warning' | 'info' = neutral
|
|
142
126
|
- variant: 'default' | 'accent' = default
|
|
143
127
|
|
|
@@ -171,21 +155,6 @@ Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (D
|
|
|
171
155
|
### CardTitle
|
|
172
156
|
Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §"Card Anatomy"). Status, progress, and metadata are layout-bearing — th…
|
|
173
157
|
|
|
174
|
-
### Carousel
|
|
175
|
-
Renders children as a snap-scrolling track with Prev/Next scroll buttons.
|
|
176
|
-
- ariaLabel: string = Carousel
|
|
177
|
-
- children: ReactNode
|
|
178
|
-
- showControls: boolean = true
|
|
179
|
-
|
|
180
|
-
### Center
|
|
181
|
-
Center — max-width column, auto-centered horizontally. Every Layout reference: https://every-layout.dev/layouts/center/
|
|
182
|
-
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
183
|
-
- children: ReactNode
|
|
184
|
-
- className: string
|
|
185
|
-
- gutter: 'tight' | 'normal' | 'inset' | 'spacious'
|
|
186
|
-
- maxWidth: 'content' | 'max' = content
|
|
187
|
-
- style: CSSProperties
|
|
188
|
-
|
|
189
158
|
### Checkbox
|
|
190
159
|
Checkbox — custom-drawn checkbox with check / indeterminate glyph.
|
|
191
160
|
- checked: boolean
|
|
@@ -193,30 +162,6 @@ Checkbox — custom-drawn checkbox with check / indeterminate glyph.
|
|
|
193
162
|
- label: string
|
|
194
163
|
- onChange: (v: boolean) => void
|
|
195
164
|
|
|
196
|
-
### CinematicLink
|
|
197
|
-
CinematicLink - cinematic editorial link treatment for portfolio surfaces.
|
|
198
|
-
- children: string
|
|
199
|
-
- href: string
|
|
200
|
-
|
|
201
|
-
### CircularProgress
|
|
202
|
-
A circular progress ring; pass `value`/`max` or set `indeterminate`.
|
|
203
|
-
- indeterminate: boolean = false
|
|
204
|
-
- label: string
|
|
205
|
-
- max: number = 100
|
|
206
|
-
- size: "sm" | "md" | "lg" = md
|
|
207
|
-
- tone: "neutral" | "danger" | "success" | "warning" | "info" | null
|
|
208
|
-
- value: number = 0
|
|
209
|
-
|
|
210
|
-
### Cluster
|
|
211
|
-
Cluster — wrapping horizontal group with even gaps. Every Layout reference: https://every-layout.dev/layouts/cluster/
|
|
212
|
-
- align: 'start' | 'center' | 'end' | 'stretch' = center
|
|
213
|
-
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
214
|
-
- children: ReactNode
|
|
215
|
-
- className: string
|
|
216
|
-
- gap: 'tight' | 'normal' | 'inset' | 'spacious' = tight
|
|
217
|
-
- justify: 'start' | 'center' | 'end' | 'space-between' = start
|
|
218
|
-
- style: CSSProperties
|
|
219
|
-
|
|
220
165
|
### CodeBlock
|
|
221
166
|
CodeBlock - code display with copy button and optional collapsible toggle.
|
|
222
167
|
- className: string
|
|
@@ -229,32 +174,20 @@ CodeBlock - code display with copy button and optional collapsible toggle.
|
|
|
229
174
|
- variant: "inline" | "block" = block
|
|
230
175
|
|
|
231
176
|
### Combobox
|
|
232
|
-
Combobox — searchable single-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current
|
|
177
|
+
Combobox — searchable single- or multi-select (Popover + filtered listbox). A select-with-search built on the HDS Popover. The trigger shows the current select…
|
|
178
|
+
- aria-describedby: string
|
|
179
|
+
- aria-invalid: boolean
|
|
233
180
|
- aria-label: string
|
|
234
181
|
- className: string
|
|
235
182
|
- disabled: boolean = false
|
|
236
183
|
- emptyMessage: string = No results
|
|
237
|
-
-
|
|
184
|
+
- id: string
|
|
185
|
+
- multiple: boolean
|
|
186
|
+
- onChange: ((value: string) => void) | ((value: string[]) => void)
|
|
238
187
|
- options: ComboboxOption[]
|
|
239
188
|
- placeholder: string = Select…
|
|
240
189
|
- searchPlaceholder: string = Search…
|
|
241
|
-
- value: string | null
|
|
242
|
-
|
|
243
|
-
### CommandPalette
|
|
244
|
-
Mountable trigger + dialog. Drop into header slot; component manages its own open state and Cmd-K / Ctrl-K global keybinding.
|
|
245
|
-
- className: string
|
|
246
|
-
|
|
247
|
-
### ComponentInstanceMatrix
|
|
248
|
-
ComponentInstanceMatrix — responsive specimen matrix for variant and state parity.
|
|
249
|
-
- componentName: string
|
|
250
|
-
- dimensionX: string
|
|
251
|
-
- dimensionY: string
|
|
252
|
-
- freezeRowState: boolean = false
|
|
253
|
-
- isMobile: boolean
|
|
254
|
-
- renderInstance: (rowKey: string, columnKey: string) => ReactNode
|
|
255
|
-
- rowLabelTone: "primary" | "secondary" = primary
|
|
256
|
-
- rowLabelWidth: number = 120
|
|
257
|
-
- title: string
|
|
190
|
+
- value: string | readonly string[] | null
|
|
258
191
|
|
|
259
192
|
### Container
|
|
260
193
|
Container — semantic width-constrained layout. Centers content horizontally and applies semantic max-width constraints. - maxWidth options: 'content' (760px pr…
|
|
@@ -264,67 +197,17 @@ Container — semantic width-constrained layout. Centers content horizontally an
|
|
|
264
197
|
- padding: string = var(--semantic-space-surface-padding)
|
|
265
198
|
- style: CSSProperties
|
|
266
199
|
|
|
267
|
-
### ContextMenu
|
|
268
|
-
ContextMenu root + parts. Wrap the right-clickable area in `ContextMenu.Trigger`. Controlled via `onOpenChange`.
|
|
269
|
-
- children: React.ReactNode
|
|
270
|
-
- dir: ("ltr" | "rtl")
|
|
271
|
-
- modal: boolean
|
|
272
|
-
- onOpenChange: ((open: boolean) => void)
|
|
273
|
-
- open: boolean
|
|
274
|
-
|
|
275
|
-
### Cover
|
|
276
|
-
Cover — vertical shell with an auto-centered main region. Every Layout reference: https://every-layout.dev/layouts/cover/
|
|
277
|
-
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
278
|
-
- centerSlot: ReactNode
|
|
279
|
-
- children: ReactNode
|
|
280
|
-
- className: string
|
|
281
|
-
- footer: ReactNode
|
|
282
|
-
- gap: 'tight' | 'normal' | 'inset' | 'spacious' = normal
|
|
283
|
-
- header: ReactNode
|
|
284
|
-
- minHeight: string = 100svh
|
|
285
|
-
- style: CSSProperties
|
|
286
|
-
|
|
287
200
|
### DataTableSection
|
|
288
201
|
Section heading and toolbar over a `Table`. Row actions are consumer nodes in a trailing column, the table scrolls horizontally on narrow widths without a `min…
|
|
289
202
|
- actionsLabel: string = Actions
|
|
290
203
|
- columns: TableColumn[]
|
|
291
204
|
- emptyDescription: ReactNode
|
|
292
205
|
- emptyTitle: ReactNode = Nothing here yet
|
|
293
|
-
- level:
|
|
206
|
+
- level: 6 | 3 | 4 | 2 | 5 = 2
|
|
294
207
|
- rows: DataTableSectionRow[]
|
|
295
208
|
- title: ReactNode
|
|
296
209
|
- toolbar: ReactNode
|
|
297
210
|
|
|
298
|
-
### DateInput
|
|
299
|
-
Text field + calendar popover for picking a single date.
|
|
300
|
-
- aria-label: string
|
|
301
|
-
- disabled: boolean = false
|
|
302
|
-
- displayFormat: string = yyyy-MM-dd
|
|
303
|
-
- id: string
|
|
304
|
-
- onChange: ((date: Date) => void) | undefined
|
|
305
|
-
- placeholder: string
|
|
306
|
-
- value: Date
|
|
307
|
-
|
|
308
|
-
### DateRangeInput
|
|
309
|
-
DateRangeInput — date-range field composing the existing Popover with Calendar in range mode, so picking a start/end date reads as one overlay pattern with Com…
|
|
310
|
-
- aria-label: string
|
|
311
|
-
- disabled: boolean = false
|
|
312
|
-
- displayFormat: string = yyyy-MM-dd
|
|
313
|
-
- id: string
|
|
314
|
-
- numberOfMonths: number = 2
|
|
315
|
-
- onChange: ((range: DateRange) => void) | undefined
|
|
316
|
-
- placeholder: string = Select date range
|
|
317
|
-
- value: DateRange
|
|
318
|
-
|
|
319
|
-
### DateTimeInput
|
|
320
|
-
Text date field + calendar popover, paired with a native time field, producing one Date.
|
|
321
|
-
- aria-label: string
|
|
322
|
-
- dateFormat: string = yyyy-MM-dd
|
|
323
|
-
- disabled: boolean = false
|
|
324
|
-
- id: string
|
|
325
|
-
- onChange: ((date: Date) => void) | undefined
|
|
326
|
-
- value: Date
|
|
327
|
-
|
|
328
211
|
### DestructiveSection
|
|
329
212
|
Titled danger zone: a title, an explanation, and one danger `Button` that opens an `AlertDialog`. Pressing the button never runs the action; only the dialog's …
|
|
330
213
|
- actionLabel: ReactNode
|
|
@@ -332,7 +215,7 @@ Titled danger zone: a title, an explanation, and one danger `Button` that opens
|
|
|
332
215
|
- confirmBody: ReactNode
|
|
333
216
|
- confirmLabel: string
|
|
334
217
|
- description: ReactNode
|
|
335
|
-
- level:
|
|
218
|
+
- level: 6 | 3 | 4 | 2 | 5 = 2
|
|
336
219
|
- onConfirm: () => void
|
|
337
220
|
- title: ReactNode
|
|
338
221
|
|
|
@@ -410,19 +293,6 @@ Divider — semantic separator between content regions.
|
|
|
410
293
|
- strong: boolean
|
|
411
294
|
- variant: "strong" | "default" | null
|
|
412
295
|
|
|
413
|
-
### DocLinkCard
|
|
414
|
-
DocLinkCard - navigation card for editorial and documentation cross-links.
|
|
415
|
-
- accent: boolean = false
|
|
416
|
-
- affordance: "up-right" | "right" | "left" = up-right
|
|
417
|
-
- description: string
|
|
418
|
-
- disabled: boolean = false
|
|
419
|
-
- href: string
|
|
420
|
-
- icon: LucideIcon
|
|
421
|
-
- meta: string
|
|
422
|
-
- metaStyle: "caption" | "ui" = caption
|
|
423
|
-
- title: string
|
|
424
|
-
- variant: "feature" | "pager" = feature
|
|
425
|
-
|
|
426
296
|
### EmptyState
|
|
427
297
|
EmptyState — consistent no-data placeholder for lists, grids, and sections.
|
|
428
298
|
- className: string
|
|
@@ -434,17 +304,9 @@ Caption label paired with a value — used in metadata grids and read-only forms
|
|
|
434
304
|
- children: React.ReactNode
|
|
435
305
|
- label: string
|
|
436
306
|
- mono: boolean | null
|
|
437
|
-
- tone: "
|
|
307
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" | null
|
|
438
308
|
- value: ReactNode
|
|
439
309
|
|
|
440
|
-
### FileInput
|
|
441
|
-
A dashed dropzone that opens the native file picker or accepts a drag-and-drop.
|
|
442
|
-
- accept: string
|
|
443
|
-
- disabled: boolean
|
|
444
|
-
- label: ReactNode = Click to upload or drag and drop
|
|
445
|
-
- multiple: boolean
|
|
446
|
-
- onFiles: ((files: File[]) => void)
|
|
447
|
-
|
|
448
310
|
### Form
|
|
449
311
|
Styled `<form>` with consistent vertical field rhythm. Tagged per-export: FormField and FormFieldShell share this module and have no Figma node, so a file-leve…
|
|
450
312
|
|
|
@@ -475,50 +337,22 @@ Presentational label + control slot + helper/error markup. Renders `children` ve
|
|
|
475
337
|
- label: string
|
|
476
338
|
- required: boolean = false
|
|
477
339
|
|
|
478
|
-
### FoundationSwatch
|
|
479
|
-
FoundationSwatch - governed foundation specimen for color and semantic role previews.
|
|
480
|
-
- background: string
|
|
481
|
-
- bordered: boolean = false
|
|
482
|
-
- details: string[]
|
|
483
|
-
- foreground: string = var(--semantic-color-content-primary)
|
|
484
|
-
- hidePreviewLabel: boolean = false
|
|
485
|
-
- label: string
|
|
486
|
-
- note: ReactNode
|
|
487
|
-
- previewPosition: 'bottom-left' | 'top-left' | 'center' = center
|
|
488
|
-
- specimen: ReactNode
|
|
489
|
-
- swatchVar: string
|
|
490
|
-
- tokenDisplayPreset: 'depth1' | 'depth2' | 'full' = depth2
|
|
491
|
-
- tokenPath: string
|
|
492
|
-
- value: string
|
|
493
|
-
|
|
494
|
-
### Frame
|
|
495
|
-
Frame — aspect-ratio-locked, token-clipped media box. Every Layout reference: https://every-layout.dev/layouts/frame/
|
|
496
|
-
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
497
|
-
- children: ReactNode
|
|
498
|
-
- className: string
|
|
499
|
-
- radius: 'none' | 'sm' | 'md' | 'full' = md
|
|
500
|
-
- ratio: number = 16 / 9
|
|
501
|
-
- style: CSSProperties
|
|
502
|
-
|
|
503
340
|
### Grid
|
|
504
341
|
Grid — responsive grid composition primitive. Enforces semantic gap and column values. No arbitrary CSS grid. - layout='fixed': responsive base (collapses via …
|
|
505
342
|
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
506
343
|
- children: ReactNode
|
|
507
344
|
- className: string
|
|
508
345
|
- columns: number = 12
|
|
509
|
-
- gap: 'tight' | 'normal' | 'inset' | 'spacious' = inset
|
|
510
|
-
- layout: 'fixed' | 'auto-fit' = fixed
|
|
346
|
+
- gap: 'medium' | 'tight' | 'normal' | 'inset' | 'spacious' = inset
|
|
347
|
+
- layout: 'fixed' | 'auto-fit' | 'auto-fill' = fixed
|
|
348
|
+
- minItemWidth: string
|
|
511
349
|
- style: CSSProperties
|
|
512
350
|
- subgrid: boolean = false
|
|
513
351
|
|
|
514
|
-
###
|
|
515
|
-
|
|
352
|
+
### HdsRouterProvider
|
|
353
|
+
Provide a router adapter to all HDS components below. Wrap your app root once.
|
|
354
|
+
- adapter: HdsRouterAdapter
|
|
516
355
|
- children: ReactNode
|
|
517
|
-
- className: string
|
|
518
|
-
- leftRail: ReactNode
|
|
519
|
-
- rightRail: ReactNode
|
|
520
|
-
- style: CSSProperties
|
|
521
|
-
- topOffset: string = 0px
|
|
522
356
|
|
|
523
357
|
### HdsThemeProvider
|
|
524
358
|
Renders a `data-hds` scope wrapper that carries the four theming dials as root attributes + CSS vars, and exposes them to `useHdsTheme()`.
|
|
@@ -532,25 +366,6 @@ Renders a `data-hds` scope wrapper that carries the four theming dials as root a
|
|
|
532
366
|
- style: CSSProperties
|
|
533
367
|
- theme: 'light' | 'dark'
|
|
534
368
|
|
|
535
|
-
### HeadingStack
|
|
536
|
-
HeadingStack — enforced vertical rhythm for heading + subheading pairs. Automatically handles gap and secondary color, preventing manual stacking. - Heading le…
|
|
537
|
-
- as: ElementType = div
|
|
538
|
-
- gap: HdsHeadingGap = px8
|
|
539
|
-
- heading: string
|
|
540
|
-
- headingAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
541
|
-
- level: HdsHeadingLevel
|
|
542
|
-
- subheading: string
|
|
543
|
-
- subheadingAs: 'p' | 'div' | 'span' = p
|
|
544
|
-
|
|
545
|
-
### HoverCard
|
|
546
|
-
HoverCard root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`; tune timing with `openDelay`/`closeDelay`.
|
|
547
|
-
- children: React.ReactNode
|
|
548
|
-
- closeDelay: number
|
|
549
|
-
- defaultOpen: boolean
|
|
550
|
-
- onOpenChange: ((open: boolean) => void)
|
|
551
|
-
- open: boolean
|
|
552
|
-
- openDelay: number
|
|
553
|
-
|
|
554
369
|
### Icon
|
|
555
370
|
Icon — semantic icon wrapper for Lucide icons.
|
|
556
371
|
- aria-hidden: boolean | "true" | "false" = true
|
|
@@ -561,22 +376,6 @@ Icon — semantic icon wrapper for Lucide icons.
|
|
|
561
376
|
- style: CSSProperties
|
|
562
377
|
- weight: "fill" | "bold" | "light" | "thin" | "regular" | "duotone"
|
|
563
378
|
|
|
564
|
-
### IconButton
|
|
565
|
-
IconButton ” icon-only action trigger built on the shared Button primitive.
|
|
566
|
-
- aria-label: string
|
|
567
|
-
- asChild: boolean
|
|
568
|
-
- disabled: boolean
|
|
569
|
-
- icon: LucideIcon
|
|
570
|
-
- iconColor: string
|
|
571
|
-
- iconLeft: ReactNode
|
|
572
|
-
- iconRight: ReactNode
|
|
573
|
-
- iconSize: IconSize
|
|
574
|
-
- label: string
|
|
575
|
-
- loading: boolean
|
|
576
|
-
- size: "sm" | "md" | "lg"
|
|
577
|
-
- tone: "neutral" | "danger" | "success" | "warning" | "info" | null
|
|
578
|
-
- variant: "primary" | "secondary" | "tertiary" | null
|
|
579
|
-
|
|
580
379
|
### InlineCode
|
|
581
380
|
InlineCode — inline code chip for token paths, file paths, and code-adjacent prose.
|
|
582
381
|
- children: ReactNode
|
|
@@ -602,34 +401,17 @@ Input — text field primitive with label, helper, and error slots.
|
|
|
602
401
|
- label: string
|
|
603
402
|
- leadingVisual: ReactNode
|
|
604
403
|
- loading: boolean = false
|
|
404
|
+
- prefix: ReactNode
|
|
605
405
|
- size: InputSize = md
|
|
406
|
+
- suffix: ReactNode
|
|
606
407
|
- textStyle: "body" | "mono" = body
|
|
607
408
|
- trailingVisual: ReactNode
|
|
608
|
-
- type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' = text
|
|
609
|
-
|
|
610
|
-
### InputGroup
|
|
611
|
-
A single-line input with optional `leading`/`trailing` adornments.
|
|
612
|
-
- className: string
|
|
613
|
-
- leading: ReactNode
|
|
614
|
-
- size: "sm" | "md" | "lg" | null
|
|
615
|
-
- trailing: ReactNode
|
|
409
|
+
- type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | … = text
|
|
616
410
|
|
|
617
411
|
### Kbd
|
|
618
412
|
Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`.
|
|
619
413
|
- size: "sm" | "md" | "lg" | null
|
|
620
414
|
|
|
621
|
-
### Lightbox
|
|
622
|
-
Lightbox — full-bleed image viewer built on Radix Dialog. Full-bleed image viewer built on Radix Dialog (raw primitives, not the card `Dialog` wrapper — a ligh…
|
|
623
|
-
- alt: string
|
|
624
|
-
- caption: string
|
|
625
|
-
- captionHref: string
|
|
626
|
-
- captionLabel: string
|
|
627
|
-
- naturalHeight: number
|
|
628
|
-
- naturalWidth: number
|
|
629
|
-
- onClose: () => void
|
|
630
|
-
- open: boolean
|
|
631
|
-
- src: string
|
|
632
|
-
|
|
633
415
|
### Menu
|
|
634
416
|
Menu root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.
|
|
635
417
|
- children: React.ReactNode
|
|
@@ -657,44 +439,6 @@ One metric tile: eyebrow label, `heading2` value, caption sub line, on a raised
|
|
|
657
439
|
A row of `MetricTile`s. The grid has `min(tiles, 4)` columns, so three tiles fill three columns and never leave an empty fourth. The default for any row of hea…
|
|
658
440
|
- children: ReactNode
|
|
659
441
|
|
|
660
|
-
### MultiSelector
|
|
661
|
-
MultiSelector — multi-select dropdown composing the existing Popover with a checkbox option list, so choosing several values from a fixed set reads as one over…
|
|
662
|
-
- className: string
|
|
663
|
-
- disabled: boolean = false
|
|
664
|
-
- onChange: (next: string[]) => void
|
|
665
|
-
- options: MultiSelectorOption[]
|
|
666
|
-
- placeholder: string = Select…
|
|
667
|
-
- value: string[]
|
|
668
|
-
|
|
669
|
-
### NavGroup
|
|
670
|
-
NavGroup - labeled navigation group for stacks of nav items.
|
|
671
|
-
- children: ReactNode
|
|
672
|
-
- className: string
|
|
673
|
-
- collapsible: boolean = false
|
|
674
|
-
- contentStyle: CSSProperties
|
|
675
|
-
- getExact: ((item: NavItem) => boolean)
|
|
676
|
-
- items: NavItem[]
|
|
677
|
-
- label: string
|
|
678
|
-
- level: NavLevel = section
|
|
679
|
-
- onNavigate: (() => void)
|
|
680
|
-
- style: CSSProperties
|
|
681
|
-
- variant: 'side' | 'toc' = side
|
|
682
|
-
|
|
683
|
-
### NavItem
|
|
684
|
-
NavItem - navigation row primitive for sidebars, table of contents, and list navigation.
|
|
685
|
-
- active: boolean = false
|
|
686
|
-
- disabled: boolean = false
|
|
687
|
-
- label: string
|
|
688
|
-
- level: NavLevel = root
|
|
689
|
-
- onNavigate: ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)
|
|
690
|
-
- variant: NavVariant = side
|
|
691
|
-
|
|
692
|
-
### OverflowList
|
|
693
|
-
Renders up to `max` children followed by a `+N` overflow chip (or custom node).
|
|
694
|
-
- children: ReactNode
|
|
695
|
-
- max: number
|
|
696
|
-
- renderOverflow: ((count: number) => ReactNode)
|
|
697
|
-
|
|
698
442
|
### Page
|
|
699
443
|
Page — standard page shell. Wraps page content in Container (width constraint) and applies the canonical vertical padding so content breathes against the viewp…
|
|
700
444
|
- children: ReactNode
|
|
@@ -736,10 +480,13 @@ Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled with
|
|
|
736
480
|
- open: boolean
|
|
737
481
|
|
|
738
482
|
### Progress
|
|
739
|
-
Linear
|
|
483
|
+
Linear bar or circular ring. Determinate when `value` is a number, else indeterminate.
|
|
740
484
|
- label: string = Progress
|
|
485
|
+
- max: number = 100
|
|
741
486
|
- size: "sm" | "md" | "lg" | null
|
|
487
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" = neutral
|
|
742
488
|
- value: number | null = null
|
|
489
|
+
- variant: "linear" | "circular" = linear
|
|
743
490
|
|
|
744
491
|
### Radio
|
|
745
492
|
Radio — radio button with animated selection indicator.
|
|
@@ -770,30 +517,16 @@ SegmentedControl " segmented selection input for compact mutually-exclusive choi
|
|
|
770
517
|
|
|
771
518
|
### Select
|
|
772
519
|
Select — dropdown selector built on Radix Select (ADR-001 Radix convention). Radix owns the listbox a11y contract: managed focus + active-descendant, typeahead…
|
|
520
|
+
- aria-describedby: string
|
|
521
|
+
- aria-invalid: boolean
|
|
773
522
|
- container: HTMLElement | null
|
|
523
|
+
- id: string
|
|
774
524
|
- label: string
|
|
775
525
|
- onChange: (v: string) => void
|
|
776
526
|
- options: { value: string; label: string; }[]
|
|
777
527
|
- showLabel: boolean = true
|
|
778
528
|
- value: string
|
|
779
529
|
|
|
780
|
-
### SelectableCard
|
|
781
|
-
A card-shaped single checkbox — click or activate to toggle selection.
|
|
782
|
-
- disabled: boolean
|
|
783
|
-
- onSelectedChange: ((selected: boolean) => void)
|
|
784
|
-
- selected: boolean = false
|
|
785
|
-
|
|
786
|
-
### SideNav
|
|
787
|
-
SideNav - sidebar navigation row primitive. Two levels: root — top-level section link. Full-width row using the shared nav label type style. nested — child pag…
|
|
788
|
-
- active: boolean = false
|
|
789
|
-
- disabled: boolean = false
|
|
790
|
-
- href: string
|
|
791
|
-
- indent: number | boolean = 0
|
|
792
|
-
- label: string
|
|
793
|
-
- level: 'root' | 'nested' = nested
|
|
794
|
-
- onNavigate: ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void)
|
|
795
|
-
- titleLabel: boolean = false
|
|
796
|
-
|
|
797
530
|
### Sidebar
|
|
798
531
|
Sidebar — fixed-width rail beside fluid content, no media query. Every Layout reference: https://every-layout.dev/layouts/sidebar/
|
|
799
532
|
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
@@ -808,15 +541,9 @@ Sidebar — fixed-width rail beside fluid content, no media query. Every Layout
|
|
|
808
541
|
### Skeleton
|
|
809
542
|
Decorative loading placeholder. Marked aria-hidden — announce the loading state on the surrounding region (e.g. aria-busy) rather than per skeleton.
|
|
810
543
|
- height: string | number
|
|
811
|
-
- variant: "text" | "
|
|
544
|
+
- variant: "text" | "circular" | "rectangular" | null = rectangular
|
|
812
545
|
- width: string | number
|
|
813
546
|
|
|
814
|
-
### Sketch
|
|
815
|
-
Sketch — shared shell for generative canvases and WebGL sketches.
|
|
816
|
-
- children: ReactNode
|
|
817
|
-
- controls: ReactNode
|
|
818
|
-
- title: string
|
|
819
|
-
|
|
820
547
|
### Slider
|
|
821
548
|
Slider — range slider with label and value display.
|
|
822
549
|
- label: string
|
|
@@ -843,28 +570,18 @@ Stack — one-dimensional layout primitive.
|
|
|
843
570
|
- style: CSSProperties
|
|
844
571
|
- wrap: FlexWrap
|
|
845
572
|
|
|
846
|
-
### StackedCardRail
|
|
847
|
-
StackedCardRail — horizontally-scrolling stacked card carousel. Scroll mechanism: vertical scroll on an absolutely-positioned inner container is mapped to hori…
|
|
848
|
-
- cards: StackedCardRailCard[]
|
|
849
|
-
|
|
850
573
|
### Stat
|
|
851
574
|
Headline metric — large value, uppercase caption label, optional sub-line.
|
|
852
575
|
- label: string
|
|
853
576
|
- sub: ReactNode
|
|
854
|
-
- tone: "
|
|
577
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" | null
|
|
855
578
|
- value: ReactNode
|
|
856
579
|
|
|
857
|
-
### StatusDot
|
|
858
|
-
A small solid dot conveying a semantic status via `tone`.
|
|
859
|
-
- label: string
|
|
860
|
-
- size: "sm" | "md" | "lg" | null
|
|
861
|
-
- tone: "neutral" | "danger" | "success" | "warning" | "info" | "inProgress" | null
|
|
862
|
-
|
|
863
580
|
### StatusListItem
|
|
864
581
|
Status dot + title row with optional muted notes and trailing slot (e.g. badge).
|
|
865
582
|
- notes: ReactNode[]
|
|
866
583
|
- title: ReactNode
|
|
867
|
-
- tone: "
|
|
584
|
+
- tone: "success" | "danger" | "warning" | "info" | "neutral" | null
|
|
868
585
|
- trailing: ReactNode
|
|
869
586
|
|
|
870
587
|
### StatusTile
|
|
@@ -874,23 +591,6 @@ Block-layout sibling of StatusListItem. Renders a raised surface tile with title
|
|
|
874
591
|
- tone: 'success' | 'warning' | 'danger' | 'info' | 'neutral' = neutral
|
|
875
592
|
- trailing: ReactNode
|
|
876
593
|
|
|
877
|
-
### Stepper
|
|
878
|
-
Step indicator for multi-step flows. Purely presentational — no navigation.
|
|
879
|
-
- activeStep: number
|
|
880
|
-
- orientation: "horizontal" | "vertical" = horizontal
|
|
881
|
-
- steps: Step[]
|
|
882
|
-
|
|
883
|
-
### StepperField
|
|
884
|
-
StepperField ” numeric input with decrement/increment controls. Classification baseline: Material Design, Chakra UI, and Ant Design treat steppers as numeric i…
|
|
885
|
-
- inputStep: number
|
|
886
|
-
- label: string
|
|
887
|
-
- max: number
|
|
888
|
-
- min: number
|
|
889
|
-
- onChange: (value: number) => void
|
|
890
|
-
- precision: number
|
|
891
|
-
- step: number
|
|
892
|
-
- value: number
|
|
893
|
-
|
|
894
594
|
### Surface
|
|
895
595
|
Surface — governed inset surface primitive. Enforces the "Surface Inset" rule: backgrounds MUST have internal padding. - Default padding: px24 (cards) | px16 (…
|
|
896
596
|
- as: ElementType<any, keyof IntrinsicElements> = div
|
|
@@ -958,24 +658,12 @@ Tag — interactive filter and category chip. The outer <button> carries the acc
|
|
|
958
658
|
|
|
959
659
|
### Text
|
|
960
660
|
Text — polymorphic typography primitive spanning the full HDS type ramp.
|
|
961
|
-
- as: "symbol" | "object" | "
|
|
661
|
+
- as: "symbol" | "object" | "title" | "a" | "button" | "div" | "form" | "h2" | "h3" |… = defaultTagMap[variant]
|
|
962
662
|
- children: ReactNode
|
|
963
663
|
- className: string
|
|
964
664
|
- style: CSSProperties
|
|
965
665
|
- variant: TextVariant
|
|
966
666
|
|
|
967
|
-
### TextLockup
|
|
968
|
-
TextLockup - governed title-and-description pairing primitive.
|
|
969
|
-
- align: 'left' | 'center' = left
|
|
970
|
-
- as: ElementType = div
|
|
971
|
-
- description: ReactNode
|
|
972
|
-
- descriptionAs: 'div' | 'p' | 'span' = div
|
|
973
|
-
- eyebrow: string
|
|
974
|
-
- id: string
|
|
975
|
-
- size: 'hero' | 'heroXl' | 'section' | 'metric' | 'detail' | 'numbered'
|
|
976
|
-
- title: string
|
|
977
|
-
- titleAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
|
|
978
|
-
|
|
979
667
|
### Textarea
|
|
980
668
|
Textarea — multi-line text field primitive with label, helper, and error slots. Mirrors Input's shell + token skin as a native `<textarea>`. Figma parity: the …
|
|
981
669
|
- className: string
|
|
@@ -987,15 +675,6 @@ Textarea — multi-line text field primitive with label, helper, and error slots
|
|
|
987
675
|
- resize: TextareaResize = vertical
|
|
988
676
|
- textareaClassName: string
|
|
989
677
|
|
|
990
|
-
### TileGrid
|
|
991
|
-
Auto-fill responsive grid for status/micro tiles. Wraps tile children in a one-line grid declaration so pages don't repeat the auto-fill minmax recipe.
|
|
992
|
-
- gap: "sm" | "md" | "xs" = sm
|
|
993
|
-
- minTileWidth: string = 260px
|
|
994
|
-
|
|
995
|
-
### TimeInput
|
|
996
|
-
A native time field skinned with HDS input chrome. Value is a `HH:mm` string.
|
|
997
|
-
- size: "sm" | "md" | "lg" | null
|
|
998
|
-
|
|
999
678
|
### Timestamp
|
|
1000
679
|
Presents a date/time with a machine-readable `dateTime` for accessibility.
|
|
1001
680
|
- date: string | number | Date
|
|
@@ -1015,54 +694,6 @@ Toggle — boolean on/off toggle with animated thumb.
|
|
|
1015
694
|
- label: string
|
|
1016
695
|
- onChange: (v: boolean) => void
|
|
1017
696
|
|
|
1018
|
-
### ToggleButton
|
|
1019
|
-
A single two-state toggle button exposing a native `aria-pressed` contract — use for one independent on/off control such as bold, mute, or pin.
|
|
1020
|
-
- asChild: boolean
|
|
1021
|
-
- defaultPressed: boolean
|
|
1022
|
-
- onPressedChange: ((pressed: boolean) => void)
|
|
1023
|
-
- pressed: boolean
|
|
1024
|
-
- size: "sm" | "md" | "lg" | null
|
|
1025
|
-
- variant: "secondary" | "ghost" | null
|
|
1026
|
-
|
|
1027
|
-
### Token
|
|
1028
|
-
Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the s…
|
|
1029
|
-
- accentColor: string
|
|
1030
|
-
- aria-label: string
|
|
1031
|
-
- className: string
|
|
1032
|
-
- description: ReactNode
|
|
1033
|
-
- fullWidth: boolean
|
|
1034
|
-
- isSelected: boolean
|
|
1035
|
-
- isSourceNode: boolean
|
|
1036
|
-
- label: string
|
|
1037
|
-
- leadingSlot: ReactNode
|
|
1038
|
-
- nodeRef: ((el: HTMLElement | null) => void)
|
|
1039
|
-
- nowrap: boolean
|
|
1040
|
-
- onClick: (() => void) | (() => void)
|
|
1041
|
-
- pathDisplayDepth: number
|
|
1042
|
-
- pathDisplayLeadingDot: boolean
|
|
1043
|
-
- pathDisplayMode: "full" | "compressed"
|
|
1044
|
-
- rawValue: ReactNode
|
|
1045
|
-
- swatchVar: string
|
|
1046
|
-
- tokenPath: string
|
|
1047
|
-
- truncateFromStart: boolean
|
|
1048
|
-
- value: string
|
|
1049
|
-
- variant: "node" | "diagram"
|
|
1050
|
-
|
|
1051
|
-
### Tokenizer
|
|
1052
|
-
A bordered field of Tag chips followed by a text input for adding more.
|
|
1053
|
-
- className: string
|
|
1054
|
-
- disabled: boolean
|
|
1055
|
-
- onChange: (next: string[]) => void
|
|
1056
|
-
- placeholder: string
|
|
1057
|
-
- value: string[]
|
|
1058
|
-
|
|
1059
|
-
### Toolbar
|
|
1060
|
-
Toolbar root. Groups related controls with a single roving tab-stop. Supports the native `orientation` prop (`horizontal` | `vertical`).
|
|
1061
|
-
- asChild: boolean
|
|
1062
|
-
- dir: ("ltr" | "rtl")
|
|
1063
|
-
- loop: boolean
|
|
1064
|
-
- orientation: "horizontal" | "vertical"
|
|
1065
|
-
|
|
1066
697
|
### Tooltip
|
|
1067
698
|
Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contained — no app-level provider required. Controlled via `open`/`onOpenChange`, or …
|
|
1068
699
|
- children: React.ReactNode
|
|
@@ -1072,19 +703,6 @@ Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is self-contai
|
|
|
1072
703
|
- onOpenChange: ((open: boolean) => void)
|
|
1073
704
|
- open: boolean
|
|
1074
705
|
|
|
1075
|
-
### TopNav
|
|
1076
|
-
Top navigation bar with brand, nav, and trailing action slots.
|
|
1077
|
-
- brand: ReactNode
|
|
1078
|
-
- children: ReactNode
|
|
1079
|
-
- sticky: boolean
|
|
1080
|
-
- trailing: ReactNode
|
|
1081
|
-
|
|
1082
|
-
### TreeList
|
|
1083
|
-
Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle.
|
|
1084
|
-
- defaultExpandedIds: string[]
|
|
1085
|
-
- items: TreeNode[]
|
|
1086
|
-
- onSelect: ((id: string) => void)
|
|
1087
|
-
|
|
1088
706
|
### VisuallyHidden
|
|
1089
707
|
Renders its children off-screen (Tailwind `sr-only`) so they are announced by screen readers without occupying visual space — e.g. a text label for an icon-onl…
|
|
1090
708
|
- as: ElementType<any, keyof IntrinsicElements> = span
|