motion-ui-skill 2.0.0

package/components/socials/threads-post-card.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Heart, MessageCircle, Repeat, Send } from "lucide-react";
+
+export type ThreadsPostCardProps = Readonly<
+  {
+    username?: string;
+    content?: string;
+    time?: string;
+    likes?: number;
+    replies?: number;
+    avatar?: string;
+    postImage?: string;
+    showImage?: boolean;
+    onLike?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Threads Post component — styled with Tailwind CSS.
+export const ThreadsPostCard = forwardRef<HTMLDivElement, ThreadsPostCardProps>(
+  (
+    {
+      className,
+      username = "alex.dev",
+      content = "Just dropped 14 new email & editor widgets. All white background, all interactive. Which one should I build next?",
+      time = "1h",
+      likes = 892,
+      replies = 47,
+      avatar = "/profile-picture.png",
+      postImage = "/background1.webp",
+      showImage = true,
+      onLike,
+      ...props
+    },
+    ref,
+  ) => {
+    const [liked, setLiked] = useState(false);
+    const [likeCount, setLikeCount] = useState(likes);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="threads-post-card"
+        className={cn(
+          "w-72 rounded-2xl border border-neutral-100 bg-white p-4 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex gap-3">
+          <div className="flex flex-col items-center">
+            <div className="h-10 w-10 overflow-hidden rounded-full ring-2 ring-neutral-100">
+              <Image
+                src={avatar}
+                alt={username}
+                width={40}
+                height={40}
+                className="object-cover"
+              />
+            </div>
+            <div className="mt-1 w-px flex-1 bg-neutral-200" />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="text-[13px] font-semibold text-neutral-900">
+                {username}
+              </span>
+              <span className="text-[11px] text-neutral-400">{time}</span>
+            </div>
+            <p className="mt-1.5 text-[13px] leading-relaxed text-neutral-800">
+              {content}
+            </p>
+
+            {showImage && (
+              <div className="relative mt-2.5 aspect-16/10 overflow-hidden rounded-xl border border-neutral-100">
+                <Image
+                  src={postImage}
+                  alt="Thread attachment"
+                  fill
+                  sizes="288px"
+                  className="object-cover"
+                />
+              </div>
+            )}
+
+            <div className="mt-3 flex items-center gap-4">
+              {(
+                [
+                  {
+                    id: "like",
+                    label: "Like",
+                    icon: Heart,
+                    count: likeCount,
+                    active: liked,
+                    onClick: () => {
+                      setLiked(!liked);
+                      setLikeCount(liked ? likes : likes + 1);
+                      onLike?.();
+                    },
+                  },
+                  {
+                    id: "reply",
+                    label: "Reply",
+                    icon: MessageCircle,
+                    count: replies,
+                  },
+                  {
+                    id: "repost",
+                    label: "Repost",
+                    icon: Repeat,
+                    count: 12,
+                  },
+                  {
+                    id: "share",
+                    label: "Share",
+                    icon: Send,
+                    count: null,
+                  },
+                ] as const
+              ).map((action) => {
+                const { id, label, icon: Icon, count } = action;
+                const active = "active" in action ? action.active : false;
+                const onClick =
+                  "onClick" in action ? action.onClick : undefined;
+
+                return (
+                  <button
+                    key={id}
+                    type="button"
+                    aria-label={label}
+                    aria-pressed={id === "like" ? active : undefined}
+                    onClick={onClick}
+                    className="flex cursor-pointer items-center gap-1 text-neutral-500 transition-colors hover:text-neutral-900"
+                  >
+                    <Icon
+                      size={14}
+                      className={active ? "fill-rose-500 text-rose-500" : ""}
+                      fill={active ? "rose-500" : "white"}
+                    />
+                    {count !== null && (
+                      <span className="text-[11px] font-medium tabular-nums">
+                        {count}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+ThreadsPostCard.displayName = "ThreadsPostCard";

package/components/socials/twitter-post-card.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import {
+  Bookmark,
+  MessageCircle,
+  Ellipsis,
+  Heart,
+  Repeat,
+  Share,
+} from "lucide-react";
+
+export type TwitterPostCardProps = Readonly<
+  {
+    username?: string;
+    handle?: string;
+    timestamp?: string;
+    content?: string;
+    hashtags?: string;
+    comments?: number;
+    reposts?: number;
+    likes?: number;
+    avatar?: string;
+    avatarAlt?: string;
+    menuIcon?: ReactNode;
+    commentIcon?: ReactNode;
+    repostIcon?: ReactNode;
+    likeIcon?: ReactNode;
+    bookmarkIcon?: ReactNode;
+    shareIcon?: ReactNode;
+    onComment?: () => void;
+    onRepost?: () => void;
+    onLike?: () => void;
+    onBookmark?: () => void;
+    onShare?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Twitter Post component — styled with Tailwind CSS.
+export const TwitterPostCard = forwardRef<HTMLDivElement, TwitterPostCardProps>(
+  (
+    {
+      className,
+      username = "Alex Morgan",
+      handle = "@alexmorgan",
+      timestamp = "2h",
+      content = "Building the future of UI with minimalist design and performance-first components. Obsessed with the little details.",
+      hashtags = "#WebDev #Design",
+      comments = 12,
+      reposts = 38,
+      likes = 450,
+      avatar = "/profile-picture.png",
+      avatarAlt = "User avatar",
+      menuIcon,
+      commentIcon,
+      repostIcon,
+      likeIcon,
+      bookmarkIcon,
+      shareIcon,
+      onComment,
+      onRepost,
+      onLike,
+      onBookmark,
+      onShare,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="twitter-post-card"
+        className={cn(
+          "max-w-96 rounded-2xl border border-neutral-100 bg-white p-5 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div data-slot="twitter-post-card-header" className="flex gap-3">
+          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-neutral-800">
+            <Image
+              src={avatar}
+              alt={avatarAlt}
+              width={32}
+              height={32}
+              className="w-8"
+              sizes="32px"
+            />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-wrap items-center gap-1">
+                <span
+                  title={username}
+                  className="text-sm font-bold text-neutral-900"
+                >
+                  {username}
+                </span>
+
+                <span title={handle} className="text-xs text-neutral-400">
+                  {handle} · {timestamp}
+                </span>
+              </div>
+
+              <div className="shrink-0 text-neutral-400">
+                {menuIcon ?? <Ellipsis className="h-4 w-4" />}
+              </div>
+            </div>
+
+            <p
+              data-slot="twitter-post-card-content"
+              className="mt-2 text-sm leading-relaxed text-neutral-800"
+            >
+              {content} <span className="text-sky-500">{hashtags}</span>
+            </p>
+
+            <div
+              data-slot="twitter-post-card-actions"
+              className="mt-4 flex max-w-xs justify-between text-neutral-400"
+            >
+              <button
+                type="button"
+                aria-label={`Comment on post from ${username}`}
+                onClick={onComment}
+                className="flex cursor-pointer items-center gap-1 transition-colors hover:text-sky-500"
+              >
+                {commentIcon ?? <MessageCircle size={14} />}
+                <span className="text-xs">{comments.toLocaleString()}</span>
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Repost post from ${username}`}
+                onClick={onRepost}
+                className="flex cursor-pointer items-center gap-1 transition-colors hover:text-emerald-500"
+              >
+                {repostIcon ?? <Repeat size={16} />}
+                <span className="text-xs">{reposts.toLocaleString()}</span>
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Like post from ${username}`}
+                onClick={onLike}
+                className="flex cursor-pointer items-center gap-1 transition-colors hover:text-rose-500"
+              >
+                {likeIcon ?? <Heart size={15} />}
+                <span className="text-xs">{likes.toLocaleString()}</span>
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Save post from ${username}`}
+                onClick={onBookmark}
+                className="flex cursor-pointer items-center gap-1 transition-colors hover:text-sky-500"
+              >
+                {bookmarkIcon ?? <Bookmark size={15} />}
+              </button>
+
+              <button
+                type="button"
+                aria-label={`Share post from ${username}`}
+                onClick={onShare}
+                className="flex cursor-pointer items-center gap-1 transition-colors hover:text-sky-500"
+              >
+                {shareIcon ?? <Share size={14} />}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+TwitterPostCard.displayName = "TwitterPostCard";

package/components/socials/twitter-profile-card.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { MapPin, Globe } from "lucide-react";
+
+export type TwitterProfileCardProps = Readonly<
+  {
+    name?: string;
+    username?: string;
+    bio?: string;
+    location?: string;
+    website?: string;
+    following?: string | number;
+    followers?: string | number;
+    coverImage?: string;
+    avatar?: string;
+    coverImageAlt?: string;
+    avatarAlt?: string;
+    followLabel?: string;
+    locationIcon?: ReactNode;
+    websiteIcon?: ReactNode;
+    followButton?: ReactNode;
+    onFollow?: () => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Twitter Profile component — styled with Tailwind CSS.
+export const TwitterProfileCard = forwardRef<
+  HTMLDivElement,
+  TwitterProfileCardProps
+>(
+  (
+    {
+      className,
+      name = "Alex Morgan",
+      username = "@alexmorgan",
+      bio = "Building things on the web · Minimalism enthusiast · Open-source",
+      location = "West Bengal",
+      website = "motion-ui.dev",
+      following = 320,
+      followers = "1.2K",
+      coverImage = "/background1.webp",
+      avatar = "/profile-picture.png",
+      coverImageAlt = "Profile cover image",
+      avatarAlt = "Profile avatar",
+      followLabel = "Follow",
+      locationIcon,
+      websiteIcon,
+      followButton,
+      onFollow,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="twitter-profile-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Cover image */}
+        <div data-slot="twitter-profile-card-cover" className="relative h-24">
+          <Image
+            src={coverImage}
+            alt={coverImageAlt}
+            fill
+            className="object-cover"
+            sizes="288px"
+          />
+
+          {/* Profile avatar */}
+          <div className="absolute -bottom-8 left-5 flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-neutral-800">
+            <Image
+              src={avatar}
+              alt={avatarAlt}
+              width={28}
+              height={28}
+              className="w-7"
+              sizes="28px"
+            />
+          </div>
+        </div>
+
+        <div
+          data-slot="twitter-profile-card-content"
+          className="px-5 pt-12 pb-5"
+        >
+          <div className="flex items-start justify-between">
+            <div>
+              <p
+                title={name}
+                className="text-lg leading-none font-semibold text-neutral-900"
+              >
+                {name}
+              </p>
+
+              <p title={username} className="mt-1 text-sm text-neutral-400">
+                {username}
+              </p>
+            </div>
+
+            {followButton ?? (
+              <button
+                type="button"
+                aria-label={`Follow ${name}`}
+                onClick={onFollow}
+                className="cursor-pointer rounded-full bg-neutral-800 px-3 pt-1 pb-0.5 text-[10px] font-medium text-white transition-colors hover:bg-black"
+              >
+                {followLabel}
+              </button>
+            )}
+          </div>
+
+          {/* Bio */}
+          <p
+            data-slot="twitter-profile-card-bio"
+            title={bio}
+            className="mt-4 text-sm leading-relaxed text-neutral-700"
+          >
+            {bio}
+          </p>
+
+          {/* Profile details */}
+          <div
+            data-slot="twitter-profile-card-details"
+            className="mt-4 flex flex-wrap gap-4 text-sm text-neutral-500"
+          >
+            <span className="flex items-center gap-1">
+              {locationIcon ?? <MapPin size={13} />}
+              {location}
+            </span>
+
+            <span className="flex items-center gap-1">
+              {websiteIcon ?? <Globe size={13} />}
+              {website}
+            </span>
+          </div>
+
+          {/* Stats */}
+          <div
+            data-slot="twitter-profile-card-stats"
+            className="mt-4 flex gap-5 text-sm text-neutral-500"
+          >
+            <span>
+              <b className="text-neutral-900">
+                {typeof following === "number"
+                  ? following.toLocaleString()
+                  : following}
+              </b>{" "}
+              Following
+            </span>
+
+            <span>
+              <b className="text-neutral-900">
+                {typeof followers === "number"
+                  ? followers.toLocaleString()
+                  : followers}
+              </b>{" "}
+              Followers
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+TwitterProfileCard.displayName = "TwitterProfileCard";

package/components/system/loaders/index.ts

@@ -0,0 +1 @@
+export { PageLoaderOverlay } from "./page-loader-overlay";

package/components/system/loaders/page-loader-overlay.tsx

@@ -0,0 +1,16 @@
+import { Loader } from "lucide-react";
+
+/** Full-screen white page loader (black spinner). */
+export function PageLoaderOverlay() {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-white"
+      aria-live="polite"
+      aria-busy="true"
+      role="status"
+      aria-label="Loading"
+    >
+      <Loader size={28} color="#171717" className="animate-spin" />
+    </div>
+  );
+}

package/components/table/customers-table.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import Image from "next/image";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+type Customer = Readonly<{
+  id: string;
+  name: string;
+  company: string;
+  avatar: string;
+  plan: "Free" | "Pro" | "Team";
+  lastActive: string;
+  mrr: number;
+}>;
+
+const CUSTOMERS: Customer[] = [
+  {
+    id: "c1",
+    name: "Alex Morgan",
+    company: "Studio Dev",
+    avatar: "/profile-picture.png",
+    plan: "Team",
+    lastActive: "2h ago",
+    mrr: 49,
+  },
+  {
+    id: "c2",
+    name: "Rupam Sen",
+    company: "OUI Design",
+    avatar: "/woman.png",
+    plan: "Pro",
+    lastActive: "1d ago",
+    mrr: 19,
+  },
+  {
+    id: "c3",
+    name: "Ava Chen",
+    company: "Northwind",
+    avatar: "/profile-picture.png",
+    plan: "Pro",
+    lastActive: "3d ago",
+    mrr: 19,
+  },
+  {
+    id: "c4",
+    name: "Sofia Ortiz",
+    company: "Harbor Labs",
+    avatar: "/woman.png",
+    plan: "Free",
+    lastActive: "1w ago",
+    mrr: 0,
+  },
+];
+
+type CustomersTableProps = ComponentPropsWithoutRef<"div">;
+
+// SaaS customers table — plan, last active, and MRR. Common billing dashboard view.
+export const CustomersTable = forwardRef<HTMLDivElement, CustomersTableProps>(
+  function CustomersTable({ className, ...props }, ref) {
+    const totalMrr = CUSTOMERS.reduce((sum, c) => sum + c.mrr, 0);
+
+    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-end justify-between border-b border-neutral-100 px-4 py-3">
+          <div>
+            <p className="text-sm font-semibold text-neutral-900">Customers</p>
+            <p className="text-xs text-neutral-500">
+              {`${CUSTOMERS.length} accounts`}
+            </p>
+          </div>
+          <p className="text-right">
+            <span className="block text-[10px] tracking-wide text-neutral-400 uppercase">
+              MRR
+            </span>
+            <span className="text-sm font-semibold text-neutral-900 tabular-nums">
+              ${totalMrr}/mo
+            </span>
+          </p>
+        </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">Customer</th>
+                <th className="px-3 py-2.5 font-medium">Plan</th>
+                <th className="hidden px-3 py-2.5 font-medium md:table-cell">
+                  Last active
+                </th>
+                <th className="px-4 py-2.5 text-right font-medium">MRR</th>
+              </tr>
+            </thead>
+            <tbody>
+              {CUSTOMERS.map((customer) => (
+                <tr
+                  key={customer.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-2.5">
+                      <Image
+                        src={customer.avatar}
+                        alt={customer.name}
+                        width={28}
+                        height={28}
+                        className="size-7 shrink-0 rounded-full object-cover"
+                      />
+                      <div className="min-w-0">
+                        <p className="truncate font-medium text-neutral-900">
+                          {customer.name}
+                        </p>
+                        <p className="truncate text-xs text-neutral-500">
+                          {customer.company}
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-3 py-3 text-neutral-600">
+                    {customer.plan}
+                  </td>
+                  <td className="hidden px-3 py-3 text-neutral-500 md:table-cell">
+                    {customer.lastActive}
+                  </td>
+                  <td className="px-4 py-3 text-right text-neutral-900 tabular-nums">
+                    {customer.mrr > 0 ? `$${customer.mrr}` : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  },
+);
+
+CustomersTable.displayName = "CustomersTable";