@godxjp/ui 6.0.0 → 6.0.2

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 };