@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/templates/app-templates.js

@@ -0,0 +1,153 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { AppShell as t } from "../app-shell/app-shell.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/templates/app-templates.tsx
+function a({ logo: e, role: a, notifications: o, account: s, workspace: c, nav: l, footer: u, floating: d, children: f, className: p }) {
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, {
+		layout: "topbar",
+		brand: e,
+		className: p,
+		header: /* @__PURE__ */ i(n, { children: [
+			a && /* @__PURE__ */ r("span", {
+				className: "hidden sm:inline-flex",
+				children: a
+			}),
+			o,
+			s
+		] }),
+		nav: l || c ? /* @__PURE__ */ i("div", {
+			className: "grid gap-4",
+			children: [c, l]
+		}) : void 0,
+		footer: u,
+		children: f
+	}), d] });
+}
+var o = "grid min-w-0 content-start gap-6";
+function s({ header: t, metrics: n, main: a, aside: s, children: c, className: l }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, l),
+		children: [
+			t,
+			n && /* @__PURE__ */ r("div", {
+				className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4",
+				children: n
+			}),
+			(a || s) && /* @__PURE__ */ i("div", {
+				className: "grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]",
+				children: [a && /* @__PURE__ */ r("div", {
+					className: o,
+					children: a
+				}), s && /* @__PURE__ */ r("div", {
+					className: o,
+					children: s
+				})]
+			}),
+			c
+		]
+	});
+}
+function c({ header: t, toolbar: n, children: r, className: a }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, a),
+		children: [
+			t,
+			n,
+			r
+		]
+	});
+}
+function l({ header: t, filters: n, metrics: a, children: s, className: c }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, c),
+		children: [
+			t,
+			n,
+			a && /* @__PURE__ */ r("div", {
+				className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4",
+				children: a
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "grid gap-6 lg:grid-cols-2",
+				children: s
+			})
+		]
+	});
+}
+function u({ header: t, calendar: n, summaryHeader: a, summary: s, className: c }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, c),
+		children: [
+			t,
+			n,
+			(a || s) && /* @__PURE__ */ i("section", {
+				className: "grid gap-4",
+				children: [a, s && /* @__PURE__ */ r("div", {
+					className: "grid gap-6 lg:grid-cols-2",
+					children: s
+				})]
+			})
+		]
+	});
+}
+function d({ header: t, nav: n, tabs: a, children: s, className: c }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, c),
+		children: [t, /* @__PURE__ */ i("div", {
+			className: "grid gap-6 md:grid-cols-[var(--spacing-subnav)_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ r("div", {
+				className: "md:sticky md:top-[calc(var(--spacing-appbar)+1.5rem)] md:self-start",
+				children: n
+			}), /* @__PURE__ */ i("div", {
+				className: e(o, "max-w-form"),
+				children: [a, s]
+			})]
+		})]
+	});
+}
+function f({ header: t, children: n, className: r }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, r),
+		children: [t, n]
+	});
+}
+function p({ back: t, profile: n, tabs: a, children: s, aside: c, className: l }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, l),
+		children: [
+			t,
+			n,
+			a,
+			/* @__PURE__ */ i("div", {
+				className: e("grid gap-6", !!c && "lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]"),
+				children: [/* @__PURE__ */ r("div", {
+					className: o,
+					children: s
+				}), c && /* @__PURE__ */ r("div", {
+					className: o,
+					children: c
+				})]
+			})
+		]
+	});
+}
+function m({ header: t, children: n, aside: a, className: s }) {
+	return /* @__PURE__ */ i("div", {
+		className: e(o, "mx-auto w-full max-w-5xl", s),
+		children: [t, /* @__PURE__ */ i("div", {
+			className: e("grid gap-6", !!a && "lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]"),
+			children: [/* @__PURE__ */ r("div", {
+				className: o,
+				children: n
+			}), a && /* @__PURE__ */ r("div", {
+				className: o,
+				children: a
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as AccountPage, a as AppLayout, u as CalendarPage, s as DashboardPage, c as ListPage, f as MasterDetailPage, p as ProfilePage, l as ReportPage, d as SettingsPage };
+
+//# sourceMappingURL=app-templates.js.map

package/dist/templates/app-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-templates.js","names":["_Fragment","AppLayout","Fragment","AppShell","logo","role","notifications","account","nav","workspace","floating","stack","DashboardPage","cx","className","header","metrics","main","aside","children","ListPage","toolbar","ReportPage","filters","CalendarPage","calendar","summaryHeader","summary","SettingsPage","tabs","MasterDetailPage","ProfilePage","back","profile","AccountPage"],"sources":["../../src/templates/app-templates.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { AppShell } from '../app-shell/app-shell';\n\n/*\n * Dashboard templates (ADR-0013). They only arrange slots: every product passes its own components\n * (PageHeader, MetricCard, DataTable…), so pages share one shape without sharing data or logic.\n */\n\n/* ---------------- AppLayout ---------------- */\n\nexport interface AppLayoutProps {\n  /** `ProductLogo` in a link to the dashboard home. */\n  logo: ReactNode;\n  /** The user's role (\"Administrator\"), shown as a badge in the top bar from 640px. */\n  role?: ReactNode;\n  /** Notifications button (`NotificationCenter`). */\n  notifications?: ReactNode;\n  /** `AccountMenu`. */\n  account: ReactNode;\n  /** `WorkspaceSwitcher` above the navigation. */\n  workspace?: ReactNode;\n  /** `SideNav`. Omit for pages without a sidebar (account settings). */\n  nav?: ReactNode;\n  /** `AppFooter`. */\n  footer?: ReactNode;\n  /** `FloatingActions` (the assistant button). */\n  floating?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * The one dashboard layout for every product: top bar (logo, role, notifications, account), sidebar (workspace +\n * navigation), content and a slim footer, plus the floating assistant. Built on `AppShell layout=\"topbar\"`.\n */\nexport function AppLayout({\n  logo,\n  role,\n  notifications,\n  account,\n  workspace,\n  nav,\n  footer,\n  floating,\n  children,\n  className,\n}: AppLayoutProps) {\n  return (\n    <>\n      <AppShell\n        layout=\"topbar\"\n        brand={logo}\n        className={className}\n        header={\n          <>\n            {role && <span className=\"hidden sm:inline-flex\">{role}</span>}\n            {notifications}\n            {account}\n          </>\n        }\n        nav={\n          nav || workspace ? (\n            <div className=\"grid gap-4\">\n              {workspace}\n              {nav}\n            </div>\n          ) : undefined\n        }\n        footer={footer}\n      >\n        {children}\n      </AppShell>\n      {floating}\n    </>\n  );\n}\n\n/* ---------------- Page templates ---------------- */\n\nconst stack = 'grid min-w-0 content-start gap-6';\n\nexport interface DashboardPageProps {\n  /**\n   * `PageHeader`. With page tabs, render the header (with its `TabsList`) above and this page inside the active\n   * `TabsContent`, without `header`, so each tab controls a real panel.\n   */\n  header?: ReactNode;\n  /** A row of `MetricCard`s. */\n  metrics?: ReactNode;\n  /** The wide column (2/3): charts and lists. */\n  main?: ReactNode;\n  /** The narrow column (1/3): tasks, activity. */\n  aside?: ReactNode;\n  /** Full-width content below the columns. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Overview: header, a row of metrics, then a 2/3 + 1/3 grid of cards and full-width content. */\nexport function DashboardPage({ header, metrics, main, aside, children, className }: DashboardPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      {metrics && <div className=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">{metrics}</div>}\n      {(main || aside) && (\n        <div className=\"grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]\">\n          {main && <div className={stack}>{main}</div>}\n          {aside && <div className={stack}>{aside}</div>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface ListPageProps {\n  header?: ReactNode;\n  /** Underline `Tabs` or a `SectionHeader` above the table. */\n  toolbar?: ReactNode;\n  /** The `DataTable`. */\n  children: ReactNode;\n  className?: string;\n}\n\n/** A list of records: header, optional section header or tabs, the table. */\nexport function ListPage({ header, toolbar, children, className }: ListPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      {toolbar}\n      {children}\n    </div>\n  );\n}\n\nexport interface ReportPageProps {\n  header?: ReactNode;\n  /** `FilterBar`. */\n  filters?: ReactNode;\n  metrics?: ReactNode;\n  /** Charts, two per row from 1024px. */\n  children: ReactNode;\n  className?: string;\n}\n\n/** Reports: header, filters, a row of metrics and charts in a two-column grid. */\nexport function ReportPage({ header, filters, metrics, children, className }: ReportPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      {filters}\n      {metrics && <div className=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">{metrics}</div>}\n      <div className=\"grid gap-6 lg:grid-cols-2\">{children}</div>\n    </div>\n  );\n}\n\nexport interface CalendarPageProps {\n  /** `PageHeader` (with tabs when the calendar is one view of a module). */\n  header?: ReactNode;\n  /** `EventCalendar`, with its side panel in `aside`. */\n  calendar: ReactNode;\n  /** Summary under the calendar: a heading row with period presets (`SectionHeader` + `SegmentedControl`). */\n  summaryHeader?: ReactNode;\n  /** Summary cards (`StatGrid`, `RankedList`, charts), two per row from 1024px. */\n  summary?: ReactNode;\n  className?: string;\n}\n\n/** Calendar (ADR-0016): header, the calendar with its side panel, and a full-width summary below. */\nexport function CalendarPage({ header, calendar, summaryHeader, summary, className }: CalendarPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      {calendar}\n      {(summaryHeader || summary) && (\n        <section className=\"grid gap-4\">\n          {summaryHeader}\n          {summary && <div className=\"grid gap-6 lg:grid-cols-2\">{summary}</div>}\n        </section>\n      )}\n    </div>\n  );\n}\n\nexport interface SettingsPageProps {\n  header?: ReactNode;\n  /** Secondary navigation (`SideNav appearance=\"solid\"`), `--kf-subnav-width` wide. */\n  nav: ReactNode;\n  /** Sub-tabs above the form column (Kudibot's third navigation level). */\n  tabs?: ReactNode;\n  /** Cards with `SettingsRow` / `FormField`, in a column limited to the form width. */\n  children: ReactNode;\n  className?: string;\n}\n\n/** Settings: header, a secondary navigation and a form column of cards. Below 768px the navigation comes first. */\nexport function SettingsPage({ header, nav, tabs, children, className }: SettingsPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      <div className=\"grid gap-6 md:grid-cols-[var(--spacing-subnav)_minmax(0,1fr)]\">\n        <div className=\"md:sticky md:top-[calc(var(--spacing-appbar)+1.5rem)] md:self-start\">{nav}</div>\n        <div className={cx(stack, 'max-w-form')}>\n          {tabs}\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport interface MasterDetailPageProps {\n  header?: ReactNode;\n  /** `MasterDetail`. */\n  children: ReactNode;\n  className?: string;\n}\n\n/** Configuration of grouped records (clients and projects): header and a `MasterDetail`. */\nexport function MasterDetailPage({ header, children, className }: MasterDetailPageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {header}\n      {children}\n    </div>\n  );\n}\n\nexport interface ProfilePageProps {\n  /** A back link (\"‹ People\"). */\n  back?: ReactNode;\n  /** `ProfileHeader` (or `EntityHeader` for companies). */\n  profile: ReactNode;\n  /** Underline `Tabs` for the profile's sections. */\n  tabs?: ReactNode;\n  children: ReactNode;\n  /** A side column (about me, contact, teams) from 1024px. */\n  aside?: ReactNode;\n  className?: string;\n}\n\n/** A person's or a company's page: back link, profile header, tabs, then cards with an optional side column. */\nexport function ProfilePage({ back, profile, tabs, children, aside, className }: ProfilePageProps) {\n  return (\n    <div className={cx(stack, className)}>\n      {back}\n      {profile}\n      {tabs}\n      <div className={cx('grid gap-6', !!aside && 'lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]')}>\n        <div className={stack}>{children}</div>\n        {aside && <div className={stack}>{aside}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport interface AccountPageProps {\n  /** `PageHeader` with the user's avatar as `media`. */\n  header: ReactNode;\n  /** Forms (profile, password, notifications). */\n  children: ReactNode;\n  /** A side list (organizations, devices). */\n  aside?: ReactNode;\n  className?: string;\n}\n\n/**\n * The user's account across organizations: a narrow container with forms and a side list. Use it inside\n * `AppLayout` without `nav` (top bar only).\n */\nexport function AccountPage({ header, children, aside, className }: AccountPageProps) {\n  return (\n    <div className={cx(stack, 'mx-auto w-full max-w-5xl', className)}>\n      {header}\n      <div className={cx('grid gap-6', !!aside && 'lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]')}>\n        <div className={stack}>{children}</div>\n        {aside && <div className={stack}>{aside}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/templates/site-templates.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+interface FrameProps {
+    /** `SiteHeader`. */
+    header: ReactNode;
+    /** `SiteFooter`. */
+    footer?: ReactNode;
+    children: ReactNode;
+    labels?: {
+        skip?: string;
+    };
+    className?: string;
+}
+/** Home, pricing and landing pages: `SiteHeader`, stacked `Section`s, `SiteFooter`, and a skip link. */
+export declare function MarketingLayout({ header, footer, children, labels, className }: FrameProps): import("react").JSX.Element;
+export interface ArticleLayoutProps extends FrameProps {
+    /** `PageHero size="compact"` with the title and `meta`. */
+    hero: ReactNode;
+}
+/** Terms, privacy and support articles: a compact hero and one narrow `Prose` column. */
+export declare function ArticleLayout({ header, footer, hero, children, labels, className }: ArticleLayoutProps): import("react").JSX.Element;
+export interface DocsLayoutProps extends FrameProps {
+    /** The docs `SideNav` (about 240px), sticky from 1024px; a "Contents" disclosure on smaller screens. */
+    nav: ReactNode;
+    /** `TableOfContents` for long articles, shown from 1280px. */
+    toc?: ReactNode;
+    /** `PrevNextNav` at the end of the article. */
+    pagination?: ReactNode;
+    labels?: {
+        skip?: string;
+        contents?: string;
+    };
+}
+/** Docs: a sticky navigation, the article column (`Prose`), an optional table of contents and Previous / Next. */
+export declare function DocsLayout({ header, footer, nav, toc, pagination, children, labels, className, }: DocsLayoutProps): import("react").JSX.Element;
+export interface AuthLayoutProps {
+    /** `SiteHeader variant="minimal"` (logo and, e.g., a "Sign in" link). */
+    header: ReactNode;
+    /** The form card's content: title, fields, main action. */
+    children: ReactNode;
+    /** Links under the card ("Don't have an account? Sign up", legal). */
+    below?: ReactNode;
+    labels?: {
+        skip?: string;
+    };
+    className?: string;
+}
+/** Log in, sign up and password reset: a gradient strip, a minimal header and one centred card, no footer. */
+export declare function AuthLayout({ header, children, below, labels, className }: AuthLayoutProps): import("react").JSX.Element;
+export {};

package/dist/templates/site-templates.js

@@ -0,0 +1,110 @@
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { SkipLink as n } from "../lib/skip-link.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/templates/site-templates.tsx
+function a({ header: t, footer: a, children: o, labels: s = {}, className: c }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("flex min-h-dvh flex-col bg-bg font-sans text-fg", c),
+		children: [
+			/* @__PURE__ */ r(n, { label: s.skip ?? "Skip to content" }),
+			t,
+			/* @__PURE__ */ r("main", {
+				id: "kf-main",
+				tabIndex: -1,
+				className: "flex-1 focus:outline-none",
+				children: o
+			}),
+			a
+		]
+	});
+}
+function o({ header: e, footer: t, hero: n, children: o, labels: s, className: c }) {
+	return /* @__PURE__ */ i(a, {
+		header: e,
+		footer: t,
+		labels: s,
+		className: c,
+		children: [n, /* @__PURE__ */ r("div", {
+			className: "mx-auto w-full max-w-article px-gutter pb-section-md",
+			children: o
+		})]
+	});
+}
+function s({ header: n, footer: o, nav: s, toc: c, pagination: l, children: u, labels: d = {}, className: f }) {
+	return /* @__PURE__ */ r(a, {
+		header: n,
+		footer: o,
+		labels: d,
+		className: f,
+		children: /* @__PURE__ */ i("div", {
+			className: e("mx-auto grid w-full max-w-app gap-8 px-gutter py-8 lg:grid-cols-[var(--spacing-sidebar)_minmax(0,1fr)] lg:py-12", !!c && "xl:grid-cols-[var(--spacing-sidebar)_minmax(0,1fr)_14rem]"),
+			children: [
+				/* @__PURE__ */ i("details", {
+					className: "group rounded-lg border border-border bg-surface lg:hidden",
+					children: [/* @__PURE__ */ i("summary", {
+						className: "flex cursor-pointer list-none items-center justify-between px-4 py-3 font-semibold focus-visible:outline-3 focus-visible:outline-focus",
+						children: [d.contents ?? "Contents", /* @__PURE__ */ r(t, {
+							name: "chevron-down",
+							size: 16,
+							className: "transition-transform group-open:rotate-180 motion-reduce:transition-none"
+						})]
+					}), /* @__PURE__ */ r("div", {
+						className: "border-t border-border p-3",
+						children: s
+					})]
+				}),
+				/* @__PURE__ */ r("aside", {
+					className: "hidden lg:block",
+					children: /* @__PURE__ */ r("div", {
+						className: "sticky top-24 max-h-[calc(100dvh-7rem)] overflow-y-auto",
+						children: s
+					})
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "grid min-w-0 content-start gap-10",
+					children: [/* @__PURE__ */ r("article", {
+						className: "min-w-0",
+						children: u
+					}), l]
+				}),
+				c && /* @__PURE__ */ r("div", {
+					className: "hidden xl:block",
+					children: c
+				})
+			]
+		})
+	});
+}
+function c({ header: t, children: a, below: o, labels: s = {}, className: c }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("flex min-h-dvh flex-col bg-bg font-sans text-fg", c),
+		children: [
+			/* @__PURE__ */ r(n, { label: s.skip ?? "Skip to content" }),
+			/* @__PURE__ */ r("div", {
+				"aria-hidden": "true",
+				className: "h-1.5 bg-gradient-brand-vivid"
+			}),
+			t,
+			/* @__PURE__ */ r("main", {
+				id: "kf-main",
+				tabIndex: -1,
+				className: "grid flex-1 place-items-center px-gutter py-10 focus:outline-none",
+				children: /* @__PURE__ */ i("div", {
+					className: "grid w-full max-w-[30rem] gap-6",
+					children: [/* @__PURE__ */ r("div", {
+						className: "rounded-xl border border-border bg-surface p-6 shadow-raised sm:p-8",
+						children: a
+					}), o && /* @__PURE__ */ r("div", {
+						className: "text-center text-sm text-fg-muted",
+						children: o
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { o as ArticleLayout, c as AuthLayout, s as DocsLayout, a as MarketingLayout };
+
+//# sourceMappingURL=site-templates.js.map

package/dist/templates/site-templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-templates.js","names":["MarketingLayout","cx","className","SkipLink","labels","header","footer","ArticleLayout","hero","DocsLayout","toc","Glyph","nav","pagination","AuthLayout","below"],"sources":["../../src/templates/site-templates.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { SkipLink } from '../lib/skip-link';\n\n/* Public-page templates (ADR-0013): they arrange slots, every site brings its own header, footer and content. */\n\ninterface FrameProps {\n  /** `SiteHeader`. */\n  header: ReactNode;\n  /** `SiteFooter`. */\n  footer?: ReactNode;\n  children: ReactNode;\n  labels?: { skip?: string };\n  className?: string;\n}\n\n/* ---------------- MarketingLayout ---------------- */\n\n/** Home, pricing and landing pages: `SiteHeader`, stacked `Section`s, `SiteFooter`, and a skip link. */\nexport function MarketingLayout({ header, footer, children, labels = {}, className }: FrameProps) {\n  return (\n    <div className={cx('flex min-h-dvh flex-col bg-bg font-sans text-fg', className)}>\n      <SkipLink label={labels.skip ?? 'Skip to content'} />\n      {header}\n      <main id=\"kf-main\" tabIndex={-1} className=\"flex-1 focus:outline-none\">\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n\n/* ---------------- ArticleLayout ---------------- */\n\nexport interface ArticleLayoutProps extends FrameProps {\n  /** `PageHero size=\"compact\"` with the title and `meta`. */\n  hero: ReactNode;\n}\n\n/** Terms, privacy and support articles: a compact hero and one narrow `Prose` column. */\nexport function ArticleLayout({ header, footer, hero, children, labels, className }: ArticleLayoutProps) {\n  return (\n    <MarketingLayout header={header} footer={footer} labels={labels} className={className}>\n      {hero}\n      <div className=\"mx-auto w-full max-w-article px-gutter pb-section-md\">{children}</div>\n    </MarketingLayout>\n  );\n}\n\n/* ---------------- DocsLayout ---------------- */\n\nexport interface DocsLayoutProps extends FrameProps {\n  /** The docs `SideNav` (about 240px), sticky from 1024px; a \"Contents\" disclosure on smaller screens. */\n  nav: ReactNode;\n  /** `TableOfContents` for long articles, shown from 1280px. */\n  toc?: ReactNode;\n  /** `PrevNextNav` at the end of the article. */\n  pagination?: ReactNode;\n  labels?: { skip?: string; contents?: string };\n}\n\n/** Docs: a sticky navigation, the article column (`Prose`), an optional table of contents and Previous / Next. */\nexport function DocsLayout({\n  header,\n  footer,\n  nav,\n  toc,\n  pagination,\n  children,\n  labels = {},\n  className,\n}: DocsLayoutProps) {\n  return (\n    <MarketingLayout header={header} footer={footer} labels={labels} className={className}>\n      <div\n        className={cx(\n          'mx-auto grid w-full max-w-app gap-8 px-gutter py-8 lg:grid-cols-[var(--spacing-sidebar)_minmax(0,1fr)] lg:py-12',\n          !!toc && 'xl:grid-cols-[var(--spacing-sidebar)_minmax(0,1fr)_14rem]',\n        )}\n      >\n        {/* Native disclosure on phones and tablets: works without JavaScript; always open from 1024px. */}\n        <details className=\"group rounded-lg border border-border bg-surface lg:hidden\">\n          <summary className=\"flex cursor-pointer list-none items-center justify-between px-4 py-3 font-semibold focus-visible:outline-3 focus-visible:outline-focus\">\n            {labels.contents ?? 'Contents'}\n            <Glyph\n              name=\"chevron-down\"\n              size={16}\n              className=\"transition-transform group-open:rotate-180 motion-reduce:transition-none\"\n            />\n          </summary>\n          <div className=\"border-t border-border p-3\">{nav}</div>\n        </details>\n        <aside className=\"hidden lg:block\">\n          <div className=\"sticky top-24 max-h-[calc(100dvh-7rem)] overflow-y-auto\">{nav}</div>\n        </aside>\n        <div className=\"grid min-w-0 content-start gap-10\">\n          <article className=\"min-w-0\">{children}</article>\n          {pagination}\n        </div>\n        {toc && <div className=\"hidden xl:block\">{toc}</div>}\n      </div>\n    </MarketingLayout>\n  );\n}\n\n/* ---------------- AuthLayout ---------------- */\n\nexport interface AuthLayoutProps {\n  /** `SiteHeader variant=\"minimal\"` (logo and, e.g., a \"Sign in\" link). */\n  header: ReactNode;\n  /** The form card's content: title, fields, main action. */\n  children: ReactNode;\n  /** Links under the card (\"Don't have an account? Sign up\", legal). */\n  below?: ReactNode;\n  labels?: { skip?: string };\n  className?: string;\n}\n\n/** Log in, sign up and password reset: a gradient strip, a minimal header and one centred card, no footer. */\nexport function AuthLayout({ header, children, below, labels = {}, className }: AuthLayoutProps) {\n  return (\n    <div className={cx('flex min-h-dvh flex-col bg-bg font-sans text-fg', className)}>\n      <SkipLink label={labels.skip ?? 'Skip to content'} />\n      <div aria-hidden=\"true\" className=\"h-1.5 bg-gradient-brand-vivid\" />\n      {header}\n      <main id=\"kf-main\" tabIndex={-1} className=\"grid flex-1 place-items-center px-gutter py-10 focus:outline-none\">\n        <div className=\"grid w-full max-w-[30rem] gap-6\">\n          <div className=\"rounded-xl border border-border bg-surface p-6 shadow-raised sm:p-8\">{children}</div>\n          {below && <div className=\"text-center text-sm text-fg-muted\">{below}</div>}\n        </div>\n      </main>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAoBA,SAAgBA,EAAgB,EAAE,WAAQ,WAAQ,aAAU,YAAS,CAAC,GAAG,gBAAyB;CAChG,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAG,mDAAmDC,CAAS;EAA/E,UAAA;GACE,kBAACC,GAAD,EAAU,OAAOC,EAAO,QAAQ,kBAAoB,CAAA;GACnDC;GACD,kBAAC,QAAD;IAAM,IAAG;IAAU,UAAU;IAAI,WAAU;IACxC;GACG,CAAA;GACLC;EACE;;AAET;AAUA,SAAgBC,EAAc,EAAE,WAAQ,WAAQ,SAAM,aAAU,WAAQ,gBAAiC;CACvG,OACE,kBAACP,GAAD;EAAyB;EAAgB;EAAgB;EAAmB;EAA5E,UAAA,CACGQ,GACD,kBAAC,OAAD;GAAK,WAAU;GAAwD;EAAc,CAAA,CACtE;;AAErB;AAeA,SAAgBC,EAAW,EACzB,WACA,WACA,QACA,QACA,eACA,aACA,YAAS,CAAC,GACV,gBACkB;CAClB,OACE,kBAACT,GAAD;EAAyB;EAAgB;EAAgB;EAAmB;EAC1E,UAAA,kBAAC,OAAD;GACE,WAAWC,EACT,mHACA,CAAC,CAACS,KAAO,2DACX;GAJF,UAAA;IAOE,kBAAC,WAAD;KAAS,WAAU;KAAnB,UAAA,CACE,kBAAC,WAAD;MAAS,WAAU;MAAnB,UAAA,CACGN,EAAO,YAAY,YACpB,kBAACO,GAAD;OACE,MAAK;OACL,MAAM;OACN,WAAU;MACX,CAAA,CACM;KACT,CAAA,GAAA,kBAAC,OAAD;MAAK,WAAU;MAA8B,UAAAC;KAAS,CAAA,CAC/C;;IACT,kBAAC,SAAD;KAAO,WAAU;KACf,UAAA,kBAAC,OAAD;MAAK,WAAU;MAA2D,UAAAA;KAAS,CAAA;IAC9E,CAAA;IACP,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,WAAD;MAAS,WAAU;MAAW;KAAkB,CAAA,GAC/CC,CACE;;IACJH,KAAO,kBAAC,OAAD;KAAK,WAAU;KAAmB,UAAAA;IAAS,CAAA;GAChD;;CACU,CAAA;AAErB;AAgBA,SAAgBI,EAAW,EAAE,WAAQ,aAAU,UAAO,YAAS,CAAC,GAAG,gBAA8B;CAC/F,OACE,kBAAC,OAAD;EAAK,WAAWb,EAAG,mDAAmDC,CAAS;EAA/E,UAAA;GACE,kBAACC,GAAD,EAAU,OAAOC,EAAO,QAAQ,kBAAoB,CAAA;GACpD,kBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAAiC,CAAA;GAClEC;GACD,kBAAC,QAAD;IAAM,IAAG;IAAU,UAAU;IAAI,WAAU;IACzC,UAAA,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAuE;KAAc,CAAA,GACnGU,KAAS,kBAAC,OAAD;MAAK,WAAU;MAAqC,UAAAA;KAAW,CAAA,CACtE;;GACD,CAAA;EACH;;AAET"}

package/dist/toast/toast-store.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+export type ToastVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'loading';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+    /** Describes how to do the same without the toast, for screen readers (e.g. "Undo from the History page"). Defaults to `label`. */
+    altText?: string;
+}
+export interface ToastOptions {
+    /** Pass an id to update an existing toast instead of adding a new one. */
+    id?: string;
+    description?: ReactNode;
+    action?: ToastAction;
+    /** Milliseconds before auto-dismiss. `Infinity` keeps it open. Defaults: 5000, danger 8000, loading Infinity. */
+    duration?: number;
+}
+export interface ToastData extends Omit<ToastOptions, 'id'> {
+    id: string;
+    variant: ToastVariant;
+    title: ReactNode;
+    open: boolean;
+}
+type Listener = () => void;
+export declare function subscribe(listener: Listener): () => boolean;
+export declare function getToasts(): ToastData[];
+export declare function getServerToasts(): ToastData[];
+/** Closes one toast (or all when `id` is omitted); it is removed after its exit animation. */
+declare function dismiss(id?: string): void;
+type Message<T> = ReactNode | ((value: T) => ReactNode);
+/**
+ * Shows a toast. Render one `<Toaster />` near the root of the app.
+ *
+ * ```ts
+ * toast.success('Workflow saved');
+ * toast.danger('Sync failed', { action: { label: 'Retry', onClick: retry } });
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: (e) => `Failed: ${e.message}` });
+ * ```
+ */
+export declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+    success: (title: ReactNode, options?: ToastOptions) => string;
+    warning: (title: ReactNode, options?: ToastOptions) => string;
+    danger: (title: ReactNode, options?: ToastOptions) => string;
+    info: (title: ReactNode, options?: ToastOptions) => string;
+    loading: (title: ReactNode, options?: ToastOptions) => string;
+    dismiss: typeof dismiss;
+    /** One toast that goes loading → success or danger. Returns the original promise. */
+    promise<T>(promise: Promise<T>, messages: {
+        loading: ReactNode;
+        success: Message<T>;
+        error: Message<unknown>;
+        description?: ReactNode;
+    }): Promise<T>;
+};
+export {};

package/dist/toast/toast-store.js

@@ -0,0 +1,49 @@
+//#region src/toast/toast-store.ts
+var e = [], t = /* @__PURE__ */ new Set(), n = 0, r = 300;
+function i() {
+	for (let e of t) e();
+}
+function a(e) {
+	return t.add(e), () => t.delete(e);
+}
+function o() {
+	return e;
+}
+var s = [];
+function c() {
+	return s;
+}
+function l(t, r, a = {}) {
+	let { id: o, ...s } = a, c = o ?? `kf-toast-${++n}`, l = e.find((e) => e.id === c), u = {
+		id: c,
+		variant: t,
+		title: r,
+		open: !0,
+		...s
+	};
+	return e = l ? e.map((e) => e.id === c ? u : e) : [...e, u], i(), c;
+}
+function u(t) {
+	e = e.map((e) => t === void 0 || e.id === t ? {
+		...e,
+		open: !1
+	} : e), i(), setTimeout(() => {
+		e = e.filter((e) => e.open), i();
+	}, r);
+}
+var d = (e, t) => typeof e == "function" ? e(t) : e, f = Object.assign((e, t) => l("neutral", e, t), {
+	success: (e, t) => l("success", e, t),
+	warning: (e, t) => l("warning", e, t),
+	danger: (e, t) => l("danger", e, t),
+	info: (e, t) => l("info", e, t),
+	loading: (e, t) => l("loading", e, t),
+	dismiss: u,
+	promise(e, t) {
+		let n = l("loading", t.loading, { description: t.description });
+		return e.then((e) => l("success", d(t.success, e), { id: n }), (e) => l("danger", d(t.error, e), { id: n })), e;
+	}
+});
+//#endregion
+export { c as getServerToasts, o as getToasts, a as subscribe, f as toast };
+
+//# sourceMappingURL=toast-store.js.map

package/dist/toast/toast-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-store.js","names":["toasts","listeners","counter","EXIT_MS","emit","l","subscribe","listener","getToasts","EMPTY","getServerToasts","upsert","given","rest","options","id","existing","t","next","dismiss","resolve","m","value","toast","title","messages","promise","error"],"sources":["../../src/toast/toast-store.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport type ToastVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'loading';\n\nexport interface ToastAction {\n  label: string;\n  onClick: () => void;\n  /** Describes how to do the same without the toast, for screen readers (e.g. \"Undo from the History page\"). Defaults to `label`. */\n  altText?: string;\n}\n\nexport interface ToastOptions {\n  /** Pass an id to update an existing toast instead of adding a new one. */\n  id?: string;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** Milliseconds before auto-dismiss. `Infinity` keeps it open. Defaults: 5000, danger 8000, loading Infinity. */\n  duration?: number;\n}\n\nexport interface ToastData extends Omit<ToastOptions, 'id'> {\n  id: string;\n  variant: ToastVariant;\n  title: ReactNode;\n  open: boolean;\n}\n\ntype Listener = () => void;\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<Listener>();\nlet counter = 0;\n\nconst EXIT_MS = 300;\n\nfunction emit() {\n  for (const l of listeners) l();\n}\n\nexport function subscribe(listener: Listener) {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nexport function getToasts() {\n  return toasts;\n}\n\nconst EMPTY: ToastData[] = [];\nexport function getServerToasts() {\n  return EMPTY;\n}\n\nfunction upsert(variant: ToastVariant, title: ReactNode, options: ToastOptions = {}): string {\n  const { id: given, ...rest } = options;\n  const id = given ?? `kf-toast-${++counter}`;\n  const existing = toasts.find((t) => t.id === id);\n  // Updating replaces content and timing; drop fields the new call does not set.\n  const next: ToastData = { id, variant, title, open: true, ...rest };\n  toasts = existing ? toasts.map((t) => (t.id === id ? next : t)) : [...toasts, next];\n  emit();\n  return id;\n}\n\n/** Closes one toast (or all when `id` is omitted); it is removed after its exit animation. */\nfunction dismiss(id?: string) {\n  toasts = toasts.map((t) => (id === undefined || t.id === id ? { ...t, open: false } : t));\n  emit();\n  setTimeout(() => {\n    toasts = toasts.filter((t) => t.open);\n    emit();\n  }, EXIT_MS);\n}\n\ntype Message<T> = ReactNode | ((value: T) => ReactNode);\nconst resolve = <T,>(m: Message<T>, value: T): ReactNode => (typeof m === 'function' ? (m as (v: T) => ReactNode)(value) : m);\n\n/**\n * Shows a toast. Render one `<Toaster />` near the root of the app.\n *\n * ```ts\n * toast.success('Workflow saved');\n * toast.danger('Sync failed', { action: { label: 'Retry', onClick: retry } });\n * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: (e) => `Failed: ${e.message}` });\n * ```\n */\nexport const toast = Object.assign((title: ReactNode, options?: ToastOptions) => upsert('neutral', title, options), {\n  success: (title: ReactNode, options?: ToastOptions) => upsert('success', title, options),\n  warning: (title: ReactNode, options?: ToastOptions) => upsert('warning', title, options),\n  danger: (title: ReactNode, options?: ToastOptions) => upsert('danger', title, options),\n  info: (title: ReactNode, options?: ToastOptions) => upsert('info', title, options),\n  loading: (title: ReactNode, options?: ToastOptions) => upsert('loading', title, options),\n  dismiss,\n  /** One toast that goes loading → success or danger. Returns the original promise. */\n  promise<T>(\n    promise: Promise<T>,\n    messages: { loading: ReactNode; success: Message<T>; error: Message<unknown>; description?: ReactNode },\n  ): Promise<T> {\n    const id = upsert('loading', messages.loading, { description: messages.description });\n    promise.then(\n      (value) => upsert('success', resolve(messages.success, value), { id }),\n      (error: unknown) => upsert('danger', resolve(messages.error, error), { id }),\n    );\n    return promise;\n  },\n});\n"],"mappings":";AA6BA,IAAIA,IAAsB,CAAC,GACrBC,oBAAY,IAAI,IAAc,GAChCC,IAAU,GAERC,IAAU;AAEhB,SAASC,IAAO;CACd,KAAK,IAAMC,KAAKJ,GAAW,EAAE;AAC/B;AAEA,SAAgBK,EAAU,GAAoB;CAE5C,OADAL,EAAU,IAAIM,CAAQ,SACTN,EAAU,OAAOM,CAAQ;AACxC;AAEA,SAAgBC,IAAY;CAC1B,OAAOR;AACT;AAEA,IAAMS,IAAqB,CAAC;AAC5B,SAAgBC,IAAkB;CAChC,OAAOD;AACT;AAEA,SAASE,EAAO,GAAuB,GAAkB,IAAwB,CAAC,GAAW;CAC3F,IAAM,EAAE,IAAIC,GAAO,GAAGC,MAASC,GACzBC,IAAKH,KAAS,YAAY,EAAEV,KAC5Bc,IAAWhB,EAAO,MAAM,MAAMiB,EAAE,OAAOF,CAAE,GAEzCG,IAAkB;EAAE;EAAI;EAAS;EAAO,MAAM;EAAM,GAAGL;CAAK;CAGlE,OAFA,IAASG,IAAWhB,EAAO,KAAK,MAAOiB,EAAE,OAAOF,IAAKG,IAAOD,CAAE,IAAI,CAAC,GAAGjB,GAAQkB,CAAI,GAClFd,EAAK,GACEW;AACT;AAGA,SAASI,EAAQ,GAAa;CAG5B,AAFA,IAASnB,EAAO,KAAK,MAAOe,MAAO,KAAA,KAAaE,EAAE,OAAOF,IAAK;EAAE,GAAGE;EAAG,MAAM;CAAM,IAAIA,CAAE,GACxFb,EAAK,GACL,iBAAiB;EAEf,AADA,IAASJ,EAAO,QAAQ,MAAMiB,EAAE,IAAI,GACpCb,EAAK;CACP,GAAGD,CAAO;AACZ;AAGA,IAAMiB,KAAe,GAAe,MAAyB,OAAOC,KAAM,aAAcA,EAA0BC,CAAK,IAAID,GAW9GE,IAAQ,OAAO,QAAQ,GAAkB,MAA2BZ,EAAO,WAAWa,GAAOV,CAAO,GAAG;CAClH,UAAU,GAAkB,MAA2BH,EAAO,WAAWa,GAAOV,CAAO;CACvF,UAAU,GAAkB,MAA2BH,EAAO,WAAWa,GAAOV,CAAO;CACvF,SAAS,GAAkB,MAA2BH,EAAO,UAAUa,GAAOV,CAAO;CACrF,OAAO,GAAkB,MAA2BH,EAAO,QAAQa,GAAOV,CAAO;CACjF,UAAU,GAAkB,MAA2BH,EAAO,WAAWa,GAAOV,CAAO;CACvF;CAEA,QACE,GACA,GACY;EACZ,IAAMC,IAAKJ,EAAO,WAAWc,EAAS,SAAS,EAAE,aAAaA,EAAS,YAAY,CAAC;EAKpF,OAJAC,EAAQ,MACL,MAAUf,EAAO,WAAWS,EAAQK,EAAS,SAASH,CAAK,GAAG,EAAE,MAAG,CAAC,IACpE,MAAmBX,EAAO,UAAUS,EAAQK,EAAS,OAAOE,CAAK,GAAG,EAAE,MAAG,CAAC,CAC7E,GACOD;CACT;AACF,CAAC"}

package/dist/toast/toaster.d.ts

@@ -0,0 +1,15 @@
+export interface ToasterProps {
+    /** Maximum toasts on screen; the rest wait in the queue. */
+    max?: number;
+    /** Accessible name of the notifications region (translate it). `{hotkey}` is replaced by the shortcut. */
+    label?: string;
+    /** Keyboard shortcut that moves focus to the toasts. */
+    hotkey?: string[];
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * Renders the toasts created with `toast()`. Mount once near the app root.
+ * Desktop: top-right, swipe right to dismiss. Mobile: bottom, full width, swipe down.
+ */
+export declare function Toaster({ max, label, hotkey, closeLabel, className }: ToasterProps): import("react").JSX.Element;

package/dist/toast/toaster.js

@@ -0,0 +1,124 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Spinner as n } from "../spinner/spinner.js";
+import { Button as r } from "../button/button.js";
+import { DESKTOP_QUERY as i, useMediaQuery as a } from "../lib/use-media-query.js";
+import { getServerToasts as o, getToasts as s, subscribe as c, toast as l } from "./toast-store.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useSyncExternalStore as f } from "react";
+import * as p from "@radix-ui/react-toast";
+//#region src/toast/toaster.tsx
+var m = {
+	success: {
+		name: "accept",
+		className: "text-success-icon"
+	},
+	warning: {
+		name: "warning",
+		className: "text-warning-icon"
+	},
+	danger: {
+		name: "error",
+		className: "text-danger-icon"
+	},
+	info: {
+		name: "info",
+		className: "text-info-icon"
+	}
+}, h = {
+	neutral: "before:bg-border",
+	loading: "before:bg-primary",
+	success: "before:bg-success-icon",
+	warning: "before:bg-warning-icon",
+	danger: "before:bg-danger-icon",
+	info: "before:bg-info-icon"
+}, g = {
+	neutral: 5e3,
+	success: 5e3,
+	info: 5e3,
+	warning: 6e3,
+	danger: 8e3,
+	loading: Infinity
+};
+function _({ max: t = 3, label: n = "Notifications ({hotkey})", hotkey: r = ["F8"], closeLabel: l = "Dismiss", className: m }) {
+	let h = f(c, s, o), g = a(i), _ = h.slice(0, t);
+	return /* @__PURE__ */ d(p.Provider, {
+		swipeDirection: g ? "right" : "down",
+		label: n.replace(" ({hotkey})", ""),
+		children: [_.map((e) => /* @__PURE__ */ u(v, {
+			data: e,
+			closeLabel: l
+		}, e.id)), /* @__PURE__ */ u(p.Viewport, {
+			hotkey: r,
+			label: n,
+			className: e("fixed inset-x-0 bottom-0 z-[60] m-0 flex list-none flex-col gap-2 p-4 outline-none", "pb-[max(1rem,env(safe-area-inset-bottom))]", "sm:top-0 sm:right-0 sm:bottom-auto sm:left-auto sm:w-[26rem] sm:flex-col-reverse sm:pt-[max(1rem,env(safe-area-inset-top))]", m)
+		})]
+	});
+}
+function v({ data: i, closeLabel: a }) {
+	let { id: o, variant: s, title: c, description: f, action: _, open: v } = i, y = m[s];
+	return /* @__PURE__ */ d(p.Root, {
+		open: v,
+		onOpenChange: (e) => !e && l.dismiss(o),
+		duration: i.duration ?? g[s],
+		type: s === "danger" ? "foreground" : "background",
+		className: e("kf-toast relative flex items-start gap-3 overflow-hidden rounded-md border border-border bg-surface py-3.5 pr-3 pl-5 font-sans text-fg shadow-overlay", "before:absolute before:inset-y-0 before:left-0 before:w-1 before:content-['']", h[s]),
+		children: [
+			s === "loading" ? /* @__PURE__ */ u(n, {
+				size: 22,
+				className: "mt-px shrink-0 text-primary"
+			}) : y && /* @__PURE__ */ u(t, {
+				name: y.name,
+				size: 24,
+				className: e("mt-px", y.className)
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "min-w-0 flex-1 py-0.5",
+				children: [
+					/* @__PURE__ */ u(p.Title, {
+						className: "text-[15px] leading-snug font-semibold",
+						children: c
+					}),
+					f && /* @__PURE__ */ u(p.Description, {
+						className: "mt-0.5 text-sm text-fg-muted",
+						children: f
+					}),
+					_ && /* @__PURE__ */ u(p.Action, {
+						asChild: !0,
+						altText: _.altText ?? _.label,
+						children: /* @__PURE__ */ u(r, {
+							size: "sm",
+							variant: "secondary",
+							className: "mt-2.5",
+							onClick: _.onClick,
+							children: _.label
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ u(p.Close, {
+				"aria-label": a,
+				className: e("grid size-8 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted", "hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus"),
+				children: /* @__PURE__ */ u("svg", {
+					viewBox: "0 0 24 24",
+					width: "16",
+					height: "16",
+					"aria-hidden": "true",
+					focusable: "false",
+					children: /* @__PURE__ */ u("path", {
+						d: "M6 6l12 12M18 6L6 18",
+						stroke: "currentColor",
+						strokeWidth: "2.25",
+						strokeLinecap: "round",
+						fill: "none"
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { _ as Toaster };
+
+//# sourceMappingURL=toaster.js.map

package/dist/toast/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","names":["RadixToast","ICONS","ACCENT","DEFAULT_DURATION","Toaster","toasts","useSyncExternalStore","subscribe","getToasts","getServerToasts","desktop","useMediaQuery","DESKTOP_QUERY","visible","max","label","ToastItem","t","cx","className","data","icon","variant","next","toast","id","Spinner","Icon","title","description","action","Button","closeLabel"],"sources":["../../src/toast/toaster.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixToast from '@radix-ui/react-toast';\nimport { useSyncExternalStore } from 'react';\nimport { cx } from '../lib/cx';\nimport { DESKTOP_QUERY, useMediaQuery } from '../lib/use-media-query';\nimport { Spinner } from '../spinner/spinner';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Button } from '../button/button';\nimport { getServerToasts, getToasts, subscribe, toast, type ToastData, type ToastVariant } from './toast-store';\n\nconst ICONS: Partial<Record<ToastVariant, { name: IconName; className: string }>> = {\n  success: { name: 'accept', className: 'text-success-icon' },\n  warning: { name: 'warning', className: 'text-warning-icon' },\n  danger: { name: 'error', className: 'text-danger-icon' },\n  info: { name: 'info', className: 'text-info-icon' },\n};\n\nconst ACCENT: Record<ToastVariant, string> = {\n  neutral: 'before:bg-border',\n  loading: 'before:bg-primary',\n  success: 'before:bg-success-icon',\n  warning: 'before:bg-warning-icon',\n  danger: 'before:bg-danger-icon',\n  info: 'before:bg-info-icon',\n};\n\nconst DEFAULT_DURATION: Record<ToastVariant, number> = {\n  neutral: 5000,\n  success: 5000,\n  info: 5000,\n  warning: 6000,\n  danger: 8000,\n  loading: Infinity,\n};\n\nexport interface ToasterProps {\n  /** Maximum toasts on screen; the rest wait in the queue. */\n  max?: number;\n  /** Accessible name of the notifications region (translate it). `{hotkey}` is replaced by the shortcut. */\n  label?: string;\n  /** Keyboard shortcut that moves focus to the toasts. */\n  hotkey?: string[];\n  closeLabel?: string;\n  className?: string;\n}\n\n/**\n * Renders the toasts created with `toast()`. Mount once near the app root.\n * Desktop: top-right, swipe right to dismiss. Mobile: bottom, full width, swipe down.\n */\nexport function Toaster({ max = 3, label = 'Notifications ({hotkey})', hotkey = ['F8'], closeLabel = 'Dismiss', className }: ToasterProps) {\n  const toasts = useSyncExternalStore(subscribe, getToasts, getServerToasts);\n  const desktop = useMediaQuery(DESKTOP_QUERY);\n  const visible = toasts.slice(0, max);\n\n  return (\n    <RadixToast.Provider swipeDirection={desktop ? 'right' : 'down'} label={label.replace(' ({hotkey})', '')}>\n      {visible.map((t) => (\n        <ToastItem key={t.id} data={t} closeLabel={closeLabel} />\n      ))}\n      <RadixToast.Viewport\n        hotkey={hotkey}\n        label={label}\n        className={cx(\n          'fixed inset-x-0 bottom-0 z-[60] m-0 flex list-none flex-col gap-2 p-4 outline-none',\n          'pb-[max(1rem,env(safe-area-inset-bottom))]',\n          'sm:top-0 sm:right-0 sm:bottom-auto sm:left-auto sm:w-[26rem] sm:flex-col-reverse sm:pt-[max(1rem,env(safe-area-inset-top))]',\n          className,\n        )}\n      />\n    </RadixToast.Provider>\n  );\n}\n\nfunction ToastItem({ data, closeLabel }: { data: ToastData; closeLabel: string }) {\n  const { id, variant, title, description, action, open } = data;\n  const icon = ICONS[variant];\n  return (\n    <RadixToast.Root\n      open={open}\n      onOpenChange={(next) => !next && toast.dismiss(id)}\n      duration={data.duration ?? DEFAULT_DURATION[variant]}\n      type={variant === 'danger' ? 'foreground' : 'background'}\n      className={cx(\n        'kf-toast relative flex items-start gap-3 overflow-hidden rounded-md border border-border bg-surface py-3.5 pr-3 pl-5 font-sans text-fg shadow-overlay',\n        \"before:absolute before:inset-y-0 before:left-0 before:w-1 before:content-['']\",\n        ACCENT[variant],\n      )}\n    >\n      {variant === 'loading' ? (\n        <Spinner size={22} className=\"mt-px shrink-0 text-primary\" />\n      ) : (\n        icon && <Icon name={icon.name} size={24} className={cx('mt-px', icon.className)} />\n      )}\n      <div className=\"min-w-0 flex-1 py-0.5\">\n        <RadixToast.Title className=\"text-[15px] leading-snug font-semibold\">{title}</RadixToast.Title>\n        {description && <RadixToast.Description className=\"mt-0.5 text-sm text-fg-muted\">{description}</RadixToast.Description>}\n        {action && (\n          <RadixToast.Action asChild altText={action.altText ?? action.label}>\n            <Button size=\"sm\" variant=\"secondary\" className=\"mt-2.5\" onClick={action.onClick}>\n              {action.label}\n            </Button>\n          </RadixToast.Action>\n        )}\n      </div>\n      <RadixToast.Close\n        aria-label={closeLabel}\n        className={cx(\n          'grid size-8 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted',\n          'hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus',\n        )}\n      >\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2.25\" strokeLinecap=\"round\" fill=\"none\" />\n        </svg>\n      </RadixToast.Close>\n    </RadixToast.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAMC,IAA8E;CAClF,SAAS;EAAE,MAAM;EAAU,WAAW;CAAoB;CAC1D,SAAS;EAAE,MAAM;EAAW,WAAW;CAAoB;CAC3D,QAAQ;EAAE,MAAM;EAAS,WAAW;CAAmB;CACvD,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAiB;AACpD,GAEMC,IAAuC;CAC3C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR,GAEMC,IAAiD;CACrD,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAiBA,SAAgBC,EAAQ,EAAE,SAAM,GAAG,WAAQ,4BAA4B,YAAS,CAAC,IAAI,GAAG,gBAAa,WAAW,gBAA2B;CACzI,IAAMC,IAASC,EAAqBC,GAAWC,GAAWC,CAAe,GACnEC,IAAUC,EAAcC,CAAa,GACrCC,IAAUR,EAAO,MAAM,GAAGS,CAAG;CAEnC,OACE,kBAACd,EAAW,UAAZ;EAAqB,gBAAgBU,IAAU,UAAU;EAAQ,OAAOK,EAAM,QAAQ,eAAe,EAAE;EAAvG,UAAA,CACGF,EAAQ,KAAK,MACZ,kBAACG,GAAD;GAAsB,MAAMC;GAAe;EAAa,GAAxCA,EAAE,EAAsC,CACzD,GACD,kBAACjB,EAAW,UAAZ;GACU;GACD;GACP,WAAWkB,EACT,sFACA,8CACA,+HACAC,CACF;EACD,CAAA,CACkB;;AAEzB;AAEA,SAASH,EAAU,EAAE,SAAM,iBAAuD;CAChF,IAAM,EAAE,OAAI,YAAS,UAAO,gBAAa,WAAQ,YAASI,GACpDC,IAAOpB,EAAMqB;CACnB,OACE,kBAACtB,EAAW,MAAZ;EACQ;EACN,eAAe,MAAS,CAACuB,KAAQC,EAAM,QAAQC,CAAE;EACjD,UAAUL,EAAK,YAAYjB,EAAiBmB;EAC5C,MAAMA,MAAY,WAAW,eAAe;EAC5C,WAAWJ,EACT,yJACA,iFACAhB,EAAOoB,EACT;EATF,UAAA;GAWGA,MAAY,YACX,kBAACI,GAAD;IAAS,MAAM;IAAI,WAAU;GAA+B,CAAA,IAE5DL,KAAQ,kBAACM,GAAD;IAAM,MAAMN,EAAK;IAAM,MAAM;IAAI,WAAWH,EAAG,SAASG,EAAK,SAAS;GAAI,CAAA;GAEpF,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAACrB,EAAW,OAAZ;MAAkB,WAAU;MAA0C,UAAA4B;KAAwB,CAAA;KAC7FC,KAAe,kBAAC7B,EAAW,aAAZ;MAAwB,WAAU;MAAgC,UAAA6B;KAAoC,CAAA;KACrHC,KACC,kBAAC9B,EAAW,QAAZ;MAAmB,SAAA;MAAQ,SAAS8B,EAAO,WAAWA,EAAO;MAC3D,UAAA,kBAACC,GAAD;OAAQ,MAAK;OAAK,SAAQ;OAAY,WAAU;OAAS,SAASD,EAAO;OACtE,UAAAA,EAAO;MACF,CAAA;KACS,CAAA;IAElB;;GACL,kBAAC9B,EAAW,OAAZ;IACE,cAAYgC;IACZ,WAAWd,EACT,6GACA,yHACF;IAEA,UAAA,kBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;KAAK,QAAO;KAAK,eAAY;KAAO,WAAU;KAC3E,UAAA,kBAAC,QAAD;MAAM,GAAE;MAAuB,QAAO;MAAe,aAAY;MAAO,eAAc;MAAQ,MAAK;KAAQ,CAAA;IACxG,CAAA;GACW,CAAA;EACH;;AAErB"}