@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/content/assistant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assistant.js","names":["RadixPopover","PromptSuggestions","label","cx","className","suggestions","onPick","s","ChatComposer","inner","setInner","useState","text","value","setText","onValueChange","t","send","onSend","labels","IconButton","busy","ChatPanel","logRef","useRef","titleId","useId","draft","setDraft","useEffect","messages","mark","Icon","title","onMinimize","Glyph","m","d","p","pinned","QuickPanel","trigger","floatingSurface","workspace","Avatar","user","stats","actions","a","links","l"],"sources":["../../src/content/assistant.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useEffect, useId, useRef, useState, type FormEvent, type ReactElement, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Avatar } from '../data-display/avatar';\nimport { IconButton } from '../button/button';\nimport { floatingSurface } from '../popover/popover';\n\n/* ---------------- PromptSuggestions ---------------- */\n\n/** Soft pills with ready-made prompts; picking one sends it (or fills the composer). */\nexport function PromptSuggestions({\n  suggestions,\n  onPick,\n  label = 'Suggestions',\n  className,\n}: {\n  suggestions: string[];\n  onPick: (prompt: string) => void;\n  label?: string;\n  className?: string;\n}) {\n  return (\n    <ul aria-label={label} className={cx('m-0 flex list-none flex-wrap gap-2 p-0 font-sans', className)}>\n      {suggestions.map((s) => (\n        <li key={s}>\n          <button\n            type=\"button\"\n            onClick={() => onPick(s)}\n            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\"\n          >\n            {s}\n          </button>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/* ---------------- ChatComposer ---------------- */\n\nexport interface ChatComposerProps {\n  onSend: (text: string) => void;\n  placeholder?: string;\n  /** While the assistant answers: sending is disabled. */\n  busy?: boolean;\n  /** Controlled text (to fill it from a suggestion). */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  labels?: { message?: string; send?: string };\n  className?: string;\n}\n\n/** The message field and send button. Enter sends, Shift+Enter adds a line. */\nexport function ChatComposer({\n  onSend,\n  placeholder = 'Ask anything…',\n  busy,\n  value,\n  onValueChange,\n  labels = {},\n  className,\n}: ChatComposerProps) {\n  const [inner, setInner] = useState('');\n  const text = value ?? inner;\n  const setText = (t: string) => (onValueChange ? onValueChange(t) : setInner(t));\n  const send = (e?: FormEvent) => {\n    e?.preventDefault();\n    const t = text.trim();\n    if (!t || busy) return;\n    onSend(t);\n    setText('');\n  };\n  return (\n    <form\n      onSubmit={send}\n      className={cx(\n        'flex items-end gap-2 rounded-lg border border-border bg-bg p-1.5 pl-3 focus-within:border-primary',\n        className,\n      )}\n    >\n      <textarea\n        aria-label={labels.message ?? 'Message'}\n        rows={1}\n        value={text}\n        placeholder={placeholder}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          // Not while an IME composes (Japanese, Chinese…): Enter confirms the candidate there.\n          if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        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]\"\n      />\n      <IconButton\n        type=\"submit\"\n        icon=\"arrow-right\"\n        label={labels.send ?? 'Send'}\n        variant=\"primary\"\n        disabled={busy || !text.trim()}\n      />\n    </form>\n  );\n}\n\n/* ---------------- ChatPanel ---------------- */\n\nexport interface ChatMessage {\n  id: string;\n  role: 'user' | 'assistant';\n  content: ReactNode;\n}\n\nexport interface ChatPanelProps {\n  /** Assistant name in the header (\"Kudi\"). */\n  title: string;\n  messages: ChatMessage[];\n  onSend: (text: string) => void;\n  /** Shows the typing indicator and disables sending. */\n  busy?: boolean;\n  suggestions?: string[];\n  /** One highlighted suggestion above the composer (\"Summarize this week\"). */\n  pinned?: string;\n  onMinimize?: () => void;\n  /** The assistant's avatar or mark in the header. */\n  mark?: ReactNode;\n  labels?: { ai?: string; minimize?: string; typing?: string; log?: string };\n  className?: string;\n}\n\n/**\n * The assistant window: brand header with an \"AI\" badge and minimize, the message log, suggestion pills, a pinned\n * suggestion and the composer. Wire `onSend` to your AI endpoint; new messages are announced politely.\n */\nexport function ChatPanel({\n  title,\n  messages,\n  onSend,\n  busy,\n  suggestions = [],\n  pinned,\n  onMinimize,\n  mark,\n  labels = {},\n  className,\n}: ChatPanelProps) {\n  const logRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const [draft, setDraft] = useState('');\n  useEffect(() => {\n    logRef.current?.scrollTo({ top: logRef.current.scrollHeight });\n  }, [messages.length, busy]);\n  return (\n    <section\n      aria-labelledby={titleId}\n      className={cx(\n        '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',\n        className,\n      )}\n    >\n      <div data-theme=\"dark\" className=\"flex items-center gap-3 bg-primary-strong px-4 py-3 text-fg\">\n        {mark ?? (\n          <span aria-hidden=\"true\" className=\"grid size-8 place-items-center rounded-full bg-white/12\">\n            <Icon name=\"ai\" size={18} />\n          </span>\n        )}\n        <h2 id={titleId} className=\"m-0 flex-1 text-[15px] font-semibold\">\n          {title}\n          <span className=\"ml-2 rounded-full bg-accent px-1.5 py-0.5 align-middle text-[10px] font-bold text-on-accent\">\n            {labels.ai ?? 'AI'}\n          </span>\n        </h2>\n        {onMinimize && (\n          <button\n            type=\"button\"\n            aria-label={labels.minimize ?? 'Minimize'}\n            onClick={onMinimize}\n            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\"\n          >\n            <Glyph name=\"minus\" size={18} />\n          </button>\n        )}\n      </div>\n      <div\n        ref={logRef}\n        role=\"log\"\n        aria-label={labels.log ?? 'Conversation'}\n        aria-live=\"polite\"\n        className=\"grid flex-1 content-start gap-3 overflow-y-auto p-4\"\n      >\n        {messages.map((m) => (\n          <div\n            key={m.id}\n            className={cx(\n              'max-w-[85%] rounded-2xl px-3.5 py-2.5 text-sm',\n              m.role === 'user'\n                ? 'justify-self-end rounded-br-sm bg-primary text-on-primary'\n                : 'justify-self-start rounded-bl-sm bg-surface-muted text-fg',\n            )}\n          >\n            {m.content}\n          </div>\n        ))}\n        {busy && (\n          <div\n            className=\"flex w-fit items-center gap-1 rounded-2xl rounded-bl-sm bg-surface-muted px-3.5 py-3\"\n            role=\"status\"\n            aria-label={labels.typing ?? `${title} is typing`}\n          >\n            {[0, 1, 2].map((d) => (\n              <span\n                key={d}\n                aria-hidden=\"true\"\n                className=\"size-1.5 animate-pulse rounded-full bg-fg-muted motion-reduce:animate-none\"\n                style={{ animationDelay: `${d * 150}ms` }}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n      <div className=\"grid gap-3 border-t border-border p-3\">\n        {suggestions.length > 0 && messages.length === 0 && (\n          <PromptSuggestions suggestions={suggestions} onPick={(p) => !busy && onSend(p)} />\n        )}\n        {pinned && (\n          <button\n            type=\"button\"\n            disabled={busy}\n            onClick={() => onSend(pinned)}\n            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\"\n          >\n            <Icon name=\"zap\" size={16} className=\"shrink-0\" />\n            {pinned}\n          </button>\n        )}\n        <ChatComposer onSend={onSend} busy={busy} value={draft} onValueChange={setDraft} />\n      </div>\n    </section>\n  );\n}\n\n/* ---------------- QuickPanel ---------------- */\n\nexport interface QuickPanelProps {\n  /** The element that opens it, usually a `FloatingActions` secondary button or any button. */\n  trigger: ReactElement;\n  /** Product mark in the header. */\n  mark?: ReactNode;\n  workspace: string;\n  user: { name: string; avatarSrc?: string };\n  stats?: { label: string; value: ReactNode }[];\n  actions?: { label: string; icon: IconName; onClick: () => void }[];\n  links?: { label: string; href: string }[];\n  label?: string;\n}\n\n/**\n * Quick actions in a popover from the floating button: brand header (mark, workspace, avatar), a stats strip,\n * primary actions and footer links.\n */\nexport function QuickPanel({\n  trigger,\n  mark,\n  workspace,\n  user,\n  stats = [],\n  actions = [],\n  links = [],\n  label = 'Quick actions',\n}: QuickPanelProps) {\n  return (\n    <RadixPopover.Root>\n      <RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>\n      <RadixPopover.Portal>\n        <RadixPopover.Content\n          aria-label={label}\n          side=\"top\"\n          align=\"end\"\n          sideOffset={10}\n          collisionPadding={16}\n          className={cx('kf-popover w-80 overflow-hidden text-sm', floatingSurface)}\n        >\n          <div data-theme=\"dark\" className=\"flex items-center gap-3 bg-primary-strong px-4 py-3 text-fg\">\n            {mark}\n            <span className=\"min-w-0 flex-1 truncate font-semibold\">{workspace}</span>\n            <Avatar name={user.name} src={user.avatarSrc} size=\"sm\" />\n          </div>\n          {stats.length > 0 && (\n            <dl className=\"m-0 grid grid-flow-col divide-x divide-border border-b border-border\">\n              {stats.map((s) => (\n                <div key={s.label} className=\"grid gap-0.5 px-3 py-2.5 text-center\">\n                  <dt className=\"text-[11px] text-fg-muted\">{s.label}</dt>\n                  <dd className=\"m-0 font-display text-lg font-bold text-fg tabular-nums\">{s.value}</dd>\n                </div>\n              ))}\n            </dl>\n          )}\n          {actions.length > 0 && (\n            <div className=\"grid grid-cols-2 gap-2 p-3\">\n              {actions.map((a) => (\n                <button\n                  key={a.label}\n                  type=\"button\"\n                  onClick={a.onClick}\n                  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\"\n                >\n                  <Icon name={a.icon} size={22} className=\"text-primary\" />\n                  {a.label}\n                </button>\n              ))}\n            </div>\n          )}\n          {links.length > 0 && (\n            <div className=\"flex flex-wrap gap-x-4 gap-y-1 border-t border-border px-4 py-2.5 text-xs\">\n              {links.map((l) => (\n                <a key={l.href} href={l.href} className=\"text-fg-muted no-underline hover:text-fg hover:underline\">\n                  {l.label}\n                </a>\n              ))}\n            </div>\n          )}\n        </RadixPopover.Content>\n      </RadixPopover.Portal>\n    </RadixPopover.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/content/content.d.ts

@@ -0,0 +1,45 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/**
+ * Long-form typography for docs, terms and privacy: headings, lists with colored markers, links, quotes and a
+ * readable measure (~68 characters). Wrap plain HTML or Markdown output in it.
+ */
+export declare function Prose({ as: Tag, className, ...rest }: HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+}): import("react").JSX.Element;
+/** One small line with an icon for disclaimers and formulas, under a section or the page. */
+export declare function Note({ icon, children, className, }: {
+    icon?: IconName;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** A phone, tablet or laptop frame around a screenshot or a live preview (product heroes, docs). */
+export declare function DeviceFrame({ device, children, className, }: {
+    device?: 'phone' | 'tablet' | 'laptop';
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export interface CarouselStep {
+    title: string;
+    text: ReactNode;
+    /** An illustration or screenshot. */
+    media?: ReactNode;
+}
+export interface StepCarouselProps {
+    steps: CarouselStep[];
+    /** Seconds per step while playing. */
+    interval?: number;
+    labels?: {
+        step?: (n: number, total: number) => string;
+        prev?: string;
+        next?: string;
+        play?: string;
+        pause?: string;
+    };
+    className?: string;
+}
+/**
+ * A guided walkthrough: illustration, "Step 1 of 6", title, text, step dots and Previous / Play / Next. Play advances
+ * on a timer and never starts on its own; with reduced motion the change is instant.
+ */
+export declare function StepCarousel({ steps, interval, labels, className }: StepCarouselProps): import("react").JSX.Element;

package/dist/content/content.js

@@ -0,0 +1,136 @@
+"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 { StepDots as r } from "../stepper/step-dots.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as o, useState as s } from "react";
+//#region src/content/content.tsx
+function c({ as: t = "div", className: n, ...r }) {
+	return /* @__PURE__ */ i(t, {
+		className: e("max-w-[68ch] font-sans text-base leading-relaxed text-fg", "[&>*+*]:mt-4 [&_h2]:mt-10 [&_h2]:font-display [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-balance", "[&_h3]:mt-8 [&_h3]:font-display [&_h3]:text-lg [&_h3]:font-bold [&_h2+*]:mt-3 [&_h3+*]:mt-2", "[&_ul]:list-disc [&_ol]:list-decimal [&_ul,&_ol]:pl-6 [&_li]:mt-1.5 [&_li]:marker:font-semibold [&_li]:marker:text-primary", "[&_a]:font-medium [&_a]:text-link [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:no-underline", "[&_strong]:font-semibold [&_code]:rounded-xs [&_code]:bg-surface-muted [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.9em]", "[&_blockquote]:border-l-4 [&_blockquote]:border-accent [&_blockquote]:pl-4 [&_blockquote]:text-fg-muted [&_blockquote]:italic", "[&_hr]:my-8 [&_hr]:border-border", n),
+		...r
+	});
+}
+function l({ icon: n = "info", children: r, className: o }) {
+	return /* @__PURE__ */ a("p", {
+		className: e("m-0 flex items-start gap-1.5 font-sans text-xs text-fg-muted", o),
+		children: [/* @__PURE__ */ i(t, {
+			name: n,
+			size: 14,
+			className: "mt-px shrink-0"
+		}), /* @__PURE__ */ i("span", { children: r })]
+	});
+}
+var u = {
+	phone: {
+		outer: "w-64 rounded-[2.25rem] p-2.5",
+		screen: "aspect-[9/19.5] rounded-[1.75rem]"
+	},
+	tablet: {
+		outer: "w-full max-w-xl rounded-[1.75rem] p-3",
+		screen: "aspect-[4/3] rounded-[1.1rem]"
+	},
+	laptop: {
+		outer: "w-[92%] max-w-3xl rounded-t-xl p-2.5 pb-3",
+		screen: "aspect-[16/10] rounded-md"
+	}
+};
+function d({ device: t = "tablet", children: n, className: r }) {
+	let o = u[t];
+	return /* @__PURE__ */ a("div", {
+		className: e("mx-auto grid justify-items-center", t !== "phone" && "w-full", r),
+		children: [/* @__PURE__ */ i("div", {
+			className: e("bg-surface-inverse shadow-overlay", o.outer),
+			children: /* @__PURE__ */ i("div", {
+				className: e("relative w-full overflow-hidden bg-bg [&>img]:size-full [&>img]:object-cover", o.screen),
+				children: n
+			})
+		}), t === "laptop" && /* @__PURE__ */ i("div", {
+			"aria-hidden": "true",
+			className: "h-3 w-full max-w-[calc(48rem/0.92)] rounded-b-xl bg-surface-inverse/85"
+		})]
+	});
+}
+function f({ steps: t, interval: c = 5, labels: l = {}, className: u }) {
+	let [d, f] = s(0), [p, m] = s(!1), h = t.length - 1;
+	o(() => {
+		if (!p) return;
+		let e = setTimeout(() => d >= h ? m(!1) : f(d + 1), c * 1e3);
+		return () => clearTimeout(e);
+	}, [
+		p,
+		d,
+		h,
+		c
+	]);
+	let g = t[d], _ = l.step?.(d + 1, t.length) ?? `Step ${d + 1} of ${t.length}`;
+	return /* @__PURE__ */ a("section", {
+		"aria-roledescription": "carousel",
+		"aria-label": t[0]?.title,
+		className: e("grid gap-4 rounded-lg border border-border bg-surface p-card font-sans", u),
+		children: [
+			g.media && /* @__PURE__ */ i("div", {
+				className: "overflow-hidden rounded-md bg-surface-muted [&>img]:w-full",
+				children: g.media
+			}),
+			/* @__PURE__ */ a("div", {
+				"aria-live": p ? "off" : "polite",
+				className: "grid gap-1.5",
+				children: [
+					/* @__PURE__ */ i("p", {
+						className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+						children: _
+					}),
+					/* @__PURE__ */ i("h3", {
+						className: "m-0 font-display text-lg font-bold text-fg",
+						children: g.title
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "text-sm text-fg-muted",
+						children: g.text
+					})
+				]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ i(r, { steps: t.map((e, t) => ({
+					label: e.title,
+					state: t < d ? "done" : t === d ? "current" : "upcoming"
+				})) }), /* @__PURE__ */ a("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ i(n, {
+							size: "sm",
+							variant: "ghost",
+							iconStart: "arrow-right",
+							className: "[&_svg]:rotate-180",
+							disabled: d === 0,
+							onClick: () => f(d - 1),
+							children: l.prev ?? "Previous"
+						}),
+						/* @__PURE__ */ i(n, {
+							size: "sm",
+							variant: "secondary",
+							iconStart: "play",
+							"aria-pressed": p,
+							onClick: () => m((e) => !e),
+							children: p ? l.pause ?? "Pause" : l.play ?? "Play"
+						}),
+						/* @__PURE__ */ i(n, {
+							size: "sm",
+							iconEnd: "arrow-right",
+							disabled: d === h,
+							onClick: () => f(d + 1),
+							children: l.next ?? "Next"
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { d as DeviceFrame, l as Note, c as Prose, f as StepCarousel };
+
+//# sourceMappingURL=content.js.map

package/dist/content/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":["Prose","Tag","rest","cx","className","Note","Icon","icon","FRAMES","DeviceFrame","f","device","StepCarousel","i","setI","useState","playing","setPlaying","last","steps","t","interval","step","stepLabel","labels","StepDots","s","n","Button","p"],"sources":["../../src/content/content.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type ElementType, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Button } from '../button/button';\nimport { StepDots } from '../stepper/step-dots';\n\n/* ---------------- Prose ---------------- */\n\n/**\n * Long-form typography for docs, terms and privacy: headings, lists with colored markers, links, quotes and a\n * readable measure (~68 characters). Wrap plain HTML or Markdown output in it.\n */\nexport function Prose({ as: Tag = 'div', className, ...rest }: HTMLAttributes<HTMLElement> & { as?: ElementType }) {\n  return (\n    <Tag\n      className={cx(\n        'max-w-[68ch] font-sans text-base leading-relaxed text-fg',\n        '[&>*+*]:mt-4 [&_h2]:mt-10 [&_h2]:font-display [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-balance',\n        '[&_h3]:mt-8 [&_h3]:font-display [&_h3]:text-lg [&_h3]:font-bold [&_h2+*]:mt-3 [&_h3+*]:mt-2',\n        '[&_ul]:list-disc [&_ol]:list-decimal [&_ul,&_ol]:pl-6 [&_li]:mt-1.5 [&_li]:marker:font-semibold [&_li]:marker:text-primary',\n        '[&_a]:font-medium [&_a]:text-link [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:no-underline',\n        '[&_strong]:font-semibold [&_code]:rounded-xs [&_code]:bg-surface-muted [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.9em]',\n        '[&_blockquote]:border-l-4 [&_blockquote]:border-accent [&_blockquote]:pl-4 [&_blockquote]:text-fg-muted [&_blockquote]:italic',\n        '[&_hr]:my-8 [&_hr]:border-border',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\n/* ---------------- Note ---------------- */\n\n/** One small line with an icon for disclaimers and formulas, under a section or the page. */\nexport function Note({\n  icon = 'info',\n  children,\n  className,\n}: {\n  icon?: IconName;\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <p className={cx('m-0 flex items-start gap-1.5 font-sans text-xs text-fg-muted', className)}>\n      <Icon name={icon} size={14} className=\"mt-px shrink-0\" />\n      <span>{children}</span>\n    </p>\n  );\n}\n\n/* ---------------- DeviceFrame ---------------- */\n\nconst FRAMES = {\n  phone: { outer: 'w-64 rounded-[2.25rem] p-2.5', screen: 'aspect-[9/19.5] rounded-[1.75rem]' },\n  tablet: { outer: 'w-full max-w-xl rounded-[1.75rem] p-3', screen: 'aspect-[4/3] rounded-[1.1rem]' },\n  // The screen is 92% of the base, so the base never overflows its container.\n  laptop: { outer: 'w-[92%] max-w-3xl rounded-t-xl p-2.5 pb-3', screen: 'aspect-[16/10] rounded-md' },\n};\n\n/** A phone, tablet or laptop frame around a screenshot or a live preview (product heroes, docs). */\nexport function DeviceFrame({\n  device = 'tablet',\n  children,\n  className,\n}: {\n  device?: 'phone' | 'tablet' | 'laptop';\n  children: ReactNode;\n  className?: string;\n}) {\n  const f = FRAMES[device];\n  return (\n    <div className={cx('mx-auto grid justify-items-center', device !== 'phone' && 'w-full', className)}>\n      <div className={cx('bg-surface-inverse shadow-overlay', f.outer)}>\n        <div className={cx('relative w-full overflow-hidden bg-bg [&>img]:size-full [&>img]:object-cover', f.screen)}>\n          {children}\n        </div>\n      </div>\n      {device === 'laptop' && (\n        <div aria-hidden=\"true\" className=\"h-3 w-full max-w-[calc(48rem/0.92)] rounded-b-xl bg-surface-inverse/85\" />\n      )}\n    </div>\n  );\n}\n\n/* ---------------- StepCarousel ---------------- */\n\nexport interface CarouselStep {\n  title: string;\n  text: ReactNode;\n  /** An illustration or screenshot. */\n  media?: ReactNode;\n}\n\nexport interface StepCarouselProps {\n  steps: CarouselStep[];\n  /** Seconds per step while playing. */\n  interval?: number;\n  labels?: { step?: (n: number, total: number) => string; prev?: string; next?: string; play?: string; pause?: string };\n  className?: string;\n}\n\n/**\n * A guided walkthrough: illustration, \"Step 1 of 6\", title, text, step dots and Previous / Play / Next. Play advances\n * on a timer and never starts on its own; with reduced motion the change is instant.\n */\nexport function StepCarousel({ steps, interval = 5, labels = {}, className }: StepCarouselProps) {\n  const [i, setI] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const last = steps.length - 1;\n  useEffect(() => {\n    if (!playing) return;\n    const t = setTimeout(() => (i >= last ? setPlaying(false) : setI(i + 1)), interval * 1000);\n    return () => clearTimeout(t);\n  }, [playing, i, last, interval]);\n  const step = steps[i]!;\n  const stepLabel = labels.step?.(i + 1, steps.length) ?? `Step ${i + 1} of ${steps.length}`;\n  return (\n    <section\n      aria-roledescription=\"carousel\"\n      aria-label={steps[0]?.title}\n      className={cx('grid gap-4 rounded-lg border border-border bg-surface p-card font-sans', className)}\n    >\n      {step.media && <div className=\"overflow-hidden rounded-md bg-surface-muted [&>img]:w-full\">{step.media}</div>}\n      <div aria-live={playing ? 'off' : 'polite'} className=\"grid gap-1.5\">\n        <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">{stepLabel}</p>\n        <h3 className=\"m-0 font-display text-lg font-bold text-fg\">{step.title}</h3>\n        <div className=\"text-sm text-fg-muted\">{step.text}</div>\n      </div>\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <StepDots\n          steps={steps.map((s, n) => ({ label: s.title, state: n < i ? 'done' : n === i ? 'current' : 'upcoming' }))}\n        />\n        <div className=\"flex items-center gap-2\">\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            iconStart=\"arrow-right\"\n            className=\"[&_svg]:rotate-180\"\n            disabled={i === 0}\n            onClick={() => setI(i - 1)}\n          >\n            {labels.prev ?? 'Previous'}\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            iconStart=\"play\"\n            aria-pressed={playing}\n            onClick={() => setPlaying((p) => !p)}\n          >\n            {playing ? (labels.pause ?? 'Pause') : (labels.play ?? 'Play')}\n          </Button>\n          <Button size=\"sm\" iconEnd=\"arrow-right\" disabled={i === last} onClick={() => setI(i + 1)}>\n            {labels.next ?? 'Next'}\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/data-display/avatar-sizes.d.ts

@@ -0,0 +1,8 @@
+/** Avatar box sizes, shared by the client `Avatar` and the server-safe `AvatarGroup`. */
+export declare const AV_SIZE: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/dist/data-display/avatar-sizes.js

@@ -0,0 +1,12 @@
+//#region src/data-display/avatar-sizes.ts
+var e = {
+	xs: "size-6 text-[10px]",
+	sm: "size-8 text-xs",
+	md: "size-10 text-sm",
+	lg: "size-14 text-lg",
+	xl: "size-20 text-2xl"
+};
+//#endregion
+export { e as AV_SIZE };
+
+//# sourceMappingURL=avatar-sizes.js.map

package/dist/data-display/avatar-sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-sizes.js","names":["AV_SIZE"],"sources":["../../src/data-display/avatar-sizes.ts"],"sourcesContent":["/** Avatar box sizes, shared by the client `Avatar` and the server-safe `AvatarGroup`. */\nexport const AV_SIZE = {\n  xs: 'size-6 text-[10px]',\n  sm: 'size-8 text-xs',\n  md: 'size-10 text-sm',\n  lg: 'size-14 text-lg',\n  xl: 'size-20 text-2xl',\n};\n"],"mappings":";AACA,IAAaA,IAAU;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/data-display/avatar.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from 'react';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    src?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Presence dot. */
+    status?: 'online' | 'away' | 'offline';
+    /**
+     * Custom status dot (e.g. a person's day: Working, Paused, Day done). Any CSS color, usually
+     * `var(--kf-category-N)`. Needs `statusLabel`, which is added to the accessible name.
+     */
+    statusColor?: string;
+    statusLabel?: string;
+    /**
+     * Hidden from screen readers when the name is already text next to it (lists, menus, cards), so it is not read
+     * twice and it may sit inside roles that don't allow images (`role="menu"`).
+     */
+    decorative?: boolean;
+}
+/** Photo, initials, or a person icon when there is no name. */
+export declare function Avatar({ name, src, size, status, statusColor, statusLabel, decorative, className, ...rest }: AvatarProps): import("react").JSX.Element;

package/dist/data-display/avatar.js

@@ -0,0 +1,53 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { AV_SIZE as n } from "./avatar-sizes.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+//#region src/data-display/avatar.tsx
+var o = {
+	xs: 14,
+	sm: 18,
+	md: 22,
+	lg: 30,
+	xl: 44
+}, s = (e) => e.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0].toUpperCase()).join("");
+function c({ name: c, src: l, size: u = "md", status: d, statusColor: f, statusLabel: p, decorative: m, className: h, ...g }) {
+	let [_, v] = a(!1), y = l && !_;
+	return /* @__PURE__ */ i("span", {
+		...m ? { "aria-hidden": !0 } : {
+			role: "img",
+			"aria-label": p ? `${c}, ${p}` : c
+		},
+		className: e("relative inline-grid shrink-0 place-items-center rounded-full bg-info-surface font-sans font-bold text-info-fg", n[u], h),
+		...g,
+		children: [
+			y ? /* @__PURE__ */ r("img", {
+				src: l,
+				alt: "",
+				onError: () => v(!0),
+				className: "size-full rounded-full object-cover"
+			}) : c ? /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				children: s(c)
+			}) : /* @__PURE__ */ r(t, {
+				name: "user",
+				size: o[u],
+				className: "text-primary"
+			}),
+			f && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "absolute right-0 bottom-0 size-[28%] min-w-2 rounded-full ring-2 ring-bg",
+				style: { background: f }
+			}),
+			d && !f && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: e("absolute right-0 bottom-0 size-[28%] min-w-2 rounded-full ring-2 ring-bg", d === "online" ? "bg-success-icon" : d === "away" ? "bg-warning-icon" : "bg-fg-muted")
+			})
+		]
+	});
+}
+//#endregion
+export { c as Avatar };
+
+//# sourceMappingURL=avatar.js.map

package/dist/data-display/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["AV_ICON","initials","name","p","Avatar","rest","failed","setFailed","useState","showImg","src","decorative","statusLabel","cx","AV_SIZE","size","className","Icon","statusColor","status"],"sources":["../../src/data-display/avatar.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type HTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon } from '../icon/icon';\nimport { AV_SIZE } from './avatar-sizes';\n\n/* ---------------- Avatar ---------------- */\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  name: string;\n  src?: string;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Presence dot. */\n  status?: 'online' | 'away' | 'offline';\n  /**\n   * Custom status dot (e.g. a person's day: Working, Paused, Day done). Any CSS color, usually\n   * `var(--kf-category-N)`. Needs `statusLabel`, which is added to the accessible name.\n   */\n  statusColor?: string;\n  statusLabel?: string;\n  /**\n   * Hidden from screen readers when the name is already text next to it (lists, menus, cards), so it is not read\n   * twice and it may sit inside roles that don't allow images (`role=\"menu\"`).\n   */\n  decorative?: boolean;\n}\n\nconst AV_ICON = { xs: 14, sm: 18, md: 22, lg: 30, xl: 44 };\n\nconst initials = (name: string) =>\n  name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((p) => p[0]!.toUpperCase())\n    .join('');\n\n/** Photo, initials, or a person icon when there is no name. */\nexport function Avatar({ name, src, size = 'md', status, statusColor, statusLabel, decorative, className, ...rest }: AvatarProps) {\n  const [failed, setFailed] = useState(false);\n  const showImg = src && !failed;\n  return (\n    <span\n      {...(decorative ? { 'aria-hidden': true } : { role: 'img', 'aria-label': statusLabel ? `${name}, ${statusLabel}` : name })}\n      className={cx(\n        'relative inline-grid shrink-0 place-items-center rounded-full bg-info-surface font-sans font-bold text-info-fg',\n        AV_SIZE[size],\n        className,\n      )}\n      {...rest}\n    >\n      {showImg ? (\n        <img src={src} alt=\"\" onError={() => setFailed(true)} className=\"size-full rounded-full object-cover\" />\n      ) : name ? (\n        <span aria-hidden=\"true\">{initials(name)}</span>\n      ) : (\n        <Icon name=\"user\" size={AV_ICON[size]} className=\"text-primary\" />\n      )}\n      {statusColor && (\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute right-0 bottom-0 size-[28%] min-w-2 rounded-full ring-2 ring-bg\"\n          style={{ background: statusColor }}\n        />\n      )}\n      {status && !statusColor && (\n        <span\n          aria-hidden=\"true\"\n          className={cx(\n            'absolute right-0 bottom-0 size-[28%] min-w-2 rounded-full ring-2 ring-bg',\n            status === 'online' ? 'bg-success-icon' : status === 'away' ? 'bg-warning-icon' : 'bg-fg-muted',\n          )}\n        />\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;AA4BA,IAAMA,IAAU;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG,GAEnDC,KAAY,MAChBC,EACG,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,MAAMC,EAAE,EAAE,CAAE,YAAY,CAAC,CAAC,CAC/B,KAAK,EAAE;AAGZ,SAAgBC,EAAO,EAAE,SAAM,QAAK,UAAO,MAAM,WAAQ,gBAAa,gBAAa,eAAY,cAAW,GAAGC,KAAqB;CAChI,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK,GACpCC,IAAUC,KAAO,CAACJ;CACxB,OACE,kBAAC,QAAD;EACE,GAAKK,IAAa,EAAE,eAAe,GAAK,IAAI;GAAE,MAAM;GAAO,cAAcC,IAAc,GAAGV,EAAK,IAAIU,MAAgBV;EAAK;EACxH,WAAWW,EACT,kHACAC,EAAQC,IACRC,CACF;EACA,GAAIX;EAPN,UAAA;GASGI,IACC,kBAAC,OAAD;IAAU;IAAK,KAAI;IAAG,eAAeF,EAAU,EAAI;IAAG,WAAU;GAAuC,CAAA,IACrGL,IACF,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAD,EAASC,CAAI;GAAQ,CAAA,IAE/C,kBAACe,GAAD;IAAM,MAAK;IAAO,MAAMjB,EAAQe;IAAO,WAAU;GAAgB,CAAA;GAElEG,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,YAAYA,EAAY;GAClC,CAAA;GAEFC,KAAU,CAACD,KACV,kBAAC,QAAD;IACE,eAAY;IACZ,WAAWL,EACT,4EACAM,MAAW,WAAW,oBAAoBA,MAAW,SAAS,oBAAoB,aACpF;GACD,CAAA;EAEC;;AAEV"}

package/dist/data-display/chip.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { type IconName } from '../icon/icon';
+export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** Toggle chip (filters): `aria-pressed`. */
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    icon?: IconName;
+    /** Count shown at the end. */
+    count?: number;
+    /** Shows a remove button instead of toggling (applied filters). */
+    onRemove?: () => void;
+    removeLabel?: string;
+    /**
+     * Category color for filter toggles (calendar event types, tags): a dot before the label, and the
+     * pressed chip is tinted with it. Any CSS color, usually `var(--kf-category-N)`.
+     */
+    color?: string;
+}
+/** Filter chip. Toggle with `pressed`, or removable with `onRemove`. */
+export declare function Chip({ pressed, onPressedChange, icon, count, onRemove, removeLabel, color, className, children, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/data-display/chip.js

@@ -0,0 +1,64 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/data-display/chip.tsx
+function a({ pressed: a, onPressedChange: o, icon: s, count: c, onRemove: l, removeLabel: u = "Remove", color: d, className: f, children: p, ...m }) {
+	let h = d ? /* @__PURE__ */ r("span", {
+		"aria-hidden": "true",
+		className: "size-2.5 shrink-0 rounded-full",
+		style: { background: d }
+	}) : null, g = "inline-flex min-h-8 items-center gap-1.5 rounded-full border font-sans text-sm font-semibold transition-colors pointer-coarse:min-h-10";
+	return l ? /* @__PURE__ */ i("span", {
+		className: e(g, "border-primary bg-info-surface pr-1 pl-3 text-info-fg", f),
+		children: [
+			h,
+			s && /* @__PURE__ */ r(t, {
+				name: s,
+				size: 16
+			}),
+			p,
+			/* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": `${u} ${typeof p == "string" ? p : ""}`.trim(),
+				onClick: l,
+				className: "grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current hover:bg-bg focus-visible:outline-2 focus-visible:outline-focus",
+				children: /* @__PURE__ */ r(n, {
+					name: "close",
+					size: 12
+				})
+			})
+		]
+	}) : /* @__PURE__ */ i("button", {
+		type: "button",
+		"aria-pressed": a,
+		onClick: () => o?.(!a),
+		className: e(g, "cursor-pointer px-3 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", d ? a ? "border-(--kf-chip) bg-[color-mix(in_oklab,var(--kf-chip),transparent_82%)] text-fg" : "border-border bg-surface text-fg hover:border-fg-muted/50" : a ? "border-primary bg-primary text-on-primary" : "border-border bg-surface text-fg hover:border-fg-muted/50", f),
+		...m,
+		style: d ? {
+			"--kf-chip": d,
+			...m.style
+		} : m.style,
+		children: [
+			a && /* @__PURE__ */ r(n, {
+				name: "check",
+				size: 14
+			}),
+			h,
+			s && /* @__PURE__ */ r(t, {
+				name: s,
+				size: 16
+			}),
+			p,
+			c !== void 0 && /* @__PURE__ */ r("span", {
+				className: e("tabular-nums", a ? "opacity-80" : "text-fg-muted"),
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+export { a as Chip };
+
+//# sourceMappingURL=chip.js.map

package/dist/data-display/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":["Chip","rest","dot","color","base","onRemove","cx","className","icon","Icon","children","removeLabel","Glyph","pressed","onPressedChange","count"],"sources":["../../src/data-display/chip.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonHTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\n\n/* ---------------- Chip ---------------- */\n\nexport interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  /** Toggle chip (filters): `aria-pressed`. */\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  icon?: IconName;\n  /** Count shown at the end. */\n  count?: number;\n  /** Shows a remove button instead of toggling (applied filters). */\n  onRemove?: () => void;\n  removeLabel?: string;\n  /**\n   * Category color for filter toggles (calendar event types, tags): a dot before the label, and the\n   * pressed chip is tinted with it. Any CSS color, usually `var(--kf-category-N)`.\n   */\n  color?: string;\n}\n\n/** Filter chip. Toggle with `pressed`, or removable with `onRemove`. */\nexport function Chip({\n  pressed,\n  onPressedChange,\n  icon,\n  count,\n  onRemove,\n  removeLabel = 'Remove',\n  color,\n  className,\n  children,\n  ...rest\n}: ChipProps) {\n  const dot = color ? <span aria-hidden=\"true\" className=\"size-2.5 shrink-0 rounded-full\" style={{ background: color }} /> : null;\n  const base =\n    'inline-flex min-h-8 items-center gap-1.5 rounded-full border font-sans text-sm font-semibold transition-colors pointer-coarse:min-h-10';\n  if (onRemove) {\n    return (\n      <span className={cx(base, 'border-primary bg-info-surface pr-1 pl-3 text-info-fg', className)}>\n        {dot}\n        {icon && <Icon name={icon} size={16} />}\n        {children}\n        <button\n          type=\"button\"\n          aria-label={`${removeLabel} ${typeof children === 'string' ? children : ''}`.trim()}\n          onClick={onRemove}\n          className=\"grid size-6 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current hover:bg-bg focus-visible:outline-2 focus-visible:outline-focus\"\n        >\n          <Glyph name=\"close\" size={12} />\n        </button>\n      </span>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      onClick={() => onPressedChange?.(!pressed)}\n      className={cx(\n        base,\n        'cursor-pointer px-3 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n        // A colored chip stays readable in both themes: tinted surface and border, regular text color.\n        color\n          ? pressed\n            ? 'border-(--kf-chip) bg-[color-mix(in_oklab,var(--kf-chip),transparent_82%)] text-fg'\n            : 'border-border bg-surface text-fg hover:border-fg-muted/50'\n          : pressed\n            ? 'border-primary bg-primary text-on-primary'\n            : 'border-border bg-surface text-fg hover:border-fg-muted/50',\n        className,\n      )}\n      {...rest}\n      style={color ? { ['--kf-chip' as string]: color, ...rest.style } : rest.style}\n    >\n      {pressed && <Glyph name=\"check\" size={14} />}\n      {dot}\n      {icon && <Icon name={icon} size={16} />}\n      {children}\n      {count !== undefined && (\n        <span className={cx('tabular-nums', pressed ? 'opacity-80' : 'text-fg-muted')}>{count}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgBA,EAAK,EACnB,YACA,oBACA,SACA,UACA,aACA,iBAAc,UACd,UACA,cACA,aACA,GAAGC,KACS;CACZ,IAAMC,IAAMC,IAAQ,kBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAiC,OAAO,EAAE,YAAYA,EAAM;CAAI,CAAA,IAAI,MACrHC,IACJ;CAkBF,OAjBIC,IAEA,kBAAC,QAAD;EAAM,WAAWC,EAAGF,GAAM,yDAAyDG,CAAS;EAA5F,UAAA;GACGL;GACAM,KAAQ,kBAACC,GAAD;IAAM,MAAMD;IAAM,MAAM;GAAK,CAAA;GACrCE;GACD,kBAAC,UAAD;IACE,MAAK;IACL,cAAY,GAAGC,EAAY,GAAG,OAAOD,KAAa,WAAWA,IAAW,KAAK,KAAK;IAClF,SAASL;IACT,WAAU;IAEV,UAAA,kBAACO,GAAD;KAAO,MAAK;KAAQ,MAAM;IAAK,CAAA;GACzB,CAAA;EACJ;C,KAIR,kBAAC,UAAD;EACE,MAAK;EACL,gBAAcC;EACd,eAAeC,IAAkB,CAACD,CAAO;EACzC,WAAWP,EACTF,GACA,0GAEAD,IACIU,IACE,uFACA,8DACFA,IACE,8CACA,6DACNN,CACF;EACA,GAAIN;EACJ,OAAOE,IAAQ;GAAG,aAAwBA;GAAO,GAAGF,EAAK;EAAM,IAAIA,EAAK;EAlB1E,UAAA;GAoBGY,KAAW,kBAACD,GAAD;IAAO,MAAK;IAAQ,MAAM;GAAK,CAAA;GAC1CV;GACAM,KAAQ,kBAACC,GAAD;IAAM,MAAMD;IAAM,MAAM;GAAK,CAAA;GACrCE;GACAK,MAAU,KAAA,KACT,kBAAC,QAAD;IAAM,WAAWT,EAAG,gBAAgBO,IAAU,eAAe,eAAe;IAAI,UAAAE;GAAY,CAAA;EAExF;;AAEZ"}

package/dist/data-display/code-block.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+    code: string;
+    /** Shown in the header (`bash`, `json`, `tsx`). */
+    language?: string;
+    /** File name or title in the header. */
+    title?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    /** Show line numbers. */
+    lineNumbers?: boolean;
+}
+/** Code sample with copy button. Light, dependency-free: no syntax highlighting by design. */
+export declare function CodeBlock({ code, language, title, copyLabel, copiedLabel, lineNumbers, className, ...rest }: CodeBlockProps): import("react").JSX.Element;

package/dist/data-display/code-block.js

@@ -0,0 +1,50 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+//#region src/data-display/code-block.tsx
+function a({ code: a, language: o, title: s, copyLabel: c = "Copy", copiedLabel: l = "Copied", lineNumbers: u, className: d, ...f }) {
+	let [p, m] = i(!1), h = async () => {
+		try {
+			await navigator.clipboard.writeText(a), m(!0), setTimeout(() => m(!1), 1800);
+		} catch {}
+	}, g = a.replace(/\n$/, "").split("\n");
+	return /* @__PURE__ */ r("div", {
+		className: e("overflow-hidden rounded-md border border-border bg-surface-muted font-sans", d),
+		...f,
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-center justify-between gap-3 border-b border-border px-4 py-1.5",
+			children: [/* @__PURE__ */ n("span", {
+				className: "font-mono text-xs text-fg-muted",
+				children: s ?? o
+			}), /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: h,
+				className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full border-0 bg-transparent px-2.5 py-1 text-xs font-semibold text-fg-muted hover:bg-bg hover:text-fg focus-visible:outline-3 focus-visible:outline-focus",
+				children: [/* @__PURE__ */ n(t, {
+					name: p ? "check" : "columns",
+					size: 14
+				}), /* @__PURE__ */ n("span", {
+					"aria-live": "polite",
+					children: p ? l : c
+				})]
+			})]
+		}), /* @__PURE__ */ n("pre", {
+			tabIndex: 0,
+			className: "m-0 overflow-x-auto p-4 font-mono text-[13px] leading-relaxed text-fg focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus",
+			children: /* @__PURE__ */ n("code", { children: u ? g.map((e, t) => /* @__PURE__ */ r("span", {
+				className: "block",
+				children: [/* @__PURE__ */ n("span", {
+					"aria-hidden": "true",
+					className: "mr-4 inline-block w-6 text-right text-fg-muted/70 select-none",
+					children: t + 1
+				}), e]
+			}, t)) : a })
+		})]
+	});
+}
+//#endregion
+export { a as CodeBlock };
+
+//# sourceMappingURL=code-block.js.map

package/dist/data-display/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","names":["CodeBlock","rest","copied","setCopied","useState","copy","code","lines","cx","className","title","language","Glyph","copiedLabel","copyLabel","lineNumbers","i","l"],"sources":["../../src/data-display/code-block.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type HTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\n\n/* ---------------- CodeBlock ---------------- */\n\nexport interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {\n  code: string;\n  /** Shown in the header (`bash`, `json`, `tsx`). */\n  language?: string;\n  /** File name or title in the header. */\n  title?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n  /** Show line numbers. */\n  lineNumbers?: boolean;\n}\n\n/** Code sample with copy button. Light, dependency-free: no syntax highlighting by design. */\nexport function CodeBlock({\n  code,\n  language,\n  title,\n  copyLabel = 'Copy',\n  copiedLabel = 'Copied',\n  lineNumbers,\n  className,\n  ...rest\n}: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1800);\n    } catch {\n      /* clipboard blocked: the text stays selectable */\n    }\n  };\n  const lines = code.replace(/\\n$/, '').split('\\n');\n  return (\n    <div\n      className={cx('overflow-hidden rounded-md border border-border bg-surface-muted font-sans', className)}\n      {...rest}\n    >\n      <div className=\"flex items-center justify-between gap-3 border-b border-border px-4 py-1.5\">\n        <span className=\"font-mono text-xs text-fg-muted\">{title ?? language}</span>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border-0 bg-transparent px-2.5 py-1 text-xs font-semibold text-fg-muted hover:bg-bg hover:text-fg focus-visible:outline-3 focus-visible:outline-focus\"\n        >\n          <Glyph name={copied ? 'check' : 'columns'} size={14} />\n          <span aria-live=\"polite\">{copied ? copiedLabel : copyLabel}</span>\n        </button>\n      </div>\n      <pre\n        tabIndex={0}\n        className=\"m-0 overflow-x-auto p-4 font-mono text-[13px] leading-relaxed text-fg focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus\"\n      >\n        <code>\n          {lineNumbers\n            ? lines.map((l, i) => (\n                <span key={i} className=\"block\">\n                  <span aria-hidden=\"true\" className=\"mr-4 inline-block w-6 text-right text-fg-muted/70 select-none\">\n                    {i + 1}\n                  </span>\n                  {l}\n                </span>\n              ))\n            : code}\n        </code>\n      </pre>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqBA,SAAgBA,EAAU,EACxB,SACA,aACA,UACA,eAAY,QACZ,iBAAc,UACd,gBACA,cACA,GAAGC,KACc;CACjB,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK,GACpCC,IAAO,YAAY;EACvB,IAAI;GAGF,AAFA,MAAM,UAAU,UAAU,UAAUC,CAAI,GACxCH,EAAU,EAAI,GACd,iBAAiBA,EAAU,EAAK,GAAG,IAAI;EACzC,QAAQ,CAER;CACF,GACMI,IAAQD,EAAK,QAAQ,OAAO,EAAE,CAAC,CAAC,MAAM,IAAI;CAChD,OACE,kBAAC,OAAD;EACE,WAAWE,EAAG,8EAA8EC,CAAS;EACrG,GAAIR;EAFN,UAAA,CAIE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAmC,UAAAS,KAASC;GAAe,CAAA,GAC3E,kBAAC,UAAD;IACE,MAAK;IACL,SAASN;IACT,WAAU;IAHZ,UAAA,CAKE,kBAACO,GAAD;KAAO,MAAMV,IAAS,UAAU;KAAW,MAAM;IAAK,CAAA,GACtD,kBAAC,QAAD;KAAM,aAAU;KAAU,UAAAA,IAASW,IAAcC;IAAgB,CAAA,CAC3D;GACL,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,OAAD;GACE,UAAU;GACV,WAAU;GAEV,UAAA,kBAAC,QAAD,EAAA,UACGC,IACGR,EAAM,KAAK,GAAG,MACZ,kBAAC,QAAD;IAAc,WAAU;IAAxB,UAAA,CACE,kBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAChC,UAAAS,IAAI;IACD,CAAA,GACLC,CACG;GALK,GAAAD,CAKL,CACP,IACDV,EACA,CAAA;EACH,CAAA,CACF;;AAET"}

package/dist/data-display/data-display.d.ts

@@ -0,0 +1,73 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+import { type AvatarProps } from './avatar';
+export interface SparklineProps extends Omit<HTMLAttributes<SVGSVGElement>, 'children'> {
+    data: number[];
+    /** Accessible summary, e.g. "Runs per day, last 14 days: rising from 120 to 310". */
+    label: string;
+    height?: number;
+    tone?: 'primary' | 'accent' | 'success' | 'danger';
+    /** Fill the area under the line. */
+    area?: boolean;
+}
+/** Dependency-free trend line for KPI tiles. For full charts use LineChart, AreaChart, BarChart, DonutChart. */
+export declare function Sparkline({ data, label, height, tone, area, className, ...rest }: SparklineProps): import("react").JSX.Element | null;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    max?: number;
+    size?: AvatarProps['size'];
+    /** Accessible summary, e.g. "5 members". Defaults to the names. */
+    label?: string;
+}
+export declare function AvatarGroup({ people, max, size, label, className, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Neutral metadata label (technology, category). For status use `Badge`. */
+    children: ReactNode;
+    icon?: IconName;
+}
+export declare function Tag({ icon, className, children, ...rest }: TagProps): import("react").JSX.Element;
+export interface TimelineItem {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Label at the start (year, time). */
+    time?: ReactNode;
+    icon?: IconName;
+    tone?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+}
+/** Vertical sequence of events: company history (years), run logs, activity. */
+export declare function Timeline({ items, className }: {
+    items: TimelineItem[];
+    className?: string;
+}): import("react").JSX.Element;
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    items: {
+        term: ReactNode;
+        description: ReactNode;
+    }[];
+    /** `stacked` (term above), `inline` (term | value columns from sm), `grid` (2–3 columns of pairs). */
+    layout?: 'stacked' | 'inline' | 'grid';
+}
+/** Key/value details for record pages (workflow settings, invoice data). */
+export declare function DescriptionList({ items, layout, className, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export interface FlowStep {
+    id: string;
+    label: ReactNode;
+    /** App or system ("Gmail", "AI", "QuickBooks"). */
+    meta?: ReactNode;
+    icon?: IconName;
+    kind?: 'trigger' | 'action' | 'ai' | 'output';
+}
+/**
+ * Static automation flow for case studies and the Blueprint tool. `responsive` (default): left to
+ * right from 960px, top to bottom below. Use `vertical` in narrow containers. The interactive
+ * editor (React Flow) needs its own ADR.
+ */
+export declare function FlowDiagram({ steps, label, orientation, className, }: {
+    steps: FlowStep[];
+    label: string;
+    orientation?: 'responsive' | 'vertical' | 'horizontal';
+    className?: string;
+}): import("react").JSX.Element;