Drawer

1import { DrawerProvider, Drawer, DrawerTrigger, DrawerOverlay } from "@/components/ui/drawer";
2
3<DrawerProvider />

1"use client";
2
3import { Drawer as ArkDrawer, useDrawerContext } from "@ark-ui/react/drawer";
4import { ark } from "@ark-ui/react/factory";
5import { Portal } from "@ark-ui/react/portal";
6import type React from "react";
7import { tv, type VariantProps } from "tailwind-variants";
8import { cn } from "@/lib/utils";
9import { ScrollArea } from "@/registry/react/components/scroll-area";
10
11export const useDrawer = useDrawerContext;
12
13export const DrawerProvider = (
14  props: React.ComponentProps<typeof ArkDrawer.Indent>
15) => {
16  const { className, children, ...rest } = props;
17
18  return (
19    <ArkDrawer.Stack>
20      <ArkDrawer.IndentBackground
21        className={cn(
22          "[--indent-opacity:calc(0.1*(1-var(--drawer-swipe-progress,0)))]",
23          "fixed inset-0 z-50",
24          "bg-background",
25          "opacity-0",
26          "pointer-events-none",
27          "transition-opacity duration-300 ease-in",
28          "data-[state=open]:opacity-(--indent-opacity)",