love-ui 1.0.0

package/packages/patterns/radio-group/layout/radio-group-layout-2.tsx

@@ -0,0 +1,44 @@
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export const title = "RadioGroup with Cards";
+
+const Example = () => (
+  <RadioGroup className="gap-2" defaultValue="card-1">
+    <div className="relative flex cursor-pointer items-start space-x-3 rounded-lg border bg-background p-4 shadow-sm transition-colors hover:bg-accent">
+      <RadioGroupItem id="card-1" value="card-1" />
+      <div className="grid gap-1.5 leading-none">
+        <Label className="cursor-pointer font-medium" htmlFor="card-1">
+          Starter Plan
+        </Label>
+        <p className="text-muted-foreground text-sm">
+          Perfect for individuals and small teams.
+        </p>
+      </div>
+    </div>
+    <div className="relative flex cursor-pointer items-start space-x-3 rounded-lg border bg-background p-4 shadow-sm transition-colors hover:bg-accent">
+      <RadioGroupItem id="card-2" value="card-2" />
+      <div className="grid gap-1.5 leading-none">
+        <Label className="cursor-pointer font-medium" htmlFor="card-2">
+          Professional Plan
+        </Label>
+        <p className="text-muted-foreground text-sm">
+          Advanced features for growing businesses.
+        </p>
+      </div>
+    </div>
+    <div className="relative flex cursor-pointer items-start space-x-3 rounded-lg border bg-background p-4 shadow-sm transition-colors hover:bg-accent">
+      <RadioGroupItem id="card-3" value="card-3" />
+      <div className="grid gap-1.5 leading-none">
+        <Label className="cursor-pointer font-medium" htmlFor="card-3">
+          Enterprise Plan
+        </Label>
+        <p className="text-muted-foreground text-sm">
+          Custom solutions for large organizations.
+        </p>
+      </div>
+    </div>
+  </RadioGroup>
+);
+
+export default Example;

package/packages/patterns/radio-group/layout/radio-group-layout-3.tsx

@@ -0,0 +1,35 @@
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export const title = "RadioGroup in Grid";
+
+const Example = () => (
+  <RadioGroup className="grid grid-cols-2 gap-4" defaultValue="grid-1">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-1" value="grid-1" />
+      <Label htmlFor="grid-1">Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-2" value="grid-2" />
+      <Label htmlFor="grid-2">Option 2</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-3" value="grid-3" />
+      <Label htmlFor="grid-3">Option 3</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-4" value="grid-4" />
+      <Label htmlFor="grid-4">Option 4</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-5" value="grid-5" />
+      <Label htmlFor="grid-5">Option 5</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="grid-6" value="grid-6" />
+      <Label htmlFor="grid-6">Option 6</Label>
+    </div>
+  </RadioGroup>
+);
+
+export default Example;

package/packages/patterns/radio-group/standard/radio-group-standard-1.tsx

@@ -0,0 +1,23 @@
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export const title = "Basic RadioGroup";
+
+const Example = () => (
+  <RadioGroup defaultValue="option-1">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="option-1" value="option-1" />
+      <Label htmlFor="option-1">Option 1</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="option-2" value="option-2" />
+      <Label htmlFor="option-2">Option 2</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="option-3" value="option-3" />
+      <Label htmlFor="option-3">Option 3</Label>
+    </div>
+  </RadioGroup>
+);
+
+export default Example;

package/packages/patterns/radio-group/standard/radio-group-standard-2.tsx

@@ -0,0 +1,38 @@
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export const title = "RadioGroup with Descriptions";
+
+const Example = () => (
+  <RadioGroup defaultValue="comfortable">
+    <div className="flex items-start space-x-2">
+      <RadioGroupItem className="mt-1" id="r1" value="default" />
+      <div className="grid gap-1.5 leading-none">
+        <Label htmlFor="r1">Default</Label>
+        <p className="text-muted-foreground text-sm">
+          The default spacing and sizing.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-start space-x-2">
+      <RadioGroupItem className="mt-1" id="r2" value="comfortable" />
+      <div className="grid gap-1.5 leading-none">
+        <Label htmlFor="r2">Comfortable</Label>
+        <p className="text-muted-foreground text-sm">
+          Increased spacing for better readability.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-start space-x-2">
+      <RadioGroupItem className="mt-1" id="r3" value="compact" />
+      <div className="grid gap-1.5 leading-none">
+        <Label htmlFor="r3">Compact</Label>
+        <p className="text-muted-foreground text-sm">
+          Reduced spacing to fit more content.
+        </p>
+      </div>
+    </div>
+  </RadioGroup>
+);
+
+export default Example;

package/packages/patterns/scroll-area/advanced/scroll-area-advanced-1.tsx

@@ -0,0 +1,54 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+export const title = "Both Orientations";
+
+const Example = () => (
+  <ScrollArea className="h-[400px] w-full max-w-md rounded-md border bg-background">
+    <div className="w-max p-4">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b">
+            <th className="px-4 py-2 text-left font-medium">Name</th>
+            <th className="px-4 py-2 text-left font-medium">Email</th>
+            <th className="px-4 py-2 text-left font-medium">Role</th>
+            <th className="px-4 py-2 text-left font-medium">Department</th>
+            <th className="px-4 py-2 text-left font-medium">Location</th>
+            <th className="px-4 py-2 text-left font-medium">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: 20 }).map((_, i) => (
+            <tr className="border-b" key={i}>
+              <td className="px-4 py-2 text-sm">User {i + 1}</td>
+              <td className="px-4 py-2 text-muted-foreground text-sm">
+                user{i + 1}@example.com
+              </td>
+              <td className="px-4 py-2 text-sm">
+                {i % 3 === 0 ? "Admin" : i % 2 === 0 ? "Editor" : "Viewer"}
+              </td>
+              <td className="px-4 py-2 text-sm">
+                {i % 4 === 0
+                  ? "Engineering"
+                  : i % 3 === 0
+                    ? "Design"
+                    : i % 2 === 0
+                      ? "Marketing"
+                      : "Sales"}
+              </td>
+              <td className="px-4 py-2 text-sm">
+                {i % 2 === 0 ? "San Francisco" : "New York"}
+              </td>
+              <td className="px-4 py-2 text-sm">
+                {i % 2 === 0 ? "Active" : "Inactive"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+    <ScrollBar orientation="horizontal" />
+    <ScrollBar orientation="vertical" />
+  </ScrollArea>
+);
+
+export default Example;

package/packages/patterns/scroll-area/advanced/scroll-area-advanced-2.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Dynamic Content";
+
+const Example = () => {
+  const [items, setItems] = useState(
+    Array.from({ length: 10 }, (_, i) => ({
+      id: i + 1,
+      title: `Item ${i + 1}`,
+      description: `This is the description for item ${i + 1}`,
+    }))
+  );
+
+  const loadMore = () => {
+    const newItems = Array.from({ length: 5 }, (_, i) => ({
+      id: items.length + i + 1,
+      title: `Item ${items.length + i + 1}`,
+      description: `This is the description for item ${items.length + i + 1}`,
+    }));
+    setItems([...items, ...newItems]);
+  };
+
+  return (
+    <div className="w-full max-w-md space-y-4">
+      <ScrollArea className="h-[400px] rounded-md border bg-background">
+        <div className="space-y-4 p-4">
+          {items.map((item) => (
+            <div
+              className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm"
+              key={item.id}
+            >
+              <h3 className="font-semibold text-sm">{item.title}</h3>
+              <p className="mt-1 text-muted-foreground text-sm">
+                {item.description}
+              </p>
+            </div>
+          ))}
+          <Button className="w-full" onClick={loadMore} variant="outline">
+            Load More
+          </Button>
+        </div>
+      </ScrollArea>
+      <p className="text-center text-muted-foreground text-sm">
+        Showing {items.length} items
+      </p>
+    </div>
+  );
+};
+
+export default Example;

package/packages/patterns/scroll-area/advanced/scroll-area-advanced-3.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "With ResizableHandle";
+
+const Example = () => (
+  <ResizablePanelGroup
+    className="max-w-4xl rounded-lg border bg-background"
+    direction="horizontal"
+  >
+    <ResizablePanel defaultSize={50} minSize={30}>
+      <div className="flex h-[400px] flex-col">
+        <div className="border-b p-4">
+          <h3 className="font-semibold">Files</h3>
+        </div>
+        <ScrollArea className="flex-1">
+          <div className="space-y-1 p-2">
+            {Array.from({ length: 30 }).map((_, i) => (
+              <button
+                className="w-full rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent"
+                key={i}
+                type="button"
+              >
+                <div className="font-medium">file-{i + 1}.tsx</div>
+                <div className="text-muted-foreground text-xs">
+                  Updated {i + 1} days ago
+                </div>
+              </button>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle withHandle />
+    <ResizablePanel defaultSize={50} minSize={30}>
+      <div className="flex h-[400px] flex-col">
+        <div className="border-b p-4">
+          <h3 className="font-semibold">Preview</h3>
+        </div>
+        <ScrollArea className="flex-1">
+          <div className="space-y-4 p-4">
+            <div>
+              <h4 className="mb-2 font-medium text-sm">File Content</h4>
+              <p className="text-muted-foreground text-sm">
+                Select a file from the list to view its contents here. The panel
+                width can be adjusted by dragging the resize handle.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-muted-foreground text-sm">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Duis aute irure dolor in reprehenderit in voluptate velit esse
+                cillum dolore eu fugiat nulla pariatur.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa
+                qui officia deserunt mollit anim id est laborum.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                accusantium doloremque laudantium.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
+                aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                voluptatem sequi nesciunt.
+              </p>
+            </div>
+          </div>
+        </ScrollArea>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+);
+
+export default Example;

package/packages/patterns/scroll-area/layout/scroll-area-layout-1.tsx

@@ -0,0 +1,37 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Fixed Height ScrollArea";
+
+const Example = () => (
+  <div className="w-full max-w-md space-y-4">
+    <div>
+      <h3 className="mb-2 font-semibold text-sm">Notifications</h3>
+      <ScrollArea className="h-[200px] rounded-md border bg-background">
+        <div className="space-y-4 p-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div className="flex items-start gap-3" key={i}>
+              <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                <span className="font-medium text-primary text-xs">
+                  {i + 1}
+                </span>
+              </div>
+              <div className="flex-1 space-y-1">
+                <p className="font-medium text-sm leading-none">
+                  Notification {i + 1}
+                </p>
+                <p className="text-muted-foreground text-sm">
+                  This is a notification message for item {i + 1}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {i + 1} minutes ago
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  </div>
+);
+
+export default Example;

package/packages/patterns/scroll-area/layout/scroll-area-layout-2.tsx

@@ -0,0 +1,45 @@
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+export const title = "Scrollable Tags";
+
+const tags = [
+  "React",
+  "Next.js",
+  "TypeScript",
+  "Tailwind CSS",
+  "shadcn/ui",
+  "Radix UI",
+  "JavaScript",
+  "Node.js",
+  "Express",
+  "MongoDB",
+  "PostgreSQL",
+  "GraphQL",
+  "REST API",
+  "Docker",
+  "Kubernetes",
+  "AWS",
+  "Vercel",
+  "Git",
+  "GitHub",
+  "CI/CD",
+];
+
+const Example = () => (
+  <div className="w-full max-w-md space-y-2">
+    <h3 className="font-semibold text-sm">Technologies</h3>
+    <ScrollArea className="w-full whitespace-nowrap rounded-md border bg-background">
+      <div className="flex w-max space-x-2 p-4">
+        {tags.map((tag) => (
+          <Badge key={tag} variant="secondary">
+            {tag}
+          </Badge>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  </div>
+);
+
+export default Example;

package/packages/patterns/scroll-area/layout/scroll-area-layout-3.tsx

@@ -0,0 +1,99 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Chat Messages";
+
+const messages = [
+  {
+    id: 1,
+    user: "Hayden Bleasel",
+    avatar: "https://github.com/haydenbleasel.png",
+    initials: "HB",
+    message: "Hey everyone! Just launched another AI Elements update!",
+    time: "10:30 AM",
+  },
+  {
+    id: 2,
+    user: "shadcn",
+    avatar: "https://github.com/shadcn.png",
+    initials: "SC",
+    message: "Nice one! Just pushed some updates to the UI components.",
+    time: "10:32 AM",
+  },
+  {
+    id: 3,
+    user: "rauchg",
+    avatar: "https://github.com/rauchg.png",
+    initials: "RG",
+    message: "Nice work @shadcn! The new design looks amazing.",
+    time: "10:35 AM",
+  },
+  {
+    id: 5,
+    user: "shadcn",
+    avatar: "https://github.com/shadcn.png",
+    initials: "SC",
+    message: "Thanks! Let me know if you have any feedback.",
+    time: "10:40 AM",
+  },
+  {
+    id: 4,
+    user: "Hayden Bleasel",
+    avatar: "https://github.com/haydenbleasel.png",
+    initials: "HB",
+    message: "What about me??",
+    time: "10:37 AM",
+  },
+  {
+    id: 6,
+    user: "rauchg",
+    avatar: "https://github.com/rauchg.png",
+    initials: "RG",
+    message: "What about you?",
+    time: "10:45 AM",
+  },
+  {
+    id: 7,
+    user: "Hayden Bleasel",
+    avatar: "https://github.com/haydenbleasel.png",
+    initials: "HB",
+    message: "A'ight chief 😭",
+    time: "10:47 AM",
+  },
+  {
+    id: 8,
+    user: "shadcn",
+    avatar: "https://github.com/shadcn.png",
+    initials: "SC",
+    message: "RIP lil bro 🫠",
+    time: "10:40 AM",
+  },
+];
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <ScrollArea className="h-[400px] rounded-md border bg-background">
+      <div className="space-y-4 p-4">
+        {messages.map((msg) => (
+          <div className="flex gap-3" key={msg.id}>
+            <Avatar className="size-8 shrink-0">
+              <AvatarImage src={msg.avatar} />
+              <AvatarFallback>{msg.initials}</AvatarFallback>
+            </Avatar>
+            <div className="flex-1 space-y-1">
+              <div className="flex items-baseline gap-2">
+                <span className="font-semibold text-sm">{msg.user}</span>
+                <span className="text-muted-foreground text-xs">
+                  {msg.time}
+                </span>
+              </div>
+              <p className="text-sm">{msg.message}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  </div>
+);
+
+export default Example;

package/packages/patterns/scroll-area/standard/scroll-area-standard-1.tsx

@@ -0,0 +1,52 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export const title = "Basic ScrollArea";
+
+const Example = () => (
+  <ScrollArea className="h-72 w-full max-w-md rounded-md border">
+    <div className="p-4">
+      <h4 className="mb-4 font-medium text-sm leading-none">
+        Terms of Service
+      </h4>
+      <div className="space-y-4 text-muted-foreground text-sm">
+        <p>
+          Welcome to our service. By accessing or using our service, you agree
+          to be bound by these Terms of Service and all applicable laws and
+          regulations.
+        </p>
+        <p>
+          You must be at least 18 years old to use this service. By using this
+          service, you represent and warrant that you are at least 18 years of
+          age.
+        </p>
+        <p>
+          We reserve the right to modify or discontinue, temporarily or
+          permanently, the service (or any part thereof) with or without notice.
+        </p>
+        <p>
+          You agree not to reproduce, duplicate, copy, sell, resell or exploit
+          any portion of the service without express written permission by us.
+        </p>
+        <p>
+          We reserve the right to refuse service to anyone for any reason at any
+          time. You understand that your content may be transferred unencrypted
+          and involve transmissions over various networks.
+        </p>
+        <p>
+          We do not warrant that the service will be uninterrupted, timely,
+          secure, or error-free. You agree that from time to time we may remove
+          the service for indefinite periods of time or cancel the service at
+          any time.
+        </p>
+        <p>
+          You agree to indemnify and hold us and our affiliates, officers,
+          agents, and employees harmless from any claim or demand, including
+          reasonable attorneys' fees, made by any third party due to or arising
+          out of your breach of these Terms of Service.
+        </p>
+      </div>
+    </div>
+  </ScrollArea>
+);
+
+export default Example;

package/packages/patterns/scroll-area/standard/scroll-area-standard-2.tsx

@@ -0,0 +1,56 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+export const title = "Horizontal ScrollArea";
+
+const artworks = [
+  {
+    artist: "Ornella Binni",
+    art: "https://placehold.co/300x400",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://placehold.co/300x400",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://placehold.co/300x400",
+  },
+  {
+    artist: "Jessica Ruscello",
+    art: "https://placehold.co/300x400",
+  },
+  {
+    artist: "Cosmic Timetraveler",
+    art: "https://placehold.co/300x400",
+  },
+];
+
+const Example = () => (
+  <ScrollArea className="w-full max-w-md whitespace-nowrap rounded-md border">
+    <div className="flex w-max space-x-4 p-4">
+      {artworks.map((artwork) => (
+        <figure className="shrink-0" key={artwork.artist}>
+          <div className="overflow-hidden rounded-md">
+            {/** biome-ignore lint/performance/noImgElement: "LoveUI is framework agnostic" */}
+            <img
+              alt={`Artwork by ${artwork.artist}`}
+              className="aspect-[3/4] h-fit w-fit object-cover"
+              height={400}
+              src={artwork.art}
+              width={300}
+            />
+          </div>
+          <figcaption className="pt-2 text-muted-foreground text-xs">
+            Photo by{" "}
+            <span className="font-semibold text-foreground">
+              {artwork.artist}
+            </span>
+          </figcaption>
+        </figure>
+      ))}
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+);
+
+export default Example;

package/packages/patterns/separator/basic/separator-basic-1.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@/components/ui/separator";
+
+export const title = "Horizontal Separator";
+
+const Example = () => (
+  <div className="space-y-4">
+    <p className="text-sm">Above the separator</p>
+    <Separator />
+    <p className="text-sm">Below the separator</p>
+  </div>
+);
+
+export default Example;

package/packages/patterns/separator/basic/separator-basic-2.tsx

@@ -0,0 +1,15 @@
+import { Separator } from "@/components/ui/separator";
+
+export const title = "Vertical Separator";
+
+const Example = () => (
+  <div className="flex h-20 items-center space-x-4">
+    <p className="text-sm">Left</p>
+    <Separator orientation="vertical" />
+    <p className="text-sm">Center</p>
+    <Separator orientation="vertical" />
+    <p className="text-sm">Right</p>
+  </div>
+);
+
+export default Example;