@godxjp/ui 5.0.2 → 6.0.1

package/dist/chunk-LVNUHUEZ.js

@@ -0,0 +1,191 @@
+import { AlertQueryError } from './chunk-E4HJNQ62.js';
+import { Button } from './chunk-HJEBRCXL.js';
+import { useTranslation } from './chunk-3F2AKYRD.js';
+import * as React from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { RefreshCw } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+
+function defaultIsEmpty(data) {
+  if (!data) return true;
+  if (Array.isArray(data)) return data.length === 0;
+  if (typeof data === "object" && data !== null) {
+    const obj = data;
+    if (Array.isArray(obj.items)) return obj.items.length === 0;
+    if (typeof obj.length === "number") return obj.length === 0;
+  }
+  return false;
+}
+function DataState({
+  query,
+  skeleton,
+  empty,
+  isEmpty = defaultIsEmpty,
+  errorRenderer,
+  showRetry = true,
+  onRetry,
+  children
+}) {
+  const retry = React.useCallback(() => {
+    if (onRetry) {
+      void onRetry();
+      return;
+    }
+    void query.refetch();
+  }, [onRetry, query]);
+  if (query.isPending) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+  if (query.isError) {
+    if (query.isFetching) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+    if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
+    return /* @__PURE__ */ jsx(AlertQueryError, { error: query.error, onRetry: showRetry ? retry : void 0 });
+  }
+  const data = query.data;
+  if (data === void 0) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+  if (empty && (data === null || isEmpty(data))) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  return /* @__PURE__ */ jsx(Fragment, { children: children(data) });
+}
+function MutationFeedback({
+  mutation,
+  onRetry,
+  showRetry = true,
+  pending,
+  className
+}) {
+  if (mutation.isPending && pending) return /* @__PURE__ */ jsx(Fragment, { children: pending });
+  if (!mutation.isError || mutation.error == null) return null;
+  return /* @__PURE__ */ jsx(
+    AlertQueryError,
+    {
+      className,
+      error: mutation.error,
+      onRetry: showRetry ? onRetry : void 0
+    }
+  );
+}
+function QueryRefetchButton({
+  query,
+  label = "Refresh",
+  children,
+  variant = "outline",
+  size = "sm",
+  className,
+  ...props
+}) {
+  const text = children ?? label;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      size,
+      className,
+      onClick: () => void query.refetch(),
+      disabled: query.isFetching,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          RefreshCw,
+          {
+            className: "ui-query-refetch-icon",
+            "data-fetching": query.isFetching,
+            "aria-hidden": "true"
+          }
+        ),
+        text
+      ]
+    }
+  );
+}
+function flattenItemPages(data) {
+  if (!data) return [];
+  return data.pages.flatMap((page) => page.items);
+}
+function defaultIsEmptyFlat(flat) {
+  if (Array.isArray(flat)) return flat.length === 0;
+  return !flat;
+}
+function InfiniteQueryState({
+  query,
+  skeleton,
+  empty,
+  flatten,
+  isEmpty = defaultIsEmptyFlat,
+  errorRenderer,
+  showRetry = true,
+  onRetry,
+  loadingMore,
+  loadMore,
+  showLoadMore = true,
+  children
+}) {
+  const { t } = useTranslation();
+  const retry = React.useCallback(() => {
+    if (onRetry) {
+      void onRetry();
+      return;
+    }
+    void query.refetch();
+  }, [onRetry, query]);
+  if (query.isPending) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+  if (query.isError) {
+    if (query.isFetching && !query.isFetchingNextPage) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+    if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
+    return /* @__PURE__ */ jsx(AlertQueryError, { error: query.error, onRetry: showRetry ? retry : void 0 });
+  }
+  const data = query.data;
+  if (!data) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
+  const flat = flatten(data);
+  if (empty && isEmpty(flat)) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  const footer = showLoadMore && query.hasNextPage ? loadMore ?? /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-4", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      disabled: query.isFetchingNextPage,
+      onClick: () => void query.fetchNextPage(),
+      children: query.isFetchingNextPage ? t("common.working") : t("query.loadMore")
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children(flat, {
+      fetchNextPage: () => void query.fetchNextPage(),
+      hasNextPage: !!query.hasNextPage,
+      isFetchingNextPage: query.isFetchingNextPage
+    }),
+    query.isFetchingNextPage && (loadingMore ?? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground pt-2 text-center text-xs", children: t("common.working") })),
+    footer
+  ] });
+}
+function PrefetchLink({
+  queryKey,
+  queryFn,
+  prefetchOn = "both",
+  staleTime = 3e4,
+  onMouseEnter,
+  onFocus,
+  ...linkProps
+}) {
+  const queryClient = useQueryClient();
+  const prefetch = React.useCallback(() => {
+    if (prefetchOn === "none") return;
+    void queryClient.prefetchQuery({ queryKey, queryFn, staleTime });
+  }, [prefetchOn, queryClient, queryFn, queryKey, staleTime]);
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...linkProps,
+      onMouseEnter: (event) => {
+        if (prefetchOn === "hover" || prefetchOn === "both") prefetch();
+        onMouseEnter?.(event);
+      },
+      onFocus: (event) => {
+        if (prefetchOn === "focus" || prefetchOn === "both") prefetch();
+        onFocus?.(event);
+      }
+    }
+  );
+}
+
+export { DataState, InfiniteQueryState, MutationFeedback, PrefetchLink, QueryRefetchButton, flattenItemPages };

package/dist/chunk-M64MVRLS.js

@@ -0,0 +1,92 @@
+import { tableCellPaddingClass, tableRowHeightClass } from './chunk-ICM6XBST.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { toast as toast$1 } from 'sonner';
+
+function SkeletonBlock({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": "true",
+      "aria-live": "polite",
+      className: cn("ui-skeleton-block", className),
+      ...props
+    }
+  );
+}
+function SkeletonRows({ rows = 6, columns = 4, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-rows", className), "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "ui-skeleton-row", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(
+    SkeletonBlock,
+    {
+      className: cn("h-4", j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1")
+    },
+    j
+  )) }, i)) });
+}
+function SkeletonTable({ rows = 8, columns = 5 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-table", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(SkeletonBlock, { className: cn("h-3", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
+    /* @__PURE__ */ jsx("div", { className: "ui-skeleton-table-body", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("ui-skeleton-table-row", tableCellPaddingClass, tableRowHeightClass),
+        children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(SkeletonBlock, { className: cn("h-4", j === 0 ? "w-1/5" : "flex-1") }, j))
+      },
+      i
+    )) })
+  ] });
+}
+function SkeletonDetail() {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail ui-skeleton-detail-stack", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-7 w-1/3" }),
+    /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-4 w-1/2" }),
+    /* @__PURE__ */ jsx("div", { className: "ui-skeleton-detail-box ui-skeleton-detail-stack", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail-stack", children: [
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-3 w-24" }),
+      /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-4 w-full max-w-md" })
+    ] }, i)) })
+  ] });
+}
+function SkeletonCard() {
+  return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-card", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-3 w-24" }),
+    /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-[length:var(--control-height)] w-32" }),
+    /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-3 w-20" })
+  ] });
+}
+function nodeText(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+function legacyToast(options) {
+  const { title, description, variant, ...rest } = options;
+  const titleText = nodeText(title);
+  const descText = nodeText(description);
+  const message = titleText || descText;
+  const desc = titleText && descText ? descText : void 0;
+  const sonnerOptions = { ...rest, description: desc };
+  switch (variant) {
+    case "destructive":
+      return toast$1.error(message, sonnerOptions);
+    case "success":
+      return toast$1.success(message, sonnerOptions);
+    default:
+      return toast$1(message, sonnerOptions);
+  }
+}
+var toast = Object.assign((messageOrOptions) => {
+  if (typeof messageOrOptions === "string") {
+    return toast$1(messageOrOptions);
+  }
+  return legacyToast(messageOrOptions);
+}, toast$1);
+function useToast() {
+  return {
+    toast: (options) => legacyToast(options),
+    dismiss: toast$1.dismiss,
+    toasts: []
+  };
+}
+
+export { SkeletonCard, SkeletonDetail, SkeletonRows, SkeletonTable, toast, useToast };

package/dist/chunk-NGQW3KEM.js

@@ -0,0 +1,402 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-ZS6DTAM2.js';
+import { tableCellPaddingClass, tableRowHeightClass, controlIconSmClass, toneNeutralClass, toneInfoClass, toneDestructiveClass, toneWarningClass, toneSuccessClass } from './chunk-ICM6XBST.js';
+import { Inline, densityClass } from './chunk-S66TJXJU.js';
+import { Button } from './chunk-HJEBRCXL.js';
+import { useTranslation } from './chunk-3F2AKYRD.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Layers, Layers2, ArrowUp, ArrowDown, ChevronsUpDown, MoreHorizontal, XCircle, Pause, CheckCircle2, Circle, Trash2, AlertCircle, Clock, Play } from 'lucide-react';
+import * as React from 'react';
+
+function EmptyState({ icon: Icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn("ui-empty-state", className), children: [
+    Icon && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-6", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "ui-empty-state-title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
+    action && /* @__PURE__ */ jsx("div", { children: action })
+  ] });
+}
+var STATUS_MAP = {
+  active: { tone: "success", icon: CheckCircle2 },
+  completed: { tone: "success", icon: CheckCircle2 },
+  delivered: { tone: "success", icon: CheckCircle2 },
+  done: { tone: "success", icon: CheckCircle2 },
+  permanent: { tone: "success", icon: CheckCircle2 },
+  succeeded: { tone: "success", icon: CheckCircle2 },
+  draft: { tone: "neutral", icon: Circle },
+  pending: { tone: "warning", icon: Clock },
+  scheduled: { tone: "info", icon: Clock },
+  sending: { tone: "info", icon: Play },
+  temporary: { tone: "warning", icon: Clock },
+  bounced: { tone: "destructive", icon: AlertCircle },
+  cancelled: { tone: "neutral", icon: Pause },
+  deleted: { tone: "destructive", icon: Trash2 },
+  failed: { tone: "destructive", icon: XCircle },
+  private: { tone: "neutral", icon: Circle },
+  internal: { tone: "info", icon: Circle },
+  public: { tone: "info", icon: Circle },
+  ASSIGNMENT_STATUS_ACTIVE: { tone: "success", icon: CheckCircle2 },
+  ASSIGNMENT_STATUS_SUSPENDED: { tone: "warning", icon: Pause },
+  ASSIGNMENT_STATUS_TERMINATED: { tone: "destructive", icon: XCircle }
+};
+var TONE_CLASSES = {
+  success: toneSuccessClass,
+  warning: toneWarningClass,
+  destructive: toneDestructiveClass,
+  info: toneInfoClass,
+  neutral: toneNeutralClass
+};
+function StatusBadge({ status, className, label: labelOverride }) {
+  const { t } = useTranslation();
+  const def = STATUS_MAP[status] ?? { tone: "neutral", icon: Circle };
+  const Icon = def.icon;
+  const resolvedLabel = labelOverride ?? (status in STATUS_MAP ? t(`status.${status}`) : status);
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "status-badge", className: cn(TONE_CLASSES[def.tone], className), children: [
+    /* @__PURE__ */ jsx(Icon, { "data-slot": "status-badge-icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: resolvedLabel })
+  ] });
+}
+function KeyValueGrid({ columns = 2, className, children }) {
+  const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-3", colsClass, className), children });
+}
+KeyValueGrid.Item = function KeyValueGridItem({
+  label,
+  mono,
+  span,
+  className,
+  children
+}) {
+  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn(spanClass, className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground text-xs", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
+  ] });
+};
+var DataTableContext = React.createContext(null);
+function useDataTableContext() {
+  const ctx = React.useContext(DataTableContext);
+  if (!ctx) throw new Error("DataTable subcomponents must be used inside <DataTable>");
+  return ctx;
+}
+function useOptionalDataTableContext() {
+  return React.useContext(DataTableContext);
+}
+var noopGetRowId = (row) => {
+  const id = row.id;
+  if (typeof id === "string") return id;
+  if (typeof id === "number") return String(id);
+  return "";
+};
+function DataTable({
+  data,
+  columns,
+  getRowId = noopGetRowId,
+  selectable = false,
+  selected: controlledSelected,
+  onSelectChange,
+  onRowClick,
+  density: controlledDensity,
+  onDensityChange,
+  sort,
+  onSortChange,
+  className,
+  children
+}) {
+  const [internalDensity, setInternalDensity] = React.useState("compact");
+  const density = controlledDensity ?? internalDensity;
+  const setDensity = (d) => {
+    setInternalDensity(d);
+    onDensityChange?.(d);
+  };
+  const [internalSelected, setInternalSelected] = React.useState(/* @__PURE__ */ new Set());
+  const selected = controlledSelected ?? internalSelected;
+  const setSelected = (next) => {
+    setInternalSelected(next);
+    onSelectChange?.(next);
+  };
+  const toggleSelect = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  };
+  const allSelected = data.length > 0 && data.every((r) => selected.has(getRowId(r)));
+  const someSelected = !allSelected && data.some((r) => selected.has(getRowId(r)));
+  const toggleSelectAll = () => {
+    if (allSelected) setSelected(/* @__PURE__ */ new Set());
+    else setSelected(new Set(data.map(getRowId)));
+  };
+  const ctx = {
+    data,
+    columns,
+    density,
+    setDensity,
+    selected,
+    toggleSelect,
+    toggleSelectAll,
+    allSelected,
+    someSelected,
+    selectable,
+    getRowId,
+    onRowClick,
+    sort,
+    onSortChange
+  };
+  const hasContent = React.Children.toArray(children).some(
+    (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
+  );
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ui-data-table-root",
+        densityClass[density === "compact" ? "compact" : "comfortable"],
+        className
+      ),
+      children: [
+        children,
+        !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {})
+      ]
+    }
+  ) });
+}
+DataTable.Toolbar = function DataTableToolbar({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-data-table-toolbar", className), children });
+};
+DataTable.Toolbar.displayName = "DataTable.Toolbar";
+DataTable.SelectAll = function DataTableSelectAll() {
+  const { allSelected, someSelected, toggleSelectAll, selectable } = useDataTableContext();
+  const { t } = useTranslation();
+  if (!selectable) return null;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      checked: allSelected,
+      ref: (el) => {
+        if (el) el.indeterminate = someSelected;
+      },
+      onChange: toggleSelectAll,
+      "aria-label": t("dataTable.selectAll")
+    }
+  );
+};
+DataTable.SelectAll.displayName = "DataTable.SelectAll";
+DataTable.BulkActions = function DataTableBulkActions({
+  count,
+  children,
+  className
+}) {
+  const ctx = useOptionalDataTableContext();
+  const { t } = useTranslation();
+  const c = count ?? ctx?.selected.size ?? 0;
+  if (c === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": t("dataTable.bulkActions"),
+      className: cn("ui-data-table-bulk", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: t("common.selectedCount", { count: c }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "ui-data-table-bulk-actions", children })
+      ]
+    }
+  );
+};
+DataTable.BulkActions.displayName = "DataTable.BulkActions";
+DataTable.DensityToggle = function DataTableDensityToggle() {
+  const { density, setDensity } = useDataTableContext();
+  const { t } = useTranslation();
+  const next = density === "compact" ? "comfortable" : "compact";
+  const Icon = density === "compact" ? Layers : Layers2;
+  const nextLabel = next === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onClick: () => {
+        setDensity(next);
+      },
+      "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
+      children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+        density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
+      ] })
+    }
+  );
+};
+DataTable.DensityToggle.displayName = "DataTable.DensityToggle";
+DataTable.Content = function DataTableContent() {
+  const {
+    data,
+    columns,
+    density: _density,
+    selectable,
+    selected,
+    toggleSelect,
+    getRowId,
+    onRowClick,
+    sort,
+    onSortChange
+  } = useDataTableContext();
+  const { t } = useTranslation();
+  const rowPadding = tableRowHeightClass;
+  const cellPadding = tableCellPaddingClass;
+  const onHeaderClick = (col) => {
+    if (!col.sortable || !onSortChange) return;
+    if (sort?.key !== col.key) {
+      onSortChange({ key: col.key, direction: "asc" });
+    } else if (sort.direction === "asc") {
+      onSortChange({ key: col.key, direction: "desc" });
+    } else {
+      onSortChange(void 0);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
+      columns.map((col) => /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          className: cn(
+            col.width,
+            col.align === "right" && "text-right",
+            col.align === "center" && "text-center",
+            col.sortable && onSortChange && "cursor-pointer select-none"
+          ),
+          onClick: () => {
+            onHeaderClick(col);
+          },
+          children: /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+            col.header,
+            col.sortable && onSortChange && (sort?.key === col.key ? sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+              ChevronsUpDown,
+              {
+                className: "text-muted-foreground size-3",
+                "aria-hidden": "true"
+              }
+            ))
+          ] })
+        },
+        col.key
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.map((row) => {
+      const id = getRowId(row);
+      const isSelected = selected.has(id);
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-state": isSelected ? "selected" : void 0,
+          onClick: (e) => {
+            const target = e.target;
+            if (target.closest("button, a, input, select, textarea, [role=menuitem]"))
+              return;
+            onRowClick?.(row);
+          },
+          className: cn(
+            rowPadding,
+            onRowClick && "hover:bg-muted/50 cursor-pointer",
+            isSelected && "bg-muted/30"
+          ),
+          children: [
+            selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: isSelected,
+                onChange: () => {
+                  toggleSelect(id);
+                },
+                "aria-label": t("dataTable.selectRow", { id }),
+                onClick: (e) => {
+                  e.stopPropagation();
+                }
+              }
+            ) }),
+            columns.map((col) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(
+                  cellPadding,
+                  col.width,
+                  col.align === "right" && "text-right",
+                  col.align === "center" && "text-center"
+                ),
+                children: col.render ? col.render(row) : (() => {
+                  const v = row[col.key];
+                  if (v == null) return "\u2014";
+                  if (typeof v === "string" || typeof v === "number") return String(v);
+                  return "\u2014";
+                })()
+              },
+              col.key
+            ))
+          ]
+        },
+        id
+      );
+    }) })
+  ] }) }) });
+};
+DataTable.Content.displayName = "DataTable.Content";
+DataTable.Pagination = function DataTablePagination({
+  cursor,
+  hasMore,
+  onChange,
+  className
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-data-table-pagination", className), children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: !cursor,
+        onClick: () => {
+          onChange(void 0);
+        },
+        children: t("common.first")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: !hasMore,
+        onClick: () => {
+          onChange(cursor);
+        },
+        children: t("common.next")
+      }
+    )
+  ] });
+};
+DataTable.Pagination.displayName = "DataTable.Pagination";
+DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      "aria-label": ariaLabel ?? t("dataTable.rowActions"),
+      className: controlIconSmClass,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+};
+DataTable.RowActions.displayName = "DataTable.RowActions";
+
+export { DataTable, EmptyState, KeyValueGrid, StatusBadge };