@reactberry/system 2.0.0-beta

package/src/blocks/Progress/index.tsx

@@ -0,0 +1,179 @@
+import { Box } from "@/design-system/elements";
+import { motion } from "motion/react";
+import React from "react";
+
+const defaults = {
+  size: "2rem",
+  progress: 0,
+  progressColor: "brand",
+  trackColor: "transparent.light.1",
+};
+
+interface ProgressProps {
+  variant?: "pie" | "bar" | "circle";
+  progress?: number;
+  progressColor?: string;
+  trackColor?: string;
+  [key: string]: any;
+}
+
+const PieProgress: React.FC<ProgressProps> = ({
+  progress = defaults.progress,
+  progressColor = defaults.progressColor,
+  trackColor = defaults.trackColor,
+  size = "2rem",
+  ...props
+}) => {
+  return (
+    <Box
+      as="svg"
+      viewBox="0 0 64 64"
+      bg="transparent"
+      size={size}
+      shape="circle"
+      color={trackColor}
+      border="1.5px solid transparent"
+      boxShadow={`0 0 0 1.5px currentColor`}
+      style={{
+        transform: "rotate(-90deg)",
+      }}
+      {...props}
+    >
+      <Box
+        as="circle"
+        color={progressColor}
+        r="25%"
+        cx="50%"
+        cy="50%"
+        fill="none"
+        stroke={"currentColor"}
+        strokeWidth={32}
+        strokeDasharray={`${progress * 10} 100`}
+      />
+    </Box>
+  );
+};
+
+interface CircleProgressProps {
+  sqSize?: number;
+  progress?: number;
+  strokeWidth?: number;
+  progressColor?: string;
+  trackColor?: string;
+  fontSize?: string;
+  label?: string;
+}
+
+const CircleProgress: React.FC<CircleProgressProps> = ({
+  sqSize = 100,
+  progress = 25,
+  strokeWidth = 1,
+  progressColor = defaults.progressColor,
+  trackColor = defaults.trackColor,
+  label,
+  ...props
+}) => {
+  // Size of the enclosing square
+  // SVG centers the stroke width on the radius, subtract out so circle fits in square
+  const radius = (sqSize - strokeWidth) / 2;
+  // Enclose circle in a circumscribing square
+  const viewBox = `0 0 ${sqSize} ${sqSize}`;
+  // Arc length at 100% coverage is the circle circumference
+  const dashArray = radius * Math.PI * 2;
+  // Scale 100% coverage overlay with the actual percent
+  const dashOffset = dashArray - (dashArray * progress) / 100;
+
+  return (
+    <Box as="svg" size={sqSize} viewBox={viewBox} {...props}>
+      <Box
+        as="circle"
+        color={trackColor}
+        cx={sqSize / 2}
+        cy={sqSize / 2}
+        r={radius}
+        strokeWidth={`${strokeWidth}px`}
+        style={{ stroke: "currentColor", fill: "none" }}
+      />
+      <Box
+        as="circle"
+        color={progressColor}
+        cx={sqSize / 2}
+        cy={sqSize / 2}
+        r={radius}
+        strokeWidth={`${strokeWidth}px`}
+        // Start progress marker at 12 O'Clock
+        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
+        style={{
+          fill: "none",
+          strokeDasharray: dashArray,
+          strokeDashoffset: dashOffset,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+        }}
+      />
+      <Box
+        as="text"
+        x="50%"
+        y="50%"
+        dy="0.375em"
+        textAnchor="middle"
+        color={"secondary"}
+        fill="currentColor"
+        fontWeight={"600"}
+        fontSize="1em"
+      >
+        {label ? label : `${progress}%`}
+      </Box>
+    </Box>
+  );
+};
+
+const BarProgress: React.FC<ProgressProps> = ({
+  progress = 0,
+  reverse = false,
+  trackColor = defaults.trackColor,
+  progressColor = defaults.progressColor,
+  ...props
+}) => {
+  return (
+    <Box
+      position="relative"
+      display="block"
+      overflow="hidden"
+      height={"0.25rem"}
+      bg={trackColor}
+      {...props}
+    >
+      <Box
+        as={motion.div}
+        height="100%"
+        //width={`${progress}%`}
+        animate={{ width: `${progress}%` }}
+        position="absolute"
+        bg={progressColor}
+        top={0}
+        shape="rounded"
+        left={reverse ? "auto" : 0}
+        right={reverse ? 0 : "auto"}
+      />
+    </Box>
+  );
+};
+
+const Progress: React.FC<ProgressProps> = ({
+  variant = "bar",
+  progress = 0,
+  ...props
+}) => {
+  switch (variant) {
+    case "pie":
+      return <PieProgress progress={progress} {...props} />;
+    case "circle":
+      return <CircleProgress progress={progress} {...props} />;
+    default:
+      return <BarProgress progress={progress} {...props} />;
+  }
+};
+
+export default Progress;

package/src/blocks/ProgressiveBlur/index.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { motion, HTMLMotionProps } from "motion/react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+
+export const GRADIENT_ANGLES = {
+  top: 0,
+  right: 90,
+  bottom: 180,
+  left: 270,
+} as const;
+
+export type ProgressiveBlurProps = Omit<BoxProps, "children"> & {
+  direction?: keyof typeof GRADIENT_ANGLES;
+  blurLayers?: number;
+  blurIntensity?: number;
+  children?: React.ReactNode;
+  motionProps?: Omit<HTMLMotionProps<"div">, "style">;
+};
+
+export default function ProgressiveBlur({
+  direction = "bottom",
+  blurLayers = 8,
+  blurIntensity = 0.25,
+  children,
+  motionProps,
+  ...boxProps
+}: ProgressiveBlurProps) {
+  const layers = Math.max(blurLayers, 2);
+  const segmentSize = 1 / (blurLayers + 1);
+
+  return (
+    <Box position="relative" {...boxProps}>
+      {children}
+      {Array.from({ length: layers }).map((_, index) => {
+        const angle = GRADIENT_ANGLES[direction];
+        const gradientStops = [
+          index * segmentSize,
+          (index + 1) * segmentSize,
+          (index + 2) * segmentSize,
+          (index + 3) * segmentSize,
+        ].map(
+          (pos, posIndex) =>
+            `rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`
+        );
+
+        const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(
+          ", "
+        )})`;
+
+        return (
+          <Box
+            key={index}
+            as={motion.div}
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            borderRadius="inherit"
+            style={{
+              pointerEvents: "none",
+              maskImage: gradient,
+              WebkitMaskImage: gradient,
+              backdropFilter: `blur(${index * blurIntensity}px)`,
+              WebkitBackdropFilter: `blur(${index * blurIntensity}px)`,
+            }}
+            {...motionProps}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+

package/src/blocks/README.md

@@ -0,0 +1,15 @@
+# Documentation Moved
+
+The design system blocks documentation has been moved to:
+
+**📄 [src/docs/blocks.md](../docs/blocks.md)**
+
+## New Documentation Structure
+
+All design system documentation is now centralized in the `src/docs/` folder for better organization and easier AI reference:
+
+- **[docs/elements.md](../docs/elements.md)** - Core components (Box, Text, Button, Field)
+- **[docs/blocks.md](../docs/blocks.md)** - Composed components (Card, Modal, etc.)
+- **[docs/themes.md](../docs/themes.md)** - Theme system and customization
+- **[docs/README.md](../docs/README.md)** - Complete overview and getting started
+- **[docs/index.md](../docs/index.md)** - Quick reference for AI assistants

package/src/blocks/RenderAsset/index.tsx

@@ -0,0 +1,18 @@
+import { ComponentType, createElement } from "react";
+
+interface RenderAssetProps {
+  asset: ComponentType<any>;
+  assetProps?: Record<string, unknown>;
+}
+
+export default function RenderAsset({
+  asset,
+  assetProps = {},
+}: RenderAssetProps) {
+  if (!asset) {
+    console.warn("RenderAsset: No asset provided");
+    return null;
+  }
+
+  return createElement(asset, assetProps, null);
+}

package/src/blocks/ScrollContainer/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import React, { useRef, useEffect } from "react";
+
+type ScrollContainerProps = BoxProps & {
+  children: React.ReactNode;
+  watch?: any;
+  scrollToId?: string;
+  onScrollStart?: () => void;
+  scrollOffset?: number;
+  scrollBehavior?: ScrollBehavior;
+  scrollBlock?: ScrollLogicalPosition;
+};
+
+export default function ScrollContainer({
+  children,
+  watch,
+  scrollToId,
+  onScrollStart,
+  scrollOffset = 0,
+  scrollBehavior = "smooth",
+  scrollBlock = "start",
+  ...props
+}: ScrollContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollToId) {
+      onScrollStart?.();
+      const targetElement = document.getElementById(scrollToId);
+      if (targetElement && containerRef.current) {
+        // Calculate position relative to the container
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const targetRect = targetElement.getBoundingClientRect();
+        const relativeTop =
+          targetRect.top -
+          containerRect.top +
+          containerRef.current.scrollTop -
+          scrollOffset;
+
+        containerRef.current.scrollTo({
+          top: relativeTop,
+          behavior: "smooth",
+        });
+      } else if (targetElement) {
+        if (scrollOffset !== 0) {
+          // Set CSS scroll margin for offset
+          targetElement.style.scrollMarginTop = `${scrollOffset}px`;
+        }
+        targetElement.scrollIntoView({
+          behavior: scrollBehavior,
+          block: scrollBlock,
+        });
+      }
+    } else if (watch !== undefined && containerRef.current && endRef.current) {
+      // Scroll the container to show the end ref
+      endRef.current.scrollIntoView({
+        behavior: scrollBehavior,
+        block: scrollBlock,
+      });
+    } else if (watch && containerRef.current) {
+      // Scroll to bottom within the container only
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  }, [
+    watch,
+    scrollToId,
+    onScrollStart,
+    scrollOffset,
+    scrollBehavior,
+    scrollBlock,
+  ]);
+
+  return (
+    <Box
+      ref={containerRef}
+      width="100%"
+      flex="auto"
+      display="flex"
+      flexDirection="column"
+      {...props}
+    >
+      {children}
+      <div ref={bottomRef} />
+      <Box pt="1rem" ref={endRef} />
+    </Box>
+  );
+}

package/src/blocks/ShinyText/index.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { Text } from "@/design-system/elements";
+import { motion, useAnimation } from "motion/react";
+import { useEffect } from "react";
+
+type ShinyTextProps = {
+  children: React.ReactNode;
+  disabled?: boolean;
+  speed?: number;
+  color?: string;
+  fontSize?: string;
+  fontWeight?: string | number;
+  textTransform?: string;
+  [key: string]: any;
+};
+
+const ShinyText = ({
+  children,
+  disabled = false,
+  speed = 10,
+  color = "tertiary",
+  fontSize = "medium",
+  fontWeight = "normal",
+  textTransform,
+  ...props
+}: ShinyTextProps) => {
+  const controls = useAnimation();
+
+  useEffect(() => {
+    if (!disabled) {
+      controls.start({
+        backgroundPosition: ["200% 0", "-200% 0"],
+        transition: {
+          duration: speed,
+          delay: 3,
+          ease: "linear",
+          repeat: Infinity,
+        },
+      });
+    } else {
+      controls.stop();
+    }
+  }, [disabled, speed, controls]);
+
+  return (
+    <Text
+      as={motion.div}
+      animate={controls}
+      color={color}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      textTransform={textTransform}
+      display="inline-block"
+      style={{
+        background: `linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0) 40%,
+            rgba(255, 255, 255,0.8) 50%,
+            rgba(255, 255, 255, 0) 60%
+          )`,
+        backgroundSize: "200% 100%",
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+      }}
+      {...props}
+    >
+      <span>{children}</span>
+    </Text>
+  );
+};
+
+export default ShinyText;

package/src/blocks/Skeleton/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { Text } from "@/design-system/elements";
+import { motion } from "motion/react";
+import Collection from "@/design-system/blocks/Collection";
+import Placeholder from "@/design-system/blocks/Placeholder";
+
+interface SkeletonProps {
+  count?: number; // Number of placeholder items to show
+  aspect?: string; // Aspect ratio of placeholders
+  colsize?:
+    | "small"
+    | "medium"
+    | "large"
+    | "xlarge"
+    | "xxlarge"
+    | "auto"
+    | "row"; // Optional column size
+  showText?: boolean; // Optional flag to show/hide "Loading..." text
+  variant?: "grid" | "component";
+  width?: string;
+  height?: string;
+  [key: string]: any; // Allow additional props
+}
+
+export default function Skeleton({
+  count = 9,
+  aspect = "1.5/1",
+  colsize = "xlarge",
+  showText = true,
+  variant = "grid",
+  width = "100%",
+  height = "40px",
+  ...rest
+}: SkeletonProps) {
+  if (variant === "component") {
+    return (
+      <Placeholder
+        as={motion.div}
+        width={width}
+        height={height}
+        bg="transparent.light.0"
+        shape="rounded"
+        icon="IconDotsAnim"
+        animate={{ opacity: [0.5, 1, 0.5] }}
+        transition={{ duration: 1.5, repeat: Infinity }}
+        {...rest}
+      />
+    );
+  }
+
+  // Original grid variant
+  return (
+    <Collection colsize={colsize}>
+      {[...Array(count)].map((_, i) => (
+        <Placeholder
+          key={i}
+          as={motion.div}
+          aspect={aspect}
+          bg="transparent.light.0"
+          shape="rounded"
+          icon="IconDotsAnim"
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+          {...rest}
+        >
+          {showText && <Text fontSize="small">Loading...</Text>}
+        </Placeholder>
+      ))}
+    </Collection>
+  );
+}

package/src/blocks/Slider/SliderControls.tsx

@@ -0,0 +1,119 @@
+import { Box } from "@/design-system/elements";
+import { IconArrowLeft, IconArrowRight } from "@/design-system/icons";
+import { AnimatePresence, motion } from "motion/react";
+import { Control } from "../Controls/Control";
+
+interface SliderControlsProps {
+  onPrev: () => void;
+  onNext: () => void;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+  slides: number;
+  activeSlide: number;
+  onChange: (index: number) => void;
+  showDots?: boolean;
+  showArrows?: boolean;
+  paddingX?: number;
+}
+
+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,
+  },
+};
+
+const SliderControls = ({
+  onPrev,
+  onNext,
+  canGoPrev,
+  canGoNext,
+  slides,
+  activeSlide,
+  onChange,
+  showDots = true,
+  showArrows = true,
+  paddingX = 0,
+}: SliderControlsProps) => {
+  return (
+    <Box
+      display="flex"
+      alignItems={"center"}
+      justifyContent={"center"}
+      //position={"absolute"}
+      left={`${paddingX}px`}
+      right={`${paddingX}px`}
+      width="auto"
+      gap="s"
+      py="m"
+      // height={"3rem"}
+      //bg="red"
+    >
+      {showArrows && (
+        <Control
+          //ml="small"
+          position="initial"
+          onClick={onPrev}
+          disabled={!canGoPrev}
+          opacity={canGoPrev ? 1 : 0.1}
+        >
+          <Box as={IconArrowLeft} size="1.125rem" />
+        </Control>
+      )}
+
+      {showDots && (
+        <AnimatePresence>
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            gap="xsmall"
+          >
+            {Array.from({ length: slides }).map((_, i) => (
+              <Box
+                as={motion.div}
+                key={i}
+                variants={controlVariants}
+                initial="enter"
+                animate={i === activeSlide ? "center" : "none"}
+                whileHover="hover"
+                exit="exit"
+                flex="none"
+                size="0.5rem"
+                bg="black"
+                shape="rounded"
+                cursor="pointer"
+                onClick={() => onChange(i)}
+              />
+            ))}
+          </Box>
+        </AnimatePresence>
+      )}
+      {showArrows && (
+        <Control
+          //mr="small"
+          position="initial"
+          onClick={onNext}
+          disabled={!canGoNext}
+          opacity={canGoNext ? 1 : 0.1}
+        >
+          <Box as={IconArrowRight} size="1.125rem" />
+        </Control>
+      )}
+    </Box>
+  );
+};
+
+export default SliderControls;