@viraui/react 2026.0.27 → 2026.0.29
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/accordion/accordion.css +1 -1
- package/dist/components/chip/chip.css +1 -1
- package/dist/components/chip/chip.js +1 -1
- package/dist/components/glow/glow.css +1 -1
- package/dist/components/glow/glow.guide.json +2 -1
- package/dist/components/slider/slider.d.ts +2 -2
- package/dist/components/slider/slider.guide.json +1 -1
- package/dist/components/slider/slider.js +7 -6
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-accordion-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--vui-accordion-radius:var(--radius-medium);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-accordion-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--vui-accordion-radius:var(--radius-medium);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--vui-accordion-radius);--vui-surface-border-radius-top-right:var(--vui-accordion-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--vui-accordion-radius);--vui-surface-border-radius-bottom-right:var(--vui-accordion-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}
|
|
@@ -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:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@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-x-large);--vui-chip-icon-size:0.9em;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;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[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
|
|
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:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@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-x-large);--vui-chip-icon-size:0.9em;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;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[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%;padding-inline:var(--space-small);.viraui__chip-module__Chip_2D18T[data-addon-position=start] &{padding-inline-start:var(--space-small);padding-inline-end:calc(var(--space-small) + var(--space-2x-small))}.viraui__chip-module__Chip_2D18T[data-addon-position=end] &{padding-inline-start:calc(var(--space-small) + var(--space-2x-small));padding-inline-end:var(--space-small)}}.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;overflow:hidden;text-overflow:ellipsis}}
|
|
@@ -11,7 +11,6 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
11
11
|
inline: true,
|
|
12
12
|
direction: addonPosition === "start" ? "row" : "row-reverse",
|
|
13
13
|
vAlign: "center",
|
|
14
|
-
hPadding: "small",
|
|
15
14
|
columnGap: "x-small",
|
|
16
15
|
className: chip_module_default.Content,
|
|
17
16
|
children: [addon && /* @__PURE__ */ jsx("span", {
|
|
@@ -34,6 +33,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
34
33
|
"data-shrink": "false",
|
|
35
34
|
children: content,
|
|
36
35
|
className: clsx(chip_module_default.Chip, className),
|
|
36
|
+
"data-addon-position": addon ? addonPosition : void 0,
|
|
37
37
|
"data-has-icon": addon ? "true" : void 0,
|
|
38
38
|
"data-variant": variant
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-auto-rotate-speed{syntax:"<time>";inherits:true;initial-value:4s}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@keyframes viraui__glow-module__vui-glow-auto-rotate_Zh-hL{0%{--vui-glow-starting-angle:0}to{--vui-glow-starting-angle:360}}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%,#0000,var(--global-primary),#0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(from 180deg at 50% 50%,var(--highlight-cyan),var(--highlight-blue),var(--highlight-green),var(--highlight-purple),var(--highlight-red),var(--highlight-indigo),var(--highlight-yellow),var(--highlight-salmon),var(--highlight-magenta),var(--highlight-cyan))}&[data-glow-auto-rotate=true]{--vui-glow-active-opacity:1;transition:none;animation:viraui__glow-module__vui-glow-auto-rotate_Zh-hL var(--vui-glow-auto-rotate-speed) linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}}&:not([data-glow-auto-rotate=true]){&:after,&:before{@media (hover:none),(pointer:coarse){display:none}}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
"Relying on Glow for keyboard focus visibility",
|
|
23
23
|
"Treating Glow as the visual card (color/padding) instead of composing Surface children",
|
|
24
24
|
"Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
|
|
25
|
-
"Expecting soft bloom Light layer — Glow is border-ring only"
|
|
25
|
+
"Expecting soft bloom Light layer — Glow is border-ring only",
|
|
26
|
+
"Use many glows and auto rotate on the same page. It's cpu intensive"
|
|
26
27
|
],
|
|
27
28
|
"related": ["Surface", "Shimmer", "ProgressiveBlur"],
|
|
28
29
|
"properties": {
|
|
@@ -37,8 +37,8 @@ export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
|
|
|
37
37
|
/**
|
|
38
38
|
* Shows the current value beside the label.
|
|
39
39
|
*
|
|
40
|
-
* Pass `true` for Base UI default formatting
|
|
41
|
-
* `Slider.Value` `children` to
|
|
40
|
+
* Pass `true` for Base UI default formatting inside styled `Text`, or a
|
|
41
|
+
* function matching `Slider.Value` `children` to own the value slot (no `Text`).
|
|
42
42
|
*
|
|
43
43
|
* @default Value UI is hidden.
|
|
44
44
|
*/
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"description": "Marks the slider as required and shows a required indicator on the label."
|
|
38
38
|
},
|
|
39
39
|
"renderValue": {
|
|
40
|
-
"description": "Shows the current value beside the label. Pass `true` for Base UI default formatting
|
|
40
|
+
"description": "Shows the current value beside the label. Pass `true` for Base UI default formatting inside styled `Text`, or a function matching `Slider.Value` `children` to own the value slot (no `Text`)."
|
|
41
41
|
},
|
|
42
42
|
"thumbAriaLabel": {
|
|
43
43
|
"description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."
|
|
@@ -14,7 +14,6 @@ import { Slider } from "@base-ui/react/slider";
|
|
|
14
14
|
var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", renderValue, thumbAlignment = "edge", thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
|
|
15
15
|
const isRange = isRangeSlider(value, defaultValue);
|
|
16
16
|
const isVertical = orientation === "vertical";
|
|
17
|
-
const showRenderedValue = renderValue === true || typeof renderValue === "function";
|
|
18
17
|
return /* @__PURE__ */ jsxs(Field.Root, {
|
|
19
18
|
className: slider_module_default.Slider,
|
|
20
19
|
dirty,
|
|
@@ -46,8 +45,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
46
45
|
vAlign: isVertical ? "stretch" : "center",
|
|
47
46
|
hAlign: isVertical ? "center" : "initial"
|
|
48
47
|
}),
|
|
49
|
-
children: [(label ||
|
|
50
|
-
fillChildren: true,
|
|
48
|
+
children: [(label || renderValue) && /* @__PURE__ */ jsxs(Stack, {
|
|
51
49
|
className: slider_module_default.SliderHeader,
|
|
52
50
|
direction: isVertical ? "column" : "row",
|
|
53
51
|
columnGap: "small",
|
|
@@ -56,7 +54,10 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
56
54
|
children: [label && /* @__PURE__ */ jsx(Field.Label, {
|
|
57
55
|
className: slider_module_default.Label,
|
|
58
56
|
children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
|
|
59
|
-
}),
|
|
57
|
+
}), renderValue && (typeof renderValue === "function" ? /* @__PURE__ */ jsx(Slider.Value, {
|
|
58
|
+
className: slider_module_default.Value,
|
|
59
|
+
children: renderValue
|
|
60
|
+
}) : /* @__PURE__ */ jsx(Text, {
|
|
60
61
|
className: slider_module_default.Value,
|
|
61
62
|
size: "small",
|
|
62
63
|
tone: "muted",
|
|
@@ -64,8 +65,8 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
64
65
|
whiteSpace: "nowrap",
|
|
65
66
|
selection: false,
|
|
66
67
|
align: isVertical ? "center" : "end",
|
|
67
|
-
render: /* @__PURE__ */ jsx(Slider.Value, {
|
|
68
|
-
})]
|
|
68
|
+
render: /* @__PURE__ */ jsx(Slider.Value, {})
|
|
69
|
+
}))]
|
|
69
70
|
}), /* @__PURE__ */ jsx(SliderControl, {
|
|
70
71
|
isRange,
|
|
71
72
|
orientation,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.0.
|
|
3
|
+
"version": "2026.0.29",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,8 +35,8 @@
|
|
|
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.0.
|
|
39
|
-
"@viraui/icons": "2026.0.
|
|
38
|
+
"@viraui/foundation": "2026.0.29",
|
|
39
|
+
"@viraui/icons": "2026.0.1",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|
|
42
42
|
},
|