feat: add closeIcon option

docs/src/content/docs/toast.mdx

@@ -108,6 +108,7 @@ The `toast.variant` function accepts the following options:
 | `text`          | Notification title                            | `string`                                                                      | ✅       |
 | `description`   | Toast's description                           | `string`                                                                      | -        |
 | `icon`          | Icon to display in the toast                  | `ReactNode`                                                                   | -        |
+| `closeIcon`     | Icon to change Close text                     | `ReactNode`                                                                   | -        |
 | `delayDuration` | Duration before the toast disappears          | `number` (default: `4000`)                                                    | -        |
 | `theme`         | Theme of the toast                            | `Theme` (default: `system`): `light`, `dark` or `system`                      | -        |
 | `action`        | Show a _Action_ button and execute a function | `label` (default text: `action`) & `onClick`: `() => void` or `Promise<void>` | -        |

examples/nextjs/src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { testAction, testErrorAction } from '@/actions/testAction';
 import { toast } from '@pheralb/toast';
-import { PartyPopperIcon } from 'lucide-react';
+import { PartyPopperIcon, XCircle } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useState } from 'react';
 
@@ -20,6 +20,15 @@ export default function Home() {
     });
   };
 
+  const renderToastWithCloseIcon = () => {
+    toast.default({
+      closeIcon: <XCircle width={18} height={18} />,
+      text: 'Rendered toast!',
+      description: 'This is a toast with close icon!',
+      delayDuration: duration,
+    });
+  };
+
   const renderToastWithIcon = () => {
     toast.default({
       text: 'Rendered toast without icon',
@@ -111,6 +120,12 @@ export default function Home() {
       <button className={buttonStyles} onClick={() => testLoading()}>
         Test Loading with Next.js Server Action
       </button>
+
+      <button className={buttonStyles} onClick={() => renderToastWithCloseIcon()}>
+        Test with close icon
+      </button>
+
+
     </>
   );
 }

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pheralb/toast",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "author": "@pheralb_",
   "keywords": [
     "react",

library/src/components/toast.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState, type FC } from 'react';
+import '../styles/toast-component.css';
 import type {
   Position,
   ToastPropsWithLoading,
   Variant,
 } from '../types/toast.types';
-import '../styles/toast-component.css';
 
-import { Error, Info, Loading, Success, Warning } from '../icons';
 import { useTimeout } from '../hooks/useTimeout';
+import { Error, Info, Loading, Success, Warning } from '../icons';
 import { classNames, prefersReducedMotion } from '../utils';
 
 const icons: Record<Variant, FC<React.SVGProps<SVGSVGElement>>> = {
@@ -16,6 +16,7 @@ const icons: Record<Variant, FC<React.SVGProps<SVGSVGElement>>> = {
   warning: Warning,
   info: Info,
   loading: Loading,
+
 };
 
 const iconsColors: Record<Variant, string> = {
@@ -24,6 +25,7 @@ const iconsColors: Record<Variant, string> = {
   warning: '#eab308',
   info: '#3b82f6',
   loading: 'currentColor',
+
 };
 
 interface ToastComponentProps extends ToastPropsWithLoading {
@@ -174,7 +176,11 @@ const Toast = (props: ToastComponentProps) => {
           </button>
         )}
         <button onClick={handleCloseToast} title="Close toast">
-          Close
+          {props.closeIcon ?
+            props.closeIcon
+            : 'Close'
+          }
+
         </button>
       </div>
     </div>

library/src/icons/index.tsx

@@ -30,4 +30,14 @@ const Loading: FC<ComponentProps<'svg'>> = (props) => (
   </svg>
 );
 
-export { Success, Warning, Error, Info, Loading };
+
+const Close: FC<ComponentProps<'svg'>> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path fill="currentColor" d="M10.03 8.97a.75.75 0 0 0-1.06 1.06L10.94 12l-1.97 1.97a.75.75 0 1 0 1.06 1.06L12 13.06l1.97 1.97a.75.75 0 0 0 1.06-1.06L13.06 12l1.97-1.97a.75.75 0 1 0-1.06-1.06L12 10.94z"></path><path fill="currentColor" fillRule="evenodd" d="M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75S22.75 17.937 22.75 12S17.937 1.25 12 1.25M2.75 12a9.25 9.25 0 1 1 18.5 0a9.25 9.25 0 0 1-18.5 0" clipRule="evenodd"></path>
+  </svg>
+);
+
+
+
+export { Close, Error, Info, Loading, Success, Warning };
+

library/src/types/toast.types.ts

@@ -21,17 +21,18 @@ export type ToastProps = {
   text: string;
   description?: string;
   icon?: ReactNode;
+  closeIcon?: ReactNode;
   delayDuration?: number;
   theme?: Theme;
   action?: Action;
 };
 
 export interface LoadingType {
   promise:
-    | (() => Promise<void>)
-    | Promise<void>
-    | (() => Promise<any>)
-    | Promise<unknown>;
+  | (() => Promise<void>)
+  | Promise<void>
+  | (() => Promise<any>)
+  | Promise<unknown>;
   success: string;
   error: string;
   autoDismiss: boolean;