@withwiz/toolkit 0.1.0

package/dist/components/ui/DataTable.js

@@ -0,0 +1,606 @@
+"use client";
+import {
+  LoadingBar
+} from "../../chunk-34WAGUT5.js";
+import {
+  Input
+} from "../../chunk-RJUVBBZG.js";
+import {
+  Label
+} from "../../chunk-IJEZ7G7S.js";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from "../../chunk-YJWLWUFK.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../chunk-WDUFQFDP.js";
+import {
+  Alert,
+  AlertDescription
+} from "../../chunk-F6LCSFSU.js";
+import {
+  Button
+} from "../../chunk-L25BNU3E.js";
+import {
+  cn
+} from "../../chunk-62FLBG6B.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+
+// src/components/ui/DataTable.tsx
+import { useState, useRef, useEffect, isValidElement } from "react";
+import { Filter, CheckSquare, Square, RefreshCw, Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  search: "Search",
+  filter: "Filter",
+  filterActive: "Active",
+  clearFilters: "Clear Filters",
+  selectAll: "Select All",
+  selectAllShort: "All",
+  selected: "{count} / {total} selected",
+  processing: "Processing...",
+  processingItems: "Processing {count} items...",
+  loading: "Loading data...",
+  perPage: "{size} per page",
+  all: "All",
+  min: "Min",
+  max: "Max",
+  previous: "Previous",
+  next: "Next",
+  showing: "Showing {start} to {end} of {total} results"
+};
+function formatLabel(template, values) {
+  return Object.entries(values).reduce(
+    (result, [key, value]) => result.replace(new RegExp(`\\{${key}\\}`, "g"), String(value)),
+    template
+  );
+}
+function DataTable({
+  data,
+  columns,
+  loading = false,
+  error = null,
+  pagination,
+  sort,
+  bulkActions = [],
+  filters = [],
+  filterValues = {},
+  onFilterChange,
+  onClearFilters,
+  selectable = false,
+  onSelectionChange,
+  selectedIds = [],
+  getRowId,
+  className,
+  emptyMessage = "No data",
+  searchPlaceholder = "Search...",
+  onSearch,
+  onSearchValueChange,
+  searchValue = "",
+  showFilters = false,
+  onToggleFilters,
+  createButton,
+  labels: customLabels
+}) {
+  const labels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), customLabels);
+  const [localSelectedIds, setLocalSelectedIds] = useState(selectedIds);
+  const [bulkActionLoading, setBulkActionLoading] = useState(null);
+  const selectAllRef = useRef(null);
+  useEffect(() => {
+    setLocalSelectedIds(selectedIds);
+  }, [selectedIds]);
+  useEffect(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = localSelectedIds.length > 0 && localSelectedIds.length < data.length;
+    }
+  }, [localSelectedIds, data.length]);
+  const hasActiveFilters = (() => {
+    if (searchValue && searchValue.trim()) return true;
+    for (const [key, value] of Object.entries(filterValues)) {
+      if (value === void 0 || value === null || value === "") continue;
+      if (value === "all") continue;
+      if (typeof value === "object" && value !== null) {
+        if (key === "dateRange" && (value.start || value.end)) return true;
+        if (key === "clickRange" && (value.min || value.max)) return true;
+        if (key === "lastClickedRange" && (value.start || value.end)) return true;
+      } else {
+        if (key === "activeFilter" && value !== "all") return true;
+        if (key === "publicFilter" && value !== "all") return true;
+        if (key === "expirationFilter" && value !== "all") return true;
+      }
+    }
+    return false;
+  })();
+  const handleSelectAll = (checked) => {
+    const newSelection = checked ? data.map((item) => getRowId(item)) : [];
+    setLocalSelectedIds(newSelection);
+    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
+  };
+  const handleSelect = (id, checked) => {
+    const newSelection = checked ? [...localSelectedIds, id] : localSelectedIds.filter((item) => item !== id);
+    setLocalSelectedIds(newSelection);
+    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
+  };
+  const handleSort = (columnKey) => {
+    if (!sort) return;
+    if (sort.sort === columnKey) {
+      sort.onSortChange(columnKey, sort.order === "asc" ? "desc" : "asc");
+    } else {
+      sort.onSortChange(columnKey, "asc");
+    }
+  };
+  const handleSearch = (e) => {
+    if (e.key === "Enter" && onSearch) {
+      onSearch(searchValue);
+    }
+  };
+  const handleSearchClick = () => {
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+  const handleSearchInputChange = (value) => {
+    if (onSearchValueChange) {
+      onSearchValueChange(value);
+    }
+  };
+  const handleBulkAction = async (action) => {
+    if (localSelectedIds.length === 0 || bulkActionLoading) return;
+    setBulkActionLoading(action.key);
+    try {
+      await action.onClick(localSelectedIds);
+    } finally {
+      setBulkActionLoading(null);
+    }
+  };
+  const visibleColumns = columns.filter((col) => !col.hidden);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    (onSearch || createButton) && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+      onSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "data-testid": "search-input",
+            placeholder: searchPlaceholder,
+            value: searchValue,
+            onChange: (e) => handleSearchInputChange(e.target.value),
+            onKeyPress: handleSearch,
+            className: "min-w-0 pr-20 h-10"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-testid": "search-btn",
+            size: "sm",
+            onClick: handleSearchClick,
+            className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-8 px-3 text-sm",
+            children: labels.search
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+        filters.length > 0 && onToggleFilters && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": "filter-toggle-btn",
+            variant: "outline",
+            size: "sm",
+            onClick: () => onToggleFilters(!showFilters),
+            className: "flex items-center gap-1 h-10 px-3",
+            children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.filter }),
+              hasActiveFilters && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full", children: labels.filterActive })
+            ]
+          }
+        ),
+        pagination && /* @__PURE__ */ jsx(
+          "select",
+          {
+            "data-testid": "page-size-select",
+            value: pagination.pageSize,
+            onChange: (e) => pagination.onPageSizeChange(Number(e.target.value)),
+            className: "border rounded px-3 py-2 text-sm bg-background h-10 min-w-[100px]",
+            children: (pagination.pageSizeOptions || [10, 20, 50]).map((size) => /* @__PURE__ */ jsx("option", { value: size, children: formatLabel(labels.perPage, { size }) }, size))
+          }
+        ),
+        createButton && (isValidElement(createButton) ? createButton : /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-testid": "create-btn",
+            onClick: createButton.onClick,
+            variant: "default",
+            size: "sm",
+            className: "flex-shrink-0 h-10 px-3",
+            children: createButton.label
+          }
+        ))
+      ] })
+    ] }) }),
+    showFilters && filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-2 bg-muted/50 rounded-lg space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: filters.map((filter) => {
+        var _a, _b, _c, _d, _e;
+        return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", filter.className), children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: filter.label }),
+          filter.type === "text" && /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-testid": `filter-${filter.key}`,
+              type: "text",
+              value: filterValues[filter.key] || "",
+              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+              placeholder: filter.placeholder,
+              className: "text-xs"
+            }
+          ),
+          filter.type === "select" && /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: filterValues[filter.key] || "all",
+              onValueChange: (value) => onFilterChange == null ? void 0 : onFilterChange(filter.key, value),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { "data-testid": `filter-${filter.key}`, className: "text-xs w-full h-9", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder }) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "all", children: labels.all }),
+                  (_a = filter.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
+                ] })
+              ]
+            }
+          ),
+          filter.type === "date" && /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "date",
+              value: filterValues[filter.key] || "",
+              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+              className: "text-xs"
+            }
+          ),
+          filter.type === "number" && /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: filterValues[filter.key] || "",
+              onChange: (e) => onFilterChange == null ? void 0 : onFilterChange(filter.key, e.target.value),
+              placeholder: filter.placeholder,
+              className: "text-xs"
+            }
+          ),
+          filter.type === "range" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: filter.inputType || "text",
+                value: ((_b = filterValues[filter.key]) == null ? void 0 : _b.min) || ((_c = filterValues[filter.key]) == null ? void 0 : _c.start) || "",
+                onChange: (e) => {
+                  const currentValue = filterValues[filter.key] || {};
+                  const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { start: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { min: e.target.value });
+                  onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
+                },
+                className: "text-xs",
+                placeholder: filter.minPlaceholder || labels.min
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: filter.inputType || "text",
+                value: ((_d = filterValues[filter.key]) == null ? void 0 : _d.max) || ((_e = filterValues[filter.key]) == null ? void 0 : _e.end) || "",
+                onChange: (e) => {
+                  const currentValue = filterValues[filter.key] || {};
+                  const newValue = filter.key.includes("date") || filter.key.includes("Date") ? __spreadProps(__spreadValues({}, currentValue), { end: e.target.value }) : __spreadProps(__spreadValues({}, currentValue), { max: e.target.value });
+                  onFilterChange == null ? void 0 : onFilterChange(filter.key, newValue);
+                },
+                className: "text-xs",
+                placeholder: filter.maxPlaceholder || labels.max
+              }
+            )
+          ] })
+        ] }, filter.key);
+      }) }),
+      hasActiveFilters && onClearFilters && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "data-testid": "clear-filters-btn",
+          variant: "outline",
+          size: "sm",
+          onClick: onClearFilters,
+          className: "flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+            labels.clearFilters
+          ]
+        }
+      ) })
+    ] }),
+    selectable && bulkActions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3 bg-muted rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": "select-all-btn",
+            variant: "outline",
+            size: "sm",
+            onClick: () => {
+              const allSelected = localSelectedIds.length === data.length && data.length > 0;
+              handleSelectAll(!allSelected);
+            },
+            className: "flex items-center gap-1 h-9 px-3",
+            children: [
+              localSelectedIds.length === data.length && data.length > 0 ? /* @__PURE__ */ jsx(CheckSquare, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Square, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.selectAll }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: labels.selectAllShort })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.selected, { count: localSelectedIds.length, total: data.length }) })
+      ] }) }),
+      localSelectedIds.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2", children: bulkActions.map((action) => {
+        var _a;
+        const isLoading = bulkActionLoading === action.key;
+        const isDisabled = !!bulkActionLoading || ((_a = action.disabled) == null ? void 0 : _a.call(action, localSelectedIds)) || localSelectedIds.length === 0;
+        return /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": `bulk-action-${action.key}`,
+            variant: action.variant || "outline",
+            size: "sm",
+            onClick: () => handleBulkAction(action),
+            disabled: isDisabled,
+            className: "flex items-center gap-1 h-9 text-xs",
+            children: [
+              isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : action.icon,
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: isLoading ? labels.processing : action.label }),
+              /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: isLoading ? "..." : action.label.split(" ")[0] })
+            ]
+          },
+          action.key
+        );
+      }) })
+    ] }),
+    bulkActionLoading && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatLabel(labels.processingItems, { count: localSelectedIds.length }) })
+      ] }),
+      /* @__PURE__ */ jsx(LoadingBar, { size: "sm", variant: "primary", className: "mt-2" })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto max-w-full", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm min-w-full", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
+        selectable && /* @__PURE__ */ jsx("th", { className: "px-1 py-2 text-left font-medium w-8", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            "data-testid": "select-all-checkbox",
+            type: "checkbox",
+            ref: selectAllRef,
+            checked: data.length > 0 && localSelectedIds.length === data.length,
+            onChange: (e) => handleSelectAll(e.target.checked),
+            className: "h-4 w-4"
+          }
+        ) }),
+        visibleColumns.map((column) => {
+          var _a, _b, _c, _d;
+          const width = column.width === "auto" ? void 0 : column.width;
+          const minWidth = column.minWidth;
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: cn(
+                "px-2 py-2 font-medium",
+                column.sortable && "cursor-pointer",
+                column.className,
+                ((_a = column.responsive) == null ? void 0 : _a.sm) && "hidden sm:table-cell",
+                ((_b = column.responsive) == null ? void 0 : _b.md) && "hidden md:table-cell",
+                ((_c = column.responsive) == null ? void 0 : _c.lg) && "hidden lg:table-cell",
+                ((_d = column.responsive) == null ? void 0 : _d.xl) && "hidden xl:table-cell"
+              ),
+              style: {
+                width,
+                minWidth: minWidth || width || void 0,
+                maxWidth: column.maxWidth || void 0
+              },
+              onClick: column.sortable ? () => handleSort(column.key) : void 0,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                column.header,
+                column.sortable && sort && sort.sort === column.key && /* @__PURE__ */ jsx("span", { children: sort.order === "asc" ? "\u25B2" : "\u25BC" })
+              ] })
+            },
+            column.key
+          );
+        })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: visibleColumns.length + (selectable ? 1 : 0),
+          className: "text-center py-8",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-3", children: [
+            /* @__PURE__ */ jsx(LoadingBar, { size: "md", variant: "primary", className: "w-64" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.loading })
+          ] })
+        }
+      ) }) : error ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: visibleColumns.length + (selectable ? 1 : 0),
+          className: "text-center py-8 text-destructive",
+          children: error
+        }
+      ) }) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: visibleColumns.length + (selectable ? 1 : 0),
+          className: "text-center py-8 text-muted-foreground",
+          children: emptyMessage
+        }
+      ) }) : data.map((item) => {
+        const rowId = getRowId(item);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: cn(
+              "border-b last:border-0 hover:bg-muted/30",
+              localSelectedIds.includes(rowId) && "bg-primary/5"
+            ),
+            children: [
+              selectable && /* @__PURE__ */ jsx("td", { className: "px-1 py-2 w-8", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "data-testid": `row-checkbox-${rowId}`,
+                  type: "checkbox",
+                  checked: localSelectedIds.includes(rowId),
+                  onChange: (e) => handleSelect(rowId, e.target.checked),
+                  className: "h-4 w-4"
+                }
+              ) }),
+              visibleColumns.map((column) => {
+                var _a, _b, _c, _d;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      "px-2 py-3 overflow-hidden",
+                      column.className,
+                      ((_a = column.responsive) == null ? void 0 : _a.sm) && "hidden sm:table-cell",
+                      ((_b = column.responsive) == null ? void 0 : _b.md) && "hidden md:table-cell",
+                      ((_c = column.responsive) == null ? void 0 : _c.lg) && "hidden lg:table-cell",
+                      ((_d = column.responsive) == null ? void 0 : _d.xl) && "hidden xl:table-cell"
+                    ),
+                    style: {
+                      maxWidth: column.maxWidth || column.width || void 0
+                    },
+                    children: column.cell ? column.cell(item) : column.accessorKey ? String(item[column.accessorKey] || "") : ""
+                  },
+                  column.key
+                );
+              })
+            ]
+          },
+          rowId
+        );
+      }) })
+    ] }) }) }),
+    pagination && pagination.total > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 p-3 bg-muted/50 rounded-lg", children: /* @__PURE__ */ jsx(Pagination, { className: "w-full", children: /* @__PURE__ */ jsxs(PaginationContent, { className: "flex-wrap gap-1 justify-between w-full items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground text-center sm:text-left whitespace-nowrap", children: formatLabel(labels.showing, {
+        start: (pagination.page - 1) * pagination.pageSize + 1,
+        end: Math.min(pagination.page * pagination.pageSize, pagination.total),
+        total: pagination.total
+      }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+        PaginationPrevious,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            if (pagination.page > 1) pagination.onPageChange(pagination.page - 1);
+          },
+          className: pagination.page <= 1 ? "pointer-events-none opacity-50" : "",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.previous }),
+            /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\u2190" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:flex", children: (() => {
+        const totalPages = Math.ceil(pagination.total / pagination.pageSize);
+        const pages = [];
+        if (pagination.page > 3) {
+          pages.push(
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                href: "#",
+                onClick: (e) => {
+                  e.preventDefault();
+                  pagination.onPageChange(1);
+                },
+                children: "1"
+              }
+            ) }, 1)
+          );
+          if (pagination.page > 4) {
+            pages.push(
+              /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, "ellipsis1")
+            );
+          }
+        }
+        for (let i = Math.max(1, pagination.page - 2); i <= Math.min(totalPages, pagination.page + 2); i++) {
+          pages.push(
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                href: "#",
+                isActive: i === pagination.page,
+                onClick: (e) => {
+                  e.preventDefault();
+                  pagination.onPageChange(i);
+                },
+                children: i
+              }
+            ) }, i)
+          );
+        }
+        if (pagination.page < totalPages - 2) {
+          if (pagination.page < totalPages - 3) {
+            pages.push(
+              /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, "ellipsis2")
+            );
+          }
+          pages.push(
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                href: "#",
+                onClick: (e) => {
+                  e.preventDefault();
+                  pagination.onPageChange(totalPages);
+                },
+                children: totalPages
+              }
+            ) }, totalPages)
+          );
+        }
+        return pages;
+      })() }),
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxs("span", { className: "px-3 py-2 text-sm font-medium", children: [
+        pagination.page,
+        " / ",
+        Math.ceil(pagination.total / pagination.pageSize)
+      ] }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+        PaginationNext,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            const totalPages = Math.ceil(pagination.total / pagination.pageSize);
+            if (pagination.page < totalPages) pagination.onPageChange(pagination.page + 1);
+          },
+          className: pagination.page >= Math.ceil(pagination.total / pagination.pageSize) ? "pointer-events-none opacity-50" : "",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.next }),
+            /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "\u2192" })
+          ]
+        }
+      ) })
+    ] }) }) })
+  ] });
+}
+export {
+  DataTable
+};

package/dist/components/ui/DomainDisplay.d.ts

@@ -0,0 +1,12 @@
+interface IDomainDisplayProps {
+    className?: string;
+    showProtocol?: boolean;
+    baseUrl?: string;
+    appendTrailingSlash?: boolean;
+}
+/**
+ * 도메인을 표시하는 컴포넌트
+ * baseUrl prop이 없으면 현재 브라우저 도메인을 기준으로 표시합니다.
+ */
+export declare function DomainDisplay({ className, showProtocol, baseUrl, appendTrailingSlash }: IDomainDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/DomainDisplay.js

@@ -0,0 +1,31 @@
+"use client";
+import "../../chunk-ORMEWXMH.js";
+
+// src/components/ui/DomainDisplay.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var FALLBACK_BASE_URL = "https://example.com";
+function DomainDisplay({
+  className = "",
+  showProtocol = true,
+  baseUrl,
+  appendTrailingSlash = true
+}) {
+  const initialBaseUrl = useMemo(() => {
+    if (baseUrl) return baseUrl;
+    if (typeof window !== "undefined") return window.location.origin;
+    return FALLBACK_BASE_URL;
+  }, [baseUrl]);
+  const [resolvedBaseUrl, setResolvedBaseUrl] = useState(initialBaseUrl);
+  useEffect(() => {
+    if (!baseUrl && typeof window !== "undefined") {
+      setResolvedBaseUrl(window.location.origin);
+    }
+  }, [baseUrl]);
+  const normalizedBase = showProtocol ? resolvedBaseUrl : resolvedBaseUrl.replace(/^https?:\/\//, "");
+  const displayDomain = appendTrailingSlash ? normalizedBase.endsWith("/") ? normalizedBase : `${normalizedBase}/` : normalizedBase.replace(/\/$/, "");
+  return /* @__PURE__ */ jsx("span", { className: `font-mono text-sm text-muted-foreground ${className}`, children: displayDomain });
+}
+export {
+  DomainDisplay
+};

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+}
+export declare function Input({ className, type, ...props }: IInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Input.js

@@ -0,0 +1,8 @@
+import {
+  Input
+} from "../../chunk-RJUVBBZG.js";
+import "../../chunk-62FLBG6B.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  Input
+};

package/dist/components/ui/Label.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface ILabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    className?: string;
+}
+export declare function Label({ className, ...props }: ILabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Label.js

@@ -0,0 +1,8 @@
+import {
+  Label
+} from "../../chunk-IJEZ7G7S.js";
+import "../../chunk-62FLBG6B.js";
+import "../../chunk-ORMEWXMH.js";
+export {
+  Label
+};