love-ui 1.0.0

package/packages/patterns/combobox/grouped/combobox-grouped-6.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Check, ChevronsUpDown, Clock } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export const title = "Recent vs All Items";
+
+const recentProjects = [
+  { value: "project-a", label: "Project Alpha" },
+  { value: "project-b", label: "Project Beta" },
+];
+
+const allProjects = [
+  { value: "project-a", label: "Project Alpha" },
+  { value: "project-b", label: "Project Beta" },
+  { value: "project-c", label: "Project Charlie" },
+  { value: "project-d", label: "Project Delta" },
+  { value: "project-e", label: "Project Echo" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-[250px] justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          {value
+            ? allProjects.find((item) => item.value === value)?.label
+            : "Select project..."}
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0">
+        <Command>
+          <CommandInput placeholder="Search projects..." />
+          <CommandList>
+            <CommandEmpty>No project found.</CommandEmpty>
+            <CommandGroup heading="Recent">
+              {recentProjects.map((item) => (
+                <CommandItem
+                  key={item.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                  value={item.value}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      value === item.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <Clock className="mr-2 size-3 opacity-50" />
+                  {item.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="All Projects">
+              {allProjects
+                .filter(
+                  (item) =>
+                    !recentProjects.find(
+                      (recent) => recent.value === item.value
+                    )
+                )
+                .map((item) => (
+                  <CommandItem
+                    key={item.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? "" : currentValue);
+                      setOpen(false);
+                    }}
+                    value={item.value}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 size-4",
+                        value === item.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {item.label}
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;

package/packages/patterns/combobox/grouped/combobox-grouped-7.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Check, ChevronsUpDown, Star } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export const title = "Favorites + All Items";
+
+const favoriteTools = [
+  { value: "vscode", label: "VS Code" },
+  { value: "figma", label: "Figma" },
+];
+
+const allTools = [
+  { value: "vscode", label: "VS Code" },
+  { value: "figma", label: "Figma" },
+  { value: "slack", label: "Slack" },
+  { value: "notion", label: "Notion" },
+  { value: "github", label: "GitHub" },
+  { value: "linear", label: "Linear" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-[250px] justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          {value
+            ? allTools.find((item) => item.value === value)?.label
+            : "Select tool..."}
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0">
+        <Command>
+          <CommandInput placeholder="Search tools..." />
+          <CommandList>
+            <CommandEmpty>No tool found.</CommandEmpty>
+            <CommandGroup heading="Favorites">
+              {favoriteTools.map((item) => (
+                <CommandItem
+                  key={item.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                  value={item.value}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      value === item.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <Star className="mr-2 size-3 fill-yellow-400 text-yellow-400" />
+                  {item.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="All Tools">
+              {allTools
+                .filter(
+                  (item) =>
+                    !favoriteTools.find((fav) => fav.value === item.value)
+                )
+                .map((item) => (
+                  <CommandItem
+                    key={item.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? "" : currentValue);
+                      setOpen(false);
+                    }}
+                    value={item.value}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 size-4",
+                        value === item.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    {item.label}
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;

package/packages/patterns/combobox/multi-select/combobox-multi-select-1.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export const title = "Multiple Items with Badges";
+
+const tags = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+  { value: "solid", label: "Solid" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-full justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          <div className="flex flex-wrap gap-1">
+            {selectedValues.length > 0 ? (
+              selectedValues.map((value) => (
+                <Badge className="mr-1" key={value} variant="secondary">
+                  {tags.find((tag) => tag.value === value)?.label}
+                  <button
+                    className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                    onClick={() =>
+                      setSelectedValues(
+                        selectedValues.filter((v) => v !== value)
+                      )
+                    }
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        setSelectedValues(
+                          selectedValues.filter((v) => v !== value)
+                        );
+                      }
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                  >
+                    <X className="size-3 text-muted-foreground hover:text-foreground" />
+                  </button>
+                </Badge>
+              ))
+            ) : (
+              <span className="text-muted-foreground">Select tags...</span>
+            )}
+          </div>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder="Search tags..." />
+          <CommandList>
+            <CommandEmpty>No tag found.</CommandEmpty>
+            <CommandGroup>
+              {tags.map((tag) => (
+                <CommandItem
+                  key={tag.value}
+                  onSelect={(currentValue) => {
+                    setSelectedValues(
+                      selectedValues.includes(currentValue)
+                        ? selectedValues.filter((v) => v !== currentValue)
+                        : [...selectedValues, currentValue]
+                    );
+                  }}
+                  value={tag.value}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      selectedValues.includes(tag.value)
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                  {tag.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;

package/packages/patterns/combobox/multi-select/combobox-multi-select-2.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export const title = "With Select All Option";
+
+const permissions = [
+  { value: "read", label: "Read" },
+  { value: "write", label: "Write" },
+  { value: "delete", label: "Delete" },
+  { value: "admin", label: "Admin" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const allSelected = selectedValues.length === permissions.length;
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-[250px] justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          {selectedValues.length > 0
+            ? `${selectedValues.length} permission(s) selected`
+            : "Select permissions..."}
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0">
+        <Command>
+          <CommandInput placeholder="Search permissions..." />
+          <CommandList>
+            <CommandEmpty>No permission found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                onSelect={() => {
+                  if (allSelected) {
+                    setSelectedValues([]);
+                  } else {
+                    setSelectedValues(permissions.map((p) => p.value));
+                  }
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 size-4",
+                    allSelected ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                <span className="font-medium">Select All</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup>
+              {permissions.map((permission) => (
+                <CommandItem
+                  key={permission.value}
+                  onSelect={(currentValue) => {
+                    setSelectedValues(
+                      selectedValues.includes(currentValue)
+                        ? selectedValues.filter((v) => v !== currentValue)
+                        : [...selectedValues, currentValue]
+                    );
+                  }}
+                  value={permission.value}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      selectedValues.includes(permission.value)
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                  {permission.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;

package/packages/patterns/combobox/multi-select/combobox-multi-select-3.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export const title = "With Item Count in Trigger";
+
+const skills = [
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "python", label: "Python" },
+  { value: "rust", label: "Rust" },
+  { value: "go", label: "Go" },
+  { value: "java", label: "Java" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([
+    "javascript",
+    "typescript",
+  ]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          {selectedValues.length > 0 ? (
+            <span>
+              {selectedValues.length} skill
+              {selectedValues.length > 1 ? "s" : ""} selected
+            </span>
+          ) : (
+            "Select skills..."
+          )}
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search skills..." />
+          <CommandList>
+            <CommandEmpty>No skill found.</CommandEmpty>
+            <CommandGroup>
+              {skills.map((skill) => (
+                <CommandItem
+                  key={skill.value}
+                  onSelect={(currentValue) => {
+                    setSelectedValues(
+                      selectedValues.includes(currentValue)
+                        ? selectedValues.filter((v) => v !== currentValue)
+                        : [...selectedValues, currentValue]
+                    );
+                  }}
+                  value={skill.value}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      selectedValues.includes(skill.value)
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                  {skill.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;

package/packages/patterns/combobox/multi-select/combobox-multi-select-4.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export const title = "With Checkboxes Visible";
+
+const categories = [
+  { value: "electronics", label: "Electronics" },
+  { value: "clothing", label: "Clothing" },
+  { value: "books", label: "Books" },
+  { value: "sports", label: "Sports" },
+  { value: "home", label: "Home & Garden" },
+];
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className="w-[250px] justify-between"
+          role="combobox"
+          variant="outline"
+        >
+          {selectedValues.length > 0
+            ? `${selectedValues.length} categor${selectedValues.length > 1 ? "ies" : "y"}`
+            : "Select categories..."}
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0">
+        <Command>
+          <CommandInput placeholder="Search categories..." />
+          <CommandList>
+            <CommandEmpty>No category found.</CommandEmpty>
+            <CommandGroup>
+              {categories.map((category) => (
+                <CommandItem
+                  key={category.value}
+                  onSelect={(currentValue) => {
+                    setSelectedValues(
+                      selectedValues.includes(currentValue)
+                        ? selectedValues.filter((v) => v !== currentValue)
+                        : [...selectedValues, currentValue]
+                    );
+                  }}
+                  value={category.value}
+                >
+                  <Checkbox
+                    checked={selectedValues.includes(category.value)}
+                    className="mr-2"
+                  />
+                  {category.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Example;