@viraui/react 0.0.16 → 0.0.18

package/dist/components/slider/slider.css

@@ -1,64 +1 @@
-@scope (.Slider) {
-  :scope {
-    --slider-track-size: var(--space-x-small);
-    --slider-thumb-size: var(--space-medium);
-    --slider-track-background: var(--global-contrast);
-    --slider-progress-background: var(--global-primary);
-    --slider-thumb-background: var(--base-1);
-    inline-size: 100%;
-    block-size: 100%;
-    min-inline-size: 0;
-    min-block-size: 0;
-
-    > .SliderRoot {
-      inline-size: 100%;
-      block-size: 100%;
-      min-inline-size: 0;
-      min-block-size: 0;
-
-      > .SliderHeader {
-        inline-size: 100%;
-        min-inline-size: 0;
-
-        /* Label shrinks/wraps; value keeps its size on the right */
-        > .Label {
-          -webkit-user-select: none;
-          user-select: none;
-        }
-
-        > .Value {
-          min-inline-size: var(--space-x-large);
-          flex-shrink: 0;
-          -webkit-user-select: none;
-          user-select: none;
-        }
-      }
-    }
-
-    &[data-invalid] {
-      --slider-progress-background: var(--highlight-red);
-    }
-
-    /* Disabled: muted track/progress/thumb when Slider or SliderRoot is disabled */
-    &[data-disabled],
-    &:has(> .SliderRoot[data-disabled]) {
-      --slider-track-background: var(--global-disabled-background);
-      --slider-progress-background: var(--global-disabled-foreground);
-      --slider-thumb-background: var(--global-disabled-foreground);
-
-      cursor: not-allowed;
-    }
-
-    /* Required field: append red asterisk on Label */
-    &:has([required]) > .SliderRoot > .SliderHeader > .Label::after {
-      content: ' ＊';
-      color: var(--highlight-red);
-    }
-
-    & > .Description,
-    & > .SliderRoot > .SliderHeader > .Value {
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  }
-}
+.slider-module_Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:var(--base-1);inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.slider-module_SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.slider-module_SliderRoot_4JScw{block-size:100%;min-block-size:0}.slider-module_SliderHeader_gOy9k,.slider-module_SliderRoot_4JScw{inline-size:100%;min-inline-size:0}.slider-module_Value_FaY9i{flex-shrink:0}.slider-module_SliderControl_FQd5-{position:relative;flex:1 1 auto;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.slider-module_Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.slider-module_Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.slider-module_Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.slider-module_Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) / 1.5);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:2px solid var(--global-foreground);outline-offset:2px;z-index:1}>input:focus-visible{outline:none}}

package/dist/components/slider/slider.d.ts

@@ -1,9 +1,7 @@
-import type { FieldRoot } from '@base-ui/react/field';
-import type { SliderRoot } from '@base-ui/react/slider';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { FieldRoot } from '@base-ui/react/field';
+import { SliderRoot } from '@base-ui/react/slider';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './slider-control.css';
-import './slider.css';
 /**
  * Public Slider props.
  *
@@ -12,7 +10,7 @@ import './slider.css';
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type SliderProps = Omit<SliderRoot.Props, 'ref'> & Omit<FieldRoot.Props, 'ref'> & {
+export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
     /**
      * Adds `data-grow="false"` to the field root when false.
      *
@@ -25,9 +23,8 @@ export type SliderProps = Omit<SliderRoot.Props, 'ref'> & Omit<FieldRoot.Props,
      * @default The field root does not render a shrink attribute.
      */
     shrink?: IntrinsicViraProps['shrink'];
-    ref?: React.Ref<HTMLDivElement>;
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */

package/dist/components/slider/slider.js

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

package/dist/components/slider/slider.module.js

@@ -0,0 +1,12 @@
+var slider_module_default = {
+	Slider: "slider-module_Slider_vDNlm",
+	SliderRoot: "slider-module_SliderRoot_4JScw",
+	SliderHeader: "slider-module_SliderHeader_gOy9k",
+	Value: "slider-module_Value_FaY9i",
+	SliderControl: "slider-module_SliderControl_FQd5-",
+	Track: "slider-module_Track_wvLEH",
+	Indicator: "slider-module_Indicator_y3JyJ",
+	Thumb: "slider-module_Thumb_S-uLF"
+};
+//#endregion
+export { slider_module_default as default };

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

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

package/dist/components/spinner/spinner.css

@@ -1,45 +1 @@
-@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);
-  }
-}
+.spinner-module_Spinner_qCQzj{--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)}}.spinner-module_Glyph_OV-cy>path{transform-origin:8px 8px;animation:spinner-module_spinner-bars_jDmaB var(--duration-slowest) infinite}.spinner-module_Glyph_OV-cy>path:first-child,.spinner-module_Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes spinner-module_spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}

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

@@ -1,5 +1,4 @@
-import './spinner.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & IntrinsicViraProps & {
     /**
      * Sets the rendered spinner size.

package/dist/components/spinner/spinner.js

@@ -1,8 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-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" })] }) }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import spinner_module_default from "./spinner.module.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	return /* @__PURE__ */ jsx("svg", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx$1(spinner_module_default.Spinner, className),
+		"data-dimension": size,
+		viewBox: "0 0 16 16",
+		xmlns: "http://www.w3.org/2000/svg",
+		...color ? { color } : {},
+		...style ? { style } : {},
+		children: /* @__PURE__ */ jsxs("g", {
+			className: spinner_module_default.Glyph,
+			fill: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("path", { d: "M0 2h2v12H0z" }),
+				/* @__PURE__ */ jsx("path", { d: "M7 2h2v12H7z" }),
+				/* @__PURE__ */ jsx("path", { d: "M14 2h2v12h-2z" })
+			]
+		})
+	});
 };
+//#endregion
+export { Spinner };

package/dist/components/spinner/spinner.module.js

@@ -0,0 +1,7 @@
+var spinner_module_default = {
+	Spinner: "spinner-module_Spinner_qCQzj",
+	Glyph: "spinner-module_Glyph_OV-cy",
+	"spinner-bars": "spinner-module_spinner-bars_jDmaB"
+};
+//#endregion
+export { spinner_module_default as default };

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

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

package/dist/components/stack/stack.css

@@ -1,57 +1 @@
-@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);
-    }
-  }
-}
+.stack-module_Stack_NR-Ey{--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;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);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}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{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}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[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)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

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

@@ -1,8 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+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 './stack.css';
 type StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
 type StackSpace = ThemeTypes['space'];
 type StackAxisPadding = StackSpace | [StackSpace | 0, StackSpace | 0];

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