📦 Add Sheet UI component

src/components/ui/sheet/sheet.variants.ts

@@ -0,0 +1,22 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+const sheetVariants = tv({
+  base: "bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  variants: {
+    side: {
+      top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+      bottom:
+        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+      left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right:
+        "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+    },
+  },
+  defaultVariants: {
+    side: "left",
+  },
+});
+
+type Side = VariantProps<typeof sheetVariants>["side"];
+
+export { sheetVariants, type Side };