@blurrow/ui 0.1.0 → 0.2.1

package/dist/ReactionBar.js

@@ -0,0 +1,92 @@
+"use client";
+
+// ../../components/ui/ReactionBar.tsx
+import { useState, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultReactions = [
+  { emoji: "\u{1F44F}", label: "clap", count: 0 },
+  { emoji: "\u2764\uFE0F", label: "love", count: 0 },
+  { emoji: "\u{1F525}", label: "fire", count: 0 },
+  { emoji: "\u{1F4A1}", label: "insightful", count: 0 },
+  { emoji: "\u{1F389}", label: "celebrate", count: 0 }
+];
+function ReactionBar({
+  reactions: initialReactions,
+  className = ""
+}) {
+  const [reactions, setReactions] = useState(
+    initialReactions ?? defaultReactions
+  );
+  const [animatingKey, setAnimatingKey] = useState(null);
+  const timeoutRef = useRef(null);
+  const handleClick = useCallback(
+    (index) => {
+      setReactions(
+        (prev) => prev.map((r, i) => {
+          if (i !== index) return r;
+          return {
+            ...r,
+            active: !r.active,
+            count: r.active ? r.count - 1 : r.count + 1
+          };
+        })
+      );
+      const key = reactions[index].label;
+      setAnimatingKey(key);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setAnimatingKey(null), 300);
+    },
+    [reactions]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "),
+      children: reactions.map((reaction, index) => {
+        const isAnimating = animatingKey === reaction.label;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick(index),
+            "aria-pressed": !!reaction.active,
+            "aria-label": `${reaction.label}, ${reaction.count}`,
+            className: [
+              "inline-flex items-center gap-1.5 rounded-[11px] pl-2.5 pr-3 py-[7px] text-[13px] font-medium cursor-pointer",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+              reaction.active ? "text-ink-inverse" : "text-ink-body hover:text-ink"
+            ].join(" "),
+            style: {
+              /* Off is a raised face; on is the dark face — pressed in and lit */
+              background: reaction.active ? "var(--face-inverse)" : "var(--face)",
+              boxShadow: reaction.active ? "var(--face-inverse-shadow)" : "var(--face-shadow)",
+              textShadow: reaction.active ? "var(--emboss-inverse)" : "var(--emboss)",
+              transform: isAnimating ? "scale(1.08)" : "scale(1)",
+              transition: "transform 250ms var(--ease-spring), color 200ms ease, box-shadow 200ms ease"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[15px] leading-none", children: reaction.emoji }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "tabular-nums leading-none",
+                  style: {
+                    transform: isAnimating ? "scale(1.15)" : "scale(1)",
+                    display: "inline-block",
+                    transition: "transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1)"
+                  },
+                  children: reaction.count
+                }
+              )
+            ]
+          },
+          reaction.label
+        );
+      })
+    }
+  );
+}
+export {
+  ReactionBar
+};
+//# sourceMappingURL=ReactionBar.js.map

package/dist/ReactionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ReactionBar.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback, useRef } from \"react\";\n\nexport interface ReactionItem {\n  emoji: string;\n  label: string;\n  count: number;\n  active?: boolean;\n}\n\ninterface ReactionBarProps {\n  reactions?: ReactionItem[];\n  className?: string;\n}\n\nconst defaultReactions: ReactionItem[] = [\n  { emoji: \"👏\", label: \"clap\", count: 0 },\n  { emoji: \"❤️\", label: \"love\", count: 0 },\n  { emoji: \"🔥\", label: \"fire\", count: 0 },\n  { emoji: \"💡\", label: \"insightful\", count: 0 },\n  { emoji: \"🎉\", label: \"celebrate\", count: 0 },\n];\n\nexport function ReactionBar({\n  reactions: initialReactions,\n  className = \"\",\n}: ReactionBarProps) {\n  const [reactions, setReactions] = useState<ReactionItem[]>(\n    initialReactions ?? defaultReactions\n  );\n  const [animatingKey, setAnimatingKey] = useState<string | null>(null);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleClick = useCallback(\n    (index: number) => {\n      setReactions((prev) =>\n        prev.map((r, i) => {\n          if (i !== index) return r;\n          return {\n            ...r,\n            active: !r.active,\n            count: r.active ? r.count - 1 : r.count + 1,\n          };\n        })\n      );\n\n      const key = reactions[index].label;\n      setAnimatingKey(key);\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => setAnimatingKey(null), 300);\n    },\n    [reactions]\n  );\n\n  return (\n    <div\n      className={[\"flex flex-wrap gap-2\", className].filter(Boolean).join(\" \")}\n    >\n      {reactions.map((reaction, index) => {\n        const isAnimating = animatingKey === reaction.label;\n        return (\n          <button\n            key={reaction.label}\n            type=\"button\"\n            onClick={() => handleClick(index)}\n            aria-pressed={!!reaction.active}\n            aria-label={`${reaction.label}, ${reaction.count}`}\n            className={[\n              \"inline-flex items-center gap-1.5 rounded-[11px] pl-2.5 pr-3 py-[7px] text-[13px] font-medium cursor-pointer\",\n              \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n              reaction.active ? \"text-ink-inverse\" : \"text-ink-body hover:text-ink\",\n            ].join(\" \")}\n            style={{\n              /* Off is a raised face; on is the dark face — pressed in and lit */\n              background: reaction.active ? \"var(--face-inverse)\" : \"var(--face)\",\n              boxShadow: reaction.active ? \"var(--face-inverse-shadow)\" : \"var(--face-shadow)\",\n              textShadow: reaction.active ? \"var(--emboss-inverse)\" : \"var(--emboss)\",\n              transform: isAnimating ? \"scale(1.08)\" : \"scale(1)\",\n              transition:\n                \"transform 250ms var(--ease-spring), color 200ms ease, box-shadow 200ms ease\",\n            }}\n          >\n            <span aria-hidden className=\"text-[15px] leading-none\">{reaction.emoji}</span>\n            <span\n              className=\"tabular-nums leading-none\"\n              style={{\n                transform: isAnimating ? \"scale(1.15)\" : \"scale(1)\",\n                display: \"inline-block\",\n                transition:\n                  \"transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1)\",\n              }}\n            >\n              {reaction.count}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,UAAU,aAAa,cAAc;AA4D3C,SAqBE,KArBF;AA9CV,IAAM,mBAAmC;AAAA,EACvC,EAAE,OAAO,aAAM,OAAO,QAAQ,OAAO,EAAE;AAAA,EACvC,EAAE,OAAO,gBAAM,OAAO,QAAQ,OAAO,EAAE;AAAA,EACvC,EAAE,OAAO,aAAM,OAAO,QAAQ,OAAO,EAAE;AAAA,EACvC,EAAE,OAAO,aAAM,OAAO,cAAc,OAAO,EAAE;AAAA,EAC7C,EAAE,OAAO,aAAM,OAAO,aAAa,OAAO,EAAE;AAC9C;AAEO,SAAS,YAAY;AAAA,EAC1B,WAAW;AAAA,EACX,YAAY;AACd,GAAqB;AACnB,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,oBAAoB;AAAA,EACtB;AACA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,aAAa,OAA6C,IAAI;AAEpE,QAAM,cAAc;AAAA,IAClB,CAAC,UAAkB;AACjB;AAAA,QAAa,CAAC,SACZ,KAAK,IAAI,CAAC,GAAG,MAAM;AACjB,cAAI,MAAM,MAAO,QAAO;AACxB,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,QAAQ,CAAC,EAAE;AAAA,YACX,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,EAAE,QAAQ;AAAA,UAC5C;AAAA,QACF,CAAC;AAAA,MACH;AAEA,YAAM,MAAM,UAAU,KAAK,EAAE;AAC7B,sBAAgB,GAAG;AACnB,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,gBAAgB,IAAI,GAAG,GAAG;AAAA,IAClE;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,wBAAwB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEtE,oBAAU,IAAI,CAAC,UAAU,UAAU;AAClC,cAAM,cAAc,iBAAiB,SAAS;AAC9C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,YAAY,KAAK;AAAA,YAChC,gBAAc,CAAC,CAAC,SAAS;AAAA,YACzB,cAAY,GAAG,SAAS,KAAK,KAAK,SAAS,KAAK;AAAA,YAChD,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,SAAS,SAAS,qBAAqB;AAAA,YACzC,EAAE,KAAK,GAAG;AAAA,YACV,OAAO;AAAA;AAAA,cAEL,YAAY,SAAS,SAAS,wBAAwB;AAAA,cACtD,WAAW,SAAS,SAAS,+BAA+B;AAAA,cAC5D,YAAY,SAAS,SAAS,0BAA0B;AAAA,cACxD,WAAW,cAAc,gBAAgB;AAAA,cACzC,YACE;AAAA,YACJ;AAAA,YAEA;AAAA,kCAAC,UAAK,eAAW,MAAC,WAAU,4BAA4B,mBAAS,OAAM;AAAA,cACvE;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,WAAW,cAAc,gBAAgB;AAAA,oBACzC,SAAS;AAAA,oBACT,YACE;AAAA,kBACJ;AAAA,kBAEC,mBAAS;AAAA;AAAA,cACZ;AAAA;AAAA;AAAA,UA/BK,SAAS;AAAA,QAgChB;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/ReadingProgress.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReadingProgressProps {
+    className?: string;
+}
+declare function ReadingProgress({ className }: ReadingProgressProps): react_jsx_runtime.JSX.Element;
+
+export { ReadingProgress };

package/dist/ReadingProgress.js

@@ -0,0 +1,51 @@
+"use client";
+
+// ../../components/ui/ReadingProgress.tsx
+import { useState, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+function ReadingProgress({ className = "" }) {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      setProgress(docHeight > 0 ? scrollTop / docHeight * 100 : 0);
+    };
+    const update = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    measure();
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: ["fixed top-0 left-0 right-0 z-[80] h-[2px] bg-transparent pointer-events-none", className].join(" "),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full w-full origin-left",
+          style: {
+            // transform instead of width: no layout on every scroll frame
+            transform: `scaleX(${progress / 100})`,
+            background: "var(--progress-bar)",
+            boxShadow: "var(--progress-bar-glow)"
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  ReadingProgress
+};
+//# sourceMappingURL=ReadingProgress.js.map

package/dist/ReadingProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ReadingProgress.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\n\ninterface ReadingProgressProps {\n  className?: string;\n}\n\nexport function ReadingProgress({ className = \"\" }: ReadingProgressProps) {\n  const [progress, setProgress] = useState(0);\n\n  useEffect(() => {\n    let frame = 0;\n    const measure = () => {\n      frame = 0;\n      const scrollTop = window.scrollY;\n      const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n      setProgress(docHeight > 0 ? (scrollTop / docHeight) * 100 : 0);\n    };\n    // One measurement per frame, however fast the scroll events arrive\n    const update = () => {\n      if (!frame) frame = requestAnimationFrame(measure);\n    };\n\n    window.addEventListener(\"scroll\", update, { passive: true });\n    window.addEventListener(\"resize\", update);\n    measure();\n    return () => {\n      window.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n      if (frame) cancelAnimationFrame(frame);\n    };\n  }, []);\n\n  return (\n    <div\n      aria-hidden\n      className={[\"fixed top-0 left-0 right-0 z-[80] h-[2px] bg-transparent pointer-events-none\", className].join(\" \")}\n    >\n      <div\n        className=\"h-full w-full origin-left\"\n        style={{\n          // transform instead of width: no layout on every scroll frame\n          transform: `scaleX(${progress / 100})`,\n          background: \"var(--progress-bar)\",\n          boxShadow: \"var(--progress-bar-glow)\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,UAAU,iBAAiB;AAqCrC;AA/BC,SAAS,gBAAgB,EAAE,YAAY,GAAG,GAAyB;AACxE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAE1C,YAAU,MAAM;AACd,QAAI,QAAQ;AACZ,UAAM,UAAU,MAAM;AACpB,cAAQ;AACR,YAAM,YAAY,OAAO;AACzB,YAAM,YAAY,SAAS,gBAAgB,eAAe,OAAO;AACjE,kBAAY,YAAY,IAAK,YAAY,YAAa,MAAM,CAAC;AAAA,IAC/D;AAEA,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,MAAO,SAAQ,sBAAsB,OAAO;AAAA,IACnD;AAEA,WAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAC3D,WAAO,iBAAiB,UAAU,MAAM;AACxC,YAAQ;AACR,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,MAAM;AAC3C,aAAO,oBAAoB,UAAU,MAAM;AAC3C,UAAI,MAAO,sBAAqB,KAAK;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,CAAC,gFAAgF,SAAS,EAAE,KAAK,GAAG;AAAA,MAE/G;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA;AAAA,YAEL,WAAW,UAAU,WAAW,GAAG;AAAA,YACnC,YAAY;AAAA,YACZ,WAAW;AAAA,UACb;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/ReadingTime.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReadingTimeProps {
+    minutes: number;
+    className?: string;
+}
+declare function ReadingTime({ minutes, className }: ReadingTimeProps): react_jsx_runtime.JSX.Element;
+
+export { ReadingTime };

package/dist/ReadingTime.js

@@ -0,0 +1,39 @@
+// ../../components/ui/ReadingTime.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReadingTime({ minutes, className = "" }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [
+        "inline-flex items-center gap-1.5 text-[12px] font-medium text-ink-muted",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "13",
+            height: "13",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-ink-faint",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+            ]
+          }
+        ),
+        minutes,
+        " min read"
+      ]
+    }
+  );
+}
+export {
+  ReadingTime
+};
+//# sourceMappingURL=ReadingTime.js.map

package/dist/ReadingTime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ReadingTime.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface ReadingTimeProps {\n  minutes: number;\n  className?: string;\n}\n\nexport function ReadingTime({ minutes, className = \"\" }: ReadingTimeProps) {\n  return (\n    <span\n      className={[\n        \"inline-flex items-center gap-1.5 text-[12px] font-medium text-ink-muted\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <svg\n        width=\"13\"\n        height=\"13\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"text-ink-faint\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <polyline points=\"12 6 12 12 16 14\" />\n      </svg>\n      {minutes} min read\n    </span>\n  );\n}\n"],"mappings":";AAiBM,SAWE,KAXF;AAVC,SAAS,YAAY,EAAE,SAAS,YAAY,GAAG,GAAqB;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,gBAAe;AAAA,YACf,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,cAC/B,oBAAC,cAAS,QAAO,oBAAmB;AAAA;AAAA;AAAA,QACtC;AAAA,QACC;AAAA,QAAQ;AAAA;AAAA;AAAA,EACX;AAEJ;","names":[]}

package/dist/Select.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare function Select({ options, value, onChange, placeholder, label, hint, disabled, fullWidth, className, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+export { Select };

package/dist/Select.js

@@ -0,0 +1,244 @@
+"use client";
+
+// ../../components/ui/Select.tsx
+import { useState, useRef, useEffect, useId } from "react";
+import { Portal } from "./Floating.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "select\u2026",
+  label,
+  hint,
+  disabled = false,
+  fullWidth = false,
+  className = ""
+}) {
+  const [active, setActive] = useState(0);
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const listRef = useRef(null);
+  const uid = useId();
+  const { open, mounted, close, show, setFloating, panelStyle } = useFloatingPanel(ref, {
+    matchWidth: true,
+    onEscape: () => buttonRef.current?.focus()
+  });
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = options[selectedIndex];
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [open, active]);
+  const openList = () => {
+    setActive(selectedIndex >= 0 ? selectedIndex : 0);
+    show();
+  };
+  const pick = (index) => {
+    const opt = options[index];
+    if (!opt) return;
+    onChange?.(opt.value);
+    close();
+    buttonRef.current?.focus();
+  };
+  const onKeyDown = (e) => {
+    if (!open) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        openList();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(options.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        pick(active);
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+      default:
+        if (e.key.length === 1) {
+          const k = e.key.toLowerCase();
+          const hit = options.findIndex((o) => o.label.toLowerCase().startsWith(k));
+          if (hit >= 0) setActive(hit);
+        }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: `${uid}-label`,
+        className: "text-[12.5px] font-medium text-ink-label tracking-[-0.005em]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: ["relative", fullWidth ? "w-full" : "inline-block", className].join(" "),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              role: "combobox",
+              disabled,
+              onClick: () => open ? close() : openList(),
+              onKeyDown,
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": open ? `${uid}-list` : void 0,
+              "aria-labelledby": label ? `${uid}-label ${uid}-value` : void 0,
+              "aria-activedescendant": open ? `${uid}-opt-${active}` : void 0,
+              className: [
+                "group/select relative isolate inline-flex items-center justify-between gap-3 w-full",
+                "rounded-xl px-4 py-3 text-[13.5px] font-medium text-ink",
+                "field cursor-pointer select-none",
+                "focus:outline-none disabled:opacity-40 disabled:pointer-events-none"
+              ].join(" "),
+              "data-open": open || void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: `${uid}-value`,
+                    className: [
+                      "relative z-10 truncate",
+                      selected ? "text-ink" : "text-ink-faint font-normal"
+                    ].join(" "),
+                    children: selected ? selected.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": true,
+                    width: "14",
+                    height: "14",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    viewBox: "0 0 24 24",
+                    className: [
+                      "relative z-10 shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
+                      open ? "rotate-180 text-ink" : "text-ink-faint group-hover/select:text-ink-label"
+                    ].join(" "),
+                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                  }
+                ),
+                open && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-5 rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "block absolute inset-y-0 w-[30%] -left-[30%] animate-input-shimmer",
+                    style: {
+                      background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)"
+                    }
+                  }
+                ) })
+              ]
+            }
+          ),
+          mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setFloating,
+              className: "p-1.5 rounded-[16px]",
+              style: {
+                ...panelStyle,
+                maxWidth: "min(420px, calc(100vw - 2rem))",
+                width: "max-content"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  id: `${uid}-list`,
+                  role: "listbox",
+                  "aria-labelledby": label ? `${uid}-label` : void 0,
+                  className: "bg-panel-face rounded-[11px] p-1 flex flex-col gap-0.5 max-h-72 overflow-y-auto scroll-thin",
+                  style: { boxShadow: "var(--panel-face-shadow)" },
+                  children: options.map((opt, i) => {
+                    const isSelected = opt.value === value;
+                    const isActive = i === active;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        id: `${uid}-opt-${i}`,
+                        "data-index": i,
+                        role: "option",
+                        "aria-selected": isSelected,
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: () => pick(i),
+                        onMouseMove: () => setActive(i),
+                        className: [
+                          "flex items-center justify-between gap-3 w-full px-2.5 py-2 text-[13px] rounded-[8px] cursor-pointer",
+                          "transition-colors duration-100",
+                          isSelected ? "font-medium" : "",
+                          // one ink per state: utilities sort by name, so text-ink-body would beat text-ink
+                          isSelected || isActive ? "text-ink" : "text-ink-body",
+                          isActive ? "bg-surface-active/80" : ""
+                        ].join(" "),
+                        style: {
+                          animation: `select-option-in 300ms var(--ease-out-soft) ${40 + i * 22}ms both`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: opt.label }),
+                          isSelected && /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              "aria-hidden": true,
+                              className: "shrink-0 text-ink",
+                              width: "13",
+                              height: "13",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "2.5",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                            }
+                          )
+                        ]
+                      },
+                      opt.value
+                    );
+                  })
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("p", { className: "text-[11.5px] text-ink-muted mt-0.5", children: hint })
+  ] });
+}
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useId } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\ninterface SelectOption {\n  value: string;\n  label: string;\n}\n\ninterface SelectProps {\n  options: SelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  label?: string;\n  hint?: string;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  className?: string;\n}\n\n/* The closed select is a sunken field like Input; the open list is a\n   floating panel like DropdownMenu. Keyboard follows the ARIA listbox\n   pattern: arrows move, Enter picks, Escape backs out.                */\nexport function Select({\n  options,\n  value,\n  onChange,\n  placeholder = \"select…\",\n  label,\n  hint,\n  disabled = false,\n  fullWidth = false,\n  className = \"\",\n}: SelectProps) {\n  const [active, setActive] = useState(0);\n  const ref = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const uid = useId();\n  // The list is portalled to the body and pinned under the field\n  const { open, mounted, close, show, setFloating, panelStyle } = useFloatingPanel(ref, {\n    matchWidth: true,\n    onEscape: () => buttonRef.current?.focus(),\n  });\n\n  const selectedIndex = options.findIndex((o) => o.value === value);\n  const selected = options[selectedIndex];\n\n  useEffect(() => {\n    if (!open) return;\n    listRef.current\n      ?.querySelector(`[data-index=\"${active}\"]`)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [open, active]);\n\n  const openList = () => {\n    setActive(selectedIndex >= 0 ? selectedIndex : 0);\n    show();\n  };\n\n  const pick = (index: number) => {\n    const opt = options[index];\n    if (!opt) return;\n    onChange?.(opt.value);\n    close();\n    buttonRef.current?.focus();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (!open) {\n      if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n        e.preventDefault();\n        openList();\n      }\n      return;\n    }\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActive((i) => Math.min(i + 1, options.length - 1));\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActive((i) => Math.max(i - 1, 0));\n        break;\n      case \"Home\":\n        e.preventDefault();\n        setActive(0);\n        break;\n      case \"End\":\n        e.preventDefault();\n        setActive(options.length - 1);\n        break;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        pick(active);\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        close();\n        break;\n      case \"Tab\":\n        close();\n        break;\n      default:\n        // Type-ahead: jump to the first option starting with the key\n        if (e.key.length === 1) {\n          const k = e.key.toLowerCase();\n          const hit = options.findIndex((o) => o.label.toLowerCase().startsWith(k));\n          if (hit >= 0) setActive(hit);\n        }\n    }\n  };\n\n  return (\n    <div className={[\"flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && (\n        <span\n          id={`${uid}-label`}\n          className=\"text-[12.5px] font-medium text-ink-label tracking-[-0.005em]\"\n        >\n          {label}\n        </span>\n      )}\n\n      <div\n        ref={ref}\n        className={[\"relative\", fullWidth ? \"w-full\" : \"inline-block\", className].join(\" \")}\n      >\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          /* A select-only combobox: the role is what lets the button point\n             at the active option while focus stays on it                */\n          role=\"combobox\"\n          disabled={disabled}\n          onClick={() => (open ? close() : openList())}\n          onKeyDown={onKeyDown}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={open ? `${uid}-list` : undefined}\n          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}\n          aria-activedescendant={open ? `${uid}-opt-${active}` : undefined}\n          className={[\n            \"group/select relative isolate inline-flex items-center justify-between gap-3 w-full\",\n            \"rounded-xl px-4 py-3 text-[13.5px] font-medium text-ink\",\n            \"field cursor-pointer select-none\",\n            \"focus:outline-none disabled:opacity-40 disabled:pointer-events-none\",\n          ].join(\" \")}\n          data-open={open || undefined}\n        >\n          <span\n            id={`${uid}-value`}\n            className={[\n              \"relative z-10 truncate\",\n              selected ? \"text-ink\" : \"text-ink-faint font-normal\",\n            ].join(\" \")}\n          >\n            {selected ? selected.label : placeholder}\n          </span>\n          <svg\n            aria-hidden\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 24 24\"\n            className={[\n              \"relative z-10 shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]\",\n              open ? \"rotate-180 text-ink\" : \"text-ink-faint group-hover/select:text-ink-label\",\n            ].join(\" \")}\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n\n          {open && (\n            <span aria-hidden className=\"pointer-events-none absolute inset-0 z-5 rounded-xl overflow-hidden\">\n              <span\n                className=\"block absolute inset-y-0 w-[30%] -left-[30%] animate-input-shimmer\"\n                style={{\n                  background:\n                    \"linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)\",\n                }}\n              />\n            </span>\n          )}\n        </button>\n\n        {mounted && (\n          <Portal>\n          <div\n            ref={setFloating}\n            className=\"p-1.5 rounded-[16px]\"\n            style={{\n              ...panelStyle,\n              maxWidth: \"min(420px, calc(100vw - 2rem))\",\n              width: \"max-content\",\n            }}\n          >\n            <div\n              ref={listRef}\n              id={`${uid}-list`}\n              role=\"listbox\"\n              aria-labelledby={label ? `${uid}-label` : undefined}\n              className=\"bg-panel-face rounded-[11px] p-1 flex flex-col gap-0.5 max-h-72 overflow-y-auto scroll-thin\"\n              style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n            >\n              {options.map((opt, i) => {\n                const isSelected = opt.value === value;\n                const isActive = i === active;\n                return (\n                  <div\n                    key={opt.value}\n                    id={`${uid}-opt-${i}`}\n                    data-index={i}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    onMouseDown={(e) => e.preventDefault()}\n                    onClick={() => pick(i)}\n                    onMouseMove={() => setActive(i)}\n                    className={[\n                      \"flex items-center justify-between gap-3 w-full px-2.5 py-2 text-[13px] rounded-[8px] cursor-pointer\",\n                      \"transition-colors duration-100\",\n                      isSelected ? \"font-medium\" : \"\",\n                      // one ink per state: utilities sort by name, so text-ink-body would beat text-ink\n                      isSelected || isActive ? \"text-ink\" : \"text-ink-body\",\n                      isActive ? \"bg-surface-active/80\" : \"\",\n                    ].join(\" \")}\n                    style={{\n                      animation: `select-option-in 300ms var(--ease-out-soft) ${40 + i * 22}ms both`,\n                    }}\n                  >\n                    <span className=\"whitespace-nowrap\">{opt.label}</span>\n                    {isSelected && (\n                      <svg\n                        aria-hidden\n                        className=\"shrink-0 text-ink\"\n                        width=\"13\"\n                        height=\"13\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2.5\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                      </svg>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n          </Portal>\n        )}\n      </div>\n\n      {hint && <p className=\"text-[11.5px] text-ink-muted mt-0.5\">{hint}</p>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Separator.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** A few words set into the middle of the line, like "or" */
+    label?: React.ReactNode;
+    /** Only draws a line; screen readers skip it */
+    decorative?: boolean;
+    className?: string;
+}
+declare function Separator({ orientation, label, decorative, className }: SeparatorProps): react_jsx_runtime.JSX.Element;
+
+export { Separator };

package/dist/Separator.js

@@ -0,0 +1,33 @@
+// ../../components/ui/Separator.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Groove({ vertical }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: vertical ? "block w-px self-stretch" : "block h-px flex-1",
+      style: {
+        background: "var(--groove)",
+        boxShadow: vertical ? "var(--groove-lip)" : "var(--groove-lip-below)"
+      }
+    }
+  );
+}
+function Separator({ orientation = "horizontal", label, decorative = false, className = "" }) {
+  const vertical = orientation === "vertical";
+  const a11y = decorative ? { "aria-hidden": true } : { role: "separator", "aria-orientation": orientation };
+  if (vertical) {
+    return /* @__PURE__ */ jsx("span", { ...a11y, className: ["inline-flex self-stretch", className].join(" "), children: /* @__PURE__ */ jsx(Groove, { vertical: true }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...a11y, className: ["flex w-full items-center gap-3", className].join(" "), children: [
+    /* @__PURE__ */ jsx(Groove, { vertical: false }),
+    label && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11.5px] font-medium text-ink-faint", children: label }),
+      /* @__PURE__ */ jsx(Groove, { vertical: false })
+    ] })
+  ] });
+}
+export {
+  Separator
+};
+//# sourceMappingURL=Separator.js.map

package/dist/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Separator.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SeparatorProps {\n  orientation?: \"horizontal\" | \"vertical\";\n  /** A few words set into the middle of the line, like \"or\" */\n  label?: React.ReactNode;\n  /** Only draws a line; screen readers skip it */\n  decorative?: boolean;\n  className?: string;\n}\n\n/* A groove scored into the surface: a dark line with a lit lip just\n   under it, the way a cut catches light from above.                */\nfunction Groove({ vertical }: { vertical: boolean }) {\n  return (\n    <span\n      aria-hidden\n      className={vertical ? \"block w-px self-stretch\" : \"block h-px flex-1\"}\n      style={{\n        background: \"var(--groove)\",\n        boxShadow: vertical ? \"var(--groove-lip)\" : \"var(--groove-lip-below)\",\n      }}\n    />\n  );\n}\n\nexport function Separator({ orientation = \"horizontal\", label, decorative = false, className = \"\" }: SeparatorProps) {\n  const vertical = orientation === \"vertical\";\n  const a11y = decorative\n    ? { \"aria-hidden\": true as const }\n    : { role: \"separator\", \"aria-orientation\": orientation };\n\n  if (vertical) {\n    return (\n      <span {...a11y} className={[\"inline-flex self-stretch\", className].join(\" \")}>\n        <Groove vertical />\n      </span>\n    );\n  }\n\n  return (\n    <div {...a11y} className={[\"flex w-full items-center gap-3\", className].join(\" \")}>\n      <Groove vertical={false} />\n      {label && (\n        <>\n          <span className=\"shrink-0 text-[11.5px] font-medium text-ink-faint\">{label}</span>\n          <Groove vertical={false} />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAeI,SA6BI,UA7BJ,KA6BI,YA7BJ;AAFJ,SAAS,OAAO,EAAE,SAAS,GAA0B;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,WAAW,4BAA4B;AAAA,MAClD,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,WAAW,WAAW,sBAAsB;AAAA,MAC9C;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,UAAU,EAAE,cAAc,cAAc,OAAO,aAAa,OAAO,YAAY,GAAG,GAAmB;AACnH,QAAM,WAAW,gBAAgB;AACjC,QAAM,OAAO,aACT,EAAE,eAAe,KAAc,IAC/B,EAAE,MAAM,aAAa,oBAAoB,YAAY;AAEzD,MAAI,UAAU;AACZ,WACE,oBAAC,UAAM,GAAG,MAAM,WAAW,CAAC,4BAA4B,SAAS,EAAE,KAAK,GAAG,GACzE,8BAAC,UAAO,UAAQ,MAAC,GACnB;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,CAAC,kCAAkC,SAAS,EAAE,KAAK,GAAG,GAC9E;AAAA,wBAAC,UAAO,UAAU,OAAO;AAAA,IACxB,SACC,iCACE;AAAA,0BAAC,UAAK,WAAU,qDAAqD,iBAAM;AAAA,MAC3E,oBAAC,UAAO,UAAU,OAAO;AAAA,OAC3B;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ShareButtons.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ShareButtonsProps {
+    url?: string;
+    title?: string;
+    className?: string;
+}
+declare function ShareButtons({ url, title, className, }: ShareButtonsProps): react_jsx_runtime.JSX.Element;
+
+export { ShareButtons };