@arqel-dev/ui 0.11.0 → 0.13.0

package/dist/table.js

@@ -1,620 +1,6 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
-import { useRef, useMemo, useCallback } from 'react';
-import { cva } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-// src/utils/cn.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function TableCell({ column, value }) {
-  switch (column.type) {
-    case "text":
-      return /* @__PURE__ */ jsx(TextCell, { column, value });
-    case "badge":
-      return /* @__PURE__ */ jsx(BadgeCell, { column, value });
-    case "boolean":
-      return /* @__PURE__ */ jsx(BooleanCell, { column, value });
-    case "date":
-      return /* @__PURE__ */ jsx(DateCell, { column, value });
-    case "number":
-      return /* @__PURE__ */ jsx(NumberCell, { column, value });
-    case "icon":
-      return /* @__PURE__ */ jsx(IconCell, { column });
-    case "image":
-      return /* @__PURE__ */ jsx(ImageCell, { column, value });
-    case "relationship":
-      return /* @__PURE__ */ jsx(RelationshipCell, { column, value });
-    case "computed":
-      return /* @__PURE__ */ jsx(ComputedCell, { column, value });
-  }
-}
-function asString(value) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  return JSON.stringify(value);
-}
-function TextCell({ column, value }) {
-  const str = asString(value);
-  const truncated = column.props.truncate && str.length > column.props.truncate ? `${str.slice(0, column.props.truncate)}\u2026` : str;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        column.props.weight === "bold" && "font-bold",
-        column.props.weight === "medium" && "font-medium"
-      ),
-      children: truncated
-    }
-  );
-}
-function BadgeCell({ column, value }) {
-  const option = column.props.options?.find((o) => o.value === value);
-  const label = option?.label ?? asString(value);
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex items-center px-2 py-0.5 text-xs",
-        column.props.pill ? "rounded-full" : "rounded-sm",
-        "bg-muted text-foreground"
-      ),
-      children: label
-    }
-  );
-}
-function BooleanCell({ column, value }) {
-  const truthy = Boolean(value);
-  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": truthy ? "true" : "false", children: truthy ? column.props.trueIcon ?? "\u2713" : column.props.falseIcon ?? "\u2014" });
-}
-function DateCell({ column, value }) {
-  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
-  const raw = String(value);
-  const date = new Date(raw);
-  if (Number.isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", { children: raw });
-  if (column.props.mode === "since") {
-    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatRelative(date) });
-  }
-  if (column.props.mode === "datetime") {
-    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleString() });
-  }
-  return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleDateString() });
-}
-function formatRelative(date) {
-  const seconds = Math.round((Date.now() - date.getTime()) / 1e3);
-  if (seconds < 60) return `${seconds}s ago`;
-  const minutes = Math.round(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.round(hours / 24);
-  return `${days}d ago`;
-}
-function NumberCell({ column, value }) {
-  if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { children: "\u2014" });
-  const num = typeof value === "number" ? value : Number(value);
-  if (Number.isNaN(num)) return /* @__PURE__ */ jsx("span", { children: asString(value) });
-  const formatted = num.toFixed(column.props.decimals ?? 0);
-  const [whole, dec] = formatted.split(".");
-  const safeWhole = whole ?? "0";
-  const ts = column.props.thousandsSeparator;
-  const finalWhole = ts ? safeWhole.replace(/\B(?=(\d{3})+(?!\d))/g, ts) : safeWhole;
-  const ds = column.props.decimalSeparator ?? ".";
-  return /* @__PURE__ */ jsxs("span", { children: [
-    column.props.prefix ?? "",
-    finalWhole,
-    dec ? `${ds}${dec}` : "",
-    column.props.suffix ?? ""
-  ] });
-}
-function IconCell({ column }) {
-  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": column.props.icon, title: column.props.icon, children: column.props.icon });
-}
-function ImageCell({ column, value }) {
-  const src = asString(value);
-  if (!src) return null;
-  const size = column.props.size ?? 32;
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt: "",
-      style: { width: size, height: size },
-      className: cn(column.props.shape === "circular" ? "rounded-full" : "rounded")
-    }
-  );
-}
-function RelationshipCell({ column, value }) {
-  if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { children: "\u2014" });
-  if (typeof value === "object") {
-    const attr = value[column.props.attribute];
-    return /* @__PURE__ */ jsx("span", { children: asString(attr) });
-  }
-  return /* @__PURE__ */ jsx("span", { children: asString(value) });
-}
-function ComputedCell({ column, value }) {
-  if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: column.props.placeholder ?? "\u2014" });
-  }
-  return /* @__PURE__ */ jsx("span", { children: asString(value) });
-}
-function DataTable({
-  columns,
-  records,
-  enableSelection = false,
-  selectedIds = [],
-  onSelectionChange,
-  sort = null,
-  onSortChange,
-  rowActions,
-  loading = false,
-  emptyState,
-  className
-}) {
-  const lastClickedIndexRef = useRef(null);
-  const visibleColumns = useMemo(() => columns.filter((col) => !col.hidden), [columns]);
-  const tableColumns = useMemo(
-    () => visibleColumns.map((col) => ({
-      id: col.name,
-      accessorFn: (row) => row[col.name],
-      header: () => col.label ?? col.name,
-      cell: (info) => /* @__PURE__ */ jsx(TableCell, { column: col, value: info.getValue() }),
-      enableSorting: col.sortable
-    })),
-    [visibleColumns]
-  );
-  const table = useReactTable({
-    data: records,
-    columns: tableColumns,
-    getCoreRowModel: getCoreRowModel()
-  });
-  const allSelected = enableSelection && records.length > 0 && selectedIds.length === records.length;
-  const someSelected = enableSelection && selectedIds.length > 0 && selectedIds.length < records.length;
-  const toggleAll = useCallback(() => {
-    if (!onSelectionChange) return;
-    if (allSelected) onSelectionChange([]);
-    else onSelectionChange(records.map((r) => r.id));
-  }, [allSelected, records, onSelectionChange]);
-  const toggleRow = useCallback(
-    (id, index, shiftKey) => {
-      if (!onSelectionChange) return;
-      const set = new Set(selectedIds);
-      const lastIndex = lastClickedIndexRef.current;
-      if (shiftKey && lastIndex !== null) {
-        const [from, to] = lastIndex < index ? [lastIndex, index] : [index, lastIndex];
-        const shouldSelect = !set.has(id);
-        for (let i = from; i <= to; i++) {
-          const rowId = records[i]?.id;
-          if (rowId === void 0) continue;
-          if (shouldSelect) set.add(rowId);
-          else set.delete(rowId);
-        }
-      } else if (set.has(id)) {
-        set.delete(id);
-      } else {
-        set.add(id);
-      }
-      lastClickedIndexRef.current = index;
-      onSelectionChange(Array.from(set));
-    },
-    [records, selectedIds, onSelectionChange]
-  );
-  const headerSortDirection = (columnName) => {
-    if (!sort || sort.column !== columnName) return null;
-    return sort.direction === "desc" ? "desc" : "asc";
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
-    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-background", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
-      enableSelection && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          "aria-label": "Select all rows",
-          checked: allSelected,
-          ref: (el) => {
-            if (el) el.indeterminate = someSelected;
-          },
-          onChange: toggleAll
-        }
-      ) }),
-      group.headers.map((header) => {
-        const col = visibleColumns.find((c) => c.name === header.column.id);
-        const sortable = col?.sortable && onSortChange;
-        const direction = headerSortDirection(header.column.id);
-        return /* @__PURE__ */ jsx(
-          "th",
-          {
-            scope: "col",
-            className: cn(
-              "px-3 py-2 text-left font-medium text-muted-foreground",
-              col?.align === "center" && "text-center",
-              col?.align === "end" && "text-right"
-            ),
-            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
-            children: sortable ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: "inline-flex items-center gap-1 hover:text-foreground",
-                onClick: () => onSortChange(header.column.id, direction === "asc" ? "desc" : "asc"),
-                children: [
-                  flexRender(header.column.columnDef.header, header.getContext()),
-                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" })
-                ]
-              }
-            ) : flexRender(header.column.columnDef.header, header.getContext())
-          },
-          header.id
-        );
-      }),
-      rowActions && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-24 px-3 py-2 text-right", "aria-label": "Actions" })
-    ] }, group.id)) }),
-    /* @__PURE__ */ jsxs("tbody", { children: [
-      loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
-          className: "px-3 py-4 text-center text-muted-foreground",
-          children: "Loading\u2026"
-        }
-      ) }),
-      !loading && records.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
-          className: "px-3 py-8 text-center text-muted-foreground",
-          children: emptyState ?? "No records found."
-        }
-      ) }),
-      !loading && table.getRowModel().rows.map((row, index) => {
-        const record = row.original;
-        const checked = selectedIds.includes(record.id);
-        return /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            "data-selected": checked || void 0,
-            className: cn("border-b border-border", checked && "bg-muted"),
-            children: [
-              enableSelection && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  "aria-label": `Select row ${record.id}`,
-                  checked,
-                  onChange: (event) => {
-                    const native = event.nativeEvent;
-                    toggleRow(record.id, index, native.shiftKey === true);
-                  }
-                }
-              ) }),
-              row.getVisibleCells().map((cell) => {
-                const col = visibleColumns.find((c) => c.name === cell.column.id);
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: cn(
-                      "px-3 py-2",
-                      col?.align === "center" && "text-center",
-                      col?.align === "end" && "text-right",
-                      col?.hiddenOnMobile && "hidden md:table-cell"
-                    ),
-                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                  },
-                  cell.id
-                );
-              }),
-              rowActions && /* @__PURE__ */ jsx("td", { className: "w-24 px-3 py-2 text-right", children: rowActions(record) })
-            ]
-          },
-          row.id
-        );
-      })
-    ] })
-  ] }) });
-}
-var buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-function TableFilters({
-  filters,
-  values,
-  onChange,
-  onClearAll,
-  className
-}) {
-  if (filters.length === 0) return null;
-  const activeCount = filters.reduce((acc, f) => {
-    const v = values[f.name];
-    return v !== void 0 && v !== null && v !== "" ? acc + 1 : acc;
-  }, 0);
-  return /* @__PURE__ */ jsxs("fieldset", { className: cn("flex flex-wrap items-end gap-2 border-0 p-0", className), children: [
-    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Filters" }),
-    filters.map((filter) => /* @__PURE__ */ jsx(
-      FilterControl,
-      {
-        filter,
-        value: values[filter.name],
-        onChange: (v) => onChange(filter.name, v)
-      },
-      filter.name
-    )),
-    activeCount > 0 && onClearAll && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: [
-      "Clear filters (",
-      activeCount,
-      ")"
-    ] })
-  ] });
-}
-function FilterControl({
-  filter,
-  value,
-  onChange
-}) {
-  switch (filter.type) {
-    case "select":
-      return /* @__PURE__ */ jsx(SelectFilter, { filter, value, onChange });
-    case "multiSelect":
-      return /* @__PURE__ */ jsx(MultiSelectFilter, { filter, value, onChange });
-    case "text":
-      return /* @__PURE__ */ jsx(TextFilter, { filter, value, onChange });
-    case "ternary":
-      return /* @__PURE__ */ jsx(TernaryFilter, { filter, value, onChange });
-    case "dateRange":
-    case "scope":
-      return null;
-  }
-}
-function controlClasses() {
-  return cn(
-    "h-9 rounded-sm border border-[var(--input)]",
-    "bg-background px-3 text-sm",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-  );
-}
-function SelectFilter({
-  filter,
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    filter.label ?? filter.name,
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        className: controlClasses(),
-        value: value === void 0 || value === null ? "" : String(value),
-        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
-          filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        ]
-      }
-    )
-  ] });
-}
-function MultiSelectFilter({
-  filter,
-  value,
-  onChange
-}) {
-  const arr = Array.isArray(value) ? value : [];
-  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    filter.label ?? filter.name,
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        multiple: true,
-        className: cn(controlClasses(), "h-auto min-h-[2.25rem] py-1"),
-        value: arr.map(String),
-        onChange: (e) => {
-          const next = Array.from(e.target.selectedOptions, (o) => o.value);
-          onChange(next.length === 0 ? null : next);
-        },
-        children: filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-      }
-    )
-  ] });
-}
-function TextFilter({
-  filter,
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    filter.label ?? filter.name,
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        className: controlClasses(),
-        value: typeof value === "string" ? value : "",
-        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
-      }
-    )
-  ] });
-}
-function TernaryFilter({
-  filter,
-  value,
-  onChange
-}) {
-  const current = value === void 0 || value === null ? "all" : String(value);
-  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
-    filter.label ?? filter.name,
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        className: controlClasses(),
-        value: current,
-        onChange: (e) => {
-          const v = e.target.value;
-          onChange(v === "all" ? null : v);
-        },
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "all", children: filter.props.allLabel ?? "All" }),
-          /* @__PURE__ */ jsx("option", { value: "true", children: filter.props.trueLabel ?? "Yes" }),
-          /* @__PURE__ */ jsx("option", { value: "false", children: filter.props.falseLabel ?? "No" })
-        ]
-      }
-    )
-  ] });
-}
-function TablePagination({
-  meta,
-  onPageChange,
-  onPerPageChange,
-  perPageOptions = [10, 25, 50, 100],
-  className
-}) {
-  const from = (meta.currentPage - 1) * meta.perPage + 1;
-  const to = Math.min(meta.currentPage * meta.perPage, meta.total);
-  const isFirst = meta.currentPage <= 1;
-  const isLast = meta.currentPage >= meta.lastPage;
-  return /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: cn(
-        "flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm",
-        className
-      ),
-      "aria-label": "Pagination",
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: meta.total === 0 ? "No results" : `${from}\u2013${to} of ${meta.total}` }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          onPerPageChange && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-            "Per page",
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                className: "h-8 rounded-sm border border-[var(--input)] bg-background px-2",
-                value: meta.perPage,
-                onChange: (e) => onPerPageChange(Number(e.target.value)),
-                children: perPageOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              disabled: isFirst,
-              onClick: () => onPageChange(meta.currentPage - 1),
-              "aria-label": "Previous page",
-              children: "Prev"
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            meta.currentPage,
-            " / ",
-            meta.lastPage
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              disabled: isLast,
-              onClick: () => onPageChange(meta.currentPage + 1),
-              "aria-label": "Next page",
-              children: "Next"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function TableToolbar({
-  search,
-  filters,
-  selectedCount = 0,
-  bulkActions,
-  onClearSelection,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-3 py-3", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [
-      search,
-      filters
-    ] }),
-    selectedCount > 0 && /* @__PURE__ */ jsxs(
-      "section",
-      {
-        className: "flex flex-wrap items-center gap-2 rounded-sm border border-border bg-muted px-3 py-2",
-        "aria-label": "Bulk actions",
-        children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
-            selectedCount,
-            " selected"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
-            bulkActions,
-            onClearSelection && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "text-sm text-muted-foreground hover:underline",
-                onClick: onClearSelection,
-                children: "Clear"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-
-export { DataTable, TableCell, TableFilters, TablePagination, TableToolbar };
+export { DataTable, TableCell, TableFilters, TablePagination, TableToolbar } from './chunk-PZEVKMZX.js';
+import './chunk-RMPOR2YZ.js';
+import './chunk-FHRQ7PWE.js';
+import './chunk-B7ULUJVO.js';
 //# sourceMappingURL=table.js.map
 //# sourceMappingURL=table.js.map