@regardio/react 0.5.5 → 0.6.0

package/dist/grid/index.mjs

@@ -0,0 +1,221 @@
+import { t as __exportAll } from "../chunk-BTpB_u-K.mjs";
+import { createContext, forwardRef, useContext } from "react";
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/grid/grid-item.tsx
+const gridItem = tv({
+	defaultVariants: { span: 12 },
+	slots: { root: ["relative"] },
+	variants: {
+		end: {
+			1: { root: "col-end-1" },
+			2: { root: "col-end-2" },
+			3: { root: "col-end-3" },
+			4: { root: "col-end-4" },
+			5: { root: "col-end-5" },
+			6: { root: "col-end-6" },
+			7: { root: "col-end-7" },
+			8: { root: "col-end-8" },
+			9: { root: "col-end-9" },
+			10: { root: "col-end-10" },
+			11: { root: "col-end-11" },
+			12: { root: "col-end-12" },
+			13: { root: "col-end-13" },
+			auto: { root: "col-end-auto" }
+		},
+		rowSpan: {
+			1: { root: "row-span-1" },
+			2: { root: "row-span-2" },
+			3: { root: "row-span-3" },
+			4: { root: "row-span-4" },
+			5: { root: "row-span-5" },
+			6: { root: "row-span-6" },
+			full: { root: "row-span-full" }
+		},
+		span: {
+			1: { root: "col-span-1" },
+			2: { root: "col-span-2" },
+			3: { root: "col-span-3" },
+			4: { root: "col-span-4" },
+			5: { root: "col-span-5" },
+			6: { root: "col-span-6" },
+			7: { root: "col-span-7" },
+			8: { root: "col-span-8" },
+			9: { root: "col-span-9" },
+			10: { root: "col-span-10" },
+			11: { root: "col-span-11" },
+			12: { root: "col-span-12" },
+			full: { root: "col-span-full" }
+		},
+		spanLg: {
+			1: { root: "@lg:col-span-1" },
+			2: { root: "@lg:col-span-2" },
+			3: { root: "@lg:col-span-3" },
+			4: { root: "@lg:col-span-4" },
+			5: { root: "@lg:col-span-5" },
+			6: { root: "@lg:col-span-6" },
+			7: { root: "@lg:col-span-7" },
+			8: { root: "@lg:col-span-8" },
+			9: { root: "@lg:col-span-9" },
+			10: { root: "@lg:col-span-10" },
+			11: { root: "@lg:col-span-11" },
+			12: { root: "@lg:col-span-12" },
+			full: { root: "@lg:col-span-full" }
+		},
+		spanMd: {
+			1: { root: "@md:col-span-1" },
+			2: { root: "@md:col-span-2" },
+			3: { root: "@md:col-span-3" },
+			4: { root: "@md:col-span-4" },
+			5: { root: "@md:col-span-5" },
+			6: { root: "@md:col-span-6" },
+			7: { root: "@md:col-span-7" },
+			8: { root: "@md:col-span-8" },
+			9: { root: "@md:col-span-9" },
+			10: { root: "@md:col-span-10" },
+			11: { root: "@md:col-span-11" },
+			12: { root: "@md:col-span-12" },
+			full: { root: "@md:col-span-full" }
+		},
+		spanSm: {
+			1: { root: "@sm:col-span-1" },
+			2: { root: "@sm:col-span-2" },
+			3: { root: "@sm:col-span-3" },
+			4: { root: "@sm:col-span-4" },
+			5: { root: "@sm:col-span-5" },
+			6: { root: "@sm:col-span-6" },
+			7: { root: "@sm:col-span-7" },
+			8: { root: "@sm:col-span-8" },
+			9: { root: "@sm:col-span-9" },
+			10: { root: "@sm:col-span-10" },
+			11: { root: "@sm:col-span-11" },
+			12: { root: "@sm:col-span-12" },
+			full: { root: "@sm:col-span-full" }
+		},
+		spanXl: {
+			1: { root: "@xl:col-span-1" },
+			2: { root: "@xl:col-span-2" },
+			3: { root: "@xl:col-span-3" },
+			4: { root: "@xl:col-span-4" },
+			5: { root: "@xl:col-span-5" },
+			6: { root: "@xl:col-span-6" },
+			7: { root: "@xl:col-span-7" },
+			8: { root: "@xl:col-span-8" },
+			9: { root: "@xl:col-span-9" },
+			10: { root: "@xl:col-span-10" },
+			11: { root: "@xl:col-span-11" },
+			12: { root: "@xl:col-span-12" },
+			full: { root: "@xl:col-span-full" }
+		},
+		spanXs: {
+			1: { root: "@xs:col-span-1" },
+			2: { root: "@xs:col-span-2" },
+			3: { root: "@xs:col-span-3" },
+			4: { root: "@xs:col-span-4" },
+			5: { root: "@xs:col-span-5" },
+			6: { root: "@xs:col-span-6" },
+			7: { root: "@xs:col-span-7" },
+			8: { root: "@xs:col-span-8" },
+			9: { root: "@xs:col-span-9" },
+			10: { root: "@xs:col-span-10" },
+			11: { root: "@xs:col-span-11" },
+			12: { root: "@xs:col-span-12" },
+			full: { root: "@xs:col-span-full" }
+		},
+		start: {
+			1: { root: "col-start-1" },
+			2: { root: "col-start-2" },
+			3: { root: "col-start-3" },
+			4: { root: "col-start-4" },
+			5: { root: "col-start-5" },
+			6: { root: "col-start-6" },
+			7: { root: "col-start-7" },
+			8: { root: "col-start-8" },
+			9: { root: "col-start-9" },
+			10: { root: "col-start-10" },
+			11: { root: "col-start-11" },
+			12: { root: "col-start-12" },
+			13: { root: "col-start-13" },
+			auto: { root: "col-start-auto" }
+		}
+	}
+});
+const GridItem = forwardRef(({ children, className, classNames, span, spanXs, spanSm, spanMd, spanLg, spanXl, start, end, rowSpan, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: gridItem({
+			end,
+			rowSpan,
+			span,
+			spanLg,
+			spanMd,
+			spanSm,
+			spanXl,
+			spanXs,
+			start
+		}).root({ className: classNames?.root ?? className }),
+		ref,
+		...props,
+		children
+	});
+});
+GridItem.displayName = "GridItem";
+
+//#endregion
+//#region src/grid/grid-root.tsx
+const grid = tv({
+	defaultVariants: { flow: "dense" },
+	slots: { root: [
+		"u-grid",
+		"grid",
+		"grid-cols-12",
+		"gap-[var(--spacing-grid-gutter)]",
+		"w-full",
+		"container-[grid]/inline-size"
+	] },
+	variants: {
+		align: {
+			center: { root: "content-center" },
+			end: { root: "content-end" },
+			start: { root: "content-start" },
+			stretch: { root: "content-stretch" }
+		},
+		flow: {
+			column: { root: "grid-auto-flow-col" },
+			dense: { root: "grid-auto-flow-dense" },
+			row: { root: "grid-auto-flow-row" }
+		}
+	}
+});
+const GridContext = createContext(null);
+function useGrid() {
+	const context = useContext(GridContext);
+	if (!context) throw new Error("useGrid must be used within a <Grid.Root />");
+	return context;
+}
+const GridRoot = forwardRef(({ children, className, classNames, flow, align, ...props }, ref) => {
+	const styles = grid({
+		align,
+		flow
+	});
+	return /* @__PURE__ */ jsx(GridContext.Provider, {
+		value: { styles },
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.root({ className: classNames?.root ?? className }),
+			ref,
+			...props,
+			children
+		})
+	});
+});
+GridRoot.displayName = "GridRoot";
+
+//#endregion
+//#region src/grid/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => GridItem,
+	Root: () => GridRoot
+});
+
+//#endregion
+export { index_parts_exports as Grid, gridItem, useGrid };

package/dist/heading/index.d.mts

@@ -0,0 +1,31 @@
+import { ElementType, HTMLAttributes } from "react";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
+
+//#region src/heading/heading.d.ts
+declare const levelVariants: {
+  readonly 1: readonly ["text-2xl"];
+  readonly 2: readonly ["text-xl"];
+  readonly 3: readonly ["text-lg"];
+  readonly 4: readonly ["text-md"];
+  readonly 5: readonly ["text-sm"];
+  readonly 6: readonly ["text-xs"];
+};
+type HeadingLevel = keyof typeof levelVariants;
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  as?: ElementType;
+  className?: string;
+  level?: HeadingLevel;
+  locale?: string;
+}
+declare const Heading: {
+  ({
+    as,
+    children,
+    className,
+    level,
+    ...props
+  }: HeadingProps): react_jsx_runtime52.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/heading/index.mjs

@@ -0,0 +1,29 @@
+import { r as shy, t as lowerCaseSzett } from "../text-CPlUND-Z.mjs";
+import { cn, tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/heading/heading.tsx
+const heading = tv({
+	base: [],
+	defaultVariants: { level: 3 },
+	variants: { level: {
+		1: ["text-2xl"],
+		2: ["text-xl"],
+		3: ["text-lg"],
+		4: ["text-md"],
+		5: ["text-sm"],
+		6: ["text-xs"]
+	} }
+});
+const Heading = ({ as, children, className, level = 2, ...props }) => {
+	const word = lowerCaseSzett(shy(children));
+	return /* @__PURE__ */ jsx(as || `h${level}`, {
+		className: cn(heading({ level }), className),
+		...props,
+		children: word
+	});
+};
+Heading.displayName = "Heading";
+
+//#endregion
+export { Heading };

package/dist/highlight/index.d.mts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime49 from "react/jsx-runtime";
+
+//#region src/highlight/highlight.d.ts
+declare const highlightVariants: {
+  readonly primary: readonly ["highlight"];
+};
+type HighlightVariant = keyof typeof highlightVariants;
+interface HighlightProps extends ComponentProps<'mark'> {
+  variant?: HighlightVariant;
+}
+declare const Highlight: ({
+  children,
+  className,
+  variant
+}: HighlightProps) => react_jsx_runtime49.JSX.Element;
+//#endregion
+export { Highlight, type HighlightProps };

package/dist/highlight/index.mjs

@@ -0,0 +1,35 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/highlight/highlight.tsx
+const highlight = tv({
+	defaultVariants: { variant: "primary" },
+	variants: { variant: { primary: ["highlight"] } }
+});
+const Highlight = ({ children, className, variant }) => {
+	return /* @__PURE__ */ jsxs("mark", {
+		className: highlight({
+			className,
+			variant
+		}),
+		children: [children, /* @__PURE__ */ jsx("svg", {
+			"aria-label": "!",
+			role: "img",
+			children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { children: [/* @__PURE__ */ jsx("feTurbulence", {
+				baseFrequency: "0 0.2",
+				numOctaves: "5",
+				result: "warp",
+				type: "fractalNoise"
+			}), /* @__PURE__ */ jsx("feDisplacementMap", {
+				in: "SourceGraphic",
+				in2: "warp",
+				scale: "30",
+				xChannelSelector: "R",
+				yChannelSelector: "G"
+			})] }) })
+		})]
+	});
+};
+
+//#endregion
+export { Highlight };

package/dist/hooks/{use-current-route-data.d.ts → use-current-route-data.d.mts}

@@ -1,7 +1,8 @@
+//#region src/hooks/use-current-route-data.d.ts
 /**
  * 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 };
+//#endregion
+export { useCurrentRouteData };

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

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { useLocation, useMatches } from "react-router";
+
+//#region src/hooks/use-current-route-data.ts
+/**
+* This base hook is used to access data related to the current route
+* @returns {JSON|undefined} The router data or undefined if not found
+*/
+function useCurrentRouteData() {
+	const location = useLocation();
+	const matchingRoutes = useMatches();
+	return useMemo(() => {
+		return matchingRoutes.find((route) => {
+			return route.pathname === location.pathname;
+		});
+	}, [matchingRoutes, location])?.data || void 0;
+}
+
+//#endregion
+export { useCurrentRouteData };

package/dist/hooks/{use-focus-search.d.ts → use-focus-search.d.mts}

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

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

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+//#region src/hooks/use-focus-search.ts
+/** Focuses on the field when user clicks cmd + k or ctrl + k */
+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]);
+}
+
+//#endregion
+export { useFocusSearch };

package/dist/hooks/{use-matches-data.d.ts → use-matches-data.d.mts}

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

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

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { useMatches } from "react-router";
+
+//#region src/hooks/use-matches-data.ts
+/**
+* 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
+*/
+function useMatchesData(id) {
+	const matchingRoutes = useMatches();
+	return useMemo(() => {
+		return matchingRoutes.find((route) => {
+			return route.id === id;
+		});
+	}, [matchingRoutes, id])?.data || void 0;
+}
+
+//#endregion
+export { useMatchesData };

package/dist/hooks/{use-media-query.d.ts → use-media-query.d.mts}

@@ -1,8 +1,9 @@
+//#region src/hooks/use-media-query.d.ts
 /**
  * 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 };
+//#endregion
+export { useMediaQuery };

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

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-media-query.ts
+/**
+* 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
+*/
+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;
+}
+
+//#endregion
+export { useMediaQuery };

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

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-mobile.mjs

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-mobile.ts
+const 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;
+}
+
+//#endregion
+export { useIsMobile };

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

@@ -0,0 +1,8 @@
+import * as react0 from "react";
+
+//#region src/hooks/use-nonce.d.ts
+declare const NonceContext: react0.Context<string>;
+declare const NonceProvider: react0.Provider<string>;
+declare const useNonce: () => string;
+//#endregion
+export { NonceContext, NonceProvider, useNonce };

package/dist/hooks/use-nonce.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+//#region src/hooks/use-nonce.ts
+/**
+* Nonce Provider.
+* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+*/
+const NonceContext = createContext("");
+const NonceProvider = NonceContext.Provider;
+const useNonce = () => useContext(NonceContext);
+
+//#endregion
+export { NonceContext, NonceProvider, useNonce };

package/dist/hooks/{use-orientation.d.ts → use-orientation.d.mts}

@@ -1,3 +1,4 @@
+//#region src/hooks/use-orientation.d.ts
 /**
  * Orientation type representing device orientation
  */
@@ -7,5 +8,5 @@ type Orientation = 'portrait' | 'landscape';
  * @returns The current orientation ('portrait' or 'landscape')
  */
 declare function useOrientation(): Orientation;
-
-export { type Orientation, useOrientation };
+//#endregion
+export { Orientation, useOrientation };

package/dist/hooks/use-orientation.mjs

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-orientation.ts
+/**
+* Hook that tracks the current device orientation
+* @returns The current orientation ('portrait' or 'landscape')
+*/
+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;
+}
+
+//#endregion
+export { useOrientation };

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

@@ -0,0 +1,55 @@
+import * as react1 from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { User } from "@supabase/supabase-js";
+
+//#region src/hooks/use-user.d.ts
+/**
+ * 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;
+}
+/**
+ * Context for storing and accessing the current authenticated user
+ */
+declare const UserContext: react1.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;
+}
+/**
+ * Provider component for the UserContext
+ */
+declare function UserContextProvider({
+  user,
+  isLoading,
+  children
+}: UserContextProviderProps): react_jsx_runtime0.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;
+//#endregion
+export { UserContext, UserContextProvider, UserContextProviderProps, UserContextType, useUser };

package/dist/hooks/use-user.mjs

@@ -0,0 +1,39 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/use-user.tsx
+/**
+* Default context value when no provider is present
+*/
+const defaultContextValue = {
+	isLoading: false,
+	user: null
+};
+/**
+* Context for storing and accessing the current authenticated user
+*/
+const UserContext = createContext(defaultContextValue);
+/**
+* Provider component for the UserContext
+*/
+function UserContextProvider({ user, isLoading = false, children }) {
+	return /* @__PURE__ */ jsx(UserContext.Provider, {
+		value: {
+			isLoading,
+			user
+		},
+		children
+	});
+}
+/**
+* Hook to access the current authenticated user from the UserContext
+* @returns The current user context containing the user object and loading state
+*/
+function useUser() {
+	const context = useContext(UserContext);
+	if (context === void 0) throw new Error("useUser must be used within a UserContextProvider");
+	return context;
+}
+
+//#endregion
+export { UserContext, UserContextProvider, useUser };