@viraui/react 0.0.25 → 0.0.27

package/dist/components/toast/toast.css

@@ -1 +1 @@
-.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Banner_QkOlo{--gap:var(--space-small);--peek:var(--space-small);--scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--shrink:calc(1 - var(--scale));--stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--gap) * -1) + var(--toast-swipe-movement-y, 0px));position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:translate,scale,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;translate:var(--toast-swipe-movement-x,0) calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--peek)) - (var(--shrink) * var(--stack-height)));scale:var(--scale);transition:translate var(--duration-slow) var(--easing-elastic),scale var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-expanded]{translate:var(--toast-swipe-movement-x,0) var(--offset-y);scale:1;block-size:var(--toast-height,auto)}&[data-starting-style]{translate:0 150%;scale:1}&[data-ending-style]{opacity:0;translate:0 150%;scale:1;&[data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y, 0px) - 150%)}&[data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y, 0px) + 150%)}&[data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x, 0px) - 150%) var(--offset-y)}&[data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x, 0px) + 150%) var(--offset-y)}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--gap) + 1px)}@media (prefers-reduced-motion:reduce){transition:none}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--gap)) + var(--toast-swipe-movement-y, 0px));translate:var(--toast-swipe-movement-x,0) calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--peek)) + (var(--shrink) * var(--stack-height)));scale:var(--scale);&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{translate:var(--toast-swipe-movement-x,0) var(--offset-y);scale:1}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{translate:0 -150%;scale:1}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;translate:0;scale:1;&:after{content:none}transition:translate var(--duration-slow) var(--easing-elastic),scale var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;translate:0 var(--space-2x-small);scale:1}&[data-expanded]{translate:0;scale:1}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}
+.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Banner_QkOlo{--gap:var(--space-small);--peek:var(--space-small);--scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--shrink:calc(1 - var(--scale));--stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--gap) * -1) + var(--toast-swipe-movement-y, 0px));position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--peek)) - (var(--shrink) * var(--stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--offset-y))}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--gap) + 1px)}@media (prefers-reduced-motion:reduce){transition:none}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--gap)) + var(--toast-swipe-movement-y, 0px));transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--peek)) + (var(--shrink) * var(--stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}

package/dist/components/toast/toast.module.js

@@ -1,7 +1,11 @@
+//#region src/components/toast/toast.module.css
+var Viewport = "viraui__toast-module__Viewport_oSF5e";
+var Banner = "viraui__toast-module__Banner_QkOlo";
+var Content = "viraui__toast-module__Content_5ODZr";
 var toast_module_default = {
-	Viewport: "viraui__toast-module__Viewport_oSF5e",
-	Banner: "viraui__toast-module__Banner_QkOlo",
-	Content: "viraui__toast-module__Content_5ODZr"
+	Viewport,
+	Banner,
+	Content
 };
 //#endregion
-export { toast_module_default as default };
+export { Banner, Content, Viewport, toast_module_default as default };

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

@@ -0,0 +1,2 @@
+export { ToggleButton } from './toggle-button';
+export type { ToggleButtonProps } from './toggle-button';

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

@@ -0,0 +1,39 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ButtonProps } from '../button/button';
+import { IconButtonProps } from '../icon-button/icon-button';
+import { ReactNode } from 'react';
+/**
+ * Public ToggleButton props.
+ *
+ * Icon-only two-state control built on Base UI `Toggle` and `IconButton`.
+ * Requires an accessible name via `aria-label` or `aria-labelledby`.
+ *
+ * @default Base UI toggle pass-through props keep upstream defaults.
+ */
+export type ToggleButtonProps = Omit<IconButtonProps, 'icon' | 'render' | 'variant'> & TogglePrimitive.Props & {
+    /**
+     * Icon shown while the toggle is not pressed.
+     *
+     * @default No default; required for every ToggleButton.
+     */
+    restingIcon: ReactNode;
+    /**
+     * Icon shown while the toggle is pressed.
+     *
+     * @default When omitted, `restingIcon` is shown in both states.
+     */
+    pressedIcon?: ReactNode;
+    /**
+     * Visual variant while the toggle is not pressed.
+     *
+     * @default 'flat'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * Visual variant while the toggle is pressed.
+     *
+     * @default When omitted, `variant` is used in both states.
+     */
+    pressedVariant?: ButtonProps['variant'];
+};
+export declare const ToggleButton: React.FC<ToggleButtonProps>;

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

@@ -0,0 +1,25 @@
+{
+  "name": "ToggleButton",
+  "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
+  "whenToUse": [
+    "Toolbar pin, favorite, or mute toggles identified only by icon",
+    "Compact on/off controls that share IconButton size, variant, and loading model",
+    "Two-state actions where pressed state should swap the visible glyph"
+  ],
+  "whenNotToUse": [
+    "Settings-style on/off fields — use Switch",
+    "One-shot actions with no pressed state — use IconButton"
+  ],
+  "accessibility": [
+    "Provide aria-label or aria-labelledby on every ToggleButton — icon alone is not a name",
+    "Base UI Toggle exposes aria-pressed on the rendered button",
+    "Keep the accessible name stable when loading state changes"
+  ],
+  "antiPatterns": [
+    "Using IconButton for persistent pressed toolbar state",
+    "Using Switch for compact icon-only toolbar toggles",
+    "Passing icon or render — ToggleButton owns icon swap and Toggle render wiring"
+  ],
+  "related": ["IconButton", "Button", "Switch", "ToggleGroup"],
+  "properties": {}
+}

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

@@ -0,0 +1,25 @@
+import { IconButton } from "../icon-button/icon-button.js";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/toggle-button/toggle-button.tsx
+var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
+	ref,
+	value,
+	pressed,
+	defaultPressed,
+	onPressedChange,
+	disabled,
+	nativeButton: true,
+	render: (toggleProps, state) => {
+		const { "aria-label": _toggleAriaLabel, "aria-labelledby": _toggleAriaLabelledBy, ...restToggleProps } = toggleProps;
+		return /* @__PURE__ */ jsx(IconButton, {
+			...otherProps,
+			...restToggleProps,
+			disabled,
+			variant: state.pressed ? pressedVariant ?? variant : variant,
+			icon: state.pressed ? pressedIcon ?? restingIcon : restingIcon
+		});
+	}
+});
+//#endregion
+export { ToggleButton };

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from './toggle-group';
+export type { ToggleGroupProps } from './toggle-group';

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

@@ -0,0 +1,11 @@
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+/**
+ * Public ToggleGroup props.
+ *
+ * Thin wrapper around Base UI `ToggleGroup` with default toolbar spacing.
+ * Compose `ToggleButton` children each with `value` and an accessible name.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type ToggleGroupProps = ToggleGroupPrimitive.Props;
+export declare const ToggleGroup: React.FC<ToggleGroupProps>;

package/dist/components/toggle-group/toggle-group.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "ToggleGroup",
+  "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
+  "whenToUse": [
+    "Segmented icon toolbars such as text alignment or formatting controls",
+    "Single- or multi-select pressed states across related ToggleButton items",
+    "Compact action clusters that need coordinated value and disabled state"
+  ],
+  "whenNotToUse": [
+    "Standalone one-off toggles — use ToggleButton",
+    "Settings-style on/off fields — use Switch",
+    "Tabbed panel navigation — use Tabs"
+  ],
+  "accessibility": [
+    "Provide aria-label or aria-labelledby on the ToggleGroup root",
+    "Provide aria-label or aria-labelledby on every ToggleButton child",
+    "Each ToggleButton exposes aria-pressed; group selection follows Base UI ToggleGroup semantics"
+  ],
+  "antiPatterns": [
+    "Omitting value on ToggleButton children inside a group",
+    "Using Switch for icon-only toolbar toggle sets",
+    "Embedding Surface chrome in the component — wrap demos or app chrome at the consumer"
+  ],
+  "related": ["ToggleButton", "IconButton", "Tabs"],
+  "properties": {}
+}

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

@@ -0,0 +1,15 @@
+import { Stack } from "../stack/stack.js";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/toggle-group/toggle-group.tsx
+var ToggleGroup$1 = ({ children, orientation = "horizontal", ...otherProps }) => /* @__PURE__ */ jsx(ToggleGroup, {
+	...otherProps,
+	orientation,
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: orientation === "vertical" ? "column" : "row",
+		fillChildren: false
+	}),
+	children
+});
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

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

@@ -0,0 +1,6 @@
+import { TooltipRoot, TooltipProvider as TooltipProviderNamespace, TooltipTrigger as TooltipTriggerNamespace } from '@base-ui/react/tooltip';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+export type TooltipProps = TooltipRoot.Props;
+export type TooltipProviderProps = TooltipProviderNamespace.Props;
+export type TooltipTriggerProps = TooltipTriggerNamespace.Props;
+export type { TooltipContentProps } from './tooltip-content';

package/dist/components/tooltip/tooltip-content.d.ts

@@ -0,0 +1,15 @@
+import { TooltipPositioner } from '@base-ui/react/tooltip';
+import type * as React from 'react';
+type TooltipContentPositionerProps = Omit<TooltipPositioner.Props, 'className' | 'style' | 'render'>;
+/**
+ * Public Tooltip.Content props.
+ *
+ * Encapsulates Portal + Positioner + Popup + Viewport. Positioning props forward
+ * to the Positioner; `sideOffset` defaults to `8`. Always renders the internal
+ * Viewport so multi-trigger content animations work by default.
+ *
+ * @default `sideOffset` is `8`.
+ */
+export type TooltipContentProps = TooltipContentPositionerProps;
+export declare const TooltipContent: React.FC<TooltipContentProps>;
+export {};

package/dist/components/tooltip/tooltip-content.js

@@ -0,0 +1,32 @@
+import { Stack } from "../stack/stack.js";
+import { Surface } from "../surface/surface.js";
+import tooltip_module_default from "./tooltip.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip-content.tsx
+var TooltipContent = ({ children, sideOffset = 8, ...positionerProps }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+	className: tooltip_module_default.Positioner,
+	sideOffset,
+	...positionerProps,
+	children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+		className: tooltip_module_default.Popup,
+		role: "tooltip",
+		render: /* @__PURE__ */ jsx(Surface, {
+			color: 1,
+			border: "all",
+			radius: "medium",
+			vibrant: true
+		}),
+		children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
+			className: tooltip_module_default.Viewport,
+			render: /* @__PURE__ */ jsx(Stack, {
+				vPadding: "small",
+				hPadding: "small",
+				fillChildren: false
+			}),
+			children
+		})
+	})
+}) });
+//#endregion
+export { TooltipContent };

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1 @@
+.viraui__tooltip-module__Positioner_ujuzd{--vui-tooltip-content-fade-duration:var(--duration-fast);width:var(--positioner-width);height:var(--positioner-height);max-width:var(--available-width);transition:top var(--duration-fast) var(--easing-standard),right var(--duration-fast) var(--easing-standard),bottom var(--duration-fast) var(--easing-standard),left var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-instant=delay],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__tooltip-module__Popup_5XA3-{position:relative;box-sizing:border-box;width:var(--popup-width,auto);height:var(--popup-height,auto);transform-origin:var(--transform-origin);transition:width var(--duration-fast) var(--easing-standard),height var(--duration-fast) var(--easing-standard),opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.96)}&[data-instant=delay],&[data-instant=dismiss]{transition:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;transform:none}}}.viraui__tooltip-module__Viewport_HdnYN{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:clip;width:100%;height:100%;&>[data-current],&>[data-previous]{grid-area:1/1;inline-size:calc(var(--popup-width) - 2px - var(--vui-stack-padding-inline-start) - var(--vui-stack-padding-inline-end))}&>[data-previous]{position:absolute;block-size:calc(var(--popup-height) - 2px - var(--vui-stack-padding-block-start) - var(--vui-stack-padding-block-end));overflow:clip;pointer-events:none;opacity:1;transition:opacity var(--vui-tooltip-content-fade-duration) var(--easing-standard)}&>[data-previous][data-ending-style]{opacity:0}&>[data-current]{opacity:1;transition:opacity var(--vui-tooltip-content-fade-duration) var(--easing-entrance)}&>[data-current][data-starting-style]{opacity:0}&[data-instant=delay]>[data-current],&[data-instant=delay]>[data-previous],&[data-instant=dismiss]>[data-current],&[data-instant=dismiss]>[data-previous]{transition:none}@media (prefers-reduced-motion:reduce){&>[data-current],&>[data-previous]{transition:none}&>[data-current][data-starting-style],&>[data-previous][data-ending-style]{opacity:1}}}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,13 @@
+import { TooltipProvider as PrimitiveTooltipProvider, TooltipRoot, Tooltip as PrimitiveTooltip } from '@base-ui/react/tooltip';
+import { TooltipContent, TooltipContentProps } from './tooltip-content';
+import type * as React from 'react';
+export declare const TooltipProvider: React.FC<import('@base-ui/react').TooltipProviderProps>;
+export declare const TooltipTrigger: PrimitiveTooltip.Trigger;
+type TooltipComponent = React.FC<TooltipRoot.Props> & {
+    Provider: React.FC<PrimitiveTooltipProvider.Props>;
+    Trigger: typeof PrimitiveTooltip.Trigger;
+    Content: React.FC<TooltipContentProps>;
+    createHandle: typeof PrimitiveTooltip.createHandle;
+};
+export declare const Tooltip: TooltipComponent;
+export { TooltipContent };

package/dist/components/tooltip/tooltip.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "Tooltip",
+  "summary": "Compound tooltip built on Base UI Tooltip with `Tooltip.Provider`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.createHandle` for detached and multiple triggers; `Content` encapsulates Portal + Positioner + Popup + Viewport and animates position, size, and content between triggers.",
+  "whenToUse": [
+    "Short hints on hover or focus for toolbar controls and icon buttons",
+    "Per-trigger labels on shared tooltip roots using `payload` and Root render-function children",
+    "Adjacent controls that benefit from shared open/close delay via `Tooltip.Provider`"
+  ],
+  "whenNotToUse": [
+    "Rich interactive panels or forms (use Popover or Dialog)",
+    "System-wide transient alerts (use Toast)",
+    "Content that must stay open while the pointer moves into the popup (enable `disableHoverablePopup` only when needed)"
+  ],
+  "accessibility": [
+    "Match trigger `aria-label` to tooltip copy so sighted and assistive users get the same hint",
+    "Keep tooltip copy concise; use Popover when the hint needs paragraphs, links, or controls",
+    "Wrap regions with multiple tooltips in `Tooltip.Provider` for predictable delay grouping"
+  ],
+  "antiPatterns": [
+    "Putting essential-only information in a tooltip with no accessible name on the trigger",
+    "Expecting `Tooltip.Arrow` (it is intentionally not exported or rendered)",
+    "Using tooltip for modal or focus-trapped tasks"
+  ],
+  "related": ["Surface", "Button", "IconButton", "Stack", "Popover", "Icon"]
+}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,20 @@
+import './tooltip.css';
+import { TooltipContent } from "./tooltip-content.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip.tsx
+var TooltipProvider = Tooltip.Provider;
+var TooltipTrigger = Tooltip.Trigger;
+var TooltipRootComponent = ({ children, ...otherProps }) => /* @__PURE__ */ jsx(Tooltip.Root, {
+	...otherProps,
+	children
+});
+var { Arrow: _TooltipArrow, Portal: _TooltipPortal, Positioner: _TooltipPositioner, Popup: _TooltipPopup, Viewport: _TooltipViewport } = Tooltip;
+var Tooltip$1 = Object.assign(TooltipRootComponent, {
+	Provider: Tooltip.Provider,
+	Trigger: Tooltip.Trigger,
+	Content: TooltipContent,
+	createHandle: Tooltip.createHandle
+});
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip/tooltip.module.js

@@ -0,0 +1,11 @@
+//#region src/components/tooltip/tooltip.module.css
+var Positioner = "viraui__tooltip-module__Positioner_ujuzd";
+var Popup = "viraui__tooltip-module__Popup_5XA3-";
+var Viewport = "viraui__tooltip-module__Viewport_HdnYN";
+var tooltip_module_default = {
+	Positioner,
+	Popup,
+	Viewport
+};
+//#endregion
+export { Popup, Positioner, Viewport, tooltip_module_default as default };

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

@@ -0,0 +1,3 @@
+export { Typewriter } from './typewriter';
+export type { TypewriterProps } from './typewriter';
+export type { TypewriterCaret } from './typewriter.utils';

package/dist/components/typewriter/typewriter.css

@@ -0,0 +1 @@
+.viraui__typewriter-module__Typewriter_R3sbb{display:inline;position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{display:inline;white-space:pre-wrap}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]{display:inline-grid}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]>:is(.viraui__typewriter-module__Ghost_R-Yy-,.viraui__typewriter-module__Typed_00NZ8){grid-area:1/1}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color,currentcolor);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color,currentcolor);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}

package/dist/components/typewriter/typewriter.d.ts

@@ -0,0 +1,68 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { TypewriterCaret } from './typewriter.utils';
+import type * as React from 'react';
+/**
+ * Public Typewriter props.
+ *
+ * Includes standard `span` attributes such as `id`, `className`, and event handlers,
+ * plus Vira-owned typewriter animation controls.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type TypewriterProps = React.ComponentPropsWithRef<'span'> & IntrinsicViraProps & {
+    /**
+     * Cycles through multiple phrases instead of a single `children` string.
+     *
+     * @default The animation uses string `children` when provided.
+     */
+    texts?: readonly string[];
+    /**
+     * Selects the caret style rendered after the typed text.
+     *
+     * @default 'pipe'
+     */
+    caret?: TypewriterCaret;
+    /**
+     * Overrides the caret color.
+     *
+     * @default The caret inherits `currentColor`.
+     */
+    caretColor?: string;
+    /**
+     * Sets the delay between typed characters in milliseconds.
+     *
+     * @default 40
+     */
+    speed?: number;
+    /**
+     * Sets the delay between deleted characters in milliseconds.
+     *
+     * @default 25
+     */
+    deleteSpeed?: number;
+    /**
+     * Sets the pause after a phrase completes before deletion starts, in milliseconds.
+     *
+     * @default 2000
+     */
+    pause?: number;
+    /**
+     * Sets the initial delay before typing starts, in milliseconds.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Repeats the phrase cycle after the final phrase is deleted.
+     *
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Reserves the full phrase width while characters are typed.
+     *
+     * @default false
+     */
+    preserveSpace?: boolean;
+};
+export declare const Typewriter: React.FC<TypewriterProps>;

package/dist/components/typewriter/typewriter.guide.json

@@ -0,0 +1,39 @@
+{
+  "name": "Typewriter",
+  "summary": "Decorative inline typewriter animation that inherits typography and color from a parent text primitive.",
+  "whenToUse": [
+    "Hero or marketing copy that cycles through short phrases",
+    "Loading or status labels that reveal text progressively",
+    "Muted intro copy inside Text or Title where motion adds emphasis"
+  ],
+  "whenNotToUse": [
+    "Standalone accessible status updates without a surrounding labeled region",
+    "Long-form content better served by static Text",
+    "Cases where reduced-motion users must see every phrase in a multi-text cycle"
+  ],
+  "accessibility": [
+    "The visual display layer is aria-hidden; completed phrases announce through the polite live region",
+    "Reduced motion shows the current phrase immediately without cycling delays",
+    "Parent region owns loading or busy semantics when Typewriter is decorative"
+  ],
+  "antiPatterns": [
+    "Using Typewriter as the only source of critical status information",
+    "Embedding layout positioning rules inside the component stylesheet",
+    "Restarting animation on every parent render by passing unstable inline text arrays without stable content"
+  ],
+  "related": ["Text", "Title", "Shimmer"],
+  "properties": {
+    "react": {
+      "caretColor": {
+        "description": "Overrides the caret color.",
+        "refCss": "caret-color"
+      }
+    },
+    "css": {
+      "caret-color": {
+        "description": "Typewriter caret color.",
+        "refReact": "caretColor"
+      }
+    }
+  }
+}

package/dist/components/typewriter/typewriter.js

@@ -0,0 +1,105 @@
+"use client";
+import './typewriter.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import typewriter_module_default from "./typewriter.module.js";
+import { resolveTextsKey, runTypewriterAnimation, splitTextsKey } from "./typewriter.utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+//#region src/components/typewriter/typewriter.tsx
+var createCaretElement = (caret) => {
+	if (caret === "none") return null;
+	const element = document.createElement("span");
+	element.className = typewriter_module_default.Caret;
+	element.dataset.type = caret;
+	return element;
+};
+var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0, deleteSpeed = 25, loop = true, pause = 2e3, preserveSpace = false, ref, speed = 40, style, texts, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const displayRef = useRef(null);
+	const liveRef = useRef(null);
+	const textsKey = resolveTextsKey(texts, children);
+	const firstText = splitTextsKey(textsKey)[0] ?? "";
+	useEffect(() => {
+		const display = displayRef.current;
+		const live = liveRef.current;
+		if (!display || !textsKey) return;
+		const textNode = document.createTextNode("");
+		const caretElement = createCaretElement(caret);
+		let ghostTextNode = null;
+		const nodes = [];
+		if (preserveSpace) {
+			ghostTextNode = document.createTextNode("");
+			const ghost = document.createElement("span");
+			ghost.className = typewriter_module_default.Ghost;
+			ghost.appendChild(ghostTextNode);
+			nodes.push(ghost);
+			const typed = document.createElement("span");
+			typed.className = typewriter_module_default.Typed;
+			typed.appendChild(textNode);
+			if (caretElement) typed.appendChild(caretElement);
+			nodes.push(typed);
+		} else {
+			nodes.push(textNode);
+			if (caretElement) nodes.push(caretElement);
+		}
+		display.replaceChildren(...nodes);
+		const controller = new AbortController();
+		runTypewriterAnimation({
+			texts: splitTextsKey(textsKey),
+			loop,
+			typeDelay: speed,
+			deleteDelay: deleteSpeed,
+			pause,
+			delay,
+			textNode,
+			ghostTextNode,
+			reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+			onPhraseComplete: (text) => {
+				if (live) live.textContent = text;
+			},
+			signal: controller.signal
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [
+		caret,
+		delay,
+		deleteSpeed,
+		loop,
+		pause,
+		preserveSpace,
+		speed,
+		textsKey
+	]);
+	const dynamicStyle = {
+		...caretColor && { "--vui-typewriter-caret-color": caretColor },
+		...style
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(typewriter_module_default.Typewriter, className),
+		style: dynamicStyle,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: displayRef,
+			className: typewriter_module_default.Display,
+			"aria-hidden": "true",
+			...preserveSpace && { "data-preserve-space": true },
+			children: preserveSpace && firstText && /* @__PURE__ */ jsx("span", {
+				className: typewriter_module_default.Ghost,
+				children: firstText
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			ref: liveRef,
+			className: typewriter_module_default.A11y,
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: firstText
+		})]
+	});
+};
+//#endregion
+export { Typewriter };

package/dist/components/typewriter/typewriter.module.js

@@ -0,0 +1,18 @@
+//#region src/components/typewriter/typewriter.module.css
+var Typewriter = "viraui__typewriter-module__Typewriter_R3sbb";
+var Display = "viraui__typewriter-module__Display_-IGJh";
+var Ghost = "viraui__typewriter-module__Ghost_R-Yy-";
+var Typed = "viraui__typewriter-module__Typed_00NZ8";
+var Caret = "viraui__typewriter-module__Caret_96Yfs";
+var A11y = "viraui__typewriter-module__A11y_B-rjF";
+var typewriter_module_default = {
+	Typewriter,
+	Display,
+	Ghost,
+	Typed,
+	Caret,
+	"typewriter-caret-blink": "viraui__typewriter-module__typewriter-caret-blink_yLCpV",
+	A11y
+};
+//#endregion
+export { A11y, Caret, Display, Ghost, Typed, Typewriter, typewriter_module_default as default };

package/dist/components/typewriter/typewriter.utils.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+export type TypewriterCaret = 'block' | 'underscore' | 'pipe' | 'none';
+export declare const TYPEWRITER_TEXTS_SEPARATOR = "\0";
+export declare const resolveTextsKey: (texts: readonly string[] | undefined, children: React.ReactNode) => string;
+export declare const splitTextsKey: (textsKey: string) => string[];
+/** ponytail: bust module cache so story tests can exercise Segmenter fallback */
+export declare const clearGraphemeSegmenterCacheForTests: () => void;
+export declare const splitGraphemes: (text: string) => string[];
+export declare const commonPrefixLength: (previous: readonly string[], next: readonly string[]) => number;
+export type RunTypewriterAnimationOptions = {
+    texts: readonly string[];
+    loop: boolean;
+    typeDelay: number;
+    deleteDelay: number;
+    pause: number;
+    delay: number;
+    textNode: Text;
+    ghostTextNode: Text | null;
+    reducedMotion: boolean;
+    onPhraseComplete: (text: string) => void;
+    signal: AbortSignal;
+};
+export declare const runTypewriterAnimation: ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhraseComplete, signal, ...nodes }: RunTypewriterAnimationOptions) => Promise<void>;