@apliteni/apliteni-ui 0.7.2 → 0.8.0

package/README.md

@@ -1,23 +1,35 @@
 # @apliteni/apliteni-ui
 
+[![npm](https://img.shields.io/npm/v/@apliteni/apliteni-ui?color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@apliteni/apliteni-ui)
+[![license: MIT](https://img.shields.io/npm/l/@apliteni/apliteni-ui?color=3b9dff)](./LICENSE)
+[![live: ui.apli.tech](https://img.shields.io/badge/live-ui.apli.tech-9b5dff)](https://ui.apli.tech)
+
 The Apliteni design system & UI kit — one source of UI for every product surface
 (the strategy deck, the text portal, `/account`, the operating model, and whatever
 ships next).
 
-Framework-agnostic **HTML + CSS**, driven entirely by design tokens, themeable dark
-and light with **accent sub-themes**. Showcased and reviewed in **Storybook**, and
-published on **ui.apli.tech**.
+Two layers over one set of design tokens: framework-agnostic **HTML + CSS**, and
+**React components** for stateful surfaces. Themeable dark and light with **accent
+sub-themes**. Showcased and reviewed in **Storybook**, and published on **ui.apli.tech**.
 
 - 🎨 **Live site + Storybook** → [ui.apli.tech](https://ui.apli.tech)
 - 📦 **Package** → [`@apliteni/apliteni-ui`](https://www.npmjs.com/package/@apliteni/apliteni-ui) (public npm)
+- ⚛️ **React components** → `@apliteni/apliteni-ui/react` — a subpath of the same package, source in [`react/`](./react)
+
+## HTML + CSS *and* React
+
+The core is HTML + CSS because the strategy portal (`apliteni/strategy`, `viz/`)
+server-renders HTML strings (`.mjs` modules), not a component framework. So the kit
+ships the same shape: token CSS + component CSS + tiny HTML-string factories. That
+makes it a *true* single source of truth — the portal imports it with no rewrite and
+no framework drift. Storybook (`@storybook/html-vite`) renders exactly what ships.
 
-## Why HTML + CSS (not React)
+React sits on top for surfaces that hold real client state — dashboards, tables,
+filters, forms. Those components render the same `.ui-*` classes and the same tokens
+as the vanilla kit, so the two layers can't drift.
 
-The strategy portal (`apliteni/strategy`, `viz/`) server-renders HTML strings
-(`.mjs` modules), not a component framework. So the kit ships the same shape: token
-CSS + component CSS + tiny HTML-string factories. That makes it a *true* single source
-of truth — the portal imports it with no rewrite and no framework drift. Storybook
-(`@storybook/html-vite`) renders exactly what ships.
+**Which one:** does the surface hold meaningful client state? No → the HTML-string
+factories below. Yes → the [React components](#react-components-stateful-surfaces).
 
 ## Install
 
@@ -67,6 +79,34 @@ import { tokensCss, topbarCss, cssText } from '@apliteni/apliteni-ui/inline';
 // …inline tokensCss + topbarCss into the <style> you serve.
 ```
 
+## React components (stateful surfaces)
+
+`DataTable`, `Modal`, `Button`, `Badge`, `Card` and `Icon` — same `.ui-*` classes,
+same tokens, TypeScript types included. They ship as a **subpath of this package**,
+not as a package of their own: one install, one version, one pin.
+
+**You install React yourself.** The kit declares no dependency on it — not a
+dependency, not a peer — so npm will not warn you and will not pull it in. Bring your
+own `react` and `react-dom`, version 18 or newer:
+
+```bash
+npm install @apliteni/apliteni-ui react react-dom
+```
+
+Miss them and the import of `@apliteni/apliteni-ui/react` fails at build or at
+runtime with a module-not-found error for `react`. Everything else in the kit is
+unaffected, so a plain HTML consumer installs the kit alone and never gets React in
+its tree.
+
+```tsx
+import '@apliteni/apliteni-ui/css';        // kit tokens + .ui-* classes
+import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (modal, pager)
+import { DataTable, Modal } from '@apliteni/apliteni-ui/react';
+```
+
+The source lives in [`react/`](./react) — a private workspace with its own build
+(tsup) and Storybook on port 6007. Details in [`react/README.md`](./react/README.md).
+
 ## Theming
 
 Theme is a `data-theme="dark|light"` attribute on `<html>`; accent is an orthogonal
@@ -98,7 +138,9 @@ src/
   assets/                # brand mark (seedling) + line-icon set
   components/            # HTML-string factories: button(), card(), badge(), topbar()…
 stories/                 # Storybook: Foundations, Components, Apps
-site/                    # ui.apli.tech landing page + static server
+site/                    # ui.apli.tech landing page (static site build)
+react/                   # React components — private workspace, built to react/dist/
+  dist/                  #   tsup output; shipped as …/react and …/react/css
 ```
 
 ## Develop
@@ -107,12 +149,21 @@ site/                    # ui.apli.tech landing page + static server
 npm install
 npm run storybook          # http://localhost:6006
 npm run build-storybook    # -> storybook-static/
-node site/build.mjs        # -> site/public/ (landing + kit.css)
+node site/build.mjs        # -> site/public/ (landing + kit.css + /storybook)
+```
+
+The React components build and test through the workspace (`npm install` at the repo
+root covers them — there is no second install):
+
+```bash
+npm run storybook -w react   # http://localhost:6007
+npm test -w react            # vitest
+npm run build                # tsup -> react/dist/ (also runs on prepare)
 ```
 
 ## Publish (public npm)
 
-Versioned publish runs from CI on a GitHub Release (needs the `NPM_TOKEN` secret):
+Versioned publish runs from CI on a GitHub Release:
 
 ```bash
 npm version patch          # or minor / major — bumps package.json + tags
@@ -120,17 +171,34 @@ git push --follow-tags
 gh release create v$(node -p "require('./package.json').version") --generate-notes
 ```
 
-The **Release** workflow (`.github/workflows/release.yml`) then publishes with the
-built-in `GITHUB_TOKEN` (`packages: write`). No manual `npm publish` needed.
+The **Release** workflow (`.github/workflows/release.yml`) then publishes to the public
+npm registry over npm Trusted Publishing (OIDC) — there is no long-lived token. No
+manual `npm publish` needed. It runs in two jobs: `build` installs and runs `npm pack`,
+whose `prepare` rebuilds `react/dist` from the tagged commit, and `publish` — the only
+job that can mint an OIDC credential — just publishes that tarball, so no dependency
+or build script ever runs beside the credential. The packaging guard
+(`scripts/packaging.test.js`) fails CI if the React subpath isn't in the tarball, and
+the release itself re-checks the tarball before publishing it.
 
 ## Deploy (ui.apli.tech)
 
-`Dockerfile` builds the landing page + Storybook and serves both (`/` and `/storybook`)
-via a zero-dependency static server. Deployed on **Lessly** as its own product, on
-`linux/amd64` (arm64 images fail there). Rebuild + redeploy:
+The site is **100% static** (landing + hosted Storybook) — no container, no registry.
+It's served by **Lessly static hosting**, built straight from this repo. The `site`
+service builds from `main` with:
+
+```
+npm ci && npm run build-storybook && node site/build.mjs
+```
+
+and serves `site/public/`, which includes the landing page, `/changelog`, `kit.css`,
+and the Storybook folded in at `/storybook`. Push to `main` and redeploy the `site`
+service to roll it out.
+
+To reproduce the exact static bundle locally:
 
 ```bash
-docker buildx build --platform linux/amd64 -t <registry>/ui-apli-tech:latest --push .
+npm ci && npm run build-storybook && node site/build.mjs
+# -> site/public/   (landing + /changelog + /storybook + kit.css)
 ```
 
 ## Adopting into the strategy portal
@@ -143,4 +211,5 @@ stays self-contained for the claude.ai Artifact CSP, baking tokens in via its bu
 
 ## License
 
-[MIT](./LICENSE) © Apliteni.
+[MIT](./LICENSE) © Apliteni — for the **code**. The Apliteni name, logos, and brand
+marks are trademarks and are **not** covered by the MIT license; see [TRADEMARK.md](./TRADEMARK.md).

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
+  "workspaces": [
+    "react"
+  ],
   "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
   "type": "module",
   "license": "MIT",
@@ -21,11 +24,18 @@
     "./css": "./src/index.css",
     "./tokens": "./src/tokens/tokens.css",
     "./accents": "./src/tokens/accents.css",
-    "./brand": "./src/tokens/brand.generated.css"
+    "./brand": "./src/tokens/brand.generated.css",
+    "./react": {
+      "types": "./react/dist/index.d.ts",
+      "import": "./react/dist/index.js",
+      "default": "./react/dist/index.js"
+    },
+    "./react/css": "./react/dist/index.css"
   },
   "files": [
     "src",
     "!src/**/*.test.js",
+    "react/dist",
     "README.md"
   ],
   "sideEffects": [
@@ -34,7 +44,9 @@
   "scripts": {
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build -o storybook-static",
-    "test": "node --test",
+    "build": "npm run build --workspace react",
+    "prepare": "npm run build",
+    "test": "for d in src stories site scripts; do [ -d \"$d\" ] || { echo \"npm test: no such directory: $d\" >&2; exit 1; }; done; node --test 'src/**/*.test.js' 'stories/**/*.test.js' 'site/**/*.test.js' 'scripts/**/*.test.js'",
     "tokens:sync": "node scripts/sync-brand-tokens.mjs",
     "tokens:check": "node scripts/sync-brand-tokens.mjs --check",
     "tokens:drift": "node scripts/brand-drift.mjs"
@@ -43,14 +55,11 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/html": "^8.6.14",
-    "@storybook/html-vite": "^8.6.14",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/html-vite": "^10.5.5",
     "axe-core": "^4.12.1",
-    "jsdom": "^29.1.1",
-    "storybook": "^8.6.14",
-    "vite": "^5.4.11"
+    "jsdom": "^30.0.1",
+    "storybook": "^10.5.5",
+    "vite": "^8.2.0"
   }
 }

package/react/README.md

@@ -0,0 +1,47 @@
+# React components
+
+Source for the kit's React layer — for surfaces that hold real client state
+(dashboards, tables, filters, forms). They render the same `.ui-*` classes and
+tokens as the vanilla kit, so the two layers can't drift.
+
+This directory is a **private workspace**, not a package. It builds to `react/dist/`
+and ships as the `@apliteni/apliteni-ui/react` subpath of the kit — one package, one
+version, one pin. There is no `@apliteni/apliteni-ui-react` on npm.
+
+**Decision rule:** does this surface hold meaningful client state?
+No → use the vanilla factories from `@apliteni/apliteni-ui`.
+Yes → use these React components.
+
+## Install (as a consumer)
+
+```bash
+npm install @apliteni/apliteni-ui react react-dom
+```
+
+The kit declares no dependency on `react` or `react-dom`, so install them yourself
+(18 or newer). Miss them and the import fails with a module-not-found error.
+
+## Use
+
+```tsx
+import '@apliteni/apliteni-ui/css';        // kit tokens + .ui-* classes
+import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (modal, pager)
+import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
+```
+
+Components: `DataTable`, `Modal`, `Button`, `Badge`, `Card`, `Icon`.
+
+## Work on them
+
+From the repo root — one `npm install` covers the workspace:
+
+```bash
+npm test -w react            # vitest
+npm run storybook -w react   # http://localhost:6007
+npm run build                # tsup -> react/dist/
+```
+
+The bare `@apliteni/apliteni-ui` specifier in this source resolves to the kit itself
+once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` points
+vitest and Storybook straight at `../src/` — which is why the class-name parity tests
+now compare against the working tree rather than the last published release.

package/react/dist/index.css

@@ -0,0 +1,76 @@
+/* src/Modal.css */
+.rx-scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .55);
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-items: center;
+  z-index: 50;
+}
+.rx-modal {
+  width: min(480px, 92vw);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.rx-modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.rx-modal__title {
+  font-weight: 600;
+  font-size: var(--text-lg);
+}
+.rx-modal__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.rx-modal__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+}
+
+/* src/DataTable.css */
+.rx-sortable {
+  user-select: none;
+}
+.rx-sort {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  font: inherit;
+  color: inherit;
+}
+.rx-sort:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.rx-caret {
+  opacity: .5;
+  margin-left: 2px;
+}
+.rx-pager {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+.rx-pager__info {
+  color: var(--muted);
+  font-size: var(--text-sm);
+  margin-right: auto;
+}

package/react/dist/index.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+declare function Icon({ name }: {
+    name: string;
+}): react.JSX.Element;
+
+type ButtonProps = {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: string;
+    iconRight?: string;
+    iconOnly?: boolean;
+    block?: boolean;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare function Button({ variant, size, icon, iconRight, iconOnly, block, children, type, ...rest }: ButtonProps): react.JSX.Element;
+
+declare function Badge({ variant, children }: {
+    variant?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+declare function Card({ title, sub, children }: {
+    title?: ReactNode;
+    sub?: ReactNode;
+    children?: ReactNode;
+}): react.JSX.Element;
+
+type ModalProps = {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    footer?: ReactNode;
+    children?: ReactNode;
+};
+declare function Modal({ open, title, onClose, footer, children }: ModalProps): react.ReactPortal | null;
+
+type Column<T> = {
+    key: keyof T & string;
+    label: string;
+    num?: boolean;
+    sortable?: boolean;
+    render?: (row: T) => ReactNode;
+};
+type DataTableProps<T> = {
+    columns: Column<T>[];
+    rows: T[];
+    pageSize?: number;
+    selected: Set<string>;
+    onToggle: (name: string) => void;
+    onTogglePage: (names: string[]) => void;
+};
+declare function DataTable<T extends {
+    name: string;
+}>({ columns, rows, pageSize, selected, onToggle, onTogglePage, }: DataTableProps<T>): react.JSX.Element;
+
+export { Badge, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Icon, Modal, type ModalProps };

package/react/dist/index.js

@@ -0,0 +1,254 @@
+"use client";
+
+// src/primitives/Icon.tsx
+import { icon } from "@apliteni/apliteni-ui";
+import { jsx } from "react/jsx-runtime";
+function Icon({ name }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: { display: "inline-flex" },
+      dangerouslySetInnerHTML: { __html: icon(name) }
+    }
+  );
+}
+
+// src/primitives/Button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var cx = (...a) => a.filter(Boolean).join(" ");
+function Button({
+  variant = "secondary",
+  size = "md",
+  icon: icon2,
+  iconRight,
+  iconOnly,
+  block,
+  children,
+  type = "button",
+  ...rest
+}) {
+  const cls = cx(
+    "ui-btn",
+    variant && `ui-btn--${variant}`,
+    size !== "md" && `ui-btn--${size}`,
+    block && "ui-btn--block",
+    iconOnly && "ui-btn--icon"
+  );
+  const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon2;
+  const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
+  return /* @__PURE__ */ jsxs("button", { type, className: cls, ...rest, ...named, children: [
+    icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
+    !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
+    iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight })
+  ] });
+}
+
+// src/primitives/Badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Badge({ variant = "neutral", children }) {
+  const cls = ["ui-badge", variant !== "neutral" && `ui-badge--${variant}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("span", { className: cls, children });
+}
+
+// src/primitives/Card.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Card({ title, sub, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "ui-card", children: [
+    title != null && /* @__PURE__ */ jsx4("div", { className: "ui-card__title", children: title }),
+    sub != null && /* @__PURE__ */ jsx4("div", { className: "ui-card__sub", children: sub }),
+    children
+  ] });
+}
+
+// src/Modal.tsx
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({ open, title, onClose, footer, children }) {
+  const panel = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) {
+        e.preventDefault();
+        panel.current.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (!panel.current.contains(active)) {
+        e.preventDefault();
+        first.focus();
+        return;
+      }
+      if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      } else if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  useEffect(() => {
+    if (!open) return;
+    const opener = document.activeElement;
+    const portalRoot = panel.current?.closest(".rx-scrim");
+    const muted = Array.from(document.body.children).filter((el) => el !== portalRoot && !el.hasAttribute("inert"));
+    muted.forEach((el) => el.setAttribute("inert", ""));
+    return () => {
+      muted.forEach((el) => el.removeAttribute("inert"));
+      if (opener && document.contains(opener)) opener.focus();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const target = panel.current?.querySelector(
+      ".rx-modal__body input, .rx-modal__body select, .rx-modal__body textarea, .rx-modal__body button"
+    ) || panel.current;
+    target?.focus();
+  }, [open]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: (e) => {
+      if (e.target === e.currentTarget) onClose();
+    }, children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+      /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
+        /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
+        /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "rx-modal__body", children }),
+      footer && /* @__PURE__ */ jsx5("div", { className: "rx-modal__foot", children: footer })
+    ] }) }),
+    document.body
+  );
+}
+
+// src/DataTable.tsx
+import { useMemo, useState } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  rows,
+  pageSize = 4,
+  selected,
+  onToggle,
+  onTogglePage
+}) {
+  const [sort, setSort] = useState(
+    { key: columns.find((c) => c.sortable)?.key, dir: -1 }
+  );
+  const [page, setPage] = useState(0);
+  const sorted = useMemo(() => {
+    if (!sort.key) return rows;
+    const k = sort.key;
+    return [...rows].sort((a, b) => (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0) * sort.dir);
+  }, [rows, sort]);
+  const pages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const safePage = Math.min(page, pages - 1);
+  const slice = sorted.slice(safePage * pageSize, safePage * pageSize + pageSize);
+  const onSort = (k) => {
+    setSort((s) => s.key === k ? { key: k, dir: s.dir === 1 ? -1 : 1 } : { key: k, dir: -1 });
+    setPage(0);
+  };
+  const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
+  const pageAllOn = slice.length > 0 && slice.every((r) => selected.has(r.name));
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("table", { className: "ui-table ui-table--hover ui-table--zebra", children: [
+      /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
+        /* @__PURE__ */ jsx6("th", { scope: "col", children: /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "checkbox",
+            checked: pageAllOn,
+            "aria-label": "Select all rows on this page",
+            onChange: () => onTogglePage(slice.map((r) => r.name))
+          }
+        ) }),
+        columns.map((c) => (
+          // The sort control is a real <button> inside the header cell. It used to be
+          // role="button" ON the <th>, which threw away the columnheader role and put
+          // aria-sort on a role that forbids it.
+          /* @__PURE__ */ jsx6(
+            "th",
+            {
+              scope: "col",
+              className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
+              "aria-sort": c.sortable ? sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : "none" : void 0,
+              children: c.sortable ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                c.label,
+                /* @__PURE__ */ jsx6("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
+              ] }) : c.label
+            },
+            c.key
+          )
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx6("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs4("tr", { children: [
+        /* @__PURE__ */ jsx6("td", { children: /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "checkbox",
+            checked: selected.has(r.name),
+            "aria-label": `Select ${r.name}`,
+            onChange: () => onToggle(r.name)
+          }
+        ) }),
+        columns.map((c) => /* @__PURE__ */ jsx6("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+      ] }, r.name)) })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "rx-pager", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "rx-pager__info", children: [
+        "Page ",
+        safePage + 1,
+        " of ",
+        pages,
+        " \xB7 ",
+        sorted.length,
+        " rows"
+      ] }),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: "chevronLeft",
+          disabled: safePage === 0,
+          onClick: () => setPage(safePage - 1),
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          iconRight: "chevronRight",
+          disabled: safePage >= pages - 1,
+          onClick: () => setPage(safePage + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Badge,
+  Button,
+  Card,
+  DataTable,
+  Icon,
+  Modal
+};