@arkyn/components 3.0.1-beta.9 → 3.0.1-beta.90

package/dist/hooks/useModal.d.ts

@@ -1,5 +1,75 @@
-import { ModalContextProps } from "@arkyn/types";
+import { ModalContextProps } from "../providers/modalProvider";
 type OpenModalProps<T = any> = (data?: T) => void;
+/**
+ * useModal hook - provides access to modal context for managing modal state and data
+ *
+ * @param key - Optional modal identifier key. When provided, returns functions for a specific modal
+ *
+ * @returns When called without key: Complete modal context with all modal management functions
+ * @returns When called with key: Object containing modal-specific functions:
+ * - `modalIsOpen`: Boolean indicating if the specific modal is open
+ * - `modalData`: Data associated with the specific modal
+ * - `openModal`: Function to open the specific modal with optional data
+ * - `closeModal`: Function to close the specific modal
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - access to full modal context
+ * function ModalManager() {
+ *   const modalContext = useModal();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => modalContext.openModal('user-details', { id: 1 })}>
+ *         Open User Modal
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Usage with specific modal key
+ * function UserModal() {
+ *   const { modalIsOpen, modalData, openModal, closeModal } = useModal('user-details');
+ *
+ *   return (
+ *     <Modal isOpen={modalIsOpen} onClose={closeModal}>
+ *       <h2>User Details</h2>
+ *       <p>User ID: {modalData?.id}</p>
+ *       <button onClick={closeModal}>Close</button>
+ *     </Modal>
+ *   );
+ * }
+ *
+ * // Usage with typed data
+ * interface UserData {
+ *   id: number;
+ *   name: string;
+ *   email: string;
+ * }
+ *
+ * function UserProfileModal() {
+ *   const { modalIsOpen, modalData, closeModal } = useModal<UserData>('user-profile');
+ *
+ *   return (
+ *     <Modal isOpen={modalIsOpen} onClose={closeModal}>
+ *       <h2>{modalData?.name}</h2>
+ *       <p>Email: {modalData?.email}</p>
+ *     </Modal>
+ *   );
+ * }
+ *
+ * // Usage with ModalProvider
+ * function App() {
+ *   return (
+ *     <ModalProvider>
+ *       <UserModal />
+ *       <UserProfileModal />
+ *       <ModalManager />
+ *     </ModalProvider>
+ *   );
+ * }
+ * ```
+ */
 declare function useModal<T = any>(): ModalContextProps<T>;
 declare function useModal<T = any>(key: string): {
     modalIsOpen: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAKjD,KAAK,cAAc,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACnD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,EACvB,GAAG,EAAE,MAAM,GACV;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,CAAC,CAAC;IACb,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA6BF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,KAAK,cAAc,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEH,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,KAAK,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACnD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,EACvB,GAAG,EAAE,MAAM,GACV;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,CAAC,CAAC;IACb,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA6BF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/hooks/useModal.js

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import { ModalContext } from "../context/ModalContext";
+import { modalContext } from "../providers/modalProvider";
 function useModal(key) {
-    const contextData = useContext(ModalContext);
+    const contextData = useContext(modalContext);
     if (Object.entries(contextData).length === 0) {
         throw new Error("useModal must be used within a Provider");
     }

package/dist/hooks/useScopedParams.d.ts

@@ -1,5 +1,87 @@
 type ParamsType = Record<string, string | number | boolean | undefined>;
-declare function useScopedParams(scope?: string): {
+/**
+ * Utility function to manage URL search parameters with optional scoping.
+ * Provides functionality to get parameters and generate updated search strings
+ * while maintaining existing parameters.
+ *
+ * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
+ * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
+ *
+ * @returns Object containing parameter management functions:
+ * @returns getParam - Function to get a parameter value by key (considers scope if provided)
+ * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
+ *
+ * @example
+ * ```tsx
+ * // Basic usage without scope
+ * const searchString = "page=1&filter=active";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString);
+ *
+ * // Get a parameter value
+ * const page = getParam('page'); // Returns "1"
+ * const filter = getParam('filter'); // Returns "active"
+ *
+ * // Generate search string with new/updated parameters
+ * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
+ * // Result: "?page=2&filter=active&sort=name"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with scope
+ * const searchString = "filters:status=active&filters:category=tech&page=1";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
+ *
+ * // Get a scoped parameter value
+ * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
+ * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
+ *
+ * // Generate search string with scoped parameters
+ * const newSearch = getScopedSearch({
+ *   status: 'inactive',
+ *   category: 'sports',
+ *   price: 100,
+ *   discount: undefined // This will remove 'filters:discount' from URL if it exists
+ * });
+ * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Real-world usage with React Router
+ * import { useLocation, useNavigate } from 'react-router-dom';
+ *
+ * function ProductFilter() {
+ *   const location = useLocation();
+ *   const navigate = useNavigate();
+ *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
+ *
+ *   const handleFilterChange = (newFilters: Record<string, any>) => {
+ *     const searchString = getScopedSearch(newFilters);
+ *     navigate({ search: searchString });
+ *   };
+ *
+ *   const currentCategory = getParam('category');
+ *   const currentPrice = getParam('price');
+ *
+ *   return (
+ *     <div>
+ *       <p>Current category: {currentCategory || 'All'}</p>
+ *       <p>Current price filter: {currentPrice || 'None'}</p>
+ *
+ *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
+ *         Electronics
+ *       </button>
+ *
+ *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
+ *         Clear Filters
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useScopedParams(searchString: string, scope?: string): {
     getParam: (key: string) => string;
     getScopedSearch: (params: ParamsType) => string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useScopedParams.d.ts","sourceRoot":"","sources":["../../src/hooks/useScopedParams.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAExE,iBAAS,eAAe,CAAC,KAAK,GAAE,MAAW;oBAgBvB,MAAM;8BACI,UAAU;EAOvC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"useScopedParams.d.ts","sourceRoot":"","sources":["../../src/hooks/useScopedParams.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,iBAAS,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW;oBAe7C,MAAM;8BACI,UAAU;EAOvC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/hooks/useScopedParams.js

@@ -1,7 +1,87 @@
-import { useLocation } from "react-router";
-function useScopedParams(scope = "") {
-    const location = useLocation();
-    const searchParams = new URLSearchParams(location.search);
+/**
+ * Utility function to manage URL search parameters with optional scoping.
+ * Provides functionality to get parameters and generate updated search strings
+ * while maintaining existing parameters.
+ *
+ * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
+ * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
+ *
+ * @returns Object containing parameter management functions:
+ * @returns getParam - Function to get a parameter value by key (considers scope if provided)
+ * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
+ *
+ * @example
+ * ```tsx
+ * // Basic usage without scope
+ * const searchString = "page=1&filter=active";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString);
+ *
+ * // Get a parameter value
+ * const page = getParam('page'); // Returns "1"
+ * const filter = getParam('filter'); // Returns "active"
+ *
+ * // Generate search string with new/updated parameters
+ * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
+ * // Result: "?page=2&filter=active&sort=name"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with scope
+ * const searchString = "filters:status=active&filters:category=tech&page=1";
+ * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
+ *
+ * // Get a scoped parameter value
+ * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
+ * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
+ *
+ * // Generate search string with scoped parameters
+ * const newSearch = getScopedSearch({
+ *   status: 'inactive',
+ *   category: 'sports',
+ *   price: 100,
+ *   discount: undefined // This will remove 'filters:discount' from URL if it exists
+ * });
+ * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Real-world usage with React Router
+ * import { useLocation, useNavigate } from 'react-router-dom';
+ *
+ * function ProductFilter() {
+ *   const location = useLocation();
+ *   const navigate = useNavigate();
+ *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
+ *
+ *   const handleFilterChange = (newFilters: Record<string, any>) => {
+ *     const searchString = getScopedSearch(newFilters);
+ *     navigate({ search: searchString });
+ *   };
+ *
+ *   const currentCategory = getParam('category');
+ *   const currentPrice = getParam('price');
+ *
+ *   return (
+ *     <div>
+ *       <p>Current category: {currentCategory || 'All'}</p>
+ *       <p>Current price filter: {currentPrice || 'None'}</p>
+ *
+ *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
+ *         Electronics
+ *       </button>
+ *
+ *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
+ *         Clear Filters
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useScopedParams(searchString, scope = "") {
+    const searchParams = new URLSearchParams(searchString);
     const prefix = scope ? `${scope}:` : "";
     const updateSearchParams = (params) => {
         Object.entries(params).forEach(([key, value]) => {

package/dist/hooks/useScrollLock.d.ts

@@ -0,0 +1,39 @@
+/**
+ * useScrollLock hook - manages body scroll blocking for overlays
+ *
+ * @param isLocked - Whether the body scroll should be locked
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [isModalOpen, setIsModalOpen] = useState(false);
+ * useScrollLock(isModalOpen);
+ *
+ * // In a modal component
+ * function Modal({ isVisible }) {
+ *   useScrollLock(isVisible);
+ *
+ *   return isVisible ? (
+ *     <div className="modal">
+ *       <div className="modal-content">
+ *         Modal content
+ *       </div>
+ *     </div>
+ *   ) : null;
+ * }
+ *
+ * // In a drawer component
+ * function Drawer({ isOpen }) {
+ *   useScrollLock(isOpen);
+ *
+ *   return (
+ *     <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
+ *       Drawer content
+ *     </aside>
+ *   );
+ * }
+ * ```
+ */
+declare function useScrollLock(isLocked: boolean): void;
+export { useScrollLock };
+//# sourceMappingURL=useScrollLock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,iBAAS,aAAa,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAyB9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/hooks/useScrollLock.js

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+/**
+ * Calculates the width of the scrollbar
+ * @returns The scrollbar width in pixels
+ */
+function getScrollbarWidth() {
+    // Check if we're in a browser environment
+    if (typeof window === "undefined")
+        return 0;
+    // Calculate the difference between window width and document width
+    return window.innerWidth - document.documentElement.clientWidth;
+}
+/**
+ * useScrollLock hook - manages body scroll blocking for overlays
+ *
+ * @param isLocked - Whether the body scroll should be locked
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [isModalOpen, setIsModalOpen] = useState(false);
+ * useScrollLock(isModalOpen);
+ *
+ * // In a modal component
+ * function Modal({ isVisible }) {
+ *   useScrollLock(isVisible);
+ *
+ *   return isVisible ? (
+ *     <div className="modal">
+ *       <div className="modal-content">
+ *         Modal content
+ *       </div>
+ *     </div>
+ *   ) : null;
+ * }
+ *
+ * // In a drawer component
+ * function Drawer({ isOpen }) {
+ *   useScrollLock(isOpen);
+ *
+ *   return (
+ *     <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
+ *       Drawer content
+ *     </aside>
+ *   );
+ * }
+ * ```
+ */
+function useScrollLock(isLocked) {
+    useEffect(() => {
+        if (isLocked) {
+            const originalOverflow = document.body.style.overflow;
+            const originalPaddingRight = document.body.style.paddingRight;
+            const scrollbarWidth = getScrollbarWidth();
+            if (scrollbarWidth > 0) {
+                const computedStyle = window.getComputedStyle(document.body);
+                const existingPaddingRight = parseInt(computedStyle.paddingRight) || 0;
+                document.body.style.paddingRight = `${existingPaddingRight + scrollbarWidth}px`;
+            }
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = originalOverflow;
+                document.body.style.paddingRight = originalPaddingRight;
+            };
+        }
+    }, [isLocked]);
+}
+export { useScrollLock };

package/dist/hooks/useSlider.d.ts

@@ -0,0 +1,31 @@
+type UseSliderReturnProps = [number, (number: number) => void];
+/**
+ * useSlider hook - manages slider value state with boundary validation
+ *
+ * @param defaultValue - Initial value for the slider (0-100). Default: 0
+ *
+ * @returns Array containing current slider value and setter function
+ * - [0]: Current slider value (number between 0-100)
+ * - [1]: Function to update slider value with boundary validation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [value, setValue] = useSlider();
+ *
+ * // With default value
+ * const [value, setValue] = useSlider(50);
+ *
+ * // Usage in component
+ * function SliderComponent() {
+ *   const [sliderValue, changeSliderValue] = useSlider(25);
+ *
+ *   return (
+ *     <Slider value={sliderValue} onChange={changeSliderValue} />
+ *   );
+ * }
+ * ```
+ */
+declare function useSlider(defaultValue?: number): UseSliderReturnProps;
+export { useSlider };
+//# sourceMappingURL=useSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,oBAAoB,CAiB9D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/hooks/useSlider.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+/**
+ * useSlider hook - manages slider value state with boundary validation
+ *
+ * @param defaultValue - Initial value for the slider (0-100). Default: 0
+ *
+ * @returns Array containing current slider value and setter function
+ * - [0]: Current slider value (number between 0-100)
+ * - [1]: Function to update slider value with boundary validation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const [value, setValue] = useSlider();
+ *
+ * // With default value
+ * const [value, setValue] = useSlider(50);
+ *
+ * // Usage in component
+ * function SliderComponent() {
+ *   const [sliderValue, changeSliderValue] = useSlider(25);
+ *
+ *   return (
+ *     <Slider value={sliderValue} onChange={changeSliderValue} />
+ *   );
+ * }
+ * ```
+ */
+function useSlider(defaultValue) {
+    function getDefaultValue() {
+        if (!defaultValue)
+            return 0;
+        if (defaultValue <= 0)
+            return 0;
+        if (defaultValue >= 100)
+            return 100;
+        return defaultValue;
+    }
+    const [sliderValue, setSliderValue] = useState(getDefaultValue());
+    function changeSliderValue(value) {
+        if (value <= 0)
+            return setSliderValue(0);
+        if (value >= 100)
+            return setSliderValue(100);
+        return setSliderValue(value);
+    }
+    return [sliderValue, changeSliderValue];
+}
+export { useSlider };

package/dist/hooks/useToast.d.ts

@@ -1,3 +1,70 @@
-declare function useToast(): import("@arkyn/types").ToastContextProps;
+/**
+ * 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

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAGA,iBAAS,QAAQ,6CAQhB;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"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

@@ -1,7 +1,69 @@
+import { toastContext } from "../providers/toastProvider";
 import { useContext } from "react";
-import { ToastContext } from "../context/ToastContext";
+/**
+ * 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);
+    const contextData = useContext(toastContext);
     if (Object.entries(contextData).length === 0) {
         throw new Error("useToast must be used within a Provider");
     }