@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,761 +0,0 @@
-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>
-  )
-}