@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/otp-input/otp-input.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { useFieldProps as t } from "../input/input.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
+//#region src/otp-input/otp-input.tsx
+function a({ value: a, onChange: o, onComplete: s, length: c = 6, alphanumeric: l = !1, digitLabel: u = "Digit {n} of {count}", groupSize: d, className: f, ...p }) {
+	let m = t(p), h = i([]), g = l ? /[^a-z0-9]/gi : /\D/g, _ = Array.from({ length: c }, (e, t) => a[t] ?? ""), v = (e) => {
+		let t = e.replace(g, "").slice(0, c).toUpperCase();
+		return o(t), t.length === c && s?.(t), t;
+	}, y = (e) => h.current[Math.max(0, Math.min(c - 1, e))]?.focus(), b = (e, t) => {
+		let n = t.replace(g, "");
+		if (!n) return;
+		if (n.length > 1) {
+			let t = v(a.slice(0, e) + n);
+			y(t.length);
+			return;
+		}
+		let r = (a.slice(0, e) + n + a.slice(e + 1)).slice(0, c);
+		v(r), y(e + 1);
+	}, x = (e, t) => {
+		t.key === "Backspace" ? (t.preventDefault(), _[e] ? v(a.slice(0, e) + a.slice(e + 1)) : e > 0 && (v(a.slice(0, e - 1) + a.slice(e)), y(e - 1))) : t.key === "ArrowLeft" ? y(e - 1) : t.key === "ArrowRight" && y(e + 1);
+	}, S = (e) => {
+		e.preventDefault();
+		let t = v(e.clipboardData.getData("text"));
+		y(t.length);
+	};
+	return /* @__PURE__ */ n("div", {
+		role: "group",
+		"aria-describedby": m["aria-describedby"],
+		className: e("flex items-center gap-2 font-sans", f),
+		children: _.map((t, i) => /* @__PURE__ */ r("span", {
+			className: e("contents"),
+			children: [d && i > 0 && i % d === 0 && /* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "mx-1 h-0.5 w-3 rounded-full bg-border"
+			}), /* @__PURE__ */ n("input", {
+				ref: (e) => {
+					h.current[i] = e;
+				},
+				id: i === 0 ? m.id : void 0,
+				value: t,
+				inputMode: l ? "text" : "numeric",
+				autoComplete: i === 0 ? "one-time-code" : "off",
+				maxLength: i === 0 ? c : 1,
+				"aria-label": u.replace("{n}", String(i + 1)).replace("{count}", String(c)),
+				"aria-invalid": m["aria-invalid"],
+				disabled: m.disabled,
+				onChange: (e) => b(i, e.target.value),
+				onKeyDown: (e) => x(i, e),
+				onPaste: S,
+				onFocus: (e) => e.target.select(),
+				className: e("size-12 rounded-sm border bg-bg text-center font-mono text-xl font-bold text-fg caret-primary outline-none sm:size-13", m.invalid ? "border-danger-border" : "border-border", "focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:opacity-60")
+			})]
+		}, i))
+	});
+}
+//#endregion
+export { a as OtpInput };
+
+//# sourceMappingURL=otp-input.js.map

package/dist/otp-input/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":["OtpInput","rest","field","useFieldProps","refs","useRef","pattern","alphanumeric","chars","value","i","commit","clean","next","length","onChange","onComplete","focus","onInput","typed","raw","nextValue","onKeyDown","e","onPaste","cx","className","groupSize","el","c","digitLabel"],"sources":["../../src/otp-input/otp-input.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, type ClipboardEvent, type KeyboardEvent } from 'react';\nimport { cx } from '../lib/cx';\nimport { useFieldProps } from '../input/input';\n\nexport interface OtpInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  /** Called once all digits are filled (e.g. submit automatically). */\n  onComplete?: (value: string) => void;\n  length?: number;\n  /** Allow letters as well as digits. */\n  alphanumeric?: boolean;\n  id?: string;\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Accessible name pattern for each box; `{n}` and `{count}` are replaced. */\n  digitLabel?: string;\n  /** Visual gap after this many boxes (e.g. 3 → \"123 456\"). */\n  groupSize?: number;\n  className?: string;\n}\n\n/**\n * One-time code entry (2FA, email verification). Typing advances, Backspace goes back,\n * pasting a full code fills every box, and `autocomplete=\"one-time-code\"` lets phones suggest\n * the code from SMS.\n */\nexport function OtpInput({\n  value,\n  onChange,\n  onComplete,\n  length = 6,\n  alphanumeric = false,\n  digitLabel = 'Digit {n} of {count}',\n  groupSize,\n  className,\n  ...rest\n}: OtpInputProps) {\n  const field = useFieldProps(rest);\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\n  const pattern = alphanumeric ? /[^a-z0-9]/gi : /\\D/g;\n  const chars = Array.from({ length }, (_, i) => value[i] ?? '');\n\n  const commit = (next: string) => {\n    const clean = next.replace(pattern, '').slice(0, length).toUpperCase();\n    onChange(clean);\n    if (clean.length === length) onComplete?.(clean);\n    return clean;\n  };\n\n  const focus = (i: number) => refs.current[Math.max(0, Math.min(length - 1, i))]?.focus();\n\n  const onInput = (i: number, raw: string) => {\n    const typed = raw.replace(pattern, '');\n    if (!typed) return;\n    if (typed.length > 1) {\n      // Autofill or paste into one box: spread from this position.\n      const clean = commit(value.slice(0, i) + typed);\n      focus(clean.length);\n      return;\n    }\n    const nextValue = (value.slice(0, i) + typed + value.slice(i + 1)).slice(0, length);\n    commit(nextValue);\n    focus(i + 1);\n  };\n\n  const onKeyDown = (i: number, e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      if (chars[i]) commit(value.slice(0, i) + value.slice(i + 1));\n      else if (i > 0) {\n        commit(value.slice(0, i - 1) + value.slice(i));\n        focus(i - 1);\n      }\n    } else if (e.key === 'ArrowLeft') focus(i - 1);\n    else if (e.key === 'ArrowRight') focus(i + 1);\n  };\n\n  const onPaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const clean = commit(e.clipboardData.getData('text'));\n    focus(clean.length);\n  };\n\n  return (\n    <div\n      role=\"group\"\n      aria-describedby={field['aria-describedby']}\n      className={cx('flex items-center gap-2 font-sans', className)}\n    >\n      {chars.map((c, i) => (\n        <span key={i} className={cx('contents')}>\n          {groupSize && i > 0 && i % groupSize === 0 && (\n            <span aria-hidden=\"true\" className=\"mx-1 h-0.5 w-3 rounded-full bg-border\" />\n          )}\n          <input\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            id={i === 0 ? field.id : undefined}\n            value={c}\n            inputMode={alphanumeric ? 'text' : 'numeric'}\n            autoComplete={i === 0 ? 'one-time-code' : 'off'}\n            maxLength={i === 0 ? length : 1}\n            aria-label={digitLabel.replace('{n}', String(i + 1)).replace('{count}', String(length))}\n            aria-invalid={field['aria-invalid']}\n            disabled={field.disabled}\n            onChange={(e) => onInput(i, e.target.value)}\n            onKeyDown={(e) => onKeyDown(i, e)}\n            onPaste={onPaste}\n            onFocus={(e) => e.target.select()}\n            className={cx(\n              'size-12 rounded-sm border bg-bg text-center font-mono text-xl font-bold text-fg caret-primary outline-none sm:size-13',\n              field.invalid ? 'border-danger-border' : 'border-border',\n              'focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:opacity-60',\n            )}\n          />\n        </span>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/overlay/overlay.d.ts

@@ -0,0 +1,53 @@
+import { type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
+/**
+ * Shared building blocks for dialog-based overlays (Modal, Drawer).
+ * Internal: not exported from the package index.
+ */
+export declare function OverlayBackdrop({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export declare function CloseButton({ label }: {
+    label: string;
+}): import("react").JSX.Element;
+export interface PanelHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    hideTitle?: boolean;
+    hideClose?: boolean;
+    closeLabel: string;
+    /** Extra props for the header element (e.g. swipe handlers). */
+    dragProps?: SwipeHandlers;
+    /** `brand`: a solid brand band with white text (dark token set, so the close button stays AA). */
+    tone?: 'default' | 'brand';
+}
+export declare function PanelHeader({ title, description, hideTitle, hideClose, closeLabel, dragProps, tone }: PanelHeaderProps): import("react").JSX.Element;
+export declare function PanelBody({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Footer actions: stacked full-width on mobile (primary action at the bottom, next to the thumb), a right-aligned row from `sm`. */
+export declare function PanelFooter({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Visual drag handle for bottom sheets. */
+export declare function SheetHandle({ className, ...handlers }: {
+    className?: string;
+} & SwipeHandlers): import("react").JSX.Element;
+export type SwipeDirection = 'down' | 'left' | 'right';
+export interface SwipeHandlers {
+    onPointerDown?: (e: ReactPointerEvent<HTMLElement>) => void;
+    onPointerMove?: (e: ReactPointerEvent<HTMLElement>) => void;
+    onPointerUp?: (e: ReactPointerEvent<HTMLElement>) => void;
+    onPointerCancel?: (e: ReactPointerEvent<HTMLElement>) => void;
+}
+/**
+ * Swipe-to-dismiss for sheets and drawers. The panel follows the finger; releasing past
+ * 25% of its size (or with a quick flick) dismisses it. The exit animation continues from
+ * the dragged position because the exit keyframes only define their end state.
+ */
+export declare function useSwipeDismiss(direction: SwipeDirection, onDismiss: () => void, { touchOnly }?: {
+    touchOnly?: boolean | undefined;
+}): {
+    panelRef: import("react").RefObject<HTMLDivElement | null>;
+    handlers: SwipeHandlers;
+};

package/dist/overlay/overlay.js

@@ -0,0 +1,103 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCallback as r, useRef as i } from "react";
+import * as a from "@radix-ui/react-dialog";
+//#region src/overlay/overlay.tsx
+function o({ className: n }) {
+	return /* @__PURE__ */ t(a.Overlay, { className: e("kf-overlay fixed inset-0 z-50 bg-overlay", n) });
+}
+function s({ label: n }) {
+	return /* @__PURE__ */ t(a.Close, {
+		"aria-label": n,
+		className: e("-mr-2 -mt-1 grid size-10 shrink-0 cursor-pointer place-items-center rounded-full text-fg-muted", "transition-colors duration-150 hover:bg-surface-muted hover:text-fg", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus"),
+		children: /* @__PURE__ */ t("svg", {
+			viewBox: "0 0 24 24",
+			width: "20",
+			height: "20",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ t("path", {
+				d: "M6 6l12 12M18 6L6 18",
+				stroke: "currentColor",
+				strokeWidth: "2.25",
+				strokeLinecap: "round",
+				fill: "none"
+			})
+		})
+	});
+}
+function c({ title: r, description: i, hideTitle: o, hideClose: c, closeLabel: l, dragProps: u, tone: d = "default" }) {
+	let f = !o || !c, p = d === "brand" && f;
+	return /* @__PURE__ */ n("div", {
+		...p ? { "data-theme": "dark" } : {},
+		className: e("flex items-start gap-4 px-6", p ? "mb-5 bg-primary-strong pt-6 pb-5 text-fg" : f ? "pt-6 pb-4" : "pt-2"),
+		...u,
+		children: [/* @__PURE__ */ n("div", {
+			className: e("min-w-0 flex-1", o && "sr-only"),
+			children: [/* @__PURE__ */ t(a.Title, {
+				className: "m-0 font-display text-xl font-bold tracking-tight text-balance text-fg",
+				children: r
+			}), i && /* @__PURE__ */ t(a.Description, {
+				className: "m-0 mt-1 text-sm text-fg-muted",
+				children: i
+			})]
+		}), !c && /* @__PURE__ */ t(s, { label: l })]
+	});
+}
+function l({ children: n, className: r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 text-[15px]", r),
+		children: n
+	});
+}
+function u({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		className: "flex flex-col-reverse gap-2 border-t border-border px-6 py-4 *:w-full sm:flex-row sm:justify-end sm:*:w-auto",
+		children: e
+	});
+}
+function d({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"aria-hidden": "true",
+		className: e("flex cursor-grab touch-none justify-center pt-3 pb-1 active:cursor-grabbing", n),
+		...r,
+		children: /* @__PURE__ */ t("span", { className: "h-1.5 w-10 rounded-full bg-border" })
+	});
+}
+function f(e, t, { touchOnly: n = !1 } = {}) {
+	let a = i(null), o = i(null), s = e === "down" ? "Y" : "X", c = e === "left" ? -1 : 1, l = (e) => s === "Y" ? e.clientY : e.clientX, u = r(() => {
+		let e = a.current;
+		e && (e.style.transition = "transform 200ms var(--ease-standard)", e.style.transform = "");
+	}, []);
+	return {
+		panelRef: a,
+		handlers: {
+			onPointerDown(e) {
+				e.button !== 0 || n && e.pointerType === "mouse" || e.target.closest("button, a, input, select, textarea") || (o.current = {
+					start: l(e),
+					time: performance.now(),
+					delta: 0
+				}, e.currentTarget.setPointerCapture(e.pointerId), a.current && (a.current.style.transition = "none"));
+			},
+			onPointerMove(e) {
+				if (!o.current || !a.current) return;
+				let t = Math.max(0, (l(e) - o.current.start) * c);
+				o.current.delta = t, a.current.style.transform = `translate${s}(${t * c}px)`;
+			},
+			onPointerUp() {
+				let e = o.current, n = a.current;
+				if (o.current = null, !e || !n) return;
+				let r = s === "Y" ? n.offsetHeight : n.offsetWidth, i = e.delta / Math.max(1, performance.now() - e.time);
+				e.delta > r * .25 || e.delta > 24 && i > .6 ? (n.style.transition = "", t()) : u();
+			},
+			onPointerCancel() {
+				o.current = null, u();
+			}
+		}
+	};
+}
+//#endregion
+export { s as CloseButton, o as OverlayBackdrop, l as PanelBody, u as PanelFooter, c as PanelHeader, d as SheetHandle, f as useSwipeDismiss };
+
+//# sourceMappingURL=overlay.js.map

package/dist/overlay/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","names":["Dialog","OverlayBackdrop","cx","className","CloseButton","label","PanelHeader","visible","hideTitle","hideClose","brand","tone","dragProps","title","description","closeLabel","PanelBody","PanelFooter","SheetHandle","handlers","useSwipeDismiss","panelRef","useRef","drag","axis","direction","sign","read","reset","useCallback","panel","touchOnly","delta","d","size","velocity","onDismiss"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { useCallback, useRef, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\n/**\n * Shared building blocks for dialog-based overlays (Modal, Drawer).\n * Internal: not exported from the package index.\n */\n\nexport function OverlayBackdrop({ className }: { className?: string }) {\n  return <Dialog.Overlay className={cx('kf-overlay fixed inset-0 z-50 bg-overlay', className)} />;\n}\n\nexport function CloseButton({ label }: { label: string }) {\n  return (\n    <Dialog.Close\n      aria-label={label}\n      className={cx(\n        '-mr-2 -mt-1 grid size-10 shrink-0 cursor-pointer place-items-center rounded-full text-fg-muted',\n        'transition-colors duration-150 hover:bg-surface-muted hover:text-fg',\n        'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n      )}\n    >\n      <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" 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    </Dialog.Close>\n  );\n}\n\nexport interface PanelHeaderProps {\n  title: ReactNode;\n  description?: ReactNode;\n  hideTitle?: boolean;\n  hideClose?: boolean;\n  closeLabel: string;\n  /** Extra props for the header element (e.g. swipe handlers). */\n  dragProps?: SwipeHandlers;\n  /** `brand`: a solid brand band with white text (dark token set, so the close button stays AA). */\n  tone?: 'default' | 'brand';\n}\n\nexport function PanelHeader({ title, description, hideTitle, hideClose, closeLabel, dragProps, tone = 'default' }: PanelHeaderProps) {\n  const visible = !hideTitle || !hideClose;\n  const brand = tone === 'brand' && visible;\n  return (\n    <div\n      {...(brand ? { 'data-theme': 'dark' } : {})}\n      className={cx(\n        'flex items-start gap-4 px-6',\n        brand ? 'mb-5 bg-primary-strong pt-6 pb-5 text-fg' : visible ? 'pt-6 pb-4' : 'pt-2',\n      )}\n      {...dragProps}\n    >\n      <div className={cx('min-w-0 flex-1', hideTitle && 'sr-only')}>\n        <Dialog.Title className=\"m-0 font-display text-xl font-bold tracking-tight text-balance text-fg\">{title}</Dialog.Title>\n        {description && <Dialog.Description className=\"m-0 mt-1 text-sm text-fg-muted\">{description}</Dialog.Description>}\n      </div>\n      {!hideClose && <CloseButton label={closeLabel} />}\n    </div>\n  );\n}\n\nexport function PanelBody({ children, className }: { children?: ReactNode; className?: string }) {\n  return <div className={cx('min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6 text-[15px]', className)}>{children}</div>;\n}\n\n/** Footer actions: stacked full-width on mobile (primary action at the bottom, next to the thumb), a right-aligned row from `sm`. */\nexport function PanelFooter({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"flex flex-col-reverse gap-2 border-t border-border px-6 py-4 *:w-full sm:flex-row sm:justify-end sm:*:w-auto\">\n      {children}\n    </div>\n  );\n}\n\n/** Visual drag handle for bottom sheets. */\nexport function SheetHandle({ className, ...handlers }: { className?: string } & SwipeHandlers) {\n  return (\n    <div aria-hidden=\"true\" className={cx('flex cursor-grab touch-none justify-center pt-3 pb-1 active:cursor-grabbing', className)} {...handlers}>\n      <span className=\"h-1.5 w-10 rounded-full bg-border\" />\n    </div>\n  );\n}\n\nexport type SwipeDirection = 'down' | 'left' | 'right';\n\nexport interface SwipeHandlers {\n  onPointerDown?: (e: ReactPointerEvent<HTMLElement>) => void;\n  onPointerMove?: (e: ReactPointerEvent<HTMLElement>) => void;\n  onPointerUp?: (e: ReactPointerEvent<HTMLElement>) => void;\n  onPointerCancel?: (e: ReactPointerEvent<HTMLElement>) => void;\n}\n\n/**\n * Swipe-to-dismiss for sheets and drawers. The panel follows the finger; releasing past\n * 25% of its size (or with a quick flick) dismisses it. The exit animation continues from\n * the dragged position because the exit keyframes only define their end state.\n */\nexport function useSwipeDismiss(direction: SwipeDirection, onDismiss: () => void, { touchOnly = false } = {}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useRef<{ start: number; time: number; delta: number } | null>(null);\n  const axis = direction === 'down' ? 'Y' : 'X';\n  const sign = direction === 'left' ? -1 : 1;\n\n  const read = (e: ReactPointerEvent) => (axis === 'Y' ? e.clientY : e.clientX);\n\n  const reset = useCallback(() => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    panel.style.transition = 'transform 200ms var(--ease-standard)';\n    panel.style.transform = '';\n  }, []);\n\n  const handlers: SwipeHandlers = {\n    onPointerDown(e) {\n      if (e.button !== 0 || (touchOnly && e.pointerType === 'mouse')) return;\n      if ((e.target as HTMLElement).closest('button, a, input, select, textarea')) return;\n      drag.current = { start: read(e), time: performance.now(), delta: 0 };\n      e.currentTarget.setPointerCapture(e.pointerId);\n      if (panelRef.current) panelRef.current.style.transition = 'none';\n    },\n    onPointerMove(e) {\n      if (!drag.current || !panelRef.current) return;\n      const delta = Math.max(0, (read(e) - drag.current.start) * sign);\n      drag.current.delta = delta;\n      panelRef.current.style.transform = `translate${axis}(${delta * sign}px)`;\n    },\n    onPointerUp() {\n      const d = drag.current;\n      const panel = panelRef.current;\n      drag.current = null;\n      if (!d || !panel) return;\n      const size = axis === 'Y' ? panel.offsetHeight : panel.offsetWidth;\n      const velocity = d.delta / Math.max(1, performance.now() - d.time);\n      if (d.delta > size * 0.25 || (d.delta > 24 && velocity > 0.6)) {\n        panel.style.transition = '';\n        onDismiss();\n      } else {\n        reset();\n      }\n    },\n    onPointerCancel() {\n      drag.current = null;\n      reset();\n    },\n  };\n\n  return { panelRef, handlers };\n}\n"],"mappings":";;;;;;AAWA,SAAgBC,EAAgB,EAAE,gBAAqC;CACrE,OAAO,kBAACD,EAAO,SAAR,EAAgB,WAAWE,EAAG,4CAA4CC,CAAS,EAAI,CAAA;AAChG;AAEA,SAAgBC,EAAY,EAAE,YAA4B;CACxD,OACE,kBAACJ,EAAO,OAAR;EACE,cAAYK;EACZ,WAAWH,EACT,kGACA,uEACA,oFACF;EAEA,UAAA,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;GAAK,eAAY;GAAO,WAAU;GAC3E,UAAA,kBAAC,QAAD;IAAM,GAAE;IAAuB,QAAO;IAAe,aAAY;IAAO,eAAc;IAAQ,MAAK;GAAQ,CAAA;EACxG,CAAA;CACO,CAAA;AAElB;AAcA,SAAgBI,EAAY,EAAE,UAAO,gBAAa,cAAW,cAAW,eAAY,cAAW,UAAO,aAA+B;CACnI,IAAMC,IAAU,CAACC,KAAa,CAACC,GACzBC,IAAQC,MAAS,WAAWJ;CAClC,OACE,kBAAC,OAAD;EACE,GAAKG,IAAQ,EAAE,cAAc,OAAO,IAAI,CAAC;EACzC,WAAWR,EACT,+BACAQ,IAAQ,6CAA6CH,IAAU,cAAc,MAC/E;EACA,GAAIK;EANN,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAWV,EAAG,kBAAkBM,KAAa,SAAS;GAA3D,UAAA,CACE,kBAACR,EAAO,OAAR;IAAc,WAAU;IAA0E,UAAAa;GAAoB,CAAA,GACrHC,KAAe,kBAACd,EAAO,aAAR;IAAoB,WAAU;IAAkC,UAAAc;GAAgC,CAAA,CAC7G;EACJ,CAAA,GAAA,CAACL,KAAa,kBAACL,GAAD,EAAa,OAAOW,EAAa,CAAA,CAC7C;;AAET;AAEA,SAAgBC,EAAU,EAAE,aAAU,gBAA2D;CAC/F,OAAO,kBAAC,OAAD;EAAK,WAAWd,EAAG,2EAA2EC,CAAS;EAAI;CAAc,CAAA;AAClI;AAGA,SAAgBc,EAAY,EAAE,eAAqC;CACjE,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAGA,SAAgBC,EAAY,EAAE,cAAW,GAAGC,KAAoD;CAC9F,OACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAWjB,EAAG,+EAA+EC,CAAS;EAAG,GAAIgB;EACnI,UAAA,kBAAC,QAAD,EAAM,WAAU,oCAAqC,CAAA;CAClD,CAAA;AAET;AAgBA,SAAgBC,EAAgB,GAA2B,GAAuB,EAAE,eAAY,OAAU,CAAC,GAAG;CAC5G,IAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAOD,EAA8D,IAAI,GACzEE,IAAOC,MAAc,SAAS,MAAM,KACpCC,IAAOD,MAAc,SAAS,KAAK,GAEnCE,KAAQ,MAA0BH,MAAS,MAAM,EAAE,UAAU,EAAE,SAE/DI,IAAQC,QAAkB;EAC9B,IAAMC,IAAQT,EAAS;EACvB,AAAKS,MACL,EAAM,MAAM,aAAa,wCACzB,EAAM,MAAM,YAAY;CAC1B,GAAG,CAAC,CAAC;CAoCL,OAAO;EAAE;EAAU,UAAA;GAjCjB,cAAc,GAAG;IACf,AAAI,EAAE,WAAW,KAAMC,KAAa,EAAE,gBAAgB,WACjD,EAAE,OAAuB,QAAQ,oCAAoC,MAC1E,EAAK,UAAU;KAAE,OAAOJ,EAAK,CAAC;KAAG,MAAM,YAAY,IAAI;KAAG,OAAO;IAAE,GACnE,EAAE,cAAc,kBAAkB,EAAE,SAAS,GACzCN,EAAS,YAAS,EAAS,QAAQ,MAAM,aAAa;GAC5D;GACA,cAAc,GAAG;IACf,IAAI,CAACE,EAAK,WAAW,CAACF,EAAS,SAAS;IACxC,IAAMW,IAAQ,KAAK,IAAI,IAAIL,EAAK,CAAC,IAAIJ,EAAK,QAAQ,SAASG,CAAI;IAE/D,AADA,EAAK,QAAQ,QAAQM,GACrB,EAAS,QAAQ,MAAM,YAAY,YAAYR,EAAK,GAAGQ,IAAQN,EAAK;GACtE;GACA,cAAc;IACZ,IAAMO,IAAIV,EAAK,SACTO,IAAQT,EAAS;IAEvB,IADA,EAAK,UAAU,MACX,CAACY,KAAK,CAACH,GAAO;IAClB,IAAMI,IAAOV,MAAS,MAAMM,EAAM,eAAeA,EAAM,aACjDK,IAAWF,EAAE,QAAQ,KAAK,IAAI,GAAG,YAAY,IAAI,IAAIA,EAAE,IAAI;IACjE,AAAIA,EAAE,QAAQC,IAAO,OAASD,EAAE,QAAQ,MAAME,IAAW,MACvD,EAAM,MAAM,aAAa,IACzBC,EAAU,KAEVR,EAAM;GAEV;GACA,kBAAkB;IAEhB,AADA,EAAK,UAAU,MACfA,EAAM;GACR;EAGiB;CAAS;AAC9B"}

package/dist/page-header/page-header.d.ts

@@ -0,0 +1,55 @@
+import type { ElementType, ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+export interface PageHeaderAction {
+    label: string;
+    icon?: IconName;
+    /** A link when set, a button otherwise. */
+    href?: string;
+    onClick?: () => void;
+    /** The main action (one per header): a solid button, always visible. */
+    primary?: boolean;
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+}
+export interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** A small line under the description ("Last synced 5 min ago"). */
+    info?: ReactNode;
+    /** An icon tile before the title. */
+    icon?: IconName;
+    /** Instead of the icon tile, e.g. an `Avatar` on account and profile pages. */
+    media?: ReactNode;
+    /** A link above the title back to the parent page ("People"). */
+    back?: {
+        label: string;
+        href: string;
+    };
+    /** Link component for `back` (e.g. Next.js `Link`). */
+    linkAs?: ElementType;
+    /**
+     * Up to 5 actions on the right. The `primary` one stays visible on every screen; below 640px the others
+     * move into a "More" menu. For custom controls use `actionsSlot`.
+     */
+    actions?: PageHeaderAction[];
+    /** Custom content on the right (a search field, a filter), before `actions`. */
+    actionsSlot?: ReactNode;
+    /**
+     * Page tabs inside the header, usually a `TabsList` (wrap the page in `<Tabs variant="segmented-inverse">` on
+     * `brand`, `"segmented"` on `plain`) or a nav of links.
+     */
+    tabs?: ReactNode;
+    /** `brand` (default): a solid brand band (dashboards). `plain`: no band, for pages inside cards or settings. */
+    tone?: 'brand' | 'plain';
+    /** Heading level of the title. Default 1 (one per page). */
+    headingLevel?: 1 | 2;
+    labels?: {
+        more?: string;
+    };
+    className?: string;
+}
+/**
+ * The header at the top of an app page (ADR-0013): optional back link, icon or avatar, title, description and
+ * actions, with the page tabs inside the band. One per page, right under the app's top bar.
+ */
+export declare function PageHeader({ title, description, info, icon, media, back, linkAs: Link, actions, actionsSlot, tabs, tone, headingLevel, labels, className, }: PageHeaderProps): import("react").JSX.Element;

package/dist/page-header/page-header.js

@@ -0,0 +1,114 @@
+"use client";
+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 { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuItem as a, DropdownMenuTrigger as o } from "../menu/dropdown-menu.js";
+import { IconTile as s } from "../icon/icon-tile.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/page-header/page-header.tsx
+function u({ title: u, description: d, info: f, icon: p, media: m, back: h, linkAs: g = "a", actions: _ = [], actionsSlot: v, tabs: y, tone: b = "brand", headingLevel: x = 1, labels: S = {}, className: C }) {
+	let w = b === "brand", T = `h${x}`, E = _.find((e) => e.primary), D = _.filter((e) => e !== E), O = (e) => e.primary ? w ? "inverse" : "primary" : w ? "inverse-outline" : "secondary", k = (e, n) => {
+		let r = {
+			size: "sm",
+			variant: O(e),
+			iconStart: e.icon,
+			className: n
+		};
+		return e.href && !e.disabled ? /* @__PURE__ */ c(t, {
+			...r,
+			href: e.href,
+			children: e.label
+		}, e.label) : /* @__PURE__ */ c(t, {
+			...r,
+			disabled: e.disabled,
+			onClick: e.onClick,
+			children: e.label
+		}, e.label);
+	};
+	return /* @__PURE__ */ l("header", {
+		...w ? { "data-theme": "dark" } : {},
+		className: e("grid gap-4 font-sans text-fg", w ? "rounded-xl bg-primary-strong px-5 py-5 sm:px-6" : "pb-2", C),
+		children: [
+			h && /* @__PURE__ */ l(g, {
+				href: h.href,
+				className: "-mb-1 inline-flex w-fit items-center gap-1 rounded-xs text-sm font-medium text-fg-muted no-underline hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+				children: [/* @__PURE__ */ c(n, {
+					name: "chevron-left",
+					size: 16
+				}), h.label]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-4",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex min-w-[min(100%,16rem)] flex-1 items-center gap-4",
+					children: [m ?? (p && /* @__PURE__ */ c(s, {
+						icon: p,
+						size: "lg",
+						tone: w ? "inverse" : "primary"
+					})), /* @__PURE__ */ l("div", {
+						className: "grid min-w-0 gap-1",
+						children: [
+							/* @__PURE__ */ c(T, {
+								className: "m-0 font-display text-2xl leading-tight font-bold tracking-tight text-balance sm:text-[1.75rem]",
+								children: u
+							}),
+							d && /* @__PURE__ */ c("p", {
+								className: "m-0 text-[15px] text-fg-muted",
+								children: d
+							}),
+							f && /* @__PURE__ */ c("p", {
+								className: "m-0 text-xs text-fg-muted",
+								children: f
+							})
+						]
+					})]
+				}), (_.length > 0 || v) && /* @__PURE__ */ l("div", {
+					className: "flex w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0",
+					children: [
+						v && /* @__PURE__ */ c("div", {
+							className: "w-full min-w-0 sm:w-auto",
+							children: v
+						}),
+						D.length > 0 && /* @__PURE__ */ c("div", {
+							className: "hidden flex-wrap items-center gap-2 sm:flex",
+							children: D.map((e) => k(e))
+						}),
+						D.length > 0 && /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(o, {
+							asChild: !0,
+							children: /* @__PURE__ */ c("button", {
+								type: "button",
+								"aria-label": S.more ?? "More actions",
+								className: e("grid size-9 cursor-pointer place-items-center rounded-full border-0 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus sm:hidden pointer-coarse:size-11", w ? "bg-white/10 text-white shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.45)] hover:bg-white/20" : "bg-surface text-fg shadow-[inset_0_0_0_1px_var(--kf-border)] hover:bg-surface-muted"),
+								children: /* @__PURE__ */ c(n, {
+									name: "more",
+									size: 18
+								})
+							})
+						}), /* @__PURE__ */ c(i, {
+							align: "end",
+							children: D.map((e) => /* @__PURE__ */ c(a, {
+								icon: e.icon,
+								tone: e.tone,
+								disabled: e.disabled,
+								...e.href ? {
+									href: e.href,
+									linkAs: g
+								} : { onSelect: e.onClick },
+								children: e.label
+							}, e.label))
+						})] }),
+						E && k(E)
+					]
+				})]
+			}),
+			y && /* @__PURE__ */ c("div", {
+				className: "min-w-0",
+				children: y
+			})
+		]
+	});
+}
+//#endregion
+export { u as PageHeader };
+
+//# sourceMappingURL=page-header.js.map

package/dist/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":["PageHeader","Link","brand","tone","H","headingLevel","primary","actions","a","others","variantFor","button","common","Button","cx","className","back","Glyph","media","icon","IconTile","title","description","info","actionsSlot","DropdownMenu","DropdownMenuTrigger","labels","DropdownMenuContent","DropdownMenuItem","tabs"],"sources":["../../src/page-header/page-header.tsx"],"sourcesContent":["'use client';\n\nimport 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, type ButtonVariant } from '../button/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../menu/dropdown-menu';\n\nexport interface PageHeaderAction {\n  label: string;\n  icon?: IconName;\n  /** A link when set, a button otherwise. */\n  href?: string;\n  onClick?: () => void;\n  /** The main action (one per header): a solid button, always visible. */\n  primary?: boolean;\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n}\n\nexport interface PageHeaderProps {\n  title: ReactNode;\n  description?: ReactNode;\n  /** A small line under the description (\"Last synced 5 min ago\"). */\n  info?: ReactNode;\n  /** An icon tile before the title. */\n  icon?: IconName;\n  /** Instead of the icon tile, e.g. an `Avatar` on account and profile pages. */\n  media?: ReactNode;\n  /** A link above the title back to the parent page (\"People\"). */\n  back?: { label: string; href: string };\n  /** Link component for `back` (e.g. Next.js `Link`). */\n  linkAs?: ElementType;\n  /**\n   * Up to 5 actions on the right. The `primary` one stays visible on every screen; below 640px the others\n   * move into a \"More\" menu. For custom controls use `actionsSlot`.\n   */\n  actions?: PageHeaderAction[];\n  /** Custom content on the right (a search field, a filter), before `actions`. */\n  actionsSlot?: ReactNode;\n  /**\n   * Page tabs inside the header, usually a `TabsList` (wrap the page in `<Tabs variant=\"segmented-inverse\">` on\n   * `brand`, `\"segmented\"` on `plain`) or a nav of links.\n   */\n  tabs?: ReactNode;\n  /** `brand` (default): a solid brand band (dashboards). `plain`: no band, for pages inside cards or settings. */\n  tone?: 'brand' | 'plain';\n  /** Heading level of the title. Default 1 (one per page). */\n  headingLevel?: 1 | 2;\n  labels?: { more?: string };\n  className?: string;\n}\n\n/**\n * The header at the top of an app page (ADR-0013): optional back link, icon or avatar, title, description and\n * actions, with the page tabs inside the band. One per page, right under the app's top bar.\n */\nexport function PageHeader({\n  title,\n  description,\n  info,\n  icon,\n  media,\n  back,\n  linkAs: Link = 'a',\n  actions = [],\n  actionsSlot,\n  tabs,\n  tone = 'brand',\n  headingLevel = 1,\n  labels = {},\n  className,\n}: PageHeaderProps) {\n  const brand = tone === 'brand';\n  const H = `h${headingLevel}` as const;\n  const primary = actions.find((a) => a.primary);\n  const others = actions.filter((a) => a !== primary);\n\n  // One color set per tone (`cx` does not merge classes). Destructive actions are not solid red in a header:\n  // they look like the other secondary actions and turn red in the \"More\" menu; confirm them with a dialog.\n  const variantFor = (a: PageHeaderAction): ButtonVariant =>\n    a.primary ? (brand ? 'inverse' : 'primary') : brand ? 'inverse-outline' : 'secondary';\n\n  const button = (a: PageHeaderAction, className?: string) => {\n    const common = { size: 'sm' as const, variant: variantFor(a), iconStart: a.icon, className };\n    return a.href && !a.disabled ? (\n      <Button key={a.label} {...common} href={a.href}>\n        {a.label}\n      </Button>\n    ) : (\n      <Button key={a.label} {...common} disabled={a.disabled} onClick={a.onClick}>\n        {a.label}\n      </Button>\n    );\n  };\n\n  return (\n    <header\n      // The band is dark in both themes: switch to the dark token set so text and focus rings stay AA.\n      {...(brand ? { 'data-theme': 'dark' } : {})}\n      className={cx(\n        'grid gap-4 font-sans text-fg',\n        brand ? 'rounded-xl bg-primary-strong px-5 py-5 sm:px-6' : 'pb-2',\n        className,\n      )}\n    >\n      {back && (\n        <Link\n          href={back.href}\n          className=\"-mb-1 inline-flex w-fit items-center gap-1 rounded-xs text-sm font-medium text-fg-muted no-underline hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus\"\n        >\n          <Glyph name=\"chevron-left\" size={16} />\n          {back.label}\n        </Link>\n      )}\n\n      <div className=\"flex flex-wrap items-start justify-between gap-x-6 gap-y-4\">\n        {/* At least 16rem for the title: on narrow screens the actions wrap under it instead of squeezing it. */}\n        <div className=\"flex min-w-[min(100%,16rem)] flex-1 items-center gap-4\">\n          {media ?? (icon && <IconTile icon={icon} size=\"lg\" tone={brand ? 'inverse' : 'primary'} />)}\n          <div className=\"grid min-w-0 gap-1\">\n            <H className=\"m-0 font-display text-2xl leading-tight font-bold tracking-tight text-balance sm:text-[1.75rem]\">\n              {title}\n            </H>\n            {description && <p className=\"m-0 text-[15px] text-fg-muted\">{description}</p>}\n            {info && <p className=\"m-0 text-xs text-fg-muted\">{info}</p>}\n          </div>\n        </div>\n\n        {(actions.length > 0 || actionsSlot) && (\n          // Below 640px the actions take a full row under the title, so a search field never overflows.\n          <div className=\"flex w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0\">\n            {actionsSlot && <div className=\"w-full min-w-0 sm:w-auto\">{actionsSlot}</div>}\n            {/* Secondary actions: visible from 640px, in the \"More\" menu below (a wrapper: Button sets its own display). */}\n            {others.length > 0 && (\n              <div className=\"hidden flex-wrap items-center gap-2 sm:flex\">{others.map((a) => button(a))}</div>\n            )}\n            {others.length > 0 && (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <button\n                    type=\"button\"\n                    aria-label={labels.more ?? 'More actions'}\n                    className={cx(\n                      'grid size-9 cursor-pointer place-items-center rounded-full border-0 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus sm:hidden pointer-coarse:size-11',\n                      brand\n                        ? 'bg-white/10 text-white shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.45)] hover:bg-white/20'\n                        : 'bg-surface text-fg shadow-[inset_0_0_0_1px_var(--kf-border)] hover:bg-surface-muted',\n                    )}\n                  >\n                    <Glyph name=\"more\" size={18} />\n                  </button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {others.map((a) => (\n                    <DropdownMenuItem\n                      key={a.label}\n                      icon={a.icon}\n                      tone={a.tone}\n                      disabled={a.disabled}\n                      {...(a.href ? { href: a.href, linkAs: Link } : { onSelect: a.onClick })}\n                    >\n                      {a.label}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n            {primary && button(primary)}\n          </div>\n        )}\n      </div>\n\n      {tabs && <div className=\"min-w-0\">{tabs}</div>}\n    </header>\n  );\n}\n"],"mappings":"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"}

package/dist/page-header/record-headers.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export interface EntityHeaderProps {
+    name: string;
+    /** A short code next to the name ("ACM"). */
+    abbreviation?: string;
+    /** An icon tile (companies, projects) or a photo (`avatarSrc`, people). */
+    icon?: IconName;
+    avatarSrc?: string;
+    /** Tile color for `icon`, e.g. the client's category color. */
+    color?: string;
+    /** Shows an edit button on the picture. */
+    onChangeImage?: () => void;
+    badges?: ReactNode;
+    location?: string;
+    links?: {
+        label: string;
+        href: string;
+        icon?: IconName;
+    }[];
+    /** Right side: "Edit", "More". */
+    actions?: ReactNode;
+    labels?: {
+        changeImage?: string;
+    };
+    className?: string;
+}
+/**
+ * The header of a record's page (a client, a product, a company): picture, name, code, badges, links, actions.
+ * A div, not <header>: inside <main> it is page content, and several would be duplicate banner landmarks.
+ */
+export declare function EntityHeader({ name, abbreviation, icon, avatarSrc, color, onChangeImage, badges, location, links, actions, labels, className, }: EntityHeaderProps): import("react").JSX.Element;
+export interface ProfileHeaderProps {
+    name: string;
+    avatarSrc?: string;
+    /** "Product designer · Design team" */
+    subtitle?: ReactNode;
+    badges?: ReactNode;
+    location?: string;
+    /** Pre-formatted local time ("10:42 (UTC−05:00)"), computed by the page to avoid hydration mismatches. */
+    localTime?: string;
+    actions?: ReactNode;
+    /** Status dot on the avatar (see `Avatar`). */
+    statusColor?: string;
+    statusLabel?: string;
+    /** Cover band color or gradient. Default: the brand gradient. */
+    cover?: string;
+    className?: string;
+}
+/** A person's profile header: cover band, large avatar, name, role · team, badges, location and local time. */
+export declare function ProfileHeader({ name, avatarSrc, subtitle, badges, location, localTime, actions, statusColor, statusLabel, cover, className, }: ProfileHeaderProps): import("react").JSX.Element;

package/dist/page-header/record-headers.js

@@ -0,0 +1,134 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { IconButton as n } from "../button/button.js";
+import { Avatar as r } from "../data-display/avatar.js";
+import { IconTile as i } from "../icon/icon-tile.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "react";
+//#region src/page-header/record-headers.tsx
+function s({ name: s, abbreviation: c, icon: l, avatarSrc: u, color: d = "var(--kf-primary)", onChangeImage: f, badges: p, location: m, links: h = [], actions: g, labels: _ = {}, className: v }) {
+	return /* @__PURE__ */ o("div", {
+		className: e("flex flex-wrap items-start justify-between gap-x-6 gap-y-4 font-sans", v),
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex min-w-[min(100%,16rem)] flex-1 items-center gap-4",
+			children: [/* @__PURE__ */ o("div", {
+				className: "relative shrink-0",
+				children: [l && !u ? /* @__PURE__ */ a(i, {
+					icon: l,
+					size: "xl",
+					color: d
+				}) : /* @__PURE__ */ a(r, {
+					name: s,
+					src: u,
+					size: "xl",
+					className: "size-16!",
+					decorative: !0
+				}), f && /* @__PURE__ */ a(n, {
+					icon: "edit",
+					label: _.changeImage ?? "Change picture",
+					size: "sm",
+					variant: "primary",
+					onClick: f,
+					className: "absolute -right-1.5 -bottom-1.5 ring-3 ring-bg"
+				})]
+			}), /* @__PURE__ */ o("div", {
+				className: "grid min-w-0 gap-1.5",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ a("h1", {
+							className: "m-0 font-display text-2xl font-bold tracking-tight text-fg",
+							children: s
+						}),
+						c && /* @__PURE__ */ a("span", {
+							className: "rounded-sm bg-surface-muted px-1.5 py-0.5 font-mono text-xs font-semibold text-fg-muted",
+							children: c
+						}),
+						p
+					]
+				}), (m || h.length > 0) && /* @__PURE__ */ o("div", {
+					className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-fg-muted",
+					children: [m && /* @__PURE__ */ o("span", {
+						className: "inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ a(t, {
+							name: "c-location",
+							size: 16
+						}), m]
+					}), h.map((e) => /* @__PURE__ */ o("a", {
+						href: e.href,
+						className: "inline-flex items-center gap-1 rounded-xs text-link no-underline hover:underline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus",
+						children: [/* @__PURE__ */ a(t, {
+							name: e.icon ?? "c-external",
+							size: 16
+						}), e.label]
+					}, e.href))]
+				})]
+			})]
+		}), g && /* @__PURE__ */ a("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: g
+		})]
+	});
+}
+function c({ name: n, avatarSrc: i, subtitle: s, badges: c, location: l, localTime: u, actions: d, statusColor: f, statusLabel: p, cover: m, className: h }) {
+	return /* @__PURE__ */ o("div", {
+		className: e("overflow-hidden rounded-xl border border-border bg-surface font-sans", h),
+		children: [/* @__PURE__ */ a("div", {
+			"aria-hidden": "true",
+			className: e("h-24 sm:h-32", !m && "bg-gradient-brand"),
+			style: m ? { background: m } : void 0
+		}), /* @__PURE__ */ o("div", {
+			className: "grid gap-4 px-card pb-card",
+			children: [/* @__PURE__ */ o("div", {
+				className: "-mt-10 flex flex-wrap items-end justify-between gap-3",
+				children: [/* @__PURE__ */ a(r, {
+					name: n,
+					src: i,
+					size: "xl",
+					statusColor: f,
+					statusLabel: p,
+					className: "size-24! text-3xl! ring-4 ring-surface"
+				}), d && /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: d
+				})]
+			}), /* @__PURE__ */ o("div", {
+				className: "grid gap-1.5",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ a("h1", {
+							className: "m-0 font-display text-2xl font-bold tracking-tight text-fg",
+							children: n
+						}), c]
+					}),
+					s && /* @__PURE__ */ a("p", {
+						className: "m-0 text-[15px] text-fg-muted",
+						children: s
+					}),
+					(l || u) && /* @__PURE__ */ o("p", {
+						className: "m-0 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-fg-muted",
+						children: [l && /* @__PURE__ */ o("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ a(t, {
+								name: "c-location",
+								size: 16
+							}), l]
+						}), u && /* @__PURE__ */ o("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ a(t, {
+								name: "time",
+								size: 16
+							}), u]
+						})]
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as EntityHeader, c as ProfileHeader };
+
+//# sourceMappingURL=record-headers.js.map