@regardio/react 0.3.3 → 0.4.0

package/dist/components/text.js

@@ -1,27 +1,45 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from '../utils/cn';
-const text = cva({
-    base: ['relative', 'block'],
-    defaultVariants: {
-        themeColor: 'primary',
-        variant: 'primary',
-    },
-    variants: {
-        themeColor: {
-            primary: [],
-        },
-        variant: {
-            code: ['font-light', 'font-monospace'],
-            primary: [],
-            subtitle: ['text-lg'],
-        },
+import { defineConfig } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
+});
+var text = cva({
+  base: ["relative", "block"],
+  defaultVariants: {
+    themeColor: "primary",
+    variant: "primary"
+  },
+  variants: {
+    themeColor: {
+      primary: []
     },
+    variant: {
+      code: ["font-light", "font-monospace"],
+      primary: [],
+      subtitle: ["text-lg"]
+    }
+  }
 });
-export const Text = (props) => {
-    const { children, className, variant, themeColor } = props;
-    return (_jsx("div", { className: text({
-            className,
-            themeColor,
-            variant,
-        }), children: children }));
+var Text = (props) => {
+  const { children, className, variant, themeColor } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: text({
+        className,
+        themeColor,
+        variant
+      }),
+      children
+    }
+  );
 };
+
+export { Text };

package/dist/components/unordered-list.d.ts

@@ -1,16 +1,19 @@
-import type { ComponentProps } from 'react';
-import { type VariantProps } from '../utils/cn';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as cva from 'cva';
+import { VariantProps } from 'cva';
+import { ComponentProps } from 'react';
+
 declare const ul: (props?: ({
     variant?: "primary" | "unstyled" | "inline" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
-export interface UnorderedListProps extends ComponentProps<'ul'>, VariantProps<typeof ul> {
+interface UnorderedListProps extends ComponentProps<'ul'>, VariantProps<typeof ul> {
 }
-export declare const UnorderedList: (props: UnorderedListProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=unordered-list.d.ts.map
+declare const UnorderedList: (props: UnorderedListProps) => react_jsx_runtime.JSX.Element;
+
+export { UnorderedList, type UnorderedListProps };

package/dist/components/unordered-list.js

@@ -1,21 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from '../utils/cn';
-const ul = cva({
-    defaultVariants: {
-        variant: 'primary',
-    },
-    variants: {
-        variant: {
-            inline: ['flex', 'flex-wrap', 'list-none'],
-            primary: [],
-            unstyled: ['list-none', 'p-0'],
-        },
-    },
+import { defineConfig } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
 });
-export const UnorderedList = (props) => {
-    const { children, className, variant } = props;
-    return (_jsx("ul", { className: ul({
-            className,
-            variant,
-        }), children: children }));
+var ul = cva({
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      inline: ["flex", "flex-wrap", "list-none"],
+      primary: [],
+      unstyled: ["list-none", "p-0"]
+    }
+  }
+});
+var UnorderedList = (props) => {
+  const { children, className, variant } = props;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: ul({
+        className,
+        variant
+      }),
+      children
+    }
+  );
 };
+
+export { UnorderedList };

package/dist/hooks/use-current-route-data.d.ts

@@ -1,2 +1,7 @@
-export declare function useCurrentRouteData<HeaderData>(): {} | HeaderData;
-//# sourceMappingURL=use-current-route-data.d.ts.map
+/**
+ * This base hook is used to access data related to the current route
+ * @returns {JSON|undefined} The router data or undefined if not found
+ */
+declare function useCurrentRouteData<HeaderData>(): {} | HeaderData;
+
+export { useCurrentRouteData };

package/dist/hooks/use-current-route-data.js

@@ -1,12 +1,16 @@
 import { useMemo } from 'react';
 import { useLocation, useMatches } from 'react-router';
-export function useCurrentRouteData() {
-    const location = useLocation();
-    const matchingRoutes = useMatches();
-    const route = useMemo(() => {
-        return matchingRoutes.find((route) => {
-            return route.pathname === location.pathname;
-        });
-    }, [matchingRoutes, location]);
-    return route?.data || undefined;
+
+// src/hooks/use-current-route-data.ts
+function useCurrentRouteData() {
+  const location = useLocation();
+  const matchingRoutes = useMatches();
+  const route = useMemo(() => {
+    return matchingRoutes.find((route2) => {
+      return route2.pathname === location.pathname;
+    });
+  }, [matchingRoutes, location]);
+  return route?.data || void 0;
 }
+
+export { useCurrentRouteData };

package/dist/hooks/use-focus-search.d.ts

@@ -1,3 +1,6 @@
-import type { RefObject } from 'react';
-export declare function useFocusSearch(ref: RefObject<HTMLInputElement>): void;
-//# sourceMappingURL=use-focus-search.d.ts.map
+import { RefObject } from 'react';
+
+/** Focuses on the field when user clicks cmd + k or ctrl + k */
+declare function useFocusSearch(ref: RefObject<HTMLInputElement>): void;
+
+export { useFocusSearch };

package/dist/hooks/use-focus-search.js

@@ -1,15 +1,19 @@
 import { useEffect } from 'react';
-export function useFocusSearch(ref) {
-    useEffect(() => {
-        function handleKeyDown(event) {
-            if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-                event.preventDefault();
-                ref?.current?.focus();
-            }
-        }
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [ref]);
+
+// src/hooks/use-focus-search.ts
+function useFocusSearch(ref) {
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        ref?.current?.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [ref]);
 }
+
+export { useFocusSearch };

package/dist/hooks/use-matches-data.d.ts

@@ -1,2 +1,9 @@
-export declare function useMatchesData<T>(id: string): T | undefined;
-//# sourceMappingURL=use-matches-data.d.ts.map
+/**
+ * This base hook is used in other hooks to quickly search for specific data
+ * across all loader data using useMatches.
+ * @param {string} id The route id
+ * @returns {JSON|undefined} The router data or undefined if not found
+ */
+declare function useMatchesData<T>(id: string): T | undefined;
+
+export { useMatchesData };

package/dist/hooks/use-matches-data.js

@@ -1,11 +1,15 @@
 import { useMemo } from 'react';
 import { useMatches } from 'react-router';
-export function useMatchesData(id) {
-    const matchingRoutes = useMatches();
-    const route = useMemo(() => {
-        return matchingRoutes.find((route) => {
-            return route.id === id;
-        });
-    }, [matchingRoutes, id]);
-    return route?.data || undefined;
+
+// src/hooks/use-matches-data.ts
+function useMatchesData(id) {
+  const matchingRoutes = useMatches();
+  const route = useMemo(() => {
+    return matchingRoutes.find((route2) => {
+      return route2.id === id;
+    });
+  }, [matchingRoutes, id]);
+  return route?.data || void 0;
 }
+
+export { useMatchesData };

package/dist/hooks/use-media-query.d.ts

@@ -1,2 +1,8 @@
-export declare function useMediaQuery(query: string): boolean;
-//# sourceMappingURL=use-media-query.d.ts.map
+/**
+ * A hook that returns a boolean indicating whether the current viewport matches the provided media query
+ * @param query The media query to check against (e.g. '(min-width: 768px)')
+ * @returns A boolean indicating whether the media query matches
+ */
+declare function useMediaQuery(query: string): boolean;
+
+export { useMediaQuery };

package/dist/hooks/use-media-query.js

@@ -1,16 +1,20 @@
-import { useEffect, useState } from 'react';
-export function useMediaQuery(query) {
-    const [matches, setMatches] = useState(false);
-    useEffect(() => {
-        const mediaQuery = window.matchMedia(query);
-        setMatches(mediaQuery.matches);
-        const handleChange = (event) => {
-            setMatches(event.matches);
-        };
-        mediaQuery.addEventListener('change', handleChange);
-        return () => {
-            mediaQuery.removeEventListener('change', handleChange);
-        };
-    }, [query]);
-    return matches;
+import { useState, useEffect } from 'react';
+
+// src/hooks/use-media-query.ts
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
 }
+
+export { useMediaQuery };

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

@@ -1,2 +1,3 @@
-export declare function useIsMobile(): boolean;
-//# sourceMappingURL=use-mobile.d.ts.map
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/hooks/use-mobile.js

@@ -1,15 +1,19 @@
-import { useEffect, useState } from 'react';
-const MOBILE_BREAKPOINT = 768;
-export function useIsMobile() {
-    const [isMobile, setIsMobile] = useState(undefined);
-    useEffect(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-        const onChange = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
-        mql.addEventListener('change', onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        return () => mql.removeEventListener('change', onChange);
-    }, []);
-    return !!isMobile;
+import { useState, useEffect } from 'react';
+
+// src/hooks/use-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(void 0);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
 }
+
+export { useIsMobile };

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

@@ -1,5 +1,12 @@
-export declare const NonceContext: import("react").Context<string>;
-export declare const NonceProvider: import("react").Provider<string>;
-export declare const useNonce: () => string;
-export declare function generateNonce(): string;
-//# sourceMappingURL=use-nonce.d.ts.map
+import * as react from 'react';
+
+declare const NonceContext: react.Context<string>;
+declare const NonceProvider: react.Provider<string>;
+declare const useNonce: () => string;
+/**
+ * Generate a cryptographically secure nonce for CSP.
+ * @returns A base64-encoded random nonce
+ */
+declare function generateNonce(): string;
+
+export { NonceContext, NonceProvider, generateNonce, useNonce };

package/dist/hooks/use-nonce.js

@@ -1,9 +1,13 @@
 import { createContext, useContext } from 'react';
-export const NonceContext = createContext('');
-export const NonceProvider = NonceContext.Provider;
-export const useNonce = () => useContext(NonceContext);
-export function generateNonce() {
-    const array = new Uint8Array(16);
-    crypto.getRandomValues(array);
-    return btoa(String.fromCharCode(...array));
+
+// src/hooks/use-nonce.ts
+var NonceContext = createContext("");
+var NonceProvider = NonceContext.Provider;
+var useNonce = () => useContext(NonceContext);
+function generateNonce() {
+  const array = new Uint8Array(16);
+  crypto.getRandomValues(array);
+  return btoa(String.fromCharCode(...array));
 }
+
+export { NonceContext, NonceProvider, generateNonce, useNonce };

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

@@ -1,3 +1,11 @@
-export type Orientation = 'portrait' | 'landscape';
-export declare function useOrientation(): Orientation;
-//# sourceMappingURL=use-orientation.d.ts.map
+/**
+ * Orientation type representing device orientation
+ */
+type Orientation = 'portrait' | 'landscape';
+/**
+ * Hook that tracks the current device orientation
+ * @returns The current orientation ('portrait' or 'landscape')
+ */
+declare function useOrientation(): Orientation;
+
+export { type Orientation, useOrientation };

package/dist/hooks/use-orientation.js

@@ -1,25 +1,29 @@
-import { useEffect, useState } from 'react';
-export function useOrientation() {
-    const [orientation, setOrientation] = useState(() => {
-        if (typeof window !== 'undefined') {
-            return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
-        }
-        return 'portrait';
-    });
-    useEffect(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        const handleResize = () => {
-            setOrientation(window.innerHeight > window.innerWidth ? 'portrait' : 'landscape');
-        };
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('orientationchange', handleResize);
-        handleResize();
-        return () => {
-            window.removeEventListener('resize', handleResize);
-            window.removeEventListener('orientationchange', handleResize);
-        };
-    }, []);
-    return orientation;
+import { useState, useEffect } from 'react';
+
+// src/hooks/use-orientation.ts
+function useOrientation() {
+  const [orientation, setOrientation] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.innerHeight > window.innerWidth ? "portrait" : "landscape";
+    }
+    return "portrait";
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleResize = () => {
+      setOrientation(window.innerHeight > window.innerWidth ? "portrait" : "landscape");
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("orientationchange", handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("orientationchange", handleResize);
+    };
+  }, []);
+  return orientation;
 }
+
+export { useOrientation };

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

@@ -1,15 +1,50 @@
-import type { User } from '@supabase/supabase-js';
-import { type ReactNode } from 'react';
-export interface UserContextType {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { User } from '@supabase/supabase-js';
+
+/**
+ * Context for storing and accessing the current authenticated user
+ */
+interface UserContextType {
+    /**
+     * The current authenticated user, or null if not authenticated
+     */
     user: User | null;
+    /**
+     * Whether the user data is currently loading
+     */
     isLoading: boolean;
 }
-export declare const UserContext: import("react").Context<UserContextType>;
-export interface UserContextProviderProps {
+/**
+ * Context for storing and accessing the current authenticated user
+ */
+declare const UserContext: react.Context<UserContextType>;
+/**
+ * Props for the UserContextProvider component
+ */
+interface UserContextProviderProps {
+    /**
+     * The current authenticated user, or null if not authenticated
+     */
     user: User | null;
+    /**
+     * Whether the user data is currently loading
+     */
     isLoading?: boolean;
+    /**
+     * Child components that will have access to the user context
+     */
     children: ReactNode;
 }
-export declare function UserContextProvider({ user, isLoading, children, }: UserContextProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useUser(): UserContextType;
-//# sourceMappingURL=use-user.d.ts.map
+/**
+ * Provider component for the UserContext
+ */
+declare function UserContextProvider({ user, isLoading, children, }: UserContextProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the current authenticated user from the UserContext
+ * @returns The current user context containing the user object and loading state
+ */
+declare function useUser(): UserContextType;
+
+export { UserContext, UserContextProvider, type UserContextProviderProps, type UserContextType, useUser };

package/dist/hooks/use-user.js

@@ -1,17 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-const defaultContextValue = {
-    isLoading: false,
-    user: null,
+import { jsx } from 'react/jsx-runtime';
+
+// src/hooks/use-user.tsx
+var defaultContextValue = {
+  isLoading: false,
+  user: null
 };
-export const UserContext = createContext(defaultContextValue);
-export function UserContextProvider({ user, isLoading = false, children, }) {
-    return _jsx(UserContext.Provider, { value: { isLoading, user }, children: children });
+var UserContext = createContext(defaultContextValue);
+function UserContextProvider({
+  user,
+  isLoading = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(UserContext.Provider, { value: { isLoading, user }, children });
 }
-export function useUser() {
-    const context = useContext(UserContext);
-    if (context === undefined) {
-        throw new Error('useUser must be used within a UserContextProvider');
-    }
-    return context;
+function useUser() {
+  const context = useContext(UserContext);
+  if (context === void 0) {
+    throw new Error("useUser must be used within a UserContextProvider");
+  }
+  return context;
 }
+
+export { UserContext, UserContextProvider, useUser };

package/dist/utils/author.d.ts

@@ -3,7 +3,7 @@ type AuthorInfo = {
     email?: string;
     url?: string;
 };
-export declare function parseAuthorString(input: string): AuthorInfo;
-export declare function generateLinkFromAuthorString(input: string): React.ReactNode;
-export {};
-//# sourceMappingURL=author.d.ts.map
+declare function parseAuthorString(input: string): AuthorInfo;
+declare function generateLinkFromAuthorString(input: string): React.ReactNode;
+
+export { generateLinkFromAuthorString, parseAuthorString };