@viraui/react 0.0.16 → 0.0.17

package/dist/components/text/text.css

@@ -1,145 +1 @@
-@scope (.Text) {
-  :scope {
-    /*
-     * Fluid body scale (web.dev baseline pattern).
-     * Foundation refs: --font-scale-body-medium (fluid base), --font-heading-typescale, --font-scale-body-* bounds.
-     */
-    --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)
-    );
-
-    --text-align: start;
-    --text-max-width: none;
-    --text-white-space: normal;
-    --text-padding-inline-start: 0;
-    --text-padding-inline-end: 0;
-    --text-padding-block-start: 0;
-    --text-padding-block-end: 0;
-    --text-font-family: var(--font-family-body);
-    --text-font-size: clamp(var(--font-scale-body-small), var(--text-medium), var(--font-scale-body-medium));
-    --text-font-weight: 400;
-    --text-font-width: 100;
-    --text-font-opsz: 16;
-    --text-line-height: var(--font-leading-standard);
-
-    margin: 0;
-    min-inline-size: 0;
-    max-inline-size: var(--text-max-width);
-    font-family: var(--text-font-family);
-    font-size: var(--text-font-size);
-    line-height: var(--text-line-height);
-    text-align: var(--text-align);
-    white-space: var(--text-white-space);
-    word-break: break-word;
-    font-optical-sizing: auto;
-    font-variation-settings:
-      'wght' var(--text-font-weight),
-      'wdth' var(--text-font-width),
-      'opsz' var(--text-font-opsz);
-    text-box: var(--text-trim) var(--text-trim-type);
-    display: inline-flex;
-
-    &[data-text-balanced='true'] {
-      text-wrap: balance;
-    }
-
-    &[data-text-has-padding='true'] {
-      padding: var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end)
-        var(--text-padding-inline-start);
-    }
-
-    &[data-text-family='mono'] {
-      --text-font-family: var(--font-family-mono);
-    }
-
-    &[data-text-size='x-large'] {
-      --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'] {
-      --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='medium'] {
-      --text-font-size: clamp(var(--font-scale-body-small), var(--text-medium), var(--font-scale-body-medium));
-    }
-
-    &[data-text-size='small'] {
-      --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'] {
-      --text-font-size: var(--font-scale-body-x-small);
-    }
-
-    &[data-text-weight='light'] {
-      --text-font-weight: 200;
-    }
-
-    &[data-text-weight='semibold'] {
-      --text-font-weight: 600;
-    }
-
-    &[data-text-weight='bold'] {
-      --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(--text-literal-color);
-    }
-
-    &[data-text-line-height='none'] {
-      --text-line-height: 0;
-    }
-
-    &[data-text-line-height='x-small'] {
-      --text-line-height: var(--font-leading-x-small);
-    }
-
-    &[data-text-line-height='small'] {
-      --text-line-height: var(--font-leading-small);
-    }
-
-    &[data-text-line-height='large'] {
-      --text-line-height: var(--font-leading-large);
-    }
-  }
-}
+.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));--text-align:start;--text-max-width:none;--text-white-space:normal;--text-padding-inline-start:0;--text-padding-inline-end:0;--text-padding-block-start:0;--text-padding-block-end:0;--text-font-family:var(--font-family-body);--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--text-font-weight:400;--text-font-width:100;--text-font-opsz:16;--text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--text-max-width);font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);text-align:var(--text-align);white-space:var(--text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--text-font-weight),"wdth" var(--text-font-width),"opsz" var(--text-font-opsz);text-box:var(--text-trim) var(--text-trim-type);display:inline-flex;&[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(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end) var(--text-padding-inline-start)}&[data-text-family=mono]{--text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--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]{--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=medium]{--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--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]{--text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--text-font-weight:200}&[data-text-weight=semibold]{--text-font-weight:600}&[data-text-weight=bold]{--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(--text-literal-color)}&[data-text-line-height=none]{--text-line-height:0}&[data-text-line-height=x-small]{--text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--text-line-height:var(--font-leading-large)}}

package/dist/components/text/text.d.ts

@@ -1,8 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
-import './text.css';
 type TextSpace = ThemeTypes['space'];
 type TextAxisPadding = TextSpace | [TextSpace | 0, TextSpace | 0];
 /**
@@ -86,6 +85,12 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraPr
      * @default false
      */
     balanced?: boolean;
+    /**
+     * Enables text selection on the rendered copy.
+     *
+     * @default true
+     */
+    selection?: boolean;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *

package/dist/components/text/text.js

@@ -1,43 +1,48 @@
-'use client';
-import { useRender } from '@base-ui/react/use-render';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { resolveAxisPadding } from '../../core/styles/resolve-axis-padding.js';
-import { clsx } from 'clsx';
 import './text.css';
-export const Text = ({ align = 'start', balanced = false, className, color, family = 'body', fontWidth, hPadding, lineHeight = 'standard', maxWidth, opticalSize, ref, render, size = 'medium', style, tone, trim, trimType = 'cap alphabetic', vPadding, weight = 'regular', whiteSpace = 'normal', ...otherProps }) => {
-    const hasPadding = Boolean(hPadding || vPadding);
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = {
-        '--text-align': align,
-        '--text-max-width': maxWidth ?? 'none',
-        '--text-literal-color': color,
-        '--text-white-space': whiteSpace,
-        '--text-trim': trim ? `trim-${trim}` : 'initial',
-        '--text-trim-type': trim ? trimType : 'initial',
-        ...(typeof weight === 'number' ? { '--text-font-weight': weight } : {}),
-        ...(fontWidth !== undefined ? { '--text-font-width': fontWidth } : {}),
-        ...(opticalSize !== undefined ? { '--text-font-opsz': opticalSize } : {}),
-        ...resolveAxisPadding(hPadding, '--text-padding-inline-start', '--text-padding-inline-end'),
-        ...resolveAxisPadding(vPadding, '--text-padding-block-start', '--text-padding-block-end'),
-        ...style,
-    };
-    return useRender({
-        defaultTagName: 'span',
-        render,
-        ref,
-        props: {
-            ...componentProps,
-            ...intrinsicAttributes,
-            'data-text-size': size,
-            'data-text-family': family,
-            'data-text-weight': typeof weight === 'string' ? weight : 'custom',
-            'data-text-tone': tone,
-            'data-text-line-height': lineHeight,
-            'data-text-balanced': balanced ? 'true' : 'false',
-            'data-text-has-padding': hasPadding ? 'true' : 'false',
-            'data-text-has-literal-color': color ? 'true' : 'false',
-            className: clsx('Text', className),
-            style: dynamicStyle,
-        },
-    });
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+import text_module_default from "./text.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text/text.tsx
+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 }) => {
+	const hasPadding = Boolean(hPadding || vPadding);
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		"--text-align": align,
+		"--text-max-width": maxWidth ?? "none",
+		"--text-literal-color": color,
+		"--text-white-space": whiteSpace,
+		"--text-trim": trim ? `trim-${trim}` : "initial",
+		"--text-trim-type": trim ? trimType : "initial",
+		...typeof weight === "number" ? { "--text-font-weight": weight } : {},
+		...fontWidth !== void 0 ? { "--text-font-width": fontWidth } : {},
+		...opticalSize !== void 0 ? { "--text-font-opsz": opticalSize } : {},
+		...resolveAxisPadding(hPadding, "--text-padding-inline-start", "--text-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--text-padding-block-start", "--text-padding-block-end"),
+		...style
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-text-size": size,
+			"data-text-family": family,
+			"data-text-weight": typeof weight === "string" ? weight : "custom",
+			"data-text-tone": tone,
+			"data-text-line-height": lineHeight,
+			"data-text-balanced": balanced ? "true" : "false",
+			"data-text-selection": selection ? "true" : "false",
+			"data-text-has-padding": hasPadding ? "true" : "false",
+			"data-text-has-literal-color": color ? "true" : "false",
+			className: clsx(text_module_default.Text, className),
+			style: dynamicStyle
+		}
+	});
 };
+//#endregion
+export { Text };

package/dist/components/text/text.module.js

@@ -0,0 +1,3 @@
+var text_module_default = { Text: "text-module_Text_bS8kv" };
+//#endregion
+export { text_module_default as default };

package/dist/components/textarea/index.d.ts

@@ -1,2 +1,2 @@
-export { Textarea } from './textarea.js';
-export type { TextareaProps } from './textarea.js';
+export { Textarea } from './textarea';
+export type { TextareaProps } from './textarea';

package/dist/components/textarea/textarea.css

@@ -1,45 +1 @@
-@scope (.Textarea) {
-  :scope {
-    --textarea-min-block-size: calc(var(--space-x-large) * 2);
-    --textarea-padding-block: var(--space-small);
-    --textarea-input-border-radius: var(--radius-small);
-    inline-size: 100%;
-
-    > .BasicInput {
-      --basic-input-border-radius: var(--textarea-input-border-radius);
-      border: 1px solid var(--global-contrast);
-      min-block-size: var(--textarea-min-block-size);
-      padding-block: var(--textarea-padding-block);
-      line-height: 1.4;
-      resize: none;
-
-      &[data-resize='vertical'] {
-        resize: vertical;
-      }
-
-      &[data-resize='both'] {
-        resize: both;
-      }
-
-      &[data-invalid] {
-        border-color: var(--highlight-red);
-      }
-
-      &:disabled,
-      &[data-disabled] {
-        border-color: transparent;
-      }
-    }
-
-    /* Required field: append red asterisk on Label */
-    &:has([required]) > .Label::after {
-      content: ' ＊';
-      color: var(--highlight-red);
-    }
-
-    > .Label,
-    > .Description {
-      padding-inline: calc(var(--textarea-input-border-radius) / 2);
-    }
-  }
-}
+.textarea-module_Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.textarea-module_CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:transparent}}.textarea-module_Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}

package/dist/components/textarea/textarea.d.ts

@@ -1,7 +1,6 @@
-import type { FieldRoot } from '@base-ui/react/field';
+import { FieldRoot } from '@base-ui/react/field';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './textarea.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Textarea props.
  *
@@ -26,7 +25,7 @@ export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & Omit<Fi
     shrink?: IntrinsicViraProps['shrink'];
     ref?: React.Ref<HTMLTextAreaElement>;
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */

package/dist/components/textarea/textarea.js

@@ -1,13 +1,53 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { BasicInput } from '../../components/basic-input/index.js';
-import { FieldHelperCopy } from '../../components/basic-input/field-helper-copy.js';
-import { Stack } from '../../components/stack/index.js';
-import { Text } from '../../components/text/index.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import './textarea.css';
-export const Textarea = ({ className, description, dirty, disabled, error, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => {
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(textareaProps);
-    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Textarea", dirty: dirty, disabled: disabled, invalid: invalid, name: name, touched: touched, validate: validate, validationDebounceTime: validationDebounceTime, validationMode: validationMode, render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "small" }), children: [label && (_jsx(Text, { size: "small", weight: "semibold", className: "Label", render: _jsx(Field.Label, {}), children: label })), _jsx(BasicInput, { ...componentProps, ref: ref, className: className, "data-resize": resize, disabled: disabled, render: _jsx("textarea", {}) }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { BasicInput } from "../basic-input/basic-input.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import textarea_module_default from "./textarea.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/textarea/textarea.tsx
+var Textarea = ({ className, description, dirty, disabled, error, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(textareaProps);
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...intrinsicAttributes,
+		className: textarea_module_default.Textarea,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				"data-field-label": "",
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(BasicInput, {
+				...componentProps,
+				ref,
+				className: clsx(textarea_module_default.CustomBasicInput, className),
+				"data-resize": resize,
+				disabled,
+				render: /* @__PURE__ */ jsx("textarea", {})
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: textarea_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
 };
+//#endregion
+export { Textarea };

package/dist/components/textarea/textarea.module.js

@@ -0,0 +1,7 @@
+var textarea_module_default = {
+	Textarea: "textarea-module_Textarea_mtOUG",
+	CustomBasicInput: "textarea-module_CustomBasicInput_Ce7yA",
+	Description: "textarea-module_Description_er3zI"
+};
+//#endregion
+export { textarea_module_default as default };

package/dist/components/textfield/index.d.ts

@@ -1,2 +1,2 @@
-export { Textfield } from './textfield.js';
-export type { TextfieldProps } from './textfield.js';
+export { Textfield } from './textfield';
+export type { TextfieldProps } from './textfield';

package/dist/components/textfield/textfield.css

@@ -1,87 +1 @@
-@scope (.Textfield) {
-  :scope {
-    --input-height: var(--space-x-large);
-    --control-group-background: var(--base-1);
-    --control-group-color: var(--global-foreground);
-    --control-group-border-color: var(--global-contrast);
-    --control-group-border-radius: var(--radius-small);
-    inline-size: 100%;
-
-    > .ControlGroup {
-      box-sizing: border-box;
-      inline-size: 100%;
-      min-inline-size: 0;
-      block-size: var(--input-height);
-      background: var(--control-group-background);
-      border: 1px solid var(--control-group-border-color);
-      border-radius: var(--control-group-border-radius);
-
-      &:has(.BasicInput[data-focused]),
-      &:has(.BasicInput:focus-visible) {
-        outline: 2px solid var(--global-foreground);
-        outline-offset: 2px;
-      }
-
-      /* Invalid: propagate BasicInput error border and outline to ControlGroup shell */
-      &:has(.BasicInput[data-invalid]) {
-        --control-group-border-color: var(--highlight-red);
-        box-shadow: none;
-        outline-color: oklab(from var(--highlight-red) l a b / 0.5);
-      }
-
-      /* Disabled: mirror disabled input background/border on ControlGroup */
-      &:has(.BasicInput:disabled),
-      &:has(.BasicInput[data-disabled]) {
-        --control-group-background: var(--global-disabled-background);
-        --control-group-border-color: transparent;
-
-        box-shadow: none;
-        cursor: not-allowed;
-      }
-
-      > .BasicInput {
-        flex: 1 1 auto;
-        min-inline-size: 0;
-        block-size: 100%;
-        line-height: 1.2;
-        border: none;
-        background: transparent;
-        box-shadow: none;
-        border-radius: inherit;
-
-        &:focus-visible {
-          outline: none;
-        }
-
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-
-      > .Addon {
-        min-inline-size: var(--space-x-large);
-      }
-
-      /* Addon start: tighten input padding so text does not sit under the addon */
-      &:has(.Addon[data-position='start']) > .BasicInput {
-        padding-inline-start: var(--space-x-small);
-      }
-
-      /* Addon end: tighten trailing padding on the input */
-      &:has(.Addon[data-position='end']) > .BasicInput {
-        padding-inline-end: var(--space-x-small);
-      }
-    }
-
-    /* Required field: append red asterisk on Label */
-    &:has([required]) > .Label::after {
-      content: ' ＊';
-      color: var(--highlight-red);
-    }
-
-    > .Label,
-    > .Description {
-      padding-inline: calc(var(--control-group-border-radius) / 2);
-    }
-  }
-}
+.textfield-module_Textfield_o-70A{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.textfield-module_ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);background:var(--control-group-background);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);&:has(.textfield-module_CustomBasicInput_oHgtd:focus-visible),&:has(.textfield-module_CustomBasicInput_oHgtd[data-focused]){outline:2px solid var(--global-foreground);outline-offset:2px}&:has(.textfield-module_CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.textfield-module_CustomBasicInput_oHgtd:disabled),&:has(.textfield-module_CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;box-shadow:none;cursor:not-allowed}&:has(.textfield-module_Addon_kK1ef[data-position=start])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.textfield-module_Addon_kK1ef[data-position=end])>.textfield-module_CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.textfield-module_CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:transparent;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.textfield-module_Addon_kK1ef{min-inline-size:var(--space-x-large)}.textfield-module_Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}

package/dist/components/textfield/textfield.d.ts

@@ -1,8 +1,7 @@
-import type { FieldRoot } from '@base-ui/react/field';
+import { FieldRoot } from '@base-ui/react/field';
 import { Input as PrimitiveInput } from '@base-ui/react/input';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './textfield.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Textfield props.
  *
@@ -14,7 +13,7 @@ import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.j
  */
 export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & IntrinsicViraProps & {
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */

package/dist/components/textfield/textfield.js

@@ -1,14 +1,60 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { Input as PrimitiveInput } from '@base-ui/react/input';
-import { Stack, Text } from '../index.js';
-import { BasicInput } from '../../components/basic-input/index.js';
-import { FieldHelperCopy } from '../../components/basic-input/field-helper-copy.js';
-import { InputControlGroup } from '../../components/basic-input/input-control-group.js';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import './textfield.css';
-export const Textfield = ({ className, description, dirty, disabled, endAddon, error, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(inputProps);
-    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Textfield", dirty: dirty, disabled: disabled, invalid: invalid, name: name, touched: touched, validate: validate, validationDebounceTime: validationDebounceTime, validationMode: validationMode, render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "small" }), children: [label && (_jsx(Text, { size: "small", weight: "semibold", className: "Label", render: _jsx(Field.Label, {}), children: label })), _jsx(InputControlGroup, { endAddon: endAddon, startAddon: startAddon, children: _jsx(BasicInput, { ...componentProps, ref: ref, className: className, disabled: disabled, render: _jsx(PrimitiveInput, {}) }) }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { BasicInput } from "../basic-input/basic-input.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { InputControlGroup } from "../basic-input/input-control-group.js";
+import textfield_module_default from "./textfield.module.js";
+import { Stack } from "../stack/stack.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Input } from "@base-ui/react/input";
+//#region src/components/textfield/textfield.tsx
+var Textfield = ({ className, description, dirty, disabled, endAddon, error, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(inputProps);
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...intrinsicAttributes,
+		className: textfield_module_default.Textfield,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				"data-field-label": "",
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(InputControlGroup, {
+				addonClassName: textfield_module_default.Addon,
+				controlGroupClassName: textfield_module_default.ControlGroup,
+				endAddon,
+				startAddon,
+				children: /* @__PURE__ */ jsx(BasicInput, {
+					...componentProps,
+					ref,
+					className: clsx(textfield_module_default.CustomBasicInput, className),
+					disabled,
+					render: /* @__PURE__ */ jsx(Input, {})
+				})
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: textfield_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
 };
+//#endregion
+export { Textfield };

package/dist/components/textfield/textfield.module.js

@@ -0,0 +1,9 @@
+var textfield_module_default = {
+	Textfield: "textfield-module_Textfield_o-70A",
+	ControlGroup: "textfield-module_ControlGroup_2W-OC",
+	CustomBasicInput: "textfield-module_CustomBasicInput_oHgtd",
+	Addon: "textfield-module_Addon_kK1ef",
+	Description: "textfield-module_Description_8Qxot"
+};
+//#endregion
+export { textfield_module_default as default };

package/dist/components/title/index.d.ts

@@ -1,2 +1,2 @@
-export { Title } from './title.js';
-export type { TitleProps } from './title.js';
+export { Title } from './title';
+export type { TitleProps } from './title';