@reactberry/system 2.0.0-beta

package/src/blocks/Parallax/index.tsx

@@ -0,0 +1,117 @@
+"use client";
+import { Box } from "@/design-system/elements";
+import { motion, useInView, useScroll } from "motion/react";
+import Image from "next/image";
+import React, { useEffect, useRef, useState } from "react";
+
+interface ImageData {
+  id: string;
+  url: string;
+}
+
+interface CardProps {
+  imgUrl: string;
+}
+
+interface ParallaxProps {
+  images: ImageData[];
+}
+
+const Card = ({ imgUrl }: CardProps) => {
+  // Definition for sticky position of the card
+  const vertMargin = 10;
+
+  // Ref for container
+  const container = useRef(null);
+
+  // State vars
+  const [maxScrollY, setMaxScrollY] = useState(Infinity);
+  const [dynamicStyles, setDynamicStyles] = useState({
+    scale: 1,
+    filter: 0,
+  });
+
+  // Framer Motion helpers
+  const { scrollY } = useScroll({
+    target: container,
+  });
+  const isInView = useInView(container, {
+    // Fix: Use proper MarginType format
+    margin: `0px 0px -${100 - vertMargin}% 0px` as any,
+    once: false,
+  });
+
+  // Scroll tracking
+  scrollY.on("change", (scrollY) => {
+    // animationValue indicates progress after container hits sticky point, going from 1 to 0
+    let animationValue = 1;
+    if (scrollY > maxScrollY) {
+      animationValue = Math.max(0, 1 - (scrollY - maxScrollY) / 10000);
+    }
+
+    setDynamicStyles({
+      scale: animationValue,
+      filter: (1 - animationValue) * 100,
+    });
+  });
+
+  useEffect(() => {
+    if (isInView) {
+      setMaxScrollY(scrollY.get());
+    }
+  }, [isInView, scrollY]); // Fix: Add scrollY to dependency array
+
+  return (
+    <Box
+      as={motion.div}
+      ref={container}
+      position={"sticky"}
+      width={"100%"}
+      bg="neutral"
+      overflow={"hidden"}
+      shape="roundedLarge"
+      $shadow="medium"
+      style={{
+        scale: dynamicStyles.scale,
+        filter: `blur(${dynamicStyles.filter}px)`,
+        height: `${100 - 2 * vertMargin}vh`,
+        top: `${vertMargin}vh`,
+      }}
+    >
+      <Box position="relative" zIndex={22} p="medium">
+        <h1>Card</h1>
+      </Box>
+      <Image
+        src={imgUrl}
+        alt={imgUrl}
+        fill
+        sizes="100vw"
+        style={{ objectFit: "cover" }}
+      />
+    </Box>
+  );
+};
+
+export default function Parallax({ images }: ParallaxProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems={"center"}
+      minHeight={"100vh"}
+    >
+      <Box
+        position={"relative"}
+        display="flex"
+        flexDirection="column"
+        gap="10vh"
+        py="10vh"
+        width={"100%"}
+      >
+        {images.map((img) => (
+          <Card key={img.id} imgUrl={img.url} />
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/blocks/ParallaxSection/index.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { motion, useScroll, useTransform } from "motion/react";
+import React, { useRef } from "react";
+import Image from "next/image";
+import { Box } from "@/design-system/elements";
+
+interface ParallaxSectionProps {
+  image: string;
+  content?: React.ReactNode;
+}
+
+const ParallaxSection: React.FC<ParallaxSectionProps> = ({
+  image,
+  content,
+}) => {
+  const sectionRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"],
+  });
+  const y = useTransform(scrollYProgress, [0, 1], ["-20%", "20%"]);
+
+  return (
+    <Box
+      ref={sectionRef}
+      as="section"
+      position="relative"
+      height="100vh"
+      overflow="hidden"
+    >
+      {content}
+      <Box
+        as={motion.div}
+        position="absolute"
+        width="100%"
+        height="120%"
+        zIndex={0}
+        style={{ top: y }}
+      >
+        <Box
+          position="absolute"
+          width={"100%"}
+          height={"100%"}
+          top="0"
+          left={"0"}
+          zIndex={10}
+          bg="rgba(0, 0, 0, 0.3)"
+        />
+        <Image
+          src={image}
+          alt="Overview"
+          fill
+          sizes="100vh"
+          style={{ objectFit: "cover" }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default ParallaxSection;

package/src/blocks/Placeholder/index.tsx

@@ -0,0 +1,48 @@
+"use client";
+import React from "react";
+import { Box, Text } from "@/design-system/elements";
+import Icon from "../Icon";
+
+interface PlaceholderProps {
+  children?: React.ReactNode;
+  icon?: string;
+  [key: string]: any;
+  iconProps?: any;
+}
+
+const Placeholder: React.FC<PlaceholderProps> = ({
+  children,
+  icon = "IconEmpty",
+  iconProps,
+  ...props
+}) => {
+  return (
+    <Text
+      as="div"
+      display="flex"
+      flexDirection={"column"}
+      justifyContent="center"
+      alignItems="center"
+      fontSize="small"
+      p="medium"
+      gap="s"
+      {...props}
+      color="tertiary"
+    >
+      {icon && (
+        <Box
+          as={Icon}
+          color={"palette.neutrals.7"}
+          size="2.25rem"
+          flex="none"
+          icon={icon}
+          {...iconProps}
+        />
+      )}
+
+      {children ? <>{children}</> : null}
+    </Text>
+  );
+};
+
+export default Placeholder;

package/src/blocks/Popover/index.tsx

@@ -0,0 +1,402 @@
+"use client";
+import { Box, Button } from "@/design-system/elements";
+import {
+  Popover as HeadlessPopover,
+  PopoverPanel,
+  PopoverButton,
+  Portal,
+} from "@headlessui/react";
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+  type Placement as FloatingPlacement,
+} from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import type { HTMLMotionProps } from "motion/react";
+
+const MotionBox = forwardRef<HTMLDivElement, HTMLMotionProps<"div"> & any>(
+  function MotionBox(props, ref) {
+    return <Box as={motion.div} ref={ref} {...props} />;
+  }
+);
+
+MotionBox.displayName = "MotionBox";
+
+type PanelProps = {
+  children: React.ReactNode;
+  usePortal?: boolean;
+  panelRef?: (node: HTMLDivElement | null) => void;
+  floatingStyles?: React.CSSProperties;
+  [key: string]: any;
+};
+
+function Panel({
+  children,
+  usePortal = false,
+  panelRef,
+  floatingStyles,
+  ...props
+}: PanelProps) {
+  const { style: styleFromProps, ...restProps } = props;
+  const combinedStyles = {
+    ...(floatingStyles || {}),
+    ...(styleFromProps || {}),
+  };
+
+  const panelContent = (
+    <PopoverPanel
+      static
+      as={MotionBox}
+      ref={panelRef}
+      {...restProps}
+      style={combinedStyles}
+    >
+      {children}
+    </PopoverPanel>
+  );
+
+  return usePortal ? <Portal>{panelContent}</Portal> : panelContent;
+}
+
+const normalizePlacement = (placement: string): FloatingPlacement => {
+  const trimmed = placement.trim();
+  // Support both "bottom start" and "bottom-start" style values
+  return trimmed.replace(/\s+/g, "-") as FloatingPlacement;
+};
+
+function mergeRefs<T = any>(
+  ...refs: Array<
+    ((instance: T | null) => void) | { current: T | null } | null | undefined
+  >
+) {
+  return (value: T | null) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(value);
+      } else {
+        (ref as { current: T | null }).current = value;
+      }
+    });
+  };
+}
+
+type PopoverProps = {
+  children?:
+    | React.ReactNode
+    | ((props: { close: () => void; open: boolean }) => React.ReactNode);
+  trigger?: string | React.ReactNode;
+  placement?: string;
+  triggerProps?: any;
+  containerProps?: any;
+  panelProps?: any;
+  triggerMode?: "click" | "hover";
+  hoverDelay?: number; // Delay in ms before showing/hiding on hover
+  usePortal?: boolean; // Whether to render the popover in a portal
+  scrollContainer?: HTMLElement | null; // Optional scroll container that should close the popover on scroll
+  renderTrigger?: (props: {
+    ref: (node: HTMLElement | null) => void;
+    onClick?: () => void;
+  }) => React.ReactNode; // Custom trigger renderer for full control
+  onOpenChange?: (isOpen: boolean) => void; // Callback when popover open state changes
+};
+
+export default function Popover({
+  children,
+  trigger,
+  triggerProps,
+  placement = "bottom end",
+  containerProps,
+  panelProps,
+  triggerMode = "click",
+  hoverDelay = 200,
+  usePortal = false, // Default to not using portal
+  scrollContainer = null,
+  renderTrigger,
+  onOpenChange,
+}: PopoverProps) {
+  const [isHovering, setIsHovering] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const isOpenRef = useRef(false);
+  const prevOpenRef = useRef(false);
+
+  const normalizedPlacement = normalizePlacement(placement);
+
+  const { refs, x, y, strategy } = useFloating({
+    placement: normalizedPlacement,
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    strategy: usePortal ? "fixed" : "absolute",
+    whileElementsMounted: autoUpdate,
+  });
+
+  const floatingStyles: React.CSSProperties = {
+    position: strategy,
+    top: y ?? 0,
+    left: x ?? 0,
+  };
+
+  const triggerRefProp = triggerProps?.ref;
+  const { ref: containerRefProp, ...restContainerProps } = containerProps ?? {};
+
+  useEffect(() => {
+    // For hover-triggered popovers without an explicit scrollContainer,
+    // we do NOT auto-close on window scroll. This avoids flicker when
+    // the page scrolls or reflows right as the user hovers.
+    if (triggerMode === "hover" && !scrollContainer) {
+      return;
+    }
+
+    const handleScroll = () => {
+      if (triggerMode === "hover") {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        setIsHovering(false);
+      } else {
+        if (isOpenRef.current && buttonRef.current) {
+          // Close the popover by toggling the trigger button
+          buttonRef.current.click();
+        }
+      }
+    };
+
+    const target: HTMLElement | Window = scrollContainer ?? window;
+    target.addEventListener("scroll", handleScroll as EventListener, {
+      passive: true,
+    });
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      target.removeEventListener("scroll", handleScroll as EventListener);
+    };
+  }, [triggerMode, scrollContainer]);
+
+  // Handle mouse enter
+  const handleMouseEnter = () => {
+    if (triggerMode !== "hover") return;
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setIsHovering(true);
+    }, hoverDelay);
+  };
+
+  // Handle mouse leave
+  const handleMouseLeave = () => {
+    if (triggerMode !== "hover") return;
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setIsHovering(false);
+    }, hoverDelay);
+  };
+
+  // Click mode popover
+  if (triggerMode === "click") {
+    return (
+      <Box as={HeadlessPopover} position="relative" {...restContainerProps}>
+        {({ open, close }: { open: boolean; close: () => void }) => {
+          isOpenRef.current = open;
+          // Notify parent of open state changes synchronously
+          if (prevOpenRef.current !== open) {
+            prevOpenRef.current = open;
+            onOpenChange?.(open);
+          }
+          return (
+            <>
+              {renderTrigger ? (
+                // Custom trigger renderer - gives full control to the consumer
+                <PopoverButton
+                  as="div"
+                  style={{ outline: "none" }}
+                  ref={mergeRefs(buttonRef, refs.setReference, triggerRefProp)}
+                >
+                  {renderTrigger({
+                    ref: () => {
+                      // Additional ref handling if needed
+                    },
+                  })}
+                </PopoverButton>
+              ) : (
+                // Default trigger wrapper
+                <Button
+                  as={PopoverButton}
+                  style={{ outline: "none" }}
+                  p="0"
+                  display="flex"
+                  alignItems="center"
+                  variant="ghost"
+                  $size="none"
+                  //{...(open && { variant: "default" })}
+                  {...triggerProps}
+                  ref={mergeRefs(buttonRef, refs.setReference, triggerRefProp)}
+                >
+                  {trigger}
+                </Button>
+              )}
+
+              <AnimatePresence>
+                {open && (
+                  <Panel
+                    usePortal={usePortal}
+                    panelRef={refs.setFloating}
+                    floatingStyles={floatingStyles}
+                    initial={{
+                      opacity: 0,
+                      ...(normalizedPlacement.startsWith("right")
+                        ? { x: -10 }
+                        : normalizedPlacement.startsWith("left")
+                          ? { x: 10 }
+                          : normalizedPlacement.startsWith("top")
+                            ? { y: 10 }
+                            : { y: -10 }),
+                    }}
+                    animate={{ opacity: 1, x: 0, y: 0 }}
+                    exit={{
+                      opacity: 0,
+                      ...(normalizedPlacement.startsWith("right")
+                        ? { x: -10 }
+                        : normalizedPlacement.startsWith("left")
+                          ? { x: 10 }
+                          : normalizedPlacement.startsWith("top")
+                            ? { y: 10 }
+                            : { y: 10 }),
+                    }}
+                    transition={{ duration: 0.1 }}
+                    p="xsmall"
+                    shape="rounded"
+                    width="15rem"
+                    $shadow="medium"
+                    zIndex="999999"
+                    skin="translucent"
+                    {...panelProps}
+                  >
+                    {typeof children === "function"
+                      ? children({ close, open })
+                      : children}
+                  </Panel>
+                )}
+              </AnimatePresence>
+            </>
+          );
+        }}
+      </Box>
+    );
+  }
+
+  // For hover mode popover, we'll use a custom implementation
+  // but still leverage Headless UI's Portal if needed
+  return (
+    <Box
+      as="div"
+      position="relative"
+      ref={mergeRefs(containerRef, refs.setReference, containerRefProp)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...restContainerProps}
+    >
+      {trigger}
+
+      <AnimatePresence>
+        {isHovering &&
+          (usePortal ? (
+            <Portal>
+              <MotionBox
+                ref={refs.setFloating}
+                initial={{
+                  opacity: 0,
+                  ...(normalizedPlacement.startsWith("right")
+                    ? { x: -10 }
+                    : normalizedPlacement.startsWith("left")
+                      ? { x: 10 }
+                      : normalizedPlacement.startsWith("top")
+                        ? { y: 10 }
+                        : { y: -10 }),
+                }}
+                animate={{ opacity: 1, x: 0, y: 0 }}
+                exit={{
+                  opacity: 0,
+                  ...(normalizedPlacement.startsWith("right")
+                    ? { x: -10 }
+                    : normalizedPlacement.startsWith("left")
+                      ? { x: 10 }
+                      : normalizedPlacement.startsWith("top")
+                        ? { y: 10 }
+                        : { y: 10 }),
+                }}
+                transition={{ duration: 0.1 }}
+                p="xsmall"
+                shape="rounded"
+                width="15rem"
+                $shadow="medium"
+                skin="translucent"
+                zIndex="999999"
+                {...panelProps}
+                style={{
+                  ...floatingStyles,
+                  ...(panelProps?.style || {}),
+                }}
+                onMouseEnter={() => setIsHovering(true)}
+                onMouseLeave={() => setIsHovering(false)}
+              >
+                {children}
+              </MotionBox>
+            </Portal>
+          ) : (
+            <MotionBox
+              ref={refs.setFloating}
+              initial={{
+                opacity: 0,
+                ...(normalizedPlacement.startsWith("right")
+                  ? { x: -10 }
+                  : normalizedPlacement.startsWith("left")
+                    ? { x: 10 }
+                    : normalizedPlacement.startsWith("top")
+                      ? { y: 10 }
+                      : { y: -10 }),
+              }}
+              animate={{ opacity: 1, x: 0, y: 0 }}
+              exit={{
+                opacity: 0,
+                ...(normalizedPlacement.startsWith("right")
+                  ? { x: -10 }
+                  : normalizedPlacement.startsWith("left")
+                    ? { x: 10 }
+                    : normalizedPlacement.startsWith("top")
+                      ? { y: 10 }
+                      : { y: 10 }),
+              }}
+              transition={{ duration: 0.1 }}
+              skin="translucent"
+              p="xsmall"
+              shape="rounded"
+              width="15rem"
+              $shadow="medium"
+              zIndex="999999"
+              {...panelProps}
+              style={{
+                ...floatingStyles,
+                ...(panelProps?.style || {}),
+              }}
+            >
+              {children}
+            </MotionBox>
+          ))}
+      </AnimatePresence>
+    </Box>
+  );
+}

package/src/blocks/Progress/getProgressColor.ts

@@ -0,0 +1,61 @@
+type ProgressType = "negative" | "positive" | "neutral";
+
+interface ColorRanges {
+  low: string; // 0-lowThreshold
+  medium: string; // lowThreshold-mediumThreshold
+  high: string; // mediumThreshold-highThreshold
+  max: string; // highThreshold-100
+  neutral: string;
+}
+
+interface ProgressThresholds {
+  low: number; // Upper bound for "low" range
+  medium: number; // Upper bound for "medium" range
+  high: number; // Upper bound for "high" range
+}
+
+const DEFAULT_COLORS: ColorRanges = {
+  low: "red",
+  medium: "orange",
+  high: "palette.brands.5",
+  max: "palette.greens.6",
+  neutral: "neutral",
+};
+
+const DEFAULT_THRESHOLDS: ProgressThresholds = {
+  low: 25,
+  medium: 50,
+  high: 75,
+};
+
+/**
+ * Returns a color string based on progress percentage and type
+ *
+ * @param progress - The progress value from 0-100
+ * @param type - The type of progress ("positive", "negative", "neutral")
+ * @param colors - Optional color mappings
+ * @param thresholds - Optional threshold values
+ * @returns A color string (hex, rgb, etc.)
+ */
+export const getProgressColor = (
+  progress: number,
+  type: ProgressType,
+  colors: ColorRanges = DEFAULT_COLORS,
+  thresholds: ProgressThresholds = DEFAULT_THRESHOLDS,
+): string => {
+  // For neutral type, always return the neutral color
+  if (type === "neutral") {
+    return colors.neutral;
+  }
+
+  // Determine color based on progress and thresholds
+  if (progress <= thresholds.low) {
+    return type === "positive" ? colors.low : colors.max;
+  } else if (progress <= thresholds.medium) {
+    return type === "positive" ? colors.medium : colors.high;
+  } else if (progress <= thresholds.high) {
+    return type === "positive" ? colors.high : colors.medium;
+  } else {
+    return type === "positive" ? colors.max : colors.low;
+  }
+};