@viraui/react 0.0.16 → 0.0.18

package/dist/components/select/select.css

@@ -1,193 +1 @@
-@scope (.Select) {
-  :scope {
-    --input-height: var(--space-x-large);
-    --control-group-background: var(--base-1);
-    --control-group-color: var(--global-foreground);
-    --control-group-border-color: var(--global-contrast);
-    --control-group-border-radius: var(--radius-small);
-    --select-trigger-padding-inline-start: var(--space-small);
-    --select-trigger-padding-inline-end: var(--space-x-small);
-
-    > .Trigger {
-      box-sizing: border-box;
-      inline-size: 100%;
-      min-inline-size: 0;
-      block-size: var(--input-height);
-      padding-inline: calc(
-          var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)
-        )
-        var(--select-trigger-padding-inline-end);
-      border: 1px solid var(--control-group-border-color);
-      border-radius: var(--control-group-border-radius);
-      background: var(--control-group-background);
-      color: var(--control-group-color);
-      font: inherit;
-      text-align: start;
-      cursor: pointer;
-
-      &:focus-visible {
-        outline: 2px solid var(--global-foreground);
-        outline-offset: 2px;
-      }
-
-      &[data-popup-open] {
-        outline: none;
-      }
-
-      &:disabled,
-      &[data-disabled] {
-        --control-group-background: var(--global-disabled-background);
-        --control-group-border-color: transparent;
-        --control-group-color: var(--global-disabled-foreground);
-
-        box-shadow: none;
-        cursor: not-allowed;
-      }
-
-      > .Value {
-        --text-fluid-factor: 0;
-        --text-font-size: var(--font-scale-body-small);
-
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &[data-placeholder] {
-          color: var(--global-disabled-foreground);
-        }
-      }
-
-      > .Icon {
-        font-size: var(--font-scale-body-small);
-        pointer-events: none;
-      }
-    }
-
-    &[data-invalid] > .Trigger:not(:disabled):not([data-disabled]) {
-      --control-group-border-color: var(--highlight-red);
-
-      box-shadow: none;
-      outline-color: oklab(from var(--highlight-red) l a b / 0.5);
-    }
-
-    &:has([required]) > .Label::after {
-      content: ' ＊';
-      color: var(--highlight-red);
-    }
-
-    > .Label,
-    > .Description {
-      padding-inline: calc((var(--control-group-border-radius) + 0px) / 2);
-    }
-  }
-}
-
-@scope (.SelectPopup) {
-  :scope {
-    --select-list-border-radius: var(--radius-medium);
-    --select-list-padding: var(--space-x-small);
-    box-sizing: border-box;
-    min-inline-size: var(--anchor-width);
-    overflow: visible;
-    color: var(--global-foreground);
-    outline: none;
-    position: relative;
-
-    > .ScrollArrow {
-      position: absolute;
-      inset-inline: 0;
-      z-index: 1;
-      inline-size: 100%;
-      block-size: var(--space-large);
-      cursor: default;
-      background: var(--base-1);
-
-      > .Button {
-        pointer-events: none;
-      }
-
-      &.ScrollArrow--up {
-        inset-block-start: 0;
-        border-block-end: 1px solid var(--global-contrast);
-        border-radius: var(--select-list-border-radius) var(--select-list-border-radius) 0 0;
-      }
-
-      &.ScrollArrow--down {
-        inset-block-end: 0;
-        border-block-start: 1px solid var(--global-contrast);
-        border-radius: 0 0 var(--select-list-border-radius) var(--select-list-border-radius);
-      }
-    }
-
-    > .List {
-      box-sizing: border-box;
-      inline-size: 100%;
-      max-block-size: var(--available-height);
-      overflow-y: auto;
-      scroll-padding-block: var(--select-list-padding);
-      list-style: none;
-      overscroll-behavior: contain;
-
-      &:focus,
-      &:focus-visible {
-        outline: none;
-      }
-
-      > .Option,
-      > .Group > .Option {
-        border-radius: calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));
-        cursor: pointer;
-
-        &:focus {
-          outline: none;
-        }
-
-        &:focus-visible {
-          outline: 2px solid var(--global-foreground);
-          outline-offset: 0;
-        }
-
-        &[data-highlighted],
-        &:hover {
-          background: var(--base-2);
-        }
-
-        &[data-disabled] {
-          color: var(--global-disabled-foreground);
-          cursor: not-allowed;
-        }
-
-        > .Indicator {
-          inline-size: var(--space-medium);
-          color: var(--global-primary);
-          opacity: 0;
-          transition:
-            opacity var(--duration-fast) var(--easing-standard),
-            transform var(--duration-fast) var(--easing-standard);
-
-          &[data-selected] {
-            opacity: 1;
-          }
-        }
-      }
-
-      > .Group {
-        & + & {
-          margin-block-start: var(--space-medium);
-        }
-
-        > .GroupLabel {
-          > .Indicator {
-            inline-size: var(--space-medium);
-          }
-        }
-      }
-
-      > .Separator {
-        block-size: 1px;
-        margin-block: var(--space-small);
-        margin-inline: var(--space-small);
-        background: var(--base-3);
-      }
-    }
-  }
-}
+.select-module_Select_eXv4Y{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-small);--select-trigger-padding-inline-start:var(--space-small);--select-trigger-padding-inline-end:var(--space-x-small);--field-label-padding-inline:calc((var(--control-group-border-radius) + 0px) / 2);&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]>.select-module_Trigger_-wBsg:not(:disabled):not([data-disabled]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.select-module_Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);padding-inline:calc(var(--select-trigger-padding-inline-start) + ((var(--control-group-border-radius) + 0px) / 4)) var(--select-trigger-padding-inline-end);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);background:var(--control-group-background);color:var(--control-group-color);font:inherit;text-align:start;cursor:pointer;&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--control-group-background:var(--global-disabled-background);--control-group-border-color:transparent;--control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.select-module_Value_uWHPX{--text-fluid-factor:0;--text-font-size:var(--font-scale-body-small);overflow:hidden;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.select-module_Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.select-module_Description_OmwmV{padding-inline:calc((var(--control-group-border-radius) + 0px) / 2)}.select-module_SelectPopup_UzGXL{--select-list-border-radius:var(--radius-medium);--select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative}.select-module_ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1)}.select-module_ScrollButton_sHBOa{pointer-events:none}.select-module_ScrollArrowUp_DGXS-{inset-block-start:0;border-block-end:1px solid var(--global-contrast);border-radius:var(--select-list-border-radius) var(--select-list-border-radius) 0 0}.select-module_ScrollArrowDown_vhJy0{inset-block-end:0;border-block-start:1px solid var(--global-contrast);border-radius:0 0 var(--select-list-border-radius) var(--select-list-border-radius)}.select-module_List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);overflow-y:auto;scroll-padding-block:var(--select-list-padding);list-style:none;overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.select-module_Option_KgYqz{border-radius:calc((var(--select-list-border-radius) + 0px) - var(--select-list-padding));cursor:pointer;&:focus{outline:none}&:focus-visible{outline:2px solid var(--global-foreground);outline-offset:0}&:hover,&[data-highlighted]{background:var(--base-2)}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}.select-module_Indicator_YNUuz{inline-size:var(--space-medium);color:var(--global-primary);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}.select-module_Group_xzkuA+.select-module_Group_xzkuA{margin-block-start:var(--space-medium)}.select-module_Separator_Q-ri9{block-size:1px;margin-block:var(--space-small);margin-inline:var(--space-small);background:var(--base-3)}

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

@@ -1,11 +1,10 @@
-import type { FieldRoot } from '@base-ui/react/field';
-import type { SelectRoot } from '@base-ui/react/select';
+import { FieldRoot } from '@base-ui/react/field';
+import { SelectRoot } from '@base-ui/react/select';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { SelectGroup } from './select-group';
+import { SelectOption } from './select-option';
+import { SelectSeparator } from './select-separator';
 import type * as React from 'react';
-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.
  *
@@ -17,7 +16,7 @@ import './select.css';
  */
 export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'> & IntrinsicViraProps & {
     /**
-     * Visible label rendered with `Field.Label` and `Text`.
+     * Visible label rendered with shared internal `FieldLabel`.
      *
      * @default No label is rendered.
      */
@@ -61,6 +60,6 @@ export declare const Select: typeof SelectRootComponent & {
     Group: typeof SelectGroup;
     Separator: typeof SelectSeparator;
 };
-export type { SelectGroupProps } from './select-group.js';
-export type { SelectOptionProps } from './select-option.js';
-export type { SelectSeparatorProps } from './select-separator.js';
+export type { SelectGroupProps } from './select-group';
+export type { SelectOptionProps } from './select-option';
+export type { SelectSeparatorProps } from './select-separator';

package/dist/components/select/select.js

@@ -1,35 +1,159 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 '../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';
+"use client";
 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);
-    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restSelectProps } = componentProps;
-    const fieldLabelId = useId();
-    const listAccessibleNameProps = {};
-    if (ariaLabel !== undefined) {
-        listAccessibleNameProps['aria-label'] = ariaLabel;
-    }
-    else if (ariaLabelledBy !== undefined) {
-        listAccessibleNameProps['aria-labelledby'] = ariaLabelledBy;
-    }
-    else if (label !== undefined) {
-        listAccessibleNameProps['aria-labelledby'] = fieldLabelId;
-    }
-    return (_jsxs(Field.Root, { ...intrinsicAttributes, className: clsx('Select', className), 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: [label && (_jsx(Text, { size: "small", weight: "semibold", className: "Label", render: _jsx(Field.Label, { id: fieldLabelId }), children: label })), _jsxs(PrimitiveSelect.Root, { ...restSelectProps, disabled: disabled, name: name, children: [_jsxs(PrimitiveSelect.Trigger, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: "Trigger", disabled: disabled, ref: ref, render: _jsx(Stack, { direction: "row", render: _jsx("button", { type: "button" }), vAlign: "center" }), children: [_jsx(Text, { className: "Value", lineHeight: "small", render: _jsx(PrimitiveSelect.Value, { placeholder: placeholder }), size: "small", whiteSpace: "nowrap" }), _jsx(PrimitiveSelect.Icon, { className: "Icon", "data-grow": "false", render: _jsx(Stack, { fillChildren: false, hAlign: "center", hPadding: "x-small", inline: true, shrink: false, vAlign: "center" }), children: icon })] }), _jsx(PrimitiveSelect.Portal, { children: _jsx(PrimitiveSelect.Positioner, { alignItemWithTrigger: true, children: _jsxs(PrimitiveSelect.Popup, { className: "SelectPopup", children: [_jsx(PrimitiveSelect.ScrollUpArrow, { className: "ScrollArrow ScrollArrow--up", render: _jsx(Stack, { fillChildren: false, hAlign: "center", vAlign: "center" }), children: _jsx(IconButton, { "aria-label": "Scroll list up", icon: _jsx(Icon, { name: "ChevronUp" }), size: "small", tabIndex: -1, variant: "flat" }) }), _jsx(Elevator, { resting: 1, children: _jsx(PrimitiveSelect.List, { ...listAccessibleNameProps, className: "List", render: _jsx(Surface, { border: "all", color: 1, hPadding: "x-small", radius: "medium", vPadding: "x-small" }), children: children }) }), _jsx(PrimitiveSelect.ScrollDownArrow, { className: "ScrollArrow ScrollArrow--down", render: _jsx(Stack, { fillChildren: false, hAlign: "center", vAlign: "center" }), children: _jsx(IconButton, { "aria-label": "Scroll list down", icon: _jsx(Icon, { name: "ChevronDown" }), size: "small", tabIndex: -1, variant: "flat" }) })] }) }) })] }), _jsx(FieldHelperCopy, { description: description, error: error })] }));
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Elevator } from "../elevator/elevator.js";
+import { IconButton } from "../icon-button/icon-button.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 select_module_default from "./select.module.js";
+import { SelectGroup } from "./select-group.js";
+import { Icon } from "../icon/icon.js";
+import { SelectOption } from "./select-option.js";
+import { SelectSeparator } from "./select-separator.js";
+import { Surface } from "../surface/surface.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Field } from "@base-ui/react/field";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select.tsx
+function SelectRootComponent({ children, className, description, dirty, disabled, error, icon = /* @__PURE__ */ jsx(Icon, {
+	name: "ChevronExpandY",
+	size: 16
+}), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(selectRootProps);
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = componentProps;
+	const fieldLabelId = useId();
+	const listAccessibleNameProps = {};
+	if (ariaLabel !== void 0) listAccessibleNameProps["aria-label"] = ariaLabel;
+	else if (ariaLabelledBy !== void 0) listAccessibleNameProps["aria-labelledby"] = ariaLabelledBy;
+	else if (label !== void 0) listAccessibleNameProps["aria-labelledby"] = fieldLabelId;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		...intrinsicAttributes,
+		className: clsx(select_module_default.Select, className),
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small"
+		}),
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				"data-field-label": "",
+				id: fieldLabelId,
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsxs(Select.Root, {
+				...restSelectProps,
+				disabled,
+				name,
+				children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					className: select_module_default.Trigger,
+					disabled,
+					ref,
+					render: /* @__PURE__ */ jsx(Stack, {
+						direction: "row",
+						render: /* @__PURE__ */ jsx("button", { type: "button" }),
+						vAlign: "center"
+					}),
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: select_module_default.Value,
+						lineHeight: "small",
+						render: /* @__PURE__ */ jsx(Select.Value, { placeholder }),
+						size: "small",
+						whiteSpace: "nowrap"
+					}), /* @__PURE__ */ jsx(Select.Icon, {
+						className: select_module_default.Icon,
+						"data-grow": "false",
+						render: /* @__PURE__ */ jsx(Stack, {
+							fillChildren: false,
+							hAlign: "center",
+							hPadding: "x-small",
+							inline: true,
+							shrink: false,
+							vAlign: "center"
+						}),
+						children: icon
+					})]
+				}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+					alignItemWithTrigger: true,
+					children: /* @__PURE__ */ jsxs(Select.Popup, {
+						className: select_module_default.SelectPopup,
+						children: [
+							/* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowUp),
+								render: /* @__PURE__ */ jsx(Stack, {
+									fillChildren: false,
+									hAlign: "center",
+									vAlign: "center"
+								}),
+								children: /* @__PURE__ */ jsx(IconButton, {
+									"aria-label": "Scroll list up",
+									className: select_module_default.ScrollButton,
+									icon: /* @__PURE__ */ jsx(Icon, { name: "ChevronUp" }),
+									size: "small",
+									tabIndex: -1,
+									variant: "flat"
+								})
+							}),
+							/* @__PURE__ */ jsx(Elevator, {
+								resting: 1,
+								children: /* @__PURE__ */ jsx(Select.List, {
+									...listAccessibleNameProps,
+									className: select_module_default.List,
+									render: /* @__PURE__ */ jsx(Surface, {
+										border: "all",
+										color: 1,
+										hPadding: "x-small",
+										radius: "medium",
+										vPadding: "x-small"
+									}),
+									children
+								})
+							}),
+							/* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+								className: clsx(select_module_default.ScrollArrow, select_module_default.ScrollArrowDown),
+								render: /* @__PURE__ */ jsx(Stack, {
+									fillChildren: false,
+									hAlign: "center",
+									vAlign: "center"
+								}),
+								children: /* @__PURE__ */ jsx(IconButton, {
+									"aria-label": "Scroll list down",
+									className: select_module_default.ScrollButton,
+									icon: /* @__PURE__ */ jsx(Icon, { name: "ChevronDown" }),
+									size: "small",
+									tabIndex: -1,
+									variant: "flat"
+								})
+							})
+						]
+					})
+				}) })]
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: select_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
 }
-export const Select = Object.assign(SelectRootComponent, {
-    Option: SelectOption,
-    Group: SelectGroup,
-    Separator: SelectSeparator,
+var Select$1 = Object.assign(SelectRootComponent, {
+	Option: SelectOption,
+	Group: SelectGroup,
+	Separator: SelectSeparator
 });
+//#endregion
+export { Select$1 as Select };

package/dist/components/select/select.module.js

@@ -0,0 +1,19 @@
+var select_module_default = {
+	Select: "select-module_Select_eXv4Y",
+	Trigger: "select-module_Trigger_-wBsg",
+	Value: "select-module_Value_uWHPX",
+	Icon: "select-module_Icon_EOwki",
+	Description: "select-module_Description_OmwmV",
+	SelectPopup: "select-module_SelectPopup_UzGXL",
+	ScrollArrow: "select-module_ScrollArrow_kHlEi",
+	ScrollButton: "select-module_ScrollButton_sHBOa",
+	ScrollArrowUp: "select-module_ScrollArrowUp_DGXS-",
+	ScrollArrowDown: "select-module_ScrollArrowDown_vhJy0",
+	List: "select-module_List_jdUWx",
+	Option: "select-module_Option_KgYqz",
+	Indicator: "select-module_Indicator_YNUuz",
+	Group: "select-module_Group_xzkuA",
+	Separator: "select-module_Separator_Q-ri9"
+};
+//#endregion
+export { select_module_default as default };

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

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

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 };