@viraui/react 2026.1.7 → 2026.1.9
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-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{max-block-size:none;max-inline-size:min-content}&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
|
|
@@ -16,6 +16,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
16
16
|
const isVertical = orientation === "vertical";
|
|
17
17
|
return /* @__PURE__ */ jsxs(Field.Root, {
|
|
18
18
|
className: slider_module_default.Slider,
|
|
19
|
+
"data-orientation": orientation,
|
|
19
20
|
dirty,
|
|
20
21
|
disabled,
|
|
21
22
|
invalid,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;&[data-surface-color=primary]{--vui-surface-background:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}&[data-surface-hover-color=primary]{--vui-surface-background-hover:light-dark(oklab(from var(--global-primary) l a b/20%),oklab(from var(--global-primary) l a b/10%))}@container root not style(--effect-vibrancy: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}&[data-surface-container=true]{container:surface/inline-size}}}
|
|
@@ -22,6 +22,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
|
|
|
22
22
|
validationMode,
|
|
23
23
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
24
24
|
direction: "row",
|
|
25
|
+
fillChildren: true,
|
|
25
26
|
columnGap: size === "small" ? "small" : "medium",
|
|
26
27
|
vAlign: hasTextDescription ? "start" : "center"
|
|
27
28
|
}),
|
package/dist/consumption.json
CHANGED
|
@@ -28,6 +28,21 @@
|
|
|
28
28
|
"rule": "Load theme CSS, font CSS, and preflight through JavaScript side-effect imports in the app root entry module. Import public components from the @viraui/react root barrel; component CSS follows the emitted JavaScript module graph and is not part of bootstrap.",
|
|
29
29
|
"forbidden": "Do not bootstrap Vira theme, font, or preflight CSS with CSS @import in a global stylesheet. Do not require per-component CSS imports in app bootstrap."
|
|
30
30
|
},
|
|
31
|
+
"rootProviders": {
|
|
32
|
+
"rule": "After CSS bootstrap, wrap the app tree once in Dialog.Provider, Dialog.IndentBackground, Dialog.Indent, Tooltip.Provider, and Toast.Provider. Toast.createToastManager() stays at module scope. Map Toast.useToastManager().toasts to Toast.Banner inside Toast.Portal and Toast.Viewport. Overlay composition details stay in colocated *.guide.json and viraui-design composition.md.",
|
|
33
|
+
"tree": [
|
|
34
|
+
"Dialog.Provider",
|
|
35
|
+
"Dialog.IndentBackground (sibling of Indent)",
|
|
36
|
+
"Dialog.Indent (wraps app + toast viewport)",
|
|
37
|
+
"Tooltip.Provider",
|
|
38
|
+
"Toast.Provider toastManager={toastManager}",
|
|
39
|
+
"children",
|
|
40
|
+
"Toast.Portal > Toast.Viewport > Toast.Banner per toast"
|
|
41
|
+
],
|
|
42
|
+
"nextJsAppRouter": "Keep CSS side-effect imports in the Server Component root layout. Put the provider tree in a Client Component that wraps children.",
|
|
43
|
+
"astro": "React context does not cross Astro islands. Providers must live in the same island as the Vira overlays that consume them.",
|
|
44
|
+
"rtl": "For RTL menus and popups, wrap with Base UI DirectionProvider direction=\"rtl\" and set dir=\"rtl\" on a portal ancestor (usually html)."
|
|
45
|
+
},
|
|
31
46
|
"nextJsAppRouter": {
|
|
32
47
|
"mandatory": true,
|
|
33
48
|
"rule": "In Next.js App Router apps, import theme CSS, font CSS, and @viraui/react/preflight.css as JavaScript side-effect imports in root app/layout.tsx; never bootstrap them with CSS @import in globals.css.",
|
|
@@ -49,6 +64,7 @@
|
|
|
49
64
|
"targets": ["@viraui/foundation/*", "@viraui/react/preflight.css", "@fontsource-variable/*"]
|
|
50
65
|
},
|
|
51
66
|
"globalsCssScope": "App-owned global styles only; no @viraui/* or font-package @import",
|
|
67
|
+
"providers": "Client Component wrapping children; CSS imports stay in app/layout.tsx",
|
|
52
68
|
"layoutExample": [
|
|
53
69
|
"import '@viraui/foundation/vira.css';",
|
|
54
70
|
"import '@fontsource-variable/geist/wght.css';",
|
|
@@ -57,26 +73,6 @@
|
|
|
57
73
|
"import './globals.css';"
|
|
58
74
|
]
|
|
59
75
|
},
|
|
60
|
-
"themePaths": [
|
|
61
|
-
{
|
|
62
|
-
"id": "preset-vira",
|
|
63
|
-
"label": "Preset Vira brand",
|
|
64
|
-
"foundation": true,
|
|
65
|
-
"themeCss": "@viraui/foundation/vira.css"
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
"id": "custom",
|
|
69
|
-
"label": "Consumer custom theme",
|
|
70
|
-
"foundation": false,
|
|
71
|
-
"themeCss": "Consumer-authored CSS with public semantic variables"
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
"id": "theme-builder",
|
|
75
|
-
"label": "Future theme builder export",
|
|
76
|
-
"foundation": false,
|
|
77
|
-
"themeCss": "Exported theme CSS from a Vira theme builder"
|
|
78
|
-
}
|
|
79
|
-
],
|
|
80
76
|
"discovery": {
|
|
81
77
|
"catalog": "@viraui/react/catalog.json",
|
|
82
78
|
"consumption": "@viraui/react/consumption.json",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.1.
|
|
3
|
+
"version": "2026.1.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.1.4",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.1.
|
|
38
|
+
"@viraui/foundation": "2026.1.9",
|
|
39
39
|
"@viraui/icons": "2026.0.1",
|
|
40
|
-
"@viraui/
|
|
41
|
-
"@viraui/
|
|
40
|
+
"@viraui/tsconfig": "2026.0.0",
|
|
41
|
+
"@viraui/postcss-config": "2026.0.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@base-ui/react": ">=1.6.0",
|