@nocoo/basalt 2.0.2 → 2.0.3

package/dist/components/alert-dialog.js

@@ -52,7 +52,7 @@ var _ = ({ className: t, ...n }) => /* @__PURE__ */ o("div", {
 });
 _.displayName = "AlertDialogHeader";
 var v = ({ className: t, ...n }) => /* @__PURE__ */ o("div", {
-	className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+	className: e("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
 	...n
 });
 v.displayName = "AlertDialogFooter";

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport type AlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\tsize?: DialogSize;\n};\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport const AlertDialogHeader = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport const AlertDialogFooter = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAc,EAAqB,MACnC,IAAqB,EAAqB,SAC1C,IAAoB,EAAqB,QAEzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAQ9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAqB,CAAA,GACrB,kBAAC,EAAqB,SAAtB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,GAAI;AACJ,CAAA,CACiB,EAAA,CAAA,CACnB;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAE9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAE1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAEtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAEhC,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport type AlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\tsize?: DialogSize;\n};\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport const AlertDialogHeader = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport const AlertDialogFooter = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AAMA,IAAa,IAAc,EAAqB,MACnC,IAAqB,EAAqB,SAC1C,IAAoB,EAAqB,QAEzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAQ9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAqB,CAAA,GACrB,kBAAC,EAAqB,SAAtB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,GAAI;AACJ,CAAA,CACiB,EAAA,CAAA,CACnB;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAE9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAE1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAEtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAE5D,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAEhC,IAAa,KAAqB,EACjC,cACA,GAAG,QAEH,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}

package/dist/components/chat-bubble.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export type ChatBubbleVariant = "assistant" | "system" | "user";
+export interface ChatBubbleProps {
+    /**
+     * Alignment and fill.
+     * @default "assistant"
+     */
+    variant?: ChatBubbleVariant;
+    /**
+     * Show a streaming caret after the body.
+     * @default false
+     */
+    streaming?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function ChatBubble({ variant, streaming, className, children, }: ChatBubbleProps): import("react").JSX.Element;

package/dist/components/chat-bubble.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/chat-bubble.tsx
+function r({ variant: r = "assistant", streaming: i = !1, className: a, children: o }) {
+	if (r === "system") return /* @__PURE__ */ t("p", {
+		className: e("px-1 text-center text-[11px] text-basalt-muted-foreground", a),
+		children: o
+	});
+	let s = r === "user";
+	return /* @__PURE__ */ t("div", {
+		className: e("flex w-full", s ? "justify-end" : "justify-start"),
+		children: /* @__PURE__ */ n("div", {
+			className: e("max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm", s ? "rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground" : "rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50", a),
+			children: [o, i ? /* @__PURE__ */ t("span", {
+				className: "mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle",
+				"aria-hidden": !0
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { r as ChatBubble };
+
+//# sourceMappingURL=chat-bubble.js.map

package/dist/components/chat-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble.js","names":[],"sources":["../../src/components/chat-bubble.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type ChatBubbleVariant = \"assistant\" | \"system\" | \"user\";\n\nexport interface ChatBubbleProps {\n\t/**\n\t * Alignment and fill.\n\t * @default \"assistant\"\n\t */\n\tvariant?: ChatBubbleVariant;\n\t/**\n\t * Show a streaming caret after the body.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport function ChatBubble({\n\tvariant = \"assistant\",\n\tstreaming = false,\n\tclassName,\n\tchildren,\n}: ChatBubbleProps) {\n\tif (variant === \"system\") {\n\t\treturn (\n\t\t\t<p className={cn(\"px-1 text-center text-[11px] text-basalt-muted-foreground\", className)}>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t);\n\t}\n\tconst user = variant === \"user\";\n\treturn (\n\t\t<div className={cn(\"flex w-full\", user ? \"justify-end\" : \"justify-start\")}>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"max-w-[92%] px-3.5 py-2 text-sm leading-5 shadow-sm\",\n\t\t\t\t\tuser\n\t\t\t\t\t\t? \"rounded-2xl rounded-br-md bg-basalt-primary text-basalt-primary-foreground\"\n\t\t\t\t\t\t: \"rounded-2xl rounded-bl-md bg-basalt-secondary text-basalt-foreground ring-1 ring-basalt-border/50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"mt-1 inline-block h-3 w-1.5 animate-pulse rounded-sm bg-basalt-primary/70 align-middle\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAoBA,SAAgB,EAAW,EAC1B,aAAU,aACV,eAAY,IACZ,cACA,eACmB;CACnB,IAAI,MAAY,UACf,OACC,kBAAC,KAAD;EAAG,WAAW,EAAG,6DAA6D,CAAS;EACrF;CACC,CAAA;CAGL,IAAM,IAAO,MAAY;CACzB,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,eAAe,IAAO,gBAAgB,eAAe;EACvE,UAAA,kBAAC,OAAD;GACC,WAAW,EACV,uDACA,IACG,+EACA,qGACH,CACD;GAPD,UAAA,CASE,GACA,IACA,kBAAC,QAAD;IACC,WAAU;IACV,eAAA;GACA,CAAA,IACE,IACA;;CACD,CAAA;AAEP"}

package/dist/components/chat-composer.d.ts

@@ -0,0 +1,41 @@
+export interface ChatComposerProps {
+    /**
+     * Disable the field and send.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Replace send with stop.
+     * @default false
+     */
+    streaming?: boolean;
+    /**
+     * Field accessible name.
+     * @default "Message"
+     */
+    label?: string;
+    /**
+     * Placeholder when empty.
+     */
+    placeholder?: string;
+    /**
+     * Called with trimmed text on send.
+     */
+    onSend: (text: string) => void;
+    /**
+     * Called when the stop control is pressed.
+     */
+    onCancel?: () => void;
+    /**
+     * Send control accessible name.
+     * @default "Send message"
+     */
+    sendLabel?: string;
+    /**
+     * Stop control accessible name.
+     * @default "Stop generating"
+     */
+    cancelLabel?: string;
+    className?: string;
+}
+export declare function ChatComposer({ disabled, streaming, label, placeholder, onSend, onCancel, sendLabel, cancelLabel, className, }: ChatComposerProps): import("react").JSX.Element;

package/dist/components/chat-composer.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { InputArea as n } from "./input-area.js";
+import { useRef as r, useState as i } from "react";
+import { ArrowUp as a, Square as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/chat-composer.tsx
+function l({ disabled: l = !1, streaming: u = !1, label: d = "Message", placeholder: f, onSend: p, onCancel: m, sendLabel: h = "Send message", cancelLabel: g = "Stop generating", className: _ }) {
+	let [v, y] = i(""), b = r(null), x = r(!1), S = () => {
+		let e = b.current;
+		e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
+	}, C = () => {
+		let e = v.trim();
+		!e || l || u || (p(e), y(""), requestAnimationFrame(() => {
+			let e = b.current;
+			e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`, e.focus());
+		}));
+	};
+	return /* @__PURE__ */ s("form", {
+		className: e("border-t border-basalt-border/50 bg-basalt-card p-3", _),
+		onSubmit: (e) => {
+			e.preventDefault(), C();
+		},
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50",
+			children: [/* @__PURE__ */ s(n, {
+				ref: b,
+				value: v,
+				onChange: (e) => {
+					y(e.target.value), requestAnimationFrame(S);
+				},
+				onCompositionStart: () => {
+					x.current = !0;
+				},
+				onCompositionEnd: () => {
+					x.current = !1;
+				},
+				onKeyDown: (e) => {
+					x.current || e.nativeEvent.isComposing || e.key !== "Enter" || e.shiftKey || (e.preventDefault(), C());
+				},
+				rows: 1,
+				placeholder: f,
+				disabled: l,
+				"aria-label": d,
+				className: "max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0"
+			}), u ? /* @__PURE__ */ s(t, {
+				type: "button",
+				size: "icon",
+				variant: "secondary",
+				onClick: m,
+				disabled: !m,
+				"aria-label": g,
+				children: /* @__PURE__ */ s(o, {
+					className: "h-3.5 w-3.5 fill-current",
+					strokeWidth: 0
+				})
+			}) : /* @__PURE__ */ s(t, {
+				type: "submit",
+				size: "icon",
+				disabled: l || !v.trim(),
+				"aria-label": h,
+				children: /* @__PURE__ */ s(a, {
+					className: "h-4 w-4",
+					strokeWidth: 2.25
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { l as ChatComposer };
+
+//# sourceMappingURL=chat-composer.js.map

package/dist/components/chat-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.js","names":[],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send.\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tconst el = ref.current;\n\t\t\tif (el) {\n\t\t\t\tel.style.height = \"0px\";\n\t\t\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t\t\t\tel.focus();\n\t\t\t}\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AA+CA,SAAgB,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,IAAM,EAA4B,IAAI,GACtC,IAAe,EAAO,EAAK,GAE3B,UAAe;EACpB,IAAM,IAAK,EAAI;EACV,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE;CACrD,GAEM,UAAe;EACpB,IAAM,IAAO,EAAM,KAAK;EACpB,CAAC,KAAQ,KAAY,MAGzB,EAAO,CAAI,GACX,EAAS,EAAE,GACX,4BAA4B;GAC3B,IAAM,IAAK,EAAI;GACf,AAAI,MACH,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,GAAG,EAAE,KACpD,EAAG,MAAM;EAEX,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,uDAAuD,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADA,EAAM,eAAe,GACrB,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,sBAAsB,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAC5D,EAAa,WAAW,EAAM,YAAY,eAG1C,EAAM,QAAQ,WAAW,EAAM,aAGnC,EAAM,eAAe,GACrB,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAY;IACZ,WAAU;GACV,CAAA,GACA,IACA,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAAS;IACT,UAAU,CAAC;IACX,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAAC,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAU,KAAY,CAAC,EAAM,KAAK;IAClC,cAAY;IAEZ,UAAA,kBAAC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}

package/dist/components/chat-header.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ChatHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /**
+     * Conversation title.
+     */
+    title: ReactNode;
+    /**
+     * Secondary line under the title.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Leading mark, usually an icon.
+     */
+    leading?: ReactNode;
+    /**
+     * Trailing actions.
+     */
+    children?: ReactNode;
+}
+export declare function ChatHeader({ title, subtitle, leading, children, className, ...props }: ChatHeaderProps): import("react").JSX.Element;

package/dist/components/chat-header.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/chat-header.tsx
+function r({ title: r, subtitle: i, leading: a, children: o, className: s, ...c }) {
+	return /* @__PURE__ */ n("header", {
+		className: e("flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5", s),
+		...c,
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [a ? /* @__PURE__ */ t("span", {
+				className: "flex h-8 w-8 items-center justify-center",
+				children: a
+			}) : null, /* @__PURE__ */ n("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ t("p", {
+					className: "truncate text-sm font-semibold tracking-tight",
+					children: r
+				}), i ? /* @__PURE__ */ t("p", {
+					className: "truncate text-[11px] text-basalt-muted-foreground",
+					children: i
+				}) : null]
+			})]
+		}), o ? /* @__PURE__ */ t("div", {
+			className: "flex items-center gap-1",
+			children: o
+		}) : null]
+	});
+}
+//#endregion
+export { r as ChatHeader };
+
+//# sourceMappingURL=chat-header.js.map

package/dist/components/chat-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.js","names":[],"sources":["../../src/components/chat-header.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport interface ChatHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n\t/**\n\t * Conversation title.\n\t */\n\ttitle: ReactNode;\n\t/**\n\t * Secondary line under the title.\n\t */\n\tsubtitle?: ReactNode;\n\t/**\n\t * Leading mark, usually an icon.\n\t */\n\tleading?: ReactNode;\n\t/**\n\t * Trailing actions.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport function ChatHeader({\n\ttitle,\n\tsubtitle,\n\tleading,\n\tchildren,\n\tclassName,\n\t...props\n}: ChatHeaderProps) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-2\">\n\t\t\t\t{leading ? (\n\t\t\t\t\t<span className=\"flex h-8 w-8 items-center justify-center\">{leading}</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t<p className=\"truncate text-sm font-semibold tracking-tight\">{title}</p>\n\t\t\t\t\t{subtitle ? (\n\t\t\t\t\t\t<p className=\"truncate text-[11px] text-basalt-muted-foreground\">{subtitle}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{children ? <div className=\"flex items-center gap-1\">{children}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;AAsBA,SAAgB,EAAW,EAC1B,UACA,aACA,YACA,aACA,cACA,GAAG,KACgB;CACnB,OACC,kBAAC,UAAD;EACC,WAAW,EACV,wFACA,CACD;EACA,GAAI;EALL,UAAA,CAOC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,IACA,kBAAC,QAAD;IAAM,WAAU;IAA4C,UAAA;GAAc,CAAA,IACvE,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAAiD,UAAA;IAAS,CAAA,GACtE,IACA,kBAAC,KAAD;KAAG,WAAU;KAAqD,UAAA;IAAY,CAAA,IAC3E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAA,IAAW,kBAAC,OAAD;GAAK,WAAU;GAA2B;EAAc,CAAA,IAAI,IACjE;;AAEV"}

package/dist/components/chat-inbox.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ChatInboxItem {
+    /** Stable id for selection. */
+    id: string;
+    /** Thread title. */
+    title: string;
+    /** Last-message preview. */
+    preview?: string;
+    /** Timestamp label. */
+    time?: string;
+    /** Optional leading mark. */
+    leading?: ReactNode;
+}
+export interface ChatInboxProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    /**
+     * Threads to list.
+     */
+    items: readonly ChatInboxItem[];
+    /**
+     * Selected thread id.
+     */
+    activeId?: string;
+    /**
+     * Called when a thread is chosen.
+     */
+    onSelect: (id: string) => void;
+}
+export declare function ChatInbox({ items, activeId, onSelect, className, ...props }: ChatInboxProps): import("react").JSX.Element;

package/dist/components/chat-inbox.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/chat-inbox.tsx
+function i({ items: i, activeId: a, onSelect: o, className: s, ...c }) {
+	return /* @__PURE__ */ n("nav", {
+		className: e("flex min-h-0 flex-col gap-0.5 overflow-y-auto p-2", s),
+		...c,
+		children: i.map((i) => {
+			let s = i.id === a;
+			return /* @__PURE__ */ r(t, {
+				type: "button",
+				variant: "ghost",
+				"aria-current": s ? "true" : void 0,
+				onClick: () => o(i.id),
+				className: e("h-auto w-full justify-start gap-2 rounded-basalt-md px-2 py-2 text-left", s ? "bg-basalt-accent" : ""),
+				children: [i.leading ? /* @__PURE__ */ n("span", {
+					className: "flex h-8 w-8 shrink-0 items-center justify-center",
+					children: i.leading
+				}) : null, /* @__PURE__ */ r("span", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ r("span", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ n("span", {
+							className: "truncate text-sm font-medium text-basalt-foreground",
+							children: i.title
+						}), i.time ? /* @__PURE__ */ n("span", {
+							className: "shrink-0 text-[11px] text-basalt-muted-foreground",
+							children: i.time
+						}) : null]
+					}), i.preview ? /* @__PURE__ */ n("span", {
+						className: "mt-0.5 block truncate text-xs text-basalt-muted-foreground",
+						children: i.preview
+					}) : null]
+				})]
+			}, i.id);
+		})
+	});
+}
+//#endregion
+export { i as ChatInbox };
+
+//# sourceMappingURL=chat-inbox.js.map

package/dist/components/chat-inbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-inbox.js","names":[],"sources":["../../src/components/chat-inbox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\n\nexport interface ChatInboxItem {\n\t/** Stable id for selection. */\n\tid: string;\n\t/** Thread title. */\n\ttitle: string;\n\t/** Last-message preview. */\n\tpreview?: string;\n\t/** Timestamp label. */\n\ttime?: string;\n\t/** Optional leading mark. */\n\tleading?: ReactNode;\n}\n\nexport interface ChatInboxProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n\t/**\n\t * Threads to list.\n\t */\n\titems: readonly ChatInboxItem[];\n\t/**\n\t * Selected thread id.\n\t */\n\tactiveId?: string;\n\t/**\n\t * Called when a thread is chosen.\n\t */\n\tonSelect: (id: string) => void;\n}\n\nexport function ChatInbox({ items, activeId, onSelect, className, ...props }: ChatInboxProps) {\n\treturn (\n\t\t<nav className={cn(\"flex min-h-0 flex-col gap-0.5 overflow-y-auto p-2\", className)} {...props}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst active = item.id === activeId;\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\taria-current={active ? \"true\" : undefined}\n\t\t\t\t\t\tonClick={() => onSelect(item.id)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-auto w-full justify-start gap-2 rounded-basalt-md px-2 py-2 text-left\",\n\t\t\t\t\t\t\tactive ? \"bg-basalt-accent\" : \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.leading ? (\n\t\t\t\t\t\t\t<span className=\"flex h-8 w-8 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t\t{item.leading}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t<span className=\"flex items-baseline justify-between gap-2\">\n\t\t\t\t\t\t\t\t<span className=\"truncate text-sm font-medium text-basalt-foreground\">\n\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{item.time ? (\n\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 text-[11px] text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{item.time}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{item.preview ? (\n\t\t\t\t\t\t\t\t<span className=\"mt-0.5 block truncate text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{item.preview}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;AAgCA,SAAgB,EAAU,EAAE,UAAO,aAAU,aAAU,cAAW,GAAG,KAAyB;CAC7F,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,qDAAqD,CAAS;EAAG,GAAI;EACtF,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAS,EAAK,OAAO;GAC3B,OACC,kBAAC,GAAD;IAEC,MAAK;IACL,SAAQ;IACR,gBAAc,IAAS,SAAS,KAAA;IAChC,eAAe,EAAS,EAAK,EAAE;IAC/B,WAAW,EACV,2EACA,IAAS,qBAAqB,EAC/B;IATD,UAAA,CAWE,EAAK,UACL,kBAAC,QAAD;KAAM,WAAU;KACd,UAAA,EAAK;IACD,CAAA,IACH,MACJ,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACC,kBAAC,QAAD;OAAM,WAAU;OACd,UAAA,EAAK;MACD,CAAA,GACL,EAAK,OACL,kBAAC,QAAD;OAAM,WAAU;OACd,UAAA,EAAK;MACD,CAAA,IACH,IACC;KACL,CAAA,GAAA,EAAK,UACL,kBAAC,QAAD;MAAM,WAAU;MACd,UAAA,EAAK;KACD,CAAA,IACH,IACC;IACC,CAAA,CAAA;GAhCF,GAAA,EAAK,EAgCH;EAEV,CAAC;CACG,CAAA;AAEP"}

package/dist/components/dialog.js

@@ -15,7 +15,7 @@ function c(r) {
 	return e("fixed inset-0 bg-black/40 backdrop-blur-md", t, "data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out", n, r);
 }
 function l({ size: r = "base", className: i } = {}) {
-	return e("fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", t, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", n, s[r], i);
+	return e("fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-6 text-basalt-foreground shadow-lg ring-1 ring-basalt-border", t, "data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out", n, s[r], i);
 }
 var u = o.Root, d = o.Trigger, f = o.Close, p = o.Portal, m = r.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ i(o.Overlay, {
 	ref: n,
@@ -58,7 +58,7 @@ var v = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
 });
 v.displayName = "DialogHeader";
 var y = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
-	className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+	className: e("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
 	...n
 });
 y.displayName = "DialogFooter";

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-8 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\tsize?: DialogSize;\n\tdisablePointerDismissal?: boolean;\n};\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface-root=\"\"\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport const DialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const DialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,oOACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAEA,IAAa,IAAS,EAAgB,MACzB,IAAgB,EAAgB,SAChC,IAAc,EAAgB,OAC9B,IAAe,EAAgB,QAE/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAOpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,uBAAuB,MAAU;EAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;CAC7B;CACA,oBAAoB,MAAU;EAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;CAC1B;CACA,GAAI;CAEH;AACuB,CAAA,CACZ,EAAA,CAAA,CAEhB;AACA,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAE5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAE3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAa,cAAc"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const DIALOG_SIZES = {\n\tsm: \"sm:w-72\",\n\tbase: \"sm:w-96\",\n\tlg: \"sm:w-[32rem]\",\n\txl: \"sm:w-[48rem]\",\n} as const;\n\nexport type DialogSize = keyof typeof DIALOG_SIZES;\n\nexport function dialogOverlayClass(className?: string) {\n\treturn cn(\n\t\t\"fixed inset-0 bg-black/40 backdrop-blur-md\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-overlay-in data-[state=closed]:animate-basalt-overlay-out\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function dialogPanelClass({\n\tsize = \"base\",\n\tclassName,\n}: {\n\tsize?: DialogSize;\n\tclassName?: string;\n} = {}) {\n\treturn cn(\n\t\t\"fixed top-1/2 left-1/2 w-full max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] origin-center -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-basalt-lg p-6 text-basalt-foreground shadow-lg ring-1 ring-basalt-border\",\n\t\tOVERLAY_LAYER,\n\t\t\"data-[state=open]:animate-basalt-dialog-in data-[state=closed]:animate-basalt-dialog-out\",\n\t\tOVERLAY_MOTION,\n\t\tDIALOG_SIZES[size],\n\t\tclassName,\n\t);\n}\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\tsize?: DialogSize;\n\tdisablePointerDismissal?: boolean;\n};\n\nexport const DialogContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tsize = \"base\",\n\t\t\tdisablePointerDismissal = false,\n\t\t\tonPointerDownOutside,\n\t\t\tonInteractOutside,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tdata-basalt-surface-root=\"\"\n\t\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tif (disablePointerDismissal) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogPrimitive.Content>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport const DialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const DialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-1.5 text-left\", className)} {...props} />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\nexport const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAe;CAC3B,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;AACL;AAIA,SAAgB,EAAmB,GAAoB;CACtD,OAAO,EACN,8CACA,GACA,8FACA,GACA,CACD;AACD;AAEA,SAAgB,EAAiB,EAChC,UAAO,QACP,iBAIG,CAAC,GAAG;CACP,OAAO,EACN,oOACA,GACA,4FACA,GACA,EAAa,IACb,CACD;AACD;AAEA,IAAa,IAAS,EAAgB,MACzB,IAAgB,EAAgB,SAChC,IAAc,EAAgB,OAC9B,IAAe,EAAgB,QAE/B,IAAgB,EAAM,YAGhC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,SAAjB;CAA8B;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CACzF;AACD,EAAc,cAAc,EAAgB,QAAQ;AAOpD,IAAa,IAAgB,EAAM,YAKjC,EACC,cACA,aACA,UAAO,QACP,6BAA0B,IAC1B,yBACA,sBACA,GAAG,KAEJ,MAEA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;CACM;CACL,4BAAyB;CACzB,WAAW,EAAiB;EAAE;EAAM;CAAU,CAAC;CAC/C,uBAAuB,MAAU;EAIhC,AAHI,KACH,EAAM,eAAe,GAEtB,IAAuB,CAAK;CAC7B;CACA,oBAAoB,MAAU;EAI7B,AAHI,KACH,EAAM,eAAe,GAEtB,IAAoB,CAAK;CAC1B;CACA,GAAI;CAEH;AACuB,CAAA,CACZ,EAAA,CAAA,CAEhB;AACA,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAgB,YAAY;AAE5D,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CAAK,WAAW,EAAG,uCAAuC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEnF,EAAa,cAAc;AAE3B,IAAa,KAAgB,EAAE,cAAW,GAAG,QAC5C,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAa,cAAc"}

package/dist/components/dock.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export type DockMode = "overlay" | "push";
+export interface DockProps {
+    /**
+     * Whether the dock occupies its width.
+     */
+    open: boolean;
+    /**
+     * `push` shrinks the main column. `overlay` covers it with a Dialog scrim.
+     * @default "push"
+     */
+    mode?: DockMode;
+    /**
+     * Width when open.
+     * @default "clamp(300px, 32.5vw, 546px)"
+     */
+    width?: string;
+    /**
+     * Overlay scrim click. Ignored in push mode.
+     */
+    onDismiss?: () => void;
+    /**
+     * Overlay scrim accessible name.
+     * @default "Dismiss"
+     */
+    dismissLabel?: string;
+    /**
+     * Accessible name.
+     */
+    "aria-label": string;
+    className?: string;
+    children: ReactNode;
+}
+export interface DockBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function DockBody({ className, children }: DockBodyProps): import("react").JSX.Element;
+export declare function Dock({ open, mode, width, onDismiss, dismissLabel, className, children, "aria-label": ariaLabel, }: DockProps): import("react").JSX.Element;

package/dist/components/dock.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import { dialogOverlayClass as r } from "./dialog.js";
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/dock.tsx
+var c = "button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", l = "[data-radix-popper-content-wrapper], [data-radix-select-viewport]";
+function u(e) {
+	return e ? [...e.querySelectorAll(c)].filter((e) => {
+		if (e.closest("[inert], [hidden]") || e.tabIndex < 0 || window.getComputedStyle(e).visibility === "hidden") return !1;
+		for (let t = e; t; t = t.parentElement) if (window.getComputedStyle(t).display === "none") return !1;
+		return !0;
+	}) : [];
+}
+function d({ className: t, children: n }) {
+	return /* @__PURE__ */ o("div", {
+		className: e("flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3", t),
+		children: n
+	});
+}
+function f({ open: c, mode: d = "push", width: f = "clamp(300px, 32.5vw, 546px)", onDismiss: p, dismissLabel: m = "Dismiss", className: h, children: g, "aria-label": _ }) {
+	let v = d === "overlay", y = a(null), b = a(null), x = (e) => {
+		y.current = e;
+	}, S = a(!v && c), C = a(null);
+	i(() => {
+		if (c) {
+			if (S.current) return;
+			C.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			let e = window.setTimeout(() => {
+				let e = y.current;
+				(u(e)[0] ?? e)?.focus(), S.current = !0;
+			}, 0);
+			return () => window.clearTimeout(e);
+		}
+		S.current &&= (C.current?.focus?.(), C.current = null, !1);
+	}, [c]), i(() => {
+		if (!v || !c) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				if (e.defaultPrevented || !p) return;
+				e.preventDefault(), p();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = b.current;
+			if (!t) return;
+			let n = u(t);
+			if (n.length === 0) {
+				e.preventDefault(), y.current?.focus();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			if (a instanceof Element) {
+				let e = a.closest("[role='dialog'], [role='alertdialog']");
+				if (e && e !== y.current && !t.contains(e) || a.closest(l)) return;
+			}
+			if (!(a instanceof Node) || !t.contains(a) || !e.shiftKey && a === i) {
+				e.preventDefault(), r?.focus();
+				return;
+			}
+			e.shiftKey && a === r && (e.preventDefault(), i?.focus());
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		v,
+		c,
+		p
+	]);
+	let w = e("overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out", v ? e("absolute top-0 right-0 h-full", t) : "sticky top-0 h-screen shrink-0", n, h), T = { width: c ? f : 0 }, E = /* @__PURE__ */ o("div", {
+		className: "flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40",
+		style: { width: f },
+		children: g
+	});
+	return v ? /* @__PURE__ */ s("div", {
+		ref: b,
+		className: e("absolute inset-0", t, !c && "pointer-events-none"),
+		children: [p ? /* @__PURE__ */ o("button", {
+			type: "button",
+			tabIndex: c ? 0 : -1,
+			"aria-label": m,
+			"aria-hidden": !c,
+			"data-state": c ? "open" : "closed",
+			className: e(r("absolute"), !c && "opacity-0"),
+			onClick: c ? p : void 0
+		}) : /* @__PURE__ */ o("div", {
+			"aria-hidden": !0,
+			"data-state": c ? "open" : "closed",
+			className: e(r("absolute"), !c && "opacity-0")
+		}), /* @__PURE__ */ o("div", {
+			ref: x,
+			role: "dialog",
+			"aria-modal": c ? !0 : void 0,
+			"aria-label": _,
+			className: w,
+			style: T,
+			"aria-hidden": !c,
+			inert: !c || void 0,
+			tabIndex: c ? -1 : void 0,
+			children: E
+		})]
+	}) : /* @__PURE__ */ o("aside", {
+		ref: x,
+		className: w,
+		style: T,
+		"aria-label": _,
+		"aria-hidden": !c,
+		inert: !c || void 0,
+		tabIndex: c ? -1 : void 0,
+		children: E
+	});
+}
+//#endregion
+export { f as Dock, d as DockBody };
+
+//# sourceMappingURL=dock.js.map

package/dist/components/dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.js","names":[],"sources":["../../src/components/dock.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { dialogOverlayClass } from \"./dialog\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nconst FOCUSABLE =\n\t'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\nconst PORTAL_FOCUS = \"[data-radix-popper-content-wrapper], [data-radix-select-viewport]\";\n\nfunction tabbables(root: HTMLElement | null) {\n\tif (!root) {\n\t\treturn [];\n\t}\n\treturn [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((node) => {\n\t\tif (node.closest(\"[inert], [hidden]\")) {\n\t\t\treturn false;\n\t\t}\n\t\tif (node.tabIndex < 0) {\n\t\t\treturn false;\n\t\t}\n\t\tif (window.getComputedStyle(node).visibility === \"hidden\") {\n\t\t\treturn false;\n\t\t}\n\t\tfor (let current: HTMLElement | null = node; current; current = current.parentElement) {\n\t\t\tif (window.getComputedStyle(current).display === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t});\n}\n\nexport type DockMode = \"overlay\" | \"push\";\n\nexport interface DockProps {\n\t/**\n\t * Whether the dock occupies its width.\n\t */\n\topen: boolean;\n\t/**\n\t * `push` shrinks the main column. `overlay` covers it with a Dialog scrim.\n\t * @default \"push\"\n\t */\n\tmode?: DockMode;\n\t/**\n\t * Width when open.\n\t * @default \"clamp(300px, 32.5vw, 546px)\"\n\t */\n\twidth?: string;\n\t/**\n\t * Overlay scrim click. Ignored in push mode.\n\t */\n\tonDismiss?: () => void;\n\t/**\n\t * Overlay scrim accessible name.\n\t * @default \"Dismiss\"\n\t */\n\tdismissLabel?: string;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport interface DockBodyProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport function DockBody({ className, children }: DockBodyProps) {\n\treturn (\n\t\t<div className={cn(\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3\", className)}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport function Dock({\n\topen,\n\tmode = \"push\",\n\twidth = \"clamp(300px, 32.5vw, 546px)\",\n\tonDismiss,\n\tdismissLabel = \"Dismiss\",\n\tclassName,\n\tchildren,\n\t\"aria-label\": ariaLabel,\n}: DockProps) {\n\tconst overlay = mode === \"overlay\";\n\tconst panelRef = useRef<HTMLElement | null>(null);\n\tconst overlayRootRef = useRef<HTMLDivElement>(null);\n\tconst setPanel = (node: HTMLElement | null) => {\n\t\tpanelRef.current = node;\n\t};\n\tconst wasOpen = useRef(!overlay && open);\n\tconst previousFocus = useRef<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (open) {\n\t\t\tif (wasOpen.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tpreviousFocus.current =\n\t\t\t\tdocument.activeElement instanceof HTMLElement ? document.activeElement : null;\n\t\t\tconst timer = window.setTimeout(() => {\n\t\t\t\tconst root = panelRef.current;\n\t\t\t\tconst nodes = tabbables(root);\n\t\t\t\t(nodes[0] ?? root)?.focus();\n\t\t\t\twasOpen.current = true;\n\t\t\t}, 0);\n\t\t\treturn () => window.clearTimeout(timer);\n\t\t}\n\t\tif (wasOpen.current) {\n\t\t\tpreviousFocus.current?.focus?.();\n\t\t\tpreviousFocus.current = null;\n\t\t\twasOpen.current = false;\n\t\t}\n\t}, [open]);\n\n\tuseEffect(() => {\n\t\tif (!overlay || !open) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (event.defaultPrevented || !onDismiss) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonDismiss();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key !== \"Tab\") {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst root = overlayRootRef.current;\n\t\t\tif (!root) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nodes = tabbables(root);\n\t\t\tif (nodes.length === 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tpanelRef.current?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst first = nodes[0];\n\t\t\tconst last = nodes[nodes.length - 1];\n\t\t\tconst active = document.activeElement;\n\t\t\tif (active instanceof Element) {\n\t\t\t\tconst nestedModal = active.closest(\"[role='dialog'], [role='alertdialog']\");\n\t\t\t\tif (nestedModal && nestedModal !== panelRef.current && !root.contains(nestedModal)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (active.closest(PORTAL_FOCUS)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (\n\t\t\t\t!(active instanceof Node) ||\n\t\t\t\t!root.contains(active) ||\n\t\t\t\t(!event.shiftKey && active === last)\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfirst?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.shiftKey && active === first) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tlast?.focus();\n\t\t\t}\n\t\t};\n\t\twindow.addEventListener(\"keydown\", onKeyDown);\n\t\treturn () => window.removeEventListener(\"keydown\", onKeyDown);\n\t}, [overlay, open, onDismiss]);\n\tconst panelClass = cn(\n\t\t\"overflow-hidden bg-basalt-background transition-[width] duration-300 ease-in-out\",\n\t\toverlay ? cn(\"absolute top-0 right-0 h-full\", OVERLAY_LAYER) : \"sticky top-0 h-screen shrink-0\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n\tconst panelStyle = { width: open ? width : 0 };\n\tconst inner = (\n\t\t<div\n\t\t\tclassName=\"flex h-full flex-col bg-basalt-card shadow-lg ring-1 ring-basalt-border/40\"\n\t\t\tstyle={{ width }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n\n\tif (!overlay) {\n\t\treturn (\n\t\t\t<aside\n\t\t\t\tref={setPanel}\n\t\t\t\tclassName={panelClass}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</aside>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={overlayRootRef}\n\t\t\tclassName={cn(\"absolute inset-0\", OVERLAY_LAYER, !open && \"pointer-events-none\")}\n\t\t>\n\t\t\t{onDismiss ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={open ? 0 : -1}\n\t\t\t\t\taria-label={dismissLabel}\n\t\t\t\t\taria-hidden={!open}\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t\tonClick={open ? onDismiss : undefined}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden\n\t\t\t\t\tdata-state={open ? \"open\" : \"closed\"}\n\t\t\t\t\tclassName={cn(dialogOverlayClass(\"absolute\"), !open && \"opacity-0\")}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={setPanel}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal={open ? true : undefined}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={panelClass}\n\t\t\t\tstyle={panelStyle}\n\t\t\t\taria-hidden={!open}\n\t\t\t\tinert={!open || undefined}\n\t\t\t\ttabIndex={open ? -1 : undefined}\n\t\t\t>\n\t\t\t\t{inner}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,IAAM,IACL,qKACK,IAAe;AAErB,SAAS,EAAU,GAA0B;CAI5C,OAHK,IAGE,CAAC,GAAG,EAAK,iBAA8B,CAAS,CAAC,CAAC,CAAC,QAAQ,MAAS;EAO1E,IANI,EAAK,QAAQ,mBAAmB,KAGhC,EAAK,WAAW,KAGhB,OAAO,iBAAiB,CAAI,CAAC,CAAC,eAAe,UAChD,OAAO;EAER,KAAK,IAAI,IAA8B,GAAM,GAAS,IAAU,EAAQ,eACvE,IAAI,OAAO,iBAAiB,CAAO,CAAC,CAAC,YAAY,QAChD,OAAO;EAGT,OAAO;CACR,CAAC,IAlBO,CAAC;AAmBV;AAyCA,SAAgB,EAAS,EAAE,cAAW,eAA2B;CAChE,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,gEAAgE,CAAS;EAC1F;CACG,CAAA;AAEP;AAEA,SAAgB,EAAK,EACpB,SACA,UAAO,QACP,WAAQ,+BACR,cACA,kBAAe,WACf,cACA,aACA,cAAc,KACD;CACb,IAAM,IAAU,MAAS,WACnB,IAAW,EAA2B,IAAI,GAC1C,IAAiB,EAAuB,IAAI,GAC5C,KAAY,MAA6B;EAC9C,EAAS,UAAU;CACpB,GACM,IAAU,EAAO,CAAC,KAAW,CAAI,GACjC,IAAgB,EAA2B,IAAI;CAwBrD,AAtBA,QAAgB;EACf,IAAI,GAAM;GACT,IAAI,EAAQ,SACX;GAED,EAAc,UACb,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;GAC1E,IAAM,IAAQ,OAAO,iBAAiB;IACrC,IAAM,IAAO,EAAS;IAGtB,CAFc,EAAU,CACvB,CAAA,CAAM,MAAM,EAAA,EAAO,MAAM,GAC1B,EAAQ,UAAU;GACnB,GAAG,CAAC;GACJ,aAAa,OAAO,aAAa,CAAK;EACvC;EACA,AAGC,EAAQ,aAFR,EAAc,SAAS,QAAQ,GAC/B,EAAc,UAAU,MACN;CAEpB,GAAG,CAAC,CAAI,CAAC,GAET,QAAgB;EACf,IAAI,CAAC,KAAW,CAAC,GAChB;EAED,IAAM,KAAa,MAAyB;GAC3C,IAAI,EAAM,QAAQ,UAAU;IAC3B,IAAI,EAAM,oBAAoB,CAAC,GAC9B;IAGD,AADA,EAAM,eAAe,GACrB,EAAU;IACV;GACD;GACA,IAAI,EAAM,QAAQ,OACjB;GAED,IAAM,IAAO,EAAe;GAC5B,IAAI,CAAC,GACJ;GAED,IAAM,IAAQ,EAAU,CAAI;GAC5B,IAAI,EAAM,WAAW,GAAG;IAEvB,AADA,EAAM,eAAe,GACrB,EAAS,SAAS,MAAM;IACxB;GACD;GACA,IAAM,IAAQ,EAAM,IACd,IAAO,EAAM,EAAM,SAAS,IAC5B,IAAS,SAAS;GACxB,IAAI,aAAkB,SAAS;IAC9B,IAAM,IAAc,EAAO,QAAQ,uCAAuC;IAI1E,IAHI,KAAe,MAAgB,EAAS,WAAW,CAAC,EAAK,SAAS,CAAW,KAG7E,EAAO,QAAQ,CAAY,GAC9B;GAEF;GACA,IACC,EAAE,aAAkB,SACpB,CAAC,EAAK,SAAS,CAAM,KACpB,CAAC,EAAM,YAAY,MAAW,GAC9B;IAED,AADA,EAAM,eAAe,GACrB,GAAO,MAAM;IACb;GACD;GACA,AAAI,EAAM,YAAY,MAAW,MAChC,EAAM,eAAe,GACrB,GAAM,MAAM;EAEd;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B,OAAO,oBAAoB,WAAW,CAAS;CAC7D,GAAG;EAAC;EAAS;EAAM;CAAS,CAAC;CAC7B,IAAM,IAAa,EAClB,oFACA,IAAU,EAAG,iCAAiC,CAAa,IAAI,kCAC/D,GACA,CACD,GACM,IAAa,EAAE,OAAO,IAAO,IAAQ,EAAE,GACvC,IACL,kBAAC,OAAD;EACC,WAAU;EACV,OAAO,EAAE,SAAM;EAEd;CACG,CAAA;CAmBN,OAhBK,IAiBJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,EAAG,oBAAoB,GAAe,CAAC,KAAQ,qBAAqB;EAFhF,UAAA,CAIE,IACA,kBAAC,UAAD;GACC,MAAK;GACL,UAAU,IAAO,IAAI;GACrB,cAAY;GACZ,eAAa,CAAC;GACd,cAAY,IAAO,SAAS;GAC5B,WAAW,EAAG,EAAmB,UAAU,GAAG,CAAC,KAAQ,WAAW;GAClE,SAAS,IAAO,IAAY,KAAA;EAC5B,CAAA,IAED,kBAAC,OAAD;GACC,eAAA;GACA,cAAY,IAAO,SAAS;GAC5B,WAAW,EAAG,EAAmB,UAAU,GAAG,CAAC,KAAQ,WAAW;EAClE,CAAA,GAEF,kBAAC,OAAD;GACC,KAAK;GACL,MAAK;GACL,cAAY,IAAO,KAAO,KAAA;GAC1B,cAAY;GACZ,WAAW;GACX,OAAO;GACP,eAAa,CAAC;GACd,OAAO,CAAC,KAAQ,KAAA;GAChB,UAAU,IAAO,KAAK,KAAA;GAErB,UAAA;EACG,CAAA,CACD;MAjDJ,kBAAC,SAAD;EACC,KAAK;EACL,WAAW;EACX,OAAO;EACP,cAAY;EACZ,eAAa,CAAC;EACd,OAAO,CAAC,KAAQ,KAAA;EAChB,UAAU,IAAO,KAAK,KAAA;EAErB,UAAA;CACK,CAAA;AAyCV"}

package/dist/components/fab.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type FabPlacement = "absolute" | "fixed";
+export interface FabProps {
+    /**
+     * When true, the launcher hides so a dock can take the corner.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Viewport pin versus containing frame.
+     * @default "fixed"
+     */
+    placement?: FabPlacement;
+    /**
+     * Accessible name.
+     */
+    "aria-label": string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/fab.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import { Button as r } from "./button.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/fab.tsx
+var o = i.forwardRef(({ open: i = !1, placement: o = "fixed", className: s, children: c, onClick: l, "aria-label": u, disabled: d }, f) => /* @__PURE__ */ a(r, {
+	ref: f,
+	size: "icon",
+	"aria-label": u,
+	"aria-expanded": i,
+	"aria-hidden": i || void 0,
+	tabIndex: i ? -1 : 0,
+	inert: i || void 0,
+	disabled: d,
+	onClick: i ? void 0 : l,
+	className: e(o === "absolute" ? "absolute" : "fixed", "right-4 bottom-4 h-16 w-16 rounded-full shadow-lg", t, "transition-[transform,opacity] duration-300 ease-in-out", n, i ? "pointer-events-none scale-75 opacity-0" : "hover:scale-[1.03] active:scale-[0.98]", s),
+	children: c
+}));
+o.displayName = "Fab";
+//#endregion
+export { o as Fab };
+
+//# sourceMappingURL=fab.js.map

package/dist/components/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","names":[],"sources":["../../src/components/fab.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport type FabPlacement = \"absolute\" | \"fixed\";\n\nexport interface FabProps {\n\t/**\n\t * When true, the launcher hides so a dock can take the corner.\n\t * @default false\n\t */\n\topen?: boolean;\n\t/**\n\t * Viewport pin versus containing frame.\n\t * @default \"fixed\"\n\t */\n\tplacement?: FabPlacement;\n\t/**\n\t * Accessible name.\n\t */\n\t\"aria-label\": string;\n\tonClick?: React.MouseEventHandler<HTMLButtonElement>;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tdisabled?: boolean;\n}\n\nexport const Fab = React.forwardRef<HTMLButtonElement, FabProps>(\n\t(\n\t\t{\n\t\t\topen = false,\n\t\t\tplacement = \"fixed\",\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\tdisabled,\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tsize=\"icon\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-expanded={open}\n\t\t\taria-hidden={open || undefined}\n\t\t\ttabIndex={open ? -1 : 0}\n\t\t\tinert={open || undefined}\n\t\t\tdisabled={disabled}\n\t\t\tonClick={open ? undefined : onClick}\n\t\t\tclassName={cn(\n\t\t\t\tplacement === \"absolute\" ? \"absolute\" : \"fixed\",\n\t\t\t\t\"right-4 bottom-4 h-16 w-16 rounded-full shadow-lg\",\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\t\"transition-[transform,opacity] duration-300 ease-in-out\",\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\topen ? \"pointer-events-none scale-75 opacity-0\" : \"hover:scale-[1.03] active:scale-[0.98]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Button>\n\t),\n);\nFab.displayName = \"Fab\";\n"],"mappings":";;;;;;;AA4BA,IAAa,IAAM,EAAM,YAEvB,EACC,UAAO,IACP,eAAY,SACZ,cACA,aACA,YACA,cAAc,GACd,eAED,MAEA,kBAAC,GAAD;CACM;CACL,MAAK;CACL,cAAY;CACZ,iBAAe;CACf,eAAa,KAAQ,KAAA;CACrB,UAAU,IAAO,KAAK;CACtB,OAAO,KAAQ,KAAA;CACL;CACV,SAAS,IAAO,KAAA,IAAY;CAC5B,WAAW,EACV,MAAc,aAAa,aAAa,SACxC,qDACA,GACA,2DACA,GACA,IAAO,2CAA2C,0CAClD,CACD;CAEC;AACM,CAAA,CAEV;AACA,EAAI,cAAc"}

package/dist/styles/standalone.css

@@ -31,6 +31,7 @@
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --blur-xs: 4px;
@@ -415,9 +416,15 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .bottom-0 {
     bottom: 0px;
   }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .-left-\[5px\] {
     left: calc(5px * -1);
   }
@@ -466,6 +473,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mr-1 {
     margin-right: var(--spacing);
   }
@@ -583,6 +593,9 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -601,6 +614,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -616,6 +632,9 @@
   .min-h-\[24px\] {
     min-height: 24px;
   }
+  .min-h-\[40px\] {
+    min-height: 40px;
+  }
   .min-h-\[64px\] {
     min-height: 64px;
   }
@@ -667,6 +686,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -706,6 +728,9 @@
   .w-px {
     width: 1px;
   }
+  .max-w-\[92\%\] {
+    max-width: 92%;
+  }
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
@@ -759,6 +784,12 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-75 {
+    --tw-scale-x: 75%;
+    --tw-scale-y: 75%;
+    --tw-scale-z: 75%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -771,6 +802,9 @@
   .animate-basalt-spin {
     animation: basalt-spin 1s linear infinite;
   }
+  .animate-pulse {
+    animation: basalt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
   .cursor-col-resize {
     cursor: col-resize;
   }
@@ -786,6 +820,9 @@
   .touch-none {
     touch-action: none;
   }
+  .resize-none {
+    resize: none;
+  }
   .appearance-none {
     appearance: none;
   }
@@ -807,6 +844,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -920,6 +960,9 @@
   .overflow-y-hidden\! {
     overflow-y: hidden !important;
   }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -961,6 +1004,12 @@
     border-top-right-radius: calc(var(--basalt-radius) - 2px);
     border-bottom-right-radius: calc(var(--basalt-radius) - 2px);
   }
+  .rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1004,6 +1053,12 @@
   .border-basalt-border {
     border-color: hsl(var(--basalt-border));
   }
+  .border-basalt-border\/50 {
+    border-color: hsl(var(--basalt-border));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--basalt-border)) 50%, transparent);
+    }
+  }
   .border-basalt-primary {
     border-color: hsl(var(--basalt-primary));
   }
@@ -1067,6 +1122,12 @@
   .bg-basalt-primary {
     background-color: hsl(var(--basalt-primary));
   }
+  .bg-basalt-primary\/70 {
+    background-color: hsl(var(--basalt-primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--basalt-primary)) 70%, transparent);
+    }
+  }
   .bg-basalt-secondary {
     background-color: hsl(var(--basalt-secondary));
   }
@@ -1168,6 +1229,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1240,6 +1304,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1273,6 +1340,10 @@
   .text-\[11px\] {
     font-size: 11px;
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -1380,6 +1451,9 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -1424,6 +1498,12 @@
       --tw-ring-color: color-mix(in oklab, hsl(var(--basalt-border)) 40%, transparent);
     }
   }
+  .ring-basalt-border\/50 {
+    --tw-ring-color: hsl(var(--basalt-border));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, hsl(var(--basalt-border)) 50%, transparent);
+    }
+  }
   .ring-basalt-border\/70 {
     --tw-ring-color: hsl(var(--basalt-border));
     @supports (color: color-mix(in lab, red, red)) {
@@ -1457,6 +1537,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,opacity\] {
+    transition-property: transform,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1549,6 +1634,9 @@
     border-color: hsl(var(--basalt-ring));
   }
   @media (hover: hover) {
+    .hover\:scale-\[1\.03\]:hover {
+      scale: 1.03;
+    }
     .hover\:bg-basalt-accent:hover {
       background-color: hsl(var(--basalt-accent));
     }
@@ -1673,6 +1761,9 @@
   .focus-visible\:ring-inset:focus-visible {
     --tw-ring-inset: inset;
   }
+  .active\:scale-\[0\.98\]:active {
+    scale: 0.98;
+  }
   .active\:bg-basalt-accent:active {
     background-color: hsl(var(--basalt-accent));
   }
@@ -2140,6 +2231,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -2346,6 +2452,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;

package/dist/styles/tokens.css

@@ -183,6 +183,7 @@
 	--basalt-zebra-fill: hsl(var(--basalt-secondary));
 }
 
+/* biome-ignore lint/style/noDescendingSpecificity: Rootless surface trees cannot overlap a surface-root tree. */
 [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
 	background: hsl(var(--basalt-secondary));
 	--basalt-control-fill: hsl(var(--basalt-secondary));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocoo/basalt",
-	"version": "2.0.2",
+	"version": "2.0.3",
 	"type": "module",
 	"license": "MIT",
 	"repository": {