@klodd/kommers-ds 0.1.0

package/dist/cjs/utils/toast.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+const tslib_1 = require("tslib");
+const toast_1 = require("../components/toast");
+const React = tslib_1.__importStar(require("react"));
+const sonner_1 = require("sonner");
+const DEFAULT_TOAST_POSITION = "top-right";
+function create(variant, title, props = {}) {
+    const external = {
+        position: props.position,
+        duration: props.duration,
+        dismissible: props.dismissable,
+    };
+    if (props.id) {
+        external.id = props.id;
+    }
+    return sonner_1.toast.custom((t) => {
+        return (React.createElement(toast_1.Toast, { id: t, title: title, description: props.description, dismissable: props.dismissable, variant: variant, action: props.action, icon: props.icon }));
+    }, external);
+}
+function message(
+/**
+ * The title of the toast.
+ */
+title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("message", title, props);
+}
+function custom() {
+    return create("message", "Custom");
+}
+function info(
+/**
+ * The title of the toast.
+ */ title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("info", title, props);
+}
+function error(
+/**
+ * The title of the toast.
+ */ title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("error", title, props);
+}
+function success(
+/**
+ * The title of the toast.
+ */ title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("success", title, props);
+}
+function warning(
+/**
+ * The title of the toast.
+ */ title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("warning", title, props);
+}
+function loading(
+/**
+ * The title of the toast.
+ */ title, 
+/**
+ * The props of the toast.
+ */
+props = {
+    position: DEFAULT_TOAST_POSITION,
+}) {
+    return create("loading", title, { ...props, dismissable: false });
+}
+function createUniqueID() {
+    return Math.random().toString(36).slice(2, 8);
+}
+async function promise(
+/**
+ * The promise to be resolved.
+ */
+promise, 
+/**
+ * The props of the toast.
+ */
+props) {
+    let id = props.id || createUniqueID();
+    let shouldDismiss = id !== undefined;
+    id = create("loading", typeof props.loading === "string" ? props.loading : props.loading.title, {
+        id: id,
+        position: props.position,
+        description: typeof props.loading === "string"
+            ? undefined
+            : props.loading.description,
+        duration: Infinity,
+        dismissable: false,
+    });
+    const p = promise instanceof Promise ? promise : promise();
+    p.then(() => {
+        shouldDismiss = false;
+        create("success", typeof props.success === "string" ? props.success : props.success.title, {
+            id: id,
+            position: props.position,
+            description: typeof props.success === "string"
+                ? undefined
+                : props.success.description,
+        });
+    })
+        .catch(() => {
+        shouldDismiss = false;
+        create("error", typeof props.error === "string" ? props.error : props.error.title, {
+            id: id,
+            position: props.position,
+            description: typeof props.error === "string"
+                ? undefined
+                : props.error.description,
+        });
+    })
+        .finally(() => {
+        if (shouldDismiss) {
+            sonner_1.toast.dismiss(id);
+            id = undefined;
+        }
+    });
+    return id;
+}
+exports.toast = Object.assign(message, {
+    info,
+    error,
+    warning,
+    success,
+    promise,
+    loading,
+    dismiss: sonner_1.toast.dismiss,
+});
+//# sourceMappingURL=toast.js.map

package/dist/cjs/utils/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/utils/toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Toast } from \"@/components/toast\"\nimport { ToastAction, ToastVariant, ToasterPosition } from \"@/types\"\nimport * as React from \"react\"\nimport { ExternalToast, toast as toastFn } from \"sonner\"\n\nconst DEFAULT_TOAST_POSITION = \"top-right\"\n\ninterface BaseToastProps {\n  id?: string | number\n  position?: ToasterPosition\n  duration?: number\n  dismissable?: boolean\n  icon?: React.ReactNode\n}\n\ninterface ToastProps extends BaseToastProps {\n  description?: React.ReactNode\n  action?: ToastAction\n}\n\nfunction create(\n  variant: ToastVariant,\n  title: React.ReactNode,\n  props: ToastProps = {}\n) {\n  const external: ExternalToast = {\n    position: props.position,\n    duration: props.duration,\n    dismissible: props.dismissable,\n  }\n\n  if (props.id) {\n    external.id = props.id\n  }\n\n  return toastFn.custom((t) => {\n    return (\n      <Toast\n        id={t}\n        title={title}\n        description={props.description}\n        dismissable={props.dismissable}\n        variant={variant}\n        action={props.action}\n        icon={props.icon}\n      />\n    )\n  }, external)\n}\n\nfunction message(\n  /**\n   * The title of the toast.\n   */\n  title: string,\n  /**\n   * The props of the toast.\n   */\n  props: ToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"message\", title, props)\n}\n\nfunction custom() {\n  return create(\"message\", \"Custom\")\n}\n\ninterface VariantToastProps extends Omit<ToastProps, \"icon\"> {}\n\nfunction info(\n  /**\n   * The title of the toast.\n   */ title: string,\n  /**\n   * The props of the toast.\n   */\n  props: VariantToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"info\", title, props)\n}\n\nfunction error(\n  /**\n   * The title of the toast.\n   */ title: string,\n  /**\n   * The props of the toast.\n   */\n  props: VariantToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"error\", title, props)\n}\n\nfunction success(\n  /**\n   * The title of the toast.\n   */ title: string,\n  /**\n   * The props of the toast.\n   */\n  props: VariantToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"success\", title, props)\n}\n\nfunction warning(\n  /**\n   * The title of the toast.\n   */ title: string,\n  /**\n   * The props of the toast.\n   */\n  props: VariantToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"warning\", title, props)\n}\n\nfunction loading(\n  /**\n   * The title of the toast.\n   */ title: string,\n  /**\n   * The props of the toast.\n   */\n  props: VariantToastProps = {\n    position: DEFAULT_TOAST_POSITION,\n  }\n) {\n  return create(\"loading\", title, { ...props, dismissable: false })\n}\n\ntype PromiseStateProps =\n  | string\n  | {\n      title: string\n      description?: string\n    }\n\ninterface PromiseToastProps extends Omit<BaseToastProps, \"icon\"> {\n  loading: PromiseStateProps\n  success: PromiseStateProps\n  error: PromiseStateProps\n}\n\nfunction createUniqueID() {\n  return Math.random().toString(36).slice(2, 8)\n}\n\nasync function promise<TData>(\n  /**\n   * The promise to be resolved.\n   */\n  promise: Promise<TData> | (() => Promise<TData>),\n  /**\n   * The props of the toast.\n   */\n  props: PromiseToastProps\n) {\n  let id: string | number | undefined = props.id || createUniqueID()\n  let shouldDismiss = id !== undefined\n\n  id = create(\n    \"loading\",\n    typeof props.loading === \"string\" ? props.loading : props.loading.title,\n    {\n      id: id,\n      position: props.position,\n      description:\n        typeof props.loading === \"string\"\n          ? undefined\n          : props.loading.description,\n      duration: Infinity,\n      dismissable: false,\n    }\n  )\n\n  const p = promise instanceof Promise ? promise : promise()\n\n  p.then(() => {\n    shouldDismiss = false\n    create(\n      \"success\",\n      typeof props.success === \"string\" ? props.success : props.success.title,\n      {\n        id: id,\n        position: props.position,\n        description:\n          typeof props.success === \"string\"\n            ? undefined\n            : props.success.description,\n      }\n    )\n  })\n    .catch(() => {\n      shouldDismiss = false\n      create(\n        \"error\",\n        typeof props.error === \"string\" ? props.error : props.error.title,\n        {\n          id: id,\n          position: props.position,\n          description:\n            typeof props.error === \"string\"\n              ? undefined\n              : props.error.description,\n        }\n      )\n    })\n    .finally(() => {\n      if (shouldDismiss) {\n        toastFn.dismiss(id)\n        id = undefined\n      }\n    })\n\n  return id\n}\n\nexport const toast = Object.assign(message, {\n  info,\n  error,\n  warning,\n  success,\n  promise,\n  loading,\n  dismiss: toastFn.dismiss,\n})\n"]}

package/dist/esm/blocks/data-table/components/data-table-action-cell.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { CellContext } from "@tanstack/react-table";
+interface DataTableActionCellProps<TData> {
+    ctx: CellContext<TData, unknown>;
+}
+declare const DataTableActionCell: {
+    <TData>({ ctx, }: DataTableActionCellProps<TData>): React.JSX.Element | null;
+    displayName: string;
+};
+export { DataTableActionCell };
+export type { DataTableActionCellProps };
+//# sourceMappingURL=data-table-action-cell.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-action-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-action-cell.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-action-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,UAAU,wBAAwB,CAAC,KAAK;IACtC,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;CACjC;AAED,QAAA,MAAM,mBAAmB;KAAI,KAAK,YAE/B,wBAAwB,CAAC,KAAK,CAAC;;CA8DjC,CAAA;AAGD,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-action-cell.js

@@ -0,0 +1,40 @@
+"use client";
+import * as React from "react";
+import { DropdownMenu } from "../../../components/dropdown-menu";
+import { IconButton } from "../../../components/icon-button";
+import { EllipsisHorizontal } from "@klodd/kommers-icons";
+const DataTableActionCell = ({ ctx, }) => {
+    const meta = ctx.column.columnDef.meta;
+    const actions = meta === null || meta === void 0 ? void 0 : meta.___actions;
+    if (!actions) {
+        return null;
+    }
+    const resolvedActions = typeof actions === "function" ? actions(ctx) : actions;
+    if (!Array.isArray(resolvedActions)) {
+        return null;
+    }
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(DropdownMenu.Trigger, { asChild: true, className: "ml-1" },
+            React.createElement(IconButton, { size: "small", variant: "transparent" },
+                React.createElement(EllipsisHorizontal, null))),
+        React.createElement(DropdownMenu.Content, { side: "bottom" }, resolvedActions.map((actionOrGroup, idx) => {
+            const isArray = Array.isArray(actionOrGroup);
+            const isLast = idx === resolvedActions.length - 1;
+            return isArray ? (React.createElement(React.Fragment, { key: idx },
+                actionOrGroup.map((action) => (React.createElement(DropdownMenu.Item, { key: action.label, onClick: (e) => {
+                        e.stopPropagation();
+                        action.onClick(ctx);
+                    }, className: "[&>svg]:text-ui-fg-subtle flex items-center gap-2" },
+                    action.icon,
+                    action.label))),
+                !isLast && React.createElement(DropdownMenu.Separator, null))) : (React.createElement(DropdownMenu.Item, { key: actionOrGroup.label, onClick: (e) => {
+                    e.stopPropagation();
+                    actionOrGroup.onClick(ctx);
+                }, className: "[&>svg]:text-ui-fg-subtle flex items-center gap-2" },
+                actionOrGroup.icon,
+                actionOrGroup.label));
+        }))));
+};
+DataTableActionCell.displayName = "DataTable.ActionCell";
+export { DataTableActionCell };
+//# sourceMappingURL=data-table-action-cell.js.map

package/dist/esm/blocks/data-table/components/data-table-action-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-action-cell.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-action-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAOzD,MAAM,mBAAmB,GAAG,CAAS,EACnC,GAAG,GAC6B,EAAE,EAAE;IACpC,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,IAErB,CAAA;IACb,MAAM,OAAO,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAA;IAEhC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;QACpC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,oBAAC,YAAY;QACX,oBAAC,YAAY,CAAC,OAAO,IAAC,OAAO,QAAC,SAAS,EAAC,MAAM;YAC5C,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa;gBAC5C,oBAAC,kBAAkB,OAAG,CACX,CACQ;QACvB,oBAAC,YAAY,CAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,IAChC,eAAe,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,GAAG,EAAE,EAAE;YAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;YAC5C,MAAM,MAAM,GAAG,GAAG,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAA;YAEjD,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG;gBACrB,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,oBAAC,YAAY,CAAC,IAAI,IAChB,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;oBACrB,CAAC,EACD,SAAS,EAAC,mDAAmD;oBAE5D,MAAM,CAAC,IAAI;oBACX,MAAM,CAAC,KAAK,CACK,CACrB,CAAC;gBACD,CAAC,MAAM,IAAI,oBAAC,YAAY,CAAC,SAAS,OAAG,CACvB,CAClB,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,CAAC,IAAI,IAChB,GAAG,EAAE,aAAa,CAAC,KAAK,EACxB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;gBAC5B,CAAC,EACD,SAAS,EAAC,mDAAmD;gBAE5D,aAAa,CAAC,IAAI;gBAClB,aAAa,CAAC,KAAK,CACF,CACrB,CAAA;QACH,CAAC,CAAC,CACmB,CACV,CAChB,CAAA;AACH,CAAC,CAAA;AACD,mBAAmB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport type { DataTableActionColumnDefMeta } from \"@/blocks/data-table/types\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { EllipsisHorizontal } from \"@klodd/kommers-icons\"\nimport { CellContext } from \"@tanstack/react-table\"\n\ninterface DataTableActionCellProps<TData> {\n  ctx: CellContext<TData, unknown>\n}\n\nconst DataTableActionCell = <TData,>({\n  ctx,\n}: DataTableActionCellProps<TData>) => {\n  const meta = ctx.column.columnDef.meta as\n    | DataTableActionColumnDefMeta<TData>\n    | undefined\n  const actions = meta?.___actions\n\n  if (!actions) {\n    return null\n  }\n\n  const resolvedActions = typeof actions === \"function\" ? actions(ctx) : actions\n\n  if (!Array.isArray(resolvedActions)) {\n    return null\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild className=\"ml-1\">\n        <IconButton size=\"small\" variant=\"transparent\">\n          <EllipsisHorizontal />\n        </IconButton>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content side=\"bottom\">\n        {resolvedActions.map((actionOrGroup, idx) => {\n          const isArray = Array.isArray(actionOrGroup)\n          const isLast = idx === resolvedActions.length - 1\n\n          return isArray ? (\n            <React.Fragment key={idx}>\n              {actionOrGroup.map((action) => (\n                <DropdownMenu.Item\n                  key={action.label}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    action.onClick(ctx)\n                  }}\n                  className=\"[&>svg]:text-ui-fg-subtle flex items-center gap-2\"\n                >\n                  {action.icon}\n                  {action.label}\n                </DropdownMenu.Item>\n              ))}\n              {!isLast && <DropdownMenu.Separator />}\n            </React.Fragment>\n          ) : (\n            <DropdownMenu.Item\n              key={actionOrGroup.label}\n              onClick={(e) => {\n                e.stopPropagation()\n                actionOrGroup.onClick(ctx)\n              }}\n              className=\"[&>svg]:text-ui-fg-subtle flex items-center gap-2\"\n            >\n              {actionOrGroup.icon}\n              {actionOrGroup.label}\n            </DropdownMenu.Item>\n          )\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\nDataTableActionCell.displayName = \"DataTable.ActionCell\"\n\nexport { DataTableActionCell }\nexport type { DataTableActionCellProps }\n\n"]}

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface DataTableColumnVisibilityMenuProps {
+    className?: string;
+    tooltip?: string;
+}
+declare const DataTableColumnVisibilityMenu: ({ className, tooltip, }: DataTableColumnVisibilityMenuProps) => React.JSX.Element | null;
+export { DataTableColumnVisibilityMenu };
+export type { DataTableColumnVisibilityMenuProps };
+//# sourceMappingURL=data-table-column-visibility-menu.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-visibility-menu.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-column-visibility-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,UAAU,kCAAkC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,QAAA,MAAM,6BAA6B,GAAI,yBAGpC,kCAAkC,6BA8EpC,CAAA;AAED,OAAO,EAAE,6BAA6B,EAAE,CAAA;AACxC,YAAY,EAAE,kCAAkC,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Checkbox } from "../../../components/checkbox";
+import { DropdownMenu } from "../../../components/dropdown-menu";
+import { IconButton } from "../../../components/icon-button";
+import { Tooltip } from "../../../components/tooltip";
+import { Adjustments } from "@klodd/kommers-icons";
+import { useDataTableContext } from "../context/use-data-table-context";
+const DataTableColumnVisibilityMenu = ({ className, tooltip, }) => {
+    const { instance, enableColumnVisibility } = useDataTableContext();
+    if (!enableColumnVisibility) {
+        return null;
+    }
+    const columns = instance
+        .getAllColumns()
+        .filter((column) => column.getCanHide());
+    const handleToggleColumn = (column) => {
+        column.toggleVisibility();
+    };
+    const handleToggleAll = (value) => {
+        instance.setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, value])));
+    };
+    const allColumnsVisible = columns.every((column) => column.getIsVisible());
+    const someColumnsVisible = columns.some((column) => column.getIsVisible());
+    const Wrapper = tooltip ? Tooltip : React.Fragment;
+    const wrapperProps = tooltip ? { content: tooltip } : {};
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(Wrapper, { ...wrapperProps },
+            React.createElement(DropdownMenu.Trigger, { asChild: true },
+                React.createElement(IconButton, { size: "small", className: className },
+                    React.createElement(Adjustments, null)))),
+        React.createElement(DropdownMenu.Content, { align: "end", className: "min-w-[200px] max-h-[400px] overflow-hidden" },
+            React.createElement(DropdownMenu.Label, null, "Toggle columns"),
+            React.createElement(DropdownMenu.Separator, null),
+            React.createElement(DropdownMenu.Item, { onSelect: (e) => {
+                    e.preventDefault();
+                    handleToggleAll(!allColumnsVisible);
+                } },
+                React.createElement("div", { className: "flex items-center gap-x-2" },
+                    React.createElement(Checkbox, { checked: allColumnsVisible ? true : (someColumnsVisible && !allColumnsVisible) ? "indeterminate" : false }),
+                    React.createElement("span", null, "Toggle all"))),
+            React.createElement(DropdownMenu.Separator, null),
+            React.createElement("div", { className: "max-h-[250px] overflow-y-auto" }, columns.map((column) => {
+                var _a;
+                return (React.createElement(DropdownMenu.Item, { key: column.id, onSelect: (e) => {
+                        e.preventDefault();
+                        handleToggleColumn(column);
+                    } },
+                    React.createElement("div", { className: "flex items-center gap-x-2" },
+                        React.createElement(Checkbox, { checked: column.getIsVisible() }),
+                        React.createElement("span", { className: "truncate" }, ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.name) || column.id))));
+            })))));
+};
+export { DataTableColumnVisibilityMenu };
+//# sourceMappingURL=data-table-column-visibility-menu.js.map

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-visibility-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-column-visibility-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Column } from \"@tanstack/react-table\"\n\nimport { Checkbox } from \"@/components/checkbox\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { Adjustments } from \"@klodd/kommers-icons\"\nimport { clx } from \"@/utils/clx\"\n\nimport { useDataTableContext } from \"../context/use-data-table-context\"\n\ninterface DataTableColumnVisibilityMenuProps {\n  className?: string\n  tooltip?: string\n}\n\nconst DataTableColumnVisibilityMenu = ({\n  className,\n  tooltip,\n}: DataTableColumnVisibilityMenuProps) => {\n  const { instance, enableColumnVisibility } = useDataTableContext()\n\n  if (!enableColumnVisibility) {\n    return null\n  }\n\n  const columns = instance\n    .getAllColumns()\n    .filter((column) => column.getCanHide())\n\n  const handleToggleColumn = (column: Column<any, any>) => {\n    column.toggleVisibility()\n  }\n\n  const handleToggleAll = (value: boolean) => {\n    instance.setColumnVisibility(\n      Object.fromEntries(\n        columns.map((column: Column<any, any>) => [column.id, value])\n      )\n    )\n  }\n\n  const allColumnsVisible = columns.every((column: Column<any, any>) => column.getIsVisible())\n  const someColumnsVisible = columns.some((column: Column<any, any>) => column.getIsVisible())\n\n  const Wrapper = tooltip ? Tooltip : React.Fragment\n  const wrapperProps = tooltip ? { content: tooltip } : ({} as any)\n\n  return (\n    <DropdownMenu>\n      <Wrapper {...wrapperProps}>\n        <DropdownMenu.Trigger asChild>\n          <IconButton size=\"small\" className={className}>\n            <Adjustments />\n          </IconButton>\n        </DropdownMenu.Trigger>\n      </Wrapper>\n      <DropdownMenu.Content align=\"end\" className=\"min-w-[200px] max-h-[400px] overflow-hidden\">\n        <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item\n          onSelect={(e: Event) => {\n            e.preventDefault()\n            handleToggleAll(!allColumnsVisible)\n          }}\n        >\n          <div className=\"flex items-center gap-x-2\">\n            <Checkbox\n              checked={allColumnsVisible ? true : (someColumnsVisible && !allColumnsVisible) ? \"indeterminate\" : false}\n            />\n            <span>Toggle all</span>\n          </div>\n        </DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <div className=\"max-h-[250px] overflow-y-auto\">\n          {columns.map((column: Column<any, any>) => {\n            return (\n              <DropdownMenu.Item\n                key={column.id}\n                onSelect={(e: Event) => {\n                  e.preventDefault()\n                  handleToggleColumn(column)\n                }}\n              >\n                <div className=\"flex items-center gap-x-2\">\n                  <Checkbox checked={column.getIsVisible()} />\n                  <span className=\"truncate\">\n                    {(column.columnDef.meta as any)?.name || column.id}\n                  </span>\n                </div>\n              </DropdownMenu.Item>\n            )\n          })}\n        </div>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\n\nexport { DataTableColumnVisibilityMenu }\nexport type { DataTableColumnVisibilityMenuProps }\n"]}

package/dist/esm/blocks/data-table/components/data-table-command-bar.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+interface DataTableCommandBarProps {
+    /**
+     * The label to show when items are selected. If a function is passed,
+     * it will be called with the count of selected items.
+     */
+    selectedLabel?: ((count: number) => string) | string;
+}
+/**
+ * This component adds a command bar to the data table, which is used
+ * to show commands that can be executed on the selected rows.
+ */
+declare const DataTableCommandBar: {
+    (props: DataTableCommandBarProps): React.JSX.Element | null;
+    displayName: string;
+};
+export { DataTableCommandBar };
+export type { DataTableCommandBarProps };
+//# sourceMappingURL=data-table-command-bar.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-command-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-command-bar.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-command-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,wBAAwB;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,MAAM,CAAA;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB;YAAW,wBAAwB;;CA6C3D,CAAA;AAGD,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-command-bar.js

@@ -0,0 +1,35 @@
+"use client";
+import * as React from "react";
+import { useDataTableContext } from "../../data-table/context/use-data-table-context";
+import { CommandBar } from "../../../components/command-bar";
+/**
+ * This component adds a command bar to the data table, which is used
+ * to show commands that can be executed on the selected rows.
+ */
+const DataTableCommandBar = (props) => {
+    const { instance } = useDataTableContext();
+    const commands = instance.getCommands();
+    const rowSelection = instance.getRowSelection();
+    const count = Object.keys(rowSelection || []).length;
+    const open = commands && commands.length > 0 && count > 0;
+    function getSelectedLabel(count) {
+        if (typeof props.selectedLabel === "function") {
+            return props.selectedLabel(count);
+        }
+        return props.selectedLabel;
+    }
+    if (!commands || commands.length === 0) {
+        return null;
+    }
+    return (React.createElement(CommandBar, { open: open },
+        React.createElement(CommandBar.Bar, null,
+            props.selectedLabel && (React.createElement(React.Fragment, null,
+                React.createElement(CommandBar.Value, null, getSelectedLabel(count)),
+                React.createElement(CommandBar.Seperator, null))),
+            commands.map((command, idx) => (React.createElement(React.Fragment, { key: idx },
+                React.createElement(CommandBar.Command, { key: command.label, action: () => command.action(rowSelection), label: command.label, shortcut: command.shortcut }),
+                idx < commands.length - 1 && React.createElement(CommandBar.Seperator, null)))))));
+};
+DataTableCommandBar.displayName = "DataTable.CommandBar";
+export { DataTableCommandBar };
+//# sourceMappingURL=data-table-command-bar.js.map

package/dist/esm/blocks/data-table/components/data-table-command-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-command-bar.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-command-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAA;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAUrD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAE1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAA;IACvC,MAAM,YAAY,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAA;IAE/C,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,MAAM,CAAA;IAEpD,MAAM,IAAI,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAA;IAEzD,SAAS,gBAAgB,CAAC,KAAa;QACrC,IAAI,OAAO,KAAK,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;YAC9C,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;QAED,OAAO,KAAK,CAAC,aAAa,CAAA;IAC5B,CAAC;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI;QACpB,oBAAC,UAAU,CAAC,GAAG;YACZ,KAAK,CAAC,aAAa,IAAI,CACtB,oBAAC,KAAK,CAAC,QAAQ;gBACb,oBAAC,UAAU,CAAC,KAAK,QAAE,gBAAgB,CAAC,KAAK,CAAC,CAAoB;gBAC9D,oBAAC,UAAU,CAAC,SAAS,OAAG,CACT,CAClB;YACA,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9B,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG;gBACtB,oBAAC,UAAU,CAAC,OAAO,IACjB,GAAG,EAAE,OAAO,CAAC,KAAK,EAClB,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,EAC1C,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ,GAC1B;gBACD,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,UAAU,CAAC,SAAS,OAAG,CACvC,CAClB,CAAC,CACa,CACN,CACd,CAAA;AACH,CAAC,CAAA;AACD,mBAAmB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { CommandBar } from \"@/components/command-bar\"\n\ninterface DataTableCommandBarProps {\n  /**\n   * The label to show when items are selected. If a function is passed, \n   * it will be called with the count of selected items.\n   */\n  selectedLabel?: ((count: number) => string) | string\n}\n\n/**\n * This component adds a command bar to the data table, which is used\n * to show commands that can be executed on the selected rows.\n */\nconst DataTableCommandBar = (props: DataTableCommandBarProps) => {\n  const { instance } = useDataTableContext()\n\n  const commands = instance.getCommands()\n  const rowSelection = instance.getRowSelection()\n\n  const count = Object.keys(rowSelection || []).length\n\n  const open = commands && commands.length > 0 && count > 0\n\n  function getSelectedLabel(count: number) {\n    if (typeof props.selectedLabel === \"function\") {\n      return props.selectedLabel(count)\n    }\n\n    return props.selectedLabel\n  }\n\n  if (!commands || commands.length === 0) {\n    return null\n  }\n\n  return (\n    <CommandBar open={open}>\n      <CommandBar.Bar>\n        {props.selectedLabel && (\n          <React.Fragment>\n            <CommandBar.Value>{getSelectedLabel(count)}</CommandBar.Value>\n            <CommandBar.Seperator />\n          </React.Fragment>\n        )}\n        {commands.map((command, idx) => (\n          <React.Fragment key={idx}>\n            <CommandBar.Command\n              key={command.label}\n              action={() => command.action(rowSelection)}\n              label={command.label}\n              shortcut={command.shortcut}\n            />\n            {idx < commands.length - 1 && <CommandBar.Seperator />}\n          </React.Fragment>\n        ))}\n      </CommandBar.Bar>\n    </CommandBar>\n  )\n}\nDataTableCommandBar.displayName = \"DataTable.CommandBar\"\n\nexport { DataTableCommandBar }\nexport type { DataTableCommandBarProps }\n\n"]}

package/dist/esm/blocks/data-table/components/data-table-filter-bar.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface DataTableFilterBarProps {
+    clearAllFiltersLabel?: string;
+    alwaysShow?: boolean;
+    sortingTooltip?: string;
+    columnsTooltip?: string;
+    children?: React.ReactNode;
+}
+declare const DataTableFilterBar: {
+    ({ clearAllFiltersLabel, alwaysShow, sortingTooltip, columnsTooltip, children, }: DataTableFilterBarProps): React.JSX.Element | null;
+    displayName: string;
+};
+export { DataTableFilterBar };
+export type { DataTableFilterBarProps };
+//# sourceMappingURL=data-table-filter-bar.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-filter-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-bar.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,UAAU,uBAAuB;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAQD,QAAA,MAAM,kBAAkB;sFAMrB,uBAAuB;;CAwIzB,CAAA;AAkBD,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAC7B,YAAY,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-filter-bar.js

@@ -0,0 +1,116 @@
+"use client";
+import * as React from "react";
+import { DataTableFilter } from "../../data-table/components/data-table-filter";
+import { DataTableFilterMenu } from "../../data-table/components/data-table-filter-menu";
+import { DataTableSortingMenu } from "../../data-table/components/data-table-sorting-menu";
+import { DataTableColumnVisibilityMenu } from "../../data-table/components/data-table-column-visibility-menu";
+import { useDataTableContext } from "../../data-table/context/use-data-table-context";
+import { Skeleton } from "../../../components/skeleton";
+import isEqual from "lodash.isequal";
+const DataTableFilterBar = ({ clearAllFiltersLabel = "Clear all", alwaysShow = false, sortingTooltip, columnsTooltip, children, }) => {
+    const { instance, enableColumnVisibility } = useDataTableContext();
+    // Local state for managing intermediate filters
+    const [localFilters, setLocalFilters] = React.useState([]);
+    const parentFilterState = instance.getFiltering();
+    const availableFilters = instance.getFilters();
+    // Sync parent filters with local state
+    React.useEffect(() => {
+        setLocalFilters((prevLocalFilters) => {
+            const parentIds = Object.keys(parentFilterState);
+            const localIds = prevLocalFilters.map((f) => f.id);
+            // Start with filters that exist in parent or are new (user-added)
+            const updatedLocalFilters = prevLocalFilters
+                .filter((f) => parentIds.includes(f.id) || f.isNew)
+                .map((f) => {
+                // If filter exists in parent, it's no longer "new"
+                if (parentIds.includes(f.id)) {
+                    const parentValue = parentFilterState[f.id];
+                    if (!isEqual(f.value, parentValue) || f.isNew) {
+                        return {
+                            id: f.id,
+                            value: parentValue,
+                            isNew: false,
+                        };
+                    }
+                }
+                return f;
+            });
+            // Add parent filters that don't exist locally
+            parentIds.forEach((id) => {
+                if (!localIds.includes(id)) {
+                    updatedLocalFilters.push({
+                        id,
+                        value: parentFilterState[id],
+                        isNew: false,
+                    });
+                }
+            });
+            // Check if there's an actual change (length, IDs, or values)
+            if (updatedLocalFilters.length !== prevLocalFilters.length) {
+                return updatedLocalFilters;
+            }
+            // Check if any filter ID changed position or if any value changed
+            const hasChanges = updatedLocalFilters.some((f, i) => {
+                const prev = prevLocalFilters[i];
+                return (!prev ||
+                    f.id !== prev.id ||
+                    !isEqual(f.value, prev.value) ||
+                    f.isNew !== prev.isNew);
+            });
+            return hasChanges ? updatedLocalFilters : prevLocalFilters;
+        });
+    }, [parentFilterState]);
+    // Add a new filter locally
+    const addLocalFilter = React.useCallback((id, value) => {
+        setLocalFilters(prev => [...prev, { id, value, isNew: true }]);
+    }, []);
+    // Update a local filter's value
+    const updateLocalFilter = React.useCallback((id, value) => {
+        setLocalFilters(prev => prev.map(f => f.id === id ? { ...f, value, isNew: false } : f));
+        // If the filter has a meaningful value, propagate to parent
+        if (value !== undefined && value !== null && value !== '' &&
+            !(Array.isArray(value) && value.length === 0)) {
+            instance.updateFilter({ id, value });
+        }
+    }, [instance]);
+    // Remove a local filter
+    const removeLocalFilter = React.useCallback((id) => {
+        setLocalFilters(prev => prev.filter(f => f.id !== id));
+        // Also remove from parent if it exists there
+        if (parentFilterState[id] !== undefined) {
+            instance.removeFilter(id);
+        }
+    }, [instance, parentFilterState]);
+    const clearFilters = React.useCallback(() => {
+        setLocalFilters([]);
+        instance.clearFilters();
+    }, [instance]);
+    const filterCount = localFilters.length;
+    const hasAvailableFilters = availableFilters.length > 0;
+    // Check if sorting is enabled
+    const sortableColumns = instance.getAllColumns().filter((column) => column.getCanSort());
+    const hasSorting = instance.enableSorting && sortableColumns.length > 0;
+    // Always show the filter bar when there are available filters, sorting, column visibility, or when forced
+    if (filterCount === 0 && !hasAvailableFilters && !hasSorting && !enableColumnVisibility && !alwaysShow && !children) {
+        return null;
+    }
+    if (instance.showSkeleton) {
+        return React.createElement(DataTableFilterBarSkeleton, { filterCount: filterCount });
+    }
+    return (React.createElement("div", { className: "bg-ui-bg-subtle flex w-full flex-nowrap items-center justify-between gap-2 overflow-x-auto border-t px-6 py-2" },
+        React.createElement("div", { className: "flex flex-nowrap items-center gap-2 md:flex-wrap" },
+            localFilters.map((localFilter) => (React.createElement(DataTableFilter, { key: localFilter.id, id: localFilter.id, filter: localFilter.value, isNew: localFilter.isNew, onUpdate: (value) => updateLocalFilter(localFilter.id, value), onRemove: () => removeLocalFilter(localFilter.id) }))),
+            hasAvailableFilters && (React.createElement(DataTableFilterMenu, { onAddFilter: addLocalFilter }))),
+        React.createElement("div", { className: "flex flex-shrink-0 items-center gap-2" },
+            hasSorting && React.createElement(DataTableSortingMenu, { tooltip: sortingTooltip }),
+            enableColumnVisibility && React.createElement(DataTableColumnVisibilityMenu, { tooltip: columnsTooltip }),
+            children)));
+};
+DataTableFilterBar.displayName = "DataTable.FilterBar";
+const DataTableFilterBarSkeleton = ({ filterCount, }) => {
+    return (React.createElement("div", { className: "bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap" },
+        Array.from({ length: filterCount }).map((_, index) => (React.createElement(Skeleton, { key: index, className: "h-7 w-[180px]" }))),
+        filterCount > 0 ? React.createElement(Skeleton, { className: "h-7 w-[66px]" }) : null));
+};
+export { DataTableFilterBar };
+//# sourceMappingURL=data-table-filter-bar.js.map

package/dist/esm/blocks/data-table/components/data-table-filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-bar.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { DataTableFilter } from \"@/blocks/data-table/components/data-table-filter\"\nimport { DataTableFilterMenu } from \"@/blocks/data-table/components/data-table-filter-menu\"\nimport { DataTableSortingMenu } from \"@/blocks/data-table/components/data-table-sorting-menu\"\nimport { DataTableColumnVisibilityMenu } from \"@/blocks/data-table/components/data-table-column-visibility-menu\"\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport isEqual from \"lodash.isequal\"\n\ninterface DataTableFilterBarProps {\n  clearAllFiltersLabel?: string\n  alwaysShow?: boolean\n  sortingTooltip?: string\n  columnsTooltip?: string\n  children?: React.ReactNode\n}\n\ninterface LocalFilter {\n  id: string\n  value: unknown\n  isNew: boolean\n}\n\nconst DataTableFilterBar = ({\n  clearAllFiltersLabel = \"Clear all\",\n  alwaysShow = false,\n  sortingTooltip,\n  columnsTooltip,\n  children,\n}: DataTableFilterBarProps) => {\n  const { instance, enableColumnVisibility } = useDataTableContext()\n  \n  // Local state for managing intermediate filters\n  const [localFilters, setLocalFilters] = React.useState<LocalFilter[]>([])\n  \n  const parentFilterState = instance.getFiltering()\n  const availableFilters = instance.getFilters()\n  \n  // Sync parent filters with local state\n  React.useEffect(() => {\n    setLocalFilters((prevLocalFilters) => {\n      const parentIds = Object.keys(parentFilterState)\n      const localIds = prevLocalFilters.map((f) => f.id)\n\n      // Start with filters that exist in parent or are new (user-added)\n      const updatedLocalFilters: LocalFilter[] = prevLocalFilters\n        .filter((f) => parentIds.includes(f.id) || f.isNew)\n        .map((f) => {\n          // If filter exists in parent, it's no longer \"new\"\n          if (parentIds.includes(f.id)) {\n            const parentValue = parentFilterState[f.id]\n            if (!isEqual(f.value, parentValue) || f.isNew) {\n              return {\n                id: f.id,\n                value: parentValue,\n                isNew: false,\n              }\n            }\n          }\n          return f\n        })\n\n      // Add parent filters that don't exist locally\n      parentIds.forEach((id) => {\n        if (!localIds.includes(id)) {\n          updatedLocalFilters.push({\n            id,\n            value: parentFilterState[id],\n            isNew: false,\n          })\n        }\n      })\n\n      // Check if there's an actual change (length, IDs, or values)\n      if (updatedLocalFilters.length !== prevLocalFilters.length) {\n        return updatedLocalFilters\n      }\n\n      // Check if any filter ID changed position or if any value changed\n      const hasChanges = updatedLocalFilters.some((f, i) => {\n        const prev = prevLocalFilters[i]\n        return (\n          !prev ||\n          f.id !== prev.id ||\n          !isEqual(f.value, prev.value) ||\n          f.isNew !== prev.isNew\n        )\n      })\n\n      return hasChanges ? updatedLocalFilters : prevLocalFilters\n    })\n  }, [parentFilterState])\n  \n  // Add a new filter locally\n  const addLocalFilter = React.useCallback((id: string, value: unknown) => {\n    setLocalFilters(prev => [...prev, { id, value, isNew: true }])\n  }, [])\n  \n  // Update a local filter's value\n  const updateLocalFilter = React.useCallback((id: string, value: unknown) => {\n    setLocalFilters(prev => prev.map(f => \n      f.id === id ? { ...f, value, isNew: false } : f\n    ))\n    \n    // If the filter has a meaningful value, propagate to parent\n    if (value !== undefined && value !== null && value !== '' && \n        !(Array.isArray(value) && value.length === 0)) {\n      instance.updateFilter({ id, value })\n    }\n  }, [instance])\n  \n  // Remove a local filter\n  const removeLocalFilter = React.useCallback((id: string) => {\n    setLocalFilters(prev => prev.filter(f => f.id !== id))\n    // Also remove from parent if it exists there\n    if (parentFilterState[id] !== undefined) {\n      instance.removeFilter(id)\n    }\n  }, [instance, parentFilterState])\n\n  const clearFilters = React.useCallback(() => {\n    setLocalFilters([])\n    instance.clearFilters()\n  }, [instance])\n\n  const filterCount = localFilters.length\n  const hasAvailableFilters = availableFilters.length > 0\n  \n  // Check if sorting is enabled\n  const sortableColumns = instance.getAllColumns().filter((column) => column.getCanSort())\n  const hasSorting = instance.enableSorting && sortableColumns.length > 0\n\n  // Always show the filter bar when there are available filters, sorting, column visibility, or when forced\n  if (filterCount === 0 && !hasAvailableFilters && !hasSorting && !enableColumnVisibility && !alwaysShow && !children) {\n    return null\n  }\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterBarSkeleton filterCount={filterCount} />\n  }\n\n  return (\n    <div className=\"bg-ui-bg-subtle flex w-full flex-nowrap items-center justify-between gap-2 overflow-x-auto border-t px-6 py-2\">\n      <div className=\"flex flex-nowrap items-center gap-2 md:flex-wrap\">\n        {localFilters.map((localFilter) => (\n          <DataTableFilter \n            key={localFilter.id} \n            id={localFilter.id} \n            filter={localFilter.value} \n            isNew={localFilter.isNew}\n            onUpdate={(value) => updateLocalFilter(localFilter.id, value)}\n            onRemove={() => removeLocalFilter(localFilter.id)}\n          />\n        ))}\n        {hasAvailableFilters && (\n          <DataTableFilterMenu onAddFilter={addLocalFilter} />\n        )}\n      </div>\n      <div className=\"flex flex-shrink-0 items-center gap-2\">\n        {hasSorting && <DataTableSortingMenu tooltip={sortingTooltip} />}\n        {enableColumnVisibility && <DataTableColumnVisibilityMenu tooltip={columnsTooltip} />}\n        {children}\n      </div>\n    </div>\n  )\n}\nDataTableFilterBar.displayName = \"DataTable.FilterBar\"\n\nconst DataTableFilterBarSkeleton = ({\n  filterCount,\n}: {\n  filterCount: number\n}) => {\n  return (\n    <div className=\"bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap\">\n      {Array.from({ length: filterCount }).map((_, index) => (\n        <Skeleton key={index} className=\"h-7 w-[180px]\" />\n      ))}\n      {filterCount > 0 ? <Skeleton className=\"h-7 w-[66px]\" /> : null}\n    </div>\n  )\n}\n\nexport { DataTableFilterBar }\nexport type { DataTableFilterBarProps }\n\n"]}

package/dist/esm/blocks/data-table/components/data-table-filter-menu.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+interface DataTableFilterMenuProps {
+    /**
+     * The tooltip to show when hovering over the filter menu.
+     */
+    tooltip?: string;
+    /**
+     * Callback when a filter is added
+     */
+    onAddFilter?: (id: string, value: unknown) => void;
+}
+/**
+ * This component adds a filter menu to the data table, allowing users
+ * to filter the table's data.
+ */
+declare const DataTableFilterMenu: {
+    ({ tooltip, onAddFilter }: DataTableFilterMenuProps): React.JSX.Element;
+    displayName: string;
+};
+export { DataTableFilterMenu };
+export type { DataTableFilterMenuProps };
+//# sourceMappingURL=data-table-filter-menu.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-filter-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-menu.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,UAAU,wBAAwB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnD;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB;+BAA8B,wBAAwB;;CA2E9E,CAAA;AAOD,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}