love-ui 1.0.0

package/packages/patterns/context-menu/text/context-menu-text-1.tsx

@@ -0,0 +1,40 @@
+import { Clipboard, Copy, Scissors } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export const title = "Text Editing Menu";
+
+const Example = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
+      Right click to edit text
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-56">
+      <ContextMenuItem>
+        <Scissors />
+        <span>Cut</span>
+        <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Copy />
+        <span>Copy</span>
+        <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Clipboard />
+        <span>Paste</span>
+        <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem>Select All</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export default Example;

package/packages/patterns/context-menu/text/context-menu-text-2.tsx

@@ -0,0 +1,45 @@
+import { Bold, Italic, Strikethrough, Underline } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export const title = "Text Formatting Menu";
+
+const Example = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
+      Right click to format text
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-56">
+      <ContextMenuItem>
+        <Bold />
+        <span>Bold</span>
+        <ContextMenuShortcut>⌘B</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Italic />
+        <span>Italic</span>
+        <ContextMenuShortcut>⌘I</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Underline />
+        <span>Underline</span>
+        <ContextMenuShortcut>⌘U</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Strikethrough />
+        <span>Strikethrough</span>
+        <ContextMenuShortcut>⌘⇧X</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem>Clear Formatting</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export default Example;

package/packages/patterns/context-menu/text/context-menu-text-3.tsx

@@ -0,0 +1,54 @@
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export const title = "Text Alignment Menu";
+
+const Example = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
+      Right click to align text
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-56">
+      <ContextMenuSub>
+        <ContextMenuSubTrigger>
+          <div className="flex items-center gap-2">
+            <AlignLeft />
+            <span>Align Text</span>
+          </div>
+        </ContextMenuSubTrigger>
+        <ContextMenuSubContent className="w-48">
+          <ContextMenuItem>
+            <AlignLeft />
+            <span>Left</span>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <AlignCenter />
+            <span>Center</span>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <AlignRight />
+            <span>Right</span>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <AlignJustify />
+            <span>Justify</span>
+          </ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSub>
+      <ContextMenuSeparator />
+      <ContextMenuItem>Increase Indent</ContextMenuItem>
+      <ContextMenuItem>Decrease Indent</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export default Example;

package/packages/patterns/context-menu/text/context-menu-text-4.tsx

@@ -0,0 +1,40 @@
+import { Check } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export const title = "Spell Check Menu";
+
+const Example = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
+      Right click misspeled word
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-56">
+      <ContextMenuLabel>Suggestions</ContextMenuLabel>
+      <ContextMenuSeparator />
+      <ContextMenuItem>
+        <Check />
+        <span>misspelled</span>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Check />
+        <span>misspelled</span>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Check />
+        <span>missplaced</span>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuItem>Add to Dictionary</ContextMenuItem>
+      <ContextMenuItem>Ignore</ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export default Example;

package/packages/patterns/context-menu/text/context-menu-text-5.tsx

@@ -0,0 +1,63 @@
+import { Palette, Type } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export const title = "Font and Style Menu";
+
+const Example = () => (
+  <ContextMenu>
+    <ContextMenuTrigger className="flex h-[200px] w-full max-w-lg items-center justify-center rounded-md border border-dashed text-sm">
+      Right click to style text
+    </ContextMenuTrigger>
+    <ContextMenuContent className="w-56">
+      <ContextMenuSub>
+        <ContextMenuSubTrigger>
+          <div className="flex items-center gap-2">
+            <Type />
+            <span>Font Family</span>
+          </div>
+        </ContextMenuSubTrigger>
+        <ContextMenuSubContent className="w-48">
+          <ContextMenuItem>Arial</ContextMenuItem>
+          <ContextMenuItem>Times New Roman</ContextMenuItem>
+          <ContextMenuItem>Courier New</ContextMenuItem>
+          <ContextMenuItem>Georgia</ContextMenuItem>
+          <ContextMenuItem>Verdana</ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSub>
+      <ContextMenuSub>
+        <ContextMenuSubTrigger>
+          <div className="flex items-center gap-2">
+            <Type />
+            <span>Font Size</span>
+          </div>
+        </ContextMenuSubTrigger>
+        <ContextMenuSubContent className="w-48">
+          <ContextMenuItem>Small (12px)</ContextMenuItem>
+          <ContextMenuItem>Medium (14px)</ContextMenuItem>
+          <ContextMenuItem>Large (16px)</ContextMenuItem>
+          <ContextMenuItem>Extra Large (20px)</ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSub>
+      <ContextMenuSeparator />
+      <ContextMenuItem>
+        <Palette />
+        <span>Text Color</span>
+      </ContextMenuItem>
+      <ContextMenuItem>
+        <Palette />
+        <span>Highlight Color</span>
+      </ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenu>
+);
+
+export default Example;

package/packages/patterns/data-table/advanced/data-table-advanced-1.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export const title = "Expandable Sub-Rows";
+
+type Project = {
+  id: string;
+  name: string;
+  status: string;
+  tasks?: Task[];
+};
+
+type Task = {
+  id: string;
+  name: string;
+  assignee: string;
+  status: string;
+};
+
+const data: Project[] = [
+  {
+    id: "1",
+    name: "Website Redesign",
+    status: "In Progress",
+    tasks: [
+      { id: "1-1", name: "Design mockups", assignee: "John", status: "Done" },
+      {
+        id: "1-2",
+        name: "Frontend dev",
+        assignee: "Jane",
+        status: "In Progress",
+      },
+      { id: "1-3", name: "Review & QA", assignee: "Bob", status: "Pending" },
+    ],
+  },
+  {
+    id: "2",
+    name: "Mobile App",
+    status: "Planning",
+    tasks: [
+      { id: "2-1", name: "User research", assignee: "Alice", status: "Done" },
+      {
+        id: "2-2",
+        name: "Wireframes",
+        assignee: "Charlie",
+        status: "In Progress",
+      },
+    ],
+  },
+  {
+    id: "3",
+    name: "API Integration",
+    status: "Completed",
+    tasks: [
+      { id: "3-1", name: "API design", assignee: "Dave", status: "Done" },
+      { id: "3-2", name: "Implementation", assignee: "Eve", status: "Done" },
+      { id: "3-3", name: "Testing", assignee: "Frank", status: "Done" },
+    ],
+  },
+];
+
+const columns: ColumnDef<Project>[] = [
+  {
+    id: "expander",
+    header: () => null,
+    cell: ({ row }) => {
+      return row.original.tasks ? (
+        <Button
+          className="h-8 w-8 p-0"
+          onClick={() => row.toggleExpanded()}
+          size="sm"
+          variant="ghost"
+        >
+          {row.getIsExpanded() ? (
+            <ChevronDownIcon className="size-4" />
+          ) : (
+            <ChevronRightIcon className="size-4" />
+          )}
+        </Button>
+      ) : null;
+    },
+  },
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("name")}</div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <div>{row.getValue("status")}</div>,
+  },
+];
+
+const Example = () => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: (row) => !!row.original.tasks,
+  });
+
+  return (
+    <div className="w-full max-w-4xl">
+      <div className="rounded-md border bg-background">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  <TableRow>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                  {row.getIsExpanded() && row.original.tasks && (
+                    <TableRow>
+                      <TableCell colSpan={columns.length}>
+                        <div className="rounded-md bg-muted/50 p-4">
+                          <div className="space-y-2">
+                            {row.original.tasks.map((task) => (
+                              <div
+                                className="flex items-center gap-4 text-sm"
+                                key={task.id}
+                              >
+                                <div className="flex-1 font-medium">
+                                  {task.name}
+                                </div>
+                                <div className="text-muted-foreground">
+                                  {task.assignee}
+                                </div>
+                                <div>{task.status}</div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </React.Fragment>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  className="h-24 text-center"
+                  colSpan={columns.length}
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default Example;

package/packages/patterns/data-table/advanced/data-table-advanced-2.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export const title = "Numeric Pagination";
+
+type Invoice = {
+  id: string;
+  client: string;
+  amount: number;
+  status: string;
+  date: string;
+};
+
+const data: Invoice[] = Array.from({ length: 25 }, (_, i) => ({
+  id: `INV-${String(i + 1).padStart(3, "0")}`,
+  client: `Client ${i + 1}`,
+  amount: Math.floor(Math.random() * 5000) + 500,
+  status: ["Paid", "Pending", "Overdue"][Math.floor(Math.random() * 3)],
+  date: `2024-01-${String((i % 28) + 1).padStart(2, "0")}`,
+}));
+
+const columns: ColumnDef<Invoice>[] = [
+  {
+    accessorKey: "id",
+    header: "Invoice ID",
+    cell: ({ row }) => <div className="font-medium">{row.getValue("id")}</div>,
+  },
+  {
+    accessorKey: "client",
+    header: "Client",
+    cell: ({ row }) => <div>{row.getValue("client")}</div>,
+  },
+  {
+    accessorKey: "date",
+    header: "Date",
+    cell: ({ row }) => <div>{row.getValue("date")}</div>,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <div>{row.getValue("status")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue("amount"));
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount);
+      return <div className="text-right font-medium">{formatted}</div>;
+    },
+  },
+];
+
+const Example = () => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 5,
+      },
+    },
+  });
+
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageCount = table.getPageCount();
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const showEllipsisStart = currentPage > 2;
+    const showEllipsisEnd = currentPage < pageCount - 3;
+
+    if (pageCount <= 7) {
+      return Array.from({ length: pageCount }, (_, i) => i);
+    }
+
+    pages.push(0);
+
+    if (showEllipsisStart) {
+      pages.push("...");
+      pages.push(currentPage - 1, currentPage, currentPage + 1);
+    } else {
+      pages.push(1, 2, 3);
+    }
+
+    if (showEllipsisEnd) {
+      pages.push("...");
+    } else if (currentPage < pageCount - 3) {
+      pages.push(pageCount - 3, pageCount - 2);
+    }
+
+    if (currentPage >= pageCount - 3) {
+      for (let i = Math.max(4, currentPage - 1); i < pageCount - 1; i++) {
+        if (!pages.includes(i)) {
+          pages.push(i);
+        }
+      }
+    }
+
+    pages.push(pageCount - 1);
+
+    return pages;
+  };
+
+  return (
+    <div className="w-full max-w-4xl">
+      <div className="rounded-md border bg-background">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  className="h-24 text-center"
+                  colSpan={columns.length}
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-center gap-1 py-4">
+        <Button
+          disabled={!table.getCanPreviousPage()}
+          onClick={() => table.previousPage()}
+          size="sm"
+          variant="outline"
+        >
+          Previous
+        </Button>
+        {getPageNumbers().map((page, index) =>
+          typeof page === "number" ? (
+            <Button
+              className="h-8 w-8 p-0"
+              key={index}
+              onClick={() => table.setPageIndex(page)}
+              size="sm"
+              variant={currentPage === page ? "default" : "outline"}
+            >
+              {page + 1}
+            </Button>
+          ) : (
+            <span className="px-2" key={index}>
+              {page}
+            </span>
+          )
+        )}
+        <Button
+          disabled={!table.getCanNextPage()}
+          onClick={() => table.nextPage()}
+          size="sm"
+          variant="outline"
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Example;