@viraui/react 0.0.21 → 0.0.23

package/dist/components/checkbox/checkbox.js

@@ -1,75 +1,61 @@
-"use client";
 import './checkbox.css';
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import checkbox_module_default from "./checkbox.module.js";
 import { Icon } from "../icon/icon.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, Field } from "@base-ui/react";
+import { Field } from "@base-ui/react/field";
+import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/checkbox/checkbox.tsx
-var Checkbox$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...checkboxRootProps }) => {
+var Checkbox$1 = ({ className, description, disabled, error, label, ref, size = "small", vPadding, hPadding, value, ...checkboxRootProps }) => {
 	const hasTextDescription = Boolean(description || error);
 	const iconSize = size === "small" ? 12 : 16;
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(checkboxRootProps);
-	return /* @__PURE__ */ jsx(Field.Root, {
-		...intrinsicAttributes,
+	return /* @__PURE__ */ jsx(Field.Item, {
 		className: checkbox_module_default.Checkbox,
-		dirty,
-		disabled,
-		invalid,
-		name,
-		touched,
-		validate,
-		validationDebounceTime,
-		validationMode,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "row",
-			columnGap: size === "small" ? "small" : "medium",
-			fillChildren: false,
-			vAlign: hasTextDescription ? "start" : "center"
-		}),
-		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(Checkbox.Root, {
-				...componentProps,
-				className: clsx(checkbox_module_default.CheckboxRoot, className),
-				"data-size": size,
-				disabled,
-				name,
-				ref,
-				children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
-					className: checkbox_module_default.Indicator,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
-						name: "Check",
-						size: iconSize
-					}), /* @__PURE__ */ jsx(Icon, {
-						className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
-						name: "Minus",
-						size: iconSize
-					})]
-				})
-			}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
+		children: /* @__PURE__ */ jsx(Field.Label, {
+			className: checkbox_module_default.Label,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				columnGap: size === "small" ? "small" : "medium",
 				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,
-					error
-				})]
-			}) : null]
-		}) })
+				vAlign: hasTextDescription ? "start" : "center",
+				hPadding,
+				vPadding,
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					...checkboxRootProps,
+					className: clsx(checkbox_module_default.CheckboxRoot, className),
+					"data-size": size,
+					disabled,
+					ref,
+					value,
+					children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+						className: checkbox_module_default.Indicator,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							className: clsx(checkbox_module_default.Icon, checkbox_module_default.CheckIcon),
+							name: "Check",
+							size: iconSize
+						}), /* @__PURE__ */ jsx(Icon, {
+							className: clsx(checkbox_module_default.Icon, checkbox_module_default.MinusIcon),
+							name: "Minus",
+							size: iconSize
+						})]
+					})
+				}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "column",
+					fillChildren: false,
+					rowGap: "small",
+					children: [label ? /* @__PURE__ */ jsx(FieldLabel, {
+						size: size === "small" ? "small" : "medium",
+						children: label
+					}) : null, /* @__PURE__ */ jsx(FieldHelperCopy, {
+						description,
+						error
+					})]
+				}) : null]
+			})
+		})
 	});
 };
 //#endregion

package/dist/components/checkbox/checkbox.module.js

@@ -1,10 +1,11 @@
 var checkbox_module_default = {
-	Checkbox: "checkbox-module_Checkbox_3oGip",
-	CheckboxRoot: "checkbox-module_CheckboxRoot_PeyF5",
-	Indicator: "checkbox-module_Indicator_C-k-l",
-	Icon: "checkbox-module_Icon_926Sa",
-	MinusIcon: "checkbox-module_MinusIcon_Q57pY",
-	CheckIcon: "checkbox-module_CheckIcon_XqUcs"
+	Checkbox: "viraui__checkbox-module__Checkbox_3oGip",
+	Label: "viraui__checkbox-module__Label_n9HL7",
+	CheckboxRoot: "viraui__checkbox-module__CheckboxRoot_PeyF5",
+	Indicator: "viraui__checkbox-module__Indicator_C-k-l",
+	Icon: "viraui__checkbox-module__Icon_926Sa",
+	MinusIcon: "viraui__checkbox-module__MinusIcon_Q57pY",
+	CheckIcon: "viraui__checkbox-module__CheckIcon_XqUcs"
 };
 //#endregion
 export { checkbox_module_default as default };

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

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
+export { CheckboxGroup } from './checkbox-group';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxGroupProps } from './checkbox-group';

package/dist/components/chip/chip.css

@@ -1 +1 @@
-.chip-module_Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:transparent;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:transparent;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.chip-module_Content_7mLuL{min-inline-size:0;min-block-size:100%}.chip-module_IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.chip-module_Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
+.viraui__chip-module__Chip_2D18T{--chip-background:var(--global-primary);--chip-border-color:transparent;--chip-color:contrast-color(var(--global-primary));--chip-height:var(--space-large);--chip-icon-size:0.9em;--chip-color-bg-opacity:13%;--chip-color-border-opacity:0%;min-block-size:var(--chip-height);block-size:var(--chip-height);border:1px solid var(--chip-border-color);border-radius:var(--radius-infinite);background:var(--chip-background);color:var(--chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;&[data-variant=primary]{--chip-background:var(--global-primary);--chip-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--chip-background:var(--global-contrast);--chip-color:var(--base-6)}&[data-variant=outline]{--chip-background:transparent;--chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--chip-color:var(--base-6)}&[data-variant=gray]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-gray)}&[data-variant=slate]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-slate)}&[data-variant=yellow]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-yellow)}&[data-variant=green]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-green)}&[data-variant=blue]{--chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity))}&[data-variant=red]{--chip-color:var(--highlight-red)}&[data-variant=cyan]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-cyan)}&[data-variant=purple]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-purple)}&[data-variant=indigo]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-indigo)}&[data-variant=acid]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-acid)}&[data-variant=salmon]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--chip-background:oklab(from currentColor l a b/var(--chip-color-bg-opacity));--chip-border-color:oklab(from currentColor l a b/var(--chip-color-border-opacity));--chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-inline-size:0;min-block-size:100%}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;flex-shrink:0;>svg{inline-size:var(--chip-icon-size);block-size:var(--chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}

package/dist/components/chip/chip.js

@@ -1,9 +1,8 @@
-"use client";
 import './chip.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import "react";
@@ -39,7 +38,6 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
 			children: content,
 			className: clsx(chip_module_default.Chip, className),
 			"data-has-icon": addon ? "true" : void 0,
-			"data-icon-position": addon ? addonPosition : void 0,
 			"data-variant": variant
 		}
 	});

package/dist/components/chip/chip.module.js

@@ -1,8 +1,8 @@
 var chip_module_default = {
-	Chip: "chip-module_Chip_2D18T",
-	Content: "chip-module_Content_7mLuL",
-	IconSlot: "chip-module_IconSlot_9N5vD",
-	Label: "chip-module_Label_Hdx7l"
+	Chip: "viraui__chip-module__Chip_2D18T",
+	Content: "viraui__chip-module__Content_7mLuL",
+	IconSlot: "viraui__chip-module__IconSlot_9N5vD",
+	Label: "viraui__chip-module__Label_Hdx7l"
 };
 //#endregion
 export { chip_module_default as default };

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

@@ -1 +1 @@
-.clamp-text-module_ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--clamp-text-rows,1);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}
+.viraui__clamp-text-module__ClampText_Whnkd{display:-webkit-box;-webkit-line-clamp:var(--clamp-text-rows,1);-webkit-box-orient:vertical;overflow:hidden;&[data-clamp-text-inline=true]{display:-webkit-inline-box}}

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

@@ -1,8 +1,8 @@
 "use client";
 import './clamp-text.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import clamp_text_module_default from "./clamp-text.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 import { useMemo } from "react";
 //#region src/components/clamp-text/clamp-text.tsx

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

@@ -1,3 +1,3 @@
-var clamp_text_module_default = { ClampText: "clamp-text-module_ClampText_Whnkd" };
+var clamp_text_module_default = { ClampText: "viraui__clamp-text-module__ClampText_Whnkd" };
 //#endregion
 export { clamp_text_module_default as default };

package/dist/components/dialog/dialog-close.d.ts

@@ -0,0 +1,15 @@
+import { DrawerClose } from '@base-ui/react';
+import type * as React from 'react';
+/**
+ * Public Dialog.Close props.
+ *
+ * Pass-through to Base UI `Drawer.Close`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`.
+ *
+ * Compose inside `Dialog.Sheet` so the control closes the open drawer.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogCloseProps = DrawerClose.Props;
+export declare const DialogClose: React.FC<DialogCloseProps>;

package/dist/components/dialog/dialog-close.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog-close.tsx
+var DialogClose = ({ ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Close, {
+	ref,
+	...props
+});
+//#endregion
+export { DialogClose };

package/dist/components/dialog/dialog-sheet.d.ts

@@ -0,0 +1,66 @@
+import { StackProps } from '..';
+import type * as React from 'react';
+/**
+ * Public Dialog.Sheet props.
+ *
+ * Renders the drawer portal, scrim, bottom `Surface` panel, title, description,
+ * and optional body content. Compose `Dialog.Close` inside `children` when a
+ * close control is needed.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogSheetProps = {
+    /**
+     * Accessible dialog title rendered as the modal heading.
+     */
+    title: React.ReactNode;
+    /**
+     * Supporting copy announced with the title.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional body content rendered below the description.
+     *
+     * @default No extra body content is rendered.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional maximum width of the content area.
+     *
+     * @default `50ch`
+     */
+    maxContentWidth?: StackProps['maxWidth'];
+    /**
+     * Aligns the header content.
+     *
+     * @default `start`
+     */
+    headerAlign?: StackProps['hAlign'];
+    /**
+     * Whether to show the close button.
+     *
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Centers the sheet horizontally within the viewport.
+     *
+     * @default false
+     */
+    fitContent?: boolean;
+    /**
+     * Whether to show the drag handle above the sheet header.
+     *
+     * @default true
+     */
+    showHandle?: boolean;
+    /**
+     * Maximum block size of the sheet panel.
+     *
+     * @default `97dvh`
+     */
+    maxHeight?: string;
+};
+export declare const DialogSheet: React.FC<DialogSheetProps>;

package/dist/components/dialog/dialog-sheet.js

@@ -0,0 +1,80 @@
+import { Stack } from "../stack/stack.js";
+import dialog_module_default from "./dialog.module.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Text } from "../text/text.js";
+import { Icon } from "../icon/icon.js";
+import { Surface } from "../surface/surface.js";
+import { Title } from "../title/title.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog-sheet.tsx
+var DialogSheet = ({ children, description, title, showCloseButton = false, fitContent = false, showHandle = true, headerAlign = "start", maxContentWidth = "50ch", maxHeight = "97dvh" }) => /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: dialog_module_default.Backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+	render: /* @__PURE__ */ jsx(Stack, {
+		vAlign: "end",
+		hPadding: "small",
+		vPadding: "small",
+		fillChildren: false,
+		hAlign: fitContent ? "center" : void 0
+	}),
+	className: dialog_module_default.Viewport,
+	children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+		className: dialog_module_default.Popup,
+		style: { "--dialog-max-block-size": maxHeight },
+		render: /* @__PURE__ */ jsx(Surface, {
+			border: "top",
+			render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
+			color: 1,
+			vibrant: true,
+			radius: "large",
+			vPadding: ["medium", 0]
+		}),
+		children: [showHandle && /* @__PURE__ */ jsxs(Stack, {
+			className: dialog_module_default.Handle,
+			inline: true,
+			direction: "row",
+			vPadding: [0, "medium"],
+			columnGap: "small",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape }),
+				/* @__PURE__ */ jsx("div", { className: dialog_module_default.HandleShape })
+			]
+		}), /* @__PURE__ */ jsxs(Stack, {
+			maxWidth: maxContentWidth,
+			rowGap: "large",
+			className: dialog_module_default.Body,
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				className: dialog_module_default.Header,
+				hAlign: headerAlign,
+				hPadding: "medium",
+				fillChildren: false,
+				children: [/* @__PURE__ */ jsx(Drawer.Title, {
+					render: /* @__PURE__ */ jsx(Title, { level: "h4" }),
+					children: title
+				}), description && /* @__PURE__ */ jsx(Drawer.Description, {
+					render: /* @__PURE__ */ jsx(Text, {
+						tone: "muted",
+						render: /* @__PURE__ */ jsx("p", {})
+					}),
+					children: description
+				})]
+			}), /* @__PURE__ */ jsxs(Drawer.Content, {
+				render: /* @__PURE__ */ jsx(Stack, {
+					vAlign: "start",
+					fillChildren: false,
+					className: dialog_module_default.Content
+				}),
+				children: [showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+					className: dialog_module_default.CloseButton,
+					render: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": "Close dialog",
+						icon: /* @__PURE__ */ jsx(Icon, { name: "Xmark" }),
+						variant: "flat"
+					})
+				}), children]
+			})]
+		})]
+	})
+})] });
+//#endregion
+export { DialogSheet };

package/dist/components/dialog/dialog-trigger.d.ts

@@ -0,0 +1,13 @@
+import { DrawerTrigger } from '@base-ui/react';
+import type * as React from 'react';
+/**
+ * Public Dialog.Trigger props.
+ *
+ * Pass-through to Base UI `Drawer.Trigger`. Use `render` for the visible control
+ * (`Button`, `IconButton`, or another element) and set `nativeButton` when the
+ * rendered root is not a native `<button>`.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogTriggerProps = DrawerTrigger.Props;
+export declare const DialogTrigger: React.FC<DialogTriggerProps>;

package/dist/components/dialog/dialog-trigger.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog-trigger.tsx
+var DialogTrigger = ({ ref, ...props }) => /* @__PURE__ */ jsx(Drawer.Trigger, {
+	ref,
+	...props
+});
+//#endregion
+export { DialogTrigger };

package/dist/components/dialog/dialog.css

@@ -0,0 +1 @@
+.viraui__dialog-module__Backdrop_xgFhs{position:fixed;inset:0;z-index:0;transition:opacity var(--duration-fast) var(--easing-standard);backdrop-filter:brightness(90%) blur(5px);opacity:1;&[data-ending-style],&[data-starting-style]{opacity:0}&[data-swiping]{opacity:calc(1 - var(--drawer-swipe-progress, 0));transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__dialog-module__Viewport_kmZN1{position:fixed;inset:0;z-index:4;pointer-events:none;touch-action:none}.viraui__dialog-module__Popup_5qIyj{--bleed:var(--space-wide);--peek:var(--space-medium);--stack-step:0.05;--stack-progress:clamp(0,var(--drawer-swipe-progress,0),1);--stack-peek-offset:max(0px,calc((var(--nested-drawers, 0) - var(--stack-progress)) * var(--peek)));--stack-scale-base:max(0,calc(1 - var(--nested-drawers, 0) * var(--stack-step)));--stack-scale:clamp(0,calc(var(--stack-scale-base) + var(--stack-step) * var(--stack-progress)),1);--stack-shrink:calc(1 - var(--stack-scale));--stack-height:max(0px,calc(var(--drawer-frontmost-height, var(--drawer-height, 0px)) - var(--bleed)));--translate-y:calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--stack-peek-offset) - var(--stack-shrink) * var(--stack-height));max-block-size:var(--dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--translate-y)) scale(var(--stack-scale));&[data-nested-drawer-open]{height:calc(var(--stack-height) + var(--bleed));overflow:hidden}&[data-starting-style]{opacity:0}&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{transform:translateY(100%)}&[data-nested-drawer-swiping],&[data-swiping]{transition-duration:0s}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__Handle_nd9SN{margin:0 auto}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:var(--global-contrast);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{flex-shrink:0;touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1}}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,21 @@
+import { DrawerRoot } from '@base-ui/react';
+import { DialogCloseProps } from './dialog-close';
+import { DialogSheetProps } from './dialog-sheet';
+import { DialogTriggerProps } from './dialog-trigger';
+import type * as React from 'react';
+/**
+ * Public Dialog root props.
+ *
+ * Groups `Dialog.Trigger`, `Dialog.Sheet`, and `Dialog.Close` under a Base UI `Drawer.Root`.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogProps = DrawerRoot.Props;
+export type DialogSnapPoint = DrawerRoot.SnapPoint;
+type DialogComponent = React.FC<DialogProps> & {
+    Trigger: React.FC<DialogTriggerProps>;
+    Sheet: React.FC<DialogSheetProps>;
+    Close: React.FC<DialogCloseProps>;
+};
+export declare const Dialog: DialogComponent;
+export {};

package/dist/components/dialog/dialog.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "Dialog",
+  "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, and `Dialog.Close`, Surface panel, scrim backdrop, title, description, and swipe-to-dismiss.",
+  "whenToUse": [
+    "Focused tasks or confirmations that interrupt the current page without navigation",
+    "Short forms or read-only content that needs a modal layer above the app",
+    "Bottom sheets where swipe dismissal or snap points are useful (pass `snapPoints`, `snapPoint`/`onSnapPointChange`, or `defaultSnapPoint` directly on `Dialog`)",
+    "Drill-down sheet flows (for example settings sub-pages) by nesting a `Dialog` inside `Dialog.Sheet` children"
+  ],
+  "whenNotToUse": [
+    "Small anchored hints or quick actions that should use Popover or Menu",
+    "Highly custom sheet anatomy that needs primitive-level composition",
+    "Centered modal layouts that should not slide from the screen edge"
+  ],
+  "accessibility": [
+    "Always pass `title`; add `description` when the heading alone is not enough context",
+    "Compose `Dialog.Close` with an accessible name when a visible close control is needed",
+    "Use `Dialog.Close` for footer actions that should dismiss the sheet"
+  ],
+  "antiPatterns": [
+    "Opening a sheet without `title` copy for assistive technologies",
+    "Relying only on backdrop press or swipe when a footer action is the primary close path",
+    "Using Dialog when a centered non-gesture modal is enough and a future Dialog primitive is available"
+  ],
+  "related": ["Surface", "Button", "IconButton", "Stack", "Elevator"]
+}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,18 @@
+import './dialog.css';
+import { DialogClose } from "./dialog-close.js";
+import { DialogSheet } from "./dialog-sheet.js";
+import { DialogTrigger } from "./dialog-trigger.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog.tsx
+var DialogRootComponent = ({ children, ...props }) => /* @__PURE__ */ jsx(Drawer.Root, {
+	...props,
+	children
+});
+var Dialog = Object.assign(DialogRootComponent, {
+	Trigger: DialogTrigger,
+	Sheet: DialogSheet,
+	Close: DialogClose
+});
+//#endregion
+export { Dialog };

package/dist/components/dialog/dialog.module.js

@@ -0,0 +1,13 @@
+var dialog_module_default = {
+	Backdrop: "viraui__dialog-module__Backdrop_xgFhs",
+	Viewport: "viraui__dialog-module__Viewport_kmZN1",
+	Popup: "viraui__dialog-module__Popup_5qIyj",
+	Handle: "viraui__dialog-module__Handle_nd9SN",
+	HandleShape: "viraui__dialog-module__HandleShape_mEg8R",
+	Header: "viraui__dialog-module__Header_WnBly",
+	Body: "viraui__dialog-module__Body_9-UgN",
+	Content: "viraui__dialog-module__Content_r8lJc",
+	CloseButton: "viraui__dialog-module__CloseButton_U-B1r"
+};
+//#endregion
+export { dialog_module_default as default };

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

@@ -0,0 +1,8 @@
+export { Dialog } from './dialog';
+export type { DialogProps, DialogSnapPoint } from './dialog';
+export { DialogClose } from './dialog-close';
+export type { DialogCloseProps } from './dialog-close';
+export { DialogSheet } from './dialog-sheet';
+export type { DialogSheetProps } from './dialog-sheet';
+export { DialogTrigger } from './dialog-trigger';
+export type { DialogTriggerProps } from './dialog-trigger';

package/dist/components/elevator/elevator.js

@@ -11,10 +11,10 @@ var Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow,
 	const { intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const elevation = getElevationProps({
 		resting,
-		...hover !== void 0 ? { hover } : {},
-		...direction !== void 0 ? { direction } : {},
-		...shadowColor !== void 0 ? { shadowColor } : {},
-		...extraShadow !== void 0 ? { extraShadow } : {}
+		hover,
+		direction,
+		shadowColor,
+		extraShadow
 	});
 	return Children.map(children, (child) => {
 		if (!isValidElement(child)) return child;

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,35 @@
+import { FieldsetRoot } from '@base-ui/react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public Fieldset props.
+ *
+ * Thin wrapper around Base UI `Fieldset.Root` and `Fieldset.Legend` with shared Vira
+ * legend typography and optional group helper copy. Pass `render` to merge the fieldset
+ * root with `RadioGroup`, `CheckboxGroup`, or another compatible root.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type FieldsetProps = FieldsetRoot.Props & IntrinsicViraProps & {
+    /**
+     * Visible legend copy rendered with shared internal `FieldLabel`.
+     *
+     * @default No legend is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Group helper copy rendered below the legend while valid.
+     * Requires a `Field.Root` ancestor for `FieldHelperCopy`.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Group error copy rendered below the legend when invalid.
+     * Requires a `Field.Root` ancestor.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+};
+export declare const Fieldset: React.FC<FieldsetProps>;

package/dist/components/fieldset/fieldset.guide.json

@@ -0,0 +1,28 @@
+{
+  "name": "Fieldset",
+  "summary": "Semantic field grouping with shared legend and optional group helper copy.",
+  "whenToUse": [
+    "Section legends for multiple related fields — billing details with Textfield, Textarea, or Select children",
+    "Choice groups that need a shared legend, group description, or group error — Field.Root > Fieldset render={<RadioGroup<Value> />} or render={<CheckboxGroup />}",
+    "Group validation and helper copy that require a Field.Root ancestor plus Fieldset description or error",
+    "Type-safe radio unions via RadioGroup<'ssd' | 'hdd'> merged through Fieldset render",
+    "Visual section chrome (legend + bordered content) for a form block"
+  ],
+  "whenNotToUse": [
+    "Every RadioGroup or CheckboxGroup by default — Fieldset is optional when options already have labels and no group copy is needed",
+    "Single Textfield, Textarea, Select, Radio, or Checkbox that already exposes its own label",
+    "Standalone RadioGroup or CheckboxGroup inside Field.Root with no shared legend — primitives are enough",
+    "Group legend, description, or validation on RadioGroup or CheckboxGroup props — those belong on Fieldset (with Field.Root when validating)"
+  ],
+  "accessibility": [
+    "Map visible label to Fieldset.Legend so grouped controls share an accessible section name",
+    "Keep group invalid state on Field.Root and surface group error copy through Fieldset error",
+    "Pass disabled to Fieldset.Root when the whole section should ignore interaction"
+  ],
+  "antiPatterns": [
+    "Wrapping Fieldset.Root in Stack render — breaks Base UI render merge with RadioGroup or CheckboxGroup",
+    "Expecting description or error on Fieldset without a Field.Root ancestor",
+    "Omitting RadioGroup<Value> generics when option values are a restricted union"
+  ],
+  "related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"]
+}

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,30 @@
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react";
+//#region src/components/fieldset/fieldset.tsx
+var Fieldset$1 = ({ children, className, description, disabled, error, label, render, ...fieldsetRootProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(fieldsetRootProps);
+	return /* @__PURE__ */ jsxs(Fieldset.Root, {
+		...intrinsicAttributes,
+		...componentProps,
+		className,
+		disabled,
+		render,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			vPadding: [0, "small"],
+			rowGap: "small",
+			children: [label ? /* @__PURE__ */ jsx(Fieldset.Legend, {
+				render: /* @__PURE__ */ jsx(FieldLabel, {}),
+				children: label
+			}) : null, description || error ? /* @__PURE__ */ jsx(FieldHelperCopy, {
+				description,
+				error
+			}) : null]
+		}), children]
+	});
+};
+//#endregion
+export { Fieldset$1 as Fieldset };

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

@@ -0,0 +1,2 @@
+export { Fieldset } from './fieldset';
+export type { FieldsetProps } from './fieldset';