@jameskabz/nextcraft-ui 0.7.4 → 0.8.0

package/dist/components/craft-filter-bar.cjs

@@ -25,17 +25,44 @@ module.exports = __toCommonJS(craft_filter_bar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../utils/cn");
 var import_craft_input = require("../components/craft-input");
+var import_craft_select = require("../components/craft-select");
+var import_craft_button = require("../components/craft-button");
 function CraftFilterBar({
   title,
   description,
   searchValue,
   onSearchChange,
   searchPlaceholder = "Search...",
+  showSearch = true,
   actions,
-  filters,
+  selectFilters,
+  onSelectFiltersChange,
+  dateFilters,
+  onDateFiltersChange,
+  showFilters = true,
+  showClear = true,
+  clearLabel = "Clear filters",
+  onClearFilters,
   tone,
   className
 }) {
+  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",
     {
@@ -50,10 +77,13 @@ function CraftFilterBar({
             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 })
           ] }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: actions })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+            actions,
+            showClear && onClearFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_button.CraftButton, { type: "button", variant: "ghost", onClick: onClearFilters, children: clearLabel }) : null
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        (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",
@@ -63,7 +93,47 @@ function CraftFilterBar({
               tone
             }
           ),
-          filters && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center gap-3", children: filters })
+          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 _a, _b;
+              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: (_a = filter.from) != null ? _a : "",
+                      onChange: (event) => updateDateFilter(index, "from", event.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_craft_input.CraftInput,
+                    {
+                      type: "date",
+                      value: (_b = filter.to) != null ? _b : "",
+                      onChange: (event) => updateDateFilter(index, "to", event.target.value)
+                    }
+                  )
+                ] })
+              ] }, filter.key);
+            })
+          ] })
         ] })
       ]
     }

package/dist/components/craft-filter-bar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftInput } from \"@/components/craft-input\";\n\nexport type CraftFilterBarProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftFilterBar({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  actions,\n  filters,\n  tone,\n  className,\n}: CraftFilterBarProps) {\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        </div>\n        {actions && <div className=\"flex items-center gap-3\">{actions}</div>}\n      </div>\n      <div className=\"mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]\">\n        <CraftInput\n          type=\"search\"\n          placeholder={searchPlaceholder}\n          value={searchValue ?? \"\"}\n          onChange={(event) => onSearchChange?.(event.target.value)}\n          tone={tone}\n        />\n        {filters && <div className=\"flex flex-wrap items-center gap-3\">{filters}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCQ;AApCR,gBAAmB;AAEnB,yBAA2B;AAcpB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,qDAAC,SAAI,WAAU,qDACb;AAAA,uDAAC,SACE;AAAA,qBAAS,4CAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,YACtD,eACC,4CAAC,OAAE,WAAU,0CACV,uBACH;AAAA,aAEJ;AAAA,UACC,WAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,WAChE;AAAA,QACA,6CAAC,SAAI,WAAU,qDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAa;AAAA,cACb,OAAO,oCAAe;AAAA,cACtB,UAAU,CAAC,UAAU,iDAAiB,MAAM,OAAO;AAAA,cACnD;AAAA;AAAA,UACF;AAAA,UACC,WAAW,4CAAC,SAAI,WAAU,qCAAqC,mBAAQ;AAAA,WAC1E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/craft-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftInput } from \"@/components/craft-input\";\nimport { CraftSelect } from \"@/components/craft-select\";\nimport { CraftButton } from \"@/components/craft-button\";\n\nexport type CraftFilterSelectOption = {\n  label: React.ReactNode;\n  value: string;\n};\n\nexport type CraftFilterSelect = {\n  key: string;\n  label?: React.ReactNode;\n  value: string;\n  placeholder?: string;\n  options: CraftFilterSelectOption[];\n  disabled?: boolean;\n};\n\nexport type CraftFilterDate = {\n  key: string;\n  label?: React.ReactNode;\n  from?: string;\n  to?: string;\n};\n\nexport type CraftFilterBarProps = {\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  actions?: React.ReactNode;\n\n  selectFilters?: CraftFilterSelect[];\n  onSelectFiltersChange?: (filters: CraftFilterSelect[]) => void;\n\n  dateFilters?: CraftFilterDate[];\n  onDateFiltersChange?: (filters: CraftFilterDate[]) => void;\n\n  showFilters?: boolean;\n  showClear?: boolean;\n  clearLabel?: React.ReactNode;\n  onClearFilters?: () => void;\n\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftFilterBar({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  showSearch = true,\n  actions,\n  selectFilters,\n  onSelectFiltersChange,\n  dateFilters,\n  onDateFiltersChange,\n  showFilters = true,\n  showClear = true,\n  clearLabel = \"Clear filters\",\n  onClearFilters,\n  tone,\n  className,\n}: CraftFilterBarProps) {\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        </div>\n        <div className=\"flex items-center gap-3\">\n          {actions}\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":[]}

package/dist/components/craft-filter-bar.d.cts

@@ -2,17 +2,43 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ThemeName } from '../theme/theme-context.cjs';
 
+type CraftFilterSelectOption = {
+    label: React.ReactNode;
+    value: string;
+};
+type CraftFilterSelect = {
+    key: string;
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    options: CraftFilterSelectOption[];
+    disabled?: boolean;
+};
+type CraftFilterDate = {
+    key: string;
+    label?: React.ReactNode;
+    from?: string;
+    to?: string;
+};
 type CraftFilterBarProps = {
     title?: React.ReactNode;
     description?: React.ReactNode;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     searchPlaceholder?: string;
+    showSearch?: boolean;
     actions?: React.ReactNode;
-    filters?: React.ReactNode;
+    selectFilters?: CraftFilterSelect[];
+    onSelectFiltersChange?: (filters: CraftFilterSelect[]) => void;
+    dateFilters?: CraftFilterDate[];
+    onDateFiltersChange?: (filters: CraftFilterDate[]) => void;
+    showFilters?: boolean;
+    showClear?: boolean;
+    clearLabel?: React.ReactNode;
+    onClearFilters?: () => void;
     tone?: ThemeName;
     className?: string;
 };
-declare function CraftFilterBar({ title, description, searchValue, onSearchChange, searchPlaceholder, actions, filters, tone, className, }: CraftFilterBarProps): react_jsx_runtime.JSX.Element;
+declare function CraftFilterBar({ title, description, searchValue, onSearchChange, searchPlaceholder, showSearch, actions, selectFilters, onSelectFiltersChange, dateFilters, onDateFiltersChange, showFilters, showClear, clearLabel, onClearFilters, tone, className, }: CraftFilterBarProps): react_jsx_runtime.JSX.Element;
 
-export { CraftFilterBar, type CraftFilterBarProps };
+export { CraftFilterBar, type CraftFilterBarProps, type CraftFilterDate, type CraftFilterSelect, type CraftFilterSelectOption };

package/dist/components/craft-filter-bar.d.ts

@@ -2,17 +2,43 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ThemeName } from '../theme/theme-context.js';
 
+type CraftFilterSelectOption = {
+    label: React.ReactNode;
+    value: string;
+};
+type CraftFilterSelect = {
+    key: string;
+    label?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    options: CraftFilterSelectOption[];
+    disabled?: boolean;
+};
+type CraftFilterDate = {
+    key: string;
+    label?: React.ReactNode;
+    from?: string;
+    to?: string;
+};
 type CraftFilterBarProps = {
     title?: React.ReactNode;
     description?: React.ReactNode;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     searchPlaceholder?: string;
+    showSearch?: boolean;
     actions?: React.ReactNode;
-    filters?: React.ReactNode;
+    selectFilters?: CraftFilterSelect[];
+    onSelectFiltersChange?: (filters: CraftFilterSelect[]) => void;
+    dateFilters?: CraftFilterDate[];
+    onDateFiltersChange?: (filters: CraftFilterDate[]) => void;
+    showFilters?: boolean;
+    showClear?: boolean;
+    clearLabel?: React.ReactNode;
+    onClearFilters?: () => void;
     tone?: ThemeName;
     className?: string;
 };
-declare function CraftFilterBar({ title, description, searchValue, onSearchChange, searchPlaceholder, actions, filters, tone, className, }: CraftFilterBarProps): react_jsx_runtime.JSX.Element;
+declare function CraftFilterBar({ title, description, searchValue, onSearchChange, searchPlaceholder, showSearch, actions, selectFilters, onSelectFiltersChange, dateFilters, onDateFiltersChange, showFilters, showClear, clearLabel, onClearFilters, tone, className, }: CraftFilterBarProps): react_jsx_runtime.JSX.Element;
 
-export { CraftFilterBar, type CraftFilterBarProps };
+export { CraftFilterBar, type CraftFilterBarProps, type CraftFilterDate, type CraftFilterSelect, type CraftFilterSelectOption };

package/dist/components/craft-filter-bar.js

@@ -2,17 +2,44 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../utils/cn";
 import { CraftInput } from "../components/craft-input";
+import { CraftSelect } from "../components/craft-select";
+import { CraftButton } from "../components/craft-button";
 function CraftFilterBar({
   title,
   description,
   searchValue,
   onSearchChange,
   searchPlaceholder = "Search...",
+  showSearch = true,
   actions,
-  filters,
+  selectFilters,
+  onSelectFiltersChange,
+  dateFilters,
+  onDateFiltersChange,
+  showFilters = true,
+  showClear = true,
+  clearLabel = "Clear filters",
+  onClearFilters,
   tone,
   className
 }) {
+  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",
     {
@@ -27,10 +54,13 @@ function CraftFilterBar({
             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 })
           ] }),
-          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            actions,
+            showClear && onClearFilters ? /* @__PURE__ */ jsx(CraftButton, { type: "button", variant: "ghost", onClick: onClearFilters, children: clearLabel }) : null
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]", children: [
-          /* @__PURE__ */ jsx(
+        (showSearch || hasFilters) && /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-4", children: [
+          showSearch && /* @__PURE__ */ jsx(
             CraftInput,
             {
               type: "search",
@@ -40,7 +70,47 @@ function CraftFilterBar({
               tone
             }
           ),
-          filters && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3", children: filters })
+          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 _a, _b;
+              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: (_a = filter.from) != null ? _a : "",
+                      onChange: (event) => updateDateFilter(index, "from", event.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CraftInput,
+                    {
+                      type: "date",
+                      value: (_b = filter.to) != null ? _b : "",
+                      onChange: (event) => updateDateFilter(index, "to", event.target.value)
+                    }
+                  )
+                ] })
+              ] }, filter.key);
+            })
+          ] })
         ] })
       ]
     }

package/dist/components/craft-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftInput } from \"@/components/craft-input\";\n\nexport type CraftFilterBarProps = {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  actions?: React.ReactNode;\n  filters?: React.ReactNode;\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftFilterBar({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  actions,\n  filters,\n  tone,\n  className,\n}: CraftFilterBarProps) {\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        </div>\n        {actions && <div className=\"flex items-center gap-3\">{actions}</div>}\n      </div>\n      <div className=\"mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]\">\n        <CraftInput\n          type=\"search\"\n          placeholder={searchPlaceholder}\n          value={searchValue ?? \"\"}\n          onChange={(event) => onSearchChange?.(event.target.value)}\n          tone={tone}\n        />\n        {filters && <div className=\"flex flex-wrap items-center gap-3\">{filters}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAwCQ,SACY,KADZ;AApCR,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAcpB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,qDACb;AAAA,+BAAC,SACE;AAAA,qBAAS,oBAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,YACtD,eACC,oBAAC,OAAE,WAAU,0CACV,uBACH;AAAA,aAEJ;AAAA,UACC,WAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,WAChE;AAAA,QACA,qBAAC,SAAI,WAAU,qDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAa;AAAA,cACb,OAAO,oCAAe;AAAA,cACtB,UAAU,CAAC,UAAU,iDAAiB,MAAM,OAAO;AAAA,cACnD;AAAA;AAAA,UACF;AAAA,UACC,WAAW,oBAAC,SAAI,WAAU,qCAAqC,mBAAQ;AAAA,WAC1E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/craft-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftInput } from \"@/components/craft-input\";\nimport { CraftSelect } from \"@/components/craft-select\";\nimport { CraftButton } from \"@/components/craft-button\";\n\nexport type CraftFilterSelectOption = {\n  label: React.ReactNode;\n  value: string;\n};\n\nexport type CraftFilterSelect = {\n  key: string;\n  label?: React.ReactNode;\n  value: string;\n  placeholder?: string;\n  options: CraftFilterSelectOption[];\n  disabled?: boolean;\n};\n\nexport type CraftFilterDate = {\n  key: string;\n  label?: React.ReactNode;\n  from?: string;\n  to?: string;\n};\n\nexport type CraftFilterBarProps = {\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  actions?: React.ReactNode;\n\n  selectFilters?: CraftFilterSelect[];\n  onSelectFiltersChange?: (filters: CraftFilterSelect[]) => void;\n\n  dateFilters?: CraftFilterDate[];\n  onDateFiltersChange?: (filters: CraftFilterDate[]) => void;\n\n  showFilters?: boolean;\n  showClear?: boolean;\n  clearLabel?: React.ReactNode;\n  onClearFilters?: () => void;\n\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftFilterBar({\n  title,\n  description,\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Search...\",\n  showSearch = true,\n  actions,\n  selectFilters,\n  onSelectFiltersChange,\n  dateFilters,\n  onDateFiltersChange,\n  showFilters = true,\n  showClear = true,\n  clearLabel = \"Clear filters\",\n  onClearFilters,\n  tone,\n  className,\n}: CraftFilterBarProps) {\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        </div>\n        <div className=\"flex items-center gap-3\">\n          {actions}\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":[]}

package/dist/components/craft-loader.cjs

@@ -150,7 +150,7 @@ function CraftLoader({
   overlay = false,
   text,
   textPosition = "bottom",
-  backgroundColor = "rgba(0, 0, 0, 0.35)",
+  backgroundColor = "rgb(var(--nc-accent-soft)/0.7)",
   tone,
   className
 }) {

package/dist/components/craft-loader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-loader.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 CraftLoaderType =\n  | \"spin\"\n  | \"pulse\"\n  | \"bounce\"\n  | \"ripple\"\n  | \"bars\"\n  | \"dots\"\n  | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n  loading?: boolean;\n  type?: CraftLoaderType;\n  size?: CraftLoaderSize;\n  color?: string;\n  overlay?: boolean;\n  text?: React.ReactNode;\n  textPosition?: \"top\" | \"bottom\";\n  backgroundColor?: string;\n  tone?: ThemeName;\n  className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n  small: 16,\n  medium: 24,\n  large: 32,\n  xl: 40,\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n  return (\n    <svg\n      className=\"animate-spin\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke={color}\n        strokeWidth=\"4\"\n        className=\"opacity-25\"\n      />\n      <path\n        d=\"M4 12a8 8 0 018-8\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        className=\"opacity-75\"\n      />\n    </svg>\n  );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 120}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n  const barHeight = size;\n  const barWidth = Math.max(3, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-end gap-1\">\n      {[0, 1, 2, 3].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-pulse rounded-sm\"\n          style={{\n            width: barWidth,\n            height: barHeight - index * 4,\n            backgroundColor: color,\n            animationDelay: `${index * 100}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-pulse rounded-full\"\n      style={{ width: size, height: size, backgroundColor: color }}\n    />\n  );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex rounded-full border-2 animate-ping\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-spin rounded-full border-2 border-t-transparent\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 5));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 140}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CraftLoader({\n  loading = false,\n  type = \"dots\",\n  size = \"medium\",\n  color = \"rgb(var(--nc-accent-1))\",\n  overlay = false,\n  text,\n  textPosition = \"bottom\",\n  backgroundColor = \"rgba(0, 0, 0, 0.35)\",\n  tone,\n  className,\n}: CraftLoaderProps) {\n  if (!loading) return null;\n\n  const px = sizeMap[size];\n\n  const content = (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-3\",\n        textPosition === \"top\" && \"flex-col-reverse\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      {type === \"spin\" && <Spinner size={px} color={color} />}\n      {type === \"dots\" && <Dots size={px} color={color} />}\n      {type === \"bars\" && <Bars size={px} color={color} />}\n      {type === \"pulse\" && <Pulse size={px} color={color} />}\n      {type === \"ripple\" && <Ripple size={px} color={color} />}\n      {type === \"ring\" && <Ring size={px} color={color} />}\n      {type === \"bounce\" && <Bounce size={px} color={color} />}\n      {text ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n    </div>\n  );\n\n  if (!overlay) return content;\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center\"\n      style={{ backgroundColor }}\n      data-nc-theme={tone}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/craft-loader.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 CraftLoaderType =\n  | \"spin\"\n  | \"pulse\"\n  | \"bounce\"\n  | \"ripple\"\n  | \"bars\"\n  | \"dots\"\n  | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n  loading?: boolean;\n  type?: CraftLoaderType;\n  size?: CraftLoaderSize;\n  color?: string;\n  overlay?: boolean;\n  text?: React.ReactNode;\n  textPosition?: \"top\" | \"bottom\";\n  backgroundColor?: string;\n  tone?: ThemeName;\n  className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n  small: 16,\n  medium: 24,\n  large: 32,\n  xl: 40,\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n  return (\n    <svg\n      className=\"animate-spin\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke={color}\n        strokeWidth=\"4\"\n        className=\"opacity-25\"\n      />\n      <path\n        d=\"M4 12a8 8 0 018-8\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        className=\"opacity-75\"\n      />\n    </svg>\n  );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 120}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n  const barHeight = size;\n  const barWidth = Math.max(3, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-end gap-1\">\n      {[0, 1, 2, 3].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-pulse rounded-sm\"\n          style={{\n            width: barWidth,\n            height: barHeight - index * 4,\n            backgroundColor: color,\n            animationDelay: `${index * 100}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-pulse rounded-full\"\n      style={{ width: size, height: size, backgroundColor: color }}\n    />\n  );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex rounded-full border-2 animate-ping\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-spin rounded-full border-2 border-t-transparent\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 5));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 140}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CraftLoader({\n  loading = false,\n  type = \"dots\",\n  size = \"medium\",\n  color = \"rgb(var(--nc-accent-1))\",\n  overlay = false,\n  text,\n  textPosition = \"bottom\",\n  backgroundColor = \"rgb(var(--nc-accent-soft)/0.7)\",\n  tone,\n  className,\n}: CraftLoaderProps) {\n  if (!loading) return null;\n\n  const px = sizeMap[size];\n\n  const content = (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-3\",\n        textPosition === \"top\" && \"flex-col-reverse\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      {type === \"spin\" && <Spinner size={px} color={color} />}\n      {type === \"dots\" && <Dots size={px} color={color} />}\n      {type === \"bars\" && <Bars size={px} color={color} />}\n      {type === \"pulse\" && <Pulse size={px} color={color} />}\n      {type === \"ripple\" && <Ripple size={px} color={color} />}\n      {type === \"ring\" && <Ring size={px} color={color} />}\n      {type === \"bounce\" && <Bounce size={px} color={color} />}\n      {text ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n    </div>\n  );\n\n  if (!overlay) return content;\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center\"\n      style={{ backgroundColor }}\n      data-nc-theme={tone}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/craft-loader.js

@@ -127,7 +127,7 @@ function CraftLoader({
   overlay = false,
   text,
   textPosition = "bottom",
-  backgroundColor = "rgba(0, 0, 0, 0.35)",
+  backgroundColor = "rgb(var(--nc-accent-soft)/0.7)",
   tone,
   className
 }) {

package/dist/components/craft-loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-loader.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 CraftLoaderType =\n  | \"spin\"\n  | \"pulse\"\n  | \"bounce\"\n  | \"ripple\"\n  | \"bars\"\n  | \"dots\"\n  | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n  loading?: boolean;\n  type?: CraftLoaderType;\n  size?: CraftLoaderSize;\n  color?: string;\n  overlay?: boolean;\n  text?: React.ReactNode;\n  textPosition?: \"top\" | \"bottom\";\n  backgroundColor?: string;\n  tone?: ThemeName;\n  className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n  small: 16,\n  medium: 24,\n  large: 32,\n  xl: 40,\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n  return (\n    <svg\n      className=\"animate-spin\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke={color}\n        strokeWidth=\"4\"\n        className=\"opacity-25\"\n      />\n      <path\n        d=\"M4 12a8 8 0 018-8\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        className=\"opacity-75\"\n      />\n    </svg>\n  );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 120}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n  const barHeight = size;\n  const barWidth = Math.max(3, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-end gap-1\">\n      {[0, 1, 2, 3].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-pulse rounded-sm\"\n          style={{\n            width: barWidth,\n            height: barHeight - index * 4,\n            backgroundColor: color,\n            animationDelay: `${index * 100}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-pulse rounded-full\"\n      style={{ width: size, height: size, backgroundColor: color }}\n    />\n  );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex rounded-full border-2 animate-ping\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-spin rounded-full border-2 border-t-transparent\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 5));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 140}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CraftLoader({\n  loading = false,\n  type = \"dots\",\n  size = \"medium\",\n  color = \"rgb(var(--nc-accent-1))\",\n  overlay = false,\n  text,\n  textPosition = \"bottom\",\n  backgroundColor = \"rgba(0, 0, 0, 0.35)\",\n  tone,\n  className,\n}: CraftLoaderProps) {\n  if (!loading) return null;\n\n  const px = sizeMap[size];\n\n  const content = (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-3\",\n        textPosition === \"top\" && \"flex-col-reverse\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      {type === \"spin\" && <Spinner size={px} color={color} />}\n      {type === \"dots\" && <Dots size={px} color={color} />}\n      {type === \"bars\" && <Bars size={px} color={color} />}\n      {type === \"pulse\" && <Pulse size={px} color={color} />}\n      {type === \"ripple\" && <Ripple size={px} color={color} />}\n      {type === \"ring\" && <Ring size={px} color={color} />}\n      {type === \"bounce\" && <Bounce size={px} color={color} />}\n      {text ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n    </div>\n  );\n\n  if (!overlay) return content;\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center\"\n      style={{ backgroundColor }}\n      data-nc-theme={tone}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/craft-loader.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 CraftLoaderType =\n  | \"spin\"\n  | \"pulse\"\n  | \"bounce\"\n  | \"ripple\"\n  | \"bars\"\n  | \"dots\"\n  | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n  loading?: boolean;\n  type?: CraftLoaderType;\n  size?: CraftLoaderSize;\n  color?: string;\n  overlay?: boolean;\n  text?: React.ReactNode;\n  textPosition?: \"top\" | \"bottom\";\n  backgroundColor?: string;\n  tone?: ThemeName;\n  className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n  small: 16,\n  medium: 24,\n  large: 32,\n  xl: 40,\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n  return (\n    <svg\n      className=\"animate-spin\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke={color}\n        strokeWidth=\"4\"\n        className=\"opacity-25\"\n      />\n      <path\n        d=\"M4 12a8 8 0 018-8\"\n        stroke={color}\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        className=\"opacity-75\"\n      />\n    </svg>\n  );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 120}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n  const barHeight = size;\n  const barWidth = Math.max(3, Math.floor(size / 6));\n  return (\n    <div className=\"flex items-end gap-1\">\n      {[0, 1, 2, 3].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-pulse rounded-sm\"\n          style={{\n            width: barWidth,\n            height: barHeight - index * 4,\n            backgroundColor: color,\n            animationDelay: `${index * 100}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-pulse rounded-full\"\n      style={{ width: size, height: size, backgroundColor: color }}\n    />\n  );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex rounded-full border-2 animate-ping\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n  return (\n    <span\n      className=\"inline-flex animate-spin rounded-full border-2 border-t-transparent\"\n      style={{ width: size, height: size, borderColor: color }}\n    />\n  );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n  const dotSize = Math.max(4, Math.floor(size / 5));\n  return (\n    <div className=\"flex items-center gap-2\">\n      {[0, 1].map((index) => (\n        <span\n          key={index}\n          className=\"inline-flex animate-bounce rounded-full\"\n          style={{\n            width: dotSize,\n            height: dotSize,\n            backgroundColor: color,\n            animationDelay: `${index * 140}ms`,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function CraftLoader({\n  loading = false,\n  type = \"dots\",\n  size = \"medium\",\n  color = \"rgb(var(--nc-accent-1))\",\n  overlay = false,\n  text,\n  textPosition = \"bottom\",\n  backgroundColor = \"rgb(var(--nc-accent-soft)/0.7)\",\n  tone,\n  className,\n}: CraftLoaderProps) {\n  if (!loading) return null;\n\n  const px = sizeMap[size];\n\n  const content = (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center gap-3\",\n        textPosition === \"top\" && \"flex-col-reverse\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      {type === \"spin\" && <Spinner size={px} color={color} />}\n      {type === \"dots\" && <Dots size={px} color={color} />}\n      {type === \"bars\" && <Bars size={px} color={color} />}\n      {type === \"pulse\" && <Pulse size={px} color={color} />}\n      {type === \"ripple\" && <Ripple size={px} color={color} />}\n      {type === \"ring\" && <Ring size={px} color={color} />}\n      {type === \"bounce\" && <Bounce size={px} color={color} />}\n      {text ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n    </div>\n  );\n\n  if (!overlay) return content;\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center\"\n      style={{ backgroundColor }}\n      data-nc-theme={tone}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -33,6 +33,7 @@ __export(index_exports, {
   CraftCreateEditDrawer: () => import_craft_create_edit_drawer.CraftCreateEditDrawer,
   CraftCurrencyInput: () => import_craft_currency_input.CraftCurrencyInput,
   CraftDataTable: () => import_craft_data_table.CraftDataTable,
+  CraftDataTableFilters: () => import_craft_data_table_filters.CraftDataTableFilters,
   CraftDataTableHeader: () => import_craft_data_table_header.CraftDataTableHeader,
   CraftDataTablePagination: () => import_craft_data_table_pagination.CraftDataTablePagination,
   CraftDatePicker: () => import_craft_date_picker.CraftDatePicker,
@@ -110,6 +111,7 @@ var import_craft_confirm_dialog = require("./components/craft-confirm-dialog");
 var import_craft_create_edit_drawer = require("./components/craft-create-edit-drawer");
 var import_craft_filter_bar = require("./components/craft-filter-bar");
 var import_craft_table_toolbar = require("./components/craft-table-toolbar");
+var import_craft_data_table_filters = require("./components/craft-data-table-filters");
 var import_craft_data_table = require("./components/craft-data-table");
 var import_craft_data_table_header = require("./components/craft-data-table-header");
 var import_craft_data_table_pagination = require("./components/craft-data-table-pagination");
@@ -144,6 +146,7 @@ var import_theme_context = require("./theme/theme-context");
   CraftCreateEditDrawer,
   CraftCurrencyInput,
   CraftDataTable,
+  CraftDataTableFilters,
   CraftDataTableHeader,
   CraftDataTablePagination,
   CraftDatePicker,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { CraftButton } from \"./components/craft-button\";\nexport type { CraftButtonProps } from \"./components/craft-button\";\n\nexport { GlassCard } from \"./components/glass-card\";\nexport type { GlassCardProps } from \"./components/glass-card\";\n\nexport { CraftInput } from \"./components/craft-input\";\nexport type { CraftInputProps } from \"./components/craft-input\";\n\nexport { CraftTextarea } from \"./components/craft-textarea\";\nexport type { CraftTextareaProps } from \"./components/craft-textarea\";\n\nexport { CraftSelect } from \"./components/craft-select\";\nexport type { CraftSelectProps } from \"./components/craft-select\";\n\nexport { CraftCheckbox } from \"./components/craft-checkbox\";\nexport type { CraftCheckboxProps } from \"./components/craft-checkbox\";\n\nexport { CraftSwitch } from \"./components/craft-switch\";\nexport type { CraftSwitchProps } from \"./components/craft-switch\";\n\nexport { CraftBadge } from \"./components/craft-badge\";\nexport type { CraftBadgeProps } from \"./components/craft-badge\";\n\nexport { CraftAlert } from \"./components/craft-alert\";\nexport type { CraftAlertProps } from \"./components/craft-alert\";\n\nexport { CraftErrorState } from \"./components/craft-error-state\";\nexport type { CraftErrorStateProps } from \"./components/craft-error-state\";\n\nexport { CraftLoadingState } from \"./components/craft-loading-state\";\nexport type { CraftLoadingStateProps } from \"./components/craft-loading-state\";\n\nexport { CraftCard } from \"./components/craft-card\";\nexport type { CraftCardProps } from \"./components/craft-card\";\n\nexport { CraftModal } from \"./components/craft-modal\";\nexport type { CraftModalProps } from \"./components/craft-modal\";\n\nexport { CraftDrawer } from \"./components/craft-drawer\";\nexport type { CraftDrawerProps } from \"./components/craft-drawer\";\n\nexport { CraftTabs } from \"./components/craft-tabs\";\nexport type { CraftTabsProps } from \"./components/craft-tabs\";\n\nexport { CraftTooltip } from \"./components/craft-tooltip\";\nexport type { CraftTooltipProps } from \"./components/craft-tooltip\";\n\nexport { CraftToastHost, useCraftToast } from \"./components/craft-toast\";\nexport type { CraftToast, CraftToastHostProps } from \"./components/craft-toast\";\n\nexport { CraftSkeleton } from \"./components/craft-skeleton\";\nexport type { CraftSkeletonProps } from \"./components/craft-skeleton\";\n\nexport { CraftEmptyState } from \"./components/craft-empty-state\";\nexport type { CraftEmptyStateProps } from \"./components/craft-empty-state\";\n\nexport { CraftPopover } from \"./components/craft-popover\";\nexport type { CraftPopoverProps } from \"./components/craft-popover\";\n\nexport { CraftDropdownMenu } from \"./components/craft-dropdown-menu\";\nexport type { CraftDropdownMenuProps, CraftDropdownItem } from \"./components/craft-dropdown-menu\";\n\nexport { CraftCommandPalette } from \"./components/craft-command-palette\";\nexport type { CraftCommandPaletteProps, CraftCommandItem } from \"./components/craft-command-palette\";\n\nexport { CraftLink } from \"./components/craft-link\";\nexport type { CraftLinkProps } from \"./components/craft-link\";\n\nexport { CraftStatCard } from \"./components/craft-stat-card\";\nexport type { CraftStatCardProps } from \"./components/craft-stat-card\";\n\nexport { CraftDatePicker } from \"./components/craft-date-picker\";\nexport type { CraftDatePickerProps } from \"./components/craft-date-picker\";\n\nexport { CraftIcon, CraftIconProvider } from \"./components/craft-icon\";\nexport type {\n  CraftIconProps,\n  CraftIconProviderProps,\n  CraftIconRegistry,\n} from \"./components/craft-icon\";\n\nexport { CraftNumberInput } from \"./components/craft-number-input\";\nexport type { CraftNumberInputProps } from \"./components/craft-number-input\";\n\nexport { CraftCurrencyInput } from \"./components/craft-currency-input\";\nexport type { CraftCurrencyInputProps } from \"./components/craft-currency-input\";\n\nexport { CraftForm } from \"./components/craft-form\";\nexport type { CraftFormProps } from \"./components/craft-form\";\n\nexport { CraftFormModal } from \"./components/craft-form-modal\";\nexport type { CraftFormModalProps, CraftFormModalField } from \"./components/craft-form-modal\";\n\nexport { CraftFormField } from \"./components/craft-form-field\";\nexport type { CraftFormFieldProps, CraftFormFieldOption, CraftFormFieldType } from \"./components/craft-form-field\";\n\n\nexport { CraftConfirmDialog } from \"./components/craft-confirm-dialog\";\nexport type { CraftConfirmDialogProps } from \"./components/craft-confirm-dialog\";\n\nexport { CraftCreateEditDrawer } from \"./components/craft-create-edit-drawer\";\nexport type { CraftCreateEditDrawerProps } from \"./components/craft-create-edit-drawer\";\n\nexport { CraftFilterBar } from \"./components/craft-filter-bar\";\nexport type { CraftFilterBarProps } from \"./components/craft-filter-bar\";\n\nexport { CraftTableToolbar } from \"./components/craft-table-toolbar\";\nexport type { CraftTableToolbarProps } from \"./components/craft-table-toolbar\";\n\nexport { CraftDataTable } from \"./components/craft-data-table\";\nexport type {\n  CraftDataTableProps,\n  CraftDataTableColumn,\n  CraftDataTableSort,\n  CraftDataTableAction,\n} from \"./components/craft-data-table\";\nexport { CraftDataTableHeader } from \"./components/craft-data-table-header\";\nexport type { CraftDataTableHeaderProps } from \"./components/craft-data-table-header\";\nexport { CraftDataTablePagination } from \"./components/craft-data-table-pagination\";\nexport type { CraftDataTablePaginationProps } from \"./components/craft-data-table-pagination\";\nexport { CraftLoader } from \"./components/craft-loader\";\nexport type { CraftLoaderProps } from \"./components/craft-loader\";\n\nexport { CraftPagination } from \"./components/craft-pagination\";\nexport type { CraftPaginationProps } from \"./components/craft-pagination\";\n\nexport { AppShell } from \"./components/layout/app-shell\";\nexport type { AppShellProps } from \"./components/layout/app-shell\";\n\nexport { AppTemplate } from \"./components/layout/app-template\";\nexport type { AppTemplateProps } from \"./components/layout/app-template\";\n\nexport type {\n  LayoutConfig,\n  LayoutSidebarItem,\n  LayoutBreadcrumbItem,\n  LayoutIconName,\n} from \"./components/layout/layout-config\";\nexport { layoutConfigSchema } from \"./components/layout/layout-config\";\n\nexport { Sidebar } from \"./components/layout/sidebar\";\nexport type { SidebarProps, SidebarItem } from \"./components/layout/sidebar\";\n\nexport { TopNav } from \"./components/layout/top-nav\";\nexport type { TopNavProps } from \"./components/layout/top-nav\";\n\nexport { PageHeader } from \"./components/layout/page-header\";\nexport type { PageHeaderProps } from \"./components/layout/page-header\";\n\nexport { Breadcrumbs } from \"./components/layout/breadcrumbs\";\nexport type { BreadcrumbsProps, BreadcrumbItem } from \"./components/layout/breadcrumbs\";\n\nexport { AuthLayout } from \"./components/layout/auth-layout\";\nexport type { AuthLayoutProps } from \"./components/layout/auth-layout\";\n\nexport { Container } from \"./components/layout/container\";\nexport type { ContainerProps } from \"./components/layout/container\";\n\nexport { Grid } from \"./components/layout/grid\";\nexport type { GridProps } from \"./components/layout/grid\";\n\nexport { ThemeSwitcher } from \"./components/theme-switcher\";\nexport type { ThemeSwitcherProps } from \"./components/theme-switcher\";\n\nexport { ThemeProvider, useTheme } from \"./theme/theme-context\";\nexport type { ThemeName, ThemeMode } from \"./theme/theme-context\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;AAG5B,wBAA0B;AAG1B,yBAA2B;AAG3B,4BAA8B;AAG9B,0BAA4B;AAG5B,4BAA8B;AAG9B,0BAA4B;AAG5B,yBAA2B;AAG3B,yBAA2B;AAG3B,+BAAgC;AAGhC,iCAAkC;AAGlC,wBAA0B;AAG1B,yBAA2B;AAG3B,0BAA4B;AAG5B,wBAA0B;AAG1B,2BAA6B;AAG7B,yBAA8C;AAG9C,4BAA8B;AAG9B,+BAAgC;AAGhC,2BAA6B;AAG7B,iCAAkC;AAGlC,mCAAoC;AAGpC,wBAA0B;AAG1B,6BAA8B;AAG9B,+BAAgC;AAGhC,wBAA6C;AAO7C,gCAAiC;AAGjC,kCAAmC;AAGnC,wBAA0B;AAG1B,8BAA+B;AAG/B,8BAA+B;AAI/B,kCAAmC;AAGnC,sCAAsC;AAGtC,8BAA+B;AAG/B,iCAAkC;AAGlC,8BAA+B;AAO/B,qCAAqC;AAErC,yCAAyC;AAEzC,0BAA4B;AAG5B,8BAAgC;AAGhC,uBAAyB;AAGzB,0BAA4B;AAS5B,2BAAmC;AAEnC,qBAAwB;AAGxB,qBAAuB;AAGvB,yBAA2B;AAG3B,yBAA4B;AAG5B,yBAA2B;AAG3B,uBAA0B;AAG1B,kBAAqB;AAGrB,4BAA8B;AAG9B,2BAAwC;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { CraftButton } from \"./components/craft-button\";\nexport type { CraftButtonProps } from \"./components/craft-button\";\n\nexport { GlassCard } from \"./components/glass-card\";\nexport type { GlassCardProps } from \"./components/glass-card\";\n\nexport { CraftInput } from \"./components/craft-input\";\nexport type { CraftInputProps } from \"./components/craft-input\";\n\nexport { CraftTextarea } from \"./components/craft-textarea\";\nexport type { CraftTextareaProps } from \"./components/craft-textarea\";\n\nexport { CraftSelect } from \"./components/craft-select\";\nexport type { CraftSelectProps } from \"./components/craft-select\";\n\nexport { CraftCheckbox } from \"./components/craft-checkbox\";\nexport type { CraftCheckboxProps } from \"./components/craft-checkbox\";\n\nexport { CraftSwitch } from \"./components/craft-switch\";\nexport type { CraftSwitchProps } from \"./components/craft-switch\";\n\nexport { CraftBadge } from \"./components/craft-badge\";\nexport type { CraftBadgeProps } from \"./components/craft-badge\";\n\nexport { CraftAlert } from \"./components/craft-alert\";\nexport type { CraftAlertProps } from \"./components/craft-alert\";\n\nexport { CraftErrorState } from \"./components/craft-error-state\";\nexport type { CraftErrorStateProps } from \"./components/craft-error-state\";\n\nexport { CraftLoadingState } from \"./components/craft-loading-state\";\nexport type { CraftLoadingStateProps } from \"./components/craft-loading-state\";\n\nexport { CraftCard } from \"./components/craft-card\";\nexport type { CraftCardProps } from \"./components/craft-card\";\n\nexport { CraftModal } from \"./components/craft-modal\";\nexport type { CraftModalProps } from \"./components/craft-modal\";\n\nexport { CraftDrawer } from \"./components/craft-drawer\";\nexport type { CraftDrawerProps } from \"./components/craft-drawer\";\n\nexport { CraftTabs } from \"./components/craft-tabs\";\nexport type { CraftTabsProps } from \"./components/craft-tabs\";\n\nexport { CraftTooltip } from \"./components/craft-tooltip\";\nexport type { CraftTooltipProps } from \"./components/craft-tooltip\";\n\nexport { CraftToastHost, useCraftToast } from \"./components/craft-toast\";\nexport type { CraftToast, CraftToastHostProps } from \"./components/craft-toast\";\n\nexport { CraftSkeleton } from \"./components/craft-skeleton\";\nexport type { CraftSkeletonProps } from \"./components/craft-skeleton\";\n\nexport { CraftEmptyState } from \"./components/craft-empty-state\";\nexport type { CraftEmptyStateProps } from \"./components/craft-empty-state\";\n\nexport { CraftPopover } from \"./components/craft-popover\";\nexport type { CraftPopoverProps } from \"./components/craft-popover\";\n\nexport { CraftDropdownMenu } from \"./components/craft-dropdown-menu\";\nexport type { CraftDropdownMenuProps, CraftDropdownItem } from \"./components/craft-dropdown-menu\";\n\nexport { CraftCommandPalette } from \"./components/craft-command-palette\";\nexport type { CraftCommandPaletteProps, CraftCommandItem } from \"./components/craft-command-palette\";\n\nexport { CraftLink } from \"./components/craft-link\";\nexport type { CraftLinkProps } from \"./components/craft-link\";\n\nexport { CraftStatCard } from \"./components/craft-stat-card\";\nexport type { CraftStatCardProps } from \"./components/craft-stat-card\";\n\nexport { CraftDatePicker } from \"./components/craft-date-picker\";\nexport type { CraftDatePickerProps } from \"./components/craft-date-picker\";\n\nexport { CraftIcon, CraftIconProvider } from \"./components/craft-icon\";\nexport type {\n  CraftIconProps,\n  CraftIconProviderProps,\n  CraftIconRegistry,\n} from \"./components/craft-icon\";\n\nexport { CraftNumberInput } from \"./components/craft-number-input\";\nexport type { CraftNumberInputProps } from \"./components/craft-number-input\";\n\nexport { CraftCurrencyInput } from \"./components/craft-currency-input\";\nexport type { CraftCurrencyInputProps } from \"./components/craft-currency-input\";\n\nexport { CraftForm } from \"./components/craft-form\";\nexport type { CraftFormProps } from \"./components/craft-form\";\n\nexport { CraftFormModal } from \"./components/craft-form-modal\";\nexport type { CraftFormModalProps, CraftFormModalField } from \"./components/craft-form-modal\";\n\nexport { CraftFormField } from \"./components/craft-form-field\";\nexport type { CraftFormFieldProps, CraftFormFieldOption, CraftFormFieldType } from \"./components/craft-form-field\";\n\n\nexport { CraftConfirmDialog } from \"./components/craft-confirm-dialog\";\nexport type { CraftConfirmDialogProps } from \"./components/craft-confirm-dialog\";\n\nexport { CraftCreateEditDrawer } from \"./components/craft-create-edit-drawer\";\nexport type { CraftCreateEditDrawerProps } from \"./components/craft-create-edit-drawer\";\n\nexport { CraftFilterBar } from \"./components/craft-filter-bar\";\nexport type { CraftFilterBarProps } from \"./components/craft-filter-bar\";\n\nexport { CraftTableToolbar } from \"./components/craft-table-toolbar\";\nexport type { CraftTableToolbarProps } from \"./components/craft-table-toolbar\";\n\nexport { CraftDataTableFilters } from \"./components/craft-data-table-filters\";\nexport type {\n  CraftDataTableFiltersProps,\n  CraftDataTableFilterSelect,\n  CraftDataTableFilterSelectOption,\n  CraftDataTableFilterDate,\n} from \"./components/craft-data-table-filters\";\n\nexport { CraftDataTable } from \"./components/craft-data-table\";\nexport type {\n  CraftDataTableProps,\n  CraftDataTableColumn,\n  CraftDataTableSort,\n  CraftDataTableAction,\n} from \"./components/craft-data-table\";\nexport { CraftDataTableHeader } from \"./components/craft-data-table-header\";\nexport type { CraftDataTableHeaderProps } from \"./components/craft-data-table-header\";\nexport { CraftDataTablePagination } from \"./components/craft-data-table-pagination\";\nexport type { CraftDataTablePaginationProps } from \"./components/craft-data-table-pagination\";\nexport { CraftLoader } from \"./components/craft-loader\";\nexport type { CraftLoaderProps } from \"./components/craft-loader\";\n\nexport { CraftPagination } from \"./components/craft-pagination\";\nexport type { CraftPaginationProps } from \"./components/craft-pagination\";\n\nexport { AppShell } from \"./components/layout/app-shell\";\nexport type { AppShellProps } from \"./components/layout/app-shell\";\n\nexport { AppTemplate } from \"./components/layout/app-template\";\nexport type { AppTemplateProps } from \"./components/layout/app-template\";\n\nexport type {\n  LayoutConfig,\n  LayoutSidebarItem,\n  LayoutBreadcrumbItem,\n  LayoutIconName,\n} from \"./components/layout/layout-config\";\nexport { layoutConfigSchema } from \"./components/layout/layout-config\";\n\nexport { Sidebar } from \"./components/layout/sidebar\";\nexport type { SidebarProps, SidebarItem } from \"./components/layout/sidebar\";\n\nexport { TopNav } from \"./components/layout/top-nav\";\nexport type { TopNavProps } from \"./components/layout/top-nav\";\n\nexport { PageHeader } from \"./components/layout/page-header\";\nexport type { PageHeaderProps } from \"./components/layout/page-header\";\n\nexport { Breadcrumbs } from \"./components/layout/breadcrumbs\";\nexport type { BreadcrumbsProps, BreadcrumbItem } from \"./components/layout/breadcrumbs\";\n\nexport { AuthLayout } from \"./components/layout/auth-layout\";\nexport type { AuthLayoutProps } from \"./components/layout/auth-layout\";\n\nexport { Container } from \"./components/layout/container\";\nexport type { ContainerProps } from \"./components/layout/container\";\n\nexport { Grid } from \"./components/layout/grid\";\nexport type { GridProps } from \"./components/layout/grid\";\n\nexport { ThemeSwitcher } from \"./components/theme-switcher\";\nexport type { ThemeSwitcherProps } from \"./components/theme-switcher\";\n\nexport { ThemeProvider, useTheme } from \"./theme/theme-context\";\nexport type { ThemeName, ThemeMode } from \"./theme/theme-context\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;AAG5B,wBAA0B;AAG1B,yBAA2B;AAG3B,4BAA8B;AAG9B,0BAA4B;AAG5B,4BAA8B;AAG9B,0BAA4B;AAG5B,yBAA2B;AAG3B,yBAA2B;AAG3B,+BAAgC;AAGhC,iCAAkC;AAGlC,wBAA0B;AAG1B,yBAA2B;AAG3B,0BAA4B;AAG5B,wBAA0B;AAG1B,2BAA6B;AAG7B,yBAA8C;AAG9C,4BAA8B;AAG9B,+BAAgC;AAGhC,2BAA6B;AAG7B,iCAAkC;AAGlC,mCAAoC;AAGpC,wBAA0B;AAG1B,6BAA8B;AAG9B,+BAAgC;AAGhC,wBAA6C;AAO7C,gCAAiC;AAGjC,kCAAmC;AAGnC,wBAA0B;AAG1B,8BAA+B;AAG/B,8BAA+B;AAI/B,kCAAmC;AAGnC,sCAAsC;AAGtC,8BAA+B;AAG/B,iCAAkC;AAGlC,sCAAsC;AAQtC,8BAA+B;AAO/B,qCAAqC;AAErC,yCAAyC;AAEzC,0BAA4B;AAG5B,8BAAgC;AAGhC,uBAAyB;AAGzB,0BAA4B;AAS5B,2BAAmC;AAEnC,qBAAwB;AAGxB,qBAAuB;AAGvB,yBAA2B;AAG3B,yBAA4B;AAG5B,yBAA2B;AAG3B,uBAA0B;AAG1B,kBAAqB;AAGrB,4BAA8B;AAG9B,2BAAwC;","names":[]}

package/dist/index.d.cts

@@ -33,6 +33,7 @@ export { CraftConfirmDialog, CraftConfirmDialogProps } from './components/craft-
 export { CraftCreateEditDrawer, CraftCreateEditDrawerProps } from './components/craft-create-edit-drawer.cjs';
 export { CraftFilterBar, CraftFilterBarProps } from './components/craft-filter-bar.cjs';
 export { CraftTableToolbar, CraftTableToolbarProps } from './components/craft-table-toolbar.cjs';
+export { CraftDataTableFilterDate, CraftDataTableFilterSelect, CraftDataTableFilterSelectOption, CraftDataTableFilters, CraftDataTableFiltersProps } from './components/craft-data-table-filters.cjs';
 export { CraftDataTable, CraftDataTableAction, CraftDataTableColumn, CraftDataTableProps, CraftDataTableSort } from './components/craft-data-table.cjs';
 export { CraftDataTableHeader, CraftDataTableHeaderProps } from './components/craft-data-table-header.cjs';
 export { CraftDataTablePagination, CraftDataTablePaginationProps } from './components/craft-data-table-pagination.cjs';

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { CraftConfirmDialog, CraftConfirmDialogProps } from './components/craft-
 export { CraftCreateEditDrawer, CraftCreateEditDrawerProps } from './components/craft-create-edit-drawer.js';
 export { CraftFilterBar, CraftFilterBarProps } from './components/craft-filter-bar.js';
 export { CraftTableToolbar, CraftTableToolbarProps } from './components/craft-table-toolbar.js';
+export { CraftDataTableFilterDate, CraftDataTableFilterSelect, CraftDataTableFilterSelectOption, CraftDataTableFilters, CraftDataTableFiltersProps } from './components/craft-data-table-filters.js';
 export { CraftDataTable, CraftDataTableAction, CraftDataTableColumn, CraftDataTableProps, CraftDataTableSort } from './components/craft-data-table.js';
 export { CraftDataTableHeader, CraftDataTableHeaderProps } from './components/craft-data-table-header.js';
 export { CraftDataTablePagination, CraftDataTablePaginationProps } from './components/craft-data-table-pagination.js';

package/dist/index.js

@@ -33,6 +33,7 @@ import { CraftConfirmDialog } from "./components/craft-confirm-dialog";
 import { CraftCreateEditDrawer } from "./components/craft-create-edit-drawer";
 import { CraftFilterBar } from "./components/craft-filter-bar";
 import { CraftTableToolbar } from "./components/craft-table-toolbar";
+import { CraftDataTableFilters } from "./components/craft-data-table-filters";
 import { CraftDataTable } from "./components/craft-data-table";
 import { CraftDataTableHeader } from "./components/craft-data-table-header";
 import { CraftDataTablePagination } from "./components/craft-data-table-pagination";
@@ -66,6 +67,7 @@ export {
   CraftCreateEditDrawer,
   CraftCurrencyInput,
   CraftDataTable,
+  CraftDataTableFilters,
   CraftDataTableHeader,
   CraftDataTablePagination,
   CraftDatePicker,