@sentropic/design-system-react 0.1.0

package/dist/catalog.js

@@ -0,0 +1,732 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "./classNames.js";
+const DATA_TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+function node(value) {
+    return typeof value === "function" ? value() : value;
+}
+function text(value) {
+    if (value === null || value === undefined)
+        return "";
+    return String(value);
+}
+function idFrom(item, index, prefix) {
+    return item.id ?? item.value ?? `${prefix}-${index}`;
+}
+function optionFrom(item, index) {
+    const option = item;
+    return {
+        value: option.value ?? option.id ?? String(index),
+        label: option.label ?? option.value ?? option.id ?? String(index),
+        disabled: "disabled" in item ? Boolean(item.disabled) : false,
+    };
+}
+function useControlled(value, defaultValue, onChange) {
+    const [local, setLocal] = React.useState(defaultValue);
+    return [
+        value ?? local,
+        (next) => {
+            if (value === undefined)
+                setLocal(next);
+            onChange?.(next);
+        },
+    ];
+}
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+].join(",");
+function focusableIn(root) {
+    if (!root)
+        return [];
+    return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function useBodyScrollLock(active) {
+    React.useEffect(() => {
+        if (!active)
+            return;
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, [active]);
+}
+function useOutsideMouseDown(active, ref, onOutside) {
+    React.useEffect(() => {
+        if (!active)
+            return;
+        const onMouseDown = (event) => {
+            const target = event.target;
+            if (target && ref.current && !ref.current.contains(target))
+                onOutside();
+        };
+        document.addEventListener("mousedown", onMouseDown);
+        return () => document.removeEventListener("mousedown", onMouseDown);
+    }, [active, onOutside, ref]);
+}
+function useEscape(active, onClose) {
+    React.useEffect(() => {
+        if (!active || !onClose)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [active, onClose]);
+}
+function trapTabKey(event, root) {
+    if (event.key !== "Tab" || !root || !root.contains(document.activeElement))
+        return;
+    const focusable = focusableIn(root);
+    if (focusable.length === 0) {
+        event.preventDefault();
+        root.focus();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+function moveIndex(index, max, delta) {
+    if (max <= 0)
+        return -1;
+    return (index + delta + max) % max;
+}
+function Field({ label, helperText, errorText, invalid = false, className, children }) {
+    const reactId = React.useId();
+    const inputId = `st-field-${reactId}`;
+    const isInvalid = invalid || Boolean(errorText);
+    return (_jsxs("div", { className: classNames("st-field", className), children: [_jsxs("label", { className: "st-field__control", htmlFor: inputId, children: [label ? _jsx("span", { className: "st-field__label", children: label }) : null, children(inputId, isInvalid)] }), errorText ? (_jsx("span", { className: "st-field__error", children: errorText })) : helperText ? (_jsx("span", { className: "st-field__help", children: helperText })) : null] }));
+}
+function renderOptions(options) {
+    return options?.map((item, index) => {
+        const option = optionFrom(item, index);
+        return (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value));
+    });
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function pct(value, min = 0, max = 100) {
+    if (max <= min)
+        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);
+    const toggle = (id) => {
+        const next = open.includes(id) ? open.filter((value) => value !== id) : allowMultiple ? [...open, id] : [id];
+        setOpen(next);
+    };
+    return (_jsx("div", { ...rest, className: classNames("st-accordion", className), children: items.map((item, index) => {
+            const itemId = idFrom(item, index, "accordion");
+            const isOpen = open.includes(itemId);
+            const triggerId = `st-accordion-trigger-${itemId}`;
+            const panelId = `st-accordion-panel-${itemId}`;
+            return (_jsxs("section", { className: classNames("st-accordion__item", isOpen && "st-accordion__item--open"), children: [_jsx("h3", { className: "st-accordion__heading", children: _jsxs("button", { id: triggerId, type: "button", className: "st-accordion__trigger", disabled: item.disabled, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(itemId), children: [_jsx("span", { className: "st-accordion__title", children: item.title }), _jsx("span", { className: "st-accordion__icon", "aria-hidden": "true", children: isOpen ? "-" : "+" })] }) }), isOpen ? (_jsx("div", { className: "st-accordion__panel", id: panelId, role: "region", "aria-labelledby": triggerId, children: node(item.content) })) : null] }, itemId));
+        }) }));
+}
+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 }));
+}
+export function Breadcrumb({ items, label = "Breadcrumb", className, ...rest }) {
+    return (_jsx("nav", { ...rest, className: classNames("st-breadcrumb", className), "aria-label": label, children: _jsx("ol", { children: items.map((item, index) => (_jsxs("li", { children: [item.href && !item.current ? _jsx("a", { href: item.href, children: item.label }) : _jsx("span", { "aria-current": item.current ? "page" : undefined, children: item.label }), index < items.length - 1 ? _jsx("span", { className: "st-breadcrumb__separator", children: "/" }) : null] }, index))) }) }));
+}
+export function ChatMessage({ role = "assistant", status, content, timestamp, actions, children, className, ...rest }) {
+    const normalizedStatus = status === "streaming" ? "processing" : status === "error" ? "failed" : status;
+    return (_jsxs("article", { ...rest, className: classNames("st-chatMessage", `st-chatMessage--${role}`, normalizedStatus && `st-chatMessage--${normalizedStatus}`, className), children: [_jsx("div", { className: "st-chatMessage__avatar", "aria-hidden": "true", children: role[0]?.toUpperCase() }), _jsxs("div", { className: "st-chatMessage__body", children: [_jsx("div", { className: "st-chatMessage__bubble", children: _jsx("div", { className: "st-chatMessage__content", children: children ?? content }) }), timestamp || actions ? (_jsxs("footer", { className: "st-chatMessage__footer", children: [timestamp ? _jsx("span", { className: "st-chatMessage__timestamp", children: timestamp }) : null, actions ? _jsx("span", { className: "st-chatMessage__actions", children: actions }) : null] })) : null] })] }));
+}
+export function ChatThread({ messages, emptyLabel = "No messages", children, className, ...rest }) {
+    return (_jsx("section", { ...rest, className: classNames("st-chatThread", className), "aria-label": rest["aria-label"] ?? "Chat thread", children: _jsx("div", { className: "st-chatThread__list", children: messages?.length ? messages.map((message) => _jsx(ChatMessage, { role: message.role, status: message.status, content: message.content }, message.id)) : children ?? _jsx("p", { className: "st-chatThread__empty", children: emptyLabel }) }) }));
+}
+export function ChatComposer({ value = "", placeholder = "Message", submitLabel = "Send", onSubmit, className, children, ...rest }) {
+    const [draft, setDraft] = React.useState(value);
+    return (_jsxs("form", { ...rest, className: classNames("st-chatComposer", className), onSubmit: (event) => {
+            event.preventDefault();
+            onSubmit?.({ value: draft });
+        }, children: [_jsx("div", { className: "st-chatComposer__body", children: _jsx("div", { className: "st-chatComposer__inputShell", children: _jsx("textarea", { className: "st-chatComposer__textarea st-chatComposer__input", placeholder: placeholder, value: draft, onChange: (event) => setDraft(event.currentTarget.value) }) }) }), _jsxs("div", { className: "st-chatComposer__toolbar", children: [_jsx("div", { className: "st-chatComposer__actions st-chatComposer__actions--left", children: children }), _jsx("div", { className: "st-chatComposer__actions st-chatComposer__actions--right", children: _jsx("button", { type: "submit", className: "st-button st-button--primary st-button--sm", children: submitLabel }) })] })] }));
+}
+function Choice({ type, label, helperText, invalid = false, className, ...rest }) {
+    return (_jsxs("label", { className: classNames("st-choice", `st-choice--${type}`, className), children: [_jsx("input", { ...rest, className: "st-choice__input", type: type, "aria-invalid": invalid ? "true" : undefined }), _jsxs("span", { className: "st-choice__content", children: [_jsx("span", { className: "st-choice__label", children: label }), helperText ? _jsx("span", { className: "st-choice__help", children: helperText }) : null] })] }));
+}
+export function Checkbox(props) {
+    return _jsx(Choice, { ...props, type: "checkbox" });
+}
+export function Radio(props) {
+    return _jsx(Choice, { ...props, type: "radio" });
+}
+export function CodeSnippet({ code, inline = false, className, ...rest }) {
+    const Tag = inline ? "code" : "pre";
+    return (_jsx(Tag, { ...rest, className: classNames("st-codeSnippet", inline && "st-codeSnippet--inline", className), children: _jsx("code", { className: "st-codeSnippet__code", children: code }) }));
+}
+export function Combobox({ label, options, value, size = "md", placeholder = "Select or type", open: controlledOpen, allowCustomValue = true, noResultsLabel = "No results", onChange, onSelect, className, ...rest }) {
+    const reactId = React.useId();
+    const inputId = `st-combobox-input-${reactId}`;
+    const listId = `st-combobox-list-${reactId}`;
+    const initial = text(options.find((option) => option.value === value)?.label ?? value ?? "");
+    const [inputValue, setInputValue] = React.useState(initial);
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const filtered = options.filter((option) => {
+        const query = inputValue.trim().toLowerCase();
+        return !query || text(option.label).toLowerCase().includes(query);
+    });
+    const selected = options.find((option) => option.value === value);
+    const selectOption = (option) => {
+        if (option.disabled)
+            return;
+        setInputValue(text(option.label));
+        setOpen(false);
+        setActiveIndex(-1);
+        onSelect?.(option.value);
+        onChange?.(option.value);
+    };
+    return (_jsxs("div", { ...rest, className: classNames("st-combobox", `st-combobox--${size}`, className), children: [label ? _jsx("label", { className: "st-field__label", htmlFor: inputId, children: label }) : null, _jsx("input", { id: inputId, className: "st-combobox__control", role: "combobox", "aria-expanded": open, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeIndex >= 0 && filtered[activeIndex] ? `${listId}-${filtered[activeIndex].value}` : undefined, placeholder: placeholder, value: selected?.label ? text(selected.label) : inputValue, onFocus: () => setOpen(true), onChange: (event) => {
+                    setInputValue(event.currentTarget.value);
+                    setOpen(true);
+                    setActiveIndex(-1);
+                    if (allowCustomValue)
+                        onChange?.(event.currentTarget.value);
+                }, onKeyDown: (event) => {
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        setOpen(true);
+                        setActiveIndex((index) => moveIndex(index, filtered.length, 1));
+                    }
+                    else if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        setOpen(true);
+                        setActiveIndex((index) => moveIndex(index < 0 ? filtered.length : index, filtered.length, -1));
+                    }
+                    else if (event.key === "Enter" && open && activeIndex >= 0 && filtered[activeIndex]) {
+                        event.preventDefault();
+                        selectOption(filtered[activeIndex]);
+                    }
+                    else if (event.key === "Escape" && open) {
+                        event.preventDefault();
+                        setOpen(false);
+                        setActiveIndex(-1);
+                    }
+                } }), selected ? _jsx("span", { className: "st-combobox__value st-visually-hidden", children: selected.label }) : null, open ? (_jsx("ul", { id: listId, className: "st-combobox__list", role: "listbox", "aria-label": text(label) || "Options", children: filtered.length ? (filtered.map((option, index) => (_jsx("li", { id: `${listId}-${option.value}`, className: classNames("st-combobox__option", index === activeIndex && "st-combobox__option--active", option.value === value && "st-combobox__option--selected"), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled ? "true" : undefined, onMouseDown: (event) => {
+                        event.preventDefault();
+                        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 }) {
+    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));
+        }) }));
+}
+export function CopyButton({ text: copyText, value, label = "Copy", copiedLabel = "Copied", size = "md", className, onClick, ...rest }) {
+    const [copied, setCopied] = React.useState(false);
+    return (_jsx("button", { ...rest, type: "button", className: classNames("st-copyButton", `st-copyButton--${size}`, copied && "st-copyButton--copied", className), onClick: (event) => {
+            setCopied(true);
+            void navigator.clipboard?.writeText(value ?? copyText ?? "");
+            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 }) }) }));
+}
+export function Drawer({ open = false, title, description, footer, placement = "right", onClose, children, className, ...rest }) {
+    const panelRef = React.useRef(null);
+    const closeRef = React.useRef(null);
+    useBodyScrollLock(open);
+    useEscape(open, onClose);
+    React.useEffect(() => {
+        if (open)
+            closeRef.current?.focus();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => trapTabKey(event, panelRef.current);
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "st-drawer__backdrop", "data-testid": "st-drawer-backdrop", role: "presentation", onClick: (event) => {
+            if (event.target === event.currentTarget)
+                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 }) {
+    const hostRef = React.useRef(null);
+    const itemRefs = React.useRef([]);
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    const [current, setCurrent] = useControlled(value, value ?? "");
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const selected = options.find((option) => option.value === current);
+    const focusOption = (index) => {
+        setActiveIndex(index);
+    };
+    React.useEffect(() => {
+        if (open && activeIndex >= 0)
+            itemRefs.current[activeIndex]?.focus();
+    }, [activeIndex, open]);
+    const selectOption = (option) => {
+        if (option.disabled)
+            return;
+        setCurrent(option.value);
+        setOpen(false);
+        setActiveIndex(-1);
+        onSelect?.(option.value);
+    };
+    useOutsideMouseDown(open, hostRef, () => setOpen(false));
+    useEscape(open, () => setOpen(false));
+    return (_jsxs("div", { ...rest, ref: hostRef, className: classNames("st-dropdown", className), children: [_jsxs("button", { type: "button", className: "st-dropdown__button", "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => setOpen(!open), onKeyDown: (event) => {
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        setOpen(true);
+                        focusOption(0);
+                    }
+                }, children: [_jsx("span", { className: "st-dropdown__label", children: label }), ": ", _jsx("span", { className: "st-dropdown__value", children: selected?.label ?? placeholder })] }), open ? (_jsx("div", { className: "st-dropdown__list", role: "listbox", "aria-label": text(label) || "Options", children: options.map((option, index) => (_jsx("button", { ref: (node) => {
+                        itemRefs.current[index] = node;
+                    }, type: "button", role: "option", className: "st-dropdown__option", disabled: option.disabled, "aria-selected": option.value === current, onClick: () => selectOption(option), onKeyDown: (event) => {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            focusOption(moveIndex(index, options.length, 1));
+                        }
+                        else if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            focusOption(moveIndex(index, options.length, -1));
+                        }
+                        else if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            selectOption(option);
+                        }
+                        else if (event.key === "Escape") {
+                            event.preventDefault();
+                            setOpen(false);
+                        }
+                    }, children: option.label }, option.value))) })) : null] }));
+}
+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] }) }));
+}
+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))) })] }));
+}
+export function Footer({ brand, columns, links, copyright, className, ...rest }) {
+    const groups = columns ?? (links ? [{ links }] : []);
+    return (_jsxs("footer", { ...rest, className: classNames("st-footer", className), children: [_jsxs("div", { className: "st-footer__top", children: [brand ? _jsx("div", { className: "st-footer__brand", children: brand }) : null, _jsx("div", { className: "st-footer__columns", children: groups.map((group, index) => (_jsxs("nav", { children: [group.title ? _jsx("h2", { children: group.title }) : null, group.links.map((link) => (_jsx("a", { href: link.href, children: link.label }, link.href)))] }, index))) })] }), copyright ? _jsx("div", { className: "st-footer__copyright", children: copyright }) : null] }));
+}
+export function ForceGraph({ nodes, edges, label = "Force graph", selectedIds = [], focusId = null, onSelect, onOpenEntity, className, ...rest }) {
+    return (_jsxs("figure", { ...rest, className: classNames("st-forceGraph st-forceGraph--static", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsxs("svg", { viewBox: "0 0 360 220", "aria-hidden": "true", children: [_jsx("g", { className: "st-forceGraph__edges", children: edges.map((edge, index) => (_jsx("line", { className: classNames("st-forceGraph__edge", edge.weak && "st-forceGraph__edge--weak"), x1: "40", y1: 40 + index * 20, x2: "260", y2: 80 + index * 20 }, `${edge.source}-${edge.target}-${index}`))) }), _jsx("g", { className: "st-forceGraph__nodes", children: nodes.map((graphNode, index) => {
+                            const x = graphNode.fx ?? 48 + (index % 5) * 64;
+                            const y = graphNode.fy ?? 56 + Math.floor(index / 5) * 56;
+                            return (_jsxs("g", { className: classNames("st-forceGraph__node", `st-forceGraph__node--${graphNode.tone ?? DATA_TONES[index % DATA_TONES.length]}`, selectedIds.includes(graphNode.id) && "st-forceGraph__node--selected", focusId === graphNode.id && "st-forceGraph__node--focus"), tabIndex: 0, onClick: () => onSelect?.(graphNode.id), onDoubleClick: () => onOpenEntity?.(graphNode.id), children: [_jsx("circle", { className: "st-forceGraph__dot", cx: x, cy: y, r: 8 * (graphNode.weight ?? 1) }), _jsx("text", { className: "st-forceGraph__label", x: x + 12, y: y + 4, children: graphNode.label ?? graphNode.id })] }, graphNode.id));
+                        }) })] })] }));
+}
+export function Form({ status = "idle", message, children, className, ...rest }) {
+    return (_jsxs("form", { ...rest, className: classNames("st-form", className), children: [_jsx("div", { className: "st-form__body", children: children }), message ? _jsx("p", { className: classNames("st-form__message", `st-form__message--${status === "submitted" ? "success" : status === "error" ? "error" : "help"}`), children: message }) : null] }));
+}
+export function FormGroup({ legend, helperText, children, className, ...rest }) {
+    return (_jsxs("fieldset", { ...rest, className: classNames("st-form-group st-formGroup", className), children: [_jsx("legend", { className: "st-form-group__legend st-formGroup__legend", children: legend }), helperText ? _jsx("p", { className: "st-form-group__help st-formGroup__help", children: helperText }) : null, _jsx("div", { className: "st-form-group__body st-formGroup__body", children: children })] }));
+}
+export function deriveInitials(name) {
+    return (name ?? "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join("");
+}
+export function Header({ brand, title, navigation, navItems, account, sticky = false, className, ...rest }) {
+    const links = navigation ?? navItems ?? [];
+    return (_jsxs("header", { ...rest, className: classNames("st-header", sticky && "st-header--sticky", className), children: [_jsxs("div", { className: "st-header__leading", children: [brand ? _jsx("a", { className: "st-header__logo", href: "/", children: brand }) : null, title ? _jsx("span", { className: "st-header__title", children: title }) : null] }), _jsx("nav", { className: "st-header__navigation", children: links.map((link) => (_jsx("a", { href: link.href, children: link.label }, link.href))) }), account ? (_jsxs("div", { className: "st-header__account", children: [_jsx("span", { className: "st-header__avatar st-header__avatar--initials", children: deriveInitials(account.name) }), _jsx("span", { className: "st-header__account-name", children: account.name }), account.email ? _jsx("span", { className: "st-header__account-email", children: account.email }) : null] })) : null] }));
+}
+export function Highlight({ tone = "neutral", title, children, className, ...rest }) {
+    return (_jsxs("aside", { ...rest, className: classNames("st-highlight", `st-highlight--${tone}`, className), children: [title ? _jsx("h3", { className: "st-highlight__title", children: title }) : null, _jsx("div", { className: "st-highlight__body", children: children })] }));
+}
+export function IconButton({ size = "md", variant = "secondary", type = "button", className, children, ...rest }) {
+    return (_jsx("button", { ...rest, type: type, className: classNames("st-iconButton", `st-iconButton--${size}`, `st-iconButton--${variant}`, className), children: children }));
+}
+export function InlineLoading({ label = "Loading", status = "active", className, ...rest }) {
+    return (_jsxs("div", { ...rest, className: classNames("st-inlineLoading", `st-inlineLoading--${status}`, className), children: [_jsx("span", { className: "st-inlineLoading__spinner", "aria-hidden": "true" }), _jsx("span", { className: "st-inlineLoading__label", children: label })] }));
+}
+export function LanguageSelector({ options, value, onChange, open = false, className, ...rest }) {
+    const current = options.find((option) => option.value === value) ?? options[0];
+    return (_jsxs("div", { ...rest, className: classNames("st-languageSelector", className), children: [_jsx("button", { type: "button", className: "st-languageSelector__trigger", children: _jsx("span", { className: "st-languageSelector__current", children: current?.label }) }), open ? (_jsx("ul", { className: "st-languageSelector__menu", children: options.map((option) => (_jsx("li", { children: _jsx("button", { type: "button", className: classNames("st-languageSelector__option", option.value === value && "st-languageSelector__option--active"), onClick: () => onChange?.(option.value), children: option.label }) }, option.value))) })) : null] }));
+}
+export function Link({ muted = false, standalone = false, disabled = false, className, children, ...rest }) {
+    return (_jsx("a", { ...rest, className: classNames("st-link", muted && "st-link--muted", standalone && "st-link--standalone", disabled && "st-link--disabled", className), "aria-disabled": disabled || undefined, children: children }));
+}
+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 isDivider(item) {
+    return "type" in item && item.type === "divider";
+}
+function isGroup(item) {
+    return "type" in item && item.type === "group";
+}
+export function Menu({ items, dense = false, onSelect, className, role, ...rest }) {
+    const rootRef = React.useRef(null);
+    const handleItemKeyDown = (event, item) => {
+        const focusable = Array.from(rootRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []);
+        const currentIndex = focusable.indexOf(event.currentTarget);
+        const focusAt = (index) => focusable[index]?.focus();
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusAt(moveIndex(currentIndex, focusable.length, 1));
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusAt(moveIndex(currentIndex < 0 ? focusable.length : currentIndex, focusable.length, -1));
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            focusAt(0);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            focusAt(focusable.length - 1);
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!item.disabled)
+                onSelect?.(item);
+        }
+    };
+    return (_jsx("div", { ...rest, ref: rootRef, className: classNames("st-menu", dense && "st-menu--dense", className), role: role ?? "menu", children: items.map((item, index) => {
+            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 (_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));
+        }) }));
+}
+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 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))) }));
+}
+export function MessageStatusBadge({ status, tone, labels, className, ...rest }) {
+    const normalized = status === "sent" ? "completed" : status === "streaming" ? "processing" : status === "error" ? "failed" : status;
+    const resolvedTone = tone ?? (normalized === "completed" ? "success" : normalized === "failed" ? "error" : normalized === "processing" ? "info" : "neutral");
+    const label = labels?.[status] ?? labels?.[normalized] ?? normalized.charAt(0).toUpperCase() + normalized.slice(1);
+    return (_jsxs("span", { ...rest, className: classNames("st-messageStatusBadge", `st-badge st-badge--${resolvedTone}`, className), children: [_jsx("span", { className: "st-messageStatusBadge__dot", "aria-hidden": "true" }), label] }));
+}
+export function Modal({ open = false, title, description, footer, onClose, children, className, ...rest }) {
+    const dialogRef = React.useRef(null);
+    const closeRef = React.useRef(null);
+    useBodyScrollLock(open);
+    useEscape(open, onClose);
+    React.useEffect(() => {
+        if (open)
+            closeRef.current?.focus();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => trapTabKey(event, dialogRef.current);
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "st-modal__backdrop", children: _jsxs("section", { ...rest, ref: dialogRef, className: classNames("st-modal", className), role: "dialog", "aria-modal": "true", "aria-label": text(title) || "Modal", tabIndex: -1, children: [_jsxs("div", { className: "st-modal__header", children: [title ? _jsx("h2", { className: "st-modal__title", children: title }) : null, _jsx("button", { ref: closeRef, type: "button", className: "st-modal__close", onClick: onClose, "aria-label": "Close", children: "x" })] }), description ? _jsx("p", { className: "st-modal__description", children: description }) : null, _jsx("div", { className: "st-modal__body", children: children }), footer ? _jsx("div", { className: "st-modal__footer", children: footer }) : null] }) }));
+}
+export function MultiSelect({ label, options, value, values, size = "md", open: controlledOpen, onChange, className, ...rest }) {
+    const reactId = React.useId();
+    const listId = `st-multiSelect-list-${reactId}`;
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    const [selectedValues, setSelectedValues] = useControlled(value ?? values, value ?? values ?? [], onChange);
+    const selected = new Set(selectedValues);
+    const selectedOptions = options.filter((option) => selected.has(option.value));
+    const toggleOption = (option) => {
+        if (option.disabled)
+            return;
+        const next = selected.has(option.value)
+            ? selectedValues.filter((entry) => entry !== option.value)
+            : [...selectedValues, option.value];
+        setSelectedValues(next);
+        setOpen(false);
+    };
+    return (_jsxs("div", { ...rest, className: classNames("st-multiSelect", `st-multiSelect--${size}`, className), children: [label ? _jsx("span", { className: "st-field__label", children: label }) : null, _jsxs("button", { type: "button", className: "st-multiSelect__trigger", "aria-label": text(label) || "Select options", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen(!open), children: [label ? _jsx("span", { className: "st-multiSelect__triggerLabel", children: label }) : null, _jsx("span", { className: "st-multiSelect__tags", children: selectedOptions.length ? selectedOptions.map((option) => (_jsx("span", { className: "st-multiSelect__tag", children: _jsx("span", { className: "st-multiSelect__tagLabel", children: option.label }) }, option.value))) : _jsx("span", { className: "st-multiSelect__placeholder", children: "Select" }) })] }), open ? (_jsx("ul", { id: listId, className: "st-multiSelect__list", role: "listbox", "aria-label": text(label) || "Options", "aria-multiselectable": "true", children: options.map((option) => (_jsx("li", { className: classNames("st-multiSelect__option", selected.has(option.value) && "st-multiSelect__option--selected"), role: "option", "aria-selected": selected.has(option.value), "aria-disabled": option.disabled ? "true" : undefined, tabIndex: option.disabled ? undefined : 0, onClick: () => toggleOption(option), onKeyDown: (event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            toggleOption(option);
+                        }
+                    }, children: option.label }, option.value))) })) : null] }));
+}
+export function NumberInput({ label, helperText, errorText, size = "md", className, ...rest }) {
+    return (_jsx(Field, { label: label, helperText: helperText, errorText: errorText, className: classNames("st-numberInput", `st-numberInput--${size}`, className), children: (inputId, isInvalid) => _jsx("input", { ...rest, id: inputId, className: "st-control st-numberInput__control", type: "number", "aria-invalid": isInvalid ? "true" : undefined }) }));
+}
+function renderListItem(item, index, ordered) {
+    if (typeof item === "object" && item !== null && "label" in item) {
+        const cast = item;
+        return (_jsxs("li", { className: ordered ? "st-orderedList__item" : "st-unorderedList__item", children: [cast.label, cast.children ? (ordered ? _jsx(OrderedList, { items: cast.children }) : _jsx(UnorderedList, { items: cast.children })) : null] }, index));
+    }
+    return (_jsx("li", { className: ordered ? "st-orderedList__item" : "st-unorderedList__item", children: item }, index));
+}
+export function OrderedList({ items, className, ...rest }) {
+    return (_jsx("ol", { ...rest, className: classNames("st-orderedList st-ol", className), children: items.map((item, index) => renderListItem(item, index, true)) }));
+}
+export function OverflowMenu({ items, label = "More", open: controlledOpen, dense = false, placement = "bottom-start", className, ...rest }) {
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    return (_jsxs("div", { ...rest, className: classNames("st-overflowMenu", dense && "st-overflowMenu--dense", className), children: [_jsx("button", { type: "button", className: "st-overflowMenu__trigger", "aria-expanded": open, onClick: () => setOpen(!open), children: label }), open ? _jsx("div", { className: classNames("st-overflowMenu__list", `st-overflowMenu__list--${placement}`), children: _jsx(Menu, { items: items }) }) : null] }));
+}
+export function Pagination({ page, pageSize = 10, totalItems, totalPages, pageCount, onPageChange, className, ...rest }) {
+    const pages = pageCount ?? totalPages ?? (totalItems ? Math.max(1, Math.ceil(totalItems / pageSize)) : page);
+    const start = totalItems ? (page - 1) * pageSize + 1 : page;
+    const end = totalItems ? Math.min(page * pageSize, totalItems) : page;
+    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 PasswordInput({ label, helperText, errorText, size = "md", className, ...rest }) {
+    const [shown, setShown] = React.useState(false);
+    return (_jsx(Field, { label: label, helperText: helperText, errorText: errorText, className: classNames("st-passwordInput", `st-passwordInput--${size}`, className), children: (inputId, isInvalid) => (_jsxs("span", { className: "st-passwordInput__control", children: [_jsx("input", { ...rest, id: inputId, className: "st-control", type: shown ? "text" : "password", "aria-invalid": isInvalid ? "true" : undefined }), _jsx("button", { type: "button", className: "st-passwordInput__toggle", onClick: () => setShown((next) => !next), children: shown ? "Hide" : "Show" })] })) }));
+}
+export function Popover({ trigger, content, open: controlledOpen, placement = "bottom", children, className, ...rest }) {
+    const hostRef = React.useRef(null);
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    const triggerNode = trigger ?? children;
+    const contentNode = content ?? (trigger ? children : null);
+    const label = text(React.isValidElement(triggerNode) ? triggerNode.props.children : triggerNode) || "Popover";
+    useOutsideMouseDown(open, hostRef, () => setOpen(false));
+    useEscape(open, () => setOpen(false));
+    return (_jsxs("span", { ...rest, ref: hostRef, className: classNames("st-popover-host", className), onClick: () => setOpen(true), children: [triggerNode, open ? (_jsx("span", { className: classNames("st-popover", `st-popover--${placement}`), role: "dialog", "aria-label": label, children: contentNode })) : null] }));
+}
+export function ProgressBar({ label, value = 0, max = 100, tone = "neutral", size = "md", indeterminate = false, className, ...rest }) {
+    const percent = pct(value, 0, max);
+    return (_jsxs("div", { ...rest, className: classNames("st-progressBar", className), children: [label ? _jsx("div", { className: "st-progressBar__label", children: label }) : null, _jsx("div", { className: classNames("st-progressBar__track", `st-progressBar__track--${tone}`, `st-progressBar__track--${size}`, indeterminate && "st-progressBar__track--indeterminate"), role: "progressbar", "aria-valuenow": indeterminate ? undefined : value, "aria-valuemin": 0, "aria-valuemax": max, children: _jsx("div", { className: "st-progressBar__fill", style: { width: indeterminate ? undefined : `${percent}%` } }) }), _jsxs("span", { className: "st-progressBar__value", children: [Math.round(percent), "%"] })] }));
+}
+export function ProgressIndicator({ items, orientation = "horizontal", className, ...rest }) {
+    return (_jsx("ol", { ...rest, className: classNames("st-progressIndicator", `st-progressIndicator--${orientation}`, className), children: items.map((item, index) => (_jsxs("li", { className: classNames("st-progressIndicator__step", `st-progressIndicator__step--${item.status ?? "incomplete"}`), children: [_jsx("span", { className: "st-progressIndicator__indicator", children: item.status === "complete" ? "✓" : index + 1 }), _jsxs("span", { className: "st-progressIndicator__text", children: [_jsx("span", { className: "st-progressIndicator__label", children: item.label }), item.description ? _jsx("span", { className: "st-progressIndicator__description", children: item.description }) : null] })] }, item.id ?? index))) }));
+}
+export function Quote({ author, source, children, className, ...rest }) {
+    return (_jsxs("blockquote", { ...rest, className: classNames("st-quote", className), children: [_jsx("p", { className: "st-quote__text", children: children }), author || source ? (_jsxs("footer", { className: "st-quote__attribution", children: [author ? _jsx("span", { className: "st-quote__author", children: author }) : null, source ? _jsx("span", { className: "st-quote__source", children: source }) : null] })) : null] }));
+}
+export function Search({ label, size = "md", onClear, className, ...rest }) {
+    const reactId = React.useId();
+    const inputId = rest.id ?? `st-search-${reactId}`;
+    return (_jsxs("div", { className: classNames("st-search", `st-search--${size}`, className), children: [label ? _jsx("label", { className: "st-field__label", htmlFor: inputId, children: label }) : null, _jsx("span", { className: "st-search__icon", "aria-hidden": "true", children: "\u2315" }), _jsx("input", { ...rest, id: inputId, className: "st-search__control st-search__input", type: "search" }), onClear ? _jsx("button", { type: "button", className: "st-search__clear", onClick: onClear, children: "Clear" }) : null] }));
+}
+export function Select({ label, helperText, errorText, invalid, size = "md", options, className, children, ...rest }) {
+    return (_jsx(Field, { label: label, helperText: helperText, errorText: errorText, invalid: invalid, className: className, children: (inputId, isInvalid) => (_jsx("select", { ...rest, id: inputId, className: classNames("st-select", `st-select--${size}`), "aria-invalid": isInvalid ? "true" : undefined, children: children ?? renderOptions(options) })) }));
+}
+export function SideNav({ items, label = "Navigation", className, ...rest }) {
+    return (_jsx("nav", { ...rest, className: classNames("st-sidenav st-sideNav", className), "aria-label": label, children: items.map((item) => (_jsx("a", { href: item.href, className: classNames("st-sidenav__link st-sideNav__link", item.active && "st-sidenav__link--active st-sideNav__link--active"), children: item.label }, item.href))) }));
+}
+export function SkeletonText({ lines = 3, label = "Loading", className, ...rest }) {
+    return (_jsxs("div", { ...rest, className: classNames("st-skeleton", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), Array.from({ length: lines }, (_, index) => _jsx("span", { className: classNames("st-skeleton__line", index === 0 && "st-skeleton__line--heading") }, index))] }));
+}
+export function SkipLink({ href = "#main", className, children = "Skip to content", ...rest }) {
+    return (_jsx("a", { ...rest, href: href, className: classNames("st-skipLink", className), children: children }));
+}
+export function Slider({ label, size = "md", value, defaultValue, min = 0, max = 100, className, ...rest }) {
+    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)) })] }));
+}
+export function StructuredList({ items, bordered = false, className, ...rest }) {
+    return (_jsx("dl", { ...rest, className: classNames("st-structuredList", bordered && "st-structuredList--bordered", className), children: items.map((item, index) => (_jsxs("div", { className: "st-structuredList__row", children: [_jsx("dt", { className: "st-structuredList__term", children: item.term ?? item.label }), _jsx("dd", { className: "st-structuredList__definition", children: item.description ?? item.value })] }, index))) }));
+}
+export function Switch({ label, helperText, className, ...rest }) {
+    return (_jsxs("label", { className: classNames("st-switch", className), children: [_jsx("input", { ...rest, className: "st-switch__input", type: "checkbox", role: "switch", "aria-checked": rest.checked ?? rest.defaultChecked ?? undefined }), _jsx("span", { className: "st-switch__track", children: _jsx("span", { className: "st-switch__thumb" }) }), _jsxs("span", { className: "st-switch__content", children: [_jsx("span", { className: "st-switch__label", children: label }), helperText ? _jsx("span", { className: "st-switch__help", children: helperText }) : null] })] }));
+}
+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 }) {
+    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 itemIds = items.map((item, index) => idFrom(item, index, "tab"));
+    const activeIndex = Math.max(0, itemIds.indexOf(current));
+    const active = items[activeIndex] ?? first;
+    const activateIndex = (index) => {
+        const item = items[index];
+        if (!item || item.disabled)
+            return;
+        setCurrent(itemIds[index]);
+        tabRefs.current[index]?.focus();
+    };
+    const moveTab = (index, delta) => {
+        const enabled = items.map((item, itemIndex) => ({ item, itemIndex })).filter(({ item }) => !item.disabled);
+        const enabledIndex = enabled.findIndex(({ itemIndex }) => itemIndex === index);
+        const next = enabled[moveIndex(enabledIndex, enabled.length, delta)];
+        if (next)
+            activateIndex(next.itemIndex);
+    };
+    return (_jsxs("section", { ...rest, className: classNames("st-tabs", className), children: [_jsx("div", { className: "st-tabs__list", role: "tablist", "aria-label": label, children: items.map((item, index) => {
+                    const itemId = idFrom(item, index, "tab");
+                    const tabId = `st-tabs-${reactId}-tab-${itemId}`;
+                    const panelId = `st-tabs-${reactId}-panel-${itemId}`;
+                    return (_jsx("button", { ref: (node) => {
+                            tabRefs.current[index] = node;
+                        }, id: tabId, type: "button", role: "tab", className: classNames("st-tabs__tab", itemId === current && "st-tabs__tab--active"), "aria-selected": itemId === current, "aria-controls": panelId, tabIndex: itemId === current ? 0 : -1, disabled: item.disabled, onClick: () => activateIndex(index), onKeyDown: (event) => {
+                            if (event.key === "ArrowRight") {
+                                event.preventDefault();
+                                moveTab(index, 1);
+                            }
+                            else if (event.key === "ArrowLeft") {
+                                event.preventDefault();
+                                moveTab(index, -1);
+                            }
+                            else if (event.key === "Home") {
+                                event.preventDefault();
+                                const firstEnabled = items.findIndex((candidate) => !candidate.disabled);
+                                activateIndex(firstEnabled >= 0 ? firstEnabled : 0);
+                            }
+                            else if (event.key === "End") {
+                                event.preventDefault();
+                                const lastEnabled = items.map((candidate, candidateIndex) => ({ candidate, candidateIndex })).filter(({ candidate }) => !candidate.disabled).at(-1)?.candidateIndex ?? items.length - 1;
+                                activateIndex(lastEnabled);
+                            }
+                        }, children: item.label }, itemId));
+                }) }), _jsx("div", { id: `st-tabs-${reactId}-panel-${itemIds[activeIndex]}`, className: "st-tabs__panel", role: "tabpanel", "aria-labelledby": `st-tabs-${reactId}-tab-${itemIds[activeIndex]}`, children: active?.content })] }));
+}
+export function Tag({ tone = "neutral", size = "md", disabled = false, onDismiss, className, children, ...rest }) {
+    return (_jsxs("span", { ...rest, className: classNames("st-tag", `st-tag--${tone}`, `st-tag--${size}`, disabled && "st-tag--disabled", className), children: [_jsx("span", { className: "st-tag__label", children: children }), onDismiss ? _jsx("button", { type: "button", className: "st-tag__dismiss", onClick: onDismiss, children: "x" }) : null] }));
+}
+export function Textarea({ label, helperText, errorText, invalid, className, ...rest }) {
+    return (_jsx(Field, { label: label, helperText: helperText, errorText: errorText, invalid: invalid, className: className, children: (inputId, isInvalid) => _jsx("textarea", { ...rest, id: inputId, className: "st-textarea st-control", "aria-invalid": isInvalid ? "true" : undefined }) }));
+}
+export function Tile({ title, description, variant = "static", selected = false, disabled = false, children, className, ...rest }) {
+    return (_jsx("section", { ...rest, className: classNames("st-tile", `st-tile--${variant}`, selected && "st-tile--selected", disabled && "st-tile--disabled", className), children: _jsxs("div", { className: "st-tile__content", children: [title ? _jsx("h3", { className: "st-tile__title", children: title }) : null, description ? _jsx("p", { className: "st-tile__description", children: description }) : null, children] }) }));
+}
+export function TileGroup({ legend, items, value, disabled = false, className, ...rest }) {
+    return (_jsxs("fieldset", { ...rest, className: classNames("st-tileGroup", disabled && "st-tileGroup--disabled", className), children: [legend ? _jsx("legend", { className: "st-tileGroup__legend", children: legend }) : null, _jsx("div", { className: "st-tileGroup__items", children: items.map((item) => (_jsxs("label", { className: classNames("st-tileGroup__tile", item.value === value && "st-tileGroup__tile--checked", item.disabled && "st-tileGroup__tile--disabled"), children: [_jsx("input", { className: "st-tileGroup__input", type: "radio", value: item.value, checked: item.value === value, disabled: disabled || item.disabled, readOnly: true }), _jsxs("span", { className: "st-tileGroup__content", children: [_jsx("span", { className: "st-tileGroup__label", children: item.title }), item.description ? _jsx("span", { className: "st-tileGroup__description", children: item.description }) : null] })] }, item.value))) })] }));
+}
+export function Toast({ tone = "info", title, message, actions, onClose, items, autoDismiss = false, duration = 5000, onDismiss, children, className, ...rest }) {
+    React.useEffect(() => {
+        if (!autoDismiss || !items?.length || !onDismiss)
+            return;
+        const timeout = window.setTimeout(() => onDismiss(items[0].id), duration);
+        return () => window.clearTimeout(timeout);
+    }, [autoDismiss, duration, items, onDismiss]);
+    if (items?.length) {
+        return (_jsx("div", { ...rest, className: classNames("st-toastQueue", className), children: items.map((item) => (_jsxs("aside", { className: classNames("st-toast", `st-toast--${item.tone ?? "info"}`), role: "status", children: [_jsxs("div", { className: "st-toast__content", children: [_jsx("h2", { className: "st-toast__title", children: item.title }), item.message ? _jsx("p", { className: "st-toast__message", children: item.message }) : null] }), item.actions ? _jsx("div", { className: "st-toast__actions", children: item.actions }) : null, onDismiss ? (_jsx("button", { type: "button", onClick: () => onDismiss(item.id), "aria-label": `Dismiss ${text(item.title)}`, children: "Close" })) : null] }, item.id))) }));
+    }
+    return (_jsxs("aside", { ...rest, className: classNames("st-toast", `st-toast--${tone}`, className), role: "status", children: [_jsxs("div", { className: "st-toast__content", children: [_jsx("h2", { className: "st-toast__title", children: title }), message ? _jsx("p", { className: "st-toast__message", children: message }) : children] }), actions ? _jsx("div", { className: "st-toast__actions", children: actions }) : null, onClose ? _jsx("button", { type: "button", onClick: onClose, children: "Close" }) : null] }));
+}
+export function Toggle({ label, helperText, size = "md", className, ...rest }) {
+    return (_jsxs("label", { className: classNames("st-toggle", `st-toggle--${size}`, className), children: [_jsxs("span", { className: "st-toggle__row", children: [_jsx("span", { className: "st-toggle__label", children: label }), _jsx("input", { ...rest, className: "st-toggle__input", type: "checkbox", role: "switch", "aria-checked": rest.checked ?? rest.defaultChecked ?? undefined }), _jsx("span", { className: "st-toggle__track", children: _jsx("span", { className: "st-toggle__thumb" }) })] }), helperText ? _jsx("span", { className: "st-toggle__help", children: helperText }) : null] }));
+}
+export function Toggletip({ label, content, open: controlledOpen, placement = "top", children, className, ...rest }) {
+    const [open, setOpen] = useControlled(controlledOpen, false);
+    useEscape(open, () => setOpen(false));
+    return (_jsxs("span", { ...rest, className: classNames("st-toggletip", `st-toggletip--${placement}`, className), children: [_jsx("button", { type: "button", className: "st-toggletip__trigger", "aria-expanded": open, onClick: () => setOpen(!open), children: label }), open ? _jsx("span", { className: "st-toggletip__bubble", role: "status", children: _jsx("span", { className: "st-toggletip__content", children: content ?? children }) }) : null] }));
+}
+export function Tooltip({ content, placement = "top", children, className, ...rest }) {
+    const [open, setOpen] = React.useState(false);
+    const tooltipId = React.useId();
+    return (_jsxs("span", { ...rest, className: classNames("st-tooltip", `st-tooltip--${placement}`, className), onFocus: () => setOpen(true), onBlur: () => setOpen(false), onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: [_jsx("span", { className: "st-tooltip__trigger", children: children }), _jsx("span", { id: tooltipId, className: "st-tooltip__content", role: "tooltip", "aria-hidden": open ? "false" : "true", children: content })] }));
+}
+function TreeRows({ nodes, expanded, selectedId }) {
+    return (_jsx(_Fragment, { children: nodes.map((treeNode) => (_jsxs("div", { children: [_jsxs("div", { className: classNames("st-treeView__row", treeNode.id === selectedId && "st-treeView__row--selected", treeNode.disabled && "st-treeView__row--disabled"), children: [_jsx("span", { className: classNames("st-treeView__caret", !treeNode.children?.length && "st-treeView__caret--leaf", expanded.has(treeNode.id) && "st-treeView__caret--open"), children: "\u203A" }), _jsx("span", { className: "st-treeView__label", children: treeNode.label })] }), treeNode.children?.length && expanded.has(treeNode.id) ? _jsx(TreeRows, { nodes: treeNode.children, expanded: expanded, selectedId: selectedId }) : null] }, treeNode.id))) }));
+}
+export function TreeView({ nodes, selectedId, expandedIds, defaultExpandedIds = [], className, ...rest }) {
+    const expanded = new Set(expandedIds ?? defaultExpandedIds);
+    return (_jsx("div", { ...rest, className: classNames("st-treeView", className), role: "tree", children: _jsx(TreeRows, { nodes: nodes, expanded: expanded, selectedId: selectedId }) }));
+}
+export function UnorderedList({ items, className, ...rest }) {
+    return (_jsx("ul", { ...rest, className: classNames("st-unorderedList", className), children: items.map((item, index) => renderListItem(item, index, false)) }));
+}
+//# sourceMappingURL=catalog.js.map