@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/form-field/form-field.js

@@ -0,0 +1,88 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, useContext as a, useId as o } from "react";
+//#region src/form-field/form-field.tsx
+var s = i(null), c = () => a(s);
+function l({ label: i, hint: a, error: c, required: l = !1, disabled: u = !1, optionalLabel: d, hideLabel: f, labelAction: p, id: m, className: h, children: g, ..._ }) {
+	let v = o(), y = m ?? `kf-field-${v}`, b = a ? `${y}-hint` : void 0, x = c ? `${y}-error` : void 0, S = [b, x].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ n(s.Provider, {
+		value: {
+			id: y,
+			describedBy: S,
+			invalid: !!c,
+			required: l,
+			disabled: u
+		},
+		children: /* @__PURE__ */ r("div", {
+			className: e("grid gap-1.5 font-sans", u && "opacity-60", h),
+			..._,
+			children: [
+				/* @__PURE__ */ r("div", {
+					className: e("flex items-baseline justify-between gap-3", f && "sr-only"),
+					children: [/* @__PURE__ */ r("label", {
+						id: `${y}-label`,
+						htmlFor: y,
+						className: "text-sm font-semibold text-fg",
+						children: [
+							i,
+							l && !d && /* @__PURE__ */ n("span", {
+								"aria-hidden": "true",
+								className: "ml-0.5 text-danger-fg",
+								children: "*"
+							}),
+							d && !l && /* @__PURE__ */ r("span", {
+								className: "ml-1 font-normal text-fg-muted",
+								children: [
+									"(",
+									d,
+									")"
+								]
+							})
+						]
+					}), p && /* @__PURE__ */ n("span", {
+						className: "text-sm",
+						children: p
+					})]
+				}),
+				a && /* @__PURE__ */ n("p", {
+					id: b,
+					className: "m-0 -mt-0.5 text-sm text-fg-muted",
+					children: a
+				}),
+				g,
+				c && /* @__PURE__ */ r("p", {
+					id: x,
+					className: "m-0 flex items-start gap-1.5 text-sm font-medium text-danger-fg",
+					children: [/* @__PURE__ */ n(t, {
+						name: "error",
+						size: 18,
+						className: "mt-px shrink-0 text-danger-icon"
+					}), c]
+				})
+			]
+		})
+	});
+}
+function u({ legend: t, description: i, className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r("fieldset", {
+		className: e("m-0 grid min-w-0 gap-4 border-0 p-0 font-sans", a),
+		...s,
+		children: [
+			/* @__PURE__ */ n("legend", {
+				className: "mb-1 p-0 font-display text-lg font-bold text-fg",
+				children: t
+			}),
+			i && /* @__PURE__ */ n("p", {
+				className: "m-0 -mt-3 text-sm text-fg-muted",
+				children: i
+			}),
+			o
+		]
+	});
+}
+//#endregion
+export { u as Fieldset, l as FormField, c as useFormField };
+
+//# sourceMappingURL=form-field.js.map

package/dist/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","names":["FieldContext","createContext","useFormField","useContext","FormField","idProp","rest","auto","useId","id","hintId","hint","errorId","error","describedBy","cx","disabled","className","hideLabel","label","required","optionalLabel","labelAction","children","Icon","Fieldset","legend","description"],"sources":["../../src/form-field/form-field.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon } from '../icon/icon';\n\nexport interface FormFieldState {\n  id: string;\n  /** ids for `aria-describedby` (hint and error). */\n  describedBy?: string;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n}\n\nconst FieldContext = createContext<FormFieldState | null>(null);\n\n/** Read the surrounding FormField (inputs use it to wire id, aria-describedby, aria-invalid). */\nexport const useFormField = () => useContext(FieldContext);\n\nexport interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  label: ReactNode;\n  /** Help text under the label. */\n  hint?: ReactNode;\n  /** Error message; marks the control `aria-invalid`. Say how to fix it (\"Enter a work email\"). */\n  error?: ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  /** Shows \"(optional)\" after the label instead of marking required fields. */\n  optionalLabel?: string;\n  /** Visually hide the label (it stays for screen readers). */\n  hideLabel?: boolean;\n  /** Extra content on the label row (e.g. \"Forgot password?\" link). */\n  labelAction?: ReactNode;\n  /** Override the generated id. */\n  id?: string;\n  children: ReactNode;\n}\n\n/**\n * Wraps a single control with its label, help and error. Every Kodffe input reads the field\n * context, so ids and ARIA are wired automatically.\n */\nexport function FormField({\n  label,\n  hint,\n  error,\n  required = false,\n  disabled = false,\n  optionalLabel,\n  hideLabel,\n  labelAction,\n  id: idProp,\n  className,\n  children,\n  ...rest\n}: FormFieldProps) {\n  const auto = useId();\n  const id = idProp ?? `kf-field-${auto}`;\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorId = error ? `${id}-error` : undefined;\n  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;\n  return (\n    <FieldContext.Provider value={{ id, describedBy, invalid: !!error, required, disabled }}>\n      <div className={cx('grid gap-1.5 font-sans', disabled && 'opacity-60', className)} {...rest}>\n        <div className={cx('flex items-baseline justify-between gap-3', hideLabel && 'sr-only')}>\n          <label id={`${id}-label`} htmlFor={id} className=\"text-sm font-semibold text-fg\">\n            {label}\n            {required && !optionalLabel && (\n              <span aria-hidden=\"true\" className=\"ml-0.5 text-danger-fg\">\n                *\n              </span>\n            )}\n            {optionalLabel && !required && <span className=\"ml-1 font-normal text-fg-muted\">({optionalLabel})</span>}\n          </label>\n          {labelAction && <span className=\"text-sm\">{labelAction}</span>}\n        </div>\n        {hint && (\n          <p id={hintId} className=\"m-0 -mt-0.5 text-sm text-fg-muted\">\n            {hint}\n          </p>\n        )}\n        {children}\n        {error && (\n          <p id={errorId} className=\"m-0 flex items-start gap-1.5 text-sm font-medium text-danger-fg\">\n            <Icon name=\"error\" size={18} className=\"mt-px shrink-0 text-danger-icon\" />\n            {error}\n          </p>\n        )}\n      </div>\n    </FieldContext.Provider>\n  );\n}\n\n/** Groups related fields (address, billing) with a legend. */\nexport function Fieldset({\n  legend,\n  description,\n  className,\n  children,\n  ...rest\n}: HTMLAttributes<HTMLFieldSetElement> & { legend: ReactNode; description?: ReactNode }) {\n  return (\n    <fieldset className={cx('m-0 grid min-w-0 gap-4 border-0 p-0 font-sans', className)} {...rest}>\n      <legend className=\"mb-1 p-0 font-display text-lg font-bold text-fg\">{legend}</legend>\n      {description && <p className=\"m-0 -mt-3 text-sm text-fg-muted\">{description}</p>}\n      {children}\n    </fieldset>\n  );\n}\n"],"mappings":";;;;;;AAeA,IAAMA,IAAeC,EAAqC,IAAI,GAGjDC,UAAqBC,EAAWH,CAAY;AAyBzD,SAAgBI,EAAU,EACxB,UACA,SACA,UACA,cAAW,IACX,cAAW,IACX,kBACA,cACA,gBACA,IAAIC,GACJ,cACA,aACA,GAAGC,KACc;CACjB,IAAMC,IAAOC,EAAM,GACbC,IAAKJ,KAAU,YAAYE,KAC3BG,IAASC,IAAO,GAAGF,EAAG,SAAS,KAAA,GAC/BG,IAAUC,IAAQ,GAAGJ,EAAG,UAAU,KAAA,GAClCK,IAAc,CAACJ,GAAQE,CAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnE,OACE,kBAACZ,EAAa,UAAd;EAAuB,OAAO;GAAE;GAAI;GAAa,SAAS,CAAC,CAACa;GAAO;GAAU;EAAS;EACpF,UAAA,kBAAC,OAAD;GAAK,WAAWE,EAAG,0BAA0BC,KAAY,cAAcC,CAAS;GAAG,GAAIX;GAAvF,UAAA;IACE,kBAAC,OAAD;KAAK,WAAWS,EAAG,6CAA6CG,KAAa,SAAS;KAAtF,UAAA,CACE,kBAAC,SAAD;MAAO,IAAI,GAAGT,EAAG;MAAS,SAASA;MAAI,WAAU;MAAjD,UAAA;OACGU;OACAC,KAAY,CAACC,KACZ,kBAAC,QAAD;QAAM,eAAY;QAAO,WAAU;QAAwB,UAAA;OAErD,CAAA;OAEPA,KAAiB,CAACD,KAAY,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SAAiD;SAAEC;SAAc;QAAO;;MAClG;KACN,CAAA,GAAAC,KAAe,kBAAC,QAAD;MAAM,WAAU;MAAW,UAAAA;KAAkB,CAAA,CAC1D;;IACJX,KACC,kBAAC,KAAD;KAAG,IAAID;KAAQ,WAAU;KACtB,UAAAC;IACA,CAAA;IAEJY;IACAV,KACC,kBAAC,KAAD;KAAG,IAAID;KAAS,WAAU;KAA1B,UAAA,CACE,kBAACY,GAAD;MAAM,MAAK;MAAQ,MAAM;MAAI,WAAU;KAAmC,CAAA,GACzEX,CACA;;GAEF;;CACgB,CAAA;AAE3B;AAGA,SAAgBY,EAAS,EACvB,WACA,gBACA,cACA,aACA,GAAGnB,KACoF;CACvF,OACE,kBAAC,YAAD;EAAU,WAAWS,EAAG,iDAAiDE,CAAS;EAAG,GAAIX;EAAzF,UAAA;GACE,kBAAC,UAAD;IAAQ,WAAU;IAAmD,UAAAoB;GAAe,CAAA;GACnFC,KAAe,kBAAC,KAAD;IAAG,WAAU;IAAmC,UAAAA;GAAe,CAAA;GAC9EJ;EACO;;AAEd"}

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

@@ -0,0 +1,15 @@
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import type { ComponentPropsWithoutRef } from 'react';
+export interface HoverCardProps extends ComponentPropsWithoutRef<typeof RadixHoverCard.Root> {
+}
+/**
+ * Preview of a linked resource (person, company, workflow) on hover or keyboard focus.
+ * Sighted mouse users only: the trigger must be a link that leads to the same information.
+ */
+export declare function HoverCard({ openDelay, closeDelay, ...rest }: HoverCardProps): import("react").JSX.Element;
+/** The link that opens the card. Use `asChild` with an `<a>`. */
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<RadixHoverCard.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export interface HoverCardContentProps extends ComponentPropsWithoutRef<typeof RadixHoverCard.Content> {
+    size?: 'sm' | 'md';
+}
+export declare function HoverCardContent({ size, side, sideOffset, collisionPadding, className, ...rest }: HoverCardContentProps): import("react").JSX.Element;

package/dist/hover-card/hover-card.js

@@ -0,0 +1,27 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { floatingSurface as t } from "../popover/popover.js";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-hover-card";
+//#region src/hover-card/hover-card.tsx
+function i({ openDelay: e = 500, closeDelay: t = 200, ...i }) {
+	return /* @__PURE__ */ n(r.Root, {
+		openDelay: e,
+		closeDelay: t,
+		...i
+	});
+}
+var a = r.Trigger;
+function o({ size: i = "md", side: a = "bottom", sideOffset: o = 8, collisionPadding: s = 16, className: c, ...l }) {
+	return /* @__PURE__ */ n(r.Portal, { children: /* @__PURE__ */ n(r.Content, {
+		side: a,
+		sideOffset: o,
+		collisionPadding: s,
+		className: e("kf-hovercard p-4 text-sm", t, i === "sm" ? "w-64" : "w-80", c),
+		...l
+	}) });
+}
+//#endregion
+export { i as HoverCard, o as HoverCardContent, a as HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.js.map

package/dist/hover-card/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","names":["RadixHoverCard","HoverCard","rest","HoverCardTrigger","HoverCardContent","cx","floatingSurface","size","className"],"sources":["../../src/hover-card/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cx } from '../lib/cx';\nimport { floatingSurface } from '../popover/popover';\n\nexport interface HoverCardProps extends ComponentPropsWithoutRef<typeof RadixHoverCard.Root> {}\n\n/**\n * Preview of a linked resource (person, company, workflow) on hover or keyboard focus.\n * Sighted mouse users only: the trigger must be a link that leads to the same information.\n */\nexport function HoverCard({ openDelay = 500, closeDelay = 200, ...rest }: HoverCardProps) {\n  return <RadixHoverCard.Root openDelay={openDelay} closeDelay={closeDelay} {...rest} />;\n}\n\n/** The link that opens the card. Use `asChild` with an `<a>`. */\nexport const HoverCardTrigger = RadixHoverCard.Trigger;\n\nexport interface HoverCardContentProps extends ComponentPropsWithoutRef<typeof RadixHoverCard.Content> {\n  size?: 'sm' | 'md';\n}\n\nexport function HoverCardContent({ size = 'md', side = 'bottom', sideOffset = 8, collisionPadding = 16, className, ...rest }: HoverCardContentProps) {\n  return (\n    <RadixHoverCard.Portal>\n      <RadixHoverCard.Content\n        side={side}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        className={cx('kf-hovercard p-4 text-sm', floatingSurface, size === 'sm' ? 'w-64' : 'w-80', className)}\n        {...rest}\n      />\n    </RadixHoverCard.Portal>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgBC,EAAU,EAAE,eAAY,KAAK,gBAAa,KAAK,GAAGC,KAAwB;CACxF,OAAO,kBAACF,EAAe,MAAhB;EAAgC;EAAuB;EAAY,GAAIE;CAAO,CAAA;AACvF;AAGA,IAAaC,IAAmBH,EAAe;AAM/C,SAAgBI,EAAiB,EAAE,UAAO,MAAM,UAAO,UAAU,gBAAa,GAAG,sBAAmB,IAAI,cAAW,GAAGF,KAA+B;CACnJ,OACE,kBAACF,EAAe,QAAhB,EAAA,UACE,kBAACA,EAAe,SAAhB;EACQ;EACM;EACM;EAClB,WAAWK,EAAG,4BAA4BC,GAAiBC,MAAS,OAAO,SAAS,QAAQC,CAAS;EACrG,GAAIN;CACL,CAAA,EACoB,CAAA;AAE3B"}

package/dist/hover-card/person-hover-card.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+export interface PersonHoverCardProps {
+    /** The trigger: usually the person's name as a link. */
+    children: ReactNode;
+    name: string;
+    title?: string;
+    avatarSrc?: string;
+    statusColor?: string;
+    statusLabel?: string;
+    /** "Clocked in 08:02" */
+    clockIn?: string;
+    /** Pre-formatted local time ("10:42 in Quito"). */
+    localTime?: string;
+    /** Next events ("Time off · Nov 20–22"). */
+    upcoming?: string[];
+    profileHref?: string;
+    labels?: {
+        upcoming?: string;
+        profile?: string;
+    };
+}
+/**
+ * A person's card on hover or focus in people lists: avatar with status, name, title, clock-in, local time,
+ * upcoming events and "View profile". The trigger must be focusable (a link).
+ */
+export declare function PersonHoverCard({ children, name, title, avatarSrc, statusColor, statusLabel, clockIn, localTime, upcoming, profileHref, labels, }: PersonHoverCardProps): import("react").JSX.Element;

package/dist/hover-card/person-hover-card.js

@@ -0,0 +1,85 @@
+"use client";
+import { Icon as e } from "../icon/icon.js";
+import { HoverCard as t, HoverCardContent as n, HoverCardTrigger as r } from "./hover-card.js";
+import { Avatar as i } from "../data-display/avatar.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "react";
+//#region src/hover-card/person-hover-card.tsx
+function s({ children: s, name: c, title: l, avatarSrc: u, statusColor: d, statusLabel: f, clockIn: p, localTime: m, upcoming: h = [], profileHref: g, labels: _ = {} }) {
+	return /* @__PURE__ */ o(t, {
+		openDelay: 400,
+		children: [/* @__PURE__ */ a(r, {
+			asChild: !0,
+			children: s
+		}), /* @__PURE__ */ o(n, {
+			className: "grid gap-3",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ a(i, {
+						name: c,
+						src: u,
+						size: "lg",
+						statusColor: d,
+						statusLabel: f
+					}), /* @__PURE__ */ o("div", {
+						className: "grid min-w-0",
+						children: [
+							/* @__PURE__ */ a("p", {
+								className: "m-0 truncate font-semibold text-fg",
+								children: c
+							}),
+							l && /* @__PURE__ */ a("p", {
+								className: "m-0 truncate text-xs text-fg-muted",
+								children: l
+							}),
+							f && /* @__PURE__ */ o("p", {
+								className: "m-0 mt-1 inline-flex items-center gap-1.5 text-xs font-medium text-fg",
+								children: [/* @__PURE__ */ a("span", {
+									"aria-hidden": "true",
+									className: "size-2 rounded-full",
+									style: { background: d }
+								}), f]
+							})
+						]
+					})]
+				}),
+				(p || m) && /* @__PURE__ */ o("div", {
+					className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-muted",
+					children: [p && /* @__PURE__ */ o("span", {
+						className: "inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ a(e, {
+							name: "time",
+							size: 14
+						}), p]
+					}), m && /* @__PURE__ */ o("span", {
+						className: "inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ a(e, {
+							name: "c-location",
+							size: 14
+						}), m]
+					})]
+				}),
+				h.length > 0 && /* @__PURE__ */ o("div", {
+					className: "grid gap-1 border-t border-border pt-3",
+					children: [/* @__PURE__ */ a("p", {
+						className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+						children: _.upcoming ?? "Upcoming"
+					}), /* @__PURE__ */ a("ul", {
+						className: "m-0 grid list-none gap-0.5 p-0 text-sm text-fg",
+						children: h.map((e) => /* @__PURE__ */ a("li", { children: e }, e))
+					})]
+				}),
+				g && /* @__PURE__ */ o("a", {
+					href: g,
+					className: "text-sm font-semibold text-link no-underline hover:underline",
+					children: [_.profile ?? "View profile", " →"]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { s as PersonHoverCard };
+
+//# sourceMappingURL=person-hover-card.js.map

package/dist/hover-card/person-hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"person-hover-card.js","names":["PersonHoverCard","HoverCard","HoverCardTrigger","HoverCardContent","Avatar","avatarSrc","name","title","statusLabel","statusColor","clockIn","localTime","Icon","upcoming","labels","u","profileHref"],"sources":["../../src/hover-card/person-hover-card.tsx"],"sourcesContent":["'use client';\nimport { type ReactNode } from 'react';\nimport { Icon } from '../icon/icon';\nimport { Avatar } from '../data-display/avatar';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card/hover-card';\n\n/* ---------------- PersonHoverCard ---------------- */\n\nexport interface PersonHoverCardProps {\n  /** The trigger: usually the person's name as a link. */\n  children: ReactNode;\n  name: string;\n  title?: string;\n  avatarSrc?: string;\n  statusColor?: string;\n  statusLabel?: string;\n  /** \"Clocked in 08:02\" */\n  clockIn?: string;\n  /** Pre-formatted local time (\"10:42 in Quito\"). */\n  localTime?: string;\n  /** Next events (\"Time off · Nov 20–22\"). */\n  upcoming?: string[];\n  profileHref?: string;\n  labels?: { upcoming?: string; profile?: string };\n}\n\n/**\n * A person's card on hover or focus in people lists: avatar with status, name, title, clock-in, local time,\n * upcoming events and \"View profile\". The trigger must be focusable (a link).\n */\nexport function PersonHoverCard({\n  children,\n  name,\n  title,\n  avatarSrc,\n  statusColor,\n  statusLabel,\n  clockIn,\n  localTime,\n  upcoming = [],\n  profileHref,\n  labels = {},\n}: PersonHoverCardProps) {\n  return (\n    <HoverCard openDelay={400}>\n      <HoverCardTrigger asChild>{children}</HoverCardTrigger>\n      <HoverCardContent className=\"grid gap-3\">\n        <div className=\"flex items-center gap-3\">\n          <Avatar name={name} src={avatarSrc} size=\"lg\" statusColor={statusColor} statusLabel={statusLabel} />\n          <div className=\"grid min-w-0\">\n            <p className=\"m-0 truncate font-semibold text-fg\">{name}</p>\n            {title && <p className=\"m-0 truncate text-xs text-fg-muted\">{title}</p>}\n            {statusLabel && (\n              <p className=\"m-0 mt-1 inline-flex items-center gap-1.5 text-xs font-medium text-fg\">\n                <span aria-hidden=\"true\" className=\"size-2 rounded-full\" style={{ background: statusColor }} />\n                {statusLabel}\n              </p>\n            )}\n          </div>\n        </div>\n        {(clockIn || localTime) && (\n          <div className=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-muted\">\n            {clockIn && (\n              <span className=\"inline-flex items-center gap-1\">\n                <Icon name=\"time\" size={14} />\n                {clockIn}\n              </span>\n            )}\n            {localTime && (\n              <span className=\"inline-flex items-center gap-1\">\n                <Icon name=\"c-location\" size={14} />\n                {localTime}\n              </span>\n            )}\n          </div>\n        )}\n        {upcoming.length > 0 && (\n          <div className=\"grid gap-1 border-t border-border pt-3\">\n            <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">\n              {labels.upcoming ?? 'Upcoming'}\n            </p>\n            <ul className=\"m-0 grid list-none gap-0.5 p-0 text-sm text-fg\">\n              {upcoming.map((u) => (\n                <li key={u}>{u}</li>\n              ))}\n            </ul>\n          </div>\n        )}\n        {profileHref && (\n          <a href={profileHref} className=\"text-sm font-semibold text-link no-underline hover:underline\">\n            {labels.profile ?? 'View profile'} →\n          </a>\n        )}\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,SAAgBA,EAAgB,EAC9B,aACA,SACA,UACA,cACA,gBACA,gBACA,YACA,cACA,cAAW,CAAC,GACZ,gBACA,YAAS,CAAC,KACa;CACvB,OACE,kBAACC,GAAD;EAAW,WAAW;EAAtB,UAAA,CACE,kBAACC,GAAD;GAAkB,SAAA;GAAS;EAA2B,CAAA,GACtD,kBAACC,GAAD;GAAkB,WAAU;GAA5B,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAACC,GAAD;MAAc;MAAM,KAAKC;MAAW,MAAK;MAAkB;MAA0B;KAAc,CAAA,GACnG,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACE,kBAAC,KAAD;QAAG,WAAU;QAAsC,UAAAC;OAAQ,CAAA;OAC1DC,KAAS,kBAAC,KAAD;QAAG,WAAU;QAAsC,UAAAA;OAAS,CAAA;OACrEC,KACC,kBAAC,KAAD;QAAG,WAAU;QAAb,UAAA,CACE,kBAAC,QAAD;SAAM,eAAY;SAAO,WAAU;SAAsB,OAAO,EAAE,YAAYC,EAAY;QAAI,CAAA,GAC7FD,CACA;;MAEF;KACF,CAAA,CAAA;;KACHE,KAAWC,MACX,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGD,KACC,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAACE,GAAD;OAAM,MAAK;OAAO,MAAM;MAAK,CAAA,GAC5BF,CACG;KAEP,CAAA,GAAAC,KACC,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAACC,GAAD;OAAM,MAAK;OAAa,MAAM;MAAK,CAAA,GAClCD,CACG;KAEL,CAAA,CAAA;;IAENE,EAAS,SAAS,KACjB,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,KAAD;MAAG,WAAU;MACV,UAAAC,EAAO,YAAY;KACnB,CAAA,GACH,kBAAC,MAAD;MAAI,WAAU;MACX,UAAAD,EAAS,KAAK,MACb,kBAAC,MAAD,EAAA,UAAaE,EAAM,GAAVA,CAAU,CACpB;KACC,CAAA,CACD;;IAENC,KACC,kBAAC,KAAD;KAAG,MAAMA;KAAa,WAAU;KAAhC,UAAA,CACGF,EAAO,WAAW,gBAAe,IACjC;;GAEW;EACT,CAAA,CAAA;;AAEf"}

package/dist/icon/icon-tile.d.ts

@@ -0,0 +1,20 @@
+import { type IconName } from './icon';
+export type IconTileSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconTileTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | 'muted' | 'outline' | 'inverse';
+export interface IconTileProps {
+    icon: IconName;
+    size?: IconTileSize;
+    tone?: IconTileTone;
+    /**
+     * A category color (`var(--kf-category-N)`) instead of a tone: `solid` fills the tile and the icon is white;
+     * `soft` tints the tile and colors the icon.
+     */
+    color?: string;
+    colorStyle?: 'solid' | 'soft';
+    className?: string;
+}
+/**
+ * The square icon tile used across the library (section and page headers, settings rows, lists, cards, records).
+ * Always decorative: the text next to it carries the meaning.
+ */
+export declare function IconTile({ icon, size, tone, color, colorStyle, className, }: IconTileProps): import("react").JSX.Element;

package/dist/icon/icon-tile.js

@@ -0,0 +1,55 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "./icon.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/icon/icon-tile.tsx
+var r = {
+	xs: {
+		box: "size-7 rounded-sm",
+		icon: 16
+	},
+	sm: {
+		box: "size-9 rounded-sm",
+		icon: 18
+	},
+	md: {
+		box: "size-10 rounded-sm",
+		icon: 20
+	},
+	lg: {
+		box: "size-12 rounded-md",
+		icon: 24
+	},
+	xl: {
+		box: "size-16 rounded-lg",
+		icon: 30
+	}
+}, i = {
+	primary: "bg-info-surface text-primary",
+	accent: "bg-accent/15 text-fg",
+	success: "bg-success-surface text-success-icon",
+	warning: "bg-warning-surface text-warning-icon",
+	danger: "bg-danger-surface text-danger-icon",
+	neutral: "bg-surface-muted text-fg-muted",
+	muted: "bg-surface-muted text-primary",
+	outline: "border border-border bg-bg text-fg",
+	inverse: "bg-white/12 text-white"
+};
+function a({ icon: a, size: o = "md", tone: s = "primary", color: c, colorStyle: l = "solid", className: u }) {
+	let d = r[o];
+	return /* @__PURE__ */ n("span", {
+		"aria-hidden": "true",
+		className: e("grid shrink-0 place-items-center", d.box, c ? l === "solid" && "text-white" : i[s], u),
+		style: c ? l === "solid" ? { background: c } : {
+			background: `color-mix(in oklab, ${c}, transparent 82%)`,
+			color: c
+		} : void 0,
+		children: /* @__PURE__ */ n(t, {
+			name: a,
+			size: d.icon
+		})
+	});
+}
+//#endregion
+export { a as IconTile };
+
+//# sourceMappingURL=icon-tile.js.map

package/dist/icon/icon-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile.js","names":["SIZES","TONES","IconTile","s","size","cx","color","colorStyle","tone","className","Icon","icon"],"sources":["../../src/icon/icon-tile.tsx"],"sourcesContent":["import { cx } from '../lib/cx';\nimport { Icon, type IconName } from './icon';\n\nexport type IconTileSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type IconTileTone =\n  'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | 'muted' | 'outline' | 'inverse';\n\n/** 28 / 36 / 40 / 48 / 64 px tiles with 16 / 18 / 20 / 24 / 30 px icons. */\nconst SIZES: Record<IconTileSize, { box: string; icon: number }> = {\n  xs: { box: 'size-7 rounded-sm', icon: 16 },\n  sm: { box: 'size-9 rounded-sm', icon: 18 },\n  md: { box: 'size-10 rounded-sm', icon: 20 },\n  lg: { box: 'size-12 rounded-md', icon: 24 },\n  xl: { box: 'size-16 rounded-lg', icon: 30 },\n};\n\nconst TONES: Record<IconTileTone, string> = {\n  primary: 'bg-info-surface text-primary',\n  accent: 'bg-accent/15 text-fg',\n  success: 'bg-success-surface text-success-icon',\n  warning: 'bg-warning-surface text-warning-icon',\n  danger: 'bg-danger-surface text-danger-icon',\n  neutral: 'bg-surface-muted text-fg-muted',\n  muted: 'bg-surface-muted text-primary',\n  outline: 'border border-border bg-bg text-fg',\n  // On brand bands (PageHeader, selected rows): white on a translucent white.\n  inverse: 'bg-white/12 text-white',\n};\n\nexport interface IconTileProps {\n  icon: IconName;\n  size?: IconTileSize;\n  tone?: IconTileTone;\n  /**\n   * A category color (`var(--kf-category-N)`) instead of a tone: `solid` fills the tile and the icon is white;\n   * `soft` tints the tile and colors the icon.\n   */\n  color?: string;\n  colorStyle?: 'solid' | 'soft';\n  className?: string;\n}\n\n/**\n * The square icon tile used across the library (section and page headers, settings rows, lists, cards, records).\n * Always decorative: the text next to it carries the meaning.\n */\nexport function IconTile({\n  icon,\n  size = 'md',\n  tone = 'primary',\n  color,\n  colorStyle = 'solid',\n  className,\n}: IconTileProps) {\n  const s = SIZES[size];\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cx(\n        'grid shrink-0 place-items-center',\n        s.box,\n        color ? colorStyle === 'solid' && 'text-white' : TONES[tone],\n        className,\n      )}\n      style={\n        color\n          ? colorStyle === 'solid'\n            ? { background: color }\n            : { background: `color-mix(in oklab, ${color}, transparent 82%)`, color }\n          : undefined\n      }\n    >\n      <Icon name={icon} size={s.icon} />\n    </span>\n  );\n}\n"],"mappings":";;;;AAQA,IAAMA,IAA6D;CACjE,IAAI;EAAE,KAAK;EAAqB,MAAM;CAAG;CACzC,IAAI;EAAE,KAAK;EAAqB,MAAM;CAAG;CACzC,IAAI;EAAE,KAAK;EAAsB,MAAM;CAAG;CAC1C,IAAI;EAAE,KAAK;EAAsB,MAAM;CAAG;CAC1C,IAAI;EAAE,KAAK;EAAsB,MAAM;CAAG;AAC5C,GAEMC,IAAsC;CAC1C,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CAET,SAAS;AACX;AAmBA,SAAgBC,EAAS,EACvB,SACA,UAAO,MACP,UAAO,WACP,UACA,gBAAa,SACb,gBACgB;CAChB,IAAMC,IAAIH,EAAMI;CAChB,OACE,kBAAC,QAAD;EACE,eAAY;EACZ,WAAWC,EACT,oCACAF,EAAE,KACFG,IAAQC,MAAe,WAAW,eAAeN,EAAMO,IACvDC,CACF;EACA,OACEH,IACIC,MAAe,UACb,EAAE,YAAYD,EAAM,IACpB;GAAE,YAAY,uBAAuBA,EAAM;GAAqB;EAAM,IACxE,KAAA;EAGN,UAAA,kBAACI,GAAD;GAAM,MAAMC;GAAM,MAAMR,EAAE;EAAO,CAAA;CAC7B,CAAA;AAEV"}

package/dist/icon/icon.d.ts

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react';
+import { type IconName } from './icons.generated';
+export type { IconName };
+export declare const iconNames: IconName[];
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /** Static icon from the Kodffe set: actions (`accept`), interface (`home`), contact (`c-email`), brands (`b-github`). */
+    name: IconName;
+    /** Height in px or any CSS length. Width follows the icon's proportions. Defaults to 1em. */
+    size?: number | string;
+    /** Accessible name. Omit when the icon sits next to visible text (it is then hidden from screen readers). */
+    title?: string;
+}
+/** Kodffe static icon. Inherits the text color (`currentColor`) and works from 16 px. Animated mascots are `Mascot`. */
+export declare function Icon({ name, size, title, className, style, ...rest }: IconProps): import("react").JSX.Element;

package/dist/icon/icon.js

@@ -0,0 +1,28 @@
+import { cx as e } from "../lib/cx.js";
+import { ICONS as t } from "./icons.generated.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/icon/icon.tsx
+var r = Object.keys(t);
+function i({ name: r, size: i = "1em", title: a, className: o, style: s, ...c }) {
+	let l = t[r], u = a ? {
+		role: "img",
+		"aria-label": a
+	} : { "aria-hidden": !0 };
+	return /* @__PURE__ */ n("svg", {
+		viewBox: l.viewBox,
+		className: e("inline-block shrink-0 overflow-visible", o),
+		style: {
+			height: i,
+			width: "auto",
+			...s
+		},
+		focusable: "false",
+		...u,
+		...c,
+		dangerouslySetInnerHTML: { __html: l.body }
+	});
+}
+//#endregion
+export { i as Icon, r as iconNames };
+
+//# sourceMappingURL=icon.js.map

package/dist/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":["iconNames","ICONS","Icon","rest","icon","name","a11y","title","cx","className","size","style"],"sources":["../../src/icon/icon.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cx } from '../lib/cx';\nimport { ICONS, type IconName } from './icons.generated';\n\nexport type { IconName };\nexport const iconNames = Object.keys(ICONS) as IconName[];\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {\n  /** Static icon from the Kodffe set: actions (`accept`), interface (`home`), contact (`c-email`), brands (`b-github`). */\n  name: IconName;\n  /** Height in px or any CSS length. Width follows the icon's proportions. Defaults to 1em. */\n  size?: number | string;\n  /** Accessible name. Omit when the icon sits next to visible text (it is then hidden from screen readers). */\n  title?: string;\n}\n\n/** Kodffe static icon. Inherits the text color (`currentColor`) and works from 16 px. Animated mascots are `Mascot`. */\nexport function Icon({ name, size = '1em', title, className, style, ...rest }: IconProps) {\n  const icon = ICONS[name];\n  const a11y = title ? { role: 'img', 'aria-label': title } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      viewBox={icon.viewBox}\n      className={cx('inline-block shrink-0 overflow-visible', className)}\n      style={{ height: size, width: 'auto', ...style }}\n      focusable=\"false\"\n      {...a11y}\n      {...rest}\n      dangerouslySetInnerHTML={{ __html: icon.body }}\n    />\n  );\n}\n"],"mappings":";;;;AAKA,IAAaA,IAAY,OAAO,KAAKC,CAAK;AAY1C,SAAgBC,EAAK,EAAE,SAAM,UAAO,OAAO,UAAO,cAAW,UAAO,GAAGC,KAAmB;CACxF,IAAMC,IAAOH,EAAMI,IACbC,IAAOC,IAAQ;EAAE,MAAM;EAAO,cAAcA;CAAM,IAAI,EAAE,eAAe,GAAc;CAC3F,OACE,kBAAC,OAAD;EACE,SAASH,EAAK;EACd,WAAWI,EAAG,0CAA0CC,CAAS;EACjE,OAAO;GAAE,QAAQC;GAAM,OAAO;GAAQ,GAAGC;EAAM;EAC/C,WAAU;EACV,GAAIL;EACJ,GAAIH;EACJ,yBAAyB,EAAE,QAAQC,EAAK,KAAK;CAC9C,CAAA;AAEL"}