@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/app-shell/floating-actions.js

@@ -0,0 +1,59 @@
+"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";
+import { useEffect as a, useState as o } from "react";
+//#region src/app-shell/floating-actions.tsx
+function s({ primary: s, secondary: c = [], scrollTop: l = !0, labels: u = {}, className: d }) {
+	let [f, p] = o(!1);
+	a(() => {
+		if (!l) return;
+		let e = () => p(window.scrollY > 600);
+		return e(), window.addEventListener("scroll", e, { passive: !0 }), () => window.removeEventListener("scroll", e);
+	}, [l]);
+	let m = "grid size-11 cursor-pointer place-items-center rounded-full border border-border bg-surface text-fg shadow-raised hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus";
+	return /* @__PURE__ */ i("div", {
+		className: e("fixed right-[max(1rem,env(safe-area-inset-right))] bottom-[max(1rem,env(safe-area-inset-bottom))] z-40 flex flex-col items-end gap-2 font-sans", d),
+		children: [
+			l && f && /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": u.top ?? "Back to top",
+				title: u.top ?? "Back to top",
+				onClick: () => window.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				}),
+				className: m,
+				children: /* @__PURE__ */ r(n, {
+					name: "arrow-up",
+					size: 18
+				})
+			}),
+			c.map((e) => /* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": e.label,
+				title: e.label,
+				onClick: e.onClick,
+				className: m,
+				children: /* @__PURE__ */ r(t, {
+					name: e.icon,
+					size: 20
+				})
+			}, e.label)),
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: s.onClick,
+				className: "inline-flex h-14 cursor-pointer items-center gap-2 rounded-full border-0 bg-primary px-5 font-semibold text-on-primary shadow-overlay hover:bg-primary-hover focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+				children: [/* @__PURE__ */ r(t, {
+					name: s.icon,
+					size: 22
+				}), s.label]
+			})
+		]
+	});
+}
+//#endregion
+export { s as FloatingActions };
+
+//# sourceMappingURL=floating-actions.js.map

package/dist/app-shell/floating-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-actions.js","names":["FloatingActions","scrolled","setScrolled","useState","scrollTop","on","round","cx","className","labels","Glyph","secondary","a","Icon","primary"],"sources":["../../src/app-shell/floating-actions.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\n\n/* ---------------- FloatingActions ---------------- */\n\nexport interface FloatingAction {\n  label: string;\n  icon: IconName;\n  onClick: () => void;\n}\n\n/**\n * The bottom-right floating button (the assistant) with optional secondary round buttons, plus \"Back to top\" after\n * scrolling. Respects the safe area on phones.\n */\nexport function FloatingActions({\n  primary,\n  secondary = [],\n  scrollTop = true,\n  labels = {},\n  className,\n}: {\n  primary: FloatingAction;\n  secondary?: FloatingAction[];\n  scrollTop?: boolean;\n  labels?: { top?: string };\n  className?: string;\n}) {\n  const [scrolled, setScrolled] = useState(false);\n  useEffect(() => {\n    if (!scrollTop) return;\n    const on = () => setScrolled(window.scrollY > 600);\n    on();\n    window.addEventListener('scroll', on, { passive: true });\n    return () => window.removeEventListener('scroll', on);\n  }, [scrollTop]);\n  const round =\n    'grid size-11 cursor-pointer place-items-center rounded-full border border-border bg-surface text-fg shadow-raised hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus';\n  return (\n    <div\n      className={cx(\n        'fixed right-[max(1rem,env(safe-area-inset-right))] bottom-[max(1rem,env(safe-area-inset-bottom))] z-40 flex flex-col items-end gap-2 font-sans',\n        className,\n      )}\n    >\n      {scrollTop && scrolled && (\n        <button\n          type=\"button\"\n          aria-label={labels.top ?? 'Back to top'}\n          title={labels.top ?? 'Back to top'}\n          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}\n          className={round}\n        >\n          <Glyph name=\"arrow-up\" size={18} />\n        </button>\n      )}\n      {secondary.map((a) => (\n        <button key={a.label} type=\"button\" aria-label={a.label} title={a.label} onClick={a.onClick} className={round}>\n          <Icon name={a.icon} size={20} />\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={primary.onClick}\n        className=\"inline-flex h-14 cursor-pointer items-center gap-2 rounded-full border-0 bg-primary px-5 font-semibold text-on-primary shadow-overlay hover:bg-primary-hover focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n      >\n        <Icon name={primary.icon} size={22} />\n        {primary.label}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgBA,EAAgB,EAC9B,YACA,eAAY,CAAC,GACb,eAAY,IACZ,YAAS,CAAC,GACV,gBAOC;CACD,IAAM,CAACC,GAAUC,KAAeC,EAAS,EAAK;CAC9C,QAAgB;EACd,IAAI,CAACC,GAAW;EAChB,IAAMC,UAAWH,EAAY,OAAO,UAAU,GAAG;EAGjD,OAFAG,EAAG,GACH,OAAO,iBAAiB,UAAUA,GAAI,EAAE,SAAS,GAAK,CAAC,SAC1C,OAAO,oBAAoB,UAAUA,CAAE;CACtD,GAAG,CAACD,CAAS,CAAC;CACd,IAAME,IACJ;CACF,OACE,kBAAC,OAAD;EACE,WAAWC,EACT,kJACAC,CACF;EAJF,UAAA;GAMGJ,KAAaH,KACZ,kBAAC,UAAD;IACE,MAAK;IACL,cAAYQ,EAAO,OAAO;IAC1B,OAAOA,EAAO,OAAO;IACrB,eAAe,OAAO,SAAS;KAAE,KAAK;KAAG,UAAU;IAAS,CAAC;IAC7D,WAAWH;IAEX,UAAA,kBAACI,GAAD;KAAO,MAAK;KAAW,MAAM;IAAK,CAAA;GAC5B,CAAA;GAETC,EAAU,KAAK,MACd,kBAAC,UAAD;IAAsB,MAAK;IAAS,cAAYC,EAAE;IAAO,OAAOA,EAAE;IAAO,SAASA,EAAE;IAAS,WAAWN;IACtG,UAAA,kBAACO,GAAD;KAAM,MAAMD,EAAE;KAAM,MAAM;IAAK,CAAA;GACzB,GAFKA,EAAE,KAEP,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,SAASE,EAAQ;IACjB,WAAU;IAHZ,UAAA,CAKE,kBAACD,GAAD;KAAM,MAAMC,EAAQ;KAAM,MAAM;IAAK,CAAA,GACpCA,EAAQ,KACH;;EACL;;AAET"}

package/dist/app-shell/workspace-switcher.d.ts

@@ -0,0 +1,25 @@
+export interface Workspace {
+    id: string;
+    name: string;
+    /** Logo URL; otherwise the first letter on a colored tile. */
+    logoSrc?: string;
+    /** Tile color without a logo, e.g. `var(--kf-category-2)`. */
+    color?: string;
+    /** A second line ("Owner", "12 members"). */
+    detail?: string;
+}
+export interface WorkspaceSwitcherProps {
+    workspaces: Workspace[];
+    currentId: string;
+    onSelect?: (id: string) => void;
+    labels?: {
+        switch?: string;
+        workspaces?: string;
+    };
+    className?: string;
+}
+/**
+ * The tenant at the top of the sidebar: logo and name in a card. With more than one workspace it opens a list
+ * to switch. In the collapsed sidebar rail only the tile shows.
+ */
+export declare function WorkspaceSwitcher({ workspaces, currentId, onSelect, labels, className }: WorkspaceSwitcherProps): import("react").JSX.Element | null;

package/dist/app-shell/workspace-switcher.js

@@ -0,0 +1,82 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuLabel as i, DropdownMenuRadioGroup as a, DropdownMenuRadioItem as o, DropdownMenuTrigger as s } from "../menu/dropdown-menu.js";
+import { useAppShell as c } from "./app-shell-context.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/app-shell/workspace-switcher.tsx
+function f({ w: e }) {
+	return e.logoSrc ? /* @__PURE__ */ u("img", {
+		src: e.logoSrc,
+		alt: "",
+		className: "size-8 shrink-0 rounded-sm object-cover"
+	}) : /* @__PURE__ */ u("span", {
+		"aria-hidden": "true",
+		className: "grid size-8 shrink-0 place-items-center rounded-sm font-display text-sm font-bold text-white",
+		style: { background: e.color ?? "var(--kf-primary)" },
+		children: e.name.trim()[0]?.toUpperCase()
+	});
+}
+function p({ workspaces: p, currentId: m, onSelect: h, labels: g = {}, className: _ }) {
+	let { collapsed: v } = c(), y = p.find((e) => e.id === m) ?? p[0];
+	if (!y) return null;
+	let b = p.length > 1, x = e("flex w-full min-w-0 items-center gap-2.5 rounded-md text-left font-sans text-fg", v ? "justify-center p-0" : "border border-border bg-surface p-2", _), S = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(f, { w: y }), !v && /* @__PURE__ */ d("span", {
+		className: "grid min-w-0 flex-1",
+		children: [/* @__PURE__ */ u("span", {
+			className: "truncate text-sm font-semibold",
+			children: y.name
+		}), y.detail && /* @__PURE__ */ u("span", {
+			className: "truncate text-xs text-fg-muted",
+			children: y.detail
+		})]
+	})] });
+	return b ? /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(s, {
+		asChild: !0,
+		children: /* @__PURE__ */ d("button", {
+			type: "button",
+			className: e(x, "cursor-pointer hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus"),
+			children: [
+				/* @__PURE__ */ u("span", {
+					className: "sr-only",
+					children: g.switch ?? "Switch workspace"
+				}),
+				S,
+				!v && /* @__PURE__ */ u(t, {
+					name: "sort",
+					size: 16,
+					className: "shrink-0 text-fg-muted"
+				})
+			]
+		})
+	}), /* @__PURE__ */ d(r, {
+		align: "start",
+		className: "w-64",
+		children: [/* @__PURE__ */ u(i, { children: g.workspaces ?? "Workspaces" }), /* @__PURE__ */ u(a, {
+			value: y.id,
+			onValueChange: (e) => h?.(e),
+			children: p.map((e) => /* @__PURE__ */ u(o, {
+				value: e.id,
+				children: /* @__PURE__ */ d("span", {
+					className: "flex min-w-0 items-center gap-2.5",
+					children: [/* @__PURE__ */ u(f, { w: e }), /* @__PURE__ */ d("span", {
+						className: "grid min-w-0",
+						children: [/* @__PURE__ */ u("span", {
+							className: "truncate",
+							children: e.name
+						}), e.detail && /* @__PURE__ */ u("span", {
+							className: "truncate text-xs text-fg-muted",
+							children: e.detail
+						})]
+					})]
+				})
+			}, e.id))
+		})]
+	})] }) : /* @__PURE__ */ u("div", {
+		className: x,
+		children: S
+	});
+}
+//#endregion
+export { p as WorkspaceSwitcher };
+
+//# sourceMappingURL=workspace-switcher.js.map

package/dist/app-shell/workspace-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-switcher.js","names":["_Fragment","Tile","w","WorkspaceSwitcher","useAppShell","current","workspaces","currentId","many","card","cx","collapsed","className","body","Fragment","DropdownMenu","DropdownMenuTrigger","labels","Glyph","DropdownMenuContent","DropdownMenuLabel","DropdownMenuRadioGroup","onSelect","id","DropdownMenuRadioItem"],"sources":["../../src/app-shell/workspace-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../menu/dropdown-menu';\nimport { useAppShell } from './app-shell-context';\n\nexport interface Workspace {\n  id: string;\n  name: string;\n  /** Logo URL; otherwise the first letter on a colored tile. */\n  logoSrc?: string;\n  /** Tile color without a logo, e.g. `var(--kf-category-2)`. */\n  color?: string;\n  /** A second line (\"Owner\", \"12 members\"). */\n  detail?: string;\n}\n\nexport interface WorkspaceSwitcherProps {\n  workspaces: Workspace[];\n  currentId: string;\n  onSelect?: (id: string) => void;\n  labels?: { switch?: string; workspaces?: string };\n  className?: string;\n}\n\nfunction Tile({ w }: { w: Workspace }) {\n  return w.logoSrc ? (\n    <img src={w.logoSrc} alt=\"\" className=\"size-8 shrink-0 rounded-sm object-cover\" />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      className=\"grid size-8 shrink-0 place-items-center rounded-sm font-display text-sm font-bold text-white\"\n      style={{ background: w.color ?? 'var(--kf-primary)' }}\n    >\n      {w.name.trim()[0]?.toUpperCase()}\n    </span>\n  );\n}\n\n/**\n * The tenant at the top of the sidebar: logo and name in a card. With more than one workspace it opens a list\n * to switch. In the collapsed sidebar rail only the tile shows.\n */\nexport function WorkspaceSwitcher({ workspaces, currentId, onSelect, labels = {}, className }: WorkspaceSwitcherProps) {\n  const { collapsed } = useAppShell();\n  const current = workspaces.find((w) => w.id === currentId) ?? workspaces[0];\n  if (!current) return null;\n  const many = workspaces.length > 1;\n  const card = cx(\n    'flex w-full min-w-0 items-center gap-2.5 rounded-md text-left font-sans text-fg',\n    // One padding and border per state: `cx` does not merge conflicting utilities.\n    collapsed ? 'justify-center p-0' : 'border border-border bg-surface p-2',\n    className,\n  );\n  const body = (\n    <>\n      <Tile w={current} />\n      {!collapsed && (\n        <span className=\"grid min-w-0 flex-1\">\n          <span className=\"truncate text-sm font-semibold\">{current.name}</span>\n          {current.detail && <span className=\"truncate text-xs text-fg-muted\">{current.detail}</span>}\n        </span>\n      )}\n    </>\n  );\n  if (!many) return <div className={card}>{body}</div>;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          className={cx(\n            card,\n            'cursor-pointer hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n          )}\n        >\n          {/* Visible text stays part of the name (\"Switch workspace SmartMuscle Admin\"). */}\n          <span className=\"sr-only\">{labels.switch ?? 'Switch workspace'}</span>\n          {body}\n          {!collapsed && <Glyph name=\"sort\" size={16} className=\"shrink-0 text-fg-muted\" />}\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"w-64\">\n        <DropdownMenuLabel>{labels.workspaces ?? 'Workspaces'}</DropdownMenuLabel>\n        <DropdownMenuRadioGroup value={current.id} onValueChange={(id) => onSelect?.(id)}>\n          {workspaces.map((w) => (\n            <DropdownMenuRadioItem key={w.id} value={w.id}>\n              <span className=\"flex min-w-0 items-center gap-2.5\">\n                <Tile w={w} />\n                <span className=\"grid min-w-0\">\n                  <span className=\"truncate\">{w.name}</span>\n                  {w.detail && <span className=\"truncate text-xs text-fg-muted\">{w.detail}</span>}\n                </span>\n              </span>\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,SAASC,EAAK,EAAE,QAAuB;CACrC,OAAOC,EAAE,UACP,kBAAC,OAAD;EAAK,KAAKA,EAAE;EAAS,KAAI;EAAG,WAAU;CAA2C,CAAA,IAEjF,kBAAC,QAAD;EACE,eAAY;EACZ,WAAU;EACV,OAAO,EAAE,YAAYA,EAAE,SAAS,oBAAoB;EAEnD,UAAAA,EAAE,KAAK,KAAK,CAAC,CAAC,EAAE,EAAE,YAAY;CAC3B,CAAA;AAEV;AAMA,SAAgBC,EAAkB,EAAE,eAAY,cAAW,aAAU,YAAS,CAAC,GAAG,gBAAqC;CACrH,IAAM,EAAE,iBAAcC,EAAY,GAC5BC,IAAUC,EAAW,MAAM,MAAMJ,EAAE,OAAOK,CAAS,KAAKD,EAAW;CACzE,IAAI,CAACD,GAAS,OAAO;CACrB,IAAMG,IAAOF,EAAW,SAAS,GAC3BG,IAAOC,EACX,mFAEAC,IAAY,uBAAuB,uCACnCC,CACF,GACMC,IACJ,kBAAAb,GAAA,EAAA,UAAA,CACE,kBAACC,GAAD,EAAM,GAAGI,EAAU,CAAA,GAClB,CAACM,KACA,kBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;GAAkC,UAAAN,EAAQ;EAAW,CAAA,GACpEA,EAAQ,UAAU,kBAAC,QAAD;GAAM,WAAU;GAAkC,UAAAA,EAAQ;EAAa,CAAA,CACtF;CAER,CAAA,CAAA,EAAA,CAAA;CAGJ,OADKG,IAEH,kBAACO,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD;EAAqB,SAAA;EACnB,UAAA,kBAAC,UAAD;GACE,MAAK;GACL,WAAWN,EACTD,GACA,0HACF;GALF,UAAA;IAQE,kBAAC,QAAD;KAAM,WAAU;KAAW,UAAAQ,EAAO,UAAU;IAAyB,CAAA;IACpEJ;IACA,CAACF,KAAa,kBAACO,GAAD;KAAO,MAAK;KAAO,MAAM;KAAI,WAAU;IAA0B,CAAA;GAC1E;;CACW,CAAA,GACrB,kBAACC,GAAD;EAAqB,OAAM;EAAQ,WAAU;EAA7C,UAAA,CACE,kBAACC,GAAD,EAAA,UAAoBH,EAAO,cAAc,aAAgC,CAAA,GACzE,kBAACI,GAAD;GAAwB,OAAOhB,EAAQ;GAAI,gBAAgB,MAAOiB,IAAWC,CAAE;GAC5E,UAAAjB,EAAW,KAAK,MACf,kBAACkB,GAAD;IAAkC,OAAOtB,EAAE;IACzC,UAAA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAACD,GAAD,EAAS,KAAI,CAAA,GACb,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAAY,UAAAC,EAAE;MAAW,CAAA,GACxCA,EAAE,UAAU,kBAAC,QAAD;OAAM,WAAU;OAAkC,UAAAA,EAAE;MAAa,CAAA,CAC1E;KACF,CAAA,CAAA;;GACe,GARKA,EAAE,EAQP,CACxB;EACqB,CAAA,CACL;CACT,CAAA,CAAA,EAAA,CAAA,IAjCE,kBAAC,OAAD;EAAK,WAAWO;EAAO,UAAAI;CAAU,CAAA;AAmCrD"}

package/dist/badge/badge.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export type BadgeVariant = 'live' | 'building' | 'client' | 'soon' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export type BadgeAppearance = 'solid' | 'soft' | 'tag';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    /** Overrides the default icon of semantic variants. Pass `false` to hide it. */
+    icon?: IconName | false;
+    /**
+     * `solid` (default) for marketing and emphasis; `soft` for tables and dashboards; `tag` for neutral labels that
+     * are not a status (a team, a plan, "You", "Default"): outlined, the variant is ignored.
+     */
+    appearance?: BadgeAppearance;
+    /** A small status dot instead of the icon (soft badges: Active, On trial, Failed…). */
+    dot?: boolean;
+    children: ReactNode;
+}
+/** Short status label. Semantic variants always pair color with an icon (or a dot) and text. */
+export declare function Badge({ variant, appearance, icon, dot, className, children, ...rest }: BadgeProps): import("react").JSX.Element;

package/dist/badge/badge.js

@@ -0,0 +1,59 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+var i = {
+	live: { className: "bg-accent text-on-accent" },
+	building: { className: "bg-surface-muted text-link" },
+	client: { className: "bg-primary text-on-primary" },
+	soon: { className: "bg-surface-muted text-fg-muted" },
+	success: {
+		className: "bg-success-solid text-on-success-solid",
+		icon: "accept"
+	},
+	warning: {
+		className: "bg-warning-solid text-on-warning-solid",
+		icon: "warning"
+	},
+	danger: {
+		className: "bg-danger-solid text-on-danger-solid",
+		icon: "error"
+	},
+	info: {
+		className: "bg-primary text-on-primary",
+		icon: "info"
+	},
+	neutral: { className: "bg-surface-muted text-fg-muted" }
+}, a = {
+	live: "bg-success-surface text-success-fg border-success-border",
+	building: "bg-surface-muted text-link border-transparent",
+	client: "bg-surface-muted text-link border-transparent",
+	soon: "bg-surface-muted text-fg-muted border-border",
+	success: "bg-success-surface text-success-fg border-success-border",
+	warning: "bg-warning-surface text-warning-fg border-warning-border",
+	danger: "bg-danger-surface text-danger-fg border-danger-border",
+	info: "bg-info-surface text-info-fg border-info-border",
+	neutral: "bg-surface-muted text-fg-muted border-border"
+};
+function o({ variant: o = "info", appearance: s = "solid", icon: c, dot: l, className: u, children: d, ...f }) {
+	let p = i[o], m = s === "tag", h = s === "soft" || m, g = l || c === !1 ? void 0 : c ?? (h ? void 0 : p.icon);
+	return /* @__PURE__ */ r("span", {
+		className: e("inline-flex items-center rounded-full font-sans leading-none", h ? "gap-1.5 border px-2.5 py-1 text-xs font-medium" : e("gap-1.5 py-1 text-[13px] font-semibold", g || l ? "pl-2 pr-3" : "px-3"), m ? "border-border bg-surface text-fg" : h ? a[o] : p.className, u),
+		...f,
+		children: [
+			l && /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-1.5 shrink-0 rounded-full bg-current"
+			}),
+			g && /* @__PURE__ */ n(t, {
+				name: g,
+				size: h ? 14 : 18
+			}),
+			d
+		]
+	});
+}
+//#endregion
+export { o as Badge };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":["VARIANTS","SOFT","Badge","rest","v","variant","tag","appearance","soft","iconName","dot","icon","cx","className","Icon","children"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\n\nexport type BadgeVariant =\n  | 'live'\n  | 'building'\n  | 'client'\n  | 'soon'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'neutral';\nexport type BadgeAppearance = 'solid' | 'soft' | 'tag';\n\nconst VARIANTS: Record<BadgeVariant, { className: string; icon?: IconName }> = {\n  live: { className: 'bg-accent text-on-accent' },\n  building: { className: 'bg-surface-muted text-link' },\n  client: { className: 'bg-primary text-on-primary' },\n  soon: { className: 'bg-surface-muted text-fg-muted' },\n  success: { className: 'bg-success-solid text-on-success-solid', icon: 'accept' },\n  warning: { className: 'bg-warning-solid text-on-warning-solid', icon: 'warning' },\n  danger: { className: 'bg-danger-solid text-on-danger-solid', icon: 'error' },\n  info: { className: 'bg-primary text-on-primary', icon: 'info' },\n  neutral: { className: 'bg-surface-muted text-fg-muted' },\n};\n\n/** Soft: tinted surface, colored text and a hairline border. For tables, lists and dashboards. */\nconst SOFT: Record<BadgeVariant, string> = {\n  live: 'bg-success-surface text-success-fg border-success-border',\n  building: 'bg-surface-muted text-link border-transparent',\n  client: 'bg-surface-muted text-link border-transparent',\n  soon: 'bg-surface-muted text-fg-muted border-border',\n  success: 'bg-success-surface text-success-fg border-success-border',\n  warning: 'bg-warning-surface text-warning-fg border-warning-border',\n  danger: 'bg-danger-surface text-danger-fg border-danger-border',\n  info: 'bg-info-surface text-info-fg border-info-border',\n  neutral: 'bg-surface-muted text-fg-muted border-border',\n};\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  variant?: BadgeVariant;\n  /** Overrides the default icon of semantic variants. Pass `false` to hide it. */\n  icon?: IconName | false;\n  /**\n   * `solid` (default) for marketing and emphasis; `soft` for tables and dashboards; `tag` for neutral labels that\n   * are not a status (a team, a plan, \"You\", \"Default\"): outlined, the variant is ignored.\n   */\n  appearance?: BadgeAppearance;\n  /** A small status dot instead of the icon (soft badges: Active, On trial, Failed…). */\n  dot?: boolean;\n  children: ReactNode;\n}\n\n/** Short status label. Semantic variants always pair color with an icon (or a dot) and text. */\nexport function Badge({ variant = 'info', appearance = 'solid', icon, dot, className, children, ...rest }: BadgeProps) {\n  const v = VARIANTS[variant];\n  const tag = appearance === 'tag';\n  const soft = appearance === 'soft' || tag;\n  const iconName = dot || icon === false ? undefined : (icon ?? (soft ? undefined : v.icon));\n  return (\n    <span\n      className={cx(\n        'inline-flex items-center rounded-full font-sans leading-none',\n        soft\n          ? 'gap-1.5 border px-2.5 py-1 text-xs font-medium'\n          : cx('gap-1.5 py-1 text-[13px] font-semibold', iconName || dot ? 'pl-2 pr-3' : 'px-3'),\n        tag ? 'border-border bg-surface text-fg' : soft ? SOFT[variant] : v.className,\n        className,\n      )}\n      {...rest}\n    >\n      {dot && <span aria-hidden=\"true\" className=\"size-1.5 shrink-0 rounded-full bg-current\" />}\n      {iconName && <Icon name={iconName} size={soft ? 14 : 18} />}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;AAgBA,IAAMA,IAAyE;CAC7E,MAAM,EAAE,WAAW,2BAA2B;CAC9C,UAAU,EAAE,WAAW,6BAA6B;CACpD,QAAQ,EAAE,WAAW,6BAA6B;CAClD,MAAM,EAAE,WAAW,iCAAiC;CACpD,SAAS;EAAE,WAAW;EAA0C,MAAM;CAAS;CAC/E,SAAS;EAAE,WAAW;EAA0C,MAAM;CAAU;CAChF,QAAQ;EAAE,WAAW;EAAwC,MAAM;CAAQ;CAC3E,MAAM;EAAE,WAAW;EAA8B,MAAM;CAAO;CAC9D,SAAS,EAAE,WAAW,iCAAiC;AACzD,GAGMC,IAAqC;CACzC,MAAM;CACN,UAAU;CACV,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,SAAS;AACX;AAiBA,SAAgBC,EAAM,EAAE,aAAU,QAAQ,gBAAa,SAAS,SAAM,QAAK,cAAW,aAAU,GAAGC,KAAoB;CACrH,IAAMC,IAAIJ,EAASK,IACbC,IAAMC,MAAe,OACrBC,IAAOD,MAAe,UAAUD,GAChCG,IAAWC,KAAOC,MAAS,KAAQ,KAAA,IAAaA,MAASH,IAAO,KAAA,IAAYJ,EAAE;CACpF,OACE,kBAAC,QAAD;EACE,WAAWQ,EACT,gEACAJ,IACI,mDACAI,EAAG,0CAA0CH,KAAYC,IAAM,cAAc,MAAM,GACvFJ,IAAM,qCAAqCE,IAAOP,EAAKI,KAAWD,EAAE,WACpES,CACF;EACA,GAAIV;EATN,UAAA;GAWGO,KAAO,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAA6C,CAAA;GACvFD,KAAY,kBAACK,GAAD;IAAM,MAAML;IAAU,MAAMD,IAAO,KAAK;GAAK,CAAA;GACzDO;EACG;;AAEV"}

package/dist/banner/banner.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export type BannerVariant = 'brand' | 'info' | 'success' | 'warning' | 'danger';
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: BannerVariant;
+    /** Overrides the variant icon; `false` hides it. */
+    icon?: IconName | false;
+    /** Main message; keep it to one sentence. */
+    children: ReactNode;
+    /** Link or button, e.g. "Update payment method". */
+    action?: ReactNode;
+    /** Shows a dismiss button. Persist the dismissal yourself (e.g. per user, per announcement id). */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /** Accessible name of the region, e.g. "Announcement". */
+    label?: string;
+}
+/**
+ * Full-width, page-level message above the content or under the header: announcements, trials,
+ * billing or outage notices. One at a time. For messages about a section use `Alert`.
+ */
+export declare function Banner({ variant, icon, children, action, onDismiss, dismissLabel, label, className, ...rest }: BannerProps): import("react").JSX.Element;

package/dist/banner/banner.js

@@ -0,0 +1,80 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/banner/banner.tsx
+var i = {
+	brand: {
+		className: "bg-surface-inverse text-on-surface-inverse border-white/10",
+		icon: "ai",
+		iconClass: "text-accent"
+	},
+	info: {
+		className: "bg-info-surface text-info-fg border-info-border",
+		icon: "info",
+		iconClass: "text-info-icon"
+	},
+	success: {
+		className: "bg-success-surface text-success-fg border-success-border",
+		icon: "accept",
+		iconClass: "text-success-icon"
+	},
+	warning: {
+		className: "bg-warning-surface text-warning-fg border-warning-border",
+		icon: "warning",
+		iconClass: "text-warning-icon"
+	},
+	danger: {
+		className: "bg-danger-surface text-danger-fg border-danger-border",
+		icon: "error",
+		iconClass: "text-danger-icon"
+	}
+};
+function a({ variant: a = "info", icon: o, children: s, action: c, onDismiss: l, dismissLabel: u = "Dismiss", label: d = "Announcement", className: f, ...p }) {
+	let m = i[a], h = o === !1 ? void 0 : o ?? m.icon;
+	return /* @__PURE__ */ n("div", {
+		role: "region",
+		"aria-label": d,
+		className: e("w-full border-b font-sans", m.className, f),
+		...p,
+		children: /* @__PURE__ */ r("div", {
+			className: "mx-auto flex max-w-[75rem] flex-wrap items-center gap-x-4 gap-y-2 px-gutter py-2.5",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex min-w-0 flex-1 items-center gap-3",
+				children: [h && /* @__PURE__ */ n(t, {
+					name: h,
+					size: 22,
+					className: e("shrink-0", m.iconClass)
+				}), /* @__PURE__ */ n("p", {
+					className: "m-0 min-w-0 text-sm font-medium [&_a]:font-semibold [&_a]:text-current [&_a]:underline",
+					children: s
+				})]
+			}), (c || l) && /* @__PURE__ */ r("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [c, l && /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": u,
+					onClick: l,
+					className: "-mr-2 grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current opacity-75 hover:bg-current/10 hover:opacity-100 focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus",
+					children: /* @__PURE__ */ n("svg", {
+						viewBox: "0 0 24 24",
+						width: "16",
+						height: "16",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: /* @__PURE__ */ n("path", {
+							d: "M6 6l12 12M18 6L6 18",
+							stroke: "currentColor",
+							strokeWidth: "2.25",
+							strokeLinecap: "round",
+							fill: "none"
+						})
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { a as Banner };
+
+//# sourceMappingURL=banner.js.map

package/dist/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","names":["VARIANTS","Banner","rest","v","variant","iconName","icon","label","cx","className","Icon","action","onDismiss","dismissLabel"],"sources":["../../src/banner/banner.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\n\nexport type BannerVariant = 'brand' | 'info' | 'success' | 'warning' | 'danger';\n\nconst VARIANTS: Record<BannerVariant, { className: string; icon: IconName; iconClass: string }> = {\n  brand: { className: 'bg-surface-inverse text-on-surface-inverse border-white/10', icon: 'ai', iconClass: 'text-accent' },\n  info: { className: 'bg-info-surface text-info-fg border-info-border', icon: 'info', iconClass: 'text-info-icon' },\n  success: { className: 'bg-success-surface text-success-fg border-success-border', icon: 'accept', iconClass: 'text-success-icon' },\n  warning: { className: 'bg-warning-surface text-warning-fg border-warning-border', icon: 'warning', iconClass: 'text-warning-icon' },\n  danger: { className: 'bg-danger-surface text-danger-fg border-danger-border', icon: 'error', iconClass: 'text-danger-icon' },\n};\n\nexport interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: BannerVariant;\n  /** Overrides the variant icon; `false` hides it. */\n  icon?: IconName | false;\n  /** Main message; keep it to one sentence. */\n  children: ReactNode;\n  /** Link or button, e.g. \"Update payment method\". */\n  action?: ReactNode;\n  /** Shows a dismiss button. Persist the dismissal yourself (e.g. per user, per announcement id). */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  /** Accessible name of the region, e.g. \"Announcement\". */\n  label?: string;\n}\n\n/**\n * Full-width, page-level message above the content or under the header: announcements, trials,\n * billing or outage notices. One at a time. For messages about a section use `Alert`.\n */\nexport function Banner({\n  variant = 'info',\n  icon,\n  children,\n  action,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  label = 'Announcement',\n  className,\n  ...rest\n}: BannerProps) {\n  const v = VARIANTS[variant];\n  const iconName = icon === false ? undefined : (icon ?? v.icon);\n  return (\n    <div\n      role=\"region\"\n      aria-label={label}\n      className={cx('w-full border-b font-sans', v.className, className)}\n      {...rest}\n    >\n      <div className=\"mx-auto flex max-w-[75rem] flex-wrap items-center gap-x-4 gap-y-2 px-gutter py-2.5\">\n        <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n          {iconName && <Icon name={iconName} size={22} className={cx('shrink-0', v.iconClass)} />}\n          <p className=\"m-0 min-w-0 text-sm font-medium [&_a]:font-semibold [&_a]:text-current [&_a]:underline\">{children}</p>\n        </div>\n        {(action || onDismiss) && (\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {action}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                aria-label={dismissLabel}\n                onClick={onDismiss}\n                className=\"-mr-2 grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current opacity-75 hover:bg-current/10 hover:opacity-100 focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus\"\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              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAMA,IAA4F;CAChG,OAAO;EAAE,WAAW;EAA8D,MAAM;EAAM,WAAW;CAAc;CACvH,MAAM;EAAE,WAAW;EAAmD,MAAM;EAAQ,WAAW;CAAiB;CAChH,SAAS;EAAE,WAAW;EAA4D,MAAM;EAAU,WAAW;CAAoB;CACjI,SAAS;EAAE,WAAW;EAA4D,MAAM;EAAW,WAAW;CAAoB;CAClI,QAAQ;EAAE,WAAW;EAAyD,MAAM;EAAS,WAAW;CAAmB;AAC7H;AAqBA,SAAgBC,EAAO,EACrB,aAAU,QACV,SACA,aACA,WACA,cACA,kBAAe,WACf,WAAQ,gBACR,cACA,GAAGC,KACW;CACd,IAAMC,IAAIH,EAASI,IACbC,IAAWC,MAAS,KAAQ,KAAA,IAAaA,KAAQH,EAAE;CACzD,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAYI;EACZ,WAAWC,EAAG,6BAA6BL,EAAE,WAAWM,CAAS;EACjE,GAAIP;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGG,KAAY,kBAACK,GAAD;KAAM,MAAML;KAAU,MAAM;KAAI,WAAWG,EAAG,YAAYL,EAAE,SAAS;IAAI,CAAA,GACtF,kBAAC,KAAD;KAAG,WAAU;KAA0F;IAAY,CAAA,CAChH;GACH,CAAA,IAAAQ,KAAUC,MACV,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGD,GACAC,KACC,kBAAC,UAAD;KACE,MAAK;KACL,cAAYC;KACZ,SAASD;KACT,WAAU;KAEV,UAAA,kBAAC,OAAD;MAAK,SAAQ;MAAY,OAAM;MAAK,QAAO;MAAK,eAAY;MAAO,WAAU;MAC3E,UAAA,kBAAC,QAAD;OAAM,GAAE;OAAuB,QAAO;OAAe,aAAY;OAAO,eAAc;OAAQ,MAAK;MAAQ,CAAA;KACxG,CAAA;IACC,CAAA,CAEP;GAEJ,CAAA,CAAA;;CACF,CAAA;AAET"}

package/dist/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbItem {
+    label: ReactNode;
+    /** Omit for the current page (last item). */
+    href?: string;
+}
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    /** Link component (e.g. Next.js `Link`). Receives `href`, `className`, `children`. */
+    linkAs?: ElementType;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+}
+/**
+ * Shows where the page sits in the hierarchy. On mobile only the parent is shown as a
+ * "back" link; from `sm` the full trail.
+ */
+export declare function Breadcrumbs({ items, linkAs: Link, label, className, ...rest }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,45 @@
+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";
+//#region src/breadcrumbs/breadcrumbs.tsx
+function i({ items: i, linkAs: a = "a", label: o = "Breadcrumb", className: s, ...c }) {
+	let l = [...i].reverse().find((e, t) => t > 0 && e.href), u = "rounded-xs text-fg-muted no-underline hover:text-fg hover:underline focus-visible:outline-3 focus-visible:outline-focus";
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": o,
+		className: e("font-sans text-sm", s),
+		...c,
+		children: [l && /* @__PURE__ */ r(a, {
+			href: l.href,
+			className: e(u, "inline-flex items-center gap-1 sm:hidden"),
+			children: [/* @__PURE__ */ n(t, {
+				name: "chevron-left",
+				size: 16
+			}), l.label]
+		}), /* @__PURE__ */ n("ol", {
+			className: "m-0 hidden list-none flex-wrap items-center gap-1.5 p-0 sm:flex",
+			children: i.map((o, s) => {
+				let c = s === i.length - 1;
+				return /* @__PURE__ */ r("li", {
+					className: "inline-flex items-center gap-1.5",
+					children: [c || !o.href ? /* @__PURE__ */ n("span", {
+						"aria-current": c ? "page" : void 0,
+						className: e(c ? "font-semibold text-fg" : "text-fg-muted"),
+						children: o.label
+					}) : /* @__PURE__ */ n(a, {
+						href: o.href,
+						className: u,
+						children: o.label
+					}), !c && /* @__PURE__ */ n(t, {
+						name: "chevron-right",
+						size: 14,
+						className: "text-fg-muted opacity-60"
+					})]
+				}, s);
+			})
+		})]
+	});
+}
+//#endregion
+export { i as Breadcrumbs };
+
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","names":["Breadcrumbs","Link","rest","parent","items","i","item","link","label","cx","className","Glyph","last"],"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Omit for the current page (last item). */\n  href?: string;\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  /** Link component (e.g. Next.js `Link`). Receives `href`, `className`, `children`. */\n  linkAs?: ElementType;\n  /** Accessible name of the navigation landmark. */\n  label?: string;\n}\n\n/**\n * Shows where the page sits in the hierarchy. On mobile only the parent is shown as a\n * \"back\" link; from `sm` the full trail.\n */\nexport function Breadcrumbs({ items, linkAs: Link = 'a', label = 'Breadcrumb', className, ...rest }: BreadcrumbsProps) {\n  const parent = [...items].reverse().find((item, i) => i > 0 && item.href);\n  const link =\n    'rounded-xs text-fg-muted no-underline hover:text-fg hover:underline focus-visible:outline-3 focus-visible:outline-focus';\n  return (\n    <nav aria-label={label} className={cx('font-sans text-sm', className)} {...rest}>\n      {parent && (\n        <Link href={parent.href} className={cx(link, 'inline-flex items-center gap-1 sm:hidden')}>\n          <Glyph name=\"chevron-left\" size={16} />\n          {parent.label}\n        </Link>\n      )}\n      <ol className=\"m-0 hidden list-none flex-wrap items-center gap-1.5 p-0 sm:flex\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          return (\n            <li key={i} className=\"inline-flex items-center gap-1.5\">\n              {last || !item.href ? (\n                <span\n                  aria-current={last ? 'page' : undefined}\n                  className={cx(last ? 'font-semibold text-fg' : 'text-fg-muted')}\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <Link href={item.href} className={link}>\n                  {item.label}\n                </Link>\n              )}\n              {!last && <Glyph name=\"chevron-right\" size={14} className=\"text-fg-muted opacity-60\" />}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;;AAsBA,SAAgBA,EAAY,EAAE,UAAO,QAAQC,IAAO,KAAK,WAAQ,cAAc,cAAW,GAAGC,KAA0B;CACrH,IAAMC,IAAS,CAAC,GAAGC,CAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAM,MAAMC,IAAI,KAAKC,EAAK,IAAI,GAClEC,IACJ;CACF,OACE,kBAAC,OAAD;EAAK,cAAYC;EAAO,WAAWC,EAAG,qBAAqBC,CAAS;EAAG,GAAIR;EAA3E,UAAA,CACGC,KACC,kBAACF,GAAD;GAAM,MAAME,EAAO;GAAM,WAAWM,EAAGF,GAAM,0CAA0C;GAAvF,UAAA,CACE,kBAACI,GAAD;IAAO,MAAK;IAAe,MAAM;GAAK,CAAA,GACrCR,EAAO,KACJ;EAER,CAAA,GAAA,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAC,EAAM,KAAK,GAAM,MAAM;IACtB,IAAMQ,IAAOP,MAAMD,EAAM,SAAS;IAClC,OACE,kBAAC,MAAD;KAAY,WAAU;KAAtB,UAAA,CACGQ,KAAQ,CAACN,EAAK,OACb,kBAAC,QAAD;MACE,gBAAcM,IAAO,SAAS,KAAA;MAC9B,WAAWH,EAAGG,IAAO,0BAA0B,eAAe;MAE7D,UAAAN,EAAK;KACF,CAAA,IAEN,kBAACL,GAAD;MAAM,MAAMK,EAAK;MAAM,WAAWC;MAC/B,UAAAD,EAAK;KACF,CAAA,GAEP,CAACM,KAAQ,kBAACD,GAAD;MAAO,MAAK;MAAgB,MAAM;MAAI,WAAU;KAA4B,CAAA,CACpF;IAdK,GAAAN,CAcL;GAER,CAAC;EACC,CAAA,CACD;;AAET"}

package/dist/button/button.d.ts

@@ -0,0 +1,38 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger' | 'link' | 'inverse' | 'inverse-outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+interface CommonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Icon before the label (mascot icons render at 20px+ in `md`). */
+    iconStart?: IconName;
+    /** Icon after the label. */
+    iconEnd?: IconName;
+    /** Shows the mascot `loading` state, keeps the width and blocks clicks. */
+    loading?: boolean;
+    fullWidth?: boolean;
+    children: ReactNode;
+}
+type AsButton = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: undefined;
+};
+type AsLink = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+};
+export type ButtonProps = AsButton | AsLink;
+/** Primary action control. Renders a link when `href` is set, a button otherwise. */
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+export type IconButtonVariant = 'ghost' | 'secondary' | 'primary' | 'danger' | 'inverse';
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    icon: IconName;
+    /** Accessible name; also shown as the native tooltip unless `title` is set. Required: the button has no text. */
+    label: string;
+    variant?: IconButtonVariant;
+    /** `sm` 32 px (table rows), `md` 40 px (toolbars, top bar). Touch screens get at least 44 px. */
+    size?: 'sm' | 'md';
+    shape?: 'round' | 'square';
+}
+/** Icon-only action (edit, delete, notifications, close). Always has an accessible `label`. */
+export declare function IconButton({ icon, label, variant, size, shape, type, title, className, ...rest }: IconButtonProps): import("react").JSX.Element;
+export {};

package/dist/button/button.js

@@ -0,0 +1,83 @@
+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 { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/button/button.tsx
+var o = {
+	primary: "bg-primary text-on-primary hover:bg-primary-hover",
+	accent: "bg-accent text-on-accent hover:bg-accent-hover",
+	secondary: "bg-transparent text-link shadow-[inset_0_0_0_1.5px_currentColor] hover:bg-surface-muted",
+	danger: "bg-danger-solid text-on-danger-solid hover:bg-danger-solid-hover",
+	link: "bg-transparent text-link !px-0 underline-offset-4 hover:underline",
+	ghost: "bg-transparent text-fg hover:bg-surface-muted",
+	inverse: "bg-white text-primary hover:bg-white/90",
+	"inverse-outline": "bg-white/10 text-white shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.45)] hover:bg-white/20"
+}, s = {
+	sm: {
+		button: "h-9 px-4 text-sm gap-2",
+		icon: 18
+	},
+	md: {
+		button: "h-11 px-5 text-[15px] gap-2",
+		icon: 20
+	},
+	lg: {
+		button: "h-14 px-7 text-[17px] gap-3",
+		icon: 22
+	}
+};
+function c(c) {
+	let { variant: l = "primary", size: u = "md", iconStart: d, iconEnd: f, loading: p = !1, fullWidth: m = !1, className: h, children: g, ..._ } = c, v = s[u], y = e("inline-flex items-center justify-center whitespace-nowrap rounded-full font-sans font-semibold", "transition-[background-color,transform] duration-150 ease-standard hover:-translate-y-px active:translate-y-0", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", "disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45", "motion-reduce:transition-none motion-reduce:hover:translate-y-0", o[l], v.button, m && "w-full", p && "pointer-events-none", h), b = /* @__PURE__ */ a(r, { children: [
+		p ? /* @__PURE__ */ i(n, { size: v.icon }) : d && /* @__PURE__ */ i(t, {
+			name: d,
+			size: v.icon
+		}),
+		/* @__PURE__ */ i("span", { children: g }),
+		!p && f && /* @__PURE__ */ i(t, {
+			name: f,
+			size: v.icon
+		})
+	] });
+	if (_.href !== void 0) {
+		let { href: e, ...t } = _;
+		return /* @__PURE__ */ i("a", {
+			href: e,
+			className: y,
+			"aria-busy": p || void 0,
+			...t,
+			children: b
+		});
+	}
+	let { type: x = "button", ...S } = _;
+	return /* @__PURE__ */ i("button", {
+		type: x,
+		className: y,
+		"aria-busy": p || void 0,
+		...S,
+		children: b
+	});
+}
+var l = {
+	ghost: "bg-transparent text-fg hover:bg-surface-muted",
+	secondary: "bg-surface text-fg shadow-[inset_0_0_0_1px_var(--kf-border)] hover:bg-surface-muted",
+	primary: "bg-primary text-on-primary hover:bg-primary-hover",
+	danger: "bg-transparent text-danger-fg hover:bg-danger-surface",
+	inverse: "bg-transparent text-white hover:bg-white/15"
+};
+function u({ icon: n, label: r, variant: a = "ghost", size: o = "md", shape: s = "round", type: c = "button", title: u, className: d, ...f }) {
+	return /* @__PURE__ */ i("button", {
+		type: c,
+		"aria-label": r,
+		title: u ?? r,
+		className: e("inline-grid shrink-0 cursor-pointer place-items-center border-0 transition-colors duration-150", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", "disabled:pointer-events-none disabled:opacity-45 pointer-coarse:min-h-11 pointer-coarse:min-w-11", o === "sm" ? "size-8" : "size-10", s === "round" ? "rounded-full" : "rounded-sm", l[a], d),
+		...f,
+		children: /* @__PURE__ */ i(t, {
+			name: n,
+			size: o === "sm" ? 18 : 20
+		})
+	});
+}
+//#endregion
+export { c as Button, u as IconButton };
+
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["_Fragment","VARIANTS","SIZES","Button","rest","props","s","size","classes","cx","variant","fullWidth","loading","className","content","Fragment","Spinner","iconStart","Icon","iconEnd","anchor","button","ICON_VARIANTS","IconButton","label","title","shape","icon"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Spinner } from '../spinner/spinner';\nimport { Icon, type IconName } from '../icon/icon';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'accent'\n  | 'secondary'\n  | 'ghost'\n  | 'danger'\n  | 'link'\n  | 'inverse'\n  | 'inverse-outline';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nconst VARIANTS: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-on-primary hover:bg-primary-hover',\n  accent: 'bg-accent text-on-accent hover:bg-accent-hover',\n  secondary: 'bg-transparent text-link shadow-[inset_0_0_0_1.5px_currentColor] hover:bg-surface-muted',\n  danger: 'bg-danger-solid text-on-danger-solid hover:bg-danger-solid-hover',\n  link: 'bg-transparent text-link !px-0 underline-offset-4 hover:underline',\n  /** Quiet actions in rows and toolbars (\"Edit\", \"Remove\", \"+ Add shift\"). */\n  ghost: 'bg-transparent text-fg hover:bg-surface-muted',\n  /** On a brand surface (page header band): white button with the brand color. */\n  inverse: 'bg-white text-primary hover:bg-white/90',\n  /** Secondary action on a brand surface. */\n  'inverse-outline': 'bg-white/10 text-white shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.45)] hover:bg-white/20',\n};\n\nconst SIZES: Record<ButtonSize, { button: string; icon: number }> = {\n  sm: { button: 'h-9 px-4 text-sm gap-2', icon: 18 },\n  md: { button: 'h-11 px-5 text-[15px] gap-2', icon: 20 },\n  lg: { button: 'h-14 px-7 text-[17px] gap-3', icon: 22 },\n};\n\ninterface CommonProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Icon before the label (mascot icons render at 20px+ in `md`). */\n  iconStart?: IconName;\n  /** Icon after the label. */\n  iconEnd?: IconName;\n  /** Shows the mascot `loading` state, keeps the width and blocks clicks. */\n  loading?: boolean;\n  fullWidth?: boolean;\n  children: ReactNode;\n}\n\ntype AsButton = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined };\ntype AsLink = CommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };\nexport type ButtonProps = AsButton | AsLink;\n\n/** Primary action control. Renders a link when `href` is set, a button otherwise. */\nexport function Button(props: ButtonProps) {\n  const { variant = 'primary', size = 'md', iconStart, iconEnd, loading = false, fullWidth = false, className, children, ...rest } = props;\n  const s = SIZES[size];\n  const classes = cx(\n    'inline-flex items-center justify-center whitespace-nowrap rounded-full font-sans font-semibold',\n    'transition-[background-color,transform] duration-150 ease-standard hover:-translate-y-px active:translate-y-0',\n    'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n    'disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45',\n    'motion-reduce:transition-none motion-reduce:hover:translate-y-0',\n    VARIANTS[variant],\n    s.button,\n    fullWidth && 'w-full',\n    loading && 'pointer-events-none',\n    className,\n  );\n  const content = (\n    <>\n      {loading ? <Spinner size={s.icon} /> : iconStart && <Icon name={iconStart} size={s.icon} />}\n      <span>{children}</span>\n      {!loading && iconEnd && <Icon name={iconEnd} size={s.icon} />}\n    </>\n  );\n\n  if (rest.href !== undefined) {\n    const { href, ...anchor } = rest as AnchorHTMLAttributes<HTMLAnchorElement>;\n    return (\n      <a href={href} className={classes} aria-busy={loading || undefined} {...anchor}>\n        {content}\n      </a>\n    );\n  }\n  const { type = 'button', ...button } = rest as ButtonHTMLAttributes<HTMLButtonElement>;\n  return (\n    <button type={type} className={classes} aria-busy={loading || undefined} {...button}>\n      {content}\n    </button>\n  );\n}\n\nexport type IconButtonVariant = 'ghost' | 'secondary' | 'primary' | 'danger' | 'inverse';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {\n  icon: IconName;\n  /** Accessible name; also shown as the native tooltip unless `title` is set. Required: the button has no text. */\n  label: string;\n  variant?: IconButtonVariant;\n  /** `sm` 32 px (table rows), `md` 40 px (toolbars, top bar). Touch screens get at least 44 px. */\n  size?: 'sm' | 'md';\n  shape?: 'round' | 'square';\n}\n\nconst ICON_VARIANTS: Record<IconButtonVariant, string> = {\n  ghost: 'bg-transparent text-fg hover:bg-surface-muted',\n  secondary: 'bg-surface text-fg shadow-[inset_0_0_0_1px_var(--kf-border)] hover:bg-surface-muted',\n  primary: 'bg-primary text-on-primary hover:bg-primary-hover',\n  danger: 'bg-transparent text-danger-fg hover:bg-danger-surface',\n  inverse: 'bg-transparent text-white hover:bg-white/15',\n};\n\n/** Icon-only action (edit, delete, notifications, close). Always has an accessible `label`. */\nexport function IconButton({\n  icon,\n  label,\n  variant = 'ghost',\n  size = 'md',\n  shape = 'round',\n  type = 'button',\n  title,\n  className,\n  ...rest\n}: IconButtonProps) {\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      title={title ?? label}\n      className={cx(\n        'inline-grid shrink-0 cursor-pointer place-items-center border-0 transition-colors duration-150',\n        'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n        'disabled:pointer-events-none disabled:opacity-45 pointer-coarse:min-h-11 pointer-coarse:min-w-11',\n        size === 'sm' ? 'size-8' : 'size-10',\n        shape === 'round' ? 'rounded-full' : 'rounded-sm',\n        ICON_VARIANTS[variant],\n        className,\n      )}\n      {...rest}\n    >\n      <Icon name={icon} size={size === 'sm' ? 18 : 20} />\n    </button>\n  );\n}\n"],"mappings":";;;;;AAgBA,IAAMC,IAA0C;CAC9C,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,MAAM;CAEN,OAAO;CAEP,SAAS;CAET,mBAAmB;AACrB,GAEMC,IAA8D;CAClE,IAAI;EAAE,QAAQ;EAA0B,MAAM;CAAG;CACjD,IAAI;EAAE,QAAQ;EAA+B,MAAM;CAAG;CACtD,IAAI;EAAE,QAAQ;EAA+B,MAAM;CAAG;AACxD;AAoBA,SAAgBC,EAAO,GAAoB;CACzC,IAAM,EAAE,aAAU,WAAW,UAAO,MAAM,cAAW,YAAS,aAAU,IAAO,eAAY,IAAO,cAAW,aAAU,GAAGC,MAASC,GAC7HC,IAAIJ,EAAMK,IACVC,IAAUC,EACd,kGACA,iHACA,sFACA,+GACA,mEACAR,EAASS,IACTJ,EAAE,QACFK,KAAa,UACbC,KAAW,uBACXC,CACF,GACMC,IACJ,kBAAAd,GAAA,EAAA,UAAA;EACGY,IAAU,kBAACI,GAAD,EAAS,MAAMV,EAAE,KAAO,CAAA,IAAIW,KAAa,kBAACC,GAAD;GAAM,MAAMD;GAAW,MAAMX,EAAE;EAAO,CAAA;EAC1F,kBAAC,QAAD,EAAO,YAAe,CAAA;EACrB,CAACM,KAAWO,KAAW,kBAACD,GAAD;GAAM,MAAMC;GAAS,MAAMb,EAAE;EAAO,CAAA;CAC5D,EAAA,CAAA;CAGJ,IAAIF,EAAK,SAAS,KAAA,GAAW;EAC3B,IAAM,EAAE,SAAM,GAAGgB,MAAWhB;EAC5B,OACE,kBAAC,KAAD;GAAS;GAAM,WAAWI;GAAS,aAAWI,KAAW,KAAA;GAAW,GAAIQ;GACrE,UAAAN;EACA,CAAA;CAEP;CACA,IAAM,EAAE,UAAO,UAAU,GAAGO,MAAWjB;CACvC,OACE,kBAAC,UAAD;EAAc;EAAM,WAAWI;EAAS,aAAWI,KAAW,KAAA;EAAW,GAAIS;EAC1E,UAAAP;CACK,CAAA;AAEZ;AAcA,IAAMQ,IAAmD;CACvD,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAGA,SAAgBC,EAAW,EACzB,SACA,UACA,aAAU,SACV,UAAO,MACP,WAAQ,SACR,UAAO,UACP,UACA,cACA,GAAGnB,KACe;CAClB,OACE,kBAAC,UAAD;EACQ;EACN,cAAYoB;EACZ,OAAOC,KAASD;EAChB,WAAWf,EACT,kGACA,sFACA,oGACAF,MAAS,OAAO,WAAW,WAC3BmB,MAAU,UAAU,iBAAiB,cACrCJ,EAAcZ,IACdG,CACF;EACA,GAAIT;EAEJ,UAAA,kBAACc,GAAD;GAAM,MAAMS;GAAM,MAAMpB,MAAS,OAAO,KAAK;EAAK,CAAA;CAC5C,CAAA;AAEZ"}