@viraui/react 2026.2.7 → 2026.2.10
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/components/basic-input/basic-input.css +1 -1
- package/dist/components/button/button.css +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/select/select.d.ts +8 -1
- package/dist/components/select/select.guide.json +3 -0
- package/dist/components/select/select.js +2 -1
- package/dist/components/toggle-button/toggle-button.js +0 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:calc(var(--space-small) + var(--space-x-small));--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;caret-color:var(--global-primary);&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&:-webkit-autofill,&:-webkit-autofill:active,&:-webkit-autofill:focus,&:-webkit-autofill:hover{-webkit-text-fill-color:var(--vui-basic-input-color);box-shadow:0 0 0 100px var(--vui-basic-input-background) inset,0 0 0 100px var(--vui-basic-input-background) inset;&::selection{-webkit-text-fill-color:contrast-color(var(--global-primary))}}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid][data-dirty]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-field-label-padding-inline{syntax:"<length>";inherits:true;initial-value:0}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:calc(var(--space-small) + var(--space-x-small));--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;caret-color:var(--global-primary);&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&:-webkit-autofill,&:-webkit-autofill:active,&:-webkit-autofill:focus,&:-webkit-autofill:hover{-webkit-text-fill-color:var(--vui-basic-input-color);box-shadow:0 0 0 100px var(--vui-basic-input-background) inset,0 0 0 100px var(--vui-basic-input-background) inset;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary))}}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid][data-dirty]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}
|
|
@@ -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:
|
|
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:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@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-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-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;min-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-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--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-x-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);background-clip:unset;&: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-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[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)}}
|
|
@@ -51,7 +51,7 @@ var ButtonRoot = ({ children, className, isDisabled, isIconOnly, addon, addonPos
|
|
|
51
51
|
render,
|
|
52
52
|
ref,
|
|
53
53
|
disabled: isDisabled,
|
|
54
|
-
focusableWhenDisabled:
|
|
54
|
+
focusableWhenDisabled: true
|
|
55
55
|
});
|
|
56
56
|
return /* @__PURE__ */ jsx(ButtonRenderRoot, {
|
|
57
57
|
isDisabled,
|
|
@@ -59,6 +59,13 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
|
|
|
59
59
|
* @default true
|
|
60
60
|
*/
|
|
61
61
|
alignListWithTrigger?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* When `true`, open select locks page scroll and blocks outside pointer interaction
|
|
64
|
+
* (Base UI modal). Vira defaults to non-modal so the page stays scrollable.
|
|
65
|
+
*
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
modal?: boolean;
|
|
62
69
|
/**
|
|
63
70
|
* Portal mount node (iframe body, shadow root, or app overlay root).
|
|
64
71
|
* Omit for Base UI default (`document.body` from the module window —
|
|
@@ -68,7 +75,7 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
|
|
|
68
75
|
*/
|
|
69
76
|
container?: React.ComponentProps<typeof PrimitiveSelect.Portal>['container'];
|
|
70
77
|
};
|
|
71
|
-
declare function SelectRootComponent({ alignListWithTrigger, children, className, container, description, dirty, disabled, error, addon, invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
|
|
78
|
+
declare function SelectRootComponent({ alignListWithTrigger, children, className, container, description, dirty, disabled, error, addon, invalid, label, modal, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }: SelectProps): React.JSX.Element;
|
|
72
79
|
export declare const Select: typeof SelectRootComponent & {
|
|
73
80
|
Option: typeof SelectOption;
|
|
74
81
|
Group: typeof SelectGroup;
|
|
@@ -53,6 +53,9 @@
|
|
|
53
53
|
"label": {
|
|
54
54
|
"description": "Visible label rendered with shared internal `FieldLabel`."
|
|
55
55
|
},
|
|
56
|
+
"modal": {
|
|
57
|
+
"description": "When `true`, open select locks page scroll and blocks outside pointer interaction (Base UI modal). Vira defaults to non-modal so the page stays scrollable."
|
|
58
|
+
},
|
|
56
59
|
"Option.addon": {
|
|
57
60
|
"description": "Decorative leading node rendered before the option label."
|
|
58
61
|
},
|
|
@@ -18,7 +18,7 @@ import { Field } from "@base-ui/react/field";
|
|
|
18
18
|
import { useId } from "react";
|
|
19
19
|
import { Select } from "@base-ui/react/select";
|
|
20
20
|
//#region src/components/select/select.tsx
|
|
21
|
-
function SelectRootComponent({ alignListWithTrigger = true, children, className, container, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
|
|
21
|
+
function SelectRootComponent({ alignListWithTrigger = true, children, className, container, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, modal = false, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
|
|
22
22
|
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = selectRootProps;
|
|
23
23
|
const fieldLabelId = useId();
|
|
24
24
|
const listAccessibleNameProps = {};
|
|
@@ -48,6 +48,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
|
|
|
48
48
|
/* @__PURE__ */ jsxs(Select.Root, {
|
|
49
49
|
...restSelectProps,
|
|
50
50
|
disabled,
|
|
51
|
+
modal,
|
|
51
52
|
name,
|
|
52
53
|
children: [/* @__PURE__ */ jsxs(Select.Trigger, {
|
|
53
54
|
"aria-label": ariaLabel,
|
|
@@ -12,7 +12,6 @@ var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant
|
|
|
12
12
|
defaultPressed,
|
|
13
13
|
onPressedChange,
|
|
14
14
|
disabled,
|
|
15
|
-
nativeButton: true,
|
|
16
15
|
render: (toggleProps, state) => {
|
|
17
16
|
const { "aria-label": _toggleAriaLabel, "aria-labelledby": _toggleAriaLabelledBy, ...restToggleProps } = toggleProps;
|
|
18
17
|
const icon = pressedIcon != null ? /* @__PURE__ */ jsxs("span", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.2.
|
|
3
|
+
"version": "2026.2.10",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.2.2",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.2.
|
|
38
|
+
"@viraui/foundation": "2026.2.10",
|
|
39
39
|
"@viraui/icons": "2026.0.2",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|