@viraui/react 2026.0.29 → 2026.0.31

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.
Files changed (9) hide show
  1. package/dist/components/chip/chip.js +4 -1
  2. package/dist/components/icon-button/icon-button.guide.json +2 -1
  3. package/dist/components/slider/slider.css +1 -1
  4. package/dist/components/textfield/textfield.css +1 -1
  5. package/dist/components/textfield/textfield.d.ts +6 -0
  6. package/dist/components/textfield/textfield.guide.json +3 -0
  7. package/dist/components/textfield/textfield.js +2 -1
  8. package/dist/components/toggle-button/toggle-button.guide.json +2 -1
  9. package/package.json +2 -2
package/dist/components/chip/chip.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import './chip.css';
2
2
  import { clsx } from "../../core/clsx.js";
3
+ import { Text } from "../text/text.js";
3
4
  import { Stack } from "../stack/stack.js";
4
5
  import chip_module_default from "./chip.module.js";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,8 +19,10 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
18
19
  className: chip_module_default.IconSlot,
19
20
  "data-shrink": "false",
20
21
  children: addon
21
- }), /* @__PURE__ */ jsx("span", {
22
+ }), /* @__PURE__ */ jsx(Text, {
22
23
  className: chip_module_default.Label,
24
+ trim: false,
25
+ lineHeight: "x-small",
23
26
  children
24
27
  })]
25
28
  });
package/dist/components/icon-button/icon-button.guide.json CHANGED
@@ -10,7 +10,8 @@
10
10
  "whenNotToUse": [
11
11
  "Actions that need visible text — use Button",
12
12
  "Missing both aria-label and aria-labelledby",
13
- "Navigation or non-button semantics — use IconButtonLink"
13
+ "Navigation or non-button semantics — use IconButtonLink",
14
+ "Temporally swap icons after user interactions with temporal pressed state, like copy feedback. Use ToggleButton instead"
14
15
  ],
15
16
  "accessibility": [
16
17
  "Provide aria-label or aria-labelledby on every IconButton — icon alone is not a name",
package/dist/components/slider/slider.css CHANGED
@@ -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);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}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-large);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--global-background);--__slider-thumb-spacer:12px;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-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:calc(100% - max(8px, var(--radius-small)));appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
package/dist/components/textfield/textfield.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;max-block-size:min-content;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}
package/dist/components/textfield/textfield.d.ts CHANGED
@@ -51,5 +51,11 @@ export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & {
51
51
  * @default undefined (browser fixed)
52
52
  */
53
53
  fitContent?: BasicInputProps['fitContent'];
54
+ /**
55
+ * When `true`, root and control group take `inline-size: 100%`.
56
+ *
57
+ * @default false
58
+ */
59
+ fullWidth?: boolean;
54
60
  };
55
61
  export declare const Textfield: React.FC<TextfieldProps>;
package/dist/components/textfield/textfield.guide.json CHANGED
@@ -39,6 +39,9 @@
39
39
  "fitContent": {
40
40
  "description": "When `true`, sets `field-sizing: content` so the control grows inline with its value. Block chrome stays `var(--vui-textfield-input-height)`. Omitted / `false` keeps the browser fixed default."
41
41
  },
42
+ "fullWidth": {
43
+ "description": "When `true`, root and control group take `inline-size: 100%`."
44
+ },
42
45
  "label": {
43
46
  "description": "Visible label rendered with shared internal `FieldLabel`."
44
47
  },
package/dist/components/textfield/textfield.js CHANGED
@@ -10,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
10
10
  import { Field } from "@base-ui/react/field";
11
11
  import { Input } from "@base-ui/react/input";
12
12
  //#region src/components/textfield/textfield.tsx
13
- var Textfield = ({ className, description, dirty, disabled, endAddon, error, fitContent, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => /* @__PURE__ */ jsxs(Field.Root, {
13
+ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fitContent, fullWidth = false, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => /* @__PURE__ */ jsxs(Field.Root, {
14
14
  className: textfield_module_default.Textfield,
15
15
  dirty,
16
16
  disabled,
@@ -20,6 +20,7 @@ var Textfield = ({ className, description, dirty, disabled, endAddon, error, fit
20
20
  validate,
21
21
  validationDebounceTime,
22
22
  validationMode,
23
+ "data-fullwidth": fullWidth,
23
24
  render: /* @__PURE__ */ jsx(Stack, {
24
25
  fillChildren: true,
25
26
  direction: "column",
package/dist/components/toggle-button/toggle-button.guide.json CHANGED
@@ -6,7 +6,8 @@
6
6
  "whenToUse": [
7
7
  "Toolbar pin, favorite, or mute toggles identified only by icon",
8
8
  "Compact on/off controls that share IconButton size, variant, and loading model",
9
- "Two-state actions where pressed state should swap the visible glyph"
9
+ "Two-state actions where pressed state should swap the visible glyph",
10
+ "Temporally swap icons after user interactions with temporal pressed state, like copy feedback."
10
11
  ],
11
12
  "whenNotToUse": [
12
13
  "Settings-style on/off fields — use Switch",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "2026.0.29",
3
+ "version": "2026.0.31",
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.29",
38
+ "@viraui/foundation": "2026.0.31",
39
39
  "@viraui/icons": "2026.0.1",
40
40
  "@viraui/postcss-config": "2026.0.0",
41
41
  "@viraui/tsconfig": "2026.0.0"