@krizaka/ui 2.2.0 → 2.4.0

package/dist/media-capture.js

@@ -0,0 +1,242 @@
+"use client";
+import {
+  formatClock,
+  playSafely,
+  usePrefersReducedMotion
+} from "./chunk-EUPTXKH7.js";
+import {
+  CameraGlyph,
+  FlipGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/media-capture/media-capture.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var mediaCapture = tv({
+  slots: {
+    root: "theme-dark relative isolate flex w-full flex-col overflow-hidden rounded-xl bg-media text-fg-on-media",
+    stage: "relative w-full",
+    video: "absolute inset-0 h-full w-full object-cover data-[mirrored]:-scale-x-100",
+    panel: "absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-sm",
+    panelIcon: "flex h-12 w-12 items-center justify-center rounded-full bg-fg-on-media/15",
+    primary: "inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-accent px-4 text-sm font-semibold text-on-accent hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-media",
+    secondary: "inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-fg-on-media/40 px-4 text-sm font-semibold text-fg-on-media hover:bg-fg-on-media/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    bar: "absolute inset-x-0 bottom-0 flex items-center justify-center gap-6 bg-linear-to-t from-scrim-strong to-transparent px-4 pb-4 pt-10",
+    shutter: "relative inline-flex h-16 w-16 items-center justify-center rounded-full border-4 border-fg-on-media bg-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-media after:h-12 after:w-12 after:rounded-full after:bg-fg-on-media after:transition-all motion-reduce:after:transition-none data-[mode=video]:after:bg-danger data-[recording]:after:h-6 data-[recording]:after:w-6 data-[recording]:after:rounded-md",
+    round: "inline-flex h-11 w-11 items-center justify-center rounded-full bg-scrim-strong text-fg-on-media hover:bg-scrim focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:invisible",
+    modes: "absolute inset-x-0 top-3 flex justify-center",
+    mode: "rounded-full px-3 py-1 text-xs font-semibold text-fg-on-media/80 aria-pressed:bg-fg-on-media aria-pressed:text-media focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    timer: "absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-scrim-strong px-2.5 py-1 font-mono text-xs tabular-nums before:h-2 before:w-2 before:rounded-full before:bg-danger before:animate-pulse motion-reduce:before:animate-none"
+  }
+});
+var mediaCaptureLabels = {
+  region: "Camera",
+  prompt: "Use your camera to take a photo or record a clip.",
+  start: "Turn on the camera",
+  denied: "Camera access is blocked. Allow it in your browser settings, or choose a file.",
+  unavailable: "No camera is available here.",
+  fallback: "Choose a file",
+  takePhoto: "Take photo",
+  startRecording: "Start recording",
+  stopRecording: "Stop recording",
+  switchCamera: "Switch camera",
+  photoMode: "Photo",
+  videoMode: "Video"
+};
+var supported = () => typeof navigator !== "undefined" && Boolean(navigator.mediaDevices?.getUserMedia);
+var recorderType = () => typeof MediaRecorder === "undefined" ? void 0 : ["video/webm;codecs=vp9,opus", "video/webm", "video/mp4"].find((t) => MediaRecorder.isTypeSupported?.(t));
+function MediaCapture({
+  mode = "photo",
+  facing: initialFacing = "user",
+  audio = true,
+  maxDuration,
+  autoStart,
+  onCapture,
+  onError,
+  aspectRatio = "3 / 4",
+  labels: given,
+  className
+}) {
+  const labels = { ...mediaCaptureLabels, ...given };
+  const s = mediaCapture();
+  const reduce = usePrefersReducedMotion();
+  const video = React.useRef(null);
+  const stream = React.useRef(null);
+  const recorder = React.useRef(null);
+  const file = React.useRef(null);
+  const [state, setState] = React.useState("idle");
+  const [facing, setFacing] = React.useState(initialFacing);
+  const [kind, setKind] = React.useState(mode === "video" ? "video" : "photo");
+  const [recording, setRecording] = React.useState(false);
+  const [elapsed, setElapsed] = React.useState(0);
+  const [cameras, setCameras] = React.useState(0);
+  const stop = React.useCallback(() => {
+    if (recorder.current?.state === "recording") recorder.current.stop();
+    stream.current?.getTracks().forEach((track) => track.stop());
+    stream.current = null;
+  }, []);
+  const start = React.useCallback(
+    async (side) => {
+      if (!supported()) {
+        setState("unavailable");
+        return;
+      }
+      setState("starting");
+      stop();
+      try {
+        const media = await navigator.mediaDevices.getUserMedia({ video: { facingMode: side }, audio: mode !== "photo" && audio });
+        stream.current = media;
+        if (video.current) {
+          video.current.srcObject = media;
+          playSafely(video.current);
+        }
+        const devices = await navigator.mediaDevices.enumerateDevices?.().catch(() => []);
+        setCameras((devices ?? []).filter((d) => d.kind === "videoinput").length);
+        setState("live");
+      } catch (error) {
+        const name = error?.name;
+        setState(name === "NotAllowedError" || name === "SecurityError" ? "denied" : "unavailable");
+        onError?.(error);
+      }
+    },
+    [audio, mode, onError, stop]
+  );
+  React.useEffect(() => {
+    if (!autoStart || !supported() || !navigator.permissions?.query) return;
+    let live = true;
+    navigator.permissions.query({ name: "camera" }).then((status) => {
+      if (live && status.state === "granted") void start(initialFacing);
+    }).catch(() => void 0);
+    return () => {
+      live = false;
+    };
+  }, [autoStart, initialFacing, start]);
+  React.useEffect(() => {
+    const hide = () => {
+      if (!document.hidden) return;
+      stop();
+      setState((current) => current === "live" ? "idle" : current);
+    };
+    document.addEventListener("visibilitychange", hide);
+    return () => {
+      document.removeEventListener("visibilitychange", hide);
+      stop();
+    };
+  }, [stop]);
+  React.useEffect(() => {
+    if (!recording) return;
+    const began = Date.now();
+    const timer = setInterval(() => {
+      const seconds = (Date.now() - began) / 1e3;
+      setElapsed(seconds);
+      if (maxDuration && seconds >= maxDuration) recorder.current?.stop();
+    }, 250);
+    return () => clearInterval(timer);
+  }, [recording, maxDuration]);
+  const deliver = (blob, captured) => onCapture({ blob, kind: captured, url: URL.createObjectURL(blob) });
+  const takePhoto = () => {
+    const element = video.current;
+    if (!element?.videoWidth) return;
+    const canvas = document.createElement("canvas");
+    canvas.width = element.videoWidth;
+    canvas.height = element.videoHeight;
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    if (facing === "user") {
+      context.translate(canvas.width, 0);
+      context.scale(-1, 1);
+    }
+    context.drawImage(element, 0, 0);
+    canvas.toBlob((blob) => blob && deliver(blob, "photo"), "image/jpeg", 0.92);
+  };
+  const toggleRecording = () => {
+    if (recording) {
+      recorder.current?.stop();
+      return;
+    }
+    if (!stream.current) return;
+    const chunks = [];
+    const type = recorderType();
+    const next = new MediaRecorder(stream.current, type ? { mimeType: type } : void 0);
+    next.ondataavailable = (event) => event.data.size && chunks.push(event.data);
+    next.onstop = () => {
+      setRecording(false);
+      setElapsed(0);
+      deliver(new Blob(chunks, { type: next.mimeType || type || "video/webm" }), "video");
+    };
+    recorder.current = next;
+    next.start(1e3);
+    setRecording(true);
+  };
+  const flip = () => {
+    const side = facing === "user" ? "environment" : "user";
+    setFacing(side);
+    void start(side);
+  };
+  const accept = mode === "video" ? "video/*" : mode === "photo" ? "image/*" : "image/*,video/*";
+  const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: s.secondary(), onClick: () => file.current?.click(), children: labels.fallback }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: file,
+        type: "file",
+        accept,
+        capture: facing,
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: "sr-only",
+        onChange: (event) => {
+          const picked = event.target.files?.[0];
+          if (picked) deliver(picked, picked.type.startsWith("video/") ? "video" : "photo");
+          event.target.value = "";
+        }
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("section", { "aria-label": labels.region, className: s.root({ className }), children: /* @__PURE__ */ jsxs("div", { className: s.stage(), style: { aspectRatio }, children: [
+    /* @__PURE__ */ jsx("video", { ref: video, muted: true, playsInline: true, "aria-hidden": true, "data-mirrored": facing === "user" ? "" : void 0, className: s.video(), hidden: state !== "live" }),
+    state !== "live" && /* @__PURE__ */ jsxs("div", { className: s.panel(), role: state === "denied" || state === "unavailable" ? "alert" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { className: s.panelIcon(), "aria-hidden": true, children: /* @__PURE__ */ jsx(CameraGlyph, { className: "h-6 w-6" }) }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: state === "denied" ? labels.denied : state === "unavailable" ? labels.unavailable : labels.prompt }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [
+        (state === "idle" || state === "starting") && /* @__PURE__ */ jsxs("button", { type: "button", className: s.primary(), disabled: state === "starting", onClick: () => void start(facing), children: [
+          /* @__PURE__ */ jsx(CameraGlyph, { className: "h-4 w-4" }),
+          labels.start
+        ] }),
+        fallback
+      ] })
+    ] }),
+    state === "live" && mode === "both" && !recording && /* @__PURE__ */ jsx("div", { className: s.modes(), children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 rounded-full bg-scrim-strong p-1", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": kind === "photo", className: s.mode(), onClick: () => setKind("photo"), children: labels.photoMode }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": kind === "video", className: s.mode(), onClick: () => setKind("video"), children: labels.videoMode })
+    ] }) }),
+    recording && /* @__PURE__ */ jsxs("span", { className: s.timer(), role: "timer", "aria-live": "off", children: [
+      formatClock(elapsed),
+      maxDuration ? ` / ${formatClock(maxDuration)}` : ""
+    ] }),
+    state === "live" && /* @__PURE__ */ jsxs("div", { className: s.bar(), children: [
+      /* @__PURE__ */ jsx("span", { className: "h-11 w-11" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: s.shutter(),
+          "data-mode": kind,
+          "data-recording": recording ? "" : void 0,
+          "data-reduce": reduce ? "" : void 0,
+          "aria-label": kind === "photo" ? labels.takePhoto : recording ? labels.stopRecording : labels.startRecording,
+          onClick: kind === "photo" ? takePhoto : toggleRecording
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.round(), "aria-label": labels.switchCamera, disabled: cameras < 2 || recording, onClick: flip, children: /* @__PURE__ */ jsx(FlipGlyph, { className: "h-5 w-5" }) })
+    ] })
+  ] }) });
+}
+export {
+  MediaCapture,
+  mediaCapture,
+  mediaCaptureLabels
+};
+//# sourceMappingURL=media-capture.js.map

package/dist/media-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/media-capture/media-capture.tsx"],"sourcesContent":["// Client. The camera in the page: asks for it only when the person presses the button (never on load), shows the\n// preview (mirrored for the front camera), takes a photo (a canvas → JPEG `Blob`) or records a clip (MediaRecorder,\n// a timer, a maximum length), switches cameras. Every dead end has a way out: permission refused, no camera, no\n// `getUserMedia` (an old browser, an insecure page) → the file picker with `capture`, which opens the phone's own\n// camera. The tracks stop when it unmounts or the page is hidden.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CameraGlyph, FlipGlyph } from \"../glyphs\";\nimport { formatClock, playSafely, usePrefersReducedMotion } from \"../media\";\n\nexport const mediaCapture = tv({\n  slots: {\n    root: \"theme-dark relative isolate flex w-full flex-col overflow-hidden rounded-xl bg-media text-fg-on-media\",\n    stage: \"relative w-full\",\n    video: \"absolute inset-0 h-full w-full object-cover data-[mirrored]:-scale-x-100\",\n    panel: \"absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-sm\",\n    panelIcon: \"flex h-12 w-12 items-center justify-center rounded-full bg-fg-on-media/15\",\n    primary:\n      \"inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-accent px-4 text-sm font-semibold text-on-accent hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-media\",\n    secondary:\n      \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-fg-on-media/40 px-4 text-sm font-semibold text-fg-on-media hover:bg-fg-on-media/10 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar: \"absolute inset-x-0 bottom-0 flex items-center justify-center gap-6 bg-linear-to-t from-scrim-strong to-transparent px-4 pb-4 pt-10\",\n    shutter:\n      \"relative inline-flex h-16 w-16 items-center justify-center rounded-full border-4 border-fg-on-media bg-transparent \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-media \" +\n      \"after:h-12 after:w-12 after:rounded-full after:bg-fg-on-media after:transition-all motion-reduce:after:transition-none \" +\n      \"data-[mode=video]:after:bg-danger data-[recording]:after:h-6 data-[recording]:after:w-6 data-[recording]:after:rounded-md\",\n    round:\n      \"inline-flex h-11 w-11 items-center justify-center rounded-full bg-scrim-strong text-fg-on-media hover:bg-scrim \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:invisible\",\n    modes: \"absolute inset-x-0 top-3 flex justify-center\",\n    mode:\n      \"rounded-full px-3 py-1 text-xs font-semibold text-fg-on-media/80 aria-pressed:bg-fg-on-media aria-pressed:text-media \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    timer:\n      \"absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-scrim-strong px-2.5 py-1 font-mono text-xs tabular-nums \" +\n      \"before:h-2 before:w-2 before:rounded-full before:bg-danger before:animate-pulse motion-reduce:before:animate-none\",\n  },\n});\n\nexport type CaptureResult = {\n  /** The photo (JPEG) or the clip (WebM / MP4, as the browser records). */\n  blob: Blob;\n  /** `photo` or `video`. */\n  kind: \"photo\" | \"video\";\n  /** An object URL of the blob, to preview it (revoke it when done). */\n  url: string;\n};\n\nexport type MediaCaptureLabels = {\n  /** The accessible name of the camera (\"Camera\"). */\n  region: string;\n  /** Why the camera is asked for, before the request (\"Use your camera to take a photo\"). */\n  prompt: string;\n  /** The button that asks (\"Turn on the camera\"). */\n  start: string;\n  /** Permission refused (\"Camera access is blocked. Allow it in your browser settings, or choose a file.\"). */\n  denied: string;\n  /** No camera, or no access possible here (\"No camera is available.\"). */\n  unavailable: string;\n  /** The way out: the file picker (\"Choose a file\"). */\n  fallback: string;\n  takePhoto: string;\n  startRecording: string;\n  stopRecording: string;\n  switchCamera: string;\n  photoMode: string;\n  videoMode: string;\n};\n\nexport const mediaCaptureLabels: MediaCaptureLabels = {\n  region: \"Camera\",\n  prompt: \"Use your camera to take a photo or record a clip.\",\n  start: \"Turn on the camera\",\n  denied: \"Camera access is blocked. Allow it in your browser settings, or choose a file.\",\n  unavailable: \"No camera is available here.\",\n  fallback: \"Choose a file\",\n  takePhoto: \"Take photo\",\n  startRecording: \"Start recording\",\n  stopRecording: \"Stop recording\",\n  switchCamera: \"Switch camera\",\n  photoMode: \"Photo\",\n  videoMode: \"Video\",\n};\n\nexport type MediaCaptureProps = {\n  /** What it captures: `photo` (default), `video`, or `both` (a switch above the preview). */\n  mode?: \"photo\" | \"video\" | \"both\";\n  /** The camera at first: `user` (front, mirrored, default) or `environment` (back). */\n  facing?: \"user\" | \"environment\";\n  /** Records the microphone with a clip. Default `true`. */\n  audio?: boolean;\n  /** The longest clip, in seconds: recording stops by itself. */\n  maxDuration?: number;\n  /** Starts the camera at mount (only when the permission is already granted — never a prompt on load). */\n  autoStart?: boolean;\n  /** Called with a photo taken or a clip recorded (or a file picked in the fallback). */\n  onCapture: (result: CaptureResult) => void;\n  /** Called when the camera cannot start (`NotAllowedError`, `NotFoundError`…). */\n  onError?: (error: unknown) => void;\n  /** The width / height ratio of the preview. Default `\"3 / 4\"`. */\n  aspectRatio?: string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<MediaCaptureLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\ntype State = \"idle\" | \"starting\" | \"live\" | \"denied\" | \"unavailable\";\n\nconst supported = () => typeof navigator !== \"undefined\" && Boolean(navigator.mediaDevices?.getUserMedia);\nconst recorderType = () =>\n  typeof MediaRecorder === \"undefined\" ? undefined : [\"video/webm;codecs=vp9,opus\", \"video/webm\", \"video/mp4\"].find((t) => MediaRecorder.isTypeSupported?.(t));\n\n/** The camera in the page: photo or clip, front or back, with a file-picker way out when the camera cannot start. */\nexport function MediaCapture({\n  mode = \"photo\",\n  facing: initialFacing = \"user\",\n  audio = true,\n  maxDuration,\n  autoStart,\n  onCapture,\n  onError,\n  aspectRatio = \"3 / 4\",\n  labels: given,\n  className,\n}: MediaCaptureProps) {\n  const labels = { ...mediaCaptureLabels, ...given };\n  const s = mediaCapture();\n  const reduce = usePrefersReducedMotion();\n  const video = React.useRef<HTMLVideoElement>(null);\n  const stream = React.useRef<MediaStream | null>(null);\n  const recorder = React.useRef<MediaRecorder | null>(null);\n  const file = React.useRef<HTMLInputElement>(null);\n  const [state, setState] = React.useState<State>(\"idle\");\n  const [facing, setFacing] = React.useState(initialFacing);\n  const [kind, setKind] = React.useState<\"photo\" | \"video\">(mode === \"video\" ? \"video\" : \"photo\");\n  const [recording, setRecording] = React.useState(false);\n  const [elapsed, setElapsed] = React.useState(0);\n  const [cameras, setCameras] = React.useState(0);\n\n  const stop = React.useCallback(() => {\n    if (recorder.current?.state === \"recording\") recorder.current.stop();\n    stream.current?.getTracks().forEach((track) => track.stop());\n    stream.current = null;\n  }, []);\n\n  const start = React.useCallback(\n    async (side: \"user\" | \"environment\") => {\n      if (!supported()) {\n        setState(\"unavailable\");\n        return;\n      }\n      setState(\"starting\");\n      stop();\n      try {\n        const media = await navigator.mediaDevices.getUserMedia({ video: { facingMode: side }, audio: mode !== \"photo\" && audio });\n        stream.current = media;\n        if (video.current) {\n          video.current.srcObject = media;\n          playSafely(video.current);\n        }\n        const devices = await navigator.mediaDevices.enumerateDevices?.().catch(() => []);\n        setCameras((devices ?? []).filter((d) => d.kind === \"videoinput\").length);\n        setState(\"live\");\n      } catch (error) {\n        const name = (error as { name?: string })?.name;\n        setState(name === \"NotAllowedError\" || name === \"SecurityError\" ? \"denied\" : \"unavailable\");\n        onError?.(error);\n      }\n    },\n    [audio, mode, onError, stop],\n  );\n\n  React.useEffect(() => {\n    if (!autoStart || !supported() || !navigator.permissions?.query) return;\n    let live = true;\n    navigator.permissions\n      .query({ name: \"camera\" as PermissionName })\n      .then((status) => {\n        if (live && status.state === \"granted\") void start(initialFacing);\n      })\n      .catch(() => undefined);\n    return () => {\n      live = false;\n    };\n  }, [autoStart, initialFacing, start]);\n\n  React.useEffect(() => {\n    const hide = () => {\n      if (!document.hidden) return;\n      stop();\n      setState((current) => (current === \"live\" ? \"idle\" : current));\n    };\n    document.addEventListener(\"visibilitychange\", hide);\n    return () => {\n      document.removeEventListener(\"visibilitychange\", hide);\n      stop();\n    };\n  }, [stop]);\n\n  React.useEffect(() => {\n    if (!recording) return;\n    const began = Date.now();\n    const timer = setInterval(() => {\n      const seconds = (Date.now() - began) / 1000;\n      setElapsed(seconds);\n      if (maxDuration && seconds >= maxDuration) recorder.current?.stop();\n    }, 250);\n    return () => clearInterval(timer);\n  }, [recording, maxDuration]);\n\n  const deliver = (blob: Blob, captured: \"photo\" | \"video\") => onCapture({ blob, kind: captured, url: URL.createObjectURL(blob) });\n\n  const takePhoto = () => {\n    const element = video.current;\n    if (!element?.videoWidth) return;\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = element.videoWidth;\n    canvas.height = element.videoHeight;\n    const context = canvas.getContext(\"2d\");\n    if (!context) return;\n    if (facing === \"user\") {\n      context.translate(canvas.width, 0);\n      context.scale(-1, 1);\n    }\n    context.drawImage(element, 0, 0);\n    canvas.toBlob((blob) => blob && deliver(blob, \"photo\"), \"image/jpeg\", 0.92);\n  };\n\n  const toggleRecording = () => {\n    if (recording) {\n      recorder.current?.stop();\n      return;\n    }\n    if (!stream.current) return;\n    const chunks: Blob[] = [];\n    const type = recorderType();\n    const next = new MediaRecorder(stream.current, type ? { mimeType: type } : undefined);\n    next.ondataavailable = (event) => event.data.size && chunks.push(event.data);\n    next.onstop = () => {\n      setRecording(false);\n      setElapsed(0);\n      deliver(new Blob(chunks, { type: next.mimeType || type || \"video/webm\" }), \"video\");\n    };\n    recorder.current = next;\n    next.start(1000);\n    setRecording(true);\n  };\n\n  const flip = () => {\n    const side = facing === \"user\" ? \"environment\" : \"user\";\n    setFacing(side);\n    void start(side);\n  };\n\n  const accept = mode === \"video\" ? \"video/*\" : mode === \"photo\" ? \"image/*\" : \"image/*,video/*\";\n  const fallback = (\n    <>\n      <button type=\"button\" className={s.secondary()} onClick={() => file.current?.click()}>\n        {labels.fallback}\n      </button>\n      <input\n        ref={file}\n        type=\"file\"\n        accept={accept}\n        capture={facing}\n        tabIndex={-1}\n        aria-hidden\n        className=\"sr-only\"\n        onChange={(event) => {\n          const picked = event.target.files?.[0];\n          if (picked) deliver(picked, picked.type.startsWith(\"video/\") ? \"video\" : \"photo\");\n          event.target.value = \"\";\n        }}\n      />\n    </>\n  );\n\n  return (\n    <section aria-label={labels.region} className={s.root({ className })}>\n      <div className={s.stage()} style={{ aspectRatio }}>\n        <video ref={video} muted playsInline aria-hidden data-mirrored={facing === \"user\" ? \"\" : undefined} className={s.video()} hidden={state !== \"live\"} />\n        {state !== \"live\" && (\n          <div className={s.panel()} role={state === \"denied\" || state === \"unavailable\" ? \"alert\" : undefined}>\n            <span className={s.panelIcon()} aria-hidden>\n              <CameraGlyph className=\"h-6 w-6\" />\n            </span>\n            <p className=\"max-w-xs\">{state === \"denied\" ? labels.denied : state === \"unavailable\" ? labels.unavailable : labels.prompt}</p>\n            <div className=\"flex flex-wrap justify-center gap-2\">\n              {(state === \"idle\" || state === \"starting\") && (\n                <button type=\"button\" className={s.primary()} disabled={state === \"starting\"} onClick={() => void start(facing)}>\n                  <CameraGlyph className=\"h-4 w-4\" />\n                  {labels.start}\n                </button>\n              )}\n              {fallback}\n            </div>\n          </div>\n        )}\n        {state === \"live\" && mode === \"both\" && !recording && (\n          <div className={s.modes()}>\n            <div className=\"flex gap-1 rounded-full bg-scrim-strong p-1\">\n              <button type=\"button\" aria-pressed={kind === \"photo\"} className={s.mode()} onClick={() => setKind(\"photo\")}>\n                {labels.photoMode}\n              </button>\n              <button type=\"button\" aria-pressed={kind === \"video\"} className={s.mode()} onClick={() => setKind(\"video\")}>\n                {labels.videoMode}\n              </button>\n            </div>\n          </div>\n        )}\n        {recording && (\n          <span className={s.timer()} role=\"timer\" aria-live=\"off\">\n            {formatClock(elapsed)}\n            {maxDuration ? ` / ${formatClock(maxDuration)}` : \"\"}\n          </span>\n        )}\n        {state === \"live\" && (\n          <div className={s.bar()}>\n            <span className=\"h-11 w-11\" />\n            <button\n              type=\"button\"\n              className={s.shutter()}\n              data-mode={kind}\n              data-recording={recording ? \"\" : undefined}\n              data-reduce={reduce ? \"\" : undefined}\n              aria-label={kind === \"photo\" ? labels.takePhoto : recording ? labels.stopRecording : labels.startRecording}\n              onClick={kind === \"photo\" ? takePhoto : toggleRecording}\n            />\n            <button type=\"button\" className={s.round()} aria-label={labels.switchCamera} disabled={cameras < 2 || recording} onClick={flip}>\n              <FlipGlyph className=\"h-5 w-5\" />\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/meter.d.ts

@@ -0,0 +1,146 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const meter: tailwind_variants.TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+            ring: string;
+        };
+        md: {
+            ring: string;
+        };
+        lg: {
+            track: string;
+            ring: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    caption: string;
+    figure: string;
+    track: string;
+    fill: string;
+    legend: string;
+    swatch: string;
+    ring: string;
+    center: string;
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+            ring: string;
+        };
+        md: {
+            ring: string;
+        };
+        lg: {
+            track: string;
+            ring: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    caption: string;
+    figure: string;
+    track: string;
+    fill: string;
+    legend: string;
+    swatch: string;
+    ring: string;
+    center: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+            ring: string;
+        };
+        md: {
+            ring: string;
+        };
+        lg: {
+            track: string;
+            ring: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    caption: string;
+    figure: string;
+    track: string;
+    fill: string;
+    legend: string;
+    swatch: string;
+    ring: string;
+    center: string;
+}>>;
+interface MeterPart {
+    /** Its name (“To the creator”) — passed translated. */
+    label: string;
+    /** Its value, in the meter's unit. */
+    value: number;
+    /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */
+    valueText?: string;
+}
+type MeterProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */
+    label: string;
+    /** The value, between `min` and `max` (ignored with `parts`). */
+    value?: number;
+    /**
+     * The bottom of the range.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The top of the range.
+     * @default 100
+     */
+    max?: number;
+    /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */
+    valueText?: string;
+    /**
+     * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with
+     * `optimum="high"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.
+     */
+    thresholds?: {
+        readonly low: number;
+        readonly high: number;
+    };
+    /**
+     * Which end is good.
+     * @default "low"
+     */
+    optimum?: "low" | "high";
+    /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */
+    parts?: readonly MeterPart[];
+    /**
+     * bar · ring.
+     * @default "bar"
+     */
+    variant?: "bar" | "ring";
+    /**
+     * sm · md · lg: the bar's thickness, the ring's diameter.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Shows the label and the value above the bar. */
+    showLabel?: boolean;
+    /** A ring's centre: the value, a word. */
+    children?: React.ReactNode;
+};
+/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */
+declare function Meter({ label, value, min, max, valueText, thresholds, optimum, parts, variant, size, showLabel, className, children, ...props }: MeterProps): React.JSX.Element;
+interface MeterValueProps {
+    /** The figure. */
+    value: React.ReactNode;
+    /** A word under it. */
+    caption?: React.ReactNode;
+}
+/** For the ring's centre when it shows a figure and a word. */
+declare function MeterValue({ value, caption }: MeterValueProps): React.JSX.Element;
+
+export { Meter, type MeterPart, type MeterProps, MeterValue, type MeterValueProps, meter };

package/dist/meter.js

@@ -0,0 +1,107 @@
+// src/meter/meter.tsx
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var meter = tv({
+  slots: {
+    root: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary",
+    track: "relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3",
+    fill: "h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none",
+    legend: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary",
+    swatch: "inline-block h-2 w-2 shrink-0 rounded-full",
+    ring: "relative inline-flex shrink-0 items-center justify-center",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+  },
+  variants: {
+    size: { sm: { track: "h-1.5", ring: "h-14 w-14" }, md: { ring: "h-24 w-24" }, lg: { track: "h-3", ring: "h-36 w-36" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var BG = { ok: "bg-accent", success: "bg-success", warning: "bg-warning", danger: "bg-danger" };
+var STROKE = { ok: "stroke-accent", success: "stroke-success", warning: "stroke-warning", danger: "stroke-danger" };
+var PART_BG = ["bg-accent", "bg-fg-secondary", "bg-accent-2", "bg-border-strong"];
+var PART_STROKE = ["stroke-accent", "stroke-fg-secondary", "stroke-accent-2", "stroke-border-strong"];
+function Meter({
+  label,
+  value = 0,
+  min = 0,
+  max = 100,
+  valueText,
+  thresholds,
+  optimum = "low",
+  parts,
+  variant = "bar",
+  size = "md",
+  showLabel,
+  className,
+  children,
+  ...props
+}) {
+  const s = meter({ size });
+  const span = max - min || 1;
+  const ratio = Math.min(1, Math.max(0, (value - min) / span));
+  const level = !thresholds ? "ok" : ratio >= thresholds.high ? optimum === "low" ? "danger" : "success" : ratio >= thresholds.low ? "warning" : optimum === "low" ? "success" : "danger";
+  const words = valueText ?? `${Math.round(ratio * 100)} %`;
+  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round(p.value / span * 100)} %` }));
+  const a11y = parts ? { role: "group", "aria-label": label } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words };
+  const legend = parts && /* @__PURE__ */ jsx("ul", { className: s.legend(), children: shares.map((p) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: [s.swatch(), PART_BG[p.i % PART_BG.length]].join(" ") }),
+    /* @__PURE__ */ jsx("span", { className: "text-fg", children: p.label }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: p.words })
+  ] }, p.i)) });
+  if (variant === "ring") {
+    const r = 44;
+    let offset = 0;
+    const arcs = parts ? shares.map((p) => {
+      const arc = { cls: PART_STROKE[p.i % PART_STROKE.length], len: p.ratio * 100, start: offset };
+      offset += arc.len;
+      return arc;
+    }) : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];
+    return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: ["inline-flex flex-col items-center gap-2", className].filter(Boolean).join(" "), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.ring(), children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: "9", className: "stroke-border-default" }),
+          arcs.map((a, i) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r,
+              fill: "none",
+              strokeWidth: "9",
+              pathLength: 100,
+              strokeDasharray: `${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`,
+              strokeDashoffset: -a.start,
+              className: [a.cls, "transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"].join(" ")
+            },
+            i
+          ))
+        ] }),
+        children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+      ] }),
+      legend
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...a11y, "data-level": parts ? void 0 : level, className: s.root({ className }), ...props, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      !parts && /* @__PURE__ */ jsx("span", { className: s.figure(), children: words })
+    ] }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.track(), children: parts ? shares.map((p) => /* @__PURE__ */ jsx("span", { className: [s.fill(), PART_BG[p.i % PART_BG.length]].join(" "), style: { width: `${p.ratio * 100}%` } }, p.i)) : /* @__PURE__ */ jsx("span", { className: [s.fill(), BG[level]].join(" "), style: { width: `${ratio * 100}%` } }) }),
+    legend
+  ] });
+}
+function MeterValue({ value, caption }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-semibold text-fg tabular-nums", children: value }),
+    caption && /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-fg-secondary", children: caption })
+  ] });
+}
+export {
+  Meter,
+  MeterValue,
+  meter
+};
+//# sourceMappingURL=meter.js.map

package/dist/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/meter/meter.tsx"],"sourcesContent":["// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3\",\n    fill: \"h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] uppercase tracking-wide text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}