@burtson-labs/ui 0.14.0 → 0.15.0

package/LICENSES/DEPENDENCIES.txt

@@ -303,7 +303,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ====================
 
-@burtson-labs/icons@0.3.0 (ISC)
+@burtson-labs/icons@0.5.0 (ISC)
 LICENSE
 ISC License
 

package/README.md

@@ -58,9 +58,11 @@ npx shadcn@latest add https://ui.burtson.ai/r/button.json
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/panel-grid.svg"/><img src="https://icons.burtson.ai/svg-black/panel-grid.svg" align="center" alt=""/></picture> Components
 
-Accordion · Alert · Alert Dialog · App Shell · Attachment · Audio Player · Avatar · Badge · Breadcrumb · Button · Card · Chat History · Chat Layout · Checkbox · Checkbox Card · Collapsible · Combobox · Command · Composer · Connection Status · Context Menu · Conversation · Copy Button · Data Table · Dialog · Dropdown Menu · Editor Tabs · Empty State · Field · Icon Button · Input · Kbd · Label · Markdown · Menubar · Message · Message Actions · Mobile Nav · Navigation Menu · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Source · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Tool Call · Toolbar · Tooltip · Tour · Tree View · Voice Recorder
+Accordion · Agent Run · Alert · Alert Dialog · App Shell · Attachment · Audio Player · Avatar · Avatar Upload · Badge · Breadcrumb · Button · Card · Chat History · Chat Layout · Checkbox · Checkbox Card · Collapsible · Combobox · Command · Composer · Connection Status · Context Menu · Conversation · Copy Button · Data Table · Dialog · Dropdown Menu · Editor Tabs · Empty State · Error Summary · Field · Form Actions · Icon Button · Input · Kbd · Label · Markdown · Menubar · Message · Message Actions · Mobile Nav · Native Select · Navigation Menu · Number Input · Onboarding Checklist · Page Header · Pagination · Popover · Progress · Radio Group · Reasoning · Resizable · Scroll Area · Secret Input · Select · Separator · Sheet · Skeleton · Slider · Source · Spinner · Stat Card · Status · Steps · Switch · Table · Tabs · Textarea · Toast · Toaster · Tool Call · Toolbar · Tooltip · Tour · Tree View · Voice Recorder
 
-Live previews and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button). Building a chat app? The [chat recipe](https://ui.burtson.ai/docs/recipes/chat) puts history, attachments, streaming, voice notes and full screen together, with the complete source.
+Live previews, when-to-use notes, accessibility notes and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button). Building a chat app? The [chat recipe](https://ui.burtson.ai/docs/recipes/chat) puts history, attachments, streaming, voice notes and full screen together, with the complete source. Building a form? `Field` wires label, help and error onto any control, `FieldGrid` lines fields up and `FormActions` places the buttons, on phones too.
+
+Every control is at least 44px on touch screens, shows one focus style per kind of control (`focusRingClasses`, `fieldFocusClasses`) and meets 4.5:1 for text and 3:1 for boundaries in both palettes and any accent; a Playwright smoke in CI measures it.
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/palette.svg"/><img src="https://icons.burtson.ai/svg-black/palette.svg" align="center" alt=""/></picture> Theming
 
@@ -80,7 +82,7 @@ import { createBurtsonTheme } from '@burtson-labs/ui/mui';
 createBurtsonTheme({ mode: 'dark', accent: '#2563eb', density: 'compact' });
 ```
 
-`@burtson-labs/ui/tokens` also exports `accentTokens(accent, mode)` for the CSS side, and the motion timing (`duration`, `easing`) and `elevation` levels that `theme.css` exposes as `--duration-*` and `--ease-*`.
+`@burtson-labs/ui/tokens` also exports `accentTokens(accent, mode)` for the CSS side, the motion timing (`duration`, `easing`) that `theme.css` exposes as `--duration-*` and `--ease-*` and every `transition-*` utility runs on, the `elevation` levels (`shadow.lg` for floating surfaces, `shadow.xl` for modal ones) and the `layer` z-index scale (raised 10, chrome 40, overlay 50, toast 100).
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/terminal.svg"/><img src="https://icons.burtson.ai/svg-black/terminal.svg" align="center" alt=""/></picture> Develop
 
@@ -88,17 +90,19 @@ createBurtsonTheme({ mode: 'dark', accent: '#2563eb', density: 'compact' });
 npm install
 npm run dev        # docs site with live components, http://localhost:5173
 npm run check      # typecheck, lint, format, tests, package build, site build
+npm run smoke      # Playwright: touch targets, focus, overflow, keyboard (needs npm run site)
 ```
 
-| Path              | What                                                                             |
-| ----------------- | -------------------------------------------------------------------------------- |
-| `src/components/` | One file per component; also the registry source                                 |
-| `src/tokens.ts`   | Design tokens (edit here, then `npm run theme`)                                  |
-| `src/mui/`        | MUI theme adapter                                                                |
-| `site/`           | Docs site for [ui.burtson.ai](https://ui.burtson.ai); demos in `site/src/demos/` |
-| `scripts/`        | Package build, theme and registry generators, link-preview card                  |
+| Path              | What                                                                                                                                                             |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/components/` | One file per component; also the registry source                                                                                                                 |
+| `src/tokens.ts`   | Design tokens (edit here, then `npm run theme`)                                                                                                                  |
+| `src/mui/`        | MUI theme adapter                                                                                                                                                |
+| `site/`           | Docs site for [ui.burtson.ai](https://ui.burtson.ai); demos in `site/src/demos/`, notes in `site/src/usage.ts`; `/matrix` renders every component in every state |
+| `e2e/`            | Browser smoke (Playwright, Chromium at 1440 and 390 touch)                                                                                                       |
+| `scripts/`        | Package build, theme and registry generators, link-preview card                                                                                                  |
 
-Adding a component: write `src/components/<name>.tsx`, export it from `src/index.ts`, add a demo in `site/src/demos/<name>.tsx` and an entry in `site/src/docs.ts`. The registry picks it up on the next build.
+Adding a component: write `src/components/<name>.tsx` (forwardRef, `data-slot` on every part, `focusRingClasses` or `fieldFocusClasses` for focus, 44px on touch), export it from `src/index.ts`, add a demo in `site/src/demos/<name>.tsx`, an entry in `site/src/docs.ts`, its notes in `site/src/usage.ts` and a cell in `site/src/matrix.tsx`. The registry picks it up on the next build.
 
 Linting and formatting follow [Burtson Labs frontend standards](https://github.com/Burtson-Labs/frontend-standards). Every push is audited by [Sentinel](https://github.com/Burtson-Labs/sentinel-audit).
 

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '../primitives/vendor/radix/react-accordion';
 declare function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Content, Header, Item, Root, Trigger } from "../primitives/vendor/radix/react-accordion/accordion.js";
+import * as React from "react";
 import ChevronDown from "@burtson-labs/icons/react/chevron-down";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion(props) {
@@ -11,29 +11,32 @@ function Accordion(props) {
 		...props
 	});
 }
-function AccordionItem({ className, ...props }) {
+var AccordionItem = React.forwardRef(function AccordionItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Item, {
+		ref,
 		"data-slot": "accordion-item",
 		className: cn("border-b last:border-b-0", className),
 		...props
 	});
-}
-function AccordionTrigger({ className, children, ...props }) {
+});
+var AccordionTrigger = React.forwardRef(function AccordionTrigger({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Header, {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Trigger, {
+			ref,
 			"data-slot": "accordion-trigger",
-			className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:text-brand focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className),
+			className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-colors hover:text-brand disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", focusRingClasses, "focus-visible:outline-offset-[-2px]", className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
-				className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200",
+				className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-(--duration-standard)",
 				"aria-hidden": true
 			})]
 		})
 	});
-}
-function AccordionContent({ className, children, ...props }) {
+});
+var AccordionContent = React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "accordion-content",
 		className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
 		...props,
@@ -42,7 +45,7 @@ function AccordionContent({ className, children, ...props }) {
 			children
 		})
 	});
-}
+});
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AccordionPrimitive.Root","AccordionPrimitive.Item","AccordionPrimitive.Header","AccordionPrimitive.Trigger","AccordionPrimitive.Content"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AccordionPrimitive from '../primitives/vendor/radix/react-accordion';\n\nfunction Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:text-brand focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\"\n          aria-hidden\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"],"mappings":";;;;;;;AAMA,SAAS,UAAU,OAA6D;CAC9E,OAAO,oBAACA,MAAD;EAAyB,aAAU;EAAY,GAAI;CAAQ,CAAA;AACpE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACC,QAAD;EAA2B,WAAU;EACnC,UAAA,qBAACC,SAAD;GACE,aAAU;GACV,WAAW,GACT,uRACA,SACF;GACA,GAAI;GANN,UAAA,CAQG,UACD,oBAAC,aAAD;IACE,WAAU;IACV,eAAA;GACD,CAAA,CACyB;;CACH,CAAA;AAE/B;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,aAAa,SAAS;GAAI;EAAc,CAAA;CACjC,CAAA;AAEhC"}
+{"version":3,"file":"accordion.js","names":["AccordionPrimitive.Root","AccordionPrimitive.Item","AccordionPrimitive.Header","AccordionPrimitive.Trigger","AccordionPrimitive.Content"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses } from '../lib/utils';\nimport * as AccordionPrimitive from '../primitives/vendor/radix/react-accordion';\n\nfunction Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nconst AccordionItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof AccordionPrimitive.Item>\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n});\n\nconst AccordionTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof AccordionPrimitive.Trigger>\n>(function AccordionTrigger({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-colors hover:text-brand disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          focusRingClasses,\n          'focus-visible:outline-offset-[-2px]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-(--duration-standard)\"\n          aria-hidden\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nconst AccordionContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof AccordionPrimitive.Content>\n>(function AccordionContent({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n});\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"],"mappings":";;;;;;;AAMA,SAAS,UAAU,OAA6D;CAC9E,OAAO,oBAACA,MAAD;EAAyB,aAAU;EAAY,GAAI;CAAQ,CAAA;AACpE;AAEA,IAAM,gBAAgB,MAAM,WAG1B,SAAS,cAAc,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAACC,MAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAClE,OACE,oBAACC,QAAD;EAA2B,WAAU;EACnC,UAAA,qBAACC,SAAD;GACO;GACL,aAAU;GACV,WAAW,GACT,yNACA,kBACA,uCACA,SACF;GACA,GAAI;GATN,UAAA,CAWG,UACD,oBAAC,aAAD;IACE,WAAU;IACV,eAAA;GACD,CAAA,CACyB;;CACH,CAAA;AAE/B,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAClE,OACE,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,aAAa,SAAS;GAAI;EAAc,CAAA;CACjC,CAAA;AAEhC,CAAC"}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type AgentRunState = 'queued' | 'running' | 'waiting' | 'paused' | 'completed' | 'failed' | 'canceled';
+export interface AgentRunStep {
+    id: string;
+    label: string;
+    state: AgentRunState;
+    detail?: React.ReactNode;
+}
+export interface AgentRunProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title: string;
+    state: AgentRunState;
+    steps: AgentRunStep[];
+    /** Explain the current state, especially what a person needs to do next. */
+    summary?: React.ReactNode;
+    busy?: boolean;
+    onPause?: () => void;
+    onResume?: () => void;
+    onCancel?: () => void;
+    onRetry?: () => void;
+}
+/** A controlled run timeline. The application owns execution, cancellation and retry. */
+export declare function AgentRun({ title, state, steps, summary, busy, onPause, onResume, onCancel, onRetry, children, className, ...props }: AgentRunProps): React.JSX.Element;

package/dist/components/agent-run.js

@@ -0,0 +1,131 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import AlertCircle from "@burtson-labs/icons/react/alert-circle";
+import Pause from "@burtson-labs/icons/react/pause";
+import Check from "@burtson-labs/icons/react/check";
+import Circle from "@burtson-labs/icons/react/circle";
+//#region src/components/agent-run.tsx
+var labels = {
+	queued: "Queued",
+	running: "Running",
+	waiting: "Needs your input",
+	paused: "Paused",
+	completed: "Completed",
+	failed: "Failed",
+	canceled: "Canceled"
+};
+function RunIcon({ state }) {
+	if (state === "running") return /* @__PURE__ */ jsx(Spinner, {
+		className: "size-4",
+		label: "Running"
+	});
+	return /* @__PURE__ */ jsx(state === "completed" ? Check : state === "failed" || state === "waiting" ? AlertCircle : state === "paused" ? Pause : Circle, {
+		"aria-hidden": true,
+		className: cn("size-4", state === "completed" && "text-success", state === "failed" && "text-destructive", state === "waiting" && "text-warning")
+	});
+}
+/** A controlled run timeline. The application owns execution, cancellation and retry. */
+function AgentRun({ title, state, steps, summary, busy = false, onPause, onResume, onCancel, onRetry, children, className, ...props }) {
+	const id = React.useId();
+	const active = [
+		"queued",
+		"running",
+		"waiting",
+		"paused"
+	].includes(state);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "agent-run",
+		"data-state": state,
+		"aria-labelledby": id,
+		className: cn("min-w-0 overflow-hidden rounded-lg border border-border bg-surface", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "grid gap-2 border-b border-border p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("h3", {
+						id,
+						className: "min-w-0 text-sm font-semibold break-words",
+						children: title
+					}), /* @__PURE__ */ jsxs("span", {
+						role: "status",
+						className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx(RunIcon, { state }), labels[state]]
+					})]
+				}), summary && /* @__PURE__ */ jsx("p", {
+					className: "text-sm leading-relaxed text-muted-foreground",
+					children: summary
+				})]
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				className: "grid gap-4 p-4",
+				"aria-label": "Run steps",
+				children: steps.map((step) => /* @__PURE__ */ jsxs("li", {
+					className: "flex min-w-0 gap-3",
+					"aria-current": step.state === "running" || step.state === "waiting" ? "step" : void 0,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 shrink-0",
+						children: /* @__PURE__ */ jsx(RunIcon, { state: step.state })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "grid min-w-0 flex-1 gap-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-sm font-medium break-words",
+							children: [step.label, /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [" — ", labels[step.state]]
+							})]
+						}), step.detail && /* @__PURE__ */ jsx("div", {
+							className: "text-xs leading-relaxed break-words text-muted-foreground",
+							children: step.detail
+						})]
+					})]
+				}, step.id))
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "grid min-w-0 gap-3 border-t border-border p-4",
+				children
+			}),
+			(state === "running" && onPause || state === "paused" && onResume || state === "failed" && onRetry || active && onCancel) && /* @__PURE__ */ jsxs("footer", {
+				className: "flex flex-wrap justify-end gap-2 border-t border-border p-3",
+				"aria-busy": busy || void 0,
+				children: [
+					active && onCancel && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						disabled: busy,
+						onClick: onCancel,
+						children: "Cancel run"
+					}),
+					state === "running" && onPause && /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						disabled: busy,
+						onClick: onPause,
+						children: "Pause run"
+					}),
+					state === "paused" && onResume && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						disabled: busy,
+						onClick: onResume,
+						children: "Resume run"
+					}),
+					state === "failed" && onRetry && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						disabled: busy,
+						onClick: onRetry,
+						children: "Retry run"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { AgentRun };
+
+//# sourceMappingURL=agent-run.js.map

package/dist/components/agent-run.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-run.js","names":[],"sources":["../../src/components/agent-run.tsx"],"sourcesContent":["import AlertCircle from '@burtson-labs/icons/react/alert-circle';\nimport Check from '@burtson-labs/icons/react/check';\nimport Circle from '@burtson-labs/icons/react/circle';\nimport Pause from '@burtson-labs/icons/react/pause';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { Spinner } from './spinner';\n\nexport type AgentRunState =\n  'queued' | 'running' | 'waiting' | 'paused' | 'completed' | 'failed' | 'canceled';\nexport interface AgentRunStep {\n  id: string;\n  label: string;\n  state: AgentRunState;\n  detail?: React.ReactNode;\n}\nexport interface AgentRunProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  title: string;\n  state: AgentRunState;\n  steps: AgentRunStep[];\n  /** Explain the current state, especially what a person needs to do next. */\n  summary?: React.ReactNode;\n  busy?: boolean;\n  onPause?: () => void;\n  onResume?: () => void;\n  onCancel?: () => void;\n  onRetry?: () => void;\n}\nconst labels: Record<AgentRunState, string> = {\n  queued: 'Queued',\n  running: 'Running',\n  waiting: 'Needs your input',\n  paused: 'Paused',\n  completed: 'Completed',\n  failed: 'Failed',\n  canceled: 'Canceled',\n};\nfunction RunIcon({ state }: { state: AgentRunState }) {\n  if (state === 'running') return <Spinner className=\"size-4\" label=\"Running\" />;\n  const Icon =\n    state === 'completed'\n      ? Check\n      : state === 'failed' || state === 'waiting'\n        ? AlertCircle\n        : state === 'paused'\n          ? Pause\n          : Circle;\n  return (\n    <Icon\n      aria-hidden\n      className={cn(\n        'size-4',\n        state === 'completed' && 'text-success',\n        state === 'failed' && 'text-destructive',\n        state === 'waiting' && 'text-warning',\n      )}\n    />\n  );\n}\n\n/** A controlled run timeline. The application owns execution, cancellation and retry. */\nexport function AgentRun({\n  title,\n  state,\n  steps,\n  summary,\n  busy = false,\n  onPause,\n  onResume,\n  onCancel,\n  onRetry,\n  children,\n  className,\n  ...props\n}: AgentRunProps) {\n  const id = React.useId();\n  const active = ['queued', 'running', 'waiting', 'paused'].includes(state);\n  return (\n    <section\n      data-slot=\"agent-run\"\n      data-state={state}\n      aria-labelledby={id}\n      className={cn(\n        'min-w-0 overflow-hidden rounded-lg border border-border bg-surface',\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"grid gap-2 border-b border-border p-4\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <h3 id={id} className=\"min-w-0 text-sm font-semibold break-words\">\n            {title}\n          </h3>\n          <span\n            role=\"status\"\n            className=\"inline-flex items-center gap-1.5 text-xs text-muted-foreground\"\n          >\n            <RunIcon state={state} />\n            {labels[state]}\n          </span>\n        </div>\n        {summary && <p className=\"text-sm leading-relaxed text-muted-foreground\">{summary}</p>}\n      </header>\n      <ol className=\"grid gap-4 p-4\" aria-label=\"Run steps\">\n        {steps.map((step) => (\n          <li\n            key={step.id}\n            className=\"flex min-w-0 gap-3\"\n            aria-current={step.state === 'running' || step.state === 'waiting' ? 'step' : undefined}\n          >\n            <span className=\"mt-0.5 shrink-0\">\n              <RunIcon state={step.state} />\n            </span>\n            <div className=\"grid min-w-0 flex-1 gap-1\">\n              <span className=\"text-sm font-medium break-words\">\n                {step.label}\n                <span className=\"sr-only\"> — {labels[step.state]}</span>\n              </span>\n              {step.detail && (\n                <div className=\"text-xs leading-relaxed break-words text-muted-foreground\">\n                  {step.detail}\n                </div>\n              )}\n            </div>\n          </li>\n        ))}\n      </ol>\n      {children && <div className=\"grid min-w-0 gap-3 border-t border-border p-4\">{children}</div>}\n      {((state === 'running' && onPause) ||\n        (state === 'paused' && onResume) ||\n        (state === 'failed' && onRetry) ||\n        (active && onCancel)) && (\n        <footer\n          className=\"flex flex-wrap justify-end gap-2 border-t border-border p-3\"\n          aria-busy={busy || undefined}\n        >\n          {active && onCancel && (\n            <Button variant=\"ghost\" size=\"sm\" disabled={busy} onClick={onCancel}>\n              Cancel run\n            </Button>\n          )}\n          {state === 'running' && onPause && (\n            <Button variant=\"outline\" size=\"sm\" disabled={busy} onClick={onPause}>\n              Pause run\n            </Button>\n          )}\n          {state === 'paused' && onResume && (\n            <Button size=\"sm\" disabled={busy} onClick={onResume}>\n              Resume run\n            </Button>\n          )}\n          {state === 'failed' && onRetry && (\n            <Button size=\"sm\" disabled={busy} onClick={onRetry}>\n              Retry run\n            </Button>\n          )}\n        </footer>\n      )}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA+BA,IAAM,SAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,UAAU;AACZ;AACA,SAAS,QAAQ,EAAE,SAAmC;CACpD,IAAI,UAAU,WAAW,OAAO,oBAAC,SAAD;EAAS,WAAU;EAAS,OAAM;CAAW,CAAA;CAS7E,OACE,oBARA,UAAU,cACN,QACA,UAAU,YAAY,UAAU,YAC9B,cACA,UAAU,WACR,QACA,QAER;EACE,eAAA;EACA,WAAW,GACT,UACA,UAAU,eAAe,gBACzB,UAAU,YAAY,oBACtB,UAAU,aAAa,cACzB;CACD,CAAA;AAEL;;AAGA,SAAgB,SAAS,EACvB,OACA,OACA,OACA,SACA,OAAO,OACP,SACA,UACA,UACA,SACA,UACA,WACA,GAAG,SACa;CAChB,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,SAAS;EAAC;EAAU;EAAW;EAAW;CAAQ,CAAC,CAAC,SAAS,KAAK;CACxE,OACE,qBAAC,WAAD;EACE,aAAU;EACV,cAAY;EACZ,mBAAiB;EACjB,WAAW,GACT,sEACA,SACF;EACA,GAAI;EARN,UAAA;GAUE,qBAAC,UAAD;IAAQ,WAAU;IAAlB,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAQ;MAAI,WAAU;MACnB,UAAA;KACC,CAAA,GACJ,qBAAC,QAAD;MACE,MAAK;MACL,WAAU;MAFZ,UAAA,CAIE,oBAAC,SAAD,EAAgB,MAAQ,CAAA,GACvB,OAAO,MACJ;KACH,CAAA,CAAA;IACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;KAAG,WAAU;KAAiD,UAAA;IAAW,CAAA,CAC/E;;GACR,oBAAC,MAAD;IAAI,WAAU;IAAiB,cAAW;IACvC,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;KAEE,WAAU;KACV,gBAAc,KAAK,UAAU,aAAa,KAAK,UAAU,YAAY,SAAS,KAAA;KAHhF,UAAA,CAKE,oBAAC,QAAD;MAAM,WAAU;MACd,UAAA,oBAAC,SAAD,EAAS,OAAO,KAAK,MAAQ,CAAA;KACzB,CAAA,GACN,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACG,KAAK,OACN,qBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA,CAA0B,OAAI,OAAO,KAAK,MAAa;OACnD,CAAA,CAAA;MACL,CAAA,GAAA,KAAK,UACJ,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,KAAK;MACH,CAAA,CAEJ;KACH,CAAA,CAAA;IAlBG,GAAA,KAAK,EAkBR,CACL;GACC,CAAA;GACH,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAiD;GAAc,CAAA;IACxF,UAAU,aAAa,WACvB,UAAU,YAAY,YACtB,UAAU,YAAY,WACtB,UAAU,aACX,qBAAC,UAAD;IACE,WAAU;IACV,aAAW,QAAQ,KAAA;IAFrB,UAAA;KAIG,UAAU,YACT,oBAAC,QAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,UAAU;MAAM,SAAS;MAAU,UAAA;KAE7D,CAAA;KAET,UAAU,aAAa,WACtB,oBAAC,QAAD;MAAQ,SAAQ;MAAU,MAAK;MAAK,UAAU;MAAM,SAAS;MAAS,UAAA;KAE9D,CAAA;KAET,UAAU,YAAY,YACrB,oBAAC,QAAD;MAAQ,MAAK;MAAK,UAAU;MAAM,SAAS;MAAU,UAAA;KAE7C,CAAA;KAET,UAAU,YAAY,WACrB,oBAAC,QAAD;MAAQ,MAAK;MAAK,UAAU;MAAM,SAAS;MAAS,UAAA;KAE5C,CAAA;IAEJ;;EAEH;;AAEb"}

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

@@ -6,15 +6,17 @@ import * as AlertDialogPrimitive from '../primitives/vendor/radix/react-alert-di
  * answers it; Escape still cancels. Focus starts on Cancel.
  */
 declare function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
-declare function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
-declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
-/** The confirming button. `destructive` paints it as a danger action. */
-declare function AlertDialogAction({ className, destructive, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface AlertDialogActionProps extends React.ComponentProps<typeof AlertDialogPrimitive.Action> {
+    /** Paints the confirming button as a danger action. */
     destructive?: boolean;
-}): React.JSX.Element;
-declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+}
+/** The confirming button. */
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog.js

@@ -2,7 +2,8 @@
 import { cn } from "../lib/utils.js";
 import { Action, Cancel, Content, Description, Overlay, Portal, Root, Title, Trigger } from "../primitives/vendor/radix/react-alert-dialog/alert-dialog.js";
 import { buttonVariants } from "./button.js";
-import "react";
+import { overlayClasses } from "./dialog.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/alert-dialog.tsx
 /**
@@ -16,65 +17,73 @@ function AlertDialog(props) {
 		...props
 	});
 }
-function AlertDialogTrigger(props) {
+var AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger(props, ref) {
 	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "alert-dialog-trigger",
 		...props
 	});
-}
-function AlertDialogContent({ className, ...props }) {
+});
+var AlertDialogContent = React.forwardRef(function AlertDialogContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Overlay, {
 		"data-slot": "alert-dialog-overlay",
-		className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
+		className: overlayClasses
 	}), /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "alert-dialog-content",
-		className: cn("fixed top-1/2 left-1/2 z-50 grid [--bl-scale:0.95] [--bl-ty:8px] w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6", className),
+		className: cn("fixed top-1/2 left-1/2 z-50 grid [--bl-scale:0.95] [--bl-ty:8px] w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6", className),
 		...props
 	})] });
-}
-function AlertDialogHeader({ className, ...props }) {
+});
+var AlertDialogHeader = React.forwardRef(function AlertDialogHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "alert-dialog-header",
 		className: cn("grid gap-1.5", className),
 		...props
 	});
-}
-function AlertDialogFooter({ className, ...props }) {
+});
+var AlertDialogFooter = React.forwardRef(function AlertDialogFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "alert-dialog-footer",
 		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
-}
-function AlertDialogTitle({ className, ...props }) {
+});
+var AlertDialogTitle = React.forwardRef(function AlertDialogTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Title, {
+		ref,
 		"data-slot": "alert-dialog-title",
 		className: cn("text-base font-semibold tracking-[-0.02em]", className),
 		...props
 	});
-}
-function AlertDialogDescription({ className, ...props }) {
+});
+var AlertDialogDescription = React.forwardRef(function AlertDialogDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Description, {
+		ref,
 		"data-slot": "alert-dialog-description",
 		className: cn("text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
-}
-/** The confirming button. `destructive` paints it as a danger action. */
-function AlertDialogAction({ className, destructive = false, ...props }) {
+});
+/** The confirming button. */
+var AlertDialogAction = React.forwardRef(function AlertDialogAction({ className, destructive = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Action, {
+		ref,
 		"data-slot": "alert-dialog-action",
 		className: cn(buttonVariants({ variant: destructive ? "destructive" : "default" }), className),
 		...props
 	});
-}
-function AlertDialogCancel({ className, ...props }) {
+});
+var AlertDialogCancel = React.forwardRef(function AlertDialogCancel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Cancel, {
+		ref,
 		"data-slot": "alert-dialog-cancel",
 		className: cn(buttonVariants({ variant: "outline" }), className),
 		...props
 	});
-}
+});
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };
 

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive.Root","AlertDialogPrimitive.Trigger","AlertDialogPrimitive.Portal","AlertDialogPrimitive.Overlay","AlertDialogPrimitive.Content","AlertDialogPrimitive.Title","AlertDialogPrimitive.Description","AlertDialogPrimitive.Action","AlertDialogPrimitive.Cancel"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AlertDialogPrimitive from '../primitives/vendor/radix/react-alert-dialog';\n\nimport { buttonVariants } from './button';\n\n/**\n * A confirmation that interrupts: \"Delete 3 keys?\", \"Revoke access?\". Unlike\n * Dialog it has no close button and ignores outside clicks, so the person\n * answers it; Escape still cancels. Focus starts on Cancel.\n */\nfunction AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Overlay\n        data-slot=\"alert-dialog-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\"\n      />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'fixed top-1/2 left-1/2 z-50 grid [--bl-scale:0.95] [--bl-ty:8px] w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"alert-dialog-header\" className={cn('grid gap-1.5', className)} {...props} />\n  );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** The confirming button. `destructive` paints it as a danger action. */\nfunction AlertDialogAction({\n  className,\n  destructive = false,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & { destructive?: boolean }) {\n  return (\n    <AlertDialogPrimitive.Action\n      data-slot=\"alert-dialog-action\"\n      className={cn(\n        buttonVariants({ variant: destructive ? 'destructive' : 'default' }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;AAYA,SAAS,YAAY,OAA+D;CAClF,OAAO,oBAACA,MAAD;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,mBAAmB,OAAkE;CAC5F,OAAO,oBAACC,SAAD;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,qBAACC,QAAD,EAAA,UAAA,CACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAU;CACX,CAAA,GACD,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,2YACA,SACF;EACA,GAAI;CACL,CAAA,CAC0B,EAAA,CAAA;AAEjC;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAsC;CAC/E,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE/F;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAsC;CAC/E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACC,aAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EACzB,WACA,cAAc,OACd,GAAG,SACoF;CACvF,OACE,oBAACC,QAAD;EACE,aAAU;EACV,WAAW,GACT,eAAe,EAAE,SAAS,cAAc,gBAAgB,UAAU,CAAC,GACnE,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive.Root","AlertDialogPrimitive.Trigger","AlertDialogPrimitive.Portal","AlertDialogPrimitive.Overlay","AlertDialogPrimitive.Content","AlertDialogPrimitive.Title","AlertDialogPrimitive.Description","AlertDialogPrimitive.Action","AlertDialogPrimitive.Cancel"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as AlertDialogPrimitive from '../primitives/vendor/radix/react-alert-dialog';\n\nimport { buttonVariants } from './button';\nimport { overlayClasses } from './dialog';\n\n/**\n * A confirmation that interrupts: \"Delete 3 keys?\", \"Revoke access?\". Unlike\n * Dialog it has no close button and ignores outside clicks, so the person\n * answers it; Escape still cancels. Focus starts on Cancel.\n */\nfunction AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nconst AlertDialogTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof AlertDialogPrimitive.Trigger>\n>(function AlertDialogTrigger(props, ref) {\n  return <AlertDialogPrimitive.Trigger ref={ref} data-slot=\"alert-dialog-trigger\" {...props} />;\n});\n\nconst AlertDialogContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof AlertDialogPrimitive.Content>\n>(function AlertDialogContent({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Overlay data-slot=\"alert-dialog-overlay\" className={overlayClasses} />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'fixed top-1/2 left-1/2 z-50 grid [--bl-scale:0.95] [--bl-ty:8px] w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-2rem)] overflow-y-auto overscroll-contain -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPrimitive.Portal>\n  );\n});\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function AlertDialogHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-dialog-header\"\n        className={cn('grid gap-1.5', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function AlertDialogFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-dialog-footer\"\n        className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AlertDialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentProps<typeof AlertDialogPrimitive.Title>\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      className={cn('text-base font-semibold tracking-[-0.02em]', className)}\n      {...props}\n    />\n  );\n});\n\nconst AlertDialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentProps<typeof AlertDialogPrimitive.Description>\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\n  typeof AlertDialogPrimitive.Action\n> {\n  /** Paints the confirming button as a danger action. */\n  destructive?: boolean;\n}\n\n/** The confirming button. */\nconst AlertDialogAction = React.forwardRef<HTMLButtonElement, AlertDialogActionProps>(\n  function AlertDialogAction({ className, destructive = false, ...props }, ref) {\n    return (\n      <AlertDialogPrimitive.Action\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        className={cn(\n          buttonVariants({ variant: destructive ? 'destructive' : 'default' }),\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof AlertDialogPrimitive.Cancel>\n>(function AlertDialogCancel({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      ref={ref}\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n});\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAS,YAAY,OAA+D;CAClF,OAAO,oBAACA,MAAD;EAA2B,aAAU;EAAe,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,OAAO,KAAK;CACxC,OAAO,oBAACC,SAAD;EAAmC;EAAK,aAAU;EAAuB,GAAI;CAAQ,CAAA;AAC9F,CAAC;AAED,IAAM,qBAAqB,MAAM,WAG/B,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC1D,OACE,qBAACC,QAAD,EAAA,UAAA,CACE,oBAACC,SAAD;EAA8B,aAAU;EAAuB,WAAW;CAAiB,CAAA,GAC3F,oBAACC,SAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,8WACA,SACF;EACA,GAAI;CACL,CAAA,CAC0B,EAAA,CAAA;AAEjC,CAAC;AAED,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,yBAAyB,MAAM,WAGnC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9D,OACE,oBAACC,aAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL,CAAC;;AAUD,IAAM,oBAAoB,MAAM,WAC9B,SAAS,kBAAkB,EAAE,WAAW,cAAc,OAAO,GAAG,SAAS,KAAK;CAC5E,OACE,oBAACC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,eAAe,EAAE,SAAS,cAAc,gBAAgB,UAAU,CAAC,GACnE,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,oBAAoB,MAAM,WAG9B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,OACE,oBAACC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/alert.d.ts

@@ -3,7 +3,9 @@ import * as React from 'react';
 declare const alertVariants: (props?: ({
     variant?: "destructive" | "success" | "warning" | "info" | "brand" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export interface AlertProps extends React.ComponentProps<'div'>, VariantProps<typeof alertVariants> {
+}
+declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Alert, AlertDescription, AlertTitle, alertVariants };

package/dist/components/alert.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/alert.tsx
@@ -15,28 +15,32 @@ var alertVariants = cva("group/alert relative grid w-full grid-cols-1 has-[>svg]
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Alert({ className, variant, ...props }) {
+var Alert = React.forwardRef(function Alert({ className, variant, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "alert",
+		"data-variant": variant ?? "default",
 		role: "alert",
 		className: cn(alertVariants({ variant }), className),
 		...props
 	});
-}
-function AlertTitle({ className, ...props }) {
+});
+var AlertTitle = React.forwardRef(function AlertTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "alert-title",
 		className: cn("font-semibold tracking-[-0.01em]", className),
 		...props
 	});
-}
-function AlertDescription({ className, ...props }) {
+});
+var AlertDescription = React.forwardRef(function AlertDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "alert-description",
 		className: cn("col-start-1 group-has-[>svg]/alert:col-start-2 text-[13px] leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Alert, AlertDescription, AlertTitle, alertVariants };
 

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../src/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst alertVariants = cva(\n  'group/alert relative grid w-full grid-cols-1 has-[>svg]:grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3.5 text-sm shadow-xs [&>svg]:mt-0.5 [&>svg]:size-4',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface text-foreground [&>svg]:text-muted-foreground',\n        brand: 'border-brand/25 bg-brand-soft/70 text-foreground [&>svg]:text-brand',\n        success: 'border-success/25 bg-success/10 text-foreground [&>svg]:text-success',\n        warning: 'border-warning/25 bg-warning/10 text-foreground [&>svg]:text-warning',\n        destructive:\n          'border-destructive/25 bg-destructive/10 text-foreground [&>svg]:text-destructive',\n        info: 'border-info/25 bg-info/10 text-foreground [&>svg]:text-info',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-semibold tracking-[-0.01em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'col-start-1 group-has-[>svg]/alert:col-start-2 text-[13px] leading-5 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":";;;;;;AAKA,IAAM,gBAAgB,IACpB,gLACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,aACE;EACF,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst alertVariants = cva(\n  'group/alert relative grid w-full grid-cols-1 has-[>svg]:grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3.5 text-sm shadow-xs [&>svg]:mt-0.5 [&>svg]:size-4',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface text-foreground [&>svg]:text-muted-foreground',\n        brand: 'border-brand/25 bg-brand-soft/70 text-foreground [&>svg]:text-brand',\n        success: 'border-success/25 bg-success/10 text-foreground [&>svg]:text-success',\n        warning: 'border-warning/25 bg-warning/10 text-foreground [&>svg]:text-warning',\n        destructive:\n          'border-destructive/25 bg-destructive/10 text-foreground [&>svg]:text-destructive',\n        info: 'border-info/25 bg-info/10 text-foreground [&>svg]:text-info',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface AlertProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof alertVariants> {}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { className, variant, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert\"\n      data-variant={variant ?? 'default'}\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n});\n\nconst AlertTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function AlertTitle({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-title\"\n        className={cn('font-semibold tracking-[-0.01em]', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst AlertDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n  function AlertDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-description\"\n        className={cn(\n          'col-start-1 group-has-[>svg]/alert:col-start-2 text-[13px] leading-5 text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":";;;;;;AAKA,IAAM,gBAAgB,IACpB,gLACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,aACE;EACF,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAKA,IAAM,QAAQ,MAAM,WAAuC,SAAS,MAClE,EAAE,WAAW,SAAS,GAAG,SACzB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,aAAa,MAAM,WACvB,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;CAChD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL,CACF;AAEA,IAAM,mBAAmB,MAAM,WAC7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACtD,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,8FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}