@blurrow/ui 0.1.0 → 0.2.1

package/dist/EmptyState.js

@@ -0,0 +1,55 @@
+// ../../components/ui/EmptyState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["rounded-[20px] p-1.5", className].filter(Boolean).join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative bg-panel-face rounded-[15px] overflow-hidden flex flex-col items-center justify-center text-center py-14 px-6",
+          style: { boxShadow: "var(--panel-face-shadow)" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-0",
+                style: {
+                  backgroundImage: "radial-gradient(var(--dots) 1px, transparent 1px)",
+                  backgroundSize: "14px 14px",
+                  maskImage: "radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)",
+                  WebkitMaskImage: "radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)"
+                }
+              }
+            ),
+            icon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "relative w-12 h-12 rounded-[14px] flex items-center justify-center text-ink-muted mb-5",
+                style: { background: "var(--face)", boxShadow: "var(--face-shadow), var(--face-drop)" },
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "relative text-[15px] font-semibold text-ink tracking-[-0.015em]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "relative text-[13px] text-ink-muted mt-1.5 max-w-xs leading-relaxed", children: description }),
+            action && /* @__PURE__ */ jsx("div", { className: "relative mt-6", children: action })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface EmptyStateProps {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  action?: React.ReactNode;\n  className?: string;\n}\n\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  className = \"\",\n}: EmptyStateProps) {\n  return (\n    <div\n      className={[\"rounded-[20px] p-1.5\", className].filter(Boolean).join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <div\n        className=\"relative bg-panel-face rounded-[15px] overflow-hidden flex flex-col items-center justify-center text-center py-14 px-6\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        {/* A faint dotted floor: the space is empty, not broken */}\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0\"\n          style={{\n            backgroundImage: \"radial-gradient(var(--dots) 1px, transparent 1px)\",\n            backgroundSize: \"14px 14px\",\n            maskImage: \"radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)\",\n            WebkitMaskImage: \"radial-gradient(60% 70% at 50% 40%, black 0%, transparent 100%)\",\n          }}\n        />\n        {icon && (\n          <div\n            aria-hidden\n            className=\"relative w-12 h-12 rounded-[14px] flex items-center justify-center text-ink-muted mb-5\"\n            style={{ background: \"var(--face)\", boxShadow: \"var(--face-shadow), var(--face-drop)\" }}\n          >\n            {icon}\n          </div>\n        )}\n        <p className=\"relative text-[15px] font-semibold text-ink tracking-[-0.015em]\">{title}</p>\n        {description && (\n          <p className=\"relative text-[13px] text-ink-muted mt-1.5 max-w-xs leading-relaxed\">{description}</p>\n        )}\n        {action && <div className=\"relative mt-6\">{action}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAsBM,SAKE,KALF;AAZC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,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,UAG/C;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,iBAAiB;AAAA,kBACjB,gBAAgB;AAAA,kBAChB,WAAW;AAAA,kBACX,iBAAiB;AAAA,gBACnB;AAAA;AAAA,YACF;AAAA,YACC,QACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,eAAe,WAAW,uCAAuC;AAAA,gBAErF;AAAA;AAAA,YACH;AAAA,YAEF,oBAAC,OAAE,WAAU,mEAAmE,iBAAM;AAAA,YACrF,eACC,oBAAC,OAAE,WAAU,uEAAuE,uBAAY;AAAA,YAEjG,UAAU,oBAAC,SAAI,WAAU,iBAAiB,kBAAO;AAAA;AAAA;AAAA,MACpD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/FieldMessage.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+declare function FieldLabel({ id, htmlFor, children, }: {
+    id?: string;
+    htmlFor?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function FieldMessage({ id, error, hint }: {
+    id?: string;
+    error?: string;
+    hint?: string;
+}): react_jsx_runtime.JSX.Element | null;
+declare function FieldKey({ label, disabled, onClick, onPress, onRelease, focusable, size, children, }: {
+    label: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    /** Pointer went down (for hold-to-repeat) */
+    onPress?: () => void;
+    onRelease?: () => void;
+    focusable?: boolean;
+    size?: number;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { FieldKey, FieldLabel, FieldMessage };

package/dist/FieldMessage.js

@@ -0,0 +1,95 @@
+"use client";
+
+// ../../components/ui/FieldMessage.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldLabel({
+  id,
+  htmlFor,
+  children
+}) {
+  const className = "text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong";
+  return htmlFor ? /* @__PURE__ */ jsx("label", { id, htmlFor, className, children }) : /* @__PURE__ */ jsx("span", { id, className, children });
+}
+function FieldMessage({ id, error, hint }) {
+  if (error) {
+    return /* @__PURE__ */ jsxs("p", { id, role: "alert", className: "text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5", children: [
+      /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 8v4m0 4h.01" })
+      ] }),
+      error
+    ] });
+  }
+  if (hint) {
+    return /* @__PURE__ */ jsx("p", { id, className: "text-[11.5px] text-ink-muted mt-0.5", children: hint });
+  }
+  return null;
+}
+function FieldKey({
+  label,
+  disabled,
+  onClick,
+  onPress,
+  onRelease,
+  focusable = true,
+  size = 28,
+  children
+}) {
+  const [pressed, setPressed] = React.useState(false);
+  const release = () => {
+    setPressed(false);
+    onRelease?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      tabIndex: focusable ? void 0 : -1,
+      disabled,
+      onClick,
+      onPointerDown: (e) => {
+        if (e.button !== 0) return;
+        if (!focusable) e.preventDefault();
+        setPressed(true);
+        onPress?.();
+      },
+      onPointerUp: release,
+      onPointerLeave: () => pressed && release(),
+      onPointerCancel: release,
+      className: "grid shrink-0 cursor-pointer place-items-center rounded-[9px] text-ink-muted transition-[box-shadow,color,opacity] duration-150 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink disabled:opacity-35 disabled:pointer-events-none",
+      style: {
+        width: size,
+        height: size,
+        background: "var(--face)",
+        boxShadow: pressed ? "var(--face-pressed)" : "var(--key-shadow)"
+      },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": true,
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.25",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          viewBox: "0 0 24 24",
+          style: {
+            transform: pressed ? "translateY(0.5px) scale(0.92)" : "none",
+            transition: "transform 150ms var(--ease-spring)"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  FieldKey,
+  FieldLabel,
+  FieldMessage
+};
+//# sourceMappingURL=FieldMessage.js.map

package/dist/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/FieldMessage.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\n/* The label above a field and the line under it, shared by every form\n   control so they read as one family.                                */\n\nexport function FieldLabel({\n  id,\n  htmlFor,\n  children,\n}: {\n  id?: string;\n  htmlFor?: string;\n  children: React.ReactNode;\n}) {\n  const className =\n    \"text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong\";\n  return htmlFor ? (\n    <label id={id} htmlFor={htmlFor} className={className}>\n      {children}\n    </label>\n  ) : (\n    <span id={id} className={className}>\n      {children}\n    </span>\n  );\n}\n\n/* An error wins over a hint; either is announced through `id` */\nexport function FieldMessage({ id, error, hint }: { id?: string; error?: string; hint?: string }) {\n  if (error) {\n    return (\n      <p id={id} role=\"alert\" className=\"text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5\">\n        <svg aria-hidden width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path strokeLinecap=\"round\" d=\"M12 8v4m0 4h.01\" />\n        </svg>\n        {error}\n      </p>\n    );\n  }\n  if (hint) {\n    return (\n      <p id={id} className=\"text-[11.5px] text-ink-muted mt-0.5\">\n        {hint}\n      </p>\n    );\n  }\n  return null;\n}\n\n/* A small raised key that sits inside a field or a panel: steppers,\n   month arrows, clear buttons. It sinks flush while held.            */\nexport function FieldKey({\n  label,\n  disabled,\n  onClick,\n  onPress,\n  onRelease,\n  focusable = true,\n  size = 28,\n  children,\n}: {\n  label: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  /** Pointer went down (for hold-to-repeat) */\n  onPress?: () => void;\n  onRelease?: () => void;\n  focusable?: boolean;\n  size?: number;\n  children: React.ReactNode;\n}) {\n  const [pressed, setPressed] = React.useState(false);\n  const release = () => {\n    setPressed(false);\n    onRelease?.();\n  };\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      tabIndex={focusable ? undefined : -1}\n      disabled={disabled}\n      onClick={onClick}\n      onPointerDown={(e) => {\n        if (e.button !== 0) return;\n        if (!focusable) e.preventDefault(); // keep focus in the field\n        setPressed(true);\n        onPress?.();\n      }}\n      onPointerUp={release}\n      onPointerLeave={() => pressed && release()}\n      onPointerCancel={release}\n      className=\"grid shrink-0 cursor-pointer place-items-center rounded-[9px] text-ink-muted transition-[box-shadow,color,opacity] duration-150 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink disabled:opacity-35 disabled:pointer-events-none\"\n      style={{\n        width: size,\n        height: size,\n        background: \"var(--face)\",\n        boxShadow: pressed ? \"var(--face-pressed)\" : \"var(--key-shadow)\",\n      }}\n    >\n      <svg\n        aria-hidden\n        width=\"12\"\n        height=\"12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.25\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        viewBox=\"0 0 24 24\"\n        style={{\n          transform: pressed ? \"translateY(0.5px) scale(0.92)\" : \"none\",\n          transition: \"transform 150ms var(--ease-spring)\",\n        }}\n      >\n        {children}\n      </svg>\n    </button>\n  );\n}\n"],"mappings":";;;AAEA,OAAO,WAAW;AAiBd,cAeI,YAfJ;AAZG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,YACJ;AACF,SAAO,UACL,oBAAC,WAAM,IAAQ,SAAkB,WAC9B,UACH,IAEA,oBAAC,UAAK,IAAQ,WACX,UACH;AAEJ;AAGO,SAAS,aAAa,EAAE,IAAI,OAAO,KAAK,GAAmD;AAChG,MAAI,OAAO;AACT,WACE,qBAAC,OAAE,IAAQ,MAAK,SAAQ,WAAU,wEAChC;AAAA,2BAAC,SAAI,eAAW,MAAC,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,SAAQ,aAChG;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,QAC/B,oBAAC,UAAK,eAAc,SAAQ,GAAE,mBAAkB;AAAA,SAClD;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACA,MAAI,MAAM;AACR,WACE,oBAAC,OAAE,IAAQ,WAAU,uCAClB,gBACH;AAAA,EAEJ;AACA,SAAO;AACT;AAIO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AACF,GAUG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,UAAU,MAAM;AACpB,eAAW,KAAK;AAChB,gBAAY;AAAA,EACd;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU,YAAY,SAAY;AAAA,MAClC;AAAA,MACA;AAAA,MACA,eAAe,CAAC,MAAM;AACpB,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,CAAC,UAAW,GAAE,eAAe;AACjC,mBAAW,IAAI;AACf,kBAAU;AAAA,MACZ;AAAA,MACA,aAAa;AAAA,MACb,gBAAgB,MAAM,WAAW,QAAQ;AAAA,MACzC,iBAAiB;AAAA,MACjB,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,WAAW,UAAU,wBAAwB;AAAA,MAC/C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,SAAQ;AAAA,UACR,OAAO;AAAA,YACL,WAAW,UAAU,kCAAkC;AAAA,YACvD,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UploadItem {
+    id: string;
+    file: File;
+    /** 0–100 while uploading */
+    progress: number;
+    status: "ready" | "uploading" | "done" | "error";
+    error?: string;
+}
+interface FileUploadProps {
+    /** Same as the input's accept: "image/*", ".pdf,.docx" */
+    accept?: string;
+    multiple?: boolean;
+    /** In bytes; bigger files land with an error instead of uploading */
+    maxSize?: number;
+    maxFiles?: number;
+    /** Upload each file as it lands. Call onProgress with 0–100; throw to fail it */
+    upload?: (file: File, onProgress: (pct: number) => void) => Promise<void>;
+    /** Every change to the list: added, progressed, finished, removed */
+    onChange?: (items: UploadItem[]) => void;
+    label?: string;
+    hint?: string;
+    /** The words in the empty tray */
+    prompt?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function formatBytes(n: number): string;
+declare function FileUpload({ accept, multiple, maxSize, maxFiles, upload, onChange, label, hint, prompt, disabled, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+export { FileUpload, type UploadItem, formatBytes };

package/dist/FileUpload.js

@@ -0,0 +1,253 @@
+"use client";
+
+// ../../components/ui/FileUpload.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "./Button.js";
+import { CloseButton } from "./CloseButton.js";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function formatBytes(n) {
+  if (n < 1024) return `${n} b`;
+  const units = ["kb", "mb", "gb"];
+  let i = -1;
+  do {
+    n /= 1024;
+    i++;
+  } while (n >= 1024 && i < units.length - 1);
+  return `${n.toFixed(n < 10 ? 1 : 0)} ${units[i]}`;
+}
+function accepts(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const r = rule.trim().toLowerCase();
+    if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r);
+    if (r.endsWith("/*")) return file.type.startsWith(r.slice(0, -1));
+    return file.type === r;
+  });
+}
+var seq = 0;
+function FileUpload({
+  accept,
+  multiple = true,
+  maxSize,
+  maxFiles,
+  upload,
+  onChange,
+  label,
+  hint,
+  prompt,
+  disabled = false,
+  className = ""
+}) {
+  const uid = useId();
+  const inputRef = useRef(null);
+  const [items, setItems] = useState([]);
+  const [previews, setPreviews] = useState({});
+  const [over, setOver] = useState(false);
+  const [notice, setNotice] = useState(null);
+  const depth = useRef(0);
+  const report = useRef(onChange);
+  useEffect(() => {
+    report.current = onChange;
+  });
+  useEffect(() => {
+    report.current?.(items);
+  }, [items]);
+  const urls = useRef(previews);
+  useEffect(() => {
+    urls.current = previews;
+  });
+  useEffect(() => () => Object.values(urls.current).forEach(URL.revokeObjectURL), []);
+  const patch = (id, p) => setItems((list) => list.map((it) => it.id === id ? { ...it, ...p } : it));
+  const start = (item) => {
+    if (!upload) return;
+    patch(item.id, { status: "uploading", progress: 0 });
+    upload(item.file, (pct) => patch(item.id, { progress: Math.max(0, Math.min(100, pct)) })).then(() => patch(item.id, { status: "done", progress: 100 })).catch(
+      (err) => patch(item.id, { status: "error", error: err instanceof Error ? err.message : "upload failed" })
+    );
+  };
+  const add = (files) => {
+    if (disabled) return;
+    let list = Array.from(files);
+    if (!multiple) list = list.slice(0, 1);
+    const room = maxFiles ? Math.max(0, maxFiles - (multiple ? items.length : 0)) : Infinity;
+    setNotice(list.length > room ? `only ${maxFiles} file${maxFiles === 1 ? "" : "s"} can go in` : null);
+    const next = list.slice(0, room).map((file) => {
+      const id = `${uid}-${++seq}`;
+      if (!accepts(file, accept)) return { id, file, progress: 0, status: "error", error: "not a type this takes" };
+      if (maxSize && file.size > maxSize)
+        return { id, file, progress: 0, status: "error", error: `over ${formatBytes(maxSize)}` };
+      return { id, file, progress: 0, status: "ready" };
+    });
+    const shots = {};
+    next.forEach((it) => {
+      if (it.file.type.startsWith("image/") && it.status !== "error") shots[it.id] = URL.createObjectURL(it.file);
+    });
+    if (!multiple) Object.values(previews).forEach(URL.revokeObjectURL);
+    setPreviews((p) => multiple ? { ...p, ...shots } : shots);
+    setItems((cur) => multiple ? [...cur, ...next] : next);
+    next.filter((it) => it.status === "ready").forEach(start);
+  };
+  const remove = (id) => {
+    if (previews[id]) URL.revokeObjectURL(previews[id]);
+    setPreviews((p) => {
+      const rest = { ...p };
+      delete rest[id];
+      return rest;
+    });
+    setItems((list) => list.filter((it) => it.id !== id));
+  };
+  const browse = () => !disabled && inputRef.current?.click();
+  const full = !!maxFiles && multiple && items.length >= maxFiles;
+  const empty = items.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex w-full flex-col gap-1.5", className].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": label ? `${uid}-label` : void 0,
+        "aria-describedby": hint ? `${uid}-hint` : void 0,
+        "data-open": over || void 0,
+        onDragEnter: (e) => {
+          e.preventDefault();
+          if (disabled) return;
+          depth.current++;
+          setOver(true);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: () => {
+          if (--depth.current <= 0) setOver(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          depth.current = 0;
+          setOver(false);
+          add(e.dataTransfer.files);
+        },
+        className: [
+          "field relative flex flex-col rounded-[18px] p-2",
+          disabled ? "pointer-events-none opacity-40" : ""
+        ].join(" "),
+        children: [
+          empty ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex cursor-pointer flex-col items-center gap-3.5 px-6 py-9 text-center",
+              onClick: (e) => e.target === e.currentTarget && browse(),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[14px] font-medium text-ink tracking-[-0.01em]", children: over ? "let go to drop them in" : prompt ?? (multiple ? "drop files here" : "drop a file here") }),
+                  hint && /* @__PURE__ */ jsx("span", { id: `${uid}-hint`, className: "text-[12px] text-ink-muted", children: hint })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: browse, disabled, children: multiple ? "choose files" : "choose a file" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("ul", { "aria-label": "files", className: "flex flex-col gap-1.5", children: items.map((it) => /* @__PURE__ */ jsx(FileChip, { item: it, preview: previews[it.id], onRemove: () => remove(it.id) }, it.id)) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 pl-2.5 pr-0.5 pt-2.5 pb-0.5", children: [
+              /* @__PURE__ */ jsx("span", { id: `${uid}-hint`, className: "truncate text-[12px] text-ink-muted", children: over ? "let go to add them" : hint ?? `${items.length} file${items.length === 1 ? "" : "s"}` }),
+              !full && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: browse, disabled, children: multiple ? "add more" : "replace" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              className: "sr-only",
+              onChange: (e) => {
+                if (e.target.files) add(e.target.files);
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    notice && /* @__PURE__ */ jsx(FieldMessage, { error: notice })
+  ] });
+}
+function FileChip({ item, preview, onRemove }) {
+  const failed = item.status === "error";
+  const meta = failed ? item.error : item.status === "uploading" ? `${formatBytes(item.file.size)} \xB7 ${Math.round(item.progress)}%` : item.status === "done" ? `${formatBytes(item.file.size)} \xB7 uploaded` : formatBytes(item.file.size);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "relative flex items-center gap-3 overflow-hidden rounded-[12px] pt-2.5 pb-3.5 pl-2.5 pr-2",
+      style: {
+        background: "var(--face)",
+        boxShadow: "var(--thumb-shadow)",
+        animation: "select-option-in 320ms var(--ease-out-soft) both"
+      },
+      children: [
+        preview && // eslint-disable-next-line @next/next/no-img-element -- a local object URL, nothing to optimise
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview,
+            alt: "",
+            className: "h-9 w-9 shrink-0 rounded-[8px] object-cover",
+            style: { boxShadow: "inset 0 0 0 1px var(--hairline), var(--key-shadow)" }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-ink", children: item.file.name }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: [
+                "flex items-center gap-1 truncate text-[11.5px] tabular-nums",
+                failed ? "text-danger" : "text-ink-muted"
+              ].join(" "),
+              children: [
+                item.status === "done" && /* @__PURE__ */ jsx("svg", { "aria-hidden": true, width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "2.75", viewBox: "0 0 24 24", className: "text-success", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
+                meta
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CloseButton, { size: "sm", label: `remove ${item.file.name}`, onClick: onRemove }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": item.status !== "uploading",
+            role: item.status === "uploading" ? "progressbar" : void 0,
+            "aria-label": item.status === "uploading" ? `uploading ${item.file.name}` : void 0,
+            "aria-valuenow": item.status === "uploading" ? Math.round(item.progress) : void 0,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            className: "absolute inset-x-2.5 bottom-[6px] h-[3px] rounded-full transition-opacity duration-500",
+            style: {
+              background: "var(--track)",
+              boxShadow: "var(--track-shadow)",
+              opacity: item.status === "uploading" ? 1 : 0,
+              transitionDelay: item.status === "done" ? "400ms" : "0ms"
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block h-full rounded-full",
+                style: {
+                  width: `${item.progress}%`,
+                  background: "var(--face-inverse)",
+                  transition: "width 300ms var(--ease-out-soft)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FileUpload,
+  formatBytes
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/FileUpload.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { Button } from \"./Button\";\nimport { CloseButton } from \"./CloseButton\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\n\nexport interface UploadItem {\n  id: string;\n  file: File;\n  /** 0–100 while uploading */\n  progress: number;\n  status: \"ready\" | \"uploading\" | \"done\" | \"error\";\n  error?: string;\n}\n\ninterface FileUploadProps {\n  /** Same as the input's accept: \"image/*\", \".pdf,.docx\" */\n  accept?: string;\n  multiple?: boolean;\n  /** In bytes; bigger files land with an error instead of uploading */\n  maxSize?: number;\n  maxFiles?: number;\n  /** Upload each file as it lands. Call onProgress with 0–100; throw to fail it */\n  upload?: (file: File, onProgress: (pct: number) => void) => Promise<void>;\n  /** Every change to the list: added, progressed, finished, removed */\n  onChange?: (items: UploadItem[]) => void;\n  label?: string;\n  hint?: string;\n  /** The words in the empty tray */\n  prompt?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function formatBytes(n: number) {\n  if (n < 1024) return `${n} b`;\n  const units = [\"kb\", \"mb\", \"gb\"];\n  let i = -1;\n  do {\n    n /= 1024;\n    i++;\n  } while (n >= 1024 && i < units.length - 1);\n  return `${n.toFixed(n < 10 ? 1 : 0)} ${units[i]}`;\n}\n\n/* Matches a file against an accept string the way the browser's picker does */\nfunction accepts(file: File, accept?: string) {\n  if (!accept) return true;\n  return accept.split(\",\").some((rule) => {\n    const r = rule.trim().toLowerCase();\n    if (r.startsWith(\".\")) return file.name.toLowerCase().endsWith(r);\n    if (r.endsWith(\"/*\")) return file.type.startsWith(r.slice(0, -1));\n    return file.type === r;\n  });\n}\n\nlet seq = 0;\n\n/* Something you fill, so it's built as a field: a wide sunken tray. Drag\n   files over it and it lifts flush and draws its border, the way an\n   Input does when it takes focus. What you drop lands inside it as\n   raised chips; each has a groove along its foot that fills while it\n   uploads, then fades once it's done.                               */\nexport function FileUpload({\n  accept,\n  multiple = true,\n  maxSize,\n  maxFiles,\n  upload,\n  onChange,\n  label,\n  hint,\n  prompt,\n  disabled = false,\n  className = \"\",\n}: FileUploadProps) {\n  const uid = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [items, setItems] = useState<UploadItem[]>([]);\n  const [previews, setPreviews] = useState<Record<string, string>>({});\n  const [over, setOver] = useState(false);\n  const [notice, setNotice] = useState<string | null>(null);\n  const depth = useRef(0);\n\n  // Report every change to the list, after it renders\n  const report = useRef(onChange);\n  useEffect(() => {\n    report.current = onChange;\n  });\n  useEffect(() => {\n    report.current?.(items);\n  }, [items]);\n\n  // Image previews are object URLs; give them back when they're gone\n  const urls = useRef(previews);\n  useEffect(() => {\n    urls.current = previews;\n  });\n  useEffect(() => () => Object.values(urls.current).forEach(URL.revokeObjectURL), []);\n\n  const patch = (id: string, p: Partial<UploadItem>) =>\n    setItems((list) => list.map((it) => (it.id === id ? { ...it, ...p } : it)));\n\n  const start = (item: UploadItem) => {\n    if (!upload) return;\n    patch(item.id, { status: \"uploading\", progress: 0 });\n    upload(item.file, (pct) => patch(item.id, { progress: Math.max(0, Math.min(100, pct)) }))\n      .then(() => patch(item.id, { status: \"done\", progress: 100 }))\n      .catch((err: unknown) =>\n        patch(item.id, { status: \"error\", error: err instanceof Error ? err.message : \"upload failed\" }),\n      );\n  };\n\n  const add = (files: FileList | File[]) => {\n    if (disabled) return;\n    let list = Array.from(files);\n    if (!multiple) list = list.slice(0, 1);\n    const room = maxFiles ? Math.max(0, maxFiles - (multiple ? items.length : 0)) : Infinity;\n    setNotice(list.length > room ? `only ${maxFiles} file${maxFiles === 1 ? \"\" : \"s\"} can go in` : null);\n    const next: UploadItem[] = list.slice(0, room).map((file) => {\n      const id = `${uid}-${++seq}`;\n      if (!accepts(file, accept)) return { id, file, progress: 0, status: \"error\", error: \"not a type this takes\" };\n      if (maxSize && file.size > maxSize)\n        return { id, file, progress: 0, status: \"error\", error: `over ${formatBytes(maxSize)}` };\n      return { id, file, progress: 0, status: \"ready\" };\n    });\n    const shots: Record<string, string> = {};\n    next.forEach((it) => {\n      if (it.file.type.startsWith(\"image/\") && it.status !== \"error\") shots[it.id] = URL.createObjectURL(it.file);\n    });\n    if (!multiple) Object.values(previews).forEach(URL.revokeObjectURL);\n    setPreviews((p) => (multiple ? { ...p, ...shots } : shots));\n    setItems((cur) => (multiple ? [...cur, ...next] : next));\n    next.filter((it) => it.status === \"ready\").forEach(start);\n  };\n\n  const remove = (id: string) => {\n    if (previews[id]) URL.revokeObjectURL(previews[id]);\n    setPreviews((p) => {\n      const rest = { ...p };\n      delete rest[id];\n      return rest;\n    });\n    setItems((list) => list.filter((it) => it.id !== id));\n  };\n\n  const browse = () => !disabled && inputRef.current?.click();\n  const full = !!maxFiles && multiple && items.length >= maxFiles;\n  const empty = items.length === 0;\n\n  return (\n    <div className={[\"group/field flex w-full flex-col gap-1.5\", className].join(\" \")}>\n      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}\n\n      {/* The tray: a field, so data-open gives it Input's focused well */}\n      <div\n        role=\"group\"\n        aria-labelledby={label ? `${uid}-label` : undefined}\n        aria-describedby={hint ? `${uid}-hint` : undefined}\n        data-open={over || undefined}\n        onDragEnter={(e) => {\n          e.preventDefault();\n          if (disabled) return;\n          depth.current++;\n          setOver(true);\n        }}\n        onDragOver={(e) => e.preventDefault()}\n        onDragLeave={() => {\n          // dragleave fires for every child crossed; only the last one counts\n          if (--depth.current <= 0) setOver(false);\n        }}\n        onDrop={(e) => {\n          e.preventDefault();\n          depth.current = 0;\n          setOver(false);\n          add(e.dataTransfer.files);\n        }}\n        className={[\n          \"field relative flex flex-col rounded-[18px] p-2\",\n          disabled ? \"pointer-events-none opacity-40\" : \"\",\n        ].join(\" \")}\n      >\n        {empty ? (\n          <div\n            className=\"flex cursor-pointer flex-col items-center gap-3.5 px-6 py-9 text-center\"\n            onClick={(e) => e.target === e.currentTarget && browse()}\n          >\n            <span className=\"flex flex-col gap-1\">\n              <span className=\"text-[14px] font-medium text-ink tracking-[-0.01em]\">\n                {over ? \"let go to drop them in\" : prompt ?? (multiple ? \"drop files here\" : \"drop a file here\")}\n              </span>\n              {hint && (\n                <span id={`${uid}-hint`} className=\"text-[12px] text-ink-muted\">\n                  {hint}\n                </span>\n              )}\n            </span>\n            <Button variant=\"secondary\" size=\"sm\" onClick={browse} disabled={disabled}>\n              {multiple ? \"choose files\" : \"choose a file\"}\n            </Button>\n          </div>\n        ) : (\n          <>\n            <ul aria-label=\"files\" className=\"flex flex-col gap-1.5\">\n              {items.map((it) => (\n                <FileChip key={it.id} item={it} preview={previews[it.id]} onRemove={() => remove(it.id)} />\n              ))}\n            </ul>\n            <div className=\"flex items-center justify-between gap-3 pl-2.5 pr-0.5 pt-2.5 pb-0.5\">\n              <span id={`${uid}-hint`} className=\"truncate text-[12px] text-ink-muted\">\n                {over ? \"let go to add them\" : hint ?? `${items.length} file${items.length === 1 ? \"\" : \"s\"}`}\n              </span>\n              {!full && (\n                <Button variant=\"secondary\" size=\"sm\" onClick={browse} disabled={disabled}>\n                  {multiple ? \"add more\" : \"replace\"}\n                </Button>\n              )}\n            </div>\n          </>\n        )}\n\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          tabIndex={-1}\n          aria-hidden\n          className=\"sr-only\"\n          onChange={(e) => {\n            if (e.target.files) add(e.target.files);\n            e.target.value = \"\"; // so picking the same file again still fires\n          }}\n        />\n      </div>\n\n      {notice && <FieldMessage error={notice} />}\n    </div>\n  );\n}\n\n/* A raised chip sitting in the tray. The groove along its foot is a\n   Progress track in miniature; it fills, then fades once the file is up. */\nfunction FileChip({ item, preview, onRemove }: { item: UploadItem; preview?: string; onRemove: () => void }) {\n  const failed = item.status === \"error\";\n  const meta = failed\n    ? item.error\n    : item.status === \"uploading\"\n      ? `${formatBytes(item.file.size)} · ${Math.round(item.progress)}%`\n      : item.status === \"done\"\n        ? `${formatBytes(item.file.size)} · uploaded`\n        : formatBytes(item.file.size);\n  return (\n    <li\n      className=\"relative flex items-center gap-3 overflow-hidden rounded-[12px] pt-2.5 pb-3.5 pl-2.5 pr-2\"\n      style={{\n        background: \"var(--face)\",\n        boxShadow: \"var(--thumb-shadow)\",\n        animation: \"select-option-in 320ms var(--ease-out-soft) both\",\n      }}\n    >\n      {preview && (\n        // eslint-disable-next-line @next/next/no-img-element -- a local object URL, nothing to optimise\n        <img\n          src={preview}\n          alt=\"\"\n          className=\"h-9 w-9 shrink-0 rounded-[8px] object-cover\"\n          style={{ boxShadow: \"inset 0 0 0 1px var(--hairline), var(--key-shadow)\" }}\n        />\n      )}\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-[13px] font-medium text-ink\">{item.file.name}</span>\n        <span\n          className={[\n            \"flex items-center gap-1 truncate text-[11.5px] tabular-nums\",\n            failed ? \"text-danger\" : \"text-ink-muted\",\n          ].join(\" \")}\n        >\n          {item.status === \"done\" && (\n            <svg aria-hidden width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.75\" viewBox=\"0 0 24 24\" className=\"text-success\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n            </svg>\n          )}\n          {meta}\n        </span>\n      </span>\n      <CloseButton size=\"sm\" label={`remove ${item.file.name}`} onClick={onRemove} />\n\n      {/* The groove along the chip's foot */}\n      <span\n        aria-hidden={item.status !== \"uploading\"}\n        role={item.status === \"uploading\" ? \"progressbar\" : undefined}\n        aria-label={item.status === \"uploading\" ? `uploading ${item.file.name}` : undefined}\n        aria-valuenow={item.status === \"uploading\" ? Math.round(item.progress) : undefined}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        className=\"absolute inset-x-2.5 bottom-[6px] h-[3px] rounded-full transition-opacity duration-500\"\n        style={{\n          background: \"var(--track)\",\n          boxShadow: \"var(--track-shadow)\",\n          opacity: item.status === \"uploading\" ? 1 : 0,\n          transitionDelay: item.status === \"done\" ? \"400ms\" : \"0ms\",\n        }}\n      >\n        <span\n          className=\"block h-full rounded-full\"\n          style={{\n            width: `${item.progress}%`,\n            background: \"var(--face-inverse)\",\n            transition: \"width 300ms var(--ease-out-soft)\",\n          }}\n        />\n      </span>\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Floating.d.ts

@@ -0,0 +1,32 @@
+import React, { RefObject } from 'react';
+
+declare function Portal({ children }: {
+    children: React.ReactNode;
+}): React.ReactPortal | null;
+declare const LAYER: {
+    readonly dialog: 90;
+    readonly toast: 95;
+    readonly floating: 100;
+    readonly tooltip: 110;
+};
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+interface AnchorOptions {
+    open: boolean;
+    side?: Side;
+    align?: Align;
+    /** Space between the anchor and the panel */
+    gap?: number;
+    /** Make the panel at least as wide as the anchor (selects, comboboxes) */
+    matchWidth?: boolean;
+}
+declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null>, { open, side, align, gap, matchWidth }: AnchorOptions): {
+    setFloating: (el: HTMLElement | null) => void;
+    side: Side;
+    floatingRef: React.RefObject<HTMLElement | null>;
+    update: () => void;
+};
+declare const ORIGIN: Record<Side, string>;
+declare const ENTER_FROM: Record<Side, string>;
+
+export { type Align, ENTER_FROM, LAYER, ORIGIN, Portal, type Side, useAnchoredPosition };

package/dist/Floating.js

@@ -0,0 +1,95 @@
+"use client";
+
+// ../../components/ui/Floating.tsx
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+var noop = () => () => {
+};
+function Portal({ children }) {
+  const client = useSyncExternalStore(noop, () => true, () => false);
+  return client ? createPortal(children, document.body) : null;
+}
+var LAYER = { dialog: 90, toast: 95, floating: 100, tooltip: 110 };
+var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+var PAD = 8;
+function useAnchoredPosition(anchor, { open, side = "bottom", align = "start", gap = 8, matchWidth = false }) {
+  const [placed, setPlaced] = useState(side);
+  const floating = useRef(null);
+  const update = useCallback(() => {
+    const a = anchor.current?.getBoundingClientRect();
+    const el = floating.current;
+    if (!a || !el) return;
+    if (matchWidth) el.style.minWidth = `${a.width}px`;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = document.documentElement.clientWidth;
+    const vh = window.innerHeight;
+    const room = { top: a.top, bottom: vh - a.bottom, left: a.left, right: vw - a.right };
+    const vertical = side === "top" || side === "bottom";
+    const need = (vertical ? h : w) + gap + PAD;
+    let s = side;
+    if (room[s] < need && room[OPPOSITE[s]] > room[s]) s = OPPOSITE[s];
+    let top;
+    let left;
+    if (s === "top" || s === "bottom") {
+      top = s === "bottom" ? a.bottom + gap : a.top - gap - h;
+      left = align === "start" ? a.left : align === "end" ? a.right - w : a.left + (a.width - w) / 2;
+    } else {
+      left = s === "right" ? a.right + gap : a.left - gap - w;
+      top = align === "start" ? a.top : align === "end" ? a.bottom - h : a.top + (a.height - h) / 2;
+    }
+    left = Math.max(PAD, Math.min(left, vw - w - PAD));
+    top = Math.max(PAD, Math.min(top, vh - h - PAD));
+    el.style.top = `${Math.round(top)}px`;
+    el.style.left = `${Math.round(left)}px`;
+    el.dataset.side = s;
+    setPlaced(s);
+  }, [anchor, side, align, gap, matchWidth]);
+  const setFloating = useCallback(
+    (el) => {
+      floating.current = el;
+      if (el) update();
+    },
+    [update]
+  );
+  useEffect(() => {
+    if (!open) return;
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const ro = new ResizeObserver(schedule);
+    if (floating.current) ro.observe(floating.current);
+    if (anchor.current) ro.observe(anchor.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      ro.disconnect();
+    };
+  }, [open, update, anchor]);
+  return { setFloating, side: placed, floatingRef: floating, update };
+}
+var ORIGIN = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+var ENTER_FROM = {
+  top: "translateY(4px)",
+  bottom: "translateY(-4px)",
+  left: "translateX(4px)",
+  right: "translateX(-4px)"
+};
+export {
+  ENTER_FROM,
+  LAYER,
+  ORIGIN,
+  Portal,
+  useAnchoredPosition
+};
+//# sourceMappingURL=Floating.js.map