@viraui/react 0.0.16 → 0.0.18

package/dist/components/surface/surface.js

@@ -1,43 +1,46 @@
-'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 { resolveThemeValue } from '../../core/theme/resolve-theme-value.js';
-import { clsx } from 'clsx';
+"use client";
 import './surface.css';
-const clampSurfaceBaseLevel = (value) => {
-    if (value <= 1)
-        return 1;
-    if (value >= 3)
-        return 3;
-    return value;
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+import surface_module_default from "./surface.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/surface/surface.tsx
+var clampSurfaceBaseLevel = (value) => {
+	if (value <= 1) return 1;
+	if (value >= 3) return 3;
+	return value;
 };
-const toSurfaceColor = (value) => typeof value === 'string' ? value : `var(--base-${clampSurfaceBaseLevel(value)})`;
-export const Surface = ({ border, className, color, hPadding, hoverColor, radius, ref, render, style, vPadding, ...otherProps }) => {
-    const hasColor = color !== undefined;
-    const hasPadding = Boolean(hPadding || vPadding);
-    const hasHoverColor = hoverColor !== undefined;
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = {
-        ...(hasColor ? { '--surface-background': toSurfaceColor(color) } : {}),
-        ...(hasHoverColor ? { '--surface-background-hover': toSurfaceColor(hoverColor) } : {}),
-        '--surface-border-radius': resolveThemeValue(radius, 'radius', 'var(--radius-medium)'),
-        ...resolveAxisPadding(hPadding, '--surface-padding-inline-start', '--surface-padding-inline-end'),
-        ...resolveAxisPadding(vPadding, '--surface-padding-block-start', '--surface-padding-block-end'),
-        ...style,
-    };
-    return useRender({
-        defaultTagName: 'div',
-        render,
-        ref,
-        props: {
-            ...componentProps,
-            ...intrinsicAttributes,
-            ...(border ? { 'data-surface-border': border } : {}),
-            'data-surface-has-hover-color': hasHoverColor ? 'true' : 'false',
-            'data-surface-has-padding': hasPadding ? 'true' : 'false',
-            className: clsx('Surface', className),
-            style: dynamicStyle,
-        },
-    });
+var toSurfaceColor = (value) => typeof value === "string" ? value : `var(--base-${clampSurfaceBaseLevel(value)})`;
+var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, radius, ref, render, style, vPadding, ...otherProps }) => {
+	const hasColor = color !== void 0;
+	const hasPadding = Boolean(hPadding || vPadding);
+	const hasHoverColor = hoverColor !== void 0;
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		...hasColor ? { "--surface-background": toSurfaceColor(color) } : {},
+		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
+		...border ? { "--surface-border-style": borderStyle } : {},
+		"--surface-border-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)"),
+		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			...border ? { "data-surface-border": border } : {},
+			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
+			"data-surface-has-padding": hasPadding ? "true" : "false",
+			className: clsx(surface_module_default.Surface, className),
+			style: dynamicStyle
+		}
+	});
 };
+//#endregion
+export { Surface };

package/dist/components/surface/surface.module.js

@@ -0,0 +1,6 @@
+var surface_module_default = {
+	Surface: "surface-module_Surface_slEYq",
+	"surface-background-hover": "surface-module_surface-background-hover_HwH9-"
+};
+//#endregion
+export { surface_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Switch } from './switch.js';
-export type { SwitchProps } from './switch.js';
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';

package/dist/components/switch/switch.css

@@ -1,73 +1 @@
-@scope (.Switch) {
-  :scope {
-    --switch-track-block-size: var(--space-large);
-    --switch-track-radius: var(--radius-small);
-    --switch-track-background: var(--global-contrast);
-    --switch-thumb-background: var(--global-primary);
-    --switch-thumb-size: calc(var(--space-large) - var(--space-x-small));
-    --switch-thumb-inset: var(--space-2x-small);
-    --switch-thumb-radius: calc(var(--radius-x-small) + var(--switch-thumb-inset));
-
-    > .SwitchRoot {
-      position: relative;
-      appearance: none;
-      border: 0;
-      box-shadow: none;
-      inline-size: calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);
-      block-size: var(--switch-track-block-size);
-      background: var(--switch-track-background);
-      border-radius: var(--switch-track-radius);
-
-      &[data-size='small'] {
-        --switch-track-radius: var(--radius-x-small);
-        --switch-track-block-size: var(--space-medium);
-        --switch-thumb-size: calc(var(--space-medium) - var(--space-x-small));
-        --switch-thumb-radius: calc(var(--radius-x-small) - var(--switch-thumb-inset));
-      }
-
-      /* Checked track and thumb colors when not disabled or invalid */
-      &[data-checked]:not([data-disabled]):not([data-invalid]) {
-        --switch-track-background: var(--global-primary);
-        --switch-thumb-background: var(--base-1);
-      }
-
-      /* Invalid: red inset border and focus outline on SwitchRoot (from parent or root data-invalid) */
-      :scope[data-invalid] > &:not([data-disabled]),
-      &[data-invalid]:not([data-disabled]) {
-        box-shadow: inset 0 0 0 1px var(--highlight-red);
-        outline-color: oklab(from var(--highlight-red) l a b / 0.5);
-      }
-
-      /* Disabled: muted track/thumb and no shadow (from parent or root data-disabled) */
-      :scope[data-disabled] > &,
-      &[data-disabled] {
-        --switch-track-background: var(--global-disabled-background);
-        --switch-thumb-background: var(--global-disabled-foreground);
-        box-shadow: none;
-      }
-
-      > .Thumb {
-        position: absolute;
-        inset-block: var(--switch-thumb-inset);
-        inset-inline-start: var(--switch-thumb-inset);
-        background: var(--switch-thumb-background);
-        inline-size: var(--switch-thumb-size);
-        block-size: var(--switch-thumb-size);
-        border-radius: var(--switch-thumb-radius);
-        transition: translate var(--easing-entrance) var(--duration-fast);
-      }
-
-      &[data-checked] > .Thumb {
-        translate: 100% 0;
-      }
-      &[data-checked]:dir(rtl) > .Thumb {
-        translate: -100% 0;
-      }
-    }
-
-    > .Copy > .Label {
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  }
-}
+.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.d.ts

@@ -1,8 +1,8 @@
-import type { FieldRoot } from '@base-ui/react/field';
-import type { SwitchRoot } from '@base-ui/react/switch';
+import { FieldRoot } from '@base-ui/react/field';
+import { SwitchRoot } from '@base-ui/react/switch';
+import { StackProps } from '..';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import './switch.css';
 /**
  * Public Switch props.
  *
@@ -26,7 +26,7 @@ export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
      */
     shrink?: IntrinsicViraProps['shrink'];
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */
@@ -50,5 +50,17 @@ export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
      * @default 'small'
      */
     size?: 'regular' | 'small';
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackProps['vPadding'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackProps['hPadding'];
 };
 export declare const Switch: React.FC<SwitchProps>;

package/dist/components/switch/switch.js

@@ -1,15 +1,64 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field } from '@base-ui/react/field';
-import { Switch as PrimitiveSwitch } from '@base-ui/react/switch';
-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 { clsx } from 'clsx';
+"use client";
 import './switch.css';
-export const Switch = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = 'small', touched, validate, validationDebounceTime, validationMode, ...switchRootProps }) => {
-    const hasTextDescription = Boolean(description || error);
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(switchRootProps);
-    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Switch", dirty: dirty, disabled: disabled, invalid: invalid, name: name, touched: touched, validate: validate, validationDebounceTime: validationDebounceTime, validationMode: validationMode, render: _jsx(Stack, { direction: "row", columnGap: size === 'small' ? 'small' : 'medium', fillChildren: false, vAlign: hasTextDescription ? 'start' : 'center' }), children: [_jsx(PrimitiveSwitch.Root, { ...componentProps, className: clsx('SwitchRoot', className), "data-size": size, disabled: disabled, name: name, nativeButton: true, render: _jsx("button", { type: "button" }), ref: ref, children: _jsx(PrimitiveSwitch.Thumb, { className: "Thumb" }) }), label || description || error ? (_jsxs(Stack, { direction: "column", fillChildren: false, rowGap: "small", className: "Copy", children: [label && (_jsx(Text, { size: size === 'small' ? 'small' : 'medium', weight: "semibold", className: "Label", render: _jsx(Field.Label, {}), children: label })), _jsx(FieldHelperCopy, { description: description, error: error })] })) : null] }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.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 switch_module_default from "./switch.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch/switch.tsx
+var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...switchRootProps }) => {
+	const hasTextDescription = Boolean(description || error);
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(switchRootProps);
+	return /* @__PURE__ */ jsx(Field.Root, {
+		...intrinsicAttributes,
+		className: switch_module_default.Switch,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
+			fillChildren: false,
+			vAlign: hasTextDescription ? "start" : "center"
+		}),
+		children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
+			fillChildren: false,
+			vAlign: hasTextDescription ? "start" : "center",
+			...hPadding !== void 0 ? { hPadding } : {},
+			...vPadding !== void 0 ? { vPadding } : {},
+			children: [/* @__PURE__ */ jsx(Switch.Root, {
+				...componentProps,
+				className: clsx(switch_module_default.SwitchRoot, className),
+				"data-size": size,
+				disabled,
+				name,
+				ref,
+				children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
+			}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				fillChildren: false,
+				rowGap: size === "small" ? "2x-small" : "x-small",
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
+					description,
+					error
+				})]
+			}) : null]
+		}) })
+	});
 };
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/switch/switch.module.js

@@ -0,0 +1,7 @@
+var switch_module_default = {
+	Switch: "switch-module_Switch_L86y7",
+	SwitchRoot: "switch-module_SwitchRoot_Zv9An",
+	Thumb: "switch-module_Thumb_ldwJw"
+};
+//#endregion
+export { switch_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Text } from './text.js';
-export type { TextProps } from './text.js';
+export { Text } from './text';
+export type { TextProps } from './text';

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';
+"use client";
 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,
-        },
-    });
+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)}