@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/components/NavBar.js

@@ -1,31 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function NavBar({ brand, links = [], actions, linkAs, homeTo = "/" }) {
-    const Link = linkAs ?? "a";
-    const linkProps = (to) => (linkAs ? { to } : { href: to });
-    return (_jsxs("nav", { style: navStyle, children: [_jsx(Link, { ...linkProps(homeTo), style: brandStyle, children: brand }), _jsxs("div", { style: rightStyle, children: [links.map(link => (_jsx(Link, { ...linkProps(link.to), style: linkStyle, children: link.label }, link.to))), actions] })] }));
-}
-const navStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "0 1.5rem",
-    height: "56px",
-    borderBottom: "1px solid var(--color-border)",
-    backgroundColor: "var(--color-surface)",
-};
-const brandStyle = {
-    fontWeight: 600,
-    fontSize: "1rem",
-    color: "var(--color-text)",
-    textDecoration: "none",
-};
-const rightStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: "1.25rem",
-};
-const linkStyle = {
-    color: "var(--color-text-muted)",
-    textDecoration: "none",
-    fontSize: "0.875rem",
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from "../style/useStyle.js";
+export function NavBar({ children, className, style }) {
+    useStyle("navbar", navBarCss);
+    return (_jsx("nav", { className: className ? `rui-navbar ${className}` : "rui-navbar", style: style, children: children }));
+}
+/** Takes the free space, pushing the following children to the right. */
+function Spacer() {
+    return _jsx("span", { className: "rui-navbar-spacer", "aria-hidden": "true" });
+}
+NavBar.Spacer = Spacer;
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const navBarCss = `
+:where(.rui-navbar) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+  height: 56px;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+}
+:where(.rui-navbar-spacer) {
+  flex: 1;
+}
+:where(.rui-navbar img) {
+  display: block;
+  max-height: 32px;
+}
+:where(.rui-navbar) > :where(a, button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+}
+:where(.rui-navbar) > :where(a, button):hover {
+  color: var(--color-text);
+}
+:where(.rui-navbar) > :where([aria-current="page"], [aria-pressed="true"]) {
+  background-color: var(--color-border);
+  color: var(--color-text);
+}
+`;

package/dist/components/PageStatus.d.ts

@@ -1,15 +1,15 @@
-import type { ReactNode } from "react";
-export declare function PageMessage({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-export declare function LoadingMessage({ label }: {
-    label?: string;
-}): import("react").JSX.Element;
-type ErrorMessageProps = {
-    onRetry?: () => void;
-    label?: string;
-    retryLabel?: string;
+import type { HTMLAttributes, ReactNode } from "react";
+type PageStatusProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Buttons or links, e.g. a retry. */
+    action?: ReactNode;
 };
-export declare function ErrorMessage({ onRetry, label, retryLabel, }: ErrorMessageProps): import("react").JSX.Element;
+/**
+ * Loading, empty, error or success state, centered horizontally. Every slot is optional and
+ * no text is provided by default. Pass `role="status"` (loading) or `role="alert"` (error).
+ */
+export declare function PageStatus({ icon, title, description, action, className, children, ...props }: PageStatusProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PageStatus.d.ts.map

package/dist/components/PageStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageStatus.d.ts","sourceRoot":"","sources":["../../src/components/PageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhE;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAoB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQ1E;AAED,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAiF,EACjF,UAAwB,GACzB,EAAE,iBAAiB,+BAenB"}
+{"version":3,"file":"PageStatus.d.ts","sourceRoot":"","sources":["../../src/components/PageStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAW9G"}

package/dist/components/PageStatus.js

@@ -1,31 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "./Button.js";
-export function PageMessage({ children }) {
-    return _jsx("div", { style: containerStyle, children: children });
+import { statusCss } from "../style/statusCss.js";
+import { useStyle } from "../style/useStyle.js";
+/**
+ * Loading, empty, error or success state, centered horizontally. Every slot is optional and
+ * no text is provided by default. Pass `role="status"` (loading) or `role="alert"` (error).
+ */
+export function PageStatus({ icon, title, description, action, className, children, ...props }) {
+    useStyle("status", statusCss);
+    return (_jsxs("div", { ...props, className: className ? `rui-status ${className}` : "rui-status", children: [icon !== undefined && _jsx("div", { className: "rui-status-icon", children: icon }), title !== undefined && _jsx("p", { className: "rui-status-title", children: title }), description !== undefined && _jsx("p", { className: "rui-status-description", children: description }), action !== undefined && _jsx("div", { className: "rui-status-action", children: action }), children] }));
 }
-export function LoadingMessage({ label = "Loading..." }) {
-    return (_jsx(PageMessage, { children: _jsx("p", { style: mutedStyle, role: "status", children: label }) }));
-}
-export function ErrorMessage({ onRetry, label = "The content could not be loaded. Check your connection, then try again.", retryLabel = "Try again", }) {
-    return (_jsx(PageMessage, { children: _jsxs("div", { style: stackStyle, children: [_jsx("p", { style: mutedStyle, role: "alert", children: label }), onRetry && (_jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }))] }) }));
-}
-const containerStyle = {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "2rem",
-    backgroundColor: "var(--color-bg)",
-};
-const stackStyle = {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "1rem",
-    textAlign: "center",
-};
-const mutedStyle = {
-    margin: 0,
-    fontSize: "0.9375rem",
-    color: "var(--color-text-muted)",
-};

package/dist/components/Pagination.d.ts

@@ -0,0 +1,44 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { PaginationItem } from "./paginationItems.js";
+type PaginationLabels = {
+    nav?: string;
+    first?: string;
+    previous?: string;
+    next?: string;
+    last?: string;
+    page?: (page: number) => string;
+    jumpTo?: string;
+};
+type ItemProps = {
+    className: string;
+    "aria-current"?: "page";
+    "aria-label"?: string;
+    disabled?: boolean;
+    onClick: () => void;
+};
+type PaginationProps = {
+    /** 1-based. */
+    page: number;
+    /** Number of pages. */
+    total: number;
+    onPageChange: (page: number) => void;
+    /** Pages shown on each side of the current one. Defaults to 1. */
+    siblings?: number;
+    /** First / last buttons. Defaults to true. */
+    showEdges?: boolean;
+    /** Adds a number field to type the page to go to. */
+    jumpTo?: boolean;
+    /** Accessible names; the buttons only show symbols. */
+    labels?: PaginationLabels;
+    /** Renders an item yourself, e.g. as a router link; ellipses are not passed here. */
+    renderItem?: (item: Exclude<PaginationItem, {
+        type: "ellipsis";
+    }>, props: ItemProps) => ReactNode;
+    /** Current page color. `"--color-x"` reads the theme variable. Defaults to `"--color-primary"`. */
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Pagination({ page, total, onPageChange, siblings, showEdges, jumpTo, labels, renderItem, color, className, style, }: PaginationProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAMpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,KAAK,gBAAgB,GAAG;IACtB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,KAAK,SAAS,GAAG;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,eAAe;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uDAAuD;IACvD,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,cAAc,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,EAAE,KAAK,EAAE,SAAS,KAAK,SAAS,CAAA;IACjG,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAID,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAY,EACZ,SAAgB,EAChB,MAAc,EACd,MAAW,EACX,UAAU,EACV,KAAyB,EACzB,SAAS,EACT,KAAK,GACN,EAAE,eAAe,+BAiGjB"}

package/dist/components/Pagination.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { paginationCss } from "../style/paginationCss.js";
+import { resolveColor, resolveOnColor } from "../style/resolveColor.js";
+import { useStyle } from "../style/useStyle.js";
+import { isDev } from "../utils/isDev.js";
+import { getPaginationItems } from "./paginationItems.js";
+const SYMBOLS = { first: "«", previous: "‹", next: "›", last: "»" };
+export function Pagination({ page, total, onPageChange, siblings = 1, showEdges = true, jumpTo = false, labels = {}, renderItem, color = "--color-primary", className, style, }) {
+    useStyle("pagination", paginationCss);
+    const last = Math.max(1, total);
+    const current = Math.min(Math.max(1, page), last);
+    const [draft, setDraft] = useState("");
+    const missingLabels = !labels.previous || !labels.next;
+    useEffect(() => {
+        if (missingLabels && isDev()) {
+            console.warn("Pagination: pass labels.previous and labels.next, the buttons only show symbols.");
+        }
+    }, [missingLabels]);
+    const goTo = (target) => {
+        if (target !== current)
+            onPageChange(target);
+    };
+    const submitDraft = () => {
+        const target = Number.parseInt(draft, 10);
+        setDraft("");
+        if (Number.isNaN(target))
+            return;
+        goTo(Math.min(Math.max(1, target), last));
+    };
+    const onJumpKeyDown = (event) => {
+        if (event.key === "Enter")
+            submitDraft();
+    };
+    const items = getPaginationItems(current, last, siblings, showEdges);
+    return (_jsx("nav", { "aria-label": labels.nav, className: className ? `rui-pagination ${className}` : "rui-pagination", style: {
+            "--rui-pagination-accent": resolveColor(color),
+            "--rui-pagination-on": resolveOnColor(color),
+            ...style,
+        }, children: _jsxs("ul", { children: [items.map((item, index) => {
+                    if (item.type === "ellipsis") {
+                        return (_jsx("li", { children: _jsx("span", { className: "rui-pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`));
+                    }
+                    const isPage = item.type === "page";
+                    const props = {
+                        className: "rui-pagination-item",
+                        "aria-current": isPage && item.current ? "page" : undefined,
+                        "aria-label": isPage ? labels.page?.(item.page) : labels[item.type],
+                        disabled: isPage ? undefined : item.disabled,
+                        onClick: () => goTo(item.page),
+                    };
+                    const key = isPage ? `page-${item.page}` : item.type;
+                    return (_jsx("li", { children: renderItem ? (renderItem(item, props)) : (_jsx("button", { type: "button", ...props, children: isPage ? item.page : SYMBOLS[item.type] })) }, key));
+                }), jumpTo && (_jsx("li", { children: _jsx("input", { type: "number", className: "rui-input rui-pagination-jump", min: 1, max: last, inputMode: "numeric", placeholder: String(current), "aria-label": labels.jumpTo, value: draft, onChange: event => setDraft(event.target.value), onKeyDown: onJumpKeyDown, onBlur: submitDraft, 
+                        // Inline because rui-input's full width may be injected after this sheet.
+                        style: { width: "var(--rui-pagination-jump-width, 4.5rem)" } }) }))] }) }));
+}

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /** Numbers are pixels. Defaults to `"100%"`. */
+    width?: string | number;
+    /** Numbers are pixels. Defaults to `"1em"`. */
+    height?: string | number;
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to `--color-border`. */
+    color?: string;
+};
+/** Decorative placeholder: its shape (size, radius) is up to the project. */
+export declare function Skeleton({ width, height, color, className, style, ...props }: SkeletonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAM1D,KAAK,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpD,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,8GAA8G;IAC9G,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,EAAE,KAAc,EAAE,MAAc,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAiB5G"}

package/dist/components/Skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveColor } from "../style/resolveColor.js";
+import { loaderCss } from "../style/loaderCss.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+/** Decorative placeholder: its shape (size, radius) is up to the project. */
+export function Skeleton({ width = "100%", height = "1em", color, className, style, ...props }) {
+    useStyle("loader", loaderCss);
+    return (_jsx("div", { "aria-hidden": "true", ...props, className: className ? `rui-skeleton ${className}` : "rui-skeleton", style: {
+            width: toLength(width),
+            height: toLength(height),
+            "--rui-skeleton-color": color && resolveColor(color),
+            ...style,
+        } }));
+}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Numbers are pixels. Defaults to `"1em"`. */
+    size?: string | number;
+    /** Stroke width. Numbers are pixels. Defaults to `"0.15em"`. */
+    thickness?: string | number;
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to the text color. */
+    color?: string;
+    /** Accessible name. Defaults to `"Loading"`. */
+    label?: string;
+};
+export declare function Spinner({ size, thickness, color, label, className, style, ...props }: SpinnerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAM1D,KAAK,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IACpD,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAiB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAkB9G"}

package/dist/components/Spinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveColor } from "../style/resolveColor.js";
+import { loaderCss } from "../style/loaderCss.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+export function Spinner({ size, thickness, color, label = "Loading", className, style, ...props }) {
+    useStyle("loader", loaderCss);
+    return (_jsx("span", { role: "status", "aria-label": label, ...props, className: className ? `rui-spinner ${className}` : "rui-spinner", style: {
+            "--rui-spinner-size": toLength(size),
+            "--rui-spinner-thickness": toLength(thickness),
+            "--rui-spinner-color": color && resolveColor(color),
+            ...style,
+        } }));
+}

package/dist/components/Stack.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, HTMLAttributes } from "react";
+type StackProps = HTMLAttributes<HTMLDivElement> & {
+    /** Defaults to `"column"`. */
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /** Numbers are pixels. Defaults to `"0.75rem"`. */
+    gap?: string | number;
+    align?: CSSProperties["alignItems"];
+    justify?: CSSProperties["justifyContent"];
+    wrap?: boolean;
+};
+export declare function Stack({ direction, gap, align, justify, wrap, className, style, ...props }: StackProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Stack.d.ts.map

package/dist/components/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK1D,KAAK,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjD,8BAA8B;IAC9B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;IACzC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkBrG"}

package/dist/components/Stack.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { stackCss } from "../style/stackCss.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+export function Stack({ direction, gap, align, justify, wrap, className, style, ...props }) {
+    useStyle("stack", stackCss);
+    return (_jsx("div", { ...props, className: className ? `rui-stack ${className}` : "rui-stack", style: {
+            "--rui-stack-direction": direction,
+            "--rui-stack-gap": toLength(gap),
+            "--rui-stack-align": align,
+            "--rui-stack-justify": justify,
+            "--rui-stack-wrap": wrap === undefined ? undefined : wrap ? "wrap" : "nowrap",
+            ...style,
+        } }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from "react";
+export type SortState = {
+    key: string;
+    direction: "asc" | "desc";
+} | null;
+export type TableColumn<T> = {
+    key: string;
+    header: ReactNode;
+    /** Defaults to `row[key]`. */
+    cell?: (row: T) => ReactNode;
+    sortable?: boolean;
+    /** Ascending order. Defaults to numbers, dates, then strings (locale aware), empty values last. */
+    compare?: (a: T, b: T) => number;
+    /** Numbers are pixels. */
+    width?: string | number;
+    align?: "left" | "center" | "right";
+};
+type TableProps<T> = {
+    columns: TableColumn<T>[];
+    data: T[];
+    rowKey: keyof T | ((row: T) => string);
+    /** Controlled sort: the project sorts `data` itself (e.g. server side). */
+    sort?: SortState;
+    /** Uncontrolled sort: the table sorts `data`, starting with this. */
+    defaultSort?: SortState;
+    onSortChange?: (sort: SortState) => void;
+    /** Row selection by click or Space / Enter. Defaults to `"none"`. */
+    selectionMode?: "none" | "single" | "multiple";
+    /** Controlled selection (row keys). */
+    selected?: string[];
+    defaultSelected?: string[];
+    onSelectedChange?: (keys: string[]) => void;
+    /** Shown instead of the rows when `data` is empty. */
+    empty?: ReactNode;
+    /** Shows `loadingRows` skeleton rows instead of the data. */
+    loading?: boolean;
+    /** Defaults to 3. */
+    loadingRows?: number;
+    /** Defaults to `"horizontal"`. */
+    borders?: "horizontal" | "grid" | "none";
+    /** Header stays visible while scrolling; give the table (or its wrapper) a limited height. */
+    stickyHeader?: boolean;
+    /** Cell padding, e.g. `"0.375rem 0.625rem"`. */
+    density?: string;
+    /** Hover and selection tint. `"--color-x"` reads the theme variable. Defaults to `"--color-primary"`. */
+    color?: string;
+    /** Row hover tint; on by default when rows are selectable. */
+    hover?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Table<T>({ columns, data, rowKey, sort: controlledSort, defaultSort, onSortChange, selectionMode, selected: controlledSelected, defaultSelected, onSelectedChange, empty, loading, loadingRows, borders, stickyHeader, density, color, hover, className, style, }: TableProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhF,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAEzE,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,SAAS,CAAA;IACjB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IAChC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,KAAK,UAAU,CAAC,CAAC,IAAI;IACnB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACzB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;IACtC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qEAAqE;IACrE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACxC,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC9C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3C,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qBAAqB;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;IACxC,8FAA8F;IAC9F,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yGAAyG;IACzG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAkBD,wBAAgB,KAAK,CAAC,CAAC,EAAE,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EAAE,cAAc,EACpB,WAAkB,EAClB,YAAY,EACZ,aAAsB,EACtB,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,gBAAgB,EAChB,KAAK,EACL,OAAe,EACf,WAAe,EACf,OAAsB,EACtB,YAAoB,EACpB,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,UAAU,CAAC,CAAC,CAAC,+BAkJf"}

package/dist/components/Table.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { resolveColor } from "../style/resolveColor.js";
+import { tableCss } from "../style/tableCss.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+import { Skeleton } from "./Skeleton.js";
+const INTERACTIVE = "a, button, input, select, textarea, label, [role='button']";
+function defaultCompare(a, b) {
+    const emptyA = a === null || a === undefined || a === "";
+    const emptyB = b === null || b === undefined || b === "";
+    if (emptyA || emptyB)
+        return emptyA === emptyB ? 0 : emptyA ? 1 : -1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+}
+function nextSort(current, key) {
+    if (current?.key !== key)
+        return { key, direction: "asc" };
+    return current.direction === "asc" ? { key, direction: "desc" } : null;
+}
+export function Table({ columns, data, rowKey, sort: controlledSort, defaultSort = null, onSortChange, selectionMode = "none", selected: controlledSelected, defaultSelected = [], onSelectedChange, empty, loading = false, loadingRows = 3, borders = "horizontal", stickyHeader = false, density, color, hover, className, style, }) {
+    useStyle("table", tableCss);
+    const [uncontrolledSort, setUncontrolledSort] = useState(defaultSort);
+    const sortControlled = controlledSort !== undefined;
+    const sort = sortControlled ? controlledSort : uncontrolledSort;
+    const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+    const selected = controlledSelected ?? uncontrolledSelected;
+    const selectable = selectionMode !== "none";
+    const getKey = (row) => (typeof rowKey === "function" ? rowKey(row) : String(row[rowKey]));
+    // Depends on the sorted column's compare, not on `columns` (usually a new array each render).
+    const sortColumn = sort ? columns.find(c => c.key === sort.key) : undefined;
+    const sortKey = sortColumn?.key;
+    const sortCompare = sortColumn?.compare;
+    const direction = sort?.direction;
+    const rows = useMemo(() => {
+        if (sortControlled || sortKey === undefined)
+            return data;
+        const compare = sortCompare ?? ((a, b) => defaultCompare(a[sortKey], b[sortKey]));
+        const sign = direction === "asc" ? 1 : -1;
+        return [...data].sort((a, b) => sign * compare(a, b));
+    }, [data, sortKey, sortCompare, direction, sortControlled]);
+    const changeSort = (key) => {
+        const next = nextSort(sort, key);
+        if (!sortControlled)
+            setUncontrolledSort(next);
+        onSortChange?.(next);
+    };
+    const toggleRow = (key) => {
+        const isSelected = selected.includes(key);
+        const next = selectionMode === "single"
+            ? isSelected
+                ? []
+                : [key]
+            : isSelected
+                ? selected.filter(k => k !== key)
+                : [...selected, key];
+        if (controlledSelected === undefined)
+            setUncontrolledSelected(next);
+        onSelectedChange?.(next);
+    };
+    const onRowClick = (event, key) => {
+        // A click on a button or link inside a cell is its own action, not a selection.
+        const interactive = event.target.closest(INTERACTIVE);
+        if (interactive && event.currentTarget.contains(interactive))
+            return;
+        toggleRow(key);
+    };
+    const onRowKeyDown = (event, key) => {
+        if (event.target !== event.currentTarget || (event.key !== " " && event.key !== "Enter"))
+            return;
+        event.preventDefault();
+        toggleRow(key);
+    };
+    const cellStyle = (column) => column.align || column.width !== undefined ? { textAlign: column.align, width: toLength(column.width) } : undefined;
+    let body;
+    if (loading) {
+        body = Array.from({ length: loadingRows }, (_, i) => (_jsx("tr", { children: columns.map(column => (_jsx("td", { children: _jsx(Skeleton, {}) }, column.key))) }, i)));
+    }
+    else if (rows.length === 0) {
+        body = (_jsx("tr", { children: _jsx("td", { className: "rui-table-empty", colSpan: columns.length, children: empty }) }));
+    }
+    else {
+        body = rows.map(row => {
+            const key = getKey(row);
+            const isSelected = selectable && selected.includes(key);
+            return (_jsx("tr", { "aria-selected": selectable ? isSelected : undefined, tabIndex: selectable ? 0 : undefined, onClick: selectable ? event => onRowClick(event, key) : undefined, onKeyDown: selectable ? event => onRowKeyDown(event, key) : undefined, children: columns.map(column => (_jsx("td", { style: cellStyle(column), children: column.cell ? column.cell(row) : row[column.key] }, column.key))) }, key));
+        });
+    }
+    return (_jsx("div", { className: "rui-table-wrap", children: _jsxs("table", { className: className ? `rui-table ${className}` : "rui-table", "data-borders": borders, "data-sticky-header": stickyHeader || undefined, "data-hover": (hover ?? selectable) || undefined, "aria-multiselectable": selectionMode === "multiple" || undefined, "aria-busy": loading || undefined, style: {
+                "--rui-table-cell-padding": density,
+                "--rui-table-accent": color && resolveColor(color),
+                ...style,
+            }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(column => {
+                            const sorted = sort?.key === column.key ? sort.direction : undefined;
+                            return (_jsx("th", { scope: "col", "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: cellStyle(column), children: column.sortable ? (_jsx("button", { type: "button", className: "rui-table-sort", onClick: () => changeSort(column.key), children: column.header })) : (column.header) }, column.key));
+                        }) }) }), _jsx("tbody", { children: body })] }) }));
+}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+type TabsProps = {
+    /** Controlled mode: the active tab's value. */
+    value?: string;
+    /** Uncontrolled mode: the tab active on mount. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Defaults to `"underline"`. */
+    variant?: "underline" | "pill";
+    /** Defaults to `"horizontal"`. */
+    orientation?: "horizontal" | "vertical";
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to `"--color-primary"`. */
+    color?: string;
+    /** Keeps inactive panels mounted (and hidden) instead of unmounting them. */
+    keepMounted?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+};
+export declare function Tabs({ value: controlledValue, defaultValue, onChange, variant, orientation, color, keepMounted, className, style, children, }: TabsProps): import("react").JSX.Element;
+export declare namespace Tabs {
+    var List: ({ className, style, onKeyDown, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    var Tab: ({ value, disabled, onClick, ...props }: TabProps) => import("react").JSX.Element;
+    var Panel: ({ value, ...props }: PanelProps) => import("react").JSX.Element | null;
+}
+type TabProps = HTMLAttributes<HTMLButtonElement> & {
+    value: string;
+    disabled?: boolean;
+};
+type PanelProps = HTMLAttributes<HTMLDivElement> & {
+    value: string;
+};
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AA4BpF,KAAK,SAAS,GAAG;IACf,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,iCAAiC;IACjC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC9B,kCAAkC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,iHAAiH;IACjH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,OAAqB,EACrB,WAA0B,EAC1B,KAAyB,EACzB,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,SAAS,+BAoBX;yBA/Be,IAAI;0DAqCqC,cAAc,CAAC,cAAc,CAAC;sDA0ClC,QAAQ;qCAyBzB,UAAU;;AA9B9C,KAAK,QAAQ,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAClD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyBD,KAAK,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA"}