motion-ui-skill 2.0.0

package/components/table/users-select-table.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import Image from "next/image";
+import {
+  forwardRef,
+  useMemo,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Check, Minus } from "lucide-react";
+
+type User = Readonly<{
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar: string;
+}>;
+
+const USERS: User[] = [
+  {
+    id: "u1",
+    name: "Alex Morgan",
+    email: "alex@studio.dev",
+    role: "Admin",
+    avatar: "/profile-picture.png",
+  },
+  {
+    id: "u2",
+    name: "Rupam Sen",
+    email: "rupam@studio.dev",
+    role: "Editor",
+    avatar: "/woman.png",
+  },
+  {
+    id: "u3",
+    name: "Ava Chen",
+    email: "ava@studio.dev",
+    role: "Viewer",
+    avatar: "/profile-picture.png",
+  },
+  {
+    id: "u4",
+    name: "Sofia Ortiz",
+    email: "sofia@studio.dev",
+    role: "Editor",
+    avatar: "/woman.png",
+  },
+];
+
+type UsersSelectTableProps = ComponentPropsWithoutRef<"div">;
+
+// Bulk-select users table — header checkbox, row selection, and live count. White admin pattern.
+export const UsersSelectTable = forwardRef<
+  HTMLDivElement,
+  UsersSelectTableProps
+>(function UsersSelectTable({ className, ...props }, ref) {
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(["u1"]));
+
+  const allIds = useMemo(() => USERS.map((u) => u.id), []);
+  const allSelected = selected.size === USERS.length;
+  const someSelected = selected.size > 0 && !allSelected;
+
+  function toggleRow(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll() {
+    setSelected(allSelected ? new Set() : new Set(allIds));
+  }
+
+  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">
+        <p className="text-sm font-semibold text-neutral-900">Users</p>
+        <span className="text-xs text-neutral-500">
+          {selected.size > 0
+            ? `${selected.size} selected`
+            : `${USERS.length} total`}
+        </span>
+      </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="w-10 px-4 py-2.5">
+                <button
+                  type="button"
+                  onClick={toggleAll}
+                  aria-label={allSelected ? "Deselect all" : "Select all"}
+                  className={cn(
+                    "flex size-4 items-center justify-center rounded border transition-colors",
+                    allSelected || someSelected
+                      ? "border-neutral-900 bg-neutral-900"
+                      : "border-neutral-300 bg-white",
+                  )}
+                >
+                  {allSelected ? (
+                    <Check className="size-2.5 text-white" strokeWidth={3} />
+                  ) : someSelected ? (
+                    <Minus className="size-2.5 text-white" strokeWidth={3} />
+                  ) : null}
+                </button>
+              </th>
+              <th className="px-2 py-2.5 font-medium">Name</th>
+              <th className="hidden px-3 py-2.5 font-medium md:table-cell">
+                Email
+              </th>
+              <th className="px-4 py-2.5 font-medium">Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            {USERS.map((user) => {
+              const isOn = selected.has(user.id);
+              return (
+                <tr
+                  key={user.id}
+                  onClick={() => toggleRow(user.id)}
+                  className={cn(
+                    "cursor-pointer border-t border-neutral-100 transition-colors",
+                    isOn ? "bg-neutral-50" : "hover:bg-neutral-50/80",
+                  )}
+                >
+                  <td className="px-4 py-3">
+                    <span
+                      className={cn(
+                        "flex size-4 items-center justify-center rounded border transition-colors",
+                        isOn
+                          ? "border-neutral-900 bg-neutral-900"
+                          : "border-neutral-300",
+                      )}
+                    >
+                      {isOn ? (
+                        <Check
+                          className="size-2.5 text-white"
+                          strokeWidth={3}
+                        />
+                      ) : null}
+                    </span>
+                  </td>
+                  <td className="px-2 py-3">
+                    <div className="flex items-center gap-2.5">
+                      <Image
+                        src={user.avatar}
+                        alt={user.name}
+                        width={28}
+                        height={28}
+                        className="size-7 shrink-0 rounded-full object-cover"
+                      />
+                      <span className="font-medium text-neutral-900">
+                        {user.name}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="hidden px-3 py-3 text-neutral-500 md:table-cell">
+                    {user.email}
+                  </td>
+                  <td className="px-4 py-3 text-neutral-600">{user.role}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+});
+
+UsersSelectTable.displayName = "UsersSelectTable";

package/components/text/cafe-menu-board-card.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Coffee } from "lucide-react";
+
+export type CafeMenuItem = Readonly<{
+  name: string;
+  price: string;
+  note?: string;
+}>;
+
+export type CafeMenuBoardCardProps = Readonly<
+  {
+    cafeName?: string;
+    tagline?: string;
+    items?: readonly CafeMenuItem[];
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const DEFAULT_ITEMS: readonly CafeMenuItem[] = [
+  { name: "Flat White", price: "₹180", note: "Double shot" },
+  { name: "Cold Brew", price: "₹210" },
+  { name: "Almond Croissant", price: "₹160", note: "Baked daily" },
+  { name: "Matcha Latte", price: "₹220" },
+];
+
+export const CafeMenuBoardCard = forwardRef<
+  HTMLDivElement,
+  CafeMenuBoardCardProps
+>(
+  (
+    {
+      className,
+      cafeName = "Corner & Steam",
+      tagline = "Small batch · Open till 8",
+      items = DEFAULT_ITEMS,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="cafe-menu-board-card"
+        className={cn(
+          "w-80 overflow-hidden rounded-3xl border border-neutral-800 bg-neutral-950 font-sans text-neutral-100 shadow-[0_18px_40px_rgba(0,0,0,0.28)]",
+          className,
+        )}
+        {...props}
+      >
+        <div className="border-b border-neutral-800 px-5 py-4">
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 items-center justify-center rounded-2xl bg-amber-500/15 text-amber-300">
+              <Coffee size={18} aria-hidden />
+            </div>
+            <div>
+              <h3 className="text-base font-semibold tracking-tight">
+                {cafeName}
+              </h3>
+              <p className="text-xs text-neutral-400">{tagline}</p>
+            </div>
+          </div>
+        </div>
+
+        <ul className="space-y-0 px-5 py-4">
+          {items.map((item, index) => (
+            <li
+              key={item.name}
+              className={cn(
+                "py-3",
+                index < items.length - 1
+                  ? "border-b border-neutral-800/80"
+                  : undefined,
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-neutral-100">
+                    {item.name}
+                  </p>
+                  {item.note ? (
+                    <p className="mt-0.5 text-[11px] text-neutral-500">
+                      {item.note}
+                    </p>
+                  ) : null}
+                </div>
+                <p className="shrink-0 text-sm font-semibold text-amber-300">
+                  {item.price}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);
+
+CafeMenuBoardCard.displayName = "CafeMenuBoardCard";

package/components/text/cinema-ticket-card.tsx

@@ -0,0 +1,99 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Clock, MapPin } from "lucide-react";
+
+export type CinemaTicketCardProps = Readonly<
+  {
+    filmTitle?: string;
+    cinema?: string;
+    screen?: string;
+    showTime?: string;
+    seats?: string;
+    date?: string;
+    ticketId?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Cinema Ticket component — styled with Tailwind CSS.
+export const CinemaTicketCard = forwardRef<
+  HTMLDivElement,
+  CinemaTicketCardProps
+>(
+  (
+    {
+      className,
+      filmTitle = "Interstellar",
+      cinema = "INOX South City",
+      screen = "Screen 4 · IMAX",
+      showTime = "7:45 PM",
+      seats = "G12, G13",
+      date = "Sat, 7 Jun 2026",
+      ticketId = "TKT-90421",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="cinema-ticket-card"
+      className={cn("w-96 font-sans", className)}
+      {...props}
+    >
+      <div className="flex overflow-hidden rounded-2xl bg-neutral-950">
+        <div
+          data-slot="cinema-ticket-card-main"
+          className="min-w-0 flex-1 p-4 md:p-5"
+        >
+          <p className="font-mono text-[9px] tracking-[0.25em] text-amber-500/70 uppercase">
+            Admit one
+          </p>
+          <h3 className="mt-1 truncate text-lg font-semibold tracking-tight text-white md:text-xl">
+            {filmTitle}
+          </h3>
+          <p className="mt-0.5 truncate text-xs text-neutral-500">{cinema}</p>
+
+          <div className="mt-4 grid grid-cols-2 gap-3">
+            <div>
+              <p className="text-[9px] text-neutral-600 uppercase">Screen</p>
+              <p className="text-xs font-semibold text-white">{screen}</p>
+            </div>
+            <div>
+              <p className="text-[9px] text-neutral-600 uppercase">Seats</p>
+              <p className="text-xs font-semibold text-amber-400">{seats}</p>
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock size={11} className="text-neutral-600" />
+              <p className="text-xs text-neutral-300">{showTime}</p>
+            </div>
+            <div className="flex items-center gap-1">
+              <MapPin size={11} className="text-neutral-600" />
+              <p className="truncate text-xs text-neutral-300">{date}</p>
+            </div>
+          </div>
+
+          <p className="mt-4 font-mono text-[8px] text-neutral-700">
+            {ticketId}
+          </p>
+        </div>
+
+        <div
+          data-slot="cinema-ticket-card-stub"
+          className="relative flex w-16 shrink-0 flex-col items-center justify-center border-l border-dashed border-neutral-700 bg-neutral-900 px-2"
+        >
+          <div className="absolute -top-2 left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-white" />
+          <div className="absolute -bottom-2 left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-white" />
+          <div
+            className="rotate-180 text-[8px] font-bold tracking-widest text-neutral-600 uppercase"
+            style={{ writingMode: "vertical-rl" }}
+          >
+            {showTime}
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+CinemaTicketCard.displayName = "CinemaTicketCard";

package/components/text/daily-motivation-card.tsx

@@ -0,0 +1,80 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { Flower } from "lucide-react";
+
+type DailyMotivationCardOwnProps = {
+  image?: string;
+  imageAlt?: string;
+  lineOne?: string;
+  lineTwo?: string;
+  lineThree?: string;
+  lineFour?: string;
+  stickerText?: string;
+};
+
+export type DailyMotivationCardProps = Readonly<DailyMotivationCardOwnProps> &
+  ComponentPropsWithoutRef<"div">;
+
+// Production-ready Daily Motivation component — styled with Tailwind CSS.
+export const DailyMotivationCard = forwardRef<
+  HTMLDivElement,
+  DailyMotivationCardProps
+>(
+  (
+    {
+      className,
+      image = "/background5.webp",
+      imageAlt = "Woman holding flowers",
+      lineOne = "Your daily",
+      lineTwo = "motivation",
+      lineThree = "for this Week",
+      stickerText = "GOOD DAY!",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="daily-motivation-card"
+      className={cn(
+        "relative h-100 w-96 overflow-hidden bg-[#f4f4ea] px-6 pt-6 pb-5 font-sans",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative z-10 max-w-44 space-y-1 font-serif text-[1.85rem] leading-[0.92] tracking-tight text-[#2d3e40]">
+        <p>{lineOne}</p>
+        <p>{lineTwo}</p>
+        <p>{lineThree}</p>
+      </div>
+
+      <div className="absolute top-6 right-7 z-20 overflow-visible p-1">
+        <Flower size={58} color="#2d3e40" />
+      </div>
+
+      <div className="absolute right-3 bottom-4 z-10 w-37 rotate-12">
+        <div className="bg-white p-2 pb-7 shadow-[0_12px_28px_rgba(45,62,64,0.14)]">
+          <div className="relative aspect-4/5 w-full overflow-hidden bg-neutral-100">
+            <Image
+              src={image}
+              alt={imageAlt}
+              fill
+              sizes="148px"
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="absolute -bottom-1 -left-5 z-20 -rotate-6 rounded-full border-4 border-[#9f93b8] bg-[#e2d9f3] px-3.5 py-1.5">
+          <p className="font-sans text-[10px] font-bold tracking-wide text-[#474253]">
+            {stickerText}
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+DailyMotivationCard.displayName = "DailyMotivationCard";

package/components/text/denim-product-editorial-card.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { LoopArrow } from "@/icons/annotations/loop-arrow";
+
+export type DenimProductEditorialCardProps = Readonly<
+  {
+    detailImage?: string;
+    outfitImage?: string;
+    description?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Denim Product Editorial component — styled with Tailwind CSS.
+export const DenimProductEditorialCard = forwardRef<
+  HTMLDivElement,
+  DenimProductEditorialCardProps
+>(
+  (
+    {
+      className,
+      detailImage = "/wallpaper-2.png",
+      outfitImage = "/background1.webp",
+      description = "THE NEW DENIM CASUAL DRESS HAS BEEN THOUGHTFULLY DESIGNED FOR YOUR COMFORT AND CONSCIENCE. MADE FROM ALL RECYCLED FABRICS WITH AN ADJUSTABLE FIT, THIS IS THE STAPLE FOR YOUR WARDROBE.",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="denim-product-editorial-card"
+      className={cn(
+        "w-[24rem] overflow-visible bg-[#f2f2f2] px-12 py-9 font-sans",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative">
+        <div className="grid grid-cols-2 gap-x-10">
+          <div className="relative">
+            <p className="mb-3 font-serif text-[11px] leading-snug text-neutral-900 italic">
+              RECYCLED FABRICS
+            </p>
+
+            <div className="relative aspect-square w-full overflow-hidden bg-neutral-200">
+              <Image
+                src={detailImage}
+                alt="Denim strap detail"
+                fill
+                sizes="152px"
+                className="object-cover"
+              />
+            </div>
+
+            <div className="pointer-events-none absolute top-26 -left-21 flex w-30 -rotate-90 items-center gap-1.5">
+              <p className="shrink-0 font-serif text-[11px] leading-none text-neutral-900 italic">
+                REINFORCED SEAMS
+              </p>
+              <div className="flex shrink-0 items-center">
+                <div className="h-0 w-9 border-t border-dotted border-neutral-900" />
+                <div
+                  className="size-3.5 shrink-0 rounded-full border border-dotted border-neutral-900"
+                  aria-hidden
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="relative aspect-square w-full overflow-hidden bg-neutral-200">
+              <Image
+                src={outfitImage}
+                alt="Denim outfit full look"
+                fill
+                sizes="152px"
+                className="object-cover"
+              />
+            </div>
+
+            <p className="mt-3 font-serif text-[11px] leading-none text-neutral-900 italic">
+              ADJUSTABLE WAIST
+            </p>
+          </div>
+        </div>
+
+        <LoopArrow
+          color="#171717"
+          aria-hidden
+          className="pointer-events-none absolute top-[6.15rem] left-[7.35rem] z-10 h-[3.35rem] w-25"
+        />
+      </div>
+
+      <p className="mt-8 font-mono text-[9px] leading-[1.65] tracking-[0.04em] text-neutral-900 uppercase">
+        {description}
+      </p>
+    </div>
+  ),
+);
+
+DenimProductEditorialCard.displayName = "DenimProductEditorialCard";

package/components/text/drop-cap-editorial-card.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+import { Quote } from "lucide-react";
+
+export type DropCapEditorialCardProps = Readonly<
+  {
+    dropCap?: string;
+    body?: string;
+    author?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Drop Cap Editorial component — styled with Tailwind CSS.
+export const DropCapEditorialCard = forwardRef<
+  HTMLDivElement,
+  DropCapEditorialCardProps
+>(
+  (
+    {
+      className,
+      dropCap = "D",
+      body = "Design systems thrive when typography, spacing, and imagery share one visual language. Every card should feel intentional.",
+      author = "Editorial team",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="drop-cap-editorial-card"
+      className={cn(
+        "w-64 border border-neutral-100 bg-white p-5 font-sans",
+        className,
+      )}
+      {...props}
+    >
+      <Quote size={20} className="mb-3 text-neutral-300" />
+      <p className="text-sm leading-relaxed text-neutral-700">
+        <span className="float-left mt-0.5 mr-2 flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-900 font-serif text-2xl font-light text-white">
+          {dropCap}
+        </span>
+        {body}
+      </p>
+      <p className="mt-4 text-[11px] font-semibold tracking-wide text-neutral-400 uppercase">
+        {author}
+      </p>
+    </div>
+  ),
+);
+
+DropCapEditorialCard.displayName = "DropCapEditorialCard";