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

package/dist/components/table/tableCaption/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableCaption component - used to provide a title or description for a table with proper styling
+ *
+ * @param props - TableCaption component properties
+ *
+ * **...All valid HTML properties for caption element**
+ *
+ * @returns TableCaption JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table caption
+ * <TableContainer>
+ *   <TableCaption>
+ *     User Management
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table caption with custom styling
+ * <TableContainer>
+ *   <TableCaption className="highlighted-caption">
+ *     Sales Report - Q4 2024
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Revenue</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Caption with rich content
+ * <TableContainer>
+ *   <TableCaption>
+ *     <h3>Employee Directory</h3>
+ *     <p>Updated: {new Date().toLocaleDateString()}</p>
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Employee ID</th>
+ *     <th>Name</th>
+ *     <th>Department</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableCaption(props) {
+    const { className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableCaption ${baseClassName}`;
+    return (_jsx("caption", { className: className.trim(), ...rest, children: _jsx("div", { className: "arkynTableCaptionContent", children: children }) }));
+}
+export { TableCaption };

package/dist/components/table/tableContainer/index.d.ts

@@ -0,0 +1,64 @@
+import { TableHTMLAttributes } from "react";
+import "./styles.css";
+type TableContainerProps = TableHTMLAttributes<HTMLTableElement>;
+/**
+ * TableContainer component - wraps table content in a styled container with responsive behavior
+ *
+ * @param props - TableContainer component properties
+ *
+ * **...All valid HTML properties for table element**
+ *
+ * @returns TableContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table container
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table container with custom styling
+ * <TableContainer className="custom-table">
+ *   <TableCaption>
+ *     User Management Table
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No users found">
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <Pagination />
+ *   </TableFooter>
+ * </TableContainer>
+ *
+ * // Responsive table with overflow handling
+ * <TableContainer style={{ maxWidth: '100%', overflowX: 'auto' }}>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Description</th>
+ *     <th>Price</th>
+ *     <th>Stock</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableContainer(props: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+export { TableContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/tableContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CASjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/table/tableContainer/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableContainer component - wraps table content in a styled container with responsive behavior
+ *
+ * @param props - TableContainer component properties
+ *
+ * **...All valid HTML properties for table element**
+ *
+ * @returns TableContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table container
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table container with custom styling
+ * <TableContainer className="custom-table">
+ *   <TableCaption>
+ *     User Management Table
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No users found">
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <Pagination />
+ *   </TableFooter>
+ * </TableContainer>
+ *
+ * // Responsive table with overflow handling
+ * <TableContainer style={{ maxWidth: '100%', overflowX: 'auto' }}>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Description</th>
+ *     <th>Price</th>
+ *     <th>Stock</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableContainer(props) {
+    const { children, className: baseClassName, ...rest } = props;
+    const className = `arkynTableContainer ${baseClassName}`;
+    return (_jsx("div", { className: className.trim(), ...rest, children: _jsx("table", { children: children }) }));
+}
+export { TableContainer };

package/dist/components/table/tableFooter/index.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableFooter component - used to render the footer section of a table with content container
+ *
+ * @param props - TableFooter component properties
+ *
+ * **...All valid HTML properties for tfoot element**
+ *
+ * @returns TableFooter JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table footer with pagination
+ * <TableFooter>
+ *   <div>Showing 1-10 of 100 results</div>
+ *   <Pagination />
+ * </TableFooter>
+ *
+ * // Table footer with custom styling
+ * <TableFooter className="custom-footer">
+ *   <Button>Load More</Button>
+ * </TableFooter>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <div className="pagination-info">
+ *       Total: 250 items
+ *     </div>
+ *   </TableFooter>
+ * </TableContainer>
+ * ```
+ */
+declare function TableFooter(props: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+export { TableFooter };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/tableFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAc3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/table/tableFooter/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableFooter component - used to render the footer section of a table with content container
+ *
+ * @param props - TableFooter component properties
+ *
+ * **...All valid HTML properties for tfoot element**
+ *
+ * @returns TableFooter JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table footer with pagination
+ * <TableFooter>
+ *   <div>Showing 1-10 of 100 results</div>
+ *   <Pagination />
+ * </TableFooter>
+ *
+ * // Table footer with custom styling
+ * <TableFooter className="custom-footer">
+ *   <Button>Load More</Button>
+ * </TableFooter>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <div className="pagination-info">
+ *       Total: 250 items
+ *     </div>
+ *   </TableFooter>
+ * </TableContainer>
+ * ```
+ */
+function TableFooter(props) {
+    const { className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableFooter ${baseClassName}`;
+    return (_jsxs("tfoot", { className: className.trim(), ...rest, children: [_jsx("tr", { className: "spacingRow" }), _jsx("tr", { children: _jsx("th", { colSpan: 100, children: _jsx("div", { className: "arkynTableFooterContent", children: children }) }) })] }));
+}
+export { TableFooter };

package/dist/components/table/tableHeader/index.d.ts

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableHeader component - used to render the header section of a table with automatic spacing
+ *
+ * @param props - TableHeader component properties
+ *
+ * **...All valid HTML properties for thead element**
+ *
+ * @returns TableHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table header
+ * <TableHeader>
+ *   <th>Name</th>
+ *   <th>Email</th>
+ *   <th>Actions</th>
+ * </TableHeader>
+ *
+ * // Table header with custom styling
+ * <TableHeader className="custom-header">
+ *   <th>Product</th>
+ *   <th>Price</th>
+ *   <th>Stock</th>
+ * </TableHeader>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableHeader(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { TableHeader };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/tableHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAU3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/table/tableHeader/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableHeader component - used to render the header section of a table with automatic spacing
+ *
+ * @param props - TableHeader component properties
+ *
+ * **...All valid HTML properties for thead element**
+ *
+ * @returns TableHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table header
+ * <TableHeader>
+ *   <th>Name</th>
+ *   <th>Email</th>
+ *   <th>Actions</th>
+ * </TableHeader>
+ *
+ * // Table header with custom styling
+ * <TableHeader className="custom-header">
+ *   <th>Product</th>
+ *   <th>Price</th>
+ *   <th>Stock</th>
+ * </TableHeader>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableHeader(props) {
+    const { className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableHeader ${baseClassName}`;
+    return (_jsxs("thead", { className: className.trim(), ...rest, children: [_jsx("tr", { children: children }), _jsx("tr", { className: "spacingRow" })] }));
+}
+export { TableHeader };

package/dist/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAkFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/index.js

@@ -130,6 +130,6 @@ function Tooltip(props) {
         };
     }, [orientation, tooltipId]);
     const className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;
-    return (_jsxs("div", { className: className.trim(), ...rest, ref: tooltipRef, children: [children, _jsx("div", { className: "arkynTooltipText", id: tooltipId, children: text })] }));
+    return (_jsxs("div", { className: className.trim(), ...rest, ref: tooltipRef, children: [children, _jsx("div", { className: "arkynTooltipText", id: tooltipId, dangerouslySetInnerHTML: { __html: text } })] }));
 }
 export { Tooltip };

package/dist/hooks/useDrawer.d.ts

@@ -0,0 +1,86 @@
+import { DrawerContextProps } from "../providers/drawerProvider";
+type OpenDrawerProps<T = any> = (data?: T) => void;
+/**
+ * useDrawer hook - provides access to drawer context for managing drawer state and data
+ *
+ * @param key - Optional drawer identifier key. When provided, returns functions for a specific drawer
+ *
+ * @returns When called without key: Complete drawer context with all drawer management functions
+ * @returns When called with key: Object containing drawer-specific functions:
+ * - `drawerIsOpen`: Boolean indicating if the specific drawer is open
+ * - `drawerData`: Data associated with the specific drawer
+ * - `openDrawer`: Function to open the specific drawer with optional data
+ * - `closeDrawer`: Function to close the specific drawer
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - access to full drawer context
+ * function DrawerManager() {
+ *   const drawerContext = useDrawer();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => drawerContext.openDrawer('navigation', { section: 'main' })}>
+ *         Open Navigation
+ *       </button>
+ *       <button onClick={() => drawerContext.openDrawer('filters', { category: 'electronics' })}>
+ *         Open Filters
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Usage with specific drawer key
+ * function NavigationDrawer() {
+ *   const { drawerIsOpen, drawerData, openDrawer, closeDrawer } = useDrawer('navigation');
+ *
+ *   return (
+ *     <Drawer isOpen={drawerIsOpen} onClose={closeDrawer} position="left">
+ *       <h2>Navigation</h2>
+ *       <p>Current section: {drawerData?.section}</p>
+ *       <button onClick={closeDrawer}>Close</button>
+ *     </Drawer>
+ *   );
+ * }
+ *
+ * // Usage with typed data
+ * interface FilterData {
+ *   category: string;
+ *   priceRange: [number, number];
+ *   brands: string[];
+ * }
+ *
+ * function FilterDrawer() {
+ *   const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<FilterData>('filters');
+ *
+ *   return (
+ *     <Drawer isOpen={drawerIsOpen} onClose={closeDrawer} position="right">
+ *       <h2>Filters</h2>
+ *       <p>Category: {drawerData?.category}</p>
+ *       <p>Price: ${drawerData?.priceRange?.[0]} - ${drawerData?.priceRange?.[1]}</p>
+ *       <p>Brands: {drawerData?.brands?.join(', ')}</p>
+ *     </Drawer>
+ *   );
+ * }
+ *
+ * // Usage with DrawerProvider
+ * function App() {
+ *   return (
+ *     <DrawerProvider>
+ *       <NavigationDrawer />
+ *       <FilterDrawer />
+ *       <DrawerManager />
+ *     </DrawerProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function useDrawer<T = any>(): DrawerContextProps<T>;
+declare function useDrawer<T = any>(key: string): {
+    drawerIsOpen: boolean;
+    drawerData: T;
+    openDrawer: OpenDrawerProps<T>;
+    closeDrawer: () => void;
+};
+export { useDrawer };
+//# sourceMappingURL=useDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEhF,KAAK,eAAe,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACrD,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,EACxB,GAAG,EAAE,MAAM,GACV;IACD,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AA6BF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/hooks/useDrawer.js

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { drawerContext } from "../providers/drawerProvider";
+function useDrawer(key) {
+    const contextData = useContext(drawerContext);
+    if (Object.entries(contextData).length === 0) {
+        throw new Error("useDrawer must be used within a Provider");
+    }
+    if (key) {
+        const { drawerData: contextDrawerData, drawerIsOpen: contextDrawerIsOpen, openDrawer: contextOpenDrawer, closeDrawer: contextCloseDrawer, } = contextData;
+        const drawerIsOpen = contextDrawerIsOpen(key);
+        const drawerData = contextDrawerData(key);
+        const openDrawer = (data) => contextOpenDrawer(key, data);
+        const closeDrawer = () => contextCloseDrawer(key);
+        return { drawerIsOpen, drawerData, openDrawer, closeDrawer };
+    }
+    else {
+        return contextData;
+    }
+}
+export { useDrawer };

package/dist/hooks/useHydrated.d.ts

@@ -0,0 +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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,81 @@
+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);
+}
+export { useHydrated };