@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.5

package/dist/components/remote-data-table/remote-data-table-query-builder.mjs

@@ -0,0 +1,265 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as R, useMemo as S } from "react";
+import { Button as q } from "../ui/button.mjs";
+import { Input as T } from "../ui/input.mjs";
+import { Popover as I, PopoverTrigger as M, PopoverContent as Q } from "../ui/popover.mjs";
+import { cn as h } from "../../lib/utils.mjs";
+import { formatFiltersSummary as j, getOpsForField as $, coerceFilterValue as O, createFilterId as z, querySpecOpLabels as A, getFieldByName as B } from "./query-spec-utils.mjs";
+import L from "../../node_modules/lucide-react/dist/esm/icons/funnel.mjs";
+import D from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.mjs";
+import V from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.mjs";
+import U from "../../node_modules/lucide-react/dist/esm/icons/plus.mjs";
+import X from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+import E from "../../node_modules/lucide-react/dist/esm/icons/trash-2.mjs";
+const v = "h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground", G = ({
+  filter: l,
+  fields: g,
+  fieldMap: x,
+  onFieldChange: s,
+  onOpChange: o,
+  onValueChange: i,
+  onRemove: N
+}) => {
+  const r = x.get(l.field), f = $(r), u = l.op === "in" ? "Values" : "Value", y = r?.type === "number" ? "number" : r?.type === "date" ? "date" : r?.type === "datetime" ? "datetime-local" : "text", F = r?.type === "date" || r?.type === "datetime", C = r?.placeholder ?? (l.op === "in" ? "Comma-separated values" : void 0), b = r?.options ?? [], w = b.length > 0 && (l.op === "eq" || l.op === "neq");
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [
+    /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: `field-${l.id}`, children: "Field" }),
+    /* @__PURE__ */ e(
+      "select",
+      {
+        id: `field-${l.id}`,
+        "aria-label": "Field",
+        className: h(v, "sm:w-44"),
+        value: l.field,
+        onChange: (a) => s(l.id, a.target.value),
+        children: g.map((a) => /* @__PURE__ */ e("option", { value: a.name, children: a.label }, a.name))
+      }
+    ),
+    /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: `op-${l.id}`, children: "Operator" }),
+    /* @__PURE__ */ e(
+      "select",
+      {
+        id: `op-${l.id}`,
+        "aria-label": "Operator",
+        className: h(v, "sm:w-36"),
+        value: l.op,
+        onChange: (a) => o(l.id, a.target.value),
+        children: f.map((a) => /* @__PURE__ */ e("option", { value: a, children: A[a] ?? a }, a))
+      }
+    ),
+    l.op === "isnull" ? /* @__PURE__ */ d(
+      "select",
+      {
+        "aria-label": "Null state",
+        className: h(v, "sm:flex-1"),
+        value: l.value ?? "true",
+        onChange: (a) => i(l.id, a.target.value),
+        children: [
+          /* @__PURE__ */ e("option", { value: "true", children: "Is null" }),
+          /* @__PURE__ */ e("option", { value: "false", children: "Is not null" })
+        ]
+      }
+    ) : w ? /* @__PURE__ */ d(
+      "select",
+      {
+        "aria-label": u,
+        className: h(v, "sm:flex-1"),
+        value: l.value ?? "",
+        onChange: (a) => i(l.id, a.target.value),
+        children: [
+          /* @__PURE__ */ e("option", { value: "", children: "Select value" }),
+          b.map((a) => /* @__PURE__ */ e("option", { value: a.value, children: a.label }, a.value))
+        ]
+      }
+    ) : r?.type === "boolean" ? /* @__PURE__ */ d(
+      "select",
+      {
+        "aria-label": u,
+        className: h(v, "sm:flex-1"),
+        value: l.value ?? "true",
+        onChange: (a) => i(l.id, a.target.value),
+        children: [
+          /* @__PURE__ */ e("option", { value: "true", children: "True" }),
+          /* @__PURE__ */ e("option", { value: "false", children: "False" })
+        ]
+      }
+    ) : /* @__PURE__ */ d("div", { className: "flex flex-1 flex-col", children: [
+      F ? /* @__PURE__ */ e(
+        "label",
+        {
+          className: "mb-1 text-xs text-muted-foreground",
+          htmlFor: `value-${l.id}`,
+          children: u
+        }
+      ) : null,
+      /* @__PURE__ */ e(
+        T,
+        {
+          id: `value-${l.id}`,
+          type: y,
+          "aria-label": u,
+          value: l.value ?? "",
+          onChange: (a) => i(l.id, a.target.value),
+          placeholder: C
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      q,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        "aria-label": "Remove filter",
+        onClick: () => N(l.id),
+        children: /* @__PURE__ */ e(E, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}, re = ({
+  queryBuilder: l
+}) => {
+  const [g, x] = R(!1), {
+    fields: s,
+    filters: o,
+    onFiltersChange: i,
+    placeholder: N,
+    summaryFormatter: r
+  } = l, f = S(
+    () => new Map(s.map((t) => [t.name, t])),
+    [s]
+  ), u = S(() => o.length ? r ? r(o, s) : j(o, s) : "", [o, s, r]), y = () => {
+    x(!1);
+  }, F = () => {
+    if (s.length === 0)
+      return;
+    const t = s[0], n = $(t)[0] ?? "eq", p = O(t, n);
+    i([
+      ...o,
+      { id: z(), field: t.name, op: n, value: p }
+    ]);
+  }, C = (t) => {
+    i(o.filter((c) => c.id !== t));
+  }, b = (t, c) => {
+    const n = B(s, c);
+    if (!n)
+      return;
+    const p = $(n);
+    i(
+      o.map((m) => {
+        if (m.id !== t)
+          return m;
+        const k = p.includes(m.op) ? m.op : p[0] ?? "eq", P = O(n, k, m.value);
+        return {
+          ...m,
+          field: n.name,
+          op: k,
+          value: P
+        };
+      })
+    );
+  }, w = (t, c) => {
+    i(
+      o.map((n) => {
+        if (n.id !== t)
+          return n;
+        const p = f.get(n.field), m = O(p, c, n.value);
+        return {
+          ...n,
+          op: c,
+          value: m
+        };
+      })
+    );
+  }, a = (t, c) => {
+    i(
+      o.map(
+        (n) => n.id === t ? {
+          ...n,
+          value: c
+        } : n
+      )
+    );
+  };
+  return /* @__PURE__ */ d(I, { open: g, onOpenChange: x, children: [
+    /* @__PURE__ */ e("div", { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ e(
+      M,
+      {
+        render: (t) => /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            ...t,
+            "aria-label": "Filter query",
+            className: h(
+              "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground",
+              "hover:bg-muted/40",
+              typeof t.className == "string" ? t.className : void 0
+            ),
+            children: [
+              /* @__PURE__ */ e(L, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ e("span", { className: "flex-1 truncate text-muted-foreground", children: u || N || "Add filters" }),
+              g ? /* @__PURE__ */ e(D, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ e(V, { className: "h-4 w-4 text-muted-foreground" })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      Q,
+      {
+        className: "w-[min(560px,calc(100vw-2rem))] p-4",
+        align: "start",
+        children: /* @__PURE__ */ d("div", { className: "flex max-h-[60vh] flex-col gap-4 overflow-y-auto", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ d("div", { children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold", children: "Filters" }),
+              /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: o.length ? `${o.length} filter${o.length === 1 ? "" : "s"} applied` : "No filters yet" })
+            ] }),
+            /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ d(
+                q,
+                {
+                  size: "sm",
+                  variant: "outline",
+                  onClick: F,
+                  disabled: s.length === 0,
+                  children: [
+                    /* @__PURE__ */ e(U, { className: "mr-1 h-4 w-4" }),
+                    "Add filter"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                q,
+                {
+                  size: "icon",
+                  variant: "ghost",
+                  "aria-label": "Close filters",
+                  onClick: y,
+                  children: /* @__PURE__ */ e(X, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          o.length === 0 ? /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "No filters yet." }) : /* @__PURE__ */ e("div", { className: "flex flex-col gap-3", children: o.map((t) => /* @__PURE__ */ e(
+            G,
+            {
+              filter: t,
+              fields: s,
+              fieldMap: f,
+              onFieldChange: b,
+              onOpChange: w,
+              onValueChange: a,
+              onRemove: C
+            },
+            t.id
+          )) })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  re as RemoteDataTableQueryBuilder
+};
+//# sourceMappingURL=remote-data-table-query-builder.mjs.map

package/dist/components/remote-data-table/remote-data-table-query-builder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remote-data-table-query-builder.mjs","sources":["../../../src/components/remote-data-table/remote-data-table-query-builder.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp, Filter, Plus, Trash2, X } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  coerceFilterValue,\n  createFilterId,\n  formatFiltersSummary,\n  getFieldByName,\n  getOpsForField,\n  querySpecOpLabels,\n} from \"./query-spec-utils\";\nimport type {\n  QuerySpecField,\n  QuerySpecFilter,\n  QuerySpecOp,\n  RemoteDataTableQueryBuilderProps as RemoteDataTableQueryBuilderConfig,\n} from \"./remote-data-table.types\";\n\n/**\n * Props for the RemoteDataTableQueryBuilder component\n */\ntype RemoteDataTableQueryBuilderProps = {\n  /** Query builder configuration */\n  queryBuilder: RemoteDataTableQueryBuilderConfig;\n};\n\ntype QueryFilterRowProps = {\n  filter: QuerySpecFilter;\n  fields: QuerySpecField[];\n  fieldMap: Map<string, QuerySpecField>;\n  onFieldChange: (filterId: string, nextFieldName: string) => void;\n  onOpChange: (filterId: string, nextOp: QuerySpecOp) => void;\n  onValueChange: (filterId: string, nextValue: string) => void;\n  onRemove: (filterId: string) => void;\n};\n\nconst selectClassName =\n  \"h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground\";\n\nconst QueryFilterRow = ({\n  filter,\n  fields,\n  fieldMap,\n  onFieldChange,\n  onOpChange,\n  onValueChange,\n  onRemove,\n}: QueryFilterRowProps) => {\n  const field = fieldMap.get(filter.field);\n  const ops = getOpsForField(field);\n  const valueLabel = filter.op === \"in\" ? \"Values\" : \"Value\";\n  const inputType =\n    field?.type === \"number\"\n      ? \"number\"\n      : field?.type === \"date\"\n        ? \"date\"\n        : field?.type === \"datetime\"\n          ? \"datetime-local\"\n          : \"text\";\n  const shouldShrinkLabel =\n    field?.type === \"date\" || field?.type === \"datetime\";\n  const valuePlaceholder =\n    field?.placeholder ??\n    (filter.op === \"in\" ? \"Comma-separated values\" : undefined);\n  const fieldOptions = field?.options ?? [];\n  const useOptions =\n    fieldOptions.length > 0 && (filter.op === \"eq\" || filter.op === \"neq\");\n\n  return (\n    <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n      <label className=\"sr-only\" htmlFor={`field-${filter.id}`}>\n        Field\n      </label>\n      <select\n        id={`field-${filter.id}`}\n        aria-label=\"Field\"\n        className={cn(selectClassName, \"sm:w-44\")}\n        value={filter.field}\n        onChange={(event) => onFieldChange(filter.id, event.target.value)}\n      >\n        {fields.map((queryField) => (\n          <option key={queryField.name} value={queryField.name}>\n            {queryField.label}\n          </option>\n        ))}\n      </select>\n\n      <label className=\"sr-only\" htmlFor={`op-${filter.id}`}>\n        Operator\n      </label>\n      <select\n        id={`op-${filter.id}`}\n        aria-label=\"Operator\"\n        className={cn(selectClassName, \"sm:w-36\")}\n        value={filter.op}\n        onChange={(event) =>\n          onOpChange(filter.id, event.target.value as QuerySpecOp)\n        }\n      >\n        {ops.map((op) => (\n          <option key={op} value={op}>\n            {querySpecOpLabels[op] ?? op}\n          </option>\n        ))}\n      </select>\n\n      {filter.op === \"isnull\" ? (\n        <select\n          aria-label=\"Null state\"\n          className={cn(selectClassName, \"sm:flex-1\")}\n          value={filter.value ?? \"true\"}\n          onChange={(event) => onValueChange(filter.id, event.target.value)}\n        >\n          <option value=\"true\">Is null</option>\n          <option value=\"false\">Is not null</option>\n        </select>\n      ) : useOptions ? (\n        <select\n          aria-label={valueLabel}\n          className={cn(selectClassName, \"sm:flex-1\")}\n          value={filter.value ?? \"\"}\n          onChange={(event) => onValueChange(filter.id, event.target.value)}\n        >\n          <option value=\"\">Select value</option>\n          {fieldOptions.map((option) => (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n      ) : field?.type === \"boolean\" ? (\n        <select\n          aria-label={valueLabel}\n          className={cn(selectClassName, \"sm:flex-1\")}\n          value={filter.value ?? \"true\"}\n          onChange={(event) => onValueChange(filter.id, event.target.value)}\n        >\n          <option value=\"true\">True</option>\n          <option value=\"false\">False</option>\n        </select>\n      ) : (\n        <div className=\"flex flex-1 flex-col\">\n          {shouldShrinkLabel ? (\n            <label\n              className=\"mb-1 text-xs text-muted-foreground\"\n              htmlFor={`value-${filter.id}`}\n            >\n              {valueLabel}\n            </label>\n          ) : null}\n          <Input\n            id={`value-${filter.id}`}\n            type={inputType}\n            aria-label={valueLabel}\n            value={filter.value ?? \"\"}\n            onChange={(event) => onValueChange(filter.id, event.target.value)}\n            placeholder={valuePlaceholder}\n          />\n        </div>\n      )}\n\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        aria-label=\"Remove filter\"\n        onClick={() => onRemove(filter.id)}\n      >\n        <Trash2 className=\"h-4 w-4\" />\n      </Button>\n    </div>\n  );\n};\n\n/**\n * Filter builder for RemoteDataTable query definitions.\n */\nexport const RemoteDataTableQueryBuilder = ({\n  queryBuilder,\n}: RemoteDataTableQueryBuilderProps) => {\n  const [queryOpen, setQueryOpen] = useState(false);\n  const {\n    fields: queryFields,\n    filters: queryFilters,\n    onFiltersChange,\n    placeholder,\n    summaryFormatter,\n  } = queryBuilder;\n  const queryFieldMap = useMemo(\n    () => new Map(queryFields.map((field) => [field.name, field])),\n    [queryFields],\n  );\n\n  const querySummary = useMemo(() => {\n    if (!queryFilters.length) {\n      return \"\";\n    }\n\n    if (summaryFormatter) {\n      return summaryFormatter(queryFilters, queryFields);\n    }\n\n    return formatFiltersSummary(queryFilters, queryFields);\n  }, [queryFilters, queryFields, summaryFormatter]);\n\n  const handleQueryClose = () => {\n    setQueryOpen(false);\n  };\n\n  const handleAddFilter = () => {\n    if (queryFields.length === 0) {\n      return;\n    }\n\n    const field = queryFields[0];\n    const ops = getOpsForField(field);\n    const op = ops[0] ?? \"eq\";\n    const value = coerceFilterValue(field, op);\n\n    onFiltersChange([\n      ...queryFilters,\n      { id: createFilterId(), field: field.name, op, value },\n    ]);\n  };\n\n  const handleRemoveFilter = (filterId: string) => {\n    onFiltersChange(queryFilters.filter((filter) => filter.id !== filterId));\n  };\n\n  const handleFieldChange = (filterId: string, nextFieldName: string) => {\n    const nextField = getFieldByName(queryFields, nextFieldName);\n    if (!nextField) {\n      return;\n    }\n\n    const allowedOps = getOpsForField(nextField);\n\n    onFiltersChange(\n      queryFilters.map((filter) => {\n        if (filter.id !== filterId) {\n          return filter;\n        }\n\n        const op = allowedOps.includes(filter.op)\n          ? filter.op\n          : (allowedOps[0] ?? \"eq\");\n        const value = coerceFilterValue(nextField, op, filter.value);\n\n        return {\n          ...filter,\n          field: nextField.name,\n          op,\n          value,\n        };\n      }),\n    );\n  };\n\n  const handleOpChange = (filterId: string, nextOp: QuerySpecOp) => {\n    onFiltersChange(\n      queryFilters.map((filter) => {\n        if (filter.id !== filterId) {\n          return filter;\n        }\n\n        const field = queryFieldMap.get(filter.field);\n        const value = coerceFilterValue(field, nextOp, filter.value);\n\n        return {\n          ...filter,\n          op: nextOp,\n          value,\n        };\n      }),\n    );\n  };\n\n  const handleValueChange = (filterId: string, nextValue: string) => {\n    onFiltersChange(\n      queryFilters.map((filter) =>\n        filter.id === filterId\n          ? {\n              ...filter,\n              value: nextValue,\n            }\n          : filter,\n      ),\n    );\n  };\n\n  return (\n    <Popover open={queryOpen} onOpenChange={setQueryOpen}>\n      <div className=\"border-b border-border px-4 py-3\">\n        <PopoverTrigger\n          render={(props) => (\n            <button\n              type=\"button\"\n              {...props}\n              aria-label=\"Filter query\"\n              className={cn(\n                \"flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground\",\n                \"hover:bg-muted/40\",\n                typeof props.className === \"string\"\n                  ? props.className\n                  : undefined,\n              )}\n            >\n              <Filter className=\"h-4 w-4 text-muted-foreground\" />\n              <span className=\"flex-1 truncate text-muted-foreground\">\n                {querySummary || placeholder || \"Add filters\"}\n              </span>\n              {queryOpen ? (\n                <ChevronUp className=\"h-4 w-4 text-muted-foreground\" />\n              ) : (\n                <ChevronDown className=\"h-4 w-4 text-muted-foreground\" />\n              )}\n            </button>\n          )}\n        />\n      </div>\n      <PopoverContent\n        className=\"w-[min(560px,calc(100vw-2rem))] p-4\"\n        align=\"start\"\n      >\n        <div className=\"flex max-h-[60vh] flex-col gap-4 overflow-y-auto\">\n          <div className=\"flex items-center justify-between gap-3\">\n            <div>\n              <p className=\"text-sm font-semibold\">Filters</p>\n              <p className=\"text-xs text-muted-foreground\">\n                {queryFilters.length\n                  ? `${queryFilters.length} filter${queryFilters.length === 1 ? \"\" : \"s\"} applied`\n                  : \"No filters yet\"}\n              </p>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Button\n                size=\"sm\"\n                variant=\"outline\"\n                onClick={handleAddFilter}\n                disabled={queryFields.length === 0}\n              >\n                <Plus className=\"mr-1 h-4 w-4\" />\n                Add filter\n              </Button>\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                aria-label=\"Close filters\"\n                onClick={handleQueryClose}\n              >\n                <X className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          </div>\n\n          {queryFilters.length === 0 ? (\n            <p className=\"text-sm text-muted-foreground\">No filters yet.</p>\n          ) : (\n            <div className=\"flex flex-col gap-3\">\n              {queryFilters.map((filter) => (\n                <QueryFilterRow\n                  key={filter.id}\n                  filter={filter}\n                  fields={queryFields}\n                  fieldMap={queryFieldMap}\n                  onFieldChange={handleFieldChange}\n                  onOpChange={handleOpChange}\n                  onValueChange={handleValueChange}\n                  onRemove={handleRemoveFilter}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"names":["selectClassName","QueryFilterRow","filter","fields","fieldMap","onFieldChange","onOpChange","onValueChange","onRemove","field","ops","getOpsForField","valueLabel","inputType","shouldShrinkLabel","valuePlaceholder","fieldOptions","useOptions","jsxs","jsx","cn","event","queryField","op","querySpecOpLabels","option","Input","Button","Trash2","RemoteDataTableQueryBuilder","queryBuilder","queryOpen","setQueryOpen","useState","queryFields","queryFilters","onFiltersChange","placeholder","summaryFormatter","queryFieldMap","useMemo","querySummary","formatFiltersSummary","handleQueryClose","handleAddFilter","value","coerceFilterValue","createFilterId","handleRemoveFilter","filterId","handleFieldChange","nextFieldName","nextField","getFieldByName","allowedOps","handleOpChange","nextOp","handleValueChange","nextValue","Popover","PopoverTrigger","props","Filter","ChevronUp","ChevronDown","PopoverContent","Plus"],"mappings":"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"}

package/dist/components/remote-data-table/remote-data-table.d.ts

@@ -0,0 +1,68 @@
+import { OnChangeFn, PaginationState, RemoteDataTableColumn, RemoteDataTableQueryBuilderProps, SortingState } from './remote-data-table.types';
+export { buildQuerySpecParams } from './query-spec-utils';
+export type { OnChangeFn, PaginationState, QuerySpecField, QuerySpecFieldOption, QuerySpecFieldType, QuerySpecFilter, QuerySpecOp, RemoteDataTableColumn, RemoteDataTableColumnMeta, RemoteDataTableQueryBuilderProps, SortingState, } from './remote-data-table.types';
+/**
+ * Props for the RemoteDataTable component
+ */
+export type RemoteDataTableProps<TData> = {
+    /** Array of data items to display in the table */
+    data: TData[];
+    /** Column definitions for the table */
+    columns: RemoteDataTableColumn<TData>[];
+    /** Optional function to generate unique row IDs. If not provided, uses array index */
+    getRowId?: (row: TData, index: number) => string;
+    /** Current pagination state (pageIndex and pageSize) */
+    pagination: PaginationState;
+    /** Callback fired when pagination changes */
+    onPaginationChange: OnChangeFn<PaginationState>;
+    /** Current sorting state */
+    sorting?: SortingState;
+    /** Callback fired when sorting changes */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Total number of rows available (for server-side pagination). If not provided, uses data.length */
+    rowCount?: number;
+    /** Whether data is currently loading */
+    loading?: boolean;
+    /** Message to display when there is no data
+     * @default "No data available"
+     */
+    emptyMessage?: string;
+    /** Available page size options for the pagination dropdown
+     * @default [10, 25, 50]
+     */
+    pageSizeOptions?: number[];
+    /** Callback fired when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Configuration for the query builder (filters) */
+    query?: RemoteDataTableQueryBuilderProps;
+    /** Optional wrapper classes */
+    className?: string;
+};
+/**
+ * A table component designed for displaying remote/server-side data with built-in
+ * pagination, sorting, and filtering capabilities.
+ *
+ * This component is fully controlled - all state (pagination, sorting, filters) must be
+ * managed by the parent component. For convenience, use the `useRemoteDataTable` hook
+ * to manage this state.
+ *
+ * @example
+ * ```tsx
+ * const tableState = useRemoteDataTable({
+ *   initialPagination: { pageSize: 25 }
+ * });
+ *
+ * <RemoteDataTable
+ *   data={items}
+ *   columns={columns}
+ *   {...tableState}
+ *   query={{
+ *     fields: queryFields,
+ *     filters: tableState.filters,
+ *     onFiltersChange: tableState.onFiltersChange
+ *   }}
+ * />
+ * ```
+ */
+export declare function RemoteDataTable<TData>({ data, columns, getRowId, pagination, onPaginationChange, sorting, onSortingChange, rowCount, loading, emptyMessage, pageSizeOptions, onRowClick, query, className, }: RemoteDataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default RemoteDataTable;

package/dist/components/remote-data-table/remote-data-table.mjs

@@ -0,0 +1,67 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useMemo as R } from "react";
+import { cn as h } from "../../lib/utils.mjs";
+import { RemoteDataTableBody as w } from "./remote-data-table-body.mjs";
+import { RemoteDataTablePagination as D } from "./remote-data-table-pagination.mjs";
+import { RemoteDataTableQueryBuilder as T } from "./remote-data-table-query-builder.mjs";
+const l = [10, 25, 50];
+function z({
+  data: r,
+  columns: a,
+  getRowId: m,
+  pagination: n,
+  onPaginationChange: d,
+  sorting: i,
+  onSortingChange: f,
+  rowCount: s,
+  loading: u = !1,
+  emptyMessage: b = "No data available",
+  pageSizeOptions: e = l,
+  onRowClick: c,
+  query: t,
+  className: p
+}) {
+  const g = R(
+    () => e.length ? e : l,
+    [e]
+  ), v = s ?? r.length;
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: h(
+        "flex w-full flex-col overflow-hidden rounded-lg border border-border bg-card",
+        p
+      ),
+      children: [
+        t ? /* @__PURE__ */ o(T, { queryBuilder: t }) : null,
+        /* @__PURE__ */ o(
+          w,
+          {
+            data: r,
+            columns: a,
+            loading: u,
+            emptyMessage: b,
+            sorting: i,
+            onSortingChange: f,
+            onRowClick: c,
+            getRowId: m
+          }
+        ),
+        /* @__PURE__ */ o(
+          D,
+          {
+            pagination: n,
+            onPaginationChange: d,
+            rowCount: v,
+            pageSizeOptions: g
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as RemoteDataTable,
+  z as default
+};
+//# sourceMappingURL=remote-data-table.mjs.map

package/dist/components/remote-data-table/remote-data-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"remote-data-table.mjs","sources":["../../../src/components/remote-data-table/remote-data-table.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport type {\n  OnChangeFn,\n  PaginationState,\n  RemoteDataTableColumn,\n  RemoteDataTableQueryBuilderProps,\n  SortingState,\n} from \"./remote-data-table.types\";\nimport { RemoteDataTableBody } from \"./remote-data-table-body\";\nimport { RemoteDataTablePagination } from \"./remote-data-table-pagination\";\nimport { RemoteDataTableQueryBuilder } from \"./remote-data-table-query-builder\";\n\nexport { buildQuerySpecParams } from \"./query-spec-utils\";\nexport type {\n  OnChangeFn,\n  PaginationState,\n  QuerySpecField,\n  QuerySpecFieldOption,\n  QuerySpecFieldType,\n  QuerySpecFilter,\n  QuerySpecOp,\n  RemoteDataTableColumn,\n  RemoteDataTableColumnMeta,\n  RemoteDataTableQueryBuilderProps,\n  SortingState,\n} from \"./remote-data-table.types\";\n\n/**\n * Props for the RemoteDataTable component\n */\nexport type RemoteDataTableProps<TData> = {\n  /** Array of data items to display in the table */\n  data: TData[];\n  /** Column definitions for the table */\n  columns: RemoteDataTableColumn<TData>[];\n  /** Optional function to generate unique row IDs. If not provided, uses array index */\n  getRowId?: (row: TData, index: number) => string;\n  /** Current pagination state (pageIndex and pageSize) */\n  pagination: PaginationState;\n  /** Callback fired when pagination changes */\n  onPaginationChange: OnChangeFn<PaginationState>;\n  /** Current sorting state */\n  sorting?: SortingState;\n  /** Callback fired when sorting changes */\n  onSortingChange?: OnChangeFn<SortingState>;\n  /** Total number of rows available (for server-side pagination). If not provided, uses data.length */\n  rowCount?: number;\n  /** Whether data is currently loading */\n  loading?: boolean;\n  /** Message to display when there is no data\n   * @default \"No data available\"\n   */\n  emptyMessage?: string;\n  /** Available page size options for the pagination dropdown\n   * @default [10, 25, 50]\n   */\n  pageSizeOptions?: number[];\n  /** Callback fired when a row is clicked */\n  onRowClick?: (row: TData) => void;\n  /** Configuration for the query builder (filters) */\n  query?: RemoteDataTableQueryBuilderProps;\n  /** Optional wrapper classes */\n  className?: string;\n};\n\nconst defaultPageSizeOptions = [10, 25, 50];\n\n/**\n * A table component designed for displaying remote/server-side data with built-in\n * pagination, sorting, and filtering capabilities.\n *\n * This component is fully controlled - all state (pagination, sorting, filters) must be\n * managed by the parent component. For convenience, use the `useRemoteDataTable` hook\n * to manage this state.\n *\n * @example\n * ```tsx\n * const tableState = useRemoteDataTable({\n *   initialPagination: { pageSize: 25 }\n * });\n *\n * <RemoteDataTable\n *   data={items}\n *   columns={columns}\n *   {...tableState}\n *   query={{\n *     fields: queryFields,\n *     filters: tableState.filters,\n *     onFiltersChange: tableState.onFiltersChange\n *   }}\n * />\n * ```\n */\nexport function RemoteDataTable<TData>({\n  data,\n  columns,\n  getRowId,\n  pagination,\n  onPaginationChange,\n  sorting,\n  onSortingChange,\n  rowCount,\n  loading = false,\n  emptyMessage = \"No data available\",\n  pageSizeOptions = defaultPageSizeOptions,\n  onRowClick,\n  query,\n  className,\n}: RemoteDataTableProps<TData>) {\n  const resolvedPageSizeOptions = useMemo(\n    () => (pageSizeOptions.length ? pageSizeOptions : defaultPageSizeOptions),\n    [pageSizeOptions],\n  );\n\n  const resolvedRowCount = rowCount ?? data.length;\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-lg border border-border bg-card\",\n        className,\n      )}\n    >\n      {query ? <RemoteDataTableQueryBuilder queryBuilder={query} /> : null}\n      <RemoteDataTableBody\n        data={data}\n        columns={columns}\n        loading={loading}\n        emptyMessage={emptyMessage}\n        sorting={sorting}\n        onSortingChange={onSortingChange}\n        onRowClick={onRowClick}\n        getRowId={getRowId}\n      />\n      <RemoteDataTablePagination\n        pagination={pagination}\n        onPaginationChange={onPaginationChange}\n        rowCount={resolvedRowCount}\n        pageSizeOptions={resolvedPageSizeOptions}\n      />\n    </div>\n  );\n}\n\nexport default RemoteDataTable;\n"],"names":["defaultPageSizeOptions","RemoteDataTable","data","columns","getRowId","pagination","onPaginationChange","sorting","onSortingChange","rowCount","loading","emptyMessage","pageSizeOptions","onRowClick","query","className","resolvedPageSizeOptions","useMemo","resolvedRowCount","jsxs","cn","jsx","RemoteDataTableQueryBuilder","RemoteDataTableBody","RemoteDataTablePagination"],"mappings":";;;;;;AAkEA,MAAMA,IAAyB,CAAC,IAAI,IAAI,EAAE;AA4BnC,SAASC,EAAuB;AAAA,EACrC,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,iBAAAC,IAAkBZ;AAAA,EAClB,YAAAa;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAAgC;AAC9B,QAAMC,IAA0BC;AAAA,IAC9B,MAAOL,EAAgB,SAASA,IAAkBZ;AAAA,IAClD,CAACY,CAAe;AAAA,EAAA,GAGZM,IAAmBT,KAAYP,EAAK;AAE1C,SACE,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAD,IAAQ,gBAAAO,EAACC,GAAA,EAA4B,cAAcR,EAAA,CAAO,IAAK;AAAA,QAChE,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAArB;AAAA,YACA,SAAAC;AAAA,YACA,SAAAO;AAAA,YACA,cAAAC;AAAA,YACA,SAAAJ;AAAA,YACA,iBAAAC;AAAA,YACA,YAAAK;AAAA,YACA,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAiB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,YAAAnB;AAAA,YACA,oBAAAC;AAAA,YACA,UAAUY;AAAA,YACV,iBAAiBF;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/remote-data-table/remote-data-table.mocks.d.ts

@@ -0,0 +1,30 @@
+import { QuerySpecField, RemoteDataTableColumn } from './remote-data-table';
+/**
+ * Mock item type for testing and stories
+ */
+export type MockItem = {
+    id: string;
+    name: string;
+    status: "Active" | "Inactive" | "Archived";
+    createdAt: string;
+};
+/**
+ * Basic columns for testing (no custom cell rendering)
+ */
+export declare const mockColumnsBasic: RemoteDataTableColumn<MockItem>[];
+/**
+ * Full-featured columns for stories (with sorting, custom cells, and widths)
+ */
+export declare const mockColumnsFull: RemoteDataTableColumn<MockItem>[];
+/**
+ * Query fields for filter builder
+ */
+export declare const mockQueryFields: QuerySpecField[];
+/**
+ * Generates mock items for testing
+ */
+export declare const buildMockItems: (count: number) => MockItem[];
+/**
+ * Default mock dataset (48 items)
+ */
+export declare const mockItems: MockItem[];