@viraui/react 1.0.13 → 1.0.14
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 +10 -4
- package/dist/components/accordion/accordion.css +1 -1
- package/dist/components/accordion/accordion.guide.json +26 -0
- package/dist/components/annotate/annotate.css +1 -1
- package/dist/components/annotate/annotate.guide.json +46 -57
- package/dist/components/avatar/avatar.css +1 -1
- package/dist/components/avatar/avatar.guide.json +22 -10
- package/dist/components/avatar/avatar.js +0 -2
- package/dist/components/avatar-group/avatar-group.css +1 -7
- package/dist/components/avatar-group/avatar-group.guide.json +23 -16
- package/dist/components/badge/badge.css +1 -1
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/badge/badge.guide.json +17 -13
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/basic-input/basic-input.css +1 -1
- package/dist/components/basic-input/field-label.css +1 -1
- package/dist/components/basic-input/field-label.js +2 -0
- package/dist/components/bleed/bleed.guide.json +9 -6
- package/dist/components/button/button-chrome.d.ts +3 -1
- package/dist/components/button/button-chrome.js +3 -2
- package/dist/components/button/button-link.guide.json +55 -1
- package/dist/components/button/button-link.js +1 -0
- package/dist/components/button/button.css +1 -1
- package/dist/components/button/button.guide.json +27 -7
- package/dist/components/button/button.js +1 -0
- package/dist/components/checkbox/checkbox.css +1 -1
- package/dist/components/checkbox/checkbox.guide.json +40 -1
- package/dist/components/checkbox/checkbox.js +2 -2
- package/dist/components/checkbox/checkbox.module.js +1 -3
- package/dist/components/chip/chip.css +1 -1
- package/dist/components/chip/chip.guide.json +23 -6
- package/dist/components/chip/chip.js +1 -0
- package/dist/components/clamp-text/clamp-text.css +1 -1
- package/dist/components/clamp-text/clamp-text.guide.json +9 -0
- package/dist/components/dialog/dialog-sheet.js +1 -1
- package/dist/components/dialog/dialog.css +1 -1
- package/dist/components/dialog/dialog.guide.json +24 -0
- package/dist/components/dialog/dialog.module.js +1 -3
- package/dist/components/elevator/elevator.guide.json +23 -1
- package/dist/components/fieldset/fieldset.guide.json +16 -3
- package/dist/components/fieldset/fieldset.js +6 -6
- package/dist/components/fit-text/fit-text.css +1 -1
- package/dist/components/fit-text/fit-text.guide.json +2 -4
- package/dist/components/icon-button/icon-button-link.guide.json +52 -1
- package/dist/components/icon-button/icon-button-link.js +2 -2
- package/dist/components/icon-button/icon-button.d.ts +1 -1
- package/dist/components/icon-button/icon-button.guide.json +48 -3
- package/dist/components/icon-button/icon-button.js +2 -2
- package/dist/components/index.d.ts +1 -0
- package/dist/components/linear-progress/linear-progress.guide.json +16 -5
- package/dist/components/linear-progress/linear-progress.js +0 -1
- package/dist/components/masonry/masonry.d.ts +1 -1
- package/dist/components/masonry/masonry.guide.json +11 -9
- package/dist/components/menu/index.d.ts +11 -0
- package/dist/components/menu/menu-checkbox-item.d.ts +42 -0
- package/dist/components/menu/menu-checkbox-item.js +28 -0
- package/dist/components/menu/menu-group.d.ts +12 -0
- package/dist/components/menu/menu-group.js +36 -0
- package/dist/components/menu/menu-indicator-slot.d.ts +15 -0
- package/dist/components/menu/menu-indicator-slot.js +52 -0
- package/dist/components/menu/menu-item-row.d.ts +18 -0
- package/dist/components/menu/menu-item-row.js +47 -0
- package/dist/components/menu/menu-item.d.ts +36 -0
- package/dist/components/menu/menu-item.js +23 -0
- package/dist/components/menu/menu-link-item.d.ts +36 -0
- package/dist/components/menu/menu-link-item.js +26 -0
- package/dist/components/menu/menu-popup.d.ts +17 -0
- package/dist/components/menu/menu-popup.js +28 -0
- package/dist/components/menu/menu-radio-group.d.ts +16 -0
- package/dist/components/menu/menu-radio-group.js +36 -0
- package/dist/components/menu/menu-radio-item.d.ts +42 -0
- package/dist/components/menu/menu-radio-item.js +28 -0
- package/dist/components/menu/menu-separator.d.ts +9 -0
- package/dist/components/menu/menu-separator.js +15 -0
- package/dist/components/menu/menu-submenu-trigger.d.ts +29 -0
- package/dist/components/menu/menu-submenu-trigger.js +26 -0
- package/dist/components/menu/menu.css +1 -0
- package/dist/components/menu/menu.d.ts +58 -0
- package/dist/components/menu/menu.guide.json +101 -0
- package/dist/components/menu/menu.js +36 -0
- package/dist/components/menu/menu.module.js +13 -0
- package/dist/components/meter/meter.guide.json +15 -4
- package/dist/components/meter/meter.js +0 -1
- package/dist/components/popover/popover-sheet.js +1 -1
- package/dist/components/popover/popover.guide.json +25 -1
- package/dist/components/progressive-blur/progressive-blur.css +1 -1
- package/dist/components/progressive-blur/progressive-blur.guide.json +14 -4
- package/dist/components/progressive-blur/progressive-blur.js +2 -2
- package/dist/components/radio/radio.css +1 -1
- package/dist/components/radio/radio.guide.json +34 -1
- package/dist/components/radio/radio.js +28 -31
- package/dist/components/select/select-group.js +1 -1
- package/dist/components/select/select-option.d.ts +1 -1
- package/dist/components/select/select-option.js +2 -5
- package/dist/components/select/select-separator.js +7 -4
- package/dist/components/select/select.css +1 -1
- package/dist/components/select/select.guide.json +49 -8
- package/dist/components/select/select.js +1 -1
- package/dist/components/select/select.module.js +1 -5
- package/dist/components/separator/separator.guide.json +28 -1
- package/dist/components/shimmer/shimmer.css +1 -1
- package/dist/components/shimmer/shimmer.guide.json +19 -16
- package/dist/components/skeleton/skeleton.guide.json +24 -31
- package/dist/components/slider/slider.guide.json +27 -7
- package/dist/components/spinner/spinner.guide.json +5 -4
- package/dist/components/stack/stack.guide.json +49 -47
- package/dist/components/static-noise/static-noise.guide.json +18 -2
- package/dist/components/surface/surface.css +1 -1
- package/dist/components/surface/surface.guide.json +41 -48
- package/dist/components/switch/switch.css +1 -1
- package/dist/components/switch/switch.guide.json +25 -10
- package/dist/components/tabs/tabs.guide.json +11 -0
- package/dist/components/text/text.css +1 -1
- package/dist/components/text/text.guide.json +67 -76
- package/dist/components/textarea/textarea.css +1 -1
- package/dist/components/textarea/textarea.d.ts +4 -3
- package/dist/components/textarea/textarea.guide.json +19 -7
- package/dist/components/textfield/textfield.css +1 -1
- package/dist/components/textfield/textfield.guide.json +22 -7
- package/dist/components/title/title.css +1 -1
- package/dist/components/title/title.guide.json +62 -72
- package/dist/components/title/title.js +0 -1
- package/dist/components/toast/toast.css +1 -1
- package/dist/components/toast/toast.guide.json +32 -1
- package/dist/components/toggle-button/toggle-button.css +1 -0
- package/dist/components/toggle-button/toggle-button.d.ts +7 -0
- package/dist/components/toggle-button/toggle-button.guide.json +29 -2
- package/dist/components/toggle-button/toggle-button.js +18 -3
- package/dist/components/toggle-button/toggle-button.module.js +9 -0
- package/dist/components/toggle-group/toggle-group.d.ts +2 -1
- package/dist/components/toggle-group/toggle-group.guide.json +2 -3
- package/dist/components/tooltip/tooltip.guide.json +8 -1
- package/dist/components/typewriter/typewriter.css +1 -1
- package/dist/components/typewriter/typewriter.guide.json +27 -5
- package/dist/index.js +12 -2
- package/dist/internal/chrome-icons/chrome-icons.d.ts +2 -0
- package/dist/internal/chrome-icons/chrome-icons.js +7 -1
- package/dist/preflight-surface.json +1 -1
- package/dist/preflight.css +1 -1
- package/package.json +3 -3
|
@@ -15,25 +15,28 @@
|
|
|
15
15
|
"accessibility": [
|
|
16
16
|
"Bleed is a layout wrapper only — child content keeps native semantics",
|
|
17
17
|
"Parent containers should preserve readable line length for text content",
|
|
18
|
-
"Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly"
|
|
18
|
+
"Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly",
|
|
19
|
+
"Full bleed uses physical `margin-left: calc(50% - 50vw)` — known RTL limitation; verify mirroring in right-to-left layouts"
|
|
19
20
|
],
|
|
20
21
|
"antiPatterns": [
|
|
21
22
|
"Nesting multiple full bleeds without checking ancestor overflow",
|
|
22
23
|
"Using Bleed to compensate for missing Stack padding instead of fixing layout composition",
|
|
23
|
-
"Applying full bleed inside narrow overflow-hidden cards without testing clipping"
|
|
24
|
+
"Applying full bleed inside narrow overflow-hidden cards without testing clipping",
|
|
25
|
+
"Expecting full bleed `margin-left` to flip automatically in RTL"
|
|
24
26
|
],
|
|
25
27
|
"related": ["Stack", "Surface", "Separator"],
|
|
26
28
|
"properties": {
|
|
27
29
|
"react": {
|
|
28
30
|
"amount": {
|
|
29
|
-
"description": "Sets the inline bleed amount using a Vira space token."
|
|
30
|
-
|
|
31
|
+
"description": "Sets the inline bleed amount using a Vira space token."
|
|
32
|
+
},
|
|
33
|
+
"full": {
|
|
34
|
+
"description": "Bleeds content to the viewport edges and ignores `amount`."
|
|
31
35
|
}
|
|
32
36
|
},
|
|
33
37
|
"css": {
|
|
34
38
|
"amount": {
|
|
35
|
-
"description": "
|
|
36
|
-
"refReact": "amount"
|
|
39
|
+
"description": "Bleed distance on the root via `margin: 0 calc(var(--vui-bleed-amount, 0) * -1)` (negative inline, zero block)."
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
42
|
}
|
|
@@ -8,13 +8,15 @@ type ButtonChromeRootAttrsParams = {
|
|
|
8
8
|
addon?: ReactNode;
|
|
9
9
|
addonPosition: ButtonAddonPosition;
|
|
10
10
|
className?: string;
|
|
11
|
+
isDisabled: boolean;
|
|
11
12
|
isIconOnly: boolean;
|
|
12
13
|
loading: boolean;
|
|
13
14
|
pill: boolean;
|
|
14
15
|
size: ButtonSize;
|
|
15
16
|
variant: ButtonVariant;
|
|
16
17
|
};
|
|
17
|
-
export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
|
|
18
|
+
export declare function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant, }: ButtonChromeRootAttrsParams): {
|
|
19
|
+
'data-disabled'?: "" | undefined;
|
|
18
20
|
'aria-busy': true | undefined;
|
|
19
21
|
className: string;
|
|
20
22
|
'data-loading': string;
|
|
@@ -9,7 +9,7 @@ var spinnerDimensionsBySize = {
|
|
|
9
9
|
medium: "small",
|
|
10
10
|
big: "regular"
|
|
11
11
|
};
|
|
12
|
-
function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly, loading, pill, size, variant }) {
|
|
12
|
+
function getButtonChromeRootAttrs({ addon, addonPosition, className, isDisabled, isIconOnly, loading, pill, size, variant }) {
|
|
13
13
|
return {
|
|
14
14
|
"aria-busy": loading || void 0,
|
|
15
15
|
className: clsx(button_module_default.Button, className),
|
|
@@ -18,7 +18,8 @@ function getButtonChromeRootAttrs({ addon, addonPosition, className, isIconOnly,
|
|
|
18
18
|
"data-size": size,
|
|
19
19
|
"data-icon-only": isIconOnly ? "true" : void 0,
|
|
20
20
|
"data-addon-position": addon && !isIconOnly ? addonPosition : void 0,
|
|
21
|
-
"data-variant": variant
|
|
21
|
+
"data-variant": variant,
|
|
22
|
+
...isDisabled && { "data-disabled": "" }
|
|
22
23
|
};
|
|
23
24
|
}
|
|
24
25
|
var ButtonChromeChildren = ({ addon, children, isIconOnly, loading, size }) => /* @__PURE__ */ jsxs(Fragment, { children: [isIconOnly ? /* @__PURE__ */ jsx("span", {
|
|
@@ -14,5 +14,59 @@
|
|
|
14
14
|
"Loading sets aria-busy; Spinner stays decorative"
|
|
15
15
|
],
|
|
16
16
|
"antiPatterns": ["Using Button with render={<a />} instead of ButtonLink", "Forcing role=button on a link"],
|
|
17
|
-
"related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"]
|
|
17
|
+
"related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"],
|
|
18
|
+
"properties": {
|
|
19
|
+
"react": {
|
|
20
|
+
"addon": {
|
|
21
|
+
"description": "Decorative addon rendered alongside the link label."
|
|
22
|
+
},
|
|
23
|
+
"addonPosition": {
|
|
24
|
+
"description": "Controls whether the addon appears before or after the label."
|
|
25
|
+
},
|
|
26
|
+
"disabled": {
|
|
27
|
+
"description": "Marks the link inert via `aria-disabled` and prevents activation."
|
|
28
|
+
},
|
|
29
|
+
"loading": {
|
|
30
|
+
"description": "Shows a centered spinner overlay while preserving the original content width."
|
|
31
|
+
},
|
|
32
|
+
"pill": {
|
|
33
|
+
"description": "Applies a fully rounded pill shape."
|
|
34
|
+
},
|
|
35
|
+
"render": {
|
|
36
|
+
"description": "Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`)."
|
|
37
|
+
},
|
|
38
|
+
"size": {
|
|
39
|
+
"description": "Controls the visual button size."
|
|
40
|
+
},
|
|
41
|
+
"variant": {
|
|
42
|
+
"description": "Selects the visual treatment matching Button."
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"css": {
|
|
46
|
+
"background": {
|
|
47
|
+
"description": "Button fill; variant and state selectors preset this."
|
|
48
|
+
},
|
|
49
|
+
"color": {
|
|
50
|
+
"description": "Button label and icon color."
|
|
51
|
+
},
|
|
52
|
+
"height": {
|
|
53
|
+
"description": "Button block size; size prop presets via data attributes."
|
|
54
|
+
},
|
|
55
|
+
"icon-size": {
|
|
56
|
+
"description": "Addon icon size inside the button."
|
|
57
|
+
},
|
|
58
|
+
"padding-block": {
|
|
59
|
+
"description": "Vertical padding inside the button."
|
|
60
|
+
},
|
|
61
|
+
"padding-inline": {
|
|
62
|
+
"description": "Horizontal padding inside the button."
|
|
63
|
+
},
|
|
64
|
+
"radius": {
|
|
65
|
+
"description": "Corner radius; pill sets infinite radius via data-pill."
|
|
66
|
+
},
|
|
67
|
+
"spinner-color": {
|
|
68
|
+
"description": "Loading spinner color on the root."
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
18
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:currentColor}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:1.125em}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-small);--vui-button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;max-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--vui-button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--vui-button-padding-inline) / 2)}}&[data-size=big]{--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:var(--space-medium);--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:false;initial-value:currentColor}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:1.125em}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-small);--vui-button-radius:var(--radius-medium);-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;max-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite);&[data-addon-position=end]{padding-inline-end:calc(var(--vui-button-padding-inline) / 2)}&[data-addon-position=start]{padding-inline-start:calc(var(--vui-button-padding-inline) / 2)}}&[data-size=big]{--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:var(--space-medium);--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b/0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b/12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
|
|
@@ -27,6 +27,26 @@
|
|
|
27
27
|
],
|
|
28
28
|
"related": ["ButtonLink", "IconButton", "IconButtonLink", "Icon", "Spinner", "Chip"],
|
|
29
29
|
"properties": {
|
|
30
|
+
"react": {
|
|
31
|
+
"addon": {
|
|
32
|
+
"description": "Decorative addon rendered alongside the button label. Pass any React element; use a named icon from `@viraui/icons/react` or `<Chip />` for status chips."
|
|
33
|
+
},
|
|
34
|
+
"addonPosition": {
|
|
35
|
+
"description": "Controls whether the addon appears before or after the label."
|
|
36
|
+
},
|
|
37
|
+
"loading": {
|
|
38
|
+
"description": "Shows a centered spinner overlay while preserving the original content width."
|
|
39
|
+
},
|
|
40
|
+
"pill": {
|
|
41
|
+
"description": "Applies a fully rounded pill shape to the button."
|
|
42
|
+
},
|
|
43
|
+
"size": {
|
|
44
|
+
"description": "Controls the visual button size."
|
|
45
|
+
},
|
|
46
|
+
"variant": {
|
|
47
|
+
"description": "Selects the visual treatment for the button."
|
|
48
|
+
}
|
|
49
|
+
},
|
|
30
50
|
"css": {
|
|
31
51
|
"background": {
|
|
32
52
|
"description": "Button fill; variant and state selectors preset this."
|
|
@@ -37,20 +57,20 @@
|
|
|
37
57
|
"height": {
|
|
38
58
|
"description": "Button block size; size prop presets via data attributes."
|
|
39
59
|
},
|
|
40
|
-
"
|
|
41
|
-
"description": "
|
|
60
|
+
"icon-size": {
|
|
61
|
+
"description": "Addon icon size inside the button."
|
|
42
62
|
},
|
|
43
63
|
"padding-block": {
|
|
44
64
|
"description": "Vertical padding inside the button."
|
|
45
65
|
},
|
|
46
|
-
"
|
|
47
|
-
"description": "
|
|
48
|
-
},
|
|
49
|
-
"icon-size": {
|
|
50
|
-
"description": "Addon icon size inside the button."
|
|
66
|
+
"padding-inline": {
|
|
67
|
+
"description": "Horizontal padding inside the button."
|
|
51
68
|
},
|
|
52
69
|
"radius": {
|
|
53
70
|
"description": "Corner radius; pill sets infinite radius via data-pill."
|
|
71
|
+
},
|
|
72
|
+
"spinner-color": {
|
|
73
|
+
"description": "Loading spinner color on the root."
|
|
54
74
|
}
|
|
55
75
|
}
|
|
56
76
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" *";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-primary)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" *";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-primary)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color)}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}
|
|
@@ -24,5 +24,44 @@
|
|
|
24
24
|
"Using Checkbox without Field.Root for standalone validated fields",
|
|
25
25
|
"Expecting description to stay visible when invalid without an error message"
|
|
26
26
|
],
|
|
27
|
-
"related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"]
|
|
27
|
+
"related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"],
|
|
28
|
+
"properties": {
|
|
29
|
+
"react": {
|
|
30
|
+
"description": {
|
|
31
|
+
"description": "Helper copy rendered with `Field.Description` and `Text` for this option."
|
|
32
|
+
},
|
|
33
|
+
"error": {
|
|
34
|
+
"description": "Error copy rendered in the same slot as `description` while invalid."
|
|
35
|
+
},
|
|
36
|
+
"hPadding": {
|
|
37
|
+
"description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
|
|
38
|
+
},
|
|
39
|
+
"label": {
|
|
40
|
+
"description": "Visible label rendered with shared internal `FieldLabel`."
|
|
41
|
+
},
|
|
42
|
+
"size": {
|
|
43
|
+
"description": "Controls the visual checkbox size."
|
|
44
|
+
},
|
|
45
|
+
"vPadding": {
|
|
46
|
+
"description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"css": {
|
|
50
|
+
"background": {
|
|
51
|
+
"description": "Checkbox control background color."
|
|
52
|
+
},
|
|
53
|
+
"border-color": {
|
|
54
|
+
"description": "Checkbox control border color; invalid and checked states override."
|
|
55
|
+
},
|
|
56
|
+
"indicator-color": {
|
|
57
|
+
"description": "Checkbox check/minus indicator color."
|
|
58
|
+
},
|
|
59
|
+
"radius": {
|
|
60
|
+
"description": "Checkbox control corner radius."
|
|
61
|
+
},
|
|
62
|
+
"size": {
|
|
63
|
+
"description": "Checkbox control box size; size presets adjust footprint and radius."
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
28
67
|
}
|
|
@@ -33,10 +33,10 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
|
|
|
33
33
|
children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
|
|
34
34
|
className: checkbox_module_default.Indicator,
|
|
35
35
|
children: [/* @__PURE__ */ jsx(ChromeCheck, {
|
|
36
|
-
className:
|
|
36
|
+
className: checkbox_module_default.CheckIcon,
|
|
37
37
|
size: iconSize
|
|
38
38
|
}), /* @__PURE__ */ jsx(ChromeMinus, {
|
|
39
|
-
className:
|
|
39
|
+
className: checkbox_module_default.MinusIcon,
|
|
40
40
|
size: iconSize
|
|
41
41
|
})]
|
|
42
42
|
})
|
|
@@ -3,7 +3,6 @@ var Checkbox = "viraui__checkbox-module__Checkbox_3oGip";
|
|
|
3
3
|
var Label = "viraui__checkbox-module__Label_n9HL7";
|
|
4
4
|
var CheckboxRoot = "viraui__checkbox-module__CheckboxRoot_PeyF5";
|
|
5
5
|
var Indicator = "viraui__checkbox-module__Indicator_C-k-l";
|
|
6
|
-
var Icon = "viraui__checkbox-module__Icon_926Sa";
|
|
7
6
|
var MinusIcon = "viraui__checkbox-module__MinusIcon_Q57pY";
|
|
8
7
|
var CheckIcon = "viraui__checkbox-module__CheckIcon_XqUcs";
|
|
9
8
|
var checkbox_module_default = {
|
|
@@ -11,9 +10,8 @@ var checkbox_module_default = {
|
|
|
11
10
|
Label,
|
|
12
11
|
CheckboxRoot,
|
|
13
12
|
Indicator,
|
|
14
|
-
Icon,
|
|
15
13
|
MinusIcon,
|
|
16
14
|
CheckIcon
|
|
17
15
|
};
|
|
18
16
|
//#endregion
|
|
19
|
-
export { CheckIcon, Checkbox, CheckboxRoot,
|
|
17
|
+
export { CheckIcon, Checkbox, CheckboxRoot, Indicator, Label, MinusIcon, checkbox_module_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:.9em}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:13%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:.9em}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:13%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-gray)}&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-yellow)}&[data-variant=green]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}}
|
|
@@ -25,6 +25,23 @@
|
|
|
25
25
|
],
|
|
26
26
|
"related": ["Button", "Icon", "IconButton", "Stack", "Text"],
|
|
27
27
|
"properties": {
|
|
28
|
+
"react": {
|
|
29
|
+
"addon": {
|
|
30
|
+
"description": "Decorative addon rendered alongside the chip label."
|
|
31
|
+
},
|
|
32
|
+
"addonPosition": {
|
|
33
|
+
"description": "Controls whether the addon appears before or after the label."
|
|
34
|
+
},
|
|
35
|
+
"ref": {
|
|
36
|
+
"description": "Ref forwarded to the rendered chip root element."
|
|
37
|
+
},
|
|
38
|
+
"render": {
|
|
39
|
+
"description": "Replaces the default `div` root using Base UI render semantics."
|
|
40
|
+
},
|
|
41
|
+
"variant": {
|
|
42
|
+
"description": "Selects the visual treatment for the chip."
|
|
43
|
+
}
|
|
44
|
+
},
|
|
28
45
|
"css": {
|
|
29
46
|
"background": {
|
|
30
47
|
"description": "Chip fill; variant presets via data attributes."
|
|
@@ -35,17 +52,17 @@
|
|
|
35
52
|
"color": {
|
|
36
53
|
"description": "Chip label and icon color."
|
|
37
54
|
},
|
|
38
|
-
"height": {
|
|
39
|
-
"description": "Fixed chip block size."
|
|
40
|
-
},
|
|
41
|
-
"icon-size": {
|
|
42
|
-
"description": "Decorative addon icon size."
|
|
43
|
-
},
|
|
44
55
|
"color-bg-opacity": {
|
|
45
56
|
"description": "Highlight variant background opacity mix."
|
|
46
57
|
},
|
|
47
58
|
"color-border-opacity": {
|
|
48
59
|
"description": "Highlight variant border opacity mix."
|
|
60
|
+
},
|
|
61
|
+
"height": {
|
|
62
|
+
"description": "Fixed chip block size."
|
|
63
|
+
},
|
|
64
|
+
"icon-size": {
|
|
65
|
+
"description": "Decorative addon icon size."
|
|
49
66
|
}
|
|
50
67
|
}
|
|
51
68
|
}
|
|
@@ -18,6 +18,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
18
18
|
children: [addon && /* @__PURE__ */ jsx("span", {
|
|
19
19
|
"aria-hidden": "true",
|
|
20
20
|
className: chip_module_default.IconSlot,
|
|
21
|
+
"data-shrink": "false",
|
|
21
22
|
children: addon
|
|
22
23
|
}), /* @__PURE__ */ jsx("span", {
|
|
23
24
|
className: chip_module_default.Label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-clamp-text-rows{syntax:"<integer>";inherits:false;initial-value:1}.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--vui-clamp-text-rows
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-clamp-text-rows{syntax:"<integer>";inherits:false;initial-value:1}.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--vui-clamp-text-rows);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}}
|
|
@@ -23,6 +23,15 @@
|
|
|
23
23
|
"related": ["Text", "Title"],
|
|
24
24
|
"properties": {
|
|
25
25
|
"react": {
|
|
26
|
+
"inline": {
|
|
27
|
+
"description": "Uses inline `-webkit-inline-box` display instead of block `-webkit-box`."
|
|
28
|
+
},
|
|
29
|
+
"ref": {
|
|
30
|
+
"description": "Ref forwarded to the rendered clamp text root element."
|
|
31
|
+
},
|
|
32
|
+
"render": {
|
|
33
|
+
"description": "Replaces the default `span` root using Base UI render semantics."
|
|
34
|
+
},
|
|
26
35
|
"rows": {
|
|
27
36
|
"description": "Sets how many lines of text remain visible before truncation.",
|
|
28
37
|
"refCss": "rows"
|
|
@@ -29,7 +29,6 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
|
|
|
29
29
|
vPadding: ["medium", 0]
|
|
30
30
|
}),
|
|
31
31
|
children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
|
|
32
|
-
className: dialog_module_default.Handle,
|
|
33
32
|
inline: true,
|
|
34
33
|
direction: "row",
|
|
35
34
|
vPadding: [0, "medium"],
|
|
@@ -45,6 +44,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
|
|
|
45
44
|
className: dialog_module_default.Body,
|
|
46
45
|
children: [/* @__PURE__ */ jsxs(Stack, {
|
|
47
46
|
className: dialog_module_default.Header,
|
|
47
|
+
"data-shrink": "false",
|
|
48
48
|
hAlign: headerAlign,
|
|
49
49
|
hPadding: "medium",
|
|
50
50
|
fillChildren: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--bleed:var(--space-wide);--peek:var(--space-medium);--
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-dialog-max-block-size{syntax:"*";inherits:false;initial-value:97dvh}@property --__dialog-bleed{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-step{syntax:"<number>";inherits:false;initial-value:.05}@property --__dialog-stack-progress{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-peek-offset{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-stack-scale-base{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__dialog-stack-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__dialog-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-translate-y{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-radius{syntax:"<length>";inherits:false;initial-value:0}@property --__dialog-indent-transition{syntax:"<number>";inherits:false;initial-value:1}.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-swiping]:not([data-ending-style]){opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--__dialog-bleed:var(--space-wide);--__dialog-peek:var(--space-medium);--__dialog-stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--__dialog-stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--__dialog-stack-progress)) * var(--__dialog-peek)));--__dialog-stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--__dialog-stack-step)));--__dialog-stack-scale:clamp(0,calc(var(--__dialog-stack-scale-base) + var(--__dialog-stack-step) * var(--__dialog-stack-progress)),1);--__dialog-stack-shrink:calc(1 - var(--__dialog-stack-scale));--__dialog-stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--__dialog-bleed)));--__dialog-translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--__dialog-stack-peek-offset) - var(--__dialog-stack-shrink) * var(--__dialog-stack-height));max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
|
|
@@ -27,9 +27,33 @@
|
|
|
27
27
|
"related": ["Surface", "Button", "IconButton", "Stack", "Elevator"],
|
|
28
28
|
"properties": {
|
|
29
29
|
"react": {
|
|
30
|
+
"Sheet.children": {
|
|
31
|
+
"description": "Optional body content rendered below the description."
|
|
32
|
+
},
|
|
33
|
+
"Sheet.description": {
|
|
34
|
+
"description": "Supporting copy announced with the title."
|
|
35
|
+
},
|
|
36
|
+
"Sheet.fitContent": {
|
|
37
|
+
"description": "Centers the sheet horizontally within the viewport."
|
|
38
|
+
},
|
|
39
|
+
"Sheet.headerAlign": {
|
|
40
|
+
"description": "Aligns the header content."
|
|
41
|
+
},
|
|
42
|
+
"Sheet.maxContentWidth": {
|
|
43
|
+
"description": "Optional maximum width of the content area."
|
|
44
|
+
},
|
|
30
45
|
"Sheet.maxHeight": {
|
|
31
46
|
"description": "Maximum block size of the sheet panel.",
|
|
32
47
|
"refCss": "max-block-size"
|
|
48
|
+
},
|
|
49
|
+
"Sheet.showCloseButton": {
|
|
50
|
+
"description": "Whether to show the close button."
|
|
51
|
+
},
|
|
52
|
+
"Sheet.showHandle": {
|
|
53
|
+
"description": "Whether to show the drag handle above the sheet header."
|
|
54
|
+
},
|
|
55
|
+
"Sheet.title": {
|
|
56
|
+
"description": "Accessible dialog title rendered as the modal heading."
|
|
33
57
|
}
|
|
34
58
|
},
|
|
35
59
|
"css": {
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
var Backdrop = "viraui__dialog-module__Backdrop_xgFhs";
|
|
3
3
|
var Viewport = "viraui__dialog-module__Viewport_kmZN1";
|
|
4
4
|
var Popup = "viraui__dialog-module__Popup_5qIyj";
|
|
5
|
-
var Handle = "viraui__dialog-module__Handle_nd9SN";
|
|
6
5
|
var HandleShape = "viraui__dialog-module__HandleShape_mEg8R";
|
|
7
6
|
var Header = "viraui__dialog-module__Header_WnBly";
|
|
8
7
|
var Body = "viraui__dialog-module__Body_9-UgN";
|
|
@@ -14,7 +13,6 @@ var dialog_module_default = {
|
|
|
14
13
|
Backdrop,
|
|
15
14
|
Viewport,
|
|
16
15
|
Popup,
|
|
17
|
-
Handle,
|
|
18
16
|
HandleShape,
|
|
19
17
|
Header,
|
|
20
18
|
Body,
|
|
@@ -24,4 +22,4 @@ var dialog_module_default = {
|
|
|
24
22
|
CloseButton
|
|
25
23
|
};
|
|
26
24
|
//#endregion
|
|
27
|
-
export { Backdrop, Body, CloseButton, Content,
|
|
25
|
+
export { Backdrop, Body, CloseButton, Content, HandleShape, Header, Indent, IndentBackground, Popup, Viewport, dialog_module_default as default };
|
|
@@ -20,5 +20,27 @@
|
|
|
20
20
|
"Wrapping invalid or non-element nodes",
|
|
21
21
|
"Overwriting child transition shorthand without composing box-shadow"
|
|
22
22
|
],
|
|
23
|
-
"related": ["Surface"]
|
|
23
|
+
"related": ["Surface"],
|
|
24
|
+
"properties": {
|
|
25
|
+
"react": {
|
|
26
|
+
"children": {
|
|
27
|
+
"description": "Element or elements that receive elevation hooks on their rendered root."
|
|
28
|
+
},
|
|
29
|
+
"direction": {
|
|
30
|
+
"description": "Shadow cast direction mapped to `data-elevation-direction`."
|
|
31
|
+
},
|
|
32
|
+
"extraShadow": {
|
|
33
|
+
"description": "Additional shadow layer mapped to the `--extra-shadow` custom property."
|
|
34
|
+
},
|
|
35
|
+
"hover": {
|
|
36
|
+
"description": "Hover elevation level mapped to `data-elevation-hover`."
|
|
37
|
+
},
|
|
38
|
+
"resting": {
|
|
39
|
+
"description": "Resting elevation level mapped to `data-elevation`."
|
|
40
|
+
},
|
|
41
|
+
"shadowColor": {
|
|
42
|
+
"description": "Shadow color mapped to the `--shadow-color` custom property."
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
24
46
|
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"Choice groups that need a shared legend, group description, or group error — Field.Root > Fieldset render={<RadioGroup<Value> />} or render={<CheckboxGroup />}",
|
|
8
8
|
"Group validation and helper copy that require a Field.Root ancestor plus Fieldset description or error",
|
|
9
9
|
"Type-safe radio unions via RadioGroup<'ssd' | 'hdd'> merged through Fieldset render",
|
|
10
|
-
"
|
|
10
|
+
"Shared legend plus optional group description/error for a form block — border/section chrome belongs on Surface or the consumer"
|
|
11
11
|
],
|
|
12
12
|
"whenNotToUse": [
|
|
13
13
|
"Every RadioGroup or CheckboxGroup by default — Fieldset is optional when options already have labels and no group copy is needed",
|
|
@@ -18,12 +18,25 @@
|
|
|
18
18
|
"accessibility": [
|
|
19
19
|
"Map visible label to Fieldset.Legend so grouped controls share an accessible section name",
|
|
20
20
|
"Keep group invalid state on Field.Root and surface group error copy through Fieldset error",
|
|
21
|
-
"Pass disabled to Fieldset
|
|
21
|
+
"Pass disabled to `<Fieldset disabled>` when the whole section should ignore interaction"
|
|
22
22
|
],
|
|
23
23
|
"antiPatterns": [
|
|
24
24
|
"Wrapping Fieldset.Root in Stack render — breaks Base UI render merge with RadioGroup or CheckboxGroup",
|
|
25
25
|
"Expecting description or error on Fieldset without a Field.Root ancestor",
|
|
26
26
|
"Omitting RadioGroup<Value> generics when option values are a restricted union"
|
|
27
27
|
],
|
|
28
|
-
"related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"]
|
|
28
|
+
"related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"],
|
|
29
|
+
"properties": {
|
|
30
|
+
"react": {
|
|
31
|
+
"description": {
|
|
32
|
+
"description": "Group helper copy rendered below the legend while valid. Requires a `Field.Root` ancestor for `FieldHelperCopy`."
|
|
33
|
+
},
|
|
34
|
+
"error": {
|
|
35
|
+
"description": "Group error copy rendered below the legend when invalid. Requires a `Field.Root` ancestor."
|
|
36
|
+
},
|
|
37
|
+
"label": {
|
|
38
|
+
"description": "Visible legend copy rendered with shared internal `FieldLabel`."
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
29
42
|
}
|
|
@@ -4,20 +4,20 @@ import { Stack } from "../stack/stack.js";
|
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Fieldset } from "@base-ui/react";
|
|
6
6
|
//#region src/components/fieldset/fieldset.tsx
|
|
7
|
-
var Fieldset$1 = ({ children, className, description, disabled, error, label, ...
|
|
8
|
-
...
|
|
7
|
+
var Fieldset$1 = ({ children, className, description, disabled, error, label, ...otherProps }) => /* @__PURE__ */ jsxs(Fieldset.Root, {
|
|
8
|
+
...otherProps,
|
|
9
9
|
className,
|
|
10
10
|
disabled,
|
|
11
|
-
children: [/* @__PURE__ */ jsxs(Stack, {
|
|
11
|
+
children: [(label || description || error) && /* @__PURE__ */ jsxs(Stack, {
|
|
12
12
|
vPadding: [0, "small"],
|
|
13
13
|
rowGap: "small",
|
|
14
|
-
children: [label
|
|
14
|
+
children: [label && /* @__PURE__ */ jsx(Fieldset.Legend, {
|
|
15
15
|
render: /* @__PURE__ */ jsx(FieldLabel, {}),
|
|
16
16
|
children: label
|
|
17
|
-
})
|
|
17
|
+
}), (description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
|
|
18
18
|
description,
|
|
19
19
|
error
|
|
20
|
-
})
|
|
20
|
+
})]
|
|
21
21
|
}), children]
|
|
22
22
|
});
|
|
23
23
|
//#endregion
|