love-ui 1.0.0

package/packages/patterns/alert-dialog/informational/alert-dialog-informational-3.tsx

@@ -0,0 +1,48 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Information with Long Content";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline">Show Info</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Privacy Policy Update</AlertDialogTitle>
+        <AlertDialogDescription className="max-h-60 overflow-y-auto">
+          We have updated our privacy policy to provide you with greater
+          transparency about how we collect, use, and protect your data.
+          <br />
+          <br />
+          Key changes include:
+          <ul className="mt-2 list-inside list-disc space-y-1">
+            <li>Enhanced data encryption standards</li>
+            <li>Improved cookie management options</li>
+            <li>Clearer data retention policies</li>
+            <li>Expanded user rights and controls</li>
+            <li>Updated third-party data sharing guidelines</li>
+          </ul>
+          <br />
+          Please review the full policy in your account settings. By continuing
+          to use our service, you agree to these updated terms.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>I Understand</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/informational/alert-dialog-informational-4.tsx

@@ -0,0 +1,41 @@
+import { Bell } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Information with Action Button";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline">Show Info</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <div className="flex items-center gap-2">
+          <Bell className="size-5 text-blue-500" />
+          <AlertDialogTitle>Stay Updated</AlertDialogTitle>
+        </div>
+        <AlertDialogDescription>
+          Enable notifications to stay informed about important updates, new
+          messages, and team activities.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Not Now</AlertDialogCancel>
+        <AlertDialogAction>Learn More</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/informational/alert-dialog-informational-5.tsx

@@ -0,0 +1,42 @@
+import { Lightbulb } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Information with Centered Icon";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline">Show Tip</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader className="items-center">
+        <div className="flex size-12 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900">
+          <Lightbulb className="size-6 text-yellow-600 dark:text-yellow-400" />
+        </div>
+        <AlertDialogTitle>Pro Tip</AlertDialogTitle>
+        <AlertDialogDescription className="text-center">
+          Use keyboard shortcuts to navigate faster. Press{" "}
+          <kbd className="rounded bg-muted px-1.5 py-0.5 font-semibold text-xs">
+            Cmd+K
+          </kbd>{" "}
+          to open the command palette.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Got it</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/informational/alert-dialog-informational-6.tsx

@@ -0,0 +1,43 @@
+import { Calendar } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Information with Status Badge";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline">Show Info</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle className="flex items-center gap-2">
+          <Calendar className="size-5" />
+          Scheduled Maintenance
+        </AlertDialogTitle>
+        <div className="inline-flex w-fit items-center rounded-full bg-blue-100 px-2.5 py-0.5 font-semibold text-blue-700 text-xs dark:bg-blue-900 dark:text-blue-300">
+          Upcoming
+        </div>
+        <AlertDialogDescription>
+          We'll be performing scheduled maintenance on Sunday, March 15th from
+          2:00 AM - 4:00 AM EST. During this time, the service may be
+          temporarily unavailable.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Understood</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/informational/alert-dialog-informational-7.tsx

@@ -0,0 +1,58 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Sparkles } from "lucide-react";
+
+export const title = "Information with Highlighted Content";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button variant="outline">
+        <Sparkles className="size-4" />
+        What's New
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>New in Version 2.0</AlertDialogTitle>
+        <AlertDialogDescription>
+          Check out the latest features and improvements:
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="space-y-2">
+        <div className="rounded-lg border bg-muted/50 p-3">
+          <div className="font-medium text-sm">Dark Mode</div>
+          <p className="text-muted-foreground text-xs">
+            Toggle between light and dark themes
+          </p>
+        </div>
+        <div className="rounded-lg border bg-muted/50 p-3">
+          <div className="font-medium text-sm">Improved Performance</div>
+          <p className="text-muted-foreground text-xs">
+            Up to 50% faster load times
+          </p>
+        </div>
+        <div className="rounded-lg border bg-muted/50 p-3">
+          <div className="font-medium text-sm">New Integrations</div>
+          <p className="text-muted-foreground text-xs">
+            Connect with your favorite tools
+          </p>
+        </div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogAction>Awesome!</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-1.tsx

@@ -0,0 +1,34 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Simple Success Message";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Success!</AlertDialogTitle>
+        <AlertDialogDescription>
+          Your changes have been saved successfully.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-2.tsx

@@ -0,0 +1,39 @@
+import { CheckCircle2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Icon";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="size-5 text-green-500" />
+          <AlertDialogTitle>Payment Successful</AlertDialogTitle>
+        </div>
+        <AlertDialogDescription>
+          Your payment of $99.00 has been processed successfully. A receipt has
+          been sent to your email.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Done</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-3.tsx

@@ -0,0 +1,39 @@
+import { CheckCircle2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Centered Icon";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader className="items-center">
+        <div className="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+          <CheckCircle2 className="size-6 text-green-600 dark:text-green-400" />
+        </div>
+        <AlertDialogTitle>Account Created!</AlertDialogTitle>
+        <AlertDialogDescription className="text-center">
+          Your account has been created successfully. You can now start using
+          all features.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Get Started</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-4.tsx

@@ -0,0 +1,52 @@
+import { CheckCircle2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Next Steps";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="size-5 text-green-500" />
+          <AlertDialogTitle>Project Created Successfully</AlertDialogTitle>
+        </div>
+        <AlertDialogDescription>
+          Your project has been created. Here's what you can do next:
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="space-y-2 text-sm">
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground">1.</span>
+          <span>Invite team members to collaborate</span>
+        </div>
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground">2.</span>
+          <span>Set up your project configuration</span>
+        </div>
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground">3.</span>
+          <span>Create your first task</span>
+        </div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-5.tsx

@@ -0,0 +1,50 @@
+import { CheckCircle2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Summary Details";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="size-5 text-green-500" />
+          <AlertDialogTitle>Files Uploaded Successfully</AlertDialogTitle>
+        </div>
+        <AlertDialogDescription>
+          All files have been uploaded and processed.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="rounded-lg border bg-green-50 p-4 dark:bg-green-950">
+        <div className="grid grid-cols-2 gap-2 text-sm">
+          <div className="text-muted-foreground">Total Files:</div>
+          <div className="font-medium">24</div>
+          <div className="text-muted-foreground">Total Size:</div>
+          <div className="font-medium">12.5 MB</div>
+          <div className="text-muted-foreground">Status:</div>
+          <div className="font-medium text-green-600 dark:text-green-400">
+            Completed
+          </div>
+        </div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogAction>Done</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-6.tsx

@@ -0,0 +1,41 @@
+import { CheckCircle2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Multiple Actions";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader className="items-center">
+        <div className="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+          <CheckCircle2 className="size-6 text-green-600 dark:text-green-400" />
+        </div>
+        <AlertDialogTitle>Invitation Sent!</AlertDialogTitle>
+        <AlertDialogDescription className="text-center">
+          Your team invitation has been sent successfully. They will receive an
+          email with instructions to join.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Close</AlertDialogCancel>
+        <AlertDialogAction>Invite Another</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/alert-dialog/success/alert-dialog-success-7.tsx

@@ -0,0 +1,44 @@
+import { PartyPopper } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export const title = "Success with Celebration";
+
+const Example = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <Button>Complete Action</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader className="items-center">
+        <div className="flex size-12 items-center justify-center rounded-full bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900">
+          <PartyPopper className="size-6 text-purple-600 dark:text-purple-400" />
+        </div>
+        <AlertDialogTitle>Milestone Achieved!</AlertDialogTitle>
+        <AlertDialogDescription className="text-center">
+          Congratulations! You've completed 100 tasks. Keep up the great work!
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="rounded-lg bg-gradient-to-r from-purple-50 to-pink-50 p-4 text-center dark:from-purple-950 dark:to-pink-950">
+        <div className="font-medium text-muted-foreground text-xs">
+          ACHIEVEMENT UNLOCKED
+        </div>
+        <div className="mt-1 font-semibold text-lg">Century Club</div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogAction>Awesome!</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-1.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "16:9 Aspect Ratio (Widescreen)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={16 / 9}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">16:9</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-2.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "4:3 Aspect Ratio (Traditional)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={4 / 3}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">4:3</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-3.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "1:1 Aspect Ratio (Square)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={1}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">1:1</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-4.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "21:9 Aspect Ratio (Ultrawide)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={21 / 9}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">21:9</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-5.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "3:2 Aspect Ratio (Photography)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={3 / 2}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">3:2</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-6.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "9:16 Aspect Ratio (Vertical/Mobile)";
+
+const Example = () => (
+  <div className="w-full max-w-xs">
+    <AspectRatio ratio={9 / 16}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">9:16</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/aspect-ratio/standard/aspect-ratio-standard-7.tsx

@@ -0,0 +1,15 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+export const title = "2:1 Aspect Ratio (Panoramic)";
+
+const Example = () => (
+  <div className="w-full max-w-md">
+    <AspectRatio ratio={2}>
+      <div className="flex size-full items-center justify-center rounded-md bg-muted">
+        <span className="text-muted-foreground text-sm">2:1</span>
+      </div>
+    </AspectRatio>
+  </div>
+);
+
+export default Example;

package/packages/patterns/avatar/square/avatar-square-1.tsx

@@ -0,0 +1,15 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export const title = "Avatar";
+
+const Example = () => (
+  <Avatar className="rounded-lg">
+    <AvatarImage
+      alt="@haydenbleasel"
+      src="https://github.com/haydenbleasel.png"
+    />
+    <AvatarFallback className="rounded-lg">HB</AvatarFallback>
+  </Avatar>
+);
+
+export default Example;