motion-ui-skill 2.0.0

package/components/table/orders-table.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+
+type Order = Readonly<{
+  id: string;
+  customer: string;
+  date: string;
+  amount: number;
+  status: "fulfilled" | "processing" | "cancelled";
+}>;
+
+const ORDERS: Order[] = [
+  {
+    id: "#3210",
+    customer: "Northwind Studio",
+    date: "Mar 8",
+    amount: 248,
+    status: "fulfilled",
+  },
+  {
+    id: "#3209",
+    customer: "Harbor Labs",
+    date: "Mar 8",
+    amount: 92,
+    status: "processing",
+  },
+  {
+    id: "#3208",
+    customer: "Elm & Co.",
+    date: "Mar 7",
+    amount: 156,
+    status: "fulfilled",
+  },
+  {
+    id: "#3207",
+    customer: "Papertrail",
+    date: "Mar 6",
+    amount: 64,
+    status: "cancelled",
+  },
+  {
+    id: "#3206",
+    customer: "Studio Nine",
+    date: "Mar 5",
+    amount: 312,
+    status: "fulfilled",
+  },
+];
+
+type SortKey = "date" | "amount" | "status";
+type SortDir = "asc" | "desc";
+
+const STATUS_LABEL: Record<Order["status"], string> = {
+  fulfilled: "Fulfilled",
+  processing: "Processing",
+  cancelled: "Cancelled",
+};
+
+function compareOrders(a: Order, b: Order, key: SortKey, dir: SortDir) {
+  const sign = dir === "asc" ? 1 : -1;
+  if (key === "amount") return (a.amount - b.amount) * sign;
+  if (key === "status") return a.status.localeCompare(b.status) * sign;
+  return a.date.localeCompare(b.date) * sign;
+}
+
+type OrdersTableProps = ComponentPropsWithoutRef<"div">;
+
+// E-commerce orders table — sort by date, amount, or status. Common admin dashboard pattern.
+export const OrdersTable = forwardRef<HTMLDivElement, OrdersTableProps>(
+  function OrdersTable({ className, ...props }, ref) {
+    const [sortKey, setSortKey] = useState<SortKey>("date");
+    const [sortDir, setSortDir] = useState<SortDir>("desc");
+
+    const sorted = useMemo(
+      () => [...ORDERS].sort((a, b) => compareOrders(a, b, sortKey, sortDir)),
+      [sortKey, sortDir],
+    );
+
+    function toggleSort(key: SortKey) {
+      if (sortKey === key) {
+        setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+        return;
+      }
+      setSortKey(key);
+      setSortDir("desc");
+    }
+
+    function SortIcon({ column }: { column: SortKey }) {
+      if (sortKey !== column) {
+        return (
+          <ArrowUpDown className="size-3 text-neutral-300" strokeWidth={2} />
+        );
+      }
+      return sortDir === "asc" ? (
+        <ArrowUp className="size-3 text-neutral-600" strokeWidth={2.5} />
+      ) : (
+        <ArrowDown className="size-3 text-neutral-600" strokeWidth={2.5} />
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "w-full max-w-lg overflow-hidden rounded-xl border border-neutral-200 bg-white",
+          className,
+        )}
+        {...props}
+      >
+        <div className="border-b border-neutral-100 px-4 py-3">
+          <p className="text-sm font-semibold text-neutral-900">
+            Recent orders
+          </p>
+          <p className="text-xs text-neutral-500">Last 7 days</p>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[300px] border-collapse text-left text-sm">
+            <thead>
+              <tr className="text-xs text-neutral-500">
+                <th className="px-4 py-2.5 font-medium">Order</th>
+                <th className="hidden px-3 py-2.5 font-medium md:table-cell">
+                  Customer
+                </th>
+                <th className="px-3 py-2.5 font-medium">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("date")}
+                    className="inline-flex items-center gap-1 transition-colors hover:text-neutral-700"
+                  >
+                    Date
+                    <SortIcon column="date" />
+                  </button>
+                </th>
+                <th className="px-3 py-2.5 text-right font-medium">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("amount")}
+                    className="ml-auto inline-flex items-center gap-1 transition-colors hover:text-neutral-700"
+                  >
+                    Total
+                    <SortIcon column="amount" />
+                  </button>
+                </th>
+                <th className="px-4 py-2.5 font-medium">
+                  <button
+                    type="button"
+                    onClick={() => toggleSort("status")}
+                    className="inline-flex items-center gap-1 transition-colors hover:text-neutral-700"
+                  >
+                    Status
+                    <SortIcon column="status" />
+                  </button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sorted.map((order) => (
+                <tr
+                  key={order.id}
+                  className="border-t border-neutral-100 transition-colors hover:bg-neutral-50/80"
+                >
+                  <td className="px-4 py-3 font-medium text-neutral-900">
+                    {order.id}
+                  </td>
+                  <td className="hidden px-3 py-3 text-neutral-600 md:table-cell">
+                    {order.customer}
+                  </td>
+                  <td className="px-3 py-3 text-neutral-500">{order.date}</td>
+                  <td className="px-3 py-3 text-right text-neutral-900 tabular-nums">
+                    ${order.amount.toFixed(2)}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-neutral-600">
+                    {STATUS_LABEL[order.status]}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  },
+);
+
+OrdersTable.displayName = "OrdersTable";

package/components/table/recent-transactions-table.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+type Transaction = Readonly<{
+  id: string;
+  label: string;
+  date: string;
+  amount: number;
+}>;
+
+const TRANSACTIONS: Transaction[] = [
+  { id: "t1", label: "Payment from Northwind", date: "Mar 8", amount: 420 },
+  { id: "t2", label: "AWS infrastructure", date: "Mar 8", amount: -31.2 },
+  { id: "t3", label: "Stripe payout", date: "Mar 7", amount: 890 },
+  { id: "t4", label: "Refund — Order #3207", date: "Mar 6", amount: -64 },
+  { id: "t5", label: "Client retainer", date: "Mar 5", amount: 250 },
+  { id: "t6", label: "Figma subscription", date: "Mar 4", amount: -15 },
+  { id: "t7", label: "Wire transfer", date: "Mar 3", amount: 1000 },
+  { id: "t8", label: "Payroll", date: "Mar 2", amount: -890 },
+];
+
+const PAGE_SIZE = 5;
+
+type RecentTransactionsTableProps = ComponentPropsWithoutRef<"div">;
+
+// Recent transactions — Stripe-style payment list with pagination.
+export const RecentTransactionsTable = forwardRef<
+  HTMLDivElement,
+  RecentTransactionsTableProps
+>(function RecentTransactionsTable({ className, ...props }, ref) {
+  const [page, setPage] = useState(0);
+
+  const totalPages = Math.ceil(TRANSACTIONS.length / PAGE_SIZE);
+  const slice = useMemo(
+    () => TRANSACTIONS.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE),
+    [page],
+  );
+
+  function formatAmount(n: number) {
+    const abs = Math.abs(n).toFixed(2);
+    return n >= 0 ? `+$${abs}` : `−$${abs}`;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "w-full max-w-md overflow-hidden rounded-xl border border-neutral-200 bg-white",
+        className,
+      )}
+      {...props}
+    >
+      <div className="border-b border-neutral-100 px-4 py-3">
+        <p className="text-sm font-semibold text-neutral-900">Transactions</p>
+        <p className="text-xs text-neutral-500">This month</p>
+      </div>
+
+      <table className="w-full border-collapse text-left text-sm">
+        <thead>
+          <tr className="text-xs text-neutral-500">
+            <th className="px-4 py-2.5 font-medium">Description</th>
+            <th className="px-3 py-2.5 font-medium">Date</th>
+            <th className="px-4 py-2.5 text-right font-medium">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          {slice.map((tx) => (
+            <tr
+              key={tx.id}
+              className="border-t border-neutral-100 transition-colors hover:bg-neutral-50/80"
+            >
+              <td className="max-w-[10rem] truncate px-4 py-3 font-medium text-neutral-900">
+                {tx.label}
+              </td>
+              <td className="px-3 py-3 text-neutral-500">{tx.date}</td>
+              <td
+                className={cn(
+                  "px-4 py-3 text-right tabular-nums",
+                  tx.amount >= 0 ? "text-neutral-900" : "text-neutral-500",
+                )}
+              >
+                {formatAmount(tx.amount)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div className="flex items-center justify-between border-t border-neutral-100 px-4 py-2.5">
+        <button
+          type="button"
+          disabled={page === 0}
+          onClick={() => setPage((p) => p - 1)}
+          className="flex size-7 items-center justify-center rounded-md text-neutral-500 transition-colors enabled:hover:bg-neutral-100 disabled:opacity-30"
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="size-4" strokeWidth={2} />
+        </button>
+        <span className="text-xs text-neutral-500">
+          Page {page + 1} of {totalPages}
+        </span>
+        <button
+          type="button"
+          disabled={page >= totalPages - 1}
+          onClick={() => setPage((p) => p + 1)}
+          className="flex size-7 items-center justify-center rounded-md text-neutral-500 transition-colors enabled:hover:bg-neutral-100 disabled:opacity-30"
+          aria-label="Next page"
+        >
+          <ChevronRight className="size-4" strokeWidth={2} />
+        </button>
+      </div>
+    </div>
+  );
+});
+
+RecentTransactionsTable.displayName = "RecentTransactionsTable";

package/components/table/tasks-table.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import Image from "next/image";
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Check } from "lucide-react";
+
+type Task = Readonly<{
+  id: string;
+  title: string;
+  assignee: string;
+  avatar: string;
+  due: string;
+  done: boolean;
+}>;
+
+const TASKS: Task[] = [
+  {
+    id: "tk1",
+    title: "Ship table components",
+    assignee: "Alex Morgan",
+    avatar: "/profile-picture.png",
+    due: "Today",
+    done: true,
+  },
+  {
+    id: "tk2",
+    title: "Review notification polish",
+    assignee: "Rupam Sen",
+    avatar: "/woman.png",
+    due: "Tomorrow",
+    done: false,
+  },
+  {
+    id: "tk3",
+    title: "Update showcase copy",
+    assignee: "Ava Chen",
+    avatar: "/profile-picture.png",
+    due: "Mar 12",
+    done: false,
+  },
+  {
+    id: "tk4",
+    title: "Fix mobile layout",
+    assignee: "Sofia Ortiz",
+    avatar: "/woman.png",
+    due: "Mar 14",
+    done: false,
+  },
+];
+
+type TasksTableProps = ComponentPropsWithoutRef<"div">;
+
+// Project tasks table — tap checkbox to mark done. Assignee avatars, due dates.
+export const TasksTable = forwardRef<HTMLDivElement, TasksTableProps>(
+  function TasksTable({ className, ...props }, ref) {
+    const [doneIds, setDoneIds] = useState<Set<string>>(() => new Set(["tk1"]));
+
+    function toggleDone(id: string) {
+      setDoneIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+
+    const completed = doneIds.size;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "w-full max-w-lg overflow-hidden rounded-xl border border-neutral-200 bg-white",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
+          <div>
+            <p className="text-sm font-semibold text-neutral-900">Tasks</p>
+            <p className="text-xs text-neutral-500">
+              {`${completed} of ${TASKS.length} done`}
+            </p>
+          </div>
+        </div>
+
+        <table className="w-full border-collapse text-left text-sm">
+          <thead>
+            <tr className="text-xs text-neutral-500">
+              <th className="w-10 px-4 py-2.5" />
+              <th className="px-2 py-2.5 font-medium">Task</th>
+              <th className="hidden px-3 py-2.5 font-medium md:table-cell">
+                Assignee
+              </th>
+              <th className="px-4 py-2.5 font-medium">Due</th>
+            </tr>
+          </thead>
+          <tbody>
+            {TASKS.map((task) => {
+              const done = doneIds.has(task.id);
+              return (
+                <tr
+                  key={task.id}
+                  className="border-t border-neutral-100 transition-colors hover:bg-neutral-50/80"
+                >
+                  <td className="px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => toggleDone(task.id)}
+                      aria-label={done ? "Mark incomplete" : "Mark complete"}
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded border transition-colors",
+                        done
+                          ? "border-neutral-900 bg-neutral-900"
+                          : "border-neutral-300 bg-white hover:border-neutral-400",
+                      )}
+                    >
+                      {done ? (
+                        <Check
+                          className="size-2.5 text-white"
+                          strokeWidth={3}
+                        />
+                      ) : null}
+                    </button>
+                  </td>
+                  <td className="px-2 py-3">
+                    <span
+                      className={cn(
+                        "font-medium transition-colors",
+                        done
+                          ? "text-neutral-400 line-through"
+                          : "text-neutral-900",
+                      )}
+                    >
+                      {task.title}
+                    </span>
+                  </td>
+                  <td className="hidden px-3 py-3 md:table-cell">
+                    <div className="flex items-center gap-2">
+                      <Image
+                        src={task.avatar}
+                        alt={task.assignee}
+                        width={24}
+                        height={24}
+                        className="size-6 shrink-0 rounded-full object-cover"
+                      />
+                      <span className="text-neutral-600">{task.assignee}</span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-neutral-500">{task.due}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  },
+);
+
+TasksTable.displayName = "TasksTable";

package/components/table/team-members-table.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import Image from "next/image";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { MoreHorizontal } from "lucide-react";
+
+type Member = Readonly<{
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar: string;
+  status: "active" | "invited";
+}>;
+
+const MEMBERS: Member[] = [
+  {
+    id: "m1",
+    name: "Alex Morgan",
+    email: "alex@studio.dev",
+    role: "Lead Engineer",
+    avatar: "/profile-picture.png",
+    status: "active",
+  },
+  {
+    id: "m2",
+    name: "Rupam Sen",
+    email: "rupam@studio.dev",
+    role: "Design Lead",
+    avatar: "/woman.png",
+    status: "active",
+  },
+  {
+    id: "m3",
+    name: "Ava Chen",
+    email: "ava@studio.dev",
+    role: "Product",
+    avatar: "/profile-picture.png",
+    status: "active",
+  },
+  {
+    id: "m4",
+    name: "Sofia Ortiz",
+    email: "sofia@studio.dev",
+    role: "Research",
+    avatar: "/woman.png",
+    status: "invited",
+  },
+];
+
+type TeamMembersTableProps = ComponentPropsWithoutRef<"div">;
+
+// Team members table — avatar, name, email, role, and status. Uses /profile-picture.png and /woman.png.
+export const TeamMembersTable = forwardRef<
+  HTMLDivElement,
+  TeamMembersTableProps
+>(function TeamMembersTable({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "w-full max-w-lg overflow-hidden rounded-xl border border-neutral-200 bg-white",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
+        <div>
+          <p className="text-sm font-semibold text-neutral-900">Team members</p>
+          <p className="text-xs text-neutral-500">
+            {`${MEMBERS.length} people`}
+          </p>
+        </div>
+        <button
+          type="button"
+          className="rounded-lg px-2.5 py-1.5 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100"
+        >
+          Invite
+        </button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[320px] border-collapse text-left text-sm">
+          <thead>
+            <tr className="text-xs text-neutral-500">
+              <th className="px-4 py-2.5 font-medium">Member</th>
+              <th className="hidden px-3 py-2.5 font-medium md:table-cell">
+                Role
+              </th>
+              <th className="px-3 py-2.5 font-medium">Status</th>
+              <th className="w-10 px-2 py-2.5" aria-label="Actions" />
+            </tr>
+          </thead>
+          <tbody>
+            {MEMBERS.map((member) => (
+              <tr
+                key={member.id}
+                className="border-t border-neutral-100 transition-colors hover:bg-neutral-50/80"
+              >
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-3">
+                    <Image
+                      src={member.avatar}
+                      alt={member.name}
+                      width={32}
+                      height={32}
+                      className="size-8 shrink-0 rounded-full object-cover"
+                    />
+                    <div className="min-w-0">
+                      <p className="truncate font-medium text-neutral-900">
+                        {member.name}
+                      </p>
+                      <p className="truncate text-xs text-neutral-500">
+                        {member.email}
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td className="hidden px-3 py-3 text-neutral-600 md:table-cell">
+                  {member.role}
+                </td>
+                <td className="px-3 py-3">
+                  <span className="inline-flex items-center gap-1.5 text-xs text-neutral-600">
+                    <span
+                      className={cn(
+                        "size-1.5 rounded-full",
+                        member.status === "active"
+                          ? "bg-emerald-500"
+                          : "bg-neutral-300",
+                      )}
+                    />
+                    {member.status === "active" ? "Active" : "Invited"}
+                  </span>
+                </td>
+                <td className="px-2 py-3">
+                  <button
+                    type="button"
+                    aria-label={`Actions for ${member.name}`}
+                    className="flex size-7 items-center justify-center rounded-md text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+                  >
+                    <MoreHorizontal className="size-4" strokeWidth={1.75} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+});
+
+TeamMembersTable.displayName = "TeamMembersTable";