@sentropic/design-system-react 0.3.0 → 0.4.0

package/dist/catalog.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "./classNames.js";
+// Normalises an action item so the rest of the component only deals with the
+// React-native shape: `id` (from id|value) and `variant` (from variant|danger).
+function actionId(item, index, prefix = "item") {
+    return item.id ?? item.value ?? (index === undefined ? undefined : `${prefix}-${index}`);
+}
+function isDangerAction(item) {
+    return item.variant === "danger" || item.danger === true;
+}
 const DATA_TONES = [
     "category1",
     "category2",
@@ -137,21 +145,12 @@ function pct(value, min = 0, max = 100) {
         return 0;
     return clamp(((value - min) / (max - min)) * 100, 0, 100);
 }
-function pointsFrom(values, width, height) {
-    const ys = values.map((entry) => (typeof entry === "number" ? entry : entry.y ?? entry.value ?? 0));
-    const max = Math.max(...ys, 1);
-    return ys
-        .map((value, index) => {
-        const x = ys.length === 1 ? width / 2 : (index / (ys.length - 1)) * width;
-        const y = height - (value / max) * height;
-        return `${x},${y}`;
-    })
-        .join(" ");
-}
-export function Accordion({ items, openIds, defaultOpenIds = [], allowMultiple = true, onChange, className, ...rest }) {
-    const [open, setOpen] = useControlled(openIds, defaultOpenIds, onChange);
+export function Accordion({ items, openIds, defaultOpenIds, open: openAlias, allowMultiple, multiple, onChange, className, ...rest }) {
+    const initialOpen = defaultOpenIds ?? openAlias ?? [];
+    const resolvedAllowMultiple = allowMultiple ?? multiple ?? true;
+    const [open, setOpen] = useControlled(openIds, initialOpen, onChange);
     const toggle = (id) => {
-        const next = open.includes(id) ? open.filter((value) => value !== id) : allowMultiple ? [...open, id] : [id];
+        const next = open.includes(id) ? open.filter((value) => value !== id) : resolvedAllowMultiple ? [...open, id] : [id];
         setOpen(next);
     };
     return (_jsx("div", { ...rest, className: classNames("st-accordion", className), children: items.map((item, index) => {
@@ -165,46 +164,6 @@ export function Accordion({ items, openIds, defaultOpenIds = [], allowMultiple =
 export function Alert({ tone = "info", title, message, actions, children, className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-alert", `st-alert--${tone}`, className), role: tone === "warning" || tone === "error" ? "alert" : "status", children: [_jsxs("div", { className: "st-alert__content", children: [_jsx("h2", { className: "st-alert__title", children: title }), message ? _jsx("p", { className: "st-alert__message", children: message }) : null, children] }), actions ? _jsx("div", { className: "st-alert__actions", children: actions }) : null] }));
 }
-function LinearChart({ data, label, width = 320, height = 160, className, type }) {
-    const classBase = type === "areaChart" ? "st-areaChart" : "st-lineChart";
-    const points = pointsFrom(data, width, height);
-    const accessibleLabel = label ?? (type === "areaChart" ? "Area chart" : "Line chart");
-    return (_jsxs("figure", { className: classNames(classBase, className), "aria-label": accessibleLabel, children: [_jsx("span", { className: "st-visually-hidden", children: accessibleLabel }), _jsxs("svg", { viewBox: `0 0  `, "aria-hidden": "true", children: [_jsx("polyline", { className: `${classBase}__line`, points: points, fill: "none" }), type === "areaChart" ? _jsx("polygon", { className: "st-areaChart__area", points: `0,${height} ${points} ${width},${height}` }) : null, data.map((datum, index) => (_jsx("circle", { className: `${classBase}__dot`, cx: points.split(" ")[index]?.split(",")[0], cy: points.split(" ")[index]?.split(",")[1], r: "4" }, index)))] })] }));
-}
-export function AreaChart(props) {
-    return _jsx(LinearChart, { ...props, type: "areaChart" });
-}
-export function LineChart(props) {
-    return _jsx(LinearChart, { ...props, type: "lineChart" });
-}
-export function BarChart({ data, label = "Bar chart", width = 320, height = 160, className, ...rest }) {
-    const max = Math.max(...data.map((datum) => datum.value ?? datum.y ?? 0), 1);
-    return (_jsxs("figure", { ...rest, className: classNames("st-barChart", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: `0 0  `, "aria-hidden": "true", children: data.map((datum, index) => {
-                    const value = datum.value ?? datum.y ?? 0;
-                    const barWidth = width / Math.max(data.length, 1) - 8;
-                    const barHeight = (value / max) * height;
-                    return (_jsx("rect", { className: classNames("st-barChart__bar", `st-barChart__bar--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), x: index * (barWidth + 8) + 4, y: height - barHeight, width: barWidth, height: barHeight }, index));
-                }) })] }));
-}
-export function DonutChart({ data, label = "Donut chart", className, ...rest }) {
-    const total = data.reduce((sum, datum) => sum + (datum.value ?? datum.y ?? 0), 0);
-    return (_jsxs("figure", { ...rest, className: classNames("st-donutChart", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsxs("svg", { viewBox: "0 0 120 120", "aria-hidden": "true", children: [data.map((datum, index) => (_jsx("circle", { className: classNames("st-donutChart__slice", `st-donutChart__slice--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), cx: "60", cy: "60", r: 36 - index * 3, fill: "none", strokeWidth: "8" }, index))), _jsx("text", { className: "st-donutChart__center", x: "60", y: "64", textAnchor: "middle", children: total })] })] }));
-}
-export function ScatterPlot({ data, label = "Scatter chart", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-scatterPlot", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 320 160", "aria-hidden": "true", children: data.map((datum, index) => (_jsx("circle", { className: classNames("st-scatterPlot__point", `st-scatterPlot__point--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), cx: clamp(datum.x * 24 + 24, 12, 308), cy: clamp(148 - datum.y * 24, 12, 148), r: "5", children: _jsx("title", { children: datum.label ?? `${datum.x}, ${datum.y}` }) }, index))) })] }));
-}
-export function StackedBarChart({ data, label = "Stacked bar chart", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-stackedBar", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 320 160", "aria-hidden": "true", children: data.map((bar, barIndex) => {
-                    let x = 16;
-                    const total = Math.max(bar.segments.reduce((sum, segment) => sum + segment.value, 0), 1);
-                    return (_jsxs("g", { transform: `translate(0 ${barIndex * 32 + 16})`, children: [bar.segments.map((segment, index) => {
-                                const width = (segment.value / total) * 220;
-                                const rect = (_jsx("rect", { className: classNames("st-stackedBar__seg", `st-stackedBar__seg--${segment.tone ?? DATA_TONES[index % DATA_TONES.length]}`), x: x, y: "0", width: width, height: "20" }, segment.label));
-                                x += width;
-                                return rect;
-                            }), _jsx("text", { className: "st-stackedBar__categoryLabel", x: "250", y: "15", children: bar.label })] }, bar.label));
-                }) })] }));
-}
 export function AspectRatio({ ratio = "16 / 9", className, style, children, ...rest }) {
     const aspectRatio = typeof ratio === "number" ? String(ratio) : ratio;
     return (_jsx("div", { ...rest, className: classNames("st-aspectRatio", className), style: { aspectRatio, ...style }, children: children }));
@@ -292,11 +251,12 @@ export function Combobox({ label, options, value, size = "md", placeholder = "Se
                         selectOption(option);
                     }, children: option.label }, option.value)))) : (_jsx("li", { className: "st-combobox__empty", role: "option", "aria-disabled": "true", "aria-selected": "false", children: noResultsLabel })) })) : null] }));
 }
-export function ContentSwitcher({ items, value, activeId, onChange, size = "md", className, ...rest }) {
+export function ContentSwitcher({ items, value, activeId, onChange, onchange, size = "md", className, ...rest }) {
+    const handleChange = onChange ?? onchange;
     const current = value ?? activeId ?? idFrom(items[0] ?? {}, 0, "content");
     return (_jsx("div", { ...rest, className: classNames("st-contentSwitcher", `st-contentSwitcher--${size}`, className), role: "group", children: items.map((item, index) => {
             const itemId = idFrom(item, index, "content");
-            return (_jsx("button", { type: "button", className: classNames("st-contentSwitcher__option st-contentSwitcher__button", itemId === current && "st-contentSwitcher__option--selected"), disabled: item.disabled, "aria-pressed": itemId === current, onClick: () => onChange?.(itemId), children: item.label }, itemId));
+            return (_jsx("button", { type: "button", className: classNames("st-contentSwitcher__option st-contentSwitcher__button", itemId === current && "st-contentSwitcher__option--selected"), disabled: item.disabled, "aria-pressed": itemId === current, onClick: () => handleChange?.(itemId), children: item.label }, itemId));
         }) }));
 }
 export function CopyButton({ text: copyText, value, label = "Copy", copiedLabel = "Copied", size = "md", className, onClick, ...rest }) {
@@ -307,11 +267,6 @@ export function CopyButton({ text: copyText, value, label = "Copy", copiedLabel
             onClick?.(event);
         }, children: _jsx("span", { className: "st-copyButton__label", children: copied ? copiedLabel : label }) }));
 }
-export function DataTable({ columns, rows, caption, size = "md", className, pageSize, page = 1, totalItems, ...rest }) {
-    const visibleRows = pageSize ? rows.slice((page - 1) * pageSize, page * pageSize) : rows;
-    const total = totalItems ?? rows.length;
-    return (_jsxs("div", { className: "st-dataTable-wrap", children: [_jsxs("table", { ...rest, className: classNames("st-dataTable", `st-dataTable--${size}`, className), children: [caption ? _jsx("caption", { children: caption }) : null, _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { children: column.label }, column.key)) }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { className: classNames(column.align === "center" && "st-dataTable__cell--center", column.align === "end" && "st-dataTable__cell--end"), children: column.render?.(row, column) ?? text(row[column.key]) }, column.key))) }, row.id))) })] }), pageSize ? _jsx("div", { className: "st-dataTable__pagerStatus", children: `${(page - 1) * pageSize + 1}-${Math.min(page * pageSize, total)} of ${total}` }) : null] }));
-}
 export function DatePicker({ label, value, size = "md", className, ...rest }) {
     return (_jsx("div", { ...rest, className: classNames("st-datepicker", `st-datepicker--${size}`, className), children: _jsx(Field, { label: label, children: (inputId) => _jsx("input", { id: inputId, className: "st-control st-datepicker__control", type: "date", defaultValue: value }) }) }));
 }
@@ -338,7 +293,8 @@ export function Drawer({ open = false, title, description, footer, placement = "
                 onClose?.();
         }, children: _jsxs("aside", { ...rest, ref: panelRef, className: classNames("st-drawer", `st-drawer--${placement}`, className), role: "dialog", "aria-modal": "true", "aria-label": text(title) || "Drawer", tabIndex: -1, onKeyDown: (event) => trapTabKey(event, panelRef.current), children: [_jsxs("div", { className: "st-drawer__header", children: [title ? _jsx("h2", { className: "st-drawer__title", children: title }) : null, _jsx("button", { ref: closeRef, type: "button", className: "st-drawer__close", onClick: onClose, "aria-label": "Close", children: "x" })] }), description ? _jsx("p", { className: "st-drawer__description", children: description }) : null, _jsx("div", { className: "st-drawer__body", children: children }), footer ? _jsx("div", { className: "st-drawer__footer", children: footer }) : null] }) }));
 }
-export function Dropdown({ label = "Select", options, value, open: controlledOpen, placeholder = "Select", onSelect, className, ...rest }) {
+export function Dropdown({ label = "Select", options, value, open: controlledOpen, placeholder = "Select", onSelect, onselect, className, ...rest }) {
+    const handleSelect = onSelect ?? onselect;
     const hostRef = React.useRef(null);
     const itemRefs = React.useRef([]);
     const [open, setOpen] = useControlled(controlledOpen, false);
@@ -358,7 +314,7 @@ export function Dropdown({ label = "Select", options, value, open: controlledOpe
         setCurrent(option.value);
         setOpen(false);
         setActiveIndex(-1);
-        onSelect?.(option.value);
+        handleSelect?.(option.value);
     };
     useOutsideMouseDown(open, hostRef, () => setOpen(false));
     useEscape(open, () => setOpen(false));
@@ -392,8 +348,30 @@ export function Dropdown({ label = "Select", options, value, open: controlledOpe
 export function EmptyState({ title, message, action, children, className, ...rest }) {
     return (_jsx("section", { ...rest, className: classNames("st-empty-state st-emptyState", className), children: _jsxs("div", { className: "st-empty-state__content", children: [_jsx("h2", { className: "st-empty-state__title st-emptyState__title", children: title }), message ? _jsx("p", { className: "st-empty-state__message st-emptyState__message", children: message }) : null, children, action ? _jsx("div", { className: "st-empty-state__action", children: action }) : null] }) }));
 }
+function formatFileSize(bytes) {
+    if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0)
+        return "";
+    if (bytes === 0)
+        return "0 B";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / Math.pow(1024, i);
+    const formatted = value >= 10 || i === 0 ? value.toFixed(0) : value.toFixed(1);
+    return `${formatted} ${units[i]}`;
+}
+function fileItemName(item) {
+    return item.file?.name ?? item.name;
+}
+function fileItemSize(item) {
+    return item.file?.size ?? item.size;
+}
 export function FileUploader({ label = "Upload", items = [], disabled = false, className, ...rest }) {
-    return (_jsxs("div", { ...rest, className: classNames("st-fileUploader-field", className), children: [_jsxs("div", { className: classNames("st-fileUploader__dropzone", disabled && "st-fileUploader__dropzone--disabled"), children: [_jsx("span", { className: "st-fileUploader__trigger", children: label }), _jsx("input", { className: "st-fileUploader__input", type: "file", disabled: disabled, "aria-label": text(label) })] }), _jsx("ul", { className: "st-fileUploader__list", children: items.map((item, index) => (_jsxs("li", { className: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`), children: [_jsx("span", { className: "st-fileUploader__itemName st-fileUploader__name", children: item.name }), item.error ? _jsx("span", { className: "st-fileUploader__itemError", children: item.error }) : null] }, item.id ?? item.name ?? index))) })] }));
+    return (_jsxs("div", { ...rest, className: classNames("st-fileUploader-field", className), children: [_jsxs("div", { className: classNames("st-fileUploader__dropzone", disabled && "st-fileUploader__dropzone--disabled"), children: [_jsx("span", { className: "st-fileUploader__trigger", children: label }), _jsx("input", { className: "st-fileUploader__input", type: "file", disabled: disabled, "aria-label": text(label) })] }), _jsx("ul", { className: "st-fileUploader__list", children: items.map((item, index) => {
+                    const name = fileItemName(item);
+                    const size = fileItemSize(item);
+                    const sizeLabel = formatFileSize(size);
+                    return (_jsxs("li", { className: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`), children: [_jsx("span", { className: "st-fileUploader__itemName st-fileUploader__name", children: name }), sizeLabel ? _jsx("span", { className: "st-fileUploader__itemSize", children: sizeLabel }) : null, item.error ? _jsx("span", { className: "st-fileUploader__itemError", children: item.error }) : null] }, item.id ?? name ?? index));
+                }) })] }));
 }
 export function Footer({ brand, columns, links, copyright, className, ...rest }) {
     const groups = columns ?? (links ? [{ links }] : []);
@@ -805,11 +783,15 @@ export function Link({ muted = false, standalone = false, disabled = false, clas
 export function LoadingState({ label, title, variant = "spinner", className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-loading", `st-loading--${variant}`, className), "aria-live": "polite", children: [_jsx("span", { className: "st-loading__spinner", "aria-hidden": "true" }), _jsx("span", { className: "st-loading__label", children: label ?? title ?? "Loading" })] }));
 }
+function itemKind(item) {
+    const tagged = item;
+    return tagged.type ?? tagged.kind;
+}
 function isDivider(item) {
-    return "type" in item && item.type === "divider";
+    return itemKind(item) === "divider";
 }
 function isGroup(item) {
-    return "type" in item && item.type === "group";
+    return itemKind(item) === "group";
 }
 export function Menu({ items, dense = false, onSelect, className, role, ...rest }) {
     const rootRef = React.useRef(null);
@@ -843,19 +825,21 @@ export function Menu({ items, dense = false, onSelect, className, role, ...rest
             if (isDivider(item))
                 return _jsx("div", { className: "st-menu__divider", role: "separator" }, item.id ?? index);
             if (isGroup(item)) {
-                return (_jsxs("section", { className: "st-menu__group", children: [_jsx("h3", { children: item.label }), item.items.map((child) => (_jsx("button", { type: "button", role: "menuitem", className: "st-menu__item", disabled: child.disabled, onClick: () => onSelect?.(child), onKeyDown: (event) => handleItemKeyDown(event, child), children: _jsx("span", { className: "st-menu__itemLabel", children: child.label }) }, child.id ?? text(child.label))))] }, item.id ?? index));
+                return (_jsxs("section", { className: "st-menu__group", children: [_jsx("h3", { children: item.label }), (item.items ?? []).map((child) => (_jsx("button", { type: "button", role: "menuitem", className: classNames("st-menu__item", isDangerAction(child) && "st-menu__item--danger"), disabled: child.disabled, onClick: () => onSelect?.(child), onKeyDown: (event) => handleItemKeyDown(event, child), children: _jsx("span", { className: "st-menu__itemLabel", children: child.label }) }, actionId(child) ?? text(child.label))))] }, item.id ?? index));
             }
-            return (_jsx("button", { type: "button", role: "menuitem", disabled: item.disabled, className: classNames("st-menu__item", item.variant === "danger" && "st-menu__item--danger"), onClick: () => onSelect?.(item), onKeyDown: (event) => handleItemKeyDown(event, item), children: _jsx("span", { className: "st-menu__itemLabel", children: item.label }) }, item.id ?? text(item.label) ?? index));
+            const action = item;
+            return (_jsx("button", { type: "button", role: "menuitem", disabled: action.disabled, className: classNames("st-menu__item", isDangerAction(action) && "st-menu__item--danger"), onClick: () => onSelect?.(action), onKeyDown: (event) => handleItemKeyDown(event, action), children: _jsx("span", { className: "st-menu__itemLabel", children: action.label }) }, actionId(action) ?? text(action.label) ?? index));
         }) }));
 }
 export function MenuPopover({ trigger, items = [], open = true, placement = "bottom-start", children, className, ...rest }) {
     return (_jsxs("div", { ...rest, className: classNames("st-menuPopover", `st-menuPopover--${placement}`, className), children: [trigger, open ? _jsx("div", { className: "st-menuPopover__content", children: items.length ? _jsx(Menu, { items: items, role: "presentation" }) : children }) : null] }));
 }
-export function MenuTriggerButton({ open = false, type = "button", className, children, ...rest }) {
-    return (_jsx("button", { ...rest, type: type, className: classNames("st-menuTriggerButton st-button st-button--secondary st-button--sm", className), "aria-expanded": open, children: children }));
+export function MenuTriggerButton({ open, expanded, type = "button", className, children, ...rest }) {
+    const isOpen = open ?? expanded ?? false;
+    return (_jsx("button", { ...rest, type: type, className: classNames("st-menuTriggerButton st-button st-button--secondary st-button--sm", className), "aria-expanded": isOpen, children: children }));
 }
 export function MessageActions({ actions, visibility = "always", className, ...rest }) {
-    return (_jsx("nav", { ...rest, className: classNames("st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", className), "aria-label": "Message actions", children: actions.map((action, index) => (_jsx("button", { type: "button", className: classNames("st-button st-button--ghost st-button--sm", action.variant === "danger" && "st-button--danger"), disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index))) }));
+    return (_jsx("nav", { ...rest, className: classNames("st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", className), "aria-label": "Message actions", children: actions.map((action, index) => (_jsx("button", { type: "button", className: classNames("st-button st-button--ghost st-button--sm", action.variant === "danger" && "st-button--danger"), disabled: action.disabled, "aria-label": action.label == null && action.icon != null ? text(action.id) || undefined : undefined, onClick: action.onClick, children: action.label ?? action.icon }, action.id ?? index))) }));
 }
 export function MessageStatusBadge({ status, tone, labels, className, ...rest }) {
     const normalized = status === "sent" ? "completed" : status === "streaming" ? "processing" : status === "error" ? "failed" : status;
@@ -930,8 +914,9 @@ export function Pagination({ page, pageSize = 10, totalItems, totalPages, pageCo
     const visiblePages = Array.from({ length: pages }, (_, index) => index + 1);
     return (_jsxs("nav", { ...rest, className: classNames("st-pagination", className), "aria-label": "Pagination", children: [_jsx("button", { type: "button", disabled: page <= 1, onClick: () => onPageChange?.(page - 1), children: "Previous" }), _jsx("span", { className: "st-pagination__page--active", children: totalItems ? `${start}-${end} of ${totalItems}` : `Page ${page} of ${pages}` }), _jsx("span", { className: "st-pagination__pages", children: visiblePages.map((pageNumber) => (_jsx("button", { type: "button", className: classNames("st-pagination__page", pageNumber === page && "st-pagination__page--active"), "aria-label": `Page ${pageNumber}`, "aria-current": pageNumber === page ? "page" : undefined, onClick: () => onPageChange?.(pageNumber), children: pageNumber }, pageNumber))) }), _jsx("button", { type: "button", disabled: page >= pages, onClick: () => onPageChange?.(page + 1), children: "Next" })] }));
 }
-export function PaginationNav({ page = 1, totalPages = 1, previousHref, nextHref, className, ...rest }) {
-    return (_jsxs("nav", { ...rest, className: classNames("st-paginationNav", className), "aria-label": "Pagination navigation", children: [previousHref ? _jsx("a", { href: previousHref, children: "Previous" }) : _jsx("button", { type: "button", disabled: page <= 1, children: "Previous" }), _jsx("ol", { className: "st-paginationNav__list", children: Array.from({ length: totalPages }, (_, index) => index + 1).map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: classNames("st-paginationNav__page", item === page && "st-paginationNav__page--active"), children: ["Page ", item] }) }, item))) }), nextHref ? _jsx("a", { href: nextHref, children: "Next" }) : _jsx("button", { type: "button", disabled: page >= totalPages, children: "Next" })] }));
+export function PaginationNav({ page = 1, totalPages, pageCount, previousHref, nextHref, className, ...rest }) {
+    const pages = totalPages ?? pageCount ?? 1;
+    return (_jsxs("nav", { ...rest, className: classNames("st-paginationNav", className), "aria-label": "Pagination navigation", children: [previousHref ? _jsx("a", { href: previousHref, children: "Previous" }) : _jsx("button", { type: "button", disabled: page <= 1, children: "Previous" }), _jsx("ol", { className: "st-paginationNav__list", children: Array.from({ length: pages }, (_, index) => index + 1).map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: classNames("st-paginationNav__page", item === page && "st-paginationNav__page--active"), children: ["Page ", item] }) }, item))) }), nextHref ? _jsx("a", { href: nextHref, children: "Next" }) : _jsx("button", { type: "button", disabled: page >= pages, children: "Next" })] }));
 }
 export function PasswordInput({ label, helperText, errorText, size = "md", className, ...rest }) {
     const [shown, setShown] = React.useState(false);
@@ -978,9 +963,6 @@ export function Slider({ label, size = "md", value, defaultValue, min = 0, max =
     const numeric = Number(value ?? defaultValue ?? 0);
     return (_jsxs("div", { className: classNames("st-slider", `st-slider--${size}`, className), children: [_jsxs("div", { className: "st-slider__header", children: [label ? _jsx("label", { className: "st-field__label", children: label }) : null, _jsx("span", { className: "st-slider__value", children: numeric })] }), _jsx("input", { ...rest, className: "st-slider__input", type: "range", min: min, max: max, defaultValue: defaultValue, value: value })] }));
 }
-export function Sparkline({ data, label = "Sparkline", tone = "neutral", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-sparkline", `st-sparkline--${tone}`, className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 120 40", "aria-hidden": "true", children: _jsx("polyline", { className: "st-sparkline__line", points: pointsFrom(data, 120, 40), fill: "none" }) })] }));
-}
 export function StreamingMessage({ text: messageText, events = [], mode = "live", className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-streamingMessage", `st-streamingMessage--${mode}`, className), children: [_jsx("div", { className: "st-streamingMessage__text", children: messageText }), _jsx("ul", { className: "st-streamingMessage__trailList", children: events.map((event) => _jsx("li", { children: event.label }, event.id)) })] }));
 }
@@ -993,11 +975,12 @@ export function Switch({ label, helperText, className, ...rest }) {
 export function Table({ columns, rows, caption = "Table", className, ...rest }) {
     return (_jsx("div", { className: "st-table-wrap", children: _jsxs("table", { ...rest, className: classNames("st-table", className), children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { children: column.label }, column.key)) }) }), _jsx("tbody", { children: rows.map((row, index) => (_jsx("tr", { children: columns.map((column) => _jsx("td", { className: classNames(column.align === "center" && "st-table__cell--center", (column.align === "right" || column.align === "end") && "st-table__cell--right"), children: text(row[column.key]) }, column.key)) }, text(row.id) || index))) })] }) }));
 }
-export function Tabs({ items, activeValue, activeId, label = "Tabs", onChange, className, ...rest }) {
+export function Tabs({ items, activeValue, activeId, label = "Tabs", onChange, onchange, className, ...rest }) {
+    const handleChange = onChange ?? onchange;
     const reactId = React.useId();
     const tabRefs = React.useRef([]);
     const first = items.find((item) => !item.disabled) ?? items[0];
-    const [current, setCurrent] = useControlled(activeValue ?? activeId, idFrom(first ?? {}, 0, "tab"), onChange);
+    const [current, setCurrent] = useControlled(activeValue ?? activeId, idFrom(first ?? {}, 0, "tab"), handleChange);
     const itemIds = items.map((item, index) => idFrom(item, index, "tab"));
     const activeIndex = Math.max(0, itemIds.indexOf(current));
     const active = items[activeIndex] ?? first;