@jameskabz/nextcraft-ui 0.7.5 → 0.8.1

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":";AA6GQ,SACY,KADZ;AAzGR,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAiDrB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,aAAa,QAAQ,iBAAiB,cAAc,SAAS,CAAC;AACpE,QAAM,WAAW,QAAQ,eAAe,YAAY,SAAS,CAAC;AAC9D,QAAM,aAAa,gBAAgB,cAAc;AAEjD,QAAM,qBAAqB,CAAC,OAAe,UAAkB;AAC3D,QAAI,CAAC,iBAAiB,CAAC,sBAAuB;AAC9C,UAAM,OAAO,cAAc;AAAA,MAAI,CAAC,QAAQ,QACtC,QAAQ,QAAQ,EAAE,GAAG,QAAQ,MAAM,IAAI;AAAA,IACzC;AACA,0BAAsB,IAAI;AAAA,EAC5B;AAEA,QAAM,mBAAmB,CACvB,OACA,KACA,UACG;AACH,QAAI,CAAC,eAAe,CAAC,oBAAqB;AAC1C,UAAM,OAAO,YAAY;AAAA,MAAI,CAAC,QAAQ,QACpC,QAAQ,QAAQ,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,MAAM,IAAI;AAAA,IAChD;AACA,wBAAoB,IAAI;AAAA,EAC1B;AAEA,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,UACA,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,YACA,aAAa,iBACZ,oBAAC,eAAY,MAAK,UAAS,SAAQ,SAAQ,SAAS,gBACjD,sBACH,IACE;AAAA,aACN;AAAA,WACF;AAAA,SAEE,cAAc,eACd,qBAAC,SAAI,WAAU,mBACZ;AAAA,wBACC;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,UAGD,cACC,qBAAC,SAAI,WAAU,kCACZ;AAAA,2DAAe,IAAI,CAAC,QAAQ,UAC3B,qBAAC,WAAuB,WAAU,sBAC/B;AAAA,qBAAO,QACN,oBAAC,UAAK,WAAU,kCACb,iBAAO,OACV,IACE;AAAA,cACJ;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,OAAO;AAAA,kBACd,UAAU,OAAO;AAAA,kBACjB,UAAU,CAAC,UACT,mBAAmB,OAAO,MAAM,OAAO,KAAK;AAAA,kBAG7C;AAAA,2BAAO,cACN,oBAAC,YAAO,OAAM,IAAI,iBAAO,aAAY,IACnC;AAAA,oBACH,OAAO,QAAQ,IAAI,CAAC,WACnB,oBAAC,YAAkC,OAAO,OAAO,OAC9C,iBAAO,SADG,OAAO,OAAO,KAAK,CAEhC,CACD;AAAA;AAAA;AAAA,cACH;AAAA,iBArBU,OAAO,GAsBnB;AAAA,YAGD,2CAAa,IAAI,CAAC,QAAQ,UAAO;AAvKhD;AAwKgB,0CAAC,SAAqB,WAAU,sBAC7B;AAAA,uBAAO,QACN,oBAAC,UAAK,WAAU,kCACb,iBAAO,OACV,IACE;AAAA,gBACJ,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,QAAO,YAAO,SAAP,YAAe;AAAA,sBACtB,UAAU,CAAC,UACT,iBAAiB,OAAO,QAAQ,MAAM,OAAO,KAAK;AAAA;AAAA,kBAEtD;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,QAAO,YAAO,OAAP,YAAa;AAAA,sBACpB,UAAU,CAAC,UACT,iBAAiB,OAAO,MAAM,MAAM,OAAO,KAAK;AAAA;AAAA,kBAEpD;AAAA,mBACF;AAAA,mBArBQ,OAAO,GAsBjB;AAAA;AAAA,aAEJ;AAAA,WAEJ;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/craft-toast.cjs

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,81 +16,67 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var craft_toast_exports = {};
 __export(craft_toast_exports, {
-  CraftToastHost: () => CraftToastHost,
-  useCraftToast: () => useCraftToast
+  CraftToaster: () => CraftToaster,
+  toast: () => import_toast2.toast,
+  useCraftToast: () => import_toast2.useCraftToast,
+  useToaster: () => import_toast2.useToaster
 });
 module.exports = __toCommonJS(craft_toast_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"), 1);
 var import_cn = require("../utils/cn");
+var import_toast = require("@/lib/toast");
+var import_toast2 = require("@/lib/toast");
 const variantClasses = {
   info: "border-[color:rgb(var(--nc-accent-1)/0.4)]",
   success: "border-emerald-400/40",
   warning: "border-amber-400/40",
   error: "border-rose-400/40"
 };
-function useCraftToast() {
-  const [toasts, setToasts] = React.useState([]);
-  const push = React.useCallback((toast) => {
-    const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-    setToasts((prev) => [...prev, { ...toast, id }]);
-    return id;
-  }, []);
-  const remove = React.useCallback((id) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
-  }, []);
-  return { toasts, push, remove };
-}
-function CraftToastHost({ toasts, onDismiss, tone }) {
+function CraftToaster({ tone, className }) {
+  const toasts = (0, import_toast.useToaster)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: "fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3",
+      className: (0, import_cn.cn)(
+        "fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3",
+        className
+      ),
       "data-nc-theme": tone,
-      children: toasts.map((toast) => {
-        var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: (0, import_cn.cn)(
-              "rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl",
-              variantClasses[(_a = toast.variant) != null ? _a : "info"]
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold", children: toast.title }),
-                toast.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: toast.description })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  className: "text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]",
-                  onClick: () => onDismiss(toast.id),
-                  children: "\u2715"
-                }
-              )
-            ] })
-          },
-          toast.id
-        );
-      })
+      children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: (0, import_cn.cn)(
+            "rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl",
+            variantClasses[(0, import_toast.normalizeVariant)(toast2.variant)]
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 flex-1", children: toast2.custom ? toast2.custom : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              toast2.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold", children: toast2.title }),
+              toast2.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: toast2.description })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]",
+                onClick: () => (0, import_toast.removeToast)(toast2.id),
+                children: "\u2715"
+              }
+            )
+          ] })
+        },
+        toast2.id
+      ))
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CraftToastHost,
-  useCraftToast
+  CraftToaster,
+  toast,
+  useCraftToast,
+  useToaster
 });
 //# sourceMappingURL=craft-toast.cjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/craft-toast.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 CraftToastVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport type CraftToast = {\n  id: string;\n  title: string;\n  description?: string;\n  variant?: CraftToastVariant;\n};\n\nconst variantClasses: Record<CraftToastVariant, string> = {\n  info: \"border-[color:rgb(var(--nc-accent-1)/0.4)]\",\n  success: \"border-emerald-400/40\",\n  warning: \"border-amber-400/40\",\n  error: \"border-rose-400/40\",\n};\n\nexport function useCraftToast() {\n  const [toasts, setToasts] = React.useState<CraftToast[]>([]);\n\n  const push = React.useCallback((toast: Omit<CraftToast, \"id\">) => {\n    const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;\n    setToasts((prev) => [...prev, { ...toast, id }]);\n    return id;\n  }, []);\n\n  const remove = React.useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  return { toasts, push, remove };\n}\n\nexport type CraftToastHostProps = {\n  toasts: CraftToast[];\n  onDismiss: (id: string) => void;\n  tone?: ThemeName;\n};\n\nexport function CraftToastHost({ toasts, onDismiss, tone }: CraftToastHostProps) {\n  return (\n    <div\n      className=\"fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3\"\n      data-nc-theme={tone}\n    >\n      {toasts.map((toast) => (\n        <div\n          key={toast.id}\n          className={cn(\n            \"rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl\",\n            variantClasses[toast.variant ?? \"info\"]\n          )}\n        >\n          <div className=\"flex items-start justify-between gap-4\">\n            <div>\n              <p className=\"text-sm font-semibold\">{toast.title}</p>\n              {toast.description && (\n                <p className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{toast.description}</p>\n              )}\n            </div>\n            <button\n              className=\"text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]\"\n              onClick={() => onDismiss(toast.id)}\n            >\n              ✕\n            </button>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DY;AA1DZ,YAAuB;AAEvB,gBAAmB;AAYnB,MAAM,iBAAoD;AAAA,EACxD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEO,SAAS,gBAAgB;AAC9B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAuB,CAAC,CAAC;AAE3D,QAAM,OAAO,MAAM,YAAY,CAAC,UAAkC;AAChE,UAAM,KAAK,GAAG,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC;AAC/D,cAAU,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;AAC/C,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,MAAM,YAAY,CAAC,OAAe;AAC/C,cAAU,CAAC,SAAS,KAAK,OAAO,CAAC,UAAU,MAAM,OAAO,EAAE,CAAC;AAAA,EAC7D,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,QAAQ,MAAM,OAAO;AAChC;AAQO,SAAS,eAAe,EAAE,QAAQ,WAAW,KAAK,GAAwB;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAe;AAAA,MAEd,iBAAO,IAAI,CAAC,UAAO;AAnD1B;AAoDQ;AAAA,UAAC;AAAA;AAAA,YAEC,eAAW;AAAA,cACT;AAAA,cACA,gBAAe,WAAM,YAAN,YAAiB,MAAM;AAAA,YACxC;AAAA,YAEA,uDAAC,SAAI,WAAU,0CACb;AAAA,2DAAC,SACC;AAAA,4DAAC,OAAE,WAAU,yBAAyB,gBAAM,OAAM;AAAA,gBACjD,MAAM,eACL,4CAAC,OAAE,WAAU,0CAA0C,gBAAM,aAAY;AAAA,iBAE7E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAS,MAAM,UAAU,MAAM,EAAE;AAAA,kBAClC;AAAA;AAAA,cAED;AAAA,eACF;AAAA;AAAA,UAnBK,MAAM;AAAA,QAoBb;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/craft-toast.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport {\n  normalizeVariant,\n  removeToast,\n  useToaster,\n  type CraftToastCustomOptions,\n  type CraftToastOptions,\n  type CraftToastVariant,\n} from \"@/lib/toast\";\n\nexport { useCraftToast, useToaster, toast } from \"@/lib/toast\";\nexport type { CraftToastOptions, CraftToastCustomOptions, CraftToastVariant };\n\nconst variantClasses: Record<Exclude<CraftToastVariant, \"danger\">, string> = {\n  info: \"border-[color:rgb(var(--nc-accent-1)/0.4)]\",\n  success: \"border-emerald-400/40\",\n  warning: \"border-amber-400/40\",\n  error: \"border-rose-400/40\",\n};\n\nexport type CraftToasterProps = {\n  tone?: ThemeName;\n  className?: string;\n};\n\nexport function CraftToaster({ tone, className }: CraftToasterProps) {\n  const toasts = useToaster();\n\n  return (\n    <div\n      className={cn(\n        \"fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3\",\n        className\n      )}\n      data-nc-theme={tone}\n    >\n      {toasts.map((toast) => (\n        <div\n          key={toast.id}\n          className={cn(\n            \"rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl\",\n            variantClasses[normalizeVariant(toast.variant)]\n          )}\n        >\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"min-w-0 flex-1\">\n              {toast.custom ? (\n                toast.custom\n              ) : (\n                <>\n                  {toast.title && <p className=\"text-sm font-semibold\">{toast.title}</p>}\n                  {toast.description && (\n                    <p className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">\n                      {toast.description}\n                    </p>\n                  )}\n                </>\n              )}\n            </div>\n            <button\n              className=\"text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]\"\n              onClick={() => removeToast(toast.id)}\n            >\n              ✕\n            </button>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDgB;AAlDhB,gBAAmB;AAEnB,mBAOO;AAEP,IAAAA,gBAAiD;AAGjD,MAAM,iBAAuE;AAAA,EAC3E,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAOO,SAAS,aAAa,EAAE,MAAM,UAAU,GAAsB;AACnE,QAAM,aAAS,yBAAW;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MAEd,iBAAO,IAAI,CAACC,WACX;AAAA,QAAC;AAAA;AAAA,UAEC,eAAW;AAAA,YACT;AAAA,YACA,mBAAe,+BAAiBA,OAAM,OAAO,CAAC;AAAA,UAChD;AAAA,UAEA,uDAAC,SAAI,WAAU,0CACb;AAAA,wDAAC,SAAI,WAAU,kBACZ,UAAAA,OAAM,SACLA,OAAM,SAEN,4EACG;AAAA,cAAAA,OAAM,SAAS,4CAAC,OAAE,WAAU,yBAAyB,UAAAA,OAAM,OAAM;AAAA,cACjEA,OAAM,eACL,4CAAC,OAAE,WAAU,0CACV,UAAAA,OAAM,aACT;AAAA,eAEJ,GAEJ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,UAAM,0BAAYA,OAAM,EAAE;AAAA,gBACpC;AAAA;AAAA,YAED;AAAA,aACF;AAAA;AAAA,QA3BKA,OAAM;AAAA,MA4Bb,CACD;AAAA;AAAA,EACH;AAEJ;","names":["import_toast","toast"]}

package/dist/components/craft-toast.d.cts

@@ -1,24 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeName } from '../theme/theme-context.cjs';
+import 'react/jsx-runtime';
+import '../theme/theme-context.cjs';
+export { a as CraftToastCustomOptions, b as CraftToastOptions, c as CraftToastVariant, d as CraftToaster, e as CraftToasterProps, t as toast, u as useCraftToast, f as useToaster } from '../craft-toast-C7rMmROV.cjs';
 import 'react';
-
-type CraftToastVariant = "info" | "success" | "warning" | "error";
-type CraftToast = {
-    id: string;
-    title: string;
-    description?: string;
-    variant?: CraftToastVariant;
-};
-declare function useCraftToast(): {
-    toasts: CraftToast[];
-    push: (toast: Omit<CraftToast, "id">) => string;
-    remove: (id: string) => void;
-};
-type CraftToastHostProps = {
-    toasts: CraftToast[];
-    onDismiss: (id: string) => void;
-    tone?: ThemeName;
-};
-declare function CraftToastHost({ toasts, onDismiss, tone }: CraftToastHostProps): react_jsx_runtime.JSX.Element;
-
-export { type CraftToast, CraftToastHost, type CraftToastHostProps, type CraftToastVariant, useCraftToast };

package/dist/components/craft-toast.d.ts

@@ -1,24 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeName } from '../theme/theme-context.js';
+import 'react/jsx-runtime';
+import '../theme/theme-context.js';
+export { a as CraftToastCustomOptions, b as CraftToastOptions, c as CraftToastVariant, d as CraftToaster, e as CraftToasterProps, t as toast, u as useCraftToast, f as useToaster } from '../craft-toast-BcscwgO3.js';
 import 'react';
-
-type CraftToastVariant = "info" | "success" | "warning" | "error";
-type CraftToast = {
-    id: string;
-    title: string;
-    description?: string;
-    variant?: CraftToastVariant;
-};
-declare function useCraftToast(): {
-    toasts: CraftToast[];
-    push: (toast: Omit<CraftToast, "id">) => string;
-    remove: (id: string) => void;
-};
-type CraftToastHostProps = {
-    toasts: CraftToast[];
-    onDismiss: (id: string) => void;
-    tone?: ThemeName;
-};
-declare function CraftToastHost({ toasts, onDismiss, tone }: CraftToastHostProps): react_jsx_runtime.JSX.Element;
-
-export { type CraftToast, CraftToastHost, type CraftToastHostProps, type CraftToastVariant, useCraftToast };