@jameskabz/nextcraft-ui 0.7.5 → 0.8.1

package/dist/components/craft-data-table-filters.cjs

@@ -0,0 +1,184 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var craft_data_table_filters_exports = {};
+__export(craft_data_table_filters_exports, {
+  CraftDataTableFilters: () => CraftDataTableFilters
+});
+module.exports = __toCommonJS(craft_data_table_filters_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_craft_button = require("../components/craft-button");
+var import_craft_input = require("../components/craft-input");
+var import_craft_select = require("../components/craft-select");
+function CraftDataTableFilters({
+  title,
+  description,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  showSearch = true,
+  addButton,
+  selectFilters,
+  onSelectFiltersChange,
+  dateFilters,
+  onDateFiltersChange,
+  showFilters = true,
+  showClear = true,
+  clearLabel = "Clear filters",
+  onClearFilters,
+  showFileUpload = false,
+  fileUploadAccept,
+  fileUploadMaxSize,
+  onFilesSelected,
+  totalItems,
+  itemLabel = "items",
+  tone,
+  className
+}) {
+  var _a, _b;
+  const hasSelects = Boolean(selectFilters && selectFilters.length > 0);
+  const hasDates = Boolean(dateFilters && dateFilters.length > 0);
+  const hasFilters = showFilters && (hasSelects || hasDates);
+  const updateSelectFilter = (index, value) => {
+    if (!selectFilters || !onSelectFiltersChange) return;
+    const next = selectFilters.map(
+      (filter, idx) => idx === index ? { ...filter, value } : filter
+    );
+    onSelectFiltersChange(next);
+  };
+  const updateDateFilter = (index, key, value) => {
+    if (!dateFilters || !onDateFiltersChange) return;
+    const next = dateFilters.map(
+      (filter, idx) => idx === index ? { ...filter, [key]: value } : filter
+    );
+    onDateFiltersChange(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_12px_36px_rgba(0,0,0,0.2)] backdrop-blur-2xl",
+        className
+      ),
+      "data-nc-theme": tone,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
+            typeof totalItems === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: [
+              totalItems,
+              " ",
+              itemLabel
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+            showFileUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_craft_input.CraftInput,
+              {
+                type: "file",
+                accept: fileUploadAccept,
+                onChange: (event) => {
+                  const files = event.target.files;
+                  if (!files || files.length === 0) return;
+                  if (typeof fileUploadMaxSize === "number" && files[0] && files[0].size > fileUploadMaxSize) {
+                    return;
+                  }
+                  onFilesSelected == null ? void 0 : onFilesSelected(files);
+                  event.currentTarget.value = "";
+                }
+              }
+            ),
+            addButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_craft_button.CraftButton,
+              {
+                type: "button",
+                variant: (_a = addButton.variant) != null ? _a : "outline",
+                size: (_b = addButton.size) != null ? _b : "sm",
+                disabled: addButton.disabled,
+                onClick: addButton.onClick,
+                children: addButton.label
+              }
+            ) : null,
+            showClear && onClearFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_button.CraftButton, { type: "button", variant: "ghost", onClick: onClearFilters, children: clearLabel }) : null
+          ] })
+        ] }),
+        (showSearch || hasFilters) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 grid gap-4", children: [
+          showSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_craft_input.CraftInput,
+            {
+              type: "search",
+              placeholder: searchPlaceholder,
+              value: searchValue != null ? searchValue : "",
+              onChange: (event) => onSearchChange == null ? void 0 : onSearchChange(event.target.value),
+              tone
+            }
+          ),
+          hasFilters && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-end gap-3", children: [
+            selectFilters == null ? void 0 : selectFilters.map((filter, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "grid gap-2 text-xs", children: [
+              filter.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: filter.label }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_craft_select.CraftSelect,
+                {
+                  value: filter.value,
+                  disabled: filter.disabled,
+                  onChange: (event) => updateSelectFilter(index, event.target.value),
+                  children: [
+                    filter.placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: filter.placeholder }) : null,
+                    filter.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, String(option.value)))
+                  ]
+                }
+              )
+            ] }, filter.key)),
+            dateFilters == null ? void 0 : dateFilters.map((filter, index) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2 text-xs", children: [
+                filter.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: filter.label }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_craft_input.CraftInput,
+                    {
+                      type: "date",
+                      value: (_a2 = filter.from) != null ? _a2 : "",
+                      onChange: (event) => updateDateFilter(index, "from", event.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_craft_input.CraftInput,
+                    {
+                      type: "date",
+                      value: (_b2 = filter.to) != null ? _b2 : "",
+                      onChange: (event) => updateDateFilter(index, "to", event.target.value)
+                    }
+                  )
+                ] })
+              ] }, filter.key);
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CraftDataTableFilters
+});
+//# sourceMappingURL=craft-data-table-filters.cjs.map

package/dist/components/craft-data-table-filters.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-data-table-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftButton, type CraftButtonProps } from \"@/components/craft-button\";\nimport { CraftInput } from \"@/components/craft-input\";\nimport { CraftSelect } from \"@/components/craft-select\";\n\nexport type CraftDataTableFilterSelectOption = {\n  label: React.ReactNode;\n  value: string;\n};\n\nexport type CraftDataTableFilterSelect = {\n  key: string;\n  label?: React.ReactNode;\n  value: string;\n  placeholder?: string;\n  options: CraftDataTableFilterSelectOption[];\n  disabled?: boolean;\n};\n\nexport type CraftDataTableFilterDate = {\n  key: string;\n  label?: React.ReactNode;\n  from?: string;\n  to?: string;\n};\n\nexport type CraftDataTableFiltersProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  showSearch?: boolean;\n\n  addButton?: {\n    label: React.ReactNode;\n    icon?: React.ReactNode | string;\n    variant?: CraftButtonProps[\"variant\"];\n    size?: CraftButtonProps[\"size\"];\n    disabled?: boolean;\n    onClick: () => void;\n  };\n\n  selectFilters?: CraftDataTableFilterSelect[];\n  onSelectFiltersChange?: (filters: CraftDataTableFilterSelect[]) => void;\n\n  dateFilters?: CraftDataTableFilterDate[];\n  onDateFiltersChange?: (filters: CraftDataTableFilterDate[]) => void;\n\n  showFilters?: boolean;\n\n  showClear?: boolean;\n  clearLabel?: React.ReactNode;\n  onClearFilters?: () => void;\n\n  showFileUpload?: boolean;\n  fileUploadAccept?: string;\n  fileUploadMaxSize?: number;\n  onFilesSelected?: (files: FileList) => void;\n\n  totalItems?: number;\n  itemLabel?: string;\n\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftDataTableFilters({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  showSearch = true,\n  addButton,\n  selectFilters,\n  onSelectFiltersChange,\n  dateFilters,\n  onDateFiltersChange,\n  showFilters = true,\n  showClear = true,\n  clearLabel = \"Clear filters\",\n  onClearFilters,\n  showFileUpload = false,\n  fileUploadAccept,\n  fileUploadMaxSize,\n  onFilesSelected,\n  totalItems,\n  itemLabel = \"items\",\n  tone,\n  className,\n}: CraftDataTableFiltersProps) {\n  const hasSelects = Boolean(selectFilters && selectFilters.length > 0);\n  const hasDates = Boolean(dateFilters && dateFilters.length > 0);\n  const hasFilters = showFilters && (hasSelects || hasDates);\n\n  const updateSelectFilter = (index: number, value: string) => {\n    if (!selectFilters || !onSelectFiltersChange) return;\n    const next = selectFilters.map((filter, idx) =>\n      idx === index ? { ...filter, value } : filter\n    );\n    onSelectFiltersChange(next);\n  };\n\n  const updateDateFilter = (\n    index: number,\n    key: \"from\" | \"to\",\n    value: string\n  ) => {\n    if (!dateFilters || !onDateFiltersChange) return;\n    const next = dateFilters.map((filter, idx) =>\n      idx === index ? { ...filter, [key]: value } : filter\n    );\n    onDateFiltersChange(next);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_12px_36px_rgba(0,0,0,0.2)] backdrop-blur-2xl\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <div>\n          {title && <h3 className=\"text-lg font-semibold\">{title}</h3>}\n          {description && (\n            <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">\n              {description}\n            </p>\n          )}\n          {typeof totalItems === \"number\" && (\n            <p className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">\n              {totalItems} {itemLabel}\n            </p>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-3\">\n          {showFileUpload && (\n            <CraftInput\n              type=\"file\"\n              accept={fileUploadAccept}\n              onChange={(event) => {\n                const files = event.target.files;\n                if (!files || files.length === 0) return;\n                if (\n                  typeof fileUploadMaxSize === \"number\" &&\n                  files[0] &&\n                  files[0].size > fileUploadMaxSize\n                ) {\n                  return;\n                }\n                onFilesSelected?.(files);\n                event.currentTarget.value = \"\";\n              }}\n            />\n          )}\n\n          {addButton ? (\n            <CraftButton\n              type=\"button\"\n              variant={addButton.variant ?? \"outline\"}\n              size={addButton.size ?? \"sm\"}\n              disabled={addButton.disabled}\n              onClick={addButton.onClick}\n            >\n              {addButton.label}\n            </CraftButton>\n          ) : null}\n\n          {showClear && onClearFilters ? (\n            <CraftButton type=\"button\" variant=\"ghost\" onClick={onClearFilters}>\n              {clearLabel}\n            </CraftButton>\n          ) : null}\n        </div>\n      </div>\n\n      {(showSearch || hasFilters) && (\n        <div className=\"mt-4 grid gap-4\">\n          {showSearch && (\n            <CraftInput\n              type=\"search\"\n              placeholder={searchPlaceholder}\n              value={searchValue ?? \"\"}\n              onChange={(event) => onSearchChange?.(event.target.value)}\n              tone={tone}\n            />\n          )}\n\n          {hasFilters && (\n            <div className=\"flex flex-wrap items-end gap-3\">\n              {selectFilters?.map((filter, index) => (\n                <label key={filter.key} className=\"grid gap-2 text-xs\">\n                  {filter.label ? (\n                    <span className=\"text-[rgb(var(--nc-fg-muted))]\">\n                      {filter.label}\n                    </span>\n                  ) : null}\n                  <CraftSelect\n                    value={filter.value}\n                    disabled={filter.disabled}\n                    onChange={(event) =>\n                      updateSelectFilter(index, event.target.value)\n                    }\n                  >\n                    {filter.placeholder ? (\n                      <option value=\"\">{filter.placeholder}</option>\n                    ) : null}\n                    {filter.options.map((option) => (\n                      <option key={String(option.value)} value={option.value}>\n                        {option.label}\n                      </option>\n                    ))}\n                  </CraftSelect>\n                </label>\n              ))}\n\n              {dateFilters?.map((filter, index) => (\n                <div key={filter.key} className=\"grid gap-2 text-xs\">\n                  {filter.label ? (\n                    <span className=\"text-[rgb(var(--nc-fg-muted))]\">\n                      {filter.label}\n                    </span>\n                  ) : null}\n                  <div className=\"flex items-center gap-2\">\n                    <CraftInput\n                      type=\"date\"\n                      value={filter.from ?? \"\"}\n                      onChange={(event) =>\n                        updateDateFilter(index, \"from\", event.target.value)\n                      }\n                    />\n                    <CraftInput\n                      type=\"date\"\n                      value={filter.to ?? \"\"}\n                      onChange={(event) =>\n                        updateDateFilter(index, \"to\", event.target.value)\n                      }\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/components/craft-data-table-filters.d.cts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ThemeName } from '../theme/theme-context.cjs';
+import { CraftButtonProps } from './craft-button.cjs';
+
+type CraftDataTableFilterSelectOption = {
+    label: React.ReactNode;
+    value: string;
+};
+type CraftDataTableFilterSelect = {
+    key: string;
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    options: CraftDataTableFilterSelectOption[];
+    disabled?: boolean;
+};
+type CraftDataTableFilterDate = {
+    key: string;
+    label?: React.ReactNode;
+    from?: string;
+    to?: string;
+};
+type CraftDataTableFiltersProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    addButton?: {
+        label: React.ReactNode;
+        icon?: React.ReactNode | string;
+        variant?: CraftButtonProps["variant"];
+        size?: CraftButtonProps["size"];
+        disabled?: boolean;
+        onClick: () => void;
+    };
+    selectFilters?: CraftDataTableFilterSelect[];
+    onSelectFiltersChange?: (filters: CraftDataTableFilterSelect[]) => void;
+    dateFilters?: CraftDataTableFilterDate[];
+    onDateFiltersChange?: (filters: CraftDataTableFilterDate[]) => void;
+    showFilters?: boolean;
+    showClear?: boolean;
+    clearLabel?: React.ReactNode;
+    onClearFilters?: () => void;
+    showFileUpload?: boolean;
+    fileUploadAccept?: string;
+    fileUploadMaxSize?: number;
+    onFilesSelected?: (files: FileList) => void;
+    totalItems?: number;
+    itemLabel?: string;
+    tone?: ThemeName;
+    className?: string;
+};
+declare function CraftDataTableFilters({ title, description, searchValue, onSearchChange, searchPlaceholder, showSearch, addButton, selectFilters, onSelectFiltersChange, dateFilters, onDateFiltersChange, showFilters, showClear, clearLabel, onClearFilters, showFileUpload, fileUploadAccept, fileUploadMaxSize, onFilesSelected, totalItems, itemLabel, tone, className, }: CraftDataTableFiltersProps): react_jsx_runtime.JSX.Element;
+
+export { type CraftDataTableFilterDate, type CraftDataTableFilterSelect, type CraftDataTableFilterSelectOption, CraftDataTableFilters, type CraftDataTableFiltersProps };

package/dist/components/craft-data-table-filters.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ThemeName } from '../theme/theme-context.js';
+import { CraftButtonProps } from './craft-button.js';
+
+type CraftDataTableFilterSelectOption = {
+    label: React.ReactNode;
+    value: string;
+};
+type CraftDataTableFilterSelect = {
+    key: string;
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    options: CraftDataTableFilterSelectOption[];
+    disabled?: boolean;
+};
+type CraftDataTableFilterDate = {
+    key: string;
+    label?: React.ReactNode;
+    from?: string;
+    to?: string;
+};
+type CraftDataTableFiltersProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    addButton?: {
+        label: React.ReactNode;
+        icon?: React.ReactNode | string;
+        variant?: CraftButtonProps["variant"];
+        size?: CraftButtonProps["size"];
+        disabled?: boolean;
+        onClick: () => void;
+    };
+    selectFilters?: CraftDataTableFilterSelect[];
+    onSelectFiltersChange?: (filters: CraftDataTableFilterSelect[]) => void;
+    dateFilters?: CraftDataTableFilterDate[];
+    onDateFiltersChange?: (filters: CraftDataTableFilterDate[]) => void;
+    showFilters?: boolean;
+    showClear?: boolean;
+    clearLabel?: React.ReactNode;
+    onClearFilters?: () => void;
+    showFileUpload?: boolean;
+    fileUploadAccept?: string;
+    fileUploadMaxSize?: number;
+    onFilesSelected?: (files: FileList) => void;
+    totalItems?: number;
+    itemLabel?: string;
+    tone?: ThemeName;
+    className?: string;
+};
+declare function CraftDataTableFilters({ title, description, searchValue, onSearchChange, searchPlaceholder, showSearch, addButton, selectFilters, onSelectFiltersChange, dateFilters, onDateFiltersChange, showFilters, showClear, clearLabel, onClearFilters, showFileUpload, fileUploadAccept, fileUploadMaxSize, onFilesSelected, totalItems, itemLabel, tone, className, }: CraftDataTableFiltersProps): react_jsx_runtime.JSX.Element;
+
+export { type CraftDataTableFilterDate, type CraftDataTableFilterSelect, type CraftDataTableFilterSelectOption, CraftDataTableFilters, type CraftDataTableFiltersProps };

package/dist/components/craft-data-table-filters.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { CraftButton } from "../components/craft-button";
+import { CraftInput } from "../components/craft-input";
+import { CraftSelect } from "../components/craft-select";
+function CraftDataTableFilters({
+  title,
+  description,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  showSearch = true,
+  addButton,
+  selectFilters,
+  onSelectFiltersChange,
+  dateFilters,
+  onDateFiltersChange,
+  showFilters = true,
+  showClear = true,
+  clearLabel = "Clear filters",
+  onClearFilters,
+  showFileUpload = false,
+  fileUploadAccept,
+  fileUploadMaxSize,
+  onFilesSelected,
+  totalItems,
+  itemLabel = "items",
+  tone,
+  className
+}) {
+  var _a, _b;
+  const hasSelects = Boolean(selectFilters && selectFilters.length > 0);
+  const hasDates = Boolean(dateFilters && dateFilters.length > 0);
+  const hasFilters = showFilters && (hasSelects || hasDates);
+  const updateSelectFilter = (index, value) => {
+    if (!selectFilters || !onSelectFiltersChange) return;
+    const next = selectFilters.map(
+      (filter, idx) => idx === index ? { ...filter, value } : filter
+    );
+    onSelectFiltersChange(next);
+  };
+  const updateDateFilter = (index, key, value) => {
+    if (!dateFilters || !onDateFiltersChange) return;
+    const next = dateFilters.map(
+      (filter, idx) => idx === index ? { ...filter, [key]: value } : filter
+    );
+    onDateFiltersChange(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_12px_36px_rgba(0,0,0,0.2)] backdrop-blur-2xl",
+        className
+      ),
+      "data-nc-theme": tone,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
+            typeof totalItems === "number" && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: [
+              totalItems,
+              " ",
+              itemLabel
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            showFileUpload && /* @__PURE__ */ jsx(
+              CraftInput,
+              {
+                type: "file",
+                accept: fileUploadAccept,
+                onChange: (event) => {
+                  const files = event.target.files;
+                  if (!files || files.length === 0) return;
+                  if (typeof fileUploadMaxSize === "number" && files[0] && files[0].size > fileUploadMaxSize) {
+                    return;
+                  }
+                  onFilesSelected == null ? void 0 : onFilesSelected(files);
+                  event.currentTarget.value = "";
+                }
+              }
+            ),
+            addButton ? /* @__PURE__ */ jsx(
+              CraftButton,
+              {
+                type: "button",
+                variant: (_a = addButton.variant) != null ? _a : "outline",
+                size: (_b = addButton.size) != null ? _b : "sm",
+                disabled: addButton.disabled,
+                onClick: addButton.onClick,
+                children: addButton.label
+              }
+            ) : null,
+            showClear && onClearFilters ? /* @__PURE__ */ jsx(CraftButton, { type: "button", variant: "ghost", onClick: onClearFilters, children: clearLabel }) : null
+          ] })
+        ] }),
+        (showSearch || hasFilters) && /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-4", children: [
+          showSearch && /* @__PURE__ */ jsx(
+            CraftInput,
+            {
+              type: "search",
+              placeholder: searchPlaceholder,
+              value: searchValue != null ? searchValue : "",
+              onChange: (event) => onSearchChange == null ? void 0 : onSearchChange(event.target.value),
+              tone
+            }
+          ),
+          hasFilters && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [
+            selectFilters == null ? void 0 : selectFilters.map((filter, index) => /* @__PURE__ */ jsxs("label", { className: "grid gap-2 text-xs", children: [
+              filter.label ? /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: filter.label }) : null,
+              /* @__PURE__ */ jsxs(
+                CraftSelect,
+                {
+                  value: filter.value,
+                  disabled: filter.disabled,
+                  onChange: (event) => updateSelectFilter(index, event.target.value),
+                  children: [
+                    filter.placeholder ? /* @__PURE__ */ jsx("option", { value: "", children: filter.placeholder }) : null,
+                    filter.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, String(option.value)))
+                  ]
+                }
+              )
+            ] }, filter.key)),
+            dateFilters == null ? void 0 : dateFilters.map((filter, index) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxs("div", { className: "grid gap-2 text-xs", children: [
+                filter.label ? /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: filter.label }) : null,
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    CraftInput,
+                    {
+                      type: "date",
+                      value: (_a2 = filter.from) != null ? _a2 : "",
+                      onChange: (event) => updateDateFilter(index, "from", event.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CraftInput,
+                    {
+                      type: "date",
+                      value: (_b2 = filter.to) != null ? _b2 : "",
+                      onChange: (event) => updateDateFilter(index, "to", event.target.value)
+                    }
+                  )
+                ] })
+              ] }, filter.key);
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CraftDataTableFilters
+};
+//# sourceMappingURL=craft-data-table-filters.js.map

package/dist/components/craft-data-table-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-data-table-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftButton, type CraftButtonProps } from \"@/components/craft-button\";\nimport { CraftInput } from \"@/components/craft-input\";\nimport { CraftSelect } from \"@/components/craft-select\";\n\nexport type CraftDataTableFilterSelectOption = {\n  label: React.ReactNode;\n  value: string;\n};\n\nexport type CraftDataTableFilterSelect = {\n  key: string;\n  label?: React.ReactNode;\n  value: string;\n  placeholder?: string;\n  options: CraftDataTableFilterSelectOption[];\n  disabled?: boolean;\n};\n\nexport type CraftDataTableFilterDate = {\n  key: string;\n  label?: React.ReactNode;\n  from?: string;\n  to?: string;\n};\n\nexport type CraftDataTableFiltersProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  showSearch?: boolean;\n\n  addButton?: {\n    label: React.ReactNode;\n    icon?: React.ReactNode | string;\n    variant?: CraftButtonProps[\"variant\"];\n    size?: CraftButtonProps[\"size\"];\n    disabled?: boolean;\n    onClick: () => void;\n  };\n\n  selectFilters?: CraftDataTableFilterSelect[];\n  onSelectFiltersChange?: (filters: CraftDataTableFilterSelect[]) => void;\n\n  dateFilters?: CraftDataTableFilterDate[];\n  onDateFiltersChange?: (filters: CraftDataTableFilterDate[]) => void;\n\n  showFilters?: boolean;\n\n  showClear?: boolean;\n  clearLabel?: React.ReactNode;\n  onClearFilters?: () => void;\n\n  showFileUpload?: boolean;\n  fileUploadAccept?: string;\n  fileUploadMaxSize?: number;\n  onFilesSelected?: (files: FileList) => void;\n\n  totalItems?: number;\n  itemLabel?: string;\n\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftDataTableFilters({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  showSearch = true,\n  addButton,\n  selectFilters,\n  onSelectFiltersChange,\n  dateFilters,\n  onDateFiltersChange,\n  showFilters = true,\n  showClear = true,\n  clearLabel = \"Clear filters\",\n  onClearFilters,\n  showFileUpload = false,\n  fileUploadAccept,\n  fileUploadMaxSize,\n  onFilesSelected,\n  totalItems,\n  itemLabel = \"items\",\n  tone,\n  className,\n}: CraftDataTableFiltersProps) {\n  const hasSelects = Boolean(selectFilters && selectFilters.length > 0);\n  const hasDates = Boolean(dateFilters && dateFilters.length > 0);\n  const hasFilters = showFilters && (hasSelects || hasDates);\n\n  const updateSelectFilter = (index: number, value: string) => {\n    if (!selectFilters || !onSelectFiltersChange) return;\n    const next = selectFilters.map((filter, idx) =>\n      idx === index ? { ...filter, value } : filter\n    );\n    onSelectFiltersChange(next);\n  };\n\n  const updateDateFilter = (\n    index: number,\n    key: \"from\" | \"to\",\n    value: string\n  ) => {\n    if (!dateFilters || !onDateFiltersChange) return;\n    const next = dateFilters.map((filter, idx) =>\n      idx === index ? { ...filter, [key]: value } : filter\n    );\n    onDateFiltersChange(next);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_12px_36px_rgba(0,0,0,0.2)] backdrop-blur-2xl\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-4\">\n        <div>\n          {title && <h3 className=\"text-lg font-semibold\">{title}</h3>}\n          {description && (\n            <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">\n              {description}\n            </p>\n          )}\n          {typeof totalItems === \"number\" && (\n            <p className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">\n              {totalItems} {itemLabel}\n            </p>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-3\">\n          {showFileUpload && (\n            <CraftInput\n              type=\"file\"\n              accept={fileUploadAccept}\n              onChange={(event) => {\n                const files = event.target.files;\n                if (!files || files.length === 0) return;\n                if (\n                  typeof fileUploadMaxSize === \"number\" &&\n                  files[0] &&\n                  files[0].size > fileUploadMaxSize\n                ) {\n                  return;\n                }\n                onFilesSelected?.(files);\n                event.currentTarget.value = \"\";\n              }}\n            />\n          )}\n\n          {addButton ? (\n            <CraftButton\n              type=\"button\"\n              variant={addButton.variant ?? \"outline\"}\n              size={addButton.size ?? \"sm\"}\n              disabled={addButton.disabled}\n              onClick={addButton.onClick}\n            >\n              {addButton.label}\n            </CraftButton>\n          ) : null}\n\n          {showClear && onClearFilters ? (\n            <CraftButton type=\"button\" variant=\"ghost\" onClick={onClearFilters}>\n              {clearLabel}\n            </CraftButton>\n          ) : null}\n        </div>\n      </div>\n\n      {(showSearch || hasFilters) && (\n        <div className=\"mt-4 grid gap-4\">\n          {showSearch && (\n            <CraftInput\n              type=\"search\"\n              placeholder={searchPlaceholder}\n              value={searchValue ?? \"\"}\n              onChange={(event) => onSearchChange?.(event.target.value)}\n              tone={tone}\n            />\n          )}\n\n          {hasFilters && (\n            <div className=\"flex flex-wrap items-end gap-3\">\n              {selectFilters?.map((filter, index) => (\n                <label key={filter.key} className=\"grid gap-2 text-xs\">\n                  {filter.label ? (\n                    <span className=\"text-[rgb(var(--nc-fg-muted))]\">\n                      {filter.label}\n                    </span>\n                  ) : null}\n                  <CraftSelect\n                    value={filter.value}\n                    disabled={filter.disabled}\n                    onChange={(event) =>\n                      updateSelectFilter(index, event.target.value)\n                    }\n                  >\n                    {filter.placeholder ? (\n                      <option value=\"\">{filter.placeholder}</option>\n                    ) : null}\n                    {filter.options.map((option) => (\n                      <option key={String(option.value)} value={option.value}>\n                        {option.label}\n                      </option>\n                    ))}\n                  </CraftSelect>\n                </label>\n              ))}\n\n              {dateFilters?.map((filter, index) => (\n                <div key={filter.key} className=\"grid gap-2 text-xs\">\n                  {filter.label ? (\n                    <span className=\"text-[rgb(var(--nc-fg-muted))]\">\n                      {filter.label}\n                    </span>\n                  ) : null}\n                  <div className=\"flex items-center gap-2\">\n                    <CraftInput\n                      type=\"date\"\n                      value={filter.from ?? \"\"}\n                      onChange={(event) =>\n                        updateDateFilter(index, \"from\", event.target.value)\n                      }\n                    />\n                    <CraftInput\n                      type=\"date\"\n                      value={filter.to ?? \"\"}\n                      onChange={(event) =>\n                        updateDateFilter(index, \"to\", event.target.value)\n                      }\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_a","_b"]}

package/dist/components/craft-data-table-header.cjs

@@ -30,7 +30,7 @@ const paddingClasses = {
   comfortable: "px-8 py-5"
 };
 const variantClasses = {
-  default: "border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]",
+  default: "border-b border-[rgb(var(--nc-accent-1)/0.25)] bg-linear-to-r from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)]",
   minimal: "border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent"
 };
 function CraftDataTableHeader({

package/dist/components/craft-data-table-header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  variant?: \"default\" | \"minimal\";\n  padding?: \"compact\" | \"normal\" | \"comfortable\";\n  className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n  compact: \"px-4 py-3\",\n  normal: \"px-6 py-4\",\n  comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n  default:\n    \"border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]\",\n  minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n  title,\n  description,\n  actions,\n  filters,\n  tone,\n  variant = \"default\",\n  padding = \"normal\",\n  className,\n}: CraftDataTableHeaderProps) {\n  if (!title && !description && !actions && !filters) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-start justify-between gap-4\",\n        paddingClasses[padding],\n        variantClasses[variant],\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"space-y-1\">\n        {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n        {description ? (\n          <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {filters}\n        {actions}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDM;AAhDN,gBAAmB;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,qDAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,4CAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,4CAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,6CAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  variant?: \"default\" | \"minimal\";\n  padding?: \"compact\" | \"normal\" | \"comfortable\";\n  className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n  compact: \"px-4 py-3\",\n  normal: \"px-6 py-4\",\n  comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n  default:\n    \"border-b border-[rgb(var(--nc-accent-1)/0.25)] bg-linear-to-r from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)]\",\n  minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n  title,\n  description,\n  actions,\n  filters,\n  tone,\n  variant = \"default\",\n  padding = \"normal\",\n  className,\n}: CraftDataTableHeaderProps) {\n  if (!title && !description && !actions && !filters) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-start justify-between gap-4\",\n        paddingClasses[padding],\n        variantClasses[variant],\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"space-y-1\">\n        {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n        {description ? (\n          <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {filters}\n        {actions}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDM;AAhDN,gBAAmB;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,qDAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,4CAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,4CAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,6CAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/craft-data-table-header.js

@@ -7,7 +7,7 @@ const paddingClasses = {
   comfortable: "px-8 py-5"
 };
 const variantClasses = {
-  default: "border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]",
+  default: "border-b border-[rgb(var(--nc-accent-1)/0.25)] bg-linear-to-r from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)]",
   minimal: "border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent"
 };
 function CraftDataTableHeader({

package/dist/components/craft-data-table-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  variant?: \"default\" | \"minimal\";\n  padding?: \"compact\" | \"normal\" | \"comfortable\";\n  className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n  compact: \"px-4 py-3\",\n  normal: \"px-6 py-4\",\n  comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n  default:\n    \"border-b border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)]\",\n  minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n  title,\n  description,\n  actions,\n  filters,\n  tone,\n  variant = \"default\",\n  padding = \"normal\",\n  className,\n}: CraftDataTableHeaderProps) {\n  if (!title && !description && !actions && !filters) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-start justify-between gap-4\",\n        paddingClasses[padding],\n        variantClasses[variant],\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"space-y-1\">\n        {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n        {description ? (\n          <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {filters}\n        {actions}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoDM,SACW,KADX;AAhDN,SAAS,UAAU;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,oBAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,oBAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/craft-data-table-header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftDataTableHeaderProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  variant?: \"default\" | \"minimal\";\n  padding?: \"compact\" | \"normal\" | \"comfortable\";\n  className?: string;\n};\n\nconst paddingClasses: Record<NonNullable<CraftDataTableHeaderProps[\"padding\"]>, string> = {\n  compact: \"px-4 py-3\",\n  normal: \"px-6 py-4\",\n  comfortable: \"px-8 py-5\",\n};\n\nconst variantClasses: Record<NonNullable<CraftDataTableHeaderProps[\"variant\"]>, string> = {\n  default:\n    \"border-b border-[rgb(var(--nc-accent-1)/0.25)] bg-linear-to-r from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)]\",\n  minimal: \"border-b border-[rgb(var(--nc-border)/0.25)] bg-transparent\",\n};\n\nexport function CraftDataTableHeader({\n  title,\n  description,\n  actions,\n  filters,\n  tone,\n  variant = \"default\",\n  padding = \"normal\",\n  className,\n}: CraftDataTableHeaderProps) {\n  if (!title && !description && !actions && !filters) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-start justify-between gap-4\",\n        paddingClasses[padding],\n        variantClasses[variant],\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      <div className=\"space-y-1\">\n        {title ? <h3 className=\"text-lg font-semibold\">{title}</h3> : null}\n        {description ? (\n          <p className=\"text-sm text-[rgb(var(--nc-fg-muted))]\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex flex-wrap items-center gap-3\">\n        {filters}\n        {actions}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoDM,SACW,KADX;AAhDN,SAAS,UAAU;AAcnB,MAAM,iBAAoF;AAAA,EACxF,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEA,MAAM,iBAAoF;AAAA,EACxF,SACE;AAAA,EACF,SAAS;AACX;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AACF,GAA8B;AAC5B,MAAI,CAAC,SAAS,CAAC,eAAe,CAAC,WAAW,CAAC,QAAS,QAAO;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,OAAO;AAAA,QACtB,eAAe,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,aACZ;AAAA,kBAAQ,oBAAC,QAAG,WAAU,yBAAyB,iBAAM,IAAQ;AAAA,UAC7D,cACC,oBAAC,OAAE,WAAU,0CAA0C,uBAAY,IACjE;AAAA,WACN;AAAA,QACA,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/craft-data-table.cjs

@@ -338,9 +338,12 @@ function CraftDataTable({
     rowLoading[rowId] && "opacity-60"
   );
   const containerClasses = (0, import_cn.cn)(
-    "overflow-hidden rounded-3xl border border-[rgb(var(--nc-border)/0.3)]",
-    " shadow-[0_18px_50px_rgba(0,0,0,0.35)] backdrop-blur-2xl",
-    variant === "minimal" && "border-transparent bg-transparent shadow-none"
+    "relative overflow-hidden rounded-3xl border border-[rgb(var(--nc-border)/0.3)]",
+    "shadow-[0_18px_50px_rgba(0,0,0,0.35)] backdrop-blur-2xl",
+    variant === "minimal" ? "border-transparent bg-transparent shadow-none" : (0, import_cn.cn)(
+      "border-[rgb(var(--nc-accent-1)/0.35)]",
+      "bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)]"
+    )
   );
   const openModal = (content) => {
     if (!enableTextModal) return;
@@ -429,7 +432,7 @@ function CraftDataTable({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("overflow-x-auto", (loading || dataLoading) && "opacity-60"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "min-w-full border-collapse text-left text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg-muted))]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "bg-linear-to-r from-[rgb(var(--nc-accent-1)/0.08)] via-[rgb(var(--nc-accent-2)/0.05)] to-[rgb(var(--nc-accent-3)/0.08)] text-[rgb(var(--nc-fg-muted))]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
             resolvedSelectable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: (0, import_cn.cn)("w-12", headerPaddingClasses[density]), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center", children: bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_loader.CraftLoader, { loading: true, type: "spin", size: "small", color: loadingColor }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_craft_checkbox.CraftCheckbox,
               {
@@ -625,7 +628,7 @@ function CraftDataTable({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_modal.CraftModal, { open: showModal, onOpenChange: setShowModal, title: "Full Text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_modal.CraftModal, { open: showModal, onOpenChange: setShowModal, title: "Full Text", tone, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: "Full content" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-[rgb(var(--nc-fg))] whitespace-pre-wrap wrap-break-words", children: modalContent }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_button.CraftButton, { type: "button", variant: "ghost", onClick: closeModal, children: "Close" }) })