@regardio/react 0.3.3 → 0.4.2

package/dist/components/background-slideshow.d.ts

@@ -1,12 +1,13 @@
-import type { ReactElement } from 'react';
-export type ImageData = {
+import { ReactElement } from 'react';
+
+type ImageData = {
     at: Record<string, string>;
     fn: string;
     hu: number;
     id: string;
     po: boolean;
 };
-export interface BackgroundSlideshowProps {
+interface BackgroundSlideshowProps {
     baseUrl: string;
     className?: string;
     imgClassName?: string;
@@ -18,5 +19,6 @@ export interface BackgroundSlideshowProps {
     slideshowInterval?: number;
     transitionDuration?: number;
 }
-export declare function BackgroundSlideshow({ baseUrl, className, imgClassName, locale, pictureClassName, images, slideshow, slideshowInterval, transitionDuration, filter, }: BackgroundSlideshowProps): ReactElement;
-//# sourceMappingURL=background-slideshow.d.ts.map
+declare function BackgroundSlideshow({ baseUrl, className, imgClassName, locale, pictureClassName, images, slideshow, slideshowInterval, transitionDuration, filter, }: BackgroundSlideshowProps): ReactElement;
+
+export { BackgroundSlideshow, type BackgroundSlideshowProps, type ImageData };

package/dist/components/background-slideshow.js

@@ -1,76 +1,174 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Picture } from './picture';
-export function BackgroundSlideshow({ baseUrl, className = '', imgClassName = '', locale, pictureClassName = '', images = [], slideshow = true, slideshowInterval = 6000, transitionDuration = 6000, 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(undefined);
-    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 _jsx("div", { className: className });
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { defineConfig, cx } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/background-slideshow.tsx
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
     }
-    const baseImage = availableImages[currentIndex] || firstImage;
-    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "absolute inset-0 w-full h-full", children: _jsx(Picture, { alt: baseImage.at[locale] || '', baseUrl: baseUrl.replace('{id}', baseImage.id).replace('{fn}', baseImage.fn), className: pictureClassName, formats: [{ size: '', width: 1080 }], imgClassName: imgClassName, placeholder: "" }) }), overlayImage && (_jsx("div", { className: `absolute inset-0 w-full h-full transition-opacity ${overlayVisible ? 'opacity-100' : 'opacity-0'} ${transitionDuration <= 3000 ? 'duration-3000' : transitionDuration <= 4000 ? 'duration-4000' : transitionDuration <= 5000 ? 'duration-5000' : 'duration-6000'}`, children: _jsx(Picture, { alt: overlayImage.at[locale] || '', baseUrl: baseUrl.replace('{id}', overlayImage.id).replace('{fn}', overlayImage.fn), className: pictureClassName, formats: [{ size: '', width: 1080 }], imgClassName: imgClassName, placeholder: "" }) }))] }));
+  }
+});
+var cn = (...inputs) => twMerge(cx(inputs));
+var Picture = ({
+  alt,
+  baseUrl,
+  className,
+  formats,
+  imgClassName,
+  placeholder = "{format}",
+  sizes = "(max-width: 480px) 480px, (max-width: 768px) 600px, (max-width: 1200px) 1024px, 1920px"
+}) => {
+  const imageFormats = formats || [
+    { size: "480x360", width: 480 },
+    { size: "600x600", width: 600 },
+    { size: "1024x768", width: 1024 },
+    { size: "1920x1440", width: 1920 }
+  ];
+  if (imageFormats.length === 0) {
+    return null;
+  }
+  const isSimpleImage = imageFormats.length === 1 && imageFormats[0]?.size === "" || !baseUrl.includes(placeholder);
+  if (isSimpleImage) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        className: cn(className, imgClassName),
+        src: baseUrl
+      }
+    );
+  }
+  const srcSet = imageFormats.map(({ size, width }) => {
+    const url = baseUrl.replace(placeholder, size);
+    return `${url} ${width}w`;
+  }).join(", ");
+  const defaultFormat = imageFormats[0];
+  const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
+  return /* @__PURE__ */ jsxs("picture", { className, children: [
+    /* @__PURE__ */ jsx(
+      "source",
+      {
+        sizes,
+        srcSet
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        className: cn(imgClassName),
+        src: defaultSrc
+      }
+    )
+  ] });
+};
+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: ""
+          }
+        )
+      }
+    )
+  ] });
 }
+
+export { BackgroundSlideshow };

package/dist/components/blurry-gradient.d.ts

@@ -1,9 +1,16 @@
-import type { SVGProps } from 'react';
-export interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps } from 'react';
+
+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;
 }
-export declare const BlurryGradient: (props: BlurryGradientProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=blurry-gradient.d.ts.map
+declare const BlurryGradient: (props: BlurryGradientProps) => react_jsx_runtime.JSX.Element;
+
+export { BlurryGradient, type BlurryGradientProps };

package/dist/components/blurry-gradient.js

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

package/dist/components/box.d.ts

@@ -1,17 +1,20 @@
-import type { ComponentProps, ElementType } 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, ElementType } from 'react';
+
 declare const box: (props?: ({
-    variant?: "code" | "aside" | "main" | "section" | "grid" | "primary" | "container" | "flex" | undefined;
+    variant?: "grid" | "main" | "primary" | "aside" | "code" | "container" | "flex" | "section" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
-export interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
+interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
     as?: ElementType;
 }
-export declare const Box: ({ as: Component, children, className, variant, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=box.d.ts.map
+declare const Box: ({ as: Component, children, className, variant, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
+
+export { Box, type BoxProps };

package/dist/components/box.js

@@ -1,25 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from '../utils/cn';
-const box = cva({
-    defaultVariants: {
-        variant: 'primary',
-    },
-    variants: {
-        variant: {
-            aside: [],
-            code: ['font-monospace', 'overflow-scroll'],
-            container: ['u-container'],
-            flex: ['flex'],
-            grid: ['u-grid'],
-            main: [],
-            primary: [],
-            section: ['u-grid', 'content-start'],
-        },
-    },
+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 Box = ({ as: Component = 'div', children, className, variant, ...props }) => {
-    return (_jsx(Component, { className: box({
-            className,
-            variant,
-        }), ...props, children: children }));
+var box = cva({
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      aside: [],
+      code: ["font-monospace", "overflow-scroll"],
+      container: ["u-container"],
+      flex: ["flex"],
+      grid: ["u-grid"],
+      main: [],
+      primary: [],
+      section: ["u-grid", "content-start"]
+    }
+  }
+});
+var Box = ({
+  as: Component = "div",
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: box({
+        className,
+        variant
+      }),
+      ...props,
+      children
+    }
+  );
 };
+
+export { Box };

package/dist/components/carousel.d.ts

@@ -1,6 +1,8 @@
-import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
-import { type HTMLAttributes } from 'react';
-export type CarouselApi = EmblaCarouselType;
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
+
+type CarouselApi = EmblaCarouselType;
 interface CarouselContextValue {
     api: CarouselApi | undefined;
     scrollPrev: () => void;
@@ -14,13 +16,13 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     setApi?: (api: CarouselApi) => void;
     orientation?: 'horizontal' | 'vertical';
 }
-declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const CarouselContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
     'aria-label'?: string;
 }
-declare const CarouselItem: import("react").ForwardRefExoticComponent<CarouselItemProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const CarouselPrevious: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-declare const CarouselNext: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
-//# sourceMappingURL=carousel.d.ts.map
+declare const CarouselItem: react.ForwardRefExoticComponent<CarouselItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };