@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/dither-canvas/dither-scrubber.js

@@ -0,0 +1,130 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/dither-canvas/dither-scrubber.tsx
+/** The index under a pointer: `clientX` across `rect`, rounded to a point. */
+function indexFromPointer(clientX, rect, count) {
+	if (count <= 1 || rect.width <= 0) return 0;
+	const t = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+	return Math.round(t * (count - 1));
+}
+/** The index a key moves to, or null when the key is not a slider key. */
+function indexFromKey(key, current, count) {
+	const lastIndex = Math.max(0, count - 1);
+	const page = Math.max(1, Math.round(count / 10));
+	const clampTo = (value) => Math.min(lastIndex, Math.max(0, value));
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return clampTo(current + 1);
+		case "ArrowLeft":
+		case "ArrowDown": return clampTo(current - 1);
+		case "PageUp": return clampTo(current + page);
+		case "PageDown": return clampTo(current - page);
+		case "Home": return 0;
+		case "End": return lastIndex;
+		default: return null;
+	}
+}
+/** State and slider props for a keyboard-operable chart cursor. */
+function useDitherScrubber({ count, index: controlled, defaultIndex = null, onIndexChange }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const isControlled = controlled !== void 0;
+	const raw = isControlled ? controlled : uncontrolled;
+	const lastIndex = Math.max(0, count - 1);
+	const index = raw === null ? null : Math.min(lastIndex, Math.max(0, raw));
+	const setIndex = useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onIndexChange?.(next);
+	}, [isControlled, onIndexChange]);
+	const valueIndex = index ?? lastIndex;
+	return {
+		index,
+		valueIndex,
+		setIndex,
+		sliderProps: {
+			role: "slider",
+			tabIndex: 0,
+			"aria-valuemin": 0,
+			"aria-valuemax": lastIndex,
+			"aria-valuenow": valueIndex,
+			"aria-orientation": "horizontal",
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && index !== null) {
+					event.preventDefault();
+					setIndex(null);
+					return;
+				}
+				const next = indexFromKey(event.key, valueIndex, count);
+				if (next === null) return;
+				event.preventDefault();
+				if (next !== index) setIndex(next);
+			},
+			onPointerMove: (event) => {
+				const next = indexFromPointer(event.clientX, event.currentTarget.getBoundingClientRect(), count);
+				if (next !== index) setIndex(next);
+			},
+			onPointerLeave: (event) => {
+				if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) setIndex(null);
+			},
+			onFocus: () => {
+				if (index === null) setIndex(lastIndex);
+			},
+			onBlur: () => {
+				setIndex(null);
+			}
+		}
+	};
+}
+/**
+* The scrubber's overlay: an invisible slider covering its positioned parent,
+* plus the cursor line, point and readout while a point is active. All real
+* DOM — the readout is text, not pixels. Place it after the chart's role="img"
+* element, not inside it: a slider inside an image would be hidden.
+*/
+function DitherCursor({ scrubber, label, valueText, x, y = null, readout, className, ...props }) {
+	const active = scrubber.index !== null;
+	const left = `${String(Math.min(1, Math.max(0, x)) * 100)}%`;
+	const shift = x < .15 ? "0%" : x > .85 ? "-100%" : "-50%";
+	const move = "transition-[left,top,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "dither-cursor",
+		"aria-label": label,
+		"aria-valuetext": valueText,
+		...scrubber.sliderProps,
+		...props,
+		className: cn("absolute inset-0 cursor-crosshair touch-pan-y rounded-md", focusRing, className)
+	}), active && /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-0",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-line",
+				className: cn("absolute inset-y-0 w-px bg-primary/70", move),
+				style: { left }
+			}),
+			y !== null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-point",
+				className: cn("absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-primary shadow-sm", move),
+				style: {
+					left,
+					top: `${String(y * 100)}%`
+				}
+			}),
+			readout !== void 0 && /* @__PURE__ */ jsx("div", {
+				"data-slot": "dither-cursor-readout",
+				className: cn("absolute top-0 z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md", move),
+				style: {
+					left,
+					transform: `translate(${shift}, calc(-100% - 0.375rem))`
+				},
+				children: readout
+			})
+		]
+	})] });
+}
+//#endregion
+export { DitherCursor, indexFromKey, indexFromPointer, useDitherScrubber };
+
+//# sourceMappingURL=dither-scrubber.js.map

package/dist/components/dither-canvas/dither-scrubber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-scrubber.js","names":[],"sources":["../../../src/components/dither-canvas/dither-scrubber.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by amicro \"Dither Area Growth\").\nimport {\n  useCallback,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A scrubber over a series: the cursor amicro's growth chart drags with the\n * pointer, made operable without one. The plot overlay is an APG slider whose\n * value is a point index — arrow keys step, Page keys jump a tenth, Home/End go\n * to the ends — so the readout a pointer reveals is also reachable by keyboard\n * and announced through aria-valuetext.\n */\n\n/** The index under a pointer: `clientX` across `rect`, rounded to a point. */\nexport function indexFromPointer(\n  clientX: number,\n  rect: { left: number; width: number },\n  count: number,\n): number {\n  if (count <= 1 || rect.width <= 0) return 0;\n  const t = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n  return Math.round(t * (count - 1));\n}\n\n/** The index a key moves to, or null when the key is not a slider key. */\nexport function indexFromKey(key: string, current: number, count: number): number | null {\n  const lastIndex = Math.max(0, count - 1);\n  const page = Math.max(1, Math.round(count / 10));\n  const clampTo = (value: number) => Math.min(lastIndex, Math.max(0, value));\n  switch (key) {\n    case \"ArrowRight\":\n    case \"ArrowUp\":\n      return clampTo(current + 1);\n    case \"ArrowLeft\":\n    case \"ArrowDown\":\n      return clampTo(current - 1);\n    case \"PageUp\":\n      return clampTo(current + page);\n    case \"PageDown\":\n      return clampTo(current - page);\n    case \"Home\":\n      return 0;\n    case \"End\":\n      return lastIndex;\n    default:\n      return null;\n  }\n}\n\nexport interface DitherScrubberOptions {\n  /** Number of points. */\n  count: number;\n  /** Controlled cursor index; null hides the cursor. */\n  index?: number | null;\n  defaultIndex?: number | null;\n  onIndexChange?: (index: number | null) => void;\n}\n\nexport interface DitherScrubberProps {\n  role: \"slider\";\n  tabIndex: number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  \"aria-valuenow\": number;\n  \"aria-orientation\": \"horizontal\";\n  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  onPointerMove: (event: PointerEvent<HTMLElement>) => void;\n  onPointerLeave: (event: PointerEvent<HTMLElement>) => void;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n}\n\nexport interface DitherScrubber {\n  /** The cursor's point, or null when neither pointer nor focus is on the plot. */\n  index: number | null;\n  /** The point the slider reports: the cursor, or the latest point at rest. */\n  valueIndex: number;\n  setIndex: (index: number | null) => void;\n  /** Spread onto the plot overlay. Add aria-label and aria-valuetext yourself. */\n  sliderProps: DitherScrubberProps;\n}\n\n/** State and slider props for a keyboard-operable chart cursor. */\nexport function useDitherScrubber({\n  count,\n  index: controlled,\n  defaultIndex = null,\n  onIndexChange,\n}: DitherScrubberOptions): DitherScrubber {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultIndex);\n  const isControlled = controlled !== undefined;\n  const raw = isControlled ? controlled : uncontrolled;\n  const lastIndex = Math.max(0, count - 1);\n  const index = raw === null ? null : Math.min(lastIndex, Math.max(0, raw));\n\n  const setIndex = useCallback(\n    (next: number | null) => {\n      if (!isControlled) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [isControlled, onIndexChange],\n  );\n\n  const valueIndex = index ?? lastIndex;\n\n  return {\n    index,\n    valueIndex,\n    setIndex,\n    sliderProps: {\n      role: \"slider\",\n      tabIndex: 0,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": lastIndex,\n      \"aria-valuenow\": valueIndex,\n      \"aria-orientation\": \"horizontal\",\n      onKeyDown: (event) => {\n        if (event.key === \"Escape\" && index !== null) {\n          event.preventDefault();\n          setIndex(null);\n          return;\n        }\n        const next = indexFromKey(event.key, valueIndex, count);\n        if (next === null) return;\n        event.preventDefault();\n        if (next !== index) setIndex(next);\n      },\n      onPointerMove: (event) => {\n        const next = indexFromPointer(\n          event.clientX,\n          event.currentTarget.getBoundingClientRect(),\n          count,\n        );\n        if (next !== index) setIndex(next);\n      },\n      onPointerLeave: (event) => {\n        if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget)\n          setIndex(null);\n      },\n      onFocus: () => {\n        if (index === null) setIndex(lastIndex);\n      },\n      onBlur: () => {\n        setIndex(null);\n      },\n    },\n  };\n}\n\nexport interface DitherCursorProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  scrubber: DitherScrubber;\n  /** Names the slider, e.g. \"Members by day\". */\n  label: string;\n  /** What the slider announces for the current point, e.g. \"Jul 3: 24\". */\n  valueText: string;\n  /** Cursor position across the plot, 0..1. */\n  x: number;\n  /** Point position down the plot, 0..1 from the top; null draws no dot. */\n  y?: number | null;\n  /** Readout content, shown beside the cursor. */\n  readout?: ReactNode;\n}\n\n/**\n * The scrubber's overlay: an invisible slider covering its positioned parent,\n * plus the cursor line, point and readout while a point is active. All real\n * DOM — the readout is text, not pixels. Place it after the chart's role=\"img\"\n * element, not inside it: a slider inside an image would be hidden.\n */\nexport function DitherCursor({\n  scrubber,\n  label,\n  valueText,\n  x,\n  y = null,\n  readout,\n  className,\n  ...props\n}: DitherCursorProps) {\n  const active = scrubber.index !== null;\n  const left = `${String(Math.min(1, Math.max(0, x)) * 100)}%`;\n  // Keep the readout inside the plot near either edge.\n  const shift = x < 0.15 ? \"0%\" : x > 0.85 ? \"-100%\" : \"-50%\";\n  const move =\n    \"transition-[left,top,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\";\n  return (\n    <>\n      <div\n        data-slot=\"dither-cursor\"\n        aria-label={label}\n        aria-valuetext={valueText}\n        {...scrubber.sliderProps}\n        {...props}\n        className={cn(\n          \"absolute inset-0 cursor-crosshair touch-pan-y rounded-md\",\n          focusRing,\n          className,\n        )}\n      />\n      {active && (\n        <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n          <div\n            data-slot=\"dither-cursor-line\"\n            className={cn(\"absolute inset-y-0 w-px bg-primary/70\", move)}\n            style={{ left }}\n          />\n          {y !== null && (\n            <div\n              data-slot=\"dither-cursor-point\"\n              className={cn(\n                \"absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-primary shadow-sm\",\n                move,\n              )}\n              style={{ left, top: `${String(y * 100)}%` }}\n            />\n          )}\n          {readout !== undefined && (\n            <div\n              data-slot=\"dither-cursor-readout\"\n              className={cn(\n                \"absolute top-0 z-10 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs whitespace-nowrap text-popover-foreground shadow-md\",\n                move,\n              )}\n              style={{ left, transform: `translate(${shift}, calc(-100% - 0.375rem))` }}\n            >\n              {readout}\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dither-canvas/index.d.ts

@@ -0,0 +1,5 @@
+import { DitherCanvas, DitherCanvasHandle, DitherCanvasOptions, DitherCanvasProps, DitherDraw, DitherFrame, DitherTable, DitherTableProps, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference } from "./dither-canvas.js";
+import { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, DitherBounds, DitherDensity, DitherFillOptions, Spring, SpringConfig, SpringList, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, hash2, lerp, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss } from "./dither-engine.js";
+import { PathSink, Point, Wedge, angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt } from "./dither-geometry.js";
+import { DitherCursor, DitherCursorProps, DitherScrubber, DitherScrubberOptions, DitherScrubberProps, indexFromKey, indexFromPointer, useDitherScrubber } from "./dither-scrubber.js";
+export { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, type DitherBounds, DitherCanvas, type DitherCanvasHandle, type DitherCanvasOptions, type DitherCanvasProps, DitherCursor, type DitherCursorProps, type DitherDensity, type DitherDraw, type DitherFillOptions, type DitherFrame, type DitherScrubber, type DitherScrubberOptions, type DitherScrubberProps, DitherTable, type DitherTableProps, type PathSink, type Point, type Spring, type SpringConfig, type SpringList, type Wedge, angleInWedge, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, formatDitherValue, hash2, indexFromKey, indexFromPointer, lerp, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, prefersReducedMotion, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, useDitherCanvas, useDitherScrubber, useReducedMotionPreference, valueAt, wedgeAt };

package/dist/components/dither-canvas/index.js

@@ -0,0 +1,5 @@
+import { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, hash2, lerp, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss } from "./dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue, prefersReducedMotion, useDitherCanvas, useReducedMotionPreference } from "./dither-canvas.js";
+import { angleInWedge, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, valueAt, wedgeAt } from "./dither-geometry.js";
+import { DitherCursor, indexFromKey, indexFromPointer, useDitherScrubber } from "./dither-scrubber.js";
+export { DEFAULT_SPRING, DITHER_CELL, DITHER_PALETTE, DitherCanvas, DitherCursor, DitherTable, angleInWedge, cellSquare, clamp, createSpring, createSprings, ditherFill, drift, forEachCell, formatDitherValue, hash2, indexFromKey, indexFromPointer, lerp, makePath, monotoneTangents, niceMax, normalizeAngle, pieWedges, prefersReducedMotion, resample, resolveColor, seriesColor, shimmer, smoothstep, tokenToCss, tracePolyline, traceRoundedRect, traceRoundedWedge, traceSpline, traceWedge, useDitherCanvas, useDitherScrubber, useReducedMotionPreference, valueAt, wedgeAt };

package/dist/components/dither-canvas/meta.js

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-canvas/meta.ts
+const meta = defineMeta({
+	name: "dither-canvas",
+	title: "Dither Canvas",
+	description: "The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.",
+	category: "data",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: [
+		"dither-canvas.tsx",
+		"dither-engine.ts",
+		"dither-geometry.ts",
+		"dither-scrubber.tsx"
+	],
+	a11y: "The canvas is aria-hidden by default: a chart built on it names itself with role=\"img\" and an aria-label summary, and renders its values in DitherTable, which stays in the accessibility tree when visually hidden. useDitherScrubber gives a chart cursor APG slider semantics (arrows, Page keys, Home/End). The loop pauses off-screen and in hidden tabs, and under reduced motion (or --motion-scale near zero) draws a single static frame with springs settled."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dither-canvas/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-canvas/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-canvas\",\n  title: \"Dither Canvas\",\n  description:\n    \"The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"dither-canvas.tsx\", \"dither-engine.ts\", \"dither-geometry.ts\", \"dither-scrubber.tsx\"],\n  a11y:\n    'The canvas is aria-hidden by default: a chart built on it names itself with role=\"img\" and an ' +\n    \"aria-label summary, and renders its values in DitherTable, which stays in the accessibility tree \" +\n    \"when visually hidden. useDitherScrubber gives a chart cursor APG slider semantics (arrows, Page \" +\n    \"keys, Home/End). The loop pauses off-screen and in hidden tabs, and under reduced motion (or \" +\n    \"--motion-scale near zero) draws a single static frame with springs settled.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO;EAAC;EAAqB;EAAoB;EAAsB;CAAqB;CAC5F,MACE;AAKJ,CAAC"}

package/dist/components/dither-donut/dither-donut.d.ts

@@ -0,0 +1,46 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/dither-donut/dither-donut.d.ts
+declare const ditherDonutVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherDonutDatum {
+  label: string;
+  value: number;
+  /** Colour token (`"primary"`) or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherDonutLabels {
+  category?: string;
+  value?: string;
+  share?: string;
+  total?: string;
+}
+interface DitherDonutProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherDonutVariants> {
+  data: readonly DitherDonutDatum[];
+  /** What the chart shows. Names the image, the legend and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  variant?: "graph" | "flat";
+  /** Ring thickness as a fraction of the radius. Default 0.36. */
+  thickness?: number;
+  formatValue?: (value: number) => string;
+  /** Centre content. Defaults to the active entry, or the total; null hides it. */
+  center?: ReactNode;
+  showLegend?: boolean;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  /** Run the shimmer. Reduced motion stops it regardless. */
+  animate?: boolean;
+  cell?: number;
+  /** The pinned entry (controlled). */
+  activeIndex?: number | null;
+  defaultActiveIndex?: number | null;
+  onActiveIndexChange?: (index: number | null) => void;
+  labels?: DitherDonutLabels;
+}
+declare function DitherDonut({ data, label, description, variant, size, thickness, formatValue, center, showLegend, showTable, animate, cell, activeIndex, defaultActiveIndex, onActiveIndexChange, labels, className, ...props }: DitherDonutProps): import("react").JSX.Element;
+//#endregion
+export { DitherDonut, DitherDonutDatum, DitherDonutLabels, DitherDonutProps, ditherDonutVariants };
+//# sourceMappingURL=dither-donut.d.ts.map

package/dist/components/dither-donut/dither-donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-donut.d.ts","names":[],"sources":["../../../src/components/dither-donut/dither-donut.tsx"],"mappings":";;;cAiDa,sBAAmB;;6CAS9B;UAEe;EACf;EACA;;EAEA;;UAGe;EACf;EACA;EACA;EACA;;UAGe,yBAEb,KAAK,2CACL,oBAAoB;EACtB,eAAe;;EAEf;;EAEA;EACA;;EAEA;EACA,eAAe;;EAEf,SAAS;EACT;;EAEA;;EAEA;EACA;;EAEA;EACA;EACA,uBAAuB;EACvB,SAAS;;iBAoBK,cACd,MACA,OACA,aACA,SACA,MACA,WACA,aACA,QACA,YACA,WACA,SACA,MACA,aACA,oBACA,qBACA,QACA,cACG,SACF,mCAAgB,IAAA"}

package/dist/components/dither-donut/dither-donut.js

@@ -0,0 +1,241 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { createSprings, ditherFill, drift, hash2, seriesColor, shimmer, smoothstep, tokenToCss } from "../dither-canvas/dither-engine.js";
+import { DitherCanvas, DitherTable, formatDitherValue } from "../dither-canvas/dither-canvas.js";
+import { angleInWedge, makePath, pieWedges, traceRoundedWedge, traceWedge, wedgeAt } from "../dither-canvas/dither-geometry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/dither-donut/dither-donut.tsx
+const ditherDonutVariants = cva("flex flex-wrap items-center gap-x-6 gap-y-4", {
+	variants: { size: {
+		sm: "[--dither-donut-size:8rem]",
+		md: "[--dither-donut-size:11rem]",
+		lg: "[--dither-donut-size:14rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+const PERCENT = new Intl.NumberFormat(void 0, {
+	style: "percent",
+	maximumFractionDigits: 0
+});
+function donutLayout(width, height, thickness, graph) {
+	const size = Math.min(width, height);
+	const pop = graph ? size * .03 : 0;
+	const outer = Math.max(0, size / 2 - pop - 1);
+	return {
+		center: {
+			x: width / 2,
+			y: height / 2
+		},
+		outer,
+		inner: outer * (1 - Math.min(.9, Math.max(.1, thickness))),
+		pop
+	};
+}
+function DitherDonut({ data, label, description, variant = "graph", size, thickness = .36, formatValue = formatDitherValue, center, showLegend = true, showTable = false, animate = true, cell, activeIndex, defaultActiveIndex = null, onActiveIndexChange, labels, className, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+	const [preview, setPreview] = useState(null);
+	const pinned = activeIndex !== void 0 ? activeIndex : uncontrolled;
+	const active = preview ?? pinned;
+	const graph = variant === "graph";
+	const values = data.map((datum) => datum.value > 0 ? datum.value : 0);
+	const total = values.reduce((sum, value) => sum + value, 0);
+	const targets = values.map((value) => total > 0 ? value / total : 0);
+	const shares = useRef(createSprings(targets));
+	const pops = useRef(createSprings(targets.map(() => 0), {
+		stiffness: 320,
+		damping: 24
+	}));
+	const pin = (index) => {
+		const next = pinned === index ? null : index;
+		if (activeIndex === void 0) setUncontrolled(next);
+		onActiveIndexChange?.(next);
+	};
+	const draw = (ctx, frame) => {
+		const { width, height, time, animated } = frame;
+		const step = frame.cell;
+		const { center: c, outer, inner, pop } = donutLayout(width, height, thickness, graph);
+		shares.current.set(targets);
+		pops.current.set(targets.map((_, index) => index === active ? 1 : 0));
+		const sharesMoving = shares.current.step(frame.delta, frame.reducedMotion);
+		const moving = pops.current.step(frame.delta, frame.reducedMotion) || sharesMoving;
+		const popped = pops.current.values;
+		const t = time * 1.2;
+		const bounds = {
+			x: c.x - outer - step,
+			y: c.y - outer - step,
+			width: 2 * (outer + step),
+			height: 2 * (outer + step)
+		};
+		for (const wedge of pieWedges(shares.current.values, { gap: graph ? .07 : 0 })) {
+			if (wedge.share <= 0 || wedge.end <= wedge.start) continue;
+			const { index, start, end, mid } = wedge;
+			const isActive = index === active;
+			const lift = pop * (popped[index] ?? 0);
+			ctx.save();
+			ctx.translate(Math.cos(mid) * lift, Math.sin(mid) * lift);
+			const clip = makePath((sink) => {
+				if (graph) traceRoundedWedge(sink, c, inner, outer, start, end, 6);
+				else traceWedge(sink, c, inner, outer, start, end);
+			});
+			const inside = (cx, cy) => {
+				const distance = Math.hypot(cx - c.x, cy - c.y);
+				return distance >= inner - step && distance <= outer + step && angleInWedge(Math.atan2(cy - c.y, cx - c.x), start, end);
+			};
+			ditherFill(ctx, {
+				clip,
+				bounds,
+				cell: step,
+				color: frame.color(seriesColor(index, data[index]?.color)),
+				alpha: isActive ? 1 : active !== null ? .3 : graph ? .78 : .85,
+				density: (cx, cy) => {
+					if (!inside(cx, cy)) return 0;
+					const jitter = hash2(cx, cy);
+					if (!graph) return (.4 + .4 * (animated ? drift(cx, cy, t) : .5)) * (.8 + .4 * jitter);
+					const dx = cx - c.x;
+					const dy = cy - c.y;
+					const distance = Math.hypot(dx, dy);
+					const fullness = smoothstep(.62, 1, (distance - inner) / Math.max(1, outer - inner));
+					const wave = animated ? shimmer(Math.sin(distance * .1 - t), Math.sin(Math.atan2(dy, dx) * 3 + t * 1.5), Math.sin((dx + dy) * .05 + t * 2)) : .5;
+					return ((isActive ? .46 : .34) + .36 * fullness + .26 * wave) * (.78 + .42 * jitter);
+				}
+			});
+			if (isActive) {
+				const seed = animated ? 1 + Math.floor(time * 6) : 1;
+				ditherFill(ctx, {
+					clip,
+					bounds,
+					cell: step,
+					color: frame.color("foreground"),
+					alpha: .9,
+					density: (cx, cy) => inside(cx, cy) && hash2(cx, cy, seed) > .92 ? .8 : 0
+				});
+			}
+			ctx.restore();
+		}
+		return moving;
+	};
+	const onPointerMove = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const layout = donutLayout(rect.width, rect.height, thickness, graph);
+		const hit = wedgeAt(pieWedges(targets, { gap: graph ? .07 : 0 }), layout.center, layout.inner, layout.outer + layout.pop, {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		});
+		if (hit !== preview) setPreview(hit);
+	};
+	const share = (index) => PERCENT.format(targets[index] ?? 0);
+	const summary = description ?? `${data.map((datum, index) => `${datum.label} ${formatValue(datum.value)} (${share(index)})`).join(", ")}. ${labels?.total ?? "Total"} ${formatValue(total)}.`;
+	const activeDatum = active !== null ? data[active] : void 0;
+	const readout = center !== void 0 ? center : /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: activeDatum?.label ?? labels?.total ?? "Total"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-lg font-semibold text-foreground tabular-nums",
+			children: formatValue(activeDatum ? activeDatum.value : total)
+		}),
+		activeDatum && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground tabular-nums",
+			children: share(active ?? 0)
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dither-donut",
+		"data-variant": variant,
+		...props,
+		className: cn(ditherDonutVariants({ size }), className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "dither-donut-plot",
+				className: "relative size-[var(--dither-donut-size)] shrink-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${label}: ${summary}`,
+					className: "size-full",
+					onPointerMove,
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					children: /* @__PURE__ */ jsx(DitherCanvas, {
+						draw,
+						animate,
+						cell
+					})
+				}), readout !== null && /* @__PURE__ */ jsx("div", {
+					"data-slot": "dither-donut-readout",
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center leading-tight",
+					children: readout
+				})]
+			}),
+			showLegend && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "dither-donut-legend",
+				"aria-label": label,
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: data.map((datum, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pinned === index,
+					"aria-label": `${datum.label}: ${formatValue(datum.value)} (${share(index)})`,
+					"data-active": active === index || void 0,
+					className: cn("flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-xs transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:bg-muted aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:bg-muted", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background"),
+					onPointerEnter: () => {
+						setPreview(index);
+					},
+					onPointerLeave: () => {
+						setPreview(null);
+					},
+					onFocus: () => {
+						setPreview(index);
+					},
+					onBlur: () => {
+						setPreview(null);
+					},
+					onClick: () => {
+						pin(index);
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2.5 shrink-0 rounded-full",
+							style: { background: tokenToCss(seriesColor(index, datum.color)) }
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-start font-medium text-foreground",
+							children: datum.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-foreground tabular-nums",
+							children: formatValue(datum.value)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-9 text-end font-mono text-2xs text-muted-foreground",
+							children: share(index)
+						})
+					]
+				}) }, `${datum.label}-${String(index)}`))
+			}),
+			/* @__PURE__ */ jsx(DitherTable, {
+				caption: label,
+				columns: [
+					labels?.category ?? "Category",
+					labels?.value ?? "Value",
+					labels?.share ?? "Share"
+				],
+				rows: data.map((datum, index) => [
+					datum.label,
+					formatValue(datum.value),
+					share(index)
+				]),
+				visible: showTable,
+				className: showTable ? "basis-full" : void 0
+			})
+		]
+	});
+}
+//#endregion
+export { DitherDonut, ditherDonutVariants };
+
+//# sourceMappingURL=dither-donut.js.map

package/dist/components/dither-donut/dither-donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-donut.js","names":[],"sources":["../../../src/components/dither-donut/dither-donut.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Dither Donut Graph\" and \"Device Usage Donut\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  angleInWedge,\n  createSprings,\n  DitherCanvas,\n  ditherFill,\n  DitherTable,\n  drift,\n  formatDitherValue,\n  hash2,\n  makePath,\n  pieWedges,\n  seriesColor,\n  shimmer,\n  smoothstep,\n  tokenToCss,\n  traceRoundedWedge,\n  traceWedge,\n  wedgeAt,\n  type DitherDraw,\n} from \"@/components/dither-canvas\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A donut drawn in dithered cells. Two looks from amicro:\n *\n * - `graph` (Dither Donut Graph): rounded wedges with gaps, cells that grow\n *   toward the outer edge, a three-sine shimmer, and the active wedge popping\n *   outward with a scatter of highlight particles.\n * - `flat` (Device Usage Donut): plain sectors, even cells, a two-sine drift.\n *\n * Shares and pop-outs are springs in the engine, so a data change morphs.\n * Hovering a wedge or a legend entry previews it; clicking a legend entry pins\n * it (aria-pressed). The period selector in amicro's demo is consumer UI and\n * lives in the stories.\n */\n\nexport const ditherDonutVariants = cva(\"flex flex-wrap items-center gap-x-6 gap-y-4\", {\n  variants: {\n    size: {\n      sm: \"[--dither-donut-size:8rem]\",\n      md: \"[--dither-donut-size:11rem]\",\n      lg: \"[--dither-donut-size:14rem]\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface DitherDonutDatum {\n  label: string;\n  value: number;\n  /** Colour token (`\"primary\"`) or CSS colour expression. Defaults to the palette. */\n  color?: string;\n}\n\nexport interface DitherDonutLabels {\n  category?: string;\n  value?: string;\n  share?: string;\n  total?: string;\n}\n\nexport interface DitherDonutProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof ditherDonutVariants> {\n  data: readonly DitherDonutDatum[];\n  /** What the chart shows. Names the image, the legend and the data table. */\n  label: string;\n  /** Replaces the generated summary in the image's accessible name. */\n  description?: string;\n  variant?: \"graph\" | \"flat\";\n  /** Ring thickness as a fraction of the radius. Default 0.36. */\n  thickness?: number;\n  formatValue?: (value: number) => string;\n  /** Centre content. Defaults to the active entry, or the total; null hides it. */\n  center?: ReactNode;\n  showLegend?: boolean;\n  /** Show the data table. It is always present for assistive technology. */\n  showTable?: boolean;\n  /** Run the shimmer. Reduced motion stops it regardless. */\n  animate?: boolean;\n  cell?: number;\n  /** The pinned entry (controlled). */\n  activeIndex?: number | null;\n  defaultActiveIndex?: number | null;\n  onActiveIndexChange?: (index: number | null) => void;\n  labels?: DitherDonutLabels;\n}\n\nconst PERCENT = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 0,\n});\n\nfunction donutLayout(width: number, height: number, thickness: number, graph: boolean) {\n  const size = Math.min(width, height);\n  const pop = graph ? size * 0.03 : 0;\n  const outer = Math.max(0, size / 2 - pop - 1);\n  return {\n    center: { x: width / 2, y: height / 2 },\n    outer,\n    inner: outer * (1 - Math.min(0.9, Math.max(0.1, thickness))),\n    pop,\n  };\n}\n\nexport function DitherDonut({\n  data,\n  label,\n  description,\n  variant = \"graph\",\n  size,\n  thickness = 0.36,\n  formatValue = formatDitherValue,\n  center,\n  showLegend = true,\n  showTable = false,\n  animate = true,\n  cell,\n  activeIndex,\n  defaultActiveIndex = null,\n  onActiveIndexChange,\n  labels,\n  className,\n  ...props\n}: DitherDonutProps) {\n  const [uncontrolled, setUncontrolled] = useState<number | null>(defaultActiveIndex);\n  const [preview, setPreview] = useState<number | null>(null);\n  const pinned = activeIndex !== undefined ? activeIndex : uncontrolled;\n  const active = preview ?? pinned;\n\n  const graph = variant === \"graph\";\n  const values = data.map((datum) => (datum.value > 0 ? datum.value : 0));\n  const total = values.reduce((sum, value) => sum + value, 0);\n  const targets = values.map((value) => (total > 0 ? value / total : 0));\n\n  const shares = useRef(createSprings(targets));\n  const pops = useRef(\n    createSprings(\n      targets.map(() => 0),\n      { stiffness: 320, damping: 24 },\n    ),\n  );\n\n  const pin = (index: number) => {\n    const next = pinned === index ? null : index;\n    if (activeIndex === undefined) setUncontrolled(next);\n    onActiveIndexChange?.(next);\n  };\n\n  const draw: DitherDraw = (ctx, frame) => {\n    const { width, height, time, animated } = frame;\n    const step = frame.cell;\n    const { center: c, outer, inner, pop } = donutLayout(width, height, thickness, graph);\n    shares.current.set(targets);\n    pops.current.set(targets.map((_, index) => (index === active ? 1 : 0)));\n    const sharesMoving = shares.current.step(frame.delta, frame.reducedMotion);\n    const moving = pops.current.step(frame.delta, frame.reducedMotion) || sharesMoving;\n    const popped = pops.current.values;\n    const t = time * 1.2;\n    const bounds = {\n      x: c.x - outer - step,\n      y: c.y - outer - step,\n      width: 2 * (outer + step),\n      height: 2 * (outer + step),\n    };\n\n    for (const wedge of pieWedges(shares.current.values, { gap: graph ? 0.07 : 0 })) {\n      if (wedge.share <= 0 || wedge.end <= wedge.start) continue;\n      const { index, start, end, mid } = wedge;\n      const isActive = index === active;\n      const lift = pop * (popped[index] ?? 0);\n      ctx.save();\n      ctx.translate(Math.cos(mid) * lift, Math.sin(mid) * lift);\n      const clip = makePath((sink) => {\n        if (graph) traceRoundedWedge(sink, c, inner, outer, start, end, 6);\n        else traceWedge(sink, c, inner, outer, start, end);\n      });\n      const inside = (cx: number, cy: number) => {\n        const distance = Math.hypot(cx - c.x, cy - c.y);\n        return (\n          distance >= inner - step &&\n          distance <= outer + step &&\n          angleInWedge(Math.atan2(cy - c.y, cx - c.x), start, end)\n        );\n      };\n      ditherFill(ctx, {\n        clip,\n        bounds,\n        cell: step,\n        color: frame.color(seriesColor(index, data[index]?.color)),\n        alpha: isActive ? 1 : active !== null ? 0.3 : graph ? 0.78 : 0.85,\n        density: (cx, cy) => {\n          if (!inside(cx, cy)) return 0;\n          const jitter = hash2(cx, cy);\n          if (!graph)\n            return (0.4 + 0.4 * (animated ? drift(cx, cy, t) : 0.5)) * (0.8 + 0.4 * jitter);\n          const dx = cx - c.x;\n          const dy = cy - c.y;\n          const distance = Math.hypot(dx, dy);\n          const fullness = smoothstep(0.62, 1, (distance - inner) / Math.max(1, outer - inner));\n          const wave = animated\n            ? shimmer(\n                Math.sin(distance * 0.1 - t),\n                Math.sin(Math.atan2(dy, dx) * 3 + t * 1.5),\n                Math.sin((dx + dy) * 0.05 + t * 2),\n              )\n            : 0.5;\n          return (\n            ((isActive ? 0.46 : 0.34) + 0.36 * fullness + 0.26 * wave) * (0.78 + 0.42 * jitter)\n          );\n        },\n      });\n      if (isActive) {\n        // Highlight particles: a sparse second layer, re-seeded a few times a\n        // second while animating, still under reduced motion.\n        const seed = animated ? 1 + Math.floor(time * 6) : 1;\n        ditherFill(ctx, {\n          clip,\n          bounds,\n          cell: step,\n          color: frame.color(\"foreground\"),\n          alpha: 0.9,\n          density: (cx, cy) => (inside(cx, cy) && hash2(cx, cy, seed) > 0.92 ? 0.8 : 0),\n        });\n      }\n      ctx.restore();\n    }\n    return moving;\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const layout = donutLayout(rect.width, rect.height, thickness, graph);\n    const hit = wedgeAt(\n      pieWedges(targets, { gap: graph ? 0.07 : 0 }),\n      layout.center,\n      layout.inner,\n      layout.outer + layout.pop,\n      { x: event.clientX - rect.left, y: event.clientY - rect.top },\n    );\n    if (hit !== preview) setPreview(hit);\n  };\n\n  const share = (index: number) => PERCENT.format(targets[index] ?? 0);\n  const summary =\n    description ??\n    `${data.map((datum, index) => `${datum.label} ${formatValue(datum.value)} (${share(index)})`).join(\", \")}. ${labels?.total ?? \"Total\"} ${formatValue(total)}.`;\n  const activeDatum = active !== null ? data[active] : undefined;\n\n  const readout =\n    center !== undefined ? (\n      center\n    ) : (\n      <>\n        <span className=\"text-xs text-muted-foreground\">\n          {activeDatum?.label ?? labels?.total ?? \"Total\"}\n        </span>\n        <span className=\"text-lg font-semibold text-foreground tabular-nums\">\n          {formatValue(activeDatum ? activeDatum.value : total)}\n        </span>\n        {activeDatum && (\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            {share(active ?? 0)}\n          </span>\n        )}\n      </>\n    );\n\n  return (\n    <div\n      data-slot=\"dither-donut\"\n      data-variant={variant}\n      {...props}\n      className={cn(ditherDonutVariants({ size }), className)}\n    >\n      <div\n        data-slot=\"dither-donut-plot\"\n        className=\"relative size-[var(--dither-donut-size)] shrink-0\"\n      >\n        <div\n          role=\"img\"\n          aria-label={`${label}: ${summary}`}\n          className=\"size-full\"\n          onPointerMove={onPointerMove}\n          onPointerLeave={() => {\n            setPreview(null);\n          }}\n        >\n          <DitherCanvas draw={draw} animate={animate} cell={cell} />\n        </div>\n        {readout !== null && (\n          <div\n            data-slot=\"dither-donut-readout\"\n            className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center leading-tight\"\n          >\n            {readout}\n          </div>\n        )}\n      </div>\n      {showLegend && (\n        <ul\n          data-slot=\"dither-donut-legend\"\n          aria-label={label}\n          className=\"flex min-w-0 flex-1 flex-col gap-1\"\n        >\n          {data.map((datum, index) => (\n            <li key={`${datum.label}-${String(index)}`}>\n              <button\n                type=\"button\"\n                aria-pressed={pinned === index}\n                aria-label={`${datum.label}: ${formatValue(datum.value)} (${share(index)})`}\n                data-active={active === index || undefined}\n                className={cn(\n                  \"flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-xs transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:bg-muted aria-pressed:bg-accent aria-pressed:text-accent-foreground data-active:bg-muted\",\n                  focusRing,\n                )}\n                onPointerEnter={() => {\n                  setPreview(index);\n                }}\n                onPointerLeave={() => {\n                  setPreview(null);\n                }}\n                onFocus={() => {\n                  setPreview(index);\n                }}\n                onBlur={() => {\n                  setPreview(null);\n                }}\n                onClick={() => {\n                  pin(index);\n                }}\n              >\n                <span\n                  aria-hidden\n                  className=\"size-2.5 shrink-0 rounded-full\"\n                  style={{ background: tokenToCss(seriesColor(index, datum.color)) }}\n                />\n                <span className=\"min-w-0 flex-1 truncate text-start font-medium text-foreground\">\n                  {datum.label}\n                </span>\n                <span className=\"text-foreground tabular-nums\">{formatValue(datum.value)}</span>\n                <span className=\"w-9 text-end font-mono text-2xs text-muted-foreground\">\n                  {share(index)}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <DitherTable\n        caption={label}\n        columns={[\n          labels?.category ?? \"Category\",\n          labels?.value ?? \"Value\",\n          labels?.share ?? \"Share\",\n        ]}\n        rows={data.map((datum, index) => [datum.label, formatValue(datum.value), share(index)])}\n        visible={showTable}\n        className={showTable ? \"basis-full\" : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dither-donut/index.d.ts

@@ -0,0 +1,2 @@
+import { DitherDonut, DitherDonutDatum, DitherDonutLabels, DitherDonutProps, ditherDonutVariants } from "./dither-donut.js";
+export { DitherDonut, type DitherDonutDatum, type DitherDonutLabels, type DitherDonutProps, ditherDonutVariants };

package/dist/components/dither-donut/index.js

@@ -0,0 +1,2 @@
+import { DitherDonut, ditherDonutVariants } from "./dither-donut.js";
+export { DitherDonut, ditherDonutVariants };

package/dist/components/dither-donut/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dither-donut/meta.ts
+const meta = defineMeta({
+	name: "dither-donut",
+	title: "Dither Donut",
+	description: "A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["dither-canvas"],
+	files: ["dither-donut.tsx"],
+	a11y: "The plot is role=\"img\" with an aria-label summarising every entry, its share and the total. Legend entries are buttons named with their value and share: focus or hover previews a wedge, and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless showTable is set. The readout is real text. Under reduced motion the shimmer stops and data changes settle in one frame."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dither-donut/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dither-donut/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dither-donut\",\n  title: \"Dither Donut\",\n  description:\n    \"A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"dither-canvas\"],\n  files: [\"dither-donut.tsx\"],\n  a11y:\n    'The plot is role=\"img\" with an aria-label summarising every entry, its share and the total. ' +\n    \"Legend entries are buttons named with their value and share: focus or hover previews a wedge, \" +\n    \"and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless \" +\n    \"showTable is set. The readout is real text. Under reduced motion the shimmer stops and data \" +\n    \"changes settle in one frame.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,eAAe;CACtC,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAKJ,CAAC"}

package/dist/components/dither-funnel/dither-funnel.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/dither-funnel/dither-funnel.d.ts
+declare const ditherFunnelVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DitherFunnelStage {
+  label: string;
+  value: number;
+  /** Colour token or CSS colour expression. Defaults to the palette. */
+  color?: string;
+}
+interface DitherFunnelProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof ditherFunnelVariants> {
+  stages: readonly DitherFunnelStage[];
+  /** What the funnel shows. Names the image, the stages and the data table. */
+  label: string;
+  /** Replaces the generated summary in the image's accessible name. */
+  description?: string;
+  /** Value of a full-length bar. Defaults to the largest stage. */
+  max?: number;
+  formatValue?: (value: number) => string;
+  /** Formats a 0..1 share. Defaults to a whole percentage. */
+  formatPercent?: (share: number) => string;
+  /** Show the data table. It is always present for assistive technology. */
+  showTable?: boolean;
+  animate?: boolean;
+  cell?: number;
+  /** The pinned stage (controlled); null pins none. */
+  activeStage?: number | null;
+  defaultActiveStage?: number | null;
+  onActiveStageChange?: (index: number | null) => void;
+  /** Data table headers. */
+  categoryLabel?: string;
+  valueLabel?: string;
+  conversionLabel?: string;
+  stepLabel?: string;
+}
+/** Gap between stage bars in CSS pixels, shared by the canvas and the buttons. */
+declare const FUNNEL_GAP = 6;
+interface FunnelConversion {
+  /** Share of the first stage, 0..1. */
+  overall: number;
+  /** Share of the previous stage, 0..1 (1 for the first). */
+  step: number;
+  /** How many the previous stage lost on the way here (0 for the first). */
+  dropped: number;
+}
+/** Overall and step conversion for each stage. */
+declare function funnelConversions(stages: readonly DitherFunnelStage[]): FunnelConversion[];
+declare function DitherFunnel({ stages, label, description, max, size, formatValue, formatPercent, showTable, animate, cell, activeStage, defaultActiveStage, onActiveStageChange, categoryLabel, valueLabel, conversionLabel, stepLabel, className, ...props }: DitherFunnelProps): import("react").JSX.Element;
+//#endregion
+export { DitherFunnel, DitherFunnelProps, DitherFunnelStage, FUNNEL_GAP, FunnelConversion, ditherFunnelVariants, funnelConversions };
+//# sourceMappingURL=dither-funnel.d.ts.map

package/dist/components/dither-funnel/dither-funnel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dither-funnel.d.ts","names":[],"sources":["../../../src/components/dither-funnel/dither-funnel.tsx"],"mappings":";;;cAkCa,uBAAoB;;6CAS/B;UAEe;EACf;EACA;;EAEA;;UAGe,0BAEb,KAAK,2CACL,oBAAoB;EACtB,iBAAiB;;EAEjB;;EAEA;;EAEA;EACA,eAAe;;EAEf,iBAAiB;;EAEjB;EACA;EACA;;EAEA;EACA;EACA,uBAAuB;;EAEvB;EACA;EACA;EACA;;;cAIW;UAEI;;EAEf;;EAEA;;EAEA;;;iBAMc,kBAAkB,iBAAiB,sBAAsB;iBAezD,eACd,QACA,OACA,aACA,KACA,MACA,aACA,eACA,WACA,SACA,MACA,aACA,oBACA,qBACA,eACA,YACA,iBACA,WACA,cACG,SACF,oCAAiB,IAAA"}