love-ui 1.0.0

package/packages/patterns/drawer/left/drawer-left-5.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { ChevronRight, File, Folder, Menu } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+
+export const title = "Left Drawer File Explorer";
+
+const Example = () => {
+  const [expandedFolders, setExpandedFolders] = useState<string[]>(["root"]);
+
+  const toggleFolder = (folder: string) => {
+    setExpandedFolders((prev) =>
+      prev.includes(folder)
+        ? prev.filter((f) => f !== folder)
+        : [...prev, folder]
+    );
+  };
+
+  return (
+    <Drawer direction="left">
+      <DrawerTrigger asChild>
+        <Button size="icon" variant="outline">
+          <Menu className="h-4 w-4" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="p-4">
+          <h2 className="mb-4 font-semibold text-lg">Files</h2>
+          <div className="space-y-1">
+            <div>
+              <Button
+                className="w-full justify-start"
+                onClick={() => toggleFolder("root")}
+                size="sm"
+                variant="ghost"
+              >
+                <ChevronRight
+                  className={`mr-1 h-3 w-3 transition-transform ${
+                    expandedFolders.includes("root") ? "rotate-90" : ""
+                  }`}
+                />
+                <Folder className="mr-2 h-3 w-3" />
+                Projects
+              </Button>
+              {expandedFolders.includes("root") && (
+                <div className="ml-4">
+                  <div>
+                    <Button
+                      className="w-full justify-start"
+                      onClick={() => toggleFolder("website")}
+                      size="sm"
+                      variant="ghost"
+                    >
+                      <ChevronRight
+                        className={`mr-1 h-3 w-3 transition-transform ${
+                          expandedFolders.includes("website") ? "rotate-90" : ""
+                        }`}
+                      />
+                      <Folder className="mr-2 h-3 w-3" />
+                      Website
+                    </Button>
+                    {expandedFolders.includes("website") && (
+                      <div className="ml-4 space-y-1">
+                        <Button
+                          className="w-full justify-start"
+                          size="sm"
+                          variant="ghost"
+                        >
+                          <File className="mr-2 h-3 w-3" />
+                          index.html
+                        </Button>
+                        <Button
+                          className="w-full justify-start"
+                          size="sm"
+                          variant="ghost"
+                        >
+                          <File className="mr-2 h-3 w-3" />
+                          styles.css
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <Button
+                      className="w-full justify-start"
+                      onClick={() => toggleFolder("app")}
+                      size="sm"
+                      variant="ghost"
+                    >
+                      <ChevronRight
+                        className={`mr-1 h-3 w-3 transition-transform ${
+                          expandedFolders.includes("app") ? "rotate-90" : ""
+                        }`}
+                      />
+                      <Folder className="mr-2 h-3 w-3" />
+                      App
+                    </Button>
+                    {expandedFolders.includes("app") && (
+                      <div className="ml-4 space-y-1">
+                        <Button
+                          className="w-full justify-start"
+                          size="sm"
+                          variant="ghost"
+                        >
+                          <File className="mr-2 h-3 w-3" />
+                          App.tsx
+                        </Button>
+                        <Button
+                          className="w-full justify-start"
+                          size="sm"
+                          variant="ghost"
+                        >
+                          <File className="mr-2 h-3 w-3" />
+                          index.ts
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default Example;

package/packages/patterns/drawer/right/drawer-right-1.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export const title = "Simple Right Drawer";
+
+const Example = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open Right Drawer</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Drawer Title</DrawerTitle>
+        <DrawerDescription>
+          This drawer slides in from the right side.
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">
+          Right-side drawers are great for supplementary content, settings, or
+          detail views.
+        </p>
+      </div>
+      <DrawerFooter>
+        <Button>Confirm</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/right/drawer-right-2.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+
+export const title = "Right Drawer Filter Panel";
+
+const Example = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button variant="outline">Filters</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Filters</DrawerTitle>
+        <DrawerDescription>
+          Refine your search with these filters
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="space-y-6 overflow-y-auto p-4">
+        <div className="space-y-3">
+          <Label className="font-medium text-sm">Category</Label>
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <Checkbox id="electronics" />
+              <label
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="electronics"
+              >
+                Electronics
+              </label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="clothing" />
+              <label
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="clothing"
+              >
+                Clothing
+              </label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="books" />
+              <label
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="books"
+              >
+                Books
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-3">
+          <Label className="font-medium text-sm">Price Range</Label>
+          <Slider data-vaul-no-drag defaultValue={[50]} max={100} step={1} />
+          <div className="flex justify-between text-muted-foreground text-xs">
+            <span>$0</span>
+            <span>$1000</span>
+          </div>
+        </div>
+        <div className="space-y-3">
+          <Label className="font-medium text-sm">Rating</Label>
+          <div className="space-y-2">
+            <div className="flex items-center space-x-2">
+              <Checkbox id="5stars" />
+              <label
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="5stars"
+              >
+                ⭐⭐⭐⭐⭐
+              </label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="4stars" />
+              <label
+                className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="4stars"
+              >
+                ⭐⭐⭐⭐
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <DrawerFooter>
+        <Button>Apply Filters</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Reset</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/right/drawer-right-3.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export const title = "Right Drawer Settings Panel";
+
+const Example = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button size="icon" variant="outline">
+        <Settings className="h-4 w-4" />
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Settings</DrawerTitle>
+        <DrawerDescription>Manage your preferences</DrawerDescription>
+      </DrawerHeader>
+      <div className="space-y-6 p-4">
+        <div className="space-y-4">
+          <h4 className="font-medium text-sm">Notifications</h4>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm" htmlFor="email-notifs">
+                Email notifications
+              </Label>
+              <Switch id="email-notifs" />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm" htmlFor="push-notifs">
+                Push notifications
+              </Label>
+              <Switch defaultChecked id="push-notifs" />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm" htmlFor="sms-notifs">
+                SMS notifications
+              </Label>
+              <Switch id="sms-notifs" />
+            </div>
+          </div>
+        </div>
+        <div className="space-y-4">
+          <h4 className="font-medium text-sm">Privacy</h4>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm" htmlFor="profile-visible">
+                Profile visible
+              </Label>
+              <Switch defaultChecked id="profile-visible" />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm" htmlFor="show-activity">
+                Show activity
+              </Label>
+              <Switch defaultChecked id="show-activity" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <DrawerFooter>
+        <Button>Save Changes</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/right/drawer-right-4.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ShoppingCart, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export const title = "Right Drawer Shopping Cart";
+
+const Example = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button variant="outline">
+        <ShoppingCart className="mr-2 h-4 w-4" />
+        Cart (3)
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Shopping Cart</DrawerTitle>
+        <DrawerDescription>3 items in your cart</DrawerDescription>
+      </DrawerHeader>
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        <div className="space-y-4">
+          <div className="flex gap-4 border-b pb-4">
+            <div className="h-20 w-20 rounded-md bg-muted" />
+            <div className="flex-1 space-y-1">
+              <h4 className="font-medium text-sm">Wireless Headphones</h4>
+              <p className="text-muted-foreground text-xs">Black, Standard</p>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">$99.00</span>
+                <Button className="h-6 w-6" size="icon" variant="ghost">
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-4 border-b pb-4">
+            <div className="h-20 w-20 rounded-md bg-muted" />
+            <div className="flex-1 space-y-1">
+              <h4 className="font-medium text-sm">USB-C Cable</h4>
+              <p className="text-muted-foreground text-xs">White, 2m</p>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">$19.00</span>
+                <Button className="h-6 w-6" size="icon" variant="ghost">
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-4 border-b pb-4">
+            <div className="h-20 w-20 rounded-md bg-muted" />
+            <div className="flex-1 space-y-1">
+              <h4 className="font-medium text-sm">Phone Case</h4>
+              <p className="text-muted-foreground text-xs">Clear, Slim</p>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">$29.00</span>
+                <Button className="h-6 w-6" size="icon" variant="ghost">
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2 pt-4">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Subtotal</span>
+            <span>$147.00</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Shipping</span>
+            <span>$10.00</span>
+          </div>
+          <div className="flex justify-between border-t pt-2 font-medium">
+            <span>Total</span>
+            <span>$157.00</span>
+          </div>
+        </div>
+      </div>
+      <DrawerFooter>
+        <Button>Checkout</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Continue Shopping</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/right/drawer-right-5.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Bell } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export const title = "Right Drawer Notifications";
+
+const Example = () => (
+  <Drawer direction="right">
+    <DrawerTrigger asChild>
+      <Button className="relative" size="icon" variant="outline">
+        <Bell className="h-4 w-4" />
+        <Badge className="-top-1 -right-1 absolute flex h-5 w-5 items-center justify-center p-0 text-xs">
+          5
+        </Badge>
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Notifications</DrawerTitle>
+        <DrawerDescription>You have 5 unread notifications</DrawerDescription>
+      </DrawerHeader>
+      <div className="flex-1 overflow-y-auto">
+        <div className="divide-y">
+          <div className="cursor-pointer p-4 hover:bg-muted/50">
+            <div className="flex items-start gap-3">
+              <div className="mt-2 h-2 w-2 rounded-full bg-blue-500" />
+              <div className="flex-1 space-y-1">
+                <p className="font-medium text-sm">New message from John</p>
+                <p className="text-muted-foreground text-xs">
+                  Hey, I wanted to follow up on our conversation...
+                </p>
+                <p className="text-muted-foreground text-xs">2 minutes ago</p>
+              </div>
+            </div>
+          </div>
+          <div className="cursor-pointer p-4 hover:bg-muted/50">
+            <div className="flex items-start gap-3">
+              <div className="mt-2 h-2 w-2 rounded-full bg-blue-500" />
+              <div className="flex-1 space-y-1">
+                <p className="font-medium text-sm">Project updated</p>
+                <p className="text-muted-foreground text-xs">
+                  Sarah updated the design files in your project
+                </p>
+                <p className="text-muted-foreground text-xs">1 hour ago</p>
+              </div>
+            </div>
+          </div>
+          <div className="cursor-pointer p-4 hover:bg-muted/50">
+            <div className="flex items-start gap-3">
+              <div className="mt-2 h-2 w-2 rounded-full bg-blue-500" />
+              <div className="flex-1 space-y-1">
+                <p className="font-medium text-sm">New comment</p>
+                <p className="text-muted-foreground text-xs">
+                  Mike commented on your post
+                </p>
+                <p className="text-muted-foreground text-xs">3 hours ago</p>
+              </div>
+            </div>
+          </div>
+          <div className="cursor-pointer p-4 hover:bg-muted/50">
+            <div className="flex items-start gap-3">
+              <div className="mt-2 h-2 w-2 rounded-full bg-muted" />
+              <div className="flex-1 space-y-1">
+                <p className="text-sm">System update</p>
+                <p className="text-muted-foreground text-xs">
+                  New features are now available
+                </p>
+                <p className="text-muted-foreground text-xs">Yesterday</p>
+              </div>
+            </div>
+          </div>
+          <div className="cursor-pointer p-4 hover:bg-muted/50">
+            <div className="flex items-start gap-3">
+              <div className="mt-2 h-2 w-2 rounded-full bg-muted" />
+              <div className="flex-1 space-y-1">
+                <p className="text-sm">Welcome to the platform</p>
+                <p className="text-muted-foreground text-xs">
+                  Get started with these tips
+                </p>
+                <p className="text-muted-foreground text-xs">2 days ago</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="border-t p-4">
+        <DrawerClose asChild>
+          <Button className="w-full" variant="outline">
+            Mark all as read
+          </Button>
+        </DrawerClose>
+      </div>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/top/drawer-top-1.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export const title = "Simple Top Drawer";
+
+const Example = () => (
+  <Drawer direction="top">
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open Top Drawer</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Top Drawer</DrawerTitle>
+        <DrawerDescription>
+          This drawer slides down from the top.
+        </DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">
+          Top drawers are useful for search bars, notifications, and quick
+          action panels.
+        </p>
+      </div>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="outline">Close</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;

package/packages/patterns/drawer/top/drawer-top-2.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Clock, File, Folder, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import { Input } from "@/components/ui/input";
+
+export const title = "Top Drawer Search Bar";
+
+const Example = () => (
+  <Drawer direction="top">
+    <DrawerTrigger asChild>
+      <Button variant="outline">
+        <Search className="mr-2 h-4 w-4" />
+        Search
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <div className="space-y-4 p-4">
+        <div className="relative">
+          <Search className="-translate-y-1/2 absolute top-1/2 left-3 h-5 w-5 text-muted-foreground" />
+          <Input
+            className="h-12 pl-10 text-base"
+            placeholder="Search for files, folders, or content..."
+          />
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-medium text-muted-foreground text-xs uppercase">
+            Recent Searches
+          </h4>
+          <div className="space-y-1">
+            <Button className="w-full justify-start" size="sm" variant="ghost">
+              <Clock className="mr-3 h-4 w-4" />
+              Project files
+            </Button>
+            <Button className="w-full justify-start" size="sm" variant="ghost">
+              <Clock className="mr-3 h-4 w-4" />
+              Team documents
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <h4 className="font-medium text-muted-foreground text-xs uppercase">
+            Quick Access
+          </h4>
+          <div className="space-y-1">
+            <Button className="w-full justify-start" size="sm" variant="ghost">
+              <Folder className="mr-3 h-4 w-4" />
+              My Projects
+            </Button>
+            <Button className="w-full justify-start" size="sm" variant="ghost">
+              <File className="mr-3 h-4 w-4" />
+              Recent Files
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DrawerContent>
+  </Drawer>
+);
+
+export default Example;