@tecsinapse/cortex-react 1.2.2-beta.0 → 1.2.2-beta.1

package/dist/cjs/components/BaseSnackbar.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const BaseSnackbar = React.forwardRef(
+  (props, ref) => {
+    const { children, show, variants } = props;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+exports.BaseSnackbar = BaseSnackbar;

package/dist/cjs/components/DefaultSnack.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var BaseSnackbar = require('./BaseSnackbar.js');
+var io = require('react-icons/io');
+
+const DefaultSnack = ({
+  text,
+  onDismiss,
+  variants
+}) => /* @__PURE__ */ React.createElement(BaseSnackbar.BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
+  io.IoMdInformationCircleOutline,
+  {
+    className: "w-[20px] h-[20px] shrink-0",
+    "data-testid": "icon-info"
+  }
+), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
+  io.IoMdClose,
+  {
+    "data-testid": "icon-close",
+    onClick: onDismiss,
+    size: 24,
+    className: "cursor-pointer w-[20px] h-[20px] shrink-0"
+  }
+)));
+
+exports.DefaultSnack = DefaultSnack;

package/dist/cjs/components/SearchInput.js

@@ -8,7 +8,7 @@ require('./Hint.js');
 var Input = require('./Input.js');
 require('./Modal.js');
 require('./Select.js');
-require('./Snackbar.js');
+require('./BaseSnackbar.js');
 require('./Tag.js');
 require('./Toggle.js');
 require('./TextArea.js');
@@ -18,6 +18,7 @@ require('clsx');
 require('../styles/progressBar.js');
 require('../styles/groupButton.js');
 require('./GroupButton.js');
+require('react-icons/io');
 var ai = require('react-icons/ai');
 var io5 = require('react-icons/io5');
 var useDebouncedState = require('../hooks/useDebouncedState.js');
@@ -48,7 +49,7 @@ const SearchInput = ({
       onClick(searchInput);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, null)), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
     Input.Input.Box,
     {
       placeholder,
@@ -68,7 +69,7 @@ const SearchInput = ({
       onClick: () => onClick(searchInput),
       disabled: !searchInput || isSubmitting
     },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, null)) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, null)
+    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(ai.AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-button" })
   ));
 };
 

package/dist/cjs/components/Select.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var Hint = require('./Hint.js');
-var io5 = require('react-icons/io5');
 var io = require('react-icons/io');
+var io5 = require('react-icons/io5');
+var Hint = require('./Hint.js');
 var SearchInput = require('./SearchInput.js');
 
 const { button, dropdown, groupedTitle, containerGrouped, hintBody } = cortexCore.selectVariants();
@@ -68,7 +68,7 @@ const Select = (props) => {
       onClick: () => setOpen((prevState) => !prevState),
       disabled
     },
-    /* @__PURE__ */ React.createElement("span", null, placeholder),
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
   ), /* @__PURE__ */ React.createElement(
     "ul",
@@ -93,7 +93,7 @@ const Select = (props) => {
         intent: variant
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, null) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
+    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(io.IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
   ));
 };
 

package/dist/cjs/components/Skeleton.js

@@ -12,6 +12,7 @@ const Skeleton = ({
     "div",
     {
       ...rest,
+      "data-testid": "skeleton",
       className: clsx("animate-pulse bg-secondary-light", className)
     },
     children

package/dist/cjs/components/Table.js

@@ -7,46 +7,40 @@ const THead = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("thead", { className: cortexCore.tHead({ className }), "data-testid": "thead", ...rest }, children);
 const TRow = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow({ className }), "data-testid": "trow", ...rest }, children);
 const THeadCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
 const TRowHeader = ({
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
 const TCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { className: cortexCore.tCell({ className }), "data-testid": "tcell", ...rest }, children);
 const TFoot = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tfoot", { className: cortexCore.tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
 const Table = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), ...rest }, children);
-const Hr = ({
-  children,
-  className,
-  ...rest
-}) => /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("table", { className: cortexCore.tRoot({ className }), "data-testid": "table", ...rest }, children);
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
 
-exports.Hr = Hr;
 exports.TCell = TCell;
 exports.TFoot = TFoot;
 exports.THead = THead;

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ var Hint = require('./components/Hint.js');
 var Input = require('./components/Input.js');
 var Modal = require('./components/Modal.js');
 var Select = require('./components/Select.js');
-var Snackbar = require('./components/Snackbar.js');
+var BaseSnackbar = require('./components/BaseSnackbar.js');
 var Tag = require('./components/Tag.js');
 var Toggle = require('./components/Toggle.js');
 var TextArea = require('./components/TextArea.js');
@@ -18,6 +18,9 @@ var Avatar = require('./components/Avatar.js');
 var Skeleton = require('./components/Skeleton.js');
 var ProgressBar = require('./components/ProgressBar.js');
 var GroupButton = require('./components/GroupButton.js');
+var DefaultSnack = require('./components/DefaultSnack.js');
+var SnackbarSonner = require('./service/SnackbarSonner.js');
+var useDebouncedState = require('./hooks/useDebouncedState.js');
 
 
 
@@ -34,11 +37,10 @@ exports.Right = Input.Right;
 exports.Root = Input.Root;
 exports.Modal = Modal.Modal;
 exports.Select = Select.Select;
-exports.Snackbar = Snackbar.Snackbar;
+exports.BaseSnackbar = BaseSnackbar.BaseSnackbar;
 exports.Tag = Tag.Tag;
 exports.Toggle = Toggle.Toggle;
 exports.TextArea = TextArea.TextArea;
-exports.Hr = Table.Hr;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
 exports.THead = Table.THead;
@@ -53,3 +55,6 @@ exports.Avatar = Avatar.Avatar;
 exports.Skeleton = Skeleton.Skeleton;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.GroupButton = GroupButton.GroupButton;
+exports.DefaultSnack = DefaultSnack.DefaultSnack;
+exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
+exports.useDebouncedState = useDebouncedState.useDebouncedState;

package/dist/cjs/service/SnackbarSonner.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var sonner = require('sonner');
+var React = require('react');
+require('../components/Badge.js');
+require('../components/Button.js');
+require('../components/Card.js');
+require('../components/Hint.js');
+require('../components/Input.js');
+require('../components/Modal.js');
+require('../components/Select.js');
+require('../components/BaseSnackbar.js');
+require('../components/Tag.js');
+require('../components/Toggle.js');
+require('../components/TextArea.js');
+require('@tecsinapse/cortex-core');
+require('react-icons/md');
+require('clsx');
+require('../styles/progressBar.js');
+require('../styles/groupButton.js');
+require('../components/GroupButton.js');
+var DefaultSnack = require('../components/DefaultSnack.js');
+
+class SnackbarSonner {
+  custom(Component, options) {
+    return sonner.toast.custom(() => Component, {
+      ...options,
+      duration: options?.duration ?? 5e3
+    });
+  }
+  show(type, message, options) {
+    return sonner.toast.custom(
+      (t) => {
+        return /* @__PURE__ */ React.createElement(
+          DefaultSnack.DefaultSnack,
+          {
+            text: message,
+            variants: { intent: type },
+            onDismiss: () => sonner.toast.dismiss(t)
+          }
+        );
+      },
+      { ...options, duration: options?.duration ?? 5e3 }
+    );
+  }
+}
+
+exports.SnackbarSonner = SnackbarSonner;

package/dist/esm/components/BaseSnackbar.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { snackbar } from '@tecsinapse/cortex-core';
+
+const BaseSnackbar = forwardRef(
+  (props, ref) => {
+    const { children, show, variants } = props;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement("div", { className: snackbar(variants), ref, "data-testid": "snackbar" }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+export { BaseSnackbar };

package/dist/esm/components/DefaultSnack.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BaseSnackbar } from './BaseSnackbar.js';
+import { IoMdInformationCircleOutline, IoMdClose } from 'react-icons/io';
+
+const DefaultSnack = ({
+  text,
+  onDismiss,
+  variants
+}) => /* @__PURE__ */ React.createElement(BaseSnackbar, { show: true, variants: { intent: variants?.intent } }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center flex-row gap-x-mili" }, /* @__PURE__ */ React.createElement(
+  IoMdInformationCircleOutline,
+  {
+    className: "w-[20px] h-[20px] shrink-0",
+    "data-testid": "icon-info"
+  }
+), /* @__PURE__ */ React.createElement("p", null, text), /* @__PURE__ */ React.createElement(
+  IoMdClose,
+  {
+    "data-testid": "icon-close",
+    onClick: onDismiss,
+    size: 24,
+    className: "cursor-pointer w-[20px] h-[20px] shrink-0"
+  }
+)));
+
+export { DefaultSnack };

package/dist/esm/components/SearchInput.js

@@ -6,7 +6,7 @@ import './Hint.js';
 import { Input } from './Input.js';
 import './Modal.js';
 import './Select.js';
-import './Snackbar.js';
+import './BaseSnackbar.js';
 import './Tag.js';
 import './Toggle.js';
 import './TextArea.js';
@@ -16,6 +16,7 @@ import 'clsx';
 import '../styles/progressBar.js';
 import '../styles/groupButton.js';
 import './GroupButton.js';
+import 'react-icons/io';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoSearchOutline } from 'react-icons/io5';
 import { useDebouncedState } from '../hooks/useDebouncedState.js';
@@ -46,7 +47,7 @@ const SearchInput = ({
       onClick(searchInput);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, null)), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(
     Input.Box,
     {
       placeholder,
@@ -66,7 +67,7 @@ const SearchInput = ({
       onClick: () => onClick(searchInput),
       disabled: !searchInput || isSubmitting
     },
-    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, null)) : /* @__PURE__ */ React.createElement(IoSearchOutline, null)
+    isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, { "data-testid": "icon-loading" })) : /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-button" })
   ));
 };
 

package/dist/esm/components/Select.js

@@ -1,8 +1,8 @@
 import { selectVariants, option } from '@tecsinapse/cortex-core';
 import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { Hint } from './Hint.js';
-import { IoChevronDownOutline } from 'react-icons/io5';
 import { IoIosCloseCircleOutline } from 'react-icons/io';
+import { IoChevronDownOutline } from 'react-icons/io5';
+import { Hint } from './Hint.js';
 import SearchInput from './SearchInput.js';
 
 const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
@@ -64,7 +64,7 @@ const Select = (props) => {
       onClick: () => setOpen((prevState) => !prevState),
       disabled
     },
-    /* @__PURE__ */ React.createElement("span", null, placeholder),
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
   ), /* @__PURE__ */ React.createElement(
     "ul",
@@ -89,7 +89,7 @@ const Select = (props) => {
         intent: variant
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, null) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
+    /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, { "data-testid": "select-hint-error-icon" }) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
   ));
 };
 

package/dist/esm/components/Skeleton.js

@@ -10,6 +10,7 @@ const Skeleton = ({
     "div",
     {
       ...rest,
+      "data-testid": "skeleton",
       className: clsx("animate-pulse bg-secondary-light", className)
     },
     children

package/dist/esm/components/Table.js

@@ -5,43 +5,38 @@ const THead = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), "data-testid": "thead", ...rest }, children);
 const TRow = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), "data-testid": "trow", ...rest }, children);
 const THeadCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), "data-testid": "thead-cell", ...rest }, children);
 const TRowHeader = ({
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow(), "data-testid": "trow-header" }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
 const TCell = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), "data-testid": "tcell", ...rest }, children);
 const TFoot = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), "data-testid": "tfoot", ...rest }, children);
 const Table = ({
   children,
   className,
   ...rest
-}) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), ...rest }, children);
-const Hr = ({
-  children,
-  className,
-  ...rest
-}) => /* @__PURE__ */ React.createElement("hr", { className: hr({ className }), ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), "data-testid": "table", ...rest }, children);
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
+}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
 
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };
+export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };

package/dist/esm/index.js

@@ -5,14 +5,17 @@ export { Hint } from './components/Hint.js';
 export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
 export { Modal } from './components/Modal.js';
 export { Select } from './components/Select.js';
-export { Snackbar } from './components/Snackbar.js';
+export { BaseSnackbar } from './components/BaseSnackbar.js';
 export { Tag } from './components/Tag.js';
 export { Toggle } from './components/Toggle.js';
 export { TextArea } from './components/TextArea.js';
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
+export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
 export { Drawer } from './components/Drawer.js';
 export { Breadcrumbs } from './components/Breadcrumbs.js';
 export { Avatar } from './components/Avatar.js';
 export { Skeleton } from './components/Skeleton.js';
 export { ProgressBar } from './components/ProgressBar.js';
 export { GroupButton } from './components/GroupButton.js';
+export { DefaultSnack } from './components/DefaultSnack.js';
+export { SnackbarSonner } from './service/SnackbarSonner.js';
+export { useDebouncedState } from './hooks/useDebouncedState.js';

package/dist/esm/service/SnackbarSonner.js

@@ -0,0 +1,46 @@
+import { toast } from 'sonner';
+import React from 'react';
+import '../components/Badge.js';
+import '../components/Button.js';
+import '../components/Card.js';
+import '../components/Hint.js';
+import '../components/Input.js';
+import '../components/Modal.js';
+import '../components/Select.js';
+import '../components/BaseSnackbar.js';
+import '../components/Tag.js';
+import '../components/Toggle.js';
+import '../components/TextArea.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/md';
+import 'clsx';
+import '../styles/progressBar.js';
+import '../styles/groupButton.js';
+import '../components/GroupButton.js';
+import { DefaultSnack } from '../components/DefaultSnack.js';
+
+class SnackbarSonner {
+  custom(Component, options) {
+    return toast.custom(() => Component, {
+      ...options,
+      duration: options?.duration ?? 5e3
+    });
+  }
+  show(type, message, options) {
+    return toast.custom(
+      (t) => {
+        return /* @__PURE__ */ React.createElement(
+          DefaultSnack,
+          {
+            text: message,
+            variants: { intent: type },
+            onDismiss: () => toast.dismiss(t)
+          }
+        );
+      },
+      { ...options, duration: options?.duration ?? 5e3 }
+    );
+  }
+}
+
+export { SnackbarSonner };

package/dist/types/components/BaseSnackbar.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+interface SnackbarProps {
+    variants?: SnackbarVariants;
+    children?: ReactNode;
+    show: boolean;
+}
+export declare const BaseSnackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/DefaultSnack.d.ts

@@ -0,0 +1,6 @@
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+export declare const DefaultSnack: ({ text, onDismiss, variants, }: {
+    text: string;
+    onDismiss: () => void;
+    variants?: SnackbarVariants;
+}) => JSX.Element;

package/dist/types/components/Table.d.ts

@@ -9,6 +9,5 @@ export declare const TRowHeader: ({ children, }: TableCommon & ThHTMLAttributes<
 export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;
-export declare const Hr: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLHRElement>) => JSX.Element;
 export declare const Td: ({ children, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export {};

package/dist/types/components/index.d.ts

@@ -5,7 +5,7 @@ export * from './Hint';
 export * from './Input';
 export * from './Modal';
 export { default as Select } from './Select';
-export * from './Snackbar';
+export * from './BaseSnackbar';
 export * from './Tag';
 export * from './Toggle';
 export * from './TextArea';
@@ -16,3 +16,4 @@ export * from './Avatar';
 export * from './Skeleton';
 export * from './ProgressBar';
 export * from './GroupButton';
+export * from './DefaultSnack';

package/dist/types/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './service';
+export * from './hooks';

package/dist/types/provider/SnackbarProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SnackbarSonner } from '../service';
+interface SnackbarProviderProps {
+    snackbar: SnackbarSonner;
+}
+export declare const SnackbarProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSnackbar: () => SnackbarProviderProps;
+export {};

package/dist/types/service/ISnackbar.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+export type TypeSnack = SnackbarVariants['intent'];
+export interface ISnackbar<T> {
+    show(type: TypeSnack, message: string, options?: T): any;
+    custom(component: ReactElement, options?: T): any;
+}

package/dist/types/service/SnackbarSonner.d.ts

@@ -0,0 +1,7 @@
+import { ExternalToast } from 'sonner';
+import React from 'react';
+import { ISnackbar, TypeSnack } from './ISnackbar';
+export declare class SnackbarSonner implements ISnackbar<ExternalToast> {
+    custom(Component: React.ReactElement, options?: ExternalToast): string | number;
+    show(type: TypeSnack, message: string, options?: Omit<ExternalToast, 'className' | 'style'>): string | number;
+}

package/dist/types/service/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SnackbarSonner';
+export * from './ISnackbar';

package/dist/types/tests/DefaultSnack.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/SearchInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Select.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Skeleton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Snackbar.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Table.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/useDebouncedState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.2.2-beta.0",
+  "version": "1.2.2-beta.1",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -18,9 +18,10 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@tecsinapse/cortex-core": "0.2.2-beta.0",
+    "@tecsinapse/cortex-core": "0.2.2-beta.1",
     "clsx": "*",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "sonner": "^1.5.0"
   },
   "repository": {
     "type": "git",
@@ -36,5 +37,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "c0748464b3ede06c6c907f81970fcc9eacf43bc0"
+  "gitHead": "81e9de94c71206e059fd761b95cbe35196099e70"
 }

package/dist/cjs/components/Snackbar.js

@@ -1,18 +0,0 @@
-'use strict';
-
-var React = require('react');
-var cortexCore = require('@tecsinapse/cortex-core');
-
-const Snackbar = React.forwardRef((props, ref) => {
-  const { children, show, variants } = props;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cortexCore.snackbar(variants),
-      ref
-    },
-    children
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
-});
-
-exports.Snackbar = Snackbar;

package/dist/esm/components/Snackbar.js

@@ -1,16 +0,0 @@
-import React, { forwardRef } from 'react';
-import { snackbar } from '@tecsinapse/cortex-core';
-
-const Snackbar = forwardRef((props, ref) => {
-  const { children, show, variants } = props;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: snackbar(variants),
-      ref
-    },
-    children
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
-});
-
-export { Snackbar };

package/dist/types/components/Snackbar.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { SnackbarVariants } from '@tecsinapse/cortex-core';
-interface SnackbarProps {
-    variants?: SnackbarVariants;
-    children: JSX.Element;
-    show: boolean;
-}
-export declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
-export {};