@regardio/react 0.5.7 → 0.7.0

package/dist/background-slideshow/index.d.mts

@@ -0,0 +1,34 @@
+//#region src/background-slideshow/background-slideshow.d.ts
+type ImageData = {
+  at: Record<string, string>;
+  fn: string;
+  hu: number;
+  id: string;
+  po: boolean;
+};
+interface BackgroundSlideshowProps {
+  baseUrl: string;
+  className?: string;
+  imgClassName?: string;
+  locale: string;
+  pictureClassName?: string;
+  images: ImageData[];
+  filter?: (image: ImageData) => boolean;
+  slideshow?: boolean;
+  slideshowInterval?: number;
+  transitionDuration?: number;
+}
+declare function BackgroundSlideshow({
+  baseUrl,
+  className,
+  imgClassName,
+  locale,
+  pictureClassName,
+  images,
+  slideshow,
+  slideshowInterval,
+  transitionDuration,
+  filter
+}: BackgroundSlideshowProps): React.JSX.Element;
+//#endregion
+export { BackgroundSlideshow, type BackgroundSlideshowProps, type ImageData };

package/dist/background-slideshow/index.mjs

@@ -0,0 +1,110 @@
+import { t as Picture } from "../picture-DkX3W5zl.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/background-slideshow/background-slideshow.tsx
+function BackgroundSlideshow({ baseUrl, className = "", imgClassName = "", locale, pictureClassName = "", images = [], slideshow = true, slideshowInterval = 6e3, transitionDuration = 6e3, filter }) {
+	const validatedImages = useMemo(() => {
+		return images.map((img) => {
+			if (typeof img !== "object" || img === null) return null;
+			return {
+				at: img.at || {},
+				fn: img.fn || "",
+				hu: img.hu || 0,
+				id: img.id || "",
+				po: img.po || false
+			};
+		}).filter((img) => img !== null);
+	}, [images]);
+	const availableImages = useMemo(() => {
+		const filtered = filter ? validatedImages.filter(filter) : validatedImages;
+		return filtered.length > 0 ? filtered : validatedImages;
+	}, [validatedImages, filter]);
+	const firstImage = availableImages[0] || null;
+	const [slideshowStarted, setSlideshowStarted] = useState(false);
+	const [overlayImage, setOverlayImage] = useState(null);
+	const [overlayVisible, setOverlayVisible] = useState(false);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const timerRef = useRef(void 0);
+	const isTransitioning = useRef(false);
+	useEffect(() => {
+		if (!slideshow || availableImages.length <= 1) return;
+		const timeout = window.setTimeout(() => {
+			setSlideshowStarted(true);
+		}, slideshowInterval);
+		return () => window.clearTimeout(timeout);
+	}, [
+		slideshow,
+		availableImages.length,
+		slideshowInterval
+	]);
+	useEffect(() => {
+		if (!slideshowStarted || availableImages.length <= 1) return;
+		if (timerRef.current) window.clearTimeout(timerRef.current);
+		const cycleImages = () => {
+			if (isTransitioning.current) return;
+			isTransitioning.current = true;
+			const nextIdx = (currentIndex + 1) % availableImages.length;
+			const nextImage = availableImages[nextIdx];
+			if (!nextImage) {
+				isTransitioning.current = false;
+				return;
+			}
+			setOverlayImage(nextImage);
+			window.setTimeout(() => {
+				setOverlayVisible(true);
+				window.setTimeout(() => {
+					setCurrentIndex(nextIdx);
+					setOverlayVisible(false);
+					isTransitioning.current = false;
+					timerRef.current = window.setTimeout(cycleImages, slideshowInterval);
+				}, transitionDuration);
+			}, 100);
+		};
+		cycleImages();
+		return () => {
+			if (timerRef.current) window.clearTimeout(timerRef.current);
+		};
+	}, [
+		slideshowStarted,
+		availableImages,
+		currentIndex,
+		slideshowInterval,
+		transitionDuration
+	]);
+	if (validatedImages.length === 0 || !firstImage) return /* @__PURE__ */ jsx("div", { className });
+	const baseImage = availableImages[currentIndex] || firstImage;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 w-full h-full",
+			children: /* @__PURE__ */ jsx(Picture, {
+				alt: baseImage.at[locale] || "",
+				baseUrl: baseUrl.replace("{id}", baseImage.id).replace("{fn}", baseImage.fn),
+				className: pictureClassName,
+				formats: [{
+					size: "",
+					width: 1080
+				}],
+				imgClassName,
+				placeholder: ""
+			})
+		}), overlayImage && /* @__PURE__ */ jsx("div", {
+			className: `absolute inset-0 w-full h-full transition-opacity ${overlayVisible ? "opacity-100" : "opacity-0"} ${transitionDuration <= 3e3 ? "duration-3000" : transitionDuration <= 4e3 ? "duration-4000" : transitionDuration <= 5e3 ? "duration-5000" : "duration-6000"}`,
+			children: /* @__PURE__ */ jsx(Picture, {
+				alt: overlayImage.at[locale] || "",
+				baseUrl: baseUrl.replace("{id}", overlayImage.id).replace("{fn}", overlayImage.fn),
+				className: pictureClassName,
+				formats: [{
+					size: "",
+					width: 1080
+				}],
+				imgClassName,
+				placeholder: ""
+			})
+		})]
+	});
+}
+
+//#endregion
+export { BackgroundSlideshow };

package/dist/blurry-gradient/index.d.mts

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+//#region src/blurry-gradient/blurry-gradient.d.ts
+interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
+  primaryColor: string;
+  secondaryColor: string;
+  neutralColor: string;
+  /**
+  	* Accessible description for the gradient (for screen readers)
+  	* @default 'Decorative blurry gradient'
+  	*/
+  description?: string;
+}
+declare const BlurryGradient: (props: BlurryGradientProps) => React.JSX.Element;
+//#endregion
+export { BlurryGradient, type BlurryGradientProps };

package/dist/blurry-gradient/index.mjs

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/blurry-gradient/blurry-gradient.tsx
+const BlurryGradient = (props) => {
+	const { description = "Decorative blurry gradient", neutralColor, primaryColor, secondaryColor, ...svgProps } = props;
+	const titleId = "blurryGradientTitle";
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-labelledby": titleId,
+		preserveAspectRatio: "none",
+		role: "img",
+		viewBox: "0 0 1000 1000",
+		...svgProps,
+		children: [
+			/* @__PURE__ */ jsx("title", {
+				id: titleId,
+				children: description
+			}),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+				colorInterpolationFilters: "sRGB",
+				filterUnits: "userSpaceOnUse",
+				height: "120%",
+				width: "120%",
+				x: "-10%",
+				y: "-10%",
+				children: [
+					/* @__PURE__ */ jsx("feFlood", {
+						floodOpacity: "0",
+						result: "BackgroundImageFix"
+					}),
+					/* @__PURE__ */ jsx("feBlend", {
+						in: "SourceGraphic",
+						in2: "BackgroundImageFix",
+						mode: "normal",
+						result: "shape"
+					}),
+					/* @__PURE__ */ jsx("feGaussianBlur", {
+						result: "effect1_foregroundBlur",
+						stdDeviation: "161"
+					})
+				]
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				fill: primaryColor,
+				height: "1000",
+				width: "1000"
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				filter: "url(#blurryGradient)",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "730",
+						cy: "559",
+						fill: secondaryColor,
+						r: "357"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "316",
+						cy: "248",
+						fill: primaryColor,
+						r: "357"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "509",
+						cy: "410",
+						fill: neutralColor,
+						r: "357"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "633",
+						cy: "232",
+						fill: secondaryColor,
+						r: "357"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "156",
+						cy: "82",
+						fill: primaryColor,
+						r: "357"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "150",
+						cy: "389",
+						fill: neutralColor,
+						r: "357"
+					})
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+export { BlurryGradient };

package/dist/button/index.d.mts

@@ -0,0 +1,2 @@
+import { i as ButtonVariant, n as ButtonProps, r as ButtonSize, t as Button } from "../index-C_evL5vG.mjs";
+export { Button, ButtonProps, ButtonSize, ButtonVariant };

package/dist/button/index.mjs

@@ -0,0 +1,3 @@
+import { t as Button } from "../button-BiSQpBbc.mjs";
+
+export { Button };

package/dist/button-BiSQpBbc.mjs

@@ -0,0 +1,129 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+
+//#region src/button/button.tsx
+const buttonVariants = {
+	destructive: [
+		"bg-red-600",
+		"text-white",
+		"border-red-600",
+		"hover:bg-red-700",
+		"hover:border-red-700",
+		"focus-visible:ring-2",
+		"focus-visible:ring-red-500",
+		"focus-visible:ring-offset-2"
+	],
+	ghost: [
+		"bg-transparent",
+		"text-gray-900",
+		"border-transparent",
+		"hover:bg-gray-100",
+		"hover:border-transparent",
+		"focus-visible:ring-2",
+		"focus-visible:ring-gray-500",
+		"focus-visible:ring-offset-2"
+	],
+	outline: [
+		"bg-transparent",
+		"text-gray-900",
+		"border-gray-300",
+		"hover:bg-gray-50",
+		"hover:border-gray-400",
+		"focus-visible:ring-2",
+		"focus-visible:ring-gray-500",
+		"focus-visible:ring-offset-2"
+	],
+	primary: [
+		"bg-blue-600",
+		"text-white",
+		"border-blue-600",
+		"hover:bg-blue-700",
+		"hover:border-blue-700",
+		"focus-visible:ring-2",
+		"focus-visible:ring-blue-500",
+		"focus-visible:ring-offset-2"
+	],
+	secondary: [
+		"bg-gray-100",
+		"text-gray-900",
+		"border-gray-300",
+		"hover:bg-gray-200",
+		"hover:border-gray-400",
+		"focus-visible:ring-2",
+		"focus-visible:ring-gray-500",
+		"focus-visible:ring-offset-2"
+	]
+};
+const button = tv({
+	base: [
+		"inline-flex",
+		"items-center",
+		"justify-center",
+		"border",
+		"transition-colors",
+		"duration-200",
+		"ease-in-out",
+		"disabled:opacity-50",
+		"disabled:cursor-not-allowed",
+		"disabled:pointer-events-none"
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "primary"
+	},
+	variants: {
+		size: {
+			"2xl": [
+				"px-10",
+				"py-5",
+				"text-2xl",
+				"font-medium",
+				"rounded-lg"
+			],
+			lg: [
+				"px-6",
+				"py-3",
+				"text-lg",
+				"font-medium",
+				"rounded-lg"
+			],
+			md: [
+				"px-4",
+				"py-2",
+				"text-base",
+				"font-medium",
+				"rounded-md"
+			],
+			sm: [
+				"px-3",
+				"py-1.5",
+				"text-sm",
+				"font-medium",
+				"rounded-md"
+			],
+			xl: [
+				"px-8",
+				"py-4",
+				"text-xl",
+				"font-medium",
+				"rounded-lg"
+			]
+		},
+		variant: buttonVariants
+	}
+});
+const Button$1 = ({ children, className, variant, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		className: button({
+			className,
+			size,
+			variant
+		}),
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Button$1 as t };

package/dist/carousel/index.d.mts

@@ -0,0 +1,74 @@
+import { HTMLAttributes } from "react";
+import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
+
+//#region src/carousel/carousel-item.d.ts
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  "aria-label"?: string;
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const CarouselItem: ({
+  className,
+  ref,
+  ...props
+}: CarouselItemProps) => React.JSX.Element;
+//#endregion
+//#region src/carousel/carousel-root.d.ts
+type CarouselApi = EmblaCarouselType;
+interface CarouselContextValue {
+  api: CarouselApi | undefined;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+}
+declare function useCarousel(): CarouselContextValue;
+interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
+  opts?: EmblaOptionsType;
+  setApi?: (api: CarouselApi) => void;
+  orientation?: "horizontal" | "vertical";
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const CarouselRoot: ({
+  children,
+  className,
+  opts,
+  orientation,
+  setApi,
+  ref,
+  ...props
+}: CarouselRootProps) => React.JSX.Element;
+//#endregion
+//#region src/carousel/carousel-content.d.ts
+interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>;
+}
+declare const CarouselContent: ({
+  className,
+  ref,
+  ...props
+}: CarouselContentProps) => React.JSX.Element;
+//#endregion
+//#region src/carousel/carousel-next.d.ts
+interface CarouselNextProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
+declare const CarouselNext: ({
+  className,
+  ref,
+  ...props
+}: CarouselNextProps) => React.JSX.Element;
+//#endregion
+//#region src/carousel/carousel-previous.d.ts
+interface CarouselPreviousProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
+declare const CarouselPrevious: ({
+  className,
+  ref,
+  ...props
+}: CarouselPreviousProps) => React.JSX.Element;
+declare namespace index_parts_d_exports {
+  export { CarouselContent as Content, CarouselItem as Item, CarouselNext as Next, CarouselPrevious as Previous, CarouselRoot as Root };
+}
+//#endregion
+export { index_parts_d_exports as Carousel, type CarouselApi, type CarouselItemProps, type CarouselRootProps, useCarousel };

package/dist/carousel/index.mjs

@@ -0,0 +1,136 @@
+import { t as __exportAll } from "../chunk-BTpB_u-K.mjs";
+import { t as Button } from "../button-BiSQpBbc.mjs";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+
+//#region src/carousel/carousel-root.tsx
+const CarouselContext = createContext(null);
+function useCarousel() {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel.Root />");
+	return context;
+}
+const CarouselRoot = function CarouselRoot({ children, className, opts, orientation = "horizontal", setApi, ref, ...props }) {
+	const [emblaRef, emblaApi] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	});
+	const [canScrollPrev, setCanScrollPrev] = useState(false);
+	const [canScrollNext, setCanScrollNext] = useState(false);
+	const onSelect = useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = useCallback(() => {
+		emblaApi?.scrollPrev();
+	}, [emblaApi]);
+	const scrollNext = useCallback(() => {
+		emblaApi?.scrollNext();
+	}, [emblaApi]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	useEffect(() => {
+		if (!emblaApi || !setApi) return;
+		setApi(emblaApi);
+	}, [emblaApi, setApi]);
+	useEffect(() => {
+		if (!emblaApi) return;
+		onSelect(emblaApi);
+		emblaApi.on("reInit", onSelect);
+		emblaApi.on("select", onSelect);
+		return () => {
+			emblaApi?.off("select", onSelect);
+		};
+	}, [emblaApi, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			api: emblaApi,
+			canScrollNext,
+			canScrollPrev,
+			scrollNext,
+			scrollPrev
+		},
+		children: /* @__PURE__ */ jsx("section", {
+			"aria-label": "Carousel",
+			"aria-roledescription": "carousel",
+			className,
+			onKeyDownCapture: handleKeyDown,
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: emblaRef,
+				children: /* @__PURE__ */ jsx("div", { children })
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/carousel/carousel-content.tsx
+const CarouselContent = function CarouselContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref,
+		...props
+	});
+};
+
+//#endregion
+//#region src/carousel/carousel-item.tsx
+const CarouselItem = function CarouselItem({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-roledescription": "slide",
+		className,
+		ref,
+		role: "group",
+		...props
+	});
+};
+
+//#endregion
+//#region src/carousel/carousel-next.tsx
+const CarouselNext = function CarouselNext({ className, ref, ...props }) {
+	const { canScrollNext, scrollNext } = useCarousel();
+	return /* @__PURE__ */ jsx(Button, {
+		className,
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		ref,
+		...props
+	});
+};
+
+//#endregion
+//#region src/carousel/carousel-previous.tsx
+const CarouselPrevious = function CarouselPrevious({ className, ref, ...props }) {
+	const { canScrollPrev, scrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsx(Button, {
+		className,
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		ref,
+		...props
+	});
+};
+
+//#endregion
+//#region src/carousel/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => CarouselContent,
+	Item: () => CarouselItem,
+	Next: () => CarouselNext,
+	Previous: () => CarouselPrevious,
+	Root: () => CarouselRoot
+});
+
+//#endregion
+export { index_parts_exports as Carousel, useCarousel };

package/dist/checkbox/index.d.mts

@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/checkbox/checkbox.d.ts
+type CheckboxSize = "sm" | "md" | "lg";
+interface CheckboxRootProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> {
+  className?: string;
+  size?: CheckboxSize;
+}
+interface CheckboxIndicatorProps extends Omit<ComponentProps<typeof Checkbox$1.Indicator>, "className"> {
+  className?: string;
+}
+declare const CheckboxRoot: ({
+  className,
+  size,
+  ...props
+}: CheckboxRootProps) => React.JSX.Element;
+declare const CheckboxIndicator: ({
+  className,
+  children,
+  ...props
+}: CheckboxIndicatorProps) => React.JSX.Element;
+declare const Checkbox: {
+  Indicator: typeof CheckboxIndicator;
+  Root: typeof CheckboxRoot;
+};
+//#endregion
+export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, CheckboxRoot, type CheckboxRootProps, type CheckboxSize };

package/dist/checkbox/index.mjs

@@ -0,0 +1,70 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/checkbox/checkbox.tsx
+const checkboxRoot = tv({
+	base: [
+		"h-4",
+		"w-4",
+		"rounded",
+		"border",
+		"border-gray-300",
+		"bg-white",
+		"focus:outline-none",
+		"focus:ring-2",
+		"focus:ring-blue-500",
+		"focus:ring-offset-2",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-50",
+		"data-[checked]:bg-blue-600",
+		"data-[checked]:border-blue-600",
+		"transition-colors",
+		"duration-200",
+		"cursor-pointer"
+	],
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: ["h-5", "w-5"],
+		md: ["h-4", "w-4"],
+		sm: ["h-3", "w-3"]
+	} }
+});
+const checkboxIndicator = tv({ base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"text-white",
+	"data-[unchecked]:invisible"
+] });
+const CheckboxRoot = ({ className, size = "md", ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		className: checkboxRoot({
+			className,
+			size
+		}),
+		...props
+	});
+};
+const CheckboxIndicator = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		className: checkboxIndicator({ className }),
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			fill: "none",
+			height: "12",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			viewBox: "0 0 12 12",
+			width: "12",
+			children: /* @__PURE__ */ jsx("polyline", { points: "2,6 5,9 10,3" })
+		})
+	});
+};
+const Checkbox = {
+	Indicator: CheckboxIndicator,
+	Root: CheckboxRoot
+};
+
+//#endregion
+export { Checkbox, CheckboxIndicator, CheckboxRoot };