@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Table/TableFilter/data-table-date-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-date-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-date-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport { formatDate } from \"@/utils/datetime\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { CalendarIcon, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport Separator from \"../../Separator\";\nimport { Popover } from \"../../Popover\";\nimport Button from \"../../Button\";\nimport { Calendar } from \"../../Calendar\";\n\ntype DateSelection = Date[] | DateRange;\n\nfunction getIsDateRange(value: DateSelection): value is DateRange {\n  return value && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction parseAsDate(timestamp: number | string | undefined): Date | undefined {\n  if (!timestamp) return undefined;\n  const numericTimestamp =\n    typeof timestamp === \"string\" ? Number(timestamp) : timestamp;\n  const date = new Date(numericTimestamp);\n  return !Number.isNaN(date.getTime()) ? date : undefined;\n}\n\nfunction parseColumnFilterValue(value: unknown) {\n  if (value === null || value === undefined) {\n    return [];\n  }\n\n  if (Array.isArray(value)) {\n    return value.map((item) => {\n      if (typeof item === \"number\" || typeof item === \"string\") {\n        return item;\n      }\n      return undefined;\n    });\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return [value];\n  }\n\n  return [];\n}\n\ninterface DataTableDateFilterProps<TData> {\n  column: Column<TData, unknown>;\n  title?: string;\n  multiple?: boolean;\n}\n\nexport function DataTableDateFilter<TData>({\n  column,\n  title,\n  multiple,\n}: DataTableDateFilterProps<TData>) {\n  const columnFilterValue = column.getFilterValue();\n\n  const selectedDates = React.useMemo<DateSelection>(() => {\n    if (!columnFilterValue) {\n      return multiple ? { from: undefined, to: undefined } : [];\n    }\n\n    if (multiple) {\n      const timestamps = parseColumnFilterValue(columnFilterValue);\n      return {\n        from: parseAsDate(timestamps[0]),\n        to: parseAsDate(timestamps[1]),\n      };\n    }\n\n    const timestamps = parseColumnFilterValue(columnFilterValue);\n    const date = parseAsDate(timestamps[0]);\n    return date ? [date] : [];\n  }, [columnFilterValue, multiple]);\n\n  const onSelect = React.useCallback(\n    (date: Date | DateRange | undefined) => {\n      if (!date) {\n        column.setFilterValue(undefined);\n        return;\n      }\n\n      if (multiple && !(\"getTime\" in date)) {\n        const from = date.from?.getTime();\n        const to = date.to?.getTime();\n        column.setFilterValue(from || to ? [from, to] : undefined);\n      } else if (!multiple && \"getTime\" in date) {\n        column.setFilterValue(date.getTime());\n      }\n    },\n    [column, multiple],\n  );\n\n  const onReset = React.useCallback(\n    (event: React.MouseEvent) => {\n      event.stopPropagation();\n      column.setFilterValue(undefined);\n    },\n    [column],\n  );\n\n  const hasValue = React.useMemo(() => {\n    if (multiple) {\n      if (!getIsDateRange(selectedDates)) return false;\n      return selectedDates.from || selectedDates.to;\n    }\n    if (!Array.isArray(selectedDates)) return false;\n    return selectedDates.length > 0;\n  }, [multiple, selectedDates]);\n\n  const formatDateRange = React.useCallback((range: DateRange) => {\n    if (!range.from && !range.to) return \"\";\n    if (range.from && range.to) {\n      return `${formatDate(range.from)} - ${formatDate(range.to)}`;\n    }\n    return formatDate(range.from ?? range.to);\n  }, []);\n\n  const label = React.useMemo(() => {\n    if (multiple) {\n      if (!getIsDateRange(selectedDates)) return null;\n\n      const hasSelectedDates = selectedDates.from || selectedDates.to;\n      const dateText = hasSelectedDates\n        ? formatDateRange(selectedDates)\n        : \"Select date range\";\n\n      return (\n        <span className=\"flex items-center gap-2\">\n          <span>{title}</span>\n          {hasSelectedDates && (\n            <>\n              <Separator\n                orientation=\"vertical\"\n                className=\"mx-0.5 data-[orientation=vertical]:h-4\"\n              />\n              <span>{dateText}</span>\n            </>\n          )}\n        </span>\n      );\n    }\n\n    if (getIsDateRange(selectedDates)) return null;\n\n    const hasSelectedDate = selectedDates.length > 0;\n    const dateText = hasSelectedDate\n      ? formatDate(selectedDates[0])\n      : \"Select date\";\n\n    return (\n      <span className=\"flex items-center gap-2\">\n        <span>{title}</span>\n        {hasSelectedDate && (\n          <>\n            <Separator\n              orientation=\"vertical\"\n              className=\"mx-0.5 data-[orientation=vertical]:h-4\"\n            />\n            <span>{dateText}</span>\n          </>\n        )}\n      </span>\n    );\n  }, [selectedDates, multiple, formatDateRange, title]);\n\n  const PopContent = (\n    <div className=\"w-auto p-0\">\n      {multiple ? (\n        <Calendar\n          autoFocus\n          captionLayout=\"dropdown\"\n          mode=\"range\"\n          selected={\n            getIsDateRange(selectedDates)\n              ? selectedDates\n              : { from: undefined, to: undefined }\n          }\n          onSelect={onSelect}\n        />\n      ) : (\n        <Calendar\n          captionLayout=\"dropdown\"\n          mode=\"single\"\n          selected={\n            !getIsDateRange(selectedDates) ? selectedDates[0] : undefined\n          }\n          onSelect={onSelect}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <Popover content={PopContent}>\n      <Button variant=\"outline\" size=\"sm\" className=\"border-dashed font-normal\">\n        {hasValue ? (\n          <div\n            role=\"button\"\n            aria-label={`Clear ${title} filter`}\n            tabIndex={0}\n            onClick={onReset}\n            className=\"rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          >\n            <XCircle />\n          </div>\n        ) : (\n          <CalendarIcon />\n        )}\n        {label}\n      </Button>\n    </Popover>\n  );\n}\n"],"names":["getIsDateRange","value","parseAsDate","timestamp","numericTimestamp","date","parseColumnFilterValue","item","DataTableDateFilter","column","title","multiple","columnFilterValue","selectedDates","React","timestamps","onSelect","from","to","onReset","event","hasValue","formatDateRange","range","formatDate","label","hasSelectedDates","dateText","jsxs","jsx","Fragment","Separator","hasSelectedDate","PopContent","Calendar","Popover","Button","XCircle","CalendarIcon"],"mappings":"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"}

package/dist/esm/components/Table/TableFilter/data-table-filter-popover.js

@@ -0,0 +1,138 @@
+import { jsx as a, jsxs as s, Fragment as o } from "react/jsx-runtime";
+import { X as V } from "lucide-react";
+import * as C from "react";
+import { Popover as N } from "../../Popover/index.js";
+import { DataTableSliderFilter as x } from "./data-table-slider-filter.js";
+import { DataTableDateFilter as w } from "./data-table-date-filter.js";
+import D from "../../Separator/Separator.js";
+import O from "../../Button/Button.js";
+import S from "../../Checkbox/Checkbox.js";
+import k from "../../Radio/Radio.js";
+import c from "../../Input/Input.js";
+function A({
+  column: e,
+  trigger: u,
+  open: n,
+  onOpenChange: m
+}) {
+  const [p, d] = C.useState(!1), v = n !== void 0 ? n : p, h = m || d, t = e.columnDef.meta, f = () => {
+    if (!t?.variant) return /* @__PURE__ */ a("div", { children: "No filter available" });
+    switch (t.variant) {
+      case "text":
+        return /* @__PURE__ */ a(
+          c,
+          {
+            placeholder: t.placeholder ?? t.label,
+            value: e.getFilterValue() ?? "",
+            onChange: (r) => e.setFilterValue(r.target.value),
+            className: "h-8 w-full"
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ a(
+          c,
+          {
+            type: "number",
+            placeholder: t.placeholder ?? t.label,
+            value: e.getFilterValue() ?? "",
+            onChange: (r) => e.setFilterValue(r.target.value),
+            className: "h-8 w-full"
+          }
+        );
+      case "date":
+      case "dateRange":
+        return /* @__PURE__ */ a(
+          w,
+          {
+            column: e,
+            title: t.label ?? e.id,
+            multiple: t.variant === "dateRange"
+          }
+        );
+      case "range":
+        return /* @__PURE__ */ a(
+          x,
+          {
+            column: e,
+            title: t.label ?? e.id
+          }
+        );
+      case "select":
+      case "multiSelect": {
+        const r = t.options || [];
+        if (t.variant === "multiSelect") {
+          const i = e.getFilterValue() || [];
+          return /* @__PURE__ */ a(o, { children: /* @__PURE__ */ a("div", { className: "space-y-2 max-h-48 overflow-y-auto text-sm", children: r.map((l) => /* @__PURE__ */ a(
+            "div",
+            {
+              className: "flex items-center space-x-2",
+              children: /* @__PURE__ */ a(
+                S,
+                {
+                  checked: i.includes(l.value),
+                  onCheckedChange: (b) => {
+                    b ? e.setFilterValue([
+                      ...i,
+                      l.value
+                    ]) : e.setFilterValue(
+                      i.filter((g) => g !== l.value)
+                    );
+                  },
+                  label: l.label
+                }
+              )
+            },
+            l.value
+          )) }) });
+        } else {
+          const i = e.getFilterValue();
+          return /* @__PURE__ */ a(
+            k,
+            {
+              value: i,
+              onValueChange: (l) => e.setFilterValue(l),
+              options: r.map((l) => ({
+                label: l.label,
+                value: l.value
+              })),
+              className: "p-1"
+            }
+          );
+        }
+      }
+      default:
+        return /* @__PURE__ */ a("div", { children: "No filter available" });
+    }
+  }, F = e.getFilterValue() != null;
+  return /* @__PURE__ */ a(
+    N,
+    {
+      open: v,
+      onOpenChange: h,
+      trigger: u,
+      content: /* @__PURE__ */ s("div", { className: "p-2 min-w-32", children: [
+        f(),
+        F && /* @__PURE__ */ s(o, { children: [
+          /* @__PURE__ */ a(D, { className: "mt-3 mb-1" }),
+          /* @__PURE__ */ s(
+            O,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => e.setFilterValue(void 0),
+              children: [
+                /* @__PURE__ */ a(V, { className: "size-3" }),
+                "Clear Filter"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      contentClassName: "p-0"
+    }
+  );
+}
+export {
+  A as DataTableFilterPopover
+};
+//# sourceMappingURL=data-table-filter-popover.js.map

package/dist/esm/components/Table/TableFilter/data-table-filter-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-popover.js","sources":["../../../../../src/components/Table/TableFilter/data-table-filter-popover.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Popover } from \"../../Popover\";\nimport { Input } from \"../../Input\";\nimport { Checkbox } from \"../../Checkbox\";\nimport Radio from \"../../Radio\";\nimport { DataTableSliderFilter } from \"./data-table-slider-filter\";\nimport { DataTableDateFilter } from \"./data-table-date-filter\";\nimport Separator from \"@/components/Separator\";\nimport Button from \"@/components/Button\";\n\ninterface DataTableFilterPopoverProps<TData> {\n  column: Column<TData>;\n  trigger: React.ReactNode;\n  open?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function DataTableFilterPopover<TData>({\n  column,\n  trigger,\n  open,\n  onOpenChange,\n}: DataTableFilterPopoverProps<TData>) {\n  const [internalOpen, setInternalOpen] = React.useState(false);\n\n  const isOpen = open !== undefined ? open : internalOpen;\n  const setIsOpen = onOpenChange || setInternalOpen;\n\n  const columnMeta = column.columnDef.meta;\n\n  const renderFilterContent = () => {\n    if (!columnMeta?.variant) return <div>No filter available</div>;\n\n    switch (columnMeta.variant) {\n      case \"text\":\n        return (\n          <Input\n            placeholder={columnMeta.placeholder ?? columnMeta.label}\n            value={(column.getFilterValue() as string) ?? \"\"}\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n              column.setFilterValue(event.target.value)\n            }\n            className=\"h-8 w-full\"\n          />\n        );\n\n      case \"number\":\n        return (\n          <Input\n            type=\"number\"\n            placeholder={columnMeta.placeholder ?? columnMeta.label}\n            value={(column.getFilterValue() as string) ?? \"\"}\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>\n              column.setFilterValue(event.target.value)\n            }\n            className=\"h-8 w-full\"\n          />\n        );\n\n      case \"date\":\n      case \"dateRange\":\n        return (\n          <DataTableDateFilter\n            column={column}\n            title={columnMeta.label ?? column.id}\n            multiple={columnMeta.variant === \"dateRange\"}\n          />\n        );\n\n      case \"range\":\n        return (\n          <DataTableSliderFilter\n            column={column}\n            title={columnMeta.label ?? column.id}\n          />\n        );\n\n      case \"select\":\n      case \"multiSelect\": {\n        const options = columnMeta.options || [];\n        const multiple = columnMeta.variant === \"multiSelect\";\n\n        if (multiple) {\n          const currentValues = (column.getFilterValue() as string[]) || [];\n          return (\n            <>\n              <div className=\"space-y-2 max-h-48 overflow-y-auto text-sm\">\n                {options.map((option) => (\n                  <div\n                    key={option.value}\n                    className=\"flex items-center space-x-2\"\n                  >\n                    <Checkbox\n                      checked={currentValues.includes(option.value)}\n                      onCheckedChange={(checked) => {\n                        if (checked) {\n                          column.setFilterValue([\n                            ...currentValues,\n                            option.value,\n                          ]);\n                        } else {\n                          column.setFilterValue(\n                            currentValues.filter((v) => v !== option.value),\n                          );\n                        }\n                      }}\n                      label={option.label}\n                    />\n                  </div>\n                ))}\n              </div>\n              {/* <Separator className=\"my-2\" /> */}\n              {/* <div className=\"flex justify-center gap-0 mt-2\">\n                <Button\n                  variant=\"ghost\"\n                  onClick={() =>\n                    column.setFilterValue(options.map((o) => o.value))\n                  }\n                >\n                  Check All\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  onClick={() => column.setFilterValue(undefined)}\n                >\n                  <X className=\"size-3\" />\n                  Clear Filter\n                </Button>\n              </div> */}\n            </>\n          );\n        } else {\n          const currentValue = column.getFilterValue() as string;\n          return (\n            <Radio\n              value={currentValue}\n              onValueChange={(value) => column.setFilterValue(value)}\n              options={options.map((option) => ({\n                label: option.label,\n                value: option.value,\n              }))}\n              className=\"p-1\"\n            />\n          );\n        }\n      }\n\n      default:\n        return <div>No filter available</div>;\n    }\n  };\n\n  const hasFilterValue = column.getFilterValue() != null;\n\n  return (\n    <Popover\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      trigger={trigger}\n      content={\n        <div className=\"p-2 min-w-32\">\n          {renderFilterContent()}\n          {hasFilterValue && (\n            <>\n              <Separator className=\"mt-3 mb-1\" />\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => column.setFilterValue(undefined)}\n              >\n                <X className=\"size-3\" />\n                Clear Filter\n              </Button>\n            </>\n          )}\n        </div>\n      }\n      contentClassName=\"p-0\"\n    />\n  );\n}\n"],"names":["DataTableFilterPopover","column","trigger","open","onOpenChange","internalOpen","setInternalOpen","React","isOpen","setIsOpen","columnMeta","renderFilterContent","jsx","Input","event","DataTableDateFilter","DataTableSliderFilter","options","currentValues","Fragment","option","Checkbox","checked","v","currentValue","Radio","value","hasFilterValue","Popover","jsxs","Separator","Button","X"],"mappings":"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"}

package/dist/esm/components/Table/TableFilter/data-table-slider-filter.js

@@ -0,0 +1,164 @@
+import { jsxs as m, jsx as t, Fragment as k } from "react/jsx-runtime";
+import { XCircle as I, PlusCircle as D } from "lucide-react";
+import * as c from "react";
+import { Popover as w } from "../../Popover/index.js";
+import { cn as y } from "@dsui/ui/index";
+import v from "../../Input/Input.js";
+import P from "../../Slider/Slider.js";
+import C from "../../Button/Button.js";
+import R from "../../Separator/Separator.js";
+function z(e) {
+  return Array.isArray(e) && e.length === 2 && typeof e[0] == "number" && typeof e[1] == "number";
+}
+function T(e) {
+  if (Array.isArray(e) && e.length === 2 && e.every(
+    (l) => (typeof l == "string" || typeof l == "number") && !Number.isNaN(l)
+  ))
+    return [Number(e[0]), Number(e[1])];
+}
+function J({
+  column: e,
+  title: l
+}) {
+  const u = c.useId(), d = T(e.getFilterValue()), p = e.columnDef.meta?.range, s = e.columnDef.meta?.unit, { min: n, max: i, step: V } = c.useMemo(() => {
+    let r = 0, a = 100;
+    if (p && z(p))
+      [r, a] = p;
+    else {
+      const g = e.getFacetedMinMaxValues();
+      if (g && Array.isArray(g) && g.length === 2) {
+        const [N, x] = g;
+        typeof N == "number" && typeof x == "number" && (r = N, a = x);
+      }
+    }
+    const f = a - r, $ = f <= 20 ? 1 : f <= 100 ? Math.ceil(f / 20) : Math.ceil(f / 50);
+    return { min: r, max: a, step: $ };
+  }, [e, p]), o = c.useMemo(() => d ?? [n, i], [d, n, i]), h = c.useCallback((r) => r.toLocaleString(void 0, { maximumFractionDigits: 0 }), []), F = c.useCallback(
+    (r) => {
+      const a = Number(r.target.value);
+      !Number.isNaN(a) && a >= n && a <= o[1] && e.setFilterValue([a, o[1]]);
+    },
+    [e, n, o]
+  ), M = c.useCallback(
+    (r) => {
+      const a = Number(r.target.value);
+      !Number.isNaN(a) && a <= i && a >= o[0] && e.setFilterValue([o[0], a]);
+    },
+    [e, i, o]
+  ), S = c.useCallback(
+    (r) => {
+      Array.isArray(r) && r.length === 2 && e.setFilterValue(r);
+    },
+    [e]
+  ), b = c.useCallback(
+    (r) => {
+      r.target instanceof HTMLDivElement && r.stopPropagation(), e.setFilterValue(void 0);
+    },
+    [e]
+  ), A = /* @__PURE__ */ m("div", { className: "flex w-auto flex-col gap-4", children: [
+    /* @__PURE__ */ m("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ t("p", { className: "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: l }),
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ t("label", { htmlFor: `${u}-from`, className: "sr-only", children: "From" }),
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              id: `${u}-from`,
+              type: "number",
+              "aria-valuemin": n,
+              "aria-valuemax": i,
+              inputMode: "numeric",
+              pattern: "[0-9]*",
+              placeholder: n.toString(),
+              min: n,
+              max: i,
+              value: o[0]?.toString(),
+              onChange: F,
+              className: y("h-8 w-24", s && "pr-8")
+            }
+          ),
+          s && /* @__PURE__ */ t("span", { className: "absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm", children: s })
+        ] }),
+        /* @__PURE__ */ t("label", { htmlFor: `${u}-to`, className: "sr-only", children: "to" }),
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              id: `${u}-to`,
+              type: "number",
+              "aria-valuemin": n,
+              "aria-valuemax": i,
+              inputMode: "numeric",
+              pattern: "[0-9]*",
+              placeholder: i.toString(),
+              min: n,
+              max: i,
+              value: o[1]?.toString(),
+              onChange: M,
+              className: y("h-8 w-24", s && "pr-8")
+            }
+          ),
+          s && /* @__PURE__ */ t("span", { className: "absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm", children: s })
+        ] })
+      ] }),
+      /* @__PURE__ */ m("label", { htmlFor: `${u}-slider`, className: "sr-only", children: [
+        l,
+        " slider"
+      ] }),
+      /* @__PURE__ */ t(
+        P,
+        {
+          id: `${u}-slider`,
+          min: n,
+          max: i,
+          step: V,
+          value: o,
+          onValueChange: S
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      C,
+      {
+        "aria-label": `Clear ${l} filter`,
+        variant: "outline",
+        size: "sm",
+        onClick: b,
+        children: "Clear"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ t(w, { content: A, children: /* @__PURE__ */ m(C, { variant: "outline", size: "sm", className: "border-dashed font-normal", children: [
+    d ? /* @__PURE__ */ t(
+      "div",
+      {
+        role: "button",
+        "aria-label": `Clear ${l} filter`,
+        tabIndex: 0,
+        className: "rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        onClick: b,
+        children: /* @__PURE__ */ t(I, {})
+      }
+    ) : /* @__PURE__ */ t(D, {}),
+    /* @__PURE__ */ t("span", { children: l }),
+    d ? /* @__PURE__ */ m(k, { children: [
+      /* @__PURE__ */ t(
+        R,
+        {
+          orientation: "vertical",
+          className: "mx-0.5 data-[orientation=vertical]:h-4"
+        }
+      ),
+      h(d[0]),
+      " -",
+      " ",
+      h(d[1]),
+      s ? ` ${s}` : ""
+    ] }) : null
+  ] }) });
+}
+export {
+  J as DataTableSliderFilter
+};
+//# sourceMappingURL=data-table-slider-filter.js.map

package/dist/esm/components/Table/TableFilter/data-table-slider-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-slider-filter.js","sources":["../../../../../src/components/Table/TableFilter/data-table-slider-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { PlusCircle, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../../Button\";\nimport { Input } from \"../../Input\";\nimport { Popover } from \"../../Popover\";\nimport { Separator } from \"../../Separator\";\nimport { Slider } from \"../../Slider\";\nimport { cn } from \"@dsui/ui/index\";\n\ninterface Range {\n  min: number;\n  max: number;\n}\n\ntype RangeValue = [number, number];\n\nfunction getIsValidRange(value: unknown): value is RangeValue {\n  return (\n    Array.isArray(value) &&\n    value.length === 2 &&\n    typeof value[0] === \"number\" &&\n    typeof value[1] === \"number\"\n  );\n}\n\nfunction parseValuesAsNumbers(value: unknown): RangeValue | undefined {\n  if (\n    Array.isArray(value) &&\n    value.length === 2 &&\n    value.every(\n      (v) =>\n        (typeof v === \"string\" || typeof v === \"number\") && !Number.isNaN(v),\n    )\n  ) {\n    return [Number(value[0]), Number(value[1])];\n  }\n\n  return undefined;\n}\n\ninterface DataTableSliderFilterProps<TData> {\n  column: Column<TData, unknown>;\n  title?: string;\n}\n\nexport function DataTableSliderFilter<TData>({\n  column,\n  title,\n}: DataTableSliderFilterProps<TData>) {\n  const id = React.useId();\n\n  const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());\n\n  const defaultRange = column.columnDef.meta?.range;\n  const unit = column.columnDef.meta?.unit;\n\n  const { min, max, step } = React.useMemo<Range & { step: number }>(() => {\n    let minValue = 0;\n    let maxValue = 100;\n\n    if (defaultRange && getIsValidRange(defaultRange)) {\n      [minValue, maxValue] = defaultRange;\n    } else {\n      const values = column.getFacetedMinMaxValues();\n      if (values && Array.isArray(values) && values.length === 2) {\n        const [facetMinValue, facetMaxValue] = values;\n        if (\n          typeof facetMinValue === \"number\" &&\n          typeof facetMaxValue === \"number\"\n        ) {\n          minValue = facetMinValue;\n          maxValue = facetMaxValue;\n        }\n      }\n    }\n\n    const rangeSize = maxValue - minValue;\n    const step =\n      rangeSize <= 20\n        ? 1\n        : rangeSize <= 100\n          ? Math.ceil(rangeSize / 20)\n          : Math.ceil(rangeSize / 50);\n\n    return { min: minValue, max: maxValue, step };\n  }, [column, defaultRange]);\n\n  const range = React.useMemo((): RangeValue => {\n    return columnFilterValue ?? [min, max];\n  }, [columnFilterValue, min, max]);\n\n  const formatValue = React.useCallback((value: number) => {\n    return value.toLocaleString(undefined, { maximumFractionDigits: 0 });\n  }, []);\n\n  const onFromInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const numValue = Number(event.target.value);\n      if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {\n        column.setFilterValue([numValue, range[1]]);\n      }\n    },\n    [column, min, range],\n  );\n\n  const onToInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const numValue = Number(event.target.value);\n      if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {\n        column.setFilterValue([range[0], numValue]);\n      }\n    },\n    [column, max, range],\n  );\n\n  const onSliderValueChange = React.useCallback(\n    (value: RangeValue) => {\n      if (Array.isArray(value) && value.length === 2) {\n        column.setFilterValue(value);\n      }\n    },\n    [column],\n  );\n\n  const onReset = React.useCallback(\n    (event: React.MouseEvent) => {\n      if (event.target instanceof HTMLDivElement) {\n        event.stopPropagation();\n      }\n      column.setFilterValue(undefined);\n    },\n    [column],\n  );\n\n  const PopContent = (\n    <div className=\"flex w-auto flex-col gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <p className=\"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n          {title}\n        </p>\n        <div className=\"flex items-center gap-4\">\n          <label htmlFor={`${id}-from`} className=\"sr-only\">\n            From\n          </label>\n          <div className=\"relative\">\n            <Input\n              id={`${id}-from`}\n              type=\"number\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              placeholder={min.toString()}\n              min={min}\n              max={max}\n              value={range[0]?.toString()}\n              onChange={onFromInputChange}\n              className={cn(\"h-8 w-24\", unit && \"pr-8\")}\n            />\n            {unit && (\n              <span className=\"absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm\">\n                {unit}\n              </span>\n            )}\n          </div>\n          <label htmlFor={`${id}-to`} className=\"sr-only\">\n            to\n          </label>\n          <div className=\"relative\">\n            <Input\n              id={`${id}-to`}\n              type=\"number\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              placeholder={max.toString()}\n              min={min}\n              max={max}\n              value={range[1]?.toString()}\n              onChange={onToInputChange}\n              className={cn(\"h-8 w-24\", unit && \"pr-8\")}\n            />\n            {unit && (\n              <span className=\"absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm\">\n                {unit}\n              </span>\n            )}\n          </div>\n        </div>\n        <label htmlFor={`${id}-slider`} className=\"sr-only\">\n          {title} slider\n        </label>\n        <Slider\n          id={`${id}-slider`}\n          min={min}\n          max={max}\n          step={step}\n          value={range}\n          onValueChange={onSliderValueChange}\n        />\n      </div>\n      <Button\n        aria-label={`Clear ${title} filter`}\n        variant=\"outline\"\n        size=\"sm\"\n        onClick={onReset}\n      >\n        Clear\n      </Button>\n    </div>\n  );\n\n  return (\n    <Popover content={PopContent}>\n      <Button variant=\"outline\" size=\"sm\" className=\"border-dashed font-normal\">\n        {columnFilterValue ? (\n          <div\n            role=\"button\"\n            aria-label={`Clear ${title} filter`}\n            tabIndex={0}\n            className=\"rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            onClick={onReset}\n          >\n            <XCircle />\n          </div>\n        ) : (\n          <PlusCircle />\n        )}\n        <span>{title}</span>\n        {columnFilterValue ? (\n          <>\n            <Separator\n              orientation=\"vertical\"\n              className=\"mx-0.5 data-[orientation=vertical]:h-4\"\n            />\n            {formatValue(columnFilterValue[0])} -{\" \"}\n            {formatValue(columnFilterValue[1])}\n            {unit ? ` ${unit}` : \"\"}\n          </>\n        ) : null}\n      </Button>\n    </Popover>\n  );\n}\n"],"names":["getIsValidRange","value","parseValuesAsNumbers","v","DataTableSliderFilter","column","title","id","React","columnFilterValue","defaultRange","unit","min","max","step","minValue","maxValue","values","facetMinValue","facetMaxValue","rangeSize","range","formatValue","onFromInputChange","event","numValue","onToInputChange","onSliderValueChange","onReset","PopContent","jsxs","jsx","Input","cn","Slider","Button","Popover","XCircle","PlusCircle","Fragment","Separator"],"mappings":"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"}

package/dist/esm/components/Table/data-table-column-header.js

@@ -0,0 +1,82 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { ChevronDown as n, ChevronUp as g, ChevronsUpDown as p, Filter as f, X as h, EyeOff as v } from "lucide-react";
+import { cn as s } from "@dsui/ui";
+import m from "../DropdownMenu/DropdownMenu.js";
+import { DataTableFilterPopover as u } from "./TableFilter/data-table-filter-popover.js";
+import b from "../Button/Button.js";
+function _({
+  column: e,
+  label: l,
+  className: i
+}) {
+  const a = l || (typeof e.columnDef.header == "string" ? e.columnDef.header : null);
+  if (!(e.getCanSort() || e.getCanHide() || e.getCanFilter()))
+    return /* @__PURE__ */ t("div", { className: s(i), children: a });
+  const c = /* @__PURE__ */ o("button", { className: "-ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-accent focus:outline-none focus:ring-1 focus:ring-ring data-[state=open]:bg-accent [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground", children: [
+    a,
+    e.getCanSort() && (e.getIsSorted() === "desc" ? /* @__PURE__ */ t(n, {}) : e.getIsSorted() === "asc" ? /* @__PURE__ */ t(g, {}) : /* @__PURE__ */ t(p, {}))
+  ] }), d = e.getCanFilter() && e.columnDef.meta?.variant ? /* @__PURE__ */ t(
+    u,
+    {
+      column: e,
+      trigger: /* @__PURE__ */ t(
+        b,
+        {
+          variant: "ghost",
+          className: s(
+            "hover:bg-accent rounded p-1",
+            e.getFilterValue() ? "text-primary" : ""
+          ),
+          children: /* @__PURE__ */ t(f, { className: "size-4" })
+        }
+      )
+    }
+  ) : null, r = [];
+  return e.getCanSort() && (r.push({
+    key: "asc",
+    type: "checkbox",
+    label: "Asc",
+    icon: /* @__PURE__ */ t(g, {}),
+    checked: e.getIsSorted() === "asc",
+    onClick: () => e.toggleSorting(!1),
+    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
+  }), r.push({
+    key: "desc",
+    type: "checkbox",
+    label: "Desc",
+    icon: /* @__PURE__ */ t(n, {}),
+    checked: e.getIsSorted() === "desc",
+    onClick: () => e.toggleSorting(!0),
+    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
+  }), e.getIsSorted() && r.push({
+    key: "reset",
+    type: "item",
+    label: "Reset",
+    icon: /* @__PURE__ */ t(h, {}),
+    onClick: () => e.clearSorting(),
+    className: "pl-2 [&_svg]:text-muted-foreground"
+  })), e.getCanHide() && r.push({
+    key: "hide",
+    type: "checkbox",
+    label: "Hide",
+    icon: /* @__PURE__ */ t(v, {}),
+    checked: !e.getIsVisible(),
+    onClick: () => e.toggleVisibility(!1),
+    className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
+  }), /* @__PURE__ */ o("div", { className: s("flex items-center gap-1.5", i), children: [
+    /* @__PURE__ */ t(
+      m,
+      {
+        trigger: c,
+        items: r,
+        align: "start",
+        contentClassName: "w-28"
+      }
+    ),
+    d
+  ] });
+}
+export {
+  _ as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

package/dist/esm/components/Table/data-table-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/Table/data-table-column-header.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n  ChevronDown,\n  ChevronsUpDown,\n  ChevronUp,\n  EyeOff,\n  Filter,\n  X,\n} from \"lucide-react\";\n\nimport { cn } from \"@dsui/ui\";\nimport DropdownMenu, {\n  type DropdownMenuItem,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { DataTableFilterPopover } from \"./TableFilter/data-table-filter-popover\";\nimport Button from \"../Button\";\n\ninterface DataTableColumnHeaderProps<TData, TValue> {\n  column: Column<TData, TValue>;\n  label?: string;\n  className?: string;\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  label,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  const displayLabel =\n    label ||\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : null);\n\n  const hasActions =\n    column.getCanSort() || column.getCanHide() || column.getCanFilter();\n\n  if (!hasActions) {\n    return <div className={cn(className)}>{displayLabel}</div>;\n  }\n\n  const sortTrigger = (\n    <button className=\"-ml-1.5 flex h-8 items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-accent focus:outline-none focus:ring-1 focus:ring-ring data-[state=open]:bg-accent [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\">\n      {displayLabel}\n      {column.getCanSort() &&\n        (column.getIsSorted() === \"desc\" ? (\n          <ChevronDown />\n        ) : column.getIsSorted() === \"asc\" ? (\n          <ChevronUp />\n        ) : (\n          <ChevronsUpDown />\n        ))}\n    </button>\n  );\n\n  const filterButton =\n    column.getCanFilter() && column.columnDef.meta?.variant ? (\n      <DataTableFilterPopover\n        column={column}\n        trigger={\n          <Button\n            variant=\"ghost\"\n            className={cn(\n              \"hover:bg-accent rounded p-1\",\n              column.getFilterValue() ? \"text-primary\" : \"\",\n            )}\n          >\n            <Filter className=\"size-4\" />\n          </Button>\n        }\n      />\n    ) : null;\n\n  const items: DropdownMenuItem[] = [];\n\n  if (column.getCanSort()) {\n    items.push({\n      key: \"asc\",\n      type: \"checkbox\",\n      label: \"Asc\",\n      icon: <ChevronUp />,\n      checked: column.getIsSorted() === \"asc\",\n      onClick: () => column.toggleSorting(false),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n    items.push({\n      key: \"desc\",\n      type: \"checkbox\",\n      label: \"Desc\",\n      icon: <ChevronDown />,\n      checked: column.getIsSorted() === \"desc\",\n      onClick: () => column.toggleSorting(true),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n    if (column.getIsSorted()) {\n      items.push({\n        key: \"reset\",\n        type: \"item\",\n        label: \"Reset\",\n        icon: <X />,\n        onClick: () => column.clearSorting(),\n        className: \"pl-2 [&_svg]:text-muted-foreground\",\n      });\n    }\n  }\n\n  if (column.getCanHide()) {\n    items.push({\n      key: \"hide\",\n      type: \"checkbox\",\n      label: \"Hide\",\n      icon: <EyeOff />,\n      checked: !column.getIsVisible(),\n      onClick: () => column.toggleVisibility(false),\n      className:\n        \"relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\",\n    });\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <DropdownMenu\n        trigger={sortTrigger}\n        items={items}\n        align=\"start\"\n        contentClassName=\"w-28\"\n      />\n      {filterButton}\n    </div>\n  );\n}\n"],"names":["DataTableColumnHeader","column","label","className","displayLabel","cn","sortTrigger","jsxs","jsx","ChevronDown","ChevronUp","ChevronsUpDown","filterButton","DataTableFilterPopover","Button","Filter","items","X","EyeOff","DropdownMenu"],"mappings":";;;;;;AAyBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAA8C;AAC5C,QAAMC,IACJF,MACC,OAAOD,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjB;AAKN,MAAI,EAFFA,EAAO,WAAA,KAAgBA,EAAO,WAAA,KAAgBA,EAAO,aAAA;AAGrD,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAC,GAAa;AAGtD,QAAME,IACJ,gBAAAC,EAAC,UAAA,EAAO,WAAU,0NACf,UAAA;AAAA,IAAAH;AAAA,IACAH,EAAO,WAAA,MACLA,EAAO,YAAA,MAAkB,SACxB,gBAAAO,EAACC,GAAA,EAAY,IACXR,EAAO,kBAAkB,0BAC1BS,GAAA,CAAA,CAAU,sBAEVC,GAAA,EAAe;AAAA,EAAA,GAEtB,GAGIC,IACJX,EAAO,aAAA,KAAkBA,EAAO,UAAU,MAAM,UAC9C,gBAAAO;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,QAAAZ;AAAA,MACA,SACE,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAWT;AAAA,YACT;AAAA,YACAJ,EAAO,eAAA,IAAmB,iBAAiB;AAAA,UAAA;AAAA,UAG7C,UAAA,gBAAAO,EAACO,GAAA,EAAO,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7B;AAAA,EAAA,IAGF,MAEAC,IAA4B,CAAA;AAElC,SAAIf,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAON,GAAA,EAAU;AAAA,IACjB,SAAST,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAK;AAAA,IACzC,WACE;AAAA,EAAA,CACH,GACDe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOP,GAAA,EAAY;AAAA,IACnB,SAASR,EAAO,YAAA,MAAkB;AAAA,IAClC,SAAS,MAAMA,EAAO,cAAc,EAAI;AAAA,IACxC,WACE;AAAA,EAAA,CACH,GACGA,EAAO,iBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOC,GAAA,EAAE;AAAA,IACT,SAAS,MAAMhB,EAAO,aAAA;AAAA,IACtB,WAAW;AAAA,EAAA,CACZ,IAIDA,EAAO,gBACTe,EAAM,KAAK;AAAA,IACT,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,wBAAOE,GAAA,EAAO;AAAA,IACd,SAAS,CAACjB,EAAO,aAAA;AAAA,IACjB,SAAS,MAAMA,EAAO,iBAAiB,EAAK;AAAA,IAC5C,WACE;AAAA,EAAA,CACH,qBAIA,OAAA,EAAI,WAAWI,EAAG,6BAA6BF,CAAS,GACvD,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,OAAAU;AAAA,QACA,OAAM;AAAA,QACN,kBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAElBJ;AAAA,EAAA,GACH;AAEJ;"}

package/dist/esm/components/Table/data-table-pagination.js

@@ -0,0 +1,73 @@
+import { jsxs as a, jsx as o, Fragment as f } from "react/jsx-runtime";
+import { Pagination as p } from "../Pagination/index.js";
+import { cn as c } from "@dsui/ui/index";
+import u from "../Select/Select.js";
+function v({
+  table: e,
+  pageSizeOptions: r = [5, 10, 20, 30, 40, 50, 100],
+  className: n,
+  showPageInfo: s = !1,
+  showPageSizeOptions: i = !1,
+  showRowSelectionCount: l = !1,
+  showPagination: g = !0,
+  ...m
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: c(
+        "flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8",
+        n
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ o("div", { className: "flex-1 whitespace-nowrap text-muted-foreground text-sm", children: l && /* @__PURE__ */ a(f, { children: [
+          e.getFilteredSelectedRowModel().rows.length,
+          " of",
+          " ",
+          e.getFilteredRowModel().rows.length,
+          " row(s) selected."
+        ] }) }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col-reverse items-center gap-2 sm:flex-row sm:gap-2 lg:gap-4", children: [
+          s && /* @__PURE__ */ a("div", { className: "flex items-center justify-center font-medium text-sm", children: [
+            "Page ",
+            e.getState().pagination.pageIndex + 1,
+            " of",
+            " ",
+            e.getPageCount()
+          ] }),
+          g && /* @__PURE__ */ o(
+            p,
+            {
+              total: e.getPageCount(),
+              currentPage: e.getState().pagination.pageIndex + 1,
+              onPageChange: (t) => e.setPageIndex(t - 1),
+              maxPages: 3,
+              previousText: !1,
+              nextText: !1,
+              jumpOnEllipsis: !0,
+              showPreviousNext: !0
+            }
+          ),
+          i && /* @__PURE__ */ o(
+            u,
+            {
+              value: `${e.getState().pagination.pageSize}`,
+              onValueChange: (t) => {
+                e.setPageSize(Number(t));
+              },
+              options: r.map((t) => ({
+                value: `${t}`,
+                label: `${t} / page`
+              }))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  v as DataTablePagination
+};
+//# sourceMappingURL=data-table-pagination.js.map

package/dist/esm/components/Table/data-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/Table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from \"@tanstack/react-table\";\n\nimport { Select } from \"../Select\";\nimport { Pagination } from \"../Pagination\";\nimport { cn } from \"@dsui/ui/index\";\n\ninterface DataTablePaginationProps<TData> extends React.ComponentProps<\"div\"> {\n  table: Table<TData>;\n  pageSizeOptions?: number[];\n  showPagination?: boolean;\n  showPageSizeOptions?: boolean;\n  showRowSelectionCount?: boolean;\n  showPageInfo?: boolean;\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [5, 10, 20, 30, 40, 50, 100],\n  className,\n  showPageInfo = false,\n  showPageSizeOptions = false,\n  showRowSelectionCount = false,\n  showPagination = true,\n  ...props\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\">\n        {showRowSelectionCount && (\n          <>\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </>\n        )}\n      </div>\n      <div className=\"flex flex-col-reverse items-center gap-2 sm:flex-row sm:gap-2 lg:gap-4\">\n        {showPageInfo && (\n          <div className=\"flex items-center justify-center font-medium text-sm\">\n            Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n            {table.getPageCount()}\n          </div>\n        )}\n\n        {showPagination && (\n          <Pagination\n            total={table.getPageCount()}\n            currentPage={table.getState().pagination.pageIndex + 1}\n            onPageChange={(page) => table.setPageIndex(page - 1)}\n            maxPages={3}\n            previousText={false}\n            nextText={false}\n            jumpOnEllipsis\n            showPreviousNext={true}\n          />\n        )}\n\n        {showPageSizeOptions && (\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            options={pageSizeOptions.map((pageSize) => ({\n              value: `${pageSize}`,\n              label: `${pageSize} / page`,\n            }))}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","className","showPageInfo","showPageSizeOptions","showRowSelectionCount","showPagination","props","jsxs","cn","jsx","Fragment","Pagination","page","Select","value","pageSize"],"mappings":";;;;AAeO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAAA,EAC7C,WAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,qBAAAC,IAAsB;AAAA,EACtB,uBAAAC,IAAwB;AAAA,EACxB,gBAAAC,IAAiB;AAAA,EACjB,GAAGC;AACL,GAAoC;AAClC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,0DACZ,UAAAL,KACC,gBAAAG,EAAAG,GAAA,EACG,UAAA;AAAA,UAAAX,EAAM,8BAA8B,KAAK;AAAA,UAAO;AAAA,UAAI;AAAA,UACpDA,EAAM,sBAAsB,KAAK;AAAA,UAAO;AAAA,QAAA,EAAA,CAC3C,EAAA,CAEJ;AAAA,QACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,0EACZ,UAAA;AAAA,UAAAL,KACC,gBAAAK,EAAC,OAAA,EAAI,WAAU,wDAAuD,UAAA;AAAA,YAAA;AAAA,YAC9DR,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,YAAE;AAAA,YAAI;AAAA,YACnDA,EAAM,aAAA;AAAA,UAAa,GACtB;AAAA,UAGDM,KACC,gBAAAI;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAOZ,EAAM,aAAA;AAAA,cACb,aAAaA,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,cACrD,cAAc,CAACa,MAASb,EAAM,aAAaa,IAAO,CAAC;AAAA,cACnD,UAAU;AAAA,cACV,cAAc;AAAA,cACd,UAAU;AAAA,cACV,gBAAc;AAAA,cACd,kBAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,UAIrBT,KACC,gBAAAM;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,OAAO,GAAGd,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,cAC9C,eAAe,CAACe,MAAU;AACxB,gBAAAf,EAAM,YAAY,OAAOe,CAAK,CAAC;AAAA,cACjC;AAAA,cACA,SAASd,EAAgB,IAAI,CAACe,OAAc;AAAA,gBAC1C,OAAO,GAAGA,CAAQ;AAAA,gBAClB,OAAO,GAAGA,CAAQ;AAAA,cAAA,EAClB;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}