@regardio/react 0.3.2

package/src/components/background-slideshow.tsx

@@ -0,0 +1,172 @@
+import type { ReactElement } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Picture } from './picture';
+
+export type ImageData = {
+  at: Record<string, string>; // Alt text in different languages
+  fn: string; // File name
+  hu: number; // Hue in HSL degrees
+  id: string; // ID of the image
+  po: boolean; // Whether the image is a placeholder
+};
+
+export interface BackgroundSlideshowProps {
+  baseUrl: string; // URL template with {id} and {format} placeholders
+  className?: string; // CSS class for the container
+  imgClassName?: string; // CSS class for the image
+  locale: string; // Locale for the alt text
+  pictureClassName?: string; // CSS class for the picture component
+  images: ImageData[]; // Array of images
+  filter?: (image: ImageData) => boolean; // Optional filter function
+  slideshow?: boolean; // Whether to enable the slideshow
+  slideshowInterval?: number; // Time in ms between transitions
+  transitionDuration?: number; // Time in ms for the fade transition
+}
+
+export function BackgroundSlideshow({
+  baseUrl,
+  className = '',
+  imgClassName = '',
+  locale,
+  pictureClassName = '',
+  images = [],
+  slideshow = true,
+  slideshowInterval = 6000,
+  transitionDuration = 6000,
+  filter,
+}: BackgroundSlideshowProps): ReactElement {
+  // Validate images synchronously for immediate first image render
+  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 is ImageData => img !== null);
+  }, [images]);
+
+  // Get filtered images for slideshow
+  const availableImages = useMemo(() => {
+    const filtered = filter ? validatedImages.filter(filter) : validatedImages;
+    return filtered.length > 0 ? filtered : validatedImages;
+  }, [validatedImages, filter]);
+
+  // First image is shown immediately (no animation needed)
+  const firstImage = availableImages[0] || null;
+
+  // Track if slideshow has started (client-side only)
+  const [slideshowStarted, setSlideshowStarted] = useState(false);
+
+  // The overlay image that fades in over the first image
+  const [overlayImage, setOverlayImage] = useState<ImageData | null>(null);
+  const [overlayVisible, setOverlayVisible] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const timerRef = useRef<number | undefined>(undefined);
+  const isTransitioning = useRef(false);
+
+  // Start slideshow after mount
+  useEffect(() => {
+    if (!slideshow || availableImages.length <= 1) return;
+
+    // Delay slideshow start to allow first image to be LCP
+    const timeout = window.setTimeout(() => {
+      setSlideshowStarted(true);
+    }, slideshowInterval);
+
+    return () => window.clearTimeout(timeout);
+  }, [slideshow, availableImages.length, slideshowInterval]);
+
+  // Run the slideshow cycle
+  useEffect(() => {
+    if (!slideshowStarted || availableImages.length <= 1) return;
+
+    // Clear any existing timers
+    if (timerRef.current) window.clearTimeout(timerRef.current);
+
+    const cycleImages = () => {
+      if (isTransitioning.current) return;
+
+      isTransitioning.current = true;
+
+      // Get next image index
+      const nextIdx = (currentIndex + 1) % availableImages.length;
+      const nextImage = availableImages[nextIdx];
+
+      if (!nextImage) {
+        isTransitioning.current = false;
+        return;
+      }
+
+      // Load next image into overlay (hidden)
+      setOverlayImage(nextImage);
+
+      // Short delay to ensure image starts loading, then fade in
+      window.setTimeout(() => {
+        setOverlayVisible(true);
+
+        // After transition completes, update state
+        window.setTimeout(() => {
+          setCurrentIndex(nextIdx);
+          setOverlayVisible(false);
+          isTransitioning.current = false;
+
+          // Schedule next transition
+          timerRef.current = window.setTimeout(cycleImages, slideshowInterval);
+        }, transitionDuration);
+      }, 100);
+    };
+
+    // Start first transition
+    cycleImages();
+
+    return () => {
+      if (timerRef.current) window.clearTimeout(timerRef.current);
+    };
+  }, [slideshowStarted, availableImages, currentIndex, slideshowInterval, transitionDuration]);
+
+  // If no valid images, return empty div
+  if (validatedImages.length === 0 || !firstImage) {
+    return <div className={className} />;
+  }
+
+  // Get current base image (first image initially, then cycles)
+  const baseImage = availableImages[currentIndex] || firstImage;
+
+  return (
+    <div className={className}>
+      {/* Base image - always visible, no fade-in animation */}
+      <div className="absolute inset-0 w-full h-full">
+        <Picture
+          alt={baseImage.at[locale] || ''}
+          baseUrl={baseUrl.replace('{id}', baseImage.id).replace('{fn}', baseImage.fn)}
+          className={pictureClassName}
+          formats={[{ size: '', width: 1080 }]}
+          imgClassName={imgClassName}
+          placeholder=""
+        />
+      </div>
+
+      {/* Overlay image - fades in over base image during transitions */}
+      {overlayImage && (
+        <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'}`}
+        >
+          <Picture
+            alt={overlayImage.at[locale] || ''}
+            baseUrl={baseUrl.replace('{id}', overlayImage.id).replace('{fn}', overlayImage.fn)}
+            className={pictureClassName}
+            formats={[{ size: '', width: 1080 }]}
+            imgClassName={imgClassName}
+            placeholder=""
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/blurry-gradient.tsx

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

package/src/components/box.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps, ElementType } from 'react';
+
+import { cva, type VariantProps } 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'],
+    },
+  },
+});
+
+export interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
+  as?: ElementType;
+}
+
+export const Box = ({
+  as: Component = 'div',
+  children,
+  className,
+  variant,
+  ...props
+}: BoxProps) => {
+  return (
+    <Component
+      className={box({
+        className,
+        variant,
+      })}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/carousel.tsx

@@ -0,0 +1,197 @@
+import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
+import {
+  createContext,
+  forwardRef,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { cn } from '../utils/cn';
+
+export type CarouselApi = EmblaCarouselType;
+
+interface CarouselContextValue {
+  api: CarouselApi | undefined;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+  return context;
+}
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  opts?: EmblaOptionsType;
+  setApi?: (api: CarouselApi) => void;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+  ({ 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: CarouselApi) => {
+      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: KeyboardEvent<HTMLDivElement>) => {
+        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 (
+      <CarouselContext.Provider
+        value={{
+          api: emblaApi,
+          canScrollNext,
+          canScrollPrev,
+          scrollNext,
+          scrollPrev,
+        }}
+      >
+        <section
+          aria-label="Carousel"
+          aria-roledescription="carousel"
+          className={cn('relative', className)}
+          onKeyDownCapture={handleKeyDown}
+          ref={ref}
+          {...props}
+        >
+          <div ref={emblaRef}>
+            <div>{children}</div>
+          </div>
+        </section>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn('flex', className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+CarouselContent.displayName = 'CarouselContent';
+
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  'aria-label'?: string;
+}
+
+const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: False positive
+      <div
+        aria-roledescription="slide"
+        className={cn('min-w-0 shrink-0 grow-0', className)}
+        ref={ref}
+        role="group"
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollPrev, scrollPrev } = useCarousel();
+
+    return (
+      <button
+        className={cn('disabled:opacity-50', className)}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollNext, scrollNext } = useCarousel();
+
+    return (
+      <button
+        className={cn('disabled:opacity-50', className)}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselNext.displayName = 'CarouselNext';
+
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/src/components/countdown.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { cn } from '../utils/cn';
+
+export function Countdown() {
+  const [timerValue, setTimerValue] = useState(0);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    // Set the mounted flag to true after the component has been mounted
+    setIsMounted(true);
+
+    const intervalId = setInterval(() => {
+      setTimerValue((prevValue) => {
+        return prevValue + 1;
+      });
+    }, 1000);
+
+    return () => {
+      return clearInterval(intervalId);
+    };
+  }, []);
+
+  // const formattedDate = partyDate.toLocaleDateString(data.locale, {
+  //   day: '2-digit',
+  //   month: 'long',
+  //   year: 'numeric',
+  // });
+
+  return (
+    <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
+          )`,
+      }}
+    >
+      <span className={cn('text-foreground', 'relative', 'text-3xl', 'font-bold')}>
+        {isMounted ? (timerValue < 10 ? `0${timerValue}` : timerValue) : 0}
+      </span>
+    </div>
+  );
+}

package/src/components/definition-list.tsx

@@ -0,0 +1,90 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+
+const dl = cva({
+  base: ['grid'],
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: ['grid-cols-[auto,1fr]', 'gap-x-s', 'gap-y-2xs'], // Two-column grid with gap
+      unstyled: ['list-none', 'p-0', 'grid-cols-1'], // Unstyled, single column
+    },
+  },
+});
+
+const dt = cva({
+  base: [],
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: ['uppercase', 'tracking-wide'],
+    },
+  },
+});
+
+const dd = cva({
+  base: ['mb-xs'],
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: [],
+    },
+  },
+});
+
+export interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {}
+
+export interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {}
+
+export interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {}
+
+export const DefinitionList = (props: DefinitionListProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <dl
+      className={dl({
+        className,
+        variant,
+      })}
+    >
+      {children}
+    </dl>
+  );
+};
+
+export const Dt = (props: DtProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <dt
+      className={dt({
+        className,
+        variant,
+      })}
+    >
+      {children}
+    </dt>
+  );
+};
+
+export const Dd = (props: DdProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <dd
+      className={dd({
+        className,
+        variant,
+      })}
+    >
+      {children}
+    </dd>
+  );
+};