@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/command-palette/command-palette.js

@@ -0,0 +1,164 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { EmptyState as n } from "../empty-state/empty-state.js";
+import { Glyph as r } from "../lib/glyphs.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import * as d from "@radix-ui/react-dialog";
+//#region src/command-palette/command-palette.tsx
+var f = (e) => e.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+function p(e, t) {
+	let n = f(t).split(/\s+/).filter(Boolean);
+	return n.length ? e.map((e) => {
+		let t = e.items.map((e) => {
+			let t = f([
+				e.label,
+				e.hint,
+				...e.keywords ?? []
+			].join(" "));
+			return n.every((e) => t.includes(e)) ? {
+				item: e,
+				score: +!f(e.label).startsWith(n[0])
+			} : null;
+		}).filter((e) => e !== null).sort((e, t) => e.score - t.score);
+		return {
+			heading: e.heading,
+			items: t.map((e) => e.item)
+		};
+	}).filter((e) => e.items.length > 0) : e;
+}
+function m({ open: f, onOpenChange: m, groups: h, placeholder: g = "Search actions and pages…", emptyTitle: _ = "No matches", emptyDescription: v = "Try another word, or check the spelling.", label: y = "Command palette", hotkey: b = !0 }) {
+	let [x, S] = u(""), [C, w] = u(0), T = s(), E = l(null), D = c(() => p(h, x), [h, x]), O = D.flatMap((e) => e.items);
+	o(() => {
+		if (!b) return;
+		let e = (e) => {
+			e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), m(!f));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		b,
+		f,
+		m
+	]), o(() => w(0), [x]), o(() => {
+		f || S("");
+	}, [f]), o(() => {
+		E.current?.querySelector("[data-active=\"true\"]")?.scrollIntoView({ block: "nearest" });
+	}, [C]);
+	let k = (e) => {
+		e && (m(!1), e.onSelect());
+	}, A = (e) => {
+		e.key === "ArrowDown" ? (e.preventDefault(), w((e) => O.length ? (e + 1) % O.length : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), w((e) => O.length ? (e - 1 + O.length) % O.length : 0)) : e.key === "Home" ? w(0) : e.key === "End" ? w(Math.max(0, O.length - 1)) : e.key === "Enter" && (e.preventDefault(), k(O[C]));
+	}, j = -1, M = (e) => `${T}-opt-${e}`;
+	return /* @__PURE__ */ i(d.Root, {
+		open: f,
+		onOpenChange: m,
+		children: /* @__PURE__ */ a(d.Portal, { children: [/* @__PURE__ */ i(d.Overlay, { className: "kf-overlay fixed inset-0 z-50 bg-overlay" }), /* @__PURE__ */ a(d.Content, {
+			"aria-describedby": void 0,
+			className: e("kf-palette fixed inset-0 z-50 flex flex-col bg-surface font-sans text-fg shadow-overlay focus:outline-none", "pt-[env(safe-area-inset-top)] sm:inset-x-0 sm:top-[12vh] sm:bottom-auto sm:mx-auto sm:max-h-[min(34rem,76vh)] sm:w-[calc(100%-2rem)] sm:max-w-xl sm:rounded-xl sm:border sm:border-border sm:pt-0"),
+			children: [
+				/* @__PURE__ */ i(d.Title, {
+					className: "sr-only",
+					children: y
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "flex items-center gap-3 border-b border-border px-4",
+					children: [
+						/* @__PURE__ */ i(r, {
+							name: "search",
+							size: 20,
+							className: "shrink-0 text-fg-muted"
+						}),
+						/* @__PURE__ */ i("input", {
+							autoFocus: !0,
+							role: "combobox",
+							"aria-expanded": "true",
+							"aria-controls": T,
+							"aria-autocomplete": "list",
+							"aria-activedescendant": O.length ? M(C) : void 0,
+							"aria-label": g,
+							placeholder: g,
+							value: x,
+							onChange: (e) => S(e.target.value),
+							onKeyDown: A,
+							className: "h-14 min-w-0 flex-1 border-0 bg-transparent font-sans text-base text-fg outline-none placeholder:text-fg-muted"
+						}),
+						/* @__PURE__ */ i(d.Close, {
+							className: "cursor-pointer rounded-xs border border-border bg-transparent px-1.5 py-0.5 font-mono text-[11px] text-fg-muted focus-visible:outline-3 focus-visible:outline-focus",
+							children: "Esc"
+						})
+					]
+				}),
+				/* @__PURE__ */ i("div", {
+					ref: E,
+					id: T,
+					role: "listbox",
+					"aria-label": y,
+					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
+					children: D.length === 0 ? /* @__PURE__ */ i(n, {
+						size: "sm",
+						mascot: "lost",
+						headingLevel: 3,
+						title: _,
+						description: v
+					}) : D.map((n) => /* @__PURE__ */ a("div", {
+						role: "group",
+						"aria-label": n.heading,
+						className: "mb-1",
+						children: [/* @__PURE__ */ i("div", {
+							"aria-hidden": "true",
+							className: "px-3 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+							children: n.heading
+						}), n.items.map((n) => {
+							j += 1;
+							let r = j, o = r === C;
+							return /* @__PURE__ */ a("div", {
+								id: M(r),
+								role: "option",
+								"aria-selected": o,
+								"data-active": o,
+								onMouseMove: () => w(r),
+								onClick: () => k(n),
+								className: e("flex min-h-11 cursor-pointer items-center gap-3 rounded-sm px-3 py-2 text-[15px]", o && "bg-surface-muted"),
+								children: [
+									n.icon && /* @__PURE__ */ i(t, {
+										name: n.icon,
+										size: 22,
+										className: o ? "text-link" : "text-fg-muted"
+									}),
+									/* @__PURE__ */ a("span", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ i("span", {
+											className: "block truncate font-medium",
+											children: n.label
+										}), n.hint && /* @__PURE__ */ i("span", {
+											className: "block truncate text-xs text-fg-muted",
+											children: n.hint
+										})]
+									}),
+									n.shortcut && /* @__PURE__ */ i("kbd", {
+										className: "font-mono text-xs text-fg-muted",
+										children: n.shortcut
+									})
+								]
+							}, n.id);
+						})]
+					}, n.heading))
+				}),
+				/* @__PURE__ */ a("div", {
+					"aria-hidden": "true",
+					className: "hidden gap-4 border-t border-border px-4 py-2 text-xs text-fg-muted sm:flex",
+					children: [
+						/* @__PURE__ */ i("span", { children: "↑↓ to move" }),
+						/* @__PURE__ */ i("span", { children: "↵ to run" }),
+						/* @__PURE__ */ i("span", { children: "esc to close" })
+					]
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { m as CommandPalette, p as filterCommands };
+
+//# sourceMappingURL=command-palette.js.map

package/dist/command-palette/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","names":["Dialog","normalize","s","filterCommands","words","query","groups","scored","g","haystack","item","w","x","a","b","CommandPalette","setQuery","useState","active","setActive","listId","useId","listRef","useRef","filtered","useMemo","flat","useEffect","hotkey","onKey","onOpenChange","open","run","onKeyDown","index","optionId","i","cx","label","Glyph","placeholder","EmptyState","emptyTitle","emptyDescription","group","isActive","Icon"],"sources":["../../src/command-palette/command-palette.tsx"],"sourcesContent":["'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { EmptyState } from '../empty-state/empty-state';\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  /** Secondary text (e.g. a path or description). */\n  hint?: string;\n  icon?: IconName;\n  shortcut?: string;\n  /** Extra search terms (synonyms, Spanish words…). */\n  keywords?: string[];\n  onSelect: () => void;\n}\n\nexport interface CommandGroup {\n  heading: string;\n  items: CommandItem[];\n}\n\nexport interface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  groups: CommandGroup[];\n  placeholder?: string;\n  emptyTitle?: string;\n  emptyDescription?: string;\n  /** Accessible name of the dialog. */\n  label?: string;\n  /** Opens with ⌘K / Ctrl+K. Set `false` to wire your own shortcut. */\n  hotkey?: boolean;\n}\n\nconst normalize = (s: string) => s.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');\n\n/** Every query word must appear in the label, hint or keywords (accent-insensitive). Label-start matches rank first. */\nexport function filterCommands(groups: CommandGroup[], query: string): CommandGroup[] {\n  const words = normalize(query).split(/\\s+/).filter(Boolean);\n  if (!words.length) return groups;\n  return groups\n    .map((g) => {\n      const scored = g.items\n        .map((item) => {\n          const haystack = normalize([item.label, item.hint, ...(item.keywords ?? [])].join(' '));\n          if (!words.every((w) => haystack.includes(w))) return null;\n          return { item, score: normalize(item.label).startsWith(words[0]!) ? 0 : 1 };\n        })\n        .filter((x): x is { item: CommandItem; score: number } => x !== null)\n        .sort((a, b) => a.score - b.score);\n      return { heading: g.heading, items: scored.map((s) => s.item) };\n    })\n    .filter((g) => g.items.length > 0);\n}\n\n/**\n * ⌘K search across a product's actions and pages. Combobox pattern: type to filter, arrows to\n * move, Enter to run, Escape to close. Full-screen sheet on mobile.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  placeholder = 'Search actions and pages…',\n  emptyTitle = 'No matches',\n  emptyDescription = 'Try another word, or check the spelling.',\n  label = 'Command palette',\n  hotkey = true,\n}: CommandPaletteProps) {\n  const [query, setQuery] = useState('');\n  const [active, setActive] = useState(0);\n  const listId = useId();\n  const listRef = useRef<HTMLDivElement>(null);\n  const filtered = useMemo(() => filterCommands(groups, query), [groups, query]);\n  const flat = filtered.flatMap((g) => g.items);\n\n  useEffect(() => {\n    if (!hotkey) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        onOpenChange(!open);\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [hotkey, open, onOpenChange]);\n\n  useEffect(() => setActive(0), [query]);\n  useEffect(() => {\n    if (!open) setQuery('');\n  }, [open]);\n  useEffect(() => {\n    listRef.current?.querySelector('[data-active=\"true\"]')?.scrollIntoView({ block: 'nearest' });\n  }, [active]);\n\n  const run = (item: CommandItem | undefined) => {\n    if (!item) return;\n    onOpenChange(false);\n    item.onSelect();\n  };\n\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a + 1) % flat.length : 0));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0));\n    } else if (e.key === 'Home') {\n      setActive(0);\n    } else if (e.key === 'End') {\n      setActive(Math.max(0, flat.length - 1));\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      run(flat[active]);\n    }\n  };\n\n  let index = -1;\n  const optionId = (i: number) => `${listId}-opt-${i}`;\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"kf-overlay fixed inset-0 z-50 bg-overlay\" />\n        <Dialog.Content\n          aria-describedby={undefined}\n          className={cx(\n            'kf-palette fixed inset-0 z-50 flex flex-col bg-surface font-sans text-fg shadow-overlay focus:outline-none',\n            'pt-[env(safe-area-inset-top)] sm:inset-x-0 sm:top-[12vh] sm:bottom-auto sm:mx-auto sm:max-h-[min(34rem,76vh)] sm:w-[calc(100%-2rem)] sm:max-w-xl sm:rounded-xl sm:border sm:border-border sm:pt-0',\n          )}\n        >\n          <Dialog.Title className=\"sr-only\">{label}</Dialog.Title>\n          <div className=\"flex items-center gap-3 border-b border-border px-4\">\n            <Glyph name=\"search\" size={20} className=\"shrink-0 text-fg-muted\" />\n            <input\n              autoFocus\n              role=\"combobox\"\n              aria-expanded=\"true\"\n              aria-controls={listId}\n              aria-autocomplete=\"list\"\n              aria-activedescendant={flat.length ? optionId(active) : undefined}\n              aria-label={placeholder}\n              placeholder={placeholder}\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              onKeyDown={onKeyDown}\n              className=\"h-14 min-w-0 flex-1 border-0 bg-transparent font-sans text-base text-fg outline-none placeholder:text-fg-muted\"\n            />\n            <Dialog.Close className=\"cursor-pointer rounded-xs border border-border bg-transparent px-1.5 py-0.5 font-mono text-[11px] text-fg-muted focus-visible:outline-3 focus-visible:outline-focus\">\n              Esc\n            </Dialog.Close>\n          </div>\n          <div\n            ref={listRef}\n            id={listId}\n            role=\"listbox\"\n            aria-label={label}\n            className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-2\"\n          >\n            {filtered.length === 0 ? (\n              <EmptyState size=\"sm\" mascot=\"lost\" headingLevel={3} title={emptyTitle} description={emptyDescription} />\n            ) : (\n              filtered.map((group) => (\n                <div key={group.heading} role=\"group\" aria-label={group.heading} className=\"mb-1\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"px-3 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase\"\n                  >\n                    {group.heading}\n                  </div>\n                  {group.items.map((item) => {\n                    index += 1;\n                    const i = index;\n                    const isActive = i === active;\n                    return (\n                      <div\n                        key={item.id}\n                        id={optionId(i)}\n                        role=\"option\"\n                        aria-selected={isActive}\n                        data-active={isActive}\n                        onMouseMove={() => setActive(i)}\n                        onClick={() => run(item)}\n                        className={cx(\n                          'flex min-h-11 cursor-pointer items-center gap-3 rounded-sm px-3 py-2 text-[15px]',\n                          isActive && 'bg-surface-muted',\n                        )}\n                      >\n                        {item.icon && (\n                          <Icon name={item.icon} size={22} className={isActive ? 'text-link' : 'text-fg-muted'} />\n                        )}\n                        <span className=\"min-w-0 flex-1\">\n                          <span className=\"block truncate font-medium\">{item.label}</span>\n                          {item.hint && <span className=\"block truncate text-xs text-fg-muted\">{item.hint}</span>}\n                        </span>\n                        {item.shortcut && <kbd className=\"font-mono text-xs text-fg-muted\">{item.shortcut}</kbd>}\n                      </div>\n                    );\n                  })}\n                </div>\n              ))\n            )}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"hidden gap-4 border-t border-border px-4 py-2 text-xs text-fg-muted sm:flex\"\n          >\n            <span>↑↓ to move</span>\n            <span>↵ to run</span>\n            <span>esc to close</span>\n          </div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type ConfirmTone = 'default' | 'danger';
+export interface ConfirmDialogProps {
+    /** Element that opens the dialog (usually a Button). Omit when controlling `open`. */
+    trigger?: ReactElement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** State the action and its object: "Delete “Invoice intake”?" */
+    title: ReactNode;
+    /** Consequences: what is lost, what keeps working. */
+    description?: ReactNode;
+    /** Extra content between description and actions (e.g. a list of affected items). */
+    children?: ReactNode;
+    tone?: ConfirmTone;
+    /** Verb that matches the title: "Delete workflow", not "OK". */
+    confirmLabel: string;
+    cancelLabel?: string;
+    /**
+     * Typed confirmation for irreversible, high-impact actions: the confirm button stays disabled
+     * until the user types this exact text.
+     */
+    confirmText?: string;
+    /** Label for the typed-confirmation field. `{text}` is replaced by `confirmText`. */
+    confirmTextLabel?: string;
+    /**
+     * Runs on confirm. If it returns a promise, the dialog shows a loading state and stays open until
+     * it settles; if it rejects, the error message is shown inside the dialog and it stays open.
+     */
+    onConfirm: () => void | Promise<unknown>;
+    onCancel?: () => void;
+}
+/**
+ * Confirmation for destructive or irreversible actions. Uses `role="alertdialog"`: focus starts on
+ * Cancel, clicking the backdrop does not close it, Escape cancels. For reversible actions prefer
+ * acting immediately and offering Undo in a toast.
+ */
+export declare function ConfirmDialog({ trigger, open: openProp, onOpenChange, title, description, children, tone, confirmLabel, cancelLabel, confirmText, confirmTextLabel, onConfirm, onCancel, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/confirm-dialog/confirm-dialog.js

@@ -0,0 +1,106 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Button as n } from "../button/button.js";
+import { Alert as r } from "../alert/alert.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o, useRef as s, useState as c } from "react";
+import * as l from "@radix-ui/react-alert-dialog";
+//#region src/confirm-dialog/confirm-dialog.tsx
+function u({ trigger: u, open: d, onOpenChange: f, title: p, description: m, children: h, tone: g = "danger", confirmLabel: _, cancelLabel: v = "Cancel", confirmText: y, confirmTextLabel: b = "Type {text} to confirm", onConfirm: x, onCancel: S }) {
+	let [C, w] = c(!1), [T, E] = c(""), [D, O] = c(!1), [k, A] = c(null), j = s(null), M = o(), N = d ?? C, P = (e) => {
+		D || (e || (E(""), A(null)), d === void 0 && w(e), f?.(e));
+	}, F = async () => {
+		A(null);
+		try {
+			let e = x();
+			e instanceof Promise && (O(!0), await e), O(!1), E(""), d === void 0 && w(!1), f?.(!1);
+		} catch (e) {
+			O(!1), A(e instanceof Error ? e.message : "Something went wrong. Try again.");
+		}
+	}, I = y !== void 0 && T.trim() !== y;
+	return /* @__PURE__ */ a(l.Root, {
+		open: N,
+		onOpenChange: P,
+		children: [u && /* @__PURE__ */ i(l.Trigger, {
+			asChild: !0,
+			children: u
+		}), /* @__PURE__ */ a(l.Portal, { children: [/* @__PURE__ */ i(l.Overlay, { className: "kf-overlay fixed inset-0 z-50 bg-overlay" }), /* @__PURE__ */ a(l.Content, {
+			...m ? {} : { "aria-describedby": void 0 },
+			onOpenAutoFocus: (e) => {
+				y !== void 0 && (e.preventDefault(), j.current?.focus());
+			},
+			onEscapeKeyDown: (e) => D && e.preventDefault(),
+			className: e("kf-modal fixed inset-x-0 bottom-0 z-50 flex max-h-[92dvh] flex-col gap-5 overflow-y-auto rounded-t-xl bg-surface p-6 font-sans text-fg shadow-overlay", "pb-[max(1.5rem,env(safe-area-inset-bottom))] focus:outline-none", "sm:inset-0 sm:m-auto sm:h-fit sm:w-[calc(100%-2rem)] sm:max-w-md sm:rounded-xl sm:pb-6"),
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: "flex items-start gap-4",
+					children: [g === "danger" && /* @__PURE__ */ i("span", {
+						className: "grid size-11 shrink-0 place-items-center rounded-full bg-danger-surface text-danger-icon",
+						children: /* @__PURE__ */ i(t, {
+							name: "warning",
+							size: 24
+						})
+					}), /* @__PURE__ */ a("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ i(l.Title, {
+							className: "m-0 font-display text-xl font-bold tracking-tight text-balance",
+							children: p
+						}), m && /* @__PURE__ */ i(l.Description, {
+							className: "m-0 mt-1.5 text-[15px] text-fg-muted",
+							children: m
+						})]
+					})]
+				}),
+				h,
+				y !== void 0 && /* @__PURE__ */ a("div", {
+					className: "grid gap-1.5",
+					children: [/* @__PURE__ */ i("label", {
+						htmlFor: M,
+						className: "text-sm font-medium",
+						children: b.split("{text}").flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ i("code", {
+							className: "rounded-xs bg-surface-muted px-1.5 py-0.5 font-mono text-[13px]",
+							children: y
+						}, t), e])
+					}), /* @__PURE__ */ i("input", {
+						id: M,
+						ref: j,
+						value: T,
+						onChange: (e) => E(e.target.value),
+						autoComplete: "off",
+						autoCapitalize: "off",
+						spellCheck: !1,
+						disabled: D,
+						className: "h-11 rounded-sm border border-border bg-bg px-3 font-mono text-[15px] text-fg focus-visible:outline-3 focus-visible:outline-offset-0 focus-visible:outline-focus"
+					})]
+				}),
+				k && /* @__PURE__ */ i(r, {
+					variant: "danger",
+					title: k
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "flex flex-col-reverse gap-2 *:w-full sm:flex-row sm:justify-end sm:*:w-auto",
+					children: [/* @__PURE__ */ i(l.Cancel, {
+						asChild: !0,
+						children: /* @__PURE__ */ i(n, {
+							variant: "secondary",
+							disabled: D,
+							onClick: S,
+							children: v
+						})
+					}), /* @__PURE__ */ i(n, {
+						variant: g === "danger" ? "danger" : "primary",
+						loading: D,
+						"aria-disabled": I || void 0,
+						onClick: () => !I && F(),
+						children: _
+					})]
+				})
+			]
+		})] })]
+	});
+}
+//#endregion
+export { u as ConfirmDialog };
+
+//# sourceMappingURL=confirm-dialog.js.map

package/dist/confirm-dialog/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.js","names":["AlertDialog","ConfirmDialog","openProp","uncontrolled","setUncontrolled","useState","typed","setTyped","pending","setPending","error","setError","inputRef","useRef","inputId","useId","open","setOpen","next","onOpenChange","confirm","result","onConfirm","blocked","confirmText","trigger","description","cx","tone","Icon","title","children","confirmTextLabel","i","part","Alert","Button","onCancel","cancelLabel","confirmLabel"],"sources":["../../src/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as AlertDialog from '@radix-ui/react-alert-dialog';\nimport { useId, useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Button } from '../button/button';\nimport { Alert } from '../alert/alert';\nimport { Icon } from '../icon/icon';\n\nexport type ConfirmTone = 'default' | 'danger';\n\nexport interface ConfirmDialogProps {\n  /** Element that opens the dialog (usually a Button). Omit when controlling `open`. */\n  trigger?: ReactElement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** State the action and its object: \"Delete “Invoice intake”?\" */\n  title: ReactNode;\n  /** Consequences: what is lost, what keeps working. */\n  description?: ReactNode;\n  /** Extra content between description and actions (e.g. a list of affected items). */\n  children?: ReactNode;\n  tone?: ConfirmTone;\n  /** Verb that matches the title: \"Delete workflow\", not \"OK\". */\n  confirmLabel: string;\n  cancelLabel?: string;\n  /**\n   * Typed confirmation for irreversible, high-impact actions: the confirm button stays disabled\n   * until the user types this exact text.\n   */\n  confirmText?: string;\n  /** Label for the typed-confirmation field. `{text}` is replaced by `confirmText`. */\n  confirmTextLabel?: string;\n  /**\n   * Runs on confirm. If it returns a promise, the dialog shows a loading state and stays open until\n   * it settles; if it rejects, the error message is shown inside the dialog and it stays open.\n   */\n  onConfirm: () => void | Promise<unknown>;\n  onCancel?: () => void;\n}\n\n/**\n * Confirmation for destructive or irreversible actions. Uses `role=\"alertdialog\"`: focus starts on\n * Cancel, clicking the backdrop does not close it, Escape cancels. For reversible actions prefer\n * acting immediately and offering Undo in a toast.\n */\nexport function ConfirmDialog({\n  trigger,\n  open: openProp,\n  onOpenChange,\n  title,\n  description,\n  children,\n  tone = 'danger',\n  confirmLabel,\n  cancelLabel = 'Cancel',\n  confirmText,\n  confirmTextLabel = 'Type {text} to confirm',\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [uncontrolled, setUncontrolled] = useState(false);\n  const [typed, setTyped] = useState('');\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = useId();\n  const open = openProp ?? uncontrolled;\n\n  const setOpen = (next: boolean) => {\n    if (pending) return;\n    if (!next) {\n      setTyped('');\n      setError(null);\n    }\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  };\n\n  const confirm = async () => {\n    setError(null);\n    try {\n      const result = onConfirm();\n      if (result instanceof Promise) {\n        setPending(true);\n        await result;\n      }\n      setPending(false);\n      setTyped('');\n      if (openProp === undefined) setUncontrolled(false);\n      onOpenChange?.(false);\n    } catch (e) {\n      setPending(false);\n      setError(e instanceof Error ? e.message : 'Something went wrong. Try again.');\n    }\n  };\n\n  const blocked = confirmText !== undefined && typed.trim() !== confirmText;\n\n  return (\n    <AlertDialog.Root open={open} onOpenChange={setOpen}>\n      {trigger && <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>}\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay className=\"kf-overlay fixed inset-0 z-50 bg-overlay\" />\n        <AlertDialog.Content\n          {...(description ? {} : { 'aria-describedby': undefined })}\n          onOpenAutoFocus={(e) => {\n            if (confirmText !== undefined) {\n              e.preventDefault();\n              inputRef.current?.focus();\n            }\n          }}\n          onEscapeKeyDown={(e) => pending && e.preventDefault()}\n          className={cx(\n            'kf-modal fixed inset-x-0 bottom-0 z-50 flex max-h-[92dvh] flex-col gap-5 overflow-y-auto rounded-t-xl bg-surface p-6 font-sans text-fg shadow-overlay',\n            'pb-[max(1.5rem,env(safe-area-inset-bottom))] focus:outline-none',\n            'sm:inset-0 sm:m-auto sm:h-fit sm:w-[calc(100%-2rem)] sm:max-w-md sm:rounded-xl sm:pb-6',\n          )}\n        >\n          <div className=\"flex items-start gap-4\">\n            {tone === 'danger' && (\n              <span className=\"grid size-11 shrink-0 place-items-center rounded-full bg-danger-surface text-danger-icon\">\n                <Icon name=\"warning\" size={24} />\n              </span>\n            )}\n            <div className=\"min-w-0 flex-1\">\n              <AlertDialog.Title className=\"m-0 font-display text-xl font-bold tracking-tight text-balance\">{title}</AlertDialog.Title>\n              {description && <AlertDialog.Description className=\"m-0 mt-1.5 text-[15px] text-fg-muted\">{description}</AlertDialog.Description>}\n            </div>\n          </div>\n\n          {children}\n\n          {confirmText !== undefined && (\n            <div className=\"grid gap-1.5\">\n              <label htmlFor={inputId} className=\"text-sm font-medium\">\n                {confirmTextLabel.split('{text}').flatMap((part, i) =>\n                  i === 0 ? [part] : [<code key={i} className=\"rounded-xs bg-surface-muted px-1.5 py-0.5 font-mono text-[13px]\">{confirmText}</code>, part],\n                )}\n              </label>\n              <input\n                id={inputId}\n                ref={inputRef}\n                value={typed}\n                onChange={(e) => setTyped(e.target.value)}\n                autoComplete=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                disabled={pending}\n                className=\"h-11 rounded-sm border border-border bg-bg px-3 font-mono text-[15px] text-fg focus-visible:outline-3 focus-visible:outline-offset-0 focus-visible:outline-focus\"\n              />\n            </div>\n          )}\n\n          {error && <Alert variant=\"danger\" title={error} />}\n\n          <div className=\"flex flex-col-reverse gap-2 *:w-full sm:flex-row sm:justify-end sm:*:w-auto\">\n            <AlertDialog.Cancel asChild>\n              <Button variant=\"secondary\" disabled={pending} onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            </AlertDialog.Cancel>\n            <Button\n              variant={tone === 'danger' ? 'danger' : 'primary'}\n              loading={pending}\n              aria-disabled={blocked || undefined}\n              onClick={() => !blocked && confirm()}\n            >\n              {confirmLabel}\n            </Button>\n          </div>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/content/assistant.d.ts

@@ -0,0 +1,86 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/** Soft pills with ready-made prompts; picking one sends it (or fills the composer). */
+export declare function PromptSuggestions({ suggestions, onPick, label, className, }: {
+    suggestions: string[];
+    onPick: (prompt: string) => void;
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export interface ChatComposerProps {
+    onSend: (text: string) => void;
+    placeholder?: string;
+    /** While the assistant answers: sending is disabled. */
+    busy?: boolean;
+    /** Controlled text (to fill it from a suggestion). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    labels?: {
+        message?: string;
+        send?: string;
+    };
+    className?: string;
+}
+/** The message field and send button. Enter sends, Shift+Enter adds a line. */
+export declare function ChatComposer({ onSend, placeholder, busy, value, onValueChange, labels, className, }: ChatComposerProps): import("react").JSX.Element;
+export interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: ReactNode;
+}
+export interface ChatPanelProps {
+    /** Assistant name in the header ("Kudi"). */
+    title: string;
+    messages: ChatMessage[];
+    onSend: (text: string) => void;
+    /** Shows the typing indicator and disables sending. */
+    busy?: boolean;
+    suggestions?: string[];
+    /** One highlighted suggestion above the composer ("Summarize this week"). */
+    pinned?: string;
+    onMinimize?: () => void;
+    /** The assistant's avatar or mark in the header. */
+    mark?: ReactNode;
+    labels?: {
+        ai?: string;
+        minimize?: string;
+        typing?: string;
+        log?: string;
+    };
+    className?: string;
+}
+/**
+ * The assistant window: brand header with an "AI" badge and minimize, the message log, suggestion pills, a pinned
+ * suggestion and the composer. Wire `onSend` to your AI endpoint; new messages are announced politely.
+ */
+export declare function ChatPanel({ title, messages, onSend, busy, suggestions, pinned, onMinimize, mark, labels, className, }: ChatPanelProps): import("react").JSX.Element;
+export interface QuickPanelProps {
+    /** The element that opens it, usually a `FloatingActions` secondary button or any button. */
+    trigger: ReactElement;
+    /** Product mark in the header. */
+    mark?: ReactNode;
+    workspace: string;
+    user: {
+        name: string;
+        avatarSrc?: string;
+    };
+    stats?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    actions?: {
+        label: string;
+        icon: IconName;
+        onClick: () => void;
+    }[];
+    links?: {
+        label: string;
+        href: string;
+    }[];
+    label?: string;
+}
+/**
+ * Quick actions in a popover from the floating button: brand header (mark, workspace, avatar), a stats strip,
+ * primary actions and footer links.
+ */
+export declare function QuickPanel({ trigger, mark, workspace, user, stats, actions, links, label, }: QuickPanelProps): import("react").JSX.Element;

package/dist/content/assistant.js

@@ -0,0 +1,213 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { IconButton as n } from "../button/button.js";
+import { floatingSurface as r } from "../popover/popover.js";
+import { Glyph as i } from "../lib/glyphs.js";
+import { Avatar as a } from "../data-display/avatar.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import * as f from "@radix-ui/react-popover";
+//#region src/content/assistant.tsx
+function p({ suggestions: t, onPick: n, label: r = "Suggestions", className: i }) {
+	return /* @__PURE__ */ o("ul", {
+		"aria-label": r,
+		className: e("m-0 flex list-none flex-wrap gap-2 p-0 font-sans", i),
+		children: t.map((e) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("button", {
+			type: "button",
+			onClick: () => n(e),
+			className: "cursor-pointer rounded-full border border-accent/40 bg-accent/10 px-3 py-1.5 text-left text-sm font-medium text-fg hover:bg-accent/20 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+			children: e
+		}) }, e))
+	});
+}
+function m({ onSend: t, placeholder: r = "Ask anything…", busy: i, value: a, onValueChange: c, labels: l = {}, className: u }) {
+	let [f, p] = d(""), m = a ?? f, h = (e) => c ? c(e) : p(e), g = (e) => {
+		e?.preventDefault();
+		let n = m.trim();
+		n && !i && (t(n), h(""));
+	};
+	return /* @__PURE__ */ s("form", {
+		onSubmit: g,
+		className: e("flex items-end gap-2 rounded-lg border border-border bg-bg p-1.5 pl-3 focus-within:border-primary", u),
+		children: [/* @__PURE__ */ o("textarea", {
+			"aria-label": l.message ?? "Message",
+			rows: 1,
+			value: m,
+			placeholder: r,
+			onChange: (e) => h(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), g());
+			},
+			className: "max-h-32 min-h-9 flex-1 resize-none border-0 bg-transparent py-2 font-sans text-base text-fg outline-none [field-sizing:content] placeholder:text-fg-muted/80 sm:text-[15px]"
+		}), /* @__PURE__ */ o(n, {
+			type: "submit",
+			icon: "arrow-right",
+			label: l.send ?? "Send",
+			variant: "primary",
+			disabled: i || !m.trim()
+		})]
+	});
+}
+function h({ title: n, messages: r, onSend: a, busy: f, suggestions: h = [], pinned: g, onMinimize: _, mark: v, labels: y = {}, className: b }) {
+	let x = u(null), S = l(), [C, w] = d("");
+	return c(() => {
+		x.current?.scrollTo({ top: x.current.scrollHeight });
+	}, [r.length, f]), /* @__PURE__ */ s("section", {
+		"aria-labelledby": S,
+		className: e("flex h-[min(36rem,calc(100dvh-6rem))] w-full max-w-sm flex-col overflow-hidden rounded-xl border border-border bg-surface font-sans shadow-overlay", b),
+		children: [
+			/* @__PURE__ */ s("div", {
+				"data-theme": "dark",
+				className: "flex items-center gap-3 bg-primary-strong px-4 py-3 text-fg",
+				children: [
+					v ?? /* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						className: "grid size-8 place-items-center rounded-full bg-white/12",
+						children: /* @__PURE__ */ o(t, {
+							name: "ai",
+							size: 18
+						})
+					}),
+					/* @__PURE__ */ s("h2", {
+						id: S,
+						className: "m-0 flex-1 text-[15px] font-semibold",
+						children: [n, /* @__PURE__ */ o("span", {
+							className: "ml-2 rounded-full bg-accent px-1.5 py-0.5 align-middle text-[10px] font-bold text-on-accent",
+							children: y.ai ?? "AI"
+						})]
+					}),
+					_ && /* @__PURE__ */ o("button", {
+						type: "button",
+						"aria-label": y.minimize ?? "Minimize",
+						onClick: _,
+						className: "grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-white hover:bg-white/15 focus-visible:outline-3 focus-visible:outline-white",
+						children: /* @__PURE__ */ o(i, {
+							name: "minus",
+							size: 18
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ s("div", {
+				ref: x,
+				role: "log",
+				"aria-label": y.log ?? "Conversation",
+				"aria-live": "polite",
+				className: "grid flex-1 content-start gap-3 overflow-y-auto p-4",
+				children: [r.map((t) => /* @__PURE__ */ o("div", {
+					className: e("max-w-[85%] rounded-2xl px-3.5 py-2.5 text-sm", t.role === "user" ? "justify-self-end rounded-br-sm bg-primary text-on-primary" : "justify-self-start rounded-bl-sm bg-surface-muted text-fg"),
+					children: t.content
+				}, t.id)), f && /* @__PURE__ */ o("div", {
+					className: "flex w-fit items-center gap-1 rounded-2xl rounded-bl-sm bg-surface-muted px-3.5 py-3",
+					role: "status",
+					"aria-label": y.typing ?? `${n} is typing`,
+					children: [
+						0,
+						1,
+						2
+					].map((e) => /* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						className: "size-1.5 animate-pulse rounded-full bg-fg-muted motion-reduce:animate-none",
+						style: { animationDelay: `${e * 150}ms` }
+					}, e))
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "grid gap-3 border-t border-border p-3",
+				children: [
+					h.length > 0 && r.length === 0 && /* @__PURE__ */ o(p, {
+						suggestions: h,
+						onPick: (e) => !f && a(e)
+					}),
+					g && /* @__PURE__ */ s("button", {
+						type: "button",
+						disabled: f,
+						onClick: () => a(g),
+						className: "flex cursor-pointer items-center gap-2 rounded-md border-0 bg-info-surface px-3 py-2 text-left text-sm font-medium text-info-fg hover:bg-info-surface/70 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+						children: [/* @__PURE__ */ o(t, {
+							name: "zap",
+							size: 16,
+							className: "shrink-0"
+						}), g]
+					}),
+					/* @__PURE__ */ o(m, {
+						onSend: a,
+						busy: f,
+						value: C,
+						onValueChange: w
+					})
+				]
+			})
+		]
+	});
+}
+function g({ trigger: n, mark: i, workspace: c, user: l, stats: u = [], actions: d = [], links: p = [], label: m = "Quick actions" }) {
+	return /* @__PURE__ */ s(f.Root, { children: [/* @__PURE__ */ o(f.Trigger, {
+		asChild: !0,
+		children: n
+	}), /* @__PURE__ */ o(f.Portal, { children: /* @__PURE__ */ s(f.Content, {
+		"aria-label": m,
+		side: "top",
+		align: "end",
+		sideOffset: 10,
+		collisionPadding: 16,
+		className: e("kf-popover w-80 overflow-hidden text-sm", r),
+		children: [
+			/* @__PURE__ */ s("div", {
+				"data-theme": "dark",
+				className: "flex items-center gap-3 bg-primary-strong px-4 py-3 text-fg",
+				children: [
+					i,
+					/* @__PURE__ */ o("span", {
+						className: "min-w-0 flex-1 truncate font-semibold",
+						children: c
+					}),
+					/* @__PURE__ */ o(a, {
+						name: l.name,
+						src: l.avatarSrc,
+						size: "sm"
+					})
+				]
+			}),
+			u.length > 0 && /* @__PURE__ */ o("dl", {
+				className: "m-0 grid grid-flow-col divide-x divide-border border-b border-border",
+				children: u.map((e) => /* @__PURE__ */ s("div", {
+					className: "grid gap-0.5 px-3 py-2.5 text-center",
+					children: [/* @__PURE__ */ o("dt", {
+						className: "text-[11px] text-fg-muted",
+						children: e.label
+					}), /* @__PURE__ */ o("dd", {
+						className: "m-0 font-display text-lg font-bold text-fg tabular-nums",
+						children: e.value
+					})]
+				}, e.label))
+			}),
+			d.length > 0 && /* @__PURE__ */ o("div", {
+				className: "grid grid-cols-2 gap-2 p-3",
+				children: d.map((e) => /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: e.onClick,
+					className: "grid cursor-pointer justify-items-center gap-1.5 rounded-md border border-border bg-surface px-2 py-3 text-xs font-semibold text-fg hover:border-primary hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+					children: [/* @__PURE__ */ o(t, {
+						name: e.icon,
+						size: 22,
+						className: "text-primary"
+					}), e.label]
+				}, e.label))
+			}),
+			p.length > 0 && /* @__PURE__ */ o("div", {
+				className: "flex flex-wrap gap-x-4 gap-y-1 border-t border-border px-4 py-2.5 text-xs",
+				children: p.map((e) => /* @__PURE__ */ o("a", {
+					href: e.href,
+					className: "text-fg-muted no-underline hover:text-fg hover:underline",
+					children: e.label
+				}, e.href))
+			})
+		]
+	}) })] });
+}
+//#endregion
+export { m as ChatComposer, h as ChatPanel, p as PromptSuggestions, g as QuickPanel };
+
+//# sourceMappingURL=assistant.js.map