@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/Sortable/containerAwareCollision.js

@@ -0,0 +1,105 @@
+import { closestCorners, pointerWithin } from "@dnd-kit/core";
+// src/components/Sortable/containerAwareCollision.ts
+/**
+* A CONTAINER droppable (a `<Kanban.Column>` / `<SortableGroup.Group>`) as
+* opposed to an ITEM droppable (a card). Containers register via plain
+* `useDroppable`, so they carry no `data.sortable`; items register via
+* `useSortable`, which adds it.
+*/
+var isContainer = (droppable) => droppable.data.current?.sortable == null;
+/**
+* `closestCorners`, but the pointer's containing container wins first.
+*
+* Why: with plain `closestCorners`, every card registers as a droppable
+* alongside the column containers, and ranking is by corner distance of the
+* DRAGGED RECT — not by where the pointer is. Next to a tall column, an
+* empty/sparse sibling column stretches (flex align-items: stretch) far
+* beyond its content, so its corners sit hundreds of pixels from the dragged
+* card while a same-Y card in the SOURCE column sits one column-gap away.
+* The source card out-ranks the geometrically-containing target column, the
+* cross-column transit is never detected, and the drop silently resolves as
+* a same-column no-op (#367).
+*
+* Strategy:
+* 1. No pointer (keyboard drags pass `pointerCoordinates: null`) → plain
+*    `closestCorners` over everything — keyboard behavior unchanged.
+* 2. Find the container droppable the pointer is inside (`pointerWithin`
+*    over containers only). Containers are droppables registered via plain
+*    `useDroppable` — they carry no `data.sortable`; card/item droppables
+*    registered via `useSortable` do.
+* 3. Pointer inside a container → rank with `closestCorners` restricted to
+*    that container plus the droppables whose center lies inside it (its own
+*    cards). An empty column is its only candidate, so it wins; over a card,
+*    the card wins; below the last card, the nearest of card/column wins —
+*    both resolve to "append" downstream.
+* 4. Pointer in no container (board gap / outside) → plain `closestCorners`.
+*/
+var containerAwareClosestCorners = (args) => {
+	const { droppableContainers, droppableRects, pointerCoordinates } = args;
+	if (!pointerCoordinates) return closestCorners(args);
+	const containers = droppableContainers.filter(isContainer);
+	const containerId = pointerWithin({
+		...args,
+		droppableContainers: containers
+	})[0]?.id;
+	const containerRect = containerId != null ? droppableRects.get(containerId) : void 0;
+	if (containerId == null || !containerRect) return closestCorners(args);
+	const candidates = droppableContainers.filter((d) => {
+		if (d.id === containerId) return true;
+		const rect = droppableRects.get(d.id);
+		if (!rect) return false;
+		const cx = rect.left + rect.width / 2;
+		const cy = rect.top + rect.height / 2;
+		return cx >= containerRect.left && cx <= containerRect.right && cy >= containerRect.top && cy <= containerRect.bottom;
+	});
+	return closestCorners({
+		...args,
+		droppableContainers: candidates
+	});
+};
+/**
+* True when the pointer sits outside the collective bounding box of every
+* CONTAINER droppable — i.e. the drag is over unrelated page content rather
+* than over the board. Callers use it to reject a drop that collision
+* detection nonetheless resolved to a container (#387).
+*
+* It has to be asked separately because no collision detector can answer it:
+* `closestCorners` — which `containerAwareClosestCorners` falls back to
+* whenever the pointer is in no container — pushes a collision for EVERY
+* measured droppable and uses distance only to rank them, never to reject. So
+* `over` is never null, and "released nowhere" is indistinguishable from
+* "released on the nearest column" from the drop handler's side.
+*
+* Collective bounding box, not each container's own rect: a board with a `gap`
+* between columns has pointer positions inside the board but inside no column.
+* Per-rect testing would cancel those, and a release in a 12px gutter means the
+* column beside it — which is exactly what `closestCorners` returns. Only
+* leaving the band of columns entirely is a cancel. Containers only (never the
+* cards') so a pointer in a sparse column's empty space stays a valid drop,
+* which is the whole point of #367.
+*
+* Returns false whenever it cannot tell — no pointer (keyboard drags pass
+* `pointerCoordinates: null`) or nothing measured (jsdom lays nothing out) —
+* so an unmeasurable board keeps committing to the nearest container instead of
+* cancelling every drop.
+*/
+function isPointerOutsideContainers({ droppableContainers, droppableRects, pointerCoordinates }) {
+	if (!pointerCoordinates) return false;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const droppable of droppableContainers) {
+		if (!isContainer(droppable)) continue;
+		const rect = droppableRects.get(droppable.id);
+		if (!rect) continue;
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+	}
+	if (left === Infinity) return false;
+	const { x, y } = pointerCoordinates;
+	return x < left || x > right || y < top || y > bottom;
+}
+export { containerAwareClosestCorners, isPointerOutsideContainers };

package/dist/components/Sortable/index.d.ts

@@ -0,0 +1,2 @@
+export { Sortable, SortableHandle, SortableItem, SortableItemContext, type SortableProps, type SortableItemProps, type SortableHandleProps, type SortableReorderEvent, type SortableItemContextValue, type SortableArrangement, } from './Sortable.js';
+export type { CollapseBreakpoint } from '../_internal/collapse.js';

package/dist/components/SortableGroup/SortableGroup.css

@@ -0,0 +1,31 @@
+:root {
+  --sortable-list-gap: var(--space-2);
+  --sortable-grid-gap: var(--sortable-list-gap);
+  --sortable-item-shadow-dragging: var(--shadow-lg);
+  --sortable-handle-bg: transparent;
+  --sortable-handle-radius: var(--radius-sm);
+  --sortable-handle-fg: var(--color-fg-subtle);
+  --sortable-handle-padding: var(--space-1);
+  --sortable-handle-fg-hover: var(--color-fg);
+  --sortable-handle-bg-hover: var(--color-bg-subtle);
+  --sortable-handle-border-color-focus: var(--color-accent);
+  --sortable-handle-ring-focus: var(--ring-accent);
+}
+
+.SortableGroup__list__oMBZp {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sortable-list-gap);
+}
+
+.SortableGroup__item__LZztl {
+  position: relative;
+}
+
+.SortableGroup__overlayItem___Pftw {
+  box-shadow: var(--sortable-item-shadow-dragging);
+  cursor: grabbing;
+}

package/dist/components/SortableGroup/SortableGroup.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SortableMoveEvent } from './moveSortableItem.js';
+type Id = string | number;
+export interface SortableGroupProps {
+    /**
+     * Fires on every cross-container handoff (during the drag) AND on the final
+     * drop. Apply it to your controlled per-container state — see `moveSortableItem`.
+     */
+    onMove?: (event: SortableMoveEvent) => void;
+    /** The `<SortableGroup.Container>` lists. */
+    children: ReactNode;
+}
+export interface SortableGroupContainerProps extends Omit<HTMLAttributes<HTMLOListElement>, 'id'> {
+    /** Stable container id (the `container` reported in `SortableMoveEvent`). */
+    id: Id;
+    /** Ordered item ids in THIS container — the controlled source of truth. */
+    items: Id[];
+    /** `<Sortable.Item>`s for the ids in `items`. */
+    children: ReactNode;
+}
+export declare const SortableGroup: {
+    ({ onMove, children }: SortableGroupProps): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Container: import("react").ForwardRefExoticComponent<SortableGroupContainerProps & import("react").RefAttributes<HTMLOListElement>>;
+};
+export {};

package/dist/components/SortableGroup/SortableGroup.js

@@ -0,0 +1,227 @@
+'use client';
+import { SortableItem, SortableItemContext } from "../Sortable/Sortable.js";
+import { containerAwareClosestCorners } from "../Sortable/containerAwareCollision.js";
+import { containerName, sortableTarget, useDragAccessibility } from "../_internal/dragAnnouncements.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import SortableGroup_module_default from "./SortableGroup.module.js";
+import { Children, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+// src/components/SortableGroup/SortableGroup.tsx
+var GroupContext = createContext(null);
+var OVERLAY_ITEM_CONTEXT = {
+	listeners: void 0,
+	attributes: {},
+	setActivatorNodeRef: () => {}
+};
+/** Build an id → content map from a container's `<Sortable.Item>` children. */
+function itemContentMap(children) {
+	const map = /* @__PURE__ */ new Map();
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type === SortableItem) {
+			const props = child.props;
+			map.set(props.id, props.children);
+		}
+	});
+	return map;
+}
+/**
+* Multi-container drag-to-sort: drag items within a list and between lists.
+* @see docs/components/SortableGroup.md
+*/
+var SortableGroupRoot = function SortableGroup({ onMove, children }) {
+	const t = useTranslation();
+	const [activeId, setActiveId] = useState(null);
+	const registryRef = useRef(/* @__PURE__ */ new Map());
+	const [overlayVersion, setOverlayVersion] = useState(0);
+	const register = useCallback((containerId, rec) => {
+		registryRef.current.set(containerId, rec);
+		setOverlayVersion((v) => v + 1);
+	}, []);
+	const unregister = useCallback((containerId) => {
+		registryRef.current.delete(containerId);
+		setOverlayVersion((v) => v + 1);
+	}, []);
+	const ctx = useMemo(() => ({
+		register,
+		unregister
+	}), [register, unregister]);
+	const containerOf = useCallback((id) => {
+		if (id == null) return void 0;
+		for (const [cid, rec] of registryRef.current) if (rec.items.includes(id)) return cid;
+	}, []);
+	const resolveContainer = useCallback((id) => containerOf(id) ?? (registryRef.current.has(id) ? id : void 0), [containerOf]);
+	const indexIn = useCallback((containerId, id) => {
+		if (containerId == null) return -1;
+		return registryRef.current.get(containerId)?.items.indexOf(id) ?? -1;
+	}, []);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragStart = (e) => setActiveId(e.active.id);
+	const handleDragOver = (e) => {
+		const { active, over } = e;
+		if (!over) return;
+		const id = active.id;
+		const overId = over.id;
+		const fromC = containerOf(id);
+		const toC = resolveContainer(overId);
+		if (!fromC || !toC || fromC === toC) return;
+		const overItems = registryRef.current.get(toC)?.items ?? [];
+		const overIndex = overItems.indexOf(overId);
+		let toIndex;
+		if (overIndex >= 0) {
+			const activeRect = active.rect.current.translated;
+			const overRect = over.rect;
+			toIndex = overIndex + ((activeRect != null && overRect != null ? activeRect.top + activeRect.height / 2 > overRect.top + overRect.height / 2 : false) ? 1 : 0);
+		} else toIndex = overItems.length;
+		onMove?.({
+			id,
+			from: {
+				container: fromC,
+				index: indexIn(fromC, id)
+			},
+			to: {
+				container: toC,
+				index: toIndex
+			}
+		});
+	};
+	const handleDragEnd = (e) => {
+		const { active, over } = e;
+		setActiveId(null);
+		if (!over) return;
+		const id = active.id;
+		const overId = over.id;
+		if (id === overId) return;
+		const fromC = containerOf(id);
+		const toC = resolveContainer(overId);
+		if (!fromC || !toC || fromC !== toC) return;
+		const from = indexIn(fromC, id);
+		const to = indexIn(toC, overId);
+		if (from < 0 || to < 0 || from === to) return;
+		onMove?.({
+			id,
+			from: {
+				container: fromC,
+				index: from
+			},
+			to: {
+				container: toC,
+				index: to
+			}
+		});
+	};
+	const handleDragCancel = () => setActiveId(null);
+	const describeDrag = (entry, activeId) => {
+		if (!entry) return null;
+		const reg = registryRef.current;
+		const id = entry.id;
+		const cid = reg.has(id) ? id : containerOf(id);
+		const rec = cid == null ? void 0 : reg.get(cid);
+		if (cid == null || !rec) return null;
+		const container = rec.label || t("drag.unnamedContainer", {
+			index: [...reg.keys()].indexOf(cid) + 1,
+			total: reg.size
+		});
+		const base = sortableTarget(entry);
+		if (!reg.has(id)) return base && {
+			...base,
+			container
+		};
+		const seated = rec.items.indexOf(activeId);
+		return seated >= 0 ? {
+			index: seated + 1,
+			total: rec.items.length,
+			container
+		} : {
+			index: rec.items.length + 1,
+			total: rec.items.length + 1,
+			container
+		};
+	};
+	const accessibility = useDragAccessibility(describeDrag);
+	const overlayContent = useMemo(() => {
+		if (activeId == null) return null;
+		const cid = containerOf(activeId);
+		return cid == null ? null : registryRef.current.get(cid)?.itemContent.get(activeId) ?? null;
+	}, [
+		activeId,
+		overlayVersion,
+		containerOf
+	]);
+	const prefersReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	return /* @__PURE__ */ jsx(GroupContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsxs(DndContext, {
+			accessibility,
+			sensors,
+			collisionDetection: containerAwareClosestCorners,
+			onDragStart: handleDragStart,
+			onDragOver: handleDragOver,
+			onDragEnd: handleDragEnd,
+			onDragCancel: handleDragCancel,
+			children: [children, /* @__PURE__ */ jsx(DragOverlay, {
+				dropAnimation: prefersReducedMotion ? null : void 0,
+				children: overlayContent != null ? /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+					value: OVERLAY_ITEM_CONTEXT,
+					children: /* @__PURE__ */ jsx("div", {
+						className: clsx(SortableGroup_module_default.item, SortableGroup_module_default.overlayItem),
+						"data-dragging": "true",
+						children: overlayContent
+					})
+				}) : null
+			})]
+		})
+	});
+};
+SortableGroupRoot.displayName = "SortableGroup";
+/**
+* One list inside a `<SortableGroup>`; renders an `<ol>` that accepts cross-container drops.
+* @see docs/components/SortableGroup.md
+*/
+var SortableGroupContainer = forwardRef(function SortableGroupContainer({ id, items, className, children, ...rest }, ref) {
+	const group = useContext(GroupContext);
+	if (!group) throw new Error("<SortableGroup.Container> must be used inside <SortableGroup>.");
+	const { setNodeRef } = useDroppable({ id });
+	const contentMap = useMemo(() => itemContentMap(children), [children]);
+	const ariaLabel = rest["aria-label"];
+	const ariaLabelledBy = rest["aria-labelledby"];
+	useEffect(() => {
+		const label = containerName({
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy
+		});
+		group.register(id, {
+			items,
+			itemContent: contentMap,
+			label
+		});
+		return () => group.unregister(id);
+	}, [
+		group,
+		id,
+		items,
+		contentMap,
+		ariaLabel,
+		ariaLabelledBy
+	]);
+	const setRefs = useCallback((node) => {
+		setNodeRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [setNodeRef, ref]);
+	return /* @__PURE__ */ jsx(SortableContext, {
+		items,
+		strategy: verticalListSortingStrategy,
+		children: /* @__PURE__ */ jsx("ol", {
+			ref: setRefs,
+			className: clsx(SortableGroup_module_default.list, className),
+			...rest,
+			children
+		})
+	});
+});
+SortableGroupContainer.displayName = "SortableGroup.Container";
+var SortableGroup = Object.assign(SortableGroupRoot, { Container: SortableGroupContainer });
+export { SortableGroup };

package/dist/components/SortableGroup/SortableGroup.module.js

@@ -0,0 +1,11 @@
+import "./SortableGroup.css";
+// src/components/SortableGroup/SortableGroup.module.scss
+var list = "SortableGroup__list__oMBZp";
+var item = "SortableGroup__item__LZztl";
+var overlayItem = "SortableGroup__overlayItem___Pftw";
+var SortableGroup_module_default = {
+	list,
+	item,
+	overlayItem
+};
+export { SortableGroup_module_default as default, item, list, overlayItem };

package/dist/components/SortableGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { SortableGroup } from './SortableGroup.js';
+export type { SortableGroupProps, SortableGroupContainerProps } from './SortableGroup.js';
+export { moveSortableItem } from './moveSortableItem.js';
+export type { SortableMoveEvent } from './moveSortableItem.js';

package/dist/components/SortableGroup/moveSortableItem.d.ts

@@ -0,0 +1,25 @@
+/** A move within or across containers — fired by `SortableGroup.onMove`. */
+export interface SortableMoveEvent {
+    /** The dragged item's id. */
+    id: string | number;
+    /** Where it came from. */
+    from: {
+        container: string | number;
+        index: number;
+    };
+    /** Where it goes. `from.container === to.container` is a within-list reorder. */
+    to: {
+        container: string | number;
+        index: number;
+    };
+}
+/**
+ * Apply a `SortableMoveEvent` to a `{ containerId: items[] }` map, immutably.
+ * Splices the item out of `from` and into `to` by index — supports within-
+ * container reorder, cross-container moves, and an empty target. Returns the
+ * input unchanged when `from.index` is out of range.
+ *
+ * @example
+ * <SortableGroup onMove={(e) => setGroups((g) => moveSortableItem(g, e))}>
+ */
+export declare function moveSortableItem<T>(containers: Record<string, T[]>, { from, to }: SortableMoveEvent): Record<string, T[]>;

package/dist/components/SortableGroup/moveSortableItem.js

@@ -0,0 +1,26 @@
+// src/components/SortableGroup/moveSortableItem.ts
+/**
+* Apply a `SortableMoveEvent` to a `{ containerId: items[] }` map, immutably.
+* Splices the item out of `from` and into `to` by index — supports within-
+* container reorder, cross-container moves, and an empty target. Returns the
+* input unchanged when `from.index` is out of range.
+*
+* @example
+* <SortableGroup onMove={(e) => setGroups((g) => moveSortableItem(g, e))}>
+*/
+function moveSortableItem(containers, { from, to }) {
+	const fromKey = String(from.container);
+	const toKey = String(to.container);
+	const fromArr = (containers[fromKey] ?? []).slice();
+	const [moved] = fromArr.splice(from.index, 1);
+	if (moved === void 0) return containers;
+	const next = {
+		...containers,
+		[fromKey]: fromArr
+	};
+	const toArr = fromKey === toKey ? fromArr : (containers[toKey] ?? []).slice();
+	toArr.splice(to.index, 0, moved);
+	next[toKey] = toArr;
+	return next;
+}
+export { moveSortableItem };

package/dist/components/Sparkline/Sparkline.css

@@ -0,0 +1,33 @@
+:root {
+  --sparkline-height: var(--size-sparkline);
+  --sparkline-color: var(--color-accent);
+  --sparkline-area-fill: var(--color-accent-subtle-bg);
+  --sparkline-line-width: var(--border-width-emphasis);
+}
+
+.Sparkline__root__J27uE {
+  width: 100%;
+  height: var(--sparkline-height);
+}
+
+.Sparkline__svg__oofJi {
+  display: block;
+  overflow: visible;
+}
+
+.Sparkline__line__HpLKF {
+  fill: none;
+  stroke: var(--sparkline-color);
+  stroke-width: var(--sparkline-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.Sparkline__area__IpSym {
+  fill: var(--sparkline-area-fill);
+}
+
+.Sparkline__bar__sdL21,
+.Sparkline__dot__P28e2 {
+  fill: var(--sparkline-color);
+}

package/dist/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react';
+import { type SparklineType } from './sparklineModel.js';
+export type { SparklineType };
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What the series is, e.g. "Contacts per day". Starts the accessible name. */
+    label: string;
+    /** Values oldest → newest. `null` (or a non-finite number) = no data for that slot: a gap in a line/area, no bar. */
+    values: readonly (number | null)[];
+    /**
+     * Mark type. Default `'line'`.
+     * - `'line'` — smoothed line with a dot on the latest value. Trends of a rate or level.
+     * - `'area'` — the line over a filled area anchored at zero. Volumes / counts over time.
+     * - `'bar'` — one bar per value. Discrete per-period counts (daily signups).
+     */
+    type?: SparklineType;
+    /** Formats numbers in the accessible summary. Default: `Intl.NumberFormat` for the current locale. */
+    formatValue?: (n: number) => string;
+    /**
+     * Dot on the latest value (`line` / `area`; `bar` never has one). Default `true`.
+     * Turn off where the dot reads as a stray marker rather than emphasis, e.g. a
+     * dense row of `StatTile` sparklines.
+     */
+    endDot?: boolean;
+}
+/**
+ * Compact, static, axis-free trend graphic (line / area / bar) for KPI cards.
+ * `role`, `aria-label` and `aria-labelledby` are ignored; the name is derived from `label` and `values`.
+ * @see docs/components/Sparkline.md
+ */
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Sparkline/Sparkline.js

@@ -0,0 +1,96 @@
+'use client';
+import { useLocale } from "../../i18n/useLocale.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { mergeRefs } from "../_internal/refs.js";
+import { layoutSparkline, summarize } from "./sparklineModel.js";
+import Sparkline_module_default from "./Sparkline.module.js";
+import { forwardRef, useLayoutEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Sparkline/Sparkline.tsx
+function useSize() {
+	const [el, setEl] = useState(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	useLayoutEffect(() => {
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const { width, height } = el.getBoundingClientRect();
+			setSize((prev) => prev.width === Math.floor(width) && prev.height === Math.floor(height) ? prev : {
+				width: Math.floor(width),
+				height: Math.floor(height)
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [el]);
+	return [setEl, size];
+}
+/**
+* Compact, static, axis-free trend graphic (line / area / bar) for KPI cards.
+* `role`, `aria-label` and `aria-labelledby` are ignored; the name is derived from `label` and `values`.
+* @see docs/components/Sparkline.md
+*/
+var Sparkline = forwardRef(function Sparkline({ label, values, type = "line", formatValue, endDot = true, className, "aria-labelledby": _ignored, ...rest }, ref) {
+	const t = useTranslation();
+	const locale = useLocale();
+	const [setMeasureEl, { width, height }] = useSize();
+	const rootRef = useMemo(() => mergeRefs(ref, setMeasureEl), [ref, setMeasureEl]);
+	const format = useMemo(() => formatValue ?? ((n) => new Intl.NumberFormat(locale).format(n)), [formatValue, locale]);
+	const summary = summarize(values);
+	const name = summary ? t("sparkline.summary", {
+		label,
+		first: format(summary.first),
+		last: format(summary.last),
+		min: format(summary.min),
+		max: format(summary.max)
+	}) : t("sparkline.noData", { label });
+	const geometry = useMemo(() => layoutSparkline(values, type, width, height), [
+		values,
+		type,
+		width,
+		height
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: rootRef,
+		className: clsx(Sparkline_module_default.root, className),
+		role: "img",
+		"aria-label": name,
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: Sparkline_module_default.svg,
+			width,
+			height,
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [
+				geometry?.area && /* @__PURE__ */ jsx("path", {
+					className: Sparkline_module_default.area,
+					d: geometry.area
+				}),
+				geometry?.line && /* @__PURE__ */ jsx("path", {
+					className: Sparkline_module_default.line,
+					d: geometry.line
+				}),
+				geometry?.bars?.map((b, i) => /* @__PURE__ */ jsx("rect", {
+					className: Sparkline_module_default.bar,
+					x: b.x,
+					y: b.y,
+					width: b.width,
+					height: b.height
+				}, i)),
+				endDot && geometry?.dot && /* @__PURE__ */ jsx("circle", {
+					className: Sparkline_module_default.dot,
+					cx: geometry.dot.cx,
+					cy: geometry.dot.cy,
+					r: 2.5
+				})
+			]
+		})
+	});
+});
+export { Sparkline };

package/dist/components/Sparkline/Sparkline.module.js

@@ -0,0 +1,17 @@
+import "./Sparkline.css";
+// src/components/Sparkline/Sparkline.module.scss
+var root = "Sparkline__root__J27uE";
+var svg = "Sparkline__svg__oofJi";
+var line = "Sparkline__line__HpLKF";
+var area = "Sparkline__area__IpSym";
+var bar = "Sparkline__bar__sdL21";
+var dot = "Sparkline__dot__P28e2";
+var Sparkline_module_default = {
+	root,
+	svg,
+	line,
+	area,
+	bar,
+	dot
+};
+export { area, bar, Sparkline_module_default as default, dot, line, root, svg };

package/dist/components/Sparkline/index.d.ts

@@ -0,0 +1,2 @@
+export { Sparkline } from './Sparkline.js';
+export type { SparklineProps, SparklineType } from './Sparkline.js';