@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/primitives/drawer.tsx

@@ -0,0 +1,761 @@
+import * as React from "react";
+import { cn, } from '~/components/catalyst-ui';
+import { Button, } from '~/components/catalyst-ui';
+import { Input, } from "~/components/catalyst-ui";
+import { Label, } from "~/components/catalyst-ui";
+import { Textarea, } from "~/components/catalyst-ui";
+import { Settings, User, Mail, Phone, MapPin, Calendar, } from "lucide-react";
+import { Drawer as DrawerPrimitive, } from "vaul";
+import { motion, type Variants } from "framer-motion";
+import { cva, type VariantProps } from "class-variance-authority";
+
+// @dev app/components/catalyst-ui/data/primitive-data.tsx:4285
+const drawerVariants = cva(
+  ["group/drawer-content fixed z-50 flex flex-col"],
+  {
+    variants: {
+      variant: {
+        default: "",
+        card: [
+          "bg-card rounded-t-xl shadow-xl",
+          "data-[vaul-drawer-direction=bottom]:mb-5",
+          "data-[vaul-drawer-direction=top]:mt-5",
+          "data-[vaul-drawer-direction=left]:ml-5",
+          "data-[vaul-drawer-direction=right]:mr-5",
+        ],
+        glass: [
+          "backdrop-blur-xl bg-background/80 border-t border-white/10 max-w-sm",
+          "data-[vaul-drawer-direction=bottom]:mb-5",
+          "data-[vaul-drawer-direction=top]:mt-5",
+          "data-[vaul-drawer-direction=left]:ml-5",
+          "data-[vaul-drawer-direction=right]:mr-5",
+        ],
+        elevated: [
+          "bg-background shadow-2xl max-w-sm",
+          "data-[vaul-drawer-direction=bottom]:mb-5",
+          "data-[vaul-drawer-direction=top]:mt-5",
+          "data-[vaul-drawer-direction=left]:ml-5",
+          "data-[vaul-drawer-direction=right]:mr-5",
+        ],
+        bordered: [
+          "bg-background border-t-2 border-primary/20 max-w-sm",
+          "data-[vaul-drawer-direction=bottom]:mb-5",
+          "data-[vaul-drawer-direction=top]:mt-5",
+          "data-[vaul-drawer-direction=left]:ml-5",
+          "data-[vaul-drawer-direction=right]:mr-5",
+        ],
+        macos: [
+          "backdrop-blur-xl bg-card/70 shadow-2xl border border-border/50 w-full max-w-sm rounded-3xl mx-auto",
+          "data-[vaul-drawer-direction=bottom]:mb-5",
+          "data-[vaul-drawer-direction=top]:mt-5",
+          "data-[vaul-drawer-direction=left]:ml-5",
+          "data-[vaul-drawer-direction=right]:mr-5",
+        ],
+      },
+      direction: {
+        top: "border-b rounded-b-lg max-h-[80vh] mb-24 top-0 inset-x-0 left-1/2 -translate-x-1/2",
+        bottom: "border-t rounded-t-lg max-h-[80vh] mt-24 bottom-0 inset-x-0 left-1/2 -translate-x-1/2",
+        right: "sm:max-w-sm border-l w-3/4 right-0 inset-y-0 top-1/2 -translate-y-1/2",
+        left: "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm top-1/2 -translate-y-1/2",
+      },
+      size: {
+        default: "h-auto",
+        sm: "h-[50vh]",
+        md: "h-[70vh]",
+        lg: "h-[90vh]",
+        full: "h-screen",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+// Default motion variants
+const defaultContentVariants: Variants = {
+  hidden: {
+    y: "100%",
+    opacity: 0,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+    },
+  },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+      mass: 0.8,
+      staggerChildren: 0.07,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const defaultItemVariants: Variants = {
+  hidden: {
+    y: 20,
+    opacity: 0,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+    },
+  },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 30,
+      mass: 0.8,
+    },
+  },
+};
+
+type MotionConfig = {
+  contentVariants?: Variants;
+  itemVariants?: Variants;
+};
+
+const DrawerMotionContext = React.createContext<MotionConfig & { enabled: boolean }>({
+  enabled: false,
+  contentVariants: defaultContentVariants,
+  itemVariants: defaultItemVariants,
+});
+
+function Drawer({
+  motionConfig,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root> & {
+  motionConfig?: MotionConfig;
+}) {
+  return (
+    <DrawerMotionContext.Provider
+      value={{
+        enabled: false, // Will be set by DrawerContent based on variant
+        contentVariants: motionConfig?.contentVariants ?? defaultContentVariants,
+        itemVariants: motionConfig?.itemVariants ?? defaultItemVariants,
+      }}
+    >
+      <DrawerPrimitive.Root data-slot="drawer" {...props} />
+    </DrawerMotionContext.Provider>
+  );
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  variant,
+  direction,
+  size,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> &
+  VariantProps<typeof drawerVariants>) {
+  const motionConfigFromContext = React.useContext(DrawerMotionContext);
+  
+  // Enable motion for all variants except "default"
+  const motionEnabled = variant && variant !== "default";
+  
+  const motionConfig = {
+    ...motionConfigFromContext,
+    enabled: motionEnabled,
+  };
+
+  const content = (
+    <>
+      <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      {children}
+    </>
+  );
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerMotionContext.Provider value={motionConfig}>
+        <DrawerPrimitive.Content
+          data-slot="drawer-content"
+          className={cn(
+            drawerVariants({ variant, direction, size }),
+            "bg-background",
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0",
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0",
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0",
+            className
+          )}
+          {...props}
+        >
+          {motionEnabled ? (
+            <motion.div
+              variants={motionConfig.contentVariants}
+              initial="hidden"
+              animate="visible"
+              className="h-full flex flex-col"
+            >
+              {content}
+            </motion.div>
+          ) : (
+            content
+          )}
+        </DrawerPrimitive.Content>
+      </DrawerMotionContext.Provider>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  const motionConfig = React.useContext(DrawerMotionContext);
+
+  const Component = motionConfig.enabled ? motion.div : "div";
+
+  return (
+    <Component
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...(motionConfig.enabled && {
+        variants: motionConfig.itemVariants,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  const motionConfig = React.useContext(DrawerMotionContext);
+
+  const Component = motionConfig.enabled ? motion.div : "div";
+
+  return (
+    <Component
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...(motionConfig.enabled && {
+        variants: motionConfig.itemVariants,
+      })}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  const motionConfig = React.useContext(DrawerMotionContext);
+
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      asChild={motionConfig.enabled}
+      {...props}
+    >
+      {motionConfig.enabled ? (
+        <motion.h2 variants={motionConfig.itemVariants}>{props.children}</motion.h2>
+      ) : (
+        props.children
+      )}
+    </DrawerPrimitive.Title>
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  const motionConfig = React.useContext(DrawerMotionContext);
+
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      asChild={motionConfig.enabled}
+      {...props}
+    >
+      {motionConfig.enabled ? (
+        <motion.p variants={motionConfig.itemVariants}>{props.children}</motion.p>
+      ) : (
+        props.children
+      )}
+    </DrawerPrimitive.Description>
+  );
+}
+
+// Example usage
+export default function DrawerDemooo() {
+  const [open, setOpen] = React.useState(false);
+
+  // Custom variants example
+  const customContentVariants: Variants = {
+    hidden: {
+      y: "100%",
+      opacity: 0,
+      scale: 0.95,
+    },
+    visible: {
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 40,
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const customItemVariants: Variants = {
+    hidden: {
+      x: -20,
+      opacity: 0,
+    },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 40,
+      },
+    },
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center gap-4 p-8 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold mb-8 text-center">Drawer Motion Examples</h1>
+        
+        <div className="flex flex-wrap gap-4 justify-center">
+          {/* Without Motion - Default variant */}
+          <Drawer>
+            <DrawerTrigger className="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
+              Default (No Motion)
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Standard Drawer</DrawerTitle>
+                <DrawerDescription>
+                  This drawer has no motion animations (default variant)
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4">
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Content without animations
+                </p>
+              </div>
+              <DrawerFooter>
+                <DrawerClose className="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
+                  Close
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          {/* With Motion - Card variant */}
+          <Drawer>
+            <DrawerTrigger className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+              Card Variant (Motion)
+            </DrawerTrigger>
+            <DrawerContent variant="card">
+              <DrawerHeader>
+                <DrawerTitle>Card Drawer</DrawerTitle>
+                <DrawerDescription>
+                  Motion automatically enabled with card variant
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4">
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Smooth spring animations with staggered children
+                </p>
+              </div>
+              <DrawerFooter>
+                <DrawerClose className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+                  Close
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          {/* With Motion - Glass variant */}
+          <Drawer>
+            <DrawerTrigger className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+              Glass Variant (Motion)
+            </DrawerTrigger>
+            <DrawerContent variant="glass">
+              <DrawerHeader>
+                <DrawerTitle>Glass Drawer</DrawerTitle>
+                <DrawerDescription>
+                  Motion automatically enabled with glass variant
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4 space-y-4">
+                <div className="space-y-2">
+                  <h3 className="font-semibold">Features:</h3>
+                  <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
+                    <li>Automatic motion activation</li>
+                    <li>Glassmorphism design</li>
+                    <li>Staggered child animations</li>
+                    <li>Spring physics</li>
+                  </ul>
+                </div>
+              </div>
+              <DrawerFooter>
+                <DrawerClose className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                  Close
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+
+          {/* With Custom Motion - macOS variant */}
+          <Drawer
+            open={open}
+            onOpenChange={setOpen}
+            motionConfig={{
+              contentVariants: customContentVariants,
+              itemVariants: customItemVariants,
+            }}
+          >
+            <DrawerTrigger className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
+              macOS + Custom Motion
+            </DrawerTrigger>
+            <DrawerContent variant="macos">
+              <DrawerHeader>
+                <DrawerTitle>Custom Motion Drawer</DrawerTitle>
+                <DrawerDescription>
+                  macOS variant with custom animation variants
+                </DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4 space-y-4">
+                <div className="space-y-2">
+                  <h3 className="font-semibold">Custom Features:</h3>
+                  <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
+                    <li>Custom entrance animations</li>
+                    <li>Scale and slide effects</li>
+                    <li>Faster spring physics</li>
+                    <li>Horizontal slide animation</li>
+                  </ul>
+                </div>
+              </div>
+              <DrawerFooter>
+                <button
+                  onClick={() => setOpen(false)}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                >
+                  Close
+                </button>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </div>
+      </div>
+    </div>
+  );
+}
+export {
+  Drawer,  DrawerPortal,  DrawerOverlay,  DrawerTrigger,  DrawerClose,  DrawerContent,  DrawerHeader,  DrawerFooter,  DrawerTitle,  DrawerDescription
+}
+
+// SIMPLIFIED DEMO COMPONENT
+
+
+export function DrawerDemooo1() {
+  return (
+    <div className="flex flex-col gap-4 p-8">
+      <h1 className="text-2xl font-bold mb-6">Simplified Drawer Demo</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* Basic Drawer */}
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Open Basic Drawer
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent position="right" size="md">
+            <DrawerHeader>
+              <DrawerTitle>Basic Drawer</DrawerTitle>
+              <DrawerDescription>
+                This is a simple drawer example with basic content.
+              </DrawerDescription>
+            </DrawerHeader>
+              <div className="space-y-4">
+                <p>This is the drawer content area.</p>
+                <p>You can put any content here - forms, lists, images, etc.</p>
+                <div className="bg-gray-100 p-4 rounded">
+                  <h3 className="font-medium mb-2">Example Content</h3>
+                  <p className="text-sm text-gray-600">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  </p>
+                </div>
+              </div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button>Close</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        {/* Profile Form Drawer */}
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <User className="h-4 w-4 mr-2" />
+              Edit Profile
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent position="right" size="lg">
+            <DrawerHeader>
+              <DrawerTitle className="flex items-center gap-2">
+                <User className="h-5 w-5" />
+                Edit Profile
+              </DrawerTitle>
+              <DrawerDescription>
+                Update your profile information below.
+              </DrawerDescription>
+            </DrawerHeader>
+              <form className="space-y-6">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Label htmlFor="firstName">First Name</Label>
+                    <Input id="firstName" placeholder="John" />
+                  </div>
+                  <div>
+                    <Label htmlFor="lastName">Last Name</Label>
+                    <Input id="lastName" placeholder="Doe" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="email">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="phone">Phone</Label>
+                  <div className="relative">
+                    <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <Input id="phone" placeholder="+1 (555) 000-0000" className="pl-10" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="address">Address</Label>
+                  <div className="relative">
+                    <MapPin className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                    <Input id="address" placeholder="123 Main St, City, State" className="pl-10" />
+                  </div>
+                </div>
+                
+                <div>
+                  <Label htmlFor="bio">Bio</Label>
+                  <Textarea id="bio" placeholder="Tell us about yourself..." rows={3} />
+                </div>
+              </form>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button className="w-full">Save Changes</Button>
+              </DrawerClose>
+              <DrawerClose asChild>
+                <Button variant="outline" className="w-full">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        {/* Settings Drawer */}
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <Settings className="h-4 w-4 mr-2" />
+              Settings
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent position="left" size="md">
+            <DrawerHeader>
+              <DrawerTitle className="flex items-center gap-2">
+                <Settings className="h-5 w-5" />
+                Settings
+              </DrawerTitle>
+              <DrawerDescription>
+                Manage your application preferences.
+              </DrawerDescription>
+            </DrawerHeader>
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-sm font-medium mb-3">Appearance</h3>
+                  <div className="space-y-2">
+                    <label className="flex items-center space-x-2">
+                      <input type="radio" name="theme" value="light" defaultChecked />
+                      <span className="text-sm">Light</span>
+                    </label>
+                    <label className="flex items-center space-x-2">
+                      <input type="radio" name="theme" value="dark" />
+                      <span className="text-sm">Dark</span>
+                    </label>
+                    <label className="flex items-center space-x-2">
+                      <input type="radio" name="theme" value="system" />
+                      <span className="text-sm">System</span>
+                    </label>
+                  </div>
+                </div>
+                
+                <div>
+                  <h3 className="text-sm font-medium mb-3">Notifications</h3>
+                  <div className="space-y-2">
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm">Email notifications</span>
+                      <input type="checkbox" defaultChecked />
+                    </label>
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm">Push notifications</span>
+                      <input type="checkbox" />
+                    </label>
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm">SMS notifications</span>
+                      <input type="checkbox" defaultChecked />
+                    </label>
+                  </div>
+                </div>
+                
+                <div>
+                  <h3 className="text-sm font-medium mb-3">Privacy</h3>
+                  <div className="space-y-2">
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm">Profile visibility</span>
+                      <input type="checkbox" defaultChecked />
+                    </label>
+                    <label className="flex items-center justify-between">
+                      <span className="text-sm">Activity status</span>
+                      <input type="checkbox" />
+                    </label>
+                  </div>
+                </div>
+              </div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button>Save Settings</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        {/* Bottom Drawer */}
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="w-full">
+              <Calendar className="h-4 w-4 mr-2" />
+              Bottom Drawer
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent position="bottom" size="md">
+            <DrawerHeader>
+              <DrawerTitle>Select Date</DrawerTitle>
+              <DrawerDescription>
+                Choose a date from the calendar below.
+              </DrawerDescription>
+            </DrawerHeader>
+              <div className="grid grid-cols-7 gap-2 text-center text-sm">
+                <div className="font-medium py-2">Sun</div>
+                <div className="font-medium py-2">Mon</div>
+                <div className="font-medium py-2">Tue</div>
+                <div className="font-medium py-2">Wed</div>
+                <div className="font-medium py-2">Thu</div>
+                <div className="font-medium py-2">Fri</div>
+                <div className="font-medium py-2">Sat</div>
+                
+                {Array.from({ length: 31 }, (_, i) => (
+                  <DrawerClose key={i + 1} asChild>
+                    <button className="py-2 hover:bg-gray-100 rounded transition-colors">
+                      {i + 1}
+                    </button>
+                  </DrawerClose>
+                ))}
+              </div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </div>
+
+      {/* Usage Example Code */}
+      <div className="mt-8 p-4 bg-gray-50 rounded-lg">
+        <h2 className="text-lg font-semibold mb-2">Simplified Usage</h2>
+        <pre className="text-sm overflow-x-auto">
+{`<Drawer>
+  <DrawerTrigger asChild>
+    <Button>Open Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent position="right" size="md">
+    <DrawerHeader>
+      <DrawerTitle>Drawer Title</DrawerTitle>
+      <DrawerDescription>Drawer description</DrawerDescription>
+    </DrawerHeader>
+      {/* Your content here */}
+    <DrawerFooter>
+      <DrawerClose asChild>
+        <Button>Close</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>`}
+        </pre>
+      </div>
+    </div>
+  )
+}