@teo-garcia/react-shared 0.1.1

package/dist/components/error-boundary/error-boundary.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+/**
+ * ErrorBoundary component - Catches JavaScript errors in child components
+ *
+ * This component wraps your application (or part of it) to catch runtime errors
+ * and display a fallback UI instead of crashing the entire app.
+ *
+ * Features:
+ * - Catches errors in child component tree
+ * - Displays custom fallback UI
+ * - Optional error callback for logging
+ * - Follows React error boundary best practices
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { ErrorBoundary } from '@teo-garcia/react-shared/components'
+ *
+ * function App() {
+ *   return (
+ *     <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *       <YourApp />
+ *     </ErrorBoundary>
+ *   )
+ * }
+ * ```
+ *
+ * @example With dynamic fallback
+ * ```tsx
+ * import { ErrorBoundary } from '@teo-garcia/react-shared/components'
+ *
+ * function App() {
+ *   return (
+ *     <ErrorBoundary
+ *       fallback={(error) => (
+ *         <div>
+ *           <h1>Error: {error.message}</h1>
+ *           <button onClick={() => window.location.reload()}>Reload</button>
+ *         </div>
+ *       )}
+ *       onError={(error, errorInfo) => {
+ *         console.error('Error caught:', error, errorInfo)
+ *         // Send to error tracking service
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </ErrorBoundary>
+ *   )
+ * }
+ * ```
+ */
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    /**
+     * Static method called when an error is thrown in a child component
+     * Updates state to trigger fallback UI rendering
+     */
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    /**
+     * Called after an error is caught
+     * Used for side effects like logging
+     */
+    componentDidCatch(error, errorInfo) {
+        // Call optional error handler prop
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+    }
+    render() {
+        // If an error was caught, render fallback UI
+        if (this.state.hasError && this.state.error) {
+            const { fallback } = this.props;
+            // If fallback is a function, call it with the error
+            if (typeof fallback === 'function') {
+                return fallback(this.state.error);
+            }
+            // If fallback is provided, render it
+            if (fallback) {
+                return fallback;
+            }
+            // Default fallback UI if none provided
+            return (_jsxs("div", { role: "alert", style: {
+                    padding: '20px',
+                    margin: '20px',
+                    border: '1px solid #f5c6cb',
+                    borderRadius: '4px',
+                    backgroundColor: '#f8d7da',
+                    color: '#721c24',
+                }, children: [_jsx("h2", { style: { marginTop: 0 }, children: "Something went wrong" }), _jsxs("details", { style: { whiteSpace: 'pre-wrap' }, children: [_jsx("summary", { style: { cursor: 'pointer', marginBottom: '10px' }, children: "Error details" }), this.state.error.toString()] })] }));
+        }
+        // No error, render children normally
+        return this.props.children;
+    }
+}

package/dist/components/error-boundary/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary } from './error-boundary';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/error-boundary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/error-boundary/index.js

@@ -0,0 +1 @@
+export { ErrorBoundary } from './error-boundary';

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Components - Reusable React UI components
+ */
+export * from './error-boundary';
+export * from './theme-switch';
+export * from './viewport-info';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,6 @@
+/**
+ * Components - Reusable React UI components
+ */
+export * from './error-boundary';
+export * from './theme-switch';
+export * from './viewport-info';

package/dist/components/theme-switch/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeSwitch } from './theme-switch';
+export type { ThemeSwitchProps } from './theme-switch';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/theme-switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/theme-switch/index.js

@@ -0,0 +1 @@
+export { ThemeSwitch } from './theme-switch';

package/dist/components/theme-switch/theme-switch.d.ts

@@ -0,0 +1,36 @@
+import type { ThemeAdapter } from '../../types';
+export interface ThemeSwitchProps {
+    /** Theme adapter that connects to your theme provider */
+    themeAdapter: ThemeAdapter;
+}
+/**
+ * ThemeSwitch component - A button that cycles through light, dark, and system themes
+ *
+ * This component uses the adapter pattern to work with any theme provider.
+ * It cycles through themes in the order: light → dark → system → light
+ *
+ * @example Next.js with next-themes
+ * ```tsx
+ * import { ThemeSwitch } from '@teo-garcia/react-shared/components'
+ * import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
+ *
+ * function App() {
+ *   const themeAdapter = useNextThemesAdapter()
+ *   return <ThemeSwitch themeAdapter={themeAdapter} />
+ * }
+ * ```
+ *
+ * @example React Router with custom theme provider
+ * ```tsx
+ * import { ThemeSwitch } from '@teo-garcia/react-shared/components'
+ * import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
+ * import { useTheme } from '~/components/theme-provider'
+ *
+ * function App() {
+ *   const themeAdapter = createCustomThemeAdapter(useTheme())
+ *   return <ThemeSwitch themeAdapter={themeAdapter} />
+ * }
+ * ```
+ */
+export declare const ThemeSwitch: ({ themeAdapter }: ThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-switch.d.ts.map

package/dist/components/theme-switch/theme-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switch.d.ts","sourceRoot":"","sources":["../../../src/components/theme-switch/theme-switch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,aAAa,CAAA;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,yDAAyD;IACzD,YAAY,EAAE,YAAY,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,4CAuD7D,CAAA"}

package/dist/components/theme-switch/theme-switch.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Laptop, Moon, Sun } from 'lucide-react';
+/**
+ * ThemeSwitch component - A button that cycles through light, dark, and system themes
+ *
+ * This component uses the adapter pattern to work with any theme provider.
+ * It cycles through themes in the order: light → dark → system → light
+ *
+ * @example Next.js with next-themes
+ * ```tsx
+ * import { ThemeSwitch } from '@teo-garcia/react-shared/components'
+ * import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
+ *
+ * function App() {
+ *   const themeAdapter = useNextThemesAdapter()
+ *   return <ThemeSwitch themeAdapter={themeAdapter} />
+ * }
+ * ```
+ *
+ * @example React Router with custom theme provider
+ * ```tsx
+ * import { ThemeSwitch } from '@teo-garcia/react-shared/components'
+ * import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
+ * import { useTheme } from '~/components/theme-provider'
+ *
+ * function App() {
+ *   const themeAdapter = createCustomThemeAdapter(useTheme())
+ *   return <ThemeSwitch themeAdapter={themeAdapter} />
+ * }
+ * ```
+ */
+export const ThemeSwitch = ({ themeAdapter }) => {
+    const { theme, setTheme } = themeAdapter;
+    // Ensure we have a valid theme, default to 'system' if undefined
+    const activeTheme = (theme ?? 'system');
+    /**
+     * Cycles to the next theme in the sequence
+     * light → dark → system → light
+     */
+    const getNextTheme = () => {
+        switch (activeTheme) {
+            case 'light': {
+                return 'dark';
+            }
+            case 'dark': {
+                return 'system';
+            }
+            default: {
+                return 'light';
+            }
+        }
+    };
+    /**
+     * Returns the appropriate icon for the current theme
+     */
+    const getCurrentIcon = () => {
+        switch (activeTheme) {
+            case 'light': {
+                return _jsx(Sun, { className: "size-5" });
+            }
+            case 'dark': {
+                return _jsx(Moon, { className: "size-5" });
+            }
+            default: {
+                return _jsx(Laptop, { className: "size-5" });
+            }
+        }
+    };
+    const handleClick = () => {
+        setTheme(getNextTheme());
+    };
+    return (_jsx("button", { onClick: handleClick, "aria-label": `Theme switcher, current mode: ${activeTheme}`, className: "fixed right-4 top-4 rounded-lg border p-2 md:right-8 md:top-8 transition-colors duration-200 hover:bg-accent hover:text-accent-foreground", title: `Current theme: ${activeTheme}. Click to switch to ${getNextTheme()}`, children: getCurrentIcon() }));
+};

package/dist/components/viewport-info/index.d.ts

@@ -0,0 +1,3 @@
+export { ViewportInfo } from './viewport-info';
+export type { ViewportInfoProps } from './viewport-info';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/viewport-info/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewport-info/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/viewport-info/index.js

@@ -0,0 +1 @@
+export { ViewportInfo } from './viewport-info';

package/dist/components/viewport-info/viewport-info.d.ts

@@ -0,0 +1,40 @@
+import type { EnvironmentAdapter } from '../../types';
+export interface ViewportInfoProps {
+    /** Environment adapter to detect if running in development mode */
+    environmentAdapter: EnvironmentAdapter;
+}
+/**
+ * ViewportInfo component - Displays current viewport dimensions and Tailwind breakpoint
+ *
+ * This component is useful during development to see the current viewport size and
+ * which Tailwind breakpoint is active. It automatically hides in production.
+ *
+ * Features:
+ * - Shows viewport width and height in pixels
+ * - Displays active Tailwind CSS breakpoint (default, sm, md, lg, xl, 2xl)
+ * - Auto-updates on window resize
+ * - Only renders in development mode
+ * - Fixed position in bottom-right corner
+ *
+ * @example Next.js
+ * ```tsx
+ * import { ViewportInfo } from '@teo-garcia/react-shared/components'
+ * import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
+ *
+ * function App() {
+ *   return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
+ * }
+ * ```
+ *
+ * @example React Router / Vite
+ * ```tsx
+ * import { ViewportInfo } from '@teo-garcia/react-shared/components'
+ * import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
+ *
+ * function App() {
+ *   return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
+ * }
+ * ```
+ */
+export declare const ViewportInfo: ({ environmentAdapter }: ViewportInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=viewport-info.d.ts.map

package/dist/components/viewport-info/viewport-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-info.d.ts","sourceRoot":"","sources":["../../../src/components/viewport-info/viewport-info.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,mEAAmE;IACnE,kBAAkB,EAAE,kBAAkB,CAAA;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,GAAI,wBAAwB,iBAAiB,mDAmDrE,CAAA"}

package/dist/components/viewport-info/viewport-info.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RulerIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+/**
+ * ViewportInfo component - Displays current viewport dimensions and Tailwind breakpoint
+ *
+ * This component is useful during development to see the current viewport size and
+ * which Tailwind breakpoint is active. It automatically hides in production.
+ *
+ * Features:
+ * - Shows viewport width and height in pixels
+ * - Displays active Tailwind CSS breakpoint (default, sm, md, lg, xl, 2xl)
+ * - Auto-updates on window resize
+ * - Only renders in development mode
+ * - Fixed position in bottom-right corner
+ *
+ * @example Next.js
+ * ```tsx
+ * import { ViewportInfo } from '@teo-garcia/react-shared/components'
+ * import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
+ *
+ * function App() {
+ *   return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
+ * }
+ * ```
+ *
+ * @example React Router / Vite
+ * ```tsx
+ * import { ViewportInfo } from '@teo-garcia/react-shared/components'
+ * import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
+ *
+ * function App() {
+ *   return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
+ * }
+ * ```
+ */
+export const ViewportInfo = ({ environmentAdapter }) => {
+    // State to track viewport dimensions
+    const [{ width: viewportWidth, height: viewportHeight }, setViewportSize] = useState(() => ({
+        width: 0,
+        height: 0,
+    }));
+    useEffect(() => {
+        // Guard against SSR - window is not available on the server
+        if (globalThis.window == undefined) {
+            return;
+        }
+        // Handler to update viewport dimensions
+        const handleResize = () => {
+            setViewportSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        // Set initial dimensions
+        handleResize();
+        // Listen for resize events
+        window.addEventListener('resize', handleResize);
+        // Cleanup listener on unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    // Only show in development mode
+    if (!environmentAdapter.isDevelopment())
+        return null;
+    return (_jsxs("aside", { className: "fixed bottom-0 right-0 flex items-center gap-x-1 rounded-l-lg px-4 py-2 bg-primary text-primary-foreground font-semibold", children: [_jsx(RulerIcon, { className: "size-5" }), _jsxs("p", { className: "text-lg flex gap-x-2", children: [viewportWidth, "px - ", viewportHeight, "px -", _jsx("span", { className: "inline sm:hidden font-semibold", children: "default" }), _jsx("span", { className: "hidden sm:inline md:hidden font-semibold", children: "sm" }), _jsx("span", { className: "hidden md:inline lg:hidden font-semibold", children: "md" }), _jsx("span", { className: "hidden lg:inline xl:hidden font-semibold", children: "lg " }), _jsx("span", { className: "hidden xl:inline 2xl:hidden font-semibold", children: "xl" }), _jsx("span", { className: "hidden 2xl:inline font-semibold", children: "2xl" })] })] }));
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hooks - Reusable React hooks for common functionality
+ */
+export { useHealthcheck } from './use-healthcheck';
+export type { UseHealthcheckOptions } from './use-healthcheck';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+/**
+ * Hooks - Reusable React hooks for common functionality
+ */
+export { useHealthcheck } from './use-healthcheck';

package/dist/hooks/use-healthcheck.d.ts

@@ -0,0 +1,42 @@
+export interface UseHealthcheckOptions {
+    /** The healthcheck endpoint URL (default: http://localhost:3000/api/healthcheck) */
+    url?: string;
+    /** Enable/disable the query (default: true) */
+    enabled?: boolean;
+}
+/**
+ * useHealthcheck hook - Fetches health status from an API endpoint
+ *
+ * This hook uses React Query to fetch and cache the health status of your API.
+ * It's useful for monitoring if your backend is available and responding.
+ *
+ * @param options - Configuration options
+ * @returns React Query result with health status data
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
+ *
+ * function HealthStatus() {
+ *   const { data, isLoading, error } = useHealthcheck()
+ *
+ *   if (isLoading) return <div>Checking health...</div>
+ *   if (error) return <div>Health check failed</div>
+ *   return <div>Status: {data?.status}</div>
+ * }
+ * ```
+ *
+ * @example Custom URL
+ * ```tsx
+ * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
+ *
+ * function HealthStatus() {
+ *   const { data } = useHealthcheck({
+ *     url: 'http://localhost:8080/health'
+ *   })
+ *   return <div>{data?.status}</div>
+ * }
+ * ```
+ */
+export declare const useHealthcheck: (options?: UseHealthcheckOptions) => import("@tanstack/react-query").UseQueryResult<any, Error>;
+//# sourceMappingURL=use-healthcheck.d.ts.map

package/dist/hooks/use-healthcheck.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-healthcheck.d.ts","sourceRoot":"","sources":["../../src/hooks/use-healthcheck.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,cAAc,GAAI,UAAS,qBAA0B,+DAkBjE,CAAA"}

package/dist/hooks/use-healthcheck.js

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query';
+/**
+ * useHealthcheck hook - Fetches health status from an API endpoint
+ *
+ * This hook uses React Query to fetch and cache the health status of your API.
+ * It's useful for monitoring if your backend is available and responding.
+ *
+ * @param options - Configuration options
+ * @returns React Query result with health status data
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
+ *
+ * function HealthStatus() {
+ *   const { data, isLoading, error } = useHealthcheck()
+ *
+ *   if (isLoading) return <div>Checking health...</div>
+ *   if (error) return <div>Health check failed</div>
+ *   return <div>Status: {data?.status}</div>
+ * }
+ * ```
+ *
+ * @example Custom URL
+ * ```tsx
+ * import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
+ *
+ * function HealthStatus() {
+ *   const { data } = useHealthcheck({
+ *     url: 'http://localhost:8080/health'
+ *   })
+ *   return <div>{data?.status}</div>
+ * }
+ * ```
+ */
+export const useHealthcheck = (options = {}) => {
+    const { url = 'http://localhost:3000/api/healthcheck', enabled = true } = options;
+    return useQuery({
+        queryKey: ['healthcheck', url],
+        queryFn: async () => {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`Health check failed: ${response.statusText}`);
+            }
+            return await response.json();
+        },
+        enabled,
+        // Refetch every 30 seconds to keep health status fresh
+        refetchInterval: 30000,
+        // Retry failed requests
+        retry: 3,
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @teo-garcia/react-shared
+ *
+ * Shared React components, hooks, utilities, and adapters for fullstack web templates.
+ *
+ * This package provides framework-agnostic React utilities that work across
+ * Next.js, React Router, and other React-based frameworks.
+ *
+ * @packageDocumentation
+ */
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './adapters';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,cAAc,cAAc,CAAA;AAG5B,cAAc,SAAS,CAAA;AAGvB,cAAc,SAAS,CAAA;AAGvB,cAAc,YAAY,CAAA;AAG1B,cAAc,SAAS,CAAA"}

package/dist/index.js

@@ -0,0 +1,20 @@
+/**
+ * @teo-garcia/react-shared
+ *
+ * Shared React components, hooks, utilities, and adapters for fullstack web templates.
+ *
+ * This package provides framework-agnostic React utilities that work across
+ * Next.js, React Router, and other React-based frameworks.
+ *
+ * @packageDocumentation
+ */
+// Export all components
+export * from './components';
+// Export all hooks
+export * from './hooks';
+// Export all utilities
+export * from './utils';
+// Export all adapters
+export * from './adapters';
+// Export all types
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Theme mode type - represents the three possible theme states
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * ThemeAdapter interface - allows components to work with different theme providers
+ * Implementations should map their specific theme library to this interface
+ */
+export interface ThemeAdapter {
+    /** Current theme mode */
+    theme: ThemeMode;
+    /** Function to update the theme */
+    setTheme: (theme: ThemeMode) => void;
+}
+/**
+ * EnvironmentAdapter interface - abstracts environment detection across frameworks
+ * Different frameworks (Next.js vs Vite) use different environment variable systems
+ */
+export interface EnvironmentAdapter {
+    /** Check if running in development mode */
+    isDevelopment: () => boolean;
+    /** Check if running in production mode */
+    isProduction?: () => boolean;
+    /** Check if running on server */
+    isServer?: () => boolean;
+    /** Check if running on client */
+    isClient?: () => boolean;
+}
+/**
+ * ErrorBoundary fallback render function type
+ */
+export interface ErrorBoundaryProps {
+    /** The React children to wrap */
+    children: React.ReactNode;
+    /** Optional fallback UI to render on error */
+    fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /** Optional callback when an error is caught */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAA;IAChB,mCAAmC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,OAAO,CAAA;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAA;IACxB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAA;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAChE,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAA;CAC7D"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};