@acmekit/dashboard 2.13.7 → 2.13.8

package/dist/chunk-7ZHDHEUH.mjs

@@ -0,0 +1,1837 @@
+import {
+  TableSkeleton
+} from "./chunk-ITNQKZQQ.mjs";
+import {
+  useDate
+} from "./chunk-DFFLVEZ5.mjs";
+import {
+  useDocumentDirection
+} from "./chunk-S4DMV3ZT.mjs";
+
+// src/components/table/data-table/data-table.tsx
+import { clx as clx9 } from "@acmekit/ui";
+import { memo } from "react";
+
+// src/components/common/empty-table-content/empty-table-content.tsx
+import { ExclamationCircle, MagnifyingGlass, PlusMini } from "@acmekit/icons";
+import { Button, Text, clx } from "@acmekit/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NoResults = ({ title, message, className }) => {
+  const { t: t2 } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clx(
+        "flex h-[400px] w-full items-center justify-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-2", children: [
+        /* @__PURE__ */ jsx(MagnifyingGlass, {}),
+        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: title ?? t2("general.noResultsTitle") }),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: message ?? t2("general.noResultsMessage") })
+      ] })
+    }
+  );
+};
+var DefaultButton = ({ action }) => action && /* @__PURE__ */ jsx(Link, { to: action.to, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: action.label }) });
+var TransparentIconLeftButton = ({ action }) => action && /* @__PURE__ */ jsx(Link, { to: action.to, children: /* @__PURE__ */ jsxs(Button, { variant: "transparent", className: "text-ui-fg-interactive", children: [
+  /* @__PURE__ */ jsx(PlusMini, {}),
+  " ",
+  action.label
+] }) });
+var NoRecords = ({
+  title,
+  message,
+  action,
+  className,
+  buttonVariant = "default",
+  icon = /* @__PURE__ */ jsx(ExclamationCircle, { className: "text-ui-fg-subtle" })
+}) => {
+  const { t: t2 } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clx(
+        "flex h-[150px] w-full flex-col items-center justify-center gap-y-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-3", children: [
+          icon,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-1", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: title ?? t2("general.noRecordsTitle") }),
+            /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: message ?? t2("general.noRecordsMessage") })
+          ] })
+        ] }),
+        buttonVariant === "default" && /* @__PURE__ */ jsx(DefaultButton, { action }),
+        buttonVariant === "transparentIconLeft" && /* @__PURE__ */ jsx(TransparentIconLeftButton, { action })
+      ]
+    }
+  );
+};
+
+// src/components/table/data-table/data-table-filter/data-table-filter.tsx
+import { Button as Button2, clx as clx7 } from "@acmekit/ui";
+import { Popover as RadixPopover6 } from "radix-ui";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState5 } from "react";
+import { useSearchParams as useSearchParams2 } from "react-router-dom";
+import { useTranslation as useTranslation6 } from "react-i18next";
+
+// src/components/table/data-table/data-table-filter/context.tsx
+import { createContext, useContext } from "react";
+var DataTableFilterContext = createContext(null);
+var useDataTableFilterContext = () => {
+  const ctx = useContext(DataTableFilterContext);
+  if (!ctx) {
+    throw new Error(
+      "useDataTableFacetedFilterContext must be used within a DataTableFacetedFilter"
+    );
+  }
+  return ctx;
+};
+
+// src/components/table/data-table/data-table-filter/date-filter.tsx
+import { EllipseMiniSolid } from "@acmekit/icons";
+import { DatePicker, Text as Text3, clx as clx3 } from "@acmekit/ui";
+import isEqual from "lodash.isequal";
+import { Popover as RadixPopover2 } from "radix-ui";
+import { useMemo, useState } from "react";
+import { t } from "i18next";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/components/table/data-table/hooks.tsx
+import { useSearchParams } from "react-router-dom";
+var useSelectedParams = ({
+  param,
+  prefix,
+  multiple = false
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const identifier = prefix ? `${prefix}_${param}` : param;
+  const offsetKey = prefix ? `${prefix}_offset` : "offset";
+  const add = (value) => {
+    setSearchParams((prev) => {
+      const newValue = new URLSearchParams(prev);
+      const updateMultipleValues = () => {
+        const existingValues = newValue.get(identifier)?.split(",") || [];
+        if (!existingValues.includes(value)) {
+          existingValues.push(value);
+          newValue.set(identifier, existingValues.join(","));
+        }
+      };
+      const updateSingleValue = () => {
+        newValue.set(identifier, value);
+      };
+      multiple ? updateMultipleValues() : updateSingleValue();
+      newValue.delete(offsetKey);
+      return newValue;
+    });
+  };
+  const deleteParam = (value) => {
+    const deleteMultipleValues = (prev) => {
+      const existingValues = prev.get(identifier)?.split(",") || [];
+      const index = existingValues.indexOf(value || "");
+      if (index > -1) {
+        existingValues.splice(index, 1);
+        prev.set(identifier, existingValues.join(","));
+      }
+    };
+    const deleteSingleValue = (prev) => {
+      prev.delete(identifier);
+    };
+    setSearchParams((prev) => {
+      if (value) {
+        multiple ? deleteMultipleValues(prev) : deleteSingleValue(prev);
+        if (!prev.get(identifier)) {
+          prev.delete(identifier);
+        }
+      } else {
+        prev.delete(identifier);
+      }
+      prev.delete(offsetKey);
+      return prev;
+    });
+  };
+  const get = () => {
+    return searchParams.get(identifier)?.split(",").filter(Boolean) || [];
+  };
+  return { add, delete: deleteParam, get };
+};
+
+// src/components/table/data-table/data-table-filter/filter-chip.tsx
+import { XMarkMini } from "@acmekit/icons";
+import { Text as Text2, clx as clx2 } from "@acmekit/ui";
+import { Popover as RadixPopover } from "radix-ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FilterChip = ({
+  hadPreviousValue,
+  label,
+  value,
+  readonly,
+  hasOperator,
+  onRemove
+}) => {
+  const { t: t2 } = useTranslation2();
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    onRemove();
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-default select-none items-stretch overflow-hidden rounded-md", children: [
+    !hadPreviousValue && /* @__PURE__ */ jsx2(RadixPopover.Anchor, {}),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: clx2(
+          "flex items-center justify-center whitespace-nowrap px-2 py-1",
+          {
+            "border-r": !!(value || hadPreviousValue)
+          }
+        ),
+        children: /* @__PURE__ */ jsx2(Text2, { size: "small", weight: "plus", leading: "compact", children: label })
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center overflow-hidden", children: [
+      hasOperator && !!(value || hadPreviousValue) && /* @__PURE__ */ jsx2("div", { className: "border-r p-1 px-2", children: /* @__PURE__ */ jsx2(
+        Text2,
+        {
+          size: "small",
+          weight: "plus",
+          leading: "compact",
+          className: "text-ui-fg-muted",
+          children: t2("general.is")
+        }
+      ) }),
+      !!(value || hadPreviousValue) && /* @__PURE__ */ jsx2(
+        RadixPopover.Trigger,
+        {
+          asChild: true,
+          className: clx2(
+            "flex-1 cursor-pointer overflow-hidden border-r p-1 px-2",
+            {
+              "hover:bg-ui-bg-field-hover": !readonly,
+              "data-[state=open]:bg-ui-bg-field-hover": !readonly
+            }
+          ),
+          children: /* @__PURE__ */ jsx2(
+            Text2,
+            {
+              size: "small",
+              leading: "compact",
+              weight: "plus",
+              className: "truncate text-nowrap",
+              children: value || "\xA0"
+            }
+          )
+        }
+      )
+    ] }),
+    !readonly && !!(value || hadPreviousValue) && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: handleRemove,
+        className: clx2(
+          "text-ui-fg-muted transition-fg flex items-center justify-center p-1",
+          "hover:bg-ui-bg-subtle-hover",
+          "active:bg-ui-bg-subtle-pressed active:text-ui-fg-base"
+        ),
+        children: /* @__PURE__ */ jsx2(XMarkMini, {})
+      }
+    )
+  ] });
+};
+var filter_chip_default = FilterChip;
+
+// src/components/table/data-table/data-table-filter/date-filter.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DateFilter = ({
+  filter,
+  prefix,
+  readonly,
+  openOnMount
+}) => {
+  const [open, setOpen] = useState(openOnMount);
+  const [showCustom, setShowCustom] = useState(false);
+  const { getFullDate } = useDate();
+  const { key, label } = filter;
+  const { removeFilter } = useDataTableFilterContext();
+  const selectedParams = useSelectedParams({ param: key, prefix });
+  const presets = usePresets();
+  const handleSelectPreset = (value) => {
+    selectedParams.add(JSON.stringify(value));
+    setShowCustom(false);
+  };
+  const handleSelectCustom = () => {
+    selectedParams.delete();
+    setShowCustom((prev) => !prev);
+  };
+  const currentValue = selectedParams.get();
+  const currentDateComparison = parseDateComparison(currentValue);
+  const customStartValue = getDateFromComparison(currentDateComparison, "$gte");
+  const customEndValue = getDateFromComparison(currentDateComparison, "$lte");
+  const handleCustomDateChange = (value, pos) => {
+    const key2 = pos === "start" ? "$gte" : "$lte";
+    let dateValue = value;
+    if (key2 === "$lte" && value) {
+      dateValue = new Date(value.getTime());
+      dateValue.setHours(23, 59, 59, 999);
+    }
+    selectedParams.add(
+      JSON.stringify({
+        ...currentDateComparison || {},
+        [key2]: dateValue?.toISOString()
+      })
+    );
+  };
+  const getDisplayValueFromPresets = () => {
+    const preset = presets.find((p) => isEqual(p.value, currentDateComparison));
+    return preset?.label;
+  };
+  const formatCustomDate = (date) => {
+    return date ? getFullDate({ date }) : void 0;
+  };
+  const getCustomDisplayValue = () => {
+    const formattedDates = [customStartValue, customEndValue].map(
+      formatCustomDate
+    );
+    return formattedDates.filter(Boolean).join(" - ");
+  };
+  const displayValue = getDisplayValueFromPresets() || getCustomDisplayValue();
+  const [previousValue, setPreviousValue] = useState(
+    displayValue
+  );
+  const handleRemove = () => {
+    selectedParams.delete();
+    removeFilter(key);
+  };
+  let timeoutId = null;
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    setPreviousValue(displayValue);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (!open2 && !currentValue.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key);
+      }, 200);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(RadixPopover2.Root, { modal: true, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx3(
+      filter_chip_default,
+      {
+        hadPreviousValue: !!previousValue,
+        label,
+        value: displayValue,
+        onRemove: handleRemove,
+        readonly
+      }
+    ),
+    !readonly && /* @__PURE__ */ jsx3(RadixPopover2.Portal, { children: /* @__PURE__ */ jsxs3(
+      RadixPopover2.Content,
+      {
+        "data-name": "date_filter_content",
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 24,
+        className: clx3(
+          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout h-full max-h-[var(--radix-popper-available-height)] w-[300px] overflow-auto rounded-lg"
+        ),
+        onInteractOutside: (e) => {
+          if (e.target instanceof HTMLElement) {
+            if (e.target.attributes.getNamedItem("data-name")?.value === "filters_menu_content") {
+              e.preventDefault();
+            }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs3("ul", { className: "w-full p-1", children: [
+            presets.map((preset) => {
+              const isSelected = selectedParams.get().includes(JSON.stringify(preset.value));
+              return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  className: "bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex w-full cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
+                  type: "button",
+                  onClick: () => {
+                    handleSelectPreset(preset.value);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: clx3(
+                          "transition-fg flex h-5 w-5 items-center justify-center",
+                          {
+                            "[&_svg]:invisible": !isSelected
+                          }
+                        ),
+                        children: /* @__PURE__ */ jsx3(EllipseMiniSolid, {})
+                      }
+                    ),
+                    preset.label
+                  ]
+                }
+              ) }, preset.label);
+            }),
+            /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                className: "bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex w-full cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
+                type: "button",
+                onClick: handleSelectCustom,
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: clx3(
+                        "transition-fg flex h-5 w-5 items-center justify-center",
+                        {
+                          "[&_svg]:invisible": !showCustom
+                        }
+                      ),
+                      children: /* @__PURE__ */ jsx3(EllipseMiniSolid, {})
+                    }
+                  ),
+                  t("filters.date.custom")
+                ]
+              }
+            ) })
+          ] }),
+          showCustom && /* @__PURE__ */ jsxs3("div", { className: "border-t px-1 pb-3 pt-1", children: [
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx3("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx3(Text3, { size: "xsmall", leading: "compact", weight: "plus", children: t("filters.date.from") }) }),
+              /* @__PURE__ */ jsx3("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx3(
+                DatePicker,
+                {
+                  modal: true,
+                  maxValue: customEndValue,
+                  value: customStartValue,
+                  onChange: (d) => handleCustomDateChange(d, "start")
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx3("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx3(Text3, { size: "xsmall", leading: "compact", weight: "plus", children: t("filters.date.to") }) }),
+              /* @__PURE__ */ jsx3("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx3(
+                DatePicker,
+                {
+                  modal: true,
+                  minValue: customStartValue,
+                  value: customEndValue || void 0,
+                  onChange: (d) => {
+                    handleCustomDateChange(d, "end");
+                  }
+                }
+              ) })
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+var today = /* @__PURE__ */ new Date();
+today.setHours(0, 0, 0, 0);
+var usePresets = () => {
+  const { t: t2 } = useTranslation3();
+  return useMemo(
+    () => [
+      {
+        label: t2("filters.date.today"),
+        value: {
+          $gte: today.toISOString()
+        }
+      },
+      {
+        label: t2("filters.date.lastSevenDays"),
+        value: {
+          $gte: new Date(
+            today.getTime() - 7 * 24 * 60 * 60 * 1e3
+          ).toISOString()
+          // 7 days ago
+        }
+      },
+      {
+        label: t2("filters.date.lastThirtyDays"),
+        value: {
+          $gte: new Date(
+            today.getTime() - 30 * 24 * 60 * 60 * 1e3
+          ).toISOString()
+          // 30 days ago
+        }
+      },
+      {
+        label: t2("filters.date.lastNinetyDays"),
+        value: {
+          $gte: new Date(
+            today.getTime() - 90 * 24 * 60 * 60 * 1e3
+          ).toISOString()
+          // 90 days ago
+        }
+      },
+      {
+        label: t2("filters.date.lastTwelveMonths"),
+        value: {
+          $gte: new Date(
+            today.getTime() - 365 * 24 * 60 * 60 * 1e3
+          ).toISOString()
+          // 365 days ago
+        }
+      }
+    ],
+    [t2]
+  );
+};
+var parseDateComparison = (value) => {
+  return value?.length ? JSON.parse(value.join(",")) : null;
+};
+var getDateFromComparison = (comparison, key) => {
+  if (!comparison?.[key]) {
+    return void 0;
+  }
+  const compareDate = new Date(comparison[key]);
+  if (key === "$lte") {
+    compareDate.setHours(0, 0, 0, 0);
+  }
+  return compareDate;
+};
+
+// src/components/table/data-table/data-table-filter/number-filter.tsx
+import { EllipseMiniSolid as EllipseMiniSolid2 } from "@acmekit/icons";
+import { Input, Label, clx as clx4 } from "@acmekit/ui";
+import debounce from "lodash.debounce";
+import {
+  Popover as RadixPopover3,
+  RadioGroup as RadixRadioGroup
+} from "radix-ui";
+import { useCallback, useEffect, useState as useState2 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var NumberFilter = ({
+  filter,
+  prefix,
+  readonly,
+  openOnMount
+}) => {
+  const { t: t2 } = useTranslation4();
+  const [open, setOpen] = useState2(openOnMount);
+  const { key, label } = filter;
+  const { removeFilter } = useDataTableFilterContext();
+  const selectedParams = useSelectedParams({
+    param: key,
+    prefix,
+    multiple: false
+  });
+  const currentValue = selectedParams.get();
+  const [previousValue, setPreviousValue] = useState2(
+    currentValue
+  );
+  const [operator, setOperator] = useState2(
+    getOperator(currentValue)
+  );
+  const debouncedOnChange = useCallback(
+    debounce((e, operator2) => {
+      const value = e.target.value;
+      const curr = JSON.parse(currentValue?.join(",") || "{}");
+      const isCurrentNumber = !isNaN(Number(curr));
+      const handleValue = (operator3) => {
+        if (!value && isCurrentNumber) {
+          selectedParams.delete();
+          return;
+        }
+        if (curr && !value) {
+          delete curr[operator3];
+          selectedParams.add(JSON.stringify(curr));
+          return;
+        }
+        if (!curr) {
+          selectedParams.add(JSON.stringify({ [operator3]: value }));
+          return;
+        }
+        selectedParams.add(JSON.stringify({ ...curr, [operator3]: value }));
+      };
+      switch (operator2) {
+        case "eq":
+          if (!value) {
+            selectedParams.delete();
+          } else {
+            selectedParams.add(value);
+          }
+          break;
+        case "lt":
+        case "gt":
+          handleValue(operator2);
+          break;
+      }
+    }, 500),
+    [selectedParams, currentValue]
+  );
+  useEffect(() => {
+    return () => {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
+  let timeoutId = null;
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    setPreviousValue(currentValue);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (!open2 && !currentValue.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key);
+      }, 200);
+    }
+  };
+  const handleRemove = () => {
+    selectedParams.delete();
+    removeFilter(key);
+  };
+  const operators = [
+    {
+      operator: "exact",
+      label: t2("filters.compare.exact")
+    },
+    {
+      operator: "range",
+      label: t2("filters.compare.range")
+    }
+  ];
+  const GT_KEY = `${key}-gt`;
+  const LT_KEY = `${key}-lt`;
+  const EQ_KEY = key;
+  const displayValue = parseDisplayValue(currentValue, t2);
+  const previousDisplayValue = parseDisplayValue(previousValue, t2);
+  return /* @__PURE__ */ jsxs4(RadixPopover3.Root, { modal: true, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx4(
+      filter_chip_default,
+      {
+        hasOperator: true,
+        hadPreviousValue: !!previousDisplayValue,
+        label,
+        value: displayValue,
+        onRemove: handleRemove,
+        readonly
+      }
+    ),
+    !readonly && /* @__PURE__ */ jsx4(RadixPopover3.Portal, { children: /* @__PURE__ */ jsxs4(
+      RadixPopover3.Content,
+      {
+        "data-name": "number_filter_content",
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 24,
+        className: clx4(
+          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] w-[300px] divide-y overflow-y-auto rounded-lg outline-none"
+        ),
+        onInteractOutside: (e) => {
+          if (e.target instanceof HTMLElement) {
+            if (e.target.attributes.getNamedItem("data-name")?.value === "filters_menu_content") {
+              e.preventDefault();
+            }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "p-1", children: /* @__PURE__ */ jsx4(
+            RadixRadioGroup.Root,
+            {
+              value: operator,
+              onValueChange: (val) => setOperator(val),
+              className: "flex flex-col items-start",
+              orientation: "vertical",
+              autoFocus: true,
+              children: operators.map((o) => /* @__PURE__ */ jsxs4(
+                RadixRadioGroup.Item,
+                {
+                  value: o.operator,
+                  className: "txt-compact-small hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg grid w-full grid-cols-[20px_1fr] gap-2 rounded-[4px] px-2 py-1.5 text-left outline-none",
+                  children: [
+                    /* @__PURE__ */ jsx4("div", { className: "size-5", children: /* @__PURE__ */ jsx4(RadixRadioGroup.Indicator, { children: /* @__PURE__ */ jsx4(EllipseMiniSolid2, {}) }) }),
+                    /* @__PURE__ */ jsx4("span", { className: "w-full", children: o.label })
+                  ]
+                },
+                o.operator
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsx4("div", { children: operator === "range" ? /* @__PURE__ */ jsxs4("div", { className: "px-1 pb-3 pt-1", children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx4(Label, { size: "xsmall", weight: "plus", htmlFor: GT_KEY, children: t2("filters.compare.greaterThan") }) }),
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-0.5", children: /* @__PURE__ */ jsx4(
+              Input,
+              {
+                name: GT_KEY,
+                size: "small",
+                type: "number",
+                defaultValue: getValue(currentValue, "gt"),
+                onChange: (e) => debouncedOnChange(e, "gt")
+              }
+            ) }),
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx4(Label, { size: "xsmall", weight: "plus", htmlFor: LT_KEY, children: t2("filters.compare.lessThan") }) }),
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-0.5", children: /* @__PURE__ */ jsx4(
+              Input,
+              {
+                name: LT_KEY,
+                size: "small",
+                type: "number",
+                defaultValue: getValue(currentValue, "lt"),
+                onChange: (e) => debouncedOnChange(e, "lt")
+              }
+            ) })
+          ] }, "range") : /* @__PURE__ */ jsxs4("div", { className: "px-1 pb-3 pt-1", children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx4(Label, { size: "xsmall", weight: "plus", htmlFor: EQ_KEY, children: label }) }),
+            /* @__PURE__ */ jsx4("div", { className: "px-2 py-0.5", children: /* @__PURE__ */ jsx4(
+              Input,
+              {
+                name: EQ_KEY,
+                size: "small",
+                type: "number",
+                defaultValue: getValue(currentValue, "eq"),
+                onChange: (e) => debouncedOnChange(e, "eq")
+              }
+            ) })
+          ] }, "exact") })
+        ]
+      }
+    ) })
+  ] });
+};
+var parseDisplayValue = (value, t2) => {
+  const parsed = JSON.parse(value?.join(",") || "{}");
+  let displayValue = "";
+  if (typeof parsed === "object") {
+    const parts = [];
+    if (parsed.gt) {
+      parts.push(t2("filters.compare.greaterThanLabel", { value: parsed.gt }));
+    }
+    if (parsed.lt) {
+      parts.push(
+        t2("filters.compare.lessThanLabel", {
+          value: parsed.lt
+        })
+      );
+    }
+    displayValue = parts.join(` ${t2("filters.compare.andLabel")} `);
+  }
+  if (typeof parsed === "number") {
+    displayValue = parsed.toString();
+  }
+  return displayValue;
+};
+var parseValue = (value) => {
+  if (!value) {
+    return void 0;
+  }
+  const val = value.join(",");
+  if (!val) {
+    return void 0;
+  }
+  return JSON.parse(val);
+};
+var getValue = (value, key) => {
+  const parsed = parseValue(value);
+  if (typeof parsed === "object") {
+    return parsed[key];
+  }
+  if (typeof parsed === "number" && key === "eq") {
+    return parsed;
+  }
+  return void 0;
+};
+var getOperator = (value) => {
+  const parsed = parseValue(value);
+  return typeof parsed === "object" ? "range" : "exact";
+};
+
+// src/components/table/data-table/data-table-filter/select-filter.tsx
+import { CheckMini, EllipseMiniSolid as EllipseMiniSolid3, XMarkMini as XMarkMini2 } from "@acmekit/icons";
+import { clx as clx5 } from "@acmekit/ui";
+import { Command } from "cmdk";
+import { Popover as RadixPopover4 } from "radix-ui";
+import { useState as useState3 } from "react";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectFilter = ({
+  filter,
+  prefix,
+  readonly,
+  multiple,
+  searchable,
+  options,
+  openOnMount
+}) => {
+  const [open, setOpen] = useState3(openOnMount);
+  const [search, setSearch] = useState3("");
+  const [searchRef, setSearchRef] = useState3(null);
+  const { t: t2 } = useTranslation5();
+  const { removeFilter } = useDataTableFilterContext();
+  const { key, label } = filter;
+  const selectedParams = useSelectedParams({ param: key, prefix, multiple });
+  const currentValue = selectedParams.get();
+  const labelValues = currentValue.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
+  const [previousValue, setPreviousValue] = useState3(labelValues);
+  const handleRemove = () => {
+    selectedParams.delete();
+    removeFilter(key);
+  };
+  let timeoutId = null;
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    setPreviousValue(labelValues);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (!open2 && !currentValue.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key);
+      }, 200);
+    }
+  };
+  const handleClearSearch = () => {
+    setSearch("");
+    if (searchRef) {
+      searchRef.focus();
+    }
+  };
+  const handleSelect = (value) => {
+    const isSelected = selectedParams.get().includes(String(value));
+    if (isSelected) {
+      selectedParams.delete(String(value));
+    } else {
+      selectedParams.add(String(value));
+    }
+  };
+  const normalizedValues = labelValues ? Array.isArray(labelValues) ? labelValues : [labelValues] : null;
+  const normalizedPrev = previousValue ? Array.isArray(previousValue) ? previousValue : [previousValue] : null;
+  return /* @__PURE__ */ jsxs5(RadixPopover4.Root, { modal: true, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx5(
+      filter_chip_default,
+      {
+        hasOperator: true,
+        hadPreviousValue: !!normalizedPrev?.length,
+        readonly,
+        label,
+        value: normalizedValues?.join(", "),
+        onRemove: handleRemove
+      }
+    ),
+    !readonly && /* @__PURE__ */ jsx5(RadixPopover4.Portal, { children: /* @__PURE__ */ jsx5(
+      RadixPopover4.Content,
+      {
+        hideWhenDetached: true,
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: clx5(
+          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-hidden rounded-lg outline-none"
+        ),
+        onInteractOutside: (e) => {
+          if (e.target instanceof HTMLElement) {
+            if (e.target.attributes.getNamedItem("data-name")?.value === "filters_menu_content") {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs5(Command, { className: "h-full", children: [
+          searchable && /* @__PURE__ */ jsx5("div", { className: "border-b p-1", children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-[1fr_20px] gap-x-2 rounded-md px-2 py-1", children: [
+            /* @__PURE__ */ jsx5(
+              Command.Input,
+              {
+                ref: setSearchRef,
+                value: search,
+                onValueChange: setSearch,
+                className: "txt-compact-small placeholder:text-ui-fg-muted bg-transparent outline-none",
+                placeholder: "Search"
+              }
+            ),
+            /* @__PURE__ */ jsx5("div", { className: "flex h-5 w-5 items-center justify-center", children: /* @__PURE__ */ jsx5(
+              "button",
+              {
+                disabled: !search,
+                onClick: handleClearSearch,
+                className: clx5(
+                  "transition-fg text-ui-fg-muted focus-visible:bg-ui-bg-base-pressed rounded-md outline-none",
+                  {
+                    invisible: !search
+                  }
+                ),
+                children: /* @__PURE__ */ jsx5(XMarkMini2, {})
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsx5(Command.Empty, { className: "txt-compact-small flex items-center justify-center p-1", children: /* @__PURE__ */ jsx5("span", { className: "w-full px-2 py-1 text-center", children: t2("general.noResultsTitle") }) }),
+          /* @__PURE__ */ jsx5(Command.List, { className: "h-full max-h-[163px] min-h-[0] overflow-auto p-1 outline-none", children: options.map((option) => {
+            const isSelected = selectedParams.get().includes(String(option.value));
+            return /* @__PURE__ */ jsxs5(
+              Command.Item,
+              {
+                className: "bg-ui-bg-base hover:bg-ui-bg-base-hover aria-selected:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center gap-x-2 rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
+                value: option.label,
+                onSelect: () => {
+                  handleSelect(option.value);
+                },
+                children: [
+                  /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      className: clx5(
+                        "transition-fg flex h-5 w-5 items-center justify-center",
+                        {
+                          "[&_svg]:invisible": !isSelected
+                        }
+                      ),
+                      children: multiple ? /* @__PURE__ */ jsx5(CheckMini, {}) : /* @__PURE__ */ jsx5(EllipseMiniSolid3, {})
+                    }
+                  ),
+                  option.label
+                ]
+              },
+              String(option.value)
+            );
+          }) })
+        ] })
+      }
+    ) })
+  ] });
+};
+
+// src/components/table/data-table/data-table-filter/string-filter.tsx
+import { Input as Input2, Label as Label2, clx as clx6 } from "@acmekit/ui";
+import debounce2 from "lodash.debounce";
+import { Popover as RadixPopover5 } from "radix-ui";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var StringFilter = ({
+  filter,
+  prefix,
+  readonly,
+  openOnMount
+}) => {
+  const [open, setOpen] = useState4(openOnMount);
+  const { key, label } = filter;
+  const { removeFilter } = useDataTableFilterContext();
+  const selectedParams = useSelectedParams({ param: key, prefix });
+  const query = selectedParams.get();
+  const [previousValue, setPreviousValue] = useState4(
+    query?.[0]
+  );
+  const debouncedOnChange = useCallback2(
+    debounce2((e) => {
+      const value = e.target.value;
+      if (!value) {
+        selectedParams.delete();
+      } else {
+        selectedParams.add(value);
+      }
+    }, 500),
+    [selectedParams]
+  );
+  useEffect2(() => {
+    return () => {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
+  let timeoutId = null;
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    setPreviousValue(query?.[0]);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (!open2 && !query.length) {
+      timeoutId = setTimeout(() => {
+        removeFilter(key);
+      }, 200);
+    }
+  };
+  const handleRemove = () => {
+    selectedParams.delete();
+    removeFilter(key);
+  };
+  return /* @__PURE__ */ jsxs6(RadixPopover5.Root, { modal: true, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx6(
+      filter_chip_default,
+      {
+        hasOperator: true,
+        hadPreviousValue: !!previousValue,
+        label,
+        value: query?.[0],
+        onRemove: handleRemove,
+        readonly
+      }
+    ),
+    !readonly && /* @__PURE__ */ jsx6(RadixPopover5.Portal, { children: /* @__PURE__ */ jsx6(
+      RadixPopover5.Content,
+      {
+        hideWhenDetached: true,
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: clx6(
+          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-hidden rounded-lg outline-none"
+        ),
+        onInteractOutside: (e) => {
+          if (e.target instanceof HTMLElement) {
+            if (e.target.attributes.getNamedItem("data-name")?.value === "filters_menu_content") {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs6("div", { className: "px-1 pb-3 pt-1", children: [
+          /* @__PURE__ */ jsx6("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx6(Label2, { size: "xsmall", weight: "plus", htmlFor: key, children: label }) }),
+          /* @__PURE__ */ jsx6("div", { className: "px-2 py-0.5", children: /* @__PURE__ */ jsx6(
+            Input2,
+            {
+              name: key,
+              size: "small",
+              defaultValue: query?.[0] || void 0,
+              onChange: debouncedOnChange
+            }
+          ) })
+        ] })
+      }
+    ) })
+  ] });
+};
+
+// src/components/table/data-table/data-table-filter/data-table-filter.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var DataTableFilter = ({
+  filters,
+  readonly,
+  prefix
+}) => {
+  const { t: t2 } = useTranslation6();
+  const [searchParams] = useSearchParams2();
+  const [open, setOpen] = useState5(false);
+  const [activeFilters, setActiveFilters] = useState5(
+    getInitialFilters({ searchParams, filters, prefix })
+  );
+  const availableFilters = filters.filter(
+    (f) => !activeFilters.find((af) => af.key === f.key)
+  );
+  const initialMount = useRef(true);
+  useEffect3(() => {
+    if (initialMount.current) {
+      const params = new URLSearchParams(searchParams);
+      filters.forEach((filter) => {
+        const key = prefix ? `${prefix}_${filter.key}` : filter.key;
+        const value = params.get(key);
+        if (value && !activeFilters.find((af) => af.key === filter.key)) {
+          if (filter.type === "select") {
+            setActiveFilters((prev) => [
+              ...prev,
+              {
+                ...filter,
+                multiple: filter.multiple,
+                options: filter.options,
+                openOnMount: false
+              }
+            ]);
+          } else {
+            setActiveFilters((prev) => [
+              ...prev,
+              { ...filter, openOnMount: false }
+            ]);
+          }
+        }
+      });
+    }
+    initialMount.current = false;
+  }, [activeFilters, filters, prefix, searchParams]);
+  const addFilter = (filter) => {
+    setOpen(false);
+    setActiveFilters((prev) => [...prev, { ...filter, openOnMount: true }]);
+  };
+  const removeFilter = useCallback3((key) => {
+    setActiveFilters((prev) => prev.filter((f) => f.key !== key));
+  }, []);
+  const removeAllFilters = useCallback3(() => {
+    setActiveFilters([]);
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    DataTableFilterContext.Provider,
+    {
+      value: useMemo2(
+        () => ({
+          removeFilter,
+          removeAllFilters
+        }),
+        [removeAllFilters, removeFilter]
+      ),
+      children: /* @__PURE__ */ jsxs7("div", { className: "max-w-2/3 flex flex-wrap items-center gap-2", children: [
+        activeFilters.map((filter) => {
+          switch (filter.type) {
+            case "select":
+              return /* @__PURE__ */ jsx7(
+                SelectFilter,
+                {
+                  filter,
+                  prefix,
+                  readonly,
+                  options: filter.options,
+                  multiple: filter.multiple,
+                  searchable: filter.searchable,
+                  openOnMount: filter.openOnMount
+                },
+                filter.key
+              );
+            case "date":
+              return /* @__PURE__ */ jsx7(
+                DateFilter,
+                {
+                  filter,
+                  prefix,
+                  readonly,
+                  openOnMount: filter.openOnMount
+                },
+                filter.key
+              );
+            case "string":
+              return /* @__PURE__ */ jsx7(
+                StringFilter,
+                {
+                  filter,
+                  prefix,
+                  readonly,
+                  openOnMount: filter.openOnMount
+                },
+                filter.key
+              );
+            case "number":
+              return /* @__PURE__ */ jsx7(
+                NumberFilter,
+                {
+                  filter,
+                  prefix,
+                  readonly,
+                  openOnMount: filter.openOnMount
+                },
+                filter.key
+              );
+            default:
+              break;
+          }
+        }),
+        !readonly && availableFilters.length > 0 && /* @__PURE__ */ jsxs7(RadixPopover6.Root, { modal: true, open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx7(RadixPopover6.Trigger, { asChild: true, id: "filters_menu_trigger", children: /* @__PURE__ */ jsx7(Button2, { size: "small", variant: "secondary", children: t2("filters.addFilter") }) }),
+          /* @__PURE__ */ jsx7(RadixPopover6.Portal, { children: /* @__PURE__ */ jsx7(
+            RadixPopover6.Content,
+            {
+              className: clx7(
+                "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-auto rounded-lg p-1 outline-none"
+              ),
+              "data-name": "filters_menu_content",
+              align: "start",
+              sideOffset: 8,
+              collisionPadding: 8,
+              onCloseAutoFocus: (e) => {
+                const hasOpenFilter = activeFilters.find(
+                  (filter) => filter.openOnMount
+                );
+                if (hasOpenFilter) {
+                  e.preventDefault();
+                }
+              },
+              children: availableFilters.map((filter) => {
+                return /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    className: "bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
+                    role: "menuitem",
+                    onClick: () => {
+                      addFilter(filter);
+                    },
+                    children: filter.label
+                  },
+                  filter.key
+                );
+              })
+            }
+          ) })
+        ] }),
+        !readonly && activeFilters.length > 0 && /* @__PURE__ */ jsx7(ClearAllFilters, { filters, prefix })
+      ] })
+    }
+  );
+};
+var ClearAllFilters = ({ filters, prefix }) => {
+  const { removeAllFilters } = useDataTableFilterContext();
+  const [_, setSearchParams] = useSearchParams2();
+  const handleRemoveAll = () => {
+    setSearchParams((prev) => {
+      const newValues = new URLSearchParams(prev);
+      filters.forEach((filter) => {
+        newValues.delete(prefix ? `${prefix}_${filter.key}` : filter.key);
+      });
+      return newValues;
+    });
+    removeAllFilters();
+  };
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      onClick: handleRemoveAll,
+      className: clx7(
+        "text-ui-fg-muted transition-fg txt-compact-small-plus rounded-md px-2 py-1",
+        "hover:text-ui-fg-subtle",
+        "focus-visible:shadow-borders-focus"
+      ),
+      children: "Clear all"
+    }
+  );
+};
+var getInitialFilters = ({
+  searchParams,
+  filters,
+  prefix
+}) => {
+  const params = new URLSearchParams(searchParams);
+  const activeFilters = [];
+  filters.forEach((filter) => {
+    const key = prefix ? `${prefix}_${filter.key}` : filter.key;
+    const value = params.get(key);
+    if (value) {
+      if (filter.type === "select") {
+        activeFilters.push({
+          ...filter,
+          multiple: filter.multiple,
+          options: filter.options,
+          openOnMount: false
+        });
+      } else {
+        activeFilters.push({ ...filter, openOnMount: false });
+      }
+    }
+  });
+  return activeFilters;
+};
+
+// src/components/table/data-table/data-table-order-by/data-table-order-by.tsx
+import { DescendingSorting } from "@acmekit/icons";
+import { DropdownMenu, IconButton } from "@acmekit/ui";
+import { useState as useState6 } from "react";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { useSearchParams as useSearchParams3 } from "react-router-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var initState = (params, prefix) => {
+  const param = prefix ? `${prefix}_order` : "order";
+  const sortParam = params.get(param);
+  if (!sortParam) {
+    return {
+      dir: "asc" /* ASC */
+    };
+  }
+  const dir = sortParam.startsWith("-") ? "desc" /* DESC */ : "asc" /* ASC */;
+  const key = sortParam.replace("-", "");
+  return {
+    key,
+    dir
+  };
+};
+var DataTableOrderBy = ({
+  keys,
+  prefix
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams3();
+  const [state, setState] = useState6(initState(searchParams, prefix));
+  const param = prefix ? `${prefix}_order` : "order";
+  const { t: t2 } = useTranslation7();
+  const direction = useDocumentDirection();
+  const handleDirChange = (dir) => {
+    setState((prev) => ({
+      ...prev,
+      dir
+    }));
+    updateOrderParam({
+      key: state.key,
+      dir
+    });
+  };
+  const handleKeyChange = (value) => {
+    setState((prev) => ({
+      ...prev,
+      key: value
+    }));
+    updateOrderParam({
+      key: value,
+      dir: state.dir
+    });
+  };
+  const updateOrderParam = (state2) => {
+    if (!state2.key) {
+      setSearchParams((prev) => {
+        prev.delete(param);
+        return prev;
+      });
+      return;
+    }
+    const orderParam = state2.dir === "asc" /* ASC */ ? state2.key : `-${state2.key}`;
+    setSearchParams((prev) => {
+      prev.set(param, orderParam);
+      return prev;
+    });
+  };
+  return /* @__PURE__ */ jsxs8(DropdownMenu, { dir: direction, children: [
+    /* @__PURE__ */ jsx8(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(IconButton, { size: "small", children: /* @__PURE__ */ jsx8(DescendingSorting, {}) }) }),
+    /* @__PURE__ */ jsxs8(DropdownMenu.Content, { className: "z-[1]", align: "end", children: [
+      /* @__PURE__ */ jsx8(
+        DropdownMenu.RadioGroup,
+        {
+          value: state.key,
+          onValueChange: handleKeyChange,
+          children: keys.map((key) => {
+            const stringKey = String(key.key);
+            return /* @__PURE__ */ jsx8(
+              DropdownMenu.RadioItem,
+              {
+                value: stringKey,
+                onSelect: (event) => event.preventDefault(),
+                children: key.label
+              },
+              stringKey
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx8(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsxs8(
+        DropdownMenu.RadioGroup,
+        {
+          value: state.dir,
+          onValueChange: handleDirChange,
+          children: [
+            /* @__PURE__ */ jsxs8(
+              DropdownMenu.RadioItem,
+              {
+                className: "flex items-center justify-between",
+                value: "asc",
+                onSelect: (event) => event.preventDefault(),
+                children: [
+                  t2("general.ascending"),
+                  /* @__PURE__ */ jsx8(DropdownMenu.Label, { children: "1 - 30" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              DropdownMenu.RadioItem,
+              {
+                className: "flex items-center justify-between",
+                value: "desc",
+                onSelect: (event) => event.preventDefault(),
+                children: [
+                  t2("general.descending"),
+                  /* @__PURE__ */ jsx8(DropdownMenu.Label, { children: "30 - 1" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/table/data-table/data-table-search/data-table-search.tsx
+import { Input as Input3 } from "@acmekit/ui";
+import { useCallback as useCallback4, useEffect as useEffect4 } from "react";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import debounce3 from "lodash.debounce";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var DataTableSearch = ({
+  placeholder,
+  prefix,
+  autofocus
+}) => {
+  const { t: t2 } = useTranslation8();
+  const placeholderText = placeholder || t2("general.search");
+  const selectedParams = useSelectedParams({
+    param: "q",
+    prefix,
+    multiple: false
+  });
+  const query = selectedParams.get();
+  const debouncedOnChange = useCallback4(
+    debounce3((e) => {
+      const value = e.target.value;
+      if (!value) {
+        selectedParams.delete();
+      } else {
+        selectedParams.add(value);
+      }
+    }, 500),
+    [selectedParams]
+  );
+  useEffect4(() => {
+    return () => {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
+  return /* @__PURE__ */ jsx9(
+    Input3,
+    {
+      autoComplete: "off",
+      name: "q",
+      type: "search",
+      size: "small",
+      autoFocus: autofocus,
+      defaultValue: query?.[0] || void 0,
+      onChange: debouncedOnChange,
+      placeholder: placeholderText
+    }
+  );
+};
+
+// src/components/table/data-table/data-table-query/data-table-query.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var DataTableQuery = ({
+  search,
+  orderBy,
+  filters,
+  prefix
+}) => {
+  return (search || orderBy || filters || prefix) && /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-x-4 px-6 py-4", children: [
+    /* @__PURE__ */ jsx10("div", { className: "w-full max-w-[60%]", children: filters && filters.length > 0 && /* @__PURE__ */ jsx10(DataTableFilter, { filters, prefix }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 items-center gap-x-2", children: [
+      search && /* @__PURE__ */ jsx10(
+        DataTableSearch,
+        {
+          prefix,
+          autofocus: search === "autofocus"
+        }
+      ),
+      orderBy && /* @__PURE__ */ jsx10(DataTableOrderBy, { keys: orderBy, prefix })
+    ] })
+  ] });
+};
+
+// src/components/table/data-table/data-table-root/data-table-root.tsx
+import { CommandBar, Table, clx as clx8 } from "@acmekit/ui";
+import {
+  flexRender
+} from "@tanstack/react-table";
+import {
+  Fragment,
+  useEffect as useEffect5,
+  useRef as useRef2,
+  useState as useState7
+} from "react";
+import { useTranslation as useTranslation9 } from "react-i18next";
+import { Link as Link2 } from "react-router-dom";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var DataTableRoot = ({
+  table,
+  columns,
+  pagination,
+  navigateTo,
+  commands,
+  count = 0,
+  noResults = false,
+  noHeader = false,
+  layout = "fit"
+}) => {
+  const { t: t2 } = useTranslation9();
+  const [showStickyBorder, setShowStickyBorder] = useState7(false);
+  const scrollableRef = useRef2(null);
+  const hasSelect = columns.find((c) => c.id === "select");
+  const hasActions = columns.find((c) => c.id === "actions");
+  const hasCommandBar = commands && commands.length > 0;
+  const rowSelection = table.getState().rowSelection;
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const colCount = columns.length - (hasSelect ? 1 : 0) - (hasActions ? 1 : 0);
+  const colWidth = 100 / colCount;
+  const handleHorizontalScroll = (e) => {
+    const scrollLeft = e.currentTarget.scrollLeft;
+    if (scrollLeft > 0) {
+      setShowStickyBorder(true);
+    } else {
+      setShowStickyBorder(false);
+    }
+  };
+  const handleAction = async (action) => {
+    await action(rowSelection).then(() => {
+      table.resetRowSelection();
+    });
+  };
+  useEffect5(() => {
+    scrollableRef.current?.scroll({ top: 0, left: 0 });
+  }, [pageIndex]);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: clx8("flex w-full flex-col overflow-hidden", {
+        "flex flex-1 flex-col": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            ref: scrollableRef,
+            onScroll: handleHorizontalScroll,
+            className: clx8("w-full", {
+              "min-h-0 flex-grow overflow-auto": layout === "fill",
+              "overflow-x-auto": layout === "fit"
+            }),
+            children: !noResults ? /* @__PURE__ */ jsxs10(Table, { className: "relative w-full", children: [
+              !noHeader && /* @__PURE__ */ jsx11(Table.Header, { className: "border-t-0", children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx11(
+                  Table.Row,
+                  {
+                    className: clx8({
+                      "relative border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap": hasActions,
+                      "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap": hasSelect
+                    }),
+                    children: headerGroup.headers.map((header, index) => {
+                      const isActionHeader = header.id === "actions";
+                      const isSelectHeader = header.id === "select";
+                      const isSpecialHeader = isActionHeader || isSelectHeader;
+                      const firstHeader = headerGroup.headers.findIndex(
+                        (h) => h.id !== "select"
+                      );
+                      const isFirstHeader = firstHeader !== -1 ? header.id === headerGroup.headers[firstHeader].id : index === 0;
+                      const isStickyHeader = isSelectHeader || isFirstHeader;
+                      return /* @__PURE__ */ jsx11(
+                        Table.HeaderCell,
+                        {
+                          "data-table-header-id": header.id,
+                          style: {
+                            width: !isSpecialHeader ? `${colWidth}%` : void 0
+                          },
+                          className: clx8({
+                            "bg-ui-bg-subtle sticky start-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isStickyHeader,
+                            "start-[68px]": isStickyHeader && hasSelect && !isSelectHeader,
+                            "after:bg-ui-border-base": showStickyBorder && isStickyHeader && !isSpecialHeader
+                          }),
+                          children: flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        },
+                        header.id
+                      );
+                    })
+                  },
+                  headerGroup.id
+                );
+              }) }),
+              /* @__PURE__ */ jsx11(Table.Body, { className: "border-b-0", children: table.getRowModel().rows.map((row) => {
+                const to = navigateTo ? navigateTo(row) : void 0;
+                const isRowDisabled = hasSelect && !row.getCanSelect();
+                const isOdd = row.depth % 2 !== 0;
+                const cells = row.getVisibleCells();
+                return /* @__PURE__ */ jsx11(
+                  Table.Row,
+                  {
+                    "data-selected": row.getIsSelected(),
+                    className: clx8(
+                      "transition-fg group/row group relative [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      "has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover",
+                      {
+                        "bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
+                        "cursor-pointer": !!to,
+                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover": row.getIsSelected(),
+                        "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled": isRowDisabled
+                      }
+                    ),
+                    children: cells.map((cell, index) => {
+                      const visibleCells = row.getVisibleCells();
+                      const isSelectCell = cell.column.id === "select";
+                      const firstCell = visibleCells.findIndex(
+                        (h) => h.column.id !== "select"
+                      );
+                      const isFirstCell = firstCell !== -1 ? cell.column.id === visibleCells[firstCell].column.id : index === 0;
+                      const isStickyCell = isSelectCell || isFirstCell;
+                      const depthOffset = row.depth > 0 && isFirstCell ? row.depth * 14 + 24 : void 0;
+                      const hasLeftOffset = isStickyCell && hasSelect && !isSelectCell;
+                      const Inner = flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      );
+                      const isTabableLink = isFirstCell && !!to;
+                      const shouldRenderAsLink = !!to && !isSelectCell;
+                      return /* @__PURE__ */ jsx11(
+                        Table.Cell,
+                        {
+                          className: clx8({
+                            "!ps-0 !pe-0": shouldRenderAsLink,
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky start-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isStickyCell,
+                            "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover": isOdd && isStickyCell,
+                            "start-[68px]": hasLeftOffset,
+                            "after:bg-ui-border-base": showStickyBorder && isStickyCell && !isSelectCell,
+                            "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled": isRowDisabled
+                          }),
+                          style: {
+                            paddingLeft: depthOffset ? `${depthOffset}px` : void 0
+                          },
+                          children: shouldRenderAsLink ? /* @__PURE__ */ jsx11(
+                            Link2,
+                            {
+                              to,
+                              className: "size-full outline-none",
+                              "data-row-link": true,
+                              tabIndex: isTabableLink ? 0 : -1,
+                              children: /* @__PURE__ */ jsx11(
+                                "div",
+                                {
+                                  className: clx8(
+                                    "flex size-full items-center pe-6",
+                                    {
+                                      "ps-6": isTabableLink && !hasLeftOffset
+                                    }
+                                  ),
+                                  children: Inner
+                                }
+                              )
+                            }
+                          ) : Inner
+                        },
+                        cell.id
+                      );
+                    })
+                  },
+                  row.id
+                );
+              }) })
+            ] }) : /* @__PURE__ */ jsx11("div", { className: clx8({ "border-b": layout === "fit" }), children: /* @__PURE__ */ jsx11(NoResults, {}) })
+          }
+        ),
+        pagination && /* @__PURE__ */ jsx11("div", { className: clx8({ "border-t": layout === "fill" }), children: /* @__PURE__ */ jsx11(
+          Pagination,
+          {
+            canNextPage: table.getCanNextPage(),
+            canPreviousPage: table.getCanPreviousPage(),
+            nextPage: table.nextPage,
+            previousPage: table.previousPage,
+            count,
+            pageIndex,
+            pageCount: table.getPageCount(),
+            pageSize
+          }
+        ) }),
+        hasCommandBar && /* @__PURE__ */ jsx11(CommandBar, { open: !!Object.keys(rowSelection).length, children: /* @__PURE__ */ jsxs10(CommandBar.Bar, { children: [
+          /* @__PURE__ */ jsx11(CommandBar.Value, { children: t2("general.countSelected", {
+            count: Object.keys(rowSelection).length
+          }) }),
+          /* @__PURE__ */ jsx11(CommandBar.Seperator, {}),
+          commands?.map((command, index) => {
+            return /* @__PURE__ */ jsxs10(Fragment, { children: [
+              /* @__PURE__ */ jsx11(
+                CommandBar.Command,
+                {
+                  label: command.label,
+                  shortcut: command.shortcut,
+                  action: () => handleAction(command.action)
+                }
+              ),
+              index < commands.length - 1 && /* @__PURE__ */ jsx11(CommandBar.Seperator, {})
+            ] }, index);
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+var Pagination = (props) => {
+  const { t: t2 } = useTranslation9();
+  const translations = {
+    of: t2("general.of"),
+    results: t2("general.results"),
+    pages: t2("general.pages"),
+    prev: t2("general.prev"),
+    next: t2("general.next")
+  };
+  return /* @__PURE__ */ jsx11(
+    Table.Pagination,
+    {
+      className: "flex-shrink-0",
+      ...props,
+      translations
+    }
+  );
+};
+
+// src/components/table/data-table/data-table.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var MemoizedDataTableQuery = memo(DataTableQuery);
+var _DataTable = ({
+  table,
+  columns,
+  pagination,
+  navigateTo,
+  commands,
+  count = 0,
+  search = false,
+  orderBy,
+  filters,
+  prefix,
+  queryObject = {},
+  pageSize,
+  isLoading = false,
+  noHeader = false,
+  layout = "fit",
+  noRecords: noRecordsProps = {}
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx12(
+      TableSkeleton,
+      {
+        layout,
+        rowCount: pageSize,
+        search: !!search,
+        filters: !!filters?.length,
+        orderBy: !!orderBy?.length,
+        pagination: !!pagination
+      }
+    );
+  }
+  const noQuery = Object.values(queryObject).filter((v) => Boolean(v)).length === 0;
+  const noResults = !isLoading && count === 0 && !noQuery;
+  const noRecords = !isLoading && count === 0 && noQuery;
+  if (noRecords) {
+    return /* @__PURE__ */ jsx12(
+      NoRecords,
+      {
+        className: clx9({
+          "flex h-full flex-col overflow-hidden": layout === "fill"
+        }),
+        ...noRecordsProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: clx9("divide-y", {
+        "flex h-full flex-col overflow-hidden": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsx12(
+          MemoizedDataTableQuery,
+          {
+            search,
+            orderBy,
+            filters,
+            prefix
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          DataTableRoot,
+          {
+            table,
+            count,
+            columns,
+            pagination: true,
+            navigateTo,
+            commands,
+            noResults,
+            noHeader,
+            layout
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/use-data-table.tsx
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect as useEffect6, useMemo as useMemo3, useState as useState8 } from "react";
+import { useSearchParams as useSearchParams4 } from "react-router-dom";
+var useDataTable = ({
+  data = [],
+  columns,
+  count = 0,
+  pageSize: _pageSize = 20,
+  enablePagination = true,
+  enableRowSelection = false,
+  enableExpandableRows = false,
+  rowSelection: _rowSelection,
+  getSubRows,
+  getRowId,
+  meta,
+  prefix
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams4();
+  const offsetKey = `${prefix ? `${prefix}_` : ""}offset`;
+  const offset = searchParams.get(offsetKey);
+  const [{ pageIndex, pageSize }, setPagination] = useState8({
+    pageIndex: offset ? Math.ceil(Number(offset) / _pageSize) : 0,
+    pageSize: _pageSize
+  });
+  const pagination = useMemo3(
+    () => ({
+      pageIndex,
+      pageSize
+    }),
+    [pageIndex, pageSize]
+  );
+  const [localRowSelection, setLocalRowSelection] = useState8({});
+  const rowSelection = _rowSelection?.state ?? localRowSelection;
+  const setRowSelection = _rowSelection?.updater ?? setLocalRowSelection;
+  useEffect6(() => {
+    if (!enablePagination) {
+      return;
+    }
+    const index = offset ? Math.ceil(Number(offset) / _pageSize) : 0;
+    if (index === pageIndex) {
+      return;
+    }
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: index
+    }));
+  }, [offset, enablePagination, _pageSize, pageIndex]);
+  const onPaginationChange = (updater) => {
+    const state = updater(pagination);
+    const { pageIndex: pageIndex2, pageSize: pageSize2 } = state;
+    setSearchParams((prev) => {
+      if (!pageIndex2) {
+        prev.delete(offsetKey);
+        return prev;
+      }
+      const newSearch = new URLSearchParams(prev);
+      newSearch.set(offsetKey, String(pageIndex2 * pageSize2));
+      return newSearch;
+    });
+    setPagination(state);
+    return state;
+  };
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      rowSelection,
+      // We always pass a selection state to the table even if it's not enabled
+      pagination: enablePagination ? pagination : void 0
+    },
+    pageCount: Math.ceil((count ?? 0) / pageSize),
+    enableRowSelection,
+    getRowId,
+    getSubRows,
+    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onPaginationChange: enablePagination ? onPaginationChange : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : void 0,
+    getExpandedRowModel: enableExpandableRows ? getExpandedRowModel() : void 0,
+    manualPagination: enablePagination ? true : void 0,
+    meta
+  });
+  return { table };
+};
+
+export {
+  _DataTable,
+  useDataTable
+};