@seekalfred/primitives 0.7.1 → 0.7.4

package/dist/lib/required-marker.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/required-marker.tsx
+/**
+* The required marker after a field's label: one red asterisk, the same in
+* every field (FieldShell's, and Select's own label). Decoration only
+* (aria-hidden): the control's own `required` is what a screen reader
+* announces, so the name stays "Email", not "Email star".
+*/
+function RequiredMarker() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "field-required",
+		className: "-ms-1 text-destructive-strong",
+		children: "*"
+	});
+}
+//#endregion
+export { RequiredMarker };
+
+//# sourceMappingURL=required-marker.js.map

package/dist/lib/required-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"required-marker.js","names":[],"sources":["../../src/lib/required-marker.tsx"],"sourcesContent":["/**\n * The required marker after a field's label: one red asterisk, the same in\n * every field (FieldShell's, and Select's own label). Decoration only\n * (aria-hidden): the control's own `required` is what a screen reader\n * announces, so the name stays \"Email\", not \"Email star\".\n */\nexport function RequiredMarker() {\n  return (\n    <span aria-hidden=\"true\" data-slot=\"field-required\" className=\"-ms-1 text-destructive-strong\">\n      *\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,iBAAiB;CAC/B,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,aAAU;EAAiB,WAAU;EAAgC,UAAA;CAExF,CAAA;AAEV"}

package/dist/lib/use-copy-feedback.js

@@ -1,5 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/lib/use-copy-feedback.ts
+/**
+* Runs a consumer's callback so that a throw inside it cannot reject the
+* promise our press handler fires and forgets (an unhandled rejection). The
+* error is reported the way an uncaught one would be, so it still shows up.
+*/
+function callSafely(callback) {
+	try {
+		callback();
+	} catch (error) {
+		if (typeof globalThis.reportError === "function") globalThis.reportError(error);
+		else console.error(error);
+	}
+}
 /** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */
 function useCopyFeedback(duration = 1900) {
 	const [state, setState] = useState("idle");
@@ -14,16 +27,17 @@ function useCopyFeedback(duration = 1900) {
 	}, []);
 	return {
 		state,
-		copy: useCallback(async (value) => {
+		copy: useCallback(async (value, onError) => {
 			if (timeout.current) clearTimeout(timeout.current);
 			try {
 				await navigator.clipboard.writeText(value);
 				setState("copied");
 				timeout.current = setTimeout(reset, duration);
 				return true;
-			} catch {
+			} catch (error) {
 				setState("error");
 				timeout.current = setTimeout(reset, duration);
+				callSafely(() => onError?.(error));
 				return false;
 			}
 		}, [duration, reset]),
@@ -31,6 +45,6 @@ function useCopyFeedback(duration = 1900) {
 	};
 }
 //#endregion
-export { useCopyFeedback };
+export { callSafely, useCopyFeedback };
 
 //# sourceMappingURL=use-copy-feedback.js.map

package/dist/lib/use-copy-feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. */\n  const copy = useCallback(\n    async (value: string) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;AAKA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAoBA,OAAO;EAAE;EAAO,MAjBH,YACX,OAAO,UAAkB;GACvB,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,QAAQ;IACN,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}
+{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/**\n * Runs a consumer's callback so that a throw inside it cannot reject the\n * promise our press handler fires and forgets (an unhandled rejection). The\n * error is reported the way an uncaught one would be, so it still shows up.\n */\nexport function callSafely(callback: () => void) {\n  try {\n    callback();\n  } catch (error) {\n    if (typeof globalThis.reportError === \"function\") globalThis.reportError(error);\n    else console.error(error);\n  }\n}\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. `onError` gets whatever the clipboard rejected with. */\n  const copy = useCallback(\n    async (value: string, onError?: (error: unknown) => void) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch (error) {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        callSafely(() => onError?.(error));\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;;;;;AASA,SAAgB,WAAW,UAAsB;CAC/C,IAAI;EACF,SAAS;CACX,SAAS,OAAO;EACd,IAAI,OAAO,WAAW,gBAAgB,YAAY,WAAW,YAAY,KAAK;OACzE,QAAQ,MAAM,KAAK;CAC1B;AACF;;AAGA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAqBA,OAAO;EAAE;EAAO,MAlBH,YACX,OAAO,OAAe,YAAuC;GAC3D,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,SAAS,OAAO;IACd,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,iBAAiB,UAAU,KAAK,CAAC;IACjC,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}

package/dist/line-chart/index.d.ts

@@ -1,2 +1,2 @@
-import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart.js";
-export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries };
+import { LINE_CHART_DRAW_MS, LineChart, LineChartBand, LineChartDatum, LineChartMarker, LineChartProps, LineChartReference, LineChartSeries, LineChartTone, LineChartTooltipContext } from "./line-chart.js";
+export { LINE_CHART_DRAW_MS, LineChart, type LineChartBand, type LineChartDatum, type LineChartMarker, type LineChartProps, type LineChartReference, type LineChartSeries, type LineChartTone, type LineChartTooltipContext };

package/dist/line-chart/line-chart.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 //#region src/line-chart/line-chart.d.ts
 /**
  * LineChart: one or more measures over time, when the shape of the trend
@@ -26,6 +27,19 @@ export interface LineChartSeries {
   dashed?: boolean;
   /** A faint fill under the line. Defaults to true for the first series. */
   area?: boolean;
+  /**
+   * Prints each value above its point, read with `formatValue` (without `unit`).
+   * A missing value (with `missing` `"gap"` or `"connect"`) has no label. For a
+   * few points: labels on a dense line collide.
+   * @default false
+   */
+  pointLabels?: boolean;
+  /**
+   * A label above the series' last point with a value. `true` prints that value
+   * (read with `formatValue`, without `unit`); a string prints the text, such as
+   * "Heading for 1,800", and is read in the chart's summary.
+   */
+  endLabel?: boolean | string;
 }
 export interface LineChartDatum {
   /** Stable identity, such as an ISO date. */
@@ -34,8 +48,91 @@ export interface LineChartDatum {
   label: string;
   /** Short label on the x axis. Leave it out to keep the axis quiet at that point. */
   axisLabel?: string;
-  /** One value per series key. A missing value counts as zero. */
-  values: Record<string, number | undefined>;
+  /**
+   * One value per series key. A missing value (`undefined` or `null`) counts as
+   * zero, unless the chart's `missing` is `"gap"`.
+   */
+  values: Record<string, number | null | undefined>;
+}
+/** The colour role of a reference line or an event marker. `"neutral"` is the quiet default. */
+export type LineChartTone = "neutral" | "accent" | "success" | "warning" | "danger";
+/**
+ * A reference line: a horizontal line at a value (a target, a threshold), or a
+ * vertical line at one datum (today, a launch). Drawn dashed and quiet, behind
+ * the series, with its label at the line's end.
+ */
+export type LineChartReference = {
+  /** Stable identity. */
+  key: string;
+  /** Short text beside the line, such as "Target" or "Today". Also read to screen readers. */
+  label: string;
+  /**
+   * Colours the line and its label, for a line whose colour carries meaning,
+   * such as a "Goal" in warning. Still dashed, still behind the series.
+   * @default "neutral"
+   */
+  tone?: LineChartTone;
+} & ({
+  /**
+   * A value on the value axis: a horizontal line. The scale grows to keep it
+   * in view, even when every value is missing. A value that is not finite
+   * draws nothing. Read with `formatValue` (given the chart's first series)
+   * and `unit`, like the series.
+   */
+  value: number;
+  at?: never;
+} | {
+  /** The `key` of a datum: a vertical line at that point. A key not in `data` draws nothing. */
+  at: string;
+  value?: never;
+});
+/**
+ * An event on the category axis, such as "prompts changed": a short stem up
+ * from the baseline at one datum, with a short visible label above it.
+ */
+export interface LineChartMarker {
+  /** Stable identity. */
+  key: string;
+  /** The `key` of a datum. A key not in `data` draws nothing. */
+  at: string;
+  /** Short visible text, such as "Changed" or "v2". */
+  label: string;
+  /** What happened, read to screen readers in place of `label`, such as "Prompt set changed". */
+  description?: string;
+  /** @default "neutral" */
+  tone?: LineChartTone;
+}
+/**
+ * A shaded band across the plot between two values, such as "Page 1" for
+ * ranks 1 to 10. Drawn behind the gridlines and the series, clipped to the
+ * value axis; it never grows the scale.
+ */
+export interface LineChartBand {
+  /** Stable identity. */
+  key: string;
+  /** One edge of the band, on the value axis. Either order. */
+  from: number;
+  /** The other edge. */
+  to: number;
+  /** Short text inside the band at its top inline-start corner, such as "Page 1". Hidden when the band is too thin to hold it. */
+  label: string;
+  /** What the band means, read in the chart's summary in place of `label` and its range, such as "Page 1: ranks 1 to 10". */
+  description?: string;
+  /** @default "neutral" */
+  tone?: LineChartTone;
+}
+/** What `renderTooltip` is given for the point under the crosshair. */
+export interface LineChartTooltipContext {
+  datum: LineChartDatum;
+  index: number;
+  /** The series on show, in order. */
+  series: LineChartSeries[];
+  /** Each shown series' value at this point; `null` when it is missing (with `missing` `"gap"` or `"connect"`). */
+  values: Record<string, number | null>;
+  /** Reads a value the way the default tooltip does: `formatValue`, `unit`, and `missingLabel` for `null`. */
+  format: (value: number | null, series: LineChartSeries) => string;
+  /** The default tooltip content (the date and one row per series), to keep and add to. */
+  readout: ReactNode;
 }
 export interface LineChartProps {
   data: LineChartDatum[];
@@ -66,6 +163,51 @@ export interface LineChartProps {
   categoryLabel?: string;
   /** Smooth monotone curves that never swing past the data, or straight segments. @default "smooth" */
   curve?: "smooth" | "linear";
+  /**
+   * How a missing value (`undefined`, `null` or not a finite number) is drawn.
+   * `"zero"` counts it as zero, as before. `"gap"` breaks the line (and its
+   * area) there, leaves it out of the scale, hides the crosshair dot on it and
+   * reads it as `missingLabel` in the tooltip and the data table. A point with
+   * missing neighbours on both sides is drawn as a dot. `"connect"` is the same,
+   * except the line runs on across missing values between two present ones,
+   * through the straight line between them (a projection known at a few
+   * points); before the first value and after the last, nothing is drawn.
+   * @default "zero"
+   */
+  missing?: "zero" | "gap" | "connect";
+  /** Read in place of a missing value when `missing` is `"gap"` or `"connect"`. @default "No data" */
+  missingLabel?: string;
+  /** Reference lines: targets at a value, or markers such as "today" at a datum. */
+  references?: LineChartReference[];
+  /** Events on the category axis, each with a short visible label. Read in the summary and when scrubbed to. */
+  markers?: LineChartMarker[];
+  /**
+   * Flips the value axis: the lowest value at the top, the highest on the
+   * baseline. For ranks, where 1 is best. Pair it with `valueDomain`, such as
+   * `{ min: 1 }`, so the axis starts at rank 1 rather than 0.
+   * @default false
+   */
+  reversed?: boolean;
+  /**
+   * Pins either end of the value axis, such as `{ min: 1, max: 100 }` for ranks
+   * #1 to #100. An end left out fits the data as before (from zero at the low
+   * end). The pinned values are always ticks. A value past a pinned end is drawn
+   * past the edge, so pin a range that covers the data.
+   */
+  valueDomain?: {
+    min?: number;
+    max?: number;
+  };
+  /** Shaded bands between two values, such as rank pages. Read in the summary. */
+  bands?: LineChartBand[];
+  /**
+   * Replaces the tooltip's content for the point under the crosshair. It is
+   * given the point and the default `readout`, to keep and add to (gained and
+   * lost counts under a total). Return `null` (or `undefined`, `false`, `0` or `""`) to show no tooltip at that point.
+   * The tooltip is visual only: the slider's value text, the summary and the
+   * data table still read every value.
+   */
+  renderTooltip?: (context: LineChartTooltipContext) => ReactNode;
   /** Extra classes for the root. Merged last. */
   className?: string;
 }