@arkyn/components 3.0.1-beta.23 → 3.0.1-beta.24

package/README.md

@@ -111,6 +111,7 @@ function App() {
 - **useHydrated** - Check if component is hydrated
 - **useScopedParams** - URL parameter utilities
 - **useScrollLock** - Prevent page scrolling
+- **useToast** - Toast state management
 
 ## 🎨 Component Examples
 

package/dist/components/tab/tabContainer/index.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from "react";
 import "./styles.css";
-type TabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "children" | "ref"> & {
+type TabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onChange" | "children" | "ref" | "onClick"> & {
     children: ReactNode;
     disabled?: boolean;
     defaultValue?: string;

package/dist/components/tab/tabContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC3B,cAAc,CAAC,WAAW,CAAC,EAC3B,SAAS,GAAG,UAAU,GAAG,KAAK,CAC/B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC3B,cAAc,CAAC,WAAW,CAAC,EAC3B,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,CAC5C,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Custom hook to access toast functionality from ToastProvider context
+ *
+ * @returns Object containing toast methods and state
+ * @returns {function} showToast - Function to display toast notifications
+ *
+ * @throws {Error} Throws an error if used outside of ToastProvider
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleSuccess = () => {
+ *     showToast({
+ *       message: 'Operation completed successfully!',
+ *       type: 'success'
+ *     });
+ *   };
+ *
+ *   const handleError = () => {
+ *     showToast({
+ *       message: 'Something went wrong!',
+ *       type: 'danger'
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSuccess}>Success Toast</button>
+ *       <button onClick={handleError}>Error Toast</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Using in async operations:
+ * ```tsx
+ * function FormComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleSubmit = async (data) => {
+ *     try {
+ *       await submitForm(data);
+ *       showToast({
+ *         message: 'Form submitted successfully!',
+ *         type: 'success'
+ *       });
+ *     } catch (error) {
+ *       showToast({
+ *         message: 'Failed to submit form',
+ *         type: 'danger'
+ *       });
+ *     }
+ *   };
+ *
+ *   return <form onSubmit={handleSubmit}>...</form>;
+ * }
+ * ```
+ */
+declare function useToast(): {
+    showToast(toast: {
+        message: string;
+        type: "success" | "danger";
+    }): void;
+};
+export { useToast };
+//# sourceMappingURL=useToast.d.ts.map

package/dist/hooks/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,QAAQ;;;;;EAQhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/hooks/useToast.js

@@ -0,0 +1,72 @@
+import { toastContext } from "../providers/toastProvider";
+import { useContext } from "react";
+/**
+ * Custom hook to access toast functionality from ToastProvider context
+ *
+ * @returns Object containing toast methods and state
+ * @returns {function} showToast - Function to display toast notifications
+ *
+ * @throws {Error} Throws an error if used outside of ToastProvider
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleSuccess = () => {
+ *     showToast({
+ *       message: 'Operation completed successfully!',
+ *       type: 'success'
+ *     });
+ *   };
+ *
+ *   const handleError = () => {
+ *     showToast({
+ *       message: 'Something went wrong!',
+ *       type: 'danger'
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSuccess}>Success Toast</button>
+ *       <button onClick={handleError}>Error Toast</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Using in async operations:
+ * ```tsx
+ * function FormComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleSubmit = async (data) => {
+ *     try {
+ *       await submitForm(data);
+ *       showToast({
+ *         message: 'Form submitted successfully!',
+ *         type: 'success'
+ *       });
+ *     } catch (error) {
+ *       showToast({
+ *         message: 'Failed to submit form',
+ *         type: 'danger'
+ *       });
+ *     }
+ *   };
+ *
+ *   return <form onSubmit={handleSubmit}>...</form>;
+ * }
+ * ```
+ */
+function useToast() {
+    const contextData = useContext(toastContext);
+    if (Object.entries(contextData).length === 0) {
+        throw new Error("useToast must be used within a Provider");
+    }
+    return contextData;
+}
+export { useToast };

package/dist/providers/toastProvider.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+type ToastProps = {
+    message: string;
+    type: "success" | "danger";
+};
+type ToastContextProps = {
+    showToast(toast: ToastProps): void;
+};
+type ToastProviderProps = {
+    children: ReactNode;
+};
+declare const toastContext: import("react").Context<ToastContextProps>;
+/**
+ * ToastProvider component - provides toast context for managing toast notifications
+ *
+ * @param props - ToastProvider component properties
+ * @param props.children - React elements that will have access to the toast context
+ *
+ * @returns ToastProvider JSX element that wraps children with toast context
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ *
+ * @example
+ * Using toast in component:
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleClick = () => {
+ *     showToast({
+ *       message: 'Success!',
+ *       type: 'success'
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleClick}>Show Toast</button>;
+ * }
+ * ```
+ */
+declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export { toastContext, ToastProvider };
+//# sourceMappingURL=toastProvider.d.ts.map

package/dist/providers/toastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastProvider.d.ts","sourceRoot":"","sources":["../../src/providers/toastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC5B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,YAAY,4CAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2CtD;AAED,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/providers/toastProvider.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext } from "react";
+import toast, { Toaster } from "react-hot-toast";
+const toastContext = createContext({});
+/**
+ * ToastProvider component - provides toast context for managing toast notifications
+ *
+ * @param props - ToastProvider component properties
+ * @param props.children - React elements that will have access to the toast context
+ *
+ * @returns ToastProvider JSX element that wraps children with toast context
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ *
+ * @example
+ * Using toast in component:
+ * ```tsx
+ * function MyComponent() {
+ *   const { showToast } = useToast();
+ *
+ *   const handleClick = () => {
+ *     showToast({
+ *       message: 'Success!',
+ *       type: 'success'
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleClick}>Show Toast</button>;
+ * }
+ * ```
+ */
+function ToastProvider({ children }) {
+    function showToast(props) {
+        switch (props.type) {
+            case "success":
+                return toast.success(props.message, {
+                    style: {
+                        background: "#10B981",
+                        color: "#ffffff",
+                        padding: "12px 16px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                    },
+                    iconTheme: {
+                        primary: "#059669",
+                        secondary: "#ffffff",
+                    },
+                });
+            case "danger":
+                return toast.error(props.message, {
+                    style: {
+                        background: "#E11D48",
+                        color: "#ffffff",
+                        padding: "12px 16px",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                    },
+                    iconTheme: {
+                        primary: "#BE123C",
+                        secondary: "#ffffff",
+                    },
+                });
+        }
+    }
+    return (_jsxs(toastContext.Provider, { value: { showToast }, children: [_jsx(Toaster, { position: "top-right", containerStyle: { zIndex: 999999999999999 } }), children] }));
+}
+export { toastContext, ToastProvider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "3.0.1-beta.23",
+  "version": "3.0.1-beta.24",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -33,7 +33,8 @@
   "dependencies": {
     "@react-google-maps/api": "^2.20.7",
     "@react-input/mask": "^1.2.15",
-    "framer-motion": "^11.18.2"
+    "framer-motion": "^11.18.2",
+    "react-hot-toast": "^2.6.0"
   },
   "peerDependencies": {
     "react": ">=18.3.1",