@reactberry/system 2.0.0-beta

package/src/blocks/Cards/InfoCard/index.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { Box, Button, Text } from "@/design-system/elements";
+import { AnimatePresence, HTMLMotionProps, motion } from "motion/react";
+import Image from "next/image";
+import { useState } from "react";
+
+const ANIMATION_DELAY = 0.3;
+
+const InfoCard = ({
+  tintColor = "#000000",
+  title,
+  description = "",
+  detailContent = "",
+  imageSrc,
+  imageAlt,
+  imageSizes = "100vh",
+  children,
+  ...props
+}: {
+  tintColor?: string;
+  title: string;
+  description?: string;
+  detailContent?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  imageSizes?: string;
+  children?: React.ReactNode;
+} & HTMLMotionProps<"div">) => {
+  const [showDetail, setShowDetail] = useState(false);
+  const hasDetail = detailContent.length > 0;
+
+  return (
+    <Box
+      as={motion.div}
+      position={"relative"}
+      display={"flex"}
+      flexDirection={"column"}
+      gap={2}
+      aspect="4/3"
+      //minHeight={"400px"}
+      shape="rounded"
+      initial={false}
+      overflow={"hidden"}
+      animate={showDetail ? "detail" : "main"}
+      {...props}
+    >
+      <Box position={"relative"} zIndex={"2"} p="large">
+        <Box
+          position={"absolute"}
+          top={0}
+          left={0}
+          width={"100%"}
+          height={"100%"}
+          zIndex={-1}
+          style={{
+            backdropFilter: "blur(8px)",
+            mask: "linear-gradient(rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%)",
+          }}
+        ></Box>
+        <Text
+          as={motion.h2}
+          fontSize={"xl"}
+          m="0"
+          fontWeight={"medium"}
+          color="primary"
+        >
+          {title}
+        </Text>
+        <Text>{description}</Text>
+      </Box>
+      {children ??
+        (imageSrc ? (
+          <Box
+            as={Image}
+            src={imageSrc}
+            alt={imageAlt ?? title}
+            fill
+            sizes={imageSizes}
+            zIndex={0}
+            style={{ objectFit: "cover" }}
+          />
+        ) : null)}
+
+      {hasDetail && (
+        <ToggleButton
+          tintColor={tintColor}
+          onClick={() => setShowDetail(!showDetail)}
+        />
+      )}
+      <AnimatePresence>
+        {showDetail && (
+          <DetailContainer tintColor={tintColor} content={detailContent} />
+        )}
+      </AnimatePresence>
+    </Box>
+  );
+};
+
+const DetailContainer = ({
+  tintColor,
+  content,
+}: {
+  tintColor: string;
+  content: string;
+}) => {
+  const animationVariants = {
+    container: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0, transition: { delay: ANIMATION_DELAY } },
+    },
+    content: {
+      initial: { y: -100, opacity: 0 },
+      animate: {
+        y: 0,
+        opacity: 1,
+        transition: { delay: ANIMATION_DELAY, bounce: 0 },
+      },
+      exit: { y: -100, opacity: 0 },
+    },
+  };
+
+  return (
+    <Box
+      as={motion.div}
+      position={"absolute"}
+      display={"flex"}
+      flexDirection={"column"}
+      justifyContent={"center"}
+      width={"100%"}
+      height={"100%"}
+      top="0"
+      left="0"
+      zIndex={"2"}
+      p={"medium"}
+      bg={tintColor}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={animationVariants["container"]}
+    >
+      <Text
+        as={motion.p}
+        maxWidth={"80ch"}
+        mx={"auto"}
+        color={"white"}
+        fontSize={"large"}
+        fontWeight={"medium"}
+        variants={animationVariants["content"]}
+      >
+        {content}
+      </Text>
+    </Box>
+  );
+};
+
+const ToggleButton = ({
+  tintColor,
+  ...props
+}: { tintColor: string } & HTMLMotionProps<"button">) => {
+  const animationVariants = {
+    main: {
+      rotate: 0,
+      backgroundColor: "#000000",
+      stroke: "#ffffff",
+    },
+    detail: {
+      rotate: 45,
+      backgroundColor: "#ffffff",
+      stroke: tintColor,
+    },
+  };
+
+  return (
+    <Button
+      as={motion.button}
+      position={"absolute"}
+      right={"1rem"}
+      bottom={"1rem"}
+      zIndex={"3"}
+      $size="icon.large"
+      shape="circle"
+      variants={animationVariants}
+      transition={{
+        bounce: 0,
+      }}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        width={"1.5rem"}
+        height={"1.5rem"}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 4.5v15m7.5-7.5h-15"
+        />
+      </svg>
+    </Button>
+  );
+};
+
+export default InfoCard;

package/src/blocks/Cards/TickerCard/index.tsx

@@ -0,0 +1,125 @@
+"use client";
+import React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { Box, Text } from "@/design-system/elements";
+import Image from "next/image";
+
+interface TickerCardProps {
+  image?: string;
+  width?: number | string;
+  height?: number | string;
+  overlayContent?: React.ReactNode | string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function TickerCard({
+  image,
+  overlayContent = "Explore Now",
+  children,
+  ...props
+}: TickerCardProps) {
+  const [showOverlay, setShowOverlay] = React.useState(false);
+
+  const renderOverlayContent = () => {
+    if (React.isValidElement(overlayContent)) {
+      return overlayContent;
+    }
+
+    return (
+      <Box
+        as={motion.div}
+        backgroundColor="white"
+        paddingX={3}
+        paddingY={2}
+        borderRadius="full"
+        display="flex"
+        alignItems="center"
+        gap="4px"
+        initial={{ y: 10 }}
+        animate={{ y: 0 }}
+        exit={{ y: 10 }}
+      >
+        <Text fontSize="sm" fontWeight="semibold">
+          {overlayContent}
+        </Text>
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      as={motion.div}
+      position="relative"
+      overflow="hidden"
+      aspect={"1/1"}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      onHoverStart={() => setShowOverlay(true)}
+      onHoverEnd={() => setShowOverlay(false)}
+      {...props}
+    >
+      {/* Children content in overlay */}
+      {children}
+
+      <AnimatePresence>
+        {showOverlay && (
+          <Box
+            as={motion.div}
+            position="absolute"
+            left={0}
+            top={0}
+            bottom={0}
+            right={0}
+            zIndex={10}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            {/* Overlay background */}
+            <Box
+              position="absolute"
+              bg="black"
+              opacity={0.7}
+              height="100%"
+              width="100%"
+            />
+
+            {/* Overlay Content */}
+            <Box
+              position="relative"
+              zIndex={10}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              gap={2}
+            >
+              {renderOverlayContent()}
+            </Box>
+          </Box>
+        )}
+      </AnimatePresence>
+
+      <Box
+        position="absolute"
+        width="100%"
+        height="100%"
+        zIndex={0}
+        top="0"
+        left="0"
+      >
+        <Image
+          src={image as string}
+          alt="image"
+          fill
+          sizes="100vh"
+          style={{ objectFit: "cover" }}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/blocks/Carousel/index.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+import { AnimatePresence, useScroll, useMotionValueEvent } from "motion/react";
+import { animate } from "motion";
+import { Box } from "@/design-system/elements";
+import { ControlLeft, ControlRight } from "../Controls/Control";
+import Group from "../Group";
+
+interface CarouselProps {
+  items: React.ReactNode[];
+  gap?: string | number;
+  onScroll?: (index: number) => void;
+  showScrollbar?: boolean;
+  showArrows?: boolean;
+  containerProps?: { [key: string]: any };
+}
+
+const SCROLL_PADDING_REM = 0.5;
+const SCROLL_PADDING_PX = SCROLL_PADDING_REM * 16;
+const GAP_PX = 16;
+const SCROLL_AMOUNT = 300;
+const THRESHOLD_RATIO = 0.5;
+
+const ScrollContainerStyled = styled(Box)<{
+  $showScrollbar?: boolean;
+}>`
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scroll-padding: ${SCROLL_PADDING_REM}rem;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: ${(props) => (props.$showScrollbar ? "auto" : "none")};
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  ${(props) =>
+    !props.$showScrollbar &&
+    `
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `}
+`;
+
+const SnapItem = styled(Box)`
+  display: flex;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  flex-shrink: 0;
+  min-width: fit-content;
+`;
+
+const Carousel = ({
+  items,
+  gap = "s",
+  onScroll,
+  showScrollbar = false,
+  showArrows = true,
+  containerProps,
+}: CarouselProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const { scrollX } = useScroll({ container: containerRef });
+
+  // Reset carousel scroll position on mount using Motion's animate API
+  // This uses Motion's animate() to set scrollLeft to 0; duration 0 keeps it instantaneous.
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    try {
+      // Use Motion's animate to reset scrollLeft on the element
+      // duration: 0 ensures it's an immediate reset (no visible animation)
+      animate(el, { scrollLeft: 0 }, { duration: 0 });
+    } catch {
+      // Fallback to direct assignment if animate is unavailable
+      el.scrollLeft = 0;
+    }
+
+    // Prevent browser scroll restoration from interfering while mounted.
+    // Store previous value and restore on cleanup.
+    const prev =
+      typeof window !== "undefined" && "history" in window
+        ? (window.history as any).scrollRestoration
+        : undefined;
+    if (typeof window !== "undefined" && "history" in window) {
+      try {
+        (window.history as any).scrollRestoration = "manual";
+      } catch {
+        /* ignore */
+      }
+    }
+
+    return () => {
+      if (
+        typeof window !== "undefined" &&
+        "history" in window &&
+        prev !== undefined
+      ) {
+        try {
+          (window.history as any).scrollRestoration = prev;
+        } catch {
+          /* ignore */
+        }
+      }
+    };
+  }, []);
+
+  useMotionValueEvent(scrollX, "change", (latest) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const itemWidth =
+      container.firstElementChild?.getBoundingClientRect().width || 0;
+    if (itemWidth <= 0) return;
+
+    const adjustedScrollLeft = Math.max(0, latest - SCROLL_PADDING_PX);
+    const threshold = itemWidth * THRESHOLD_RATIO;
+    const newIndex =
+      adjustedScrollLeft > threshold
+        ? Math.floor((adjustedScrollLeft - threshold) / (itemWidth + GAP_PX)) +
+          1
+        : 0;
+
+    setCurrentIndex(newIndex);
+    onScroll?.(newIndex);
+  });
+
+  const scroll = (direction: "left" | "right") => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollBy({
+      left: direction === "left" ? -SCROLL_AMOUNT : SCROLL_AMOUNT,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <Box display="flex" flexDirection="column" gap="s" width="100%">
+      <ScrollContainerStyled
+        ref={containerRef}
+        gap={gap}
+        p="xs"
+        {...containerProps}
+        $showScrollbar={showScrollbar}
+      >
+        {items.map((item, index) => (
+          <SnapItem key={index}>{item}</SnapItem>
+        ))}
+      </ScrollContainerStyled>
+
+      {showArrows && items.length > 1 && (
+        <Group
+          justifyContent="end"
+          gap="m"
+          position="relative"
+          width="100%"
+          height="2.5rem"
+          pb="s"
+        >
+          <AnimatePresence mode="sync" initial={false}>
+            {currentIndex > 0 && (
+              <ControlLeft
+                key="control-left"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 0.8 }}
+                exit={{ opacity: 0, pointerEvents: "none" }}
+                whileTap={{ opacity: 1, scale: 0.92 }}
+                onClick={() => scroll("left")}
+                position="relative"
+                top="auto"
+                left="auto"
+              />
+            )}
+
+            <ControlRight
+              key="control-right"
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: currentIndex >= items.length - 1 ? 0.3 : 0.8,
+              }}
+              exit={{ opacity: 0, pointerEvents: "none" }}
+              whileTap={{ opacity: 1, scale: 0.92 }}
+              onClick={() => scroll("right")}
+              position="relative"
+              disabled={currentIndex === items.length - 1}
+              top="auto"
+              right="auto"
+            />
+          </AnimatePresence>
+        </Group>
+      )}
+    </Box>
+  );
+};
+
+export default Carousel;

package/src/blocks/Checkbox/index.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import React from "react"
+import { motion } from "motion/react"
+import { Box } from "@/design-system/elements"
+import Group from "@/design-system/blocks/Group"
+import { IconDotsAnim } from "@/design-system/icons"
+
+export interface CheckboxProps {
+  /** Whether the checkbox is checked */
+  checked?: boolean
+  /** Callback when the checkbox is toggled */
+  onChange?: () => void
+  /** Whether the checkbox is in a loading state */
+  isLoading?: boolean
+  /** Whether the checkbox is disabled */
+  disabled?: boolean
+  /** Size of the checkbox (default: "1.375rem") */
+  size?: string
+  /** Title attribute for accessibility */
+  title?: string
+  /** Additional props for the container */
+  containerProps?: React.ComponentProps<typeof Group>
+}
+
+const tickVariants = {
+  checked: {
+    pathLength: 1,
+    opacity: 1,
+    transition: { duration: 0.2, delay: 0.2 },
+  },
+  unchecked: {
+    pathLength: 0,
+    opacity: 0,
+    transition: { duration: 0.2 },
+  },
+}
+
+export default function Checkbox({
+  checked = false,
+  onChange,
+  isLoading = false,
+  disabled = false,
+  size = "1.375rem",
+  title,
+  containerProps,
+}: CheckboxProps) {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!isLoading && !disabled && onChange) {
+      onChange()
+    }
+  }
+
+  const resolvedTitle =
+    title ?? (checked ? "Mark as incomplete" : "Mark as complete")
+
+  return (
+    <Group
+      as={motion.button}
+      size={size}
+      shape="rounded"
+      justifyContent="center"
+      border="1.5px solid"
+      skin={checked ? "success.static" : "panel"}
+      cursor={isLoading || disabled ? "not-allowed" : "pointer"}
+      onClick={handleClick}
+      disabled={isLoading || disabled}
+      title={resolvedTitle}
+      whileTap={{ scale: 0.9 }}
+      transition={{ duration: 0.15 }}
+      position="relative"
+      flex="none"
+      {...containerProps}
+    >
+      {isLoading && (
+        <Box as={IconDotsAnim} size=".875rem" position="absolute" />
+      )}
+      <Box
+        as={motion.svg}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth="3.5"
+        stroke="currentColor"
+        size={"0.875rem"}
+        initial={false}
+        animate={checked ? "checked" : "unchecked"}
+        opacity={isLoading ? 0 : 1}
+      >
+        <motion.path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M4.5 12.75l6 6 9-13.5"
+          variants={tickVariants}
+        />
+      </Box>
+    </Group>
+  )
+}

package/src/blocks/Collection/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import { ThemeContext } from "styled-components";
+import { useContext } from "react";
+
+type CollectionProps = BoxProps & {
+  colsize?: string;
+  children: React.ReactNode;
+  [key: string]: any;
+};
+
+export default function Collection({
+  colsize = "small",
+  children,
+  ...props
+}: CollectionProps) {
+  const theme: any = useContext(ThemeContext);
+
+  const colSizes: any = {
+    xsmall: {
+      _: "repeat(auto-fill,minmax(6rem,1fr))",
+      sm: "repeat(auto-fill,minmax(10rem,1fr))",
+    },
+    small: {
+      _: "repeat(auto-fill,minmax(10rem,1fr))",
+      md: "repeat(auto-fill,minmax(12rem,1fr))",
+    },
+    medium: {
+      _: "repeat(auto-fill,minmax(auto,1fr))",
+      md: "repeat(auto-fill,minmax(18rem,1fr))",
+    },
+    large: { _: "repeat(auto-fill,minmax(20rem,1fr))" },
+    xlarge: {
+      _: "repeat(auto-fill,minmax(20rem,1fr))",
+      sm: "repeat(auto-fill,minmax(25rem,1fr))",
+    },
+    xxlarge: {
+      _: "repeat(auto-fill,minmax(30rem,1fr))",
+    },
+    auto: {
+      _: "repeat(auto-fill,minmax(50cqb,1fr))",
+    },
+    row: {
+      _: "1fr",
+    },
+  };
+
+  return (
+    <Box
+      display="grid"
+      gap="small"
+      gridTemplateColumns={colSizes[colsize]}
+      {...theme?.collection}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}