@reactberry/system 2.0.0-beta

package/src/blocks/DynamicIsland/DynamicIsland.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Box } from "@/design-system/elements";
+import { motion } from "motion/react";
+import { type ReactNode, useState } from "react";
+
+const BOUNCE_VARIANTS = {
+  idle: 0.5,
+} as const;
+// 'ease-in': [0.55, 0.055, 0.675, 0.19], // -- ease-in-cubic
+//    'ease-out': [0.23, 1, 0.32, 1], // -- ease-out-quint
+//    'ease-in-out': [0.785, 0.135, 0.15, 0.86], // -- ease-in-out-circ
+const DEFAULT_BOUNCE = 0.5;
+
+export type DynamicIslandView = string;
+
+export interface DynamicIslandProps {
+  view?: DynamicIslandView;
+  onViewChange?: (view: DynamicIslandView) => void;
+  content?: ReactNode;
+  controlIcons?: Record<string, ReactNode>;
+  containerProps?: any;
+}
+
+export default function DynamicIsland({
+  view: controlledView,
+  content,
+  containerProps,
+}: DynamicIslandProps) {
+  const [internalView] = useState<DynamicIslandView>("default");
+  const [variantKey] = useState<string>("default");
+
+  const view = controlledView ?? internalView;
+
+  return (
+    <Box
+      as={motion.div}
+      layout
+      skin="translucent.dark"
+      shape="pill"
+      minWidth={"6rem"}
+      m="0 auto"
+      overflow={"hidden"}
+      flex="none"
+      height={"fit-content"}
+      width={"fit-content"}
+      display="flex"
+      alignItems="center"
+      justifyContent={"center"}
+      gap="xxxs"
+      // style={{ pointerEvents: "initial" }}
+      {...containerProps}
+      transition={{
+        type: "spring",
+        bounce:
+          BOUNCE_VARIANTS[variantKey as keyof typeof BOUNCE_VARIANTS] ??
+          DEFAULT_BOUNCE,
+      }}
+    >
+      <Box
+        as={motion.div}
+        animate={{
+          scale: 1,
+          opacity: 1,
+          filter: "blur(0px)",
+          originX: 0.5,
+          originY: 0.5,
+          transition: { delay: 0.05 },
+        }}
+        initial={{
+          scale: 0.9,
+          opacity: 0,
+          filter: "blur(5px)",
+          originX: 0.5,
+          originY: 0.5,
+        }}
+        key={view}
+        transition={{
+          type: "spring",
+          bounce:
+            BOUNCE_VARIANTS[variantKey as keyof typeof BOUNCE_VARIANTS] ??
+            DEFAULT_BOUNCE,
+        }}
+      >
+        {content}
+      </Box>
+    </Box>
+  );
+}

package/src/blocks/DynamicIsland/index.tsx

@@ -0,0 +1,2 @@
+export { default as DynamicIsland } from "./DynamicIsland";
+export type { DynamicIslandProps, DynamicIslandView } from "./DynamicIsland";

package/src/blocks/Fader/index.tsx

@@ -0,0 +1,145 @@
+"use client"
+import { motion, AnimatePresence } from "motion/react"
+import Box, { BoxProps } from "@/design-system/elements/box"
+
+import Image from "next/image"
+
+const FADE_DIRECTION = "to bottom"
+
+type FaderProps = BoxProps & {
+  image?: string | undefined | null
+  fade?: boolean
+  fadeColor?: string
+  fadeDirection?: string
+  imgStyle?: {}
+  overlay?: {
+    start: { color: string; stop: string }
+    end: { color: string; stop: string }
+  }
+  variants?: {}
+}
+
+const overlayOptions = {
+  start: {
+    color: "transparent",
+    stop: "0%",
+  },
+  end: {
+    color: "currentColor",
+    stop: "75%",
+  },
+}
+
+// const fixedStyle = {
+//   backgroundAttachment: "fixed",
+//   backgroundSize: "cover",
+// };
+
+// const defaultStyle = {
+//   backgroundSize: "cover",
+//   backgroundPosition: "center",
+// };
+
+const defaultVariants = {
+  enter: {
+    opacity: 0,
+    scale: 1.2,
+    y: 30,
+    x: 0,
+    filter: "blur(20px)",
+    transition: { duration: 0.4 },
+  },
+  center: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    x: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.4 },
+  },
+  exit: {
+    opacity: 0,
+    scale: 1.04,
+    y: -30,
+    x: 0,
+    filter: "blur(20px)",
+    transition: { duration: 0.4 },
+  },
+  hover: {
+    opacity: 1,
+    scale: 1.04,
+    y: 0,
+    x: 0,
+    transition: { duration: 0.2 },
+  },
+}
+
+export default function Fader({
+  image,
+  fade = true,
+  fadeColor = "currentColor",
+  fadeDirection = FADE_DIRECTION,
+  //imgStyle = "fixed",
+  overlay = overlayOptions,
+  variants = defaultVariants,
+  ...props
+}: FaderProps) {
+  return (
+    <Box
+      as={motion.div}
+      overflow="hidden"
+      position="relative"
+      width="100%"
+      height="100%"
+      {...props}
+    >
+      {/* Fade overlay */}
+      {fade ? (
+        <Box
+          as={motion.div}
+          position={"absolute"}
+          color={fadeColor}
+          width="100%"
+          height="100%"
+          top="0"
+          bottom="0"
+          left="0"
+          zIndex={3}
+          backgroundImage={`linear-gradient(${fadeDirection}, ${overlay.start.color}  ${overlay.start.stop}, ${overlay.end.color} ${overlay.end.stop})`}
+        />
+      ) : null}
+
+      {/* Main image */}
+
+      {image && (
+        <AnimatePresence mode="wait">
+          <Box
+            as={motion.div}
+            variants={variants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{ duration: 2 }}
+            width="100%"
+            height="100%"
+            position="absolute"
+            maxWidth="100%"
+            top="0"
+            left="0"
+            zIndex={1}
+          >
+            <Image
+              src={image as string}
+              priority={true}
+              loading="eager"
+              fill
+              alt="image"
+              sizes="100%"
+              style={{ objectFit: "cover" }}
+            />
+          </Box>
+        </AnimatePresence>
+      )}
+    </Box>
+  )
+}

package/src/blocks/FamilyDrawer/README.md

@@ -0,0 +1,116 @@
+# FamilyDrawer Component
+
+A sophisticated drawer component with multiple animated views, perfect for wallet management interfaces or any multi-step configuration flow.
+
+## Features
+
+- **Multi-view Navigation**: Seamlessly switch between different views (default, key, phrase, remove)
+- **Smooth Animations**: Height-based animations with blur effects during transitions
+- **Design System Integration**: Built using the existing Drawer component and design system elements
+- **Customizable**: Custom trigger buttons, widths, and callbacks
+- **Accessible**: Proper ARIA labels and keyboard navigation support
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { FamilyDrawer } from "@/design-system/blocks";
+
+function MyComponent() {
+  return (
+    <FamilyDrawer id="wallet-settings" />
+  );
+}
+```
+
+### Advanced Usage
+
+```tsx
+import { FamilyDrawer } from "@/design-system/blocks";
+import { Button, Text } from "@/design-system/elements";
+
+function MyComponent() {
+  const handleViewChange = (view) => {
+    console.log("Current view:", view);
+  };
+
+  return (
+    <FamilyDrawer
+      id="wallet-settings"
+      initialView="default"
+      width="400px"
+      onViewChange={handleViewChange}
+      trigger={
+        <Button variant="primary" $size="medium">
+          <Text>Custom Trigger</Text>
+        </Button>
+      }
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | **Required** | Unique identifier for the drawer |
+| `initialView` | `FamilyDrawerView` | `"default"` | Initial view to display |
+| `trigger` | `React.ReactNode` | Default settings button | Custom trigger element |
+| `onViewChange` | `(view: FamilyDrawerView) => void` | `undefined` | Callback when view changes |
+| `width` | `string \| number \| object` | `"360px"` | Drawer width (responsive object supported) |
+
+## Views
+
+The component includes four built-in views:
+
+1. **Default View** (`"default"`): Main options menu with navigation buttons
+2. **Key View** (`"key"`): Private key management with security warnings
+3. **Phrase View** (`"phrase"`): Recovery phrase management with security warnings  
+4. **Remove View** (`"remove"`): Wallet removal confirmation with warnings
+
+## Customization
+
+### Custom Trigger
+
+```tsx
+<FamilyDrawer
+  id="custom-drawer"
+  trigger={
+    <Button variant="ghost" $size="small">
+      <IconGear size="1rem" />
+      Options
+    </Button>
+  }
+/>
+```
+
+### Responsive Width
+
+```tsx
+<FamilyDrawer
+  id="responsive-drawer"
+  width={{ _: "100%", md: "400px" }}
+/>
+```
+
+## Animation Details
+
+- **Height Animation**: Smooth height transitions using Framer Motion
+- **View Transitions**: Blur and scale effects during view changes
+- **Timing**: 270ms duration with custom easing curves
+- **Performance**: Uses `react-use-measure` for efficient dimension tracking
+
+## Dependencies
+
+- `motion/react` (Framer Motion)
+- `react-use-measure`
+- Design system components (Box, Button, Text, Drawer)
+- Icon components from the project's icon library
+
+## Related Components
+
+- [Drawer](../Drawer/README.md) - Base drawer component
+- [Modal](../Modal/README.md) - Alternative overlay component
+- [Popover](../Popover/README.md) - Lightweight overlay component

package/src/blocks/FamilyDrawer/example.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React from "react";
+import { Box, Text, Button } from "@/design-system/elements";
+import { Container } from "@/design-system/blocks";
+import FamilyDrawer from "./index";
+
+/**
+ * Example usage of the FamilyDrawer component
+ * 
+ * This demonstrates how to use the FamilyDrawer with:
+ * - Default trigger button
+ * - Custom trigger button
+ * - View change callback
+ * - Custom width
+ */
+export const FamilyDrawerExample: React.FC = () => {
+  const handleViewChange = (view: string) => {
+    console.log("View changed to:", view);
+  };
+
+  return (
+    <Container maxWidth="800px" p="large">
+      <Box display="flex" flexDirection="column" gap="large">
+        <Box>
+          <Text as="h1" fontSize="xxlarge" fontWeight="bold" mb="medium">
+            FamilyDrawer Examples
+          </Text>
+          <Text fontSize="medium" color="secondary" lineHeight="relaxed">
+            Interactive drawer component with multiple views for wallet management.
+          </Text>
+        </Box>
+
+        <Box
+          display="flex"
+          flexDirection="column"
+          gap="large"
+          p="large"
+          skin="card"
+          shape="rounded"
+        >
+          <Box>
+            <Text as="h2" fontSize="large" fontWeight="semibold" mb="small">
+              Default Usage
+            </Text>
+            <Text fontSize="small" color="secondary" mb="medium">
+              Basic FamilyDrawer with default settings and trigger button.
+            </Text>
+            <FamilyDrawer id="example-1" />
+          </Box>
+
+          <Box>
+            <Text as="h2" fontSize="large" fontWeight="semibold" mb="small">
+              Custom Trigger
+            </Text>
+            <Text fontSize="small" color="secondary" mb="medium">
+              FamilyDrawer with a custom trigger button.
+            </Text>
+            <FamilyDrawer
+              id="example-2"
+              trigger={
+                <Button variant="primary" $size="small">
+                  <Text fontSize="small" fontWeight="semibold">
+                    Wallet Options
+                  </Text>
+                </Button>
+              }
+            />
+          </Box>
+
+          <Box>
+            <Text as="h2" fontSize="large" fontWeight="semibold" mb="small">
+              With Callbacks
+            </Text>
+            <Text fontSize="small" color="secondary" mb="medium">
+              FamilyDrawer with view change callback and custom width.
+            </Text>
+            <FamilyDrawer
+              id="example-3"
+              onViewChange={handleViewChange}
+              width="400px"
+              initialView="default"
+            />
+          </Box>
+        </Box>
+
+        <Box
+          p="medium"
+          skin="translucent"
+          shape="rounded"
+          borderLeft="4px solid"
+          borderColor="primary"
+        >
+          <Text fontSize="small" fontWeight="semibold" color="primary" mb="xsmall">
+            Usage Notes
+          </Text>
+          <Text fontSize="small" color="secondary" lineHeight="relaxed">
+            Each FamilyDrawer instance requires a unique <code>id</code> prop for proper state management.
+            The drawer uses the existing Drawer component from the design system with smooth animations
+            between different views.
+          </Text>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default FamilyDrawerExample;

package/src/blocks/FamilyDrawer/index.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { Box, Button, Text } from "@/design-system/elements";
+import { Drawer, DrawerButton } from "@/design-system/blocks/Drawer";
+import { AnimatePresence, motion } from "motion/react";
+import { IconGear } from "@/design-system/icons";
+import useMeasure from "react-use-measure";
+
+import { DefaultView } from "./views/DefaultView";
+import { KeyView } from "./views/KeyView";
+import { PhraseView } from "./views/PhraseView";
+import { RemoveView } from "./views/RemoveView";
+
+export type FamilyDrawerView = "default" | "key" | "phrase" | "remove";
+
+interface FamilyDrawerProps {
+  /** Unique identifier for the drawer */
+  id: string;
+  /** Initial view to display */
+  initialView?: FamilyDrawerView;
+  /** Custom trigger button */
+  trigger?: React.ReactNode;
+  /** Callback when view changes */
+  onViewChange?: (view: FamilyDrawerView) => void;
+  /** Custom drawer width */
+  width?: string | number | object;
+}
+
+export const FamilyDrawer: React.FC<FamilyDrawerProps> = ({
+  id,
+  initialView = "default",
+  trigger,
+  onViewChange,
+  width = "360px",
+}) => {
+  const [view, setView] = useState<FamilyDrawerView>(initialView);
+  const [elementRef, bounds] = useMeasure();
+
+  const handleViewChange = (newView: FamilyDrawerView) => {
+    setView(newView);
+    onViewChange?.(newView);
+  };
+
+  const content = useMemo(() => {
+    const commonProps = { setView: handleViewChange };
+    
+    switch (view) {
+      case "default":
+        return <DefaultView {...commonProps} />;
+      case "phrase":
+        return <PhraseView {...commonProps} />;
+      case "key":
+        return <KeyView {...commonProps} />;
+      case "remove":
+        return <RemoveView {...commonProps} />;
+      default:
+        return <DefaultView {...commonProps} />;
+    }
+  }, [view]);
+
+  const defaultTrigger = (
+    <Button
+      variant="ghost"
+      $size="medium"
+      display="flex"
+      alignItems="center"
+      gap="small"
+      shape="rounded"
+      skin="translucent"
+    >
+      <Text fontSize="medium" fontWeight="semibold">
+        Settings
+      </Text>
+      <Box as={IconGear} size="1.25rem" />
+    </Button>
+  );
+
+  return (
+    <>
+      <DrawerButton drawerId={id} label="">
+        {trigger || defaultTrigger}
+      </DrawerButton>
+      
+      <Drawer id={id} title="Options" width={width}>
+        <Box
+          as={motion.div}
+          animate={{ height: bounds.height || "auto" }}
+          transition={{
+            type: "tween",
+            ease: [0.26, 1, 0.5, 1],
+            duration: 0.27,
+          }}
+          overflow="hidden"
+        >
+          <Box ref={elementRef} p="medium">
+            <AnimatePresence mode="wait" initial={false}>
+              <Box
+                as={motion.div}
+                key={view}
+                initial={{ opacity: 0, scale: 0.96, filter: "blur(2px)" }}
+                animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                exit={{ opacity: 0, scale: 0.96, filter: "blur(2px)" }}
+                transition={{
+                  duration: 0.27,
+                  ease: [0.26, 0.08, 0.25, 1],
+                }}
+              >
+                {content}
+              </Box>
+            </AnimatePresence>
+          </Box>
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+
+export default FamilyDrawer;

package/src/blocks/FamilyDrawer/views/DefaultView.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Text } from "@/design-system/elements";
+import { IconLock, IconOWarning, IconText } from "@/design-system/icons";
+import { FamilyDrawerView } from "../index";
+
+interface DefaultViewProps {
+  setView: (view: FamilyDrawerView) => void;
+}
+
+export const DefaultView: React.FC<DefaultViewProps> = ({ setView }) => {
+  return (
+    <Box>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        borderBottom="1px solid"
+        borderColor="base"
+        pb="medium"
+        mb="medium"
+      >
+        <Text fontSize="large" fontWeight="semibold" color="primary">
+          Options
+        </Text>
+      </Box>
+
+      <Box display="flex" flexDirection="column" gap="small">
+        <OptionButton
+          title="View Private Key"
+          icon={<Box as={IconLock} size="1.25rem" />}
+          onClick={() => setView("key")}
+        />
+        <OptionButton
+          title="View Recovery Phrase"
+          icon={<Box as={IconText} size="1.25rem" />}
+          onClick={() => setView("phrase")}
+        />
+        <OptionButton
+          title="Remove Wallet"
+          icon={<Box as={IconOWarning} size="1.25rem" />}
+          onClick={() => setView("remove")}
+          isDestructive
+        />
+      </Box>
+    </Box>
+  );
+};
+
+interface OptionButtonProps {
+  title: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  isDestructive?: boolean;
+}
+
+const OptionButton: React.FC<OptionButtonProps> = ({
+  title,
+  icon,
+  onClick,
+  isDestructive = false,
+}) => {
+  return (
+    <Button
+      variant="ghost"
+      $size="large"
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      justifyContent="flex-start"
+      gap="medium"
+      p="medium"
+      shape="rounded"
+      skin={isDestructive ? "danger" : "translucent"}
+      color={isDestructive ? "danger" : "secondary"}
+      hover={isDestructive ? "danger" : "subtle"}
+      interactive={{
+        hover: {
+          color: isDestructive ? "danger" : "primary",
+        }
+      }}
+      width="100%"
+    >
+      <Box color={isDestructive ? "danger" : "secondary"}>
+        {icon}
+      </Box>
+      <Text fontSize="medium" fontWeight="medium">
+        {title}
+      </Text>
+    </Button>
+  );
+};