makersclaw 0.1.0 → 0.3.0

package/templates/next/files/components/ui/context-menu.jsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cx } from "./cx";
+import { MenuPanel } from "./menu";
+import { panelClass, usePopoverPosition } from "./popover";
+
+// ContextMenu — the menu a right-click opens on a region: a row, a card,
+// a canvas. The same `items` as Menu (actions, groups, checkboxes,
+// radios, shortcuts, submenus) and the same keys, opened at the pointer
+// and flipped to stay on screen. It opens on:
+//
+//   a right-click (or Ctrl-click on a Mac)       at the pointer
+//   a long press on touch                        under the finger
+//   Shift+F10 or the Menu key on a focused thing  under that thing
+//
+//   <ContextMenu label="Actions for Acme" items={[{ label: "Edit", onSelect }]}>
+//     <Row … />
+//   </ContextMenu>
+//
+//   items      as Menu's (./menu); none (or []) leaves the browser's own
+//              right-click menu alone
+//   label      what a reader calls the menu (default "Actions")
+//   disabled   true: the region behaves as if there were no menu
+//   className  the region's (a <div> around children)
+//
+// The one rule: a context menu is a shortcut, never the only door. Every
+// action in it is also somewhere a tap or a Tab can reach — a Menu on the
+// row, a button in its page — because nobody discovers a right-click.
+// Focus goes to the first item when it opens and back to what had it
+// when it closes.
+//
+// The panel is a manual popover with its own light dismiss: an auto one
+// would be closed by the very release of the button (or the finger) that
+// opened it, since a right-click opens on press on a Mac.
+
+const LONG_PRESS = 550; // ms; just past the OS's own, which wins where it fires
+
+// A Menu open inside the region (a row's ⋯) keeps its own keys and clicks.
+const inMenu = (e) => Boolean(e.target.closest?.('[role="menu"]'));
+
+export function ContextMenu({ items, label = "Actions", disabled = false, className, children }) {
+  const pop = useRef(null);
+  const point = useRef(null);
+  const back = useRef(null);
+  const press = useRef({ timer: 0, x: 0, y: 0, at: 0 });
+  const opened = useRef(0);
+  const unwatch = useRef(null);
+  usePopoverPosition(point, pop, { side: "bottom", align: "start", offset: 2 });
+  const live = (items ?? []).filter(Boolean);
+  useEffect(() => () => unwatch.current?.(), []);
+
+  if (live.length === 0 || disabled) return <div className={className}>{children}</div>;
+
+  function hide() {
+    if (pop.current?.matches(":popover-open")) pop.current.hidePopover();
+  }
+
+  // Light dismiss: a press anywhere outside the panel (and its submenus,
+  // which sit inside it) closes it; so does Escape wherever focus is.
+  function watch() {
+    if (unwatch.current) return;
+    const down = (e) => {
+      if (!pop.current?.contains(e.target)) hide();
+    };
+    const key = (e) => {
+      if (e.key === "Escape" && !pop.current?.contains(e.target)) {
+        hide();
+        restore();
+      }
+    };
+    document.addEventListener("pointerdown", down, true);
+    document.addEventListener("keydown", key);
+    window.addEventListener("blur", hide);
+    unwatch.current = () => {
+      document.removeEventListener("pointerdown", down, true);
+      document.removeEventListener("keydown", key);
+      window.removeEventListener("blur", hide);
+      unwatch.current = null;
+    };
+  }
+
+  // `other` marks an open by a long press or a key, after which the
+  // browser's own contextmenu event (Android, Windows) is a duplicate.
+  function openAt(x, y, other = false) {
+    const p = pop.current;
+    const s = point.current;
+    if (!p || !s) return;
+    // The point is a fixed, empty box the panel is anchored to. Set it, then
+    // correct for a transformed ancestor that moves what "fixed" means;
+    // its width flips 0/1px so a measured placement sees a change.
+    s.style.left = `${x}px`;
+    s.style.top = `${y}px`;
+    const r = s.getBoundingClientRect();
+    s.style.left = `${2 * x - r.left}px`;
+    s.style.top = `${2 * y - r.top}px`;
+    s.style.width = s.style.width === "1px" ? "0px" : "1px";
+    if (!p.matches(":popover-open")) {
+      if (!back.current || !back.current.isConnected || p.contains(back.current)) back.current = document.activeElement;
+    } else p.hidePopover();
+    p.showPopover();
+    watch();
+    if (other) opened.current = Date.now();
+    p.querySelector('[role^="menuitem"]:not([disabled])')?.focus({ preventScroll: true });
+  }
+
+  function restore() {
+    const to = back.current;
+    back.current = null;
+    if (to && to !== document.body && to.isConnected) to.focus({ preventScroll: true });
+  }
+
+  function cancelPress() {
+    clearTimeout(press.current.timer);
+    press.current.timer = 0;
+  }
+
+  return (
+    <>
+      <div
+        className={cx("[-webkit-touch-callout:none]", className)}
+        onContextMenu={(e) => {
+          if (inMenu(e)) return;
+          e.preventDefault();
+          cancelPress();
+          // A long press or Shift+F10 opened it just now.
+          if (Date.now() - opened.current < 800) return;
+          openAt(e.clientX, e.clientY);
+        }}
+        onKeyDown={(e) => {
+          if ((e.key !== "ContextMenu" && !(e.shiftKey && e.key === "F10")) || inMenu(e)) return;
+          e.preventDefault();
+          const r = e.target.getBoundingClientRect();
+          openAt(r.left + Math.min(16, r.width / 2), r.bottom, true);
+        }}
+        onPointerDown={(e) => {
+          if (e.pointerType === "mouse" || inMenu(e)) return;
+          cancelPress();
+          const { clientX: x, clientY: y } = e;
+          press.current = {
+            x,
+            y,
+            at: 0,
+            timer: setTimeout(() => {
+              press.current.timer = 0;
+              press.current.at = Date.now();
+              openAt(x, y, true);
+            }, LONG_PRESS),
+          };
+        }}
+        onPointerMove={(e) => {
+          const p = press.current;
+          if (p.timer && Math.hypot(e.clientX - p.x, e.clientY - p.y) > 10) cancelPress();
+        }}
+        onPointerUp={cancelPress}
+        onPointerCancel={cancelPress}
+        onClickCapture={(e) => {
+          // The finger lifting after a long press is not a tap on what is under it.
+          if (Date.now() - press.current.at < 800) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }}
+      >
+        <span ref={point} aria-hidden="true" className="pointer-events-none fixed top-0 left-0 h-0 w-0" />
+        {children}
+      </div>
+      <MenuPanel
+        items={live}
+        label={label}
+        panelRef={pop}
+        popover="manual"
+        onToggle={(e) => {
+          // A submenu's toggle bubbles here; a close already followed by an
+          // open (a right-click elsewhere) is not a close.
+          if (e.target !== e.currentTarget || e.newState !== "closed" || pop.current?.matches(":popover-open")) return;
+          unwatch.current?.();
+          const a = document.activeElement;
+          if (!a || a === document.body || pop.current?.contains(a)) restore();
+          else back.current = null;
+        }}
+        onExit={() => {
+          hide();
+          restore();
+        }}
+        onClose={hide}
+        className={panelClass("auto", "min-w-44 max-h-[calc(100vh-1rem)] overflow-y-auto p-1")}
+      />
+    </>
+  );
+}

package/templates/next/files/components/ui/date-picker.jsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { useState, useSyncExternalStore } from "react";
+import { cx } from "./cx";
+import { Icon } from "./icon";
+import { Button, IconButton } from "./button";
+import { Input } from "./field";
+import { Popover } from "./popover";
+import {
+  Calendar,
+  addDays,
+  addMonths,
+  endOfMonth,
+  formatDate,
+  parseDate,
+  plainSpaces,
+  startOfMonth,
+  useLocale,
+  useToday,
+} from "./calendar";
+
+// DatePicker — a field that reads like an input and opens a Calendar in a
+// Popover: a due date, a report's span. The trigger shows the day in the
+// reader's words ("Mar 12, 2026"); the value stays a "YYYY-MM-DD" string
+// (calendar.jsx says why). Put it in <Field id> with the same `id`: the
+// label points at the trigger.
+//
+//   mode       single (value "2026-03-12" | null) · range (value
+//              { from, to } | null)
+//   value, onChange(value) — controlled; or `defaultValue`
+//   placeholder  "Pick a date" · "Pick a range"
+//   presets    true (the defaults for the mode: Today, Tomorrow, In a
+//              week… · Today, Last 7 days, This month…) or your own
+//              [{ label, value }] — `value` a date, a { from, to }, or
+//              (today) → one. A list beside the calendar; a row above
+//              it on a phone
+//   clearable  an × in the field once it holds a date (true)
+//   format     Intl.DateTimeFormat options for the field ({ dateStyle:
+//              "medium" }); a range is written with formatRange
+//   disabled   true: the whole field; a function (date) → true: those days
+//   min, max, numberOfMonths (range: 2 from 640px; always 1 on a phone),
+//   captionLayout, showWeekNumbers, weekStartsOn, locale, today — as
+//              Calendar
+//   name       a hidden input for a form; a range submits two under it
+//   invalid    the red edge — pair it with <Field error>
+//   size       md (44px) · sm (36px)
+//   label      what a screen reader calls the panel ("Choose a date")
+//   defaultOpen  open on first render (a demo; a form never needs it)
+//
+// It closes when a day, a finished range or a preset is picked; the focus
+// lands on the chosen day when it opens and back on the field when it
+// closes.
+//
+// DateInput below is the typed way in: the browser's own date field
+// (segments in the reader's order, digits only, never a free-text parse)
+// with this Calendar one button away. Typing a date into a text box and
+// parsing it is not robust across locales ("03/04" is two different
+// days), which is why there is no text DateInput.
+
+const FIELD =
+  "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 text-left text-sm text-foreground " +
+  "outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 " +
+  "aria-[invalid=true]:border-destructive";
+const HEIGHT = { md: "min-h-11", sm: "min-h-9" };
+// Presets: on a phone a scrolling row exactly as wide as the calendar (w-0
+// plus a min width of its box: it never widens the panel); a column beside
+// the calendar from 640px.
+const PRESETS =
+  "-mx-3 flex w-0 min-w-[calc(100%+1.5rem)] gap-1 overflow-x-auto px-3 pb-1 " +
+  "sm:m-0 sm:w-36 sm:min-w-0 sm:flex-col sm:overflow-visible sm:border-r sm:border-border sm:p-0 sm:pr-3";
+
+function useWide() {
+  return useSyncExternalStore(
+    (cb) => {
+      const q = window.matchMedia("(min-width: 640px)");
+      q.addEventListener("change", cb);
+      return () => q.removeEventListener("change", cb);
+    },
+    () => window.matchMedia("(min-width: 640px)").matches,
+    () => false,
+  );
+}
+
+/** The default presets. Each value is (today) → a date or a { from, to }. */
+export const DATE_PRESETS = {
+  single: [
+    { label: "Today", value: (t) => t },
+    { label: "Tomorrow", value: (t) => addDays(t, 1) },
+    { label: "In a week", value: (t) => addDays(t, 7) },
+    { label: "In a month", value: (t) => addMonths(t, 1) },
+  ],
+  range: [
+    { label: "Today", value: (t) => ({ from: t, to: t }) },
+    { label: "Last 7 days", value: (t) => ({ from: addDays(t, -6), to: t }) },
+    { label: "Last 30 days", value: (t) => ({ from: addDays(t, -29), to: t }) },
+    { label: "This month", value: (t) => ({ from: startOfMonth(t), to: endOfMonth(t) }) },
+    { label: "Last month", value: (t) => ({ from: startOfMonth(addMonths(t, -1)), to: endOfMonth(addMonths(t, -1)) }) },
+    { label: "This year", value: (t) => ({ from: `${t.slice(0, 4)}-01-01`, to: `${t.slice(0, 4)}-12-31` }) },
+  ],
+};
+
+const same = (a, b) => (a && b && typeof a === "object" ? a.from === b.from && a.to === b.to : a === b);
+
+/** The value in words: a day, or a span through formatRange. */
+function words(mode, value, format, locale) {
+  if (mode !== "range") return value ? formatDate(value, format, locale) : "";
+  const { from, to } = value ?? {};
+  if (!from) return "";
+  if (!to) return `${formatDate(from, format, locale)} – …`;
+  const f = new Intl.DateTimeFormat(locale, { ...format, timeZone: "UTC" });
+  return plainSpaces(f.formatRange ? f.formatRange(parseDate(from), parseDate(to)) : `${f.format(parseDate(from))} – ${f.format(parseDate(to))}`);
+}
+
+export function DatePicker({
+  id,
+  mode = "single",
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  placeholder,
+  presets = false,
+  clearable = true,
+  format = { dateStyle: "medium" },
+  disabled,
+  min,
+  max,
+  numberOfMonths,
+  captionLayout,
+  showWeekNumbers,
+  weekStartsOn,
+  locale: localeProp,
+  today: todayProp,
+  name,
+  invalid,
+  size = "md",
+  align = "start",
+  label,
+  defaultOpen = false,
+  className,
+}) {
+  const locale = useLocale(localeProp);
+  const today = useToday(todayProp);
+  const wide = useWide();
+  const [own, setOwn] = useState(defaultValue);
+  const value = valueProp !== undefined ? valueProp : own;
+  const [open, setOpen] = useState(defaultOpen);
+  const [month, setMonth] = useState(null);
+  const range = mode === "range";
+  const off = disabled === true;
+
+  const first = range ? value?.from : value;
+  const text = words(mode, value, format, locale);
+  const list = presets === true ? DATE_PRESETS[range ? "range" : "single"] : Array.isArray(presets) ? presets : [];
+  const shown = list.map((p) => ({ label: p.label, value: typeof p.value === "function" ? (today ? p.value(today) : null) : p.value }));
+
+  function set(v) {
+    if (valueProp === undefined) setOwn(v);
+    onChange?.(v);
+  }
+
+  // Each opening starts on the chosen day's month (or today's).
+  function onOpenChange(next) {
+    if (next) setMonth(startOfMonth(first) ?? startOfMonth(today));
+    setOpen(next);
+  }
+
+  function choose(v) {
+    set(v);
+    if (!range || (v?.from && v?.to)) setOpen(false);
+  }
+
+  const months = wide ? numberOfMonths ?? (range ? 2 : 1) : 1;
+  const showClear = clearable && !off && (range ? !!value?.from : !!value);
+
+  return (
+    <div className={cx("relative w-full", className)}>
+      <Popover
+        open={open}
+        onOpenChange={onOpenChange}
+        align={align}
+        width="auto"
+        className="p-3"
+        label={label ?? (range ? "Choose a date range" : "Choose a date")}
+        trigger={(props) => (
+          <button
+            {...props}
+            id={id}
+            type="button"
+            disabled={off}
+            aria-invalid={invalid ? true : undefined}
+            className={cx(FIELD, HEIGHT[size] ?? HEIGHT.md, showClear && "pr-11")}
+          >
+            <Icon name="calendar" className="shrink-0 text-muted-foreground" />
+            <span className={cx("min-w-0 flex-1 truncate", !text && "text-muted-foreground")}>
+              {text || placeholder || (range ? "Pick a range" : "Pick a date")}
+            </span>
+          </button>
+        )}
+      >
+        <div className="flex flex-col gap-3 sm:flex-row">
+          {shown.length ? (
+            <div
+              role="group"
+              aria-label="Presets"
+              className={PRESETS}
+            >
+              {shown.map((p) => {
+                const on = !!p.value && same(p.value, value);
+                return (
+                  <Button
+                    key={p.label}
+                    size={wide ? "sm" : "md"}
+                    variant={on ? "secondary" : "quiet"}
+                    aria-pressed={on}
+                    disabled={!p.value}
+                    className="shrink-0 justify-start"
+                    onClick={() => {
+                      choose(p.value);
+                      setMonth(startOfMonth(range ? p.value.from : p.value));
+                    }}
+                  >
+                    {p.label}
+                  </Button>
+                );
+              })}
+            </div>
+          ) : null}
+          <Calendar
+            mode={range ? "range" : "single"}
+            value={value}
+            onChange={choose}
+            month={month ?? undefined}
+            onMonthChange={(m) => setMonth(`${m}-01`)}
+            numberOfMonths={months}
+            min={min}
+            max={max}
+            disabled={typeof disabled === "function" ? disabled : undefined}
+            captionLayout={captionLayout}
+            showWeekNumbers={showWeekNumbers}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            today={today ?? undefined}
+            autoFocus={open}
+            label={label ?? (range ? "Choose a date range" : "Choose a date")}
+          />
+        </div>
+      </Popover>
+      {showClear ? (
+        <IconButton
+          icon="x"
+          label="Clear date"
+          size="sm"
+          onClick={() => set(null)}
+          className={cx("absolute right-1", size === "sm" ? "top-0" : "top-1")}
+        />
+      ) : null}
+      {name && !range ? <input type="hidden" name={name} value={value ?? ""} /> : null}
+      {name && range ? (
+        <>
+          <input type="hidden" name={name} value={value?.from ?? ""} />
+          <input type="hidden" name={name} value={value?.to ?? ""} />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * A date typed or picked. The browser's own date field — segments in the
+ * reader's order, digits only, the value a "YYYY-MM-DD" string or "" while
+ * incomplete — with its built-in picker swapped for a button that opens
+ * this Calendar. onChange(date | null). Chrome and Safari hide their own
+ * picker icon; Firefox keeps its own beside ours.
+ *
+ *   value, onChange(date | null), defaultValue, min, max, disabled
+ *   (true, or a function for the Calendar's days), name, invalid, size,
+ *   locale (the Calendar's; the field itself follows the browser), today
+ */
+export function DateInput({
+  id,
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  min,
+  max,
+  disabled,
+  name,
+  invalid,
+  size = "md",
+  locale,
+  today,
+  weekStartsOn,
+  className,
+  ...rest
+}) {
+  const [own, setOwn] = useState(defaultValue);
+  const value = valueProp !== undefined ? valueProp : own;
+  const [open, setOpen] = useState(false);
+  const [month, setMonth] = useState(null);
+  const off = disabled === true;
+  const out = !!value && ((min && value < min) || (max && value > max));
+
+  function set(v) {
+    if (valueProp === undefined) setOwn(v);
+    onChange?.(v);
+  }
+
+  return (
+    <div className={cx("relative w-full", className)}>
+      <Input
+        id={id}
+        type="date"
+        name={name}
+        value={value ?? ""}
+        min={min}
+        max={max}
+        disabled={off}
+        invalid={invalid || out}
+        onChange={(e) => set(e.target.value || null)}
+        className={cx(
+          "pr-12 [&::-webkit-calendar-picker-indicator]:hidden tabular-nums",
+          size === "sm" && "min-h-9",
+        )}
+        {...rest}
+      />
+      <span className={cx("absolute right-1", size === "sm" ? "top-0" : "top-1")}>
+        <Popover
+          open={open}
+          onOpenChange={(next) => {
+            if (next) setMonth(startOfMonth(value) ?? null);
+            setOpen(next);
+          }}
+          align="end"
+          width="auto"
+          className="p-3"
+          label="Choose a date"
+          trigger={(props) => <IconButton {...props} icon="calendar" label="Open calendar" size="sm" disabled={off} />}
+        >
+          <Calendar
+            value={value}
+            onChange={(v) => {
+              set(v);
+              setOpen(false);
+            }}
+            month={month ?? undefined}
+            onMonthChange={(m) => setMonth(`${m}-01`)}
+            min={min}
+            max={max}
+            disabled={typeof disabled === "function" ? disabled : undefined}
+            locale={locale}
+            today={today}
+            weekStartsOn={weekStartsOn}
+            autoFocus={open}
+            label="Choose a date"
+          />
+        </Popover>
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,117 @@
+import { cx } from "./cx";
+
+// Parts of one whole as a single stacked bar: traffic by device, tickets
+// by channel, spend by category. Server-safe (no hooks). Meter is one
+// amount against a limit; this is N shares of a total, which always fill
+// the bar — unless a `total` above their sum leaves a rest of track.
+//
+// Colour: each segment takes a categorical hue by default (segment i gets
+// hue i+1, round 1..5, from --color-chart-N) — the parts are KINDS of a
+// thing. A segment's status `tone` overrides it, for sentiment (positive ·
+// neutral · negative feedback). Tone is status, hue is category.
+
+// Literal class names, so Tailwind sees every one.
+const HUE_FILLS = { 1: "bg-chart-1", 2: "bg-chart-2", 3: "bg-chart-3", 4: "bg-chart-4", 5: "bg-chart-5" };
+const TONE_FILLS = {
+  neutral: "bg-muted-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  info: "bg-info",
+};
+const SIZES = { thin: "h-1.5", md: "h-2.5" };
+
+const EN = "en-US";
+function shareText(pct) {
+  if (pct > 0 && pct < 1) return "<1%";
+  return `${Math.round(pct).toLocaleString(EN)}%`;
+}
+
+/**
+ *   segments  [{ label, value, tone?, hue? }] — value is a number in any
+ *             unit; the bar shows each one's share of their total. A zero
+ *             (or negative, or missing) value is skipped
+ *   size      thin (6px, a list row) · md (10px)
+ *   legend    a row under the bar: dot, label, share %
+ *   label     the bar's name, read to a screen reader with every
+ *             segment's label and share: "Traffic by device: Desktop 62%, …"
+ *   total     the whole the shares are of, in the segments' unit: 100 GB of
+ *             storage, a $1,000 budget. When the segments sum to less, the
+ *             rest is drawn as unfilled track at the end and every share is
+ *             of `total`. Left out (or not above the sum), the segments fill
+ *             the bar, as before
+ *   restLabel names that rest — "Free", "Remaining" — in the legend (a
+ *             hollow dot) and to a screen reader; left out, the rest is
+ *             track only
+ *   formatValue (value) → string — the legend shows each value in it
+ *             ("$450") instead of the share; a reader hears both
+ *   formatLegend ({ label, value, pct, share, rest }) → the words after a
+ *             legend label, whole ("$450 · 52%"); wins over formatValue.
+ *             `rest` is true for the restLabel entry
+ *
+ *   tone      success · warning · danger · info · neutral — sentiment,
+ *             overrides the hue
+ *   hue       1..5 — pin a category's colour (so "Email" is the same hue
+ *             in every chart); default the segment's place in the list
+ *
+ * An empty total (no positive values) draws the empty track and reads as
+ * "no data". Thin gaps separate the segments; the ends are round.
+ */
+export function Distribution({ segments = [], size = "md", legend = false, label, total: whole, restLabel, formatValue, formatLegend, className }) {
+  const parts = segments
+    .map((s, i) => ({ ...s, i }))
+    .filter((s) => typeof s.value === "number" && Number.isFinite(s.value) && s.value > 0);
+  const sum = parts.reduce((n, s) => n + s.value, 0);
+  // A `total` above the sum leaves a rest: unfilled track, optionally named.
+  const rest = typeof whole === "number" && Number.isFinite(whole) && whole > sum ? whole - sum : 0;
+  const total = sum + rest;
+  const shown = parts.map((s) => {
+    const fill = TONE_FILLS[s.tone] ?? HUE_FILLS[s.hue] ?? HUE_FILLS[(s.i % 5) + 1];
+    const pct = total > 0 ? (s.value / total) * 100 : 0;
+    return { key: s.key ?? `${s.label}-${s.i}`, label: s.label, value: s.value, fill, pct, share: shareText(pct) };
+  });
+  const restPct = total > 0 ? (rest / total) * 100 : 0;
+  const restPart = rest > 0 ? { key: "__rest", label: restLabel, value: rest, pct: restPct, share: shareText(restPct), rest: true } : null;
+  const named = [...shown, ...(restPart && restLabel ? [restPart] : [])];
+  const words = (s) => (formatValue ? `${s.label} ${formatValue(s.value)}, ${s.share}` : `${s.label} ${s.share}`);
+  const said = shown.length
+    ? `${label ? `${label}: ` : ""}${named.map(words).join(", ")}`
+    : `${label ? `${label}: ` : ""}no data`;
+  const legendText = (s) =>
+    formatLegend ? formatLegend({ label: s.label, value: s.value, pct: s.pct, share: s.share, rest: Boolean(s.rest) }) : formatValue ? formatValue(s.value) : s.share;
+  const track = SIZES[size] ?? SIZES.md;
+
+  return (
+    <div className={cx("grid gap-2", className)}>
+      <div role="img" aria-label={said} className={cx("flex w-full gap-0.5 overflow-hidden rounded-full", track, !shown.length && "bg-accent")}>
+        {shown.map((s) => (
+          <span
+            key={s.key}
+            className={cx("h-full min-w-0.5 transition-[flex-grow] duration-300 ease-out motion-reduce:transition-none", s.fill)}
+            style={{ flexGrow: s.value, flexShrink: 1, flexBasis: 0 }}
+          />
+        ))}
+        {restPart ? <span className="h-full min-w-0.5 bg-accent" style={{ flexGrow: rest, flexShrink: 1, flexBasis: 0 }} /> : null}
+      </div>
+      {legend && shown.length ? (
+        <ul aria-hidden="true" className={cx("flex flex-wrap items-center gap-x-3 gap-y-1", size === "thin" ? "text-xs" : "text-sm")}>
+          {named.map((s) => (
+            <li key={s.key} className="inline-flex min-w-0 items-center gap-1.5 text-muted-foreground">
+              <span
+                className={cx(
+                  "shrink-0 rounded-full",
+                  size === "thin" ? "size-1.5" : "size-2",
+                  s.rest ? "border border-muted-foreground bg-accent" : s.fill,
+                )}
+              />
+              <span className="min-w-0 truncate">{s.label}</span>
+              <span data-nums className="font-medium text-foreground">
+                {legendText(s)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}