@viraui/react 0.0.1

package/dist/components/slider/slider.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@base-ui/react/field';
+import { Slider as PrimitiveSlider } from '@base-ui/react/slider';
+import { FieldHelperCopy } from '@react/src/components/basic-input/field-helper-copy';
+import { Stack } from '@react/src/components/stack';
+import { Text } from '@react/src/components/text';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { clsx } from 'clsx';
+import { SliderControl } from './slider-control';
+import './slider-control.css';
+import { isRangeSlider } from './slider-utils';
+import './slider.css';
+export const Slider = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = 'horizontal', ref, showValue = false, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ...sliderRootProps }) => {
+    const isRange = isRangeSlider(value, defaultValue);
+    const isVertical = orientation === 'vertical';
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(sliderRootProps);
+    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: "Slider", 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: [_jsxs(PrimitiveSlider.Root, { ...componentProps, ref: ref, className: clsx('SliderRoot', className), defaultValue: defaultValue, disabled: disabled, name: name, orientation: orientation, value: value, render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "small", columnGap: "x-small", vAlign: isVertical ? 'stretch' : 'center', hAlign: isVertical ? 'center' : 'initial' }), children: [(label || showValue) && (_jsxs(Stack, { className: "SliderHeader", direction: isVertical ? 'column' : 'row', fillChildren: false, columnGap: "small", vAlign: "end", hAlign: "space-between", children: [label && (_jsx(Text, { size: "small", weight: "semibold", className: "Label", render: _jsx(Field.Label, {}), children: label })), showValue && (_jsx(Text, { className: "Value", size: "small", tone: "muted", family: "mono", whiteSpace: "nowrap", align: isVertical ? 'center' : 'end', render: _jsx(PrimitiveSlider.Value, {}) }))] })), _jsx(SliderControl, { isRange: isRange, orientation: orientation, thumbAriaLabel: thumbAriaLabel })] }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+};

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

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from './spinner';

package/dist/components/spinner/spinner.css

@@ -0,0 +1,45 @@
+@scope (.Spinner) {
+  :scope {
+    --spinner-size: var(--space-x-large);
+
+    display: inline-block;
+    inline-size: var(--spinner-size);
+    block-size: var(--spinner-size);
+    flex: none;
+    vertical-align: middle;
+    color: currentColor;
+
+    &[data-dimension='small'] {
+      --spinner-size: var(--space-medium);
+    }
+
+    &[data-dimension='regular'] {
+      --spinner-size: var(--space-large);
+    }
+
+    > .Glyph > path {
+      transform-origin: 8px 8px;
+      animation: spinner-bars var(--duration-slowest) infinite;
+    }
+
+    > .Glyph > path:nth-child(1),
+    > .Glyph > path:nth-child(3) {
+      opacity: 0.3;
+      transform: scaleY(0.5);
+      animation-delay: calc(var(--duration-slowest) / -2);
+    }
+  }
+}
+
+@keyframes spinner-bars {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  50% {
+    opacity: 0.3;
+    transform: scaleY(0.5);
+  }
+}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,17 @@
+import './spinner.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & IntrinsicViraProps & {
+    /**
+     * Sets the rendered spinner size.
+     *
+     * @default 'big'
+     */
+    size?: 'small' | 'regular' | 'big';
+    /**
+     * Overrides the spinner fill color.
+     *
+     * @default No default; inherits `currentColor`.
+     */
+    color?: string;
+};
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import clsx from 'clsx';
+import './spinner.css';
+export const Spinner = ({ className, color, size = 'big', ref, style, ...otherProps }) => {
+    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+    return (_jsx("svg", { ...componentProps, ...intrinsicAttributes, ref: ref, className: clsx('Spinner', className), "data-dimension": size, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...(color ? { color } : {}), ...(style ? { style } : {}), children: _jsxs("g", { className: "Glyph", fill: "currentColor", children: [_jsx("path", { d: "M0 2h2v12H0z" }), _jsx("path", { d: "M7 2h2v12H7z" }), _jsx("path", { d: "M14 2h2v12h-2z" })] }) }));
+};

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

@@ -0,0 +1,2 @@
+export { Stack } from './stack';
+export type { StackProps } from './stack';

package/dist/components/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from './stack';

package/dist/components/stack/stack.css

@@ -0,0 +1,57 @@
+@scope (.Stack) {
+  :scope {
+    --stack-row-gap: 0;
+    --stack-column-gap: 0;
+    --stack-h-align: initial;
+    --stack-v-align: initial;
+    --stack-padding-inline-start: 0;
+    --stack-padding-inline-end: 0;
+    --stack-padding-block-start: 0;
+    --stack-padding-block-end: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: var(--stack-h-align);
+    justify-content: var(--stack-v-align);
+    gap: var(--stack-row-gap) var(--stack-column-gap);
+    max-inline-size: var(--stack-max-width, none);
+    min-inline-size: var(--stack-min-width, none);
+
+    &[data-stack-direction='column-reverse'] {
+      flex-direction: column-reverse;
+    }
+
+    /* Row layouts: swap which gap token maps to align vs justify */
+    &[data-stack-direction='row'],
+    &[data-stack-direction='row-reverse'] {
+      align-items: var(--stack-v-align);
+      justify-content: var(--stack-h-align);
+    }
+
+    &[data-stack-direction='row'] {
+      flex-direction: row;
+    }
+
+    &[data-stack-direction='row-reverse'] {
+      flex-direction: row-reverse;
+    }
+
+    &[data-stack-inline='true'] {
+      display: inline-flex;
+      flex-grow: 0;
+    }
+
+    &[data-stack-wrap='true'] {
+      flex-wrap: wrap;
+    }
+
+    &[data-stack-has-padding='true'] {
+      padding: var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end)
+        var(--stack-padding-inline-start);
+    }
+
+    &[data-stack-fill-children='true'] > * {
+      flex-grow: var(--vira-flex-grow, 1);
+    }
+  }
+}

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,104 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { ThemeTypes } from '@foundation/platforms/web/vira/types';
+import type * as React from 'react';
+import './stack.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
+type StackSpace = ThemeTypes['space'];
+type StackAxisPadding = StackSpace | [StackSpace | 0, StackSpace | 0];
+/**
+ * Public Stack props.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
+ * plus Vira-owned flex layout controls and Base UI `render` support for replacing the root element.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type StackProps = React.ComponentPropsWithoutRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The stack renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered stack root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Renders children across rows or columns using the chosen flex direction.
+     *
+     * @default 'column'
+     */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Displays the stack as `inline-flex` instead of `flex`.
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Allows direct children to wrap onto additional lines when space is constrained.
+     *
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Makes direct children grow to fill the available space within the stack.
+     *
+     * @default true
+     */
+    fillChildren?: boolean;
+    /**
+     * Sets the gap between flex rows using the Vira space token scale.
+     *
+     * @default 'medium'
+     */
+    rowGap?: StackSpace;
+    /**
+     * Sets the gap between flex columns using the Vira space token scale.
+     *
+     * @default 'medium'
+     */
+    columnGap?: StackSpace;
+    /**
+     * Aligns content on the horizontal axis from the consumer point of view.
+     *
+     * @default 'initial'
+     */
+    hAlign?: StackAlignment;
+    /**
+     * Aligns content on the vertical axis from the consumer point of view.
+     *
+     * @default 'initial'
+     */
+    vAlign?: StackAlignment;
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackAxisPadding;
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackAxisPadding;
+    /**
+     * Applies a maximum width value to the stack root.
+     *
+     * @default No max width constraint.
+     */
+    maxWidth?: string;
+    /**
+     * Applies a minimum width value to the stack root.
+     *
+     * @default No min width constraint.
+     */
+    minWidth?: string;
+};
+export declare const Stack: React.FC<StackProps>;
+export {};

package/dist/components/stack/stack.js

@@ -0,0 +1,38 @@
+'use client';
+import { useRender } from '@base-ui/react/use-render';
+import { resolveAxisPadding } from '@react/src/core/styles/resolve-axis-padding';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { resolveThemeValue } from '@react/src/core/theme/resolve-theme-value';
+import { clsx } from 'clsx';
+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,
+        },
+    });
+};

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

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

package/dist/components/surface/index.js

@@ -0,0 +1 @@
+export { Surface } from './surface';

package/dist/components/surface/surface.css

@@ -0,0 +1,61 @@
+@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;
+    transition: all var(--duration-fast) var(--easing-standard);
+
+    &[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) {
+    :scope[data-surface-has-hover-color='true']:hover {
+      background: var(--surface-background-hover);
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { ThemeTypes } from '@foundation/platforms/web/vira/types';
+import type * as React from 'react';
+import './surface.css';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+/** 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.
+ *
+ * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
+ * plus Vira-owned container styling controls and Base UI `render` support for replacing the root element.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @default The surface renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered surface root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Sets the resting background using a base ramp layer (`1`–`3`) or a literal CSS color value.
+     *
+     * @default No background.
+     */
+    color?: SurfaceColor;
+    /**
+     * Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`) or literal CSS value.
+     *
+     * @default No hover color override.
+     */
+    hoverColor?: SurfaceColor;
+    /**
+     * Applies the shared contrast border on the chosen side or axis. Omit for no border.
+     *
+     * @default No border.
+     */
+    border?: 'all' | 'top' | 'right' | 'bottom' | 'left' | 'x' | 'y';
+    /**
+     * Sets the corner radius from the Vira radius token scale.
+     *
+     * @default No radius.
+     */
+    radius?: ThemeTypes['radius'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: SurfaceAxisPadding;
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: SurfaceAxisPadding;
+};
+export declare const Surface: React.FC<SurfaceProps>;
+export {};

package/dist/components/surface/surface.js

@@ -0,0 +1,43 @@
+'use client';
+import { useRender } from '@base-ui/react/use-render';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import { resolveAxisPadding } from '@react/src/core/styles/resolve-axis-padding';
+import { resolveThemeValue } from '@react/src/core/theme/resolve-theme-value';
+import { clsx } from 'clsx';
+import './surface.css';
+const 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,
+        },
+    });
+};

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

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

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './switch';

package/dist/components/switch/switch.css

@@ -0,0 +1,73 @@
+@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;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import type { FieldRoot } from '@base-ui/react/field';
+import type { SwitchRoot } from '@base-ui/react/switch';
+import type * as React from 'react';
+import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import './switch.css';
+/**
+ * Public Switch props.
+ *
+ * Includes Base UI switch props such as `checked`, `defaultChecked`, `disabled`,
+ * and change handlers, plus optional field copy rendered with the shared Vira
+ * field label/helper pattern.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible label rendered with `Field.Label` and `Text`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
+     * Replaces description while the field is invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Controls the visual switch size.
+     *
+     * @default 'small'
+     */
+    size?: 'regular' | 'small';
+};
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/switch/switch.js

@@ -0,0 +1,15 @@
+'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 '@react/src/components/basic-input/field-helper-copy';
+import { Stack } from '@react/src/components/stack';
+import { Text } from '@react/src/components/text';
+import { extractIntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+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] }));
+};

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

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

package/dist/components/text/index.js

@@ -0,0 +1 @@
+export { Text } from './text';