@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/card/card.d.ts

@@ -0,0 +1,159 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { type IconTileTone } from '../icon/icon-tile';
+import { type IconName } from '../icon/icon';
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    /** `outline` (default), `raised` (shadow), `muted` (filled), `brand` (gradient, white text), `danger` (danger zone). */
+    variant?: 'outline' | 'raised' | 'muted' | 'brand' | 'danger';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Makes the whole card a link target: pass `href` to the title's link and set `interactive`. */
+    interactive?: boolean;
+    /** A colored top border, e.g. a client's category color: `var(--kf-category-2)`. */
+    accent?: string;
+    /** Selected in a list of cards: a brand bar on the left and a tinted border. */
+    selected?: boolean;
+}
+/**
+ * Base surface. With `interactive`, the first link inside stretches over the card (one tab stop,
+ * whole card clickable) and the card lifts on hover.
+ */
+export declare function Card({ as: Tag, variant, padding, interactive, accent, selected, className, style, ...rest }: CardProps): import("react").JSX.Element;
+export type CardHeaderMarker = 'none' | 'bar' | 'dot';
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** `band` (default, dashboards): tinted background and a divider. `plain`: no background. */
+    appearance?: 'band' | 'plain';
+    /** Accent mark before the title (default `bar`). */
+    marker?: CardHeaderMarker;
+    /** Icon in a small tile before the title (replaces the marker). */
+    icon?: IconName;
+    /** `danger` for danger zones: red title with a warning icon. */
+    tone?: 'default' | 'danger';
+    /** Right side: a link ("View all →"), a button or a status badge. */
+    action?: ReactNode;
+    headingLevel?: 2 | 3 | 4;
+}
+/**
+ * Header of a dashboard card (ADR-0013). Use inside `<Card padding="none">` with `CardBody` and `CardFooter`.
+ */
+export declare function CardHeader({ title, description, appearance, marker, icon, tone, action, headingLevel, className, ...rest }: CardHeaderProps): import("react").JSX.Element;
+/** Body of a card that uses `CardHeader`: the card padding token (16 → 24 px). */
+export declare function CardBody({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** Actions at the bottom of a card (Cancel / Save), right-aligned, with a divider. */
+export declare function CardFooter({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** Title that links the whole interactive card. */
+export declare function CardLink({ href, as: Link, children, className, }: {
+    href: string;
+    as?: ElementType;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export interface IconCardProps extends Omit<CardProps, 'title'> {
+    icon: IconName;
+    title: ReactNode;
+    description?: ReactNode;
+    href?: string;
+    linkAs?: ElementType;
+    /** `stacked` (default): icon above the text. `inline`: icon beside the text (compact lists, settings shortcuts). */
+    layout?: 'stacked' | 'inline';
+    /** `start` (default) or `center` (stacked only, e.g. a row of three benefits). */
+    align?: 'start' | 'center';
+    /** A button or link at the bottom ("Set up", "Learn more"). Not with `href` (the whole card is the link). */
+    action?: ReactNode;
+    /** The icon tile's color. */
+    iconTone?: Extract<IconTileTone, 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral'>;
+}
+/** Feature / service card: icon tile, title, short text; stacked or inline, with an optional action. */
+export declare function IconCard({ icon, title, description, href, linkAs, layout, align, action, iconTone, className, ...rest }: IconCardProps): import("react").JSX.Element;
+export interface PersonLink {
+    /** Visible text ("LinkedIn"). */
+    label: string;
+    href: string;
+    icon?: IconName;
+    /** Full accessible name when several cards repeat the same label ("Alexis Saransig on LinkedIn"). */
+    ariaLabel?: string;
+}
+export interface PersonCardProps extends Omit<CardProps, 'title' | 'role'> {
+    name: string;
+    /** Job title ("CEO", "Co-founder & CTO"). */
+    role: ReactNode;
+    /** Square photo, shown round. Falls back to initials. Real people only, with their consent. */
+    photo?: string;
+    bio?: ReactNode;
+    links?: PersonLink[];
+    /** Heading level of the name; `h3` inside a titled section. */
+    headingAs?: 'h2' | 'h3' | 'h4';
+}
+/** Team member or founder: photo, name, role, short bio and profile links. Server-safe. */
+export declare function PersonCard({ name, role, photo, bio, links, headingAs: Heading, ...rest }: PersonCardProps): import("react").JSX.Element;
+export interface MetricCardProps extends Omit<CardProps, 'title'> {
+    label: ReactNode;
+    value: ReactNode;
+    /** Change vs. previous period, e.g. +12.5. Positive is good unless `invertTrend`. */
+    delta?: number;
+    deltaLabel?: ReactNode;
+    invertTrend?: boolean;
+    /** Small chart under the value (e.g. `<Sparkline />`). */
+    chart?: ReactNode;
+    icon?: IconName;
+    /** Colored stripe on the left, to group or tell metrics apart. Pair it with the label, never alone. */
+    tone?: MetricTone;
+    /** One line under the value ("12 still in", "of 15 members"). */
+    hint?: ReactNode;
+}
+export type MetricTone = 'none' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+/** KPI tile for dashboards. */
+export declare function MetricCard({ label, value, delta, deltaLabel, invertTrend, chart, icon, tone, hint, ...rest }: MetricCardProps): import("react").JSX.Element;
+export interface ProductCardProps extends Omit<CardProps, 'title'> {
+    name: ReactNode;
+    tagline: ReactNode;
+    /** Status badge (e.g. `<Badge variant="live">Live</Badge>`). */
+    badge?: ReactNode;
+    icon?: IconName;
+    price?: ReactNode;
+    href: string;
+    linkAs?: ElementType;
+}
+/** Kodffe product (Yapakit, LinkedFace…). */
+export declare function ProductCard({ name, tagline, badge, icon, price, href, linkAs, ...rest }: ProductCardProps): import("react").JSX.Element;
+export interface PlanCardProps extends Omit<CardProps, 'title'> {
+    name: ReactNode;
+    price: ReactNode;
+    period?: ReactNode;
+    /** A line under the price ("or $100 a year", "billed monthly"). */
+    priceNote?: ReactNode;
+    description?: ReactNode;
+    features: ReactNode[];
+    cta: ReactNode;
+    /** Highlights the recommended plan. */
+    featured?: boolean;
+    featuredLabel?: ReactNode;
+}
+/** Pricing plan. Mark one plan `featured` at most. */
+export declare function PlanCard({ name, price, period, priceNote, description, features, cta, featured, featuredLabel, ...rest }: PlanCardProps): import("react").JSX.Element;
+export interface CaseCardProps extends Omit<CardProps, 'title'> {
+    client: ReactNode;
+    title: ReactNode;
+    /** Headline result, e.g. "−82% manual entry". */
+    result: ReactNode;
+    tags?: ReactNode[];
+    image?: string;
+    href: string;
+    linkAs?: ElementType;
+}
+/** Case study teaser: result first. */
+export declare function CaseCard({ client, title, result, tags, image, href, linkAs, ...rest }: CaseCardProps): import("react").JSX.Element;
+export interface ArticleCardProps extends Omit<CardProps, 'title'> {
+    title: ReactNode;
+    excerpt?: ReactNode;
+    category?: ReactNode;
+    date?: string;
+    /** e.g. "6 min read". */
+    readingTime?: ReactNode;
+    image?: string;
+    href: string;
+    linkAs?: ElementType;
+}
+/** Blog / resource teaser. */
+export declare function ArticleCard({ title, excerpt, category, date, readingTime, image, href, linkAs, ...rest }: ArticleCardProps): import("react").JSX.Element;

package/dist/card/card.js

@@ -0,0 +1,390 @@
+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 { IconTile as r } from "../icon/icon-tile.js";
+import { CheckList as i } from "../lists/lists.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/card/card.tsx
+var s = {
+	outline: "border border-border bg-surface",
+	raised: "border border-border bg-surface shadow-raised",
+	muted: "bg-surface-muted",
+	brand: "bg-gradient-brand text-on-primary",
+	danger: "border border-danger-border bg-surface"
+}, c = {
+	none: "",
+	sm: "p-4",
+	md: "p-6",
+	lg: "p-8"
+};
+function l({ as: t = "div", variant: n = "outline", padding: r = "md", interactive: i, accent: o, selected: l, className: u, style: d, ...f }) {
+	return /* @__PURE__ */ a(t, {
+		...n === "brand" ? { "data-theme": "dark" } : {},
+		className: e("relative rounded-lg font-sans text-fg", s[n], c[r], i && "transition-[transform,box-shadow,border-color] duration-200 ease-standard hover:-translate-y-0.5 hover:border-fg-muted/40 hover:shadow-raised motion-reduce:transition-none motion-reduce:hover:translate-y-0 has-[a:focus-visible]:outline-3 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-focus", o && "overflow-hidden before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-(--kf-card-accent)", l && "overflow-hidden ring-2 ring-primary after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-primary", u),
+		style: o ? {
+			"--kf-card-accent": o,
+			...d
+		} : d,
+		...l === void 0 ? {} : { "aria-current": l ? "true" : void 0 },
+		...f
+	});
+}
+function u({ title: n, description: r, appearance: i = "band", marker: s = "bar", icon: c, tone: l = "default", action: u, headingLevel: d = 3, className: f, ...p }) {
+	let m = `h${d}`, h = l === "danger";
+	return /* @__PURE__ */ o("div", {
+		className: e("flex flex-wrap items-start justify-between gap-x-4 gap-y-2 px-card py-4 first:rounded-t-[inherit]", i === "band" && !h && "border-b border-border bg-surface-muted", f),
+		...p,
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex min-w-0 flex-1 items-start gap-3",
+			children: [c && !h && /* @__PURE__ */ a("span", {
+				className: "grid size-10 shrink-0 place-items-center rounded-sm bg-surface text-link shadow-[inset_0_0_0_1px_var(--kf-border)]",
+				children: /* @__PURE__ */ a(t, {
+					name: c,
+					size: 20
+				})
+			}), /* @__PURE__ */ o("div", {
+				className: "grid min-w-0 gap-0.5",
+				children: [/* @__PURE__ */ o(m, {
+					className: e("m-0 flex items-center gap-2 font-sans text-base font-semibold", h ? "text-danger-fg" : "text-fg"),
+					children: [h ? /* @__PURE__ */ a(t, {
+						name: "warning",
+						size: 18,
+						className: "shrink-0 text-danger-icon"
+					}) : !c && s !== "none" && /* @__PURE__ */ a("span", {
+						"aria-hidden": "true",
+						className: e("shrink-0 bg-accent", s === "bar" ? "h-4 w-1 rounded-full" : "size-2 rounded-full")
+					}), n]
+				}), r && /* @__PURE__ */ a("p", {
+					className: "m-0 text-sm text-pretty text-fg-muted",
+					children: r
+				})]
+			})]
+		}), u && /* @__PURE__ */ a("div", {
+			className: "flex shrink-0 items-center gap-2 text-sm",
+			children: u
+		})]
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		className: e("p-card", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		className: e("flex flex-wrap items-center justify-end gap-3 border-t border-border px-card py-4", t),
+		...n
+	});
+}
+function p({ href: t, as: n = "a", children: r, className: i }) {
+	return /* @__PURE__ */ a(n, {
+		href: t,
+		"data-card-link": "",
+		className: e("text-inherit no-underline after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] focus-visible:outline-none", i),
+		children: r
+	});
+}
+function m({ icon: t, title: n, description: i, href: s, linkAs: c, layout: u = "stacked", align: d = "start", action: f, iconTone: m = "primary", className: h, ...g }) {
+	let _ = u === "inline", v = !_ && d === "center";
+	return /* @__PURE__ */ o(l, {
+		interactive: !!s,
+		className: e(_ ? "flex items-start gap-4" : "grid content-start", v && "justify-items-center text-center", h),
+		...g,
+		children: [/* @__PURE__ */ a(r, {
+			icon: t,
+			size: _ ? "md" : "lg",
+			tone: m,
+			className: _ ? void 0 : "mb-4"
+		}), /* @__PURE__ */ o("div", {
+			className: e("grid min-w-0 gap-1.5", v && "justify-items-center"),
+			children: [
+				/* @__PURE__ */ a("h3", {
+					className: e("m-0 font-display font-bold tracking-tight", _ ? "text-base" : "text-lg"),
+					children: s ? /* @__PURE__ */ a(p, {
+						href: s,
+						as: c,
+						children: n
+					}) : n
+				}),
+				i && /* @__PURE__ */ a("p", {
+					className: "m-0 text-[15px] text-fg-muted",
+					children: i
+				}),
+				f && !s && /* @__PURE__ */ a("div", {
+					className: "mt-2.5",
+					children: f
+				})
+			]
+		})]
+	});
+}
+var h = (e) => e.split(/\s+/).filter(Boolean).slice(0, 2).map((e) => e[0].toUpperCase()).join("");
+function g({ name: n, role: r, photo: i, bio: s, links: c = [], headingAs: u = "h3", ...d }) {
+	return /* @__PURE__ */ o(l, {
+		...d,
+		className: e("grid content-start gap-4", d.className),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-4",
+				children: [i ? /* @__PURE__ */ a("img", {
+					src: i,
+					alt: "",
+					width: 96,
+					height: 96,
+					loading: "lazy",
+					decoding: "async",
+					className: "size-20 shrink-0 rounded-full bg-surface-muted object-cover sm:size-24"
+				}) : /* @__PURE__ */ a("span", {
+					"aria-hidden": "true",
+					className: "grid size-20 shrink-0 place-items-center rounded-full bg-info-surface font-display text-2xl font-bold text-info-fg sm:size-24",
+					children: h(n)
+				}), /* @__PURE__ */ o("div", {
+					className: "grid gap-0.5",
+					children: [/* @__PURE__ */ a(u, {
+						className: "m-0 font-display text-xl font-bold tracking-tight",
+						children: n
+					}), /* @__PURE__ */ a("p", {
+						className: "m-0 text-sm font-semibold text-link",
+						children: r
+					})]
+				})]
+			}),
+			s && /* @__PURE__ */ a("p", {
+				className: "m-0 text-[15px] text-fg-muted",
+				children: s
+			}),
+			c.length > 0 && /* @__PURE__ */ a("ul", {
+				className: "m-0 flex list-none flex-wrap gap-x-4 gap-y-2 p-0",
+				children: c.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("a", {
+					href: e.href,
+					"aria-label": e.ariaLabel,
+					className: "inline-flex min-h-6 items-center gap-1.5 rounded-xs text-sm font-semibold text-link underline-offset-4 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+					children: [e.icon && /* @__PURE__ */ a(t, {
+						name: e.icon,
+						size: 18
+					}), e.label]
+				}) }, e.href))
+			})
+		]
+	});
+}
+var _ = {
+	primary: "before:bg-primary",
+	accent: "before:bg-accent",
+	success: "before:bg-success-icon",
+	warning: "before:bg-warning-icon",
+	danger: "before:bg-danger-icon",
+	info: "before:bg-info-icon"
+};
+function v({ label: r, value: i, delta: s, deltaLabel: c, invertTrend: u, chart: d, icon: f, tone: p = "none", hint: m, ...h }) {
+	let g = s === void 0 ? void 0 : u ? s < 0 : s > 0;
+	return /* @__PURE__ */ o(l, {
+		padding: "sm",
+		...h,
+		className: e("grid gap-2 overflow-hidden sm:p-5", p !== "none" && e("pl-5 before:absolute before:inset-y-0 before:left-0 before:w-1 sm:pl-6", _[p]), h.className),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center justify-between gap-2 text-sm font-medium text-fg-muted",
+				children: [r, f && /* @__PURE__ */ a(t, {
+					name: f,
+					size: 22,
+					className: "text-primary"
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "font-display text-3xl font-extrabold tracking-tight tabular-nums",
+				children: i
+			}),
+			m && /* @__PURE__ */ a("div", {
+				className: "text-sm text-fg-muted",
+				children: m
+			}),
+			s !== void 0 && /* @__PURE__ */ o("div", {
+				className: "flex items-center gap-1.5 text-sm",
+				children: [/* @__PURE__ */ o("span", {
+					className: e("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 font-semibold tabular-nums", g ? "bg-success-surface text-success-fg" : s === 0 ? "bg-surface-muted text-fg-muted" : "bg-danger-surface text-danger-fg"),
+					children: [
+						/* @__PURE__ */ a(n, {
+							name: s >= 0 ? "arrow-up" : "arrow-down",
+							size: 12
+						}),
+						Math.abs(s),
+						"%"
+					]
+				}), c && /* @__PURE__ */ a("span", {
+					className: "text-fg-muted",
+					children: c
+				})]
+			}),
+			d
+		]
+	});
+}
+function y({ name: n, tagline: r, badge: i, icon: s = "store", price: c, href: u, linkAs: d, ...f }) {
+	return /* @__PURE__ */ o(l, {
+		interactive: !0,
+		...f,
+		className: e("flex flex-col gap-4", f.className),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ a("span", {
+					className: "grid size-12 place-items-center rounded-md bg-gradient-brand text-on-primary",
+					children: /* @__PURE__ */ a(t, {
+						name: s,
+						size: 28
+					})
+				}), i]
+			}),
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h3", {
+				className: "m-0 font-display text-xl font-bold tracking-tight",
+				children: /* @__PURE__ */ a(p, {
+					href: u,
+					as: d,
+					children: n
+				})
+			}), /* @__PURE__ */ a("p", {
+				className: "m-0 mt-1 text-[15px] text-fg-muted",
+				children: r
+			})] }),
+			c && /* @__PURE__ */ a("p", {
+				className: "m-0 mt-auto text-sm font-semibold text-fg",
+				children: c
+			})
+		]
+	});
+}
+function b({ name: t, price: n, period: r, priceNote: s, description: c, features: u, cta: d, featured: f, featuredLabel: p = "Most popular", ...m }) {
+	return /* @__PURE__ */ o(l, {
+		variant: f ? "raised" : "outline",
+		padding: "lg",
+		...m,
+		className: e("flex flex-col gap-5", f && "border-2 border-primary", m.className),
+		children: [
+			f && /* @__PURE__ */ a("span", {
+				className: "absolute -top-3 left-8 rounded-full bg-primary px-3 py-1 text-xs font-bold text-on-primary",
+				children: p
+			}),
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h3", {
+				className: "m-0 font-display text-lg font-bold",
+				children: t
+			}), c && /* @__PURE__ */ a("p", {
+				className: "m-0 mt-1 text-sm text-fg-muted",
+				children: c
+			})] }),
+			/* @__PURE__ */ o("p", {
+				className: "m-0 flex items-baseline gap-1",
+				children: [/* @__PURE__ */ a("span", {
+					className: "font-display text-4xl font-extrabold tracking-tight tabular-nums",
+					children: n
+				}), r && /* @__PURE__ */ a("span", {
+					className: "text-sm text-fg-muted",
+					children: r
+				})]
+			}),
+			s && /* @__PURE__ */ a("p", {
+				className: "m-0 -mt-3 text-sm text-fg-muted",
+				children: s
+			}),
+			/* @__PURE__ */ a(i, {
+				items: u,
+				marker: "plain"
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "mt-auto grid *:w-full",
+				children: d
+			})
+		]
+	});
+}
+function x({ client: t, title: n, result: r, tags: i, image: s, href: c, linkAs: u, ...d }) {
+	return /* @__PURE__ */ o(l, {
+		interactive: !0,
+		padding: "none",
+		...d,
+		className: e("flex flex-col overflow-hidden", d.className),
+		children: [s && /* @__PURE__ */ a("img", {
+			src: s,
+			alt: "",
+			className: "aspect-[16/9] w-full object-cover"
+		}), /* @__PURE__ */ o("div", {
+			className: "flex flex-1 flex-col gap-3 p-6",
+			children: [
+				/* @__PURE__ */ a("p", {
+					className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+					children: t
+				}),
+				/* @__PURE__ */ a("p", {
+					className: "m-0 font-display text-3xl font-extrabold tracking-tight text-link",
+					children: r
+				}),
+				/* @__PURE__ */ a("h3", {
+					className: "m-0 text-[17px] leading-snug font-semibold",
+					children: /* @__PURE__ */ a(p, {
+						href: c,
+						as: u,
+						children: n
+					})
+				}),
+				i && /* @__PURE__ */ a("div", {
+					className: "mt-auto flex flex-wrap gap-1.5 pt-2",
+					children: i
+				})
+			]
+		})]
+	});
+}
+function S({ title: t, excerpt: n, category: r, date: i, readingTime: s, image: c, href: u, linkAs: d, ...f }) {
+	return /* @__PURE__ */ o(l, {
+		as: "article",
+		interactive: !0,
+		padding: "none",
+		variant: "outline",
+		...f,
+		className: e("flex flex-col overflow-hidden", f.className),
+		children: [c && /* @__PURE__ */ a("img", {
+			src: c,
+			alt: "",
+			className: "aspect-[16/9] w-full object-cover"
+		}), /* @__PURE__ */ o("div", {
+			className: "flex flex-1 flex-col gap-2 p-6",
+			children: [
+				r && /* @__PURE__ */ a("p", {
+					className: "m-0 text-xs font-semibold tracking-wide text-link uppercase",
+					children: r
+				}),
+				/* @__PURE__ */ a("h3", {
+					className: "m-0 font-display text-lg leading-snug font-bold tracking-tight text-balance",
+					children: /* @__PURE__ */ a(p, {
+						href: u,
+						as: d,
+						children: t
+					})
+				}),
+				n && /* @__PURE__ */ a("p", {
+					className: "m-0 line-clamp-3 text-[15px] text-fg-muted",
+					children: n
+				}),
+				(i || s) && /* @__PURE__ */ o("p", {
+					className: "m-0 mt-auto flex gap-2 pt-2 text-sm text-fg-muted",
+					children: [
+						i && /* @__PURE__ */ a("time", {
+							dateTime: i,
+							children: new Date(i).toLocaleDateString(void 0, { dateStyle: "medium" })
+						}),
+						i && s && /* @__PURE__ */ a("span", {
+							"aria-hidden": "true",
+							children: "·"
+						}),
+						s
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { S as ArticleCard, l as Card, d as CardBody, f as CardFooter, u as CardHeader, p as CardLink, x as CaseCard, m as IconCard, v as MetricCard, g as PersonCard, b as PlanCard, y as ProductCard };
+
+//# sourceMappingURL=card.js.map

package/dist/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["VARIANTS","PADDING","Card","Tag","rest","variant","cx","padding","interactive","accent","selected","className","style","CardHeader","Heading","headingLevel","danger","tone","appearance","icon","Icon","marker","title","description","action","CardBody","CardFooter","CardLink","Link","IconCard","inline","layout","centered","align","href","IconTile","iconTone","linkAs","initials","name","p","PersonCard","photo","role","bio","links","l","TONE_STRIPE","MetricCard","good","delta","invertTrend","label","value","hint","Glyph","deltaLabel","chart","ProductCard","badge","tagline","price","PlanCard","featured","featuredLabel","period","priceNote","CheckList","features","cta","CaseCard","image","client","result","tags","ArticleCard","category","excerpt","date","readingTime"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile, type IconTileTone } from '../icon/icon-tile';\nimport { CheckList } from '../lists/lists';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Glyph } from '../lib/glyphs';\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n  as?: ElementType;\n  /** `outline` (default), `raised` (shadow), `muted` (filled), `brand` (gradient, white text), `danger` (danger zone). */\n  variant?: 'outline' | 'raised' | 'muted' | 'brand' | 'danger';\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  /** Makes the whole card a link target: pass `href` to the title's link and set `interactive`. */\n  interactive?: boolean;\n  /** A colored top border, e.g. a client's category color: `var(--kf-category-2)`. */\n  accent?: string;\n  /** Selected in a list of cards: a brand bar on the left and a tinted border. */\n  selected?: boolean;\n}\n\nconst VARIANTS = {\n  outline: 'border border-border bg-surface',\n  raised: 'border border-border bg-surface shadow-raised',\n  muted: 'bg-surface-muted',\n  brand: 'bg-gradient-brand text-on-primary',\n  danger: 'border border-danger-border bg-surface',\n};\nconst PADDING = { none: '', sm: 'p-4', md: 'p-6', lg: 'p-8' };\n\n/**\n * Base surface. With `interactive`, the first link inside stretches over the card (one tab stop,\n * whole card clickable) and the card lifts on hover.\n */\nexport function Card({\n  as: Tag = 'div',\n  variant = 'outline',\n  padding = 'md',\n  interactive,\n  accent,\n  selected,\n  className,\n  style,\n  ...rest\n}: CardProps) {\n  return (\n    <Tag\n      // The brand gradient is dark: switch to the dark token set so text, links and focus rings stay AA.\n      {...(variant === 'brand' ? { 'data-theme': 'dark' } : {})}\n      className={cx(\n        'relative rounded-lg font-sans text-fg',\n        VARIANTS[variant],\n        PADDING[padding],\n        interactive &&\n          'transition-[transform,box-shadow,border-color] duration-200 ease-standard hover:-translate-y-0.5 hover:border-fg-muted/40 hover:shadow-raised motion-reduce:transition-none motion-reduce:hover:translate-y-0 has-[a:focus-visible]:outline-3 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-focus',\n        accent && 'overflow-hidden before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-(--kf-card-accent)',\n        // A ring (not a border color) so it never conflicts with the variant's border class.\n        selected && 'overflow-hidden ring-2 ring-primary after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-primary',\n        className,\n      )}\n      style={accent ? { ['--kf-card-accent' as string]: accent, ...style } : style}\n      {...(selected !== undefined ? { 'aria-current': selected ? 'true' : undefined } : {})}\n      {...rest}\n    />\n  );\n}\n\nexport type CardHeaderMarker = 'none' | 'bar' | 'dot';\n\nexport interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  /** `band` (default, dashboards): tinted background and a divider. `plain`: no background. */\n  appearance?: 'band' | 'plain';\n  /** Accent mark before the title (default `bar`). */\n  marker?: CardHeaderMarker;\n  /** Icon in a small tile before the title (replaces the marker). */\n  icon?: IconName;\n  /** `danger` for danger zones: red title with a warning icon. */\n  tone?: 'default' | 'danger';\n  /** Right side: a link (\"View all →\"), a button or a status badge. */\n  action?: ReactNode;\n  headingLevel?: 2 | 3 | 4;\n}\n\n/**\n * Header of a dashboard card (ADR-0013). Use inside `<Card padding=\"none\">` with `CardBody` and `CardFooter`.\n */\nexport function CardHeader({\n  title,\n  description,\n  appearance = 'band',\n  marker = 'bar',\n  icon,\n  tone = 'default',\n  action,\n  headingLevel = 3,\n  className,\n  ...rest\n}: CardHeaderProps) {\n  const Heading = `h${headingLevel}` as const;\n  const danger = tone === 'danger';\n  return (\n    <div\n      className={cx(\n        'flex flex-wrap items-start justify-between gap-x-4 gap-y-2 px-card py-4 first:rounded-t-[inherit]',\n        appearance === 'band' && !danger && 'border-b border-border bg-surface-muted',\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n        {icon && !danger && (\n          <span className=\"grid size-10 shrink-0 place-items-center rounded-sm bg-surface text-link shadow-[inset_0_0_0_1px_var(--kf-border)]\">\n            <Icon name={icon} size={20} />\n          </span>\n        )}\n        <div className=\"grid min-w-0 gap-0.5\">\n          <Heading\n            className={cx(\n              'm-0 flex items-center gap-2 font-sans text-base font-semibold',\n              danger ? 'text-danger-fg' : 'text-fg',\n            )}\n          >\n            {danger ? (\n              <Icon name=\"warning\" size={18} className=\"shrink-0 text-danger-icon\" />\n            ) : (\n              !icon &&\n              marker !== 'none' && (\n                <span\n                  aria-hidden=\"true\"\n                  className={cx('shrink-0 bg-accent', marker === 'bar' ? 'h-4 w-1 rounded-full' : 'size-2 rounded-full')}\n                />\n              )\n            )}\n            {title}\n          </Heading>\n          {description && <p className=\"m-0 text-sm text-pretty text-fg-muted\">{description}</p>}\n        </div>\n      </div>\n      {action && <div className=\"flex shrink-0 items-center gap-2 text-sm\">{action}</div>}\n    </div>\n  );\n}\n\n/** Body of a card that uses `CardHeader`: the card padding token (16 → 24 px). */\nexport function CardBody({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cx('p-card', className)} {...rest} />;\n}\n\n/** Actions at the bottom of a card (Cancel / Save), right-aligned, with a divider. */\nexport function CardFooter({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cx('flex flex-wrap items-center justify-end gap-3 border-t border-border px-card py-4', className)}\n      {...rest}\n    />\n  );\n}\n\n/** Title that links the whole interactive card. */\nexport function CardLink({\n  href,\n  as: Link = 'a',\n  children,\n  className,\n}: {\n  href: string;\n  as?: ElementType;\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <Link\n      href={href}\n      data-card-link=\"\"\n      className={cx(\n        \"text-inherit no-underline after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] focus-visible:outline-none\",\n        className,\n      )}\n    >\n      {children}\n    </Link>\n  );\n}\n\n/* ---------- Specialized cards (patterns from the kodffe.com wireframes) ---------- */\n\nexport interface IconCardProps extends Omit<CardProps, 'title'> {\n  icon: IconName;\n  title: ReactNode;\n  description?: ReactNode;\n  href?: string;\n  linkAs?: ElementType;\n  /** `stacked` (default): icon above the text. `inline`: icon beside the text (compact lists, settings shortcuts). */\n  layout?: 'stacked' | 'inline';\n  /** `start` (default) or `center` (stacked only, e.g. a row of three benefits). */\n  align?: 'start' | 'center';\n  /** A button or link at the bottom (\"Set up\", \"Learn more\"). Not with `href` (the whole card is the link). */\n  action?: ReactNode;\n  /** The icon tile's color. */\n  iconTone?: Extract<IconTileTone, 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral'>;\n}\n\n\n/** Feature / service card: icon tile, title, short text; stacked or inline, with an optional action. */\nexport function IconCard({\n  icon,\n  title,\n  description,\n  href,\n  linkAs,\n  layout = 'stacked',\n  align = 'start',\n  action,\n  iconTone = 'primary',\n  className,\n  ...rest\n}: IconCardProps) {\n  const inline = layout === 'inline';\n  const centered = !inline && align === 'center';\n  return (\n    <Card\n      interactive={!!href}\n      className={cx(inline ? 'flex items-start gap-4' : 'grid content-start', centered && 'justify-items-center text-center', className)}\n      {...rest}\n    >\n      <IconTile icon={icon} size={inline ? 'md' : 'lg'} tone={iconTone} className={inline ? undefined : 'mb-4'} />\n      <div className={cx('grid min-w-0 gap-1.5', centered && 'justify-items-center')}>\n        <h3 className={cx('m-0 font-display font-bold tracking-tight', inline ? 'text-base' : 'text-lg')}>\n          {href ? (\n            <CardLink href={href} as={linkAs}>\n              {title}\n            </CardLink>\n          ) : (\n            title\n          )}\n        </h3>\n        {description && <p className=\"m-0 text-[15px] text-fg-muted\">{description}</p>}\n        {action && !href && <div className=\"mt-2.5\">{action}</div>}\n      </div>\n    </Card>\n  );\n}\n\nexport interface PersonLink {\n  /** Visible text (\"LinkedIn\"). */\n  label: string;\n  href: string;\n  icon?: IconName;\n  /** Full accessible name when several cards repeat the same label (\"Alexis Saransig on LinkedIn\"). */\n  ariaLabel?: string;\n}\n\nexport interface PersonCardProps extends Omit<CardProps, 'title' | 'role'> {\n  name: string;\n  /** Job title (\"CEO\", \"Co-founder & CTO\"). */\n  role: ReactNode;\n  /** Square photo, shown round. Falls back to initials. Real people only, with their consent. */\n  photo?: string;\n  bio?: ReactNode;\n  links?: PersonLink[];\n  /** Heading level of the name; `h3` inside a titled section. */\n  headingAs?: 'h2' | 'h3' | 'h4';\n}\n\nconst initials = (name: string) =>\n  name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((p) => p[0]!.toUpperCase())\n    .join('');\n\n/** Team member or founder: photo, name, role, short bio and profile links. Server-safe. */\nexport function PersonCard({\n  name,\n  role,\n  photo,\n  bio,\n  links = [],\n  headingAs: Heading = 'h3',\n  ...rest\n}: PersonCardProps) {\n  return (\n    <Card {...rest} className={cx('grid content-start gap-4', rest.className)}>\n      <div className=\"flex items-center gap-4\">\n        {photo ? (\n          <img\n            src={photo}\n            alt=\"\"\n            width={96}\n            height={96}\n            loading=\"lazy\"\n            decoding=\"async\"\n            className=\"size-20 shrink-0 rounded-full bg-surface-muted object-cover sm:size-24\"\n          />\n        ) : (\n          <span\n            aria-hidden=\"true\"\n            className=\"grid size-20 shrink-0 place-items-center rounded-full bg-info-surface font-display text-2xl font-bold text-info-fg sm:size-24\"\n          >\n            {initials(name)}\n          </span>\n        )}\n        <div className=\"grid gap-0.5\">\n          <Heading className=\"m-0 font-display text-xl font-bold tracking-tight\">{name}</Heading>\n          <p className=\"m-0 text-sm font-semibold text-link\">{role}</p>\n        </div>\n      </div>\n      {bio && <p className=\"m-0 text-[15px] text-fg-muted\">{bio}</p>}\n      {links.length > 0 && (\n        <ul className=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-2 p-0\">\n          {links.map((l) => (\n            <li key={l.href}>\n              <a\n                href={l.href}\n                aria-label={l.ariaLabel}\n                className=\"inline-flex min-h-6 items-center gap-1.5 rounded-xs text-sm font-semibold text-link underline-offset-4 hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n              >\n                {l.icon && <Icon name={l.icon} size={18} />}\n                {l.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      )}\n    </Card>\n  );\n}\n\nexport interface MetricCardProps extends Omit<CardProps, 'title'> {\n  label: ReactNode;\n  value: ReactNode;\n  /** Change vs. previous period, e.g. +12.5. Positive is good unless `invertTrend`. */\n  delta?: number;\n  deltaLabel?: ReactNode;\n  invertTrend?: boolean;\n  /** Small chart under the value (e.g. `<Sparkline />`). */\n  chart?: ReactNode;\n  icon?: IconName;\n  /** Colored stripe on the left, to group or tell metrics apart. Pair it with the label, never alone. */\n  tone?: MetricTone;\n  /** One line under the value (\"12 still in\", \"of 15 members\"). */\n  hint?: ReactNode;\n}\n\nexport type MetricTone = 'none' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';\n\nconst TONE_STRIPE: Record<Exclude<MetricTone, 'none'>, string> = {\n  primary: 'before:bg-primary',\n  accent: 'before:bg-accent',\n  success: 'before:bg-success-icon',\n  warning: 'before:bg-warning-icon',\n  danger: 'before:bg-danger-icon',\n  info: 'before:bg-info-icon',\n};\n\n/** KPI tile for dashboards. */\nexport function MetricCard({\n  label,\n  value,\n  delta,\n  deltaLabel,\n  invertTrend,\n  chart,\n  icon,\n  tone = 'none',\n  hint,\n  ...rest\n}: MetricCardProps) {\n  const good = delta === undefined ? undefined : invertTrend ? delta < 0 : delta > 0;\n  return (\n    <Card\n      padding=\"sm\"\n      {...rest}\n      className={cx(\n        'grid gap-2 overflow-hidden sm:p-5',\n        tone !== 'none' &&\n          cx('pl-5 before:absolute before:inset-y-0 before:left-0 before:w-1 sm:pl-6', TONE_STRIPE[tone]),\n        rest.className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 text-sm font-medium text-fg-muted\">\n        {label}\n        {icon && <Icon name={icon} size={22} className=\"text-primary\" />}\n      </div>\n      <div className=\"font-display text-3xl font-extrabold tracking-tight tabular-nums\">{value}</div>\n      {hint && <div className=\"text-sm text-fg-muted\">{hint}</div>}\n      {delta !== undefined && (\n        <div className=\"flex items-center gap-1.5 text-sm\">\n          <span\n            className={cx(\n              'inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 font-semibold tabular-nums',\n              good\n                ? 'bg-success-surface text-success-fg'\n                : delta === 0\n                  ? 'bg-surface-muted text-fg-muted'\n                  : 'bg-danger-surface text-danger-fg',\n            )}\n          >\n            <Glyph name={delta >= 0 ? 'arrow-up' : 'arrow-down'} size={12} />\n            {Math.abs(delta)}%\n          </span>\n          {deltaLabel && <span className=\"text-fg-muted\">{deltaLabel}</span>}\n        </div>\n      )}\n      {chart}\n    </Card>\n  );\n}\n\nexport interface ProductCardProps extends Omit<CardProps, 'title'> {\n  name: ReactNode;\n  tagline: ReactNode;\n  /** Status badge (e.g. `<Badge variant=\"live\">Live</Badge>`). */\n  badge?: ReactNode;\n  icon?: IconName;\n  price?: ReactNode;\n  href: string;\n  linkAs?: ElementType;\n}\n\n/** Kodffe product (Yapakit, LinkedFace…). */\nexport function ProductCard({ name, tagline, badge, icon = 'store', price, href, linkAs, ...rest }: ProductCardProps) {\n  return (\n    <Card interactive {...rest} className={cx('flex flex-col gap-4', rest.className)}>\n      <div className=\"flex items-start justify-between gap-3\">\n        <span className=\"grid size-12 place-items-center rounded-md bg-gradient-brand text-on-primary\">\n          <Icon name={icon} size={28} />\n        </span>\n        {badge}\n      </div>\n      <div>\n        <h3 className=\"m-0 font-display text-xl font-bold tracking-tight\">\n          <CardLink href={href} as={linkAs}>\n            {name}\n          </CardLink>\n        </h3>\n        <p className=\"m-0 mt-1 text-[15px] text-fg-muted\">{tagline}</p>\n      </div>\n      {price && <p className=\"m-0 mt-auto text-sm font-semibold text-fg\">{price}</p>}\n    </Card>\n  );\n}\n\nexport interface PlanCardProps extends Omit<CardProps, 'title'> {\n  name: ReactNode;\n  price: ReactNode;\n  period?: ReactNode;\n  /** A line under the price (\"or $100 a year\", \"billed monthly\"). */\n  priceNote?: ReactNode;\n  description?: ReactNode;\n  features: ReactNode[];\n  cta: ReactNode;\n  /** Highlights the recommended plan. */\n  featured?: boolean;\n  featuredLabel?: ReactNode;\n}\n\n/** Pricing plan. Mark one plan `featured` at most. */\nexport function PlanCard({\n  name,\n  price,\n  period,\n  priceNote,\n  description,\n  features,\n  cta,\n  featured,\n  featuredLabel = 'Most popular',\n  ...rest\n}: PlanCardProps) {\n  return (\n    <Card\n      variant={featured ? 'raised' : 'outline'}\n      padding=\"lg\"\n      {...rest}\n      className={cx('flex flex-col gap-5', featured && 'border-2 border-primary', rest.className)}\n    >\n      {featured && (\n        <span className=\"absolute -top-3 left-8 rounded-full bg-primary px-3 py-1 text-xs font-bold text-on-primary\">\n          {featuredLabel}\n        </span>\n      )}\n      <div>\n        <h3 className=\"m-0 font-display text-lg font-bold\">{name}</h3>\n        {description && <p className=\"m-0 mt-1 text-sm text-fg-muted\">{description}</p>}\n      </div>\n      <p className=\"m-0 flex items-baseline gap-1\">\n        <span className=\"font-display text-4xl font-extrabold tracking-tight tabular-nums\">{price}</span>\n        {period && <span className=\"text-sm text-fg-muted\">{period}</span>}\n      </p>\n      {priceNote && <p className=\"m-0 -mt-3 text-sm text-fg-muted\">{priceNote}</p>}\n      <CheckList items={features} marker=\"plain\" />\n      <div className=\"mt-auto grid *:w-full\">{cta}</div>\n    </Card>\n  );\n}\n\nexport interface CaseCardProps extends Omit<CardProps, 'title'> {\n  client: ReactNode;\n  title: ReactNode;\n  /** Headline result, e.g. \"−82% manual entry\". */\n  result: ReactNode;\n  tags?: ReactNode[];\n  image?: string;\n  href: string;\n  linkAs?: ElementType;\n}\n\n/** Case study teaser: result first. */\nexport function CaseCard({ client, title, result, tags, image, href, linkAs, ...rest }: CaseCardProps) {\n  return (\n    <Card interactive padding=\"none\" {...rest} className={cx('flex flex-col overflow-hidden', rest.className)}>\n      {image && <img src={image} alt=\"\" className=\"aspect-[16/9] w-full object-cover\" />}\n      <div className=\"flex flex-1 flex-col gap-3 p-6\">\n        <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">{client}</p>\n        <p className=\"m-0 font-display text-3xl font-extrabold tracking-tight text-link\">{result}</p>\n        <h3 className=\"m-0 text-[17px] leading-snug font-semibold\">\n          <CardLink href={href} as={linkAs}>\n            {title}\n          </CardLink>\n        </h3>\n        {tags && <div className=\"mt-auto flex flex-wrap gap-1.5 pt-2\">{tags}</div>}\n      </div>\n    </Card>\n  );\n}\n\nexport interface ArticleCardProps extends Omit<CardProps, 'title'> {\n  title: ReactNode;\n  excerpt?: ReactNode;\n  category?: ReactNode;\n  date?: string;\n  /** e.g. \"6 min read\". */\n  readingTime?: ReactNode;\n  image?: string;\n  href: string;\n  linkAs?: ElementType;\n}\n\n/** Blog / resource teaser. */\nexport function ArticleCard({\n  title,\n  excerpt,\n  category,\n  date,\n  readingTime,\n  image,\n  href,\n  linkAs,\n  ...rest\n}: ArticleCardProps) {\n  return (\n    <Card\n      as=\"article\"\n      interactive\n      padding=\"none\"\n      variant=\"outline\"\n      {...rest}\n      className={cx('flex flex-col overflow-hidden', rest.className)}\n    >\n      {image && <img src={image} alt=\"\" className=\"aspect-[16/9] w-full object-cover\" />}\n      <div className=\"flex flex-1 flex-col gap-2 p-6\">\n        {category && <p className=\"m-0 text-xs font-semibold tracking-wide text-link uppercase\">{category}</p>}\n        <h3 className=\"m-0 font-display text-lg leading-snug font-bold tracking-tight text-balance\">\n          <CardLink href={href} as={linkAs}>\n            {title}\n          </CardLink>\n        </h3>\n        {excerpt && <p className=\"m-0 line-clamp-3 text-[15px] text-fg-muted\">{excerpt}</p>}\n        {(date || readingTime) && (\n          <p className=\"m-0 mt-auto flex gap-2 pt-2 text-sm text-fg-muted\">\n            {date && (\n              <time dateTime={date}>{new Date(date).toLocaleDateString(undefined, { dateStyle: 'medium' })}</time>\n            )}\n            {date && readingTime && <span aria-hidden=\"true\">·</span>}\n            {readingTime}\n          </p>\n        )}\n      </div>\n    </Card>\n  );\n}\n"],"mappings":"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"}

package/dist/card/insight-card.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { type ChipListItem } from '../data-display/insights';
+export interface InsightCardProps {
+    name: string;
+    /** "@ana" or a role. */
+    handle?: string;
+    avatarSrc?: string;
+    /** Clamped to three lines. */
+    summary: ReactNode;
+    topics?: ChipListItem[];
+    action?: {
+        label: string;
+        href: string;
+    };
+    headingLevel?: 2 | 3;
+    className?: string;
+}
+/** A person's AI summary in a grid: avatar, name and handle, a clamped summary, topics and a link to the profile. */
+export declare function InsightCard({ name, handle, avatarSrc, summary, topics, action, headingLevel, className, }: InsightCardProps): import("react").JSX.Element;