@rackbops/ui-react 0.2.14 → 0.2.16

package/dist/DataTable.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+export interface DataTableColumn<T> {
+    /** Unique among this table's columns; also the sort key passed back via onSort/defaultSortKey. */
+    key: string;
+    header: ReactNode;
+    render: (row: T) => ReactNode;
+    /** Right-aligns the cell (rb-num, matching the existing numeric-column class). */
+    numeric?: boolean;
+    /** Omit to make the column unsortable. Returning a number sorts numerically; a string sorts
+     * lexicographically (case-insensitive). */
+    sortValue?: (row: T) => string | number;
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    /** Groups rows under a labelled header row instead of one flat body. Sorting (if active)
+     * applies within each group, not across the whole table. */
+    groupBy?: (row: T) => string;
+    /** Known group labels in display order; any group present in the data but not listed here
+     * is appended after, sorted alphabetically. Ignored when groupBy is omitted. */
+    groupOrder?: string[];
+    defaultSortKey?: string;
+    defaultSortDirection?: "asc" | "desc";
+    /** Sticky header within a scrolling wrapper -- for a table taller than its container. */
+    sticky?: boolean;
+    emptyMessage?: ReactNode;
+}
+/**
+ * A sortable, optionally-grouped data table on the `rb-table` contract (`rb-table`, `th`, `td`,
+ * `rb-num`) plus three additions this component itself introduces: `rb-table__group-row` (a
+ * labelled group header row), `rb-table__sort` (the clickable sort-header button), and
+ * `rb-table-scroll` (a sticky-header scroll wrapper for a table taller than its container).
+ * Generic over the row type and driven entirely by the `columns`/`rows` props -- no app-specific
+ * knowledge. Originally built for Kenzen (design.md section 9's decision tables); moved here so
+ * any app on this design system can use it.
+ */
+export declare function DataTable<T>({ columns, rows, rowKey, groupBy, groupOrder, defaultSortKey, defaultSortDirection, sticky, emptyMessage, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/DataTable.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "./cx.js";
+function compareBy(column, direction) {
+    const sign = direction === "asc" ? 1 : -1;
+    return (a, b) => {
+        const av = column.sortValue?.(a) ?? "";
+        const bv = column.sortValue?.(b) ?? "";
+        if (typeof av === "number" && typeof bv === "number") {
+            return (av - bv) * sign;
+        }
+        return String(av).localeCompare(String(bv), undefined, { sensitivity: "base" }) * sign;
+    };
+}
+function sortRows(rows, columns, sort) {
+    if (!sort) {
+        return rows;
+    }
+    const column = columns.find((c) => c.key === sort.key);
+    if (!column?.sortValue) {
+        return rows;
+    }
+    return [...rows].sort(compareBy(column, sort.direction));
+}
+/** Orders group labels: those in `groupOrder` first (in that order, skipping ones with no
+ * rows), then any remaining present-in-data label sorted alphabetically. */
+function orderGroups(present, groupOrder) {
+    if (!groupOrder) {
+        return [...present].sort((a, b) => a.localeCompare(b));
+    }
+    const presentSet = new Set(present);
+    const known = groupOrder.filter((g) => presentSet.has(g));
+    const knownSet = new Set(known);
+    const rest = present.filter((g) => !knownSet.has(g)).sort((a, b) => a.localeCompare(b));
+    return [...known, ...rest];
+}
+/**
+ * A sortable, optionally-grouped data table on the `rb-table` contract (`rb-table`, `th`, `td`,
+ * `rb-num`) plus three additions this component itself introduces: `rb-table__group-row` (a
+ * labelled group header row), `rb-table__sort` (the clickable sort-header button), and
+ * `rb-table-scroll` (a sticky-header scroll wrapper for a table taller than its container).
+ * Generic over the row type and driven entirely by the `columns`/`rows` props -- no app-specific
+ * knowledge. Originally built for Kenzen (design.md section 9's decision tables); moved here so
+ * any app on this design system can use it.
+ */
+export function DataTable({ columns, rows, rowKey, groupBy, groupOrder, defaultSortKey, defaultSortDirection = "asc", sticky, emptyMessage, }) {
+    const [sort, setSort] = useState(defaultSortKey ? { key: defaultSortKey, direction: defaultSortDirection } : null);
+    if (rows.length === 0) {
+        return _jsx("p", { children: emptyMessage ?? "No data." });
+    }
+    function onHeaderClick(column) {
+        if (!column.sortValue) {
+            return;
+        }
+        setSort((current) => {
+            if (current?.key !== column.key) {
+                return { key: column.key, direction: "asc" };
+            }
+            return { key: column.key, direction: current.direction === "asc" ? "desc" : "asc" };
+        });
+    }
+    const groups = groupBy
+        ? (() => {
+            const byGroup = new Map();
+            for (const row of rows) {
+                const label = groupBy(row);
+                const bucket = byGroup.get(label);
+                if (bucket) {
+                    bucket.push(row);
+                }
+                else {
+                    byGroup.set(label, [row]);
+                }
+            }
+            return orderGroups([...byGroup.keys()], groupOrder).map((label) => {
+                // Safe: label came from byGroup's own keys.
+                const groupRows = byGroup.get(label);
+                if (!groupRows) {
+                    throw new Error(`unreachable: no rows for group ${label}`);
+                }
+                return { label, rows: sortRows(groupRows, columns, sort) };
+            });
+        })()
+        : [{ label: null, rows: sortRows(rows, columns, sort) }];
+    const table = (_jsxs("table", { className: "rb-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => {
+                        const isSorted = sort?.key === column.key;
+                        // `aria-sort` claims a table-wide order; grouping only sorts within each group, so
+                        // asserting it there would tell a screen-reader user something false.
+                        const ariaSort = isSorted && !groupBy
+                            ? sort.direction === "asc"
+                                ? "ascending"
+                                : "descending"
+                            : undefined;
+                        return (_jsx("th", { scope: "col", "aria-sort": ariaSort, children: column.sortValue ? (_jsxs("button", { type: "button", className: "rb-table__sort", onClick: () => onHeaderClick(column), children: [column.header, isSorted && (_jsx("span", { "aria-hidden": "true", children: sort.direction === "asc" ? " ▲" : " ▼" }))] })) : (column.header) }, column.key));
+                    }) }) }), _jsx("tbody", { children: groups.map((group) => (_jsx(GroupRows, { group: group, columns: columns, rowKey: rowKey }, group.label ?? "__ungrouped__"))) })] }));
+    return sticky ? _jsx("div", { className: "rb-table-scroll", children: table }) : table;
+}
+function GroupRows({ group, columns, rowKey, }) {
+    return (_jsxs(_Fragment, { children: [group.label !== null && (_jsx("tr", { className: "rb-table__group-row", children: _jsx("td", { colSpan: columns.length, children: group.label }) })), group.rows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { className: cx(column.numeric && "rb-num"), children: column.render(row) }, column.key))) }, rowKey(row))))] }));
+}

package/dist/Dialog.d.ts

@@ -2,6 +2,11 @@ import { type DialogHTMLAttributes, type ReactNode, type RefAttributes } from "r
 export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title" | "onClose">, RefAttributes<HTMLDialogElement> {
     open: boolean;
     onClose: () => void;
+    /**
+     * Renders as a heading in `.rb-dialog__title` (linked via aria-labelledby), replacing the
+     * native HTML `title` tooltip attribute -- there's no way to set a real tooltip through
+     * this component.
+     */
     title?: ReactNode;
     actions?: ReactNode;
 }

package/dist/LinksIndex.d.ts

@@ -1,6 +1,11 @@
 import { type HTMLAttributes, type RefAttributes } from "react";
 export interface LinkUrl {
     label: string;
+    /**
+     * Rendered as-is in an <a href> -- consumer-authored/trusted data (the app/site URLs you
+     * configure), not sanitized against `javascript:`-style schemes. Don't feed this untrusted
+     * input without validating the scheme first.
+     */
     url: string;
 }
 export interface LinkCategory {
@@ -20,6 +25,12 @@ export interface LinkItem {
 export interface LinksIndexProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     categories: LinkCategory[];
     links: LinkItem[];
+    /**
+     * Heading level for each category label; each card's own heading renders one level deeper
+     * (clamped to h6). Set this to match whatever heading LinksIndex is embedded under, so
+     * heading order stays sequential instead of skipping or repeating a level. Defaults to 2.
+     */
+    level?: 2 | 3 | 4 | 5 | 6;
 }
 /**
  * A generic, data-driven grouped index of apps/sites. Iterates `categories` in order, each a group

package/dist/LinksIndex.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, } from "react";
 import { Card } from "./Card.js";
 import { Badge } from "./feedback.js";
 // Structural inline layout only -- the card/badge surfaces + colour come from @rackbops/styles
@@ -17,23 +17,29 @@ const listStyle = { listStyle: "none", margin: 0, padding: 0 };
 // External = an http(s) or protocol-relative (`//host`) url -> opens in a new tab; anything else
 // (relative, mailto:, tel:, ...) stays a plain in-page link.
 const isExternal = (url) => /^(https?:)?\/\//i.test(url);
-function LinkCard({ link }) {
-    return (_jsxs(Card, { children: [_jsxs("h3", { children: [link.name, link.monitored ? (_jsxs(_Fragment, { children: [" ", _jsx(Badge, { variant: "success", children: "monitored" })] })) : null] }), link.description ? _jsx("p", { children: link.description }) : null, _jsx("ul", { style: listStyle, children: link.urls.map((u) => (_jsx("li", { children: isExternal(u.url) ? (_jsx("a", { href: u.url, target: "_blank", rel: "noreferrer noopener", children: u.label })) : (_jsx("a", { href: u.url, children: u.label })) }, u.url))) }), link.host ? _jsx("p", { children: link.host }) : null] }));
+function LinkCard({ link, level }) {
+    const Heading = `h${level}`;
+    return (_jsxs(Card, { children: [_jsxs(Heading, { children: [link.name, link.monitored ? (_jsxs(_Fragment, { children: [" ", _jsx(Badge, { variant: "success", children: "monitored" })] })) : null] }), link.description ? _jsx("p", { children: link.description }) : null, _jsx("ul", { style: listStyle, children: link.urls.map((u) => (
+                // Two urls on one link can share a `url` with different `label`s ("prod" /
+                // "canonical") -- key on the pair, not the url alone, so they don't collide.
+                _jsx("li", { children: isExternal(u.url) ? (_jsx("a", { href: u.url, target: "_blank", rel: "noreferrer noopener", children: u.label })) : (_jsx("a", { href: u.url, children: u.label })) }, `${u.label}::${u.url}`))) }), link.host ? _jsx("p", { children: link.host }) : null] }));
 }
-function Group({ label, items }) {
-    return (_jsxs("section", { children: [_jsx("h2", { children: label }), _jsx("div", { style: gridStyle, children: items.map((link) => (_jsx(LinkCard, { link: link }, link.name))) })] }));
+function Group({ label, items, level, }) {
+    const Heading = `h${level}`;
+    const cardLevel = (level < 6 ? level + 1 : 6);
+    return (_jsxs("section", { children: [_jsx(Heading, { children: label }), _jsx("div", { style: gridStyle, children: items.map((link) => (_jsx(LinkCard, { link: link, level: cardLevel }, link.name))) })] }));
 }
 /**
  * A generic, data-driven grouped index of apps/sites. Iterates `categories` in order, each a group
  * of `rb-card`s; links whose `category` is not listed collect into a trailing "Other" group. No
  * router assumed -- external URLs open in a new tab. Themed by the consumer's `data-rb-style`.
  */
-export const LinksIndex = forwardRef(function LinksIndex({ categories, links, className, ...rest }, ref) {
+export const LinksIndex = forwardRef(function LinksIndex({ categories, links, className, level = 2, ...rest }, ref) {
     const known = new Set(categories.map((c) => c.id));
     const other = links.filter((l) => !known.has(l.category));
     return (_jsxs("div", { ref: ref, className: className, ...rest, children: [categories.map((cat) => {
                 const items = links.filter((l) => l.category === cat.id);
-                return items.length > 0 ? _jsx(Group, { label: cat.label, items: items }, cat.id) : null;
-            }), other.length > 0 ? _jsx(Group, { label: "Other", items: other }) : null] }));
+                return items.length > 0 ? (_jsx(Group, { label: cat.label, items: items, level: level }, cat.id)) : null;
+            }), other.length > 0 ? _jsx(Group, { label: "Other", items: other, level: level }) : null] }));
 });
 LinksIndex.displayName = "LinksIndex";

package/dist/NavRail.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
-export interface NavRailItem {
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
+export interface NavRailItem extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "id" | "href"> {
     /** Matched against `activeId`; also used as the React list key. */
     id: string;
     label: ReactNode;
     href?: string;
+    [dataAttr: `data-${string}`]: unknown;
 }
 export interface NavRailProps extends HTMLAttributes<HTMLElement>, RefAttributes<HTMLElement> {
     items: NavRailItem[];
@@ -14,6 +15,8 @@ export interface NavRailProps extends HTMLAttributes<HTMLElement>, RefAttributes
 /**
  * A vertical nav container (.rb-nav-rail) rendering one NavLink per item.
  * Controlled by the caller via `activeId`, same as NavLink's own `active` prop --
- * this component owns no state of its own.
+ * this component owns no state of its own. Any extra props on an item (onClick, target,
+ * rel, aria-*, data-*, className, ...) forward onto that item's own NavLink/<a> -- e.g. to
+ * intercept a click for a client router while still setting a real `href`.
  */
 export declare const NavRail: import("react").ForwardRefExoticComponent<Omit<NavRailProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/NavRail.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, } from "react";
 import { cx } from "./cx.js";
 import { NavLink } from "./NavLink.js";
 /**
  * A vertical nav container (.rb-nav-rail) rendering one NavLink per item.
  * Controlled by the caller via `activeId`, same as NavLink's own `active` prop --
- * this component owns no state of its own.
+ * this component owns no state of its own. Any extra props on an item (onClick, target,
+ * rel, aria-*, data-*, className, ...) forward onto that item's own NavLink/<a> -- e.g. to
+ * intercept a click for a client router while still setting a real `href`.
  */
 export const NavRail = forwardRef(function NavRail({ items, activeId, className, ...rest }, ref) {
-    return (_jsx("nav", { ref: ref, className: cx("rb-nav-rail", className), ...rest, children: items.map((item) => (_jsx(NavLink, { href: item.href, active: item.id === activeId, children: item.label }, item.id))) }));
+    return (_jsx("nav", { ref: ref, className: cx("rb-nav-rail", className), ...rest, children: items.map(({ id, label, href, ...itemRest }) => (_jsx(NavLink, { href: href, active: id === activeId, ...itemRest, children: label }, id))) }));
 });
 NavRail.displayName = "NavRail";

package/dist/Tabs.d.ts

@@ -1,13 +1,12 @@
-import { type ReactNode, type RefAttributes } from "react";
+import { type HTMLAttributes, type ReactNode, type RefAttributes } from "react";
 export interface TabItem {
     id: string;
     label: ReactNode;
     content: ReactNode;
 }
-export interface TabsProps extends RefAttributes<HTMLDivElement> {
+export interface TabsProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     items: TabItem[];
     /** Initially active tab id; defaults to the first item. */
     defaultId?: string;
-    className?: string;
 }
 export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useRef, useState, } from "react";
 import { cx } from "./cx.js";
-export const Tabs = forwardRef(function Tabs({ items, defaultId, className }, ref) {
+export const Tabs = forwardRef(function Tabs({ items, defaultId, className, ...rest }, ref) {
     const base = useId();
     const [active, setActive] = useState(defaultId ?? items[0]?.id);
     // Fall back to the first tab if `active` names no item, so exactly one tab is
@@ -26,7 +26,13 @@ export const Tabs = forwardRef(function Tabs({ items, defaultId, className }, re
         // Move focus with the selection — the whole point of the roving tabindex.
         tabRefs.current[next]?.focus();
     };
-    return (_jsxs("div", { ref: ref, className: className, children: [_jsx("div", { className: "rb-tabs", role: "tablist", children: items.map((t, idx) => {
+    return (
+    // The outer <div> is a plain structural wrapper -- an ARIA tablist should
+    // contain only `tab` children, so the tabpanels below live as its
+    // siblings instead. That's the element `ref` points to; className and
+    // arbitrary props (aria-label, data-testid, id, ...) belong on the actual
+    // role="tablist" element, which is what they're meant to reach.
+    _jsxs("div", { ref: ref, children: [_jsx("div", { className: cx("rb-tabs", className), role: "tablist", ...rest, children: items.map((t, idx) => {
                     const selected = t.id === activeId;
                     return (_jsx("button", { ref: (el) => {
                             tabRefs.current[idx] = el;

package/dist/Tabstrip.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+export interface TabstripTab {
+    /** Unique among this strip's tabs; what `onSelect` reports and `selected` matches. */
+    id: string;
+    label: ReactNode;
+    /** Optional trailing count/badge, e.g. how many items the tab holds. */
+    badge?: ReactNode;
+}
+export interface TabstripProps {
+    tabs: TabstripTab[];
+    selected: string;
+    onSelect: (id: string) => void;
+    /** Names the strip for assistive tech, e.g. "View". */
+    label: string;
+}
+/**
+ * A controlled tab strip on the `rb-tabstrip` contract -- the design system's existing
+ * top-level-view-nav pattern (bordered pill buttons; the active tab gets accent text, a wash,
+ * and an accent-tinted border), previously a two-theme "extra" (arcane-obsidian/arcane-parchment)
+ * with no React wrapper. This component gives every theme the same pattern via shared tokens,
+ * and adds `.rb-tabstrip__badge` to the contract for an optional trailing count.
+ *
+ * Controlled rather than self-stateful so the selected tab can be lifted -- a caller that wants
+ * it in the URL, or restored across a data reload, cannot do that with internal state.
+ *
+ * Implements the ARIA tabs pattern: `role="tablist"` with roving `tabIndex`, so the strip is a
+ * SINGLE tab stop and arrow keys move between tabs -- a plain row of buttons would instead make
+ * a keyboard user tab through every one to reach the content. Left/Right wrap at both ends, and
+ * Home/End jump to the first/last, which is what that pattern specifies. `aria-controls` is
+ * deliberately not asserted, since this component cannot know the panel's id and claiming a
+ * relationship that does not exist would mislead a screen-reader user.
+ */
+export declare function Tabstrip({ tabs, selected, onSelect, label }: TabstripProps): import("react").JSX.Element;

package/dist/Tabstrip.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A controlled tab strip on the `rb-tabstrip` contract -- the design system's existing
+ * top-level-view-nav pattern (bordered pill buttons; the active tab gets accent text, a wash,
+ * and an accent-tinted border), previously a two-theme "extra" (arcane-obsidian/arcane-parchment)
+ * with no React wrapper. This component gives every theme the same pattern via shared tokens,
+ * and adds `.rb-tabstrip__badge` to the contract for an optional trailing count.
+ *
+ * Controlled rather than self-stateful so the selected tab can be lifted -- a caller that wants
+ * it in the URL, or restored across a data reload, cannot do that with internal state.
+ *
+ * Implements the ARIA tabs pattern: `role="tablist"` with roving `tabIndex`, so the strip is a
+ * SINGLE tab stop and arrow keys move between tabs -- a plain row of buttons would instead make
+ * a keyboard user tab through every one to reach the content. Left/Right wrap at both ends, and
+ * Home/End jump to the first/last, which is what that pattern specifies. `aria-controls` is
+ * deliberately not asserted, since this component cannot know the panel's id and claiming a
+ * relationship that does not exist would mislead a screen-reader user.
+ */
+export function Tabstrip({ tabs, selected, onSelect, label }) {
+    function onKeyDown(event) {
+        const index = tabs.findIndex((t) => t.id === selected);
+        if (index === -1) {
+            return;
+        }
+        let next = null;
+        switch (event.key) {
+            case "ArrowRight":
+                next = (index + 1) % tabs.length;
+                break;
+            case "ArrowLeft":
+                next = (index - 1 + tabs.length) % tabs.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const target = tabs[next];
+        if (target) {
+            event.preventDefault();
+            onSelect(target.id);
+        }
+    }
+    // When `selected` matches no tab (a caller mid-reload passing a stale id), every tab would
+    // otherwise get tabIndex=-1 and the whole strip would drop out of the tab order entirely --
+    // a keyboard trap strictly worse than the inert arrow keys above. Fall back to making the
+    // first tab the strip's single tab stop, so it stays reachable.
+    const hasSelected = tabs.some((t) => t.id === selected);
+    return (_jsx("div", { role: "tablist", "aria-label": label, className: "rb-tabstrip", onKeyDown: onKeyDown, children: tabs.map((tab, index) => {
+            const isSelected = tab.id === selected;
+            const isTabStop = hasSelected ? isSelected : index === 0;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, 
+                // Roving tabIndex: exactly one tab is reachable by Tab, so the whole strip is one
+                // stop and the arrow keys above do the moving within it.
+                tabIndex: isTabStop ? 0 : -1, className: cx("rb-tabstrip__tab", isSelected && "rb-tabstrip__tab--active"), onClick: () => onSelect(tab.id), children: [tab.label, tab.badge !== undefined && _jsx("span", { className: "rb-tabstrip__badge", children: tab.badge })] }, tab.id));
+        }) }));
+}

package/dist/feedback.d.ts

@@ -6,8 +6,13 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & RefAttributes<HTMLSpanElement>>;
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, RefAttributes<HTMLDivElement> {
     variant?: SemanticVariant;
+    /**
+     * Renders as a heading in `.rb-alert__title`, replacing the native HTML `title` tooltip
+     * attribute -- there's no way to set a real tooltip through this component.
+     */
     title?: ReactNode;
 }
+/** A status banner (.rb-alert); `role="alert"` announces it to screen readers on mount/update. */
 export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export interface ProgressProps extends ProgressHTMLAttributes<HTMLProgressElement>, RefAttributes<HTMLProgressElement> {
 }

package/dist/feedback.js

@@ -5,6 +5,7 @@ export const Badge = forwardRef(function Badge({ variant, className, ...rest },
     return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
 });
 Badge.displayName = "Badge";
+/** A status banner (.rb-alert); `role="alert"` announces it to screen readers on mount/update. */
 export const Alert = forwardRef(function Alert({ variant, title, className, children, ...rest }, ref) {
     return (_jsxs("div", { ref: ref, role: "alert", className: cx("rb-alert", variant && `rb-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("div", { className: "rb-alert__title", children: title }), children] }));
 });

package/dist/form.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, RefAttributes<HTMLInputElement> {
 }
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
@@ -17,6 +17,10 @@ export declare const Field: import("react").ForwardRefExoticComponent<Omit<Field
 export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">, RefAttributes<HTMLInputElement> {
     /** Optional label text; when set the control is wrapped in a .rb-choice row. */
     label?: ReactNode;
+    /** Styles the .rb-choice row itself (e.g. margins, flex alignment) -- `className` still styles the control. Only used when `label` is set. */
+    wrapperClassName?: string;
+    /** Styles the .rb-choice row itself; `style` still styles the control. Only used when `label` is set. */
+    wrapperStyle?: CSSProperties;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;
 export declare const Radio: import("react").ForwardRefExoticComponent<Omit<ChoiceProps, "ref"> & RefAttributes<HTMLInputElement>>;

package/dist/form.js

@@ -22,20 +22,20 @@ export const Field = forwardRef(function Field({ className, ...rest }, ref) {
 });
 Field.displayName = "Field";
 /** A checkbox/radio/switch control, optionally wrapped with its label. */
-function ChoiceControl({ label, control }) {
+function ChoiceControl({ label, control, wrapperClassName, wrapperStyle, }) {
     if (label === undefined)
         return _jsx(_Fragment, { children: control });
-    return (_jsxs("label", { className: "rb-choice", children: [control, label] }));
+    return (_jsxs("label", { className: cx("rb-choice", wrapperClassName), style: wrapperStyle, children: [control, label] }));
 }
-export const Checkbox = forwardRef(function Checkbox({ label, className, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "checkbox", className: cx("rb-checkbox", className), ...rest }) }));
+export const Checkbox = forwardRef(function Checkbox({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "checkbox", className: cx("rb-checkbox", className), ...rest }) }));
 });
 Checkbox.displayName = "Checkbox";
-export const Radio = forwardRef(function Radio({ label, className, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "radio", className: cx("rb-radio", className), ...rest }) }));
+export const Radio = forwardRef(function Radio({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "radio", className: cx("rb-radio", className), ...rest }) }));
 });
 Radio.displayName = "Radio";
-export const Switch = forwardRef(function Switch({ label, className, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, control: _jsx("input", { ref: ref, type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
+export const Switch = forwardRef(function Switch({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
 });
 Switch.displayName = "Switch";

package/dist/index.d.ts

@@ -7,5 +7,7 @@ export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type
 export { Dialog, type DialogProps } from "./Dialog.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
 export { Stepper, type StepperProps, type StepperStep } from "./Stepper.js";
+export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable.js";
+export { Tabstrip, type TabstripProps, type TabstripTab } from "./Tabstrip.js";
 export { LinksIndex, type LinksIndexProps, type LinkItem, type LinkCategory, type LinkUrl, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/dist/index.js

@@ -7,5 +7,7 @@ export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
 export { Tabs } from "./Tabs.js";
 export { Stepper } from "./Stepper.js";
+export { DataTable } from "./DataTable.js";
+export { Tabstrip } from "./Tabstrip.js";
 export { LinksIndex, } from "./LinksIndex.js";
 export { cx } from "./cx.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {