xiod-ui 1.0.0

package/LICENSE

@@ -0,0 +1,73 @@
+Required Notice: Copyright 2026 ImKKingshuk (https://github.com/ImKKingshuk)
+
+# PolyForm Perimeter License 1.0.1
+
+<https://polyformproject.org/licenses/perimeter/1.0.1>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose.  However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license to distribute copies of the software.  Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Noncompete
+
+Any purpose is a permitted purpose, except for providing to others any product that competes with the software.
+
+## Competition
+
+If you use this software to market a product as a substitute for the functionality or value of the software, it competes with the software. A product may compete regardless how it is designed or deployed. For example, a product may compete even if it provides its functionality via any kind of interface (including services, libraries or plug-ins), even if it is ported to a different platform or programming language, and even if it is provided free of charge.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice.  Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+A **product** can be a good or service, or a combination of them.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization.  **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.

package/README.md

@@ -0,0 +1,167 @@
+# XiodUI
+
+A React component library for building interfaces with consistent styling, flexible composition, and built-in light and dark themes.
+
+XiodUI includes 89 components built with Base UI, Tailwind CSS 4, and XiodIcons.
+
+## Features
+
+- **Composable components** — combine buttons, forms, navigation, overlays, and layouts.
+- **Accessible foundations** — Base UI primitives provide behavior for supported interactive components.
+- **Customizable styling** — adjust CSS variables, component variants, and `className`.
+- **Light and dark themes** — use the default colors or choose from 19 palettes.
+- **TypeScript support** — typed props and individual component imports.
+- **XiodIcons included** — built-in icons use the `xiod-icons` package.
+
+## Installation
+
+XiodUI requires React 19.3 or later within React 19, matching React DOM, Node.js 20 or later, and a project configured with Tailwind CSS 4.3 or later.
+
+```bash
+npm install xiod-ui
+```
+
+If React is not already installed:
+
+```bash
+npm install react@^19 react-dom@^19
+```
+
+Base UI and XiodIcons are installed automatically. You do not need to install them separately to use XiodUI's built-in components.
+
+## Quick start
+
+Import XiodUI's stylesheet after Tailwind in the global CSS loaded by your application:
+
+```css
+@import "tailwindcss";
+@import "xiod-ui/styles";
+```
+
+This provides the design tokens and registers the component files for Tailwind's utility generation. Your project's Tailwind integration must already be configured.
+
+Then import the components you need:
+
+```tsx
+"use client";
+
+import { Button } from "xiod-ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogHeader,
+  DialogPopup,
+  DialogTitle,
+  DialogTrigger,
+} from "xiod-ui/dialog";
+
+export function Example() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button>View details</Button>} />
+      <DialogPopup>
+        <DialogHeader>
+          <DialogTitle>Everything in one place</DialogTitle>
+          <DialogDescription>
+            Build your interface with components that work together.
+          </DialogDescription>
+        </DialogHeader>
+      </DialogPopup>
+    </Dialog>
+  );
+}
+```
+
+In frameworks that support React Server Components, place interactive code in a client component, as shown above.
+
+## Imports
+
+Each component has its own import path. Root imports such as `import { Button } from "xiod-ui"` are not supported.
+
+```tsx
+import { Button } from "xiod-ui/button";
+import { Input } from "xiod-ui/input";
+import { useCopyToClipboard } from "xiod-ui/hooks/use-copy-to-clipboard";
+import { useIsMobile, useMediaQuery } from "xiod-ui/hooks/use-media-query";
+```
+
+Individual JavaScript modules allow bundlers to include the components you use. The shared stylesheet registers the full component collection for Tailwind scanning; its CSS output does not follow JavaScript tree-shaking.
+
+## Components
+
+| Category           | Examples                                                                    |
+| ------------------ | --------------------------------------------------------------------------- |
+| Actions            | Button, ButtonGroup, Toggle, Toolbar, CopyToClipboard                       |
+| Forms              | Input, Checkbox, Select, Combobox, Slider, Calendar, DatePicker, FileUpload |
+| Navigation         | Breadcrumb, Sidebar, Tabs, Menu, Pagination                                 |
+| Overlays           | Dialog, AlertDialog, Drawer, Popover, Tooltip, Toast                        |
+| Content            | Card, Table, Accordion, Avatar, Badge, Message, Timeline                    |
+| Feedback           | Alert, Progress, CircularProgress, Gauge, Loader, Skeleton                  |
+| Layout             | Grid, DashboardGrid, Carousel, Resizable, ScrollArea                        |
+| Specialized inputs | ColorPicker, InputPhone, InputPayment, InputOtp, InputSensitive             |
+| Visuals            | Orb, Waveform, DotMatrix, Marker                                            |
+
+Components expose their own typed props and variants. Use your editor's TypeScript suggestions to explore the available options.
+
+## Theming
+
+Override design tokens after the stylesheet imports to customize colors and the corner radius:
+
+```css
+:root {
+  --radius: 0.5rem;
+  --primary: oklch(0.55 0.22 264);
+  --primary-foreground: white;
+}
+
+.dark {
+  --primary: oklch(0.72 0.19 264);
+  --primary-foreground: oklch(0.15 0.02 264);
+}
+```
+
+For a ready-made palette, add its stylesheet after the base styles:
+
+```css
+@import "tailwindcss";
+@import "xiod-ui/styles";
+@import "xiod-ui/themes/iris";
+```
+
+### Dark mode
+
+Add the `dark` class to your page's `<html>` element, or wrap your application with `ThemeProvider`:
+
+```tsx
+"use client";
+
+import type { ReactNode } from "react";
+import { ThemeProvider } from "xiod-ui/theme-provider";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
+}
+```
+
+The provider follows your system's theme preference and remembers your selection. Within the provider, `useTheme()` returns `theme`, `resolvedTheme`, and `setTheme`. Call `setTheme` with `"light"`, `"dark"`, or `"system"` to change the theme.
+
+## Support
+
+Report bugs and request features in [GitHub Issues](https://github.com/ImKKingshuk/XiodUI/issues). When reporting a problem, include the component name, package version, and a minimal example that reproduces the issue.
+
+## License
+
+Licensed under [PolyForm Perimeter 1.0.1](https://polyformproject.org/licenses/perimeter/1.0.1).
+Use in personal projects, hobby projects, and commercial projects
+is permitted subject to the license, including its restriction on providing
+competing products. This is not an unrestricted open-source license.
+
+When distributing any part of the package, include the license terms or their
+URL and the required copyright notice below. The complete license and notice are
+also included in the package's `LICENSE` file.
+
+```text
+Required Notice: Copyright 2026 ImKKingshuk (https://github.com/ImKKingshuk)
+```
+
+Dependencies, including `xiod-icons`, retain their own licenses.

package/dist/components/accordion.d.ts

@@ -0,0 +1,9 @@
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import * as React$1 from "react";
+//#region src/components/accordion.d.ts
+declare function Accordion(props: Accordion$1.Root.Props): React$1.JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): React$1.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): React$1.JSX.Element;
+declare function AccordionPanel({ className, children, ...props }: Accordion$1.Panel.Props): React$1.JSX.Element;
+//#endregion
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -0,0 +1,46 @@
+"use client";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { cn } from "cn";
+import { ChevronDown } from "xiod-icons/icons/ChevronDown";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion.tsx
+function Accordion(props) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-slot": "accordion",
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		className: cn("border-b last:border-b-0", className),
+		"data-slot": "accordion-item",
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			className: cn("relative flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-[color,background-color,box-shadow,opacity] focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+			"data-slot": "accordion-trigger",
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+				className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out",
+				"data-slot": "accordion-indicator"
+			})]
+		})
+	});
+}
+function AccordionPanel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		className: "h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
+		"data-slot": "accordion-panel",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0 pb-4", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/agent-steps.d.ts

@@ -0,0 +1,47 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { IconComponent } from "xiod-icons";
+//#region src/components/agent-steps.d.ts
+export declare const agentStepsVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AgentStepIconValue = "thinking" | "searching" | "editing" | "executing" | "planning" | "completed" | "execute" | "verify" | "done" | "error" | IconComponent | Exclude<React$1.ReactNode, string>;
+export interface AgentStepItem {
+  label: React$1.ReactNode;
+  icon?: AgentStepIconValue;
+  status?: "waiting" | "running" | "completed" | "failed";
+}
+export interface AgentStepsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof agentStepsVariants> {
+  /** [Single-mode] The current active step label */
+  label?: React$1.ReactNode;
+  /** [Single-mode] The icon type or XiodIcons component to show */
+  icon?: AgentStepIconValue;
+  /** [Single-mode] The status of the step. Default is "running". */
+  status?: "waiting" | "running" | "completed" | "failed";
+  /** [Single-mode] Whether to show the icon. Default is true. */
+  showIcon?: boolean;
+  /** [Single-mode] Optional array of steps to cycle through automatically */
+  steps?: AgentStepItem[] | string[];
+  /** [Single-mode] Transition interval for automatic cycling in milliseconds. Default is 4000. */
+  interval?: number;
+  /** [Single-mode] Whether to disable the shimmering text sweep. Default is false. */
+  disableShimmer?: boolean;
+  /** [Single-mode] Whether to show the spinning dashed ring. Default is false. */
+  showSpinner?: boolean;
+}
+export declare function AgentSteps({ size, label: labelProp, icon: iconProp, status, showIcon, steps, interval, disableShimmer, showSpinner, className, children, ...props }: AgentStepsProps): React$1.JSX.Element;
+export interface AgentStepProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  status?: "waiting" | "running" | "completed" | "failed";
+}
+export declare function AgentStep({ status, className, children, ...props }: AgentStepProps): React$1.JSX.Element;
+export interface AgentStepIconProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  icon?: AgentStepIconValue;
+  showSpinner?: boolean;
+}
+export declare function AgentStepIcon({ icon, showSpinner, className, ...props }: AgentStepIconProps): React$1.JSX.Element;
+export interface AgentStepLabelProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  shimmer?: boolean;
+}
+export declare function AgentStepLabel({ shimmer, className, children, ...props }: AgentStepLabelProps): React$1.JSX.Element;
+//#endregion
+export { AgentSteps as AgentStepIndicator };

package/dist/components/agent-steps.js

@@ -0,0 +1,223 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { Check } from "xiod-icons/icons/Check";
+import { Pencil } from "xiod-icons/icons/Pencil";
+import { Search } from "xiod-icons/icons/Search";
+import { SecurityCheck } from "xiod-icons/icons/SecurityCheck";
+import { Terminal } from "xiod-icons/icons/Terminal";
+//#region src/components/agent-steps.tsx
+const pathCircleA = "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
+const pathInfinity = "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
+const pathCircleB = "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
+const STYLE_INLINE = `
+@keyframes agent-step-icon-in {
+  from { opacity: 0; transform: scale(0.92); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes agent-shimmer-sweep {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+.animate-agent-step-icon {
+  animation: agent-step-icon-in 350ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+.agent-step-text-base {
+  transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.agent-shimmer-text-base {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-foreground) 40%, transparent) 0%,
+    color-mix(in srgb, var(--color-foreground) 40%, transparent) 40%,
+    var(--color-foreground) 50%,
+    color-mix(in srgb, var(--color-foreground) 40%, transparent) 60%,
+    color-mix(in srgb, var(--color-foreground) 40%, transparent) 100%
+  );
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: agent-shimmer-sweep 5s infinite linear;
+}
+`;
+const AgentStepsContext = React$1.createContext(null);
+function useAgentSteps() {
+	const context = React$1.useContext(AgentStepsContext);
+	if (!context) throw new Error("AgentSteps compound subcomponents must be used within <AgentSteps />");
+	return context;
+}
+const AgentStepContext = React$1.createContext(null);
+function useAgentStep() {
+	const context = React$1.useContext(AgentStepContext);
+	if (!context) throw new Error("AgentStep subcomponents must be used within <AgentStep />");
+	return context;
+}
+const agentStepsVariants = cva("inline-flex select-none items-center gap-2 justify-center bg-transparent p-0", {
+	variants: { size: {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	} },
+	defaultVariants: { size: "md" }
+});
+function AgentSteps({ size = "md", label: labelProp, icon: iconProp, status = "running", showIcon = true, steps, interval = 4e3, disableShimmer = false, showSpinner = false, className, children, ...props }) {
+	const isSingleMode = !children;
+	const [cycleIndex, setCycleIndex] = React$1.useState(0);
+	const normalizedSteps = React$1.useMemo(() => {
+		if (!steps || steps.length === 0) return [];
+		return steps.map((step) => {
+			if (typeof step === "string") return {
+				label: step,
+				icon: "thinking",
+				status: "running"
+			};
+			return step;
+		});
+	}, [steps]);
+	React$1.useEffect(() => {
+		if (!isSingleMode || normalizedSteps.length <= 1) return;
+		const timer = setInterval(() => {
+			setCycleIndex((prev) => (prev + 1) % normalizedSteps.length);
+		}, interval);
+		return () => clearInterval(timer);
+	}, [
+		isSingleMode,
+		normalizedSteps,
+		interval
+	]);
+	const activeStep = normalizedSteps[cycleIndex];
+	const activeLabel = activeStep ? activeStep.label : labelProp;
+	const activeIcon = activeStep ? activeStep.icon : iconProp;
+	const activeStatus = activeStep ? activeStep.status ?? status : status;
+	const contextValue = React$1.useMemo(() => ({ size: size ?? "md" }), [size]);
+	return /* @__PURE__ */ jsx(AgentStepsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(agentStepsVariants({ size }), "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+			"data-slot": "agent-steps",
+			...props,
+			children: [/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: STYLE_INLINE } }), isSingleMode ? /* @__PURE__ */ jsxs(AgentStep, {
+				status: activeStatus,
+				className: "bg-transparent border-none p-0 flex-row",
+				children: [showIcon && /* @__PURE__ */ jsx(AgentStepIcon, {
+					icon: activeIcon,
+					showSpinner
+				}), activeLabel && /* @__PURE__ */ jsx(AgentStepLabel, {
+					shimmer: !disableShimmer,
+					children: activeLabel
+				})]
+			}) : children]
+		})
+	});
+}
+function AgentStep({ status = "running", className, children, ...props }) {
+	const contextValue = React$1.useMemo(() => ({ status }), [status]);
+	return /* @__PURE__ */ jsx(AgentStepContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex items-center gap-2", className),
+			"data-status": status,
+			"data-slot": "agent-step",
+			...props,
+			children
+		})
+	});
+}
+function AgentStepIcon({ icon, showSpinner = false, className, ...props }) {
+	const { size } = useAgentSteps();
+	const { status } = useAgentStep();
+	const iconElement = React$1.useMemo(() => {
+		const iconSizeClass = size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-3.5";
+		if (status === "completed" || icon === "done") return /* @__PURE__ */ jsx(Check, {
+			className: iconSizeClass,
+			strokeWidth: 3
+		});
+		if (status === "failed" || icon === "error") return /* @__PURE__ */ jsx(Cancel, {
+			className: iconSizeClass,
+			strokeWidth: 3
+		});
+		if (status === "waiting") return /* @__PURE__ */ jsx("div", { className: cn("rounded-full bg-muted-foreground/40", size === "sm" ? "size-1" : size === "lg" ? "size-2" : "size-1.5") });
+		if (!icon || icon === "thinking") return /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": true,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: cn("text-primary shrink-0", size === "sm" ? "size-3.5" : size === "lg" ? "size-5.5" : "size-4.5"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: pathCircleA,
+				children: /* @__PURE__ */ jsx("animate", {
+					attributeName: "d",
+					dur: "6s",
+					repeatCount: "indefinite",
+					values: `${pathCircleA}; ${pathInfinity}; ${pathCircleB}; ${pathInfinity}; ${pathCircleA}`,
+					keyTimes: "0; 0.25; 0.5; 0.75; 1"
+				})
+			})
+		});
+		if (icon === "searching") return /* @__PURE__ */ jsx(Search, { className: iconSizeClass });
+		if (icon === "editing") return /* @__PURE__ */ jsx(Pencil, { className: iconSizeClass });
+		if (icon === "execute") return /* @__PURE__ */ jsx(Terminal, { className: iconSizeClass });
+		if (icon === "verify") return /* @__PURE__ */ jsx(SecurityCheck, { className: iconSizeClass });
+		if (typeof icon === "function" || typeof icon === "object" && icon !== null && "displayName" in icon) return /* @__PURE__ */ jsx(icon, { className: iconSizeClass });
+		return icon;
+	}, [
+		icon,
+		status,
+		size
+	]);
+	const iconFrameClasses = cn("relative flex items-center justify-center rounded-full shrink-0 select-none bg-transparent text-muted-foreground transition-[color,background-color,opacity] duration-300", size === "sm" && "size-5", size === "md" && "size-6", size === "lg" && "size-8", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: iconFrameClasses,
+		"data-slot": "agent-step-icon",
+		...props,
+		children: [status === "running" && showSpinner && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-[-1.5px] rounded-full border border-dashed border-primary/60 animate-spin pointer-events-none", size === "sm" && "inset-[-1.5px]", size === "md" && "inset-[-2px]", size === "lg" && "inset-[-3px]") }), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center size-full animate-agent-step-icon",
+			children: iconElement
+		}, `${status}-${typeof icon === "string" ? icon : "custom"}`)]
+	});
+}
+function AgentStepLabel({ shimmer = true, className, children, ...props }) {
+	const { status } = useAgentStep();
+	const [activeBuffer, setActiveBuffer] = React$1.useState("A");
+	const [labelA, setLabelA] = React$1.useState(children);
+	const [labelB, setLabelB] = React$1.useState("");
+	React$1.useEffect(() => {
+		if (activeBuffer === "A") {
+			if (children !== labelA) {
+				setLabelB(children);
+				setActiveBuffer("B");
+			}
+		} else if (children !== labelB) {
+			setLabelA(children);
+			setActiveBuffer("A");
+		}
+	}, [
+		children,
+		activeBuffer,
+		labelA,
+		labelB
+	]);
+	const isAActive = activeBuffer === "A";
+	const isRunning = status === "running" && shimmer;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-grid grid-cols-1 grid-rows-1 items-center overflow-hidden h-5 min-w-[80px]", className),
+		"data-slot": "agent-step-label",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("col-start-1 row-start-1 flex items-center whitespace-nowrap agent-step-text-base", isAActive ? "opacity-100" : "opacity-0 pointer-events-none", isRunning && "agent-shimmer-text-base", status === "waiting" && "text-muted-foreground", status === "completed" && "text-foreground font-semibold", status === "failed" && "text-destructive font-semibold"),
+			children: labelA
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("col-start-1 row-start-1 flex items-center whitespace-nowrap agent-step-text-base", !isAActive ? "opacity-100" : "opacity-0 pointer-events-none", isRunning && "agent-shimmer-text-base", status === "waiting" && "text-muted-foreground", status === "completed" && "text-foreground font-semibold", status === "failed" && "text-destructive font-semibold"),
+			children: labelB
+		})]
+	});
+}
+//#endregion
+export { AgentStep, AgentStepIcon, AgentSteps as AgentStepIndicator, AgentSteps, AgentStepLabel, agentStepsVariants };

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

@@ -0,0 +1,21 @@
+import * as React$1 from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/alert-dialog.d.ts
+declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
+declare const AlertDialog: typeof AlertDialog$1.Root;
+declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function AlertDialogTrigger(props: AlertDialog$1.Trigger.Props): React$1.JSX.Element;
+declare function AlertDialogBackdrop({ className, ...props }: AlertDialog$1.Backdrop.Props): React$1.JSX.Element;
+declare function AlertDialogViewport({ className, ...props }: AlertDialog$1.Viewport.Props): React$1.JSX.Element;
+declare function AlertDialogPopup({ className, bottomStickOnMobile, ...props }: AlertDialog$1.Popup.Props & {
+  bottomStickOnMobile?: boolean;
+}): React$1.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogFooter({ className, variant, ...props }: React$1.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}): React$1.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: AlertDialog$1.Title.Props): React$1.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: AlertDialog$1.Description.Props): React$1.JSX.Element;
+declare function AlertDialogClose(props: AlertDialog$1.Close.Props): React$1.JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };

package/dist/components/alert-dialog.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/alert-dialog.tsx
+const AlertDialogCreateHandle = AlertDialog$1.createHandle;
+const AlertDialog = AlertDialog$1.Root;
+const AlertDialogPortal = AlertDialog$1.Portal;
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+		"data-slot": "alert-dialog-backdrop",
+		...props
+	});
+}
+function AlertDialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
+		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", className),
+		"data-slot": "alert-dialog-viewport",
+		...props
+	});
+}
+function AlertDialogPopup({ className, bottomStickOnMobile = true, ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, {
+		className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+			className: cn("translate-y-[calc(-1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none", className),
+			"data-slot": "alert-dialog-popup",
+			...props
+		})
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className),
+		"data-slot": "alert-dialog-header",
+		...props
+	});
+}
+function AlertDialogFooter({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "border-t bg-muted/72 pt-[calc(--spacing(4)-1px)] pb-4", variant === "bare" && "pb-6", className),
+		"data-slot": "alert-dialog-footer",
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		className: cn("font-heading font-semibold text-xl leading-none", className),
+		"data-slot": "alert-dialog-title",
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "alert-dialog-description",
+		...props
+	});
+}
+function AlertDialogClose(props) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-close",
+		...props
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };