@reactberry/system 2.0.0-beta

package/src/blocks/Marquee/index.tsx

@@ -0,0 +1,116 @@
+"use client";
+import React from "react";
+import styled, { css, keyframes } from "styled-components";
+import { Box } from "@/design-system/elements";
+
+type MarqueeProps = {
+  children: React.ReactNode;
+  speed?: number;
+  direction?: "left" | "right";
+  pauseOnHover?: boolean;
+  gap?: string | number;
+  repeat?: number;
+  fadeEdges?: boolean;
+  className?: string;
+};
+
+const scrollMarquee = keyframes`
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(calc(-100% / var(--marquee-repeat)), 0, 0);
+  }
+`;
+
+const MarqueeRoot = styled(Box)<{ $pauseOnHover: boolean; $fadeEdges: boolean }>`
+  overflow: hidden;
+
+  ${(props) =>
+    props.$fadeEdges &&
+    css`
+      mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+      );
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+      );
+    `}
+
+  ${(props) =>
+    props.$pauseOnHover &&
+    css`
+      &:hover [data-marquee-track="true"] {
+        animation-play-state: paused;
+      }
+    `}
+`;
+
+const MarqueeTrack = styled.div<{
+  $duration: number;
+  $direction: "left" | "right";
+}>`
+  display: flex;
+  width: max-content;
+  will-change: transform;
+  animation: ${scrollMarquee} ${(props) => props.$duration}s linear infinite;
+  animation-direction: ${(props) =>
+    props.$direction === "right" ? "reverse" : "normal"};
+`;
+
+export default function Marquee({
+  children,
+  speed = 50,
+  direction = "left",
+  pauseOnHover = false,
+  gap = "1rem",
+  repeat = 2,
+  fadeEdges = true,
+  className,
+}: MarqueeProps) {
+  const duration = 20 * (100 / speed);
+  const safeRepeat = Math.max(2, repeat);
+  const rootStyle = {
+    "--marquee-repeat": String(safeRepeat),
+  } as React.CSSProperties;
+
+  return (
+    <MarqueeRoot
+      position="relative"
+      width="100%"
+      className={className}
+      style={rootStyle}
+      $pauseOnHover={pauseOnHover}
+      $fadeEdges={fadeEdges}
+    >
+      <MarqueeTrack
+        data-marquee-track="true"
+        $duration={duration}
+        $direction={direction}
+      >
+        {Array.from({ length: safeRepeat }).map((_, index) => (
+          <Box
+            key={index}
+            display="flex"
+            flexWrap="nowrap"
+            gap={gap}
+            flexShrink={0}
+            pr={gap}
+            aria-hidden={index > 0}
+          >
+            {children}
+          </Box>
+        ))}
+      </MarqueeTrack>
+    </MarqueeRoot>
+  );
+}

package/src/blocks/MaskedField/index.tsx

@@ -0,0 +1,199 @@
+"use client"
+import React, { forwardRef } from "react"
+import {
+  NumericFormat,
+  PatternFormat,
+  NumericFormatProps,
+  PatternFormatProps,
+} from "react-number-format"
+import { Field } from "@/design-system/elements"
+
+// Preset configurations for common mask types
+export const maskPresets = {
+  currency: {
+    type: "numeric" as const,
+    prefix: "$",
+    thousandSeparator: ",",
+    decimalSeparator: ".",
+    decimalScale: 2,
+    fixedDecimalScale: true,
+    allowNegative: false,
+  },
+  percentage: {
+    type: "numeric" as const,
+    suffix: "%",
+    decimalScale: 2,
+    fixedDecimalScale: false,
+    allowNegative: false,
+    isAllowed: (values: any) => {
+      const { floatValue } = values
+      return floatValue === undefined || (floatValue >= 0 && floatValue <= 100)
+    },
+  },
+  phone: {
+    type: "pattern" as const,
+    format: "(###) ###-####",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  date: {
+    type: "pattern" as const,
+    format: "##/##/####",
+    placeholder: "MM/DD/YYYY",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  zip: {
+    type: "pattern" as const,
+    format: "#####",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  zipPlus4: {
+    type: "pattern" as const,
+    format: "#####-####",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  ssn: {
+    type: "pattern" as const,
+    format: "###-##-####",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  ein: {
+    type: "pattern" as const,
+    format: "##-#######",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  creditCard: {
+    type: "pattern" as const,
+    format: "#### #### #### ####",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  time12: {
+    type: "pattern" as const,
+    format: "##:## ##",
+    placeholder: "HH:MM AM",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  time24: {
+    type: "pattern" as const,
+    format: "##:##",
+    placeholder: "HH:MM",
+    mask: "_",
+    allowEmptyFormatting: false,
+  },
+  decimal: {
+    type: "numeric" as const,
+    decimalScale: 4,
+    fixedDecimalScale: false,
+    allowNegative: true,
+    thousandSeparator: ",",
+  },
+  integer: {
+    type: "numeric" as const,
+    decimalScale: 0,
+    allowNegative: false,
+    thousandSeparator: ",",
+  },
+  year: {
+    type: "numeric" as const,
+    decimalScale: 0,
+    allowNegative: false,
+    isAllowed: (values: any) => {
+      const { floatValue } = values
+      return (
+        floatValue === undefined || (floatValue >= 1900 && floatValue <= 2100)
+      )
+    },
+  },
+}
+
+export type MaskPresetType = keyof typeof maskPresets
+
+interface BaseMaskedFieldProps {
+  variant?: string
+  $size?: string
+  width?: string
+  preset?: MaskPresetType
+  // Design-system styling props that we want to forward through to Field
+  shape?: string
+  bg?: string
+  fontSize?: string
+  fontWeight?: number
+  textAlign?: string
+}
+
+type NumericMaskedFieldProps = BaseMaskedFieldProps &
+  Omit<NumericFormatProps, "customInput" | "getInputRef"> & {
+    maskType?: "numeric"
+  }
+
+type PatternMaskedFieldProps = BaseMaskedFieldProps &
+  Omit<PatternFormatProps, "customInput" | "getInputRef"> & {
+    maskType?: "pattern"
+  }
+
+export type MaskedFieldProps = NumericMaskedFieldProps | PatternMaskedFieldProps
+
+// Create a single StyledField component that accepts styling props
+const StyledField = forwardRef<HTMLInputElement, any>(
+  ({ variant, $size, width, ...props }, ref) => {
+    return (
+      <Field
+        as="input"
+        variant={variant}
+        $size={$size}
+        width={width}
+        {...props}
+        ref={ref}
+      />
+    )
+  }
+)
+
+StyledField.displayName = "StyledField"
+
+export function MaskedField({
+  variant = "ghost",
+  $size = "medium",
+  width = "100%",
+  preset,
+  maskType,
+  ...rest
+}: MaskedFieldProps) {
+  // Get preset configuration if provided
+  const presetConfig = preset ? maskPresets[preset] : null
+
+  // Determine which format type to use
+  const formatType = maskType || presetConfig?.type || "numeric"
+
+  // Merge preset config with custom props (custom props override preset)
+  const mergedProps = {
+    customInput: StyledField,
+    variant,
+    $size,
+    width,
+    ...(presetConfig || {}),
+    ...rest,
+  }
+
+  // Remove the 'type' property as it's not a valid prop for NumericFormat/PatternFormat
+  const { type, ...finalProps } = mergedProps as any
+  // 'type' is intentionally removed from finalProps
+  void type
+
+  // Render NumericFormat for currency, percentage, amounts
+  if (formatType === "numeric") {
+    return <NumericFormat {...finalProps} />
+  }
+
+  // Render PatternFormat for phone, date, SSN, etc.
+  return <PatternFormat {...finalProps} />
+}
+
+export default MaskedField

package/src/blocks/Menu/MenuContent.tsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Box, Text } from "@/design-system/elements";
+import { useMenu } from "./MenuContext";
+
+interface MenuItem {
+  documentId: string;
+  title: string;
+  path?: string;
+  items?: MenuItem[];
+  additionalFields?: {
+    description?: string;
+    divider?: boolean;
+  };
+  menuAttached?: boolean;
+  order?: number;
+}
+
+interface MenuContentProps {
+  items?: MenuItem[];
+  children?: React.ReactNode;
+  level?: number;
+}
+
+const transition = {
+  duration: 0.15,
+  ease: "easeInOut",
+};
+
+const MenuItems: React.FC<{ items: MenuItem[]; level: number }> = ({
+  items,
+  level,
+}) => {
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={
+        level === 0 ? `repeat(${items.length}, 1fr)` : ` 1fr`
+      }
+      gap="small"
+    >
+      {items.map((item, index) => (
+        <Box
+          key={item.documentId}
+          borderLeft={level === 0 && index > 0 ? "1px solid" : undefined}
+          borderColor="transparent.light.1"
+          pl={level === 0 && index > 0 ? "small" : undefined}
+          width="100%"
+          display="flex"
+          flexDirection="column"
+          gap="xxxsmall"
+        >
+          {item.items && item.items.length > 0 ? (
+            // Category header with nested items
+            <Box p="small" display="flex" flexDirection="column" gap="xxxsmall">
+              <Text
+                as="h6"
+                color="tertiary"
+                fontSize="small"
+                fontWeight="600"
+                m="0"
+                style={{ cursor: "default" }}
+              >
+                {item.title}
+              </Text>
+              {item.additionalFields?.description && (
+                <Text color="tertiary" fontSize="xsmall">
+                  {item.additionalFields.description}
+                </Text>
+              )}
+
+              <MenuItems items={item.items} level={level + 1} />
+            </Box>
+          ) : (
+            // Regular link
+            <Box
+              as="a"
+              href={item.path}
+              display="flex"
+              flexDirection="column"
+              gap="xxxsmall"
+              shape="rounded"
+              p="xsmall"
+              width={"100%"}
+              minWidth={"15rem"}
+              interactive={{
+                hover: { bg: "transparent.light.0" },
+              }}
+            >
+              <Text
+                // as="a"
+                // href={item.path}
+                color="primary"
+                fontSize="small"
+                fontWeight="bold"
+              >
+                {item.title}
+              </Text>
+              {item.additionalFields?.description && (
+                <Text color="tertiary" fontSize="xsmall">
+                  {item.additionalFields.description}
+                </Text>
+              )}
+            </Box>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export const MenuContent: React.FC<MenuContentProps> = ({
+  items,
+  children,
+  level = 0,
+}) => {
+  const { selected, dir } = useMenu();
+  const [left, setLeft] = useState(0);
+  //console.log("MenuContent rendered:", { items, selected, dir });
+  useEffect(() => {
+    if (selected) {
+      const hoveredTab = document.getElementById(`shift-tab-${selected}`);
+      const overlayContent = document.getElementById("overlay-content");
+
+      if (!hoveredTab || !overlayContent) return;
+
+      const tabRect = hoveredTab.getBoundingClientRect();
+      const { left: contentLeft } = overlayContent.getBoundingClientRect();
+      const tabCenter = tabRect.left + tabRect.width / 2 - contentLeft;
+
+      setLeft(tabCenter);
+    }
+  }, [selected]);
+
+  const getInitialX = () => {
+    switch (dir) {
+      case "left":
+        return 20;
+      case "right":
+        return -20;
+      case "initial":
+        return 0;
+      default:
+        return 0;
+    }
+  };
+
+  return (
+    <Box
+      as={motion.div}
+      id="overlay-content"
+      initial={{
+        opacity: 0,
+        y: dir === "initial" ? 10 : 0,
+        scale: 0.98,
+      }}
+      animate={{
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1,
+      }}
+      exit={{
+        opacity: 0,
+        y: dir === "initial" ? 10 : 0,
+        scale: 0.98,
+      }}
+      transition={transition}
+      position="absolute"
+      left="0"
+      top="calc(100% + 0.75rem)"
+      minWidth="25rem"
+      width="40rem"
+      p="xxsmall"
+      border="1px solid"
+      bg="overlay"
+      borderColor="transparent.light.1"
+      shape="roundedLarge"
+      $shadow="large"
+    >
+      <Bridge />
+      <Nub left={left} />
+      <Box
+        as={motion.div}
+        p="xxsmall"
+        border="1px solid"
+        borderColor="transparent.light.1"
+        bg="surface"
+        shape="rounded"
+      >
+        <AnimatePresence mode="popLayout">
+          <Box
+            as={motion.div}
+            key={selected}
+            initial={{
+              opacity: 0,
+              x: getInitialX(),
+            }}
+            animate={{
+              opacity: 1,
+              x: 0,
+            }}
+            exit={{
+              opacity: 0,
+              x: 0,
+            }}
+            transition={{
+              duration: 0.125,
+              ease: "easeOut",
+            }}
+          >
+            {items ? <MenuItems items={items} level={level} /> : children}
+          </Box>
+        </AnimatePresence>
+      </Box>
+    </Box>
+  );
+};
+const Bridge = () => (
+  <Box position="absolute" top="-16px" left="0" right="0" height="16px" />
+);
+
+const Nub = ({ left }: { left: number }) => {
+  return (
+    <Box
+      as={motion.span}
+      position="absolute"
+      left="50%"
+      top="0"
+      width="1rem"
+      height="1rem"
+      style={{
+        clipPath: "polygon(0 0, 100% 0, 50% 50%, 0% 100%)",
+        transform: "translate(-50%, -50%) rotate(45deg)",
+      }}
+      animate={{ left: `${left}px` }}
+      transition={transition}
+      border="1px solid"
+      bg="overlay"
+      borderColor="transparent.light.1"
+      borderRadius={"2px"}
+    />
+  );
+};
+
+export default MenuContent;

package/src/blocks/Menu/MenuContext.tsx

@@ -0,0 +1,34 @@
+// src/design-system/blocks/Menu/MenuContext.tsx
+import React, { createContext, useContext, useState } from "react";
+
+type Direction = "left" | "right" | "initial" | null;
+
+interface MenuContextValue {
+  selected: string | number | null;
+  setSelected: (id: string | number | null) => void;
+  dir: Direction;
+  setDir: (dir: Direction) => void;
+}
+
+const MenuContext = createContext<MenuContextValue | undefined>(undefined);
+
+export const useMenu = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error("useMenu must be used within a MenuProvider");
+  }
+  return context;
+};
+
+export const MenuProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [selected, setSelected] = useState<string | number | null>(null);
+  const [dir, setDir] = useState<Direction>(null);
+  // console.log("DIRECTION", dir);
+  return (
+    <MenuContext.Provider value={{ selected, setSelected, dir, setDir }}>
+      {children}
+    </MenuContext.Provider>
+  );
+};

package/src/blocks/Menu/MenuItem.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useContext } from "react";
+import { motion } from "motion/react";
+import { Box, Text } from "@/design-system/elements";
+import { useMenu } from "./MenuContext";
+import Link from "next/link";
+import { ThemeContext } from "styled-components";
+
+interface MenuItemProps {
+  id: string | number;
+  title: string;
+  path?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  id,
+  title,
+  path,
+  children,
+  disabled,
+}) => {
+  const { selected, setSelected, setDir } = useMenu();
+  const [isHovered, setIsHovered] = useState(false);
+  const theme: any = useContext(ThemeContext);
+  const handleSelect = () => {
+    if (!children) {
+      setSelected(null);
+      return;
+    }
+
+    if (selected === null) {
+      setDir("initial");
+    } else {
+      setDir(selected > id ? "right" : "left");
+    }
+    setSelected(id);
+  };
+
+  return (
+    <Box
+      position="relative"
+      px="small"
+      py="xxsmall"
+      display="flex"
+      alignItems="center"
+      cursor="pointer"
+      flex="none"
+      onClick={handleSelect}
+      onMouseEnter={() => {
+        setIsHovered(true);
+        handleSelect();
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+      disabled={disabled}
+    >
+      {path ? (
+        <Text
+          as={Link}
+          href={path}
+          id={`shift-tab-${id}`}
+          cursor="pointer"
+          textDecoration="none"
+          color={isHovered ? "base" : "primary"}
+          interactive={{ hover: { color: "base" } }}
+          fontSize="small"
+          fontWeight="600"
+          onMouseEnter={() => setSelected(null)}
+        >
+          {title}
+        </Text>
+      ) : (
+        <Text
+          id={`shift-tab-${id}`}
+          color={selected === id || isHovered ? "base" : "primary"}
+          fontSize="small"
+          fontWeight="600"
+        >
+          {title}
+        </Text>
+      )}
+
+      {(selected === id || isHovered) && (
+        <Box
+          as={motion.div}
+          layout
+          layoutId="menu-item"
+          bg="brand"
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+          shape="pill"
+          zIndex={-1}
+          transition={{ duration: 0.15, ease: "easeInOut" }}
+          {...theme?.header?.public?.menu?.item?.highlight}
+        />
+      )}
+    </Box>
+  );
+};