@viraui/react 0.0.15 → 0.0.17

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

@@ -1,10 +1,38 @@
-'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 '../../components/stack/index.js';
-import { Text } from '../../components/text/index.js';
-import { clsx } from 'clsx';
-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] }));
+"use client";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import select_module_default from "./select.module.js";
+import { SelectIndicatorSlot } from "./select-indicator-slot.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select-group.tsx
+function SelectGroup({ children, className, label, ...groupProps }) {
+	return /* @__PURE__ */ jsxs(Select.Group, {
+		...groupProps,
+		className: clsx(select_module_default.Group, className),
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "2x-small",
+			vPadding: "2x-small"
+		}),
+		children: [/* @__PURE__ */ jsxs(Select.GroupLabel, {
+			render: /* @__PURE__ */ jsx(Stack, {
+				columnGap: "small",
+				direction: "row",
+				fillChildren: false,
+				hPadding: "small",
+				vAlign: "center"
+			}),
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: "x-small",
+				tone: "muted",
+				weight: "semibold",
+				children: label
+			}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {})]
+		}), children]
+	});
 }
+//#endregion
+export { SelectGroup };

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

@@ -1,11 +1,34 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Select as PrimitiveSelect } from '@base-ui/react/select';
-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) {
-        return (_jsx(PrimitiveSelect.ItemIndicator, { className: "Indicator", "data-grow": "false", keepMounted: true, render: indicatorStackRender, children: children }));
-    }
-    return (_jsx(Stack, { "aria-hidden": true, className: "Indicator", grow: false, fillChildren: false, hAlign: "center", inline: true, shrink: false, vAlign: "center" }));
+"use client";
+import { Stack } from "../stack/stack.js";
+import select_module_default from "./select.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select-indicator-slot.tsx
+var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
+	fillChildren: false,
+	hAlign: "center",
+	inline: true,
+	shrink: false,
+	vAlign: "center"
+});
+function SelectIndicatorSlot({ children, interactive = false }) {
+	if (interactive) return /* @__PURE__ */ jsx(Select.ItemIndicator, {
+		className: select_module_default.Indicator,
+		"data-grow": "false",
+		keepMounted: true,
+		render: indicatorStackRender,
+		children
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		"aria-hidden": true,
+		className: select_module_default.Indicator,
+		grow: false,
+		fillChildren: false,
+		hAlign: "center",
+		inline: true,
+		shrink: false,
+		vAlign: "center"
+	});
 }
+//#endregion
+export { SelectIndicatorSlot };

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

@@ -1,4 +1,4 @@
-import type { SelectItem } from '@base-ui/react/select';
+import { SelectItem } from '@base-ui/react/select';
 import type * as React from 'react';
 /**
  * Public Select.Option props.

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

@@ -1,11 +1,41 @@
-'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 '../../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.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 }) })] }));
+"use client";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import select_module_default from "./select.module.js";
+import { SelectIndicatorSlot } from "./select-indicator-slot.js";
+import { Icon } from "../icon/icon.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select-option.tsx
+function SelectOption({ children, className, disabled, indicator, label, value, ...itemProps }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		...itemProps,
+		"aria-label": label,
+		label,
+		className: clsx(select_module_default.Option, className),
+		disabled,
+		render: /* @__PURE__ */ jsx(Stack, {
+			columnGap: "small",
+			direction: "row",
+			hPadding: "small",
+			vPadding: "small",
+			vAlign: "center"
+		}),
+		value,
+		children: [/* @__PURE__ */ jsx(Text, {
+			lineHeight: "small",
+			render: /* @__PURE__ */ jsx(Select.ItemText, {}),
+			size: "small",
+			children
+		}), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
+			interactive: true,
+			children: indicator ?? /* @__PURE__ */ jsx(Icon, {
+				name: "Check",
+				size: 16
+			})
+		})]
+	});
 }
+//#endregion
+export { SelectOption };

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

@@ -1,7 +1,15 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Select as PrimitiveSelect } from '@base-ui/react/select';
-import { clsx } from 'clsx';
-export function SelectSeparator({ className, orientation = 'horizontal', ...separatorProps }) {
-    return (_jsx(PrimitiveSelect.Separator, { ...separatorProps, className: clsx('Separator', className), orientation: orientation }));
+"use client";
+import select_module_default from "./select.module.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select-separator.tsx
+function SelectSeparator({ className, orientation = "horizontal", ...separatorProps }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		...separatorProps,
+		className: clsx(select_module_default.Separator, className),
+		orientation
+	});
 }
+//#endregion
+export { SelectSeparator };

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