@prismiq/react 0.1.0

package/dist/ssr/index.d.ts

@@ -0,0 +1,213 @@
+import { ReactNode } from 'react';
+
+/**
+ * SSR (Server-Side Rendering) utilities for Next.js compatibility.
+ *
+ * These utilities help components work correctly with:
+ * - Next.js App Router
+ * - React Server Components
+ * - Hydration
+ *
+ * @example
+ * ```tsx
+ * import { useIsClient, ClientOnly } from '@prismiq/react/ssr';
+ *
+ * function MyComponent() {
+ *   const isClient = useIsClient();
+ *
+ *   if (!isClient) {
+ *     return <Skeleton />;
+ *   }
+ *
+ *   return <Chart data={data} />;
+ * }
+ *
+ * // Or use ClientOnly wrapper
+ * <ClientOnly fallback={<Skeleton />}>
+ *   <Chart data={data} />
+ * </ClientOnly>
+ * ```
+ */
+
+/**
+ * Hook that returns true when running in the browser.
+ *
+ * Useful for:
+ * - Conditionally rendering browser-only components
+ * - Avoiding hydration mismatches
+ * - Waiting for window/document access
+ *
+ * @returns true when running in browser, false during SSR
+ *
+ * @example
+ * ```tsx
+ * function WindowSize() {
+ *   const isClient = useIsClient();
+ *
+ *   if (!isClient) {
+ *     return <span>Loading...</span>;
+ *   }
+ *
+ *   return <span>{window.innerWidth}px</span>;
+ * }
+ * ```
+ */
+declare function useIsClient(): boolean;
+interface ClientOnlyProps {
+    /** Content to render on the client. */
+    children: ReactNode;
+    /** Fallback content to show during SSR. */
+    fallback?: ReactNode;
+}
+/**
+ * Component that only renders its children on the client.
+ *
+ * Use this to wrap components that:
+ * - Access window or document
+ * - Use browser-only APIs
+ * - Would cause hydration mismatches
+ *
+ * @example
+ * ```tsx
+ * <ClientOnly fallback={<SkeletonChart type="bar" />}>
+ *   <BarChart data={data} />
+ * </ClientOnly>
+ * ```
+ */
+declare function ClientOnly({ children, fallback }: ClientOnlyProps): ReactNode;
+/**
+ * Safely get window width (returns default during SSR).
+ *
+ * @param defaultWidth - Default width to return during SSR
+ * @returns Current window width or default
+ */
+declare function getWindowWidth(defaultWidth?: number): number;
+/**
+ * Safely get window height (returns default during SSR).
+ *
+ * @param defaultHeight - Default height to return during SSR
+ * @returns Current window height or default
+ */
+declare function getWindowHeight(defaultHeight?: number): number;
+/**
+ * Check if code is running in browser environment.
+ *
+ * @returns true if running in browser
+ */
+declare function isBrowser(): boolean;
+/**
+ * Check if code is running in server environment.
+ *
+ * @returns true if running on server
+ */
+declare function isServer(): boolean;
+/**
+ * Safely get a value from localStorage.
+ *
+ * @param key - Storage key
+ * @param defaultValue - Default value if key doesn't exist or during SSR
+ * @returns Stored value or default
+ */
+declare function getLocalStorage<T>(key: string, defaultValue: T): T;
+/**
+ * Safely set a value in localStorage.
+ *
+ * @param key - Storage key
+ * @param value - Value to store
+ */
+declare function setLocalStorage<T>(key: string, value: T): void;
+/**
+ * Safely remove a value from localStorage.
+ *
+ * @param key - Storage key to remove
+ */
+declare function removeLocalStorage(key: string): void;
+interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * Hook to get and track window size with SSR support.
+ *
+ * @param defaultSize - Default size to use during SSR
+ * @returns Current window size
+ *
+ * @example
+ * ```tsx
+ * function ResponsiveComponent() {
+ *   const { width } = useWindowSize();
+ *
+ *   if (width < 768) {
+ *     return <MobileView />;
+ *   }
+ *
+ *   return <DesktopView />;
+ * }
+ * ```
+ */
+declare function useWindowSize(defaultSize?: WindowSize): WindowSize;
+/**
+ * Hook to check if a media query matches with SSR support.
+ *
+ * @param query - CSS media query string
+ * @param defaultValue - Default value during SSR
+ * @returns Whether the media query matches
+ *
+ * @example
+ * ```tsx
+ * function ResponsiveComponent() {
+ *   const isMobile = useMediaQuery('(max-width: 768px)');
+ *   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
+ *
+ *   return isMobile ? <MobileView /> : <DesktopView />;
+ * }
+ * ```
+ */
+declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
+/**
+ * Default breakpoints matching common design systems.
+ */
+declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Hook to get current breakpoint with SSR support.
+ *
+ * @param defaultBreakpoint - Default breakpoint during SSR
+ * @returns Current breakpoint
+ *
+ * @example
+ * ```tsx
+ * function ResponsiveComponent() {
+ *   const breakpoint = useBreakpoint();
+ *
+ *   const columns = {
+ *     xs: 1,
+ *     sm: 2,
+ *     md: 3,
+ *     lg: 4,
+ *     xl: 6,
+ *     '2xl': 6,
+ *   }[breakpoint];
+ *
+ *   return <Grid columns={columns} />;
+ * }
+ * ```
+ */
+declare function useBreakpoint(defaultBreakpoint?: Breakpoint): Breakpoint;
+/**
+ * Hook to check if current width is at or above a breakpoint.
+ *
+ * @param breakpoint - Breakpoint to check
+ * @param defaultValue - Default value during SSR
+ * @returns Whether width is at or above breakpoint
+ */
+declare function useIsBreakpoint(breakpoint: Breakpoint, defaultValue?: boolean): boolean;
+
+export { BREAKPOINTS, type Breakpoint, ClientOnly, type ClientOnlyProps, type WindowSize, getLocalStorage, getWindowHeight, getWindowWidth, isBrowser, isServer, removeLocalStorage, setLocalStorage, useBreakpoint, useIsBreakpoint, useIsClient, useMediaQuery, useWindowSize };

package/dist/ssr/index.js

@@ -0,0 +1,3 @@
+export { BREAKPOINTS, ClientOnly, getLocalStorage, getWindowHeight, getWindowWidth, isBrowser, isServer, removeLocalStorage, setLocalStorage, useBreakpoint, useIsBreakpoint, useIsClient, useMediaQuery, useWindowSize } from '../chunk-JTCBZDHY.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/ssr/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}