@reactberry/system 2.0.0-beta

package/src/blocks/Avatar/index.tsx

@@ -0,0 +1,167 @@
+"use client";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import Text from "@/design-system/elements/text";
+import { pickColor } from "@/design-system/utils/pickColor";
+import Image from "next/image";
+
+interface AvatarProps extends BoxProps {
+  autocolor?: boolean;
+  name?: string | undefined;
+  type?: "text" | "icon" | "image"; // Add "image" to possible types
+  src?: string; // Add src prop for image URL
+  alt?: string; // Add alt text for accessibility
+  withPresence?: boolean;
+  fontSize?: string;
+  status?: {
+    label: string;
+    color: string;
+    border: string;
+  } | null;
+  [key: string]: any;
+}
+
+const defaultProps = {
+  display: "inline-flex",
+  name: "Aa",
+  shape: "circle",
+  flex: "none",
+  overflow: "hidden",
+};
+
+function getUserInitials(name?: string) {
+  if (!name) return "Aa";
+  const [first, last] = name.split(" ");
+  return last
+    ? `${first[0].toUpperCase()}${last[0].toUpperCase()}`
+    : first.slice(0, 2).toUpperCase();
+}
+
+const Avatar: React.FC<AvatarProps> = (props) => {
+  const {
+    autocolor = true,
+    name = "Aa",
+    color,
+    type = "text",
+    src,
+    alt,
+    withPresence = false,
+    status = { label: "online", color: "green", border: "surface" },
+    size,
+    fontSize = "75%",
+    ...restProps
+  } = props;
+
+  return (
+    <Box display="inline-flex" alignItems={"center"} position={"relative"}>
+      <Box
+        {...defaultProps}
+        color={autocolor ? pickColor(String(name)) : color || "neutral"}
+        name={name}
+        position="relative"
+        size={size || "2.5rem"}
+        {...restProps}
+      >
+        {type === "image" && src && (
+          <Box
+            as={Image}
+            backgroundColor={"white"}
+            src={src}
+            loading="eager"
+            placeholder="blur"
+            blurDataURL={
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8feRIPQAHiQLUpr/inAAAAABJRU5ErkJggg=="
+            }
+            alt={alt || name || "avatar"}
+            fill
+            sizes="100%"
+            style={{ objectFit: "cover" }}
+          />
+        )}
+
+        {/*old way*/}
+        {/*{type === "text" && (
+          <svg
+            fill="currentColor"
+            width="100%"
+            height="100%"
+            viewBox="0 0 100 100"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <rect x="0" y="0" width="100" height="100" />
+              <text
+                x="50%"
+                y="50%"
+                dy="4%"
+                //alignmentBaseline="baseline"
+                dominantBaseline="middle"
+                textAnchor="middle"
+                fill="white"
+                fontFamily="sans-serif"
+                fontWeight="700"
+                fontSize={fontSize}
+              >
+                {getUserInitials(name)}
+              </text>
+            </g>
+          </svg>
+        )}*/}
+
+        {type === "text" && (
+          <Box
+            width="100%"
+            height="100%"
+            bg="currentColor"
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+          >
+            <Text color="white" fontSize={fontSize} fontWeight="800">
+              {getUserInitials(name)}
+            </Text>
+          </Box>
+        )}
+
+        {type === "icon" && (
+          <svg
+            fill="currentColor"
+            width="100%"
+            height="100%"
+            viewBox="0 0 100 100"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <rect x="0" y="0" width="100" height="100" />
+              <path
+                d="M30.224 36.982C30.224 25.964 39.319 17 50.5 17c11.18 0 20.276 8.964 20.276 19.982v4.996c0 11.019-9.095 19.983-20.276 19.983-11.18 0-20.276-8.964-20.276-19.983v-4.996zM84 98.198c0 .924-.75 1.67-1.675 1.67h-63.65c-.925 0-1.675-.746-1.675-1.67v-3.34c0-14.737 12.023-26.726 26.8-26.726h13.4c14.777 0 26.8 11.99 26.8 26.725v3.341z"
+                fill="white"
+                fillRule="nonzero"
+              />
+            </g>
+          </svg>
+        )}
+      </Box>
+
+      {withPresence && status && (
+        <Box
+          bg={status.color}
+          position="absolute"
+          size={size ? `calc(${size} / 2.5)` : "0.625rem"}
+          maxWidth={"1rem"}
+          maxHeight={"1rem"}
+          shape="circle"
+          bottom="0"
+          left="auto"
+          right={`calc(${size} / 7.5 * -1)`}
+          zIndex="1"
+          border="1.5px solid"
+          borderColor="surface"
+        />
+      )}
+    </Box>
+  );
+};
+
+export default Avatar;

package/src/blocks/Await/index.tsx

@@ -0,0 +1,45 @@
+import { JSX } from "react";
+
+export async function Await<T>({
+  promise,
+  children,
+}: {
+  promise: Promise<T>;
+  children: (result: T) => JSX.Element;
+}) {
+  const result = await promise;
+
+  return children(result);
+}
+
+// Example usage
+// // src/app/stocks/[stockId]/page.tsx
+// import { Await } from "@/design-system/blocks";
+
+// export default async function Stock({
+//   params,
+// }: {
+//   params: { stockId: string };
+// }) {
+//   // Page blocks on this data:
+//   const stock = await getStock(params.stockId);
+
+//   return (
+//     <div>
+//       <h1>{stock.name}</h1>
+
+//       <Suspense fallback={<Spinner />}>
+//         {/* ...but renders a spinner for this slower data: */}
+//         <Await promise={getRecentNews(stock)}>
+//           {(stories) => (
+//             <ul>
+//               {stories.map((story) => (
+//                 <li key={story.id}>{story.title}</li>
+//               ))}
+//             </ul>
+//           )}
+//         </Await>
+//       </Suspense>
+//     </div>
+//   );
+// }

package/src/blocks/Cards/AnimatedCard/index.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useRef, useState } from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+} from "motion/react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+
+interface AnimatedCardProps extends Omit<BoxProps, "ref" | "children"> {
+  children: React.ReactNode;
+  /** Spotlight color (default: "rgba(255, 255, 255, 0.2)") */
+  spotlightColor?: string;
+  /** Spotlight radius in pixels (default: 300) */
+  spotlightSize?: number;
+  /** Enable tilt effect (default: true) */
+  tiltEnabled?: boolean;
+  /** Enable spotlight effect (default: true) */
+  spotlightEnabled?: boolean;
+  /** Max rotation in degrees (default: 2.3) */
+  maxTilt?: number;
+  /** Spring stiffness (default: 300) */
+  stiffness?: number;
+  /** Spring damping (default: 30) */
+  damping?: number;
+}
+
+/**
+ * AnimatedCard - Interactive card with 3D tilt and spotlight effects
+ *
+ * A solid card with interactive 3D tilt and mouse-tracking spotlight.
+ * Combines the best features from TiltCard and InteractiveCard components.
+ */
+export default function AnimatedCard({
+  children,
+  spotlightColor = "rgba(255, 255, 255, 0.2)",
+  spotlightSize = 300,
+  tiltEnabled = true,
+  spotlightEnabled = true,
+  maxTilt = 2.3,
+  stiffness = 300,
+  damping = 30,
+  ...props
+}: AnimatedCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
+
+  // Spotlight values with springs for smoother animation
+  const spotlightX = useSpring(useMotionValue(0), { stiffness, damping });
+  const spotlightY = useSpring(useMotionValue(0), { stiffness, damping });
+
+  // Tilt values
+  const tiltX = useMotionValue(0);
+  const tiltY = useMotionValue(0);
+  const tiltXSpring = useSpring(tiltX, { stiffness, damping });
+  const tiltYSpring = useSpring(tiltY, { stiffness, damping });
+
+  // Transform template for 3D tilt
+  const transform = useMotionTemplate`perspective(1000px) rotateX(${tiltXSpring}deg) rotateY(${tiltYSpring}deg)`;
+
+  // Spotlight gradient
+  const spotlightBackground = useMotionTemplate`
+    radial-gradient(
+      ${spotlightSize}px circle at ${spotlightX}px ${spotlightY}px,
+      ${spotlightColor},
+      transparent 70%
+    )
+  `;
+
+  const shouldAnimate = !prefersReducedMotion && (tiltEnabled || spotlightEnabled);
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    if (!ref.current || !shouldAnimate) return;
+
+    const rect = ref.current.getBoundingClientRect();
+
+    // Calculate mouse position relative to card center
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const mouseX = e.clientX - centerX;
+    const mouseY = e.clientY - centerY;
+
+    // Update spotlight position
+    spotlightX.set(e.clientX - rect.left);
+    spotlightY.set(e.clientY - rect.top);
+
+    // Calculate rotation (clamped to maxTilt)
+    if (tiltEnabled) {
+      const rotateX = (mouseY / (rect.height / 2)) * -maxTilt;
+      const rotateY = (mouseX / (rect.width / 2)) * maxTilt;
+
+      tiltX.set(rotateX);
+      tiltY.set(rotateY);
+    }
+  }
+
+  function handleMouseEnter() {
+    setIsHovered(true);
+  }
+
+  function handleMouseLeave() {
+    setIsHovered(false);
+    // Reset tilt with animation
+    if (tiltEnabled) {
+      tiltX.set(0);
+      tiltY.set(0);
+    }
+  }
+
+  return (
+    <Box
+      as={motion.div}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      position="relative"
+      overflow="hidden"
+      shape="rounded"
+      skin="card"
+      $shadow="medium"
+      style={{
+        transformStyle: shouldAnimate ? "preserve-3d" : undefined,
+        transform: shouldAnimate ? transform : undefined,
+        transformOrigin: "center center",
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+        isolation: "isolate",
+      }}
+      {...props}
+    >
+      {/* Content */}
+      <Box
+        as={shouldAnimate ? motion.div : "div"}
+        position="relative"
+        height="100%"
+        width="100%"
+        zIndex={1}
+        style={
+          shouldAnimate
+            ? {
+                transform: isHovered ? "translateZ(24px)" : "translateZ(0px)",
+                transition: "transform 0.3s ease-out",
+                transformStyle: "preserve-3d",
+              }
+            : undefined
+        }
+      >
+        {children}
+      </Box>
+
+      {/* Spotlight effect - on top of content */}
+      {shouldAnimate && spotlightEnabled && (
+        <Box
+          as={motion.div}
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+          opacity={isHovered ? 1 : 0}
+          zIndex={2}
+          style={{
+            pointerEvents: "none",
+            transition: "opacity 0.3s ease-out",
+            background: spotlightBackground,
+          }}
+        />
+      )}
+    </Box>
+  );
+}

package/src/blocks/Cards/FluorescentCard/index.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useRef, useState } from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+} from "motion/react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import styled from "styled-components";
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+import { useTouchDevice } from "@/design-system/hooks/useTouchDevice";
+
+interface FluorescentCardProps extends Omit<BoxProps, "ref" | "children"> {
+  children: React.ReactNode;
+  /** Spotlight color (default: "rgba(255, 255, 255, 0.2)") */
+  spotlightColor?: string;
+  /** Spotlight radius in pixels (default: 300) */
+  spotlightSize?: number;
+  /** Enable tilt effect (default: true) */
+  tiltEnabled?: boolean;
+  /** Max rotation in degrees (default: 2.3) */
+  maxTilt?: number;
+  /** Spring stiffness (default: 300) */
+  stiffness?: number;
+  /** Spring damping (default: 30) */
+  damping?: number;
+}
+
+// Fluorescent/frosted glass styling
+// Uses semi-transparent white with saturated backdrop for a glowing effect
+const FluorescentContainer = styled(Box)`
+  background-color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: saturate(1.5) brightness(1.75);
+`;
+
+/**
+ * FluorescentCard - Interactive card with frosted glass effect and 3D tilt
+ *
+ * A fluorescent/frosted glass card with interactive 3D tilt and mouse-tracking spotlight.
+ * Features a semi-transparent white background with saturated backdrop blur for a glowing effect.
+ * Ideal for use over gradient or colorful backgrounds.
+ */
+export default function FluorescentCard({
+  children,
+  spotlightColor = "rgba(255, 255, 255, 0.2)",
+  spotlightSize = 300,
+  tiltEnabled = true,
+  maxTilt = 2.3,
+  stiffness = 300,
+  damping = 30,
+  ...props
+}: FluorescentCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const isTouchDevice = useTouchDevice();
+  const prefersReducedMotion = useReducedMotion();
+
+  // Spotlight values with springs for smoother animation
+  const spotlightX = useSpring(useMotionValue(0), { stiffness, damping });
+  const spotlightY = useSpring(useMotionValue(0), { stiffness, damping });
+
+  // Tilt values
+  const tiltX = useMotionValue(0);
+  const tiltY = useMotionValue(0);
+  const tiltXSpring = useSpring(tiltX, { stiffness, damping });
+  const tiltYSpring = useSpring(tiltY, { stiffness, damping });
+
+  // Transform template for 3D tilt
+  const transform = useMotionTemplate`perspective(1000px) rotateX(${tiltXSpring}deg) rotateY(${tiltYSpring}deg)`;
+
+  // Spotlight gradient
+  const spotlightBackground = useMotionTemplate`
+    radial-gradient(
+      ${spotlightSize}px circle at ${spotlightX}px ${spotlightY}px,
+      ${spotlightColor},
+      transparent 70%
+    )
+  `;
+
+  const shouldAnimate = !prefersReducedMotion && !isTouchDevice;
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    if (!ref.current || !shouldAnimate) return;
+
+    const rect = ref.current.getBoundingClientRect();
+
+    // Calculate mouse position relative to card center
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const mouseX = e.clientX - centerX;
+    const mouseY = e.clientY - centerY;
+
+    // Update spotlight position
+    spotlightX.set(e.clientX - rect.left);
+    spotlightY.set(e.clientY - rect.top);
+
+    // Calculate rotation (clamped to maxTilt)
+    if (tiltEnabled) {
+      const rotateX = (mouseY / (rect.height / 2)) * -maxTilt;
+      const rotateY = (mouseX / (rect.width / 2)) * maxTilt;
+
+      tiltX.set(rotateX);
+      tiltY.set(rotateY);
+    }
+  }
+
+  function handleMouseEnter() {
+    setIsHovered(true);
+  }
+
+  function handleMouseLeave() {
+    setIsHovered(false);
+    // Reset tilt with animation
+    if (tiltEnabled) {
+      tiltX.set(0);
+      tiltY.set(0);
+    }
+  }
+
+  return (
+    <FluorescentContainer
+      as={motion.div}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      position="relative"
+      overflow="hidden"
+      shape="rounded"
+      $shadow="medium"
+      style={{
+        transformStyle: shouldAnimate ? "preserve-3d" : undefined,
+        transform: shouldAnimate ? transform : undefined,
+        transformOrigin: "center center",
+      }}
+      {...props}
+    >
+      {/* Content */}
+      <Box
+        as={shouldAnimate ? motion.div : "div"}
+        position="relative"
+        height="100%"
+        width="100%"
+        zIndex={1}
+        style={
+          shouldAnimate
+            ? {
+                transform: isHovered ? "translateZ(24px)" : "translateZ(0px)",
+                transition: "transform 0.3s ease-out",
+                transformStyle: "preserve-3d",
+              }
+            : undefined
+        }
+      >
+        {children}
+      </Box>
+
+      {/* Spotlight effect - on top of content */}
+      {shouldAnimate && (
+        <Box
+          as={motion.div}
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+          opacity={isHovered ? 1 : 0}
+          zIndex={2}
+          style={{
+            pointerEvents: "none",
+            transition: "opacity 0.3s ease-out",
+            background: spotlightBackground,
+          }}
+        />
+      )}
+    </FluorescentContainer>
+  );
+}