@roy-ui/ui 0.0.5 → 0.0.7

package/dist/index.js

@@ -1,14 +1,77 @@
 "use client";
-import { forwardRef, useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
-import './GradientButton-TX2GJRIQ.css';
+import { forwardRef, useState, useRef, useEffect, Children, isValidElement, cloneElement, useMemo, useCallback } from 'react';
+import './Button-XBBWB5ZT.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import './GradientButton-TX2GJRIQ.css';
 import './Popover-LSYVKT4M.css';
 import './MadeBy-JCYGHWSD.css';
 import './TextMorph-RX2BX25F.css';
 import './TreeNav-22DY7TP5.css';
+import './Table-YTEWR635.css';
+import './TableSearch-UZO4ZJVE.css';
+import './Pagination-LLKV7XXI.css';
+import './DateRangePicker-BCP26AOC.css';
+import './TimePicker-44EKHQEJ.css';
+import './DataTable-TQ5OBNZF.css';
 
-// src/components/gradient-button/GradientButton.tsx
-var DefaultSpinner = () => /* @__PURE__ */ jsx("span", { className: "gradient-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", children: [
+// src/components/button/Button.tsx
+var DefaultSpinner = () => /* @__PURE__ */ jsx("span", { className: "royui-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "9",
+      stroke: "currentColor",
+      strokeOpacity: "0.3",
+      strokeWidth: "2.5"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M21 12a9 9 0 0 0-9-9",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  )
+] }) });
+var Button = forwardRef(
+  ({
+    size = "md",
+    fullWidth = false,
+    loading = false,
+    loadingLabel,
+    disabled,
+    className = "",
+    children,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const classes = [
+      "royui-btn",
+      `royui-btn--${size}`,
+      fullWidth ? "royui-btn--full" : "",
+      loading ? "royui-btn--loading" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        disabled: disabled || loading,
+        className: classes,
+        "aria-busy": loading || void 0,
+        ...rest,
+        children: loading ? loadingLabel ?? /* @__PURE__ */ jsx(DefaultSpinner, {}) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var DefaultSpinner2 = () => /* @__PURE__ */ jsx("span", { className: "gradient-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", children: [
   /* @__PURE__ */ jsx(
     "circle",
     {
@@ -56,7 +119,7 @@ var GradientButton = forwardRef(
         className: classes,
         "aria-busy": loading || void 0,
         ...rest,
-        children: loading ? loadingLabel ?? /* @__PURE__ */ jsx(DefaultSpinner, {}) : children
+        children: loading ? loadingLabel ?? /* @__PURE__ */ jsx(DefaultSpinner2, {}) : children
       }
     );
   }
@@ -90,12 +153,12 @@ function Popover({
   renderTrigger
 }) {
   const [open, setOpen] = useState(defaultOpen);
-  const wrap = useRef(null);
+  const wrap2 = useRef(null);
   const toggle = () => setOpen((o) => !o);
   useEffect(() => {
     if (!open) return;
     function onDown(e) {
-      if (wrap.current && !wrap.current.contains(e.target)) {
+      if (wrap2.current && !wrap2.current.contains(e.target)) {
         setOpen(false);
       }
     }
@@ -123,7 +186,7 @@ function Popover({
   const widthClass = typeof width === "string" ? `royui-popover__panel--${width}` : "";
   const customWidth = typeof width === "number" ? { width: `${width}px` } : void 0;
   const alignClass = `royui-popover__panel--${align}`;
-  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: "royui-popover", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: wrap2, className: "royui-popover", children: [
     trigger,
     open && /* @__PURE__ */ jsxs(
       "div",
@@ -375,7 +438,2085 @@ var TreeNavItem = forwardRef(
   }
 );
 TreeNavItem.displayName = "TreeNavItem";
+function Spinner({
+  size = 16,
+  strokeWidth = 2,
+  label = "Loading",
+  style,
+  className = ""
+}) {
+  const r = (size - strokeWidth) / 2;
+  const c = size / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: ["royui-spinner", className].filter(Boolean).join(" "),
+      style: { width: size, height: size, ...style },
+      children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: c,
+            cy: c,
+            r,
+            fill: "none",
+            stroke: "currentColor",
+            strokeOpacity: 0.18,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: c,
+            cy: c,
+            r,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset: circumference * 0.72,
+            transform: `rotate(-90 ${c} ${c})`
+          }
+        )
+      ] })
+    }
+  );
+}
+function fontVars(prefix, spec) {
+  if (!spec) return {};
+  const out = {};
+  if (typeof spec === "string") {
+    out[`${prefix}-font`] = spec;
+    return out;
+  }
+  if (spec.family) out[`${prefix}-font`] = spec.family;
+  if (spec.size != null)
+    out[`${prefix}-size`] = typeof spec.size === "number" ? `${spec.size}px` : spec.size;
+  if (spec.weight != null) out[`${prefix}-weight`] = String(spec.weight);
+  if (spec.letterSpacing) out[`${prefix}-tracking`] = spec.letterSpacing;
+  if (spec.featureSettings) out[`${prefix}-features`] = spec.featureSettings;
+  return out;
+}
+var Table = forwardRef(function Table2({
+  visibleRows = 7,
+  rowHeight = 44,
+  stickyHeader = true,
+  density = "cozy",
+  loading = false,
+  empty,
+  isEmpty = false,
+  fitColumns = false,
+  headerFont,
+  rowHeaderFont,
+  cellFont,
+  className = "",
+  style,
+  children,
+  tableProps,
+  ...rest
+}, ref) {
+  const headerH = 40;
+  const maxH = rowHeight * visibleRows + (stickyHeader ? headerH : 0);
+  const mergedStyle = {
+    ...style,
+    ["--royui-table-row-h"]: `${rowHeight}px`,
+    ["--royui-table-max-h"]: `${maxH}px`,
+    ...fontVars("--royui-table-header", headerFont),
+    ...fontVars("--royui-table-row-header", rowHeaderFont),
+    ...fontVars("--royui-table-cell", cellFont)
+  };
+  const classes = [
+    "royui-table",
+    `royui-table--${density}`,
+    stickyHeader && "royui-table--sticky",
+    loading && "royui-table--loading",
+    fitColumns && "royui-table--fit",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: mergedStyle, ...rest, children: /* @__PURE__ */ jsxs("div", { className: "royui-table__scroll", role: "region", "aria-label": "Table", children: [
+    /* @__PURE__ */ jsx("table", { className: "royui-table__table", ...tableProps, children }),
+    isEmpty && !loading && /* @__PURE__ */ jsx("div", { className: "royui-table__empty", role: "status", children: empty ?? /* @__PURE__ */ jsx("span", { children: "No results" }) }),
+    loading && /* @__PURE__ */ jsx("div", { className: "royui-table__loading", "aria-hidden": true, children: /* @__PURE__ */ jsx(Spinner, { size: 18 }) })
+  ] }) });
+});
+var TableHeader = forwardRef(function TableHeader2({ className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: ["royui-table__thead", className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+});
+var TableBody = forwardRef(function TableBody2({ className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      className: ["royui-table__tbody", className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+});
+var TableRow = forwardRef(function TableRow2({ className = "", ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: ["royui-table__tr", className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+});
+var TableHead = forwardRef(
+  function TableHead2({ className = "", align = "left", ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        scope: "col",
+        className: [
+          "royui-table__th",
+          align !== "left" && `royui-table__th--${align}`,
+          className
+        ].filter(Boolean).join(" "),
+        ...rest
+      }
+    );
+  }
+);
+var TableCell = forwardRef(
+  function TableCell2({ className = "", align = "left", isRowHeader, ...rest }, ref) {
+    if (isRowHeader) {
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          ref,
+          scope: "row",
+          className: [
+            "royui-table__row-header",
+            align !== "left" && `royui-table__td--${align}`,
+            className
+          ].filter(Boolean).join(" "),
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: [
+          "royui-table__td",
+          align !== "left" && `royui-table__td--${align}`,
+          className
+        ].filter(Boolean).join(" "),
+        ...rest
+      }
+    );
+  }
+);
+var TableSearch = forwardRef(
+  function TableSearch2({
+    value,
+    defaultValue,
+    onChange,
+    debounceMs = 0,
+    placeholder = "Search",
+    width = 260,
+    hideIndicator,
+    className = "",
+    style,
+    ...rest
+  }, ref) {
+    const controlled = value !== void 0;
+    const [internal, setInternal] = useState(defaultValue ?? "");
+    const current = controlled ? value : internal;
+    const timer = useRef(null);
+    useEffect(() => () => {
+      if (timer.current) clearTimeout(timer.current);
+    }, []);
+    const emit = (next) => {
+      if (!onChange) return;
+      if (debounceMs <= 0) {
+        onChange(next);
+        return;
+      }
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => onChange(next), debounceMs);
+    };
+    const handle = (e) => {
+      const next = e.target.value;
+      if (!controlled) setInternal(next);
+      emit(next);
+    };
+    const clear = () => {
+      if (!controlled) setInternal("");
+      if (onChange) onChange("");
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["royui-tablesearch", className].filter(Boolean).join(" "),
+        style: { width, ...style },
+        children: [
+          !hideIndicator && /* @__PURE__ */ jsx("span", { className: "royui-tablesearch__dot", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              className: "royui-tablesearch__input",
+              placeholder,
+              value: current,
+              onChange: handle,
+              ...rest
+            }
+          ),
+          current.length > 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-tablesearch__clear",
+              onClick: clear,
+              "aria-label": "Clear search",
+              children: "Clear"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function buildRange(page, pageCount, sibling) {
+  if (pageCount <= 1) return [1];
+  const first = 1;
+  const last = pageCount;
+  const left = Math.max(page - sibling, first + 1);
+  const right = Math.min(page + sibling, last - 1);
+  const cells = [first];
+  if (left > first + 1) cells.push("gap");
+  for (let i = left; i <= right; i++) cells.push(i);
+  if (right < last - 1) cells.push("gap");
+  if (last > first) cells.push(last);
+  return cells;
+}
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  showPrevNext = true,
+  prevLabel = "Prev",
+  nextLabel = "Next",
+  showSummary = false,
+  summaryRender,
+  className = "",
+  style
+}) {
+  const cells = useMemo(
+    () => buildRange(page, pageCount, siblingCount),
+    [page, pageCount, siblingCount]
+  );
+  const canPrev = page > 1;
+  const canNext = page < pageCount;
+  const go = (n) => {
+    if (n < 1 || n > pageCount || n === page) return;
+    onPageChange(n);
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: ["royui-pagination", className].filter(Boolean).join(" "),
+      style,
+      "aria-label": "Pagination",
+      children: [
+        showSummary && /* @__PURE__ */ jsx("span", { className: "royui-pagination__summary", children: summaryRender ? summaryRender(page, pageCount) : `Page ${page} of ${pageCount}` }),
+        /* @__PURE__ */ jsxs("div", { className: "royui-pagination__group", children: [
+          showPrevNext && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-pagination__step",
+              onClick: () => go(page - 1),
+              disabled: !canPrev,
+              "aria-label": "Previous page",
+              children: prevLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("ul", { className: "royui-pagination__pages", children: cells.map(
+            (cell, i) => cell === "gap" ? /* @__PURE__ */ jsx("li", { className: "royui-pagination__gap", "aria-hidden": true, children: "\xB7" }, `gap-${i}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: [
+                  "royui-pagination__page",
+                  cell === page && "royui-pagination__page--current"
+                ].filter(Boolean).join(" "),
+                onClick: () => go(cell),
+                "aria-current": cell === page ? "page" : void 0,
+                "aria-label": `Page ${cell}`,
+                children: cell
+              }
+            ) }, cell)
+          ) }),
+          showPrevNext && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-pagination__step",
+              onClick: () => go(page + 1),
+              disabled: !canNext,
+              "aria-label": "Next page",
+              children: nextLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/date-range-picker/dateUtils.ts
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var SHORT_MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"];
+function startOfDay(d) {
+  const n = new Date(d);
+  n.setHours(0, 0, 0, 0);
+  return n;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function addMonths(d, n) {
+  const x = new Date(d);
+  x.setDate(1);
+  x.setMonth(x.getMonth() + n);
+  return x;
+}
+function addDays(d, n) {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+}
+function isBefore(a, b) {
+  return a.getTime() < b.getTime();
+}
+function isAfter(a, b) {
+  return a.getTime() > b.getTime();
+}
+function isBetween(d, from, to) {
+  const t = d.getTime();
+  const a = Math.min(from.getTime(), to.getTime());
+  const b = Math.max(from.getTime(), to.getTime());
+  return t >= a && t <= b;
+}
+function clampToBounds(d, min, max) {
+  let r = d;
+  if (min && isBefore(r, min)) r = min;
+  if (max && isAfter(r, max)) r = max;
+  return r;
+}
+function getMonthGrid(year, month, weekStartsOn = 0) {
+  const first = new Date(year, month, 1);
+  const firstDow = first.getDay();
+  const offset = (firstDow - weekStartsOn + 7) % 7;
+  const gridStart = addDays(first, -offset);
+  const cells = [];
+  for (let i = 0; i < 42; i++) {
+    const date = addDays(gridStart, i);
+    cells.push({
+      date,
+      inMonth: date.getMonth() === month,
+      iso: date.toISOString().slice(0, 10)
+    });
+  }
+  return cells;
+}
+function getWeekdayLabels(weekStartsOn = 0) {
+  return Array.from({ length: 7 }, (_, i) => WEEKDAYS[(weekStartsOn + i) % 7] ?? "");
+}
+function formatMonthYear(d) {
+  return `${MONTHS[d.getMonth()] ?? ""} ${d.getFullYear()}`;
+}
+function formatShort(d) {
+  if (!d) return "";
+  const m = SHORT_MONTHS[d.getMonth()] ?? "";
+  const sameYear = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+  return sameYear ? `${m} ${d.getDate()}` : `${m} ${d.getDate()}, ${d.getFullYear()}`;
+}
+function formatRange(range) {
+  if (!range.from && !range.to) return "";
+  if (range.from && !range.to) return formatShort(range.from);
+  if (!range.from && range.to) return formatShort(range.to);
+  if (isSameDay(range.from, range.to)) return formatShort(range.from);
+  return `${formatShort(range.from)} \u2013 ${formatShort(range.to)}`;
+}
+var today = () => startOfDay(/* @__PURE__ */ new Date());
+var DEFAULT_PRESETS = [
+  { label: "Today", range: () => ({ from: today(), to: today() }) },
+  {
+    label: "Last 7 days",
+    range: () => ({ from: addDays(today(), -6), to: today() })
+  },
+  {
+    label: "Last 30 days",
+    range: () => ({ from: addDays(today(), -29), to: today() })
+  },
+  {
+    label: "This month",
+    range: () => {
+      const t = today();
+      return {
+        from: new Date(t.getFullYear(), t.getMonth(), 1),
+        to: t
+      };
+    }
+  },
+  {
+    label: "Last month",
+    range: () => {
+      const t = today();
+      const first = new Date(t.getFullYear(), t.getMonth() - 1, 1);
+      const last = new Date(t.getFullYear(), t.getMonth(), 0);
+      return { from: first, to: last };
+    }
+  }
+];
+function DateRangePicker({
+  value,
+  defaultValue,
+  onChange,
+  monthsVisible = 2,
+  weekStartsOn = 0,
+  minDate,
+  maxDate,
+  placeholder = "Pick a range",
+  presets = DEFAULT_PRESETS,
+  align = "left",
+  className = "",
+  style,
+  triggerLabel,
+  disabled
+}) {
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(
+    defaultValue ?? { from: null, to: null }
+  );
+  const current = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(current);
+  const [hover, setHover] = useState(null);
+  const [anchorMonth, setAnchorMonth] = useState(
+    () => startOfDay(current.from ?? today())
+  );
+  const wrap2 = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap2.current && !wrap2.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      setDraft(current);
+      setHover(null);
+      setAnchorMonth(startOfDay(current.from ?? today()));
+    }
+  }, [open]);
+  const months = useMemo(() => {
+    return Array.from({ length: monthsVisible }, (_, i) => addMonths(anchorMonth, i));
+  }, [anchorMonth, monthsVisible]);
+  const commit = (next) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  const apply = () => {
+    commit(draft);
+    setOpen(false);
+  };
+  const clear = () => {
+    setDraft({ from: null, to: null });
+    setHover(null);
+  };
+  const selectDay = (d) => {
+    const day = startOfDay(d);
+    const { from, to } = draft;
+    if (!from || from && to) {
+      setDraft({ from: day, to: null });
+      setHover(day);
+      return;
+    }
+    if (isBefore(day, from)) {
+      setDraft({ from: day, to: from });
+    } else {
+      setDraft({ from, to: day });
+    }
+  };
+  const isDisabled = (d) => {
+    if (minDate && isBefore(d, startOfDay(minDate))) return true;
+    if (maxDate && isAfter(d, startOfDay(maxDate))) return true;
+    return false;
+  };
+  const previewTo = !draft.to && draft.from && hover ? hover : draft.to;
+  const previewRange = { from: draft.from, to: previewTo };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrap2,
+      className: ["royui-drp", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "royui-drp__trigger",
+            onClick: () => !disabled && setOpen((o) => !o),
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "royui-drp__trigger-dot", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "royui-drp__trigger-label", children: triggerLabel ?? (formatRange(current) || placeholder) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `royui-drp__panel royui-drp__panel--${align}`,
+            role: "dialog",
+            "aria-label": "Choose date range",
+            children: [
+              presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "royui-drp__presets", children: presets.map((p) => {
+                const r = p.range();
+                const isActive = isSameDay(draft.from, r.from) && isSameDay(draft.to, r.to);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: [
+                      "royui-drp__preset",
+                      isActive && "royui-drp__preset--active"
+                    ].filter(Boolean).join(" "),
+                    onClick: () => {
+                      const next = {
+                        from: r.from ? startOfDay(clampToBounds(r.from, minDate, maxDate)) : null,
+                        to: r.to ? startOfDay(clampToBounds(r.to, minDate, maxDate)) : null
+                      };
+                      setDraft(next);
+                      if (next.from) setAnchorMonth(next.from);
+                    },
+                    children: p.label
+                  },
+                  p.label
+                );
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: "royui-drp__main", children: [
+                /* @__PURE__ */ jsxs("div", { className: "royui-drp__nav", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "royui-drp__nav-btn",
+                      onClick: () => setAnchorMonth(addMonths(anchorMonth, -1)),
+                      "aria-label": "Previous month",
+                      children: "Prev"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "royui-drp__nav-btn",
+                      onClick: () => setAnchorMonth(addMonths(anchorMonth, 1)),
+                      "aria-label": "Next month",
+                      children: "Next"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "royui-drp__months", children: months.map((m) => /* @__PURE__ */ jsx(
+                  MonthGrid,
+                  {
+                    month: m,
+                    range: previewRange,
+                    hover,
+                    weekStartsOn,
+                    isDisabled,
+                    onSelect: selectDay,
+                    onHover: (d) => setHover(d)
+                  },
+                  `${m.getFullYear()}-${m.getMonth()}`
+                )) }),
+                /* @__PURE__ */ jsxs("div", { className: "royui-drp__foot", children: [
+                  /* @__PURE__ */ jsx("div", { className: "royui-drp__readout", children: formatRange(draft) || "Select start and end" }),
+                  /* @__PURE__ */ jsxs("div", { className: "royui-drp__foot-actions", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "royui-drp__ghost",
+                        onClick: clear,
+                        children: "Clear"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "royui-drp__primary",
+                        onClick: apply,
+                        disabled: !draft.from,
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MonthGrid({
+  month,
+  range,
+  hover,
+  weekStartsOn,
+  isDisabled,
+  onSelect,
+  onHover
+}) {
+  const grid = useMemo(
+    () => getMonthGrid(month.getFullYear(), month.getMonth(), weekStartsOn),
+    [month, weekStartsOn]
+  );
+  const labels = useMemo(() => getWeekdayLabels(weekStartsOn), [weekStartsOn]);
+  const todayD = today();
+  return /* @__PURE__ */ jsxs("div", { className: "royui-drp__month", children: [
+    /* @__PURE__ */ jsx("div", { className: "royui-drp__month-title", children: formatMonthYear(month) }),
+    /* @__PURE__ */ jsx("div", { className: "royui-drp__weekdays", children: labels.map((l, i) => /* @__PURE__ */ jsx("span", { className: "royui-drp__weekday", children: l }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "royui-drp__grid", onMouseLeave: () => onHover(null), children: grid.map((c) => {
+      const inMonth = isSameMonth(c.date, month);
+      const disabled = isDisabled(c.date);
+      const isStart = isSameDay(c.date, range.from);
+      const isEnd = isSameDay(c.date, range.to);
+      const isInRange = range.from && range.to && isBetween(c.date, range.from, range.to);
+      const isPreview = range.from && !range.to && hover && isBetween(c.date, range.from, hover);
+      const isTodayCell = isSameDay(c.date, todayD);
+      const classes = [
+        "royui-drp__day",
+        !inMonth && "royui-drp__day--out",
+        disabled && "royui-drp__day--disabled",
+        (isStart || isEnd) && "royui-drp__day--edge",
+        isStart && "royui-drp__day--start",
+        isEnd && "royui-drp__day--end",
+        (isInRange || isPreview) && "royui-drp__day--in",
+        isTodayCell && "royui-drp__day--today"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classes,
+          disabled,
+          tabIndex: inMonth ? 0 : -1,
+          onClick: () => inMonth && onSelect(c.date),
+          onMouseEnter: () => inMonth && onHover(c.date),
+          "aria-label": c.date.toDateString(),
+          children: /* @__PURE__ */ jsx("span", { children: c.date.getDate() })
+        },
+        c.iso
+      );
+    }) })
+  ] });
+}
+function angleFromCenter(cx, cy, px, py) {
+  const dx = px - cx;
+  const dy = py - cy;
+  const a = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+  return (a + 360) % 360;
+}
+function AnalogClock({
+  value,
+  onChange,
+  hourCycle = 24,
+  minuteStep = 1,
+  size = 220
+}) {
+  const ref = useRef(null);
+  const [mode, setMode] = useState("hours");
+  const [dragging, setDragging] = useState(false);
+  const updateFromPointer = useCallback(
+    (clientX, clientY, currentMode) => {
+      const svg = ref.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const cx2 = rect.left + rect.width / 2;
+      const cy2 = rect.top + rect.height / 2;
+      const a = angleFromCenter(cx2, cy2, clientX, clientY);
+      if (currentMode === "hours") {
+        const hours122 = Math.round(a / 30) % 12;
+        const isAm2 = value.hours < 12;
+        const h24 = isAm2 ? hours122 : hours122 + 12;
+        onChange({ ...value, hours: h24 });
+      } else {
+        let m = Math.round(a / 6) % 60;
+        if (minuteStep > 1) m = Math.round(m / minuteStep) * minuteStep;
+        if (m === 60) m = 0;
+        onChange({ ...value, minutes: m });
+      }
+    },
+    [minuteStep, onChange, value]
+  );
+  const togglePeriod = () => {
+    const next = value.hours < 12 ? value.hours + 12 : value.hours - 12;
+    onChange({ ...value, hours: next });
+  };
+  const isAm = value.hours < 12;
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e) => updateFromPointer(e.clientX, e.clientY, mode);
+    const onUp = () => setDragging(false);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [dragging, mode, updateFromPointer]);
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    setDragging(true);
+    updateFromPointer(e.clientX, e.clientY, mode);
+  };
+  const hours12 = hourCycle === 12 ? value.hours === 0 ? 12 : value.hours > 12 ? value.hours - 12 : value.hours : value.hours % 12 === 0 ? 12 : value.hours % 12;
+  const hourAngle = (hours12 % 12 + value.minutes / 60) * 30 - 90;
+  const minuteAngle = value.minutes / 60 * 360 - 90;
+  const r = size / 2;
+  const cx = r;
+  const cy = r;
+  const hourLen = r * 0.45;
+  const minuteLen = r * 0.7;
+  const tickOuter = r * 0.92;
+  const tickInner = r * 0.86;
+  const majorInner = r * 0.82;
+  const handX = (len, deg) => cx + len * Math.cos(deg * Math.PI / 180);
+  const handY = (len, deg) => cy + len * Math.sin(deg * Math.PI / 180);
+  return /* @__PURE__ */ jsxs("div", { className: "royui-tp-analog", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        onPointerDown: handlePointerDown,
+        className: "royui-tp-analog__face",
+        role: "application",
+        "aria-label": "Analog clock",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: r - 1,
+              className: "royui-tp-analog__bezel"
+            }
+          ),
+          Array.from({ length: 60 }).map((_, i) => {
+            const angle = (i * 6 - 90) * (Math.PI / 180);
+            const isMajor = i % 5 === 0;
+            const inner = isMajor ? majorInner : tickInner;
+            return /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: cx + inner * Math.cos(angle),
+                y1: cy + inner * Math.sin(angle),
+                x2: cx + tickOuter * Math.cos(angle),
+                y2: cy + tickOuter * Math.sin(angle),
+                className: isMajor ? "royui-tp-analog__tick--major" : "royui-tp-analog__tick"
+              },
+              i
+            );
+          }),
+          [12, 3, 6, 9].map((n) => {
+            const idx = n % 12;
+            const angle = (idx * 30 - 90) * (Math.PI / 180);
+            const rr = r * 0.72;
+            return /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cx + rr * Math.cos(angle),
+                y: cy + rr * Math.sin(angle),
+                dy: "0.34em",
+                textAnchor: "middle",
+                className: "royui-tp-analog__numeral",
+                children: n
+              },
+              n
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: cx,
+              y1: cy,
+              x2: handX(hourLen, hourAngle),
+              y2: handY(hourLen, hourAngle),
+              className: `royui-tp-analog__hand royui-tp-analog__hand--hour ${mode === "hours" ? "royui-tp-analog__hand--active" : ""}`,
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                setMode("hours");
+                setDragging(true);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: cx,
+              y1: cy,
+              x2: handX(minuteLen, minuteAngle),
+              y2: handY(minuteLen, minuteAngle),
+              className: `royui-tp-analog__hand royui-tp-analog__hand--minute ${mode === "minutes" ? "royui-tp-analog__hand--active" : ""}`,
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                setMode("minutes");
+                setDragging(true);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx, cy, r: 3.5, className: "royui-tp-analog__pin" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "royui-tp-analog__modes", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            "royui-tp-analog__mode",
+            mode === "hours" && "royui-tp-analog__mode--on"
+          ].filter(Boolean).join(" "),
+          onClick: () => setMode("hours"),
+          children: "Hours"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            "royui-tp-analog__mode",
+            mode === "minutes" && "royui-tp-analog__mode--on"
+          ].filter(Boolean).join(" "),
+          onClick: () => setMode("minutes"),
+          children: "Minutes"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "royui-tp-analog__period", role: "group", "aria-label": "Day half", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: [
+              "royui-tp-analog__period-btn",
+              isAm && "royui-tp-analog__period-btn--on"
+            ].filter(Boolean).join(" "),
+            onClick: () => {
+              if (!isAm) togglePeriod();
+            },
+            "aria-pressed": isAm,
+            children: "AM"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: [
+              "royui-tp-analog__period-btn",
+              !isAm && "royui-tp-analog__period-btn--on"
+            ].filter(Boolean).join(" "),
+            onClick: () => {
+              if (isAm) togglePeriod();
+            },
+            "aria-pressed": !isAm,
+            children: "PM"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function wrap(n, max) {
+  return (n % max + max) % max;
+}
+function DigitalClock({
+  value,
+  onChange,
+  hourCycle = 24,
+  minuteStep = 1
+}) {
+  const hourBoundary = hourCycle === 12 ? 12 : 24;
+  const displayHour = hourCycle === 12 ? value.hours % 12 === 0 ? 12 : value.hours % 12 : value.hours;
+  const isAm = value.hours < 12;
+  const setDisplayHour = (next) => {
+    if (hourCycle === 24) {
+      onChange({ ...value, hours: wrap(next, 24) });
+      return;
+    }
+    let h = next;
+    if (h <= 0) h = 12;
+    if (h > 12) h = 1;
+    const h24 = isAm ? h === 12 ? 0 : h : h === 12 ? 12 : h + 12;
+    onChange({ ...value, hours: h24 });
+  };
+  const setMinutes = (next) => {
+    const stepped = Math.round(next / minuteStep) * minuteStep;
+    onChange({ ...value, minutes: wrap(stepped, 60) });
+  };
+  const setAm = () => {
+    if (isAm) return;
+    onChange({ ...value, hours: value.hours - 12 });
+  };
+  const setPm = () => {
+    if (!isAm) return;
+    onChange({ ...value, hours: value.hours + 12 });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "royui-tp-digital", children: [
+    /* @__PURE__ */ jsxs("div", { className: "royui-tp-digital__row", children: [
+      /* @__PURE__ */ jsx(
+        Segment,
+        {
+          label: "Hours",
+          value: pad(displayHour),
+          onWheelStep: (d) => setDisplayHour(displayHour + d),
+          onArrow: (d) => setDisplayHour(displayHour + d),
+          max: hourBoundary
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "royui-tp-digital__sep", "aria-hidden": true, children: ":" }),
+      /* @__PURE__ */ jsx(
+        Segment,
+        {
+          label: "Minutes",
+          value: pad(value.minutes),
+          onWheelStep: (d) => setMinutes(value.minutes + d * minuteStep),
+          onArrow: (d) => setMinutes(value.minutes + d * minuteStep),
+          max: 60
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "royui-tp-digital__period", role: "group", "aria-label": "Day half", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            "royui-tp-digital__period-btn",
+            isAm && "royui-tp-digital__period-btn--on"
+          ].filter(Boolean).join(" "),
+          onClick: setAm,
+          "aria-pressed": isAm,
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            "royui-tp-digital__period-btn",
+            !isAm && "royui-tp-digital__period-btn--on"
+          ].filter(Boolean).join(" "),
+          onClick: setPm,
+          "aria-pressed": !isAm,
+          children: "PM"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "royui-tp-digital__hint", children: "Scroll or use arrow keys" })
+  ] });
+}
+function Segment({
+  label,
+  value,
+  onWheelStep,
+  onArrow,
+  max
+}) {
+  const ref = useRef(null);
+  const handleWheel = (e) => {
+    e.preventDefault();
+    onWheelStep(e.deltaY > 0 ? 1 : -1);
+  };
+  const handleKey = (e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowRight") {
+      e.preventDefault();
+      onArrow(1);
+    } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      onArrow(-1);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "spinbutton",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuetext": value,
+      "aria-valuemax": max,
+      className: "royui-tp-digital__seg",
+      onWheel: handleWheel,
+      onKeyDown: handleKey,
+      children: value
+    }
+  );
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function formatTime(t, hourCycle = 24) {
+  if (!t) return "";
+  if (hourCycle === 24) return `${pad2(t.hours)}:${pad2(t.minutes)}`;
+  const h = t.hours % 12 === 0 ? 12 : t.hours % 12;
+  const ampm = t.hours < 12 ? "AM" : "PM";
+  return `${pad2(h)}:${pad2(t.minutes)} ${ampm}`;
+}
+function TimePicker({
+  value,
+  defaultValue,
+  onChange,
+  variant = "analog",
+  switchable = true,
+  hourCycle = 24,
+  minuteStep = 1,
+  placeholder = "Pick a time",
+  align = "left",
+  className = "",
+  style,
+  triggerLabel,
+  disabled
+}) {
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? null);
+  const current = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState(variant);
+  const [draft, setDraft] = useState(current ?? { hours: 12, minutes: 0 });
+  const wrap2 = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap2.current && !wrap2.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open) setDraft(current ?? { hours: (/* @__PURE__ */ new Date()).getHours(), minutes: 0 });
+  }, [open]);
+  useEffect(() => {
+    setMode(variant);
+  }, [variant]);
+  const commit = (next) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  const setNow = () => {
+    const now = /* @__PURE__ */ new Date();
+    setDraft({ hours: now.getHours(), minutes: now.getMinutes() });
+  };
+  const apply = () => {
+    commit(draft);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrap2,
+      className: ["royui-tp", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "royui-tp__trigger",
+            onClick: () => !disabled && setOpen((o) => !o),
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "royui-tp__trigger-dot", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "royui-tp__trigger-label", children: triggerLabel ?? (formatTime(current ?? null, hourCycle) || placeholder) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `royui-tp__panel royui-tp__panel--${align}`,
+            role: "dialog",
+            "aria-label": "Choose time",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "royui-tp__head", children: [
+                /* @__PURE__ */ jsx("div", { className: "royui-tp__readout", children: formatTime(draft, hourCycle) }),
+                switchable && /* @__PURE__ */ jsxs("div", { className: "royui-tp__variants", role: "tablist", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "tab",
+                      "aria-selected": mode === "analog",
+                      className: [
+                        "royui-tp__variant",
+                        mode === "analog" && "royui-tp__variant--on"
+                      ].filter(Boolean).join(" "),
+                      onClick: () => setMode("analog"),
+                      children: "Analog"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      role: "tab",
+                      "aria-selected": mode === "digital",
+                      className: [
+                        "royui-tp__variant",
+                        mode === "digital" && "royui-tp__variant--on"
+                      ].filter(Boolean).join(" "),
+                      onClick: () => setMode("digital"),
+                      children: "Digital"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "royui-tp__body", children: mode === "analog" ? /* @__PURE__ */ jsx(
+                AnalogClock,
+                {
+                  value: draft,
+                  onChange: setDraft,
+                  hourCycle,
+                  minuteStep
+                }
+              ) : /* @__PURE__ */ jsx(
+                DigitalClock,
+                {
+                  value: draft,
+                  onChange: setDraft,
+                  hourCycle,
+                  minuteStep
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "royui-tp__foot", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", className: "royui-tp__ghost", onClick: setNow, children: "Now" }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "royui-tp__primary", onClick: apply, children: "Apply" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnMenu({
+  columns,
+  layout,
+  onToggle,
+  onReset
+}) {
+  const [open, setOpen] = useState(false);
+  const wrap2 = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap2.current && !wrap2.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const hiddenCount = layout.hidden.length;
+  return /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu", ref: wrap2, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "royui-dt-colmenu__trigger",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        children: "Columns"
+      }
+    ),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "royui-dt-colmenu__chip",
+        onClick: () => setOpen(true),
+        children: [
+          hiddenCount,
+          " hidden"
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu__panel", role: "menu", children: [
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt-colmenu__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "royui-dt-colmenu__title", children: "Columns" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "royui-dt-colmenu__reset",
+            onClick: () => {
+              onReset();
+            },
+            children: "Reset"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "royui-dt-colmenu__list", children: columns.map((c) => {
+        const isHidden = layout.hidden.includes(c.key);
+        const disabled = c.hideable === false;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitemcheckbox",
+            "aria-checked": !isHidden,
+            className: [
+              "royui-dt-colmenu__row",
+              isHidden && "royui-dt-colmenu__row--off",
+              disabled && "royui-dt-colmenu__row--locked"
+            ].filter(Boolean).join(" "),
+            onClick: () => !disabled && onToggle(c.key),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    "royui-dt-colmenu__dot",
+                    !isHidden && "royui-dt-colmenu__dot--on"
+                  ].filter(Boolean).join(" "),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "royui-dt-colmenu__label", children: c.header })
+            ]
+          }
+        ) }, c.key);
+      }) })
+    ] })
+  ] });
+}
+function defaultLayout(columns) {
+  return {
+    order: columns.map((c) => c.key),
+    sizes: columns.reduce((acc, c) => {
+      if (c.defaultWidth != null) acc[c.key] = c.defaultWidth;
+      return acc;
+    }, {}),
+    hidden: columns.filter((c) => c.defaultHidden).map((c) => c.key)
+  };
+}
+function loadLayout(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function saveLayout(key, layout) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(layout));
+  } catch {
+  }
+}
+function useTableLayout(columns, storageKey) {
+  const initial = useMemo(() => {
+    return loadLayout(storageKey) ?? defaultLayout(columns);
+  }, []);
+  const [layout, setLayout] = useState(initial);
+  useEffect(() => {
+    setLayout((prev) => {
+      const known = new Set(columns.map((c) => c.key));
+      const order = prev.order.filter((k) => known.has(k));
+      columns.forEach((c) => {
+        if (!order.includes(c.key)) order.push(c.key);
+      });
+      const sizes = {};
+      Object.entries(prev.sizes).forEach(([k, v]) => {
+        if (known.has(k)) sizes[k] = v;
+      });
+      const hidden = prev.hidden.filter((k) => known.has(k));
+      return { order, sizes, hidden };
+    });
+  }, [columns]);
+  useEffect(() => {
+    saveLayout(storageKey, layout);
+  }, [layout, storageKey]);
+  const orderedColumns = useMemo(() => {
+    const pinnedLeft = columns.filter((c) => c.pinned === "left");
+    const pinnedRight = columns.filter((c) => c.pinned === "right");
+    const pinnedKeys = new Set(
+      [...pinnedLeft, ...pinnedRight].map((c) => c.key)
+    );
+    const rest = layout.order.filter((k) => !pinnedKeys.has(k)).map((k) => columns.find((c) => c.key === k)).filter(Boolean);
+    return [...pinnedLeft, ...rest, ...pinnedRight];
+  }, [columns, layout.order]);
+  const visibleColumns = useMemo(
+    () => orderedColumns.filter((c) => !layout.hidden.includes(c.key)),
+    [orderedColumns, layout.hidden]
+  );
+  const reorder = useCallback((key, toIndex) => {
+    setLayout((prev) => {
+      const order = [...prev.order];
+      const from = order.indexOf(key);
+      if (from === -1 || from === toIndex) return prev;
+      const item = order.splice(from, 1)[0];
+      if (item === void 0) return prev;
+      const insertAt = toIndex > from ? toIndex - 1 : toIndex;
+      order.splice(Math.max(0, Math.min(insertAt, order.length)), 0, item);
+      return { ...prev, order };
+    });
+  }, []);
+  const resize = useCallback((key, px) => {
+    setLayout((prev) => {
+      const sizes = { ...prev.sizes };
+      if (px == null) delete sizes[key];
+      else sizes[key] = Math.max(40, Math.round(px));
+      return { ...prev, sizes };
+    });
+  }, []);
+  const toggleHidden = useCallback((key) => {
+    setLayout((prev) => {
+      const hidden = prev.hidden.includes(key) ? prev.hidden.filter((k) => k !== key) : [...prev.hidden, key];
+      return { ...prev, hidden };
+    });
+  }, []);
+  const reset = useCallback(() => {
+    setLayout(defaultLayout(columns));
+  }, [columns]);
+  return {
+    layout,
+    orderedColumns,
+    visibleColumns,
+    reorder,
+    resize,
+    toggleHidden,
+    reset
+  };
+}
+
+// src/components/data-table/filters.ts
+function defaultSearchPredicate(row, query, columns) {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return columns.some((c) => {
+    const v = c.accessor(row);
+    if (v == null) return false;
+    const s = v instanceof Date ? v.toLocaleString() : String(v);
+    return s.toLowerCase().includes(q);
+  });
+}
+function applyFilters(rows, columns, filters, cfg) {
+  const searchFn = cfg.searchPredicate ?? defaultSearchPredicate;
+  return rows.filter((row) => {
+    if (filters.search && !searchFn(row, filters.search, columns)) return false;
+    if (cfg.dateColumn && (filters.dateRange.from || filters.dateRange.to)) {
+      const col = columns.find((c) => c.key === cfg.dateColumn);
+      if (col) {
+        const raw = col.accessor(row);
+        const d = raw instanceof Date ? raw : raw ? new Date(raw) : null;
+        if (!d || isNaN(d.getTime())) return false;
+        const day = startOfDay(d);
+        const from = filters.dateRange.from ?? day;
+        const to = filters.dateRange.to ?? filters.dateRange.from ?? day;
+        if (!isBetween(day, startOfDay(from), startOfDay(to))) return false;
+      }
+    }
+    if (cfg.timeColumn && filters.time) {
+      const col = columns.find((c) => c.key === cfg.timeColumn);
+      if (col) {
+        const raw = col.accessor(row);
+        const d = raw instanceof Date ? raw : raw ? new Date(raw) : null;
+        if (!d || isNaN(d.getTime())) return false;
+        const rowMin = d.getHours() * 60 + d.getMinutes();
+        const filterMin = filters.time.hours * 60 + filters.time.minutes;
+        const tol = cfg.timeTolerance ?? 0;
+        if (Math.abs(rowMin - filterMin) > tol) return false;
+      }
+    }
+    return true;
+  });
+}
+function applySort(rows, columns, sort) {
+  if (!sort || !sort.dir) return rows;
+  const col = columns.find((c) => c.key === sort.key);
+  if (!col) return rows;
+  const dirMul = sort.dir === "asc" ? 1 : -1;
+  const getter = col.sortBy ?? col.accessor;
+  return [...rows].sort((a, b) => {
+    const av = getter(a);
+    const bv = getter(b);
+    if (av == null && bv == null) return 0;
+    if (av == null) return 1;
+    if (bv == null) return -1;
+    if (av instanceof Date && bv instanceof Date) {
+      return (av.getTime() - bv.getTime()) * dirMul;
+    }
+    if (typeof av === "number" && typeof bv === "number") {
+      return (av - bv) * dirMul;
+    }
+    return String(av).localeCompare(String(bv)) * dirMul;
+  });
+}
+function paginate(rows, page, pageSize) {
+  const start = (page - 1) * pageSize;
+  return rows.slice(start, start + pageSize);
+}
+
+// src/components/data-table/io.ts
+function csvEscape(v) {
+  if (v == null) return "";
+  const s = typeof v === "string" ? v : v instanceof Date ? v.toISOString() : String(v);
+  if (/[",\n\r]/.test(s)) {
+    return `"${s.replace(/"/g, '""')}"`;
+  }
+  return s;
+}
+function toCsv(rows, cols) {
+  const visible = cols.filter((c) => !c.defaultHidden);
+  const header = visible.map((c) => csvEscape(c.header)).join(",");
+  const body = rows.map(
+    (row) => visible.map((c) => csvEscape(c.accessor(row))).join(",")
+  ).join("\n");
+  return body ? `${header}
+${body}` : header;
+}
+function fromCsv(text) {
+  const rows = [];
+  let cur = [];
+  let field = "";
+  let i = 0;
+  let inQuotes = false;
+  const len = text.length;
+  while (i < len) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i += 2;
+          continue;
+        }
+        inQuotes = false;
+        i++;
+        continue;
+      }
+      field += ch;
+      i++;
+      continue;
+    }
+    if (ch === '"') {
+      inQuotes = true;
+      i++;
+      continue;
+    }
+    if (ch === ",") {
+      cur.push(field);
+      field = "";
+      i++;
+      continue;
+    }
+    if (ch === "\r") {
+      i++;
+      continue;
+    }
+    if (ch === "\n") {
+      cur.push(field);
+      rows.push(cur);
+      cur = [];
+      field = "";
+      i++;
+      continue;
+    }
+    field += ch;
+    i++;
+  }
+  if (field.length > 0 || cur.length > 0) {
+    cur.push(field);
+    rows.push(cur);
+  }
+  if (rows.length === 0) return [];
+  const head = rows[0] ?? [];
+  const body = rows.slice(1);
+  return body.map((r) => {
+    const obj = {};
+    head.forEach((h, idx) => {
+      obj[h] = r[idx] ?? "";
+    });
+    return obj;
+  });
+}
+function toJson(rows, cols) {
+  const visible = cols.filter((c) => !c.defaultHidden);
+  const out = rows.map((row) => {
+    const obj = {};
+    visible.forEach((c) => {
+      obj[c.key] = c.accessor(row);
+    });
+    return obj;
+  });
+  return JSON.stringify(out, null, 2);
+}
+function fromJson(text) {
+  const parsed = JSON.parse(text);
+  if (!Array.isArray(parsed)) {
+    throw new Error("Expected a JSON array of rows");
+  }
+  return parsed;
+}
+function downloadString(text, filename, mime) {
+  if (typeof window === "undefined") return;
+  const blob = new Blob([text], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function fontStyleFor(spec) {
+  if (!spec) return void 0;
+  if (typeof spec === "string") return { fontFamily: spec };
+  const s = {};
+  if (spec.family) s.fontFamily = spec.family;
+  if (spec.size != null)
+    s.fontSize = typeof spec.size === "number" ? `${spec.size}px` : spec.size;
+  if (spec.weight != null) s.fontWeight = spec.weight;
+  if (spec.letterSpacing) s.letterSpacing = spec.letterSpacing;
+  if (spec.featureSettings) s.fontFeatureSettings = spec.featureSettings;
+  return s;
+}
+function renderCellValue(value, type) {
+  if (value == null) return "";
+  if (value instanceof Date) {
+    if (type === "time") {
+      return value.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+    }
+    if (type === "date") {
+      return value.toLocaleDateString();
+    }
+    return value.toLocaleString();
+  }
+  return String(value);
+}
+function DataTable({
+  data,
+  columns,
+  getRowId,
+  visibleRows = 7,
+  rowHeight = 44,
+  stickyHeader = true,
+  density = "cozy",
+  loading,
+  empty,
+  fitColumns = false,
+  search,
+  dateFilter,
+  timeFilter,
+  pagination,
+  reorderable = true,
+  resizable = true,
+  columnMenu = true,
+  dataIO,
+  headerFont,
+  rowHeaderFont,
+  cellFont,
+  storageKey,
+  className = "",
+  toolbarExtras
+}) {
+  const {
+    layout,
+    orderedColumns,
+    visibleColumns,
+    reorder,
+    resize,
+    toggleHidden,
+    reset
+  } = useTableLayout(columns, storageKey);
+  const [filters, setFilters] = useState({
+    search: "",
+    dateRange: { from: null, to: null },
+    time: null
+  });
+  const [sort, setSort] = useState(null);
+  const pageSize = pagination === false ? Infinity : pagination?.pageSize ?? 25;
+  const [page, setPage] = useState(1);
+  const filtered = useMemo(
+    () => applyFilters(data, columns, filters, {
+      dateColumn: dateFilter?.column,
+      timeColumn: timeFilter?.column,
+      timeTolerance: timeFilter?.toleranceMinutes,
+      searchPredicate: search?.predicate
+    }),
+    [data, columns, filters, dateFilter?.column, timeFilter?.column, timeFilter?.toleranceMinutes, search?.predicate]
+  );
+  const sorted = useMemo(() => applySort(filtered, columns, sort), [filtered, columns, sort]);
+  const pageCount = pagination === false ? 1 : Math.max(1, Math.ceil(sorted.length / pageSize));
+  const currentPage = Math.min(page, pageCount);
+  const pageRows = useMemo(
+    () => pagination === false ? sorted : paginate(sorted, currentPage, pageSize),
+    [pagination, sorted, currentPage, pageSize]
+  );
+  const [dragKey, setDragKey] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const onDragStart = (e, key) => {
+    if (!reorderable) return;
+    setDragKey(key);
+    e.dataTransfer.effectAllowed = "move";
+    try {
+      e.dataTransfer.setData("text/plain", key);
+    } catch {
+    }
+  };
+  const onDragOver = (e, idx) => {
+    if (!reorderable || !dragKey) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const rect = e.currentTarget.getBoundingClientRect();
+    const isRight = e.clientX - rect.left > rect.width / 2;
+    setDropIndex(idx + (isRight ? 1 : 0));
+  };
+  const onDrop = (e) => {
+    if (!reorderable || !dragKey || dropIndex == null) return;
+    e.preventDefault();
+    reorder(dragKey, dropIndex);
+    setDragKey(null);
+    setDropIndex(null);
+  };
+  const onDragEnd = () => {
+    setDragKey(null);
+    setDropIndex(null);
+  };
+  const resizingKey = useRef(null);
+  const resizeStartX = useRef(0);
+  const resizeStartW = useRef(0);
+  const beginResize = (e, key) => {
+    if (!resizable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const th = e.currentTarget.parentElement ?? null;
+    const startW = th ? th.getBoundingClientRect().width : 120;
+    resizingKey.current = key;
+    resizeStartX.current = e.clientX;
+    resizeStartW.current = startW;
+    window.addEventListener("pointermove", onResizeMove);
+    window.addEventListener("pointerup", endResize);
+  };
+  const onResizeMove = (e) => {
+    if (!resizingKey.current) return;
+    const dx = e.clientX - resizeStartX.current;
+    const col = columns.find((c) => c.key === resizingKey.current);
+    const min = col?.minWidth ?? 80;
+    const max = col?.maxWidth ?? 2e3;
+    const next = Math.max(min, Math.min(max, resizeStartW.current + dx));
+    resize(resizingKey.current, next);
+  };
+  const endResize = () => {
+    resizingKey.current = null;
+    window.removeEventListener("pointermove", onResizeMove);
+    window.removeEventListener("pointerup", endResize);
+  };
+  const doubleClickReset = (key) => resize(key, null);
+  const cycleSort = useCallback((key) => {
+    setSort((prev) => {
+      if (!prev || prev.key !== key) return { key, dir: "asc" };
+      if (prev.dir === "asc") return { key, dir: "desc" };
+      return null;
+    });
+  }, []);
+  const fileInput = useRef(null);
+  const [ioFlash, setIoFlash] = useState(null);
+  const flashTimer = useRef(null);
+  const flash = (text, ms = 1400) => {
+    if (flashTimer.current) clearTimeout(flashTimer.current);
+    setIoFlash(text);
+    flashTimer.current = setTimeout(() => setIoFlash(null), ms);
+  };
+  const exportRows = (format) => {
+    if (!dataIO?.export) return;
+    const scope = dataIO.export.scope ?? "filtered";
+    let rows;
+    if (scope === "all") rows = data;
+    else if (scope === "page") rows = pageRows;
+    else rows = sorted;
+    const cols = visibleColumns;
+    const text = dataIO.export.serialize ? dataIO.export.serialize(rows, cols, format) : format === "csv" ? toCsv(rows, cols) : toJson(rows, cols);
+    const baseName = typeof dataIO.export.filename === "function" ? dataIO.export.filename() : dataIO.export.filename ?? "table-export";
+    const filename = `${baseName}.${format}`;
+    const mime = format === "csv" ? "text/csv;charset=utf-8" : "application/json";
+    downloadString(text, filename, mime);
+    flash("Exported");
+  };
+  const onPickFile = async (file) => {
+    if (!dataIO?.import) return;
+    const text = await file.text();
+    try {
+      const parsed = dataIO.import.parse ? await dataIO.import.parse(text, file) : file.name.endsWith(".json") ? fromJson(text) : fromCsv(text);
+      dataIO.import.onImport(parsed, {
+        mode: dataIO.import.mode ?? "replace",
+        file
+      });
+      flash(`Imported ${parsed.length} ${parsed.length === 1 ? "row" : "rows"}`);
+    } catch (err) {
+      dataIO.import.onError?.(err, file);
+      flash("Couldn't read file", 2e3);
+    }
+  };
+  const showToolbar = search?.enabled || !!dateFilter || !!timeFilter || columnMenu || !!dataIO?.export?.enabled || !!dataIO?.import?.enabled || !!toolbarExtras;
+  const exportFormats = dataIO?.export?.formats ?? ["csv", "json"];
+  const [exportMenuOpen, setExportMenuOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: ["royui-dt", className].filter(Boolean).join(" "), children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar-left", children: [
+        search?.enabled && /* @__PURE__ */ jsx(
+          TableSearch,
+          {
+            value: filters.search,
+            onChange: (v) => {
+              setFilters((f) => ({ ...f, search: v }));
+              setPage(1);
+            },
+            placeholder: search.placeholder,
+            debounceMs: search.debounceMs
+          }
+        ),
+        dateFilter && /* @__PURE__ */ jsx(
+          DateRangePicker,
+          {
+            value: filters.dateRange,
+            onChange: (r) => {
+              setFilters((f) => ({ ...f, dateRange: r }));
+              setPage(1);
+            },
+            monthsVisible: dateFilter.monthsVisible ?? 2,
+            placeholder: dateFilter.placeholder ?? "Date range"
+          }
+        ),
+        timeFilter && /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            value: filters.time,
+            onChange: (t) => {
+              setFilters((f) => ({ ...f, time: t }));
+              setPage(1);
+            },
+            variant: timeFilter.variant ?? "analog",
+            hourCycle: timeFilter.hourCycle ?? 24,
+            placeholder: timeFilter.placeholder ?? "Time"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "royui-dt__toolbar-right", children: [
+        toolbarExtras,
+        columnMenu && /* @__PURE__ */ jsx(
+          ColumnMenu,
+          {
+            columns: orderedColumns,
+            layout,
+            onToggle: toggleHidden,
+            onReset: reset
+          }
+        ),
+        (dataIO?.export?.enabled || dataIO?.import?.enabled) && /* @__PURE__ */ jsx("span", { className: "royui-dt__sep", "aria-hidden": true, children: "\xB7" }),
+        dataIO?.export?.enabled && /* @__PURE__ */ jsxs("div", { className: "royui-dt-io", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-dt-io__btn",
+              onClick: () => {
+                const only = exportFormats[0];
+                if (exportFormats.length === 1 && only) {
+                  exportRows(only);
+                } else {
+                  setExportMenuOpen((o) => !o);
+                }
+              },
+              children: ioFlash && ioFlash.startsWith("Export") ? ioFlash : "Export"
+            }
+          ),
+          exportMenuOpen && exportFormats.length > 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "royui-dt-io__menu",
+              onMouseLeave: () => setExportMenuOpen(false),
+              children: exportFormats.map((f) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "royui-dt-io__menu-item",
+                  onClick: () => {
+                    exportRows(f);
+                    setExportMenuOpen(false);
+                  },
+                  children: f.toUpperCase()
+                },
+                f
+              ))
+            }
+          )
+        ] }),
+        dataIO?.import?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-dt-io__btn",
+              onClick: () => fileInput.current?.click(),
+              children: ioFlash && (ioFlash.startsWith("Import") || ioFlash.startsWith("Couldn't")) ? ioFlash : "Import"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInput,
+              type: "file",
+              accept: dataIO.import.accept ?? ".csv,.json",
+              style: { display: "none" },
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) onPickFile(f);
+                e.target.value = "";
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Table,
+      {
+        visibleRows,
+        rowHeight,
+        stickyHeader,
+        density,
+        loading,
+        empty,
+        isEmpty: pageRows.length === 0,
+        fitColumns,
+        headerFont,
+        rowHeaderFont,
+        cellFont,
+        children: [
+          /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((c) => {
+            const w = fitColumns ? void 0 : layout.sizes[c.key];
+            return /* @__PURE__ */ jsx(
+              "col",
+              {
+                style: w ? { width: w } : void 0,
+                className: dragKey === c.key ? "royui-dt__col--dragging" : void 0
+              },
+              c.key
+            );
+          }) }),
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            visibleColumns.map((c, idx) => {
+              const isDragging = dragKey === c.key;
+              const showDropBefore = dropIndex === idx;
+              const sortDir = sort && sort.key === c.key && sort.dir ? sort.dir : null;
+              const canReorder = reorderable && c.reorderable !== false && !c.pinned;
+              const canResize = resizable && c.resizable !== false;
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  align: c.align ?? (c.type === "number" ? "right" : "left"),
+                  className: [
+                    "royui-dt__th",
+                    canReorder && "royui-dt__th--reorderable",
+                    canResize && "royui-dt__th--resizable",
+                    isDragging && "royui-dt__th--dragging",
+                    showDropBefore && "royui-dt__th--drop-before"
+                  ].filter(Boolean).join(" "),
+                  draggable: canReorder,
+                  onDragStart: (e) => onDragStart(e, c.key),
+                  onDragOver: (e) => onDragOver(e, idx),
+                  onDrop,
+                  onDragEnd,
+                  title: canReorder && canResize ? "Drag to reorder \xB7 drag the right edge to resize" : canReorder ? "Drag to reorder" : canResize ? "Drag the right edge to resize" : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "royui-dt__th-inner",
+                        onClick: () => cycleSort(c.key),
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            cycleSort(c.key);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "royui-dt__th-label", children: c.header }),
+                          sortDir && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: `royui-dt__sort-indicator royui-dt__sort-indicator--${sortDir}`,
+                              "aria-hidden": true
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    canResize && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "royui-dt__resize",
+                        onPointerDown: (e) => beginResize(e, c.key),
+                        onDoubleClick: () => doubleClickReset(c.key),
+                        "aria-hidden": true,
+                        children: /* @__PURE__ */ jsx("span", { className: "royui-dt__resize-bar", "aria-hidden": true })
+                      }
+                    )
+                  ]
+                },
+                c.key
+              );
+            }),
+            dropIndex === visibleColumns.length && /* @__PURE__ */ jsx(TableHead, { className: "royui-dt__th--drop-end", "aria-hidden": true })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: pageRows.map((row, i) => {
+            const id = getRowId ? getRowId(row, i) : row?.["id"] != null ? String(row["id"]) : i;
+            return /* @__PURE__ */ jsx(TableRow, { children: visibleColumns.map((c) => {
+              const value = c.accessor(row);
+              const display = c.cell ? c.cell(value, row) : renderCellValue(value, c.type);
+              const cellStyle = fontStyleFor(c.font);
+              const isNum = c.type === "number";
+              return /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  isRowHeader: c.isRowHeader,
+                  align: c.align ?? (isNum ? "right" : "left"),
+                  className: isNum ? "royui-table__td--num" : void 0,
+                  style: cellStyle,
+                  children: display
+                },
+                c.key
+              );
+            }) }, id);
+          }) })
+        ]
+      }
+    ),
+    pagination !== false && pageCount > 1 && /* @__PURE__ */ jsx("div", { className: "royui-dt__pagination", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: currentPage,
+        pageCount,
+        onPageChange: setPage,
+        siblingCount: pagination?.siblingCount ?? 1,
+        showSummary: pagination?.showSummary ?? true,
+        summaryRender: (p, pc) => `${(p - 1) * pageSize + 1}\u2013${Math.min(p * pageSize, sorted.length)} of ${sorted.length}`
+      }
+    ) })
+  ] });
+}
 
-export { GradientButton, MadeBy, Popover, TextMorph, TreeNav, TreeNavItem };
+export { AnalogClock, Button, ColumnMenu, DEFAULT_PRESETS, DataTable, DateRangePicker, DigitalClock, GradientButton, MadeBy, Pagination, Popover, Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSearch, TextMorph, TimePicker, TreeNav, TreeNavItem, addDays, addMonths, downloadString, formatMonthYear, formatRange, formatShort, formatTime, fromCsv, fromJson, isBetween, isSameDay, startOfDay, toCsv, toJson };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map