@viraui/react 2026.0.30 → 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.
|
@@ -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);
|
|
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}}}
|
|
@@ -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>;
|
|
@@ -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
|
},
|
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.0.
|
|
3
|
+
"version": "2026.0.31",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.1.4",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.0.
|
|
38
|
+
"@viraui/foundation": "2026.0.31",
|
|
39
|
+
"@viraui/icons": "2026.0.1",
|
|
39
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
40
|
-
"@viraui/tsconfig": "2026.0.0"
|
|
41
|
-
"@viraui/icons": "2026.0.1"
|
|
41
|
+
"@viraui/tsconfig": "2026.0.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@base-ui/react": ">=1.6.0",
|