@reactberry/system 2.0.0-beta

package/src/blocks/Container/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import { ThemeContext } from "styled-components";
+
+import React, { useContext } from "react";
+
+//const SIDEBAR_PINNED_KEY = "sidebar_pinned";
+
+interface ContainerProps extends BoxProps {
+  children: React.ReactNode;
+}
+
+export default function Container({ children, ...props }: ContainerProps) {
+  const theme: any = useContext(ThemeContext);
+  // const [isPinned, setIsPinned] = useState(false);
+
+  // Load pinned state from localStorage and listen for changes
+  // useEffect(() => {
+  //   const loadPinnedState = () => {
+  //     const stored = localStorage.getItem(SIDEBAR_PINNED_KEY);
+  //     if (stored !== null) {
+  //       setIsPinned(JSON.parse(stored));
+  //     }
+  //   };
+
+  // Load initial state
+  //   loadPinnedState();
+
+  // Listen for storage changes (in case it's updated in another component)
+  // const handleStorageChange = (e: StorageEvent) => {
+  //   if (e.key === SIDEBAR_PINNED_KEY) {
+  //     loadPinnedState();
+  //   }
+  // };
+
+  //  window.addEventListener("storage", handleStorageChange);
+
+  // Also listen for custom event in the same window
+  //   const handleCustomEvent = () => {
+  //     loadPinnedState();
+  //   };
+  //   window.addEventListener("sidebarPinnedChange", handleCustomEvent);
+
+  //   return () => {
+  //     window.removeEventListener("storage", handleStorageChange);
+  //     window.removeEventListener("sidebarPinnedChange", handleCustomEvent);
+  //   };
+  // }, []);
+
+  return (
+    <Box as="section" {...theme?.container} {...props}>
+      {children}
+    </Box>
+  );
+}

package/src/blocks/Controls/Control.tsx

@@ -0,0 +1,67 @@
+import { motion } from "motion/react";
+
+import Box, { BoxProps } from "@/design-system/elements/box";
+import { IconArrowLeft, IconArrowRight } from "@/design-system/icons";
+// import { IconDownloadData } from "@/design-system/icons";
+// import { IconLaunch } from "@/design-system/icons";
+
+interface ControlProps extends BoxProps {
+  children: React.ReactNode;
+  as?: any;
+  href?: string;
+  target?: string;
+  title?: string;
+  rel?: string;
+  onClick?: () => void;
+  [key: string]: any;
+}
+
+const btnvariants = {
+  initial: {},
+  active: {},
+};
+
+export function Control({ children, ...props }: ControlProps) {
+  return (
+    <Box
+      as={motion.div}
+      variants={btnvariants}
+      position={"absolute"}
+      top="calc(50% - 1.25rem)"
+      left="0"
+      bg="white"
+      $shadow="small"
+      size="2.5rem"
+      p="xsmall"
+      shape="circle"
+      cursor="pointer"
+      color="black"
+      zIndex={99}
+      initial="initial"
+      animate="initial"
+      whileHover="active"
+      display="flex"
+      alignItems="center"
+      opacity={1}
+      justifyContent="center"
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function ControlLeft({ ...props }: any) {
+  return (
+    <Control {...props}>
+      <Box as={IconArrowLeft} size="1.125rem" />
+    </Control>
+  );
+}
+export function ControlRight({ ...props }: any) {
+  return (
+    <Control {...props}>
+      <Box as={IconArrowRight} size="1.125rem" />
+    </Control>
+  );
+}

package/src/blocks/Controls/index.tsx

@@ -0,0 +1,11 @@
+import { Control, ControlLeft, ControlRight } from "./Control";
+
+// Default export as an object containing all controls
+const Controls = {
+  Control,
+  ControlLeft,
+  ControlRight,
+};
+
+export default Controls;
+export { Control, ControlLeft, ControlRight };

package/src/blocks/CyclingNumber/index.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { motion, MotionConfig, useInView } from "motion/react";
+import NumberFlow, { useCanAnimate, Format } from "@number-flow/react";
+import { Text } from "@/design-system/elements";
+import { useEffect, useState, useRef } from "react";
+
+const MotionNumberFlow = motion.create(NumberFlow);
+
+type Props = {
+  value: number;
+  delay?: number;
+  format?: Format; // Use Format type from @number-flow/react
+  suffix?: string;
+  prefix?: string;
+};
+
+export default function CyclingNumber({
+  value = 0,
+  delay = 500,
+  format = {
+    style: "currency",
+    currency: "USD",
+    trailingZeroDisplay: "stripIfInteger",
+  } as Format,
+  suffix = "",
+  prefix = "",
+}: Props) {
+  const canAnimate = useCanAnimate();
+  const [currentValue, setCurrentValue] = useState(0);
+  const ref = useRef(null);
+
+  const isInView = useInView(ref, {
+    once: false, // Only animate once when coming into view
+    amount: 0.5,
+  });
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    if (isInView) {
+      // Add delay before starting the animation
+      timeoutId = setTimeout(() => {
+        setCurrentValue(value);
+      }, delay);
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [isInView, value, delay]);
+
+  return (
+    <MotionConfig
+      transition={
+        canAnimate
+          ? { duration: 2, bounce: 0, type: "spring" }
+          : { duration: 0, type: "tween" }
+      }
+    >
+      <Text
+        ref={ref}
+        as={motion.span}
+        display={"inline-flex"}
+        alignItems={"center"}
+        color="primary"
+        layout
+      >
+        <MotionNumberFlow
+          value={currentValue}
+          layout
+          layoutRoot
+          trend={0}
+          format={format}
+          suffix={suffix}
+          prefix={prefix}
+        />
+      </Text>
+    </MotionConfig>
+  );
+}

package/src/blocks/DisplaySet/index.tsx

@@ -0,0 +1,42 @@
+import { Text } from "@/design-system/elements";
+export default function DisplaySet({
+  label,
+  content,
+  flow = "row",
+  contentProps = {},
+  ...props
+}: {
+  label?: string | React.ReactNode;
+  content: any;
+  flow?: "row" | "column";
+  contentProps?: Record<string, any>;
+  [key: string]: any;
+}) {
+  return (
+    <Text
+      as="div"
+      display={"grid"}
+      gap="xxsmall"
+      gridTemplateColumns={flow === "column" ? "1fr" : "1fr 1fr"}
+      color="secondary"
+      fontWeight={700}
+      {...props}
+    >
+      {label && (
+        <Text as="h4" m="0">
+          {label}
+        </Text>
+      )}
+      <Text
+        as="div"
+        fontWeight={400}
+        color={
+          content !== null && content !== undefined ? "primary" : "tertiary"
+        }
+        {...contentProps}
+      >
+        {content !== null && content !== undefined ? content : "not set"}
+      </Text>
+    </Text>
+  );
+}

package/src/blocks/Divider/index.tsx

@@ -0,0 +1,14 @@
+import Box from "@/design-system/elements/box";
+
+export default function Divider(props: any) {
+  return (
+    <Box
+      height="1px"
+      width="100%"
+      bg="transparent.light.1"
+      my="xxxsmall"
+      shape="rounded"
+      {...props}
+    />
+  );
+}

package/src/blocks/Draggable/index.tsx

@@ -0,0 +1,266 @@
+"use client";
+import React, { useRef, useEffect, useState } from "react";
+import { motion, useDragControls } from "motion/react";
+import { Box, Button, Text } from "@/design-system/elements";
+import { IconMove3 } from "@/design-system/icons";
+// import { IconCInfo } from "@/design-system/icons";
+import { useLocalStorage } from "@/design-system/hooks/use-local-storage";
+
+// PanelHeader Component
+interface PanelHeaderProps {
+  label: string;
+  leftControls?: React.ReactNode;
+  rightControls?: React.ReactNode;
+  onPointerDown?: (e: React.PointerEvent) => void;
+  style?: React.CSSProperties;
+}
+
+const PanelHeader: React.FC<PanelHeaderProps> = ({
+  label = "Panel Label",
+  leftControls,
+  rightControls,
+  onPointerDown,
+  style,
+}) => {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      borderBottom="1px solid"
+      borderBottomColor="transparent.light.1"
+      p="xsmall"
+      flex="none"
+      onPointerDown={onPointerDown}
+      style={style}
+    >
+      <Box>{leftControls}</Box>
+      <Text
+        flex="auto"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        {label}
+      </Text>
+      <Box style={{ pointerEvents: "auto" }}>{rightControls}</Box>
+    </Box>
+  );
+};
+
+// DraggablePanel Component
+interface DraggablePanelProps {
+  children: React.ReactNode;
+  label?: string;
+  parentRef: React.RefObject<HTMLDivElement>;
+  topSafeZone?: number;
+  safeZone?: {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+  };
+  initial?: { width?: string; maxHeight?: string; x?: number; y?: number };
+  [key: string]: any;
+}
+
+const DraggablePanel: React.FC<DraggablePanelProps> = ({
+  children,
+  parentRef,
+  label = "Panel",
+  topSafeZone = 16,
+  safeZone = { top: 16, left: 16, bottom: 16, right: 16 },
+  initial = {
+    width: "30rem",
+    maxHeight: "40rem",
+    x: 64,
+    y: 64,
+  },
+  ...rest
+}) => {
+  const controls = useDragControls();
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [constraints, setConstraints] = useState({
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  });
+
+  // Default position for SSR
+  const defaultPosition = {
+    x: (initial.x || 0) + (safeZone.left || 0),
+    y: (safeZone.top || 0) + (initial.y || 0),
+  };
+
+  // Persisted position (per label)
+  const [storedPos, setStoredPos] = useLocalStorage<{ x: number; y: number }>(
+    `draggable-pos-${label.toLowerCase().replace(/\s+/g, "-")}`,
+    defaultPosition,
+  );
+  const [position, setPosition] = useState<{ x: number; y: number }>(
+    defaultPosition,
+  );
+
+  const updateConstraints = () => {
+    if (sidebarRef.current && parentRef.current) {
+      const parentRect = parentRef.current.getBoundingClientRect();
+      const sidebarRect = sidebarRef.current.getBoundingClientRect();
+      const newConstraints = {
+        top: safeZone.top || 0,
+        left: safeZone.left || 0,
+        right: parentRect.width - sidebarRect.width - (safeZone.right || 0),
+        bottom: parentRect.height - sidebarRect.height - (safeZone.bottom || 0),
+      };
+      setConstraints(newConstraints);
+
+      // Clamp current position inside new constraints (e.g. after resize)
+      setPosition((prev) => {
+        const clampedX = Math.min(
+          Math.max(prev.x, newConstraints.left),
+          newConstraints.right,
+        );
+        const clampedY = Math.min(
+          Math.max(prev.y, newConstraints.top),
+          newConstraints.bottom,
+        );
+        if (clampedX !== prev.x || clampedY !== prev.y) {
+          const next = { x: clampedX, y: clampedY };
+          setStoredPos(next);
+          return next;
+        }
+        return prev;
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateConstraints();
+    window.addEventListener("resize", updateConstraints);
+    const resizeObserver = new ResizeObserver(updateConstraints);
+    if (parentRef.current) {
+      resizeObserver.observe(parentRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", updateConstraints);
+      resizeObserver.disconnect();
+    };
+  }, [parentRef, topSafeZone]);
+
+  // Handle client-side mounting
+  useEffect(() => {
+    setMounted(true);
+    setPosition(storedPos);
+  }, []);
+
+  // Sync local state if stored position changes (external reset)
+  useEffect(() => {
+    if (mounted) {
+      setPosition(storedPos);
+    }
+  }, [storedPos.x, storedPos.y, mounted]);
+
+  return (
+    <Box
+      as={motion.div}
+      ref={sidebarRef}
+      position="absolute"
+      top={0}
+      left={0}
+      width={initial.width || "30rem"}
+      height="auto"
+      maxHeight={initial.maxHeight || "40rem"}
+      skin="translucent"
+      shape="roundedLarge"
+      $shadow="medium"
+      overflow="hidden"
+      display="flex"
+      flexDirection="column"
+      zIndex={99999}
+      drag
+      dragControls={controls}
+      dragMomentum={false}
+      dragElastic={0}
+      dragConstraints={constraints}
+      dragListener={false}
+      initial={false}
+      onDragStart={updateConstraints}
+      onDragEnd={() => {
+        if (sidebarRef.current && parentRef.current) {
+          const parentRect = parentRef.current.getBoundingClientRect();
+          const panelRect = sidebarRef.current.getBoundingClientRect();
+          const x = panelRect.left - parentRect.left;
+          const y = panelRect.top - parentRect.top;
+          const clampedX = Math.min(
+            Math.max(x, constraints.left),
+            constraints.right,
+          );
+          const clampedY = Math.min(
+            Math.max(y, constraints.top),
+            constraints.bottom,
+          );
+          const next = { x: clampedX, y: clampedY };
+          setPosition(next);
+          setStoredPos(next);
+        }
+        updateConstraints();
+      }}
+      style={{
+        pointerEvents: "auto",
+        x: mounted ? position.x : defaultPosition.x,
+        y: mounted ? position.y : defaultPosition.y,
+      }}
+      {...rest}
+    >
+      <PanelHeader
+        label={label}
+        leftControls={
+          <Button
+            $size="icon.xsmall"
+            variant="ghost"
+            style={{ pointerEvents: "none" }}
+          >
+            <IconMove3 width="16" height="16" />
+          </Button>
+        }
+        rightControls={
+          <Button $size="icon.xsmall" variant="ghost">
+            {/*{ <IconCInfo width="16" height="16" />}*/}
+          </Button>
+        }
+        onPointerDown={(e) => {
+          e.preventDefault();
+          controls.start(e);
+        }}
+        style={{ cursor: "grab", touchAction: "none", userSelect: "none" }}
+      />
+      {children}
+    </Box>
+  );
+};
+
+// DraggableContainer Component
+interface DraggableContainerProps {
+  children: React.ReactNode;
+}
+
+function DraggableContainer({ children }: DraggableContainerProps) {
+  const parentRef = useRef<HTMLDivElement>(null!);
+
+  return (
+    <Box
+      position="fixed"
+      width="100vw"
+      height="100vh"
+      ref={parentRef}
+      zIndex={9999}
+      style={{ pointerEvents: "none" }}
+    >
+      <DraggablePanel parentRef={parentRef}>{children}</DraggablePanel>
+    </Box>
+  );
+}
+
+// Export all components
+export { DraggableContainer, DraggablePanel, PanelHeader };

package/src/blocks/Drawer/index.tsx

@@ -0,0 +1,136 @@
+"use client";
+import React, { useRef } from "react";
+import { createPortal } from "react-dom";
+import { Box, Button, Text } from "@/design-system/elements";
+import { AnimatePresence, motion } from "motion/react";
+import { IconEAdd, IconERemove } from "@/design-system/icons";
+import { useSidebar } from "@/design-system/hooks/use-sidebar";
+import { useOverlay } from "@/design-system/hooks/useOverlay";
+import { Backdrop, OverscrollGuard } from "@/design-system/blocks/Overlay";
+
+interface DrawerProps {
+  children: React.ReactNode;
+  title?: string;
+  id: string;
+  width?: string | number | object;
+  placement?: "left" | "right";
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  children,
+  title = "Drawer",
+  id,
+  width = "350px",
+  placement = "left",
+}) => {
+  const { isSidebarOpen, toggleSidebar } = useSidebar(id);
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const { mounted, isStandalone } = useOverlay(isSidebarOpen);
+
+  // Compute side-dependent positioning and animation
+  const sidePositionProps =
+    placement === "right"
+      ? { right: 0 as const, left: undefined }
+      : { left: 0 as const, right: undefined };
+
+  const motionProps =
+    placement === "right"
+      ? { initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" } }
+      : { initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" } };
+
+  if (!mounted) return null;
+
+  const content = (
+    <AnimatePresence>
+      {isSidebarOpen && (
+        <>
+          <Backdrop
+            bg="rgba(0, 0, 0, 0.5)"
+            zIndex={10002}
+            onClick={() => toggleSidebar()}
+          />
+
+          {/* Drawer */}
+          <Box
+            as={motion.div}
+            ref={drawerRef}
+            position="fixed"
+            top="0"
+            {...sidePositionProps}
+            width={width}
+            height="100dvh"
+            bg="surface"
+            skin="translucent"
+            zIndex={10009}
+            {...motionProps}
+            transition={{ type: "spring", damping: 30, stiffness: 300 }}
+            $shadow="medium"
+            display="flex"
+            flexDirection="column"
+            style={{
+              paddingTop: isStandalone
+                ? "env(safe-area-inset-top, 0px)"
+                : undefined,
+              paddingBottom: "env(safe-area-inset-bottom, 0px)",
+            }}
+          >
+            {/* Header */}
+            <Box
+              pt="small"
+              px="medium"
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Text fontSize="medium" fontWeight="bold" color="primary">
+                {title}
+              </Text>
+              <Button
+                onClick={() => toggleSidebar()}
+                variant="ghost"
+                $size="icon.xsmall"
+                aria-label="Close drawer"
+              >
+                <Box as={IconERemove} size="1.25rem" />
+              </Button>
+            </Box>
+            {children}
+          </Box>
+
+          <OverscrollGuard />
+        </>
+      )}
+    </AnimatePresence>
+  );
+
+  return createPortal(content, document.body);
+};
+
+export const DrawerButton: React.FC<{
+  drawerId: string;
+  label?: string;
+  icon?: React.ReactNode;
+  [key: string]: any;
+}> = ({
+  drawerId,
+  label = "Open",
+  icon = <Box as={IconEAdd} size="1rem" />,
+  ...props
+}) => {
+  const { isSidebarOpen, toggleSidebar } = useSidebar(drawerId);
+
+  return (
+    <Button
+      variant={isSidebarOpen ? "primary" : "ghost"}
+      $size="xxsmall"
+      onClick={() => toggleSidebar()}
+      display="flex"
+      alignItems="center"
+      gap="xxsmall"
+      {...props}
+    >
+      {icon}
+      <Text display={{ _: "none", md: "initial" }}>{label}</Text>
+    </Button>
+  );
+};