@kodffe/ui 0.0.0-stage → 0.10.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"record-headers.js","names":["EntityHeader","cx","className","icon","avatarSrc","IconTile","Avatar","onChangeImage","IconButton","labels","name","abbreviation","badges","location","links","Icon","l","actions","ProfileHeader","cover","subtitle","localTime"],"sources":["../../src/page-header/record-headers.tsx"],"sourcesContent":["'use client';\nimport { type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile } from '../icon/icon-tile';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Avatar } from '../data-display/avatar';\nimport { IconButton } from '../button/button';\n\n/* ---------------- EntityHeader ---------------- */\n\nexport interface EntityHeaderProps {\n  name: string;\n  /** A short code next to the name (\"ACM\"). */\n  abbreviation?: string;\n  /** An icon tile (companies, projects) or a photo (`avatarSrc`, people). */\n  icon?: IconName;\n  avatarSrc?: string;\n  /** Tile color for `icon`, e.g. the client's category color. */\n  color?: string;\n  /** Shows an edit button on the picture. */\n  onChangeImage?: () => void;\n  badges?: ReactNode;\n  location?: string;\n  links?: { label: string; href: string; icon?: IconName }[];\n  /** Right side: \"Edit\", \"More\". */\n  actions?: ReactNode;\n  labels?: { changeImage?: string };\n  className?: string;\n}\n\n/**\n * The header of a record's page (a client, a product, a company): picture, name, code, badges, links, actions.\n * A div, not <header>: inside <main> it is page content, and several would be duplicate banner landmarks.\n */\nexport function EntityHeader({\n  name,\n  abbreviation,\n  icon,\n  avatarSrc,\n  color = 'var(--kf-primary)',\n  onChangeImage,\n  badges,\n  location,\n  links = [],\n  actions,\n  labels = {},\n  className,\n}: EntityHeaderProps) {\n  return (\n    <div className={cx('flex flex-wrap items-start justify-between gap-x-6 gap-y-4 font-sans', className)}>\n      <div className=\"flex min-w-[min(100%,16rem)] flex-1 items-center gap-4\">\n        <div className=\"relative shrink-0\">\n          {icon && !avatarSrc ? (\n            <IconTile icon={icon} size=\"xl\" color={color} />\n          ) : (\n            <Avatar name={name} src={avatarSrc} size=\"xl\" className=\"size-16!\" decorative />\n          )}\n          {onChangeImage && (\n            <IconButton\n              icon=\"edit\"\n              label={labels.changeImage ?? 'Change picture'}\n              size=\"sm\"\n              variant=\"primary\"\n              onClick={onChangeImage}\n              className=\"absolute -right-1.5 -bottom-1.5 ring-3 ring-bg\"\n            />\n          )}\n        </div>\n        <div className=\"grid min-w-0 gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <h1 className=\"m-0 font-display text-2xl font-bold tracking-tight text-fg\">{name}</h1>\n            {abbreviation && (\n              <span className=\"rounded-sm bg-surface-muted px-1.5 py-0.5 font-mono text-xs font-semibold text-fg-muted\">\n                {abbreviation}\n              </span>\n            )}\n            {badges}\n          </div>\n          {(location || links.length > 0) && (\n            <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-fg-muted\">\n              {location && (\n                <span className=\"inline-flex items-center gap-1\">\n                  <Icon name=\"c-location\" size={16} />\n                  {location}\n                </span>\n              )}\n              {links.map((l) => (\n                <a\n                  key={l.href}\n                  href={l.href}\n                  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\"\n                >\n                  <Icon name={l.icon ?? 'c-external'} size={16} />\n                  {l.label}\n                </a>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n      {actions && <div className=\"flex flex-wrap items-center gap-2\">{actions}</div>}\n    </div>\n  );\n}\n\n/* ---------------- ProfileHeader ---------------- */\n\nexport interface ProfileHeaderProps {\n  name: string;\n  avatarSrc?: string;\n  /** \"Product designer · Design team\" */\n  subtitle?: ReactNode;\n  badges?: ReactNode;\n  location?: string;\n  /** Pre-formatted local time (\"10:42 (UTC−05:00)\"), computed by the page to avoid hydration mismatches. */\n  localTime?: string;\n  actions?: ReactNode;\n  /** Status dot on the avatar (see `Avatar`). */\n  statusColor?: string;\n  statusLabel?: string;\n  /** Cover band color or gradient. Default: the brand gradient. */\n  cover?: string;\n  className?: string;\n}\n\n/** A person's profile header: cover band, large avatar, name, role · team, badges, location and local time. */\nexport function ProfileHeader({\n  name,\n  avatarSrc,\n  subtitle,\n  badges,\n  location,\n  localTime,\n  actions,\n  statusColor,\n  statusLabel,\n  cover,\n  className,\n}: ProfileHeaderProps) {\n  return (\n    <div className={cx('overflow-hidden rounded-xl border border-border bg-surface font-sans', className)}>\n      <div\n        aria-hidden=\"true\"\n        className={cx('h-24 sm:h-32', !cover && 'bg-gradient-brand')}\n        style={cover ? { background: cover } : undefined}\n      />\n      <div className=\"grid gap-4 px-card pb-card\">\n        <div className=\"-mt-10 flex flex-wrap items-end justify-between gap-3\">\n          <Avatar\n            name={name}\n            src={avatarSrc}\n            size=\"xl\"\n            statusColor={statusColor}\n            statusLabel={statusLabel}\n            className=\"size-24! text-3xl! ring-4 ring-surface\"\n          />\n          {actions && <div className=\"flex flex-wrap items-center gap-2\">{actions}</div>}\n        </div>\n        <div className=\"grid gap-1.5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <h1 className=\"m-0 font-display text-2xl font-bold tracking-tight text-fg\">{name}</h1>\n            {badges}\n          </div>\n          {subtitle && <p className=\"m-0 text-[15px] text-fg-muted\">{subtitle}</p>}\n          {(location || localTime) && (\n            <p className=\"m-0 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-fg-muted\">\n              {location && (\n                <span className=\"inline-flex items-center gap-1\">\n                  <Icon name=\"c-location\" size={16} />\n                  {location}\n                </span>\n              )}\n              {localTime && (\n                <span className=\"inline-flex items-center gap-1\">\n                  <Icon name=\"time\" size={16} />\n                  {localTime}\n                </span>\n              )}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Accent before the title: `bar` (default), `dot` or `none`. Ignored with `icon`. */
+    marker?: 'bar' | 'dot' | 'none';
+    /** An icon tile before the title instead of the marker. */
+    icon?: IconName;
+    /** A count after the title ("Clients 24"). */
+    count?: number;
+    /** Right side: usually one button ("New client") or a link ("View all"). */
+    actions?: ReactNode;
+    /** Default 2: the page title is the h1 in `PageHeader`. */
+    headingLevel?: 2 | 3;
+}
+/**
+ * Title of a section inside a page (above a list, table or group of cards): marker or icon, title, count,
+ * description and actions on the right. For the page itself use `PageHeader`; for a card's own header, `CardHeader`.
+ */
+export declare function SectionHeader({ title, description, marker, icon, count, actions, headingLevel, className, ...rest }: SectionHeaderProps): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { cx as e } from "../lib/cx.js";
+import { IconTile as t } from "../icon/icon-tile.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/page-header/section-header.tsx
+function i({ title: i, description: a, marker: o = "bar", icon: s, count: c, actions: l, headingLevel: u = 2, className: d, ...f }) {
+	let p = `h${u}`;
+	return /* @__PURE__ */ r("div", {
+		className: e("flex flex-wrap items-end justify-between gap-x-4 gap-y-3 font-sans", d),
+		...f,
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex min-w-[min(100%,14rem)] flex-1 items-start gap-3",
+			children: [s && /* @__PURE__ */ n(t, {
+				icon: s,
+				size: "md"
+			}), /* @__PURE__ */ r("div", {
+				className: "grid min-w-0 gap-1",
+				children: [/* @__PURE__ */ r(p, {
+					className: "m-0 flex items-center gap-2 font-display text-xl font-bold tracking-tight text-fg",
+					children: [
+						!s && o !== "none" && /* @__PURE__ */ n("span", {
+							"aria-hidden": "true",
+							className: e("shrink-0 bg-accent", o === "bar" ? "h-5 w-1 rounded-full" : "size-2 rounded-full")
+						}),
+						i,
+						c !== void 0 && /* @__PURE__ */ n("span", {
+							className: "rounded-full bg-surface-muted px-2 py-0.5 font-sans text-xs font-semibold text-fg-muted tabular-nums",
+							children: c
+						})
+					]
+				}), a && /* @__PURE__ */ n("p", {
+					className: "m-0 text-sm text-pretty text-fg-muted",
+					children: a
+				})]
+			})]
+		}), l && /* @__PURE__ */ n("div", {
+			className: "flex shrink-0 flex-wrap items-center gap-2",
+			children: l
+		})]
+	});
+}
+//#endregion
+export { i as SectionHeader };
+
+//# sourceMappingURL=section-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.js","names":["SectionHeader","rest","H","headingLevel","cx","className","icon","IconTile","marker","title","count","description","actions"],"sources":["../../src/page-header/section-header.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile } from '../icon/icon-tile';\nimport type { IconName } from '../icon/icon';\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Accent before the title: `bar` (default), `dot` or `none`. Ignored with `icon`. */\n  marker?: 'bar' | 'dot' | 'none';\n  /** An icon tile before the title instead of the marker. */\n  icon?: IconName;\n  /** A count after the title (\"Clients 24\"). */\n  count?: number;\n  /** Right side: usually one button (\"New client\") or a link (\"View all\"). */\n  actions?: ReactNode;\n  /** Default 2: the page title is the h1 in `PageHeader`. */\n  headingLevel?: 2 | 3;\n}\n\n/**\n * Title of a section inside a page (above a list, table or group of cards): marker or icon, title, count,\n * description and actions on the right. For the page itself use `PageHeader`; for a card's own header, `CardHeader`.\n */\nexport function SectionHeader({\n  title,\n  description,\n  marker = 'bar',\n  icon,\n  count,\n  actions,\n  headingLevel = 2,\n  className,\n  ...rest\n}: SectionHeaderProps) {\n  const H = `h${headingLevel}` as const;\n  return (\n    <div className={cx('flex flex-wrap items-end justify-between gap-x-4 gap-y-3 font-sans', className)} {...rest}>\n      <div className=\"flex min-w-[min(100%,14rem)] flex-1 items-start gap-3\">\n        {icon && <IconTile icon={icon} size=\"md\" />}\n        <div className=\"grid min-w-0 gap-1\">\n          <H className=\"m-0 flex items-center gap-2 font-display text-xl font-bold tracking-tight text-fg\">\n            {!icon && marker !== 'none' && (\n              <span\n                aria-hidden=\"true\"\n                className={cx('shrink-0 bg-accent', marker === 'bar' ? 'h-5 w-1 rounded-full' : 'size-2 rounded-full')}\n              />\n            )}\n            {title}\n            {count !== undefined && (\n              <span className=\"rounded-full bg-surface-muted px-2 py-0.5 font-sans text-xs font-semibold text-fg-muted tabular-nums\">\n                {count}\n              </span>\n            )}\n          </H>\n          {description && <p className=\"m-0 text-sm text-pretty text-fg-muted\">{description}</p>}\n        </div>\n      </div>\n      {actions && <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;AAwBA,SAAgBA,EAAc,EAC5B,UACA,gBACA,YAAS,OACT,SACA,UACA,YACA,kBAAe,GACf,cACA,GAAGC,KACkB;CACrB,IAAMC,IAAI,IAAIC;CACd,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAG,sEAAsEC,CAAS;EAAG,GAAIJ;EAAzG,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGK,KAAQ,kBAACC,GAAD;IAAgB;IAAM,MAAK;GAAM,CAAA,GAC1C,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAACL,GAAD;KAAG,WAAU;KAAb,UAAA;MACG,CAACI,KAAQE,MAAW,UACnB,kBAAC,QAAD;OACE,eAAY;OACZ,WAAWJ,EAAG,sBAAsBI,MAAW,QAAQ,yBAAyB,qBAAqB;MACtG,CAAA;MAEFC;MACAC,MAAU,KAAA,KACT,kBAAC,QAAD;OAAM,WAAU;OACb,UAAAA;MACG,CAAA;KAEP;IACF,CAAA,GAAAC,KAAe,kBAAC,KAAD;KAAG,WAAU;KAAyC,UAAAA;IAAe,CAAA,CAClF;GACF,CAAA,CAAA;EACJ,CAAA,GAAAC,KAAW,kBAAC,OAAD;GAAK,WAAU;GAA8C,UAAAA;EAAa,CAAA,CACnF;;AAET"}

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

@@ -0,0 +1,59 @@
+import { type ElementType } from 'react';
+import { type IconName } from '../icon/icon';
+import { type TimelineItem } from '../data-display/data-display';
+import { type StepDot } from '../stepper/step-dots';
+export interface TocItem {
+    /** The section's element id. */
+    id: string;
+    label: string;
+    icon?: IconName;
+    /** 2 (default) or 3 for a nested heading. */
+    level?: 2 | 3;
+}
+/**
+ * "On this page" for long articles: links to the sections, sticky, and the section in view is highlighted
+ * (IntersectionObserver). Links work without JavaScript.
+ */
+export declare function TableOfContents({ items, label, className, }: {
+    items: TocItem[];
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export interface PrevNextLink {
+    title: string;
+    href: string;
+}
+/** "Previous / Next" cards at the end of a docs article. */
+export declare function PrevNextNav({ prev, next, linkAs: Link, labels, className, }: {
+    prev?: PrevNextLink;
+    next?: PrevNextLink;
+    linkAs?: ElementType;
+    labels?: {
+        prev?: string;
+        next?: string;
+        nav?: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+export interface Cycle {
+    id: string;
+    /** Period label ("Nov 1 – 15"). */
+    label: string;
+    href: string;
+    steps: StepDot[];
+    /** Shown on hover or focus: the period's status history. */
+    timeline?: TimelineItem[];
+}
+/**
+ * Compact rows for period-based processes (payroll cycles): label, step dots and a chevron. Hovering or focusing a
+ * row shows its status timeline and "Open the cycle".
+ */
+export declare function CycleNavigator({ cycles, linkAs: Link, labels, className, 'aria-label': label, }: {
+    cycles: Cycle[];
+    linkAs?: ElementType;
+    labels?: {
+        open?: string;
+    };
+    className?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;

package/dist/page-navigation/page-navigation.js

@@ -0,0 +1,136 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { HoverCard as n, HoverCardContent as r, HoverCardTrigger as i } from "../hover-card/hover-card.js";
+import { Glyph as a } from "../lib/glyphs.js";
+import { StepDots as o } from "../stepper/step-dots.js";
+import { Timeline as s } from "../data-display/data-display.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useEffect as u, useState as d } from "react";
+//#region src/page-navigation/page-navigation.tsx
+function f({ items: n, label: r = "On this page", className: i }) {
+	let [a, o] = d(n[0]?.id);
+	return u(() => {
+		let e = n.map((e) => document.getElementById(e.id)).filter(Boolean);
+		if (!e.length || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			let t = e.filter((e) => e.isIntersecting).sort((e, t) => e.boundingClientRect.top - t.boundingClientRect.top);
+			t[0] && o(t[0].target.id);
+		}, { rootMargin: "-15% 0px -70% 0px" });
+		return e.forEach((e) => t.observe(e)), () => t.disconnect();
+	}, [n]), /* @__PURE__ */ l("nav", {
+		"aria-label": r,
+		className: e("sticky top-[calc(var(--spacing-appbar)+1.5rem)] grid gap-2 font-sans text-sm", i),
+		children: [/* @__PURE__ */ c("p", {
+			className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+			children: r
+		}), /* @__PURE__ */ c("ul", {
+			className: "m-0 grid list-none gap-0.5 border-l border-border p-0",
+			children: n.map((n) => {
+				let r = n.id === a;
+				return /* @__PURE__ */ c("li", { children: /* @__PURE__ */ l("a", {
+					href: `#${n.id}`,
+					"aria-current": r ? "location" : void 0,
+					onClick: () => o(n.id),
+					className: e("-ml-px flex items-center gap-2 border-l-2 py-1.5 pr-2 no-underline focus-visible:outline-3 focus-visible:-outline-offset-2 focus-visible:outline-focus", n.level === 3 ? "pl-6" : "pl-3", r ? "border-primary font-semibold text-link" : "border-transparent text-fg-muted hover:text-fg"),
+					children: [n.icon && /* @__PURE__ */ c(t, {
+						name: n.icon,
+						size: 16,
+						className: "shrink-0"
+					}), n.label]
+				}) }, n.id);
+			})
+		})]
+	});
+}
+function p({ prev: t, next: n, linkAs: r = "a", labels: i = {}, className: o }) {
+	let s = "grid gap-1 rounded-lg border border-border bg-surface p-4 no-underline transition-colors hover:border-primary focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus";
+	return /* @__PURE__ */ l("nav", {
+		"aria-label": i.nav ?? "Pagination",
+		className: e("grid gap-3 font-sans sm:grid-cols-2", o),
+		children: [t ? /* @__PURE__ */ l(r, {
+			href: t.href,
+			rel: "prev",
+			className: s,
+			children: [/* @__PURE__ */ l("span", {
+				className: "inline-flex items-center gap-1 text-xs font-semibold text-fg-muted",
+				children: [/* @__PURE__ */ c(a, {
+					name: "chevron-left",
+					size: 14
+				}), i.prev ?? "Previous"]
+			}), /* @__PURE__ */ c("span", {
+				className: "font-semibold text-link",
+				children: t.title
+			})]
+		}) : /* @__PURE__ */ c("span", {
+			"aria-hidden": "true",
+			className: "hidden sm:block"
+		}), n && /* @__PURE__ */ l(r, {
+			href: n.href,
+			rel: "next",
+			className: e(s, "text-right sm:justify-items-end"),
+			children: [/* @__PURE__ */ l("span", {
+				className: "inline-flex items-center gap-1 text-xs font-semibold text-fg-muted",
+				children: [i.next ?? "Next", /* @__PURE__ */ c(a, {
+					name: "chevron-right",
+					size: 14
+				})]
+			}), /* @__PURE__ */ c("span", {
+				className: "font-semibold text-link",
+				children: n.title
+			})]
+		})]
+	});
+}
+function m({ cycles: t, linkAs: u = "a", labels: d = {}, className: f, "aria-label": p }) {
+	return /* @__PURE__ */ c("ul", {
+		"aria-label": p,
+		className: e("m-0 grid list-none gap-1 p-0 font-sans", f),
+		children: t.map((e) => {
+			let t = /* @__PURE__ */ l(u, {
+				href: e.href,
+				className: "flex items-center gap-3 rounded-sm px-2.5 py-2 text-sm text-fg no-underline hover:bg-surface-muted focus-visible:outline-3 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+				children: [
+					/* @__PURE__ */ c("span", {
+						className: "min-w-0 flex-1 truncate font-medium",
+						children: e.label
+					}),
+					/* @__PURE__ */ c(o, { steps: e.steps }),
+					/* @__PURE__ */ c(a, {
+						name: "chevron-right",
+						size: 14,
+						className: "text-fg-muted"
+					})
+				]
+			});
+			return /* @__PURE__ */ c("li", { children: e.timeline ? /* @__PURE__ */ l(n, {
+				openDelay: 300,
+				children: [/* @__PURE__ */ c(i, {
+					asChild: !0,
+					children: t
+				}), /* @__PURE__ */ l(r, {
+					side: "right",
+					align: "start",
+					size: "sm",
+					className: "grid gap-3",
+					children: [
+						/* @__PURE__ */ c("p", {
+							className: "m-0 font-semibold text-fg",
+							children: e.label
+						}),
+						/* @__PURE__ */ c(s, { items: e.timeline }),
+						/* @__PURE__ */ l(u, {
+							href: e.href,
+							className: "text-sm font-semibold text-link no-underline hover:underline",
+							children: [d.open ?? "Open the cycle", " →"]
+						})
+					]
+				})]
+			}) : t }, e.id);
+		})
+	});
+}
+//#endregion
+export { m as CycleNavigator, p as PrevNextNav, f as TableOfContents };
+
+//# sourceMappingURL=page-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-navigation.js","names":["TableOfContents","active","setActive","useState","items","useEffect","els","i","io","visible","entries","a","b","el","label","cx","className","on","Icon","PrevNextNav","Link","card","labels","prev","Glyph","next","CycleNavigator","cycles","row","c","StepDots","HoverCard","HoverCardTrigger","HoverCardContent","Timeline"],"sources":["../../src/page-navigation/page-navigation.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useState, type ElementType } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Timeline, type TimelineItem } from '../data-display/data-display';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card/hover-card';\nimport { StepDots, type StepDot } from '../stepper/step-dots';\n\n/* ---------------- TableOfContents ---------------- */\n\nexport interface TocItem {\n  /** The section's element id. */\n  id: string;\n  label: string;\n  icon?: IconName;\n  /** 2 (default) or 3 for a nested heading. */\n  level?: 2 | 3;\n}\n\n/**\n * \"On this page\" for long articles: links to the sections, sticky, and the section in view is highlighted\n * (IntersectionObserver). Links work without JavaScript.\n */\nexport function TableOfContents({\n  items,\n  label = 'On this page',\n  className,\n}: {\n  items: TocItem[];\n  label?: string;\n  className?: string;\n}) {\n  const [active, setActive] = useState(items[0]?.id);\n  useEffect(() => {\n    const els = items.map((i) => document.getElementById(i.id)).filter(Boolean) as HTMLElement[];\n    if (!els.length || typeof IntersectionObserver === 'undefined') return;\n    const io = new IntersectionObserver(\n      (entries) => {\n        const visible = entries\n          .filter((e) => e.isIntersecting)\n          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);\n        if (visible[0]) setActive(visible[0].target.id);\n      },\n      { rootMargin: '-15% 0px -70% 0px' },\n    );\n    els.forEach((el) => io.observe(el));\n    return () => io.disconnect();\n  }, [items]);\n  return (\n    <nav\n      aria-label={label}\n      className={cx('sticky top-[calc(var(--spacing-appbar)+1.5rem)] grid gap-2 font-sans text-sm', className)}\n    >\n      <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">{label}</p>\n      <ul className=\"m-0 grid list-none gap-0.5 border-l border-border p-0\">\n        {items.map((i) => {\n          const on = i.id === active;\n          return (\n            <li key={i.id}>\n              <a\n                href={`#${i.id}`}\n                aria-current={on ? 'location' : undefined}\n                onClick={() => setActive(i.id)}\n                className={cx(\n                  '-ml-px flex items-center gap-2 border-l-2 py-1.5 pr-2 no-underline focus-visible:outline-3 focus-visible:-outline-offset-2 focus-visible:outline-focus',\n                  i.level === 3 ? 'pl-6' : 'pl-3',\n                  on ? 'border-primary font-semibold text-link' : 'border-transparent text-fg-muted hover:text-fg',\n                )}\n              >\n                {i.icon && <Icon name={i.icon} size={16} className=\"shrink-0\" />}\n                {i.label}\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n}\n\n/* ---------------- PrevNextNav ---------------- */\n\nexport interface PrevNextLink {\n  title: string;\n  href: string;\n}\n\n/** \"Previous / Next\" cards at the end of a docs article. */\nexport function PrevNextNav({\n  prev,\n  next,\n  linkAs: Link = 'a',\n  labels = {},\n  className,\n}: {\n  prev?: PrevNextLink;\n  next?: PrevNextLink;\n  linkAs?: ElementType;\n  labels?: { prev?: string; next?: string; nav?: string };\n  className?: string;\n}) {\n  const card =\n    'grid gap-1 rounded-lg border border-border bg-surface p-4 no-underline transition-colors hover:border-primary focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus';\n  return (\n    <nav aria-label={labels.nav ?? 'Pagination'} className={cx('grid gap-3 font-sans sm:grid-cols-2', className)}>\n      {prev ? (\n        <Link href={prev.href} rel=\"prev\" className={card}>\n          <span className=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-muted\">\n            <Glyph name=\"chevron-left\" size={14} />\n            {labels.prev ?? 'Previous'}\n          </span>\n          <span className=\"font-semibold text-link\">{prev.title}</span>\n        </Link>\n      ) : (\n        <span aria-hidden=\"true\" className=\"hidden sm:block\" />\n      )}\n      {next && (\n        <Link href={next.href} rel=\"next\" className={cx(card, 'text-right sm:justify-items-end')}>\n          <span className=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-muted\">\n            {labels.next ?? 'Next'}\n            <Glyph name=\"chevron-right\" size={14} />\n          </span>\n          <span className=\"font-semibold text-link\">{next.title}</span>\n        </Link>\n      )}\n    </nav>\n  );\n}\n\n/* ---------------- CycleNavigator ---------------- */\n\nexport interface Cycle {\n  id: string;\n  /** Period label (\"Nov 1 – 15\"). */\n  label: string;\n  href: string;\n  steps: StepDot[];\n  /** Shown on hover or focus: the period's status history. */\n  timeline?: TimelineItem[];\n}\n\n/**\n * Compact rows for period-based processes (payroll cycles): label, step dots and a chevron. Hovering or focusing a\n * row shows its status timeline and \"Open the cycle\".\n */\nexport function CycleNavigator({\n  cycles,\n  linkAs: Link = 'a',\n  labels = {},\n  className,\n  'aria-label': label,\n}: {\n  cycles: Cycle[];\n  linkAs?: ElementType;\n  labels?: { open?: string };\n  className?: string;\n  'aria-label'?: string;\n}) {\n  return (\n    <ul aria-label={label} className={cx('m-0 grid list-none gap-1 p-0 font-sans', className)}>\n      {cycles.map((c) => {\n        const row = (\n          <Link\n            href={c.href}\n            className=\"flex items-center gap-3 rounded-sm px-2.5 py-2 text-sm text-fg no-underline hover:bg-surface-muted focus-visible:outline-3 focus-visible:-outline-offset-2 focus-visible:outline-focus\"\n          >\n            <span className=\"min-w-0 flex-1 truncate font-medium\">{c.label}</span>\n            <StepDots steps={c.steps} />\n            <Glyph name=\"chevron-right\" size={14} className=\"text-fg-muted\" />\n          </Link>\n        );\n        return (\n          <li key={c.id}>\n            {c.timeline ? (\n              <HoverCard openDelay={300}>\n                <HoverCardTrigger asChild>{row}</HoverCardTrigger>\n                <HoverCardContent side=\"right\" align=\"start\" size=\"sm\" className=\"grid gap-3\">\n                  <p className=\"m-0 font-semibold text-fg\">{c.label}</p>\n                  <Timeline items={c.timeline} />\n                  <Link href={c.href} className=\"text-sm font-semibold text-link no-underline hover:underline\">\n                    {labels.open ?? 'Open the cycle'} →\n                  </Link>\n                </HoverCardContent>\n              </HoverCard>\n            ) : (\n              row\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current page, 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Pages shown on each side of the current one (desktop). */
+    siblings?: number;
+    /** `pages` (default): numbered pages. `compact`: previous / "Page 1 of 4" / next, for table footers. */
+    variant?: 'pages' | 'compact';
+    labels?: Partial<typeof LABELS>;
+}
+declare const LABELS: {
+    nav: string;
+    previous: string;
+    next: string;
+    /** `{page}` and `{count}` are replaced. */
+    pageOf: string;
+    page: string;
+};
+/** Builds the list of pages with ellipses: 1 … 4 5 [6] 7 8 … 20 */
+export declare function paginationRange(page: number, pageCount: number, siblings?: number): (number | 'gap')[];
+/**
+ * Moves between pages of a list. Desktop: numbered pages with ellipses. Mobile: previous / next
+ * with "Page 3 of 12". For infinite feeds prefer a "Load more" button.
+ */
+export declare function Pagination({ page, pageCount, onPageChange, siblings, variant, labels: overrides, className, ...rest }: PaginationProps): import("react").JSX.Element | null;
+export {};

package/dist/pagination/pagination.js

@@ -0,0 +1,102 @@
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/pagination/pagination.tsx
+var i = {
+	nav: "Pagination",
+	previous: "Previous",
+	next: "Next",
+	pageOf: "Page {page} of {count}",
+	page: "Page {page}"
+};
+function a(e, t, n = 1) {
+	if (t <= n * 2 + 5) return Array.from({ length: t }, (e, t) => t + 1);
+	let r = Math.max(2, e - n), i = Math.min(t - 1, e + n), a = [1];
+	r > 2 && a.push("gap");
+	for (let e = r; e <= i; e++) a.push(e);
+	return i < t - 1 && a.push("gap"), a.push(t), a;
+}
+function o({ page: o, pageCount: s, onPageChange: c, siblings: l = 1, variant: u = "pages", labels: d, className: f, ...p }) {
+	let m = {
+		...i,
+		...d
+	};
+	if (u === "compact") {
+		let i = Math.max(s, 1), a = e("inline-grid size-9 cursor-pointer place-items-center rounded-sm border border-border bg-surface text-fg", "hover:bg-surface-muted disabled:pointer-events-none disabled:opacity-40 pointer-coarse:size-11", "focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus");
+		return /* @__PURE__ */ r("nav", {
+			"aria-label": m.nav,
+			className: e("flex items-center gap-2 font-sans", f),
+			...p,
+			children: [
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					className: a,
+					"aria-label": m.previous,
+					disabled: o <= 1,
+					onClick: () => c(o - 1),
+					children: /* @__PURE__ */ n(t, { name: "chevron-left" })
+				}),
+				/* @__PURE__ */ n("span", {
+					className: "text-sm whitespace-nowrap text-fg-muted tabular-nums",
+					"aria-live": "polite",
+					children: m.pageOf.replace("{page}", String(o)).replace("{count}", String(i))
+				}),
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					className: a,
+					"aria-label": m.next,
+					disabled: o >= i,
+					onClick: () => c(o + 1),
+					children: /* @__PURE__ */ n(t, { name: "chevron-right" })
+				})
+			]
+		});
+	}
+	if (s <= 1) return null;
+	let h = e("inline-flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent px-3 font-sans text-sm font-semibold text-fg", "hover:bg-surface-muted disabled:pointer-events-none disabled:opacity-40", "focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus");
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": m.nav,
+		className: e("flex items-center justify-between gap-2 font-sans sm:justify-center", f),
+		...p,
+		children: [
+			/* @__PURE__ */ r("button", {
+				type: "button",
+				className: e(h, "gap-1"),
+				disabled: o <= 1,
+				onClick: () => c(o - 1),
+				children: [/* @__PURE__ */ n(t, { name: "chevron-left" }), /* @__PURE__ */ n("span", { children: m.previous })]
+			}),
+			/* @__PURE__ */ n("span", {
+				className: "text-sm text-fg-muted sm:hidden",
+				"aria-live": "polite",
+				children: m.pageOf.replace("{page}", String(o)).replace("{count}", String(s))
+			}),
+			/* @__PURE__ */ n("ul", {
+				className: "m-0 hidden list-none items-center gap-1 p-0 sm:flex",
+				children: a(o, s, l).map((t, r) => t === "gap" ? /* @__PURE__ */ n("li", {
+					"aria-hidden": "true",
+					className: "px-1 text-fg-muted",
+					children: "…"
+				}, `gap-${r}`) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": m.page.replace("{page}", String(t)),
+					"aria-current": t === o ? "page" : void 0,
+					onClick: () => c(t),
+					className: e(h, "tabular-nums aria-[current=page]:bg-primary aria-[current=page]:text-on-primary"),
+					children: t
+				}) }, t))
+			}),
+			/* @__PURE__ */ r("button", {
+				type: "button",
+				className: e(h, "gap-1"),
+				disabled: o >= s,
+				onClick: () => c(o + 1),
+				children: [/* @__PURE__ */ n("span", { children: m.next }), /* @__PURE__ */ n(t, { name: "chevron-right" })]
+			})
+		]
+	});
+}
+//#endregion
+export { o as Pagination, a as paginationRange };
+
+//# sourceMappingURL=pagination.js.map

package/dist/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":["LABELS","paginationRange","pageCount","siblings","i","start","page","end","range","p","Pagination","overrides","rest","labels","variant","count","arrow","cx","className","onPageChange","Glyph","btn"],"sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Current page, 1-based. */\n  page: number;\n  pageCount: number;\n  onPageChange: (page: number) => void;\n  /** Pages shown on each side of the current one (desktop). */\n  siblings?: number;\n  /** `pages` (default): numbered pages. `compact`: previous / \"Page 1 of 4\" / next, for table footers. */\n  variant?: 'pages' | 'compact';\n  labels?: Partial<typeof LABELS>;\n}\n\nconst LABELS = {\n  nav: 'Pagination',\n  previous: 'Previous',\n  next: 'Next',\n  /** `{page}` and `{count}` are replaced. */\n  pageOf: 'Page {page} of {count}',\n  page: 'Page {page}',\n};\n\n/** Builds the list of pages with ellipses: 1 … 4 5 [6] 7 8 … 20 */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | 'gap')[] {\n  const total = siblings * 2 + 5;\n  if (pageCount <= total) return Array.from({ length: pageCount }, (_, i) => i + 1);\n  const start = Math.max(2, page - siblings);\n  const end = Math.min(pageCount - 1, page + siblings);\n  const range: (number | 'gap')[] = [1];\n  if (start > 2) range.push('gap');\n  for (let p = start; p <= end; p++) range.push(p);\n  if (end < pageCount - 1) range.push('gap');\n  range.push(pageCount);\n  return range;\n}\n\n/**\n * Moves between pages of a list. Desktop: numbered pages with ellipses. Mobile: previous / next\n * with \"Page 3 of 12\". For infinite feeds prefer a \"Load more\" button.\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  variant = 'pages',\n  labels: overrides,\n  className,\n  ...rest\n}: PaginationProps) {\n  const labels = { ...LABELS, ...overrides };\n  if (variant === 'compact') {\n    const count = Math.max(pageCount, 1);\n    const arrow = cx(\n      'inline-grid size-9 cursor-pointer place-items-center rounded-sm border border-border bg-surface text-fg',\n      'hover:bg-surface-muted disabled:pointer-events-none disabled:opacity-40 pointer-coarse:size-11',\n      'focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus',\n    );\n    return (\n      <nav aria-label={labels.nav} className={cx('flex items-center gap-2 font-sans', className)} {...rest}>\n        <button\n          type=\"button\"\n          className={arrow}\n          aria-label={labels.previous}\n          disabled={page <= 1}\n          onClick={() => onPageChange(page - 1)}\n        >\n          <Glyph name=\"chevron-left\" />\n        </button>\n        <span className=\"text-sm whitespace-nowrap text-fg-muted tabular-nums\" aria-live=\"polite\">\n          {labels.pageOf.replace('{page}', String(page)).replace('{count}', String(count))}\n        </span>\n        <button\n          type=\"button\"\n          className={arrow}\n          aria-label={labels.next}\n          disabled={page >= count}\n          onClick={() => onPageChange(page + 1)}\n        >\n          <Glyph name=\"chevron-right\" />\n        </button>\n      </nav>\n    );\n  }\n  if (pageCount <= 1) return null;\n  const btn = cx(\n    'inline-flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent px-3 font-sans text-sm font-semibold text-fg',\n    'hover:bg-surface-muted disabled:pointer-events-none disabled:opacity-40',\n    'focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus',\n  );\n  return (\n    <nav\n      aria-label={labels.nav}\n      className={cx('flex items-center justify-between gap-2 font-sans sm:justify-center', className)}\n      {...rest}\n    >\n      <button type=\"button\" className={cx(btn, 'gap-1')} disabled={page <= 1} onClick={() => onPageChange(page - 1)}>\n        <Glyph name=\"chevron-left\" />\n        <span>{labels.previous}</span>\n      </button>\n      <span className=\"text-sm text-fg-muted sm:hidden\" aria-live=\"polite\">\n        {labels.pageOf.replace('{page}', String(page)).replace('{count}', String(pageCount))}\n      </span>\n      <ul className=\"m-0 hidden list-none items-center gap-1 p-0 sm:flex\">\n        {paginationRange(page, pageCount, siblings).map((p, i) =>\n          p === 'gap' ? (\n            <li key={`gap-${i}`} aria-hidden=\"true\" className=\"px-1 text-fg-muted\">\n              …\n            </li>\n          ) : (\n            <li key={p}>\n              <button\n                type=\"button\"\n                aria-label={labels.page.replace('{page}', String(p))}\n                aria-current={p === page ? 'page' : undefined}\n                onClick={() => onPageChange(p)}\n                className={cx(btn, 'tabular-nums aria-[current=page]:bg-primary aria-[current=page]:text-on-primary')}\n              >\n                {p}\n              </button>\n            </li>\n          ),\n        )}\n      </ul>\n      <button\n        type=\"button\"\n        className={cx(btn, 'gap-1')}\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n      >\n        <span>{labels.next}</span>\n        <Glyph name=\"chevron-right\" />\n      </button>\n    </nav>\n  );\n}\n"],"mappings":"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"}

package/dist/phone-input/phone-input.d.ts

@@ -0,0 +1,34 @@
+import { type ControlSize } from '../input/field-styles';
+export interface Country {
+    /** ISO 3166-1 alpha-2. */
+    code: string;
+    name: string;
+    dial: string;
+}
+/** Kodffe's markets first (US, LATAM, Spain). Pass `countries` to change the list. */
+export declare const DEFAULT_COUNTRIES: Country[];
+export interface PhoneValue {
+    country: string;
+    /** National number, digits only. */
+    number: string;
+}
+export interface PhoneInputProps {
+    value: PhoneValue;
+    onChange: (value: PhoneValue) => void;
+    countries?: Country[];
+    size?: ControlSize;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    placeholder?: string;
+    countryLabel?: string;
+    className?: string;
+}
+/** E.164 string for APIs (Brevo, WhatsApp, Twilio): `+593991234567`. */
+export declare const toE164: (value: PhoneValue, countries?: Country[]) => string;
+/**
+ * Country code + national number. The country is a native select (fast on every device); the
+ * number keeps digits only and uses the phone keypad (`type="tel"`). Validate length on submit.
+ */
+export declare function PhoneInput({ value, onChange, countries, size, placeholder, countryLabel, className, ...rest }: PhoneInputProps): import("react").JSX.Element;