@blurrow/ui 0.2.0 → 0.2.1

package/dist/Floating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Floating.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { RefObject, useCallback, useEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport { createPortal } from \"react-dom\";\n\n/* ── Portal ───────────────────────────────────────────────────────── */\n/* Anything that floats over the page is rendered at the end of <body>.\n   Left where it was declared, a panel lives inside whatever stacking\n   context its parents made (a transform, a filter, an isolate), and a\n   later sibling on the page can paint straight over it, whatever its\n   z-index says.                                                     */\nconst noop = () => () => {};\n\nexport function Portal({ children }: { children: React.ReactNode }) {\n  const client = useSyncExternalStore(noop, () => true, () => false);\n  return client ? createPortal(children, document.body) : null;\n}\n\n/* Layers, lowest first: dialogs, then toasts, then anything anchored to\n   a control (so a select inside a modal opens over the modal), then\n   tooltips over all of it.                                          */\nexport const LAYER = { dialog: 90, toast: 95, floating: 100, tooltip: 110 } as const;\n\n/* ── Anchored position ────────────────────────────────────────────── */\nexport type Side = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type Align = \"start\" | \"center\" | \"end\";\n\nconst OPPOSITE: Record<Side, Side> = { top: \"bottom\", bottom: \"top\", left: \"right\", right: \"left\" };\nconst PAD = 8;\n\ninterface AnchorOptions {\n  open: boolean;\n  side?: Side;\n  align?: Align;\n  /** Space between the anchor and the panel */\n  gap?: number;\n  /** Make the panel at least as wide as the anchor (selects, comboboxes) */\n  matchWidth?: boolean;\n}\n\n/* Places a fixed-position panel next to its anchor: on the side asked\n   for unless the other side has more room, then nudged back inside the\n   viewport. Follows the anchor while the page scrolls or resizes. The\n   position is written straight onto the element, so scrolling never\n   re-renders the component.                                         */\nexport function useAnchoredPosition(\n  anchor: RefObject<HTMLElement | null>,\n  { open, side = \"bottom\", align = \"start\", gap = 8, matchWidth = false }: AnchorOptions,\n) {\n  const [placed, setPlaced] = useState<Side>(side);\n  const floating = useRef<HTMLElement | null>(null);\n\n  const update = useCallback(() => {\n    const a = anchor.current?.getBoundingClientRect();\n    const el = floating.current;\n    if (!a || !el) return;\n    if (matchWidth) el.style.minWidth = `${a.width}px`;\n\n    // offset sizes ignore the enter transform, so these are the settled size\n    const w = el.offsetWidth;\n    const h = el.offsetHeight;\n    const vw = document.documentElement.clientWidth;\n    const vh = window.innerHeight;\n    const room: Record<Side, number> = { top: a.top, bottom: vh - a.bottom, left: a.left, right: vw - a.right };\n    const vertical = side === \"top\" || side === \"bottom\";\n    const need = (vertical ? h : w) + gap + PAD;\n\n    let s = side;\n    if (room[s] < need && room[OPPOSITE[s]] > room[s]) s = OPPOSITE[s];\n\n    let top: number;\n    let left: number;\n    if (s === \"top\" || s === \"bottom\") {\n      top = s === \"bottom\" ? a.bottom + gap : a.top - gap - h;\n      left = align === \"start\" ? a.left : align === \"end\" ? a.right - w : a.left + (a.width - w) / 2;\n    } else {\n      left = s === \"right\" ? a.right + gap : a.left - gap - w;\n      top = align === \"start\" ? a.top : align === \"end\" ? a.bottom - h : a.top + (a.height - h) / 2;\n    }\n    left = Math.max(PAD, Math.min(left, vw - w - PAD));\n    top = Math.max(PAD, Math.min(top, vh - h - PAD));\n\n    el.style.top = `${Math.round(top)}px`;\n    el.style.left = `${Math.round(left)}px`;\n    el.dataset.side = s;\n    setPlaced(s);\n  }, [anchor, side, align, gap, matchWidth]);\n\n  /* Attach this as the panel's ref: it's placed before its first paint */\n  const setFloating = useCallback(\n    (el: HTMLElement | null) => {\n      floating.current = el;\n      if (el) update();\n    },\n    [update],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    let frame = 0;\n    const schedule = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(update);\n    };\n    window.addEventListener(\"scroll\", schedule, true);\n    window.addEventListener(\"resize\", schedule);\n    // The panel can change size while open (a filtered list, a new month)\n    const ro = new ResizeObserver(schedule);\n    if (floating.current) ro.observe(floating.current);\n    if (anchor.current) ro.observe(anchor.current);\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener(\"scroll\", schedule, true);\n      window.removeEventListener(\"resize\", schedule);\n      ro.disconnect();\n    };\n  }, [open, update, anchor]);\n\n  return { setFloating, side: placed, floatingRef: floating, update };\n}\n\n/* Where the panel grows from, and where it slides in from, for each side */\nexport const ORIGIN: Record<Side, string> = {\n  top: \"bottom\",\n  bottom: \"top\",\n  left: \"right\",\n  right: \"left\",\n};\nexport const ENTER_FROM: Record<Side, string> = {\n  top: \"translateY(4px)\",\n  bottom: \"translateY(-4px)\",\n  left: \"translateX(4px)\",\n  right: \"translateX(-4px)\",\n};\n"],"mappings":"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","names":[]}

package/dist/HoverCard.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { Side } from './Floating.js';
+
+interface HoverCardProps {
+    /** What you hover: a link, a name, an avatar */
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    side?: Side;
+    align?: "start" | "center" | "end";
+    /** Milliseconds to wait before opening, and before closing */
+    openDelay?: number;
+    closeDelay?: number;
+    className?: string;
+}
+declare function HoverCard({ trigger, children, side, align, openDelay, closeDelay, className, }: HoverCardProps): react_jsx_runtime.JSX.Element;
+
+export { HoverCard };

package/dist/HoverCard.js

@@ -0,0 +1,90 @@
+"use client";
+
+// ../../components/ui/HoverCard.tsx
+import React, { useEffect, useId, useRef, useState } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HoverCard({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  openDelay = 450,
+  closeDelay = 200,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const timer = useRef(null);
+  const { setFloating, side: placed } = useAnchoredPosition(ref, { open: mounted, side, align, gap: 10 });
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (open) {
+      const id = requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+      return () => cancelAnimationFrame(id);
+    }
+    const t = setTimeout(() => setMounted(false), 180);
+    return () => clearTimeout(t);
+  }, [open]);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  const later = (next, ms) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(next), ms);
+  };
+  const enter = (e) => e.pointerType !== "touch" && later(true, openDelay);
+  const leave = (e) => e.pointerType !== "touch" && later(false, closeDelay);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: ["inline-flex", className].join(" "),
+      onPointerEnter: enter,
+      onPointerLeave: leave,
+      onFocus: () => later(true, 0),
+      onBlur: () => later(false, closeDelay),
+      children: [
+        React.isValidElement(trigger) ? React.cloneElement(trigger, {
+          "aria-describedby": mounted ? `${uid}-card` : void 0
+        }) : trigger,
+        mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setFloating,
+            id: `${uid}-card`,
+            onPointerEnter: enter,
+            onPointerLeave: leave,
+            className: "w-[300px] max-w-[calc(100vw-16px)] rounded-[18px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]",
+            style: {
+              position: "fixed",
+              top: 0,
+              left: 0,
+              zIndex: LAYER.floating,
+              transformOrigin: ORIGIN[placed],
+              opacity: visible ? 1 : 0,
+              transform: visible ? "none" : `${ENTER_FROM[placed]} scale(0.96)`,
+              background: "var(--panel-bezel)",
+              boxShadow: "var(--overlay-shadow)"
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "rounded-[13px] bg-panel-face p-4 text-[13px] text-ink-body", style: { boxShadow: "var(--panel-face-shadow)" }, children })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  HoverCard
+};
+//# sourceMappingURL=HoverCard.js.map

package/dist/HoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/HoverCard.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { ENTER_FROM, LAYER, ORIGIN, Portal, Side, useAnchoredPosition } from \"./Floating\";\n\ninterface HoverCardProps {\n  /** What you hover: a link, a name, an avatar */\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  side?: Side;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Milliseconds to wait before opening, and before closing */\n  openDelay?: number;\n  closeDelay?: number;\n  className?: string;\n}\n\n/* A preview that floats up when you rest the pointer on something, like\n   a profile behind a username. It waits a beat before opening, stays\n   open while the pointer crosses into it, and opens on keyboard focus\n   too. It's a preview: anything in it should also be reachable by\n   following the trigger.                                          */\nexport function HoverCard({\n  trigger,\n  children,\n  side = \"bottom\",\n  align = \"center\",\n  openDelay = 450,\n  closeDelay = 200,\n  className = \"\",\n}: HoverCardProps) {\n  const uid = useId();\n  const ref = useRef<HTMLSpanElement>(null);\n  const [open, setOpen] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const { setFloating, side: placed } = useAnchoredPosition(ref, { open: mounted, side, align, gap: 10 });\n\n  if (open && !mounted) setMounted(true);\n  if (!open && visible) setVisible(false);\n\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));\n      return () => cancelAnimationFrame(id);\n    }\n    const t = setTimeout(() => setMounted(false), 180);\n    return () => clearTimeout(t);\n  }, [open]);\n\n  useEffect(() => () => {\n    if (timer.current) clearTimeout(timer.current);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open]);\n\n  const later = (next: boolean, ms: number) => {\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(next), ms);\n  };\n  // Touch has no hover; a tap goes through to the trigger instead\n  const enter = (e: React.PointerEvent) => e.pointerType !== \"touch\" && later(true, openDelay);\n  const leave = (e: React.PointerEvent) => e.pointerType !== \"touch\" && later(false, closeDelay);\n\n  return (\n    <span\n      ref={ref}\n      className={[\"inline-flex\", className].join(\" \")}\n      onPointerEnter={enter}\n      onPointerLeave={leave}\n      onFocus={() => later(true, 0)}\n      onBlur={() => later(false, closeDelay)}\n    >\n      {React.isValidElement(trigger)\n        ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {\n            \"aria-describedby\": mounted ? `${uid}-card` : undefined,\n          })\n        : trigger}\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            id={`${uid}-card`}\n            onPointerEnter={enter}\n            onPointerLeave={leave}\n            className=\"w-[300px] max-w-[calc(100vw-16px)] rounded-[18px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]\"\n            style={{\n              position: \"fixed\",\n              top: 0,\n              left: 0,\n              zIndex: LAYER.floating,\n              transformOrigin: ORIGIN[placed],\n              opacity: visible ? 1 : 0,\n              transform: visible ? \"none\" : `${ENTER_FROM[placed]} scale(0.96)`,\n              background: \"var(--panel-bezel)\",\n              boxShadow: \"var(--overlay-shadow)\",\n            }}\n          >\n            <div className=\"rounded-[13px] bg-panel-face p-4 text-[13px] text-ink-body\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n              {children}\n            </div>\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Input.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    fullWidth?: boolean;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    /** Seat the well in the same bezel as a `size="lg"` button, so a field and
+        a button side by side (a newsletter, a waitlist) share one height. */
+    layered?: boolean;
+}
+declare function Input({ label, hint, error, fullWidth, iconLeft, iconRight, layered, className, id, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+
+export { Input };

package/dist/Input.js

@@ -0,0 +1,96 @@
+// ../../components/ui/Input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Input({
+  label,
+  hint,
+  error,
+  fullWidth = false,
+  iconLeft,
+  iconRight,
+  layered = false,
+  className = "",
+  id,
+  ...rest
+}) {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const messageId = inputId && (error || hint) ? `${inputId}-message` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: layered ? "relative rounded-[15px] p-[3.5px]" : "contents",
+        style: layered ? { background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" } : void 0,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative group/input isolate", children: [
+          iconLeft && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center",
+              children: iconLeft
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              className: [
+                "field relative z-10 w-full text-ink caret-ink",
+                layered ? "rounded-[11.5px] py-3 text-[15px]" : "rounded-xl py-3 text-[13.5px]",
+                "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                iconLeft ? "pl-10" : "pl-4",
+                iconRight ? "pr-10" : "pr-4",
+                className
+              ].filter(Boolean).join(" "),
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": messageId,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: ["pointer-events-none absolute inset-0 z-15 overflow-hidden", layered ? "rounded-[11.5px]" : "rounded-xl"].join(" "),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer",
+                  style: {
+                    background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)"
+                  }
+                }
+              )
+            }
+          ),
+          iconRight && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center",
+              children: iconRight
+            }
+          )
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { id: messageId, role: "alert", className: "text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5", children: [
+      /* @__PURE__ */ jsxs("svg", { 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
+    ] }),
+    hint && !error && /* @__PURE__ */ jsx("p", { id: messageId, className: "text-[11.5px] text-ink-muted mt-0.5", children: hint })
+  ] });
+}
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Input.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  hint?: string;\n  error?: string;\n  fullWidth?: boolean;\n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n  /** Seat the well in the same bezel as a `size=\"lg\"` button, so a field and\n      a button side by side (a newsletter, a waitlist) share one height. */\n  layered?: boolean;\n}\n\n/* Fields are sunken wells (see --field tokens in globals.css). Raised\n   means \"press me\", sunken means \"fill me\" — that is the whole system.\n   Layered keeps the well sunken; only the bezel around it is the button's. */\n\nexport function Input({\n  label,\n  hint,\n  error,\n  fullWidth = false,\n  iconLeft,\n  iconRight,\n  layered = false,\n  className = \"\",\n  id,\n  ...rest\n}: InputProps) {\n  const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, \"-\");\n  const messageId = inputId && (error || hint) ? `${inputId}-message` : undefined;\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && (\n        <label\n          htmlFor={inputId}\n          className=\"text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong\"\n        >\n          {label}\n        </label>\n      )}\n      <div\n        className={layered ? \"relative rounded-[15px] p-[3.5px]\" : \"contents\"}\n        style={layered ? { background: \"var(--bezel)\", boxShadow: \"var(--bezel-shadow)\" } : undefined}\n      >\n        <div className=\"relative group/input isolate\">\n          {iconLeft && (\n            <span\n              className=\"absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center\"\n            >\n              {iconLeft}\n            </span>\n          )}\n          <input\n            id={inputId}\n            className={[\n              \"field relative z-10 w-full text-ink caret-ink\",\n              layered ? \"rounded-[11.5px] py-3 text-[15px]\" : \"rounded-xl py-3 text-[13.5px]\",\n              \"placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost\",\n              \"disabled:opacity-40 disabled:cursor-not-allowed\",\n              iconLeft ? \"pl-10\" : \"pl-4\",\n              iconRight ? \"pr-10\" : \"pr-4\",\n              className,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            aria-invalid={error ? true : undefined}\n            aria-describedby={messageId}\n            {...rest}\n          />\n          <span\n            aria-hidden\n            className={[\"pointer-events-none absolute inset-0 z-15 overflow-hidden\", layered ? \"rounded-[11.5px]\" : \"rounded-xl\"].join(\" \")}\n          >\n            <span\n              className=\"block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer\"\n              style={{\n                background:\n                  \"linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)\",\n              }}\n            />\n          </span>\n          {iconRight && (\n            <span\n              className=\"absolute right-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center\"\n            >\n              {iconRight}\n            </span>\n          )}\n        </div>\n      </div>\n      {error && (\n        <p id={messageId} role=\"alert\" className=\"text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5\">\n          <svg 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      {hint && !error && (\n        <p id={messageId} className=\"text-[11.5px] text-ink-muted mt-0.5\">{hint}</p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,cAWA,YAXA;AAlBD,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU,MAAM,OAAO,YAAY,EAAE,QAAQ,QAAQ,GAAG;AAC9D,QAAM,YAAY,YAAY,SAAS,QAAQ,GAAG,OAAO,aAAa;AAEtE,SACE,qBAAC,SAAI,WAAW,CAAC,qCAAqC,YAAY,WAAW,EAAE,EAAE,KAAK,GAAG,GACtF;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,UAAU,sCAAsC;AAAA,QAC3D,OAAO,UAAU,EAAE,YAAY,gBAAgB,WAAW,sBAAsB,IAAI;AAAA,QAEpF,+BAAC,SAAI,WAAU,gCACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,sCAAsC;AAAA,gBAChD;AAAA,gBACA;AAAA,gBACA,WAAW,UAAU;AAAA,gBACrB,YAAY,UAAU;AAAA,gBACtB;AAAA,cACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,cACX,gBAAc,QAAQ,OAAO;AAAA,cAC7B,oBAAkB;AAAA,cACjB,GAAG;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,CAAC,6DAA6D,UAAU,qBAAqB,YAAY,EAAE,KAAK,GAAG;AAAA,cAE9H;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YACE;AAAA,kBACJ;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IACC,SACC,qBAAC,OAAE,IAAI,WAAW,MAAK,SAAQ,WAAU,wEACvC;AAAA,2BAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,SAAQ,aACpF;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,IAED,QAAQ,CAAC,SACR,oBAAC,OAAE,IAAI,WAAW,WAAU,uCAAuC,gBAAK;AAAA,KAE5E;AAEJ;","names":[]}

package/dist/Kbd.d.ts

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

package/dist/Kbd.js

@@ -0,0 +1,24 @@
+// ../../components/ui/Kbd.tsx
+import { jsx } from "react/jsx-runtime";
+function Kbd({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: `inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-ink-muted ${className}`,
+      style: {
+        /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */
+        background: "var(--face)",
+        boxShadow: "var(--key-shadow)",
+        textShadow: "var(--emboss)"
+      },
+      children
+    }
+  );
+}
+export {
+  Kbd
+};
+//# sourceMappingURL=Kbd.js.map

package/dist/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Kbd.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport function Kbd({\n  children,\n  className = \"\",\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <kbd\n      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-ink-muted ${className}`}\n      style={{\n        /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */\n        background: \"var(--face)\",\n        boxShadow: \"var(--key-shadow)\",\n        textShadow: \"var(--emboss)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n}\n"],"mappings":";AAUI;AARG,SAAS,IAAI;AAAA,EAClB;AAAA,EACA,YAAY;AACd,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,4HAA4H,SAAS;AAAA,MAChJ,OAAO;AAAA;AAAA,QAEL,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/Modal.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+}
+declare function Modal({ open, onClose, title, description, children, actions, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { Modal };

package/dist/Modal.js

@@ -0,0 +1,109 @@
+"use client";
+
+// ../../components/ui/Modal.tsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating.js";
+import { CloseButton } from "./CloseButton.js";
+import { useModalBehavior } from "./useModalBehavior.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLOSE_MS = 240;
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  className = ""
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const dialogRef = useRef(null);
+  const uid = useId();
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), CLOSE_MS);
+    return () => clearTimeout(t);
+  }, [open, mounted]);
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+    void dialogRef.current?.getBoundingClientRect();
+    const id = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose });
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-90 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: [
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200"
+        ].join(" "),
+        style: { background: "var(--scrim)" },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? `${uid}-title` : void 0,
+        "aria-describedby": description ? `${uid}-desc` : void 0,
+        className: [
+          "relative z-10 w-full max-w-lg rounded-[22px] p-1.5",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible ? "opacity-100 scale-100 translate-y-0 duration-300" : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className
+        ].filter(Boolean).join(" "),
+        style: { background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bg-panel-face rounded-[16px] overflow-hidden",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "pl-6 pr-4 pt-5 pb-4 flex items-start gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1.5 pt-1", children: [
+                  title && /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      id: `${uid}-title`,
+                      className: "text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug",
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ jsx("p", { id: `${uid}-desc`, className: "text-[13px] text-ink-muted leading-relaxed", children: description })
+                ] }),
+                /* @__PURE__ */ jsx(CloseButton, { label: "Close dialog", onClick: onClose })
+              ] }),
+              children && /* @__PURE__ */ jsx("div", { className: "px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed", children }),
+              actions && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "px-5 py-3.5 flex items-center justify-end gap-2",
+                  style: {
+                    background: "var(--panel-tray)",
+                    boxShadow: "inset 0 1px 0 var(--hairline)"
+                  },
+                  children: actions
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { CloseButton } from \"./CloseButton\";\nimport { useModalBehavior } from \"./useModalBehavior\";\n\ninterface ModalProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n  actions?: React.ReactNode;\n  className?: string;\n}\n\nconst CLOSE_MS = 240;\n\nexport function Modal({\n  open,\n  onClose,\n  title,\n  description,\n  children,\n  actions,\n  className = \"\",\n}: ModalProps) {\n  const [mounted, setMounted] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const uid = useId();\n\n  /* Mounting on open and fading on close happen during render, so\n     neither waits for an extra commit; only the unmount is delayed */\n  if (open && !mounted) setMounted(true);\n  if (!open && visible) setVisible(false);\n\n  useEffect(() => {\n    if (open || !mounted) return;\n    const t = setTimeout(() => setMounted(false), CLOSE_MS);\n    return () => clearTimeout(t);\n  }, [open, mounted]);\n\n  useLayoutEffect(() => {\n    if (!mounted || !open || visible) return;\n    void dialogRef.current?.getBoundingClientRect();\n    const id = requestAnimationFrame(() => setVisible(true));\n    return () => cancelAnimationFrame(id);\n  }, [mounted, open, visible]);\n\n  // Escape, focus trap + restore, scroll lock\n  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose });\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n    <div className=\"fixed inset-0 z-90 flex items-center justify-center p-4\">\n      <div\n        aria-hidden\n        className={[\n          \"absolute inset-0 backdrop-blur-[6px]\",\n          \"transition-opacity ease-out\",\n          visible ? \"opacity-100 duration-300\" : \"opacity-0 duration-200\",\n        ].join(\" \")}\n        style={{ background: \"var(--scrim)\" }}\n        onClick={onClose}\n      />\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? `${uid}-title` : undefined}\n        aria-describedby={description ? `${uid}-desc` : undefined}\n        className={[\n          \"relative z-10 w-full max-w-lg rounded-[22px] p-1.5\",\n          \"transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]\",\n          visible\n            ? \"opacity-100 scale-100 translate-y-0 duration-300\"\n            : \"opacity-0 scale-[0.94] translate-y-3 duration-200\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--modal-shadow)\" }}\n      >\n        <div\n          className=\"bg-panel-face rounded-[16px] overflow-hidden\"\n          style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n        >\n          <div className=\"pl-6 pr-4 pt-5 pb-4 flex items-start gap-4\">\n            <div className=\"flex-1 min-w-0 flex flex-col gap-1.5 pt-1\">\n              {title && (\n                <h2\n                  id={`${uid}-title`}\n                  className=\"text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug\"\n                >\n                  {title}\n                </h2>\n              )}\n              {description && (\n                <p id={`${uid}-desc`} className=\"text-[13px] text-ink-muted leading-relaxed\">\n                  {description}\n                </p>\n              )}\n            </div>\n            <CloseButton label=\"Close dialog\" onClick={onClose} />\n          </div>\n\n          {children && <div className=\"px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed\">{children}</div>}\n\n          {/* Footer sits in the bezel tone so actions read as a separate tray */}\n          {actions && (\n            <div\n              className=\"px-5 py-3.5 flex items-center justify-end gap-2\"\n              style={{\n                background: \"var(--panel-tray)\",\n                boxShadow: \"inset 0 1px 0 var(--hairline)\",\n              }}\n            >\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n    </Portal>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,WAAW,OAAO,iBAAiB,QAAQ,gBAAgB;AAC3E,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAsD3B,cAiCM,YAjCN;AA1CN,IAAM,WAAW;AAEV,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAe;AACb,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,MAAM,MAAM;AAIlB,MAAI,QAAQ,CAAC,QAAS,YAAW,IAAI;AACrC,MAAI,CAAC,QAAQ,QAAS,YAAW,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,QAAQ,CAAC,QAAS;AACtB,UAAM,IAAI,WAAW,MAAM,WAAW,KAAK,GAAG,QAAQ;AACtD,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,kBAAgB,MAAM;AACpB,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAS;AAClC,SAAK,UAAU,SAAS,sBAAsB;AAC9C,UAAM,KAAK,sBAAsB,MAAM,WAAW,IAAI,CAAC;AACvD,WAAO,MAAM,qBAAqB,EAAE;AAAA,EACtC,GAAG,CAAC,SAAS,MAAM,OAAO,CAAC;AAG3B,mBAAiB,EAAE,MAAM,OAAO,SAAS,KAAK,WAAW,QAAQ,CAAC;AAElE,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,UACD,+BAAC,SAAI,WAAU,2DACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,6BAA6B;AAAA,QACzC,EAAE,KAAK,GAAG;AAAA,QACV,OAAO,EAAE,YAAY,eAAe;AAAA,QACpC,SAAS;AAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,mBAAiB,QAAQ,GAAG,GAAG,WAAW;AAAA,QAC1C,oBAAkB,cAAc,GAAG,GAAG,UAAU;AAAA,QAChD,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UACI,qDACA;AAAA,UACJ;AAAA,QACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,QAE5E;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,YAE/C;AAAA,mCAAC,SAAI,WAAU,8CACb;AAAA,qCAAC,SAAI,WAAU,6CACZ;AAAA,2BACC;AAAA,oBAAC;AAAA;AAAA,sBACC,IAAI,GAAG,GAAG;AAAA,sBACV,WAAU;AAAA,sBAET;AAAA;AAAA,kBACH;AAAA,kBAED,eACC,oBAAC,OAAE,IAAI,GAAG,GAAG,SAAS,WAAU,8CAC7B,uBACH;AAAA,mBAEJ;AAAA,gBACA,oBAAC,eAAY,OAAM,gBAAe,SAAS,SAAS;AAAA,iBACtD;AAAA,cAEC,YAAY,oBAAC,SAAI,WAAU,yDAAyD,UAAS;AAAA,cAG7F,WACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,WAAW;AAAA,kBACb;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,KACF,GACA;AAEJ;","names":[]}

package/dist/NumberInput.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size" | "prefix"> {
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Digits after the decimal point; inferred from `step` when left out */
+    precision?: number;
+    label?: string;
+    hint?: string;
+    error?: string;
+    /** A unit shown before or after the number, like "$" or "kg" */
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    fullWidth?: boolean;
+}
+declare function NumberInput({ value, defaultValue, onChange, min, max, step, precision, label, hint, error, prefix, suffix, fullWidth, disabled, className, id, onBlur, onKeyDown, ...rest }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+export { NumberInput };

package/dist/NumberInput.js

@@ -0,0 +1,162 @@
+"use client";
+
+// ../../components/ui/NumberInput.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { FieldKey, FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var decimals = (n) => (String(n).split(".")[1] ?? "").length;
+function NumberInput({
+  value,
+  defaultValue = null,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  fullWidth = false,
+  disabled,
+  className = "",
+  id,
+  onBlur,
+  onKeyDown,
+  ...rest
+}) {
+  const uid = useId();
+  const inputId = id ?? `${uid}-input`;
+  const messageId = error || hint ? `${inputId}-message` : void 0;
+  const digits = precision ?? decimals(step);
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const format = (n) => n === null ? "" : n.toFixed(digits);
+  const [draft, setDraft] = useState(format(current));
+  const editing = useRef(false);
+  useEffect(() => {
+    if (!editing.current) setDraft(format(current));
+  }, [current, digits]);
+  const clamp = (n) => Math.min(max, Math.max(min, Number(n.toFixed(digits))));
+  const latest = useRef(current);
+  useEffect(() => {
+    latest.current = current;
+  }, [current]);
+  const commit = (n) => {
+    const next = n === null || Number.isNaN(n) ? null : clamp(n);
+    const prev = latest.current;
+    latest.current = next;
+    setInternal(next);
+    setDraft(format(next));
+    if (next !== prev) onChange?.(next);
+  };
+  const nudge = (dir, times = 1) => {
+    const base = latest.current;
+    commit(base === null ? clamp(0) : base + dir * step * times);
+  };
+  const hold = useRef({});
+  const stopHold = () => {
+    clearTimeout(hold.current.t);
+    clearInterval(hold.current.i);
+  };
+  useEffect(() => stopHold, []);
+  const startHold = (dir) => {
+    stopHold();
+    nudge(dir);
+    hold.current.t = setTimeout(() => {
+      hold.current.i = setInterval(() => nudge(dir), 60);
+    }, 400);
+  };
+  const atMin = current !== null && current <= min;
+  const atMax = current !== null && current >= max;
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: ["relative isolate", fullWidth ? "w-full" : "w-40", className].join(" "), children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3.5 top-1/2 z-20 -translate-y-1/2 text-[13.5px] text-ink-faint transition-colors duration-200 group-focus-within/field:text-ink-label", children: prefix }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type: "text",
+          inputMode: digits > 0 || min < 0 ? "decimal" : "numeric",
+          autoComplete: "off",
+          role: "spinbutton",
+          "aria-valuenow": current ?? void 0,
+          "aria-valuemin": Number.isFinite(min) ? min : void 0,
+          "aria-valuemax": Number.isFinite(max) ? max : void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": messageId,
+          disabled,
+          value: draft,
+          onChange: (e) => {
+            editing.current = true;
+            setDraft(e.target.value.replace(/[^\d.,\-]/g, ""));
+          },
+          onBlur: (e) => {
+            editing.current = false;
+            const raw = draft.replace(",", ".").trim();
+            commit(raw === "" || raw === "-" ? null : parseFloat(raw));
+            onBlur?.(e);
+          },
+          onKeyDown: (e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented) return;
+            const big = e.shiftKey ? 10 : 1;
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              editing.current = false;
+              nudge(1, big);
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              editing.current = false;
+              nudge(-1, big);
+            } else if (e.key === "PageUp") {
+              e.preventDefault();
+              nudge(1, 10);
+            } else if (e.key === "PageDown") {
+              e.preventDefault();
+              nudge(-1, 10);
+            } else if (e.key === "Home" && Number.isFinite(min)) {
+              e.preventDefault();
+              commit(min);
+            } else if (e.key === "End" && Number.isFinite(max)) {
+              e.preventDefault();
+              commit(max);
+            } else if (e.key === "Enter") {
+              e.target.blur();
+              e.target.focus();
+            }
+          },
+          className: [
+            "field relative z-10 w-full rounded-xl py-3 text-[13.5px] tabular-nums text-ink caret-ink",
+            "placeholder:text-ink-faint focus:placeholder:text-ink-ghost",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            prefix ? "pl-8" : "pl-4",
+            suffix ? "pr-[92px]" : "pr-[64px]"
+          ].join(" ")
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-[64px] top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint", children: suffix }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: [
+            "absolute right-1.5 top-1/2 z-20 flex -translate-y-1/2 gap-1",
+            disabled ? "opacity-40 pointer-events-none" : ""
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx(FieldKey, { label: "decrease", focusable: false, disabled: atMin, onPress: () => startHold(-1), onRelease: stopHold, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) }),
+            /* @__PURE__ */ jsx(FieldKey, { label: "increase", focusable: false, disabled: atMax, onPress: () => startHold(1), onRelease: stopHold, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map