@sth87/shadcn-design-system 0.0.36 → 0.1.0

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

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

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

@@ -1 +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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"}
+{"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=\"ds:flex ds:w-auto ds:flex-col ds:gap-4\">\n      <div className=\"ds:flex ds:flex-col ds:gap-3\">\n        <p className=\"ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\">\n          {title}\n        </p>\n        <div className=\"ds:flex ds:items-center ds:gap-4\">\n          <label htmlFor={`${id}-from`} className=\"ds:sr-only\">\n            From\n          </label>\n          <div className=\"ds: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(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n            />\n            {unit && (\n              <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n                {unit}\n              </span>\n            )}\n          </div>\n          <label htmlFor={`${id}-to`} className=\"ds:sr-only\">\n            to\n          </label>\n          <div className=\"ds: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(\"ds:h-8 ds:w-24\", unit && \"ds:pr-8\")}\n            />\n            {unit && (\n              <span className=\"ds:absolute ds:top-0 ds:right-0 ds:bottom-0 ds:flex ds:items-center ds:rounded-r-md ds:bg-accent ds:px-2 ds:text-muted-foreground ds:text-sm\">\n                {unit}\n              </span>\n            )}\n          </div>\n        </div>\n        <label htmlFor={`${id}-slider`} className=\"ds: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=\"ds:border-dashed ds:font-normal\">\n        {columnFilterValue ? (\n          <div\n            role=\"button\"\n            aria-label={`Clear ${title} filter`}\n            tabIndex={0}\n            className=\"ds:rounded-sm ds:opacity-70 ds:transition-opacity ds:hover:opacity-100 ds:focus-visible:outline-none ds:focus-visible:ring-1 ds: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=\"ds:mx-0.5 ds: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

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { ChevronDown as p, ChevronUp as n, ChevronsUpDown as d, Filter as m, X as f, EyeOff as h } from "lucide-react";
+import { ChevronDown as d, ChevronUp as p, ChevronsUpDown as c, Filter as m, X as f, EyeOff as h } from "lucide-react";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
@@ -37,16 +37,16 @@ import { DataTableFilterPopover as u } from "./TableFilter/data-table-filter-pop
 import b from "../Button/Button.js";
 function it({
   column: t,
-  label: g,
-  className: o
+  label: n,
+  className: s
 }) {
-  const s = g || (typeof t.columnDef.header == "string" ? t.columnDef.header : null);
+  const o = n || (typeof t.columnDef.header == "string" ? t.columnDef.header : null);
   if (!(t.getCanSort() || t.getCanHide() || t.getCanFilter()))
-    return /* @__PURE__ */ e("div", { className: i(o), children: s });
-  const l = /* @__PURE__ */ a("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: [
-    s,
-    t.getCanSort() && (t.getIsSorted() === "desc" ? /* @__PURE__ */ e(p, {}) : t.getIsSorted() === "asc" ? /* @__PURE__ */ e(n, {}) : /* @__PURE__ */ e(d, {}))
-  ] }), c = t.getCanFilter() && t.columnDef.meta?.variant ? /* @__PURE__ */ e(
+    return /* @__PURE__ */ e("div", { className: i(s), children: o });
+  const g = /* @__PURE__ */ a("button", { className: "ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_svg]:text-muted-foreground", children: [
+    o,
+    t.getCanSort() && (t.getIsSorted() === "desc" ? /* @__PURE__ */ e(d, {}) : t.getIsSorted() === "asc" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(c, {}))
+  ] }), l = t.getCanFilter() && t.columnDef.meta?.variant ? /* @__PURE__ */ e(
     u,
     {
       column: t,
@@ -55,10 +55,10 @@ function it({
         {
           variant: "ghost",
           className: i(
-            "hover:bg-accent rounded p-1",
-            t.getFilterValue() ? "text-primary" : ""
+            "ds:hover:bg-accent ds:rounded ds:p-1",
+            t.getFilterValue() ? "ds:text-primary" : ""
           ),
-          children: /* @__PURE__ */ e(m, { className: "size-4" })
+          children: /* @__PURE__ */ e(m, { className: "ds:size-4" })
         }
       )
     }
@@ -67,7 +67,7 @@ function it({
     key: "asc",
     type: "checkbox",
     label: "Asc",
-    icon: /* @__PURE__ */ e(n, {}),
+    icon: /* @__PURE__ */ e(p, {}),
     checked: t.getIsSorted() === "asc",
     onClick: () => t.toggleSorting(!1),
     className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
@@ -75,7 +75,7 @@ function it({
     key: "desc",
     type: "checkbox",
     label: "Desc",
-    icon: /* @__PURE__ */ e(p, {}),
+    icon: /* @__PURE__ */ e(d, {}),
     checked: t.getIsSorted() === "desc",
     onClick: () => t.toggleSorting(!0),
     className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
@@ -94,17 +94,17 @@ function it({
     checked: !t.getIsVisible(),
     onClick: () => t.toggleVisibility(!1),
     className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-  }), /* @__PURE__ */ a("div", { className: i("flex items-center gap-1.5", o), children: [
+  }), /* @__PURE__ */ a("div", { className: i("ds:flex ds:items-center ds:gap-1.5", s), children: [
     /* @__PURE__ */ e(
       v,
       {
-        trigger: l,
+        trigger: g,
         items: r,
         align: "start",
-        contentClassName: "w-28"
+        contentClassName: "ds:w-28"
       }
     ),
-    c
+    l
   ] });
 }
 export {

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

@@ -1 +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,GAAqC;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;"}
+{"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=\"ds:-ml-1.5 ds:flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-md ds:px-2 ds:py-1.5 ds:hover:bg-accent ds:focus:outline-none ds:focus:ring-1 ds:focus:ring-ring ds:data-[state=open]:bg-accent ds:[&_svg]:size-4 ds:[&_svg]:shrink-0 ds:[&_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              \"ds:hover:bg-accent ds:rounded ds:p-1\",\n              column.getFilterValue() ? \"ds:text-primary\" : \"\"\n            )}\n          >\n            <Filter className=\"ds: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(\"ds:flex ds:items-center ds:gap-1.5\", className)}>\n      <DropdownMenu\n        trigger={sortTrigger}\n        items={items}\n        align=\"start\"\n        contentClassName=\"ds: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,GAAqC;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,0QACf,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,oBAAoB;AAAA,UAAA;AAAA,UAGhD,UAAA,gBAAAO,EAACO,GAAA,EAAO,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;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,sCAAsCF,CAAS,GAChE,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

@@ -1,12 +1,12 @@
-import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
-import { Pagination as f } from "../Pagination/index.js";
+import { jsxs as o, jsx as r, Fragment as l } from "react/jsx-runtime";
+import { Pagination as g } from "../Pagination/index.js";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as c } from "../../packages/ui/src/lib/utils.js";
+import { cn as f } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -33,43 +33,43 @@ import "../../packages/ui/src/components/sidebar.js";
 import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
-import u from "../Select/Select.js";
+import c from "../Select/Select.js";
 function Z({
   table: e,
   pageSizeOptions: i = [5, 10, 20, 30, 40, 50, 100],
-  className: m,
-  showPageInfo: p = !1,
-  showPageSizeOptions: a = !1,
-  showRowSelectionCount: n = !1,
-  showPagination: s = !0,
-  ...l
+  className: s,
+  showPageInfo: m = !1,
+  showPageSizeOptions: p = !1,
+  showRowSelectionCount: a = !1,
+  showPagination: d = !0,
+  ...n
 }) {
   return /* @__PURE__ */ o(
     "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",
-        m
+      className: f(
+        "ds:flex ds:w-full ds:flex-col-reverse ds:items-center ds:justify-between ds:gap-4 ds:overflow-auto ds:p-1 ds:sm:flex-row ds:sm:gap-8",
+        s
       ),
-      ...l,
+      ...n,
       children: [
-        /* @__PURE__ */ r("div", { className: "flex-1 whitespace-nowrap text-muted-foreground text-sm", children: n && /* @__PURE__ */ o(g, { children: [
+        /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:whitespace-nowrap ds:text-muted-foreground ds:text-sm", children: a && /* @__PURE__ */ o(l, { children: [
           e.getFilteredSelectedRowModel().rows.length,
           " of",
           " ",
           e.getFilteredRowModel().rows.length,
           " row(s) selected."
         ] }) }),
-        /* @__PURE__ */ o("div", { className: "flex flex-col-reverse items-center gap-2 sm:flex-row sm:gap-2 lg:gap-4", children: [
-          p && /* @__PURE__ */ o("div", { className: "flex items-center justify-center font-medium text-sm", children: [
+        /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-col-reverse ds:items-center ds:gap-2 ds:sm:flex-row ds:sm:gap-2 ds:lg:gap-4", children: [
+          m && /* @__PURE__ */ o("div", { className: "ds:flex ds:items-center ds:justify-center ds:font-medium ds:text-sm", children: [
             "Page ",
             e.getState().pagination.pageIndex + 1,
             " of",
             " ",
             e.getPageCount()
           ] }),
-          s && /* @__PURE__ */ r(
-            f,
+          d && /* @__PURE__ */ r(
+            g,
             {
               total: e.getPageCount(),
               currentPage: e.getState().pagination.pageIndex + 1,
@@ -81,8 +81,8 @@ function Z({
               showPreviousNext: !0
             }
           ),
-          a && /* @__PURE__ */ r(
-            u,
+          p && /* @__PURE__ */ r(
+            c,
             {
               value: `${e.getState().pagination.pageSize}`,
               onValueChange: (t) => {

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

@@ -1 +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\nexport interface 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;"}
+{"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\nexport interface 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        \"ds:flex ds:w-full ds:flex-col-reverse ds:items-center ds:justify-between ds:gap-4 ds:overflow-auto ds:p-1 ds:sm:flex-row ds:sm:gap-8\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"ds:flex-1 ds:whitespace-nowrap ds:text-muted-foreground ds: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=\"ds:flex ds:flex-col-reverse ds:items-center ds:gap-2 ds:sm:flex-row ds:sm:gap-2 ds:lg:gap-4\">\n        {showPageInfo && (\n          <div className=\"ds:flex ds:items-center ds:justify-center ds:font-medium ds: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,sEACZ,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,+FACZ,UAAA;AAAA,UAAAL,KACC,gBAAAK,EAAC,OAAA,EAAI,WAAU,uEAAsE,UAAA;AAAA,YAAA;AAAA,YAC7ER,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;"}