@viraui/react 2026.7.0-next.0 → 2026.7.0-next.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.
- package/dist/catalog.json +13 -1
- package/dist/components/accordion/accordion-item.d.ts +10 -10
- package/dist/components/accordion/accordion.d.ts +2 -2
- package/dist/components/annotate/annotate.d.ts +15 -15
- package/dist/components/autocomplete/autocomplete-item.d.ts +3 -3
- package/dist/components/autocomplete/autocomplete.d.ts +12 -12
- package/dist/components/avatar/avatar.d.ts +6 -6
- package/dist/components/avatar-group/avatar-group.d.ts +6 -6
- package/dist/components/badge/badge.d.ts +5 -5
- package/dist/components/basic-input/basic-input.d.ts +1 -1
- package/dist/components/basic-input/input-control-group.d.ts +2 -2
- package/dist/components/beam/beam.d.ts +12 -12
- package/dist/components/bleed/bleed.d.ts +3 -3
- package/dist/components/button/button-link.d.ts +1 -1
- package/dist/components/button/button.d.ts +1 -1
- package/dist/components/checkbox/checkbox-group.d.ts +1 -1
- package/dist/components/checkbox/checkbox.d.ts +7 -7
- package/dist/components/chip/chip.d.ts +6 -6
- package/dist/components/clamp-text/clamp-text.d.ts +5 -5
- package/dist/components/dialog/dialog-close.d.ts +1 -1
- package/dist/components/dialog/dialog-indent-background.d.ts +1 -1
- package/dist/components/dialog/dialog-indent.d.ts +1 -1
- package/dist/components/dialog/dialog-sheet.d.ts +10 -10
- package/dist/components/dialog/dialog-trigger.d.ts +1 -1
- package/dist/components/dialog/dialog.d.ts +1 -1
- package/dist/components/disclosure/disclosure-panel.d.ts +12 -0
- package/dist/components/disclosure/disclosure-panel.js +13 -0
- package/dist/components/disclosure/disclosure-trigger.d.ts +46 -0
- package/dist/components/disclosure/disclosure-trigger.js +82 -0
- package/dist/components/disclosure/disclosure.css +1 -0
- package/dist/components/disclosure/disclosure.d.ts +25 -0
- package/dist/components/disclosure/disclosure.js +30 -0
- package/dist/components/disclosure/disclosure.module.js +15 -0
- package/dist/components/disclosure/index.d.ts +4 -0
- package/dist/components/elevator/elevator.d.ts +7 -7
- package/dist/components/fieldset/fieldset.d.ts +4 -4
- package/dist/components/fit-text/fit-text.d.ts +2 -2
- package/dist/components/glow/glow.d.ts +12 -12
- package/dist/components/grid/grid-item.d.ts +8 -8
- package/dist/components/grid/grid.d.ts +12 -12
- package/dist/components/icon-button/icon-button-link.d.ts +2 -2
- package/dist/components/icon-button/icon-button.d.ts +2 -2
- package/dist/components/index.d.ts +2 -0
- package/dist/components/linear-progress/linear-progress.d.ts +4 -4
- package/dist/components/masonry/masonry-item.d.ts +3 -3
- package/dist/components/masonry/masonry.d.ts +4 -4
- package/dist/components/menu/menu-checkbox-item.d.ts +4 -4
- package/dist/components/menu/menu-item.d.ts +4 -4
- package/dist/components/menu/menu-link-item.d.ts +4 -4
- package/dist/components/menu/menu-popup.d.ts +2 -2
- package/dist/components/menu/menu-radio-group.d.ts +2 -2
- package/dist/components/menu/menu-radio-item.d.ts +4 -4
- package/dist/components/menu/menu-separator.d.ts +1 -1
- package/dist/components/menu/menu-submenu-trigger.d.ts +3 -3
- package/dist/components/menu/menu.d.ts +3 -3
- package/dist/components/meter/meter.d.ts +5 -5
- package/dist/components/number-field/index.d.ts +2 -0
- package/dist/components/number-field/number-field.css +1 -0
- package/dist/components/number-field/number-field.d.ts +78 -0
- package/dist/components/number-field/number-field.js +120 -0
- package/dist/components/number-field/number-field.module.js +21 -0
- package/dist/components/otp-field/index.d.ts +1 -1
- package/dist/components/otp-field/otp-field-input.d.ts +1 -1
- package/dist/components/otp-field/otp-field-separator.d.ts +3 -1
- package/dist/components/otp-field/otp-field-separator.js +5 -1
- package/dist/components/otp-field/otp-field.d.ts +4 -5
- package/dist/components/otp-field/otp-field.js +0 -1
- package/dist/components/popover/popover-sheet.d.ts +6 -6
- package/dist/components/popover/popover.d.ts +5 -5
- package/dist/components/progressive-blur/progressive-blur.d.ts +5 -5
- package/dist/components/prose/prose.css +1 -1
- package/dist/components/prose/prose.d.ts +4 -4
- package/dist/components/radio/radio-group.d.ts +1 -1
- package/dist/components/radio/radio.d.ts +6 -6
- package/dist/components/select/select-indicator-slot.d.ts +1 -1
- package/dist/components/select/select-option.d.ts +4 -4
- package/dist/components/select/select-separator.d.ts +1 -1
- package/dist/components/select/select.d.ts +10 -10
- package/dist/components/separator/separator.d.ts +9 -9
- package/dist/components/shimmer/shimmer.d.ts +6 -6
- package/dist/components/skeleton/skeleton-overlay.d.ts +5 -5
- package/dist/components/skeleton/skeleton.d.ts +9 -9
- package/dist/components/slider/slider.d.ts +7 -7
- package/dist/components/spinner/spinner.d.ts +3 -3
- package/dist/components/stack/stack.d.ts +17 -17
- package/dist/components/static-noise/static-noise.d.ts +5 -5
- package/dist/components/surface/surface.d.ts +12 -12
- package/dist/components/switch/switch.d.ts +7 -7
- package/dist/components/tabs/tabs-list.d.ts +1 -1
- package/dist/components/tabs/tabs-panel.d.ts +1 -1
- package/dist/components/tabs/tabs-tab.d.ts +3 -3
- package/dist/components/tabs/tabs.d.ts +2 -2
- package/dist/components/text/text.d.ts +23 -23
- package/dist/components/textarea/textarea.d.ts +6 -6
- package/dist/components/textfield/textfield.d.ts +1 -1
- package/dist/components/title/title.d.ts +21 -21
- package/dist/components/toast/toast-action.d.ts +1 -1
- package/dist/components/toast/toast-banner.d.ts +7 -7
- package/dist/components/toast/toast-viewport.d.ts +2 -2
- package/dist/components/toggle-button/toggle-button.d.ts +6 -6
- package/dist/components/toggle-group/toggle-group.d.ts +1 -1
- package/dist/components/tooltip/tooltip-content.d.ts +2 -2
- package/dist/components/typewriter/typewriter.d.ts +10 -10
- package/dist/index.js +3 -1
- package/dist/specs/components/accordion/usage.xml +1 -0
- package/dist/specs/components/disclosure/a11y.xml +9 -0
- package/dist/specs/components/disclosure/meta.xml +20 -0
- package/dist/specs/components/disclosure/patterns.xml +55 -0
- package/dist/specs/components/disclosure/props.xml +54 -0
- package/dist/specs/components/disclosure/usage.xml +11 -0
- package/dist/specs/components/number-field/a11y.xml +10 -0
- package/dist/specs/components/number-field/meta.xml +21 -0
- package/dist/specs/components/number-field/patterns.xml +43 -0
- package/dist/specs/components/number-field/props.xml +35 -0
- package/dist/specs/components/number-field/usage.xml +12 -0
- package/dist/specs/components/otp-field/meta.xml +1 -4
- package/dist/specs/components/otp-field/patterns.xml +8 -8
- package/dist/specs/components/otp-field/props.xml +2 -2
- package/dist/specs/components/otp-field/usage.xml +4 -4
- package/dist/specs/index.xml +22 -2
- package/package.json +2 -2
|
@@ -9,19 +9,19 @@ type TextAxisPadding = TextSpace | [TextSpace | 0, TextSpace | 0];
|
|
|
9
9
|
* Includes standard inline text attributes such as `children`, `id`, `title`, and event handlers,
|
|
10
10
|
* plus Vira-owned body typography, color, and layout controls.
|
|
11
11
|
*
|
|
12
|
-
* @
|
|
12
|
+
* @defaultValue Base HTML pass-through props keep upstream defaults.
|
|
13
13
|
*/
|
|
14
14
|
export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
15
15
|
/**
|
|
16
16
|
* Replaces the default `span` root using Base UI render semantics.
|
|
17
17
|
*
|
|
18
|
-
* @
|
|
18
|
+
* @defaultValue The text renders a `span` root.
|
|
19
19
|
*/
|
|
20
20
|
render?: useRender.RenderProp;
|
|
21
21
|
/**
|
|
22
22
|
* Ref forwarded to the rendered text root element.
|
|
23
23
|
*
|
|
24
|
-
* @
|
|
24
|
+
* @defaultValue No ref is attached.
|
|
25
25
|
*/
|
|
26
26
|
ref?: React.Ref<HTMLElement>;
|
|
27
27
|
/**
|
|
@@ -29,19 +29,19 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
29
29
|
* (`4xl` | `3xl` | `2xl` | `xl` | `l` | `m` | `s` | `xs`).
|
|
30
30
|
* Omit when nested in Text so font-size inherits the outer Text size.
|
|
31
31
|
*
|
|
32
|
-
* @
|
|
32
|
+
* @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
|
|
33
33
|
*/
|
|
34
34
|
size?: '4xl' | '3xl' | '2xl' | 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
35
35
|
/**
|
|
36
36
|
* Selects the semantic font family for body copy and inline code-like text.
|
|
37
37
|
*
|
|
38
|
-
* @
|
|
38
|
+
* @defaultValue 'body'
|
|
39
39
|
*/
|
|
40
40
|
family?: 'body' | 'mono';
|
|
41
41
|
/**
|
|
42
42
|
* Selects a semantic weight keyword or a numeric weight (`font-weight` + `wght` axis).
|
|
43
43
|
*
|
|
44
|
-
* @
|
|
44
|
+
* @defaultValue 'regular'
|
|
45
45
|
*/
|
|
46
46
|
weight?: 'light' | 'regular' | 'semibold' | 'bold' | number;
|
|
47
47
|
/**
|
|
@@ -50,102 +50,102 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
50
50
|
* `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning`
|
|
51
51
|
* → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`.
|
|
52
52
|
*
|
|
53
|
-
* @
|
|
53
|
+
* @defaultValue No semantic tone override.
|
|
54
54
|
*/
|
|
55
55
|
tone?: 'default' | 'primary' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
|
|
56
56
|
/**
|
|
57
57
|
* Applies a custom color as an escape hatch when semantic `tone` is not used.
|
|
58
58
|
*
|
|
59
|
-
* @
|
|
59
|
+
* @defaultValue No literal color override.
|
|
60
60
|
*/
|
|
61
61
|
color?: string;
|
|
62
62
|
/**
|
|
63
63
|
* Controls line height through foundation leading tokens.
|
|
64
64
|
* Omit when nested in Text so line-height inherits the outer Text.
|
|
65
65
|
*
|
|
66
|
-
* @
|
|
66
|
+
* @defaultValue 'm' on root Text (CSS); inherit when nested and omitted
|
|
67
67
|
*/
|
|
68
68
|
lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
|
|
69
69
|
/**
|
|
70
70
|
* Aligns text using logical alignment values.
|
|
71
71
|
* Omit so `text-align` inherits from the parent.
|
|
72
72
|
*
|
|
73
|
-
* @
|
|
73
|
+
* @defaultValue Inherits parent `text-align`.
|
|
74
74
|
*/
|
|
75
75
|
align?: React.CSSProperties['textAlign'];
|
|
76
76
|
/**
|
|
77
77
|
* Constrains the maximum inline size of the rendered text block.
|
|
78
78
|
*
|
|
79
|
-
* @
|
|
79
|
+
* @defaultValue No max width constraint.
|
|
80
80
|
*/
|
|
81
81
|
maxWidth?: string;
|
|
82
82
|
/**
|
|
83
83
|
* Controls white-space preservation and wrapping behavior.
|
|
84
84
|
*
|
|
85
|
-
* @
|
|
85
|
+
* @defaultValue 'normal'
|
|
86
86
|
*/
|
|
87
87
|
whiteSpace?: React.CSSProperties['whiteSpace'];
|
|
88
88
|
/**
|
|
89
89
|
* Sets letter-spacing on the rendered copy. Prefer this prop over CSS
|
|
90
90
|
* `letter-spacing` on the same Text root.
|
|
91
91
|
*
|
|
92
|
-
* @
|
|
92
|
+
* @defaultValue No letter-spacing override.
|
|
93
93
|
*/
|
|
94
94
|
tracking?: React.CSSProperties['letterSpacing'];
|
|
95
95
|
/**
|
|
96
96
|
* Applies `text-transform` on the rendered copy. Prefer this prop over CSS
|
|
97
97
|
* `text-transform` on the same Text root.
|
|
98
98
|
*
|
|
99
|
-
* @
|
|
99
|
+
* @defaultValue No text-transform override.
|
|
100
100
|
*/
|
|
101
101
|
transform?: React.CSSProperties['textTransform'];
|
|
102
102
|
/**
|
|
103
103
|
* Enables balanced wrapping for block-like copy.
|
|
104
104
|
*
|
|
105
|
-
* @
|
|
105
|
+
* @defaultValue false
|
|
106
106
|
*/
|
|
107
107
|
balanced?: boolean;
|
|
108
108
|
/**
|
|
109
109
|
* Enables text selection on the rendered copy.
|
|
110
110
|
*
|
|
111
|
-
* @
|
|
111
|
+
* @defaultValue true
|
|
112
112
|
*/
|
|
113
113
|
selection?: boolean;
|
|
114
114
|
/**
|
|
115
115
|
* Sets inline padding using one token for both sides or a `[start, end]` tuple.
|
|
116
116
|
*
|
|
117
|
-
* @
|
|
117
|
+
* @defaultValue No inline padding.
|
|
118
118
|
*/
|
|
119
119
|
hPadding?: TextAxisPadding;
|
|
120
120
|
/**
|
|
121
121
|
* Sets block padding using one token for both sides or a `[start, end]` tuple.
|
|
122
122
|
*
|
|
123
|
-
* @
|
|
123
|
+
* @defaultValue No block padding.
|
|
124
124
|
*/
|
|
125
125
|
vPadding?: TextAxisPadding;
|
|
126
126
|
/**
|
|
127
127
|
* Trims text box whitespace at the chosen edge when the browser supports `text-box`.
|
|
128
128
|
* Pass `false` to disable text-box trim.
|
|
129
129
|
*
|
|
130
|
-
* @
|
|
130
|
+
* @defaultValue 'both'
|
|
131
131
|
*/
|
|
132
132
|
trim?: 'start' | 'end' | 'both' | false;
|
|
133
133
|
/**
|
|
134
134
|
* Selects the `text-box` trim basis when `trim` is active.
|
|
135
135
|
*
|
|
136
|
-
* @
|
|
136
|
+
* @defaultValue 'cap alphabetic'
|
|
137
137
|
*/
|
|
138
138
|
trimType?: string;
|
|
139
139
|
/**
|
|
140
140
|
* Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`.
|
|
141
141
|
*
|
|
142
|
-
* @
|
|
142
|
+
* @defaultValue No width override.
|
|
143
143
|
*/
|
|
144
144
|
fontWidth?: number;
|
|
145
145
|
/**
|
|
146
146
|
* Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`.
|
|
147
147
|
*
|
|
148
|
-
* @
|
|
148
|
+
* @defaultValue No optical size override.
|
|
149
149
|
*/
|
|
150
150
|
opticalSize?: number;
|
|
151
151
|
/**
|
|
@@ -153,7 +153,7 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
153
153
|
* Default locks at this size’s `--font-scale-body-*` token (UI chrome stays stable).
|
|
154
154
|
* Pass `true` for fluid page/body copy. Theme `--effect-fluid-typography: initial` still locks all Text globally.
|
|
155
155
|
*
|
|
156
|
-
* @
|
|
156
|
+
* @defaultValue false
|
|
157
157
|
*/
|
|
158
158
|
fluid?: boolean;
|
|
159
159
|
};
|
|
@@ -8,19 +8,19 @@ import type * as React from 'react';
|
|
|
8
8
|
* `rows`, and event handlers on `Field.Control` (`render={<textarea />}`), plus optional
|
|
9
9
|
* `label`, `description`, and `error` copy rendered with `Text` inside a `Stack` field layout.
|
|
10
10
|
*
|
|
11
|
-
* @
|
|
11
|
+
* @defaultValue Base UI `Field.Root` pass-through props keep upstream defaults.
|
|
12
12
|
*/
|
|
13
13
|
export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<FieldRoot.Props, 'ref'> & {
|
|
14
14
|
/**
|
|
15
15
|
* Visible label rendered with shared internal `FieldLabel`.
|
|
16
16
|
*
|
|
17
|
-
* @
|
|
17
|
+
* @defaultValue No label is rendered.
|
|
18
18
|
*/
|
|
19
19
|
label?: React.ReactNode;
|
|
20
20
|
/**
|
|
21
21
|
* Helper copy rendered with `Field.Description` and `Text` while the field is valid.
|
|
22
22
|
*
|
|
23
|
-
* @
|
|
23
|
+
* @defaultValue No description is rendered.
|
|
24
24
|
*/
|
|
25
25
|
description?: React.ReactNode;
|
|
26
26
|
/**
|
|
@@ -28,7 +28,7 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
|
|
|
28
28
|
* Replaces description while the field is invalid and dirty. Validation messages from `validate`
|
|
29
29
|
* are shown by `Field.Error` even when this prop is omitted.
|
|
30
30
|
*
|
|
31
|
-
* @
|
|
31
|
+
* @defaultValue No static error copy is rendered.
|
|
32
32
|
*/
|
|
33
33
|
error?: React.ReactNode;
|
|
34
34
|
/**
|
|
@@ -36,14 +36,14 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
|
|
|
36
36
|
* (`none`); accepts any valid `CSSProperties['resize']` value such as `"vertical"`, `"horizontal"`,
|
|
37
37
|
* or `"both"`.
|
|
38
38
|
*
|
|
39
|
-
* @
|
|
39
|
+
* @defaultValue undefined (no resize)
|
|
40
40
|
*/
|
|
41
41
|
resize?: React.CSSProperties['resize'];
|
|
42
42
|
/**
|
|
43
43
|
* When `true`, sets `field-sizing: content` so the control grows with its value.
|
|
44
44
|
* Still respects `min-block-size` and `resize`. Omitted / `false` keeps the browser fixed default.
|
|
45
45
|
*
|
|
46
|
-
* @
|
|
46
|
+
* @defaultValue undefined (browser fixed)
|
|
47
47
|
*/
|
|
48
48
|
fitContent?: BasicInputProps['fitContent'];
|
|
49
49
|
};
|
|
@@ -9,7 +9,7 @@ import type * as React from 'react';
|
|
|
9
9
|
* `size`, and event handlers, plus optional `label`, `description`, and `error` copy rendered with
|
|
10
10
|
* `Text` inside a `Stack` field layout. `controlOnly` skips Field chrome for compose inside another Field.
|
|
11
11
|
*
|
|
12
|
-
* @
|
|
12
|
+
* @defaultValue Base UI pass-through props keep upstream defaults.
|
|
13
13
|
*/
|
|
14
14
|
export type TextfieldProps = PrimitiveInput.Props & Omit<FieldRoot.Props, 'render' | keyof PrimitiveInput.Props> & {
|
|
15
15
|
/**
|
|
@@ -9,7 +9,7 @@ type TitleAxisPadding = TitleSpace | [TitleSpace | 0, TitleSpace | 0];
|
|
|
9
9
|
* Includes standard text and heading HTML attributes such as `children`, `id`, `title`, and event handlers,
|
|
10
10
|
* plus Vira-owned heading typography, color, and layout controls.
|
|
11
11
|
*
|
|
12
|
-
* @
|
|
12
|
+
* @defaultValue Base HTML pass-through props keep upstream defaults.
|
|
13
13
|
*/
|
|
14
14
|
export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
15
15
|
/**
|
|
@@ -17,13 +17,13 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
17
17
|
*
|
|
18
18
|
* Pair this with `size` for most headings so DOM semantics and visual preset stay intentionally aligned.
|
|
19
19
|
*
|
|
20
|
-
* @
|
|
20
|
+
* @defaultValue The title renders a `span` root.
|
|
21
21
|
*/
|
|
22
22
|
render?: useRender.RenderProp;
|
|
23
23
|
/**
|
|
24
24
|
* Ref forwarded to the rendered title root element.
|
|
25
25
|
*
|
|
26
|
-
* @
|
|
26
|
+
* @defaultValue No ref is attached.
|
|
27
27
|
*/
|
|
28
28
|
ref?: React.Ref<HTMLElement>;
|
|
29
29
|
/**
|
|
@@ -32,44 +32,44 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
32
32
|
* This controls only the visual preset. Semantic heading choice remains owned by `render`,
|
|
33
33
|
* because `Title` keeps a `span` root unless `render` replaces it.
|
|
34
34
|
*
|
|
35
|
-
* @
|
|
35
|
+
* @defaultValue '1'
|
|
36
36
|
*/
|
|
37
37
|
size?: 'display' | '1' | '2' | '3' | '4' | '5' | '6';
|
|
38
38
|
/**
|
|
39
39
|
* Overrides the size preset weight (`font-weight` + `wght` axis).
|
|
40
40
|
*
|
|
41
|
-
* @
|
|
41
|
+
* @defaultValue No weight override.
|
|
42
42
|
*/
|
|
43
43
|
weight?: number;
|
|
44
44
|
/**
|
|
45
45
|
* Applies a literal color escape hatch.
|
|
46
46
|
*
|
|
47
|
-
* @
|
|
47
|
+
* @defaultValue No literal color override.
|
|
48
48
|
*/
|
|
49
49
|
color?: string;
|
|
50
50
|
/**
|
|
51
51
|
* Controls line height through foundation leading tokens.
|
|
52
52
|
*
|
|
53
|
-
* @
|
|
53
|
+
* @defaultValue 'm'
|
|
54
54
|
*/
|
|
55
55
|
lineHeight?: 'none' | 'xs' | 's' | 'm' | 'l';
|
|
56
56
|
/**
|
|
57
57
|
* Aligns text using logical alignment values.
|
|
58
58
|
* Omit so `text-align` inherits from the parent.
|
|
59
59
|
*
|
|
60
|
-
* @
|
|
60
|
+
* @defaultValue Inherits parent `text-align`.
|
|
61
61
|
*/
|
|
62
62
|
align?: React.CSSProperties['textAlign'];
|
|
63
63
|
/**
|
|
64
64
|
* Constrains the maximum inline size of the rendered text block.
|
|
65
65
|
*
|
|
66
|
-
* @
|
|
66
|
+
* @defaultValue No max width constraint.
|
|
67
67
|
*/
|
|
68
68
|
maxWidth?: string;
|
|
69
69
|
/**
|
|
70
70
|
* Controls white-space preservation and wrapping behavior.
|
|
71
71
|
*
|
|
72
|
-
* @
|
|
72
|
+
* @defaultValue 'normal'
|
|
73
73
|
*/
|
|
74
74
|
whiteSpace?: React.CSSProperties['whiteSpace'];
|
|
75
75
|
/**
|
|
@@ -78,63 +78,63 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
78
78
|
*
|
|
79
79
|
* Overrides size preset letter-spacing when set.
|
|
80
80
|
*
|
|
81
|
-
* @
|
|
81
|
+
* @defaultValue No letter-spacing override.
|
|
82
82
|
*/
|
|
83
83
|
tracking?: React.CSSProperties['letterSpacing'];
|
|
84
84
|
/**
|
|
85
85
|
* Applies `text-transform` on the rendered copy. Prefer this prop over CSS
|
|
86
86
|
* `text-transform` on the same Title root.
|
|
87
87
|
*
|
|
88
|
-
* @
|
|
88
|
+
* @defaultValue No text-transform override.
|
|
89
89
|
*/
|
|
90
90
|
transform?: React.CSSProperties['textTransform'];
|
|
91
91
|
/**
|
|
92
92
|
* Enables balanced wrapping for block-like titles.
|
|
93
93
|
*
|
|
94
|
-
* @
|
|
94
|
+
* @defaultValue false
|
|
95
95
|
*/
|
|
96
96
|
balanced?: boolean;
|
|
97
97
|
/**
|
|
98
98
|
* Enables text selection on the rendered copy.
|
|
99
99
|
*
|
|
100
|
-
* @
|
|
100
|
+
* @defaultValue true
|
|
101
101
|
*/
|
|
102
102
|
selection?: boolean;
|
|
103
103
|
/**
|
|
104
104
|
* Sets inline padding using one token for both sides or a `[start, end]` tuple.
|
|
105
105
|
*
|
|
106
|
-
* @
|
|
106
|
+
* @defaultValue No inline padding.
|
|
107
107
|
*/
|
|
108
108
|
hPadding?: TitleAxisPadding;
|
|
109
109
|
/**
|
|
110
110
|
* Sets block padding using one token for both sides or a `[start, end]` tuple.
|
|
111
111
|
*
|
|
112
|
-
* @
|
|
112
|
+
* @defaultValue No block padding.
|
|
113
113
|
*/
|
|
114
114
|
vPadding?: TitleAxisPadding;
|
|
115
115
|
/**
|
|
116
116
|
* Trims text box whitespace at the chosen edge when the browser supports `text-box`.
|
|
117
117
|
* Pass `false` to disable text-box trim.
|
|
118
118
|
*
|
|
119
|
-
* @
|
|
119
|
+
* @defaultValue 'both'
|
|
120
120
|
*/
|
|
121
121
|
trim?: 'start' | 'end' | 'both' | false;
|
|
122
122
|
/**
|
|
123
123
|
* Selects the `text-box` trim basis when `trim` is active.
|
|
124
124
|
*
|
|
125
|
-
* @
|
|
125
|
+
* @defaultValue 'cap alphabetic'
|
|
126
126
|
*/
|
|
127
127
|
trimType?: string;
|
|
128
128
|
/**
|
|
129
129
|
* Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`.
|
|
130
130
|
*
|
|
131
|
-
* @
|
|
131
|
+
* @defaultValue No width override.
|
|
132
132
|
*/
|
|
133
133
|
fontWidth?: number;
|
|
134
134
|
/**
|
|
135
135
|
* Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`.
|
|
136
136
|
*
|
|
137
|
-
* @
|
|
137
|
+
* @defaultValue No optical size override.
|
|
138
138
|
*/
|
|
139
139
|
opticalSize?: number;
|
|
140
140
|
/**
|
|
@@ -142,7 +142,7 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
142
142
|
* Pass `false` to lock at this size’s `--font-scale-display` / `--font-scale-h*` token.
|
|
143
143
|
* Theme `--effect-fluid-typography: initial` still locks all Title globally.
|
|
144
144
|
*
|
|
145
|
-
* @
|
|
145
|
+
* @defaultValue true
|
|
146
146
|
*/
|
|
147
147
|
fluid?: boolean;
|
|
148
148
|
};
|
|
@@ -3,7 +3,7 @@ import type * as React from 'react';
|
|
|
3
3
|
/**
|
|
4
4
|
* Public Toast.Action props.
|
|
5
5
|
*
|
|
6
|
-
* @
|
|
6
|
+
* @defaultValue Base UI pass-through props keep upstream defaults.
|
|
7
7
|
*/
|
|
8
8
|
export type ToastActionProps = ToastActionNamespace.Props;
|
|
9
9
|
export declare const ToastAction: React.FC<ToastActionProps>;
|
|
@@ -15,43 +15,43 @@ export type ToastBannerProps = ToastRootNamespace.Props & {
|
|
|
15
15
|
/**
|
|
16
16
|
* Heading above the description. Falls back to `toast.title` from `toastManager.add`.
|
|
17
17
|
*
|
|
18
|
-
* @
|
|
18
|
+
* @defaultValue `toast.title` when set on the toast instance.
|
|
19
19
|
*/
|
|
20
20
|
title?: React.ReactNode;
|
|
21
21
|
/**
|
|
22
22
|
* Supporting copy below the title.
|
|
23
23
|
*
|
|
24
|
-
* @
|
|
24
|
+
* @defaultValue No description is rendered.
|
|
25
25
|
*/
|
|
26
26
|
description?: React.ReactNode;
|
|
27
27
|
/**
|
|
28
28
|
* Whether to render the dismiss control.
|
|
29
29
|
*
|
|
30
|
-
* @
|
|
30
|
+
* @defaultValue true
|
|
31
31
|
*/
|
|
32
32
|
dismissable?: boolean;
|
|
33
33
|
/**
|
|
34
34
|
* Label for the dismiss control.
|
|
35
35
|
*
|
|
36
|
-
* @
|
|
36
|
+
* @defaultValue 'Dismiss'
|
|
37
37
|
*/
|
|
38
38
|
dismissLabel?: React.ReactNode;
|
|
39
39
|
/**
|
|
40
40
|
* Called when the dismiss control is activated, before Base UI closes the toast.
|
|
41
41
|
*
|
|
42
|
-
* @
|
|
42
|
+
* @defaultValue No callback is invoked.
|
|
43
43
|
*/
|
|
44
44
|
onDismiss?: () => void;
|
|
45
45
|
/**
|
|
46
46
|
* Optional action buttons. Accepts a single `Toast.Action` or an array of them.
|
|
47
47
|
*
|
|
48
|
-
* @
|
|
48
|
+
* @defaultValue No actions are rendered.
|
|
49
49
|
*/
|
|
50
50
|
children?: ToastBannerChildren;
|
|
51
51
|
/**
|
|
52
52
|
* Class name forwarded to the toast root.
|
|
53
53
|
*
|
|
54
|
-
* @
|
|
54
|
+
* @defaultValue No extra class name.
|
|
55
55
|
*/
|
|
56
56
|
className?: string;
|
|
57
57
|
};
|
|
@@ -4,13 +4,13 @@ export type ToastViewportPosition = 'bottom-right' | 'bottom-left' | 'bottom-cen
|
|
|
4
4
|
/**
|
|
5
5
|
* Public Toast.Viewport props.
|
|
6
6
|
*
|
|
7
|
-
* @
|
|
7
|
+
* @defaultValue `position` is `bottom-right`.
|
|
8
8
|
*/
|
|
9
9
|
export type ToastViewportProps = ToastViewportNamespace.Props & {
|
|
10
10
|
/**
|
|
11
11
|
* Controls viewport placement and stacking layout hooks.
|
|
12
12
|
*
|
|
13
|
-
* @
|
|
13
|
+
* @defaultValue 'bottom-right'
|
|
14
14
|
*/
|
|
15
15
|
position?: ToastViewportPosition;
|
|
16
16
|
};
|
|
@@ -15,38 +15,38 @@ type ToggleButtonAccessibleNameProps = {
|
|
|
15
15
|
* Icon-only two-state control built on Base UI `Toggle` and `IconButton`.
|
|
16
16
|
* Requires an accessible name via `aria-label` or `aria-labelledby`.
|
|
17
17
|
*
|
|
18
|
-
* @
|
|
18
|
+
* @defaultValue Base UI toggle pass-through props keep upstream defaults.
|
|
19
19
|
*/
|
|
20
20
|
export type ToggleButtonProps = Omit<IconButtonProps, 'icon' | 'render' | 'variant' | 'children' | 'aria-label' | 'aria-labelledby'> & Omit<TogglePrimitive.Props, 'render' | 'children' | 'aria-label' | 'aria-labelledby'> & ToggleButtonAccessibleNameProps & {
|
|
21
21
|
/**
|
|
22
22
|
* Icon shown while the toggle is not pressed.
|
|
23
23
|
*
|
|
24
|
-
* @
|
|
24
|
+
* @defaultValue No default; required for every ToggleButton.
|
|
25
25
|
*/
|
|
26
26
|
restingIcon: ReactNode;
|
|
27
27
|
/**
|
|
28
28
|
* Icon shown while the toggle is pressed.
|
|
29
29
|
*
|
|
30
|
-
* @
|
|
30
|
+
* @defaultValue When omitted, `restingIcon` is shown in both states.
|
|
31
31
|
*/
|
|
32
32
|
pressedIcon?: ReactNode;
|
|
33
33
|
/**
|
|
34
34
|
* Visual variant while the toggle is not pressed.
|
|
35
35
|
*
|
|
36
|
-
* @
|
|
36
|
+
* @defaultValue 'flat'
|
|
37
37
|
*/
|
|
38
38
|
variant?: ButtonProps['variant'];
|
|
39
39
|
/**
|
|
40
40
|
* Visual variant while the toggle is pressed.
|
|
41
41
|
*
|
|
42
|
-
* @
|
|
42
|
+
* @defaultValue When omitted, `variant` is used in both states.
|
|
43
43
|
*/
|
|
44
44
|
pressedVariant?: ButtonProps['variant'];
|
|
45
45
|
/**
|
|
46
46
|
* When `pressedIcon` is set, crossfade and rotate between resting and pressed icons
|
|
47
47
|
* (`data-interpolate="true"`). When `false`, swap instantly with no transition.
|
|
48
48
|
*
|
|
49
|
-
* @
|
|
49
|
+
* @defaultValue false
|
|
50
50
|
*/
|
|
51
51
|
interpolateIcons?: boolean;
|
|
52
52
|
};
|
|
@@ -6,7 +6,7 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
|
|
|
6
6
|
* (`row` / `column` from `orientation`) and zero gap — consumers own spacing.
|
|
7
7
|
* Compose `ToggleButton` children each with `value` and an accessible name.
|
|
8
8
|
*
|
|
9
|
-
* @
|
|
9
|
+
* @defaultValue Base UI pass-through props keep upstream defaults.
|
|
10
10
|
*/
|
|
11
11
|
export type ToggleGroupProps = ToggleGroupPrimitive.Props;
|
|
12
12
|
export declare const ToggleGroup: React.FC<ToggleGroupProps>;
|
|
@@ -8,7 +8,7 @@ type TooltipContentPositionerProps = Omit<TooltipPositioner.Props, 'className' |
|
|
|
8
8
|
* to the Positioner; `sideOffset` defaults to `8`. Always renders the internal
|
|
9
9
|
* Viewport so multi-trigger content animations work by default.
|
|
10
10
|
*
|
|
11
|
-
* @
|
|
11
|
+
* @defaultValue `sideOffset` is `8`.
|
|
12
12
|
*/
|
|
13
13
|
export type TooltipContentProps = TooltipContentPositionerProps & {
|
|
14
14
|
/**
|
|
@@ -16,7 +16,7 @@ export type TooltipContentProps = TooltipContentPositionerProps & {
|
|
|
16
16
|
* Omit for Base UI default (`document.body` from the module window —
|
|
17
17
|
* iframe hosts must pass the iframe document body explicitly).
|
|
18
18
|
*
|
|
19
|
-
* @
|
|
19
|
+
* @defaultValue Base UI FloatingPortal resolution
|
|
20
20
|
*/
|
|
21
21
|
container?: React.ComponentProps<typeof PrimitiveTooltip.Portal>['container'];
|
|
22
22
|
};
|
|
@@ -6,55 +6,55 @@ import type * as React from 'react';
|
|
|
6
6
|
* Includes standard `span` attributes such as `id`, `className`, and event handlers,
|
|
7
7
|
* plus Vira-owned typewriter animation controls.
|
|
8
8
|
*
|
|
9
|
-
* @
|
|
9
|
+
* @defaultValue Native span pass-through props keep React defaults.
|
|
10
10
|
*/
|
|
11
11
|
export type TypewriterProps = React.ComponentPropsWithRef<'span'> & {
|
|
12
12
|
/**
|
|
13
13
|
* Cycles through multiple phrases instead of a single `children` string.
|
|
14
14
|
*
|
|
15
|
-
* @
|
|
15
|
+
* @defaultValue The animation uses string `children` when provided.
|
|
16
16
|
*/
|
|
17
17
|
texts?: readonly string[];
|
|
18
18
|
/**
|
|
19
19
|
* Selects the caret style rendered after the typed text.
|
|
20
20
|
*
|
|
21
|
-
* @
|
|
21
|
+
* @defaultValue 'pipe'
|
|
22
22
|
*/
|
|
23
23
|
caret?: TypewriterCaret;
|
|
24
24
|
/**
|
|
25
25
|
* Overrides the caret color.
|
|
26
26
|
*
|
|
27
|
-
* @
|
|
27
|
+
* @defaultValue The caret inherits `currentColor`.
|
|
28
28
|
*/
|
|
29
29
|
caretColor?: string;
|
|
30
30
|
/**
|
|
31
31
|
* Sets the delay between typed characters in milliseconds.
|
|
32
32
|
*
|
|
33
|
-
* @
|
|
33
|
+
* @defaultValue 40
|
|
34
34
|
*/
|
|
35
35
|
speed?: number;
|
|
36
36
|
/**
|
|
37
37
|
* Sets the delay between deleted characters in milliseconds.
|
|
38
38
|
*
|
|
39
|
-
* @
|
|
39
|
+
* @defaultValue 25
|
|
40
40
|
*/
|
|
41
41
|
deleteSpeed?: number;
|
|
42
42
|
/**
|
|
43
43
|
* Sets the pause after a phrase completes before deletion starts, in milliseconds.
|
|
44
44
|
*
|
|
45
|
-
* @
|
|
45
|
+
* @defaultValue 2000
|
|
46
46
|
*/
|
|
47
47
|
pause?: number;
|
|
48
48
|
/**
|
|
49
49
|
* Sets the initial delay before typing starts, in milliseconds.
|
|
50
50
|
*
|
|
51
|
-
* @
|
|
51
|
+
* @defaultValue 0
|
|
52
52
|
*/
|
|
53
53
|
delay?: number;
|
|
54
54
|
/**
|
|
55
55
|
* Repeats the phrase cycle after the final phrase is deleted.
|
|
56
56
|
*
|
|
57
|
-
* @
|
|
57
|
+
* @defaultValue true
|
|
58
58
|
*/
|
|
59
59
|
loop?: boolean;
|
|
60
60
|
/**
|
|
@@ -62,7 +62,7 @@ export type TypewriterProps = React.ComponentPropsWithRef<'span'> & {
|
|
|
62
62
|
* constraints) from first paint through delay, typing, and deletion via an
|
|
63
63
|
* in-flow `visibility: hidden` phrase layer; the typed effect paints absolute on top.
|
|
64
64
|
*
|
|
65
|
-
* @
|
|
65
|
+
* @defaultValue false
|
|
66
66
|
*/
|
|
67
67
|
preserveSpace?: boolean;
|
|
68
68
|
};
|
package/dist/index.js
CHANGED
|
@@ -24,6 +24,7 @@ import { DialogIndentBackground } from "./components/dialog/dialog-indent-backgr
|
|
|
24
24
|
import { DialogSheet } from "./components/dialog/dialog-sheet.js";
|
|
25
25
|
import { DialogTrigger } from "./components/dialog/dialog-trigger.js";
|
|
26
26
|
import { Dialog } from "./components/dialog/dialog.js";
|
|
27
|
+
import { Disclosure } from "./components/disclosure/disclosure.js";
|
|
27
28
|
import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
|
|
28
29
|
import { getElevationProps } from "./core/elevation/get-elevation-props.js";
|
|
29
30
|
import { Elevator } from "./components/elevator/elevator.js";
|
|
@@ -46,6 +47,7 @@ import { MenuSeparator } from "./components/menu/menu-separator.js";
|
|
|
46
47
|
import { MenuSubmenuTrigger } from "./components/menu/menu-submenu-trigger.js";
|
|
47
48
|
import { Menu, MenuSubmenu, MenuTrigger } from "./components/menu/menu.js";
|
|
48
49
|
import { Meter } from "./components/meter/meter.js";
|
|
50
|
+
import { NumberField } from "./components/number-field/number-field.js";
|
|
49
51
|
import { Textfield } from "./components/textfield/textfield.js";
|
|
50
52
|
import { OTPField } from "./components/otp-field/otp-field.js";
|
|
51
53
|
import { PopoverSheet } from "./components/popover/popover-sheet.js";
|
|
@@ -70,4 +72,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
|
|
|
70
72
|
import { Typewriter } from "./components/typewriter/typewriter.js";
|
|
71
73
|
import { TooltipContent } from "./components/tooltip/tooltip-content.js";
|
|
72
74
|
import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
|
|
73
|
-
export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints };
|
|
75
|
+
export { Accordion, Annotate, Autocomplete, Avatar, AvatarGroup, Badge, Beam, Bleed, BreakpointsProvider, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, Disclosure, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, Glow, Grid, IconButton, IconButtonLink, LinearProgress, Masonry, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, NumberField, OTPField, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Prose, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps, useBreakpoints };
|
|
@@ -8,5 +8,6 @@
|
|
|
8
8
|
<do>Multiple open sections with root `multiple` (+ `defaultValue` / `value` as needed)</do>
|
|
9
9
|
<dont>Trying to compose separate public `Accordion.Header`, `Accordion.Trigger`, or `Accordion.Panel` exports — those stay inside `Accordion.Item`</dont>
|
|
10
10
|
<dont>Rendering an item without trigger text and without an external aria-label strategy</dont>
|
|
11
|
+
<dont>Using Accordion for a single expandable section — use Disclosure</dont>
|
|
11
12
|
<dont>Using Accordion for primary navigation that should be links, Tabs, or routes</dont>
|
|
12
13
|
</usage>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<a11y surface="disclosure">
|
|
3
|
+
<rule>Trigger is the disclosing control; Base UI wires expanded/controls relationship to the Panel</rule>
|
|
4
|
+
<rule>Accessible name comes from Trigger children, or explicit aria-label / aria-labelledby when icon-only</rule>
|
|
5
|
+
<rule>Trigger icons are decorative (aria-hidden); open/closed is communicated via Base UI attributes/ARIA, not icon alone</rule>
|
|
6
|
+
<rule>Disabled root ignores pointer and keyboard activation</rule>
|
|
7
|
+
<rule>prefers-reduced-motion disables Panel height and icon interpolate transitions; open/close still works</rule>
|
|
8
|
+
<rule>Do not re-apply widget role/aria that Base UI Collapsible already emits</rule>
|
|
9
|
+
</a11y>
|