makersclaw 0.2.0 → 0.3.1

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

@@ -0,0 +1,143 @@
+import { cx } from "./cx";
+
+// Waiting signals: a spinner, a skeleton, a progress bar. Server-safe (no
+// hooks). Each says to a screen reader what the eye sees — a spinner is
+// a status, a skeleton is nothing (the real content announces itself), a
+// bar is a progressbar with a name. Motion respects the reader's
+// prefers-reduced-motion: the spinner slows, the skeleton and the
+// indeterminate bar stop moving.
+
+const SPINNER_SIZES = { sm: 16, md: 24, lg: 36 };
+
+/**
+ * A turning arc in the text colour around it (currentColor), so it takes
+ * the tone of whatever holds it.
+ *
+ *   size    sm (16px, inline with text and in a Button) · md (24) · lg (36)
+ *   label   what a screen reader hears, default "Loading"; null when the
+ *           container already says it (a Button with `loading`, aria-busy)
+ */
+export function Spinner({ size = "md", label = "Loading", className }) {
+  const px = SPINNER_SIZES[size] ?? SPINNER_SIZES.md;
+  return (
+    <svg
+      width={px}
+      height={px}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      role={label ? "status" : undefined}
+      aria-label={label || undefined}
+      aria-hidden={label ? undefined : true}
+      className={cx("shrink-0 animate-spin motion-reduce:[animation-duration:2.4s]", className)}
+    >
+      <circle cx="12" cy="12" r="9" className="opacity-20" />
+      <path d="M21 12a9 9 0 0 0-9-9" />
+    </svg>
+  );
+}
+
+const SKELETON_SHAPES = {
+  line: "h-[1em] rounded-sm",
+  circle: "aspect-square rounded-full",
+  rect: "rounded-lg",
+};
+
+/**
+ * Where content will be, drawn before it arrives — the size of the real
+ * thing, so nothing jumps when it lands. Hidden from screen readers; put
+ * aria-busy on the region it stands in for.
+ *
+ *   shape      line (text height; give a width: w-2/3) · circle (give
+ *              one side: size-10) · rect (give both: h-32 w-full)
+ *   className  the size, and nothing else
+ */
+export function Skeleton({ shape = "line", className }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cx(
+        "block animate-pulse bg-accent motion-reduce:animate-none",
+        SKELETON_SHAPES[shape] ?? SKELETON_SHAPES.line,
+        className,
+      )}
+    />
+  );
+}
+
+const PROGRESS_TONES = {
+  neutral: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  info: "bg-info",
+};
+
+// The indeterminate sweep. Tailwind ships no such keyframes and the kit
+// does not edit globals.css, so the bar carries its own; identical copies
+// are harmless.
+const SWEEP = "@keyframes kit-progress-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}";
+
+/**
+ * How far along a known job is (value of max), or that an unknown one is
+ * running (value omitted). A role=progressbar the browser and screen
+ * readers understand, drawn from tokens — the native <progress> cannot be
+ * themed the same way in every engine.
+ *
+ *   value      0…max; null/undefined → indeterminate (a sweeping bar)
+ *   max        default 100
+ *   label      the bar's name, shown above it and read to a screen reader
+ *   valueText  what the right side says and a reader hears ("3 of 5
+ *              steps"); default the percent. Omitted when indeterminate
+ *   tone       neutral · success · warning · danger · info — status only
+ */
+export function Progress({ value, max = 100, label, valueText, tone = "neutral", className, ...rest }) {
+  const known = typeof value === "number" && Number.isFinite(value);
+  const pct = known && max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
+  const text = known ? valueText ?? `${Math.round(pct)}%` : undefined;
+  const fill = PROGRESS_TONES[tone] ?? PROGRESS_TONES.neutral;
+  return (
+    <div className={cx("grid gap-1.5", className)}>
+      {label ? (
+        <div aria-hidden="true" className="flex items-baseline justify-between gap-3 text-sm">
+          <span className="min-w-0 truncate font-medium text-foreground">{label}</span>
+          {text ? (
+            <span data-nums className="shrink-0 text-xs text-muted-foreground">
+              {text}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      <div
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={known ? max : undefined}
+        aria-valuenow={known ? value : undefined}
+        aria-valuetext={text}
+        className="relative h-2 w-full overflow-hidden rounded-full bg-accent"
+        {...rest}
+      >
+        {known ? (
+          <div
+            className={cx("h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none", fill)}
+            style={{ width: `${pct}%` }}
+          />
+        ) : (
+          <>
+            <style>{SWEEP}</style>
+            <div
+              className={cx(
+                "h-full w-2/5 rounded-full animate-[kit-progress-sweep_1.4s_ease-in-out_infinite]",
+                "motion-reduce:w-full motion-reduce:animate-pulse",
+                fill,
+              )}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,6 @@
+"use client";
+
+import { useCallback, useLayoutEffect, useRef } from "react";
 import { cx } from "./cx";
 
 // Form parts. Each is the native element with the workspace's look and a
@@ -39,12 +42,121 @@ export function Input({ className, invalid, ...rest }) {
   return <input className={cx(CONTROL, className)} aria-invalid={invalid ? true : undefined} {...rest} />;
 }
 
-export function Textarea({ className, invalid, rows = 4, ...rest }) {
+/**
+ * A time of day: the native <input type="time"> (the browser's segments,
+ * keyboard and picker; `value` is "HH:MM", or "HH:MM:SS" with `step` under
+ * 60), in the workspace's look. The browser's own clock button is drawn
+ * by the engine in its own grey and ignores the theme, so it is laid
+ * invisibly over the kit's clock glyph: the glyph is what shows, the
+ * native button is what a press opens. min, max, step, required and every
+ * other prop go to the input.
+ */
+export function TimeInput({ className, invalid, ...rest }) {
+  return (
+    <span className="relative block">
+      <input
+        type="time"
+        className={cx(
+          CONTROL,
+          "appearance-none pr-10 tabular-nums [&::-webkit-date-and-time-value]:text-left",
+          "[&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:top-1/2",
+          "[&::-webkit-calendar-picker-indicator]:size-5 [&::-webkit-calendar-picker-indicator]:-translate-y-1/2 [&::-webkit-calendar-picker-indicator]:m-0",
+          "[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0",
+          className,
+        )}
+        aria-invalid={invalid ? true : undefined}
+        {...rest}
+      />
+      <svg
+        aria-hidden="true"
+        className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 4v5l3 3" />
+      </svg>
+    </span>
+  );
+}
+
+/**
+ * Keeps a <textarea> as tall as its text, between `minRows` and `maxRows`
+ * lines; past `maxRows` it scrolls. Returns the ref callback to put on the
+ * textarea (it also sets `outer`, a ref of the caller's). It measures on
+ * every value change, typed or set (a composer clearing after send), and
+ * when the width changes the wrapping. Textarea autoGrow and InputGroup
+ * multiline use it; it is not a surface's tool.
+ */
+export function useAutoGrow({ enabled = true, minRows = 1, maxRows = 8, value, outer }) {
+  const node = useRef(null);
+
+  const fit = useCallback(() => {
+    const el = node.current;
+    if (!el || !enabled) return;
+    const cs = getComputedStyle(el);
+    const line = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5 || 20;
+    const frame =
+      parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) +
+      (cs.boxSizing === "border-box" ? parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth) : 0);
+    const low = line * Math.max(1, minRows) + frame;
+    const high = Number.isFinite(maxRows) && maxRows > 0 ? line * Math.max(minRows, maxRows) + frame : Infinity;
+    el.style.height = "auto";
+    const content = el.scrollHeight + (cs.boxSizing === "border-box" ? parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth) : 0);
+    el.style.height = `${Math.min(Math.max(content, low), high)}px`;
+    el.style.overflowY = content > high ? "auto" : "hidden";
+  }, [enabled, minRows, maxRows]);
+
+  useLayoutEffect(fit, [fit, value]);
+
+  // A width change re-wraps the text; a height change is our own doing.
+  useLayoutEffect(() => {
+    const el = node.current;
+    if (!el || !enabled || typeof ResizeObserver === "undefined") return;
+    let width = el.clientWidth;
+    const ro = new ResizeObserver(() => {
+      if (el.clientWidth === width) return;
+      width = el.clientWidth;
+      fit();
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [enabled, fit]);
+
+  const ref = useCallback(
+    (el) => {
+      node.current = el;
+      if (typeof outer === "function") return outer(el);
+      if (outer) outer.current = el;
+    },
+    [outer],
+  );
+  return { ref, fit };
+}
+
+/**
+ * The native <textarea>. `rows` sets its height (default 4) and it
+ * resizes by its corner. `autoGrow` makes it as tall as its text instead:
+ * from `minRows` (default 1) to `maxRows` (default 8) lines, then it
+ * scrolls; no resize corner.
+ */
+export function Textarea({ className, invalid, rows = 4, autoGrow = false, minRows = 1, maxRows = 8, onInput, ref, ...rest }) {
+  const grow = useAutoGrow({ enabled: autoGrow, minRows, maxRows, value: rest.value, outer: ref });
   return (
     <textarea
-      rows={rows}
-      className={cx(CONTROL, "min-h-24 resize-y py-2.5 leading-normal", className)}
+      ref={grow.ref}
+      rows={autoGrow ? minRows : rows}
+      className={cx(CONTROL, autoGrow ? "resize-none py-2.5 leading-normal" : "min-h-24 resize-y py-2.5 leading-normal", className)}
       aria-invalid={invalid ? true : undefined}
+      onInput={(e) => {
+        if (autoGrow) grow.fit();
+        onInput?.(e);
+      }}
       {...rest}
     />
   );

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

@@ -0,0 +1,234 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { cx } from "./cx";
+import { Button, IconButton } from "./button";
+import { Icon } from "./icon";
+
+// FileInput and FileDrop — how files come in. Both are a real hidden
+// <input type=file> underneath, so the picker is the browser's own (the
+// camera roll on a phone, the Finder on a Mac); the kit draws the door.
+// Neither uploads: the chosen files go out through `onFiles(files)` (an
+// array of File) and the upload is yours.
+//
+// FileInput — a Button that opens the picker.
+//   children  the button's text ("Upload a CSV"); without children it is
+//             an IconButton and `label` (required then) is what a reader
+//             says ("Attach files")
+//   icon      the glyph (upload; paperclip for a composer)
+//   variant, size  as Button
+//
+// FileDrop — a drop zone: drag files onto it, or press it (click, Enter,
+// Space) for the picker. It lights up while files are dragged over it.
+//   label     the line inside it ("Drop files here or browse")
+//   hint      the muted line under it ("PNG or JPG, up to 10 MB")
+//   size      md (a tall box; the default) · sm (one row)
+//   children  replaces the icon, label and hint inside the zone
+//   invalid   marks the zone red (a rejected file, a required one missing)
+//
+// Both:
+//   accept    as the input's ("image/*", ".csv,text/csv"). The picker
+//             greys out the rest; a drop is filtered the same way and what
+//             does not match goes to `onReject(files)`
+//   multiple  more than one file (a drop of several with multiple off
+//             keeps the first)
+//   disabled  no picker, no drop
+//   onFiles   (files) — never called with an empty array
+//
+// Choosing the same file twice in a row fires onFiles twice: the input is
+// emptied after every pick.
+
+/** Does `file` match an accept string ("image/*,.pdf,text/csv")? */
+export function fileMatches(file, accept) {
+  if (!accept) return true;
+  const name = (file.name ?? "").toLowerCase();
+  const type = (file.type ?? "").toLowerCase();
+  return accept
+    .split(",")
+    .map((a) => a.trim().toLowerCase())
+    .filter(Boolean)
+    .some((a) => {
+      if (a.startsWith(".")) return name.endsWith(a);
+      if (a.endsWith("/*")) return type.startsWith(a.slice(0, -1));
+      return type === a;
+    });
+}
+
+function split(list, accept, multiple) {
+  const all = Array.from(list ?? []);
+  const ok = all.filter((f) => fileMatches(f, accept));
+  const no = all.filter((f) => !fileMatches(f, accept));
+  return { ok: multiple ? ok : ok.slice(0, 1), no };
+}
+
+function Hidden({ input, accept, multiple, disabled, capture, onPick }) {
+  return (
+    <input
+      ref={input}
+      type="file"
+      hidden
+      tabIndex={-1}
+      aria-hidden="true"
+      accept={accept}
+      multiple={multiple}
+      disabled={disabled}
+      capture={capture}
+      onChange={(e) => {
+        const list = Array.from(e.target.files ?? []);
+        e.target.value = "";
+        onPick(list);
+      }}
+    />
+  );
+}
+
+export function FileInput({
+  onFiles,
+  onReject,
+  accept,
+  multiple = false,
+  disabled = false,
+  capture,
+  icon = "upload",
+  label,
+  variant,
+  size,
+  className,
+  children,
+  ...rest
+}) {
+  const input = useRef(null);
+  const pick = (list) => {
+    const { ok, no } = split(list, accept, multiple);
+    if (no.length) onReject?.(no);
+    if (ok.length) onFiles?.(ok);
+  };
+  const open = () => {
+    if (!disabled) input.current?.click();
+  };
+  return (
+    <>
+      <Hidden input={input} accept={accept} multiple={multiple} disabled={disabled} capture={capture} onPick={pick} />
+      {children ? (
+        <Button icon={icon} variant={variant} size={size} disabled={disabled} onClick={open} className={className} {...rest}>
+          {children}
+        </Button>
+      ) : (
+        <IconButton icon={icon} label={label ?? "Choose files"} variant={variant} size={size} disabled={disabled} onClick={open} className={className} {...rest} />
+      )}
+    </>
+  );
+}
+
+const ZONE_SIZES = {
+  md: "min-h-40 flex-col justify-center gap-2 px-6 py-8 text-center",
+  sm: "min-h-11 flex-row justify-start gap-3 px-3 py-2.5 text-left",
+};
+
+export function FileDrop({
+  onFiles,
+  onReject,
+  accept,
+  multiple = false,
+  disabled = false,
+  label = "Drop files here or browse",
+  hint,
+  size = "md",
+  invalid = false,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const input = useRef(null);
+  const id = useId();
+  const [over, setOver] = useState(false);
+  const depth = useRef(0);
+
+  const pick = (list) => {
+    const { ok, no } = split(list, accept, multiple);
+    if (no.length) onReject?.(no);
+    if (ok.length) onFiles?.(ok);
+  };
+  const open = () => {
+    if (!disabled) input.current?.click();
+  };
+  const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      aria-invalid={invalid || undefined}
+      aria-label={ariaLabel}
+      aria-describedby={hint && !children ? `${id}-hint` : undefined}
+      data-dragging={over ? "" : undefined}
+      onClick={(e) => {
+        if (e.target.closest("button, a, input")) return;
+        open();
+      }}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          open();
+        }
+      }}
+      onDragEnter={(e) => {
+        if (disabled || !hasFiles(e)) return;
+        e.preventDefault();
+        depth.current += 1;
+        setOver(true);
+      }}
+      onDragOver={(e) => {
+        if (disabled || !hasFiles(e)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "copy";
+      }}
+      onDragLeave={() => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setOver(false);
+      }}
+      onDrop={(e) => {
+        if (disabled) return;
+        e.preventDefault();
+        depth.current = 0;
+        setOver(false);
+        pick(e.dataTransfer?.files);
+      }}
+      className={cx(
+        "flex w-full cursor-pointer items-center rounded-lg border border-dashed bg-background text-sm transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "hover:bg-accent data-[dragging]:border-solid data-[dragging]:border-primary data-[dragging]:bg-accent",
+        invalid ? "border-destructive" : "border-input",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        ZONE_SIZES[size] ?? ZONE_SIZES.md,
+        className,
+      )}
+      {...rest}
+    >
+      <Hidden input={input} accept={accept} multiple={multiple} disabled={disabled} onPick={pick} />
+      {children ?? (
+        <>
+          <span
+            className={cx(
+              "flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground",
+              size === "sm" ? "size-8" : "size-10",
+            )}
+          >
+            <Icon name="upload" size={size === "sm" ? 16 : 18} />
+          </span>
+          <span className="grid min-w-0 gap-0.5">
+            <span className="font-medium text-foreground">{over ? (multiple ? "Drop to add them" : "Drop to add it") : label}</span>
+            {hint ? (
+              <span id={`${id}-hint`} className={cx("text-xs", invalid ? "text-destructive" : "text-muted-foreground")}>
+                {hint}
+              </span>
+            ) : null}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}