@viraui/react 0.0.16 → 0.0.18

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

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

package/dist/components/index.d.ts

@@ -1,17 +1,20 @@
-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';
+export * from './avatar';
+export * from './clamp-text';
+export * from './elevator';
+export * from './button';
+export * from './icon-button';
+export * from './linear-progress';
+export * from './textfield';
+export * from './textarea';
+export * from './slider';
+export * from './switch';
+export * from './checkbox';
+export * from './radio';
+export * from './select';
+export * from './icon';
+export * from './skeleton';
+export * from './stack';
+export * from './surface';
+export * from './spinner';
+export * from './text';
+export * from './title';

package/dist/components/linear-progress/index.d.ts

@@ -0,0 +1,2 @@
+export { LinearProgress } from './linear-progress';
+export type { LinearProgressProps } from './linear-progress';

package/dist/components/linear-progress/linear-progress.css

@@ -0,0 +1 @@
+.linear-progress-module_LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .linear-progress-module_Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .linear-progress-module_Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:transparent;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:linear-progress-module_linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes linear-progress-module_linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

package/dist/components/linear-progress/linear-progress.d.ts

@@ -0,0 +1,44 @@
+import { ProgressRoot } from '@base-ui/react/progress';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public LinearProgress props.
+ *
+ * Includes Base UI progress root props such as `value`, `min`, `max`, `format`,
+ * and `getAriaValueText`, plus optional label, description, and value display.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type LinearProgressProps = ProgressRoot.Props & {
+    /**
+     * Adds `data-grow="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible label rendered through `Progress.Label` with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Static helper copy rendered with `Text` below the progress track.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Renders the formatted current value via `Progress.Value` and `Text`.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+};
+export declare const LinearProgress: React.FC<LinearProgressProps>;

package/dist/components/linear-progress/linear-progress.guide.json

@@ -0,0 +1,27 @@
+{
+  "name": "LinearProgress",
+  "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
+  "whenToUse": [
+    "Use for task completion with a known percentage or bounded numeric value.",
+    "Use with `value={null}` when progress is active but the amount complete is unknown.",
+    "Use with a label when the progress bar needs a visible task name."
+  ],
+  "whenNotToUse": [
+    "Use Spinner for a small standalone loading affordance without task context.",
+    "Use Skeleton when representing loading content layout.",
+    "Use Slider when the user needs to choose or adjust a value."
+  ],
+  "accessibility": [
+    "Provide a visible `label` or an accessible name through Base UI progress props when the task is not otherwise clear.",
+    "Use determinate numeric `value` when actual progress is known.",
+    "Use `value={null}` only for truly indeterminate work."
+  ],
+  "antiPatterns": [
+    "Do not use LinearProgress as an interactive value control.",
+    "Do not add fake percentages for work where progress is unknown.",
+    "Do not model invalid progress; Base UI Progress does not expose an invalid state.",
+    "Do not model disabled progress; Base UI Progress does not expose a disabled state.",
+    "Do not hide the task label when multiple progress indicators are visible."
+  ],
+  "related": ["Slider", "Spinner", "Skeleton", "Text"]
+}

package/dist/components/linear-progress/linear-progress.js

@@ -0,0 +1,61 @@
+"use client";
+import './linear-progress.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Text } from "../text/text.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import linear_progress_module_default from "./linear-progress.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/linear-progress/linear-progress.tsx
+var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(progressRootProps);
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(linear_progress_module_default.LinearProgress, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				fillChildren: false,
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "end",
+					shrink: false,
+					render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: linear_progress_module_default.Track,
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				className: linear_progress_module_default.Description,
+				size: "small",
+				tone: "muted",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { LinearProgress };

package/dist/components/linear-progress/linear-progress.module.js

@@ -0,0 +1,8 @@
+var linear_progress_module_default = {
+	LinearProgress: "linear-progress-module_LinearProgress_-KN0j",
+	"linear-progress-indeterminate": "linear-progress-module_linear-progress-indeterminate_g0cSO",
+	Track: "linear-progress-module_Track_qUz8P",
+	Indicator: "linear-progress-module_Indicator_maaZF"
+};
+//#endregion
+export { linear_progress_module_default as default };

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

@@ -0,0 +1,4 @@
+export { Radio } from './radio';
+export { RadioGroup } from './radio-group';
+export type { RadioProps } from './radio';
+export type { RadioGroupProps } from './radio-group';

package/dist/components/radio/radio-group.d.ts

@@ -0,0 +1,44 @@
+import { FieldRoot, RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public RadioGroup props.
+ *
+ * Thin wrapper around Base UI `RadioGroup` with group-level Field validation.
+ * Layout and spacing between options are owned by the consumer.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioGroupProps = RadioGroupPrimitive.Props & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible group label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Group helper copy rendered below the options while valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Group error copy rendered below the options when invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

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

@@ -0,0 +1,54 @@
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.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 radio_module_default from "./radio.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, Fieldset, RadioGroup } from "@base-ui/react";
+//#region src/components/radio/radio-group.tsx
+var RadioGroup$1 = ({ children, className, description, error, invalid, label, name, disabled, dirty, touched, validate, validationDebounceTime, validationMode, ...radioGroupProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(radioGroupProps);
+	return /* @__PURE__ */ jsx(Field.Root, {
+		...intrinsicAttributes,
+		className: radio_module_default.RadioGroup,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			className: radio_module_default.RadioFieldset,
+			fillChildren: false,
+			render: /* @__PURE__ */ jsx(Fieldset.Root, { disabled }),
+			rowGap: "small",
+			children: [
+				label && /* @__PURE__ */ jsx(Fieldset.Legend, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}),
+				(description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
+					description,
+					error
+				}),
+				/* @__PURE__ */ jsx(RadioGroup, {
+					...componentProps,
+					className,
+					disabled,
+					render: /* @__PURE__ */ jsx(Stack, {
+						fillChildren: false,
+						vPadding: ["small", 0],
+						rowGap: "small"
+					}),
+					name,
+					children
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio/radio.css

@@ -0,0 +1 @@
+.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:50%;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:50%;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,44 @@
+import { RadioRoot } from '@base-ui/react/radio';
+import { StackProps } from '..';
+import type * as React from 'react';
+/**
+ * Public Radio props.
+ *
+ * Self-contained option row for use inside `RadioGroup`. Group-level `name`,
+ * `invalid`, and `error` belong on `RadioGroup`, not on individual options.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioProps = RadioRoot.Props & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` for this option.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Controls the visual radio size.
+     *
+     * @default 'small'
+     */
+    size?: 'regular' | 'small';
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackProps['vPadding'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackProps['hPadding'];
+};
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/radio/radio.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "Radio",
+  "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
+  "whenToUse": [
+    "Single selection from a small set of related options",
+    "Card-style or custom layouts where each option is wrapped in Surface or consumer markup",
+    "Form fields that require one answer from a named group"
+  ],
+  "whenNotToUse": [
+    "Independent boolean toggles (use Checkbox or Switch)",
+    "Multi-select sets (use Checkbox)",
+    "Options rendered outside a RadioGroup wrapper"
+  ],
+  "accessibility": [
+    "Wrap options in RadioGroup so the group exposes a shared name",
+    "Provide visible label or aria-label on each option so radios have accessible names",
+    "Surface group invalid state and error copy through RadioGroup, not individual Radio options"
+  ],
+  "antiPatterns": [
+    "Rendering Radio outside RadioGroup",
+    "Putting invalid or error on a single Radio instead of RadioGroup",
+    "Expecting RadioGroup to add spacing or grid layout between options",
+    "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
+  ],
+  "related": ["Checkbox", "Surface", "Stack"]
+}

package/dist/components/radio/radio.js

@@ -0,0 +1,45 @@
+"use client";
+import './radio.css';
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import radio_module_default from "./radio.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/radio/radio.tsx
+var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
+	const hasTextDescription = Boolean(description);
+	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		columnGap: size === "small" ? "small" : "medium",
+		fillChildren: false,
+		vAlign: hasTextDescription ? "start" : "center",
+		...hPadding !== void 0 ? { hPadding } : {},
+		...vPadding !== void 0 ? { vPadding } : {},
+		children: [/* @__PURE__ */ jsx(Radio.Root, {
+			...radioRootProps,
+			className: clsx(radio_module_default.RadioRoot, className),
+			"data-size": size,
+			disabled,
+			id,
+			ref,
+			value,
+			children: /* @__PURE__ */ jsx(Radio.Indicator, {
+				className: radio_module_default.Indicator,
+				children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
+			})
+		}), label || description ? /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: size === "small" ? "2x-small" : "x-small",
+			children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+				size: size === "small" ? "small" : "medium",
+				children: label
+			}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
+		}) : null]
+	}) }) });
+};
+//#endregion
+export { Radio$1 as Radio };

package/dist/components/radio/radio.module.js

@@ -0,0 +1,9 @@
+var radio_module_default = {
+	RadioGroup: "radio-module_RadioGroup_vnd3F",
+	RadioFieldset: "radio-module_RadioFieldset_g50K8",
+	RadioRoot: "radio-module_RadioRoot_3uvvn",
+	Indicator: "radio-module_Indicator_Ecavw",
+	Disk: "radio-module_Disk_pV-Q1"
+};
+//#endregion
+export { radio_module_default as default };

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

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

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

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

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