Make sure stories import components from root.

src/atoms/alert-dialog.tsx

@@ -3,8 +3,8 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from "src/atoms/button";
 import { cn } from "src/utils";
+import { buttonVariants } from "./button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 

src/atoms/calendar.tsx

@@ -4,8 +4,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { buttonVariants } from "src/atoms/button";
 import { cn } from "src/utils";
+import { buttonVariants } from "./button";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

src/atoms/command.tsx

@@ -5,8 +5,8 @@ import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "src/atoms/dialog";
 import { cn } from "src/utils";
+import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

src/atoms/form.tsx

@@ -10,8 +10,8 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-import { Label } from "src/atoms/label";
 import { cn } from "src/utils";
+import { Label } from "./label";
 
 const Form = FormProvider;
 

src/atoms/toaster.tsx

@@ -7,8 +7,8 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "src/atoms/toast";
-import { useToast } from "src/atoms/use-toast";
+} from "./toast";
+import { useToast } from "./use-toast";
 
 export function Toaster() {
   const { toasts } = useToast();

src/atoms/toggle-group.tsx

@@ -4,8 +4,8 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { toggleVariants } from "src/atoms/toggle";
 import { cn } from "src/utils";
+import { toggleVariants } from "./toggle";
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

src/atoms/use-toast.ts

@@ -1,7 +1,7 @@
 // Inspired by react-hot-toast library
 import * as React from "react";
 
-import type { ToastActionElement, ToastProps } from "src/atoms/toast";
+import type { ToastActionElement, ToastProps } from "./toast";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;

src/index.ts

@@ -1,3 +1,43 @@
+export * from "./atoms/accordion";
+export * from "./atoms/alert";
+export * from "./atoms/alert-dialog";
+export * from "./atoms/aspect-ratio";
+export * from "./atoms/avatar";
+export * from "./atoms/badge";
+export * from "./atoms/button";
+export * from "./atoms/calendar";
+export * from "./atoms/card";
+export * from "./atoms/checkbox";
+export * from "./atoms/collapsible";
+export * from "./atoms/command";
+export * from "./atoms/context-menu";
+export * from "./atoms/dialog";
+export * from "./atoms/dropdown-menu";
+export * from "./atoms/form";
+export * from "./atoms/hover-card";
 export * from "./atoms/input";
+export * from "./atoms/label";
+export * from "./atoms/menubar";
+export * from "./atoms/navigation-menu";
+export * from "./atoms/popover";
+export * from "./atoms/progress";
+export * from "./atoms/radio-group";
+export * from "./atoms/scroll-area";
+export * from "./atoms/select";
+export * from "./atoms/separator";
+export * from "./atoms/sheet";
+export * from "./atoms/skeleton";
+export * from "./atoms/slider";
+export * from "./atoms/switch";
+export * from "./atoms/table";
+export * from "./atoms/tabs";
+export * from "./atoms/textarea";
+export * from "./atoms/toast";
+export * from "./atoms/toaster";
+export * from "./atoms/toggle";
+export * from "./atoms/toggle-group";
+export * from "./atoms/tooltip";
+export * from "./molecules/slide-in";
+export * from "./molecules/theme-selector";
 export * from "./utils";
 import "./tokens.css";

src/molecules/theme-selector.tsx

@@ -1,7 +1,7 @@
 import { ComputerIcon, MoonIcon, SunIcon } from "lucide-react";
 import React from "react";
-import { ToggleGroup, ToggleGroupItem } from "src/atoms/toggle-group";
 import { theme as _theme } from "src/utils";
+import { ToggleGroup, ToggleGroupItem } from "../atoms/toggle-group";
 
 export const useTheme = () => {
   const [theme, _setTheme] = React.useState(_theme.get());

stories/atoms/accordion.stories.tsx

@@ -4,7 +4,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "src/atoms/accordion";
+} from "src";
 function AccordionDemo() {
   return (
     <Accordion type="single" collapsible className="w-full">

stories/atoms/alert-dialog.stories.tsx

@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "src/atoms/alert-dialog";
-import { Button } from "src/atoms/button";
+  Button,
+} from "src";
 function AlertDialogDemo() {
   return (
     <AlertDialog>

stories/atoms/alert.stories.tsx

@@ -2,7 +2,7 @@ import { RocketIcon } from "@radix-ui/react-icons";
 import { Meta } from "@storybook/react";
 
 import type { StoryObj } from "@storybook/react";
-import { Alert, AlertDescription, AlertTitle } from "src/atoms/alert";
+import { Alert, AlertDescription, AlertTitle } from "src";
 
 export function AlertDemo() {
   return (

stories/atoms/aspect-ratio.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { AspectRatio } from "src/atoms/aspect-ratio";
+import { AspectRatio } from "src";
 export function AspectRatioDemo() {
   return (
     <AspectRatio ratio={1 / 1} className="bg-muted">

stories/atoms/avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from "src/atoms/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "src";
 export function AvatarDemo() {
   return (
     <Avatar>

stories/atoms/badge.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "src/atoms/badge";
+import { Badge } from "src";
 
 export function BadgeDemo() {
   return (

stories/atoms/button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "src/atoms/button";
+import { Button } from "src";
 
 const meta: Meta<typeof Button> = {
   component: Button,

stories/atoms/calendar.stories.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { Calendar } from "src/atoms/calendar";
+import { Calendar } from "src";
 
 export function CalendarDemo() {
   const [dateRange, setDateRange] = React.useState<DateRange | undefined>({

stories/atoms/card.stories.tsx

@@ -1,22 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "src/atoms/button";
 import {
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "src/atoms/card";
-import { Input } from "src/atoms/input";
-import { Label } from "src/atoms/label";
-import {
+  Input,
+  Label,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "src/atoms/select";
+} from "src";
 
 const CardDemo = () => {
   return (

stories/atoms/checkbox.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { Checkbox } from "src/atoms/checkbox";
+import { Checkbox } from "src";
 
 const CheckboxDemo = () => {
   return (

stories/atoms/collapsible.stories.tsx

@@ -3,12 +3,12 @@
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 
-import { Button } from "src/atoms/button";
 import {
+  Button,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "src/atoms/collapsible";
+} from "src";
 
 export function CollapsibleDemo() {
   const [isOpen, setIsOpen] = React.useState(false);

stories/atoms/combobox.stories.tsx

@@ -5,15 +5,17 @@ import type { Meta } from "@storybook/react";
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 
-import { Button } from "src/atoms/button";
 import {
+  Button,
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "src/atoms/command";
-import { Popover, PopoverContent, PopoverTrigger } from "src/atoms/popover";
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "src";
 import { cn } from "src/utils";
 
 const frameworks = [

stories/atoms/command.stories.tsx

@@ -15,7 +15,7 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from "src/atoms/command";
+} from "src";
 
 import type { Meta, StoryObj } from "@storybook/react";
 

stories/atoms/context-menu.stories.tsx

@@ -13,7 +13,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from "src/atoms/context-menu";
+} from "src";
 
 const ContextMenuDemo = () => {
   return (

stories/atoms/date-picker.stories.tsx

@@ -3,9 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import * as React from "react";
-import { Button } from "src/atoms/button";
-import { Calendar } from "src/atoms/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "src/atoms/popover";
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "src";
 import { cn } from "src/utils";
 
 const DatePickerDemo = () => {

stories/atoms/dialog.stories.tsx

@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "src/atoms/dialog";
+} from "src";
 
 const DialogDemo = () => {
   return (

stories/atoms/dropdown-menu.stories.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "src/atoms/dropdown-menu";
+} from "src";
 
 import type { Meta, StoryObj } from "@storybook/react";
 

stories/atoms/form.stories.tsx

@@ -1,17 +1,17 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
-import { Button } from "src/atoms/button";
 import {
+  Button,
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "src/atoms/form";
-import { Input } from "src/atoms/input";
+  Input,
+} from "src";
 import { z } from "zod";
 
 import type { Meta, StoryObj } from "@storybook/react";

stories/atoms/hover-card.stories.tsx

@@ -1,11 +1,13 @@
 import { CalendarIcon } from "@radix-ui/react-icons";
-import { Avatar, AvatarFallback, AvatarImage } from "src/atoms/avatar";
-import { Button } from "src/atoms/button";
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "src/atoms/hover-card";
+} from "src";
 
 import type { Meta, StoryObj } from "@storybook/react";
 const Demo = () => {

stories/atoms/input.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "src/atoms/input";
+import { Input } from "src";
 
 const meta: Meta<typeof Input> = {
   component: Input,

stories/atoms/navigation-menu.stories.tsx

@@ -14,7 +14,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from "src/atoms/navigation-menu";
+} from "src";
 
 const components: { title: string; href: string; description: string }[] = [
   {
@@ -166,8 +166,7 @@ const ListItem = React.forwardRef<
 ListItem.displayName = "ListItem";
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "src";
-import { Button } from "src/atoms/button";
+import { Button, Input } from "src";
 
 const meta: Meta<typeof NavigationMenuDemo> = {
   component: NavigationMenuDemo,

stories/atoms/popover.stories.tsx

@@ -1,7 +1,11 @@
-import { Button } from "src/atoms/button";
-import { Input } from "src/atoms/input";
-import { Label } from "src/atoms/label";
-import { Popover, PopoverContent, PopoverTrigger } from "src/atoms/popover";
+import {
+  Button,
+  Input,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "src";
 
 import type { Meta } from "@storybook/react";
 

stories/atoms/progress.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Progress } from "src/atoms/progress";
+import { Progress } from "src";
 
 const meta: Meta<typeof Progress> = {
   component: Progress,