@krizaka/ui 3.3.0 → 3.4.0

package/dist/page-hero.js

@@ -1,12 +1,12 @@
-import {
-  Page
-} from "./chunk-DGQMDJXK.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
 import {
   ArrowGlyph
 } from "./chunk-XCBVFMNV.js";
+import {
+  Page
+} from "./chunk-DGQMDJXK.js";
 import {
   SectionBackdrop
 } from "./chunk-XVLWVTQA.js";

package/dist/stat.d.ts

@@ -20,6 +20,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, undefined, {
     trend: {
         up: {
@@ -39,6 +40,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, tailwind_variants.TVReturnTypeLike<{
     trend: {
         up: {
@@ -58,6 +60,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }>>;
 type StatTrend = "up" | "down" | "flat";
 type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
@@ -71,7 +74,33 @@ type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
     trend?: StatTrend;
     /** The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. */
     trendLabel?: React.ReactNode;
+    /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */
+    chart?: React.ReactNode;
 };
-declare function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps): React.JSX.Element;
+declare function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps): React.JSX.Element;
+declare const statGrid: tailwind_variants.TVReturnType<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1", {
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined>>;
+type StatGridProps = React.ComponentProps<"div"> & {
+    /** Hairlines between the stats (default) or space only. */
+    divided?: boolean;
+    /** The narrowest a stat may be before the row wraps, in rem. Default 11. */
+    minWidth?: number;
+};
+/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */
+declare function StatGrid({ divided, minWidth, className, style, ...props }: StatGridProps): React.JSX.Element;
 
-export { Stat, type StatProps, type StatTrend, stat };
+export { Stat, StatGrid, type StatGridProps, type StatProps, type StatTrend, stat, statGrid };

package/dist/stat.js

@@ -10,7 +10,8 @@ var stat = tv({
     // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries
     // the direction's colour.
     trend: "inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0",
-    hint: "text-fg-secondary"
+    hint: "text-fg-secondary",
+    chart: "mt-2 h-10 w-full min-w-0"
   },
   variants: {
     trend: {
@@ -21,7 +22,7 @@ var stat = tv({
   }
 });
 var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
-function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
+function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }) {
   const s = stat({ trend });
   return /* @__PURE__ */ jsxs("div", { "data-trend": trend, className: s.root({ className }), ...props, children: [
     /* @__PURE__ */ jsx("p", { className: s.label(), children: label }),
@@ -32,11 +33,27 @@ function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
         trendLabel
       ] }),
       hint && /* @__PURE__ */ jsx("span", { className: s.hint(), children: hint })
-    ] })
+    ] }),
+    chart ? /* @__PURE__ */ jsx("div", { className: s.chart(), children: chart }) : null
   ] });
 }
+var statGrid = tv({
+  base: "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1",
+  variants: {
+    divided: {
+      true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5",
+      false: "gap-6 p-5"
+    }
+  },
+  defaultVariants: { divided: true }
+});
+function StatGrid({ divided, minWidth = 11, className, style, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: statGrid({ divided, className }), style: { ...style, ["--kz-stat-min"]: `${minWidth}rem` }, ...props });
+}
 export {
   Stat,
-  stat
+  StatGrid,
+  stat,
+  statGrid
 };
 //# sourceMappingURL=stat.js.map

package/dist/stat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA2Cb,cAKM,YALN;AAzCC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAezH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,WAAW,GAAG,MAAM,GAAc;AAC9F,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}

package/dist/tree-view.d.ts

@@ -0,0 +1,111 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const treeView: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            toggle?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    group: string;
+    row: string;
+    toggle: string;
+    icon: string;
+    label: string;
+    meta: string;
+}>>;
+type TreeNode = {
+    /** A stable id. */
+    id: string;
+    /** Its name — passed translated. */
+    label: string;
+    /** A decorative icon before the name. */
+    icon?: React.ReactNode;
+    /** A detail after the name (a count, a size). */
+    meta?: React.ReactNode;
+    /** Its children; `undefined` for a leaf. With `hasChildren`, they load when it opens (`onLoadChildren`). */
+    children?: readonly TreeNode[];
+    /** A branch whose children are not loaded yet. */
+    hasChildren?: boolean;
+    /** Cannot be selected. */
+    disabled?: boolean;
+};
+type TreeViewProps = {
+    /** The roots. */
+    nodes: readonly TreeNode[];
+    /** The tree's accessible name (“Documentation”). */
+    "aria-label": string;
+    /** The ids of the open branches (controlled). */
+    expanded?: readonly string[];
+    /** The ids open at first, uncontrolled. */
+    defaultExpanded?: readonly string[];
+    /** Called with the open branches. */
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The selected node (controlled). */
+    selected?: string | null;
+    /** The selected node at first, uncontrolled. */
+    defaultSelected?: string | null;
+    /** Called when a node is chosen (click, Enter or Space): navigate, open the file. */
+    onSelect?: (node: TreeNode) => void;
+    /** Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`. */
+    onLoadChildren?: (node: TreeNode) => void;
+    /** The words of a branch that is loading (“Loading”). */
+    loadingLabel?: string;
+    /** Classes merged on the tree. */
+    className?: string;
+};
+/**
+ * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→
+ * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.
+ */
+declare function TreeView({ nodes, "aria-label": label, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelect, onLoadChildren, loadingLabel, className, }: TreeViewProps): React.JSX.Element;
+
+export { type TreeNode, TreeView, type TreeViewProps, treeView };

package/dist/tree-view.js

@@ -0,0 +1,154 @@
+"use client";
+import {
+  useControllable
+} from "./chunk-BRKMQ6JV.js";
+import {
+  ChevronGlyph
+} from "./chunk-CPA5CF35.js";
+
+// src/tree-view/tree-view.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var treeView = tv({
+  slots: {
+    root: "m-0 list-none p-0 text-sm",
+    group: "m-0 list-none p-0",
+    row: "flex min-h-8 cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-fg outline-hidden hover:bg-surface-2 data-[selected]:bg-accent-soft data-[selected]:font-semibold data-[disabled]:cursor-default data-[disabled]:opacity-50",
+    toggle: "flex h-5 w-5 shrink-0 items-center justify-center text-fg-secondary [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:transition-transform motion-reduce:[&>svg]:transition-none",
+    icon: "flex shrink-0 items-center text-fg-secondary [&>svg]:h-4 [&>svg]:w-4",
+    label: "min-w-0 flex-1 truncate",
+    meta: "shrink-0 text-xs tabular-nums text-fg-secondary"
+  }
+});
+var isBranch = (node) => Boolean(node.children?.length || node.hasChildren);
+function flatten(nodes, open, level = 1, parent = null, out = []) {
+  nodes.forEach((node, i) => {
+    out.push({ node, level, parent, posinset: i + 1, setsize: nodes.length });
+    if (open.has(node.id) && node.children) flatten(node.children, open, level + 1, node.id, out);
+  });
+  return out;
+}
+function TreeView({
+  nodes,
+  "aria-label": label,
+  expanded: expandedProp,
+  defaultExpanded = [],
+  onExpandedChange,
+  selected: selectedProp,
+  defaultSelected = null,
+  onSelect,
+  onLoadChildren,
+  loadingLabel = "Loading",
+  className
+}) {
+  const s = treeView();
+  const uid = React.useId();
+  const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);
+  const [selected, setSelected] = useControllable(selectedProp, defaultSelected);
+  const open = new Set(expanded);
+  const rows = flatten(nodes, open);
+  const [active, setActive] = React.useState(null);
+  const focusId = active && rows.some((r) => r.node.id === active) ? active : selected ?? rows[0]?.node.id ?? null;
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  const move = (id) => {
+    if (!id) return;
+    setActive(id);
+    refs.current.get(id)?.focus();
+  };
+  const toggle = (node, to = !open.has(node.id)) => {
+    if (!isBranch(node)) return;
+    if (to && node.hasChildren && !node.children) onLoadChildren?.(node);
+    setExpanded(to ? [...expanded, node.id] : expanded.filter((id) => id !== node.id));
+  };
+  const choose = (node) => {
+    if (node.disabled) return;
+    setSelected(node.id);
+    onSelect?.(node);
+  };
+  const onKeyDown = (event, i) => {
+    const row = rows[i];
+    const { node } = row;
+    const keys = {
+      ArrowDown: () => move(rows[i + 1]?.node.id),
+      ArrowUp: () => move(rows[i - 1]?.node.id),
+      Home: () => move(rows[0]?.node.id),
+      End: () => move(rows[rows.length - 1]?.node.id),
+      ArrowRight: () => isBranch(node) && !open.has(node.id) ? toggle(node, true) : isBranch(node) ? move(rows[i + 1]?.node.id) : void 0,
+      ArrowLeft: () => open.has(node.id) ? toggle(node, false) : move(row.parent ?? void 0),
+      Enter: () => choose(node),
+      " ": () => choose(node)
+    };
+    const run = keys[event.key];
+    if (run) {
+      event.preventDefault();
+      run();
+      return;
+    }
+    if (event.key.length === 1 && /\S/.test(event.key)) {
+      const letter = event.key.toLowerCase();
+      const next = [...rows.slice(i + 1), ...rows.slice(0, i)].find((r) => r.node.label.toLowerCase().startsWith(letter));
+      move(next?.node.id);
+    }
+  };
+  const render = (list, level) => list.map((node) => {
+    const i = rows.findIndex((r) => r.node.id === node.id);
+    const row = rows[i];
+    const branch = isBranch(node);
+    const isOpen = open.has(node.id);
+    const loading = isOpen && node.hasChildren && !node.children;
+    return (
+      // The row is the treeitem (its name is its own words, never its children's); the group of children hangs
+      // from it with aria-owns, in the `li` that holds both.
+      /* @__PURE__ */ jsxs("li", { role: "none", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (el) => {
+              if (el) refs.current.set(node.id, el);
+              else refs.current.delete(node.id);
+            },
+            role: "treeitem",
+            "aria-level": level,
+            "aria-posinset": row.posinset,
+            "aria-setsize": row.setsize,
+            "aria-expanded": branch ? isOpen : void 0,
+            "aria-selected": selected === node.id,
+            "aria-disabled": node.disabled || void 0,
+            "aria-busy": loading || void 0,
+            "aria-owns": branch && isOpen ? `${uid}-${node.id}-group` : void 0,
+            tabIndex: node.id === focusId ? 0 : -1,
+            onKeyDown: (e) => {
+              if (e.target === e.currentTarget) onKeyDown(e, i);
+            },
+            onFocus: (e) => {
+              if (e.target === e.currentTarget) setActive(node.id);
+            },
+            className: s.row({ className: "outline-hidden focus-visible:ring-2 focus-visible:ring-ring" }),
+            "data-selected": selected === node.id || void 0,
+            "data-disabled": node.disabled || void 0,
+            style: { paddingLeft: `${(level - 1) * 1.25 + 0.25}rem` },
+            onClick: () => {
+              if (branch) toggle(node);
+              choose(node);
+              move(node.id);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: s.toggle(), "aria-hidden": true, children: branch ? /* @__PURE__ */ jsx(ChevronGlyph, { direction: isOpen ? "down" : "right" }) : null }),
+              node.icon ? /* @__PURE__ */ jsx("span", { className: s.icon(), "aria-hidden": true, children: node.icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: s.label(), children: node.label }),
+              node.meta ? /* @__PURE__ */ jsx("span", { className: s.meta(), children: node.meta }) : null
+            ]
+          }
+        ),
+        branch && isOpen ? /* @__PURE__ */ jsx("ul", { role: "group", id: `${uid}-${node.id}-group`, className: s.group(), children: loading ? /* @__PURE__ */ jsx("li", { role: "none", className: "py-1 text-xs text-fg-secondary", style: { paddingLeft: `${level * 1.25 + 1.75}rem` }, children: loadingLabel }) : render(node.children ?? [], level + 1) }) : null
+      ] }, node.id)
+    );
+  });
+  return /* @__PURE__ */ jsx("ul", { role: "tree", "aria-label": label, className: s.root({ className }), children: render(nodes, 1) });
+}
+export {
+  TreeView,
+  treeView
+};
+//# sourceMappingURL=tree-view.js.map

package/dist/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tree-view/tree-view.tsx"],"sourcesContent":["// Client (expansion, selection, the roving focus). A hierarchy the keyboard walks — the ARIA tree pattern: one tab\n// stop, the arrows move and open, Home/End, typing a letter jumps; children loaded on demand when a branch opens.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\nimport { useControllable } from \"../media\";\n\nexport const treeView = tv({\n  slots: {\n    root: \"m-0 list-none p-0 text-sm\",\n    group: \"m-0 list-none p-0\",\n    row:\n      \"flex min-h-8 cursor-pointer select-none items-center gap-1.5 rounded-md pr-2 text-fg outline-hidden \" +\n      \"hover:bg-surface-2 data-[selected]:bg-accent-soft data-[selected]:font-semibold data-[disabled]:cursor-default data-[disabled]:opacity-50\",\n    toggle: \"flex h-5 w-5 shrink-0 items-center justify-center text-fg-secondary [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:transition-transform motion-reduce:[&>svg]:transition-none\",\n    icon: \"flex shrink-0 items-center text-fg-secondary [&>svg]:h-4 [&>svg]:w-4\",\n    label: \"min-w-0 flex-1 truncate\",\n    meta: \"shrink-0 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type TreeNode = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated. */\n  label: string;\n  /** A decorative icon before the name. */\n  icon?: React.ReactNode;\n  /** A detail after the name (a count, a size). */\n  meta?: React.ReactNode;\n  /** Its children; `undefined` for a leaf. With `hasChildren`, they load when it opens (`onLoadChildren`). */\n  children?: readonly TreeNode[];\n  /** A branch whose children are not loaded yet. */\n  hasChildren?: boolean;\n  /** Cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type TreeViewProps = {\n  /** The roots. */\n  nodes: readonly TreeNode[];\n  /** The tree's accessible name (“Documentation”). */\n  \"aria-label\": string;\n  /** The ids of the open branches (controlled). */\n  expanded?: readonly string[];\n  /** The ids open at first, uncontrolled. */\n  defaultExpanded?: readonly string[];\n  /** Called with the open branches. */\n  onExpandedChange?: (expanded: string[]) => void;\n  /** The selected node (controlled). */\n  selected?: string | null;\n  /** The selected node at first, uncontrolled. */\n  defaultSelected?: string | null;\n  /** Called when a node is chosen (click, Enter or Space): navigate, open the file. */\n  onSelect?: (node: TreeNode) => void;\n  /** Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`. */\n  onLoadChildren?: (node: TreeNode) => void;\n  /** The words of a branch that is loading (“Loading”). */\n  loadingLabel?: string;\n  /** Classes merged on the tree. */\n  className?: string;\n};\n\ntype Flat = { node: TreeNode; level: number; parent: string | null; posinset: number; setsize: number };\n\nconst isBranch = (node: TreeNode) => Boolean(node.children?.length || node.hasChildren);\n\nfunction flatten(nodes: readonly TreeNode[], open: Set<string>, level = 1, parent: string | null = null, out: Flat[] = []): Flat[] {\n  nodes.forEach((node, i) => {\n    out.push({ node, level, parent, posinset: i + 1, setsize: nodes.length });\n    if (open.has(node.id) && node.children) flatten(node.children, open, level + 1, node.id, out);\n  });\n  return out;\n}\n\n/**\n * A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→\n * opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.\n */\nexport function TreeView({\n  nodes,\n  \"aria-label\": label,\n  expanded: expandedProp,\n  defaultExpanded = [],\n  onExpandedChange,\n  selected: selectedProp,\n  defaultSelected = null,\n  onSelect,\n  onLoadChildren,\n  loadingLabel = \"Loading\",\n  className,\n}: TreeViewProps) {\n  const s = treeView();\n  const uid = React.useId();\n  const [expanded, setExpanded] = useControllable<readonly string[]>(expandedProp, defaultExpanded, onExpandedChange as (next: readonly string[]) => void);\n  const [selected, setSelected] = useControllable<string | null>(selectedProp, defaultSelected);\n  const open = new Set(expanded);\n  const rows = flatten(nodes, open);\n  const [active, setActive] = React.useState<string | null>(null);\n  const focusId = active && rows.some((r) => r.node.id === active) ? active : (selected ?? rows[0]?.node.id ?? null);\n  const refs = React.useRef(new Map<string, HTMLDivElement>());\n  const move = (id: string | undefined) => {\n    if (!id) return;\n    setActive(id);\n    refs.current.get(id)?.focus();\n  };\n  const toggle = (node: TreeNode, to = !open.has(node.id)) => {\n    if (!isBranch(node)) return;\n    if (to && node.hasChildren && !node.children) onLoadChildren?.(node);\n    setExpanded(to ? [...expanded, node.id] : expanded.filter((id) => id !== node.id));\n  };\n  const choose = (node: TreeNode) => {\n    if (node.disabled) return;\n    setSelected(node.id);\n    onSelect?.(node);\n  };\n  const onKeyDown = (event: React.KeyboardEvent, i: number) => {\n    const row = rows[i]!;\n    const { node } = row;\n    const keys: Record<string, () => void> = {\n      ArrowDown: () => move(rows[i + 1]?.node.id),\n      ArrowUp: () => move(rows[i - 1]?.node.id),\n      Home: () => move(rows[0]?.node.id),\n      End: () => move(rows[rows.length - 1]?.node.id),\n      ArrowRight: () => (isBranch(node) && !open.has(node.id) ? toggle(node, true) : isBranch(node) ? move(rows[i + 1]?.node.id) : undefined),\n      ArrowLeft: () => (open.has(node.id) ? toggle(node, false) : move(row.parent ?? undefined)),\n      Enter: () => choose(node),\n      \" \": () => choose(node),\n    };\n    const run = keys[event.key];\n    if (run) {\n      event.preventDefault();\n      run();\n      return;\n    }\n    if (event.key.length === 1 && /\\S/.test(event.key)) {\n      const letter = event.key.toLowerCase();\n      const next = [...rows.slice(i + 1), ...rows.slice(0, i)].find((r) => r.node.label.toLowerCase().startsWith(letter));\n      move(next?.node.id);\n    }\n  };\n\n  const render = (list: readonly TreeNode[], level: number): React.ReactNode =>\n    list.map((node) => {\n      const i = rows.findIndex((r) => r.node.id === node.id);\n      const row = rows[i]!;\n      const branch = isBranch(node);\n      const isOpen = open.has(node.id);\n      const loading = isOpen && node.hasChildren && !node.children;\n      return (\n        // The row is the treeitem (its name is its own words, never its children's); the group of children hangs\n        // from it with aria-owns, in the `li` that holds both.\n        <li key={node.id} role=\"none\">\n          <div\n            ref={(el) => {\n              if (el) refs.current.set(node.id, el);\n              else refs.current.delete(node.id);\n            }}\n            role=\"treeitem\"\n            aria-level={level}\n            aria-posinset={row.posinset}\n            aria-setsize={row.setsize}\n            aria-expanded={branch ? isOpen : undefined}\n            aria-selected={selected === node.id}\n            aria-disabled={node.disabled || undefined}\n            aria-busy={loading || undefined}\n            aria-owns={branch && isOpen ? `${uid}-${node.id}-group` : undefined}\n            tabIndex={node.id === focusId ? 0 : -1}\n            onKeyDown={(e) => {\n              if (e.target === e.currentTarget) onKeyDown(e, i);\n            }}\n            onFocus={(e) => {\n              if (e.target === e.currentTarget) setActive(node.id);\n            }}\n            className={s.row({ className: \"outline-hidden focus-visible:ring-2 focus-visible:ring-ring\" })}\n            data-selected={selected === node.id || undefined}\n            data-disabled={node.disabled || undefined}\n            style={{ paddingLeft: `${(level - 1) * 1.25 + 0.25}rem` }}\n            onClick={() => {\n              if (branch) toggle(node);\n              choose(node);\n              move(node.id);\n            }}\n          >\n            <span className={s.toggle()} aria-hidden>\n              {branch ? <ChevronGlyph direction={isOpen ? \"down\" : \"right\"} /> : null}\n            </span>\n            {node.icon ? <span className={s.icon()} aria-hidden>{node.icon}</span> : null}\n            <span className={s.label()}>{node.label}</span>\n            {node.meta ? <span className={s.meta()}>{node.meta}</span> : null}\n          </div>\n          {branch && isOpen ? (\n            <ul role=\"group\" id={`${uid}-${node.id}-group`} className={s.group()}>\n              {loading ? (\n                <li role=\"none\" className=\"py-1 text-xs text-fg-secondary\" style={{ paddingLeft: `${level * 1.25 + 1.75}rem` }}>\n                  {loadingLabel}\n                </li>\n              ) : (\n                render(node.children ?? [], level + 1)\n              )}\n            </ul>\n          ) : null}\n        </li>\n      );\n    });\n\n  return (\n    <ul role=\"tree\" aria-label={label} className={s.root({ className })}>\n      {render(nodes, 1)}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}