@reactberry/system 2.0.0-beta → 2.0.0-beta.1

package/README.md

@@ -16,7 +16,7 @@ Install `@reactberry/system` together with its peer dependencies in your consumi
 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.
+If you want the exact current prerelease, install `@reactberry/system@2.0.0-beta.1` instead.
 
 - `next`
 - `react`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactberry/system",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "Reusable Next.js UI library package for Reactberry projects.",
   "type": "module",
   "types": "./src/index.ts",
@@ -62,6 +62,7 @@
     "./elements": "./src/elements/index.ts",
     "./icons": "./src/icons/index.tsx",
     "./charts": "./src/charts/index.ts",
+    "./types": "./src/types.ts",
     "./package.json": "./package.json"
   },
   "keywords": [

package/src/blocks/Accordion/index.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { AnimatePresence, motion } from "motion/react";
 import React, { useState } from "react";
-import { useLocalStorage } from "@/design-system/hooks/use-local-storage";
+import { useLocalStorage } from "../../hooks/use-local-storage";
 
-import { IconArrowSmDown } from "@/design-system/icons";
+import { IconArrowSmDown } from "../../icons";
 import Group from "../Group";
 
 interface AccordionItem {

package/src/blocks/AnimatedCarousel/index.tsx

@@ -1,7 +1,7 @@
 // carousel.tsx
 "use client";
 
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import {
   AnimatePresence,
   MotionConfig,
@@ -10,7 +10,7 @@ import {
   useSpring,
 } from "motion/react";
 import { useEffect, useState } from "react";
-import type { ImageType } from "@/design-system/types";
+import type { ImageType } from "../../types";
 import { ControlLeft, ControlRight } from "../Controls/Control";
 
 const COLLAPSED_ASPECT_RATIO = 0.5;

package/src/blocks/AppleGlow/index.tsx

@@ -2,8 +2,8 @@
 
 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"
+import Box, { BoxProps } from "../../elements/box"
+import { useReducedMotion } from "../../hooks/useReducedMotion"
 
 // Default Apple Intelligence colors
 const DEFAULT_COLORS = [

package/src/blocks/Avatar/index.tsx

@@ -1,7 +1,7 @@
 "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 Box, { BoxProps } from "../../elements/box";
+import Text from "../../elements/text";
+import { pickColor } from "../../utils/pickColor";
 import Image from "next/image";
 
 interface AvatarProps extends BoxProps {

package/src/blocks/Await/index.tsx

@@ -14,7 +14,7 @@ export async function Await<T>({
 
 // Example usage
 // // src/app/stocks/[stockId]/page.tsx
-// import { Await } from "@/design-system/blocks";
+// import { Await } from "..";
 
 // export default async function Stock({
 //   params,

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

@@ -7,8 +7,8 @@ import {
   useMotionValue,
   useSpring,
 } from "motion/react";
-import Box, { BoxProps } from "@/design-system/elements/box";
-import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+import Box, { BoxProps } from "../../../elements/box";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
 
 interface AnimatedCardProps extends Omit<BoxProps, "ref" | "children"> {
   children: React.ReactNode;

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

@@ -7,10 +7,10 @@ import {
   useMotionValue,
   useSpring,
 } from "motion/react";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../../elements/box";
 import styled from "styled-components";
-import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
-import { useTouchDevice } from "@/design-system/hooks/useTouchDevice";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
+import { useTouchDevice } from "../../../hooks/useTouchDevice";
 
 interface FluorescentCardProps extends Omit<BoxProps, "ref" | "children"> {
   children: React.ReactNode;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Button, Text } from "@/design-system/elements";
+import { Box, Button, Text } from "../../../elements";
 import { AnimatePresence, HTMLMotionProps, motion } from "motion/react";
 import Image from "next/image";
 import { useState } from "react";

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

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { AnimatePresence, motion } from "motion/react";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../../elements";
 import Image from "next/image";
 
 interface TickerCardProps {

package/src/blocks/Carousel/index.tsx

@@ -4,7 +4,7 @@ import React, { useRef, useState } from "react";
 import styled from "styled-components";
 import { AnimatePresence, useScroll, useMotionValueEvent } from "motion/react";
 import { animate } from "motion";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { ControlLeft, ControlRight } from "../Controls/Control";
 import Group from "../Group";
 

package/src/blocks/Checkbox/index.tsx

@@ -2,9 +2,9 @@
 
 import React from "react"
 import { motion } from "motion/react"
-import { Box } from "@/design-system/elements"
-import Group from "@/design-system/blocks/Group"
-import { IconDotsAnim } from "@/design-system/icons"
+import { Box } from "../../elements"
+import Group from "../Group"
+import { IconDotsAnim } from "../../icons"
 
 export interface CheckboxProps {
   /** Whether the checkbox is checked */

package/src/blocks/Collection/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 import { ThemeContext } from "styled-components";
 import { useContext } from "react";
 

package/src/blocks/Container/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 import { ThemeContext } from "styled-components";
 
 import React, { useContext } from "react";

package/src/blocks/Controls/Control.tsx

@@ -1,9 +1,9 @@
 import { motion } from "motion/react";
 
-import Box, { BoxProps } from "@/design-system/elements/box";
-import { IconArrowLeft, IconArrowRight } from "@/design-system/icons";
-// import { IconDownloadData } from "@/design-system/icons";
-// import { IconLaunch } from "@/design-system/icons";
+import Box, { BoxProps } from "../../elements/box";
+import { IconArrowLeft, IconArrowRight } from "../../icons";
+// import { IconDownloadData } from "../../icons";
+// import { IconLaunch } from "../../icons";
 
 interface ControlProps extends BoxProps {
   children: React.ReactNode;

package/src/blocks/CyclingNumber/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { motion, MotionConfig, useInView } from "motion/react";
 import NumberFlow, { useCanAnimate, Format } from "@number-flow/react";
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 import { useEffect, useState, useRef } from "react";
 
 const MotionNumberFlow = motion.create(NumberFlow);

package/src/blocks/DisplaySet/index.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 export default function DisplaySet({
   label,
   content,

package/src/blocks/Divider/index.tsx

@@ -1,4 +1,4 @@
-import Box from "@/design-system/elements/box";
+import Box from "../../elements/box";
 
 export default function Divider(props: any) {
   return (

package/src/blocks/Draggable/index.tsx

@@ -1,10 +1,10 @@
 "use client";
 import React, { useRef, useEffect, useState } from "react";
 import { motion, useDragControls } from "motion/react";
-import { Box, Button, Text } from "@/design-system/elements";
-import { IconMove3 } from "@/design-system/icons";
-// import { IconCInfo } from "@/design-system/icons";
-import { useLocalStorage } from "@/design-system/hooks/use-local-storage";
+import { Box, Button, Text } from "../../elements";
+import { IconMove3 } from "../../icons";
+// import { IconCInfo } from "../../icons";
+import { useLocalStorage } from "../../hooks/use-local-storage";
 
 // PanelHeader Component
 interface PanelHeaderProps {

package/src/blocks/Drawer/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 import React, { useRef } from "react";
 import { createPortal } from "react-dom";
-import { Box, Button, Text } from "@/design-system/elements";
+import { Box, Button, Text } from "../../elements";
 import { AnimatePresence, motion } from "motion/react";
-import { IconEAdd, IconERemove } from "@/design-system/icons";
-import { useSidebar } from "@/design-system/hooks/use-sidebar";
-import { useOverlay } from "@/design-system/hooks/useOverlay";
-import { Backdrop, OverscrollGuard } from "@/design-system/blocks/Overlay";
+import { IconEAdd, IconERemove } from "../../icons";
+import { useSidebar } from "../../hooks/use-sidebar";
+import { useOverlay } from "../../hooks/useOverlay";
+import { Backdrop, OverscrollGuard } from "../Overlay";
 
 interface DrawerProps {
   children: React.ReactNode;

package/src/blocks/DynamicIsland/DynamicIsland.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { motion } from "motion/react";
 import { type ReactNode, useState } from "react";
 

package/src/blocks/Fader/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { motion, AnimatePresence } from "motion/react"
-import Box, { BoxProps } from "@/design-system/elements/box"
+import Box, { BoxProps } from "../../elements/box"
 
 import Image from "next/image"
 

package/src/blocks/FamilyDrawer/README.md

@@ -15,7 +15,7 @@ A sophisticated drawer component with multiple animated views, perfect for walle
 ### Basic Usage
 
 ```tsx
-import { FamilyDrawer } from "@/design-system/blocks";
+import { FamilyDrawer } from "@reactberry/system/blocks";
 
 function MyComponent() {
   return (
@@ -27,8 +27,8 @@ function MyComponent() {
 ### Advanced Usage
 
 ```tsx
-import { FamilyDrawer } from "@/design-system/blocks";
-import { Button, Text } from "@/design-system/elements";
+import { FamilyDrawer } from "@reactberry/system/blocks";
+import { Button, Text } from "@reactberry/system/elements";
 
 function MyComponent() {
   const handleViewChange = (view) => {

package/src/blocks/FamilyDrawer/example.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import { Box, Text, Button } from "@/design-system/elements";
-import { Container } from "@/design-system/blocks";
+import { Box, Text, Button } from "../../elements";
+import { Container } from "..";
 import FamilyDrawer from "./index";
 
 /**

package/src/blocks/FamilyDrawer/index.tsx

@@ -1,10 +1,10 @@
 "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 { Box, Button, Text } from "../../elements";
+import { Drawer, DrawerButton } from "../Drawer";
 import { AnimatePresence, motion } from "motion/react";
-import { IconGear } from "@/design-system/icons";
+import { IconGear } from "../../icons";
 import useMeasure from "react-use-measure";
 
 import { DefaultView } from "./views/DefaultView";

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

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import { Box, Button, Text } from "@/design-system/elements";
-import { IconLock, IconOWarning, IconText } from "@/design-system/icons";
+import { Box, Button, Text } from "../../../elements";
+import { IconLock, IconOWarning, IconText } from "../../../icons";
 import { FamilyDrawerView } from "../index";
 
 interface DefaultViewProps {

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

@@ -1,14 +1,14 @@
 "use client";
 
 import React from "react";
-import { Box, Button, Text } from "@/design-system/elements";
+import { Box, Button, Text } from "../../../elements";
 import {
   IconBan,
   IconCCheck,
   IconLock,
   IconOWarning,
   IconUserFocus,
-} from "@/design-system/icons";
+} from "../../../icons";
 import { FamilyDrawerView } from "../index";
 
 interface KeyViewProps {

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

@@ -1,14 +1,14 @@
 "use client";
 
 import React from "react";
-import { Box, Button, Text } from "@/design-system/elements";
+import { Box, Button, Text } from "../../../elements";
 import {
   IconBan,
   IconCCheck,
   IconOWarning,
   IconText,
   IconUserFocus,
-} from "@/design-system/icons";
+} from "../../../icons";
 import { FamilyDrawerView } from "../index";
 
 interface PhraseViewProps {

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

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import { Box, Button, Text } from "@/design-system/elements";
-import { IconOWarning } from "@/design-system/icons";
+import { Box, Button, Text } from "../../../elements";
+import { IconOWarning } from "../../../icons";
 import { FamilyDrawerView } from "../index";
 
 interface RemoveViewProps {

package/src/blocks/FieldSet/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Box, Text } from "@/design-system/elements";
-import Field, { FieldProps } from "@/design-system/elements/field";
+import { Box, Text } from "../../elements";
+import Field, { FieldProps } from "../../elements/field";
 import { TextareaHTMLAttributes, forwardRef } from "react";
 
 type CommonProps = {

package/src/blocks/Filesystem/index.tsx

@@ -2,13 +2,13 @@
 
 import React, { useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
-import { Box, Button, Text } from "@/design-system/elements"
+import { Box, Button, Text } from "../../elements"
 import {
   Icon24Folder,
   IconArrowSmRight,
   IconDocFolder,
   IconFile,
-} from "@/design-system/icons"
+} from "../../icons"
 
 export type FilesystemNode = {
   name: string

package/src/blocks/Gallery/Carousel/index.tsx

@@ -5,14 +5,14 @@ import { useState } from "react";
 import { variants } from "../utils/animationVariants";
 import downloadPhoto from "../utils/downloadPhoto";
 import { useSwipeable } from "react-swipeable";
-import Box from "@/design-system/elements/box";
+import Box from "../../../elements/box";
 import {
   IconArrowLeft,
   IconArrowRight,
   IconDownloadData,
   IconLaunch,
-} from "@/design-system/icons";
-import { useKeypress } from "@/design-system/hooks/useKeypress";
+} from "../../../icons";
+import { useKeypress } from "../../../hooks/useKeypress";
 import { Control } from "../../Controls/Control";
 
 export default function Carousel({

package/src/blocks/Gallery/Modal/index.tsx

@@ -6,7 +6,7 @@ import {
   DialogBackdrop,
 } from "@headlessui/react";
 import { useRef, useState } from "react";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../../elements/box";
 import { useRouter } from "next/navigation";
 
 type ModalProps = DialogProps<any> &

package/src/blocks/Gallery/index.tsx

@@ -1,12 +1,12 @@
 "use client";
 import Image from "next/image";
-import Box from "@/design-system/elements/box";
+import Box from "../../elements/box";
 import { useState } from "react";
 import Modal from "./Modal";
 import Carousel from "./Carousel";
 import Collection from "../Collection";
 import { motion } from "motion/react";
-import type { ImageType } from "@/design-system/types";
+import type { ImageType } from "../../types";
 
 type GalleryProps = {
   images: ImageType[];

package/src/blocks/GradientMesh/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { MeshGradient } from "@paper-design/shaders-react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import styled from "styled-components";
-import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
 
 interface GradientMeshProps {
   /** Animation intensity level */

package/src/blocks/Group/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import Box, { BoxProps } from "@/design-system/elements/box"
+import Box, { BoxProps } from "../../elements/box"
 import React from "react"
 import styled, { css } from "styled-components"
 

package/src/blocks/Heading/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Text, { TextProps } from "@/design-system/elements/text";
+import Text, { TextProps } from "../../elements/text";
 import { ThemeContext } from "styled-components";
 import React, { useContext } from "react";
 

package/src/blocks/HorizontalScroller/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import {
   animate,
   motion,

package/src/blocks/Icon/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { designSystemIcons, type DesignSystemIconName } from "@/design-system/icons";
-import { Box } from "@/design-system/elements";
+import { designSystemIcons, type DesignSystemIconName } from "../../icons";
+import { Box } from "../../elements";
 import { useMemo } from "react";
 
 interface IconComponentProps {

package/src/blocks/Indicator/index.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 
 type IndicatorProps = {
   [key: string]: any;

package/src/blocks/InlineEditor/index.tsx

@@ -1,6 +1,6 @@
 "use client"
-import { IconPencil } from "@/design-system/icons"
-import { Box, Text, Button, Field } from "@/design-system/elements"
+import { IconPencil } from "../../icons"
+import { Box, Text, Button, Field } from "../../elements"
 import React, { useState, useRef, useEffect } from "react"
 import Textarea from "react-textarea-autosize"
 import Group from "../Group"
@@ -10,7 +10,7 @@ import {
   type MaskPresetType,
 } from "../MaskedField"
 
-import { IconDCheck, IconERemove } from "@/design-system/icons"
+import { IconDCheck, IconERemove } from "../../icons"
 
 type InlineEditorProps = {
   id: string | number

package/src/blocks/List/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import React, { useRef, useEffect, useState, useCallback } from "react";
 
 /**

package/src/blocks/Main/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 import { ThemeContext } from "styled-components";
 import React, { useContext } from "react";
 

package/src/blocks/Marquee/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import styled, { css, keyframes } from "styled-components";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 
 type MarqueeProps = {
   children: React.ReactNode;

package/src/blocks/MaskedField/index.tsx

@@ -6,7 +6,7 @@ import {
   NumericFormatProps,
   PatternFormatProps,
 } from "react-number-format"
-import { Field } from "@/design-system/elements"
+import { Field } from "../../elements"
 
 // Preset configurations for common mask types
 export const maskPresets = {

package/src/blocks/Menu/MenuContent.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "motion/react";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import { useMenu } from "./MenuContext";
 
 interface MenuItem {

package/src/blocks/Menu/MenuItem.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from "react";
 import { motion } from "motion/react";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import { useMenu } from "./MenuContext";
 import Link from "next/link";
 import { ThemeContext } from "styled-components";

package/src/blocks/Menu/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { MenuProvider, useMenu } from "./MenuContext";
 import { MenuItem } from "./MenuItem";
 import { MenuContent } from "./MenuContent";

package/src/blocks/Modal/index.tsx

@@ -17,10 +17,10 @@
  */
 
 import { AnimatePresence, motion } from "motion/react";
-import { Box } from "@/design-system/elements";
-import { useKeypress } from "@/design-system/hooks/useKeypress";
-import { useOverlay } from "@/design-system/hooks/useOverlay";
-import { Backdrop } from "@/design-system/blocks/Overlay";
+import { Box } from "../../elements";
+import { useKeypress } from "../../hooks/useKeypress";
+import { useOverlay } from "../../hooks/useOverlay";
+import { Backdrop } from "../Overlay";
 import { usePathname, useRouter } from "next/navigation";
 import {
   createContext,
@@ -34,7 +34,7 @@ import {
 import { createPortal } from "react-dom";
 
 // Re-export for consumers that import these directly from Modal
-export { pushThemeColor, popThemeColor } from "@/design-system/utils/overlayTheme";
+export { pushThemeColor, popThemeColor } from "../../utils/overlayTheme";
 
 /**
  * Context that exposes the Modal's close function to children.

package/src/blocks/MorphingPopover/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { createPortal } from "react-dom";
-import { useClickOutside } from "@/design-system/hooks/useClickOutside";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import {
   AnimatePresence,
   MotionConfig,

package/src/blocks/Overlay/Backdrop.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "motion/react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 
 interface BackdropProps {
   onClick?: () => void;

package/src/blocks/Overlay/OverscrollGuard.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "motion/react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 
 interface OverscrollGuardProps {
   zIndex?: number | string;

package/src/blocks/Parallax/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { motion, useInView, useScroll } from "motion/react";
 import Image from "next/image";
 import React, { useEffect, useRef, useState } from "react";

package/src/blocks/ParallaxSection/index.tsx

@@ -2,7 +2,7 @@
 import { motion, useScroll, useTransform } from "motion/react";
 import React, { useRef } from "react";
 import Image from "next/image";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 
 interface ParallaxSectionProps {
   image: string;

package/src/blocks/Placeholder/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import Icon from "../Icon";
 
 interface PlaceholderProps {

package/src/blocks/Popover/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Button } from "@/design-system/elements";
+import { Box, Button } from "../../elements";
 import {
   Popover as HeadlessPopover,
   PopoverPanel,

package/src/blocks/Progress/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { motion } from "motion/react";
 import React from "react";
 

package/src/blocks/ProgressiveBlur/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion, HTMLMotionProps } from "motion/react";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 
 export const GRADIENT_ANGLES = {
   top: 0,

package/src/blocks/ScrollContainer/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 import React, { useRef, useEffect } from "react";
 
 type ScrollContainerProps = BoxProps & {

package/src/blocks/ShinyText/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 import { motion, useAnimation } from "motion/react";
 import { useEffect } from "react";
 

package/src/blocks/Skeleton/index.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 import { motion } from "motion/react";
-import Collection from "@/design-system/blocks/Collection";
-import Placeholder from "@/design-system/blocks/Placeholder";
+import Collection from "../Collection";
+import Placeholder from "../Placeholder";
 
 interface SkeletonProps {
   count?: number; // Number of placeholder items to show

package/src/blocks/Slider/SliderControls.tsx

@@ -1,5 +1,5 @@
-import { Box } from "@/design-system/elements";
-import { IconArrowLeft, IconArrowRight } from "@/design-system/icons";
+import { Box } from "../../elements";
+import { IconArrowLeft, IconArrowRight } from "../../icons";
 import { AnimatePresence, motion } from "motion/react";
 import { Control } from "../Controls/Control";
 

package/src/blocks/Slider/index.tsx

@@ -2,7 +2,7 @@
 import { motion, type PanInfo } from "motion/react";
 import { ReactNode, type WheelEvent } from "react";
 import useSlider, { ResponsiveConfig, SliderConfig } from "./useSlider";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import SliderControls from "./SliderControls";
 
 interface Props {

package/src/blocks/Slideshow/index.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { Box } from "@/design-system/elements";
-import type { ImageType } from "@/design-system/types";
+import { Box } from "../../elements";
+import type { ImageType } from "../../types";
 import { motion, AnimatePresence } from "motion/react";
 import { useState, useEffect } from "react";
 

package/src/blocks/Spotlight/index.tsx

@@ -6,7 +6,7 @@ import {
   useMotionValue,
   useSpring,
 } from "motion/react";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 
 interface SpotlightProps extends Omit<BoxProps, "children"> {
   children: React.ReactNode;

package/src/blocks/Steps/StepIndicator.tsx

@@ -2,11 +2,11 @@
 
 import React from "react";
 import { motion } from "motion/react";
-import { Box, Text } from "@/design-system/elements";
-import Tooltip from "@/design-system/blocks/Tooltip";
+import { Box, Text } from "../../elements";
+import Tooltip from "../Tooltip";
 import { useHover } from "./hooks";
 import { StepThemeConfig } from "./types";
-import { IconDCheck } from "@/design-system/icons";
+import { IconDCheck } from "../../icons";
 
 interface StepIndicatorProps {
   /** Whether this step is currently active */

package/src/blocks/Steps/StepProgress.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import StepIndicator from "./StepIndicator";
 import { BaseStepProps, StepThemeConfig, StepVariant } from "./types";
 

package/src/blocks/Steps/Steps.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import StepProgress from "./StepProgress";
 import { BaseStepProps } from "./types";
 import { useStepNavigation } from "./hooks";

package/src/blocks/Steps/StepsTracker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 
 import Tooltip from "../Tooltip";
 import { motion } from "motion/react";

package/src/blocks/StickySectionStack/index.tsx

@@ -3,8 +3,8 @@
 import { Children, type ReactNode, useMemo, useRef } from "react";
 import { motion, type MotionValue, useScroll, useTransform } from "motion/react";
 
-import { Box, type BoxProps } from "@/design-system/elements";
-import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+import { Box, type BoxProps } from "../../elements";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
 
 export interface StickySectionStackProps extends BoxProps {
   children: ReactNode;

package/src/blocks/Switch/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
 import { motion } from "motion/react";
 

package/src/blocks/SystemNotice/index.tsx

@@ -1,9 +1,9 @@
 "use client";
-import Box, { BoxProps } from "@/design-system/elements/box";
-import Text from "@/design-system/elements/text";
+import Box, { BoxProps } from "../../elements/box";
+import Text from "../../elements/text";
 import Divider from "../Divider";
 import React from "react";
-import { IconDotsAnim } from "@/design-system/icons";
+import { IconDotsAnim } from "../../icons";
 
 interface SystemNoticeProps extends BoxProps {
   message: React.ReactNode;

package/src/blocks/Table/README.md

@@ -38,7 +38,7 @@ import {
   SortableTableHeader,
   TablePagination,
   useTableControls
-} from '@/design-system/blocks';
+} from '@reactberry/system/blocks';
 ```
 
 ## Basic Usage

package/src/blocks/Tag/index.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@/design-system/elements";
+import { Text } from "../../elements";
 
 type TagProps = {
   [key: string]: any;

package/src/blocks/TextBreak/index.tsx

@@ -1,6 +1,6 @@
 "use client"
-import { Box, Text } from "@/design-system/elements"
-import { IconDotsAnim } from "@/design-system/icons"
+import { Box, Text } from "../../elements"
+import { IconDotsAnim } from "../../icons"
 
 type TextBreakProps = {
   message?: string

package/src/blocks/TextReveal/index.tsx

@@ -4,8 +4,8 @@ import { useMemo, useRef } from "react";
 import { motion, type MotionValue, useScroll, useTransform } from "motion/react";
 import styled from "styled-components";
 
-import { Text, type TextProps } from "@/design-system/elements";
-import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+import { Text, type TextProps } from "../../elements";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
 
 type ScrollOffset = NonNullable<Parameters<typeof useScroll>[0]>["offset"];
 

package/src/blocks/Thumbnail/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import Box, { BoxProps } from "@/design-system/elements/box";
+import Box, { BoxProps } from "../../elements/box";
 import Image from "next/image";
 
 interface ThumbnailProps extends Omit<BoxProps, "as"> {

package/src/blocks/Ticker/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { animate, motion, useMotionValue } from "motion/react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import useMeasure from "react-use-measure";
 
 interface TickerProps {

package/src/blocks/Toast/index.tsx

@@ -1,10 +1,10 @@
 "use client";
-import Box from "@/design-system/elements/box";
-import Text from "@/design-system/elements/text";
-import { BoxProps } from "@/design-system/elements/box";
+import Box from "../../elements/box";
+import Text from "../../elements/text";
+import { BoxProps } from "../../elements/box";
 import React from "react";
-import { IconERemove } from "@/design-system/icons";
-import { Button } from "@/design-system/elements";
+import { IconERemove } from "../../icons";
+import { Button } from "../../elements";
 
 interface ToastProps extends BoxProps {
   message: React.ReactNode;

package/src/blocks/Tooltip/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import { AnimatePresence, motion } from "motion/react";
 import React, { useEffect, useState } from "react";
 import { createPortal } from "react-dom";

package/src/blocks/Underlay/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import styled from "styled-components";
 import { useEffect, useRef } from "react";
 

package/src/blocks/Upload/UploadBtn.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Button, Box } from "@/design-system/elements";
+import { Button, Box } from "../../elements";
 import { UploadContainerProps } from "./types";
-import { IconDotsAnim, IconUpload } from "@/design-system/icons";
+import { IconDotsAnim, IconUpload } from "../../icons";
 
 function UploadBtn({
   children,

package/src/blocks/VideoMarquee/index.tsx

@@ -11,7 +11,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import useMeasure from "react-use-measure";
 
-import { Box, Text } from "@/design-system/elements";
+import { Box, Text } from "../../elements";
 import { ControlLeft, ControlRight } from "../Controls/Control";
 
 export interface VideoMarqueeItem {

package/src/blocks/index.ts

@@ -17,6 +17,7 @@ export { default as Switch } from "./Switch";
 export { default as Tooltip } from "./Tooltip";
 export { default as Popover } from "./Popover";
 export { default as MorphingPopover } from "./MorphingPopover";
+export { default as Modal, useModalClose, pushThemeColor, popThemeColor } from "./Modal";
 export { Menu, MenuItem, MenuContent } from "./Menu";
 export { default as Accordion } from "./Accordion";
 export { Drawer, DrawerButton } from "./Drawer";

package/src/blocks/pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Icon from "../Icon";
-import { Box, Button } from "@/design-system/elements";
+import { Box, Button } from "../../elements";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
 

package/src/blocks/pagination/PaginationList.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ReactNode } from "react";
-import { Box } from "@/design-system/elements";
+import { Box } from "../../elements";
 import { Pagination } from "./Pagination";
 
 interface PaginationListProps {

package/src/docs/README.md

@@ -53,10 +53,10 @@ docs/
 
 ```jsx
 // Core elements (fully documented)
-import { Box, Text, Button, Field } from '@/design-system/elements';
+import { Box, Text, Button, Field } from '@reactberry/system/elements';
 
 // Composed blocks (documentation in progress)
-import { Avatar, Container, Heading } from '@/design-system/blocks';
+import { Avatar, Container, Heading } from '@reactberry/system/blocks';
 ```
 
 ### 2. Basic Usage
@@ -82,14 +82,13 @@ function WelcomeCard() {
 ### 3. Theme Integration
 
 ```jsx
-import { ThemeProvider } from '@/lib/theme-provider';
-import { theme } from '@/design-system/themes';
+import { DesignSystemProvider } from '@reactberry/system/providers';
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
+    <DesignSystemProvider>
       <WelcomeCard />
-    </ThemeProvider>
+    </DesignSystemProvider>
   );
 }
 ```

package/src/hooks/useOverlay.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { pushThemeColor, popThemeColor } from "@/design-system/utils/overlayTheme";
-import { useStandaloneMode } from "@/design-system/hooks/useStandaloneMode";
+import { pushThemeColor, popThemeColor } from "../utils/overlayTheme";
+import { useStandaloneMode } from "./useStandaloneMode";
 
 /**
  * Shared behavioral hook for overlay components (Modal, Drawer, etc.).

package/src/providers/DesignSystemProvider.tsx

@@ -3,9 +3,9 @@
 import { PropsWithChildren, useEffect, useMemo } from "react";
 import { ThemeProvider } from "styled-components";
 
-import GlobalStyles from "@/themes/default/global";
-import { themes, type ThemeName } from "@/themes";
-import { setCurrentTheme } from "@/themes/default/utils";
+import GlobalStyles from "../themes/default/global";
+import { themes, type ThemeName } from "../themes";
+import { setCurrentTheme } from "../themes/default/utils";
 import StyledComponentsRegistry from "./StyledComponentsRegistry";
 
 interface DesignSystemProviderProps extends PropsWithChildren {

package/src/themes/default/assets/badge-avatar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { motion } from "motion/react"
-import Box, { BoxProps } from "@/design-system/elements/box"
+import Box, { BoxProps } from "../../../elements/box"
 
 type BadgeAvatarProps = BoxProps & {
   /** Flip the smile upside down to show a sad face. */

package/src/themes/default/assets/logo.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, BoxProps } from "@/design-system/elements";
+import { Box, BoxProps } from "../../../elements";
 
 type LogoProps = BoxProps & {};