@nomad-e/bluma-cli 0.14.1 → 0.16.0

package/dist/scaffold/components/ui/carousel.jsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+    const ctx = React.useContext(CarouselContext);
+    if (!ctx) throw new Error('useCarousel must be within <Carousel />');
+    return ctx;
+}
+
+const Carousel = React.forwardRef(
+    ({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
+        const [carouselRef, api] = useEmblaCarousel(
+            { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },
+            plugins
+        );
+        const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+        const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+        const onSelect = React.useCallback((emblaApi) => {
+            if (!emblaApi) return;
+            setCanScrollPrev(emblaApi.canScrollPrev());
+            setCanScrollNext(emblaApi.canScrollNext());
+        }, []);
+
+        const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
+        const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
+
+        const handleKeyDown = React.useCallback(
+            (event) => {
+                if (event.key === 'ArrowLeft') {
+                    event.preventDefault();
+                    scrollPrev();
+                } else if (event.key === 'ArrowRight') {
+                    event.preventDefault();
+                    scrollNext();
+                }
+            },
+            [scrollPrev, scrollNext]
+        );
+
+        React.useEffect(() => {
+            if (!api || !setApi) return;
+            setApi(api);
+        }, [api, setApi]);
+
+        React.useEffect(() => {
+            if (!api) return;
+            onSelect(api);
+            api.on('reInit', onSelect);
+            api.on('select', onSelect);
+            return () => {
+                api?.off('select', onSelect);
+            };
+        }, [api, onSelect]);
+
+        return (
+            <CarouselContext.Provider
+                value={{
+                    carouselRef,
+                    api,
+                    opts,
+                    orientation: orientation || 'horizontal',
+                    scrollPrev,
+                    scrollNext,
+                    canScrollPrev,
+                    canScrollNext,
+                }}
+            >
+                <div
+                    ref={ref}
+                    onKeyDownCapture={handleKeyDown}
+                    className={cn('relative', className)}
+                    role="region"
+                    aria-roledescription="carousel"
+                    {...props}
+                >
+                    {children}
+                </div>
+            </CarouselContext.Provider>
+        );
+    }
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return (
+        <div ref={carouselRef} className="overflow-hidden">
+            <div
+                ref={ref}
+                className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+                {...props}
+            />
+        </div>
+    );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+    return (
+        <div
+            ref={ref}
+            role="group"
+            aria-roledescription="slide"
+            className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
+            {...props}
+        />
+    );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (
+        <Button
+            ref={ref}
+            variant={variant}
+            size={size}
+            className={cn(
+                'absolute h-8 w-8 rounded-full',
+                orientation === 'horizontal'
+                    ? '-left-12 top-1/2 -translate-y-1/2'
+                    : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+                className
+            )}
+            disabled={!canScrollPrev}
+            onClick={scrollPrev}
+            {...props}
+        >
+            <ArrowLeft className="h-4 w-4" />
+            <span className="sr-only">Previous slide</span>
+        </Button>
+    );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (
+        <Button
+            ref={ref}
+            variant={variant}
+            size={size}
+            className={cn(
+                'absolute h-8 w-8 rounded-full',
+                orientation === 'horizontal'
+                    ? '-right-12 top-1/2 -translate-y-1/2'
+                    : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+                className
+            )}
+            disabled={!canScrollNext}
+            onClick={scrollNext}
+            {...props}
+        >
+            <ArrowRight className="h-4 w-4" />
+            <span className="sr-only">Next slide</span>
+        </Button>
+    );
+});
+CarouselNext.displayName = 'CarouselNext';
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel };

package/dist/scaffold/components/ui/chart.jsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '@/lib/utils';
+
+const ChartContainer = React.forwardRef(({ id, className, children, ...props }, ref) => {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+    return (
+        <div
+            data-chart={chartId}
+            ref={ref}
+            className={cn(
+                'flex aspect-video justify-center text-xs [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',
+                className
+            )}
+            {...props}
+        >
+            <RechartsPrimitive.ResponsiveContainer width="100%" height="100%">
+                {children}
+            </RechartsPrimitive.ResponsiveContainer>
+        </div>
+    );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef(({ active, payload, className, label, ...props }, ref) => {
+    if (!active || !payload?.length) return null;
+    return (
+        <div
+            ref={ref}
+            className={cn('grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className)}
+            {...props}
+        >
+            {label != null && <div className="font-medium">{label}</div>}
+            <div className="grid gap-1.5">
+                {payload.map((item, i) => (
+                    <div key={i} className="flex items-center gap-2">
+                        <div
+                            className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                            style={{ backgroundColor: item.color }}
+                        />
+                        <span className="text-muted-foreground">{item.name}</span>
+                        <span className="ml-auto font-mono font-medium">{item.value}</span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+});
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+};
+
+export {
+    Area,
+    AreaChart,
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Cell,
+    Legend,
+    Line,
+    LineChart,
+    Pie,
+    PieChart,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from 'recharts';

package/dist/scaffold/components/ui/checkbox.jsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+            'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+            className
+        )}
+        {...props}
+    >
+        <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+            <Check className="h-4 w-4" />
+        </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/dist/scaffold/components/ui/collapsible.jsx

@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/scaffold/components/ui/command.jsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Command as Cmdk } from 'cmdk';
+import { Search } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const Command = React.forwardRef(({ className, ...props }, ref) => (
+    <Cmdk
+        ref={ref}
+        className={cn(
+            'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+Command.displayName = Cmdk.displayName;
+
+const CommandDialog = ({ children, ...props }) => {
+    return (
+        <Dialog {...props}>
+            <DialogContent className="overflow-hidden p-0 shadow-lg">
+                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <Cmdk.Input
+            ref={ref}
+            className={cn(
+                'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            {...props}
+        />
+    </div>
+));
+CommandInput.displayName = Cmdk.Input.displayName;
+
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (
+    <Cmdk.List ref={ref} className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)} {...props} />
+));
+CommandList.displayName = Cmdk.List.displayName;
+
+const CommandEmpty = React.forwardRef((props, ref) => (
+    <Cmdk.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
+CommandEmpty.displayName = Cmdk.Empty.displayName;
+
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
+    <Cmdk.Group
+        ref={ref}
+        className={cn(
+            'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+CommandGroup.displayName = Cmdk.Group.displayName;
+
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
+    <Cmdk.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
+));
+CommandSeparator.displayName = Cmdk.Separator.displayName;
+
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
+    <Cmdk.Item
+        ref={ref}
+        className={cn(
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+            className
+        )}
+        {...props}
+    />
+));
+CommandItem.displayName = Cmdk.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }) => {
+    return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};

package/dist/scaffold/components/ui/context-menu.jsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+    <ContextMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+            inset && 'pl-8',
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-4 w-4" />
+    </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+            className
+        )}
+        {...props}
+    />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+        <ContextMenuPrimitive.Content
+            ref={ref}
+            className={cn(
+                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+                className
+            )}
+            {...props}
+        />
+    </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            inset && 'pl-8',
+            className
+        )}
+        {...props}
+    />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+    <ContextMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className
+        )}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <ContextMenuPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+    <ContextMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <ContextMenuPrimitive.ItemIndicator>
+                <Circle className="h-2 w-2 fill-current" />
+            </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} {...props} />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }) => {
+    return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+};
+
+export {
+    ContextMenu,
+    ContextMenuTrigger,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuCheckboxItem,
+    ContextMenuRadioItem,
+    ContextMenuLabel,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuGroup,
+    ContextMenuPortal,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuRadioGroup,
+};

package/dist/scaffold/components/ui/dialog.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn('fixed inset-0 z-50 bg-black/80', className)}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+    <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }) => (
+    <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};

package/dist/scaffold/components/ui/drawer.jsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Drawer as Vaul } from 'vaul';
+import { cn } from '@/lib/utils';
+
+function Drawer({ shouldScaleBackground = true, ...props }) {
+    return <Vaul.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
+}
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = Vaul.Trigger;
+const DrawerPortal = Vaul.Portal;
+const DrawerClose = Vaul.Close;
+
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (
+    <Vaul.Overlay ref={ref} className={cn('fixed inset-0 z-50 bg-black/80', className)} {...props} />
+));
+DrawerOverlay.displayName = Vaul.Overlay.displayName;
+
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (
+    <DrawerPortal>
+        <DrawerOverlay />
+        <Vaul.Content
+            ref={ref}
+            className={cn(
+                'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+                className
+            )}
+            {...props}
+        >
+            <Vaul.Handle className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+            {children}
+        </Vaul.Content>
+    </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({ className, ...props }) => (
+    <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }) => (
+    <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
+    <Vaul.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+));
+DrawerTitle.displayName = 'DrawerTitle';
+
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (
+    <Vaul.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DrawerDescription.displayName = 'DrawerDescription';
+
+export {
+    Drawer,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerTrigger,
+    DrawerClose,
+    DrawerContent,
+    DrawerHeader,
+    DrawerFooter,
+    DrawerTitle,
+    DrawerDescription,
+};