@reactberry/system 2.0.0-beta

package/src/blocks/Toast/index.tsx

@@ -0,0 +1,77 @@
+"use client";
+import Box from "@/design-system/elements/box";
+import Text from "@/design-system/elements/text";
+import { BoxProps } from "@/design-system/elements/box";
+import React from "react";
+import { IconERemove } from "@/design-system/icons";
+import { Button } from "@/design-system/elements";
+
+interface ToastProps extends BoxProps {
+  message: React.ReactNode;
+  description?: string;
+  variant?: "default" | "success" | "error" | "info" | "warning";
+  icon?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export default function Toast({
+  message,
+  description,
+  variant = "default",
+  icon,
+  onClose,
+  ...props
+}: ToastProps) {
+  const variantStyles = {
+    default: { skin: "translucent", color: "palette.grays.11" },
+    success: { bg: "palette.greens.0", color: "palette.greens.11" },
+    error: { bg: "palette.reds.0", color: "palette.reds.11" },
+    info: { bg: "palette.brands.0", color: "palette.brands.11" },
+    warning: { bg: "palette.yellows.0", color: "palette.yellows.11" },
+  };
+
+  const currentStyle = variantStyles[variant];
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap="xs"
+      p="s"
+      py="xs"
+      shape="rounded"
+      width="22.5rem"
+      boxShadow="rgba(0, 0, 0, 0.125) 0px 4px 12px"
+      {...currentStyle}
+      {...props}
+    >
+      {icon && (
+        <Box display="flex" alignItems="center" pl="xxxs">
+          {icon}
+        </Box>
+      )}
+      <Box display="flex" flexDirection="column" gap="xxs" flex="auto">
+        <Text fontSize="13px" fontWeight="500" color="inherit">
+          {message}
+        </Text>
+        {description && (
+          <Text fontSize="xs" color="inherit" opacity={0.8}>
+            {description}
+          </Text>
+        )}
+      </Box>
+      {onClose && (
+        <Button
+          as="button"
+          onClick={onClose}
+          shape="circle"
+          $size="icon.xsmall"
+          variant="ghost.dim"
+          flex="none"
+        >
+          <Text as={IconERemove} size="0.875rem" color="inherit"></Text>
+        </Button>
+      )}
+    </Box>
+  );
+}

package/src/blocks/Tooltip/index.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { Box, Text } from "@/design-system/elements";
+import { AnimatePresence, motion } from "motion/react";
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  autoUpdate,
+  flip,
+  offset as floatingOffset,
+  shift,
+  useFloating,
+  type Placement as FloatingPlacement,
+} from "@floating-ui/react";
+
+interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  offset?: number;
+  portal?: boolean;
+  possiblePlacements?: string[];
+  [key: string]: any;
+}
+
+export const Tooltip = ({
+  children,
+  content,
+  placement = "bottom",
+  offset = 8,
+  portal = true,
+  possiblePlacements,
+  ...props
+}: TooltipProps) => {
+  const [mounted, setMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  type Side = "top" | "bottom" | "left" | "right";
+
+  const validFallbacks = (possiblePlacements || []).filter((p): p is Side =>
+    ["top", "bottom", "left", "right"].includes(p)
+  );
+
+  const {
+    refs,
+    x,
+    y,
+    strategy,
+    placement: resolvedPlacement,
+  } = useFloating({
+    placement: placement as FloatingPlacement,
+    middleware: [
+      floatingOffset(offset),
+      flip(
+        validFallbacks.length
+          ? { fallbackPlacements: validFallbacks as FloatingPlacement[] }
+          : {}
+      ),
+      shift({ padding: 8 }),
+    ],
+    // Keep fixed positioning to match previous behavior
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+  });
+
+  const floatingStyles: React.CSSProperties = {
+    position: strategy,
+    top: y ?? 0,
+    left: x ?? 0,
+  };
+
+  const actualSide = (resolvedPlacement.split("-")[0] as Side) || placement;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const showTooltip = () => {
+    setIsVisible(true);
+  };
+
+  const hideTooltip = () => {
+    setIsVisible(false);
+  };
+
+  const getArrowStyles = () => {
+    switch (actualSide) {
+      case "bottom":
+        return { top: "-4px", left: "calc(50% - 4px)" };
+      case "top":
+        return { bottom: "-4px", left: "calc(50% - 4px)" };
+      case "right":
+        return { left: "-4px", top: "calc(50% - 4px)" };
+      case "left":
+        return { right: "-4px", top: "calc(50% - 4px)" };
+      default:
+        return {};
+    }
+  };
+
+  const tooltipContent = (
+    <AnimatePresence>
+      {isVisible && (
+        <Text
+          as={motion.div}
+          ref={refs.setFloating}
+          fontSize="small"
+          zIndex={99999}
+          initial={{ opacity: 0, y: actualSide === "top" ? 10 : -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: actualSide === "top" ? 10 : -10 }}
+          transition={{ duration: 0.2 }}
+          style={{
+            pointerEvents: "none",
+            ...floatingStyles,
+            ...(props.style || {}),
+          }}
+          {...props}
+        >
+          <Box
+            skin="translucent.dark"
+            shape="roundedLarge"
+            $shadow="medium"
+            p="small"
+            width="fit-content"
+            maxWidth="20rem"
+            position="relative"
+          >
+            {/* Arrow */}
+            <Box
+              position="absolute"
+              width="8px"
+              height="8px"
+              bg="inherit"
+              style={{
+                transform: "rotate(45deg)",
+                ...getArrowStyles(),
+              }}
+            />
+
+            {/* Content */}
+
+            <Text
+              color="inherit"
+              // position="relative"
+              // zIndex={1}
+            >
+              {content}
+            </Text>
+          </Box>
+        </Text>
+      )}
+    </AnimatePresence>
+  );
+
+  return (
+    <>
+      <Box
+        ref={refs.setReference}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        display="flex"
+        {...props}
+      >
+        {children}
+      </Box>
+      {mounted && portal
+        ? createPortal(tooltipContent, document.body)
+        : tooltipContent}
+    </>
+  );
+};
+
+export default Tooltip;

package/src/blocks/Underlay/index.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Box } from "@/design-system/elements";
+import styled from "styled-components";
+import { useEffect, useRef } from "react";
+
+interface UnderlayProps {
+  backgroundColor?: string;
+  dotColor?: string;
+  dotSize?: number;
+  gridSize?: number;
+  blurAmount?: number;
+  maskGradient?: string;
+  hasMask?: boolean;
+  stop1?: string;
+  stop2?: string;
+  [key: string]: any;
+}
+
+const StyledBox = styled(Box).withConfig({
+  shouldForwardProp: (prop) =>
+    ![
+      "dotColor",
+      "dotSize",
+      "gridSize",
+      "blurAmount",
+      "maskGradient",
+      "hasMask",
+      "stop1",
+      "stop2",
+    ].includes(prop),
+})<UnderlayProps>`
+  ${(props) => `backdrop-filter: blur(${props.blurAmount || 8}px);`}
+  ${(props) =>
+    props.hasMask &&
+    `
+    mask: linear-gradient(
+      ${props.maskGradient || "rgb(0, 0, 0) 33%, rgba(0, 0, 0, 0) 100%"}
+    );
+  `}
+  transform: translateZ(0);
+  will-change: backdrop-filter;
+`;
+
+const Underlay = ({
+  backgroundColor,
+  dotColor,
+  dotSize = 1,
+  gridSize = 4,
+  blurAmount = 12,
+  maskGradient,
+  hasMask = true,
+  stop1,
+  stop2,
+  ...props
+}: UnderlayProps) => {
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  // Force blur application after sidebar state changes
+  useEffect(() => {
+    // This triggers a reflow to ensure the blur is applied
+    if (boxRef.current) {
+      // Force a repaint to ensure the backdrop-filter is applied
+      const currentBlur = boxRef.current.style.backdropFilter;
+      boxRef.current.style.backdropFilter = "none";
+      // Force reflow
+      void boxRef.current.offsetHeight;
+      // Restore the blur
+      boxRef.current.style.backdropFilter =
+        currentBlur || `blur(${blurAmount}px)`;
+    }
+  }, [blurAmount, props.width, props.height, props.expanded]);
+
+  // Determine if we're using dots or a gradient
+  const useGradient = stop1 && stop2;
+
+  // Generate the background image based on whether we're using dots or gradient
+  const backgroundImage = useGradient
+    ? `linear-gradient(to bottom right, ${stop1}, ${stop2})`
+    : `radial-gradient(
+        ${dotColor || "transparent"} 1px,
+        ${backgroundColor || "currentColor"} ${dotSize}px
+      )`;
+
+  // If using gradient, don't apply grid background size
+  const backgroundSize = useGradient
+    ? undefined
+    : `${gridSize}px ${gridSize}px`;
+
+  return (
+    <StyledBox
+      ref={boxRef}
+      bg="transparent"
+      backgroundSize={backgroundSize}
+      backgroundImage={backgroundImage}
+      blurAmount={blurAmount}
+      hasMask={hasMask}
+      maskGradient={maskGradient}
+      {...props}
+    />
+  );
+};
+
+export default Underlay;

package/src/blocks/Upload/Dropzone.tsx

@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Box, Text } from "../../elements";
+import Image from "next/image";
+import { UploadContainerProps } from "./types";
+
+const getColor = (props: any) => {
+  if (props.isDragAccept) {
+    return "success.subtle";
+  }
+
+  if (props.isDragReject) {
+    return "error.subtle";
+  }
+
+  if (props.isDragActive) {
+    return "info.subtle";
+  }
+
+  return "brand.subtle";
+};
+
+const DropzoneContainer = styled(Box)`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.25rem;
+  border-width: 1.5px;
+  border-radius: 8px;
+  border-style: dashed;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+`;
+
+function Dropzone({
+  getRootProps,
+  isDragActive,
+  isDragAccept,
+  isDragReject,
+  label = "",
+  dropzoneProps = {},
+  children,
+  dropzoneContainerProps = {},
+}: UploadContainerProps) {
+  const { imgSrc, showPreview, icon, title, description } = dropzoneProps;
+
+  return (
+    <DropzoneContainer
+      {...getRootProps()}
+      skin={getColor({ isDragActive, isDragAccept, isDragReject })}
+      {...dropzoneContainerProps}
+      style={{
+        cursor: "pointer",
+        padding: showPreview && imgSrc ? 0 : "2rem",
+        ...dropzoneContainerProps?.style,
+      }}
+    >
+      {showPreview && imgSrc ? (
+        <Image src={imgSrc} alt="dropzone-result" style={{ width: "100%" }} />
+      ) : (
+        <>
+          {icon && <Box mb="s">{icon}</Box>}
+          {title && (
+            <Text
+              as="h3"
+              fontSize="m"
+              fontWeight={600}
+              mb={description ? "xs" : "0"}
+              color="primary"
+            >
+              {title}
+            </Text>
+          )}
+          <Text fontSize="small" color="secondary">
+            {description || label || (
+              <>
+                Drag and drop files here, or <b>click to select files</b>
+              </>
+            )}
+          </Text>
+        </>
+      )}
+      {children}
+    </DropzoneContainer>
+  );
+}
+
+export default Dropzone;

package/src/blocks/Upload/UploadBtn.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Button, Box } from "@/design-system/elements";
+import { UploadContainerProps } from "./types";
+import { IconDotsAnim, IconUpload } from "@/design-system/icons";
+
+function UploadBtn({
+  children,
+  getRootProps,
+  label,
+  loading,
+  icon,
+  buttonProps = {},
+}: UploadContainerProps) {
+  return (
+    <Button
+      variant="primary"
+      $size="small"
+      disabled={loading}
+      {...buttonProps}
+      {...getRootProps()}
+    >
+      {loading ? (
+        <>
+          <Box as={IconDotsAnim} size="1rem" /> Working
+        </>
+      ) : (
+        <>
+          <Box as={icon || IconUpload} size="1rem" />
+          {label && label}
+        </>
+      )}
+
+      {children}
+    </Button>
+  );
+}
+
+export default UploadBtn;

package/src/blocks/Upload/index.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+import Dropzone from "./Dropzone";
+import UploadBtn from "./UploadBtn";
+import { UploadProps } from "./types";
+
+function Upload({
+  type = "button",
+  label,
+  icon,
+  accept,
+  onDropAccepted,
+  onDropRejected,
+  dropzoneProps,
+  loading,
+  buttonProps,
+  dropzoneContainerProps,
+  ...rest
+}: UploadProps) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+  } = useDropzone({
+    accept,
+    onDropAccepted,
+    onDropRejected,
+    disabled: loading,
+    ...rest,
+  });
+
+  const UploadContainer = useMemo(() => {
+    switch (type) {
+      case "dropzone":
+        return Dropzone;
+      case "button":
+        return UploadBtn;
+    }
+  }, [type]);
+
+  return (
+    <UploadContainer
+      label={label}
+      icon={icon}
+      dropzoneProps={dropzoneProps}
+      loading={loading}
+      getRootProps={getRootProps}
+      isDragActive={isDragActive}
+      isDragAccept={isDragAccept}
+      isDragReject={isDragReject}
+      buttonProps={buttonProps}
+      dropzoneContainerProps={dropzoneContainerProps}
+    >
+      <input {...getInputProps()} />
+    </UploadContainer>
+  );
+}
+
+export default Upload;

package/src/blocks/Upload/types.ts

@@ -0,0 +1,37 @@
+import { DropzoneOptions, DropzoneRootProps } from "react-dropzone";
+
+export type UploadComponent = "button" | "dropzone";
+export type DropzoneProps = {
+  showPreview?: boolean;
+  imgSrc?: string;
+  /** Optional icon node to render inside the dropzone empty state */
+  icon?: React.ReactNode;
+  /** Optional title/heading for the dropzone empty state */
+  title?: string | React.ReactNode;
+  /** Optional description text under the title; falls back to label */
+  description?: string | React.ReactNode;
+};
+
+export type UploadContainerProps = {
+  getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
+  label?: string | React.ReactNode;
+  isDragActive: boolean;
+  isDragAccept: boolean;
+  isDragReject: boolean;
+  dropzoneProps?: Partial<DropzoneProps>;
+  children: any;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  buttonProps?: any;
+  dropzoneContainerProps?: any;
+};
+
+export type UploadProps = Partial<DropzoneOptions> & {
+  type?: UploadComponent;
+  label?: string | React.ReactNode;
+  icon?: any;
+  dropzoneProps?: Partial<DropzoneProps>;
+  loading?: boolean;
+  buttonProps?: any;
+  dropzoneContainerProps?: any;
+};