@regardio/react 0.5.7 → 0.7.0

package/src/utils/text/text.tsx

@@ -1,5 +1,5 @@
 import { replaceShyInString, splitIntoSentences, typographicQuotes } from '@regardio/js/text';
-import React, { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react';
 
 export const lowerCaseSzett = (text: ReactNode | string, _returnType?: 'string'): ReactNode => {
   // Helper function to process strings
@@ -24,21 +24,18 @@ export const lowerCaseSzett = (text: ReactNode | string, _returnType?: 'string')
     return processString(text);
   }
 
-  // Handle valid React elements with correct type assertion
+  // Handle valid React elements
   if (isValidElement(text)) {
     const element = text as ReactElement<{ children?: ReactNode }>;
-    const { children, ...props } = element.props;
+    const { children } = element.props;
 
-    return cloneElement(element, {
-      ...props,
-      children: lowerCaseSzett(children),
-    });
+    return cloneElement(element, element.props, lowerCaseSzett(children));
   }
 
   // Handle arrays
   if (Array.isArray(text)) {
     return text.map((child, index) => (
-      <React.Fragment key={index.toString()}>{lowerCaseSzett(child as ReactNode)}</React.Fragment>
+      <Fragment key={index.toString()}>{lowerCaseSzett(child as ReactNode)}</Fragment>
     ));
   }
 
@@ -55,19 +52,14 @@ function replaceShyInReactNode(node: ReactNode): ReactNode {
 
   if (isValidElement(node)) {
     const element = node as ReactElement<{ children?: ReactNode }>;
-    const { children, ...props } = element.props;
+    const { children } = element.props;
 
-    return cloneElement(element, {
-      ...props,
-      children: replaceShyInReactNode(children),
-    });
+    return cloneElement(element, element.props, replaceShyInReactNode(children));
   }
 
   if (Array.isArray(node)) {
     return node.map((child, index) => (
-      <React.Fragment key={index.toString()}>
-        {replaceShyInReactNode(child as ReactNode)}
-      </React.Fragment>
+      <Fragment key={index.toString()}>{replaceShyInReactNode(child as ReactNode)}</Fragment>
     ));
   }
 

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

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-
-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): ReactElement;
-
-export { BackgroundSlideshow, type BackgroundSlideshowProps, type ImageData };

package/dist/background-slideshow/index.js

@@ -1,165 +0,0 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
-import { cn } from '@regardio/tailwind/utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/background-slideshow/background-slideshow.tsx
-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/blurry-gradient/index.d.ts

@@ -1,16 +0,0 @@
-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;
-}
-declare const BlurryGradient: (props: BlurryGradientProps) => react_jsx_runtime.JSX.Element;
-
-export { BlurryGradient, type BlurryGradientProps };

package/dist/blurry-gradient/index.js

@@ -1,128 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/blurry-gradient/blurry-gradient.tsx
-var 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"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-
-export { BlurryGradient };

package/dist/carousel/index.d.ts

@@ -1,36 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes } from 'react';
-import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
-
-interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-    'aria-label'?: string;
-}
-declare const CarouselItem: react.ForwardRefExoticComponent<CarouselItemProps & react.RefAttributes<HTMLDivElement>>;
-
-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';
-}
-declare const CarouselRoot: react.ForwardRefExoticComponent<CarouselRootProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const CarouselContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
-
-declare const CarouselNext: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
-
-declare const CarouselPrevious: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
-
-declare namespace index_parts {
-  export { CarouselContent as Content, CarouselItem as Item, CarouselNext as Next, CarouselPrevious as Previous, CarouselRoot as Root };
-}
-
-export { index_parts as Carousel, type CarouselApi, type CarouselItemProps, type CarouselRootProps, useCarousel };

package/dist/carousel/index.js

@@ -1,171 +0,0 @@
-import useEmblaCarousel from 'embla-carousel-react';
-import { createContext, forwardRef, useState, useCallback, useEffect, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var CarouselContext = createContext(null);
-function useCarousel() {
-  const context = useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel.Root />");
-  }
-  return context;
-}
-var CarouselRoot = forwardRef(
-  ({ children, className, opts, orientation = "horizontal", setApi, ...props }, ref) => {
-    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 }) })
-          }
-        )
-      }
-    );
-  }
-);
-CarouselRoot.displayName = "CarouselRoot";
-
-// src/carousel/index.parts.ts
-var index_parts_exports = {};
-__export(index_parts_exports, {
-  Content: () => CarouselContent,
-  Item: () => CarouselItem,
-  Next: () => CarouselNext,
-  Previous: () => CarouselPrevious,
-  Root: () => CarouselRoot
-});
-var CarouselContent = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className,
-        ref,
-        ...props
-      }
-    );
-  }
-);
-CarouselContent.displayName = "CarouselContent";
-var CarouselItem = forwardRef(
-  ({ className, ...props }, ref) => {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: False positive
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-roledescription": "slide",
-          className,
-          ref,
-          role: "group",
-          ...props
-        }
-      )
-    );
-  }
-);
-CarouselItem.displayName = "CarouselItem";
-var CarouselNext = forwardRef(
-  ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className,
-        disabled: !canScrollNext,
-        onClick: scrollNext,
-        ref,
-        type: "button",
-        ...props
-      }
-    );
-  }
-);
-CarouselNext.displayName = "CarouselNext";
-var CarouselPrevious = forwardRef(
-  ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className,
-        disabled: !canScrollPrev,
-        onClick: scrollPrev,
-        ref,
-        type: "button",
-        ...props
-      }
-    );
-  }
-);
-CarouselPrevious.displayName = "CarouselPrevious";
-
-export { index_parts_exports as Carousel, useCarousel };

package/dist/countdown/index.d.ts

@@ -1,5 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function Countdown(): react_jsx_runtime.JSX.Element;
-
-export { Countdown };

package/dist/countdown/index.js

@@ -1,73 +0,0 @@
-import { cn } from '@regardio/tailwind/utils';
-import { useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/countdown/countdown.tsx
-function Countdown() {
-  const [timerValue, setTimerValue] = useState(0);
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(() => {
-    setIsMounted(true);
-    const intervalId = setInterval(() => {
-      setTimerValue((prevValue) => {
-        return prevValue + 1;
-      });
-    }, 1e3);
-    return () => {
-      return clearInterval(intervalId);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "before:absolute",
-        "before:bg-white",
-        'before:content-[""]',
-        "before:h-[180px]",
-        "before:rounded-full",
-        "before:w-[180px]",
-        "flex",
-        "h-[240px]",
-        "items-center",
-        "justify-center",
-        "relative",
-        "rounded-full",
-        "w-[240px]"
-      ),
-      style: {
-        background: `conic-gradient(
-          transparent ${6 * (isMounted ? timerValue : 0)}deg,
-          hsl(var(--red-500)) 0deg,
-          hsl(var(--red-500)) 15deg,
-          hsl(var(--coral-500)) 15deg,
-          hsl(var(--coral-500)) 45deg,
-          hsl(var(--orange-500)) 45deg,
-          hsl(var(--orange-500)) 75deg,
-          hsl(var(--yellow-500)) 75deg,
-          hsl(var(--yellow-500)) 105deg,
-          hsl(var(--olive-500)) 105deg,
-          hsl(var(--olive-500)) 135deg,
-          hsl(var(--lime-500)) 135deg,
-          hsl(var(--lime-500)) 165deg,
-          hsl(var(--green-500)) 165deg,
-          hsl(var(--green-500)) 195deg,
-          hsl(var(--teal-500)) 195deg,
-          hsl(var(--teal-500)) 225deg,
-          hsl(var(--cyan-500)) 225deg,
-          hsl(var(--cyan-500)) 255deg,
-          hsl(var(--blue-500)) 255deg,
-          hsl(var(--blue-500)) 285deg,
-          hsl(var(--purple-500)) 285deg,
-          hsl(var(--purple-500)) 315deg,
-          hsl(var(--pink-500)) 315deg,
-          hsl(var(--pink-500)) 345deg,
-          hsl(var(--red-500)) 345deg
-          )`
-      },
-      children: /* @__PURE__ */ jsx("span", { className: cn("text-foreground", "relative", "text-3xl", "font-bold"), children: isMounted ? timerValue < 10 ? `0${timerValue}` : timerValue : 0 })
-    }
-  );
-}
-
-export { Countdown };