@arkyn/components 3.0.1-beta.3 → 3.0.1-beta.30

package/dist/hooks/useForm.js

@@ -0,0 +1,52 @@
+import { useContext } from "react";
+import { formContext } from "../providers/formProvider";
+/**
+ * useForm hook - provides access to form context data including field errors
+ *
+ * @returns Form context object containing:
+ * - `fieldErrors`: Object with field validation errors indexed by field name
+ *
+ * @example
+ * ```tsx
+ * // Basic usage in a component
+ * function MyComponent() {
+ *   const { fieldErrors } = useForm();
+ *
+ *   return (
+ *     <Input
+ *       name="email"
+ *       errorMessage={fieldErrors?.email}
+ *     />
+ *   );
+ * }
+ *
+ * // Usage with FormProvider
+ * function App() {
+ *   const errors = { email: "Invalid email format" };
+ *
+ *   return (
+ *     <FormProvider fieldErrors={errors}>
+ *       <MyForm />
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ * // Checking for specific field errors
+ * function FormField() {
+ *   const { fieldErrors } = useForm();
+ *   const hasError = !!fieldErrors?.username;
+ *
+ *   return (
+ *     <div>
+ *       <Input name="username" />
+ *       {hasError && <span>Error: {fieldErrors.username}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useForm() {
+    const context = useContext(formContext);
+    return context;
+}
+export { useForm };

package/dist/hooks/useHydrated.d.ts

@@ -1,3 +1,76 @@
+/**
+ * useHydrated hook - detects if the component is hydrated on the client side
+ *
+ * This hook is useful for preventing hydration mismatches when rendering different content
+ * on server and client sides. It returns false during SSR and true after hydration.
+ *
+ * @returns Boolean indicating if the component is hydrated
+ * - `true`: Component is hydrated on the client side
+ * - `false`: Component is being rendered on the server side or before hydration
+ *
+ * @example
+ * ```tsx
+ * // Basic usage to prevent hydration mismatches
+ * function ClientOnlyComponent() {
+ *   const isHydrated = useHydrated();
+ *
+ *   if (!isHydrated) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>This content is only rendered on the client</p>
+ *       <p>Current time: {new Date().toLocaleString()}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Conditional rendering based on hydration state
+ * function ResponsiveComponent() {
+ *   const isHydrated = useHydrated();
+ *
+ *   return (
+ *     <div>
+ *       <h1>My App</h1>
+ *       {isHydrated ? (
+ *         <InteractiveWidget />
+ *       ) : (
+ *         <StaticPlaceholder />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ *
+ * // Using with client-only features
+ * function LocationComponent() {
+ *   const isHydrated = useHydrated();
+ *   const [location, setLocation] = useState(null);
+ *
+ *   useEffect(() => {
+ *     if (isHydrated && navigator.geolocation) {
+ *       navigator.geolocation.getCurrentPosition((pos) => {
+ *         setLocation(pos.coords);
+ *       });
+ *     }
+ *   }, [isHydrated]);
+ *
+ *   if (!isHydrated) {
+ *     return <div>Preparing location services...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {location ? (
+ *         <p>Your location: {location.latitude}, {location.longitude}</p>
+ *       ) : (
+ *         <p>Getting your location...</p>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 declare function useHydrated(): boolean;
 export { useHydrated };
 //# sourceMappingURL=useHydrated.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useHydrated.d.ts","sourceRoot":"","sources":["../../src/hooks/useHydrated.ts"],"names":[],"mappings":"AAMA,iBAAS,WAAW,YAMnB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"useHydrated.d.ts","sourceRoot":"","sources":["../../src/hooks/useHydrated.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,iBAAS,WAAW,YAMnB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/hooks/useHydrated.js

@@ -2,6 +2,79 @@ import { useSyncExternalStore } from "react";
 function subscribe() {
     return () => { };
 }
+/**
+ * useHydrated hook - detects if the component is hydrated on the client side
+ *
+ * This hook is useful for preventing hydration mismatches when rendering different content
+ * on server and client sides. It returns false during SSR and true after hydration.
+ *
+ * @returns Boolean indicating if the component is hydrated
+ * - `true`: Component is hydrated on the client side
+ * - `false`: Component is being rendered on the server side or before hydration
+ *
+ * @example
+ * ```tsx
+ * // Basic usage to prevent hydration mismatches
+ * function ClientOnlyComponent() {
+ *   const isHydrated = useHydrated();
+ *
+ *   if (!isHydrated) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>This content is only rendered on the client</p>
+ *       <p>Current time: {new Date().toLocaleString()}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Conditional rendering based on hydration state
+ * function ResponsiveComponent() {
+ *   const isHydrated = useHydrated();
+ *
+ *   return (
+ *     <div>
+ *       <h1>My App</h1>
+ *       {isHydrated ? (
+ *         <InteractiveWidget />
+ *       ) : (
+ *         <StaticPlaceholder />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ *
+ * // Using with client-only features
+ * function LocationComponent() {
+ *   const isHydrated = useHydrated();
+ *   const [location, setLocation] = useState(null);
+ *
+ *   useEffect(() => {
+ *     if (isHydrated && navigator.geolocation) {
+ *       navigator.geolocation.getCurrentPosition((pos) => {
+ *         setLocation(pos.coords);
+ *       });
+ *     }
+ *   }, [isHydrated]);
+ *
+ *   if (!isHydrated) {
+ *     return <div>Preparing location services...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {location ? (
+ *         <p>Your location: {location.latitude}, {location.longitude}</p>
+ *       ) : (
+ *         <p>Getting your location...</p>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 function useHydrated() {
     return useSyncExternalStore(subscribe, () => true, () => false);
 }

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,CAU9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/hooks/useScrollLock.js

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+/**
+ * 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;
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
+        }
+    }, [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 };