@viraui/react 0.0.15 → 0.0.17

package/dist/components/skeleton/skeleton.css

@@ -1,36 +1 @@
-@scope (.Skeleton) {
-  :scope {
-    --skeleton-background: var(--global-contrast);
-    --skeleton-border-radius: var(--radius-small);
-    --skeleton-inline-size: auto;
-    --skeleton-block-size: auto;
-    --skeleton-min-inline-size: var(--space-x-large);
-    --skeleton-min-block-size: var(--space-medium);
-
-    display: inline-block;
-    box-sizing: border-box;
-    inline-size: var(--skeleton-inline-size);
-    block-size: var(--skeleton-block-size);
-    min-inline-size: var(--skeleton-min-inline-size);
-    min-block-size: var(--skeleton-min-block-size);
-    max-inline-size: 100%;
-    background: var(--skeleton-background);
-    border-radius: var(--skeleton-border-radius);
-    vertical-align: middle;
-    animation: skeleton-fade var(--duration-slow) var(--easing-standard) infinite alternate;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-  }
-}
-
-@keyframes skeleton-fade {
-  from {
-    opacity: 0.52;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
+.skeleton-module_Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:skeleton-module_skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes skeleton-module_skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,7 +1,6 @@
-import type { ThemeTypes } from '@viraui/foundation/vira/types';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
-import './skeleton.css';
 /**
  * Public Skeleton props.
  *

package/dist/components/skeleton/skeleton.js

@@ -1,17 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
-import { resolveThemeValue } from '../../core/theme/resolve-theme-value.js';
-import clsx from 'clsx';
 import './skeleton.css';
-export const Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
-    const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-    const dynamicStyle = {
-        '--skeleton-border-radius': resolveThemeValue(radius, 'radius', 'var(--radius-small)'),
-        ...(width ? { '--skeleton-inline-size': width } : {}),
-        ...(height ? { '--skeleton-block-size': height } : {}),
-        ...(minWidth ? { '--skeleton-min-inline-size': minWidth } : {}),
-        ...(minHeight ? { '--skeleton-min-block-size': minHeight } : {}),
-        ...style,
-    };
-    return (_jsx("span", { ...componentProps, ...intrinsicAttributes, ref: ref, "aria-hidden": "true", className: clsx('Skeleton', className), style: dynamicStyle }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import skeleton_module_default from "./skeleton.module.js";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		"--skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
+		...width ? { "--skeleton-inline-size": width } : {},
+		...height ? { "--skeleton-block-size": height } : {},
+		...minWidth ? { "--skeleton-min-inline-size": minWidth } : {},
+		...minHeight ? { "--skeleton-min-block-size": minHeight } : {},
+		...style
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-hidden": "true",
+		className: clsx$1(skeleton_module_default.Skeleton, className),
+		style: dynamicStyle
+	});
 };
+//#endregion
+export { Skeleton };

package/dist/components/skeleton/skeleton.module.js

@@ -0,0 +1,6 @@
+var skeleton_module_default = {
+	Skeleton: "skeleton-module_Skeleton_pn7Xk",
+	"skeleton-fade": "skeleton-module_skeleton-fade_XHkG4"
+};
+//#endregion
+export { skeleton_module_default as default };

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

@@ -1,2 +1,2 @@
-export { Slider } from './slider.js';
-export type { SliderProps } from './slider.js';
+export { Slider } from './slider';
+export type { SliderProps } from './slider';

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

@@ -1,5 +1,4 @@
-import type { SliderRoot } from '@base-ui/react/slider';
-import './slider-control.css';
+import { SliderRoot } from '@base-ui/react/slider';
 export type SliderControlProps = {
     isRange: boolean;
     orientation?: SliderRoot.Props['orientation'];

package/dist/components/slider/slider-control.js

@@ -1,22 +1,46 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slider as PrimitiveSlider } from '@base-ui/react/slider';
-import { Stack } from '../../components/stack/index.js';
-import './slider-control.css';
+"use client";
+import { Stack } from "../stack/stack.js";
+import slider_module_default from "./slider.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/components/slider/slider-control.tsx
 function resolveThumbAriaLabels(thumbAriaLabel, isRange) {
-    if (thumbAriaLabel === undefined) {
-        return {};
-    }
-    if (typeof thumbAriaLabel === 'string') {
-        return { first: thumbAriaLabel };
-    }
-    if (isRange) {
-        return { first: thumbAriaLabel[0], second: thumbAriaLabel[1] };
-    }
-    return { first: thumbAriaLabel[0] };
+	if (thumbAriaLabel === void 0) return {};
+	if (typeof thumbAriaLabel === "string") return { first: thumbAriaLabel };
+	if (isRange) return {
+		first: thumbAriaLabel[0],
+		second: thumbAriaLabel[1]
+	};
+	return { first: thumbAriaLabel[0] };
 }
-export function SliderControl({ isRange, orientation = 'horizontal', thumbAriaLabel }) {
-    const isVertical = orientation === 'vertical';
-    const { first: firstThumbAriaLabel, second: secondThumbAriaLabel } = resolveThumbAriaLabels(thumbAriaLabel, isRange);
-    return (_jsx(PrimitiveSlider.Control, { className: "SliderControl", "data-orientation": orientation, render: _jsx(Stack, { direction: isVertical ? 'column' : 'row', fillChildren: false, hAlign: isVertical ? 'center' : 'initial', vAlign: isVertical ? 'initial' : 'center' }), children: _jsxs(PrimitiveSlider.Track, { className: "Track", children: [_jsx(PrimitiveSlider.Indicator, { className: "Indicator" }), isRange ? (_jsxs(_Fragment, { children: [_jsx(PrimitiveSlider.Thumb, { className: "Thumb", index: 0, getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : undefined }), _jsx(PrimitiveSlider.Thumb, { className: "Thumb", index: 1, getAriaLabel: secondThumbAriaLabel ? () => secondThumbAriaLabel : undefined })] })) : (_jsx(PrimitiveSlider.Thumb, { className: "Thumb", getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : undefined }))] }) }));
+function SliderControl({ isRange, orientation = "horizontal", thumbAriaLabel }) {
+	const isVertical = orientation === "vertical";
+	const { first: firstThumbAriaLabel, second: secondThumbAriaLabel } = resolveThumbAriaLabels(thumbAriaLabel, isRange);
+	return /* @__PURE__ */ jsx(Slider.Control, {
+		className: slider_module_default.SliderControl,
+		"data-orientation": orientation,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: isVertical ? "column" : "row",
+			fillChildren: false,
+			hAlign: isVertical ? "center" : "initial",
+			vAlign: isVertical ? "initial" : "center"
+		}),
+		children: /* @__PURE__ */ jsxs(Slider.Track, {
+			className: slider_module_default.Track,
+			children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: slider_module_default.Indicator }), isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slider.Thumb, {
+				className: slider_module_default.Thumb,
+				index: 0,
+				getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : void 0
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				className: slider_module_default.Thumb,
+				index: 1,
+				getAriaLabel: secondThumbAriaLabel ? () => secondThumbAriaLabel : void 0
+			})] }) : /* @__PURE__ */ jsx(Slider.Thumb, {
+				className: slider_module_default.Thumb,
+				getAriaLabel: firstThumbAriaLabel ? () => firstThumbAriaLabel : void 0
+			})]
+		})
+	});
 }
+//#endregion
+export { SliderControl };

package/dist/components/slider/slider-utils.js

@@ -1,4 +1,7 @@
-export function isRangeSlider(value, defaultValue) {
-    const effective = value ?? defaultValue;
-    return Array.isArray(effective);
+//#region src/components/slider/slider-utils.ts
+function isRangeSlider(value, defaultValue) {
+	const effective = value ?? defaultValue;
+	return Array.isArray(effective);
 }
+//#endregion
+export { isRangeSlider };

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

@@ -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];