@viraui/react 0.0.16 → 0.0.17

package/dist/components/stack/stack.js

@@ -1,38 +1,42 @@
-'use client';
-import { useRender } from '@base-ui/react/use-render';
-import { clsx } from 'clsx';
-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 './stack.css';
-export const Stack = ({ className, direction = 'column', fillChildren = true, hAlign = 'initial', hPadding, inline = false, maxWidth, minWidth, ref, render, rowGap, columnGap, style, vAlign = 'initial', vPadding, wrap = false, ...otherProps }) => {
-    const hasPadding = Boolean(hPadding || vPadding);
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = {
-        '--stack-row-gap': resolveThemeValue(rowGap, 'space', 0),
-        '--stack-column-gap': resolveThemeValue(columnGap, 'space', 0),
-        '--stack-h-align': hAlign,
-        '--stack-v-align': vAlign,
-        ...(maxWidth ? { '--stack-max-width': maxWidth } : {}),
-        ...(minWidth ? { '--stack-min-width': minWidth } : {}),
-        ...resolveAxisPadding(hPadding, '--stack-padding-inline-start', '--stack-padding-inline-end'),
-        ...resolveAxisPadding(vPadding, '--stack-padding-block-start', '--stack-padding-block-end'),
-        ...style,
-    };
-    return useRender({
-        defaultTagName: 'div',
-        render,
-        ref,
-        props: {
-            ...componentProps,
-            ...intrinsicAttributes,
-            'data-stack-direction': direction,
-            'data-stack-inline': inline ? 'true' : 'false',
-            'data-stack-wrap': wrap ? 'true' : 'false',
-            'data-stack-fill-children': fillChildren ? 'true' : 'false',
-            'data-stack-has-padding': hasPadding ? 'true' : 'false',
-            className: clsx('Stack', className),
-            style: dynamicStyle,
-        },
-    });
+"use client";
+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 stack_module_default from "./stack.module.js";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/stack/stack.tsx
+var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
+	const hasPadding = Boolean(hPadding || vPadding);
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		"--stack-row-gap": resolveThemeValue(rowGap, "space", 0),
+		"--stack-column-gap": resolveThemeValue(columnGap, "space", 0),
+		"--stack-h-align": hAlign,
+		"--stack-v-align": vAlign,
+		...maxWidth ? { "--stack-max-width": maxWidth } : {},
+		...minWidth ? { "--stack-min-width": minWidth } : {},
+		...resolveAxisPadding(hPadding, "--stack-padding-inline-start", "--stack-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--stack-padding-block-start", "--stack-padding-block-end"),
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			...intrinsicAttributes,
+			"data-stack-direction": direction,
+			"data-stack-inline": inline ? "true" : "false",
+			"data-stack-wrap": wrap ? "true" : "false",
+			"data-stack-fill-children": fillChildren ? "true" : "false",
+			"data-stack-has-padding": hasPadding ? "true" : "false",
+			className: clsx(stack_module_default.Stack, className),
+			style: dynamicStyle
+		}
+	});
 };
+//#endregion
+export { Stack };

package/dist/components/stack/stack.module.js

@@ -0,0 +1,3 @@
+var stack_module_default = { Stack: "stack-module_Stack_NR-Ey" };
+//#endregion
+export { stack_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Surface } from './surface.js';
-export type { SurfaceProps } from './surface.js';
+export { Surface } from './surface';
+export type { SurfaceProps } from './surface';

package/dist/components/surface/surface.css

@@ -1,70 +1 @@
-@scope (.Surface) {
-  :scope {
-    --surface-background-hover: var(--surface-background);
-    --surface-border-radius: var(--radius-medium);
-    --surface-padding-inline-start: 0;
-    --surface-padding-inline-end: 0;
-    --surface-padding-block-start: 0;
-    --surface-padding-block-end: 0;
-
-    position: relative;
-    box-sizing: border-box;
-    background: var(--surface-background, transparent);
-    border-radius: var(--surface-border-radius);
-    border: 0;
-
-    &[data-surface-has-padding='true'] {
-      padding: var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end)
-        var(--surface-padding-inline-start);
-    }
-
-    &[data-surface-border] {
-      border-style: solid;
-      border-color: var(--global-contrast);
-    }
-
-    &[data-surface-border='all'] {
-      border-width: 1px;
-    }
-
-    &[data-surface-border='top'] {
-      border-width: 1px 0 0;
-    }
-
-    &[data-surface-border='right'] {
-      border-width: 0 1px 0 0;
-    }
-
-    &[data-surface-border='bottom'] {
-      border-width: 0 0 1px;
-    }
-
-    &[data-surface-border='left'] {
-      border-width: 0 0 0 1px;
-    }
-
-    &[data-surface-border='x'] {
-      border-width: 0 1px;
-    }
-
-    &[data-surface-border='y'] {
-      border-width: 1px 0;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      &[data-surface-has-hover-color='true']:hover {
-        animation: surface-background-hover var(--duration-fast) var(--easing-standard);
-        animation-fill-mode: both;
-      }
-    }
-  }
-
-  @keyframes surface-background-hover {
-    from {
-      background: var(--surface-background);
-    }
-    to {
-      background: var(--surface-background-hover);
-    }
-  }
-}
+.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;position:relative;box-sizing:border-box;background:var(--surface-background,transparent);border-radius:var(--surface-border-radius);border:0;&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}

package/dist/components/surface/surface.d.ts

@@ -1,12 +1,10 @@
 import { useRender } from '@base-ui/react/use-render';
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
-import './surface.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /** Base ramp layer for nested surfaces; clamped to 1–3 at runtime. */
 type SurfaceBaseLevel = 1 | 2 | 3;
 type SurfaceColor = string | SurfaceBaseLevel;
-type SurfaceAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
 /**
  * Public Surface props.
  *
@@ -46,6 +44,12 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      * @default No border.
      */
     border?: 'all' | 'top' | 'right' | 'bottom' | 'left' | 'x' | 'y';
+    /**
+     * Sets the CSS border style when `border` is set.
+     *
+     * @default solid
+     */
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
      * Sets the corner radius from the Vira radius token scale.
      *
@@ -57,13 +61,13 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      *
      * @default No inline padding.
      */
-    hPadding?: SurfaceAxisPadding;
+    hPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
      * @default No block padding.
      */
-    vPadding?: SurfaceAxisPadding;
+    vPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
 };
 export declare const Surface: React.FC<SurfaceProps>;
 export {};

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';
 import './surface.css';
-const clampSurfaceBaseLevel = (value) => {
-    if (value <= 1)
-        return 1;
-    if (value >= 3)
-        return 3;
-    return value;
+"use client";
+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,61 @@
-'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';
 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] }));
+"use client";
+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, { 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';