@viraui/react 0.0.12 → 0.0.14

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import type * as React from 'react';
 import './avatar.css';
 /**

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar as PrimitiveAvatar } from '@base-ui/react/avatar';
-import { Skeleton, Text } from '..';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { Skeleton, Text } from '../index.js';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import { clsx } from 'clsx';
 import './avatar.css';
 const fallbackTextSizeByAvatarSize = {

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

@@ -1,2 +1,2 @@
-export { Avatar } from './avatar';
-export type { AvatarProps } from './avatar';
+export { Avatar } from './avatar.js';
+export type { AvatarProps } from './avatar.js';

package/dist/components/avatar/index.js

@@ -1 +1 @@
-export { Avatar } from './avatar';
+export { Avatar } from './avatar.js';

package/dist/components/basic-input/field-helper-copy.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '@base-ui/react/field';
-import { Text } from '../text';
+import { Text } from '../../components/text/index.js';
 /**
  * Renders field helper copy in the shared `Description` slot via `Field.Validity`.
  * Static `error` replaces `description` only while invalid and `error` is set.

package/dist/components/basic-input/index.d.ts

@@ -1,2 +1,2 @@
-export { BasicInput } from './basic-input';
-export type { BasicInputProps } from './basic-input';
+export { BasicInput } from './basic-input.js';
+export type { BasicInputProps } from './basic-input.js';

package/dist/components/basic-input/index.js

@@ -1 +1 @@
-export { BasicInput } from './basic-input';
+export { BasicInput } from './basic-input.js';

package/dist/components/basic-input/input-control-group.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack } from '..';
+import { Stack } from '../index.js';
 /**
  * Internal flex wrapper for a field control plus optional start/end addons.
  * Not exported from the package public surface.

package/dist/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
 import './button.css';
 import type { ReactNode } from 'react';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public Button props.
  *

package/dist/components/button/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as PrimitiveButton } from '@base-ui/react/button';
-import { Spinner } from '../spinner';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { Spinner } from '../../components/spinner/index.js';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import { clsx } from 'clsx';
 import './button.css';
 const spinnerDimensionsBySize = {

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

@@ -1,2 +1,2 @@
-export { Button } from './button';
-export type { ButtonProps } from './button';
+export { Button } from './button.js';
+export type { ButtonProps } from './button.js';

package/dist/components/button/index.js

@@ -1 +1 @@
-export { Button } from './button';
+export { Button } from './button.js';

package/dist/components/clamp-text/clamp-text.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
 import type * as React from 'react';
 import './clamp-text.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 /**
  * Public ClampText props.
  *

package/dist/components/clamp-text/clamp-text.js

@@ -1,6 +1,6 @@
 'use client';
 import { useRender } from '@base-ui/react/use-render';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import './clamp-text.css';

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

@@ -1,2 +1,2 @@
-export { ClampText } from './clamp-text';
-export type { ClampTextProps } from './clamp-text';
+export { ClampText } from './clamp-text.js';
+export type { ClampTextProps } from './clamp-text.js';

package/dist/components/clamp-text/index.js

@@ -1 +1 @@
-export { ClampText } from './clamp-text';
+export { ClampText } from './clamp-text.js';

package/dist/components/elevator/elevator.d.ts

@@ -1,9 +1,9 @@
 import type * as React from 'react';
-import type { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-export type { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types';
-export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types';
-export { getElevationProps } from '../../core/elevation/get-elevation-props';
+import type { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types.js';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, } from '../../core/elevation/elevation-types.js';
+export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types.js';
+export { getElevationProps } from '../../core/elevation/get-elevation-props.js';
 /**
  * Public Elevator props.
  *

package/dist/components/elevator/elevator.js

@@ -1,8 +1,8 @@
 import { Children, cloneElement, isValidElement } from 'react';
-import { getElevationProps } from '../../core/elevation/get-elevation-props';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types';
-export { getElevationProps } from '../../core/elevation/get-elevation-props';
+import { getElevationProps } from '../../core/elevation/get-elevation-props.js';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types.js';
+export { getElevationProps } from '../../core/elevation/get-elevation-props.js';
 const mergeChildStyle = (childStyle, elevationStyle) => ({
     ...(childStyle ?? {}),
     ...elevationStyle,

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

@@ -1,2 +1,2 @@
-export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator';
-export type { ElevationDirection, ElevationLevel, ElevationShadowColor, ElevatorProps } from './elevator';
+export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator.js';
+export type { ElevationDirection, ElevationLevel, ElevationShadowColor, ElevatorProps } from './elevator.js';

package/dist/components/elevator/index.js

@@ -1 +1 @@
-export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator';
+export { ELEVATION_DEFAULTS, Elevator, getElevationProps } from './elevator.js';

package/dist/components/icon/icon.d.ts

@@ -1,6 +1,6 @@
 import type { GeneratedIconName, GeneratedIconVariant } from '#internal-icons/icon-registry';
 import './icon.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 export type IconName = GeneratedIconName;
 export type IconVariant = GeneratedIconVariant;
 export type IconProps = React.ComponentProps<'svg'> & IntrinsicViraProps & {

package/dist/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { generatedDefaultIconVariant, generatedIconRegistry } from '#internal-icons/icon-registry';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import { clsx } from 'clsx';
 import './icon.css';
 export const Icon = ({ className, name, size = 24, variant = generatedDefaultIconVariant, ...otherProps }) => {

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

@@ -1,2 +1,2 @@
-export { Icon } from './icon';
-export type { IconProps } from './icon';
+export { Icon } from './icon.js';
+export type { IconProps } from './icon.js';

package/dist/components/icon/index.js

@@ -1 +1 @@
-export { Icon } from './icon';
+export { Icon } from './icon.js';

package/dist/components/icon-button/icon-button.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '..';
+import type { ButtonProps } from '../index.js';
 import type { ReactNode } from 'react';
 type AccessibleNameProps = {
     'aria-label': string;

package/dist/components/icon-button/icon-button.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../button/button';
+import { Button } from '../../components/button/button.js';
 export const IconButton = ({ icon, size = 'medium', ...props }) => (_jsx(Button, { icon: icon, size: size, ...props }));

package/dist/components/icon-button/index.d.ts

@@ -1,2 +1,2 @@
-export { IconButton } from './icon-button';
-export type { IconButtonProps } from './icon-button';
+export { IconButton } from './icon-button.js';
+export type { IconButtonProps } from './icon-button.js';

package/dist/components/icon-button/index.js

@@ -1 +1 @@
-export { IconButton } from './icon-button';
+export { IconButton } from './icon-button.js';

package/dist/components/index.d.ts

@@ -1,17 +1,17 @@
-export * from './avatar';
-export * from './clamp-text';
-export * from './elevator';
-export * from './button';
-export * from './icon-button';
-export * from './textfield';
-export * from './textarea';
-export * from './slider';
-export * from './switch';
-export * from './select';
-export * from './icon';
-export * from './skeleton';
-export * from './stack';
-export * from './surface';
-export * from './spinner';
-export * from './text';
-export * from './title';
+export * from './avatar/index.js';
+export * from './clamp-text/index.js';
+export * from './elevator/index.js';
+export * from './button/index.js';
+export * from './icon-button/index.js';
+export * from './textfield/index.js';
+export * from './textarea/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './select/index.js';
+export * from './icon/index.js';
+export * from './skeleton/index.js';
+export * from './stack/index.js';
+export * from './surface/index.js';
+export * from './spinner/index.js';
+export * from './text/index.js';
+export * from './title/index.js';

package/dist/components/index.js

@@ -1,17 +1,17 @@
-export * from './avatar';
-export * from './clamp-text';
-export * from './elevator';
-export * from './button';
-export * from './icon-button';
-export * from './textfield';
-export * from './textarea';
-export * from './slider';
-export * from './switch';
-export * from './select';
-export * from './icon';
-export * from './skeleton';
-export * from './stack';
-export * from './surface';
-export * from './spinner';
-export * from './text';
-export * from './title';
+export * from './avatar/index.js';
+export * from './clamp-text/index.js';
+export * from './elevator/index.js';
+export * from './button/index.js';
+export * from './icon-button/index.js';
+export * from './textfield/index.js';
+export * from './textarea/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './select/index.js';
+export * from './icon/index.js';
+export * from './skeleton/index.js';
+export * from './stack/index.js';
+export * from './surface/index.js';
+export * from './spinner/index.js';
+export * from './text/index.js';
+export * from './title/index.js';

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

@@ -1,2 +1,2 @@
-export { Select } from './select';
-export type { SelectProps } from './select';
+export { Select } from './select.js';
+export type { SelectProps } from './select.js';

package/dist/components/select/index.js

@@ -1 +1 @@
-export { Select } from './select';
+export { Select } from './select.js';

package/dist/components/select/select-group.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as PrimitiveSelect } from '@base-ui/react/select';
-import { Stack } from '../stack';
-import { Text } from '../text';
+import { Stack } from '../../components/stack/index.js';
+import { Text } from '../../components/text/index.js';
 import { clsx } from 'clsx';
-import { SelectIndicatorSlot } from './select-indicator-slot';
+import { SelectIndicatorSlot } from './select-indicator-slot.js';
 export function SelectGroup({ children, className, label, ...groupProps }) {
     return (_jsxs(PrimitiveSelect.Group, { ...groupProps, className: clsx('Group', className), render: _jsx(Stack, { direction: "column", fillChildren: false, rowGap: "2x-small", vPadding: "2x-small" }), children: [_jsxs(PrimitiveSelect.GroupLabel, { className: "GroupLabel", render: _jsx(Stack, { columnGap: "small", direction: "row", fillChildren: false, hPadding: "small", vAlign: "center" }), children: [_jsx(Text, { size: "x-small", tone: "muted", weight: "semibold", children: label }), _jsx(SelectIndicatorSlot, {})] }), children] }));
 }

package/dist/components/select/select-indicator-slot.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Select as PrimitiveSelect } from '@base-ui/react/select';
-import { Stack } from '../stack';
+import { Stack } from '../../components/stack/index.js';
 const indicatorStackRender = _jsx(Stack, { fillChildren: false, hAlign: "center", inline: true, shrink: false, vAlign: "center" });
 export function SelectIndicatorSlot({ children, interactive = false }) {
     if (interactive) {

package/dist/components/select/select-option.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as PrimitiveSelect } from '@base-ui/react/select';
-import { Icon } from '../icon';
-import { Stack } from '../stack';
-import { Text } from '../text';
+import { Icon } from '../../components/icon/index.js';
+import { Stack } from '../../components/stack/index.js';
+import { Text } from '../../components/text/index.js';
 import { clsx } from 'clsx';
-import { SelectIndicatorSlot } from './select-indicator-slot';
+import { SelectIndicatorSlot } from './select-indicator-slot.js';
 export function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }) {
     return (_jsxs(PrimitiveSelect.Item, { ...itemProps, "aria-label": label, label: label, className: clsx('Option', className), disabled: disabled, render: _jsx(Stack, { columnGap: "small", direction: "row", hPadding: "small", vPadding: "small", vAlign: "center" }), value: value, children: [_jsx(Text, { className: "OptionText", lineHeight: "small", render: _jsx(PrimitiveSelect.ItemText, {}), size: "small", children: children }), _jsx(SelectIndicatorSlot, { interactive: true, children: indicator ?? _jsx(Icon, { name: "Check", size: 16 }) })] }));
 }

package/dist/components/select/select.d.ts

@@ -1,10 +1,10 @@
 import type { FieldRoot } from '@base-ui/react/field';
 import type { SelectRoot } from '@base-ui/react/select';
 import type * as React from 'react';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { SelectGroup } from './select-group';
-import { SelectOption } from './select-option';
-import { SelectSeparator } from './select-separator';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { SelectGroup } from './select-group.js';
+import { SelectOption } from './select-option.js';
+import { SelectSeparator } from './select-separator.js';
 import './select.css';
 /**
  * Public Select props.
@@ -61,6 +61,6 @@ export declare const Select: typeof SelectRootComponent & {
     Group: typeof SelectGroup;
     Separator: typeof SelectSeparator;
 };
-export type { SelectGroupProps } from './select-group';
-export type { SelectOptionProps } from './select-option';
-export type { SelectSeparatorProps } from './select-separator';
+export type { SelectGroupProps } from './select-group.js';
+export type { SelectOptionProps } from './select-option.js';
+export type { SelectSeparatorProps } from './select-separator.js';

package/dist/components/select/select.js

@@ -4,13 +4,13 @@ import { Field } from '@base-ui/react/field';
 import { Select as PrimitiveSelect } from '@base-ui/react/select';
 import { clsx } from 'clsx';
 import { useId } from 'react';
-import { Elevator, Icon, Stack, Surface, Text } from '..';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { FieldHelperCopy } from '../basic-input/field-helper-copy';
-import { IconButton } from '../icon-button';
-import { SelectGroup } from './select-group';
-import { SelectOption } from './select-option';
-import { SelectSeparator } from './select-separator';
+import { Elevator, Icon, Stack, Surface, Text } from '../index.js';
+import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
+import { FieldHelperCopy } from '../../components/basic-input/field-helper-copy.js';
+import { IconButton } from '../../components/icon-button/index.js';
+import { SelectGroup } from './select-group.js';
+import { SelectOption } from './select-option.js';
+import { SelectSeparator } from './select-separator.js';
 import './select.css';
 function SelectRootComponent({ children, className, description, dirty, disabled, error, icon = _jsx(Icon, { name: "ChevronExpandY", size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
     const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(selectRootProps);

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

@@ -1,2 +1,2 @@
-export { Skeleton } from './skeleton';
-export type { SkeletonProps } from './skeleton';
+export { Skeleton } from './skeleton.js';
+export type { SkeletonProps } from './skeleton.js';

package/dist/components/skeleton/index.js

@@ -1 +1 @@
-export { Skeleton } from './skeleton';
+export { Skeleton } from './skeleton.js';

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

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

package/dist/components/skeleton/skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { resolveThemeValue } from '../../core/theme/resolve-theme-value';
+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 }) => {

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

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

package/dist/components/slider/index.js

@@ -1 +1 @@
-export { Slider } from './slider';
+export { Slider } from './slider.js';

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

@@ -1,7 +1,7 @@
 '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 '../stack';
+import { Stack } from '../../components/stack/index.js';
 import './slider-control.css';
 function resolveThumbAriaLabels(thumbAriaLabel, isRange) {
     if (thumbAriaLabel === undefined) {

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

@@ -1,6 +1,6 @@
 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';
+import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
 import type * as React from 'react';
 import './slider-control.css';
 import './slider.css';

package/dist/components/slider/slider.js

@@ -2,14 +2,14 @@
 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 '../basic-input/field-helper-copy';
-import { Stack } from '../stack';
-import { Text } from '../text';
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+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';
+import { SliderControl } from './slider-control.js';
 import './slider-control.css';
-import { isRangeSlider } from './slider-utils';
+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);

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

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

package/dist/components/spinner/index.js

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

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

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

package/dist/components/spinner/spinner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+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 }) => {

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

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

package/dist/components/stack/index.js

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

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

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
-import type { ThemeTypes } from '@foundation/platforms/web/vira/types';
-import type { IntrinsicViraProps } from '@react/src/core/props/intrinsic-vira-props';
+import type { ThemeTypes } from '@viraui/foundation/vira/types';
 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'];

package/dist/components/stack/stack.js

@@ -1,9 +1,9 @@
 '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 { 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);

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

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

package/dist/components/surface/index.js

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

package/dist/components/surface/surface.css

@@ -12,7 +12,6 @@
     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)
@@ -51,10 +50,20 @@
     &[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;
+      }
+    }
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    :scope[data-surface-has-hover-color='true']:hover {
+  @keyframes surface-background-hover {
+    from {
+      background: var(--surface-background);
+    }
+    to {
       background: var(--surface-background-hover);
     }
   }

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

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import type { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 import './surface.css';
-import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+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;

package/dist/components/surface/surface.js

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