Pixelact Drawer

1import { type VariantProps, cva } from "class-variance-authority";
2import { Drawer as DrawerPrimitive } from "vaul";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Drawer as ShadcnDrawer,
8  DrawerClose as ShadcnDrawerClose,
9  DrawerDescription as ShadcnDrawerDescription,
10  DrawerFooter as ShadcnDrawerFooter,
11  DrawerHeader as ShadcnDrawerHeader,
12  DrawerOverlay as ShadcnDrawerOverlay,
13  DrawerPortal as ShadcnDrawerPortal,
14  DrawerTitle as ShadcnDrawerTitle,
15  DrawerTrigger as ShadcnDrawerTrigger,
16} from "@/components/ui/drawer";
17 
18import "@/components/ui/pixelact-ui/styles/styles.css";
19 
20const Drawer = ShadcnDrawer;
21 
22const DrawerPortal = ShadcnDrawerPortal;
23 
24const DrawerOverlay = ShadcnDrawerOverlay;
25 
26const DrawerClose = ShadcnDrawerClose;
27 
28function DrawerTitle({
29  className,
30  children,
31  ...props
32}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
33  return (
34    <ShadcnDrawerTitle className={cn(className)} {...props}>
35      {children}
36    </ShadcnDrawerTitle>
37  );
38}
39 
40function DrawerDescription({
41  className,
42  children,
43  ...props
44}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
45  return (
46    <ShadcnDrawerDescription className={cn(className)} {...props}>
47      {children}
48    </ShadcnDrawerDescription>
49  );
50}
51 
52function DrawerTrigger({
53  className,
54  children,
55  asChild,
56  ...props
57}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
58  return (
59    <ShadcnDrawerTrigger
60      className={cn(
61        // Only apply default trigger styling when NOT using asChild
62        !asChild &&
63          "border-foreground dark:border-ring hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-4 focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring",
64        className
65      )}
66      asChild={asChild}
67      {...props}
68    >
69      {children}
70    </ShadcnDrawerTrigger>
71  );
72}
73 
74export const drawerVariants = cva("", {
75  variants: {
76    font: {
77      normal: "",
78      pixel: "pixel-font",
79    },
80  },
81  defaultVariants: {
82    font: "pixel",
83  },
84});
85 
86export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Content> &
87  VariantProps<typeof drawerVariants> & {
88    side?: "right" | "bottom" | "left";
89  };
90 
91function DrawerContent({
92  className,
93  children,
94  side = "bottom",
95  ...props
96}: DrawerProps) {
97  return (
98    <ShadcnDrawerPortal data-slot="drawer-portal">
99// … truncated