@blurrow/ui 0.2.0 → 0.2.1

package/dist/Tooltip.js

@@ -0,0 +1,138 @@
+"use client";
+
+// ../../components/ui/Tooltip.tsx
+import React, { useState, useRef, useCallback, useEffect, useId } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  position = "top",
+  children,
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const triggerRef = useRef(null);
+  const enterTimer = useRef(null);
+  const exitTimer = useRef(null);
+  const autoHideTimer = useRef(null);
+  const touchActiveRef = useRef(false);
+  const uid = useId();
+  const hide = useCallback(() => {
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    setVisible(false);
+    exitTimer.current = setTimeout(() => {
+      setMounted(false);
+      setOpen(false);
+    }, 150);
+  }, []);
+  const show = useCallback((fromTouch = false) => {
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    enterTimer.current = setTimeout(() => setOpen(true), fromTouch ? 0 : 80);
+    if (fromTouch) {
+      autoHideTimer.current = setTimeout(() => {
+        touchActiveRef.current = false;
+        hide();
+      }, 2400);
+    }
+  }, [hide]);
+  if (open && !mounted) setMounted(true);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+    }
+  }, [open]);
+  const { setFloating, side } = useAnchoredPosition(triggerRef, { open: mounted, side: position, align: "center", gap: 7 });
+  useEffect(() => {
+    if (!open) return;
+    const onDocPointer = (e) => {
+      if (!triggerRef.current?.contains(e.target)) {
+        touchActiveRef.current = false;
+        hide();
+      }
+    };
+    document.addEventListener("pointerdown", onDocPointer);
+    return () => document.removeEventListener("pointerdown", onDocPointer);
+  }, [open, hide]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, hide]);
+  useEffect(() => {
+    return () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+      if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    };
+  }, []);
+  const handlePointerEnter = (e) => {
+    if (e.pointerType === "touch") return;
+    show(false);
+  };
+  const handlePointerLeave = (e) => {
+    if (e.pointerType === "touch") return;
+    if (touchActiveRef.current) return;
+    hide();
+  };
+  const handlePointerDown = (e) => {
+    if (e.pointerType !== "touch") return;
+    touchActiveRef.current = true;
+    if (open) {
+      hide();
+    } else {
+      show(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: triggerRef,
+      className: ["relative inline-flex", className].join(" "),
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerDown: handlePointerDown,
+      onFocus: () => show(false),
+      onBlur: () => {
+        if (!touchActiveRef.current) hide();
+      },
+      children: [
+        React.isValidElement(children) ? React.cloneElement(children, {
+          "aria-describedby": mounted ? `${uid}-tip` : void 0
+        }) : children,
+        mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setFloating,
+            id: `${uid}-tip`,
+            role: "tooltip",
+            className: "px-2.5 py-1.5 rounded-[9px] text-ink-inverse text-[11.5px] font-medium whitespace-nowrap pointer-events-none transition-[opacity,transform] duration-150 ease-[var(--ease-spring)]",
+            style: {
+              position: "fixed",
+              top: 0,
+              left: 0,
+              zIndex: LAYER.tooltip,
+              transformOrigin: ORIGIN[side],
+              opacity: visible ? 1 : 0,
+              transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.95)`,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--tooltip-shadow)",
+              textShadow: "var(--emboss-inverse)"
+            },
+            children: content
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useCallback, useEffect, useId } from \"react\";\nimport { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from \"./Floating\";\n\ntype TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ninterface TooltipProps {\n  content: string;\n  position?: TooltipPosition;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function Tooltip({\n  content,\n  position = \"top\",\n  children,\n  className = \"\",\n}: TooltipProps) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const enterTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const autoHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const touchActiveRef = useRef(false);\n  const uid = useId();\n\n  const hide = useCallback(() => {\n    if (enterTimer.current) clearTimeout(enterTimer.current);\n    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    setVisible(false);\n    exitTimer.current = setTimeout(() => {\n      setMounted(false);\n      setOpen(false);\n    }, 150);\n  }, []);\n\n  const show = useCallback((fromTouch = false) => {\n    if (exitTimer.current) clearTimeout(exitTimer.current);\n    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    enterTimer.current = setTimeout(() => setOpen(true), fromTouch ? 0 : 80);\n    if (fromTouch) {\n      autoHideTimer.current = setTimeout(() => {\n        touchActiveRef.current = false;\n        hide();\n      }, 2400);\n    }\n  }, [hide]);\n\n  // Mounted during render; the effect only waits for it to paint\n  if (open && !mounted) setMounted(true);\n\n  useEffect(() => {\n    if (open) {\n      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));\n    }\n  }, [open]);\n\n  /* Portalled to the body and placed before its first paint, flipping\n     to the other side when there's no room                           */\n  const { setFloating, side } = useAnchoredPosition(triggerRef, { open: mounted, side: position, align: \"center\", gap: 7 });\n\n  useEffect(() => {\n    if (!open) return;\n    const onDocPointer = (e: PointerEvent) => {\n      if (!triggerRef.current?.contains(e.target as Node)) {\n        touchActiveRef.current = false;\n        hide();\n      }\n    };\n    document.addEventListener(\"pointerdown\", onDocPointer);\n    return () => document.removeEventListener(\"pointerdown\", onDocPointer);\n  }, [open, hide]);\n\n  // Escape dismisses without moving focus (WCAG 1.4.13)\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") hide();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, hide]);\n\n  useEffect(() => {\n    return () => {\n      if (enterTimer.current) clearTimeout(enterTimer.current);\n      if (exitTimer.current) clearTimeout(exitTimer.current);\n      if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    };\n  }, []);\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    show(false);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (touchActiveRef.current) return;\n    hide();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (e.pointerType !== \"touch\") return;\n    touchActiveRef.current = true;\n    if (open) {\n      hide();\n    } else {\n      show(true);\n    }\n  };\n\n  return (\n    <div\n      ref={triggerRef}\n      className={[\"relative inline-flex\", className].join(\" \")}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onFocus={() => show(false)}\n      onBlur={() => {\n        if (!touchActiveRef.current) hide();\n      }}\n    >\n      {React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n            \"aria-describedby\": mounted ? `${uid}-tip` : undefined,\n          })\n        : children}\n      {mounted && (\n        <Portal>\n        <div\n          ref={setFloating}\n          id={`${uid}-tip`}\n          role=\"tooltip\"\n          className=\"px-2.5 py-1.5 rounded-[9px] text-ink-inverse text-[11.5px] font-medium whitespace-nowrap pointer-events-none transition-[opacity,transform] duration-150 ease-[var(--ease-spring)]\"\n          style={{\n            position: \"fixed\",\n            top: 0,\n            left: 0,\n            zIndex: LAYER.tooltip,\n            transformOrigin: ORIGIN[side],\n            opacity: visible ? 1 : 0,\n            transform: visible ? \"none\" : `${ENTER_FROM[side]} scale(0.95)`,\n            background: \"var(--face-inverse)\",\n            boxShadow: \"var(--tooltip-shadow)\",\n            textShadow: \"var(--emboss-inverse)\",\n          }}\n        >\n          {content}\n        </div>\n        </Portal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/cli.js

@@ -211,10 +211,111 @@ var registry = [
       ex("input-demo", "default"),
       ex("input-with-label", "with label and hint"),
       ex("input-with-icon", "with icon"),
+      ex("input-layered", "layered, next to a button"),
       ex("input-error", "error"),
       ex("input-disabled", "disabled")
     ]
   },
+  {
+    slug: "number-input",
+    name: "number input",
+    category: "forms",
+    description: "a field for numbers, with two little keys that step it up and down. hold one to keep going, or use the arrow keys.",
+    file: "NumberInput",
+    usage: `<NumberInput label="seats" value={seats} onChange={setSeats} min={1} max={20} />`,
+    examples: [
+      ex("number-input-demo", "default"),
+      ex("number-input-units", "units and decimals", "prefix and suffix hold a unit; step sets the size of each nudge and how many decimals show."),
+      ex("number-input-error", "error")
+    ]
+  },
+  {
+    slug: "date-picker",
+    name: "date picker",
+    category: "forms",
+    description: "a field that opens a calendar. arrows move by day and week, page up and down flip the month.",
+    file: "DatePicker",
+    usage: `<DatePicker label="publish on" value={date} onChange={setDate} />`,
+    examples: [
+      ex("date-picker-demo", "default"),
+      ex("date-picker-limits", "limits", "min, max and isdatedisabled keep people to the days that work."),
+      ex("calendar-demo", "calendar on its own", "the grid is exported as Calendar, for when the month should always be showing.")
+    ]
+  },
+  {
+    slug: "date-range-picker",
+    name: "date range picker",
+    category: "forms",
+    description: "two months side by side. click where it starts and where it ends, and the days between sink into a well.",
+    file: "DateRangePicker",
+    usage: `<DateRangePicker label="report period" value={range} onChange={setRange} />`,
+    examples: [
+      ex("date-range-picker-demo", "with presets"),
+      ex("date-range-picker-single", "one month", "singlemonth keeps the panel narrow; min stops you booking the past.")
+    ]
+  },
+  {
+    slug: "time-picker",
+    name: "time picker",
+    category: "forms",
+    description: "columns of hours and minutes, with am and pm if you want them. the value is always a plain \u201C14:30\u201D.",
+    file: "TimePicker",
+    usage: `<TimePicker label="reminder" value={time} onChange={setTime} />`,
+    examples: [
+      ex("time-picker-demo", "default"),
+      ex("time-picker-12h", "12-hour, with limits")
+    ]
+  },
+  {
+    slug: "color-picker",
+    name: "color picker",
+    category: "forms",
+    description: "a field holding a chip of the colour. open it for a saturation area, a hue strip, a hex field and swatches.",
+    file: "ColorPicker",
+    usage: `<ColorPicker label="accent colour" value={color} onChange={setColor} />`,
+    examples: [
+      ex("color-picker-demo", "default"),
+      ex("color-picker-inline", "inline", "inline puts the panel straight on the page, with no field in front."),
+      ex("color-picker-swatches", "custom swatches", "pass your own palette as swatches, or [] to hide the row.")
+    ]
+  },
+  {
+    slug: "slider",
+    name: "slider",
+    category: "forms",
+    description: "a raised knob riding in a groove. give it two numbers and it becomes a range with a knob at each end.",
+    file: "Slider",
+    usage: `<Slider label="volume" value={volume} onChange={setVolume} />`,
+    examples: [
+      ex("slider-demo", "default"),
+      ex("slider-range", "range", "pass a pair of numbers and you get two knobs that can't cross."),
+      ex("slider-marks", "marks and disabled")
+    ]
+  },
+  {
+    slug: "combobox",
+    name: "combobox",
+    category: "forms",
+    description: "a select you can type into. the list narrows as you go, and the bit that matched turns bold.",
+    file: "Combobox",
+    usage: `<Combobox label="language" options={options} value={value} onChange={setValue} />`,
+    examples: [
+      ex("combobox-demo", "default"),
+      ex("combobox-descriptions", "descriptions and keywords", "keywords match without being shown, so \u201Cgmt\u201D finds london.")
+    ]
+  },
+  {
+    slug: "otp-input",
+    name: "otp input",
+    category: "forms",
+    description: "a row of little wells for a verification code. typing moves you along, and pasting the whole code fills them all.",
+    file: "OtpInput",
+    usage: `<OtpInput length={6} onComplete={verify} />`,
+    examples: [
+      ex("otp-input-demo", "default"),
+      ex("otp-input-alphanumeric", "letters and masking")
+    ]
+  },
   {
     slug: "textarea",
     name: "textarea",
@@ -292,6 +393,30 @@ var registry = [
       ex("tag-input-max", "limited", "maxtags caps how many tags can be added.")
     ]
   },
+  {
+    slug: "radio-cards",
+    name: "radio cards",
+    category: "forms",
+    description: "bigger choices, like a plan. the options sit in one well and a raised thumb springs to the one you pick.",
+    file: "RadioCards",
+    usage: `<RadioCards label="plan" options={plans} value={plan} onChange={setPlan} />`,
+    examples: [
+      ex("radio-cards-demo", "default"),
+      ex("radio-cards-columns", "columns and icons")
+    ]
+  },
+  {
+    slug: "file-upload",
+    name: "file upload",
+    category: "forms",
+    description: "a well you drop files into. each one lands in a list with its size, a progress bar while it uploads and a key to remove it.",
+    file: "FileUpload",
+    usage: `<FileUpload label="attachments" upload={(file, onProgress) => send(file, onProgress)} />`,
+    examples: [
+      ex("file-upload-demo", "with uploading", "pass upload and the bars fill as you report progress; name a file \u201Cfail\u201D to see an error."),
+      ex("file-upload-single", "one image")
+    ]
+  },
   /* ── Navigation ──────────────────────────────────────────────── */
   {
     slug: "tabs",
@@ -428,6 +553,24 @@ var registry = [
       ex("dropdown-menu-with-icons", "with icons")
     ]
   },
+  {
+    slug: "context-menu",
+    name: "context menu",
+    category: "overlays",
+    description: "the dropdown menu's panel, opened where you right-click. long-press works on touch, shift f10 on a keyboard.",
+    file: "ContextMenu",
+    usage: `<ContextMenu items={items} onSelect={handle}>\u2026</ContextMenu>`,
+    examples: [ex("context-menu-demo", "default")]
+  },
+  {
+    slug: "hover-card",
+    name: "hover card",
+    category: "overlays",
+    description: "a preview that floats up when you rest on a link or a name, and stays while you move into it.",
+    file: "HoverCard",
+    usage: `<HoverCard trigger={<a href="/ada">ada</a>}>\u2026</HoverCard>`,
+    examples: [ex("hover-card-demo", "default")]
+  },
   {
     slug: "toast",
     name: "toast",
@@ -496,6 +639,18 @@ toast({ title: "post saved", variant: "success" });`,
       ex("skeleton-card", "cards")
     ]
   },
+  {
+    slug: "spinner",
+    name: "spinner",
+    category: "feedback",
+    description: "a small arc going round, for waits too short or too vague for a progress bar. it takes the text colour around it.",
+    file: "Spinner",
+    usage: `<Spinner label="loading" />`,
+    examples: [
+      ex("spinner-demo", "default"),
+      ex("spinner-in-button", "in a button")
+    ]
+  },
   {
     slug: "empty-state",
     name: "empty state",
@@ -549,6 +704,18 @@ toast({ title: "post saved", variant: "success" });`,
     usage: `<Table columns={columns} rows={rows} title="recent posts" />`,
     examples: [ex("table-demo", "default")]
   },
+  {
+    slug: "separator",
+    name: "separator",
+    category: "data display",
+    description: "a groove scored into the surface, with room for a word in the middle.",
+    file: "Separator",
+    usage: `<Separator label="or" />`,
+    examples: [
+      ex("separator-demo", "with a label"),
+      ex("separator-vertical", "vertical")
+    ]
+  },
   {
     slug: "data-list",
     name: "data list",
@@ -996,7 +1163,7 @@ function parse(argv) {
   return { command: rest[0], args: rest.slice(1), flags };
 }
 var HELP = `
-${c.bold("blurrow")} ${c.gray(`v${"0.2.0"}`)}  ${c.gray("tactile react components")}
+${c.bold("blurrow")} ${c.gray(`v${"0.2.1"}`)}  ${c.gray("tactile react components")}
 
 ${c.bold("usage")}
   npx @blurrow/ui ${c.cyan("<command>")} [options]     ${c.gray("or, once installed: npx blurrow <command>")}
@@ -1025,7 +1192,7 @@ ${c.bold("examples")}
 `;
 function header(title) {
   log.line(`
-${c.bold("blurrow")} ${c.gray("\xB7")} ${title}${c.gray(`  v${"0.2.0"}`)}`);
+${c.bold("blurrow")} ${c.gray("\xB7")} ${title}${c.gray(`  v${"0.2.1"}`)}`);
 }
 function requireProject(flags) {
   const p = useProject(readProject(flags.cwd));
@@ -1331,14 +1498,14 @@ function diff(names, flags) {
     const shipped = sourceFile(e.file);
     const local = fs3.readFileSync(path3.join(p.root, dir, shipped.name), "utf8");
     if (local === shipped.code) {
-      log.ok(`${e.slug} ${c.gray("matches v0.2.0")}`);
+      log.ok(`${e.slug} ${c.gray("matches v0.2.1")}`);
       continue;
     }
     changed++;
     const lines = diffLines(shipped.code, local);
     const plus = lines.filter((l) => l.kind === "+").length;
     const minus = lines.filter((l) => l.kind === "-").length;
-    log.warn(`${c.bold(e.slug)} ${c.green(`+${plus}`)} ${c.red(`-${minus}`)} ${c.gray(`vs v${"0.2.0"}`)}`);
+    log.warn(`${c.bold(e.slug)} ${c.green(`+${plus}`)} ${c.red(`-${minus}`)} ${c.gray(`vs v${"0.2.1"}`)}`);
     if (names.length) printHunks(hunks(lines));
   }
   log.line();
@@ -1445,7 +1612,7 @@ function doctor(flags) {
 }
 async function main() {
   const { command, args, flags } = parse(process.argv.slice(2));
-  if (command === "-v" || command === "--version") return log.line("0.2.0");
+  if (command === "-v" || command === "--version") return log.line("0.2.1");
   if (!command || command === "help" || command === "-h" || command === "--help") return log.line(HELP);
   switch (command) {
     case "init":