motion-ui-skill 2.0.0

package/components/text/editorial-quote-card.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Quote } from "lucide-react";
+
+export type EditorialQuoteCardProps = Readonly<
+  {
+    quote?: string;
+    author?: string;
+    role?: string;
+    issue?: string;
+    accentWord?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Editorial Quote component — styled with Tailwind CSS.
+export const EditorialQuoteCard = forwardRef<
+  HTMLDivElement,
+  EditorialQuoteCardProps
+>(
+  (
+    {
+      className,
+      quote = "Good design is as little design as possible — but every pixel must earn its place.",
+      author = "Dieter Rams",
+      role = "Industrial Designer",
+      issue = "Issue 06 · Design",
+      accentWord = "pixel",
+      ...props
+    },
+    ref,
+  ) => {
+    const parts = quote.split(new RegExp(`(${accentWord})`, "i"));
+    let segmentOffset = 0;
+    const segments = parts.map((part) => {
+      const segment = {
+        id: `quote-part-${segmentOffset}`,
+        part,
+      };
+      segmentOffset += part.length;
+      return segment;
+    });
+
+    return (
+      <div
+        ref={ref}
+        data-slot="editorial-quote-card"
+        className={cn(
+          "w-sm border border-neutral-200 bg-[#f6f2eb] p-5 font-sans md:p-6",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-slot="editorial-quote-card-meta"
+          className="mb-4 flex items-center justify-between border-b border-neutral-200 pb-3"
+        >
+          <span className="font-mono text-[10px] font-semibold tracking-widest text-neutral-500 uppercase">
+            {issue}
+          </span>
+          <Quote size={18} className="text-neutral-400" />
+        </div>
+
+        <blockquote
+          data-slot="editorial-quote-card-quote"
+          className="text-lg leading-snug font-semibold tracking-tight text-neutral-700 md:text-xl"
+        >
+          {segments.map(({ id, part }) =>
+            part.toLowerCase() === accentWord.toLowerCase() ? (
+              <span
+                key={id}
+                className="rounded-sm bg-neutral-300/60 px-1 text-neutral-800"
+              >
+                {part}
+              </span>
+            ) : (
+              <span key={id}>{part}</span>
+            ),
+          )}
+        </blockquote>
+
+        <div
+          data-slot="editorial-quote-card-author"
+          className="mt-5 flex items-center gap-3"
+        >
+          <div className="h-px flex-1 bg-neutral-200" />
+          <div className="text-right">
+            <p className="text-sm font-medium text-neutral-600">{author}</p>
+            <p className="text-[11px] text-neutral-500">{role}</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+EditorialQuoteCard.displayName = "EditorialQuoteCard";

package/components/text/journal-writing-card.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Signature } from "lucide-react";
+
+export type JournalWritingCardProps = Readonly<
+  {
+    title?: string;
+    date?: string;
+    placeholder?: string;
+    defaultText?: string;
+    onChange?: (text: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Journal Writing component — styled with Tailwind CSS.
+export const JournalWritingCard = forwardRef<
+  HTMLDivElement,
+  JournalWritingCardProps
+>(
+  (
+    {
+      className,
+      title = "Morning pages",
+      date = "Saturday, Jun 6",
+      placeholder = "Write freely. No edits, no judgment…",
+      defaultText = "",
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [text, setText] = useState(defaultText);
+    const [saveState, setSaveState] = useState<"saved" | "saving">("saved");
+    const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+
+    useEffect(() => {
+      if (!text) {
+        setSaveState("saved");
+        return;
+      }
+
+      setSaveState("saving");
+      const timer = globalThis.setTimeout(() => setSaveState("saved"), 900);
+      return () => globalThis.clearTimeout(timer);
+    }, [text]);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="journal-writing-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex items-start justify-between gap-3 border-b border-neutral-100 bg-[#f6f2eb] px-4 py-3">
+          <div className="min-w-0">
+            <p className="text-sm leading-tight font-semibold text-neutral-900">
+              {title}
+            </p>
+            <p className="mt-0.5 text-[10px] leading-none text-neutral-700">
+              {date}
+            </p>
+          </div>
+          <Signature size={14} className="mt-0.5 shrink-0 text-neutral-800" />
+        </div>
+
+        <div
+          className="relative min-h-50 bg-white"
+          style={{
+            backgroundImage:
+              "repeating-linear-gradient(transparent, transparent 27px, #f0f0f0 27px, #f0f0f0 28px)",
+            backgroundPosition: "0 12px",
+          }}
+        >
+          <textarea
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              onChange?.(e.target.value);
+            }}
+            placeholder={placeholder}
+            aria-label="Journal entry"
+            data-slot="journal-writing-card-input"
+            className="relative z-10 h-50 w-full resize-none scrollbar-none bg-transparent px-4 pt-3 pb-2 font-serif text-[14px] leading-7 text-neutral-800 outline-none [-ms-overflow-style:none] placeholder:text-neutral-300 [&::-webkit-scrollbar]:hidden"
+          />
+          <div className="absolute top-0 left-3 h-full w-px bg-rose-200/80" />
+        </div>
+
+        <div className="flex h-9 items-center justify-between border-t border-neutral-100 px-4">
+          <span className="text-[10px] leading-none text-neutral-400">
+            {`${words} words`}
+          </span>
+          <div
+            className="flex h-4 items-center justify-end gap-1.5"
+            role="status"
+            aria-live="polite"
+            aria-label={saveState === "saving" ? "Saving" : "Saved"}
+          >
+            {saveState === "saving" && (
+              <span className="text-[10px] leading-none text-neutral-400">
+                Saving…
+              </span>
+            )}
+            <span className="relative inline-flex h-2 w-2 shrink-0">
+              {saveState === "saving" ? (
+                <>
+                  <span className="absolute inset-0 animate-ping rounded-full bg-amber-400 opacity-60" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-amber-500" />
+                </>
+              ) : (
+                <span className="inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+              )}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+JournalWritingCard.displayName = "JournalWritingCard";

package/components/text/keyboard-shortcuts-card.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Command } from "lucide-react";
+
+export type KeyboardShortcut = {
+  keys: string[];
+  label: string;
+};
+
+export type KeyboardShortcutsCardProps = Readonly<
+  {
+    title?: string;
+    shortcuts?: KeyboardShortcut[];
+    hint?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultShortcuts: KeyboardShortcut[] = [
+  { keys: ["⌘", "K"], label: "Open command palette" },
+  { keys: ["⌘", "S"], label: "Save changes" },
+  { keys: ["⌘", "Z"], label: "Undo last action" },
+  { keys: ["⌘", "⇧", "P"], label: "Quick actions" },
+  { keys: ["Esc"], label: "Close panel" },
+];
+
+// Production-ready Keyboard Shortcuts component — styled with Tailwind CSS.
+export const KeyboardShortcutsCard = forwardRef<
+  HTMLDivElement,
+  KeyboardShortcutsCardProps
+>(
+  (
+    {
+      className,
+      title = "Shortcuts",
+      shortcuts = defaultShortcuts,
+      hint = "Press ⌘K anywhere",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="keyboard-shortcuts-card"
+      className={cn(
+        "w-xs rounded-2xl border border-neutral-100 bg-white p-4 font-sans shadow-lg md:p-5",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="keyboard-shortcuts-card-header"
+        className="mb-4 flex items-center gap-2"
+      >
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-900 text-white">
+          <Command size={14} />
+        </div>
+        <div>
+          <h4 className="text-sm font-bold text-neutral-900">{title}</h4>
+          <p className="text-[11px] text-neutral-400">{hint}</p>
+        </div>
+      </div>
+
+      <div data-slot="keyboard-shortcuts-card-list" className="space-y-2">
+        {shortcuts.map((shortcut) => (
+          <div
+            key={shortcut.label}
+            data-slot="keyboard-shortcuts-card-item"
+            className="flex items-center justify-between gap-3 rounded-xl bg-neutral-50 px-3 py-2"
+          >
+            <span className="min-w-0 truncate text-[13px] text-neutral-700">
+              {shortcut.label}
+            </span>
+            <div className="flex shrink-0 gap-1">
+              {shortcut.keys.map((key) => (
+                <kbd
+                  key={key}
+                  className="flex h-6 min-w-6 items-center justify-center rounded-md border border-neutral-100 bg-white px-1.5 font-mono text-[10px] font-medium text-neutral-600 shadow-sm"
+                >
+                  {key}
+                </kbd>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+);
+
+KeyboardShortcutsCard.displayName = "KeyboardShortcutsCard";

package/components/text/magazine-cover-card.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+import { ArrowRight } from "lucide-react";
+
+export type MagazineCoverCardProps = Readonly<
+  {
+    badge?: string;
+    issue?: string;
+    category?: string;
+    title?: string;
+    subtitle?: string;
+    author?: string;
+    readTime?: string;
+    image?: string;
+    imageAlt?: string;
+    arrowIcon?: ReactNode;
+    onClick?: () => void;
+  } & ComponentPropsWithoutRef<"button">
+>;
+
+// Production-ready Magazine Cover component — styled with Tailwind CSS.
+export const MagazineCoverCard = forwardRef<
+  HTMLButtonElement,
+  MagazineCoverCardProps
+>(
+  (
+    {
+      className,
+      badge = "Featured",
+      issue = "Issue #24",
+      category = "Design",
+      title = "The Art of Minimal Interfaces",
+      subtitle = "Minimal Interfaces",
+      author = "Alex Morgan",
+      readTime = "8 min read",
+      image = "/background1.webp",
+      imageAlt = "Magazine cover",
+      arrowIcon,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="magazine-cover-card"
+        onClick={onClick}
+        className={cn(
+          "group relative h-96 w-72 cursor-pointer overflow-hidden rounded-2xl shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Cover image */}
+        <Image
+          src={image}
+          alt={imageAlt}
+          fill
+          sizes="288px"
+          className="object-cover transition-transform duration-700 group-hover:scale-105"
+        />
+
+        {/* Gradient overlay */}
+        <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" />
+
+        {/* Badge */}
+        <div className="absolute top-4 left-4">
+          <span className="inline-block rounded-full border border-white/20 bg-white/15 px-2.5 pt-1 pb-0.5 text-[10px] font-medium tracking-widest text-white uppercase backdrop-blur-md">
+            {badge}
+          </span>
+        </div>
+
+        <div className="absolute right-0 bottom-0 left-0 p-5">
+          <p className="mb-2 font-mono text-[10px] tracking-[0.25em] text-white/60 uppercase">
+            {issue} · {category}
+          </p>
+
+          <h3 className="mb-3 text-xl leading-tight font-light tracking-tight text-white">
+            {title.split(" ").slice(0, -2).join(" ")}
+            <br />
+            <span className="font-semibold">{subtitle}</span>
+          </h3>
+
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-white/50">
+              By {author} · {readTime}
+            </p>
+
+            <div className="flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/15 text-white backdrop-blur-md transition-all duration-300 group-hover:bg-white group-hover:text-neutral-900">
+              {arrowIcon ?? <ArrowRight size={14} />}
+            </div>
+          </div>
+        </div>
+      </button>
+    );
+  },
+);
+
+MagazineCoverCard.displayName = "MagazineCoverCard";

package/components/text/notepad-card.tsx

@@ -0,0 +1,95 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+import { Bookmark } from "lucide-react";
+
+export type NotepadCardProps = Readonly<
+  {
+    title?: string;
+    quote?: string;
+    author?: string;
+    checklist?: string[];
+    bookmarkIcon?: ReactNode;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Notepad component — styled with Tailwind CSS.
+export const NotepadCard = forwardRef<HTMLDivElement, NotepadCardProps>(
+  (
+    {
+      className,
+      title = "Note to self",
+      quote = "Design is not just what it looks like and feels like. Design is how it works.",
+      author = "S. Jobs",
+      checklist = ["Ship the MVP", "Write tests", "Review PR #42"],
+      bookmarkIcon,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="notepad-card"
+        className={cn(
+          "relative w-60 border border-[#e6e2bc] bg-[#fffdf0] p-5 font-sans shadow-[5px_5px_0px_#e6e2bc]",
+          className,
+        )}
+        {...props}
+      >
+        {/* Bookmark */}
+        <div
+          data-slot="notepad-card-bookmark"
+          className="absolute top-3 right-3 text-[#a39e76]"
+        >
+          {bookmarkIcon ?? <Bookmark size={16} />}
+        </div>
+
+        {/* Note title */}
+        <h5
+          data-slot="notepad-card-title"
+          title={title}
+          className="mb-3 border-b border-[#e6e2bc] pb-1 font-mono text-[10px] tracking-widest text-[#a39e76] uppercase"
+        >
+          {title}
+        </h5>
+
+        {/* Quote content */}
+        <p
+          data-slot="notepad-card-quote"
+          className="font-serif text-sm leading-relaxed text-[#5c5a4a] italic"
+        >
+          &quot;{quote}&quot;
+        </p>
+
+        {/* Quote author */}
+        <p
+          data-slot="notepad-card-author"
+          title={author}
+          className="mt-4 text-right text-[10px] text-[#a39e76]"
+        >
+          — {author}
+        </p>
+
+        {/* Checklist */}
+        <div data-slot="notepad-card-checklist" className="mt-4 space-y-2">
+          {checklist.map((item) => (
+            <div
+              key={item}
+              className="flex items-center gap-2 text-xs text-[#5c5a4a]"
+            >
+              <div className="h-3 w-3 shrink-0 border border-[#c4bf98]" />
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
+NotepadCard.displayName = "NotepadCard";

package/components/travel/flight-boarding-card.tsx

@@ -0,0 +1,177 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { PlaneTakeoff } from "lucide-react";
+
+export type FlightBoardingCardProps = Readonly<
+  {
+    flightNumber?: string;
+    status?: string;
+    departureCode?: string;
+    departureCity?: string;
+    arrivalCode?: string;
+    arrivalCity?: string;
+    duration?: string;
+    seat?: string;
+    gate?: string;
+    boardingTime?: string;
+    passengerName?: string;
+    terminal?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Flight Boarding component — styled with Tailwind CSS.
+export const FlightBoardingCard = forwardRef<
+  HTMLDivElement,
+  FlightBoardingCardProps
+>(
+  (
+    {
+      className,
+      flightNumber = "AI 2847",
+      status = "On Time",
+      departureCode = "CCU",
+      departureCity = "Kolkata",
+      arrivalCode = "DEL",
+      arrivalCity = "Delhi",
+      duration = "2h 15m",
+      seat = "14A",
+      gate = "B12",
+      boardingTime = "14:00",
+      passengerName = "Alex Morgan",
+      terminal = "T2",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="flight-boarding-card"
+      className={cn("w-96 overflow-visible", className)}
+      {...props}
+    >
+      <div
+        data-slot="flight-boarding-card-container"
+        className="relative overflow-hidden rounded-3xl border border-neutral-100 bg-white shadow-lg"
+      >
+        {/* Ticket Divider */}
+        <div
+          data-slot="flight-boarding-card-divider"
+          className="absolute top-0 bottom-0 left-20 border-l border-dashed border-neutral-200"
+        />
+
+        <div
+          data-slot="flight-boarding-card-layout"
+          className="grid grid-cols-[80px_1fr]"
+        >
+          {/* Scan Area */}
+          <div
+            data-slot="flight-boarding-card-scan"
+            className="flex flex-col items-center justify-center gap-2 px-8"
+          >
+            <span className="text-[9px] tracking-[0.25em] text-neutral-400 uppercase">
+              Scan
+            </span>
+          </div>
+
+          {/* Main Content */}
+          <div data-slot="flight-boarding-card-content" className="p-4">
+            <div
+              data-slot="flight-boarding-card-header"
+              className="flex items-center justify-between"
+            >
+              <div>
+                <p className="text-[10px] tracking-[0.2em] text-neutral-400 uppercase">
+                  Flight
+                </p>
+
+                <p className="mt-1 text-sm font-semibold text-neutral-900">
+                  {flightNumber}
+                </p>
+              </div>
+
+              <span className="rounded-full bg-emerald-50 px-2 py-1 text-[9px] font-medium text-emerald-600">
+                {status}
+              </span>
+            </div>
+
+            {/* Route */}
+            <div
+              data-slot="flight-boarding-card-route"
+              className="mt-4 flex items-center justify-between"
+            >
+              <div>
+                <h2 className="text-2xl font-semibold tracking-tight text-neutral-950">
+                  {departureCode}
+                </h2>
+
+                <p className="text-[10px] text-neutral-400">{departureCity}</p>
+              </div>
+
+              <div className="mx-2 flex flex-1 flex-col items-center">
+                <div className="relative w-full">
+                  <div className="border-t border-dashed border-neutral-300" />
+
+                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-1.5">
+                    <PlaneTakeoff size={11} className="text-neutral-500" />
+                  </div>
+                </div>
+
+                <span className="mt-1.5 text-[9px] text-neutral-500">
+                  {duration}
+                </span>
+              </div>
+
+              <div className="text-right">
+                <h2 className="text-2xl font-semibold tracking-tight text-neutral-950">
+                  {arrivalCode}
+                </h2>
+
+                <p className="text-[10px] text-neutral-400">{arrivalCity}</p>
+              </div>
+            </div>
+
+            {/* Flight Details */}
+            <div
+              data-slot="flight-boarding-card-details"
+              className="mt-4 flex flex-wrap gap-1.5"
+            >
+              <span className="rounded-full bg-neutral-100 px-2.5 py-1 text-[10px] text-neutral-700">
+                Seat {seat}
+              </span>
+
+              <span className="rounded-full bg-neutral-100 px-2.5 py-1 text-[10px] text-neutral-700">
+                Gate {gate}
+              </span>
+
+              <span className="rounded-full bg-neutral-100 px-2.5 py-1 text-[10px] text-neutral-700">
+                {boardingTime}
+              </span>
+            </div>
+
+            {/* Passenger */}
+            <div
+              data-slot="flight-boarding-card-footer"
+              className="mt-3 flex items-center justify-between border-t border-neutral-100 pt-3"
+            >
+              <div>
+                <p className="text-[10px] text-neutral-400">Passenger</p>
+
+                <p className="mt-1 text-sm font-medium text-neutral-900">
+                  {passengerName}
+                </p>
+              </div>
+
+              <span className="rounded-full bg-neutral-100 px-2.5 py-1 text-[10px] text-neutral-600">
+                {terminal}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+FlightBoardingCard.displayName = "FlightBoardingCard";