@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Colors/Colors.js

@@ -0,0 +1,154 @@
+import { jsx as g, jsxs as l } from "react/jsx-runtime";
+import { useRef as i, useState as m, useEffect as C } from "react";
+import { twMerge as o } from "tailwind-merge";
+import { toEchartsColor as u } from "../Charts/Utils/ThemeColor.js";
+const d = (s) => s.toString(16).padStart(2, "0"), c = (s, a, e) => `#${d(s)}${d(a)}${d(e)}`, y = (s) => {
+  const a = document.createElement("canvas").getContext("2d");
+  if (!a) return;
+  a.fillStyle = s, a.fillRect(0, 0, 1, 1);
+  const [e, t, b] = a.getImageData(0, 0, 1, 1).data;
+  return c(e, t, b);
+}, p = (s) => {
+  const a = u(s) ?? s, e = a.startsWith("rgb") ? a.match(/\d+/g) : null;
+  return e && e.length >= 3 ? c(Number(e[0]), Number(e[1]), Number(e[2])) : y(s) ?? s;
+}, x = ({ name: s, bgClass: a, onCopy: e, className: t, ...b }) => {
+  const r = i(null), [n, h] = m("");
+  return C(() => {
+    r.current && h(p(window.getComputedStyle(r.current).backgroundColor));
+  }, [a]), /* @__PURE__ */ g("td", { className: o("p-2 text-center border border-gray-200", t), ...b, children: /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      onClick: () => e?.(n),
+      className: "flex w-full flex-col items-center gap-1 cursor-pointer transition-all hover:bg-gray-50 rounded",
+      children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            ref: r,
+            "aria-hidden": "true",
+            className: o("w-12 h-12 rounded border border-gray-300", a)
+          }
+        ),
+        /* @__PURE__ */ g(
+          "span",
+          {
+            "data-hex": !0,
+            className: "text-xs text-gray-600",
+            style: { fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", monospace' },
+            children: n
+          }
+        ),
+        /* @__PURE__ */ l("span", { className: "sr-only", children: [
+          ", copy ",
+          s
+        ] })
+      ]
+    }
+  ) });
+}, f = [
+  {
+    name: "Primary",
+    variants: [
+      { shade: "900", bgClass: "bg-primary-900" },
+      { shade: "800", bgClass: "bg-primary-800" },
+      { shade: "700", bgClass: "bg-primary-700" },
+      { shade: "600", bgClass: "bg-primary-600" },
+      { shade: "500", bgClass: "bg-primary-500" },
+      { shade: "400", bgClass: "bg-primary-400" },
+      { shade: "300", bgClass: "bg-primary-300" },
+      { shade: "200", bgClass: "bg-primary-200" },
+      { shade: "100", bgClass: "bg-primary-100" },
+      { shade: "50", bgClass: "bg-primary-50" }
+    ]
+  },
+  {
+    name: "Success",
+    variants: [
+      { shade: "900", bgClass: "bg-success-900" },
+      { shade: "800", bgClass: "bg-success-800" },
+      { shade: "700", bgClass: "bg-success-700" },
+      { shade: "600", bgClass: "bg-success-600" },
+      { shade: "500", bgClass: "bg-success-500" },
+      { shade: "400", bgClass: "bg-success-400" },
+      { shade: "300", bgClass: "bg-success-300" },
+      { shade: "200", bgClass: "bg-success-200" },
+      { shade: "100", bgClass: "bg-success-100" },
+      { shade: "50", bgClass: "bg-success-50" }
+    ]
+  },
+  {
+    name: "Warning",
+    variants: [
+      { shade: "900", bgClass: "bg-warning-900" },
+      { shade: "800", bgClass: "bg-warning-800" },
+      { shade: "700", bgClass: "bg-warning-700" },
+      { shade: "600", bgClass: "bg-warning-600" },
+      { shade: "500", bgClass: "bg-warning-500" },
+      { shade: "400", bgClass: "bg-warning-400" },
+      { shade: "300", bgClass: "bg-warning-300" },
+      { shade: "200", bgClass: "bg-warning-200" },
+      { shade: "100", bgClass: "bg-warning-100" },
+      { shade: "50", bgClass: "bg-warning-50" }
+    ]
+  },
+  {
+    name: "Danger",
+    variants: [
+      { shade: "900", bgClass: "bg-danger-900" },
+      { shade: "800", bgClass: "bg-danger-800" },
+      { shade: "700", bgClass: "bg-danger-700" },
+      { shade: "600", bgClass: "bg-danger-600" },
+      { shade: "500", bgClass: "bg-danger-500" },
+      { shade: "400", bgClass: "bg-danger-400" },
+      { shade: "300", bgClass: "bg-danger-300" },
+      { shade: "200", bgClass: "bg-danger-200" },
+      { shade: "100", bgClass: "bg-danger-100" },
+      { shade: "50", bgClass: "bg-danger-50" }
+    ]
+  }
+], H = ({
+  palettes: s = f,
+  onCopy: a,
+  className: e,
+  ...t
+}) => {
+  const b = s[0]?.variants.map((r) => r.shade) || [];
+  return /* @__PURE__ */ g("div", { className: "overflow-x-auto", children: /* @__PURE__ */ l(
+    "table",
+    {
+      className: o("min-w-full border-collapse bg-white shadow-sm rounded-lg", e),
+      role: "table",
+      "aria-label": "Color palette table",
+      ...t,
+      children: [
+        /* @__PURE__ */ g("thead", { children: /* @__PURE__ */ l("tr", { className: "bg-gray-50", children: [
+          /* @__PURE__ */ g("th", { className: "px-3 py-2 text-left text-sm font-medium text-gray-700 border border-gray-200", children: "Color" }),
+          b.map((r) => /* @__PURE__ */ g(
+            "th",
+            {
+              className: "px-2 py-2 text-center text-sm font-medium text-gray-700 border border-gray-200",
+              children: r
+            },
+            r
+          ))
+        ] }) }),
+        /* @__PURE__ */ g("tbody", { children: s.map((r) => /* @__PURE__ */ l("tr", { className: "hover:bg-gray-25", children: [
+          /* @__PURE__ */ g("td", { className: "px-3 py-2 text-sm font-medium text-gray-900 border border-gray-200 bg-gray-50", children: r.name }),
+          r.variants.map((n) => /* @__PURE__ */ g(
+            x,
+            {
+              name: `${r.name} ${n.shade}`,
+              bgClass: n.bgClass,
+              onCopy: a
+            },
+            n.bgClass
+          ))
+        ] }, r.name)) })
+      ]
+    }
+  ) });
+};
+export {
+  H as Colors
+};

package/dist/Components/Colors/index.d.ts

@@ -0,0 +1 @@
+export * from "./Colors.js";

package/dist/Components/Colors/index.js

@@ -0,0 +1,4 @@
+import { Colors as e } from "./Colors.js";
+export {
+  e as Colors
+};

package/dist/Components/DataTable/DataTable.d.ts

@@ -0,0 +1,86 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface Column<TRow = unknown, TValue = unknown> {
+    label: string;
+    /** Method syntax on purpose: its parameter is then checked bivariantly, so `Column<TRow, number>` fits `Column<TRow, unknown>`. */
+    format?(value: TValue): ReactNode;
+    get?: (row: TRow) => TValue;
+    onClick?: (row: TRow) => unknown;
+    className?: string;
+    headerClassName?: string;
+    /**
+     * Keep the label as the header's name but draw no text, for a column whose
+     * cells explain themselves (a star, a checkbox). An empty header names
+     * nothing for a screen reader.
+     */
+    labelHidden?: boolean;
+    /**
+     * Draw this column's cell as the row's header, `<th scope="row">`, so a
+     * screen reader announces it with every other cell of the row. Give it to
+     * the one column that names a row, the way a reader would: a path, a name.
+     */
+    rowHeader?: boolean;
+}
+export interface TypedColumn<TRow, TValue> extends Column<TRow, TValue> {
+    get: (row: TRow) => TValue;
+    format?(value: TValue): ReactNode;
+}
+export interface SimpleColumn<TRow, K extends keyof TRow> extends Column<TRow, TRow[K]> {
+    get?: never;
+    format?(value: TRow[K]): ReactNode;
+}
+/**
+ * Columns for one row type, with `format` seeing exactly what `get` returned.
+ *
+ * `types` is keyed by string and typed `Column<TRow, unknown>`, because a table's
+ * columns hold different kinds of value and one map has to carry them all.
+ * Written directly, that `any` reaches `format`: a column reading a number and
+ * formatting it as a string type-checks, and the mistake arrives as
+ * `undefined is not a function` in a browser. `TypedColumn` says the right
+ * thing and nothing was in a position to apply it, since inference cannot run
+ * through the map's own annotation.
+ *
+ * Call this once per row type and build each column through what it returns:
+ *
+ * ```tsx
+ * const column = columnsFor<Transaction>();
+ *
+ * const types: Record<string, Column<Transaction, unknown>> = {
+ *   status: column({
+ *     label: "Status",
+ *     get: (row) => row.statusCode,          // row is Transaction
+ *     format: (status) => <StatusBadge code={status} />,  // status is number
+ *   }),
+ * };
+ * ```
+ *
+ * The row type is fixed once so it is not repeated on every `get`, and the
+ * value type is inferred per column. It is the shape TanStack Table settled on
+ * with `createColumnHelper<Row>()`, and for the same reason: TypeScript can
+ * infer a value type from a function it is given, and cannot infer one from
+ * the type of the map that function's result lands in.
+ *
+ * **Nothing that already passes a `types` map has to change.** The prop's type
+ * is untouched, and what this returns is an ordinary `Column`.
+ *
+ * This is for a column that computes its value. One that reads a row property
+ * straight has no `get` for a value type to be inferred from, and is already
+ * served by `SimpleColumn<TRow, K>`.
+ */
+export declare function columnsFor<TRow>(): <TValue>(column: TypedColumn<TRow, TValue>) => TypedColumn<TRow, TValue>;
+export type BaseRow = Record<string, unknown>;
+/**
+ * `children` is the one table attribute a caller cannot pass: the rows and the
+ * header are built from `rows`, `types` and `columns`, so anything handed in
+ * here could only be dropped or fight them. `role` is accepted by the type and
+ * then overruled — see the comment on the element itself.
+ */
+export interface DataTableProps<TRow extends object, TComputed extends object = BaseRow> extends Omit<ComponentProps<"table">, "children"> {
+    rows: TRow[];
+    types: Record<string, Column<TRow, unknown>>;
+    columns?: Array<keyof (TRow & TComputed)>;
+    onRowClick?: (row: TRow) => unknown;
+    selected?: TRow;
+    rowKey?: keyof TRow;
+}
+export declare function DataTable<TRow extends object, TComputed extends object = BaseRow>({ columns, onRowClick, rows, types, selected, rowKey, // rows without an `id` must pass `rowKey`
+className, ...table }: DataTableProps<TRow, TComputed>): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataTable/DataTable.js

@@ -0,0 +1,122 @@
+import { jsxs as j, jsx as i } from "react/jsx-runtime";
+import { useRef as H, useEffect as T, isValidElement as C } from "react";
+import { twMerge as I } from "tailwind-merge";
+function F() {
+  return (o) => o;
+}
+const J = "min-w-full divide-y divide-gray-300 text-left", M = "whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900", O = "whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900";
+function A(o, n, a) {
+  try {
+    let t;
+    return o.get ? t = o.get(n) : t = n[String(a)], o.format ? o.format(t) : t == null || t === "" ? "-" : typeof t == "boolean" ? String(t) : typeof t == "object" && !C(t) ? JSON.stringify(t) : t;
+  } catch (t) {
+    return console.error(`Error while rendering value of ${String(a)}:
+`, t), "n/a";
+  }
+}
+function U({
+  columns: o,
+  onRowClick: n,
+  rows: a,
+  types: t,
+  selected: f = void 0,
+  rowKey: l = "id",
+  // rows without an `id` must pass `rowKey`
+  className: y,
+  ...N
+}) {
+  const m = H(null), p = (e) => t[String(e)] !== void 0, g = o?.filter(p), h = JSON.stringify(o?.filter((e) => !p(e)).map(String) ?? []);
+  T(() => {
+    for (const e of JSON.parse(h))
+      console.error(`DataTable: column "${e}" has no entry in \`types\`, it is skipped.`);
+  }, [h]);
+  const u = (e) => f !== void 0 && e[l] !== void 0 && f[l] !== void 0 && f[l] === e[l], b = a.findIndex(u), S = b === -1 ? 0 : b, d = (e) => {
+    const s = m.current?.rows;
+    s?.length && s[Math.max(0, Math.min(e, s.length - 1))].focus();
+  }, x = (e, s, r) => {
+    if (n)
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), n(s);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), d(r + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), d(r - 1);
+          break;
+        case "Home":
+          e.preventDefault(), d(0);
+          break;
+        case "End":
+          e.preventDefault(), d(a.length - 1);
+          break;
+      }
+  };
+  return (
+    /*
+          The caller's attributes first, then the two this component owns.
+    
+          `className` is merged rather than replaced, so a caller adding a margin
+          does not silently drop the table's own layout.
+    
+          `role` is last, which makes it the component's rather than the caller's.
+          A grid only once its rows can be chosen: `aria-selected` on a row means
+          nothing on a plain table, and announcing an interactive grid for a table
+          nobody can operate is a promise it does not keep. Both halves come from
+          the same answer, so a caller setting `role="table"` on a selectable table
+          would leave `aria-selected` on rows that are not in a grid. That is the
+          lie this component stopped telling, and it is not worth reintroducing
+          through a prop.
+        */
+    /* @__PURE__ */ j("table", { ...N, className: I(J, y), role: n ? "grid" : void 0, children: [
+      /* @__PURE__ */ i("thead", { children: /* @__PURE__ */ i("tr", { children: g?.map((e) => {
+        const s = String(e), r = t[s];
+        return /* @__PURE__ */ i("th", { scope: "col", className: `${M} ${r.headerClassName ?? ""}`, children: r.labelHidden ? /* @__PURE__ */ i("span", { className: "sr-only", children: r.label ?? e }) : r.label ?? e }, s);
+      }) }) }),
+      /* @__PURE__ */ i("tbody", { ref: m, className: "divide-y divide-gray-200 bg-white", children: a.map((e, s) => /* @__PURE__ */ i(
+        "tr",
+        {
+          onClick: n ? (r) => {
+            r.preventDefault(), r.stopPropagation(), n(e);
+          } : void 0,
+          tabIndex: n ? s === S ? 0 : -1 : void 0,
+          "aria-selected": n ? u(e) : void 0,
+          onKeyDown: n ? (r) => x(r, e, s) : void 0,
+          className: [
+            "hover:bg-slate-50",
+            // A pointer over a row nothing happens on was a lie the table
+            // told before it could be operated at all. And a tab stop with
+            // no visible focus is one nobody can follow -- WCAG 2.4.7.
+            n ? "cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600" : "",
+            u(e) ? "bg-slate-100" : ""
+          ].filter(Boolean).join(" "),
+          children: g?.map((r, D) => {
+            const $ = String(r), c = t[$], v = {};
+            if (c.onClick !== void 0) {
+              const E = c.onClick;
+              v.onClick = () => E(e);
+            }
+            const k = c.rowHeader ? "th" : "td";
+            return /* @__PURE__ */ i(
+              k,
+              {
+                scope: c.rowHeader ? "row" : void 0,
+                className: `${O} ${c.className ?? ""}`,
+                ...v,
+                children: A(c, e, r)
+              },
+              D
+            );
+          })
+        },
+        e[l] === void 0 ? s : String(e[l])
+      )) })
+    ] })
+  );
+}
+export {
+  U as DataTable,
+  F as columnsFor
+};

package/dist/Components/DataTable/Paginator.d.ts

@@ -0,0 +1,41 @@
+export type PaginatorProps = {
+    /**
+     * Total number of pages
+     */
+    pages?: number;
+    /**
+     * Current page
+     */
+    current?: number;
+    /**
+     * Number of items per page
+     */
+    perPage?: number;
+    /**
+     * Total number of items
+     */
+    total?: number;
+    /**
+     * Additional className to apply
+     */
+    className?: string;
+    /**
+     * Function to set the current page
+     */
+    setPage?: (page: number) => void;
+    /**
+     * Whether to show the summary of items
+     */
+    showSummary?: boolean;
+    /**
+     * The name of its navigation landmark. A page drawing two paginators names
+     * them apart, or a screen reader lists one landmark twice.
+     */
+    label?: string;
+    /**
+     * Ids of the elements whose text leads the landmark's name, ahead of `label`,
+     * for a name that lives in the document rather than in a string.
+     */
+    labelledBy?: string;
+};
+export declare function Paginator({ pages, current, perPage, total, className, setPage, showSummary, label, labelledBy, }: PaginatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataTable/Paginator.js

@@ -0,0 +1,122 @@
+import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { generate as w } from "@bramus/pagination-sequence";
+import { ChevronLeftIcon as C, ChevronRightIcon as j } from "@heroicons/react/20/solid";
+import { useId as k } from "react";
+import { twMerge as z } from "tailwind-merge";
+function L({
+  pages: h = 1,
+  current: s = 1,
+  perPage: a = 20,
+  total: r = void 0,
+  className: p = void 0,
+  setPage: i = void 0,
+  showSummary: g = !0,
+  label: x = "Pagination",
+  labelledBy: l = void 0
+}) {
+  const c = k(), d = Math.max(1, h), t = Math.max(1, Math.min(s, d)), m = !i || t <= 1, b = !i || t >= d, y = r === 0 ? 0 : (s - 1) * a + 1, v = r === void 0 ? s * a : Math.min(s * a, r);
+  return /* @__PURE__ */ n("div", { className: z("flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6", p), children: [
+    /* @__PURE__ */ n("div", { className: "flex flex-1 justify-between sm:hidden", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          disabled: m,
+          className: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white",
+          onClick: () => i?.(t - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          disabled: b,
+          className: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white",
+          onClick: () => i?.(t + 1),
+          children: "Next"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ e("div", { className: g ? "" : "invisible", children: /* @__PURE__ */ n("p", { className: "text-sm text-gray-700", children: [
+        "Showing ",
+        /* @__PURE__ */ e("span", { className: "font-medium", children: y }),
+        " to ",
+        /* @__PURE__ */ e("span", { className: "font-medium", children: v }),
+        r !== void 0 ? /* @__PURE__ */ n(N, { children: [
+          " ",
+          "of ",
+          /* @__PURE__ */ e("span", { className: "font-medium", children: r }),
+          " results"
+        ] }) : ""
+      ] }) }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ n(
+        "nav",
+        {
+          id: l && c,
+          className: "isolate inline-flex -space-x-px rounded-md shadow-sm",
+          "aria-label": x,
+          "aria-labelledby": l && `${l} ${c}`,
+          children: [
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                disabled: m,
+                className: "relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+                onClick: () => i?.(t - 1),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Previous" }),
+                  /* @__PURE__ */ e(C, { className: "h-5 w-5", "aria-hidden": "true" })
+                ]
+              }
+            ),
+            w(t, d, 1, 1, "…").map((o, u) => {
+              if (typeof o == "string")
+                return /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0",
+                    children: "..."
+                  },
+                  u
+                );
+              {
+                const f = o === t;
+                return /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !i,
+                    "aria-current": f ? "page" : void 0,
+                    className: f ? "relative z-10 inline-flex items-center bg-primary-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600" : "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+                    onClick: () => i?.(o),
+                    children: o
+                  },
+                  u
+                );
+              }
+            }),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                disabled: b,
+                className: "relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+                onClick: () => i?.(t + 1),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Next" }),
+                  /* @__PURE__ */ e(j, { className: "h-5 w-5", "aria-hidden": "true" })
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  L as Paginator
+};

package/dist/Components/DataTable/ProportionBar.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps } from "react";
+export interface ProportionBarProps extends Omit<ComponentProps<"div">, "children" | "aria-hidden"> {
+    /** What this row measures. */
+    value: number;
+    /** What the largest bar drawn beside it measures. */
+    max: number;
+    /**
+     * Whether this is the one the others are being measured against.
+     *
+     * Drawn in a second colour, so the scale has a visible top. Without it a
+     * reader has to find the longest bar to know what "long" means here.
+     */
+    peak?: boolean;
+}
+/**
+ * A value drawn against the largest one beside it, for a dense column of them.
+ *
+ * `1.2 s` means nothing until something else on the page is `3 ms`. This is the
+ * comparison, drawn: a thin track per row and a fill scaled to the largest
+ * value in view, so a column of numbers reads as a distribution at a glance
+ * rather than one number at a time.
+ *
+ * **Scaled to what is on screen rather than to a fixed ceiling.** What counts
+ * as large is a property of the data being looked at, and a fixed scale is
+ * wrong for every dataset but one. The caller computes the maximum, because
+ * only the caller knows what "beside it" means -- the visible page, the whole
+ * result set, or a window.
+ *
+ * **It is decorative, and hidden from assistive technology.** It says nothing
+ * the number beside it does not, so announcing it reads the row twice. That is
+ * the whole of its accessibility contract and it is not configurable: a
+ * consumer with no number to put beside it wants a labelled `meter`, which is
+ * a different component and not this one.
+ *
+ * **The two colours are the component's own**, rather than the theme's status
+ * presets. A peak is not a verdict -- the longest bar is not a failure, a
+ * warning or a success -- so `warning` would be saying something untrue about
+ * it. These two clear the 3:1 a mark carrying meaning owes, measured against
+ * the `gray-100` track rather than the page, since the fill never touches the
+ * page: `amber-700` 4.57:1, `gray-500` 4.39:1. `amber-600` is 2.91:1 there.
+ *
+ * ```tsx
+ * const largest = Math.max(...rows.map((row) => row.elapsedMs));
+ *
+ * <ProportionBar value={row.elapsedMs} max={rows.length > 1 ? largest : 0} peak={row.elapsedMs === largest} />
+ * ```
+ */
+export declare function ProportionBar({ value, max, peak, className, ...rest }: ProportionBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataTable/ProportionBar.js

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import { twMerge as l } from "tailwind-merge";
+function o(t, r) {
+  return r <= 0 ? 0 : Math.min(100, Math.max(2, Math.round(t / r * 100)));
+}
+function f({ value: t, max: r, peak: e = !1, className: i, ...n }) {
+  return (
+    /*
+          The caller's attributes first, then what this component owns.
+    
+          `aria-hidden` is last and is refused by the type, for the reason above:
+          un-hiding it produces an unnamed graphic that repeats the number beside
+          it, which is the failure this component exists to have already decided.
+        */
+    /* @__PURE__ */ a("div", { ...n, className: l("h-0.5 w-full bg-gray-100", i), "aria-hidden": "true", children: /* @__PURE__ */ a("div", { className: e ? "h-full bg-amber-700" : "h-full bg-gray-500", style: { width: `${o(t, r)}%` } }) })
+  );
+}
+export {
+  f as ProportionBar
+};

package/dist/Components/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTable, columnsFor, type DataTableProps, type Column, type TypedColumn, type SimpleColumn, type BaseRow, } from "./DataTable.js";
+export { ProportionBar, type ProportionBarProps } from "./ProportionBar.js";
+export { Paginator, type PaginatorProps } from "./Paginator.js";

package/dist/Components/DataTable/index.js

@@ -0,0 +1,9 @@
+import { DataTable as a, columnsFor as t } from "./DataTable.js";
+import { ProportionBar as m } from "./ProportionBar.js";
+import { Paginator as f } from "./Paginator.js";
+export {
+  a as DataTable,
+  f as Paginator,
+  m as ProportionBar,
+  t as columnsFor
+};

package/dist/Components/Dialog/Dialog.d.ts

@@ -0,0 +1,49 @@
+import { DialogDescription as HeadlessDialogDescription, DialogTitle as HeadlessDialogTitle } from "@headlessui/react";
+import type { ComponentProps } from "react";
+import { type BaseModalProps, type ModalSize } from "./modal.types.js";
+export type DialogSize = ModalSize;
+export interface DialogProps extends BaseModalProps {
+    size?: DialogSize;
+}
+/**
+ * Dialog component for displaying modal dialogs and popovers.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+ *
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirmation"
+ *   description="Are you sure you want to continue with this action?"
+ * >
+ *   <div className="mt-4 flex justify-end space-x-2">
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={() => {
+ *       // Perform action
+ *       setIsOpen(false);
+ *     }}>
+ *       Confirm
+ *     </Button>
+ *   </div>
+ * </Dialog>
+ * ```
+ */
+export declare function Dialog({ isOpen, onClose, title, description, children, size, className, contentClassName, titleClassName, descriptionClassName, showCloseButton, initialFocus, backdrop, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Dialog.Title component for creating accessible dialog titles.
+ * Use this when you need more customization than the basic title prop.
+ */
+export type DialogTitleProps = ComponentProps<typeof HeadlessDialogTitle>;
+export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Dialog.Description component for creating accessible dialog descriptions.
+ * Use this when you need more customization than the basic description prop.
+ */
+export type DialogDescriptionProps = ComponentProps<typeof HeadlessDialogDescription>;
+export declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;