@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/master-detail/master-detail.js

@@ -0,0 +1,71 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { IconTile as n } from "../icon/icon-tile.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useRef as a, useState as o } from "react";
+//#region src/master-detail/master-detail.tsx
+function s({ items: s, selectedId: c, onSelect: l, children: u, listLabel: d, listAction: f, labels: p = {}, className: m }) {
+	let [h, g] = o(!1), _ = a(null), v = a(null), y = () => typeof window < "u" && !window.matchMedia("(min-width: 768px)").matches, b = (e) => setTimeout(() => e()?.focus(), 0);
+	return /* @__PURE__ */ i("div", {
+		className: e("grid gap-4 font-sans md:grid-cols-[minmax(14rem,18rem)_minmax(0,1fr)]", m),
+		children: [/* @__PURE__ */ i("section", {
+			"aria-label": d,
+			className: e("content-start gap-3 md:grid", h ? "hidden" : "grid"),
+			children: [f, /* @__PURE__ */ r("ul", {
+				ref: v,
+				className: "m-0 grid list-none gap-1 rounded-lg border border-border bg-surface p-1.5",
+				children: s.map((t) => {
+					let a = t.id === c;
+					return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i("button", {
+						type: "button",
+						"aria-current": a ? "true" : void 0,
+						onClick: () => {
+							l(t.id), g(!0), y() && b(() => _.current);
+						},
+						className: e("flex w-full cursor-pointer items-center gap-2.5 rounded-sm border-0 px-2.5 py-2 text-left text-sm font-medium", "focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus", a ? "bg-primary text-on-primary" : "bg-transparent text-fg hover:bg-surface-muted"),
+						children: [
+							t.icon ? /* @__PURE__ */ r(n, {
+								icon: t.icon,
+								size: "xs",
+								...a ? { tone: "inverse" } : { color: t.color ?? "var(--kf-primary)" }
+							}) : t.color && /* @__PURE__ */ r("span", {
+								"aria-hidden": "true",
+								className: "size-2.5 shrink-0 rounded-full",
+								style: { background: t.color }
+							}),
+							/* @__PURE__ */ r("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: t.label
+							}),
+							t.count !== void 0 && /* @__PURE__ */ r("span", {
+								className: e("text-xs tabular-nums", a ? "opacity-80" : "text-fg-muted"),
+								children: t.count
+							})
+						]
+					}) }, t.id);
+				})
+			})]
+		}), /* @__PURE__ */ i("section", {
+			ref: _,
+			tabIndex: -1,
+			"aria-label": p.detail,
+			className: e("min-w-0 content-start gap-3 focus:outline-none md:grid", h ? "grid" : "hidden"),
+			children: [/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: () => {
+					g(!1), b(() => v.current?.querySelector("[aria-current=\"true\"]") ?? v.current?.querySelector("button"));
+				},
+				className: "inline-flex w-fit cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 text-sm font-medium text-fg-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus md:hidden",
+				children: [/* @__PURE__ */ r(t, {
+					name: "chevron-left",
+					size: 16
+				}), p.back ?? d]
+			}), u]
+		})]
+	});
+}
+//#endregion
+export { s as MasterDetail };
+
+//# sourceMappingURL=master-detail.js.map

package/dist/master-detail/master-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"master-detail.js","names":["MasterDetail","detailOnMobile","setDetailOnMobile","useState","detailRef","useRef","listRef","narrow","focusLater","el","cx","className","listLabel","listAction","items","on","i","selectedId","onSelect","IconTile","labels","Glyph","children"],"sources":["../../src/master-detail/master-detail.tsx"],"sourcesContent":["'use client';\nimport { useRef, useState, type 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';\n\n/* ---------------- MasterDetail ---------------- */\n\nexport interface MasterItem {\n  id: string;\n  label: string;\n  icon?: IconName;\n  color?: string;\n  count?: number;\n}\n\nexport interface MasterDetailProps {\n  items: MasterItem[];\n  selectedId?: string;\n  onSelect: (id: string) => void;\n  /** The selected item's panel. */\n  children: ReactNode;\n  listLabel: string;\n  /** A control above the list (\"New client\"). */\n  listAction?: ReactNode;\n  /** `detail` names the detail panel for screen readers (e.g. \"Client details\"). */\n  labels?: { back?: string; detail?: string };\n  className?: string;\n}\n\n/**\n * A selectable list on the left and the selected item's detail on the right (clients and projects, departments).\n * Below 768px it shows the list, then the detail with a back button.\n */\nexport function MasterDetail({\n  items,\n  selectedId,\n  onSelect,\n  children,\n  listLabel,\n  listAction,\n  labels = {},\n  className,\n}: MasterDetailProps) {\n  const [detailOnMobile, setDetailOnMobile] = useState(false);\n  const detailRef = useRef<HTMLElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  // Below 768px one panel hides the other: move focus to the panel that appears, or it falls to <body>.\n  const narrow = () => typeof window !== 'undefined' && !window.matchMedia('(min-width: 768px)').matches;\n  const focusLater = (el: () => HTMLElement | null | undefined) => setTimeout(() => el()?.focus(), 0);\n  return (\n    <div className={cx('grid gap-4 font-sans md:grid-cols-[minmax(14rem,18rem)_minmax(0,1fr)]', className)}>\n      <section aria-label={listLabel} className={cx('content-start gap-3 md:grid', detailOnMobile ? 'hidden' : 'grid')}>\n        {listAction}\n        <ul ref={listRef} className=\"m-0 grid list-none gap-1 rounded-lg border border-border bg-surface p-1.5\">\n          {items.map((i) => {\n            const on = i.id === selectedId;\n            return (\n              <li key={i.id}>\n                <button\n                  type=\"button\"\n                  aria-current={on ? 'true' : undefined}\n                  onClick={() => {\n                    onSelect(i.id);\n                    setDetailOnMobile(true);\n                    if (narrow()) focusLater(() => detailRef.current);\n                  }}\n                  className={cx(\n                    'flex w-full cursor-pointer items-center gap-2.5 rounded-sm border-0 px-2.5 py-2 text-left text-sm font-medium',\n                    'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus',\n                    on ? 'bg-primary text-on-primary' : 'bg-transparent text-fg hover:bg-surface-muted',\n                  )}\n                >\n                  {i.icon ? (\n                    <IconTile\n                      icon={i.icon}\n                      size=\"xs\"\n                      {...(on ? { tone: 'inverse' } : { color: i.color ?? 'var(--kf-primary)' })}\n                    />\n                  ) : (\n                    i.color && (\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"size-2.5 shrink-0 rounded-full\"\n                        style={{ background: i.color }}\n                      />\n                    )\n                  )}\n                  <span className=\"min-w-0 flex-1 truncate\">{i.label}</span>\n                  {i.count !== undefined && (\n                    <span className={cx('text-xs tabular-nums', on ? 'opacity-80' : 'text-fg-muted')}>{i.count}</span>\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </section>\n      <section\n        ref={detailRef}\n        tabIndex={-1}\n        aria-label={labels.detail}\n        className={cx('min-w-0 content-start gap-3 focus:outline-none md:grid', detailOnMobile ? 'grid' : 'hidden')}\n      >\n        <button\n          type=\"button\"\n          onClick={() => {\n            setDetailOnMobile(false);\n            focusLater(\n              () =>\n                listRef.current?.querySelector<HTMLElement>('[aria-current=\"true\"]') ??\n                listRef.current?.querySelector('button'),\n            );\n          }}\n          className=\"inline-flex w-fit cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 text-sm font-medium text-fg-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus md:hidden\"\n        >\n          <Glyph name=\"chevron-left\" size={16} />\n          {labels.back ?? listLabel}\n        </button>\n        {children}\n      </section>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAmCA,SAAgBA,EAAa,EAC3B,UACA,eACA,aACA,aACA,cACA,eACA,YAAS,CAAC,GACV,gBACoB;CACpB,IAAM,CAACC,GAAgBC,KAAqBC,EAAS,EAAK,GACpDC,IAAYC,EAAoB,IAAI,GACpCC,IAAUD,EAAyB,IAAI,GAEvCE,UAAe,OAAO,SAAW,OAAe,CAAC,OAAO,WAAW,oBAAoB,CAAC,CAAC,SACzFC,KAAc,MAA6C,iBAAiBC,EAAG,CAAC,EAAE,MAAM,GAAG,CAAC;CAClG,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAG,yEAAyEC,CAAS;EAArG,UAAA,CACE,kBAAC,WAAD;GAAS,cAAYC;GAAW,WAAWF,EAAG,+BAA+BT,IAAiB,WAAW,MAAM;GAA/G,UAAA,CACGY,GACD,kBAAC,MAAD;IAAI,KAAKP;IAAS,WAAU;IACzB,UAAAQ,EAAM,KAAK,MAAM;KAChB,IAAMC,IAAKC,EAAE,OAAOC;KACpB,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;MACE,MAAK;MACL,gBAAcF,IAAK,SAAS,KAAA;MAC5B,eAAe;OAGb,AAFAG,EAASF,EAAE,EAAE,GACbd,EAAkB,EAAI,GAClBK,EAAO,KAAGC,QAAiBJ,EAAU,OAAO;MAClD;MACA,WAAWM,EACT,iHACA,uFACAK,IAAK,+BAA+B,+CACtC;MAZF,UAAA;OAcGC,EAAE,OACD,kBAACG,GAAD;QACE,MAAMH,EAAE;QACR,MAAK;QACL,GAAKD,IAAK,EAAE,MAAM,UAAU,IAAI,EAAE,OAAOC,EAAE,SAAS,oBAAoB;OACzE,CAAA,IAEDA,EAAE,SACA,kBAAC,QAAD;QACE,eAAY;QACZ,WAAU;QACV,OAAO,EAAE,YAAYA,EAAE,MAAM;OAC9B,CAAA;OAGL,kBAAC,QAAD;QAAM,WAAU;QAA2B,UAAAA,EAAE;OAAY,CAAA;OACxDA,EAAE,UAAU,KAAA,KACX,kBAAC,QAAD;QAAM,WAAWN,EAAG,wBAAwBK,IAAK,eAAe,eAAe;QAAI,UAAAC,EAAE;OAAY,CAAA;MAE7F;KACN,CAAA,EAAA,GAnCKA,EAAE,EAmCP;IAER,CAAC;GACC,CAAA,CACG;EACT,CAAA,GAAA,kBAAC,WAAD;GACE,KAAKZ;GACL,UAAU;GACV,cAAYgB,EAAO;GACnB,WAAWV,EAAG,0DAA0DT,IAAiB,SAAS,QAAQ;GAJ5G,UAAA,CAME,kBAAC,UAAD;IACE,MAAK;IACL,eAAe;KAEb,AADAC,EAAkB,EAAK,GACvBM,QAEIF,EAAQ,SAAS,cAA2B,yBAAuB,KACnEA,EAAQ,SAAS,cAAc,QAAQ,CAC3C;IACF;IACA,WAAU;IAVZ,UAAA,CAYE,kBAACe,GAAD;KAAO,MAAK;KAAe,MAAM;IAAK,CAAA,GACrCD,EAAO,QAAQR,CACV;GACP,CAAA,GAAAU,CACM;EACN,CAAA,CAAA;;AAET"}

package/dist/menu/account-menu.d.ts

@@ -0,0 +1,44 @@
+import type { ElementType, ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+export interface AccountMenuItem {
+    label: string;
+    icon?: IconName;
+    /** A link (rendered with `linkAs`, e.g. Next.js `Link`). */
+    href?: string;
+    /** An action instead of a link. */
+    onSelect?: () => void;
+}
+export interface AccountMenuProps {
+    name: string;
+    email?: string;
+    /** Role or plan shown in the header ("Admin"). */
+    role?: string;
+    avatarSrc?: string;
+    /** Profile, settings, billing… */
+    items?: AccountMenuItem[];
+    /** Language choice as a submenu. */
+    locale?: {
+        value: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (value: string) => void;
+    };
+    onSignOut?: () => void;
+    /** Extra content at the end of the menu (e.g. a "Switch organization" item). */
+    children?: ReactNode;
+    /** Link component for items with `href`. */
+    linkAs?: ElementType;
+    labels?: {
+        account?: string;
+        language?: string;
+        signOut?: string;
+    };
+    className?: string;
+}
+/**
+ * The top bar's account trigger (avatar + chevron) and its menu: identity header, items, language and sign out.
+ * Every product's top bar uses it.
+ */
+export declare function AccountMenu({ name, email, role, avatarSrc, items, locale, onSignOut, children, linkAs, labels, className, }: AccountMenuProps): import("react").JSX.Element;

package/dist/menu/account-menu.js

@@ -0,0 +1,78 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { Avatar as n } from "../data-display/avatar.js";
+import { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuHeader as a, DropdownMenuItem as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuSub as u, DropdownMenuSubContent as d, DropdownMenuSubTrigger as f, DropdownMenuTrigger as p } from "./dropdown-menu.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/menu/account-menu.tsx
+function _({ name: _, email: v, role: y, avatarSrc: b, items: x = [], locale: S, onSignOut: C, children: w, linkAs: T, labels: E = {}, className: D }) {
+	return /* @__PURE__ */ g(r, { children: [/* @__PURE__ */ h(p, {
+		asChild: !0,
+		children: /* @__PURE__ */ g("button", {
+			type: "button",
+			className: e("inline-flex cursor-pointer items-center gap-1 rounded-full border-0 bg-transparent p-0.5 pr-1.5 text-fg-muted hover:bg-surface-muted hover:text-fg", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", D),
+			children: [
+				/* @__PURE__ */ h(n, {
+					name: _,
+					src: b,
+					size: "sm"
+				}),
+				/* @__PURE__ */ h("span", {
+					className: "sr-only",
+					children: E.account ?? "account menu"
+				}),
+				/* @__PURE__ */ h(t, {
+					name: "chevron-down",
+					size: 14
+				})
+			]
+		})
+	}), /* @__PURE__ */ g(i, {
+		align: "end",
+		className: "w-72",
+		children: [
+			/* @__PURE__ */ h(a, {
+				name: _,
+				email: v,
+				role: y,
+				avatarSrc: b
+			}),
+			x.map((e) => /* @__PURE__ */ h(o, {
+				icon: e.icon,
+				...e.href ? {
+					href: e.href,
+					linkAs: T
+				} : { onSelect: e.onSelect },
+				children: e.label
+			}, e.label)),
+			S && /* @__PURE__ */ g(u, { children: [/* @__PURE__ */ h(f, {
+				icon: "c-website",
+				children: /* @__PURE__ */ g("span", {
+					className: "flex items-center justify-between gap-3",
+					children: [E.language ?? "Language", /* @__PURE__ */ h("span", {
+						className: "text-xs text-fg-muted",
+						children: S.options.find((e) => e.value === S.value)?.label
+					})]
+				})
+			}), /* @__PURE__ */ h(d, { children: /* @__PURE__ */ h(s, {
+				value: S.value,
+				onValueChange: S.onChange,
+				children: S.options.map((e) => /* @__PURE__ */ h(c, {
+					value: e.value,
+					children: e.label
+				}, e.value))
+			}) })] }),
+			w,
+			C && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(l, {}), /* @__PURE__ */ h(o, {
+				icon: "logout",
+				tone: "danger",
+				onSelect: C,
+				children: E.signOut ?? "Sign out"
+			})] })
+		]
+	})] });
+}
+//#endregion
+export { _ as AccountMenu };
+
+//# sourceMappingURL=account-menu.js.map

package/dist/menu/account-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.js","names":["_Fragment","AccountMenu","DropdownMenu","DropdownMenuTrigger","cx","className","Avatar","avatarSrc","labels","Glyph","DropdownMenuContent","DropdownMenuHeader","items","DropdownMenuItem","i","locale","DropdownMenuSub","DropdownMenuSubTrigger","o","DropdownMenuSubContent","DropdownMenuRadioGroup","DropdownMenuRadioItem","children","onSignOut","Fragment","DropdownMenuSeparator"],"sources":["../../src/menu/account-menu.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport type { IconName } from '../icon/icon';\nimport { Avatar } from '../data-display/avatar';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuHeader,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport interface AccountMenuItem {\n  label: string;\n  icon?: IconName;\n  /** A link (rendered with `linkAs`, e.g. Next.js `Link`). */\n  href?: string;\n  /** An action instead of a link. */\n  onSelect?: () => void;\n}\n\nexport interface AccountMenuProps {\n  name: string;\n  email?: string;\n  /** Role or plan shown in the header (\"Admin\"). */\n  role?: string;\n  avatarSrc?: string;\n  /** Profile, settings, billing… */\n  items?: AccountMenuItem[];\n  /** Language choice as a submenu. */\n  locale?: { value: string; options: { value: string; label: string }[]; onChange: (value: string) => void };\n  onSignOut?: () => void;\n  /** Extra content at the end of the menu (e.g. a \"Switch organization\" item). */\n  children?: ReactNode;\n  /** Link component for items with `href`. */\n  linkAs?: ElementType;\n  labels?: { account?: string; language?: string; signOut?: string };\n  className?: string;\n}\n\n/**\n * The top bar's account trigger (avatar + chevron) and its menu: identity header, items, language and sign out.\n * Every product's top bar uses it.\n */\nexport function AccountMenu({\n  name,\n  email,\n  role,\n  avatarSrc,\n  items = [],\n  locale,\n  onSignOut,\n  children,\n  linkAs,\n  labels = {},\n  className,\n}: AccountMenuProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          className={cx(\n            'inline-flex cursor-pointer items-center gap-1 rounded-full border-0 bg-transparent p-0.5 pr-1.5 text-fg-muted hover:bg-surface-muted hover:text-fg',\n            'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n            className,\n          )}\n        >\n          {/* The avatar names the button (\"Ana Torres\"); the hidden text says what it opens. */}\n          <Avatar name={name} src={avatarSrc} size=\"sm\" />\n          <span className=\"sr-only\">{labels.account ?? 'account menu'}</span>\n          <Glyph name=\"chevron-down\" size={14} />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-72\">\n        <DropdownMenuHeader name={name} email={email} role={role} avatarSrc={avatarSrc} />\n        {items.map((i) => (\n          <DropdownMenuItem key={i.label} icon={i.icon} {...(i.href ? { href: i.href, linkAs } : { onSelect: i.onSelect })}>\n            {i.label}\n          </DropdownMenuItem>\n        ))}\n        {locale && (\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger icon=\"c-website\">\n              <span className=\"flex items-center justify-between gap-3\">\n                {labels.language ?? 'Language'}\n                <span className=\"text-xs text-fg-muted\">\n                  {locale.options.find((o) => o.value === locale.value)?.label}\n                </span>\n              </span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={locale.value} onValueChange={locale.onChange}>\n                {locale.options.map((o) => (\n                  <DropdownMenuRadioItem key={o.value} value={o.value}>\n                    {o.label}\n                  </DropdownMenuRadioItem>\n                ))}\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        )}\n        {children}\n        {onSignOut && (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem icon=\"logout\" tone=\"danger\" onSelect={onSignOut}>\n              {labels.signOut ?? 'Sign out'}\n            </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;AAqDA,SAAgBC,EAAY,EAC1B,SACA,UACA,SACA,cACA,WAAQ,CAAC,GACT,WACA,cACA,aACA,WACA,YAAS,CAAC,GACV,gBACmB;CACnB,OACE,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD;EAAqB,SAAA;EACnB,UAAA,kBAAC,UAAD;GACE,MAAK;GACL,WAAWC,EACT,sJACA,sFACAC,CACF;GANF,UAAA;IASE,kBAACC,GAAD;KAAc;KAAM,KAAKC;KAAW,MAAK;IAAM,CAAA;IAC/C,kBAAC,QAAD;KAAM,WAAU;KAAW,UAAAC,EAAO,WAAW;IAAqB,CAAA;IAClE,kBAACC,GAAD;KAAO,MAAK;KAAe,MAAM;IAAK,CAAA;GAChC;;CACW,CAAA,GACrB,kBAACC,GAAD;EAAqB,OAAM;EAAM,WAAU;EAA3C,UAAA;GACE,kBAACC,GAAD;IAA0B;IAAa;IAAa;IAAiB;GAAY,CAAA;GAChFC,EAAM,KAAK,MACV,kBAACC,GAAD;IAAgC,MAAMC,EAAE;IAAM,GAAKA,EAAE,OAAO;KAAE,MAAMA,EAAE;KAAM;IAAO,IAAI,EAAE,UAAUA,EAAE,SAAS;IAC3G,UAAAA,EAAE;GACa,GAFKA,EAAE,KAEP,CACnB;GACAC,KACC,kBAACC,GAAD,EAAA,UAAA,CACE,kBAACC,GAAD;IAAwB,MAAK;IAC3B,UAAA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACGT,EAAO,YAAY,YACpB,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAO,EAAO,QAAQ,MAAM,MAAMG,EAAE,UAAUH,EAAO,KAAK,CAAC,EAAE;KACnD,CAAA,CACF;;GACgB,CAAA,GACxB,kBAACI,GAAD,EAAA,UACE,kBAACC,GAAD;IAAwB,OAAOL,EAAO;IAAO,eAAeA,EAAO;IAChE,UAAAA,EAAO,QAAQ,KAAK,MACnB,kBAACM,GAAD;KAAqC,OAAOH,EAAE;KAC3C,UAAAA,EAAE;IACkB,GAFKA,EAAE,KAEP,CACxB;GACqB,CAAA,EACF,CAAA,CACT,EAAA,CAAA;GAElBI;GACAC,KACC,kBAAAvB,GAAA,EAAA,UAAA,CACE,kBAACyB,GAAD,CAAwB,CAAA,GACxB,kBAACZ,GAAD;IAAkB,MAAK;IAAS,MAAK;IAAS,UAAUU;IACrD,UAAAf,EAAO,WAAW;GACH,CAAA,CAClB,EAAA,CAAA;EAEe;CACT,CAAA,CAAA,EAAA,CAAA;AAElB"}

package/dist/menu/context-menu.d.ts

@@ -0,0 +1,31 @@
+import * as Primitive from '@radix-ui/react-context-menu';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/**
+ * Right-click (or long-press on touch) menu for an area: rows, cards, canvas nodes.
+ * Always offer the same actions elsewhere (a "More" DropdownMenu): context menus are hidden.
+ */
+export declare const ContextMenu: import("react").FC<Primitive.ContextMenuProps>;
+/** The area that opens the menu on right-click / long-press. */
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function ContextMenuContent({ className, collisionPadding, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Content>): import("react").JSX.Element;
+interface ItemExtras {
+    icon?: IconName;
+    /** Keyboard shortcut hint, e.g. `⌘D`. */
+    shortcut?: string;
+    tone?: 'default' | 'danger';
+    children: ReactNode;
+}
+export declare function ContextMenuItem({ icon, shortcut, tone, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras): import("react").JSX.Element;
+export declare function ContextMenuCheckboxItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): import("react").JSX.Element;
+export declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ContextMenuRadioItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): import("react").JSX.Element;
+export declare function ContextMenuLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>): import("react").JSX.Element;
+export declare function ContextMenuSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>): import("react").JSX.Element;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<Primitive.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSub: import("react").FC<Primitive.ContextMenuSubProps>;
+export declare function ContextMenuSubTrigger({ icon, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & {
+    icon?: IconName;
+}): import("react").JSX.Element;
+export declare function ContextMenuSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>): import("react").JSX.Element;
+export {};

package/dist/menu/context-menu.js

@@ -0,0 +1,111 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { menuContent as r, menuIndicatorSlot as i, menuItem as a, menuLabel as o, menuSeparator as s } from "./menu-styles.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-context-menu";
+//#region src/menu/context-menu.tsx
+var d = u.Root, f = u.Trigger;
+function p({ className: t, collisionPadding: n = 16, ...i }) {
+	return /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Content, {
+		collisionPadding: n,
+		className: e(r, "[--kf-menu-max-h:var(--radix-context-menu-content-available-height)]", t),
+		...i
+	}) });
+}
+function m({ icon: n, shortcut: r, tone: i = "default", className: o, children: s, ...d }) {
+	return /* @__PURE__ */ l(u.Item, {
+		className: e(a, i === "danger" && "text-danger-fg data-[highlighted]:bg-danger-surface", o),
+		...d,
+		children: [
+			n && /* @__PURE__ */ c(t, {
+				name: n,
+				size: 20,
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: s
+			}),
+			r && /* @__PURE__ */ c("span", {
+				className: "ml-auto pl-4 font-mono text-xs text-fg-muted",
+				children: r
+			})
+		]
+	});
+}
+function h({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ l(u.CheckboxItem, {
+		className: e(a, i, t),
+		...o,
+		children: [/* @__PURE__ */ c(u.ItemIndicator, {
+			className: "absolute left-2.5 inline-flex text-link",
+			children: /* @__PURE__ */ c(n, {
+				name: "check",
+				size: 16
+			})
+		}), r]
+	});
+}
+var g = u.RadioGroup;
+function _({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ l(u.RadioItem, {
+		className: e(a, i, t),
+		...o,
+		children: [/* @__PURE__ */ c(u.ItemIndicator, {
+			className: "absolute left-3 inline-flex text-link",
+			children: /* @__PURE__ */ c(n, {
+				name: "dot",
+				size: 14
+			})
+		}), r]
+	});
+}
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Label, {
+		className: e(o, t),
+		...n
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Separator, {
+		className: e(s, t),
+		...n
+	});
+}
+var b = u.Group, x = u.Sub;
+function S({ icon: r, className: i, children: o, ...s }) {
+	return /* @__PURE__ */ l(u.SubTrigger, {
+		className: e(a, i),
+		...s,
+		children: [
+			r && /* @__PURE__ */ c(t, {
+				name: r,
+				size: 20,
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "flex-1",
+				children: o
+			}),
+			/* @__PURE__ */ c(n, {
+				name: "chevron-right",
+				size: 16,
+				className: "text-fg-muted"
+			})
+		]
+	});
+}
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.SubContent, {
+		sideOffset: 4,
+		collisionPadding: 16,
+		className: e(r, t),
+		...n
+	}) });
+}
+//#endregion
+export { d as ContextMenu, h as ContextMenuCheckboxItem, p as ContextMenuContent, b as ContextMenuGroup, m as ContextMenuItem, v as ContextMenuLabel, g as ContextMenuRadioGroup, _ as ContextMenuRadioItem, y as ContextMenuSeparator, x as ContextMenuSub, C as ContextMenuSubContent, S as ContextMenuSubTrigger, f as ContextMenuTrigger };
+
+//# sourceMappingURL=context-menu.js.map

package/dist/menu/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","names":["Primitive","ContextMenu","ContextMenuTrigger","ContextMenuContent","rest","cx","menuContent","className","ContextMenuItem","menuItem","tone","icon","Icon","shortcut","ContextMenuCheckboxItem","menuIndicatorSlot","Glyph","children","ContextMenuRadioGroup","ContextMenuRadioItem","ContextMenuLabel","menuLabel","ContextMenuSeparator","menuSeparator","ContextMenuGroup","ContextMenuSub","ContextMenuSubTrigger","ContextMenuSubContent"],"sources":["../../src/menu/context-menu.tsx"],"sourcesContent":["// Shares its item components' structure with the other menu files (dropdown-menu, context-menu, menubar): keep them in sync.\n'use client';\n\nimport * as Primitive from '@radix-ui/react-context-menu';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Glyph } from '../lib/glyphs';\nimport {\n  menuContent,\n  menuIndicatorSlot,\n  menuItem,\n  menuItemDanger,\n  menuLabel,\n  menuSeparator,\n  menuShortcut,\n} from './menu-styles';\n\n/**\n * Right-click (or long-press on touch) menu for an area: rows, cards, canvas nodes.\n * Always offer the same actions elsewhere (a \"More\" DropdownMenu): context menus are hidden.\n */\nexport const ContextMenu = Primitive.Root;\n/** The area that opens the menu on right-click / long-press. */\nexport const ContextMenuTrigger = Primitive.Trigger;\n\nexport function ContextMenuContent({\n  className,\n  collisionPadding = 16,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Content>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        collisionPadding={collisionPadding}\n        className={cx(menuContent, '[--kf-menu-max-h:var(--radix-context-menu-content-available-height)]', className)}\n        {...rest}\n      />\n    </Primitive.Portal>\n  );\n}\n\ninterface ItemExtras {\n  icon?: IconName;\n  /** Keyboard shortcut hint, e.g. `⌘D`. */\n  shortcut?: string;\n  tone?: 'default' | 'danger';\n  children: ReactNode;\n}\n\nexport function ContextMenuItem({\n  icon,\n  shortcut,\n  tone = 'default',\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras) {\n  return (\n    <Primitive.Item className={cx(menuItem, tone === 'danger' && menuItemDanger, className)} {...rest}>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {shortcut && <span className={menuShortcut}>{shortcut}</span>}\n    </Primitive.Item>\n  );\n}\n\nexport function ContextMenuCheckboxItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>) {\n  return (\n    <Primitive.CheckboxItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-2.5 inline-flex text-link\">\n        <Glyph name=\"check\" size={16} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.CheckboxItem>\n  );\n}\n\nexport const ContextMenuRadioGroup = Primitive.RadioGroup;\n\nexport function ContextMenuRadioItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.RadioItem>) {\n  return (\n    <Primitive.RadioItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-3 inline-flex text-link\">\n        <Glyph name=\"dot\" size={14} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.RadioItem>\n  );\n}\n\nexport function ContextMenuLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>) {\n  return <Primitive.Label className={cx(menuLabel, className)} {...rest} />;\n}\n\nexport function ContextMenuSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>) {\n  return <Primitive.Separator className={cx(menuSeparator, className)} {...rest} />;\n}\n\nexport const ContextMenuGroup = Primitive.Group;\nexport const ContextMenuSub = Primitive.Sub;\n\nexport function ContextMenuSubTrigger({\n  icon,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & { icon?: IconName }) {\n  return (\n    <Primitive.SubTrigger className={cx(menuItem, className)} {...rest}>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"flex-1\">{children}</span>\n      <Glyph name=\"chevron-right\" size={16} className=\"text-fg-muted\" />\n    </Primitive.SubTrigger>\n  );\n}\n\nexport function ContextMenuSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.SubContent sideOffset={4} collisionPadding={16} className={cx(menuContent, className)} {...rest} />\n    </Primitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;AAsBA,IAAaC,IAAcD,EAAU,MAExBE,IAAqBF,EAAU;AAE5C,SAAgBG,EAAmB,EACjC,cACA,sBAAmB,IACnB,GAAGC,KACkD;CACrD,OACE,kBAACJ,EAAU,QAAX,EAAA,UACE,kBAACA,EAAU,SAAX;EACoB;EAClB,WAAWK,EAAGC,GAAa,wEAAwEC,CAAS;EAC5G,GAAIH;CACL,CAAA,EACe,CAAA;AAEtB;AAUA,SAAgBI,EAAgB,EAC9B,SACA,aACA,UAAO,WACP,cACA,aACA,GAAGJ,KAC4D;CAC/D,OACE,kBAACJ,EAAU,MAAX;EAAgB,WAAWK,EAAGI,GAAUC,MAAS,YAAA,uDAA4BH,CAAS;EAAG,GAAIH;EAA7F,UAAA;GACGO,KAAQ,kBAACC,GAAD;IAAM,MAAMD;IAAM,MAAM;IAAI,WAAU;GAAY,CAAA;GAC3D,kBAAC,QAAD;IAAM,WAAU;IAA2B;GAAe,CAAA;GACzDE,KAAY,kBAAC,QAAD;IAAM,WAAA;IAA0B,UAAAA;GAAe,CAAA;EAC9C;;AAEpB;AAEA,SAAgBC,EAAwB,EACtC,cACA,aACA,GAAGV,KACuD;CAC1D,OACE,kBAACJ,EAAU,cAAX;EAAwB,WAAWK,EAAGI,GAAUM,GAAmBR,CAAS;EAAG,GAAIH;EAAnF,UAAA,CACE,kBAACJ,EAAU,eAAX;GAAyB,WAAU;GACjC,UAAA,kBAACgB,GAAD;IAAO,MAAK;IAAQ,MAAM;GAAK,CAAA;EACR,CAAA,GACxBC,CACqB;;AAE5B;AAEA,IAAaC,IAAwBlB,EAAU;AAE/C,SAAgBmB,EAAqB,EACnC,cACA,aACA,GAAGf,KACoD;CACvD,OACE,kBAACJ,EAAU,WAAX;EAAqB,WAAWK,EAAGI,GAAUM,GAAmBR,CAAS;EAAG,GAAIH;EAAhF,UAAA,CACE,kBAACJ,EAAU,eAAX;GAAyB,WAAU;GACjC,UAAA,kBAACgB,GAAD;IAAO,MAAK;IAAM,MAAM;GAAK,CAAA;EACN,CAAA,GACxBC,CACkB;;AAEzB;AAEA,SAAgBG,EAAiB,EAAE,cAAW,GAAGhB,KAA0D;CACzG,OAAO,kBAACJ,EAAU,OAAX;EAAiB,WAAWK,EAAGgB,GAAWd,CAAS;EAAG,GAAIH;CAAO,CAAA;AAC1E;AAEA,SAAgBkB,EAAqB,EAAE,cAAW,GAAGlB,KAA8D;CACjH,OAAO,kBAACJ,EAAU,WAAX;EAAqB,WAAWK,EAAGkB,GAAehB,CAAS;EAAG,GAAIH;CAAO,CAAA;AAClF;AAEA,IAAaoB,IAAmBxB,EAAU,OAC7ByB,IAAiBzB,EAAU;AAExC,SAAgB0B,EAAsB,EACpC,SACA,cACA,aACA,GAAGtB,KAC2E;CAC9E,OACE,kBAACJ,EAAU,YAAX;EAAsB,WAAWK,EAAGI,GAAUF,CAAS;EAAG,GAAIH;EAA9D,UAAA;GACGO,KAAQ,kBAACC,GAAD;IAAM,MAAMD;IAAM,MAAM;IAAI,WAAU;GAAY,CAAA;GAC3D,kBAAC,QAAD;IAAM,WAAU;IAAU;GAAe,CAAA;GACzC,kBAACK,GAAD;IAAO,MAAK;IAAgB,MAAM;IAAI,WAAU;GAAiB,CAAA;EAC7C;;AAE1B;AAEA,SAAgBW,EAAsB,EAAE,cAAW,GAAGvB,KAA+D;CACnH,OACE,kBAACJ,EAAU,QAAX,EAAA,UACE,kBAACA,EAAU,YAAX;EAAsB,YAAY;EAAG,kBAAkB;EAAI,WAAWK,EAAGC,GAAaC,CAAS;EAAG,GAAIH;CAAO,CAAA,EAC7F,CAAA;AAEtB"}

package/dist/menu/dropdown-menu.d.ts

@@ -0,0 +1,49 @@
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/**
+ * Menu of actions or options opened from a button ("More", user menu, row actions).
+ * Keyboard: arrows, type-ahead, Escape. On touch screens items grow to 44px.
+ */
+export declare const DropdownMenu: import("react").FC<Primitive.DropdownMenuProps>;
+/** Use `asChild` with a Button or icon button (with `aria-label`). */
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function DropdownMenuContent({ className, sideOffset, align, collisionPadding, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Content>): import("react").JSX.Element;
+interface ItemExtras {
+    icon?: IconName;
+    /** Renders the item as a link (keyboard and screen readers treat it as a menu item that navigates). */
+    href?: string;
+    /** Link component for `href` (e.g. Next.js `Link`). */
+    linkAs?: ElementType;
+    /** Keyboard shortcut hint, e.g. `⌘D`. */
+    shortcut?: string;
+    tone?: 'default' | 'danger';
+    children: ReactNode;
+}
+export declare function DropdownMenuItem({ icon, shortcut, tone, href, linkAs: Link, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras): import("react").JSX.Element;
+export declare function DropdownMenuCheckboxItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): import("react").JSX.Element;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function DropdownMenuRadioItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>): import("react").JSX.Element;
+export interface DropdownMenuHeaderProps {
+    name: string;
+    email?: string;
+    /** Role or plan shown as a small tag ("Admin"). */
+    role?: string;
+    /** Photo URL; initials otherwise. */
+    avatarSrc?: string;
+    className?: string;
+}
+/**
+ * Identity band at the top of an account menu: avatar, name, email and role on the brand color.
+ * Not focusable; put it first inside `DropdownMenuContent`.
+ */
+export declare function DropdownMenuHeader({ name, email, role, avatarSrc, className }: DropdownMenuHeaderProps): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>): import("react").JSX.Element;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: import("react").FC<Primitive.DropdownMenuSubProps>;
+export declare function DropdownMenuSubTrigger({ icon, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & {
+    icon?: IconName;
+}): import("react").JSX.Element;
+export declare function DropdownMenuSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>): import("react").JSX.Element;
+export {};

package/dist/menu/dropdown-menu.js

@@ -0,0 +1,152 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { Avatar as r } from "../data-display/avatar.js";
+import { menuContent as i, menuIndicatorSlot as a, menuItem as o, menuLabel as s, menuSeparator as c } from "./menu-styles.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-dropdown-menu";
+//#region src/menu/dropdown-menu.tsx
+var p = f.Root, m = f.Trigger;
+function h({ className: t, sideOffset: n = 6, align: r = "start", collisionPadding: a = 16, ...o }) {
+	return /* @__PURE__ */ u(f.Portal, { children: /* @__PURE__ */ u(f.Content, {
+		sideOffset: n,
+		align: r,
+		collisionPadding: a,
+		className: e(i, "[--kf-menu-max-h:var(--radix-dropdown-menu-content-available-height)]", t),
+		...o
+	}) });
+}
+function g({ icon: n, shortcut: r, tone: i = "default", href: a, linkAs: s = "a", className: c, children: p, ...m }) {
+	let h = /* @__PURE__ */ d(l, { children: [
+		n && /* @__PURE__ */ u(t, {
+			name: n,
+			size: 20,
+			className: "shrink-0"
+		}),
+		/* @__PURE__ */ u("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: p
+		}),
+		r && /* @__PURE__ */ u("span", {
+			className: "ml-auto pl-4 font-mono text-xs text-fg-muted",
+			children: r
+		})
+	] }), g = e(o, i === "danger" && "text-danger-fg data-[highlighted]:bg-danger-surface", "no-underline", c);
+	return a ? /* @__PURE__ */ u(f.Item, {
+		asChild: !0,
+		className: g,
+		...m,
+		children: /* @__PURE__ */ u(s, {
+			href: a,
+			children: h
+		})
+	}) : /* @__PURE__ */ u(f.Item, {
+		className: g,
+		...m,
+		children: h
+	});
+}
+function _({ className: t, children: r, ...i }) {
+	return /* @__PURE__ */ d(f.CheckboxItem, {
+		className: e(o, a, t),
+		...i,
+		children: [/* @__PURE__ */ u(f.ItemIndicator, {
+			className: "absolute left-2.5 inline-flex text-link",
+			children: /* @__PURE__ */ u(n, {
+				name: "check",
+				size: 16
+			})
+		}), r]
+	});
+}
+var v = f.RadioGroup;
+function y({ className: t, children: r, ...i }) {
+	return /* @__PURE__ */ d(f.RadioItem, {
+		className: e(o, a, t),
+		...i,
+		children: [/* @__PURE__ */ u(f.ItemIndicator, {
+			className: "absolute left-3 inline-flex text-link",
+			children: /* @__PURE__ */ u(n, {
+				name: "dot",
+				size: 14
+			})
+		}), r]
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ u(f.Label, {
+		className: e(s, t),
+		...n
+	});
+}
+function x({ name: t, email: n, role: i, avatarSrc: a, className: o }) {
+	return /* @__PURE__ */ d(f.Label, {
+		"data-theme": "dark",
+		className: e("-m-1 mb-1 flex items-center gap-3 rounded-t-md bg-primary-strong px-3.5 py-3.5 text-fg", o),
+		children: [/* @__PURE__ */ u(r, {
+			name: t,
+			src: a,
+			size: "md",
+			className: "ring-2 ring-white/30",
+			decorative: !0
+		}), /* @__PURE__ */ d("span", {
+			className: "grid min-w-0 gap-0.5",
+			children: [
+				/* @__PURE__ */ u("span", {
+					className: "truncate text-sm font-semibold",
+					children: t
+				}),
+				n && /* @__PURE__ */ u("span", {
+					className: "truncate text-xs text-fg-muted",
+					children: n
+				}),
+				i && /* @__PURE__ */ u("span", {
+					className: "mt-1 w-fit rounded-full bg-white/15 px-2 py-0.5 text-[11px] font-semibold tracking-wide uppercase",
+					children: i
+				})
+			]
+		})]
+	});
+}
+function S({ className: t, ...n }) {
+	return /* @__PURE__ */ u(f.Separator, {
+		className: e(c, t),
+		...n
+	});
+}
+var C = f.Group, w = f.Sub;
+function T({ icon: r, className: i, children: a, ...s }) {
+	return /* @__PURE__ */ d(f.SubTrigger, {
+		className: e(o, i),
+		...s,
+		children: [
+			r && /* @__PURE__ */ u(t, {
+				name: r,
+				size: 20,
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ u("span", {
+				className: "flex-1",
+				children: a
+			}),
+			/* @__PURE__ */ u(n, {
+				name: "chevron-right",
+				size: 16,
+				className: "text-fg-muted"
+			})
+		]
+	});
+}
+function E({ className: t, ...n }) {
+	return /* @__PURE__ */ u(f.Portal, { children: /* @__PURE__ */ u(f.SubContent, {
+		sideOffset: 4,
+		collisionPadding: 16,
+		className: e(i, t),
+		...n
+	}) });
+}
+//#endregion
+export { p as DropdownMenu, _ as DropdownMenuCheckboxItem, h as DropdownMenuContent, C as DropdownMenuGroup, x as DropdownMenuHeader, g as DropdownMenuItem, b as DropdownMenuLabel, v as DropdownMenuRadioGroup, y as DropdownMenuRadioItem, S as DropdownMenuSeparator, w as DropdownMenuSub, E as DropdownMenuSubContent, T as DropdownMenuSubTrigger, m as DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/menu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["_Fragment","Primitive","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","rest","cx","menuContent","className","DropdownMenuItem","Link","content","Fragment","icon","Icon","shortcut","classes","menuItem","tone","href","DropdownMenuCheckboxItem","menuIndicatorSlot","Glyph","children","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuLabel","menuLabel","DropdownMenuHeader","Avatar","avatarSrc","name","email","role","DropdownMenuSeparator","menuSeparator","DropdownMenuGroup","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuSubContent"],"sources":["../../src/menu/dropdown-menu.tsx"],"sourcesContent":["// Shares its item components' structure with the other menu files (dropdown-menu, context-menu, menubar): keep them in sync.\n'use client';\n\nimport * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Glyph } from '../lib/glyphs';\nimport { Avatar } from '../data-display/avatar';\nimport {\n  menuContent,\n  menuIndicatorSlot,\n  menuItem,\n  menuItemDanger,\n  menuLabel,\n  menuSeparator,\n  menuShortcut,\n} from './menu-styles';\n\n/**\n * Menu of actions or options opened from a button (\"More\", user menu, row actions).\n * Keyboard: arrows, type-ahead, Escape. On touch screens items grow to 44px.\n */\nexport const DropdownMenu = Primitive.Root;\n/** Use `asChild` with a Button or icon button (with `aria-label`). */\nexport const DropdownMenuTrigger = Primitive.Trigger;\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  align = 'start',\n  collisionPadding = 16,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Content>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        sideOffset={sideOffset}\n        align={align}\n        collisionPadding={collisionPadding}\n        className={cx(menuContent, '[--kf-menu-max-h:var(--radix-dropdown-menu-content-available-height)]', className)}\n        {...rest}\n      />\n    </Primitive.Portal>\n  );\n}\n\ninterface ItemExtras {\n  icon?: IconName;\n  /** Renders the item as a link (keyboard and screen readers treat it as a menu item that navigates). */\n  href?: string;\n  /** Link component for `href` (e.g. Next.js `Link`). */\n  linkAs?: ElementType;\n  /** Keyboard shortcut hint, e.g. `⌘D`. */\n  shortcut?: string;\n  tone?: 'default' | 'danger';\n  children: ReactNode;\n}\n\nexport function DropdownMenuItem({\n  icon,\n  shortcut,\n  tone = 'default',\n  href,\n  linkAs: Link = 'a',\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras) {\n  const content = (\n    <>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {shortcut && <span className={menuShortcut}>{shortcut}</span>}\n    </>\n  );\n  const classes = cx(menuItem, tone === 'danger' && menuItemDanger, 'no-underline', className);\n  if (href) {\n    return (\n      <Primitive.Item asChild className={classes} {...rest}>\n        <Link href={href}>{content}</Link>\n      </Primitive.Item>\n    );\n  }\n  return (\n    <Primitive.Item className={classes} {...rest}>\n      {content}\n    </Primitive.Item>\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>) {\n  return (\n    <Primitive.CheckboxItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-2.5 inline-flex text-link\">\n        <Glyph name=\"check\" size={16} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.CheckboxItem>\n  );\n}\n\nexport const DropdownMenuRadioGroup = Primitive.RadioGroup;\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.RadioItem>) {\n  return (\n    <Primitive.RadioItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-3 inline-flex text-link\">\n        <Glyph name=\"dot\" size={14} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>) {\n  return <Primitive.Label className={cx(menuLabel, className)} {...rest} />;\n}\n\nexport interface DropdownMenuHeaderProps {\n  name: string;\n  email?: string;\n  /** Role or plan shown as a small tag (\"Admin\"). */\n  role?: string;\n  /** Photo URL; initials otherwise. */\n  avatarSrc?: string;\n  className?: string;\n}\n\n/**\n * Identity band at the top of an account menu: avatar, name, email and role on the brand color.\n * Not focusable; put it first inside `DropdownMenuContent`.\n */\nexport function DropdownMenuHeader({ name, email, role, avatarSrc, className }: DropdownMenuHeaderProps) {\n  return (\n    <Primitive.Label\n      data-theme=\"dark\"\n      className={cx('-m-1 mb-1 flex items-center gap-3 rounded-t-md bg-primary-strong px-3.5 py-3.5 text-fg', className)}\n    >\n      <Avatar name={name} src={avatarSrc} size=\"md\" className=\"ring-2 ring-white/30\" decorative />\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span className=\"truncate text-sm font-semibold\">{name}</span>\n        {email && <span className=\"truncate text-xs text-fg-muted\">{email}</span>}\n        {role && (\n          <span className=\"mt-1 w-fit rounded-full bg-white/15 px-2 py-0.5 text-[11px] font-semibold tracking-wide uppercase\">\n            {role}\n          </span>\n        )}\n      </span>\n    </Primitive.Label>\n  );\n}\n\nexport function DropdownMenuSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>) {\n  return <Primitive.Separator className={cx(menuSeparator, className)} {...rest} />;\n}\n\nexport const DropdownMenuGroup = Primitive.Group;\nexport const DropdownMenuSub = Primitive.Sub;\n\nexport function DropdownMenuSubTrigger({\n  icon,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & { icon?: IconName }) {\n  return (\n    <Primitive.SubTrigger className={cx(menuItem, className)} {...rest}>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"flex-1\">{children}</span>\n      <Glyph name=\"chevron-right\" size={16} className=\"text-fg-muted\" />\n    </Primitive.SubTrigger>\n  );\n}\n\nexport function DropdownMenuSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.SubContent sideOffset={4} collisionPadding={16} className={cx(menuContent, className)} {...rest} />\n    </Primitive.Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/menu/menu-styles.d.ts

@@ -0,0 +1,8 @@
+/** Shared classes for DropdownMenu, ContextMenu and Menubar. Items grow to 44px on touch screens. */
+export declare const menuContent = "kf-menu z-50 min-w-[12rem] max-w-[calc(100vw-2rem)] overflow-y-auto rounded-md border border-border bg-surface p-1 font-sans text-fg shadow-overlay focus:outline-none max-h-[var(--kf-menu-max-h)]";
+export declare const menuItem: string;
+export declare const menuItemDanger = "text-danger-fg data-[highlighted]:bg-danger-surface";
+export declare const menuIndicatorSlot = "pl-8";
+export declare const menuLabel = "px-2.5 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase";
+export declare const menuSeparator = "my-1 h-px bg-border";
+export declare const menuShortcut = "ml-auto pl-4 font-mono text-xs text-fg-muted";

package/dist/menu/menu-styles.js

@@ -0,0 +1,6 @@
+//#region src/menu/menu-styles.ts
+var e = "kf-menu z-50 min-w-[12rem] max-w-[calc(100vw-2rem)] overflow-y-auto rounded-md border border-border bg-surface p-1 font-sans text-fg shadow-overlay focus:outline-none max-h-[var(--kf-menu-max-h)]", t = "relative flex min-h-9 cursor-pointer select-none items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-sm outline-none pointer-coarse:min-h-11 data-[highlighted]:bg-surface-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[state=open]:bg-surface-muted", n = "text-danger-fg data-[highlighted]:bg-danger-surface", r = "pl-8", i = "px-2.5 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase", a = "my-1 h-px bg-border", o = "ml-auto pl-4 font-mono text-xs text-fg-muted";
+//#endregion
+export { e as menuContent, r as menuIndicatorSlot, t as menuItem, n as menuItemDanger, i as menuLabel, a as menuSeparator, o as menuShortcut };
+
+//# sourceMappingURL=menu-styles.js.map

package/dist/menu/menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-styles.js","names":["menuContent","menuItem","menuItemDanger","menuIndicatorSlot","menuLabel","menuSeparator","menuShortcut"],"sources":["../../src/menu/menu-styles.ts"],"sourcesContent":["/** Shared classes for DropdownMenu, ContextMenu and Menubar. Items grow to 44px on touch screens. */\nexport const menuContent =\n  'kf-menu z-50 min-w-[12rem] max-w-[calc(100vw-2rem)] overflow-y-auto rounded-md border border-border bg-surface p-1 font-sans text-fg shadow-overlay focus:outline-none max-h-[var(--kf-menu-max-h)]';\n\nexport const menuItem =\n  'relative flex min-h-9 cursor-pointer select-none items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-sm outline-none pointer-coarse:min-h-11 ' +\n  'data-[highlighted]:bg-surface-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[state=open]:bg-surface-muted';\n\nexport const menuItemDanger = 'text-danger-fg data-[highlighted]:bg-danger-surface';\nexport const menuIndicatorSlot = 'pl-8';\nexport const menuLabel = 'px-2.5 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase';\nexport const menuSeparator = 'my-1 h-px bg-border';\nexport const menuShortcut = 'ml-auto pl-4 font-mono text-xs text-fg-muted';\n"],"mappings":";AACA,IAAaA,IACX,uMAEWC,IACX,qRAGWC,IAAiB,uDACjBC,IAAoB,QACpBC,IAAY,gFACZC,IAAgB,uBAChBC,IAAe"}