@viraui/react 2026.2.10 → 2026.2.12
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/button/button.css +1 -1
- package/dist/components/select/select.css +1 -1
- package/dist/components/select/select.js +24 -25
- package/dist/components/separator/separator.css +1 -1
- package/dist/components/separator/separator.d.ts +10 -3
- package/dist/components/separator/separator.guide.json +7 -0
- package/dist/components/separator/separator.js +3 -2
- package/dist/components/text/text.css +2 -2
- package/dist/components/text/text.d.ts +12 -0
- package/dist/components/text/text.guide.json +16 -0
- package/dist/components/text/text.js +3 -1
- package/dist/components/title/title.css +4 -4
- package/dist/components/title/title.d.ts +14 -0
- package/dist/components/title/title.guide.json +14 -1
- package/dist/components/title/title.js +5 -1
- package/dist/consumption.json +2 -1
- package/package.json +6 -6
|
@@ -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: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(--
|
|
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(--global-foreground);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(--global-foreground);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)}}
|
|
@@ -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}}}
|
|
@@ -50,38 +50,37 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
|
|
|
50
50
|
disabled,
|
|
51
51
|
modal,
|
|
52
52
|
name,
|
|
53
|
-
children: [/* @__PURE__ */
|
|
53
|
+
children: [/* @__PURE__ */ jsx(Select.Trigger, {
|
|
54
54
|
"aria-label": ariaLabel,
|
|
55
55
|
"aria-labelledby": ariaLabelledBy,
|
|
56
|
-
className: select_module_default.Trigger,
|
|
57
56
|
disabled,
|
|
58
57
|
ref,
|
|
59
|
-
|
|
58
|
+
children: /* @__PURE__ */ jsxs(Stack, {
|
|
60
59
|
fillChildren: true,
|
|
60
|
+
className: select_module_default.Trigger,
|
|
61
61
|
direction: "row",
|
|
62
|
-
render: /* @__PURE__ */ jsx("button", { type: "button" }),
|
|
63
62
|
columnGap: "x-small",
|
|
64
|
-
vAlign: "center"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
})
|
|
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
|
+
})
|
|
85
84
|
}), /* @__PURE__ */ jsx(Select.Portal, {
|
|
86
85
|
container,
|
|
87
86
|
children: /* @__PURE__ */ jsx(Select.Positioner, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}.viraui__separator-module__Line_xXOe9{border:0;margin:0
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}@property --vui-separator-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}.viraui__separator-module__Line_xXOe9{border:0;margin:0;&[data-separator-orientation=horizontal]{inline-size:100%;block-size:1px;border-block-end:var(--vui-separator-size) var(--vui-separator-border-style) var(--global-contrast)}&[data-separator-orientation=vertical]{inline-size:1px;border-inline-end:var(--vui-separator-size) var(--vui-separator-border-style) var(--global-contrast);block-size:100%}}}
|
|
@@ -6,12 +6,13 @@ type SeparatorSize = 'small' | 'medium' | 'large';
|
|
|
6
6
|
/**
|
|
7
7
|
* Public Separator props.
|
|
8
8
|
*
|
|
9
|
-
* Includes standard `
|
|
9
|
+
* Includes standard wrapper (`div` / Stack) attributes such as `id`, `data-grow`, and event handlers on the outer Stack,
|
|
10
10
|
* plus Vira-owned orientation, line thickness, Stack padding, and Base UI `render` support for replacing the line root.
|
|
11
|
+
* `className`, `style`, and `ref` apply to the line root only.
|
|
11
12
|
*
|
|
12
|
-
* @default Native
|
|
13
|
+
* @default Native pass-through props keep React defaults on the wrapper unless noted above.
|
|
13
14
|
*/
|
|
14
|
-
export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'
|
|
15
|
+
export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
|
|
15
16
|
/**
|
|
16
17
|
* Replaces the default `hr` line root using Base UI render semantics.
|
|
17
18
|
*
|
|
@@ -48,6 +49,12 @@ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'>
|
|
|
48
49
|
* @default 'small'
|
|
49
50
|
*/
|
|
50
51
|
size?: SeparatorSize;
|
|
52
|
+
/**
|
|
53
|
+
* Sets the separator line border style through `--vui-separator-border-style`.
|
|
54
|
+
*
|
|
55
|
+
* @default 'solid'
|
|
56
|
+
*/
|
|
57
|
+
borderStyle?: React.CSSProperties['borderStyle'];
|
|
51
58
|
};
|
|
52
59
|
export declare const Separator: React.FC<SeparatorProps>;
|
|
53
60
|
export {};
|
|
@@ -23,6 +23,10 @@
|
|
|
23
23
|
"related": ["Stack", "Surface", "Select"],
|
|
24
24
|
"properties": {
|
|
25
25
|
"react": {
|
|
26
|
+
"borderStyle": {
|
|
27
|
+
"description": "Sets the separator line border style through `--vui-separator-border-style`.",
|
|
28
|
+
"refCss": "border-style"
|
|
29
|
+
},
|
|
26
30
|
"hPadding": {
|
|
27
31
|
"description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
|
|
28
32
|
},
|
|
@@ -43,6 +47,9 @@
|
|
|
43
47
|
}
|
|
44
48
|
},
|
|
45
49
|
"css": {
|
|
50
|
+
"border-style": {
|
|
51
|
+
"description": "Separator line border style."
|
|
52
|
+
},
|
|
46
53
|
"size": {
|
|
47
54
|
"description": "Separator line thickness."
|
|
48
55
|
}
|
|
@@ -10,9 +10,10 @@ var separatorSizeValues = {
|
|
|
10
10
|
medium: 2,
|
|
11
11
|
large: 3
|
|
12
12
|
};
|
|
13
|
-
var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
|
|
13
|
+
var Separator = ({ borderStyle = "solid", className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
|
|
14
14
|
const dynamicStyle = {
|
|
15
15
|
"--vui-separator-size": `${separatorSizeValues[size]}px`,
|
|
16
|
+
"--vui-separator-border-style": borderStyle,
|
|
16
17
|
...style
|
|
17
18
|
};
|
|
18
19
|
const line = useRender({
|
|
@@ -20,13 +21,13 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
|
|
|
20
21
|
render,
|
|
21
22
|
ref,
|
|
22
23
|
props: {
|
|
23
|
-
...otherProps,
|
|
24
24
|
"data-separator-orientation": orientation,
|
|
25
25
|
className: clsx(separator_module_default.Line, className),
|
|
26
26
|
style: dynamicStyle
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
return /* @__PURE__ */ jsx(Stack, {
|
|
30
|
+
...otherProps,
|
|
30
31
|
direction: orientation === "vertical" ? "row" : "column",
|
|
31
32
|
hPadding,
|
|
32
33
|
vAlign: orientation === "vertical" ? "stretch" : "initial",
|
|
@@ -1,8 +1,8 @@
|
|
|
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(
|
|
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-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@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(
|
|
2
2
|
var(--font-scale-body-medium),
|
|
3
3
|
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
|
|
4
4
|
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
|
|
5
|
-
);--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(
|
|
5
|
+
);--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);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);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(
|
|
6
6
|
var(--font-scale-body-large),
|
|
7
7
|
calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),
|
|
8
8
|
var(--font-scale-body-x-large)
|
|
@@ -78,6 +78,18 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
78
78
|
* @default 'normal'
|
|
79
79
|
*/
|
|
80
80
|
whiteSpace?: React.CSSProperties['whiteSpace'];
|
|
81
|
+
/**
|
|
82
|
+
* Sets letter spacing on the rendered copy.
|
|
83
|
+
*
|
|
84
|
+
* @default No letter-spacing override.
|
|
85
|
+
*/
|
|
86
|
+
tracking?: React.CSSProperties['letterSpacing'];
|
|
87
|
+
/**
|
|
88
|
+
* Applies a text-transform on the rendered copy.
|
|
89
|
+
*
|
|
90
|
+
* @default No text-transform override.
|
|
91
|
+
*/
|
|
92
|
+
transform?: React.CSSProperties['textTransform'];
|
|
81
93
|
/**
|
|
82
94
|
* Enables balanced wrapping for block-like copy.
|
|
83
95
|
*
|
|
@@ -63,6 +63,14 @@
|
|
|
63
63
|
"tone": {
|
|
64
64
|
"description": "Sets the semantic text color role when no literal `color` override is used."
|
|
65
65
|
},
|
|
66
|
+
"tracking": {
|
|
67
|
+
"description": "Sets letter spacing on the rendered copy.",
|
|
68
|
+
"refCss": "letter-spacing"
|
|
69
|
+
},
|
|
70
|
+
"transform": {
|
|
71
|
+
"description": "Applies a text-transform on the rendered copy.",
|
|
72
|
+
"refCss": "text-transform"
|
|
73
|
+
},
|
|
66
74
|
"trim": {
|
|
67
75
|
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
|
|
68
76
|
"refCss": "trim"
|
|
@@ -103,6 +111,10 @@
|
|
|
103
111
|
"line-height": {
|
|
104
112
|
"description": "Line height; lineHeight prop presets via data attributes."
|
|
105
113
|
},
|
|
114
|
+
"letter-spacing": {
|
|
115
|
+
"description": "Letter spacing on the root.",
|
|
116
|
+
"refReact": "tracking"
|
|
117
|
+
},
|
|
106
118
|
"literal-color": {
|
|
107
119
|
"description": "Literal color override on the root."
|
|
108
120
|
},
|
|
@@ -128,6 +140,10 @@
|
|
|
128
140
|
"trim-type": {
|
|
129
141
|
"description": "Text-box trim basis on the root."
|
|
130
142
|
},
|
|
143
|
+
"text-transform": {
|
|
144
|
+
"description": "Text transform on the root.",
|
|
145
|
+
"refReact": "transform"
|
|
146
|
+
},
|
|
131
147
|
"white-space": {
|
|
132
148
|
"description": "White-space behavior on the root."
|
|
133
149
|
}
|
|
@@ -4,13 +4,15 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
|
|
|
4
4
|
import text_module_default from "./text.module.js";
|
|
5
5
|
import { useRender } from "@base-ui/react/use-render";
|
|
6
6
|
//#region src/components/text/text.tsx
|
|
7
|
-
var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
|
|
7
|
+
var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
|
|
8
8
|
const hasPadding = Boolean(hPadding || vPadding);
|
|
9
9
|
const dynamicStyle = {
|
|
10
10
|
"--vui-text-align": align,
|
|
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-letter-spacing": tracking,
|
|
15
|
+
"--vui-text-text-transform": transform,
|
|
14
16
|
"--vui-text-trim": trim ? `trim-${trim}` : "none",
|
|
15
17
|
"--vui-text-trim-type": trim ? trimType : "auto",
|
|
16
18
|
...typeof weight === "number" && { "--vui-text-font-weight": weight },
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
|
|
2
2
|
var(--font-scale-body-medium),
|
|
3
3
|
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
|
|
4
4
|
calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)),
|
|
7
7
|
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),
|
|
8
8
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6))
|
|
9
|
-
);--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--
|
|
9
|
+
);--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(
|
|
10
10
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)),
|
|
11
11
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6) + 4.643cqi - 0.9286rem),
|
|
12
12
|
var(--font-scale-display)
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)),
|
|
27
27
|
calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),
|
|
28
28
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2))
|
|
29
|
-
);--
|
|
29
|
+
);--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(
|
|
30
30
|
var(--font-scale-body-medium),
|
|
31
31
|
var(--__title-medium),
|
|
32
32
|
calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1))
|
|
33
|
-
);--
|
|
33
|
+
);--__title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
|
|
@@ -71,6 +71,20 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
|
|
|
71
71
|
* @default 'normal'
|
|
72
72
|
*/
|
|
73
73
|
whiteSpace?: React.CSSProperties['whiteSpace'];
|
|
74
|
+
/**
|
|
75
|
+
* Sets letter spacing on the rendered copy.
|
|
76
|
+
*
|
|
77
|
+
* Overrides size preset letter-spacing when set.
|
|
78
|
+
*
|
|
79
|
+
* @default No letter-spacing override.
|
|
80
|
+
*/
|
|
81
|
+
tracking?: React.CSSProperties['letterSpacing'];
|
|
82
|
+
/**
|
|
83
|
+
* Applies a text-transform on the rendered copy.
|
|
84
|
+
*
|
|
85
|
+
* @default No text-transform override.
|
|
86
|
+
*/
|
|
87
|
+
transform?: React.CSSProperties['textTransform'];
|
|
74
88
|
/**
|
|
75
89
|
* Enables balanced wrapping for block-like titles.
|
|
76
90
|
*
|
|
@@ -60,6 +60,14 @@
|
|
|
60
60
|
"size": {
|
|
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
|
+
"tracking": {
|
|
64
|
+
"description": "Sets letter spacing on the rendered copy. Overrides size preset letter-spacing when set.",
|
|
65
|
+
"refCss": "letter-spacing"
|
|
66
|
+
},
|
|
67
|
+
"transform": {
|
|
68
|
+
"description": "Applies a text-transform on the rendered copy.",
|
|
69
|
+
"refCss": "text-transform"
|
|
70
|
+
},
|
|
63
71
|
"trim": {
|
|
64
72
|
"description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
|
|
65
73
|
"refCss": "trim"
|
|
@@ -98,7 +106,8 @@
|
|
|
98
106
|
"description": "Font width percentage on the root (font-stretch + wdth)."
|
|
99
107
|
},
|
|
100
108
|
"letter-spacing": {
|
|
101
|
-
"description": "
|
|
109
|
+
"description": "Public letter spacing from the `tracking` prop when set.",
|
|
110
|
+
"refReact": "tracking"
|
|
102
111
|
},
|
|
103
112
|
"line-height": {
|
|
104
113
|
"description": "Line height; lineHeight prop presets via data attributes."
|
|
@@ -128,6 +137,10 @@
|
|
|
128
137
|
"trim-type": {
|
|
129
138
|
"description": "Text-box trim basis on the root."
|
|
130
139
|
},
|
|
140
|
+
"text-transform": {
|
|
141
|
+
"description": "Text transform on the root.",
|
|
142
|
+
"refReact": "transform"
|
|
143
|
+
},
|
|
131
144
|
"white-space": {
|
|
132
145
|
"description": "White-space behavior on the root."
|
|
133
146
|
}
|
|
@@ -4,13 +4,16 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
|
|
|
4
4
|
import title_module_default from "./title.module.js";
|
|
5
5
|
import { useRender } from "@base-ui/react/use-render";
|
|
6
6
|
//#region src/components/title/title.tsx
|
|
7
|
-
var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
|
|
7
|
+
var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
|
|
8
8
|
const hasPadding = Boolean(hPadding || vPadding);
|
|
9
|
+
const hasTracking = tracking !== void 0;
|
|
9
10
|
const dynamicStyle = {
|
|
10
11
|
"--vui-title-align": align,
|
|
11
12
|
"--vui-title-max-width": maxWidth ?? "none",
|
|
12
13
|
"--vui-title-literal-color": color,
|
|
13
14
|
"--vui-title-white-space": whiteSpace,
|
|
15
|
+
...hasTracking && { "--vui-title-letter-spacing": tracking },
|
|
16
|
+
"--vui-title-text-transform": transform,
|
|
14
17
|
"--vui-title-trim": trim ? `trim-${trim}` : "none",
|
|
15
18
|
"--vui-title-trim-type": trim ? trimType : "auto",
|
|
16
19
|
...typeof weight === "number" && { "--vui-title-font-weight": weight },
|
|
@@ -32,6 +35,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
|
|
|
32
35
|
"data-title-selection": selection ? "true" : "false",
|
|
33
36
|
"data-title-has-padding": hasPadding ? "true" : "false",
|
|
34
37
|
"data-title-has-literal-color": color ? "true" : "false",
|
|
38
|
+
"data-title-has-tracking": hasTracking ? "true" : "false",
|
|
35
39
|
className: clsx(title_module_default.Title, className),
|
|
36
40
|
style: dynamicStyle
|
|
37
41
|
}
|
package/dist/consumption.json
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
"@base-ui/react": "Peer dependency for wrapped primitives."
|
|
8
8
|
},
|
|
9
9
|
"optionalPackages": {
|
|
10
|
-
"@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only."
|
|
10
|
+
"@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only.",
|
|
11
|
+
"@viraui/icons": "Optional Vira content glyphs (@viraui/icons/react). Icon slots accept any ReactNode (lucide-react, other libraries, custom SVG). Chrome defaults are inlined in @viraui/react."
|
|
11
12
|
},
|
|
12
13
|
"importOrder": [
|
|
13
14
|
"Compatible theme CSS (preset @viraui/foundation/vira.css, custom theme CSS, or future theme-builder export)",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.2.
|
|
3
|
+
"version": "2026.2.12",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@base-ui/react": ">=1.7.0",
|
|
31
|
+
"@viraui/foundation": "2026.2.12",
|
|
32
|
+
"@viraui/icons": "2026.0.2",
|
|
33
|
+
"@viraui/postcss-config": "2026.0.0",
|
|
34
|
+
"@viraui/tsconfig": "2026.0.0",
|
|
31
35
|
"postcss": "8.5.26",
|
|
32
36
|
"postcss-cli": "11.0.1",
|
|
33
37
|
"react": ">=19.2.8",
|
|
34
38
|
"react-dom": ">=19.2.8",
|
|
35
39
|
"unplugin-dts": "1.0.3",
|
|
36
40
|
"vite": "8.2.2",
|
|
37
|
-
"vite-plugin-static-copy": "4.1.1"
|
|
38
|
-
"@viraui/foundation": "2026.2.10",
|
|
39
|
-
"@viraui/icons": "2026.0.2",
|
|
40
|
-
"@viraui/postcss-config": "2026.0.0",
|
|
41
|
-
"@viraui/tsconfig": "2026.0.0"
|
|
41
|
+
"vite-plugin-static-copy": "4.1.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@base-ui/react": ">=1.6.0",
|