@seekalfred/primitives 0.7.3 → 0.8.0

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/selection-control.js

@@ -51,7 +51,38 @@ const selectionRingVariants = cva([
 	"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"group-data-[focus-visible]:outline-(--color-ring)"
 ]);
+/**
+* A selectable card: one choice (Radio) or one option (Checkbox) drawn as a
+* bordered surface the whole of which is the hit target.
+*
+* Selection is shown twice, by the border AND by the mark inside the card (the
+* radio dot, the checkbox tick), so it never rests on colour alone (WCAG 1.4.1).
+* The border reuses StatCard's selected filter pair (`border-primary-strong`,
+* hover darkens an unselected edge).
+*
+* FOCUS is the approved style: the card's own 1px border turns dark, with no
+* ring. React Aria puts the state on the label, which IS the card, so its own
+* `data-[focus-visible]:` is the state (no `group-` hop). The doubled selected
+* rule makes a focused, selected card show it too. Forced colours override a
+* border colour, so only there does the outline come back.
+*/
+const selectionCardVariants = cva([
+	"group flex items-start gap-3 p-4",
+	"rounded-panel border-(length:--border-width) border-border bg-surface",
+	"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start",
+	"cursor-pointer select-none",
+	"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:not-data-[selected]:border-muted-foreground",
+	"data-[selected]:border-primary-strong",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"outline-none",
+	"data-[focus-visible]:border-foreground",
+	"data-[focus-visible]:data-[selected]:border-foreground",
+	"forced-colors:data-[focus-visible]:outline-solid",
+	"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)"
+]);
 //#endregion
-export { selectionLabelVariants, selectionRingVariants };
+export { selectionCardVariants, selectionLabelVariants, selectionRingVariants };
 
 //# sourceMappingURL=selection-control.js.map

package/dist/lib/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/lib/selection-control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The parts every selection control shares: Checkbox, Radio and Switch.\n *\n * Extracted at the Rule of Three, and for the reason this migration keeps\n * running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling\n * one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,\n * and both pairs had already drifted in ways nobody decided. Three controls\n * with the same label geometry and the same focus ring is where that starts.\n *\n * React Aria renders all three as a `<label>` wrapping a visually-hidden\n * real input, and puts the state on the LABEL -- so the visible box or track\n * has to reach its own state through `group-*`.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\n\n/**\n * The label that wraps the control and its text.\n *\n * `group` is load-bearing: React Aria puts `data-selected`,\n * `data-focus-visible` and the rest on this element, and CSS cannot look\n * upward from the box to them.\n */\nexport const selectionLabelVariants = cva([\n  \"group inline-flex items-center gap-2\",\n\n  // WCAG 2.2 target-size (2.5.8) wants 24x24 CSS pixels. The controls are\n  // 16-20px, which is conventional, so the LABEL carries the target: with\n  // text it is large anyway, and without -- a table row selector -- this\n  // minimum is the only thing keeping it hittable.\n  //\n  // Measured, not assumed: axe's target-size rule did NOT fire on a 16px\n  // control during the Checkbox sabotage run. Only the explicit assertion\n  // caught it.\n  \"min-h-6 min-w-6 justify-center\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // An unstyled <label> inherits the host page's serif; the Accordion\n  // shipped its panel exactly that way.\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground\",\n\n  \"cursor-pointer select-none\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The focus ring, drawn on the VISIBLE control rather than the input.\n *\n * React Aria's input is visually hidden, and an outline on a clipped 1px\n * element is invisible.\n *\n * `outline-solid` is load-bearing, not decoration. `outline-none` sets both\n * `outline-style: none` and `--tw-outline-style: none`, and the width\n * utility resolves its style from that same variable -- so a focus rule can\n * apply a width and a colour while faithfully re-applying none, and paint\n * nothing at all. Button shipped exactly that: keyboard-focusable with no\n * visible ring, and every automated gate stayed green because axe has no\n * focus-indicator rule.\n */\nexport const selectionRingVariants = cva([\n  \"outline-none\",\n  \"group-data-[focus-visible]:outline-solid\",\n  \"group-data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[focus-visible]:outline-(--color-ring)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,IAAI;CACxC;CAUA;CAKA;CAEA;CACA;AACF,CAAC;;;;;;;;;;;;;;;AAgBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/lib/selection-control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The parts every selection control shares: Checkbox, Radio and Switch.\n *\n * Extracted at the Rule of Three, and for the reason this migration keeps\n * running into -- the legacy shipped `input.tsx` and `textarea.tsx` styling\n * one surface twice, and `dialog.tsx` and `alert-dialog.tsx` doing the same,\n * and both pairs had already drifted in ways nobody decided. Three controls\n * with the same label geometry and the same focus ring is where that starts.\n *\n * React Aria renders all three as a `<label>` wrapping a visually-hidden\n * real input, and puts the state on the LABEL -- so the visible box or track\n * has to reach its own state through `group-*`.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\n\n/**\n * The label that wraps the control and its text.\n *\n * `group` is load-bearing: React Aria puts `data-selected`,\n * `data-focus-visible` and the rest on this element, and CSS cannot look\n * upward from the box to them.\n */\nexport const selectionLabelVariants = cva([\n  \"group inline-flex items-center gap-2\",\n\n  // WCAG 2.2 target-size (2.5.8) wants 24x24 CSS pixels. The controls are\n  // 16-20px, which is conventional, so the LABEL carries the target: with\n  // text it is large anyway, and without -- a table row selector -- this\n  // minimum is the only thing keeping it hittable.\n  //\n  // Measured, not assumed: axe's target-size rule did NOT fire on a 16px\n  // control during the Checkbox sabotage run. Only the explicit assertion\n  // caught it.\n  \"min-h-6 min-w-6 justify-center\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // An unstyled <label> inherits the host page's serif; the Accordion\n  // shipped its panel exactly that way.\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground\",\n\n  \"cursor-pointer select-none\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * The focus ring, drawn on the VISIBLE control rather than the input.\n *\n * React Aria's input is visually hidden, and an outline on a clipped 1px\n * element is invisible.\n *\n * `outline-solid` is load-bearing, not decoration. `outline-none` sets both\n * `outline-style: none` and `--tw-outline-style: none`, and the width\n * utility resolves its style from that same variable -- so a focus rule can\n * apply a width and a colour while faithfully re-applying none, and paint\n * nothing at all. Button shipped exactly that: keyboard-focusable with no\n * visible ring, and every automated gate stayed green because axe has no\n * focus-indicator rule.\n */\nexport const selectionRingVariants = cva([\n  \"outline-none\",\n  \"group-data-[focus-visible]:outline-solid\",\n  \"group-data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A selectable card: one choice (Radio) or one option (Checkbox) drawn as a\n * bordered surface the whole of which is the hit target.\n *\n * Selection is shown twice, by the border AND by the mark inside the card (the\n * radio dot, the checkbox tick), so it never rests on colour alone (WCAG 1.4.1).\n * The border reuses StatCard's selected filter pair (`border-primary-strong`,\n * hover darkens an unselected edge).\n *\n * FOCUS is the approved style: the card's own 1px border turns dark, with no\n * ring. React Aria puts the state on the label, which IS the card, so its own\n * `data-[focus-visible]:` is the state (no `group-` hop). The doubled selected\n * rule makes a focused, selected card show it too. Forced colours override a\n * border colour, so only there does the outline come back.\n */\nexport const selectionCardVariants = cva([\n  \"group flex items-start gap-3 p-4\",\n  \"rounded-panel border-(length:--border-width) border-border bg-surface\",\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start\",\n  \"cursor-pointer select-none\",\n  \"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n  \"data-[hovered]:not-data-[selected]:border-muted-foreground\",\n  \"data-[selected]:border-primary-strong\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"outline-none\",\n  \"data-[focus-visible]:border-foreground\",\n  \"data-[focus-visible]:data-[selected]:border-foreground\",\n  \"forced-colors:data-[focus-visible]:outline-solid\",\n  \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,IAAI;CACxC;CAUA;CAKA;CAEA;CACA;AACF,CAAC;;;;;;;;;;;;;;;AAgBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;;;;;;;;;AAiBD,MAAa,wBAAwB,IAAI;CACvC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}

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

@@ -1,2 +1,2 @@
-import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartReference, LineChartSeries } from "./line-chart.js";
-export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartReference, 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. */
@@ -40,6 +54,8 @@ export interface LineChartDatum {
    */
   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
@@ -50,6 +66,12 @@ export type LineChartReference = {
   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
@@ -64,6 +86,54 @@ export type LineChartReference = {
   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[];
   series: LineChartSeries[];
@@ -98,14 +168,47 @@ export interface LineChartProps {
    * `"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.
+   * missing neighbours on both sides is drawn as a dot, and so is the only point
+   * of a chart with one datum (at the centre, in every mode). `"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";
-  /** Read in place of a missing value when `missing` is `"gap"`. @default "No data" */
+  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;
 }