love-ui 1.0.0

package/packages/patterns/input-group/ai/input-group-ai-1.tsx

@@ -0,0 +1,68 @@
+import { ArrowUpIcon, PlusIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+
+export const title = "AI Prompt Input";
+
+const Example = () => (
+  <div className="flex w-full max-w-2xl flex-col gap-4">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea placeholder="Ask, Search or Chat..." />
+      <InputGroupAddon align="block-end">
+        <InputGroupButton
+          className="rounded-full"
+          size="icon-xs"
+          variant="outline"
+        >
+          <PlusIcon />
+        </InputGroupButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <InputGroupButton variant="ghost">Auto</InputGroupButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            className="[--radius:0.95rem]"
+            side="top"
+          >
+            <DropdownMenuItem>Auto</DropdownMenuItem>
+            <DropdownMenuItem>Agent</DropdownMenuItem>
+            <DropdownMenuItem>Manual</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <InputGroupText className="ml-auto">52% used</InputGroupText>
+        <Separator className="!h-4" orientation="vertical" />
+        <InputGroupButton
+          className="rounded-full"
+          disabled
+          size="icon-xs"
+          variant="default"
+        >
+          <ArrowUpIcon />
+          <span className="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+
+    <small className="text-center text-muted-foreground">
+      For better AI components, check out{" "}
+      <a className="underline" href="https://ai-sdk.dev/elements/overview">
+        AI Elements
+      </a>
+    </small>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/ai/input-group-ai-2.tsx

@@ -0,0 +1,42 @@
+import { ArrowUpIcon, SparklesIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+
+export const title = "Simple AI Prompt";
+
+const Example = () => (
+  <div className="flex w-full max-w-2xl flex-col gap-4">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea placeholder="Ask me anything..." />
+      <InputGroupAddon align="block-end">
+        <InputGroupButton size="icon-xs" variant="ghost">
+          <SparklesIcon />
+        </InputGroupButton>
+        <InputGroupText className="ml-auto">0/4000</InputGroupText>
+        <Separator className="!h-4" orientation="vertical" />
+        <InputGroupButton
+          className="rounded-full"
+          size="icon-xs"
+          variant="default"
+        >
+          <ArrowUpIcon />
+          <span className="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+    <small className="text-center text-muted-foreground">
+      For better AI components, check out{" "}
+      <a className="underline" href="https://ai-sdk.dev/elements/overview">
+        AI Elements
+      </a>
+    </small>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/ai/input-group-ai-3.tsx

@@ -0,0 +1,60 @@
+import { ArrowUpIcon, FileIcon, ImageIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+
+export const title = "AI with Attachments";
+
+const Example = () => (
+  <div className="flex w-full max-w-2xl flex-col gap-4">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea placeholder="Describe your task..." />
+      <InputGroupAddon align="block-end">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <InputGroupButton size="icon-xs" variant="ghost">
+              <FileIcon />
+            </InputGroupButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top">
+            <DropdownMenuItem>
+              <FileIcon className="mr-2" />
+              Attach File
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ImageIcon className="mr-2" />
+              Attach Image
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <InputGroupText className="ml-auto">GPT-4</InputGroupText>
+        <InputGroupButton
+          className="rounded-full"
+          size="icon-xs"
+          variant="default"
+        >
+          <ArrowUpIcon />
+          <span className="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+    <small className="text-center text-muted-foreground">
+      For better AI components, check out{" "}
+      <a className="underline" href="https://ai-sdk.dev/elements/overview">
+        AI Elements
+      </a>
+    </small>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/ai/input-group-ai-4.tsx

@@ -0,0 +1,61 @@
+import { ArrowUpIcon, MicIcon, PaperclipIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+
+export const title = "AI with Voice";
+
+const Example = () => (
+  <div className="flex w-full max-w-2xl flex-col gap-4">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea placeholder="Type or speak your message..." />
+      <InputGroupAddon align="block-end">
+        <InputGroupButton size="icon-xs" variant="ghost">
+          <PaperclipIcon />
+        </InputGroupButton>
+        <InputGroupButton size="icon-xs" variant="ghost">
+          <MicIcon />
+        </InputGroupButton>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <InputGroupButton className="ml-auto text-xs" variant="ghost">
+              Claude 3.5
+            </InputGroupButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" side="top">
+            <DropdownMenuItem>Claude 3.5 Sonnet</DropdownMenuItem>
+            <DropdownMenuItem>Claude 3 Opus</DropdownMenuItem>
+            <DropdownMenuItem>Claude 3 Haiku</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Separator className="!h-4" orientation="vertical" />
+        <InputGroupButton
+          className="rounded-full"
+          size="icon-xs"
+          variant="default"
+        >
+          <ArrowUpIcon />
+          <span className="sr-only">Send</span>
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+    <small className="text-center text-muted-foreground">
+      For better AI components, check out{" "}
+      <a className="underline" href="https://ai-sdk.dev/elements/overview">
+        AI Elements
+      </a>
+    </small>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/buttons/input-group-buttons-1.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Copy Button";
+
+const Example = () => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <InputGroup className="w-full max-w-sm bg-background">
+      <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton aria-label="Copy" onClick={handleCopy} size="icon-xs">
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+export default Example;

package/packages/patterns/input-group/buttons/input-group-buttons-2.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { HeartIcon, InfoIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Multiple Action Buttons";
+
+const Example = () => {
+  const [favorited, setFavorited] = useState(false);
+
+  return (
+    <InputGroup className="w-full max-w-sm bg-background">
+      <InputGroupInput placeholder="https://github.com/shadcn" readOnly />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton aria-label="Info" size="icon-xs" variant="ghost">
+          <InfoIcon />
+        </InputGroupButton>
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          aria-label="Favorite"
+          onClick={() => setFavorited(!favorited)}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <HeartIcon className={favorited ? "fill-current" : ""} />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+export default Example;

package/packages/patterns/input-group/buttons/input-group-buttons-3.tsx

@@ -0,0 +1,23 @@
+import { SearchIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Search Button";
+
+const Example = () => (
+  <InputGroup className="w-full max-w-sm bg-background">
+    <InputGroupInput placeholder="Search..." />
+    <InputGroupAddon align="inline-end" className="pr-2">
+      <InputGroupButton size="sm" variant="secondary">
+        Search
+        <SearchIcon />
+      </InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export default Example;

package/packages/patterns/input-group/buttons/input-group-buttons-4.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { EyeIcon, EyeOffIcon, RefreshCwIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Password Actions";
+
+const Example = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <InputGroup className="w-full max-w-sm bg-background">
+      <InputGroupInput
+        placeholder="Enter password"
+        type={visible ? "text" : "password"}
+      />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          aria-label="Toggle visibility"
+          onClick={() => setVisible(!visible)}
+          size="icon-xs"
+          variant="ghost"
+        >
+          {visible ? <EyeOffIcon /> : <EyeIcon />}
+        </InputGroupButton>
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton aria-label="Generate" size="icon-xs" variant="ghost">
+          <RefreshCwIcon />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+};
+
+export default Example;

package/packages/patterns/input-group/custom/input-group-custom-1.tsx

@@ -0,0 +1,24 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+
+export const title = "Textarea with Actions";
+
+const Example = () => (
+  <InputGroup className="w-full max-w-sm bg-background">
+    <InputGroupTextarea
+      className="min-h-[100px]"
+      placeholder="Type your message..."
+    />
+    <InputGroupAddon align="block-end">
+      <InputGroupButton className="ml-auto" size="sm" variant="default">
+        Submit
+      </InputGroupButton>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export default Example;

package/packages/patterns/input-group/custom/input-group-custom-2.tsx

@@ -0,0 +1,31 @@
+import { SendIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+
+export const title = "Textarea with Counter";
+
+const Example = () => (
+  <div className="flex w-full max-w-sm flex-col gap-6">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea
+        className="min-h-[100px]"
+        maxLength={500}
+        placeholder="Write your message..."
+      />
+      <InputGroupAddon align="block-end">
+        <InputGroupText>0/500</InputGroupText>
+        <InputGroupButton className="ml-auto" size="sm" variant="default">
+          Post
+          <SendIcon />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/custom/input-group-custom-3.tsx

@@ -0,0 +1,38 @@
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+
+export const title = "Textarea with Toolbar";
+
+const Example = () => (
+  <div className="flex w-full max-w-sm flex-col gap-6">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea
+        className="min-h-[100px]"
+        placeholder="Write your content..."
+      />
+      <InputGroupAddon align="block-start" className="border-b">
+        <InputGroupButton aria-label="Bold" size="icon-xs" variant="ghost">
+          <BoldIcon />
+        </InputGroupButton>
+        <InputGroupButton aria-label="Italic" size="icon-xs" variant="ghost">
+          <ItalicIcon />
+        </InputGroupButton>
+        <InputGroupButton aria-label="Underline" size="icon-xs" variant="ghost">
+          <UnderlineIcon />
+        </InputGroupButton>
+      </InputGroupAddon>
+      <InputGroupAddon align="block-end">
+        <InputGroupButton className="ml-auto" size="sm" variant="default">
+          Submit
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/custom/input-group-custom-4.tsx

@@ -0,0 +1,33 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+
+export const title = "Textarea with Label";
+
+const Example = () => (
+  <div className="flex w-full max-w-sm flex-col gap-6">
+    <InputGroup className="bg-background">
+      <InputGroupTextarea
+        className="min-h-[100px]"
+        id="comment"
+        placeholder="Share your thoughts..."
+      />
+      <InputGroupAddon align="block-start" className="border-b">
+        <Label className="text-foreground" htmlFor="comment">
+          Comment
+        </Label>
+      </InputGroupAddon>
+      <InputGroupAddon align="block-end">
+        <InputGroupButton className="ml-auto" size="sm" variant="default">
+          Post Comment
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+);
+
+export default Example;

package/packages/patterns/input-group/dropdown/input-group-dropdown-1.tsx

@@ -0,0 +1,37 @@
+import { MoreHorizontalIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Dropdown Actions";
+
+const Example = () => (
+  <InputGroup className="w-full max-w-sm bg-background">
+    <InputGroupInput placeholder="Enter file name" />
+    <InputGroupAddon align="inline-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <InputGroupButton aria-label="More" size="icon-xs" variant="ghost">
+            <MoreHorizontalIcon />
+          </InputGroupButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Copy path</DropdownMenuItem>
+          <DropdownMenuItem>Open location</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export default Example;

package/packages/patterns/input-group/dropdown/input-group-dropdown-2.tsx

@@ -0,0 +1,37 @@
+import { ChevronDownIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "Search Filters";
+
+const Example = () => (
+  <InputGroup className="w-full max-w-sm bg-background [--radius:1rem]">
+    <InputGroupInput placeholder="Search products" />
+    <InputGroupAddon align="inline-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <InputGroupButton className="!pr-1.5 text-xs" variant="ghost">
+            Category <ChevronDownIcon className="size-3" />
+          </InputGroupButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="[--radius:0.95rem]">
+          <DropdownMenuItem>All Products</DropdownMenuItem>
+          <DropdownMenuItem>Electronics</DropdownMenuItem>
+          <DropdownMenuItem>Clothing</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+export default Example;

package/packages/patterns/input-group/dropdown/input-group-dropdown-3.tsx

@@ -0,0 +1,56 @@
+import { ChevronDownIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export const title = "URL Builder with Dropdown";
+
+const Example = () => (
+  <div className="flex w-full max-w-sm flex-col gap-4">
+    <InputGroup className="bg-background">
+      <InputGroupAddon>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <InputGroupButton className="text-xs" variant="ghost">
+              https:// <ChevronDownIcon className="size-3" />
+            </InputGroupButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem>https://</DropdownMenuItem>
+            <DropdownMenuItem>http://</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </InputGroupAddon>
+      <InputGroupInput placeholder="example.com" />
+    </InputGroup>
+    <InputGroup className="bg-background">
+      <InputGroupInput placeholder="subdomain" />
+      <InputGroupAddon align="inline-end">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <InputGroupButton className="text-xs" variant="ghost">
+              .com <ChevronDownIcon className="size-3" />
+            </InputGroupButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>.com</DropdownMenuItem>
+            <DropdownMenuItem>.net</DropdownMenuItem>
+            <DropdownMenuItem>.org</DropdownMenuItem>
+            <DropdownMenuItem>.io</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+);
+
+export default Example;