motion-ui-skill 2.0.0

package/components/previews/blocks/file-upload.preview.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  FileUpload,
+  type FileUploadItem,
+  type FileUploadVariant,
+} from "@/components/motion/file-upload";
+
+const initialItems: FileUploadItem[] = [
+  {
+    id: "brand-assets",
+    name: "brand-assets.zip",
+    size: 18_400_000,
+    type: "application/zip",
+    progress: 100,
+    status: "success",
+  },
+  {
+    id: "release-video",
+    name: "release-cut.mov",
+    size: 84_200_000,
+    type: "video/quicktime",
+    progress: 58,
+    status: "uploading",
+  },
+  {
+    id: "contracts",
+    name: "vendor-contract.pdf",
+    size: 2_800_000,
+    type: "application/pdf",
+    progress: 32,
+    status: "error",
+    error: "Connection lost",
+  },
+];
+
+const variants: { id: FileUploadVariant; label: string }[] = [
+  { id: "centered", label: "Centered" },
+  { id: "default", label: "Row" },
+];
+
+export function FileUploadPreview() {
+  const [items, setItems] = useState(initialItems);
+  const [variant, setVariant] = useState<FileUploadVariant>("centered");
+  const timersRef = useRef<Map<string, ReturnType<typeof setInterval>>>(
+    new Map(),
+  );
+
+  const stopUpload = useCallback((id: string) => {
+    const timer = timersRef.current.get(id);
+    if (!timer) return;
+    clearInterval(timer);
+    timersRef.current.delete(id);
+  }, []);
+
+  const startUpload = useCallback(
+    (id: string) => {
+      stopUpload(id);
+
+      const timer = setInterval(() => {
+        setItems((current) => {
+          const target = current.find((item) => item.id === id);
+          if (target?.status !== "uploading") {
+            stopUpload(id);
+            return current;
+          }
+
+          const nextProgress = Math.min(
+            100,
+            (target.progress ?? 0) + 7 + Math.random() * 12,
+          );
+
+          if (nextProgress >= 100) {
+            stopUpload(id);
+          }
+
+          return current.map((item) =>
+            item.id === id
+              ? {
+                  ...item,
+                  progress: nextProgress,
+                  status: nextProgress >= 100 ? "success" : "uploading",
+                }
+              : item,
+          );
+        });
+      }, 520);
+
+      timersRef.current.set(id, timer);
+    },
+    [stopUpload],
+  );
+
+  useEffect(() => {
+    startUpload("release-video");
+
+    return () => {
+      for (const timer of timersRef.current.values()) {
+        clearInterval(timer);
+      }
+      timersRef.current.clear();
+    };
+  }, [startUpload]);
+
+  return (
+    <div className="flex min-h-[30rem] w-full items-center justify-center">
+      <div className="w-full max-w-md rounded-[2rem] border border-border bg-background p-3">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2 px-1">
+          <div>
+            <p className="text-sm font-semibold text-foreground">
+              Upload package
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {items.filter((item) => item.status === "success").length} of{" "}
+              {items.length} files ready
+            </p>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <div className="flex rounded-full border border-border bg-muted p-1">
+              {variants.map((entry) => {
+                const selected = entry.id === variant;
+
+                return (
+                  <button
+                    key={entry.id}
+                    type="button"
+                    onClick={() => setVariant(entry.id)}
+                    data-selected={selected}
+                    className="h-7 rounded-full px-3 text-xs font-medium text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-foreground active:scale-95 data-[selected=true]:bg-background data-[selected=true]:text-foreground"
+                  >
+                    {entry.label}
+                  </button>
+                );
+              })}
+            </div>
+
+            <button
+              type="button"
+              onClick={() => {
+                for (const item of items) {
+                  stopUpload(item.id);
+                }
+                setItems(initialItems);
+                startUpload("release-video");
+              }}
+              className="grid h-9 w-9 place-items-center rounded-full border border-border text-muted-foreground transition-colors hover:text-foreground active:scale-95"
+              aria-label="Reset upload queue"
+            >
+              <RotateCcw className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+
+        <FileUpload
+          value={items}
+          variant={variant}
+          onValueChange={setItems}
+          onFilesAdded={(added) => {
+            for (const item of added) {
+              startUpload(item.id);
+            }
+          }}
+          onRetry={(item) => startUpload(item.id)}
+          onRemove={(item) => stopUpload(item.id)}
+          maxFiles={5}
+          title={variant === "centered" ? "Drop files to upload" : "Drop release files"}
+          description="PDF, images, video or zipped assets"
+        />
+      </div>
+    </div>
+  );
+}

package/components/previews/blocks/infinite-masonry.preview.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import { InfiniteMasonry } from "@/components/motion/infinite-masonry";
+
+type GalleryItem = {
+  id: string;
+  title: string;
+  category: string;
+  image: string;
+  imageHeight: number;
+};
+
+const PAGE_SIZE = 6;
+const MAX_ITEMS = 42;
+
+const gallerySource = [
+  {
+    title: "Soft geometry",
+    category: "Architecture",
+    image:
+      "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 260,
+  },
+  {
+    title: "Open horizon",
+    category: "Landscape",
+    image:
+      "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 190,
+  },
+  {
+    title: "Working rhythm",
+    category: "Workspace",
+    image:
+      "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 230,
+  },
+  {
+    title: "Shared table",
+    category: "Studio",
+    image:
+      "https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 300,
+  },
+  {
+    title: "In session",
+    category: "People",
+    image:
+      "https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 210,
+  },
+  {
+    title: "After hours",
+    category: "Office",
+    image:
+      "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=720&q=80",
+    imageHeight: 280,
+  },
+] as const;
+
+function createItems(start: number, count: number): GalleryItem[] {
+  return Array.from({ length: count }, (_, offset) => {
+    const index = start + offset;
+    const source = gallerySource[index % gallerySource.length];
+
+    return {
+      ...source,
+      id: `gallery-${index}`,
+      title: `${source.title} ${Math.floor(index / gallerySource.length) + 1}`,
+    };
+  });
+}
+
+export function InfiniteMasonryPreview() {
+  const [items, setItems] = useState(() => createItems(0, 12));
+  const [loading, setLoading] = useState(false);
+  const hasMore = items.length < MAX_ITEMS;
+
+  const loadMore = useCallback(async () => {
+    if (loading || !hasMore) return;
+    setLoading(true);
+
+    await new Promise((resolve) => setTimeout(resolve, 650));
+    setItems((current) => {
+      const count = Math.min(PAGE_SIZE, MAX_ITEMS - current.length);
+      return count > 0
+        ? [...current, ...createItems(current.length, count)]
+        : current;
+    });
+    setLoading(false);
+  }, [hasMore, loading]);
+
+  return (
+    <div className="w-full max-w-5xl">
+      <div className="mb-3 flex items-end justify-between gap-4 px-1">
+        <div>
+          <p className="text-sm font-semibold text-foreground">Visual index</p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Scroll to load the next page
+          </p>
+        </div>
+        <p className="font-mono text-xs tabular-nums text-muted-foreground">
+          {items.length} items
+        </p>
+      </div>
+
+      <InfiniteMasonry
+        items={items}
+        getItemKey={(item) => item.id}
+        renderItem={(item) => (
+          <figure className="overflow-hidden rounded-2xl border border-border bg-card">
+            <div
+              className="relative w-full overflow-hidden"
+              style={{ height: item.imageHeight }}
+            >
+              <Image
+                src={item.image}
+                alt={item.title}
+                fill
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                className="object-cover"
+              />
+            </div>
+            <figcaption className="flex items-start justify-between gap-3 p-3">
+              <p className="text-sm font-medium text-foreground">
+                {item.title}
+              </p>
+              <p className="shrink-0 text-[10px] uppercase tracking-wider text-muted-foreground">
+                {item.category}
+              </p>
+            </figcaption>
+          </figure>
+        )}
+        onLoadMore={loadMore}
+        hasMore={hasMore}
+        loading={loading}
+        estimateSize={(item) => item.imageHeight + 66}
+        ariaLabel="Visual inspiration gallery"
+        className="h-[34rem]"
+      />
+    </div>
+  );
+}

package/components/previews/blocks/knockout-bracket.preview.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  KnockoutBracket,
+  ROUNDS,
+  THIRD_PLACE,
+} from "@/components/motion/knockout-bracket";
+
+// `ROUNDS` is the sample World Cup draw that ships with the component. Any other
+// single-elimination tournament renders the same way. Build your own `Round[]`,
+// widest round first, each round holding half the matches of the one before it,
+// and pass it in:
+//
+//   const rounds: Round[] = [
+//     {
+//       name: "Quarter-finals",
+//       matches: [
+//         {
+//           id: "qf-1",
+//           date: "Sat, 14 Mar",
+//           home: { team: { name: "Cloud9", logo: "/logos/c9.svg" }, score: 2 },
+//           away: { team: { name: "T1", logo: "/logos/t1.svg" }, score: 1 },
+//           winner: "home",
+//           badge: "BO3",
+//         },
+//         // qf-2, qf-3, qf-4 …
+//       ],
+//     },
+//     { name: "Semi-finals", matches: [/* fed by qf 1+2 and qf 3+4 */] },
+//     { name: "Grand final", matches: [/* the one final */] },
+//   ];
+//
+// A team carries a `logo` URL, an ISO country `code` for a flag, or neither, in
+// which case its initials stand in. `date`, `time`, `status` and `badge` are all
+// optional. `thirdPlaceLabel` renames the play-off when a tournament calls it
+// something else ("Bronze match").
+export function KnockoutBracketPreview() {
+  return (
+    <div className="w-full py-8">
+      <KnockoutBracket rounds={ROUNDS} thirdPlace={THIRD_PLACE} />
+    </div>
+  );
+}

package/components/previews/blocks/morphing-search.preview.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Blocks, BookOpen, Bot, FolderOpen, Palette } from "lucide-react";
+import {
+  MorphingSearch,
+  type MorphingSearchItem,
+} from "@/components/motion/morphing-search";
+
+const ITEMS: MorphingSearchItem[] = [
+  {
+    id: "project-folder",
+    title: "Project Folder",
+    description: "Block · Files and previews",
+    keywords: ["files", "overlay"],
+    icon: FolderOpen,
+  },
+  {
+    id: "motion-components",
+    title: "Motion components",
+    description: "Collection · Interaction primitives",
+    keywords: ["animation", "components"],
+    icon: Blocks,
+  },
+  {
+    id: "agent-interfaces",
+    title: "Agent interfaces",
+    description: "Collection · AI building blocks",
+    keywords: ["ai", "chat"],
+    icon: Bot,
+  },
+  {
+    id: "installation",
+    title: "Installation guide",
+    description: "Documentation · Add your first component",
+    keywords: ["setup", "shadcn"],
+    icon: BookOpen,
+  },
+  {
+    id: "design-tokens",
+    title: "Design tokens",
+    description: "Documentation · Color, type, and motion",
+    keywords: ["theme", "styles"],
+    icon: Palette,
+  },
+];
+
+export function MorphingSearchPreview() {
+  return (
+    <div className="flex w-full max-w-[22rem] items-center gap-3">
+      <MorphingSearch items={ITEMS} placeholder="Find components" />
+      <MorphingSearch
+        items={ITEMS}
+        placeholder="Find components"
+        shortcut=""
+        iconOnly
+      />
+    </div>
+  );
+}

package/components/previews/blocks/morphing-tabs.preview.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { MorphingTabs, type MorphingTabsItem } from "@/components/motion/morphing-tabs";
+
+const ROOM_CONTENT: Record<string, { eyebrow: string; title: string; detail: string; accent: string }> = {
+  "room-2": {
+    eyebrow: "quiet focus",
+    title: "Room 2",
+    detail: "A small space for the work that needs a little more air around it.",
+    accent: "#db5b2f",
+  },
+  general: {
+    eyebrow: "shared space",
+    title: "General",
+    detail: "The common room for notes, links and the ideas that are still finding their shape.",
+    accent: "#1bb273",
+  },
+  archive: {
+    eyebrow: "kept close",
+    title: "Archive",
+    detail: "Past rooms stay available without competing with the conversations in motion.",
+    accent: "#7a6de2",
+  },
+};
+
+function RoomPanel({ id }: { id: string }) {
+  const room = ROOM_CONTENT[id];
+
+  return (
+    <div className="relative min-h-64 overflow-hidden bg-[radial-gradient(circle_at_1px_1px,#dfe2e3_1px,transparent_1.5px)] bg-[size:4.8rem_4.8rem] px-7 py-8 md:px-12 md:py-10">
+      <div className="relative max-w-xl">
+        <p className="text-[0.68rem] font-semibold uppercase tracking-[0.24em] text-black/40">
+          {room.eyebrow}
+        </p>
+        <h3 className="mt-3 text-3xl font-light tracking-[-0.055em] text-[#151515] md:text-5xl">
+          {room.title}
+        </h3>
+        <p className="mt-4 max-w-md text-sm leading-6 text-black/55 md:text-base">
+          {room.detail}
+        </p>
+        <div className="mt-8 flex items-center gap-3 text-xs font-medium text-black/50">
+          <span className="size-2 rounded-full" style={{ backgroundColor: room.accent }} />
+          drag any room to reorder
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function MorphingTabsPreview() {
+  const initialItems = useMemo<MorphingTabsItem[]>(
+    () =>
+      Object.keys(ROOM_CONTENT).map((id) => ({
+        id,
+        label: ROOM_CONTENT[id].title,
+        content: <RoomPanel id={id} />,
+      })),
+    [],
+  );
+  const [items, setItems] = useState(initialItems);
+  const [value, setValue] = useState<string | null>("room-2");
+
+  return (
+    <div className="flex w-full min-w-0 items-center justify-center bg-[#242424] p-3 md:p-8">
+      <MorphingTabs
+        items={items}
+        value={value}
+        onValueChange={setValue}
+        onOrderChange={(ids) => {
+          setItems((current) => {
+            const byId = new Map(current.map((item) => [item.id, item]));
+            return ids.flatMap((id) => {
+              const item = byId.get(id);
+              return item ? [item] : [];
+            });
+          });
+        }}
+        onClose={(id) => {
+          setItems((current) => {
+            const next = current.filter((item) => item.id !== id);
+            if (id === value) setValue(next[0]?.id ?? null);
+            return next;
+          });
+        }}
+        ariaLabel="Rooms"
+        className="w-full max-w-5xl"
+      />
+    </div>
+  );
+}

package/components/previews/blocks/notification-stack.preview.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { RotateCw } from "lucide-react";
+import {
+  NotificationStack,
+  type NotificationStackItem,
+} from "@/components/motion/notification-stack";
+
+const notifications: NotificationStackItem[] = [
+  {
+    id: "import-failed",
+    title: "Orders import failed",
+    description: "42s · TimeoutError at Step 2",
+    trailing: (
+      <span className="inline-flex items-center gap-1 text-amber-500 dark:text-amber-400">
+        <RotateCw className="h-3.5 w-3.5" aria-hidden="true" />
+        2
+      </span>
+    ),
+  },
+  {
+    id: "sla-breach",
+    title: "SLA breach",
+    description: "2m 11s · Data enrichment",
+  },
+  {
+    id: "sync-fixed",
+    title: "Product sync auto-fixed",
+    description: "5m · 404 on GET /products",
+  },
+];
+
+export function NotificationStackPreview() {
+  return (
+    <div className="flex w-full items-center justify-center pt-52 pb-6">
+      <NotificationStack items={notifications} />
+    </div>
+  );
+}

package/components/previews/blocks/otp-input.preview.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+import { OTPInput, type OTPStatus } from "@/components/motion/otp-input";
+
+const CODE = "123456";
+
+export function OTPInputPreview() {
+  const [value, setValue] = useState("");
+  const [status, setStatus] = useState<OTPStatus>("idle");
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <OTPInput
+        label="Verification code"
+        hint={`Enter ${CODE} to verify.`}
+        successMessage="Verified."
+        errorMessage="Wrong code, try again."
+        value={value}
+        status={status}
+        onChange={(v) => {
+          setValue(v);
+          if (status !== "idle") setStatus("idle");
+        }}
+        onComplete={(v) => setStatus(v === CODE ? "success" : "error")}
+      />
+    </div>
+  );
+}

package/components/previews/blocks/overflow-actions.preview.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { CalendarClock, Eye, GitBranch, Pin } from "lucide-react";
+import { useState } from "react";
+import {
+  type OverflowActionItem,
+  OverflowActions,
+} from "@/components/motion/overflow-actions";
+
+const primaryActions: OverflowActionItem[] = [
+  {
+    id: "preview",
+    label: "Preview",
+    icon: <Eye className="h-4 w-4" />,
+  },
+  {
+    id: "pin",
+    label: "Pin",
+    icon: <Pin className="h-4 w-4" />,
+  },
+];
+
+const overflowActions: OverflowActionItem[] = [
+  {
+    id: "branch",
+    label: "Branch",
+    icon: <GitBranch className="h-4 w-4" />,
+  },
+  {
+    id: "schedule",
+    label: "Schedule",
+    icon: <CalendarClock className="h-4 w-4" />,
+  },
+];
+
+export function OverflowActionsPreview() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="flex w-full items-center justify-center">
+      <OverflowActions
+        primaryActions={primaryActions}
+        overflowActions={overflowActions}
+        expanded={expanded}
+        onExpandedChange={setExpanded}
+        openLabel="Open action rail"
+        closeLabel="Collapse action rail"
+      />
+    </div>
+  );
+}

package/components/previews/blocks/prediction-market.preview.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import {
+  PredictionMarket,
+  type PredictionMarketOrderValue,
+} from "@/components/motion/prediction-market";
+
+const outcomes = [
+  {
+    id: "yes",
+    label: "Yes",
+    price: 0.167,
+  },
+  {
+    id: "no",
+    label: "No",
+    price: 0.834,
+  },
+];
+
+export function PredictionMarketPreview() {
+  const [order, setOrder] = useState<PredictionMarketOrderValue>({
+    mode: "buy",
+    outcomeId: "yes",
+    amount: "115",
+  });
+
+  return (
+    <div className="flex w-full items-center justify-center">
+      <PredictionMarket
+        outcomes={outcomes}
+        value={order}
+        onValueChange={setOrder}
+        balance={500}
+        positions={{ yes: 125, no: 48 }}
+        quickAmounts={[1, 5, 10, 100]}
+      />
+    </div>
+  );
+}