@viraui/react 2026.0.26 → 2026.0.28
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/select/select.js +2 -1
- package/dist/components/slider/slider-control.d.ts +2 -1
- package/dist/components/slider/slider-control.js +27 -0
- package/dist/components/slider/slider.css +1 -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 +8 -7
- package/dist/components/tabs/tabs.css +1 -1
- package/dist/components/text/text.css +1 -1
- package/dist/components/text/text.d.ts +2 -1
- package/dist/components/text/text.guide.json +1 -1
- package/dist/components/text/text.js +2 -2
- package/dist/components/title/title.d.ts +2 -1
- package/dist/components/title/title.guide.json +1 -1
- package/dist/components/title/title.js +2 -2
- package/package.json +2 -2
|
@@ -65,9 +65,10 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
|
|
|
65
65
|
}),
|
|
66
66
|
children: [/* @__PURE__ */ jsx(Text, {
|
|
67
67
|
className: select_module_default.Value,
|
|
68
|
-
lineHeight: "small",
|
|
69
68
|
render: /* @__PURE__ */ jsx(Select.Value, { placeholder }),
|
|
70
69
|
size: "small",
|
|
70
|
+
trim: false,
|
|
71
|
+
lineHeight: "x-small",
|
|
71
72
|
whiteSpace: "nowrap"
|
|
72
73
|
}), /* @__PURE__ */ jsx(Select.Icon, {
|
|
73
74
|
className: select_module_default.Icon,
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { SliderRoot } from '@base-ui/react/slider';
|
|
2
|
+
import type * as React from 'react';
|
|
2
3
|
export type SliderControlProps = {
|
|
3
4
|
isRange: boolean;
|
|
4
5
|
orientation?: SliderRoot.Props['orientation'];
|
|
5
6
|
thumbAriaLabel?: string | readonly [string, string] | undefined;
|
|
6
7
|
};
|
|
7
|
-
export declare function SliderControl({ isRange, orientation, thumbAriaLabel }: SliderControlProps):
|
|
8
|
+
export declare function SliderControl({ isRange, orientation, thumbAriaLabel }: SliderControlProps): React.JSX.Element;
|
|
@@ -12,12 +12,39 @@ function resolveThumbAriaLabels(thumbAriaLabel, isRange) {
|
|
|
12
12
|
};
|
|
13
13
|
return { first: thumbAriaLabel[0] };
|
|
14
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* Block document text selection for the active primary-button press.
|
|
17
|
+
*
|
|
18
|
+
* Must not call `preventDefault` on the pointer event — Base UI skips drag
|
|
19
|
+
* handling when `defaultPrevented` is already set. `selectstart` covers the
|
|
20
|
+
* case where the pointer leaves the control over page text.
|
|
21
|
+
*/
|
|
22
|
+
function blockTextSelectionWhilePressed(event) {
|
|
23
|
+
if (event.button !== 0) return;
|
|
24
|
+
const doc = event.currentTarget.ownerDocument;
|
|
25
|
+
const control = event.currentTarget;
|
|
26
|
+
const blockSelectStart = (selectEvent) => {
|
|
27
|
+
selectEvent.preventDefault();
|
|
28
|
+
};
|
|
29
|
+
const stop = () => {
|
|
30
|
+
doc.removeEventListener("selectstart", blockSelectStart);
|
|
31
|
+
doc.removeEventListener("pointerup", stop);
|
|
32
|
+
doc.removeEventListener("pointercancel", stop);
|
|
33
|
+
control.removeEventListener("lostpointercapture", stop);
|
|
34
|
+
};
|
|
35
|
+
doc.addEventListener("selectstart", blockSelectStart);
|
|
36
|
+
doc.addEventListener("pointerup", stop);
|
|
37
|
+
doc.addEventListener("pointercancel", stop);
|
|
38
|
+
control.addEventListener("lostpointercapture", stop);
|
|
39
|
+
doc.getSelection()?.removeAllRanges();
|
|
40
|
+
}
|
|
15
41
|
function SliderControl({ isRange, orientation = "horizontal", thumbAriaLabel }) {
|
|
16
42
|
const isVertical = orientation === "vertical";
|
|
17
43
|
const { first: firstThumbAriaLabel, second: secondThumbAriaLabel } = resolveThumbAriaLabels(thumbAriaLabel, isRange);
|
|
18
44
|
return /* @__PURE__ */ jsx(Slider.Control, {
|
|
19
45
|
className: slider_module_default.SliderControl,
|
|
20
46
|
"data-orientation": orientation,
|
|
47
|
+
onPointerDown: blockTextSelectionWhilePressed,
|
|
21
48
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
22
49
|
direction: isVertical ? "column" : "row",
|
|
23
50
|
hAlign: isVertical ? "center" : "initial",
|
|
@@ -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 --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-x-small);--vui-slider-thumb-size:var(--space-medium);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--base-
|
|
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 --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-x-small);--vui-slider-thumb-size:var(--space-medium);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--base-1);inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&: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-disabled-foreground);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:visible;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--vui-slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:calc(var(--vui-slider-thumb-size) - 2px);background:var(--vui-slider-thumb-background);border:2px solid var(--vui-slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--duration-instant) var(--easing-standard);&: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;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
|
|
@@ -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,
|
|
@@ -41,13 +40,12 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
|
|
|
41
40
|
thumbAlignment,
|
|
42
41
|
render: /* @__PURE__ */ jsx(Stack, {
|
|
43
42
|
direction: "column",
|
|
44
|
-
rowGap: "
|
|
43
|
+
rowGap: "small",
|
|
45
44
|
columnGap: "x-small",
|
|
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,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__IndicatorLayer_Ek8o3{position:absolute;inset:0;overflow:clip;pointer-events:none}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-tabs-translate-amount{syntax:"<length>";inherits:true;initial-value:10px}.viraui__tabs-module__Tabs_AwbZZ{min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}}@layer viraui.overrides{.viraui__tabs-module__List_XJorr{position:relative;max-inline-size:100%;min-inline-size:0;overflow-x:auto;overflow-y:clip}.viraui__tabs-module__IndicatorLayer_Ek8o3{position:absolute;inset:0;overflow:clip;pointer-events:none}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--__text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--__text-medium),var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
|
|
@@ -104,10 +104,11 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
104
104
|
vPadding?: TextAxisPadding;
|
|
105
105
|
/**
|
|
106
106
|
* Trims text box whitespace at the chosen edge when the browser supports `text-box`.
|
|
107
|
+
* Pass `false` to disable text-box trim.
|
|
107
108
|
*
|
|
108
109
|
* @default 'both'
|
|
109
110
|
*/
|
|
110
|
-
trim?: 'start' | 'end' | 'both';
|
|
111
|
+
trim?: 'start' | 'end' | 'both' | false;
|
|
111
112
|
/**
|
|
112
113
|
* Selects the `text-box` trim basis when `trim` is active.
|
|
113
114
|
*
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"description": "Sets the semantic text color role when no literal `color` override is used."
|
|
65
65
|
},
|
|
66
66
|
"trim": {
|
|
67
|
-
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`.",
|
|
67
|
+
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
|
|
68
68
|
"refCss": "trim"
|
|
69
69
|
},
|
|
70
70
|
"trimType": {
|
|
@@ -11,8 +11,8 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
|
|
|
11
11
|
"--vui-text-max-width": maxWidth ?? "none",
|
|
12
12
|
"--vui-text-literal-color": color,
|
|
13
13
|
"--vui-text-white-space": whiteSpace,
|
|
14
|
-
"--vui-text-trim": trim ? `trim-${trim}` : "
|
|
15
|
-
"--vui-text-trim-type": trim ? trimType : "
|
|
14
|
+
"--vui-text-trim": trim ? `trim-${trim}` : "none",
|
|
15
|
+
"--vui-text-trim-type": trim ? trimType : "auto",
|
|
16
16
|
...typeof weight === "number" && { "--vui-text-font-weight": weight },
|
|
17
17
|
"--vui-text-font-width": fontWidth,
|
|
18
18
|
"--vui-text-font-opsz": opticalSize,
|
|
@@ -97,10 +97,11 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
97
97
|
vPadding?: TitleAxisPadding;
|
|
98
98
|
/**
|
|
99
99
|
* Trims text box whitespace at the chosen edge when the browser supports `text-box`.
|
|
100
|
+
* Pass `false` to disable text-box trim.
|
|
100
101
|
*
|
|
101
102
|
* @default 'both'
|
|
102
103
|
*/
|
|
103
|
-
trim?: 'start' | 'end' | 'both';
|
|
104
|
+
trim?: 'start' | 'end' | 'both' | false;
|
|
104
105
|
/**
|
|
105
106
|
* Selects the `text-box` trim basis when `trim` is active.
|
|
106
107
|
*
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"description": "Selects a heading or display typography preset from the active theme scale. This controls only the visual preset. Semantic heading choice remains owned by `render`, because `Title` keeps a `span` root unless `render` replaces it."
|
|
62
62
|
},
|
|
63
63
|
"trim": {
|
|
64
|
-
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`.",
|
|
64
|
+
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
|
|
65
65
|
"refCss": "trim"
|
|
66
66
|
},
|
|
67
67
|
"trimType": {
|
|
@@ -11,8 +11,8 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
|
|
|
11
11
|
"--vui-title-max-width": maxWidth ?? "none",
|
|
12
12
|
"--vui-title-literal-color": color,
|
|
13
13
|
"--vui-title-white-space": whiteSpace,
|
|
14
|
-
"--vui-title-trim": trim ? `trim-${trim}` : "
|
|
15
|
-
"--vui-title-trim-type": trim ? trimType : "
|
|
14
|
+
"--vui-title-trim": trim ? `trim-${trim}` : "none",
|
|
15
|
+
"--vui-title-trim-type": trim ? trimType : "auto",
|
|
16
16
|
...typeof weight === "number" && { "--vui-title-font-weight": weight },
|
|
17
17
|
"--vui-title-font-width": fontWidth,
|
|
18
18
|
"--vui-title-font-opsz": opticalSize,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.0.
|
|
3
|
+
"version": "2026.0.28",
|
|
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.1.4",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.0.
|
|
38
|
+
"@viraui/foundation": "2026.0.28",
|
|
39
39
|
"@viraui/icons": "2026.0.0",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|