@reactberry/system 2.0.0-beta

package/src/blocks/Slider/index.tsx

@@ -0,0 +1,140 @@
+"use client";
+import { motion, type PanInfo } from "motion/react";
+import { ReactNode, type WheelEvent } from "react";
+import useSlider, { ResponsiveConfig, SliderConfig } from "./useSlider";
+import { Box } from "@/design-system/elements";
+import SliderControls from "./SliderControls";
+
+interface Props {
+  config?: SliderConfig;
+  responsiveConfig?: ResponsiveConfig[];
+  children: ReactNode[];
+}
+
+const Slider = ({ config, responsiveConfig = [], children }: Props) => {
+  const {
+    currentSlide,
+    currentPage,
+    canGoNext,
+    canGoPrev,
+    scrollTo,
+    settings,
+    setCurrentPage,
+    nextSlide,
+    prevSlide,
+    setScrollTo,
+    slideWidth,
+    totalPages,
+  } = useSlider(children, config, responsiveConfig);
+
+  const showControls = totalPages > 1;
+
+  return (
+    <Box
+      width="100%"
+      position={"relative"}
+      overflow={"hidden"}
+      display={"flex"}
+      flexDirection={"column"}
+      px={`${settings.paddingX ?? 0}px`}
+      py={`${settings.paddingY ?? 0}px`}
+    >
+      <Box
+        as={motion.div}
+        initial={{ x: 0 }}
+        animate={{
+          x: `-${(100 / children.length) * currentSlide}%`,
+          width: `${slideWidth < 100 ? 100 : slideWidth}%`,
+        }}
+        transition={{
+          type: "spring",
+          visualDuration: 0.3,
+          bounce: 0.2,
+        }}
+      >
+        <Box
+          as={motion.div}
+          display={"flex"}
+          justifyContent={
+            children.length < settings.slidesToShow ? "flex-start" : "initial"
+          }
+          mr={`-${settings.spacing}px`}
+          ml={`-${settings.spacing}px`}
+          onWheel={(e: WheelEvent<HTMLDivElement>) => {
+            if (e.deltaX < -1) {
+              if (scrollTo) return;
+              prevSlide();
+              setScrollTo(true);
+            } else if (e.deltaX > 1) {
+              if (scrollTo) return;
+              nextSlide();
+              setScrollTo(true);
+            } else {
+              setScrollTo(false);
+            }
+          }}
+          drag="x"
+          dragConstraints={{ left: 0, right: 0 }}
+          onDragEnd={(
+            _event: MouseEvent | TouchEvent | PointerEvent,
+            { offset, velocity }: PanInfo,
+          ) => {
+            const swipe = Math.abs(offset.x) > 50 && Math.abs(velocity.x) > 500;
+            if (swipe && offset.x > 0) prevSlide();
+            else if (swipe) nextSlide();
+          }}
+        >
+          {children.map((child, index) => {
+            // Calculate item width - use slidesToShow if we have enough items, otherwise use actual count
+            const itemsToShow = Math.min(
+              children.length,
+              settings.slidesToShow,
+            );
+            const calculatedWidth = 100 / itemsToShow;
+
+            // If maxItemWidth is set and we have fewer items than slidesToShow,
+            // respect the maxItemWidth to prevent stretching
+            const shouldRespectMaxWidth =
+              children.length < settings.slidesToShow && settings.maxItemWidth;
+
+            return (
+              <Box
+                key={index}
+                pl={`${settings.spacing}px`}
+                pr={`${settings.spacing}px`}
+                width={
+                  shouldRespectMaxWidth ? undefined : `${calculatedWidth}%`
+                }
+                maxWidth={
+                  shouldRespectMaxWidth
+                    ? `${settings.maxItemWidth}px`
+                    : undefined
+                }
+                flex={shouldRespectMaxWidth ? "0 0 auto" : undefined}
+              >
+                {child}
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+
+      {showControls && (
+        <SliderControls
+          canGoPrev={canGoPrev}
+          canGoNext={canGoNext}
+          onPrev={prevSlide}
+          onNext={nextSlide}
+          slides={totalPages}
+          onChange={setCurrentPage}
+          activeSlide={currentPage}
+          showDots={settings.dots}
+          showArrows={settings.arrows}
+          paddingX={settings.paddingX}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default Slider;

package/src/blocks/Slider/useSlider.ts

@@ -0,0 +1,126 @@
+import { useState, useEffect } from "react";
+
+export interface SliderConfig {
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  infinite?: boolean;
+  dots?: boolean;
+  arrows?: boolean;
+  spacing?: number;
+  paddingX?: number;
+  paddingY?: number;
+  maxItemWidth?: number;
+}
+
+export interface ResponsiveConfig {
+  breakpoint: number;
+  settings: SliderConfig;
+}
+
+const useSlider = (
+  data: any[],
+  config: SliderConfig = {},
+  responsiveConfig: ResponsiveConfig[] = [],
+) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [canGoNext, setCanGoNext] = useState(false);
+  const [canGoPrev, setCanGoPrev] = useState(false);
+  const [scrollTo, setScrollTo] = useState<boolean>(false);
+  const [resized, setResized] = useState<boolean>(false);
+
+  const [settings, setSettings] = useState({
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    infinite: false,
+    dots: true,
+    arrows: true,
+    spacing: 0,
+    paddingX: 0,
+    paddingY: 0,
+    maxItemWidth: 300,
+    responsive: [],
+    ...config,
+  });
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(data.length / settings.slidesToShow),
+  );
+
+  const nextSlide = () => {
+    if (!canGoNext) return;
+    setCurrentPage((prev) => Math.min(prev + 1, totalPages - 1));
+  };
+
+  const prevSlide = () => {
+    if (!canGoPrev) return;
+    setCurrentPage((prev) => Math.max(prev - 1, 0));
+  };
+
+  useEffect(() => {
+    if (settings.infinite) {
+      setCanGoNext(true);
+      setCanGoPrev(true);
+    } else {
+      setCanGoNext(currentPage < totalPages - 1);
+      setCanGoPrev(currentPage > 0);
+    }
+  }, [
+    settings.infinite,
+    settings.slidesToShow,
+    currentPage,
+    data.length,
+    totalPages,
+  ]);
+
+  const currentSlide = currentPage * settings.slidesToShow;
+  const slideWidth = (100 * data.length) / settings.slidesToShow;
+
+  const handleResize = () => {
+    const width = window.innerWidth;
+    if (responsiveConfig.length === 0) return;
+
+    const responsiveSettings = responsiveConfig.find(
+      (item) => item.breakpoint < width,
+    );
+
+    if (responsiveSettings) {
+      setSettings({
+        ...settings,
+        ...responsiveSettings.settings,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!resized) {
+      handleResize();
+      setResized(true);
+      return;
+    }
+  }, [resized]);
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  });
+
+  return {
+    currentSlide,
+    currentPage,
+    canGoNext,
+    canGoPrev,
+    scrollTo,
+    settings,
+    slideWidth,
+    totalPages,
+    setScrollTo,
+    setCurrentPage,
+    nextSlide,
+    prevSlide,
+  };
+};
+
+export default useSlider;

package/src/blocks/Slideshow/index.tsx

@@ -0,0 +1,177 @@
+"use client";
+import { Box } from "@/design-system/elements";
+import type { ImageType } from "@/design-system/types";
+import { motion, AnimatePresence } from "motion/react";
+import { useState, useEffect } from "react";
+
+export const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min;
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+
+type SlideshowProps = {
+  photos: ImageType[];
+  showProgress?: boolean;
+  duration?: number;
+  fade?: boolean;
+};
+
+const imageVariants = {
+  enter: { opacity: 0, scale: 1.04, y: 10, transition: { duration: 0.6 } },
+  center: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.6 } },
+  exit: { opacity: 0, scale: 1.04, y: -10, transition: { duration: 0.6 } },
+};
+
+const controlVariants = {
+  enter: { opacity: 0.2, width: ".5rem" },
+  center: { opacity: 0.7, width: "2rem" },
+  exit: { opacity: 0.1, width: ".5rem" },
+  hover: { opacity: 1, scale: 1.1 },
+};
+
+export function Slideshow({
+  photos,
+  showProgress,
+  duration = 3,
+  fade = true,
+}: SlideshowProps) {
+  const [page, setPage] = useState(0);
+  const [autoplayKey, setAutoplayKey] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const [instanceId] = useState(() => Math.random().toString(36).substr(2, 9)); // Prevents SSR mismatches
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (photos.length > 1) {
+      const timer = setTimeout(
+        () => setPage((prev) => (prev + 1) % photos.length),
+        duration * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [page, photos, duration, autoplayKey]);
+
+  if (!photos || photos.length === 0) {
+    return (
+      <Box
+        width="100%"
+        height="100%"
+        bg="base"
+        shape="rounded"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        No images available
+      </Box>
+    );
+  }
+
+  if (photos.length === 1) {
+    return (
+      <Box
+        as={motion.div}
+        variants={imageVariants}
+        initial="enter"
+        animate="center"
+        exit="exit"
+        whileHover="initial"
+        width="100%"
+        height="100%"
+        position="absolute"
+        maxWidth="100%"
+        top="0"
+        left="0"
+        shape="rounded"
+        zIndex={1}
+        background={`url(${photos[0].url}) no-repeat center center / cover`}
+      />
+    );
+  }
+
+  const results = photos;
+  const dataIndex = wrap(0, results.length, page);
+
+  return (
+    <Box
+      as={motion.div}
+      overflow="hidden"
+      position="relative"
+      width="100%"
+      height="100%"
+      bg="base"
+      shape="rounded"
+    >
+      {fade && (
+        <Box
+          as={motion.div}
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          zIndex={2}
+          backgroundImage="linear-gradient(to bottom, transparent, currentColor 100%)"
+        />
+      )}
+
+      <AnimatePresence>
+        {mounted && showProgress && (
+          <Box
+            position="absolute"
+            width="100%"
+            bottom="0"
+            left="0"
+            zIndex={2}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            gap="xsmall"
+            p="large"
+            backgroundImage="linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6))"
+          >
+            {results.map((_, i) => (
+              <Box
+                as={motion.div}
+                key={i}
+                variants={controlVariants}
+                initial="enter"
+                animate={i === dataIndex ? "center" : "none"}
+                whileHover="hover"
+                exit="exit"
+                flex="none"
+                size="0.5rem"
+                bg="white"
+                shape="rounded"
+                cursor="pointer"
+                onClick={() => {
+                  setPage(i);
+                  setAutoplayKey((prev) => prev + 1);
+                }}
+              />
+            ))}
+          </Box>
+        )}
+        <Box
+          as={motion.div}
+          key={`slideshow-${page}-${instanceId}`}
+          variants={imageVariants}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          whileHover="initial"
+          width="100%"
+          height="100%"
+          position="absolute"
+          maxWidth="100%"
+          top="0"
+          left="0"
+          zIndex={1}
+          background={`url(${
+            results[dataIndex].url || results[0].url
+          }) no-repeat center center / cover`}
+        />
+      </AnimatePresence>
+    </Box>
+  );
+}

package/src/blocks/Spotlight/index.tsx

@@ -0,0 +1,144 @@
+"use client";
+import { useRef, useState } from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+} from "motion/react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+
+interface SpotlightProps extends Omit<BoxProps, "children"> {
+  children: React.ReactNode;
+  aspect?: number | number[] | string[] | {};
+  spotlightColor?: string;
+}
+
+export default function Spotlight({
+  children,
+  aspect = "4/5",
+  spotlightColor = "transparent.brand.1",
+  ...props
+}: SpotlightProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Spotlight values with springs for smoother animation
+  const spotlightX = useSpring(useMotionValue(0));
+  const spotlightY = useSpring(useMotionValue(0));
+
+  // Tilt values with adjusted spring configuration
+  const tiltX = useMotionValue(0);
+  const tiltY = useMotionValue(0);
+  const tiltXSpring = useSpring(tiltX, {
+    stiffness: 300,
+    damping: 30,
+  });
+  const tiltYSpring = useSpring(tiltY, {
+    stiffness: 300,
+    damping: 30,
+  });
+
+  const transform = useMotionTemplate`perspective(1000px) rotateX(${tiltXSpring}deg) rotateY(${tiltYSpring}deg)`;
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    if (!ref.current) return;
+
+    const rect = ref.current.getBoundingClientRect();
+
+    // Calculate mouse position relative to card center
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const mouseX = e.clientX - centerX;
+    const mouseY = e.clientY - centerY;
+
+    // Update spotlight position
+    spotlightX.set(e.clientX - rect.left);
+    spotlightY.set(e.clientY - rect.top);
+
+    // Calculate rotation (reduced range for subtler effect)
+    const rotateX = (mouseY / (rect.height / 2)) * -5;
+    const rotateY = (mouseX / (rect.width / 2)) * 5;
+
+    tiltX.set(rotateX);
+    tiltY.set(rotateY);
+  }
+
+  function handleMouseEnter() {
+    setIsHovered(true);
+  }
+
+  function handleMouseLeave() {
+    setIsHovered(false);
+    // Reset tilt with animation
+    tiltX.set(0);
+    tiltY.set(0);
+  }
+
+  return (
+    <Box
+      as={motion.div}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      position={"relative"}
+      style={{
+        transformStyle: "preserve-3d",
+        transform,
+        transition: "all 0.2s ease-out",
+        transformOrigin: "center center",
+        aspectRatio: aspect,
+      }}
+      border="1px solid"
+      skin="card"
+      shape="rounded"
+      borderColor="transparent.light.2"
+      p="medium"
+      $shadow="medium"
+      overflow="hidden"
+      {...props}
+    >
+      {/* Spotlight effect */}
+      <Box
+        as={motion.div}
+        position={"absolute"}
+        width="100%"
+        height="100%"
+        top="0"
+        left="0"
+        opacity={isHovered ? 1 : 0}
+        zIndex={0}
+        color={spotlightColor}
+        style={{
+          pointerEvents: "none",
+          transition: "opacity 0.2s ease-out",
+          background: useMotionTemplate`
+            radial-gradient(
+              300px circle at ${spotlightX}px ${spotlightY}px,
+              currentColor,
+              transparent 80%
+            )
+          `,
+        }}
+      />
+
+      {/* Content */}
+      <Box
+        as={motion.div}
+        position={"relative"}
+        height={"100%"}
+        width={"100%"}
+        zIndex={1}
+        style={{
+          transform: isHovered ? "translateZ(48px)" : "translateZ(0px)",
+          scale: isHovered ? 1.04 : 1,
+          transition: "transform 0.2s ease-out, scale 0.2s ease-out",
+          transformStyle: "preserve-3d",
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}