@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/lib/swap-text.js

@@ -48,7 +48,7 @@ function Leaving({ id, empty, rect, motion, onDone, children }) {
 * reader reads the caller's own copy. The wrapper is `position: relative`, which
 * the popped-out content is placed against.
 */
-function SwapText({ swapKey, dir = 1, motion = "rise", className, children }) {
+function SwapText({ swapKey, dir = 1, motion = "rise", delay, className, children }) {
 	const ref = useRef(null);
 	const { leaving, changed, remove } = useLeavingItems(swapKey, {
 		key: swapKey,
@@ -66,6 +66,8 @@ function SwapText({ swapKey, dir = 1, motion = "rise", className, children }) {
 			children: item.value.node
 		}, item.id)), swapKey ? /* @__PURE__ */ jsx("span", {
 			ref,
+			"data-arriving": changed ? "" : void 0,
+			style: changed && delay ? { animationDelay: `${delay}ms` } : void 0,
 			className: changed ? ARRIVING[motion] : "inline-block",
 			children
 		}, swapKey) : null]

package/dist/lib/swap-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"swap-text.js","names":[],"sources":["../../src/lib/swap-text.tsx"],"sourcesContent":["import { useCallback, useRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from \"./motion.js\";\nimport type { Rect } from \"./motion.js\";\n\n/**\n * How replaced content moves. `rise`: up or down a little (a field message). `roll`:\n * a little further, and a 120ms fade under reduced motion (the value a picker shows).\n * `slide`: sideways (a calendar's month title). `word`: a word of a rolling label.\n * `glyph`: an icon, which grows in from small and blurred. `dot`: a presence dot.\n */\nexport type SwapMotion = \"rise\" | \"roll\" | \"slide\" | \"word\" | \"glyph\" | \"dot\";\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst LEAVING: Record<SwapMotion, string> = {\n  rise: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  roll: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  slide: \"absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out\",\n  word: \"absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out\",\n  glyph: \"absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out\",\n  dot: \"absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out\",\n};\n\nconst ARRIVING: Record<SwapMotion, string> = {\n  rise: \"inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in\",\n  roll: \"inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in\",\n  slide: \"inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in\",\n  word: \"inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in\",\n  glyph: \"inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in\",\n  dot: \"inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in\",\n};\n\n/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */\nfunction Leaving({\n  id,\n  empty,\n  rect,\n  motion,\n  onDone,\n  children,\n}: {\n  id: number;\n  empty: boolean;\n  rect: Rect;\n  motion: SwapMotion;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  // The empty value of \"nothing shown\" has nothing to lift away.\n  useIsomorphicLayoutEffect(() => {\n    if (empty) remove();\n  }, [empty, remove]);\n  if (empty) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-leaving=\"\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={rect}\n      className={LEAVING[motion]}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Content that is replaced as a whole when `swapKey` changes: the new content\n * rises in from `dir` (1 from below, -1 from above; one variable shared with the\n * leaving content so both follow the newest direction) while the old content,\n * kept where it stood, lifts away the other way. An empty `swapKey` shows nothing\n * (and the content before it leaves). Nothing animates on first mount, and\n * reduced motion fades instead of moving. This is for the eye only: a screen\n * reader reads the caller's own copy. The wrapper is `position: relative`, which\n * the popped-out content is placed against.\n */\nexport function SwapText({\n  swapKey,\n  dir = 1,\n  motion = \"rise\",\n  className,\n  children,\n}: {\n  swapKey: string;\n  dir?: number;\n  /** How it moves. `dir` is 1 from below or forward, -1 from above or back. @default \"rise\" */\n  motion?: SwapMotion;\n  className?: string;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems(\n    swapKey,\n    { key: swapKey, node: children },\n    () => ref.current,\n  );\n  return (\n    <span style={{ \"--dir\": dir } as CSSProperties} className={cn(\"relative\", className)}>\n      {leaving.map((item) => (\n        <Leaving\n          key={item.id}\n          id={item.id}\n          empty={item.value.key === \"\"}\n          rect={item.rect}\n          motion={motion}\n          onDone={remove}\n        >\n          {item.value.node}\n        </Leaving>\n      ))}\n      {swapKey ? (\n        <span\n          key={swapKey}\n          ref={ref}\n          className={changed ? ARRIVING[motion] : \"inline-block\"}\n        >\n          {children}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAeA,MAAM,UAAsC;CAC1C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,WAAuC;CAC3C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;;AAGA,SAAS,QAAQ,EACf,IACA,OACA,MACA,QACA,QACA,YAQC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAE5B,gCAAgC;EAC9B,IAAI,OAAO,OAAO;CACpB,GAAG,CAAC,OAAO,MAAM,CAAC;CAClB,IAAI,OAAO,OAAO;CAClB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,gBAAa;EACb,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO;EACP,WAAW,QAAQ;EAElB;CACG,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,SAAS,EACvB,SACA,MAAM,GACN,SAAS,QACT,WACA,YAQC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,SAAS,SAAS,WAAW,gBACnC,SACA;EAAE,KAAK;EAAS,MAAM;CAAS,SACzB,IAAI,OACZ;CACA,OACE,qBAAC,QAAD;EAAM,OAAO,EAAE,SAAS,IAAI;EAAoB,WAAW,GAAG,YAAY,SAAS;EAAnF,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,SAAD;GAEE,IAAI,KAAK;GACT,OAAO,KAAK,MAAM,QAAQ;GAC1B,MAAM,KAAK;GACH;GACR,QAAQ;GAEP,UAAA,KAAK,MAAM;EACL,GARF,KAAK,EAQH,CACV,GACA,UACC,oBAAC,QAAD;GAEO;GACL,WAAW,UAAU,SAAS,UAAU;GAEvC;EACG,GALC,OAKD,IACJ,IACA;;AAEV"}
+{"version":3,"file":"swap-text.js","names":[],"sources":["../../src/lib/swap-text.tsx"],"sourcesContent":["import { useCallback, useRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from \"./motion.js\";\nimport type { Rect } from \"./motion.js\";\n\n/**\n * How replaced content moves. `rise`: up or down a little (a field message). `roll`:\n * a little further, and a 120ms fade under reduced motion (the value a picker shows).\n * `slide`: sideways (a calendar's month title). `word`: a word of a rolling label.\n * `glyph`: an icon, which grows in from small and blurred. `dot`: a presence dot.\n */\nexport type SwapMotion = \"rise\" | \"roll\" | \"slide\" | \"word\" | \"glyph\" | \"dot\";\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst LEAVING: Record<SwapMotion, string> = {\n  rise: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  roll: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  slide: \"absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out\",\n  word: \"absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out\",\n  glyph: \"absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out\",\n  dot: \"absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out\",\n};\n\nconst ARRIVING: Record<SwapMotion, string> = {\n  rise: \"inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in\",\n  roll: \"inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in\",\n  slide: \"inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in\",\n  word: \"inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in\",\n  glyph: \"inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in\",\n  dot: \"inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in\",\n};\n\n/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */\nfunction Leaving({\n  id,\n  empty,\n  rect,\n  motion,\n  onDone,\n  children,\n}: {\n  id: number;\n  empty: boolean;\n  rect: Rect;\n  motion: SwapMotion;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  // The empty value of \"nothing shown\" has nothing to lift away.\n  useIsomorphicLayoutEffect(() => {\n    if (empty) remove();\n  }, [empty, remove]);\n  if (empty) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-leaving=\"\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={rect}\n      className={LEAVING[motion]}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Content that is replaced as a whole when `swapKey` changes: the new content\n * rises in from `dir` (1 from below, -1 from above; one variable shared with the\n * leaving content so both follow the newest direction) while the old content,\n * kept where it stood, lifts away the other way. An empty `swapKey` shows nothing\n * (and the content before it leaves). Nothing animates on first mount, and\n * reduced motion fades instead of moving. This is for the eye only: a screen\n * reader reads the caller's own copy. The wrapper is `position: relative`, which\n * the popped-out content is placed against.\n */\nexport function SwapText({\n  swapKey,\n  dir = 1,\n  motion = \"rise\",\n  delay,\n  className,\n  children,\n}: {\n  swapKey: string;\n  dir?: number;\n  /** How it moves. `dir` is 1 from below or forward, -1 from above or back. @default \"rise\" */\n  motion?: SwapMotion;\n  /** Milliseconds the arriving content waits before it comes in (a stagger). The leaving content never waits. */\n  delay?: number;\n  className?: string;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems(\n    swapKey,\n    { key: swapKey, node: children },\n    () => ref.current,\n  );\n  return (\n    <span style={{ \"--dir\": dir } as CSSProperties} className={cn(\"relative\", className)}>\n      {leaving.map((item) => (\n        <Leaving\n          key={item.id}\n          id={item.id}\n          empty={item.value.key === \"\"}\n          rect={item.rect}\n          motion={motion}\n          onDone={remove}\n        >\n          {item.value.node}\n        </Leaving>\n      ))}\n      {swapKey ? (\n        <span\n          key={swapKey}\n          ref={ref}\n          data-arriving={changed ? \"\" : undefined}\n          style={changed && delay ? { animationDelay: `${delay}ms` } : undefined}\n          className={changed ? ARRIVING[motion] : \"inline-block\"}\n        >\n          {children}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAeA,MAAM,UAAsC;CAC1C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,WAAuC;CAC3C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;;AAGA,SAAS,QAAQ,EACf,IACA,OACA,MACA,QACA,QACA,YAQC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAE5B,gCAAgC;EAC9B,IAAI,OAAO,OAAO;CACpB,GAAG,CAAC,OAAO,MAAM,CAAC;CAClB,IAAI,OAAO,OAAO;CAClB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,gBAAa;EACb,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO;EACP,WAAW,QAAQ;EAElB;CACG,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,SAAS,EACvB,SACA,MAAM,GACN,SAAS,QACT,OACA,WACA,YAUC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,SAAS,SAAS,WAAW,gBACnC,SACA;EAAE,KAAK;EAAS,MAAM;CAAS,SACzB,IAAI,OACZ;CACA,OACE,qBAAC,QAAD;EAAM,OAAO,EAAE,SAAS,IAAI;EAAoB,WAAW,GAAG,YAAY,SAAS;EAAnF,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,SAAD;GAEE,IAAI,KAAK;GACT,OAAO,KAAK,MAAM,QAAQ;GAC1B,MAAM,KAAK;GACH;GACR,QAAQ;GAEP,UAAA,KAAK,MAAM;EACL,GARF,KAAK,EAQH,CACV,GACA,UACC,oBAAC,QAAD;GAEO;GACL,iBAAe,UAAU,KAAK,KAAA;GAC9B,OAAO,WAAW,QAAQ,EAAE,gBAAgB,GAAG,MAAM,IAAI,IAAI,KAAA;GAC7D,WAAW,UAAU,SAAS,UAAU;GAEvC;EACG,GAPC,OAOD,IACJ,IACA;;AAEV"}

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

@@ -0,0 +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 };

package/dist/line-chart/index.js

@@ -0,0 +1,2 @@
+import { LINE_CHART_DRAW_MS, LineChart } from "./line-chart.js";
+export { LINE_CHART_DRAW_MS, LineChart };

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

@@ -0,0 +1,76 @@
+//#region src/line-chart/line-chart.d.ts
+/**
+ * LineChart: one or more measures over time, when the shape of the trend
+ * matters more than any single value.
+ *
+ * The lines draw left to right the first time the chart is seen. New data
+ * morphs every line from the shape on screen, and the value axis slides to its
+ * new range while gridlines fade in and out. Hiding a series flattens it into
+ * the baseline as it fades and the rest rescale. Hover, drag or the arrow keys
+ * scrub: a crosshair glides between points with a dot on each line and a
+ * tooltip that follows on its own spring and flips before it leaves the plot.
+ * `loading` keeps the current lines on screen, dimmed and breathing.
+ *
+ * Plain SVG and CSS; one small spring tween drives the shapes, the scale and
+ * the crosshair. A visually hidden table carries every value for assistive
+ * technology, and the plot itself is a slider.
+ */
+export interface LineChartSeries {
+  /** Stable identity. A series keeps its line across data changes, so switching ranges morphs it. */
+  key: string;
+  /** Name in the legend, the tooltip and the data table. */
+  label: string;
+  /** Any CSS colour. Defaults to chart-1 for the first series, then quieter neutral steps. */
+  color?: string;
+  /** A dashed stroke, for a previous period or a target. */
+  dashed?: boolean;
+  /** A faint fill under the line. Defaults to true for the first series. */
+  area?: boolean;
+}
+export interface LineChartDatum {
+  /** Stable identity, such as an ISO date. */
+  key: string;
+  /** Full label for the tooltip and screen readers, such as "Tue, Sep 15". */
+  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>;
+}
+export interface LineChartProps {
+  data: LineChartDatum[];
+  series: LineChartSeries[];
+  /** What is measured, such as "Signups". Names the chart for assistive technology. */
+  label: string;
+  /** Unit after each value in the tooltip, such as "ms". */
+  unit?: string;
+  /** Plot height in pixels. The width follows the container. @default 220 */
+  height?: number;
+  /** Formats values in the tooltip and data table. */
+  formatValue?: (value: number, series: LineChartSeries) => string;
+  /** Formats the value axis. Defaults to a compact number, such as 1.2K. */
+  formatTick?: (value: number) => string;
+  /** Controlled hidden series keys. */
+  hiddenSeries?: string[];
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Called as the crosshair moves, and with null when it leaves. */
+  onActiveChange?: (index: number | null, datum: LineChartDatum | null) => void;
+  /** Keeps the current lines on screen, dimmed, while the next range loads. */
+  loading?: boolean;
+  /** Shown when there are no points. @default "No data for this range" */
+  emptyLabel?: string;
+  /** Series toggles above the plot. Shown by default when there is more than one series. */
+  legend?: boolean;
+  /** Header of the first column in the data table read by screen readers. @default "Date" */
+  categoryLabel?: string;
+  /** Smooth monotone curves that never swing past the data, or straight segments. @default "smooth" */
+  curve?: "smooth" | "linear";
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+/** The first draw: 480ms x 1.75, slow at both ends. */
+export declare const LINE_CHART_DRAW_MS = 840;
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=line-chart.d.ts.map