@viraui/react 2026.2.8 → 2026.2.11
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
|
|
@@ -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,39 +48,39 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
|
|
|
48
48
|
/* @__PURE__ */ jsxs(Select.Root, {
|
|
49
49
|
...restSelectProps,
|
|
50
50
|
disabled,
|
|
51
|
+
modal,
|
|
51
52
|
name,
|
|
52
|
-
children: [/* @__PURE__ */
|
|
53
|
+
children: [/* @__PURE__ */ jsx(Select.Trigger, {
|
|
53
54
|
"aria-label": ariaLabel,
|
|
54
55
|
"aria-labelledby": ariaLabelledBy,
|
|
55
|
-
className: select_module_default.Trigger,
|
|
56
56
|
disabled,
|
|
57
57
|
ref,
|
|
58
|
-
|
|
58
|
+
children: /* @__PURE__ */ jsxs(Stack, {
|
|
59
59
|
fillChildren: true,
|
|
60
|
+
className: select_module_default.Trigger,
|
|
60
61
|
direction: "row",
|
|
61
|
-
render: /* @__PURE__ */ jsx("button", { type: "button" }),
|
|
62
62
|
columnGap: "x-small",
|
|
63
|
-
vAlign: "center"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
})
|
|
63
|
+
vAlign: "center",
|
|
64
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
65
|
+
className: select_module_default.Value,
|
|
66
|
+
render: /* @__PURE__ */ jsx(Select.Value, { placeholder }),
|
|
67
|
+
size: "small",
|
|
68
|
+
trim: false,
|
|
69
|
+
lineHeight: "x-small",
|
|
70
|
+
whiteSpace: "nowrap"
|
|
71
|
+
}), /* @__PURE__ */ jsx(Select.Icon, {
|
|
72
|
+
className: select_module_default.Icon,
|
|
73
|
+
"data-grow": "false",
|
|
74
|
+
render: /* @__PURE__ */ jsx(Stack, {
|
|
75
|
+
hAlign: "center",
|
|
76
|
+
hPadding: "x-small",
|
|
77
|
+
inline: true,
|
|
78
|
+
"data-shrink": "false",
|
|
79
|
+
vAlign: "center"
|
|
80
|
+
}),
|
|
81
|
+
children: addon
|
|
82
|
+
})]
|
|
83
|
+
})
|
|
84
84
|
}), /* @__PURE__ */ jsx(Select.Portal, {
|
|
85
85
|
container,
|
|
86
86
|
children: /* @__PURE__ */ jsx(Select.Positioner, {
|
|
@@ -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.11",
|
|
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.11",
|
|
39
39
|
"@viraui/icons": "2026.0.2",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|