@reactberry/system 2.0.0-beta

package/README.md

@@ -0,0 +1,48 @@
+# reactberry
+
+`@reactberry/system` is the single-package Next.js UI library for Reactberry projects.
+
+## Package model
+
+- This package intentionally depends on Next.js APIs like `next/image` and `next/navigation`.
+- It ships source files from `src/` for Next.js apps to transpile.
+- Consumer apps should add `@reactberry/system` to `transpilePackages`.
+
+## Installation
+
+Install `@reactberry/system` together with its peer dependencies in your consuming app:
+
+```bash
+npm install @reactberry/system@beta styled-components next react react-dom
+```
+
+If you want the exact current prerelease, install `@reactberry/system@2.0.0-beta` instead.
+
+- `next`
+- `react`
+- `react-dom`
+- `styled-components`
+
+## Next.js setup
+
+Add `@reactberry/system` to `transpilePackages` in your app's `next.config.js` or `next.config.ts`.
+
+## Example
+
+Import components from `@reactberry/system` and wrap your app with `DesignSystemProvider`.
+
+## Exports
+
+- `@reactberry/system`
+- `@reactberry/system/providers`
+- `@reactberry/system/themes`
+- `@reactberry/system/blocks`
+- `@reactberry/system/elements`
+- `@reactberry/system/icons`
+- `@reactberry/system/charts`
+
+## Notes
+
+- `src/index.ts` is the root barrel export.
+- `DesignSystemProvider` includes the styled-components registry for Next.js usage.
+- The package keeps the extracted design-system source as the repo's source of truth.

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@reactberry/system",
+  "version": "2.0.0-beta",
+  "description": "Reusable Next.js UI library package for Reactberry projects.",
+  "type": "module",
+  "types": "./src/index.ts",
+  "files": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "README.md",
+    "tsconfig.json"
+  ],
+  "engines": {
+    "node": "20.x",
+    "npm": ">=9.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "docs:dev": "npm --prefix docs run dev",
+    "docs:build": "npm --prefix docs run build",
+    "docs:typecheck": "npm --prefix docs run typecheck"
+  },
+  "peerDependencies": {
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.28",
+    "@headlessui/react": "^2.2.9",
+    "@nivo/bar": "^0.99.0",
+    "@nivo/pie": "^0.99.0",
+    "@number-flow/react": "^0.5.14",
+    "@paper-design/shaders-react": "^0.0.69",
+    "chroma-js": "^2.4.2",
+    "motion": "^12.35.2",
+    "react-dropzone": "^14.4.1",
+    "react-number-format": "^5.4.4",
+    "react-swipeable": "^7.0.2",
+    "react-textarea-autosize": "^8.5.9",
+    "react-use-measure": "^2.1.7",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/styled-system": "^5.1.22",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "styled-components": "^6.1.1",
+    "typescript": "^5"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./providers": "./src/providers/index.ts",
+    "./themes": "./src/themes/index.ts",
+    "./blocks": "./src/blocks/index.ts",
+    "./elements": "./src/elements/index.ts",
+    "./icons": "./src/icons/index.tsx",
+    "./charts": "./src/charts/index.ts",
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "reactberry",
+    "design-system",
+    "nextjs",
+    "react",
+    "styled-components"
+  ]
+}

package/src/blocks/Accordion/index.tsx

@@ -0,0 +1,158 @@
+"use client";
+import { Box } from "@/design-system/elements";
+import { AnimatePresence, motion } from "motion/react";
+import React, { useState } from "react";
+import { useLocalStorage } from "@/design-system/hooks/use-local-storage";
+
+import { IconArrowSmDown } from "@/design-system/icons";
+import Group from "../Group";
+
+interface AccordionItem {
+  id: string;
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultOpen?: string[];
+  onToggle?: (itemId: string, isOpen: boolean, openItems: string[]) => void;
+  fontSize?: string;
+  spacing?: string;
+  persistKey?: string;
+  iconPosition?: "start" | "end";
+  containerProps?: {
+    [key: string]: any;
+  };
+  itemProps?: {
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+const Accordion: React.FC<AccordionProps> = ({
+  items,
+  allowMultiple = true,
+  defaultOpen = [],
+  onToggle,
+  persistKey,
+  iconPosition = "end",
+  containerProps = {},
+  itemProps = {},
+}) => {
+  const [persistedOpenItems, setPersistedOpenItems] = useLocalStorage<string[]>(
+    persistKey ? `accordion-${persistKey}` : "",
+    defaultOpen
+  );
+
+  const [openItems, setOpenItems] = useState<Set<string>>(() => {
+    return new Set(persistKey ? persistedOpenItems : defaultOpen);
+  });
+
+  const handleToggle = (itemId: string) => {
+    const item = items.find((item) => item.id === itemId);
+    if (item?.disabled) return;
+
+    setOpenItems((prevOpenItems) => {
+      const newOpenItems = new Set(prevOpenItems);
+      const isCurrentlyOpen = newOpenItems.has(itemId);
+
+      if (isCurrentlyOpen) {
+        newOpenItems.delete(itemId);
+      } else {
+        if (!allowMultiple) {
+          newOpenItems.clear();
+        }
+        newOpenItems.add(itemId);
+      }
+
+      const openItemsArray = Array.from(newOpenItems);
+      onToggle?.(itemId, !isCurrentlyOpen, openItemsArray);
+
+      // Persist to localStorage if persistKey is provided
+      if (persistKey) {
+        setPersistedOpenItems(openItemsArray);
+      }
+
+      return newOpenItems;
+    });
+  };
+
+  return (
+    <Box
+      width="100%"
+      display="flex"
+      flexDirection={"column"}
+      {...containerProps}
+    >
+      {items.map((item) => {
+        const isOpen = openItems.has(item.id);
+        const isDisabled = item.disabled;
+
+        return (
+          <Box
+            key={item.id}
+            as={motion.div}
+            opacity={isDisabled ? 0.5 : 1}
+            {...itemProps}
+          >
+            <Box
+              width="100%"
+              cursor={isDisabled ? "not-allowed" : "pointer"}
+              display="flex"
+              alignItems="center"
+              justifyContent={"space-between"}
+              gap="mini"
+              disabled={isDisabled}
+              onClick={() => handleToggle(item.id)}
+            >
+              <Group
+                as={motion.div}
+                justifyContent="center"
+                flex="none"
+                order={iconPosition === "start" ? 0 : 1}
+                animate={{
+                  rotate: isOpen
+                    ? iconPosition === "start"
+                      ? 0
+                      : 180
+                    : iconPosition === "start"
+                      ? -90
+                      : 0,
+                  opacity: isOpen ? 1 : 0.5,
+                }}
+                transition={{ duration: 0.1 }}
+              >
+                <Box as={IconArrowSmDown} size="1.75em" />
+              </Group>
+              <Box flex="1" order={iconPosition === "start" ? 1 : 0}>
+                {item.trigger}
+              </Box>
+            </Box>
+
+            <AnimatePresence mode="sync">
+              {isOpen && (
+                <Box
+                  as={motion.div}
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: "auto", opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{
+                    duration: 0.2,
+                    ease: "easeInOut",
+                  }}
+                >
+                  {item.content}
+                </Box>
+              )}
+            </AnimatePresence>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default Accordion;

package/src/blocks/AnimatedCarousel/index.tsx

@@ -0,0 +1,188 @@
+// carousel.tsx
+"use client";
+
+import { Box } from "@/design-system/elements";
+import {
+  AnimatePresence,
+  MotionConfig,
+  motion,
+  useMotionTemplate,
+  useSpring,
+} from "motion/react";
+import { useEffect, useState } from "react";
+import type { ImageType } from "@/design-system/types";
+import { ControlLeft, ControlRight } from "../Controls/Control";
+
+const COLLAPSED_ASPECT_RATIO = 0.5;
+const FULL_ASPECT_RATIO = 3 / 2;
+const MARGIN = 24;
+const GAP = 2;
+
+type CarouselProps = {
+  images: ImageType[];
+};
+
+type ThumbnailsProps = {
+  images: ImageType[];
+  index: number;
+  setIndex: (value: number) => void;
+};
+
+export default function AnimatedCarousel({ images }: CarouselProps) {
+  const [index, setIndex] = useState(0);
+
+  const x = index * 100;
+  const xSpring = useSpring(x, { bounce: 0 });
+  const xPercentage = useMotionTemplate`-${xSpring}%`;
+
+  useEffect(() => {
+    xSpring.set(x);
+  }, [x, xSpring]);
+
+  useEffect(() => {
+    function handleKeyPress(e: KeyboardEvent) {
+      if (e.key === "ArrowLeft") {
+        if (index > 0) {
+          setIndex(index - 1);
+        }
+      } else if (e.key === "ArrowRight") {
+        if (index < images.length - 1) {
+          setIndex(index + 1);
+        }
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyPress);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [index, images.length]);
+
+  return (
+    <MotionConfig transition={{ type: "spring", bounce: 0 }}>
+      <Box
+        display={"flex"}
+        flexDirection={"column"}
+        justifyContent={"space-between"}
+        height={"100%"}
+      >
+        <Box position="relative" overflow={"hidden"}>
+          <Box as={motion.div} style={{ x: xPercentage }} display={"flex"}>
+            {images.map((image, i) => (
+              <Box
+                as={motion.img}
+                key={image.id}
+                src={image.url}
+                animate={{ opacity: i === index ? 1 : 0.4 }}
+                aspect={"1/0.85"}
+                width="100%"
+                height="100vh"
+                maxHeight={"70vh"}
+                style={{ objectFit: "cover" }}
+                flex="none"
+              />
+            ))}
+          </Box>
+
+          <AnimatePresence initial={false}>
+            {index > 0 && (
+              <ControlLeft
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 0.7 }}
+                exit={{ opacity: 0, pointerEvents: "none" }}
+                whileHover={{ opacity: 1, scale: 1.1 }}
+                ml="small"
+                onClick={() => setIndex(index - 1)}
+              />
+            )}
+          </AnimatePresence>
+
+          <AnimatePresence initial={false}>
+            {index + 1 < images.length && (
+              <ControlRight
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 0.7 }}
+                exit={{ opacity: 0, pointerEvents: "none" }}
+                whileHover={{ opacity: 1, scale: 1.1 }}
+                mr="small"
+                left="auto"
+                right="0"
+                onClick={() => setIndex(index + 1)}
+              />
+            )}
+          </AnimatePresence>
+        </Box>
+
+        <Thumbnails images={images} index={index} setIndex={setIndex} />
+      </Box>
+    </MotionConfig>
+  );
+}
+
+function Thumbnails({ images, index, setIndex }: ThumbnailsProps) {
+  const x =
+    index * 100 * (COLLAPSED_ASPECT_RATIO / FULL_ASPECT_RATIO) +
+    MARGIN +
+    index * GAP;
+  const xSpring = useSpring(x, { bounce: 0 });
+  const xPercentage = useMotionTemplate`-${xSpring}%`;
+
+  useEffect(() => {
+    xSpring.set(x);
+  }, [x, xSpring]);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent={"center"}
+      overflow={"hidden"}
+      height="3rem"
+    >
+      <Box
+        as={motion.div}
+        style={{
+          aspectRatio: FULL_ASPECT_RATIO,
+          gap: `${GAP}%`,
+          x: xPercentage,
+        }}
+        display="flex"
+        minWidth={"0"}
+      >
+        {images.map((image, i) => (
+          <Box
+            as={motion.div}
+            onClick={() => setIndex(i)}
+            initial={false}
+            animate={i === index ? "active" : "inactive"}
+            cursor="pointer"
+            variants={{
+              active: {
+                aspectRatio: FULL_ASPECT_RATIO,
+                marginLeft: `${MARGIN}%`,
+                marginRight: `${MARGIN}%`,
+              },
+              inactive: {
+                aspectRatio: COLLAPSED_ASPECT_RATIO,
+                marginLeft: 0,
+                marginRight: 0,
+              },
+            }}
+            height="100%"
+            flex="none"
+            key={image.id}
+          >
+            <Box
+              as="img"
+              alt=""
+              src={image.url}
+              width="100%"
+              height="100vh"
+              style={{ objectFit: "cover" }}
+            />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/blocks/AppleGlow/index.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { useEffect, useRef, useCallback } from "react"
+import { motion, AnimatePresence } from "motion/react"
+import Box, { BoxProps } from "@/design-system/elements/box"
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion"
+
+// Default Apple Intelligence colors
+const DEFAULT_COLORS = [
+  "#3B82F6", // Blue
+  "#A855F7", // Purple
+  "#7A84FF", // Red
+  "#35B3DF", // Cyan
+]
+
+export type AppleGlowProps = Omit<BoxProps, "children"> & {
+  colors?: string[]
+  borderRadius?: string | number
+  intensity?: "sm" | "md" | "lg" | "xl"
+  preview?: boolean // Controls visibility
+  blurAmount?: number // Custom blur amount in pixels
+  backgroundColor?: string // Background color for the mask
+  rotationSpeed?: number // ms per tick (default 50)
+}
+
+// Blur intensity mapping
+const BLUR_INTENSITY = {
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+}
+
+// Generate linear gradient — unrolled for common color counts to avoid .join()
+function createLinearGradient(colors: string[], angle: number): string {
+  switch (colors.length) {
+    case 2:
+      return `linear-gradient(${angle}deg, ${colors[0]}, ${colors[1]})`
+    case 3:
+      return `linear-gradient(${angle}deg, ${colors[0]}, ${colors[1]}, ${colors[2]})`
+    case 4:
+      return `linear-gradient(${angle}deg, ${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`
+    default:
+      return `linear-gradient(${angle}deg, ${colors.join(", ")})`
+  }
+}
+
+export default function AppleGlow({
+  colors = DEFAULT_COLORS,
+  borderRadius,
+  intensity = "xl",
+  preview = false,
+  blurAmount,
+  backgroundColor = "base",
+  rotationSpeed = 50,
+  ...boxProps
+}: AppleGlowProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const angleRef = useRef(234.576)
+  const rafRef = useRef<number | null>(null)
+  const lastTimeRef = useRef(0)
+  const blur = blurAmount ?? BLUR_INTENSITY[intensity]
+
+  const applyFrame = useCallback(() => {
+    if (containerRef.current) {
+      containerRef.current.style.background = createLinearGradient(
+        colors,
+        angleRef.current,
+      )
+    }
+  }, [colors])
+
+  // Rotate gradient angle over time (rAF-driven, frame-synced)
+  useEffect(() => {
+    if (!preview || prefersReducedMotion) {
+      // Show a static gradient when reduced motion is preferred
+      if (preview) applyFrame()
+      return
+    }
+
+    const tick = (now: number) => {
+      const delta = lastTimeRef.current ? now - lastTimeRef.current : 0
+      lastTimeRef.current = now
+
+      if (delta > 0 && rotationSpeed > 0) {
+        angleRef.current =
+          (angleRef.current + delta / rotationSpeed) % 360
+      }
+      applyFrame()
+      rafRef.current = requestAnimationFrame(tick)
+    }
+
+    lastTimeRef.current = 0
+    rafRef.current = requestAnimationFrame(tick)
+
+    return () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }
+  }, [preview, rotationSpeed, applyFrame, prefersReducedMotion])
+
+  return (
+    <AnimatePresence>
+      {preview && (
+        <Box
+          as={motion.div}
+          ref={containerRef}
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          style={{
+            pointerEvents: "none",
+            borderRadius,
+            willChange: "background",
+          }}
+          {...boxProps}
+        >
+          {/* Blurred inset mask - the blur on the edges reveals the gradient */}
+          <Box
+            position="absolute"
+            top="2px"
+            left="2px"
+            right="2px"
+            bottom="2px"
+            bg={backgroundColor}
+            style={{
+              filter: `blur(${blur}px)`,
+              borderRadius: borderRadius ? `inherit` : undefined,
+            }}
+          />
+        </Box>
+      )}
+    </AnimatePresence>
+  )
+}