makersclaw 0.2.0 → 0.3.0

package/templates/next/files/components/ui/input-otp.jsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+
+// InputOTP — the one-time code from an email or a text: N boxes, one
+// character each. The boxes are a view of ONE string, as a single field
+// is: typing fills the box and moves on, Backspace clears and moves
+// back, a cleared box closes the gap, the arrows and Home/End move, and
+// a box past the first empty one sends the caret back to it. Paste, or
+// the phone's "From Messages" (autocomplete="one-time-code" on the first
+// box), fills every box at once. Each box is a native <input>, so the
+// keyboard, the numeric keypad and autofill are the browser's.
+//
+//   length       how many boxes (6)
+//   groups       box counts split by a dash: [3, 3] → 123–456; their
+//                sum is the length
+//   value        the code so far, a string; onChange(code) on every edit
+//                (controlled), or `defaultValue`
+//   onComplete   (code) → called once the last box fills: verify here
+//   digitsOnly   true (the default: 0–9 and the number pad) · false
+//                (letters too, as typed)
+//   label        what a screen reader calls the group ("Verification code")
+//   name         a hidden input carries the whole code in a form
+//   invalid      every box turns red — pair it with <Field error>
+//
+// Wrap it in <Field id> with the same `id`: the label points at the
+// first box. After a wrong code, clear `value` and the caret starts over.
+
+const SLOT =
+  "h-11 w-10 min-w-0 -ml-px border border-input bg-background text-center text-lg font-medium text-foreground outline-none " +
+  "first:ml-0 first:rounded-l-md last:rounded-r-md caret-foreground selection:bg-transparent " +
+  "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring " +
+  "aria-[invalid=true]:border-destructive disabled:cursor-not-allowed";
+
+export function InputOTP({
+  id,
+  length = 6,
+  groups,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  digitsOnly = true,
+  label = "One-time code",
+  name,
+  invalid,
+  disabled,
+  autoFocus,
+  className,
+}) {
+  const sizes = groups?.length ? groups : [length];
+  const total = sizes.reduce((a, b) => a + b, 0);
+  const [own, setOwn] = useState(defaultValue);
+  const code = (value ?? own).slice(0, total);
+  const boxes = useRef([]);
+  // The code as of the last edit. Focus moves inside the edit's own
+  // event, before React renders it, so the redirect below reads this.
+  const latest = useRef(code);
+  latest.current = code;
+  const allowed = digitsOnly ? /[0-9]/ : /[0-9a-zA-Z]/;
+  const clean = (s) => [...s].filter((c) => allowed.test(c)).join("");
+
+  function focus(i) {
+    const el = boxes.current[Math.max(0, Math.min(i, total - 1))];
+    el?.focus();
+    el?.select();
+  }
+
+  function commit(next, caret) {
+    next = next.slice(0, total);
+    latest.current = next;
+    if (value === undefined) setOwn(next);
+    if (next !== code) onChange?.(next);
+    if (next.length === total && next !== code) onComplete?.(next);
+    if (caret !== undefined) focus(caret);
+  }
+
+  // Put `text` in from box i on, over what is there.
+  function place(i, text) {
+    commit(code.slice(0, i) + text + code.slice(i + text.length), i + text.length);
+  }
+
+  function onInput(e, i) {
+    const old = code[i] ?? "";
+    let v = e.target.value;
+    // The caret sat beside the old character: keep only the new one.
+    if (old && v.length === 2) v = v[0] === old ? v[1] : v[0];
+    if (v === "") return commit(code.slice(0, i) + code.slice(i + 1), i);
+    const typed = clean(v);
+    if (typed) place(i, typed);
+  }
+
+  function onKeyDown(e, i) {
+    if (e.key === "Backspace" && !code[i] && i > 0) {
+      commit(code.slice(0, i - 1) + code.slice(i), i - 1);
+    } else if (e.key === "Delete" && code[i]) {
+      commit(code.slice(0, i) + code.slice(i + 1), i);
+    } else if (e.key === "ArrowLeft") focus(i - 1);
+    else if (e.key === "ArrowRight") focus(Math.min(i + 1, code.length));
+    else if (e.key === "Home") focus(0);
+    else if (e.key === "End") focus(code.length);
+    else return;
+    e.preventDefault();
+  }
+
+  function onPaste(e, i) {
+    e.preventDefault();
+    const text = clean(e.clipboardData.getData("text"));
+    if (!text) return;
+    // A whole code replaces the code; a fragment goes in where the caret is.
+    place(text.length >= total ? 0 : i, text);
+  }
+
+  // The code is one string: a box past the first empty one is not a
+  // place to type, so the caret goes back to the gap.
+  function onFocus(e, i) {
+    if (i > latest.current.length) return focus(latest.current.length);
+    e.target.select();
+  }
+
+  let n = 0;
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={cx("flex items-center gap-2", disabled && "opacity-50", className)}
+    >
+      {sizes.map((size, g) => (
+        <div key={g} className="contents">
+          {g > 0 ? <Icon name="minus" className="shrink-0 text-muted-foreground" /> : null}
+          <div className="flex">
+            {Array.from({ length: size }, () => {
+              const i = n++;
+              return (
+                <input
+                  key={i}
+                  ref={(el) => {
+                    boxes.current[i] = el;
+                  }}
+                  id={i === 0 ? id : undefined}
+                  type="text"
+                  inputMode={digitsOnly ? "numeric" : "text"}
+                  autoComplete={i === 0 ? "one-time-code" : "off"}
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  autoFocus={i === 0 ? autoFocus : undefined}
+                  aria-label={`${digitsOnly ? "Digit" : "Character"} ${i + 1} of ${total}`}
+                  aria-invalid={invalid ? true : undefined}
+                  disabled={disabled}
+                  value={code[i] ?? ""}
+                  onChange={(e) => onInput(e, i)}
+                  onKeyDown={(e) => onKeyDown(e, i)}
+                  onPaste={(e) => onPaste(e, i)}
+                  onFocus={(e) => onFocus(e, i)}
+                  onClick={(e) => e.currentTarget.select()}
+                  data-nums
+                  className={SLOT}
+                />
+              );
+            })}
+          </div>
+        </div>
+      ))}
+      {name ? <input type="hidden" name={name} value={code} /> : null}
+    </div>
+  );
+}

package/templates/next/files/components/ui/item.jsx

@@ -0,0 +1,206 @@
+import Link from "next/link";
+import { Children } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+
+// Item — the list row: a contact, a file, a run, a setting. Media on the
+// left, title and description, meta on the right, then its own actions.
+// With `href` or `onClick` the WHOLE row is the target — the title is the
+// real <a> or <button> and stretches over the row, so the row's own
+// actions stay separate buttons (never a button inside a link) and a
+// screen reader hears the title, not the whole row read out.
+//
+//   media       a node on the left: an avatar, an <img>, a logo
+//   icon        or a glyph from ./icon, drawn in a muted square
+//   title       the one line that names the thing (truncates)
+//   description up to two lines under it
+//   meta        a count, a date, a Badge — muted, on the right
+//   actions     buttons on the far right (IconButton, Menu); they sit above
+//               the row's target, so they click on their own
+//   href        a next/link row · `onClick` a button row · neither: static
+//   size        default (56px) · sm (44px, for dense lists and rails) ·
+//               lg (64px, roomier: a pipeline's runs, a list read at leisure)
+//   variant     plain (no fill) · outline (a bordered card) · muted (a filled panel)
+//   layout      row (default) · stacked — a card for a grid: icon or media on
+//               top, then the title (up to two lines), the description (up
+//               to three), children, and meta at the foot; actions sit in the
+//               top-right corner. It fills its grid cell's height, so a row
+//               of cards lines up. Pair it with variant="outline" or "muted".
+//               The link or button target and what goes where are the row's
+//
+// Where the other props go: `aria-current`, `onClick`, `target` and `rel`
+// belong to the row's target, so they go on its <a> or <button> (with
+// `href`, `onClick` rides on the link: analytics, closing a sheet).
+// aria-current on the target fills the row, so the current page looks
+// like what a screen reader says it is. Every other prop (data-*, id,
+// aria-label…) goes on the row's <div>.
+//
+// ItemGroup stacks plain Items with a rule between each, as a list.
+
+const VARIANTS = {
+  plain: "",
+  outline: "border border-border bg-card text-card-foreground",
+  muted: "bg-muted",
+};
+
+const SIZES = {
+  default: { row: "min-h-14 gap-3 px-3 py-2.5", icon: "size-10", glyph: 18, desc: "line-clamp-2 text-sm" },
+  sm: { row: "min-h-11 gap-2.5 px-2.5 py-1.5", icon: "size-8", glyph: 16, desc: "truncate text-xs" },
+  lg: { row: "min-h-16 gap-3.5 px-4 py-3", icon: "size-11", glyph: 20, desc: "line-clamp-2 text-sm" },
+};
+
+// layout="stacked": the card's padding and gaps, and its icon square.
+const STACKED = {
+  default: { box: "gap-3 p-4", icon: "size-10", glyph: 18 },
+  sm: { box: "gap-2 p-3", icon: "size-8", glyph: 16 },
+  lg: { box: "gap-4 p-5", icon: "size-12", glyph: 22 },
+};
+
+const TARGET = "outline-none after:absolute after:inset-0";
+
+// The row filled while its target (or a static row itself) is current.
+const CURRENT =
+  "has-[[data-item-target][aria-current]:not([aria-current=false])]:bg-accent " +
+  "[&[aria-current]:not([aria-current=false])]:bg-accent";
+
+export function Item({
+  media,
+  icon,
+  title,
+  description,
+  meta,
+  actions,
+  href,
+  onClick,
+  size = "default",
+  variant = "plain",
+  layout = "row",
+  disabled,
+  className,
+  children,
+  "aria-current": ariaCurrent,
+  target,
+  rel,
+  ...rest
+}) {
+  const s = SIZES[size] ?? SIZES.default;
+  const interactive = Boolean(href || onClick) && !disabled;
+
+  let name = title;
+  let targeted = false;
+  if (href && !disabled) {
+    targeted = true;
+    name = (
+      <Link href={href} onClick={onClick} target={target} rel={rel} aria-current={ariaCurrent} data-item-target className={TARGET}>
+        {title}
+      </Link>
+    );
+  } else if (onClick) {
+    targeted = true;
+    name = (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        aria-current={ariaCurrent}
+        data-item-target
+        className={cx(TARGET, "text-left disabled:cursor-not-allowed")}
+      >
+        {title}
+      </button>
+    );
+  }
+
+  const ring =
+    interactive &&
+    "hover:bg-accent has-[[data-item-target]:focus-visible]:ring-2 has-[[data-item-target]:focus-visible]:ring-inset has-[[data-item-target]:focus-visible]:ring-ring";
+
+  if (layout === "stacked") {
+    const k = STACKED[size] ?? STACKED.default;
+    return (
+      <div
+        className={cx("relative flex h-full flex-col items-start rounded-lg text-sm", VARIANTS[variant] ?? VARIANTS.plain, k.box, ring, CURRENT, disabled && "opacity-50", className)}
+        aria-current={targeted ? undefined : ariaCurrent}
+        {...rest}
+      >
+        {icon ? (
+          <span className={cx("flex shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", variant === "muted" && "bg-background", k.icon)}>
+            <Icon name={icon} size={k.glyph} />
+          </span>
+        ) : media ? (
+          <span className="flex shrink-0 items-center">{media}</span>
+        ) : null}
+        <div className={cx("w-full min-w-0 flex-1", actions && !icon && !media && "pr-10")}>
+          <p className="line-clamp-2 font-medium text-foreground">{name}</p>
+          {description ? <p className="mt-1 line-clamp-3 text-sm text-muted-foreground">{description}</p> : null}
+          {children ? <div className="mt-2">{children}</div> : null}
+        </div>
+        {meta !== undefined && meta !== null ? (
+          <div data-nums className="text-xs text-muted-foreground">
+            {meta}
+          </div>
+        ) : null}
+        {actions ? <div className="absolute right-2 top-2 z-10 flex items-center gap-1">{actions}</div> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cx(
+        "relative flex items-center rounded-lg text-sm",
+        VARIANTS[variant] ?? VARIANTS.plain,
+        s.row,
+        ring,
+        CURRENT,
+        disabled && "opacity-50",
+        className,
+      )}
+      aria-current={targeted ? undefined : ariaCurrent}
+      {...rest}
+    >
+      {icon ? (
+        <span className={cx("flex shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", variant === "muted" && "bg-background", s.icon)}>
+          <Icon name={icon} size={s.glyph} />
+        </span>
+      ) : media ? (
+        <span className="flex shrink-0 items-center">{media}</span>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium text-foreground">{name}</p>
+        {description ? <p className={cx("text-muted-foreground", s.desc)}>{description}</p> : null}
+        {children ? <div className="mt-1.5">{children}</div> : null}
+      </div>
+      {meta !== undefined && meta !== null ? (
+        <div data-nums className="shrink-0 text-xs text-muted-foreground">
+          {meta}
+        </div>
+      ) : null}
+      {actions ? <div className="relative z-10 flex shrink-0 items-center gap-1">{actions}</div> : null}
+    </div>
+  );
+}
+
+/** Items as a list, a rule between each. `variant="outline"` boxes the
+ *  whole list; put plain Items in it. */
+export function ItemGroup({ variant = "plain", className, children, "aria-label": ariaLabel }) {
+  const rows = Children.toArray(children).filter(Boolean);
+  if (rows.length === 0) return null;
+  return (
+    <ul
+      role="list"
+      aria-label={ariaLabel}
+      className={cx(
+        "flex flex-col",
+        variant === "outline" && "overflow-hidden rounded-lg border border-border bg-card text-card-foreground [&>li>*]:rounded-none",
+        className,
+      )}
+    >
+      {rows.map((row, i) => (
+        <li key={row.key ?? i} className={cx(i > 0 && "border-t border-border")}>
+          {row}
+        </li>
+      ))}
+    </ul>
+  );
+}