@blurrow/ui 0.2.0 → 0.2.1

package/dist/Steps.js

@@ -0,0 +1,94 @@
+// ../../components/ui/Steps.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function Steps({ steps, current, className = "" }) {
+  return /* @__PURE__ */ jsx("ol", { className: ["flex items-start", className].filter(Boolean).join(" "), children: steps.map((step, i) => {
+    const isCompleted = i < current;
+    const isCurrent = i === current;
+    const reached = isCompleted || isCurrent;
+    const isLast = i === steps.length - 1;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-current": isCurrent ? "step" : void 0,
+        className: "relative flex-1 min-w-0 flex flex-col items-center text-center",
+        children: [
+          !isLast && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute top-[15px] h-1 -translate-y-1/2 rounded-full overflow-hidden",
+              style: {
+                left: "calc(50% + 25px)",
+                width: "calc(100% - 50px)",
+                background: "var(--well)",
+                boxShadow: "var(--well-shadow)"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "block h-full rounded-full origin-left transition-transform duration-500 ease-[var(--ease-out-soft)]",
+                  style: {
+                    background: "var(--face-inverse)",
+                    transform: isCompleted ? "scaleX(1)" : "scaleX(0)"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: [
+                "relative w-[30px] h-[30px] rounded-full flex items-center justify-center text-[12.5px] font-semibold tabular-nums shrink-0",
+                "transition-[box-shadow,color] duration-300",
+                reached ? "text-ink-inverse" : "text-ink-faint"
+              ].join(" "),
+              style: {
+                background: reached ? "var(--face-inverse)" : "var(--field)",
+                boxShadow: isCurrent ? "var(--face-inverse-shadow), var(--halo)" : reached ? "var(--face-inverse-shadow)" : "var(--field-shadow)"
+              },
+              children: [
+                isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {}) : i + 1,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: isCompleted ? " (completed)" : "" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "mt-3 px-1.5 flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: [
+                  "text-[13px] font-medium leading-tight transition-colors duration-200",
+                  reached ? "text-ink" : "text-ink-muted"
+                ].join(" "),
+                children: step.label
+              }
+            ),
+            step.description && /* @__PURE__ */ jsx("span", { className: "text-[12px] text-ink-faint leading-snug", children: step.description })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+export {
+  Steps
+};
+//# sourceMappingURL=Steps.js.map

package/dist/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Steps.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface StepItem {\n  label: string;\n  description?: string;\n}\n\ninterface StepsProps {\n  steps: StepItem[];\n  current: number;\n  className?: string;\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      width=\"13\"\n      height=\"13\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\n/* Upcoming steps are sunken (not yet filled in), done and current steps\n   are dark raised faces; the current one also wears a soft halo. Each step owns an equal column, so labels get\n   real width instead of being squeezed under a 32px circle.           */\nexport function Steps({ steps, current, className = \"\" }: StepsProps) {\n  return (\n    <ol className={[\"flex items-start\", className].filter(Boolean).join(\" \")}>\n      {steps.map((step, i) => {\n        const isCompleted = i < current;\n        const isCurrent = i === current;\n        const reached = isCompleted || isCurrent;\n        const isLast = i === steps.length - 1;\n\n        return (\n          <li\n            key={i}\n            aria-current={isCurrent ? \"step\" : undefined}\n            className=\"relative flex-1 min-w-0 flex flex-col items-center text-center\"\n          >\n            {/* One groove per gap, running between the two circles' edges\n                (columns are equal, so the next centre is exactly 100% away) */}\n            {!isLast && (\n              <span\n                aria-hidden\n                className=\"absolute top-[15px] h-1 -translate-y-1/2 rounded-full overflow-hidden\"\n                style={{\n                  left: \"calc(50% + 25px)\",\n                  width: \"calc(100% - 50px)\",\n                  background: \"var(--well)\",\n                  boxShadow: \"var(--well-shadow)\",\n                }}\n              >\n                <span\n                  className=\"block h-full rounded-full origin-left transition-transform duration-500 ease-[var(--ease-out-soft)]\"\n                  style={{\n                    background: \"var(--face-inverse)\",\n                    transform: isCompleted ? \"scaleX(1)\" : \"scaleX(0)\",\n                  }}\n                />\n              </span>\n            )}\n\n            <span\n              className={[\n                \"relative w-[30px] h-[30px] rounded-full flex items-center justify-center text-[12.5px] font-semibold tabular-nums shrink-0\",\n                \"transition-[box-shadow,color] duration-300\",\n                reached ? \"text-ink-inverse\" : \"text-ink-faint\",\n              ].join(\" \")}\n              style={{\n                background: reached ? \"var(--face-inverse)\" : \"var(--field)\",\n                boxShadow: isCurrent\n                  ? \"var(--face-inverse-shadow), var(--halo)\"\n                  : reached\n                    ? \"var(--face-inverse-shadow)\"\n                    : \"var(--field-shadow)\",\n              }}\n            >\n              {isCompleted ? <CheckIcon /> : i + 1}\n              <span className=\"sr-only\">{isCompleted ? \" (completed)\" : \"\"}</span>\n            </span>\n\n            <span className=\"mt-3 px-1.5 flex flex-col gap-0.5\">\n              <span\n                className={[\n                  \"text-[13px] font-medium leading-tight transition-colors duration-200\",\n                  reached ? \"text-ink\" : \"text-ink-muted\",\n                ].join(\" \")}\n              >\n                {step.label}\n              </span>\n              {step.description && (\n                <span className=\"text-[12px] text-ink-faint leading-snug\">{step.description}</span>\n              )}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":";AAyBM,cA8CM,YA9CN;AAZN,SAAS,YAAY;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MAEf,8BAAC,cAAS,QAAO,kBAAiB;AAAA;AAAA,EACpC;AAEJ;AAKO,SAAS,MAAM,EAAE,OAAO,SAAS,YAAY,GAAG,GAAe;AACpE,SACE,oBAAC,QAAG,WAAW,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACpE,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,cAAc,IAAI;AACxB,UAAM,YAAY,MAAM;AACxB,UAAM,UAAU,eAAe;AAC/B,UAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,gBAAc,YAAY,SAAS;AAAA,QACnC,WAAU;AAAA,QAIT;AAAA,WAAC,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,WAAW;AAAA,cACb;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,WAAW,cAAc,cAAc;AAAA,kBACzC;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,UAAU,qBAAqB;AAAA,cACjC,EAAE,KAAK,GAAG;AAAA,cACV,OAAO;AAAA,gBACL,YAAY,UAAU,wBAAwB;AAAA,gBAC9C,WAAW,YACP,4CACA,UACE,+BACA;AAAA,cACR;AAAA,cAEC;AAAA,8BAAc,oBAAC,aAAU,IAAK,IAAI;AAAA,gBACnC,oBAAC,UAAK,WAAU,WAAW,wBAAc,iBAAiB,IAAG;AAAA;AAAA;AAAA,UAC/D;AAAA,UAEA,qBAAC,UAAK,WAAU,qCACd;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,UAAU,aAAa;AAAA,gBACzB,EAAE,KAAK,GAAG;AAAA,gBAET,eAAK;AAAA;AAAA,YACR;AAAA,YACC,KAAK,eACJ,oBAAC,UAAK,WAAU,2CAA2C,eAAK,aAAY;AAAA,aAEhF;AAAA;AAAA;AAAA,MA1DK;AAAA,IA2DP;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/Table.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface Column<T> {
+    key: keyof T | string;
+    label: string;
+    align?: "left" | "right" | "center";
+    render?: (value: unknown, row: T) => React.ReactNode;
+    width?: string;
+}
+interface TableProps<T extends Record<string, unknown>> {
+    columns: Column<T>[];
+    rows: T[];
+    title?: string;
+    description?: string;
+    className?: string;
+    onRowClick?: (row: T) => void;
+}
+declare function Table<T extends Record<string, unknown>>({ columns, rows, title, description, className, onRowClick, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Table };

package/dist/Table.js

@@ -0,0 +1,93 @@
+"use client";
+
+// ../../components/ui/Table.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var alignClass = (align) => align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+function Table({
+  columns,
+  rows,
+  title,
+  description,
+  className = "",
+  onRowClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["w-full rounded-[18px] p-1.5", title || description ? "pt-0" : "", className].join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "px-3.5 pt-3.5 pb-3", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-ink tracking-[-0.01em]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-ink-muted mt-0.5", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-panel-face rounded-[13px] overflow-x-auto scroll-thin",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left border-collapse", children: [
+              title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: title }),
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-line", children: columns.map((col) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  scope: "col",
+                  style: col.width ? { width: col.width } : void 0,
+                  className: [
+                    "px-4 pt-3 pb-2.5 text-[12px] font-medium text-ink-muted lowercase whitespace-nowrap",
+                    alignClass(col.align)
+                  ].join(" "),
+                  children: col.label
+                },
+                String(col.key)
+              )) }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                rows.map((row, ri) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    onClick: () => onRowClick?.(row),
+                    tabIndex: onRowClick ? 0 : void 0,
+                    onKeyDown: onRowClick ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onRowClick(row);
+                      }
+                    } : void 0,
+                    className: [
+                      "border-b border-line last:border-0 transition-colors duration-100",
+                      onRowClick ? "cursor-pointer hover:bg-surface-hover focus-visible:bg-surface-hover outline-none focus-visible:shadow-[inset_2px_0_0_var(--ink)]" : ""
+                    ].join(" "),
+                    children: columns.map((col, ci) => {
+                      const val = row[col.key];
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          className: [
+                            "px-4 py-3 text-[13px]",
+                            ci === 0 ? "font-medium text-ink" : "text-ink-body tabular-nums",
+                            alignClass(col.align)
+                          ].join(" "),
+                          children: col.render ? col.render(val, row) : String(val ?? "")
+                        },
+                        String(col.key)
+                      );
+                    })
+                  },
+                  ri
+                )),
+                rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length, className: "px-5 py-12 text-center", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-ink-label", children: "nothing here yet" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[12px] text-ink-muted mt-0.5", children: "rows will show up here once there are some." })
+                ] }) })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Table
+};
+//# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\ninterface Column<T> {\n  key: keyof T | string;\n  label: string;\n  align?: \"left\" | \"right\" | \"center\";\n  render?: (value: unknown, row: T) => React.ReactNode;\n  width?: string;\n}\n\ninterface TableProps<T extends Record<string, unknown>> {\n  columns: Column<T>[];\n  rows: T[];\n  title?: string;\n  description?: string;\n  className?: string;\n  onRowClick?: (row: T) => void;\n}\n\nconst alignClass = (align?: \"left\" | \"right\" | \"center\") =>\n  align === \"right\" ? \"text-right\" : align === \"center\" ? \"text-center\" : \"text-left\";\n\n/* Title and column headers live in the bezel; rows sit on the raised face. */\nexport function Table<T extends Record<string, unknown>>({\n  columns,\n  rows,\n  title,\n  description,\n  className = \"\",\n  onRowClick,\n}: TableProps<T>) {\n  return (\n    <div\n      className={[\"w-full rounded-[18px] p-1.5\", title || description ? \"pt-0\" : \"\", className].join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      {(title || description) && (\n        <div className=\"px-3.5 pt-3.5 pb-3\">\n          {title && <p className=\"text-[13px] font-semibold text-ink tracking-[-0.01em]\">{title}</p>}\n          {description && <p className=\"text-[12px] text-ink-muted mt-0.5\">{description}</p>}\n        </div>\n      )}\n\n      <div\n        className=\"bg-panel-face rounded-[13px] overflow-x-auto scroll-thin\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        <table className=\"w-full text-left border-collapse\">\n          {title && <caption className=\"sr-only\">{title}</caption>}\n          <thead>\n            <tr className=\"border-b border-line\">\n              {columns.map((col) => (\n                <th\n                  key={String(col.key)}\n                  scope=\"col\"\n                  style={col.width ? { width: col.width } : undefined}\n                  className={[\n                    \"px-4 pt-3 pb-2.5 text-[12px] font-medium text-ink-muted lowercase whitespace-nowrap\",\n                    alignClass(col.align),\n                  ].join(\" \")}\n                >\n                  {col.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row, ri) => (\n              <tr\n                key={ri}\n                onClick={() => onRowClick?.(row)}\n                // Clickable rows are reachable and operable from the keyboard too\n                tabIndex={onRowClick ? 0 : undefined}\n                onKeyDown={\n                  onRowClick\n                    ? (e) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          onRowClick(row);\n                        }\n                      }\n                    : undefined\n                }\n                className={[\n                  \"border-b border-line last:border-0 transition-colors duration-100\",\n                  onRowClick\n                    ? \"cursor-pointer hover:bg-surface-hover focus-visible:bg-surface-hover outline-none focus-visible:shadow-[inset_2px_0_0_var(--ink)]\"\n                    : \"\",\n                ].join(\" \")}\n              >\n                {columns.map((col, ci) => {\n                  const val = row[col.key as keyof T] as unknown;\n                  return (\n                    <td\n                      key={String(col.key)}\n                      className={[\n                        \"px-4 py-3 text-[13px]\",\n                        ci === 0 ? \"font-medium text-ink\" : \"text-ink-body tabular-nums\",\n                        alignClass(col.align),\n                      ].join(\" \")}\n                    >\n                      {col.render ? col.render(val, row) : String(val ?? \"\")}\n                    </td>\n                  );\n                })}\n              </tr>\n            ))}\n            {rows.length === 0 && (\n              <tr>\n                <td colSpan={columns.length} className=\"px-5 py-12 text-center\">\n                  <p className=\"text-[13px] font-medium text-ink-label\">nothing here yet</p>\n                  <p className=\"text-[12px] text-ink-muted mt-0.5\">rows will show up here once there are some.</p>\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAuCQ,SACY,KADZ;AAlBR,IAAM,aAAa,CAAC,UAClB,UAAU,UAAU,eAAe,UAAU,WAAW,gBAAgB;AAGnE,SAAS,MAAyC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,+BAA+B,SAAS,cAAc,SAAS,IAAI,SAAS,EAAE,KAAK,GAAG;AAAA,MAClG,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,MAE1E;AAAA,kBAAS,gBACT,qBAAC,SAAI,WAAU,sBACZ;AAAA,mBAAS,oBAAC,OAAE,WAAU,yDAAyD,iBAAM;AAAA,UACrF,eAAe,oBAAC,OAAE,WAAU,qCAAqC,uBAAY;AAAA,WAChF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,YAE/C,+BAAC,WAAM,WAAU,oCACd;AAAA,uBAAS,oBAAC,aAAQ,WAAU,WAAW,iBAAM;AAAA,cAC9C,oBAAC,WACC,8BAAC,QAAG,WAAU,wBACX,kBAAQ,IAAI,CAAC,QACZ;AAAA,gBAAC;AAAA;AAAA,kBAEC,OAAM;AAAA,kBACN,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI;AAAA,kBAC1C,WAAW;AAAA,oBACT;AAAA,oBACA,WAAW,IAAI,KAAK;AAAA,kBACtB,EAAE,KAAK,GAAG;AAAA,kBAET,cAAI;AAAA;AAAA,gBARA,OAAO,IAAI,GAAG;AAAA,cASrB,CACD,GACH,GACF;AAAA,cACA,qBAAC,WACE;AAAA,qBAAK,IAAI,CAAC,KAAK,OACd;AAAA,kBAAC;AAAA;AAAA,oBAEC,SAAS,MAAM,aAAa,GAAG;AAAA,oBAE/B,UAAU,aAAa,IAAI;AAAA,oBAC3B,WACE,aACI,CAAC,MAAM;AACL,0BAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,0BAAE,eAAe;AACjB,mCAAW,GAAG;AAAA,sBAChB;AAAA,oBACF,IACA;AAAA,oBAEN,WAAW;AAAA,sBACT;AAAA,sBACA,aACI,sIACA;AAAA,oBACN,EAAE,KAAK,GAAG;AAAA,oBAET,kBAAQ,IAAI,CAAC,KAAK,OAAO;AACxB,4BAAM,MAAM,IAAI,IAAI,GAAc;AAClC,6BACE;AAAA,wBAAC;AAAA;AAAA,0BAEC,WAAW;AAAA,4BACT;AAAA,4BACA,OAAO,IAAI,yBAAyB;AAAA,4BACpC,WAAW,IAAI,KAAK;AAAA,0BACtB,EAAE,KAAK,GAAG;AAAA,0BAET,cAAI,SAAS,IAAI,OAAO,KAAK,GAAG,IAAI,OAAO,OAAO,EAAE;AAAA;AAAA,wBAPhD,OAAO,IAAI,GAAG;AAAA,sBAQrB;AAAA,oBAEJ,CAAC;AAAA;AAAA,kBAnCI;AAAA,gBAoCP,CACD;AAAA,gBACA,KAAK,WAAW,KACf,oBAAC,QACC,+BAAC,QAAG,SAAS,QAAQ,QAAQ,WAAU,0BACrC;AAAA,sCAAC,OAAE,WAAU,0CAAyC,8BAAgB;AAAA,kBACtE,oBAAC,OAAE,WAAU,qCAAoC,yDAA2C;AAAA,mBAC9F,GACF;AAAA,iBAEJ;AAAA,eACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/TableOfContents.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TocItem {
+    key: string;
+    label: string;
+    level: 1 | 2 | 3;
+}
+interface TableOfContentsProps {
+    items: TocItem[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onSelect?: (key: string) => void;
+    className?: string;
+}
+declare function TableOfContents({ items, activeKey, defaultActiveKey, onSelect, className, }: TableOfContentsProps): react_jsx_runtime.JSX.Element;
+
+export { TableOfContents, type TocItem };

package/dist/TableOfContents.js

@@ -0,0 +1,92 @@
+"use client";
+
+// ../../components/ui/TableOfContents.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var indent = { 1: 16, 2: 28, 3: 40 };
+function TableOfContents({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onSelect,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultActiveKey ?? items[0]?.key ?? "");
+  const current = activeKey !== void 0 ? activeKey : internal;
+  const refs = useRef({});
+  const [marker, setMarker] = useState(null);
+  const [ready, setReady] = useState(false);
+  const measure = () => {
+    const el = refs.current[current];
+    setMarker(el ? { top: el.offsetTop, height: el.offsetHeight } : null);
+  };
+  useLayoutEffect(() => {
+    measure();
+  }, [current]);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const handleSelect = (key) => {
+    setInternal(key);
+    onSelect?.(key);
+  };
+  const slide = ready ? "top 360ms var(--ease-out-soft), height 360ms var(--ease-out-soft)" : "none";
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "On this page",
+      className: ["rounded-[18px] p-1.5", className].filter(Boolean).join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-panel-face rounded-[13px] px-5 pt-4 pb-4",
+          style: { boxShadow: "var(--panel-face-shadow)" },
+          children: [
+            /* @__PURE__ */ jsx("p", { "aria-hidden": true, className: "text-[12px] font-medium text-ink-faint mb-3", children: "on this page" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute left-0 top-0 bottom-0 w-px bg-ink/[0.08]" }),
+              marker && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute -left-[0.5px] w-[2px] rounded-full bg-ink",
+                  style: { top: marker.top + 6, height: marker.height - 12, transition: slide }
+                }
+              ),
+              items.map((item) => {
+                const isActive = current === item.key;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (el) => {
+                      refs.current[item.key] = el;
+                    },
+                    type: "button",
+                    onClick: () => handleSelect(item.key),
+                    "aria-current": isActive ? "location" : void 0,
+                    className: [
+                      // Weight stays fixed so the active item doesn't reflow its line
+                      "relative block w-full text-left py-1.5 text-[13px] leading-5 rounded-[6px] cursor-pointer",
+                      "transition-colors duration-200 outline-none",
+                      "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink",
+                      isActive ? "text-ink font-medium" : item.level === 1 ? "text-ink-body hover:text-ink" : "text-ink-faint hover:text-ink-label"
+                    ].join(" "),
+                    style: { paddingLeft: indent[item.level] },
+                    children: item.label
+                  },
+                  item.key
+                );
+              })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  TableOfContents
+};
+//# sourceMappingURL=TableOfContents.js.map

package/dist/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/TableOfContents.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nexport interface TocItem {\n  key: string;\n  label: string;\n  level: 1 | 2 | 3;\n}\n\ninterface TableOfContentsProps {\n  items: TocItem[];\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onSelect?: (key: string) => void;\n  className?: string;\n}\n\nconst indent: Record<1 | 2 | 3, number> = { 1: 16, 2: 28, 3: 40 };\n\n/* A hairline track runs down the left edge; a slim dark marker glides\n   along it to the active heading. Nothing else moves — the active label\n   just darkens.                                                       */\nexport function TableOfContents({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onSelect,\n  className = \"\",\n}: TableOfContentsProps) {\n  const [internal, setInternal] = useState(defaultActiveKey ?? items[0]?.key ?? \"\");\n  const current = activeKey !== undefined ? activeKey : internal;\n  const refs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const [marker, setMarker] = useState<{ top: number; height: number } | null>(null);\n  const [ready, setReady] = useState(false);\n\n  const measure = () => {\n    const el = refs.current[current];\n    setMarker(el ? { top: el.offsetTop, height: el.offsetHeight } : null);\n  };\n\n  useLayoutEffect(() => {\n    measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [current]);\n\n  useEffect(() => {\n    // Only animate moves after the first placement\n    const id = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(id);\n  }, []);\n\n  const handleSelect = (key: string) => {\n    setInternal(key);\n    onSelect?.(key);\n  };\n\n  const slide = ready ? \"top 360ms var(--ease-out-soft), height 360ms var(--ease-out-soft)\" : \"none\";\n\n  return (\n    <nav\n      aria-label=\"On this page\"\n      className={[\"rounded-[18px] p-1.5\", className].filter(Boolean).join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <div\n        className=\"bg-panel-face rounded-[13px] px-5 pt-4 pb-4\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        <p aria-hidden className=\"text-[12px] font-medium text-ink-faint mb-3\">\n          on this page\n        </p>\n\n        <div className=\"relative\">\n          <span aria-hidden className=\"absolute left-0 top-0 bottom-0 w-px bg-ink/[0.08]\" />\n          {marker && (\n            <span\n              aria-hidden\n              className=\"absolute -left-[0.5px] w-[2px] rounded-full bg-ink\"\n              style={{ top: marker.top + 6, height: marker.height - 12, transition: slide }}\n            />\n          )}\n\n          {items.map((item) => {\n            const isActive = current === item.key;\n            return (\n              <button\n                key={item.key}\n                ref={(el) => {\n                  refs.current[item.key] = el;\n                }}\n                type=\"button\"\n                onClick={() => handleSelect(item.key)}\n                aria-current={isActive ? \"location\" : undefined}\n                className={[\n                  // Weight stays fixed so the active item doesn't reflow its line\n                  \"relative block w-full text-left py-1.5 text-[13px] leading-5 rounded-[6px] cursor-pointer\",\n                  \"transition-colors duration-200 outline-none\",\n                  \"focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink\",\n                  isActive\n                    ? \"text-ink font-medium\"\n                    : item.level === 1\n                      ? \"text-ink-body hover:text-ink\"\n                      : \"text-ink-faint hover:text-ink-label\",\n                ].join(\" \")}\n                style={{ paddingLeft: indent[item.level] }}\n              >\n                {item.label}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,WAAW,iBAAiB,QAAQ,gBAAgB;AAmE5D,cAIA,YAJA;AAnDR,IAAM,SAAoC,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG;AAKzD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAyB;AACvB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,oBAAoB,MAAM,CAAC,GAAG,OAAO,EAAE;AAChF,QAAM,UAAU,cAAc,SAAY,YAAY;AACtD,QAAM,OAAO,OAAiD,CAAC,CAAC;AAChE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiD,IAAI;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,KAAK,QAAQ,OAAO;AAC/B,cAAU,KAAK,EAAE,KAAK,GAAG,WAAW,QAAQ,GAAG,aAAa,IAAI,IAAI;AAAA,EACtE;AAEA,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EAEV,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AAEd,UAAM,KAAK,sBAAsB,MAAM,SAAS,IAAI,CAAC;AACrD,WAAO,MAAM,qBAAqB,EAAE;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,CAAC,QAAgB;AACpC,gBAAY,GAAG;AACf,eAAW,GAAG;AAAA,EAChB;AAEA,QAAM,QAAQ,QAAQ,sEAAsE;AAE5F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW,CAAC,wBAAwB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvE,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,MAE5E;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,UAE/C;AAAA,gCAAC,OAAE,eAAW,MAAC,WAAU,+CAA8C,0BAEvE;AAAA,YAEA,qBAAC,SAAI,WAAU,YACb;AAAA,kCAAC,UAAK,eAAW,MAAC,WAAU,qDAAoD;AAAA,cAC/E,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA,kBACV,OAAO,EAAE,KAAK,OAAO,MAAM,GAAG,QAAQ,OAAO,SAAS,IAAI,YAAY,MAAM;AAAA;AAAA,cAC9E;AAAA,cAGD,MAAM,IAAI,CAAC,SAAS;AACnB,sBAAM,WAAW,YAAY,KAAK;AAClC,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,KAAK,CAAC,OAAO;AACX,2BAAK,QAAQ,KAAK,GAAG,IAAI;AAAA,oBAC3B;AAAA,oBACA,MAAK;AAAA,oBACL,SAAS,MAAM,aAAa,KAAK,GAAG;AAAA,oBACpC,gBAAc,WAAW,aAAa;AAAA,oBACtC,WAAW;AAAA;AAAA,sBAET;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,WACI,yBACA,KAAK,UAAU,IACb,iCACA;AAAA,oBACR,EAAE,KAAK,GAAG;AAAA,oBACV,OAAO,EAAE,aAAa,OAAO,KAAK,KAAK,EAAE;AAAA,oBAExC,eAAK;AAAA;AAAA,kBApBD,KAAK;AAAA,gBAqBZ;AAAA,cAEJ,CAAC;AAAA,eACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/Tabs.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface Tab {
+    key: string;
+    label: string;
+    content?: React.ReactNode;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+}
+declare function Tabs({ tabs, defaultTab, onChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+export { Tabs };

package/dist/Tabs.js

@@ -0,0 +1,123 @@
+"use client";
+
+// ../../components/ui/Tabs.tsx
+import { useState, useRef, useEffect, useLayoutEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tabs({ tabs, defaultTab, onChange, className = "" }) {
+  const [active, setActive] = useState(defaultTab ?? tabs[0]?.key ?? "");
+  const [direction, setDirection] = useState("right");
+  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });
+  const listRef = useRef(null);
+  const btnRefs = useRef({});
+  const uid = useId();
+  const measurePill = (key) => {
+    const btn = btnRefs.current[key];
+    const list = listRef.current;
+    if (!btn || !list) return;
+    const lr = list.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ left: br.left - lr.left, width: br.width, ready: true });
+  };
+  useLayoutEffect(() => {
+    measurePill(active);
+  }, [active]);
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(active));
+    if (listRef.current) ro.observe(listRef.current);
+    return () => ro.disconnect();
+  }, [active]);
+  const handleSelect = (key) => {
+    const prevIndex = tabs.findIndex((t) => t.key === active);
+    const nextIndex = tabs.findIndex((t) => t.key === key);
+    setDirection(nextIndex > prevIndex ? "right" : "left");
+    setActive(key);
+    onChange?.(key);
+  };
+  const onKeyDown = (e) => {
+    const i = tabs.findIndex((t) => t.key === active);
+    let next = -1;
+    if (e.key === "ArrowRight") next = (i + 1) % tabs.length;
+    if (e.key === "ArrowLeft") next = (i - 1 + tabs.length) % tabs.length;
+    if (e.key === "Home") next = 0;
+    if (e.key === "End") next = tabs.length - 1;
+    if (next < 0) return;
+    e.preventDefault();
+    const key = tabs[next].key;
+    handleSelect(key);
+    btnRefs.current[key]?.focus();
+  };
+  const activeTab = tabs.find((t) => t.key === active);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-4", className].join(" "), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: listRef,
+        role: "tablist",
+        onKeyDown,
+        className: "relative flex w-full sm:inline-flex sm:w-auto sm:self-start items-center rounded-[13px] p-1",
+        style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+        children: [
+          pill.ready && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute top-1 bottom-1 rounded-[9px] pointer-events-none",
+              style: {
+                left: pill.left,
+                width: pill.width,
+                background: "var(--face)",
+                boxShadow: "var(--thumb-shadow)",
+                transition: "left 300ms var(--ease-spring), width 300ms var(--ease-spring)"
+              }
+            }
+          ),
+          tabs.map((tab) => {
+            const isActive = active === tab.key;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (el) => {
+                  btnRefs.current[tab.key] = el;
+                },
+                id: `${uid}-tab-${tab.key}`,
+                role: "tab",
+                type: "button",
+                "aria-selected": isActive,
+                "aria-controls": tab.content ? `${uid}-panel-${tab.key}` : void 0,
+                tabIndex: isActive ? 0 : -1,
+                onClick: () => handleSelect(tab.key),
+                className: [
+                  "relative z-10 flex-1 sm:flex-none px-3.5 py-2 rounded-[9px] text-[13px] font-medium text-center whitespace-nowrap cursor-pointer",
+                  "transition-colors duration-150",
+                  "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink",
+                  isActive ? "text-ink" : "text-ink-muted hover:text-ink-soft"
+                ].join(" "),
+                children: tab.label
+              },
+              tab.key
+            );
+          })
+        ]
+      }
+    ),
+    activeTab?.content && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${uid}-panel-${active}`,
+        role: "tabpanel",
+        "aria-labelledby": `${uid}-tab-${active}`,
+        tabIndex: 0,
+        className: [
+          "text-[13px] text-ink-body leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink",
+          direction === "right" ? "animate-tab-slide-right" : "animate-tab-slide-left"
+        ].join(" "),
+        children: activeTab.content
+      },
+      active
+    )
+  ] });
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useLayoutEffect, useId } from \"react\";\n\ninterface Tab {\n  key: string;\n  label: string;\n  content?: React.ReactNode;\n}\n\ninterface TabsProps {\n  tabs: Tab[];\n  defaultTab?: string;\n  onChange?: (key: string) => void;\n  className?: string;\n}\n\n/* A sunken well holding a raised thumb — the same segmented control as\n   Pagination. One Tab stop; arrows move between tabs and select them.  */\nexport function Tabs({ tabs, defaultTab, onChange, className = \"\" }: TabsProps) {\n  const [active, setActive] = useState(defaultTab ?? tabs[0]?.key ?? \"\");\n  const [direction, setDirection] = useState<\"left\" | \"right\">(\"right\");\n  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });\n  const listRef = useRef<HTMLDivElement>(null);\n  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const uid = useId();\n\n  const measurePill = (key: string) => {\n    const btn = btnRefs.current[key];\n    const list = listRef.current;\n    if (!btn || !list) return;\n    const lr = list.getBoundingClientRect();\n    const br = btn.getBoundingClientRect();\n    setPill({ left: br.left - lr.left, width: br.width, ready: true });\n  };\n\n  // Before paint, so the thumb is never seen out of place\n  useLayoutEffect(() => { measurePill(active); }, [active]);\n\n  useEffect(() => {\n    const ro = new ResizeObserver(() => measurePill(active));\n    if (listRef.current) ro.observe(listRef.current);\n    return () => ro.disconnect();\n  }, [active]);\n\n  const handleSelect = (key: string) => {\n    const prevIndex = tabs.findIndex((t) => t.key === active);\n    const nextIndex = tabs.findIndex((t) => t.key === key);\n    setDirection(nextIndex > prevIndex ? \"right\" : \"left\");\n    setActive(key);\n    onChange?.(key);\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const i = tabs.findIndex((t) => t.key === active);\n    let next = -1;\n    if (e.key === \"ArrowRight\") next = (i + 1) % tabs.length;\n    if (e.key === \"ArrowLeft\") next = (i - 1 + tabs.length) % tabs.length;\n    if (e.key === \"Home\") next = 0;\n    if (e.key === \"End\") next = tabs.length - 1;\n    if (next < 0) return;\n    e.preventDefault();\n    const key = tabs[next].key;\n    handleSelect(key);\n    btnRefs.current[key]?.focus();\n  };\n\n  const activeTab = tabs.find((t) => t.key === active);\n\n  return (\n    <div className={[\"flex flex-col gap-4\", className].join(\" \")}>\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        onKeyDown={onKeyDown}\n        className=\"relative flex w-full sm:inline-flex sm:w-auto sm:self-start items-center rounded-[13px] p-1\"\n        style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n      >\n        {pill.ready && (\n          <span\n            aria-hidden\n            className=\"absolute top-1 bottom-1 rounded-[9px] pointer-events-none\"\n            style={{\n              left: pill.left,\n              width: pill.width,\n              background: \"var(--face)\",\n              boxShadow: \"var(--thumb-shadow)\",\n              transition: \"left 300ms var(--ease-spring), width 300ms var(--ease-spring)\",\n            }}\n          />\n        )}\n\n        {tabs.map((tab) => {\n          const isActive = active === tab.key;\n          return (\n            <button\n              key={tab.key}\n              ref={(el) => { btnRefs.current[tab.key] = el; }}\n              id={`${uid}-tab-${tab.key}`}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={isActive}\n              aria-controls={tab.content ? `${uid}-panel-${tab.key}` : undefined}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => handleSelect(tab.key)}\n              className={[\n                \"relative z-10 flex-1 sm:flex-none px-3.5 py-2 rounded-[9px] text-[13px] font-medium text-center whitespace-nowrap cursor-pointer\",\n                \"transition-colors duration-150\",\n                \"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink\",\n                isActive ? \"text-ink\" : \"text-ink-muted hover:text-ink-soft\",\n              ].join(\" \")}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n      </div>\n\n      {activeTab?.content && (\n        <div\n          key={active}\n          id={`${uid}-panel-${active}`}\n          role=\"tabpanel\"\n          aria-labelledby={`${uid}-tab-${active}`}\n          tabIndex={0}\n          className={[\n            \"text-[13px] text-ink-body leading-relaxed rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ink\",\n            direction === \"right\" ? \"animate-tab-slide-right\" : \"animate-tab-slide-left\",\n          ].join(\" \")}\n        >\n          {activeTab.content}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/TagInput.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TagInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    maxTags?: number;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare function TagInput({ value, defaultValue, onChange, placeholder, label, hint, maxTags, fullWidth, className, }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+export { TagInput };