@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/lists/lists.d.ts

@@ -0,0 +1,76 @@
+import type { ElementType, ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+export interface Stat {
+    label: string;
+    value: ReactNode;
+    /** A small line under the value ("+2 vs last cycle"). */
+    sub?: ReactNode;
+    /** A "View" link under the stat. */
+    href?: string;
+    linkLabel?: string;
+}
+export interface StatGridProps {
+    stats: Stat[];
+    /** Columns from 1024px; defaults to the number of stats (max 4). Two columns from 640px. */
+    columns?: 2 | 3 | 4;
+    linkAs?: ElementType;
+    className?: string;
+}
+/**
+ * Several small stats in one card, with dividers between them ("For you", a client's summary). For a single big
+ * number with a trend use `MetricCard`.
+ */
+export declare function StatGrid({ stats, columns, linkAs: Link, className }: StatGridProps): import("react").JSX.Element;
+export interface ActionListProps {
+    children: ReactNode;
+    /** `plain` (default): rows split by lines, for inside a card. `bordered`: its own rounded border (sessions, devices). */
+    appearance?: 'plain' | 'bordered';
+    'aria-label'?: string;
+    className?: string;
+}
+/** Rows of things to act on: tasks, recent kudos, suggestions, templates, connected devices. */
+export declare function ActionList({ children, appearance, className, ...rest }: ActionListProps): import("react").JSX.Element;
+export interface ActionListItemProps {
+    title: ReactNode;
+    /** A small line under the title ("Due tomorrow · Operations"). */
+    meta?: ReactNode;
+    /** An avatar or any leading media. */
+    media?: ReactNode;
+    /** An icon tile instead of `media`. */
+    icon?: IconName;
+    /** Trailing content: a button ("Set up"), a value ("gave 13 · received 13") or a badge. */
+    action?: ReactNode;
+    /** Makes the title a link to the item. */
+    href?: string;
+    linkAs?: ElementType;
+    className?: string;
+}
+export declare function ActionListItem({ title, meta, media, icon, action, href, linkAs: Link, className, }: ActionListItemProps): import("react").JSX.Element;
+/** A list with check icons ("Includes", plan features, onboarding steps done). `PlanCard` uses it for its features. */
+export declare function CheckList({ items, tone, marker, className, }: {
+    items: ReactNode[];
+    tone?: 'success' | 'primary';
+    /** `circle`: the check in a tinted circle. `plain`: the check alone (dense lists, plan features). */
+    marker?: 'circle' | 'plain';
+    className?: string;
+}): import("react").JSX.Element;
+export interface Device {
+    id: string;
+    name: string;
+    icon?: IconName;
+    /** "Quito · Last used 2 days ago" */
+    meta?: string;
+    /** This device: shown with a badge instead of "Disconnect". */
+    current?: boolean;
+}
+/** Connected devices or sessions with their last use and "Disconnect" (security settings). */
+export declare function DeviceList({ devices, onDisconnect, labels, className, }: {
+    devices: Device[];
+    onDisconnect: (id: string) => void;
+    labels?: {
+        current?: string;
+        disconnect?: string;
+        list?: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lists/lists.js

@@ -0,0 +1,133 @@
+import { cx as e } from "../lib/cx.js";
+import { Button as t } from "../button/button.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { IconTile as r } from "../icon/icon-tile.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/lists/lists.tsx
+var o = {
+	2: "lg:grid-cols-2",
+	3: "lg:grid-cols-3",
+	4: "lg:grid-cols-4"
+};
+function s({ stats: t, columns: r, linkAs: s = "a", className: c }) {
+	let l = r ?? Math.min(Math.max(t.length, 2), 4);
+	return /* @__PURE__ */ i("dl", {
+		className: e("m-0 grid overflow-hidden rounded-lg border border-border bg-surface font-sans sm:grid-cols-2", o[l], c),
+		children: t.map((e) => /* @__PURE__ */ a("div", {
+			className: "grid content-start gap-1 p-card shadow-[1px_0_0_var(--kf-border),0_1px_0_var(--kf-border)]",
+			children: [
+				/* @__PURE__ */ i("dt", {
+					className: "text-sm text-fg-muted",
+					children: e.label
+				}),
+				/* @__PURE__ */ i("dd", {
+					className: "m-0 font-display text-2xl font-bold tracking-tight text-fg tabular-nums",
+					children: e.value
+				}),
+				e.sub && /* @__PURE__ */ i("dd", {
+					className: "m-0 text-xs text-fg-muted",
+					children: e.sub
+				}),
+				e.href && /* @__PURE__ */ i("dd", {
+					className: "m-0 mt-1",
+					children: /* @__PURE__ */ a(s, {
+						href: e.href,
+						className: "inline-flex items-center gap-1 rounded-xs text-sm font-semibold text-link no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+						children: [e.linkLabel ?? "View", /* @__PURE__ */ i(n, {
+							name: "chevron-right",
+							size: 14
+						})]
+					})
+				})
+			]
+		}, e.label))
+	});
+}
+function c({ children: t, appearance: n = "plain", className: r, ...a }) {
+	return /* @__PURE__ */ i("ul", {
+		...a,
+		className: e("m-0 list-none divide-y divide-border p-0 font-sans", n === "bordered" && "rounded-lg border border-border bg-surface px-4", r),
+		children: t
+	});
+}
+function l({ title: t, meta: n, media: o, icon: s, action: c, href: l, linkAs: u = "a", className: d }) {
+	return /* @__PURE__ */ a("li", {
+		className: e("flex items-center gap-3 py-3", d),
+		children: [
+			o ?? (s && /* @__PURE__ */ i(r, {
+				icon: s,
+				size: "sm",
+				tone: "muted"
+			})),
+			/* @__PURE__ */ a("div", {
+				className: "grid min-w-0 flex-1 gap-0.5",
+				children: [l ? /* @__PURE__ */ i(u, {
+					href: l,
+					className: "truncate rounded-xs text-[15px] font-semibold text-fg no-underline hover:text-link hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+					children: t
+				}) : /* @__PURE__ */ i("span", {
+					className: "truncate text-[15px] font-semibold text-fg",
+					children: t
+				}), n && /* @__PURE__ */ i("span", {
+					className: "truncate text-sm text-fg-muted",
+					children: n
+				})]
+			}),
+			c && /* @__PURE__ */ i("div", {
+				className: "flex shrink-0 items-center gap-2 text-sm text-fg-muted",
+				children: c
+			})
+		]
+	});
+}
+function u({ items: t, tone: r = "success", marker: o = "circle", className: s }) {
+	let c = r === "success" ? "text-success-icon" : "text-primary";
+	return /* @__PURE__ */ i("ul", {
+		className: e("m-0 grid list-none p-0 font-sans text-[15px] text-fg", o === "plain" ? "gap-2.5" : "gap-2", s),
+		children: t.map((t, s) => /* @__PURE__ */ a("li", {
+			className: "flex items-start gap-2.5",
+			children: [o === "plain" ? /* @__PURE__ */ i(n, {
+				name: "check",
+				size: 18,
+				className: e("mt-0.5 shrink-0", c)
+			}) : /* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				className: e("mt-0.5 grid size-5 shrink-0 place-items-center rounded-full", r === "success" ? "bg-success-surface" : "bg-info-surface", c),
+				children: /* @__PURE__ */ i(n, {
+					name: "check",
+					size: 12,
+					strokeWidth: 3
+				})
+			}), /* @__PURE__ */ i("span", {
+				className: "min-w-0",
+				children: t
+			})]
+		}, s))
+	});
+}
+function d({ devices: e, onDisconnect: n, labels: r = {}, className: a }) {
+	return /* @__PURE__ */ i(c, {
+		appearance: "bordered",
+		"aria-label": r.list ?? "Devices",
+		className: a,
+		children: e.map((e) => /* @__PURE__ */ i(l, {
+			icon: e.icon ?? "c-website",
+			title: e.name,
+			meta: e.meta,
+			action: e.current ? /* @__PURE__ */ i("span", {
+				className: "rounded-full bg-success-surface px-2 py-0.5 text-xs font-semibold text-success-fg",
+				children: r.current ?? "This device"
+			}) : /* @__PURE__ */ i(t, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => n(e.id),
+				"aria-label": `${r.disconnect ?? "Disconnect"} ${e.name}`,
+				children: r.disconnect ?? "Disconnect"
+			})
+		}, e.id))
+	});
+}
+//#endregion
+export { c as ActionList, l as ActionListItem, u as CheckList, d as DeviceList, s as StatGrid };
+
+//# sourceMappingURL=lists.js.map

package/dist/lists/lists.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists.js","names":["COLS","StatGrid","Link","cols","columns","stats","cx","className","s","Glyph","ActionList","rest","appearance","ActionListItem","media","icon","IconTile","href","title","meta","action","CheckList","color","tone","marker","items","item","i","DeviceList","labels","devices","d","Button","onDisconnect"],"sources":["../../src/lists/lists.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile } from '../icon/icon-tile';\nimport { Glyph } from '../lib/glyphs';\nimport type { IconName } from '../icon/icon';\nimport { Button } from '../button/button';\n\n/* ---------------- StatGrid ---------------- */\n\nexport interface Stat {\n  label: string;\n  value: ReactNode;\n  /** A small line under the value (\"+2 vs last cycle\"). */\n  sub?: ReactNode;\n  /** A \"View\" link under the stat. */\n  href?: string;\n  linkLabel?: string;\n}\n\nexport interface StatGridProps {\n  stats: Stat[];\n  /** Columns from 1024px; defaults to the number of stats (max 4). Two columns from 640px. */\n  columns?: 2 | 3 | 4;\n  linkAs?: ElementType;\n  className?: string;\n}\n\nconst COLS = { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4' };\n\n/**\n * Several small stats in one card, with dividers between them (\"For you\", a client's summary). For a single big\n * number with a trend use `MetricCard`.\n */\nexport function StatGrid({ stats, columns, linkAs: Link = 'a', className }: StatGridProps) {\n  const cols = columns ?? (Math.min(Math.max(stats.length, 2), 4) as 2 | 3 | 4);\n  return (\n    // Each stat draws its right and bottom divider as a shadow; the outer ones are clipped by the card, so empty\n    // cells in the last row stay plain surface instead of a gray block.\n    <dl\n      className={cx(\n        'm-0 grid overflow-hidden rounded-lg border border-border bg-surface font-sans sm:grid-cols-2',\n        COLS[cols],\n        className,\n      )}\n    >\n      {stats.map((s) => (\n        <div\n          key={s.label}\n          className=\"grid content-start gap-1 p-card shadow-[1px_0_0_var(--kf-border),0_1px_0_var(--kf-border)]\"\n        >\n          <dt className=\"text-sm text-fg-muted\">{s.label}</dt>\n          <dd className=\"m-0 font-display text-2xl font-bold tracking-tight text-fg tabular-nums\">{s.value}</dd>\n          {s.sub && <dd className=\"m-0 text-xs text-fg-muted\">{s.sub}</dd>}\n          {s.href && (\n            <dd className=\"m-0 mt-1\">\n              <Link\n                href={s.href}\n                className=\"inline-flex items-center gap-1 rounded-xs text-sm font-semibold text-link no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n              >\n                {s.linkLabel ?? 'View'}\n                <Glyph name=\"chevron-right\" size={14} />\n              </Link>\n            </dd>\n          )}\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n/* ---------------- ActionList ---------------- */\n\nexport interface ActionListProps {\n  children: ReactNode;\n  /** `plain` (default): rows split by lines, for inside a card. `bordered`: its own rounded border (sessions, devices). */\n  appearance?: 'plain' | 'bordered';\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** Rows of things to act on: tasks, recent kudos, suggestions, templates, connected devices. */\nexport function ActionList({ children, appearance = 'plain', className, ...rest }: ActionListProps) {\n  return (\n    <ul\n      {...rest}\n      className={cx(\n        'm-0 list-none divide-y divide-border p-0 font-sans',\n        appearance === 'bordered' && 'rounded-lg border border-border bg-surface px-4',\n        className,\n      )}\n    >\n      {children}\n    </ul>\n  );\n}\n\nexport interface ActionListItemProps {\n  title: ReactNode;\n  /** A small line under the title (\"Due tomorrow · Operations\"). */\n  meta?: ReactNode;\n  /** An avatar or any leading media. */\n  media?: ReactNode;\n  /** An icon tile instead of `media`. */\n  icon?: IconName;\n  /** Trailing content: a button (\"Set up\"), a value (\"gave 13 · received 13\") or a badge. */\n  action?: ReactNode;\n  /** Makes the title a link to the item. */\n  href?: string;\n  linkAs?: ElementType;\n  className?: string;\n}\n\nexport function ActionListItem({\n  title,\n  meta,\n  media,\n  icon,\n  action,\n  href,\n  linkAs: Link = 'a',\n  className,\n}: ActionListItemProps) {\n  return (\n    <li className={cx('flex items-center gap-3 py-3', className)}>\n      {media ?? (icon && <IconTile icon={icon} size=\"sm\" tone=\"muted\" />)}\n      <div className=\"grid min-w-0 flex-1 gap-0.5\">\n        {href ? (\n          <Link\n            href={href}\n            className=\"truncate rounded-xs text-[15px] font-semibold text-fg no-underline hover:text-link hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n          >\n            {title}\n          </Link>\n        ) : (\n          <span className=\"truncate text-[15px] font-semibold text-fg\">{title}</span>\n        )}\n        {meta && <span className=\"truncate text-sm text-fg-muted\">{meta}</span>}\n      </div>\n      {action && <div className=\"flex shrink-0 items-center gap-2 text-sm text-fg-muted\">{action}</div>}\n    </li>\n  );\n}\n\n/* ---------------- CheckList ---------------- */\n\n/** A list with check icons (\"Includes\", plan features, onboarding steps done). `PlanCard` uses it for its features. */\nexport function CheckList({\n  items,\n  tone = 'success',\n  marker = 'circle',\n  className,\n}: {\n  items: ReactNode[];\n  tone?: 'success' | 'primary';\n  /** `circle`: the check in a tinted circle. `plain`: the check alone (dense lists, plan features). */\n  marker?: 'circle' | 'plain';\n  className?: string;\n}) {\n  const color = tone === 'success' ? 'text-success-icon' : 'text-primary';\n  return (\n    <ul\n      className={cx(\n        'm-0 grid list-none p-0 font-sans text-[15px] text-fg',\n        marker === 'plain' ? 'gap-2.5' : 'gap-2',\n        className,\n      )}\n    >\n      {items.map((item, i) => (\n        <li key={i} className=\"flex items-start gap-2.5\">\n          {marker === 'plain' ? (\n            <Glyph name=\"check\" size={18} className={cx('mt-0.5 shrink-0', color)} />\n          ) : (\n            <span\n              aria-hidden=\"true\"\n              className={cx(\n                'mt-0.5 grid size-5 shrink-0 place-items-center rounded-full',\n                tone === 'success' ? 'bg-success-surface' : 'bg-info-surface',\n                color,\n              )}\n            >\n              <Glyph name=\"check\" size={12} strokeWidth={3} />\n            </span>\n          )}\n          <span className=\"min-w-0\">{item}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/* ---------------- DeviceList ---------------- */\n\nexport interface Device {\n  id: string;\n  name: string;\n  icon?: IconName;\n  /** \"Quito · Last used 2 days ago\" */\n  meta?: string;\n  /** This device: shown with a badge instead of \"Disconnect\". */\n  current?: boolean;\n}\n\n/** Connected devices or sessions with their last use and \"Disconnect\" (security settings). */\nexport function DeviceList({\n  devices,\n  onDisconnect,\n  labels = {},\n  className,\n}: {\n  devices: Device[];\n  onDisconnect: (id: string) => void;\n  labels?: { current?: string; disconnect?: string; list?: string };\n  className?: string;\n}) {\n  return (\n    <ActionList appearance=\"bordered\" aria-label={labels.list ?? 'Devices'} className={className}>\n      {devices.map((d) => (\n        <ActionListItem\n          key={d.id}\n          icon={d.icon ?? 'c-website'}\n          title={d.name}\n          meta={d.meta}\n          action={\n            d.current ? (\n              <span className=\"rounded-full bg-success-surface px-2 py-0.5 text-xs font-semibold text-success-fg\">\n                {labels.current ?? 'This device'}\n              </span>\n            ) : (\n              <Button\n                size=\"sm\"\n                variant=\"ghost\"\n                onClick={() => onDisconnect(d.id)}\n                aria-label={`${labels.disconnect ?? 'Disconnect'} ${d.name}`}\n              >\n                {labels.disconnect ?? 'Disconnect'}\n              </Button>\n            )\n          }\n        />\n      ))}\n    </ActionList>\n  );\n}\n"],"mappings":"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"}

package/dist/locale-switch/locale-switch.d.ts

@@ -0,0 +1,29 @@
+import type { ElementType } from 'react';
+export interface LocaleOption {
+    /** BCP 47 code ("en", "es"), used for `hreflang` and `lang`. */
+    code: string;
+    /** Short label shown in the segmented form ("EN"). */
+    short: string;
+    /** Full name in its own language ("English", "Español"). */
+    label: string;
+    /** The same page in this language. */
+    href: string;
+}
+export interface LocaleSwitchProps {
+    locales: LocaleOption[];
+    /** The current page's locale code. */
+    current: string;
+    /** `segmented` (headers): ES / EN links in one pill. `select` (footers): a compact dropdown with full names. */
+    variant?: 'segmented' | 'select';
+    /** Link component (e.g. Next.js `Link`). */
+    linkAs?: ElementType;
+    /** `select` only: navigate with your router; defaults to a full page load of the option's `href`. */
+    onNavigate?: (option: LocaleOption) => void;
+    label?: string;
+    className?: string;
+}
+/**
+ * Switches the page's language. Links, not radio buttons: each language is the same page at another URL. No flags:
+ * a flag is a country, not a language (ADR-0013, decision 3).
+ */
+export declare function LocaleSwitch({ locales, current, variant, linkAs: Link, onNavigate, label, className, }: LocaleSwitchProps): import("react").JSX.Element;

package/dist/locale-switch/locale-switch.js

@@ -0,0 +1,62 @@
+"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, DropdownMenuRadioGroup as i, DropdownMenuRadioItem as a, DropdownMenuTrigger as o } from "../menu/dropdown-menu.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/locale-switch/locale-switch.tsx
+function l({ locales: l, current: u, variant: d = "segmented", linkAs: f = "a", onNavigate: p, label: m = "Language", className: h }) {
+	let g = l.find((e) => e.code === u) ?? l[0];
+	return d === "select" ? /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(o, {
+		asChild: !0,
+		children: /* @__PURE__ */ c("button", {
+			type: "button",
+			className: e("inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-surface px-3 font-sans text-sm font-semibold text-fg hover:border-fg-muted/50", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11", h),
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "sr-only",
+					children: [m, ": "]
+				}),
+				g?.label,
+				/* @__PURE__ */ s(t, {
+					name: "chevron-down",
+					size: 14
+				})
+			]
+		})
+	}), /* @__PURE__ */ s(r, {
+		align: "start",
+		children: /* @__PURE__ */ s(i, {
+			value: u,
+			onValueChange: (e) => {
+				let t = l.find((t) => t.code === e);
+				t && (p ?? ((e) => window.location.assign(e.href)))(t);
+			},
+			children: l.map((e) => /* @__PURE__ */ s(a, {
+				value: e.code,
+				lang: e.code,
+				children: e.label
+			}, e.code))
+		})
+	})] }) : /* @__PURE__ */ s("nav", {
+		"aria-label": m,
+		className: e("inline-flex gap-0.5 rounded-full border border-border bg-surface p-1 font-sans", h),
+		children: l.map((t) => {
+			let n = t.code === u;
+			return /* @__PURE__ */ s(f, {
+				href: t.href,
+				hrefLang: t.code,
+				lang: t.code,
+				"aria-current": n ? "true" : void 0,
+				className: e("inline-grid min-h-8 min-w-10 place-items-center rounded-full px-2.5 text-xs font-bold no-underline pointer-coarse:min-h-11", "focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus", n ? "bg-primary text-on-primary" : "text-fg-muted hover:text-fg"),
+				children: /* @__PURE__ */ c("span", { children: [t.short, /* @__PURE__ */ c("span", {
+					className: "sr-only",
+					children: [" · ", t.label]
+				})] })
+			}, t.code);
+		})
+	});
+}
+//#endregion
+export { l as LocaleSwitch };
+
+//# sourceMappingURL=locale-switch.js.map

package/dist/locale-switch/locale-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-switch.js","names":["LocaleSwitch","Link","active","locales","l","current","variant","DropdownMenu","DropdownMenuTrigger","cx","className","label","Glyph","DropdownMenuContent","DropdownMenuRadioGroup","o","code","onNavigate","x","DropdownMenuRadioItem","on"],"sources":["../../src/locale-switch/locale-switch.tsx"],"sourcesContent":["'use client';\nimport type { ElementType } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../menu/dropdown-menu';\n\n/* ---------------- LocaleSwitch ---------------- */\n\nexport interface LocaleOption {\n  /** BCP 47 code (\"en\", \"es\"), used for `hreflang` and `lang`. */\n  code: string;\n  /** Short label shown in the segmented form (\"EN\"). */\n  short: string;\n  /** Full name in its own language (\"English\", \"Español\"). */\n  label: string;\n  /** The same page in this language. */\n  href: string;\n}\n\nexport interface LocaleSwitchProps {\n  locales: LocaleOption[];\n  /** The current page's locale code. */\n  current: string;\n  /** `segmented` (headers): ES / EN links in one pill. `select` (footers): a compact dropdown with full names. */\n  variant?: 'segmented' | 'select';\n  /** Link component (e.g. Next.js `Link`). */\n  linkAs?: ElementType;\n  /** `select` only: navigate with your router; defaults to a full page load of the option's `href`. */\n  onNavigate?: (option: LocaleOption) => void;\n  label?: string;\n  className?: string;\n}\n\n/**\n * Switches the page's language. Links, not radio buttons: each language is the same page at another URL. No flags:\n * a flag is a country, not a language (ADR-0013, decision 3).\n */\nexport function LocaleSwitch({\n  locales,\n  current,\n  variant = 'segmented',\n  linkAs: Link = 'a',\n  onNavigate,\n  label = 'Language',\n  className,\n}: LocaleSwitchProps) {\n  const active = locales.find((l) => l.code === current) ?? locales[0];\n  if (variant === 'select') {\n    return (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            className={cx(\n              'inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-surface px-3 font-sans text-sm font-semibold text-fg hover:border-fg-muted/50',\n              'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11',\n              className,\n            )}\n          >\n            <span className=\"sr-only\">{label}: </span>\n            {active?.label}\n            <Glyph name=\"chevron-down\" size={14} />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuRadioGroup\n            value={current}\n            onValueChange={(code) => {\n              const o = locales.find((l) => l.code === code);\n              if (o) (onNavigate ?? ((x: LocaleOption) => window.location.assign(x.href)))(o);\n            }}\n          >\n            {locales.map((l) => (\n              <DropdownMenuRadioItem key={l.code} value={l.code} lang={l.code}>\n                {l.label}\n              </DropdownMenuRadioItem>\n            ))}\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    );\n  }\n  return (\n    <nav\n      aria-label={label}\n      className={cx('inline-flex gap-0.5 rounded-full border border-border bg-surface p-1 font-sans', className)}\n    >\n      {locales.map((l) => {\n        const on = l.code === current;\n        return (\n          <Link\n            key={l.code}\n            href={l.href}\n            hrefLang={l.code}\n            lang={l.code}\n            aria-current={on ? 'true' : undefined}\n            className={cx(\n              'inline-grid min-h-8 min-w-10 place-items-center rounded-full px-2.5 text-xs font-bold no-underline pointer-coarse:min-h-11',\n              'focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus',\n              on ? 'bg-primary text-on-primary' : 'text-fg-muted hover:text-fg',\n            )}\n          >\n            {/* Visible \"EN\" stays part of the accessible name (WCAG 2.5.3). */}\n            <span>\n              {l.short}\n              <span className=\"sr-only\"> · {l.label}</span>\n            </span>\n          </Link>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;AA2CA,SAAgBA,EAAa,EAC3B,YACA,YACA,aAAU,aACV,QAAQC,IAAO,KACf,eACA,WAAQ,YACR,gBACoB;CACpB,IAAMC,IAASC,EAAQ,MAAM,MAAMC,EAAE,SAASC,CAAO,KAAKF,EAAQ;CAoClE,OAnCIG,MAAY,WAEZ,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD;EAAqB,SAAA;EACnB,UAAA,kBAAC,UAAD;GACE,MAAK;GACL,WAAWC,EACT,8KACA,8GACAC,CACF;GANF,UAAA;IAQE,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA2BC,GAAM,IAAQ;;IACxCT,GAAQ;IACT,kBAACU,GAAD;KAAO,MAAK;KAAe,MAAM;IAAK,CAAA;GAChC;;CACW,CAAA,GACrB,kBAACC,GAAD;EAAqB,OAAM;EACzB,UAAA,kBAACC,GAAD;GACE,OAAOT;GACP,gBAAgB,MAAS;IACvB,IAAMU,IAAIZ,EAAQ,MAAM,MAAMC,EAAE,SAASY,CAAI;IAC7C,AAAID,MAAIE,OAAgB,MAAoB,OAAO,SAAS,OAAOC,EAAE,IAAI,GAAA,CAAIH,CAAC;GAChF;GAEC,UAAAZ,EAAQ,KAAK,MACZ,kBAACgB,GAAD;IAAoC,OAAOf,EAAE;IAAM,MAAMA,EAAE;IACxD,UAAAA,EAAE;GACkB,GAFKA,EAAE,IAEP,CACxB;EACqB,CAAA;CACL,CAAA,CACT,EAAA,CAAA,IAIhB,kBAAC,OAAD;EACE,cAAYO;EACZ,WAAWF,EAAG,kFAAkFC,CAAS;EAExG,UAAAP,EAAQ,KAAK,MAAM;GAClB,IAAMiB,IAAKhB,EAAE,SAASC;GACtB,OACE,kBAACJ,GAAD;IAEE,MAAMG,EAAE;IACR,UAAUA,EAAE;IACZ,MAAMA,EAAE;IACR,gBAAcgB,IAAK,SAAS,KAAA;IAC5B,WAAWX,EACT,8HACA,sFACAW,IAAK,+BAA+B,6BACtC;IAGA,UAAA,kBAAC,QAAD,EAAA,UAAA,CACGhB,EAAE,OACH,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA0B,OAAIA,EAAE,KAAY;IACxC,CAAA,CAAA,EAAA,CAAA;GACF,GAhBCA,EAAE,IAgBH;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/logo/logo.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from 'react';
+export declare const logoVariants: readonly ["full", "mark", "lockup", "wordmark"];
+export type LogoVariant = (typeof logoVariants)[number];
+export interface LogoProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * - `full` (default): KODFFE, the eye is the O and the open D is the D. Minimum width 96 px.
+     * - `mark`: the eye and open D alone (avatars, favicon, the collapsed header). Minimum size 16 px.
+     * - `lockup`: the mark next to the plain wordmark, for wide formats. Minimum width 96 px.
+     * - `wordmark`: the letters alone.
+     */
+    variant?: LogoVariant;
+    /**
+     * `scroll` (`full` only): for sticky headers. The full logo shows at the top of the page and collapses to the mark
+     * after 80 px of scroll; hovering or focusing the logo's link brings the name back. `none` (default): static.
+     */
+    collapse?: 'none' | 'scroll';
+    /** Heavier strokes (x1.3) and a bigger pupil for the mark at 32 px and under. Only for `mark`. */
+    small?: boolean;
+    /**
+     * Classes for the eye ring and open D only: `text-primary` follows the theme; `text-mint-500` suits a fixed dark
+     * background. The letters and the pupil take the inherited text color.
+     */
+    markClassName?: string;
+}
+/**
+ * The Kodffe logo in every layout, option B "Open D" (docs/adr/0012-open-d-logo.md). Size it with `font-size`
+ * (e.g. `text-2xl`). Always named "Kodffe". The `full` logo is built from three pieces (K | mark | F F E) so the mark
+ * can stay while the letters fade; only transform and opacity animate (no layout shift). Do not outline it, add
+ * shadows or change the proportions.
+ */
+export declare function Logo({ variant, collapse, small, markClassName, className, style, ...rest }: LogoProps): import("react").JSX.Element;

package/dist/logo/logo.js

@@ -0,0 +1,157 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useState as a } from "react";
+//#region src/logo/logo.tsx
+var o = [
+	"full",
+	"mark",
+	"lockup",
+	"wordmark"
+], s = "M3.5 0V-36H9.53V-19.3L23.9 -36H31.3L15.83 -18.35L32.35 0H24.7L9.53 -16.8V0Z", c = "M93.44 0V-36H115.12V-29.98H99.47V-21H112.12V-15H99.47V0ZM120.12 0V-36H141.79V-29.98H126.14V-21H138.79V-15H126.14V0ZM146.79 0V-36H170.04V-30.35H152.82V-21.48H167.04V-15.83H152.82V-5.65H170.04V0Z", l = "M3.5 0V-36H9.53V-19.3L23.9 -36H31.3L15.83 -18.35L32.35 0H24.7L9.53 -16.8V0ZM49.65 0.75Q44.25 0.75 40.4 -1.61Q36.55 -3.98 34.49 -8.2Q32.42 -12.43 32.42 -18Q32.42 -23.58 34.49 -27.8Q36.55 -32.02 40.4 -34.39Q44.25 -36.75 49.65 -36.75Q55.05 -36.75 58.91 -34.39Q62.78 -32.02 64.84 -27.8Q66.9 -23.58 66.9 -18Q66.9 -12.43 64.84 -8.2Q62.78 -3.98 58.91 -1.61Q55.05 0.75 49.65 0.75ZM49.65 -4.93Q53.28 -4.9 55.69 -6.53Q58.1 -8.15 59.31 -11.1Q60.53 -14.05 60.53 -18Q60.53 -21.95 59.31 -24.86Q58.1 -27.78 55.69 -29.4Q53.28 -31.03 49.65 -31.08Q46.03 -31.1 43.62 -29.48Q41.23 -27.85 40.01 -24.9Q38.8 -21.95 38.8 -18Q38.8 -14.05 40 -11.14Q41.2 -8.22 43.61 -6.6Q46.03 -4.98 49.65 -4.93ZM72.4 0V-36H83.88Q84.33 -36 85.66 -35.98Q87 -35.95 88.25 -35.8Q92.53 -35.25 95.49 -32.76Q98.45 -30.28 99.97 -26.43Q101.5 -22.58 101.5 -18Q101.5 -13.43 99.97 -9.58Q98.45 -5.73 95.49 -3.24Q92.53 -0.75 88.25 -0.2Q87.03 -0.05 85.68 -0.03Q84.33 0 83.88 0ZM78.53 -5.68H83.88Q84.62 -5.68 85.79 -5.73Q86.95 -5.78 87.85 -5.95Q90.4 -6.43 92 -8.23Q93.6 -10.03 94.36 -12.6Q95.12 -15.18 95.12 -18Q95.12 -20.93 94.35 -23.5Q93.58 -26.08 91.96 -27.83Q90.35 -29.58 87.85 -30.05Q86.95 -30.25 85.79 -30.29Q84.62 -30.33 83.88 -30.33H78.53ZM107.93 0V-36H129.6V-29.98H113.95V-21H126.6V-15H113.95V0ZM134.6 0V-36H156.28V-29.98H140.63V-21H153.28V-15H140.63V0ZM161.28 0V-36H184.53V-30.35H167.3V-21.48H181.53V-15.83H167.3V-5.65H184.53V0Z", u = 65.6, d = 80;
+function f({ markClassName: e, small: i = !1 }) {
+	let a = i ? 7.8 : 6;
+	return /* @__PURE__ */ r(t, { children: [
+		/* @__PURE__ */ n("circle", {
+			className: e,
+			cx: "18.75",
+			cy: "-18",
+			r: "15.75",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: a
+		}),
+		/* @__PURE__ */ n("circle", {
+			className: "kf-eye__pupil",
+			cx: "22.53",
+			cy: "-18",
+			r: i ? 6.52 : 5.67,
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ n("path", {
+			className: e,
+			d: "M41.1 -33H47.6A15 15 0 0 1 47.6 -3H41.1",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: a,
+			strokeLinecap: "butt"
+		})
+	] });
+}
+var p = (e, t = "1em") => ({
+	display: "block",
+	flex: "none",
+	width: e,
+	height: t
+});
+function m({ variant: t = "full", collapse: o = "none", small: m = !1, markClassName: h, className: g, style: _, ...v }) {
+	let [y, b] = a(!1);
+	i(() => {
+		if (o !== "scroll" || t !== "full") return;
+		let e = 0, n = () => {
+			e = 0, b(window.scrollY > d);
+		}, r = () => {
+			e ||= window.requestAnimationFrame(n);
+		};
+		return n(), window.addEventListener("scroll", r, { passive: !0 }), () => {
+			window.removeEventListener("scroll", r), e && window.cancelAnimationFrame(e);
+		};
+	}, [o, t]);
+	let x = (t) => ({
+		role: "img",
+		"aria-label": "Kodffe",
+		className: e("kf-logo", t, g),
+		style: {
+			display: "inline-flex",
+			alignItems: "flex-start",
+			..._
+		},
+		...v
+	}), S = {
+		"aria-hidden": !0,
+		focusable: "false"
+	};
+	if (t === "mark") return /* @__PURE__ */ n("span", {
+		...x("kf-logo--mark"),
+		children: /* @__PURE__ */ n("svg", {
+			viewBox: "-3.2 -43 72 50",
+			className: "kf-logo__mark",
+			style: p("1.44em"),
+			...S,
+			children: /* @__PURE__ */ n(f, {
+				markClassName: h,
+				small: m
+			})
+		})
+	});
+	if (t === "lockup") {
+		let e = 66 / u;
+		return /* @__PURE__ */ n("span", {
+			...x("kf-logo--lockup"),
+			children: /* @__PURE__ */ r("svg", {
+				viewBox: "0 0 293 80",
+				style: p("5.86em", "1.6em"),
+				...S,
+				children: [/* @__PURE__ */ n("g", {
+					transform: `translate(40 40) scale(${e}) translate(${-65.6 / 2} 18)`,
+					children: /* @__PURE__ */ n(f, { markClassName: h })
+				}), /* @__PURE__ */ n("path", {
+					transform: "translate(94 57)",
+					d: l,
+					fill: "currentColor"
+				})]
+			})
+		});
+	}
+	return t === "wordmark" ? /* @__PURE__ */ n("span", {
+		...x("kf-logo--wordmark"),
+		children: /* @__PURE__ */ n("svg", {
+			viewBox: "0 0 188 50",
+			style: p("3.76em"),
+			...S,
+			children: /* @__PURE__ */ n("path", {
+				transform: "translate(0 43)",
+				d: l,
+				fill: "currentColor"
+			})
+		})
+	}) : /* @__PURE__ */ r("span", {
+		...x(e(o === "scroll" && "kf-logo--collapsible", y && "is-collapsed")),
+		children: [
+			/* @__PURE__ */ n("svg", {
+				viewBox: "0 -43 32.42 50",
+				className: "kf-logo__k",
+				style: p("0.6484em"),
+				...S,
+				children: /* @__PURE__ */ n("path", {
+					d: s,
+					fill: "currentColor"
+				})
+			}),
+			/* @__PURE__ */ n("svg", {
+				viewBox: "0 -43 66.38 50",
+				className: "kf-logo__slot",
+				style: p("1.3276em"),
+				...S,
+				children: /* @__PURE__ */ n("g", {
+					transform: "translate(2.6 0)",
+					children: /* @__PURE__ */ n(f, { markClassName: h })
+				})
+			}),
+			/* @__PURE__ */ n("svg", {
+				viewBox: "87.02 -43 86.52 50",
+				className: "kf-logo__ffe",
+				style: p("1.7304em"),
+				...S,
+				children: /* @__PURE__ */ n("path", {
+					d: c,
+					fill: "currentColor"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { m as Logo, o as logoVariants };
+
+//# sourceMappingURL=logo.js.map

package/dist/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","names":["_Fragment","logoVariants","K","FFE","WORDMARK","MARK_W","COLLAPSE_AFTER","Mark","stroke","small","Fragment","markClassName","box","Logo","rest","collapsed","setCollapsed","useState","collapse","variant","frame","update","onScroll","root","cx","extra","className","style","svg","k"],"sources":["../../src/logo/logo.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\n\nexport const logoVariants = ['full', 'mark', 'lockup', 'wordmark'] as const;\nexport type LogoVariant = (typeof logoVariants)[number];\n\nexport interface LogoProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * - `full` (default): KODFFE, the eye is the O and the open D is the D. Minimum width 96 px.\n   * - `mark`: the eye and open D alone (avatars, favicon, the collapsed header). Minimum size 16 px.\n   * - `lockup`: the mark next to the plain wordmark, for wide formats. Minimum width 96 px.\n   * - `wordmark`: the letters alone.\n   */\n  variant?: LogoVariant;\n  /**\n   * `scroll` (`full` only): for sticky headers. The full logo shows at the top of the page and collapses to the mark\n   * after 80 px of scroll; hovering or focusing the logo's link brings the name back. `none` (default): static.\n   */\n  collapse?: 'none' | 'scroll';\n  /** Heavier strokes (x1.3) and a bigger pupil for the mark at 32 px and under. Only for `mark`. */\n  small?: boolean;\n  /**\n   * Classes for the eye ring and open D only: `text-primary` follows the theme; `text-mint-500` suits a fixed dark\n   * background. The letters and the pupil take the inherited text color.\n   */\n  markClassName?: string;\n}\n\n// Manrope Bold outlines, baseline at y = 0, 1 em = 50 units (docs/design/logo/generate.py).\nconst K = 'M3.5 0V-36H9.53V-19.3L23.9 -36H31.3L15.83 -18.35L32.35 0H24.7L9.53 -16.8V0Z';\nconst FFE =\n  'M93.44 0V-36H115.12V-29.98H99.47V-21H112.12V-15H99.47V0ZM120.12 0V-36H141.79V-29.98H126.14V-21H138.79V-15H126.14V0ZM146.79 0V-36H170.04V-30.35H152.82V-21.48H167.04V-15.83H152.82V-5.65H170.04V0Z';\n// The plain wordmark \"KODFFE\" (lockup and wordmark), from docs/design/logo/svg/kodffe-eye-wordmark-*.svg.\nconst WORDMARK =\n  'M3.5 0V-36H9.53V-19.3L23.9 -36H31.3L15.83 -18.35L32.35 0H24.7L9.53 -16.8V0ZM49.65 0.75Q44.25 0.75 40.4 -1.61Q36.55 -3.98 34.49 -8.2Q32.42 -12.43 32.42 -18Q32.42 -23.58 34.49 -27.8Q36.55 -32.02 40.4 -34.39Q44.25 -36.75 49.65 -36.75Q55.05 -36.75 58.91 -34.39Q62.78 -32.02 64.84 -27.8Q66.9 -23.58 66.9 -18Q66.9 -12.43 64.84 -8.2Q62.78 -3.98 58.91 -1.61Q55.05 0.75 49.65 0.75ZM49.65 -4.93Q53.28 -4.9 55.69 -6.53Q58.1 -8.15 59.31 -11.1Q60.53 -14.05 60.53 -18Q60.53 -21.95 59.31 -24.86Q58.1 -27.78 55.69 -29.4Q53.28 -31.03 49.65 -31.08Q46.03 -31.1 43.62 -29.48Q41.23 -27.85 40.01 -24.9Q38.8 -21.95 38.8 -18Q38.8 -14.05 40 -11.14Q41.2 -8.22 43.61 -6.6Q46.03 -4.98 49.65 -4.93ZM72.4 0V-36H83.88Q84.33 -36 85.66 -35.98Q87 -35.95 88.25 -35.8Q92.53 -35.25 95.49 -32.76Q98.45 -30.28 99.97 -26.43Q101.5 -22.58 101.5 -18Q101.5 -13.43 99.97 -9.58Q98.45 -5.73 95.49 -3.24Q92.53 -0.75 88.25 -0.2Q87.03 -0.05 85.68 -0.03Q84.33 0 83.88 0ZM78.53 -5.68H83.88Q84.62 -5.68 85.79 -5.73Q86.95 -5.78 87.85 -5.95Q90.4 -6.43 92 -8.23Q93.6 -10.03 94.36 -12.6Q95.12 -15.18 95.12 -18Q95.12 -20.93 94.35 -23.5Q93.58 -26.08 91.96 -27.83Q90.35 -29.58 87.85 -30.05Q86.95 -30.25 85.79 -30.29Q84.62 -30.33 83.88 -30.33H78.53ZM107.93 0V-36H129.6V-29.98H113.95V-21H126.6V-15H113.95V0ZM134.6 0V-36H156.28V-29.98H140.63V-21H153.28V-15H140.63V0ZM161.28 0V-36H184.53V-30.35H167.3V-21.48H181.53V-15.83H167.3V-5.65H184.53V0Z';\nconst MARK_W = 65.6;\nconst COLLAPSE_AFTER = 80;\n\n/** The mark: a true-O eye and an open D (no stem, flat ends), eye's left edge at x = 0, centred on y = -18. */\nfunction Mark({ markClassName, small = false }: { markClassName?: string; small?: boolean }) {\n  const stroke = small ? 7.8 : 6;\n  return (\n    <>\n      <circle\n        className={markClassName}\n        cx=\"18.75\"\n        cy=\"-18\"\n        r=\"15.75\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={stroke}\n      />\n      <circle className=\"kf-eye__pupil\" cx=\"22.53\" cy=\"-18\" r={small ? 6.52 : 5.67} fill=\"currentColor\" />\n      <path\n        className={markClassName}\n        d=\"M41.1 -33H47.6A15 15 0 0 1 47.6 -3H41.1\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={stroke}\n        strokeLinecap=\"butt\"\n      />\n    </>\n  );\n}\n\n// Sizes are inline so the logo renders correctly without styles.css; styles.css only adds the collapse motion.\nconst box = (width: string, height = '1em'): CSSProperties => ({ display: 'block', flex: 'none', width, height });\n\n/**\n * The Kodffe logo in every layout, option B \"Open D\" (docs/adr/0012-open-d-logo.md). Size it with `font-size`\n * (e.g. `text-2xl`). Always named \"Kodffe\". The `full` logo is built from three pieces (K | mark | F F E) so the mark\n * can stay while the letters fade; only transform and opacity animate (no layout shift). Do not outline it, add\n * shadows or change the proportions.\n */\nexport function Logo({\n  variant = 'full',\n  collapse = 'none',\n  small = false,\n  markClassName,\n  className,\n  style,\n  ...rest\n}: LogoProps) {\n  const [collapsed, setCollapsed] = useState(false);\n\n  useEffect(() => {\n    if (collapse !== 'scroll' || variant !== 'full') return;\n    let frame = 0;\n    const update = () => {\n      frame = 0;\n      setCollapsed(window.scrollY > COLLAPSE_AFTER);\n    };\n    const onScroll = () => {\n      if (!frame) frame = window.requestAnimationFrame(update);\n    };\n    update();\n    window.addEventListener('scroll', onScroll, { passive: true });\n    return () => {\n      window.removeEventListener('scroll', onScroll);\n      if (frame) window.cancelAnimationFrame(frame);\n    };\n  }, [collapse, variant]);\n\n  const root = (extra?: string | false) => ({\n    role: 'img' as const,\n    'aria-label': 'Kodffe',\n    className: cx('kf-logo', extra, className),\n    style: { display: 'inline-flex', alignItems: 'flex-start', ...style },\n    ...rest,\n  });\n  const svg = { 'aria-hidden': true as const, focusable: 'false' as const };\n\n  if (variant === 'mark') {\n    return (\n      <span {...root('kf-logo--mark')}>\n        <svg viewBox=\"-3.2 -43 72 50\" className=\"kf-logo__mark\" style={box('1.44em')} {...svg}>\n          <Mark markClassName={markClassName} small={small} />\n        </svg>\n      </span>\n    );\n  }\n\n  if (variant === 'lockup') {\n    // Mark centred on (40, 40), 66 units wide, next to the wordmark (80-unit-tall box, 1.6 em).\n    const k = 66 / MARK_W;\n    return (\n      <span {...root('kf-logo--lockup')}>\n        <svg viewBox=\"0 0 293 80\" style={box('5.86em', '1.6em')} {...svg}>\n          <g transform={`translate(40 40) scale(${k}) translate(${-MARK_W / 2} 18)`}>\n            <Mark markClassName={markClassName} />\n          </g>\n          <path transform=\"translate(94 57)\" d={WORDMARK} fill=\"currentColor\" />\n        </svg>\n      </span>\n    );\n  }\n\n  if (variant === 'wordmark') {\n    return (\n      <span {...root('kf-logo--wordmark')}>\n        <svg viewBox=\"0 0 188 50\" style={box('3.76em')} {...svg}>\n          <path transform=\"translate(0 43)\" d={WORDMARK} fill=\"currentColor\" />\n        </svg>\n      </span>\n    );\n  }\n\n  return (\n    <span {...root(cx(collapse === 'scroll' && 'kf-logo--collapsible', collapsed && 'is-collapsed'))}>\n      <svg viewBox=\"0 -43 32.42 50\" className=\"kf-logo__k\" style={box('0.6484em')} {...svg}>\n        <path d={K} fill=\"currentColor\" />\n      </svg>\n      <svg viewBox=\"0 -43 66.38 50\" className=\"kf-logo__slot\" style={box('1.3276em')} {...svg}>\n        <g transform=\"translate(2.6 0)\">\n          <Mark markClassName={markClassName} />\n        </g>\n      </svg>\n      <svg viewBox=\"87.02 -43 86.52 50\" className=\"kf-logo__ffe\" style={box('1.7304em')} {...svg}>\n        <path d={FFE} fill=\"currentColor\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/logo/product-logo.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface ProductLogoProps {
+    /** Product name, set in the display font (Manrope). */
+    name: string;
+    /** The product's own mark, drawn inside the square tile (an `<svg>` with `currentColor`). */
+    mark: ReactNode;
+    /** Tile background, e.g. `var(--kf-primary)`; the mark takes `markColor`. */
+    tileColor?: string;
+    markColor?: string;
+    /** Adds a small "by Kodffe" line. */
+    byKodffe?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * A product lockup: a square tile with the product's mark, the name and an optional "by Kodffe". Each product
+ * brings its own mark; the name always uses the library's display font (ADR-0013, decision 9).
+ */
+export declare function ProductLogo({ name, mark, tileColor, markColor, byKodffe, size, className, }: ProductLogoProps): import("react").JSX.Element;

package/dist/logo/product-logo.js

@@ -0,0 +1,46 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/logo/product-logo.tsx
+var r = {
+	sm: {
+		tile: "size-7 rounded-[7px]",
+		name: "text-base"
+	},
+	md: {
+		tile: "size-9 rounded-sm",
+		name: "text-lg"
+	},
+	lg: {
+		tile: "size-12 rounded-md",
+		name: "text-2xl"
+	}
+};
+function i({ name: i, mark: a, tileColor: o = "var(--kf-primary)", markColor: s = "#fff", byKodffe: c, size: l = "md", className: u }) {
+	let d = r[l];
+	return /* @__PURE__ */ n("span", {
+		className: e("inline-flex items-center gap-2.5 font-display text-fg", u),
+		children: [/* @__PURE__ */ t("span", {
+			"aria-hidden": "true",
+			className: e("flex shrink-0 items-center justify-center [&>svg]:size-[64%]", d.tile),
+			style: {
+				background: o,
+				color: s
+			},
+			children: a
+		}), /* @__PURE__ */ n("span", {
+			className: "grid leading-none",
+			children: [/* @__PURE__ */ t("span", {
+				className: e("font-bold tracking-tight", d.name),
+				children: i
+			}), c && /* @__PURE__ */ t("span", {
+				className: "mt-1 font-sans text-[11px] font-medium text-fg-muted",
+				children: "by Kodffe"
+			})]
+		})]
+	});
+}
+//#endregion
+export { i as ProductLogo };
+
+//# sourceMappingURL=product-logo.js.map

package/dist/logo/product-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-logo.js","names":["SIZES","ProductLogo","s","size","cx","className","tileColor","markColor","mark","name","byKodffe"],"sources":["../../src/logo/product-logo.tsx"],"sourcesContent":["'use client';\nimport type { ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\n/* ---------------- ProductLogo ---------------- */\n\nexport interface ProductLogoProps {\n  /** Product name, set in the display font (Manrope). */\n  name: string;\n  /** The product's own mark, drawn inside the square tile (an `<svg>` with `currentColor`). */\n  mark: ReactNode;\n  /** Tile background, e.g. `var(--kf-primary)`; the mark takes `markColor`. */\n  tileColor?: string;\n  markColor?: string;\n  /** Adds a small \"by Kodffe\" line. */\n  byKodffe?: boolean;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst SIZES = {\n  sm: { tile: 'size-7 rounded-[7px]', name: 'text-base' },\n  md: { tile: 'size-9 rounded-sm', name: 'text-lg' },\n  lg: { tile: 'size-12 rounded-md', name: 'text-2xl' },\n};\n\n/**\n * A product lockup: a square tile with the product's mark, the name and an optional \"by Kodffe\". Each product\n * brings its own mark; the name always uses the library's display font (ADR-0013, decision 9).\n */\nexport function ProductLogo({\n  name,\n  mark,\n  tileColor = 'var(--kf-primary)',\n  markColor = '#fff',\n  byKodffe,\n  size = 'md',\n  className,\n}: ProductLogoProps) {\n  const s = SIZES[size];\n  return (\n    <span className={cx('inline-flex items-center gap-2.5 font-display text-fg', className)}>\n      <span\n        aria-hidden=\"true\"\n        // The mark fills 64% of the tile (percent sizes need the tile's own definite size, so flex, not grid).\n        className={cx('flex shrink-0 items-center justify-center [&>svg]:size-[64%]', s.tile)}\n        style={{ background: tileColor, color: markColor }}\n      >\n        {mark}\n      </span>\n      <span className=\"grid leading-none\">\n        <span className={cx('font-bold tracking-tight', s.name)}>{name}</span>\n        {byKodffe && <span className=\"mt-1 font-sans text-[11px] font-medium text-fg-muted\">by Kodffe</span>}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;AAoBA,IAAMA,IAAQ;CACZ,IAAI;EAAE,MAAM;EAAwB,MAAM;CAAY;CACtD,IAAI;EAAE,MAAM;EAAqB,MAAM;CAAU;CACjD,IAAI;EAAE,MAAM;EAAsB,MAAM;CAAW;AACrD;AAMA,SAAgBC,EAAY,EAC1B,SACA,SACA,eAAY,qBACZ,eAAY,QACZ,aACA,UAAO,MACP,gBACmB;CACnB,IAAMC,IAAIF,EAAMG;CAChB,OACE,kBAAC,QAAD;EAAM,WAAWC,EAAG,yDAAyDC,CAAS;EAAtF,UAAA,CACE,kBAAC,QAAD;GACE,eAAY;GAEZ,WAAWD,EAAG,gEAAgEF,EAAE,IAAI;GACpF,OAAO;IAAE,YAAYI;IAAW,OAAOC;GAAU;GAEhD,UAAAC;EACG,CAAA,GACN,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,kBAAC,QAAD;IAAM,WAAWJ,EAAG,4BAA4BF,EAAE,IAAI;IAAI,UAAAO;GAAW,CAAA,GACpEC,KAAY,kBAAC,QAAD;IAAM,WAAU;IAAuD,UAAA;GAAe,CAAA,CAC/F;EACF,CAAA,CAAA;;AAEV"}