@viraui/react 0.0.22 → 0.0.24

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,4 +1,3 @@
-"use client";
 import './chip.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -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.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-indent-background.d.ts

@@ -0,0 +1,12 @@
+import { DrawerIndentBackground } from '@base-ui/react';
+import type * as React from 'react';
+/**
+ * Public Dialog.IndentBackground props.
+ *
+ * Pass-through to Base UI `Drawer.IndentBackground` with Vira-owned root class applied.
+ * Place before `Dialog.Indent` inside `Dialog.Provider` for the indent background layer.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogIndentBackgroundProps = DrawerIndentBackground.Props;
+export declare const DialogIndentBackground: React.FC<DialogIndentBackgroundProps>;

package/dist/components/dialog/dialog-indent-background.js

@@ -0,0 +1,11 @@
+import { clsx } from "../../core/clsx.js";
+import dialog_module_default from "./dialog.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog-indent-background.tsx
+var DialogIndentBackground = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+	...props,
+	className: clsx(dialog_module_default.IndentBackground, className)
+});
+//#endregion
+export { DialogIndentBackground };

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

@@ -0,0 +1,12 @@
+import { DrawerIndent } from '@base-ui/react';
+import type * as React from 'react';
+/**
+ * Public Dialog.Indent props.
+ *
+ * Pass-through to Base UI `Drawer.Indent` with Vira-owned root class applied.
+ * Wrap app shell content inside `Dialog.Provider` to receive `data-active` when a sheet opens.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogIndentProps = DrawerIndent.Props;
+export declare const DialogIndent: React.FC<DialogIndentProps>;

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

@@ -0,0 +1,11 @@
+import { clsx } from "../../core/clsx.js";
+import dialog_module_default from "./dialog.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog/dialog-indent.tsx
+var DialogIndent = ({ className, ...props }) => /* @__PURE__ */ jsx(Drawer.Indent, {
+	...props,
+	className: clsx(dialog_module_default.Indent, className)
+});
+//#endregion
+export { DialogIndent };

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:oklab(from var(--global-contrast) l a b/.3);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}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform .4s cubic-bezier(.32,.72,0,1),border-radius .25s cubic-bezier(.32,.72,0,1);transition-duration:calc(.4s * var(--indent-transition)),calc(.25s * var(--indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--indent-radius);border-top-right-radius:var(--indent-radius)}}

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

@@ -0,0 +1,28 @@
+import { Drawer as PrimitiveDrawer, DrawerProvider, DrawerRoot } from '@base-ui/react';
+import { DialogCloseProps } from './dialog-close';
+import { DialogIndentProps } from './dialog-indent';
+import { DialogIndentBackgroundProps } from './dialog-indent-background';
+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`, `Dialog.Close`, `Dialog.Provider`,
+ * `Dialog.Indent`, and `Dialog.IndentBackground` under Base UI Drawer parts.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type DialogProps = DrawerRoot.Props;
+export type DialogSnapPoint = DrawerRoot.SnapPoint;
+export type DialogProviderProps = DrawerProvider.Props;
+type DialogComponent = React.FC<DialogProps> & {
+    Trigger: React.FC<DialogTriggerProps>;
+    Sheet: React.FC<DialogSheetProps>;
+    Close: React.FC<DialogCloseProps>;
+    Provider: typeof PrimitiveDrawer.Provider;
+    Indent: React.FC<DialogIndentProps>;
+    IndentBackground: React.FC<DialogIndentBackgroundProps>;
+};
+export declare const Dialog: DialogComponent;
+export {};

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

@@ -0,0 +1,27 @@
+{
+  "name": "Dialog",
+  "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
+  "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",
+    "App-shell indent effects by wrapping page content in `Dialog.Provider`, `Dialog.IndentBackground`, and `Dialog.Indent`"
+  ],
+  "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,23 @@
+import './dialog.css';
+import { DialogClose } from "./dialog-close.js";
+import { DialogIndent } from "./dialog-indent.js";
+import { DialogIndentBackground } from "./dialog-indent-background.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,
+	Provider: Drawer.Provider,
+	Indent: DialogIndent,
+	IndentBackground: DialogIndentBackground
+});
+//#endregion
+export { Dialog };

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

@@ -0,0 +1,15 @@
+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",
+	IndentBackground: "viraui__dialog-module__IndentBackground_OEfbh",
+	Indent: "viraui__dialog-module__Indent_qfiNW"
+};
+//#endregion
+export { dialog_module_default as default };

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

@@ -0,0 +1,12 @@
+export { Dialog } from './dialog';
+export type { DialogProps, DialogProviderProps, DialogSnapPoint } from './dialog';
+export { DialogClose } from './dialog-close';
+export type { DialogCloseProps } from './dialog-close';
+export { DialogIndent } from './dialog-indent';
+export type { DialogIndentProps } from './dialog-indent';
+export { DialogIndentBackground } from './dialog-indent-background';
+export type { DialogIndentBackgroundProps } from './dialog-indent-background';
+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';

package/dist/components/icon/icon.css

@@ -1 +1 @@
-.icon-module_Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [stroke]{stroke:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}
+.viraui__icon-module__Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [stroke]{stroke:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}

package/dist/components/icon/icon.module.js

@@ -1,3 +1,3 @@
-var icon_module_default = { Icon: "icon-module_Icon_6DoBq" };
+var icon_module_default = { Icon: "viraui__icon-module__Icon_6DoBq" };
 //#endregion
 export { icon_module_default as default };

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

@@ -13,7 +13,7 @@ type AccessibleNameProps = {
  * Typed wrapper over `Button` for icon-only actions. Requires an accessible name
  * via `aria-label` or `aria-labelledby`.
  */
-export type IconButtonProps = Omit<ButtonProps, 'children' | 'iconPosition' | 'size'> & AccessibleNameProps & {
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'addonPosition' | 'size'> & AccessibleNameProps & {
     /**
      * Controls the visual button size.
      *

package/dist/components/icon-button/icon-button.guide.json

@@ -13,7 +13,7 @@
     "Keep the accessible name stable when loading state changes"
   ],
   "antiPatterns": [
-    "Passing children or iconPosition — not part of the public API",
+    "Passing children or addonPosition — not part of the public API",
     "Using icon-only Button instead of IconButton"
   ],
   "related": ["Button", "Icon", "Spinner"]

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

@@ -2,7 +2,7 @@ import { Button } from "../button/button.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button/icon-button.tsx
 var IconButton = ({ icon, size = "medium", ...props }) => /* @__PURE__ */ jsx(Button, {
-	icon,
+	addon: icon,
 	size,
 	...props
 });

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './avatar';
 export * from './avatar-group';
 export * from './chip';
+export * from './dialog';
 export * from './clamp-text';
 export * from './elevator';
 export * from './button';
@@ -12,12 +13,15 @@ export * from './textarea';
 export * from './slider';
 export * from './switch';
 export * from './checkbox';
+export * from './fieldset';
 export * from './radio';
 export * from './select';
+export * from './separator';
 export * from './icon';
 export * from './skeleton';
 export * from './stack';
 export * from './surface';
+export * from './tabs';
 export * from './spinner';
 export * from './static-noise';
 export * from './progressive-blur';

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

@@ -1 +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%)}}
+.viraui__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);& .viraui__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)}& .viraui__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:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

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

@@ -1,4 +1,3 @@
-"use client";
 import './linear-progress.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";