motion-ui-skill 2.0.0

package/components/previews/blocks/project-folder.preview.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ProjectFolder } from "@/components/motion/project-folder";
+
+const previews = [
+  { id: "moss", color: "bg-emerald-200", mark: "A" },
+  { id: "clay", color: "bg-orange-200", mark: "B" },
+  { id: "sky", color: "bg-sky-200", mark: "C" },
+  { id: "lilac", color: "bg-violet-200", mark: "D" },
+  { id: "sand", color: "bg-amber-100", mark: "E" },
+].map((preview) => ({
+  id: preview.id,
+  content: (
+    <span className={cn("relative block h-full w-full", preview.color)}>
+      <span className="absolute left-3 top-3 h-2 w-8 rounded-full bg-black/15" />
+      <span className="absolute inset-x-3 top-8 h-px bg-black/10" />
+      <span className="absolute inset-x-3 top-11 h-px bg-black/10" />
+      <span className="absolute bottom-3 right-3 text-sm font-medium text-black/50">
+        {preview.mark}
+      </span>
+    </span>
+  ),
+}));
+
+function cn(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function ProjectFolderPreview() {
+  return (
+    <div className="flex min-h-80 w-full items-center justify-center px-6 py-10">
+      <ProjectFolder
+        title="Brand direction"
+        description="Updated recently"
+        count={5}
+        previews={previews}
+        onClick={() => {}}
+      />
+    </div>
+  );
+}

package/components/previews/blocks/signup-form.preview.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { SignUpForm } from "@/components/motion/signup-form";
+
+export function SignUpFormPreview() {
+  const [formError, setFormError] = useState<string>();
+
+  return (
+    <div className="flex w-full justify-center py-4">
+      <SignUpForm
+        description="Sign up with taken@example.com to see the failure state."
+        errorMessage={formError}
+        onSubmit={async (values) => {
+          setFormError(undefined);
+          await new Promise((resolve) => setTimeout(resolve, 1200));
+          if (values.email.toLowerCase().startsWith("taken@")) {
+            setFormError("That email is already registered.");
+            throw new Error("Email already registered");
+          }
+        }}
+        footer={
+          <>
+            Already have an account?{" "}
+            <button
+              type="button"
+              className="font-medium text-foreground underline underline-offset-4"
+            >
+              Sign in
+            </button>
+          </>
+        }
+      />
+    </div>
+  );
+}

package/components/previews/blocks/swap.preview.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { MultiChainSwap } from "@/components/motion/swap";
+
+export function SwapPreview() {
+  return (
+    <div className="flex w-full items-center justify-center">
+      <MultiChainSwap />
+    </div>
+  );
+}

package/components/previews/blocks/swipeable-list.preview.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import {
+  Check,
+  Clock3,
+  FileText,
+  Flag,
+  Mail,
+  Pin,
+  RotateCcw,
+  Trash2,
+  UserRound,
+} from "lucide-react";
+import { useState } from "react";
+import {
+  type SwipeAction,
+  SwipeableList,
+  type SwipeableListItem,
+} from "@/components/motion/swipeable-list";
+
+const leftActions: SwipeAction[] = [
+  {
+    id: "done",
+    label: "Done",
+    icon: <Check className="h-4 w-4" />,
+    tone: "success",
+  },
+  {
+    id: "pin",
+    label: "Pin",
+    icon: <Pin className="h-4 w-4" />,
+    tone: "primary",
+  },
+];
+
+const rightActions: SwipeAction[] = [
+  {
+    id: "later",
+    label: "Later",
+    icon: <Clock3 className="h-4 w-4" />,
+    tone: "warning",
+  },
+  {
+    id: "trash",
+    label: "Trash",
+    icon: <Trash2 className="h-4 w-4" />,
+    tone: "danger",
+  },
+];
+
+const initialItems: SwipeableListItem[] = [
+  {
+    id: "brief",
+    title: "Launch brief",
+    description: "Finalize the announcement copy",
+    meta: "9:41",
+    leading: (
+      <div className="grid h-10 w-10 place-items-center rounded-xl border border-border bg-background text-muted-foreground">
+        <FileText className="h-4 w-4" />
+      </div>
+    ),
+    leftActions,
+    rightActions,
+  },
+  {
+    id: "feedback",
+    title: "Client feedback",
+    description: "Three comments need a response",
+    meta: "11:08",
+    leading: (
+      <div className="grid h-10 w-10 place-items-center rounded-xl border border-border bg-background text-muted-foreground">
+        <Mail className="h-4 w-4" />
+      </div>
+    ),
+    leftActions,
+    rightActions,
+  },
+  {
+    id: "review",
+    title: "Design review",
+    description: "Check spacing before handoff",
+    meta: "13:20",
+    leading: (
+      <div className="grid h-10 w-10 place-items-center rounded-xl border border-border bg-background text-muted-foreground">
+        <UserRound className="h-4 w-4" />
+      </div>
+    ),
+    leftActions,
+    rightActions,
+  },
+  {
+    id: "incident",
+    title: "Flagged run",
+    description: "Retry queue has one failed job",
+    meta: "Now",
+    leading: (
+      <div className="grid h-10 w-10 place-items-center rounded-xl border border-border bg-background text-muted-foreground">
+        <Flag className="h-4 w-4" />
+      </div>
+    ),
+    leftActions,
+    rightActions,
+  },
+];
+
+export function SwipeableListPreview() {
+  const [items, setItems] = useState(initialItems);
+  const [lastAction, setLastAction] = useState("Ready");
+
+  return (
+    <div className="flex min-h-96 w-full items-center justify-center">
+      <div className="w-full max-w-sm rounded-[2rem] border border-border bg-background p-3 shadow-2xl">
+        <div className="mb-3 flex items-center justify-between px-1">
+          <div>
+            <p className="text-sm font-semibold text-foreground">Priority queue</p>
+            <p className="text-xs text-muted-foreground">{lastAction}</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => {
+              setItems(initialItems);
+              setLastAction("Queue restored");
+            }}
+            className="inline-flex h-8 items-center gap-1.5 rounded-full border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            Reset
+          </button>
+        </div>
+
+        <SwipeableList
+          items={items}
+          onAction={({ item, action }) => {
+            setLastAction(`${action.label} · ${item.title}`);
+
+            if (action.id === "trash") {
+              setItems((current) => current.filter((entry) => entry.id !== item.id));
+            }
+          }}
+        />
+
+        <div className="mt-3 flex items-center justify-between px-1 text-[11px] font-medium text-muted-foreground">
+          <span>{items.length} open</span>
+          <span>Today</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/previews/blocks/wallet-card.preview.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { WalletCard } from "@/components/motion/wallet-card";
+import { Button } from "@/components/motion/button";
+
+const ACCOUNTS = [
+  { id: "main", name: "Main Wallet", address: "0x8f3Cb1a29e4D7c6F1B2a3E9d0C4b5A6f7D8e9C0b" },
+  { id: "trading", name: "Trading", address: "0x1a2B3c4D5e6F7a8B9c0D1e2F3a4B5c6D7e8F9a0B" },
+  { id: "cold", name: "Cold Storage", address: "0x9F8e7D6c5B4a3E2d1C0b9A8f7E6d5C4b3A2e1F0d" },
+];
+
+const RECENT_SEARCHES = ["vitalik.eth", "0xA0b8…6EB4", "Uniswap", "Send to Trading"];
+
+export function WalletCardPreview() {
+  const [balance, setBalance] = useState(12480.32);
+
+  return (
+    <div className="flex w-full flex-col items-center gap-4 p-6">
+      <WalletCard
+        accounts={ACCOUNTS}
+        balance={balance}
+        defaultChange={124.5}
+        searchRecent={RECENT_SEARCHES}
+        hasNotifications
+      />
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setBalance((b) => b + (Math.random() > 0.5 ? 1 : -1) * (50 + Math.random() * 400))}
+      >
+        Simulate balance change
+      </Button>
+    </div>
+  );
+}

package/components/previews/motion/action-swap.preview.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Check, Copy, Send, Sparkles } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { ActionSwapButton, type ActionSwapItem } from "@/components/motion/action-swap";
+import { EASE_OUT } from "@/lib/ease";
+
+const BLUR_ITEMS: ActionSwapItem[] = [
+  {
+    id: "copy",
+    label: "Copy link",
+    icon: <Copy className="h-4 w-4" />,
+    ariaLabel: "Copy link",
+  },
+  {
+    id: "copied",
+    label: "Copied",
+    icon: <Check className="h-4 w-4" />,
+    ariaLabel: "Copied",
+  },
+];
+
+const ROLL_ITEMS: ActionSwapItem[] = [
+  {
+    id: "send",
+    label: "Send",
+    icon: <Send className="h-4 w-4" />,
+    ariaLabel: "Send",
+  },
+  {
+    id: "sent",
+    label: "Sent",
+    icon: <Sparkles className="h-4 w-4" />,
+    ariaLabel: "Sent",
+  },
+];
+
+export function ActionSwapPreview() {
+  const [blurValue, setBlurValue] = useState(BLUR_ITEMS[0]?.id);
+  const [rollValue, setRollValue] = useState(ROLL_ITEMS[0]?.id);
+  const [variant, setVariant] = useState<"blur" | "roll">("blur");
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setVariant((currentVariant) => currentVariant === "blur" ? "roll" : "blur");
+    }, 2600);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <div className="relative flex min-h-12 min-w-36 items-center justify-center">
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={variant}
+          initial={{ opacity: 0, filter: "blur(6px)", transform: "translateY(4px)" }}
+          animate={{ opacity: 1, filter: "blur(0px)", transform: "translateY(0px)" }}
+          exit={{ opacity: 0, filter: "blur(6px)", transform: "translateY(-4px)" }}
+          transition={{ duration: 0.22, ease: EASE_OUT }}
+        >
+          {variant === "blur" ? (
+            <ActionSwapButton
+              items={BLUR_ITEMS}
+              value={blurValue}
+              onValueChange={setBlurValue}
+              animation="blur"
+              variant="secondary"
+            />
+          ) : (
+            <ActionSwapButton
+              items={ROLL_ITEMS}
+              value={rollValue}
+              onValueChange={setRollValue}
+              animation="roll"
+              variant="primary"
+            />
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/components/previews/motion/adaptive-stepper.preview.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import {
+  AdaptiveStepper,
+  AdaptiveStepperDecrement,
+  AdaptiveStepperIncrement,
+  AdaptiveStepperValue,
+} from "@/components/motion/adaptive-stepper";
+
+export function AdaptiveStepperPreview() {
+  return (
+    <div className="flex min-h-[320px] w-full items-center justify-center px-4">
+      <AdaptiveStepper defaultValue={2} min={0} max={3} aria-label="Guests">
+        <AdaptiveStepperDecrement />
+        <AdaptiveStepperValue />
+        <AdaptiveStepperIncrement />
+      </AdaptiveStepper>
+    </div>
+  );
+}

package/components/previews/motion/animated-badge.preview.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatedBadge, type AnimatedBadgeStatus } from "@/components/motion/animated-badge";
+
+const STATES: Array<{ status: AnimatedBadgeStatus; label: string }> = [
+  { status: "loading", label: "Syncing" },
+  { status: "success", label: "Synced" },
+  { status: "warning", label: "Review" },
+  { status: "danger", label: "Failed" },
+];
+
+export function AnimatedBadgePreview() {
+  const [active, setActive] = useState(0);
+  const state = STATES[active];
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setActive((current) => (current + 1) % STATES.length);
+    }, 1600);
+
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="flex h-16 items-center justify-center">
+        <AnimatedBadge status={state.status} size="md" aria-live="polite">
+          {state.label}
+        </AnimatedBadge>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        <AnimatedBadge status="neutral" size="sm">Queued</AnimatedBadge>
+        <AnimatedBadge status="info" size="sm">Live</AnimatedBadge>
+        <AnimatedBadge status="loading" size="sm">Indexing</AnimatedBadge>
+        <AnimatedBadge status="success" size="sm">Verified</AnimatedBadge>
+        <AnimatedBadge status="warning" size="sm">Pending</AnimatedBadge>
+        <AnimatedBadge status="danger" size="sm">Blocked</AnimatedBadge>
+      </div>
+    </div>
+  );
+}

package/components/previews/motion/animated-sidebar.preview.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import {
+  Building2,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleUserRound,
+  Command,
+  Inbox,
+  LayoutGrid,
+  ListTodo,
+  NotebookTabs,
+  PanelLeft,
+  Search,
+  Sparkles,
+  Target,
+  Workflow,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+import {
+  AnimatedSidebar,
+  AnimatedSidebarClose,
+  AnimatedSidebarContent,
+  AnimatedSidebarFooter,
+  AnimatedSidebarGroup,
+  AnimatedSidebarGroupContent,
+  AnimatedSidebarGroupLabel,
+  AnimatedSidebarHeader,
+  AnimatedSidebarInset,
+  AnimatedSidebarMenu,
+  AnimatedSidebarMenuButton,
+  AnimatedSidebarMenuItem,
+  AnimatedSidebarMenuSub,
+  AnimatedSidebarMenuSubButton,
+  AnimatedSidebarMenuSubItem,
+  AnimatedSidebarProvider,
+  AnimatedSidebarRail,
+  AnimatedSidebarTrigger,
+} from "@/components/motion/animated-sidebar";
+
+const destinations = [
+  {
+    label: "People",
+    icon: CircleUserRound,
+    children: ["All people", "Recent activity", "Segments"],
+  },
+  {
+    label: "Companies",
+    icon: Building2,
+  },
+  {
+    label: "Opportunities",
+    icon: Target,
+    children: ["Pipeline", "Forecast", "Closed deals"],
+  },
+  {
+    label: "Tasks",
+    icon: ListTodo,
+  },
+  {
+    label: "Notes",
+    icon: NotebookTabs,
+  },
+  {
+    label: "Workflows",
+    icon: Workflow,
+    children: ["Automations", "Runs", "Templates"],
+  },
+  {
+    label: "Dashboard",
+    icon: LayoutGrid,
+  },
+] satisfies {
+  label: string;
+  icon: typeof CircleUserRound;
+  children?: string[];
+}[];
+
+export function AnimatedSidebarPreview() {
+  const [active, setActive] = useState("People");
+  const [openSection, setOpenSection] = useState<string | null>(null);
+
+  return (
+    <div className="w-full px-0 py-2 sm:p-3">
+      <AnimatedSidebarProvider className="h-[720px] min-h-0 overflow-hidden rounded-2xl border border-foreground/[0.08] bg-background">
+        <AnimatedSidebar
+          ariaLabel="Solace workspace"
+          collapsible="icon"
+          className="min-h-0"
+          panelClassName="h-full border-foreground/[0.08]"
+        >
+          <AnimatedSidebarHeader className="p-3 pb-2">
+            <div className="flex min-h-11 items-center gap-3 overflow-hidden px-2">
+              <div className="grid size-7 shrink-0 place-items-center rounded-lg bg-foreground text-background">
+                <Command aria-hidden="true" className="size-4" />
+              </div>
+              <button
+                type="button"
+                className="flex min-w-0 flex-1 items-center gap-2 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-ring group-data-[state=collapsed]/sidebar:hidden"
+              >
+                <span className="truncate text-sm font-semibold text-foreground">
+                  Acme Inc
+                </span>
+                <ChevronsUpDown
+                  aria-hidden="true"
+                  className="size-3.5 shrink-0 text-muted-foreground"
+                />
+              </button>
+              <AnimatedSidebarClose className="ml-auto text-muted-foreground hover:bg-muted md:hidden">
+                <X aria-hidden="true" className="size-4" />
+              </AnimatedSidebarClose>
+            </div>
+          </AnimatedSidebarHeader>
+
+          <AnimatedSidebarContent className="px-2 pt-1">
+            <AnimatedSidebarGroup className="pb-2">
+              <AnimatedSidebarGroupContent>
+                <AnimatedSidebarMenu>
+                  <AnimatedSidebarMenuItem>
+                    <AnimatedSidebarMenuButton
+                      icon={<Search className="size-4" />}
+                      onSelect={() => setActive("Search")}
+                    >
+                      Search
+                    </AnimatedSidebarMenuButton>
+                  </AnimatedSidebarMenuItem>
+                  <AnimatedSidebarMenuItem>
+                    <AnimatedSidebarMenuButton
+                      icon={<Sparkles className="size-4" />}
+                      onSelect={() => setActive("AI Assistant")}
+                    >
+                      AI Assistant
+                    </AnimatedSidebarMenuButton>
+                  </AnimatedSidebarMenuItem>
+                  <AnimatedSidebarMenuItem>
+                    <AnimatedSidebarMenuButton
+                      icon={<Inbox className="size-4" />}
+                      badge="4"
+                      onSelect={() => setActive("Inbox")}
+                    >
+                      Inbox
+                    </AnimatedSidebarMenuButton>
+                  </AnimatedSidebarMenuItem>
+                </AnimatedSidebarMenu>
+              </AnimatedSidebarGroupContent>
+            </AnimatedSidebarGroup>
+
+            <AnimatedSidebarGroup className="pt-1">
+              <AnimatedSidebarGroupLabel>
+                Workspaces
+              </AnimatedSidebarGroupLabel>
+              <AnimatedSidebarGroupContent>
+                <AnimatedSidebarMenu>
+                  {destinations.map(({ label, icon: Icon, children }) => (
+                    <AnimatedSidebarMenuItem key={label}>
+                      <AnimatedSidebarMenuButton
+                        isActive={
+                          active === label ||
+                          children?.includes(active) === true
+                        }
+                        ariaExpanded={
+                          children ? openSection === label : undefined
+                        }
+                        icon={<Icon className="size-4" />}
+                        onSelect={() => {
+                          setOpenSection((current) => {
+                            if (!children) {
+                              setActive(label);
+                              return null;
+                            }
+                            return current === label ? null : label;
+                          });
+                        }}
+                      >
+                        {label}
+                      </AnimatedSidebarMenuButton>
+                      {children ? (
+                        <AnimatedSidebarMenuSub
+                          open={openSection === label}
+                        >
+                          {children.map((child) => (
+                            <AnimatedSidebarMenuSubItem key={child}>
+                              <AnimatedSidebarMenuSubButton
+                                isActive={active === child}
+                                onSelect={() => setActive(child)}
+                              >
+                                {child}
+                              </AnimatedSidebarMenuSubButton>
+                            </AnimatedSidebarMenuSubItem>
+                          ))}
+                        </AnimatedSidebarMenuSub>
+                      ) : null}
+                    </AnimatedSidebarMenuItem>
+                  ))}
+                </AnimatedSidebarMenu>
+              </AnimatedSidebarGroupContent>
+            </AnimatedSidebarGroup>
+          </AnimatedSidebarContent>
+
+          <AnimatedSidebarFooter className="gap-3 border-none p-3">
+
+            <button
+              type="button"
+              className="flex min-h-11 w-full items-center gap-3 overflow-hidden rounded-xl p-1 text-left outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <span className="grid size-9 shrink-0 place-items-center rounded-full bg-[#d5ff66] text-xs font-semibold text-[#172000]">
+                AS
+              </span>
+              <span className="min-w-0 flex-1 group-data-[state=collapsed]/sidebar:hidden">
+                <span className="block truncate text-sm font-medium text-foreground">
+                  Ava Stone
+                </span>
+                <span className="block truncate text-xs text-muted-foreground">
+                  ava@solace.app
+                </span>
+              </span>
+              <ChevronRight
+                aria-hidden="true"
+                className="size-4 shrink-0 text-muted-foreground group-data-[state=collapsed]/sidebar:hidden"
+              />
+            </button>
+          </AnimatedSidebarFooter>
+
+          <AnimatedSidebarRail />
+        </AnimatedSidebar>
+
+        <AnimatedSidebarInset className="min-h-0 bg-background">
+          <header className="flex h-16 shrink-0 items-center gap-3 border-border border-b px-4">
+            <AnimatedSidebarTrigger className="text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
+              <PanelLeft aria-hidden="true" className="size-4" />
+            </AnimatedSidebarTrigger>
+            <div className="h-5 w-px bg-border" />
+            <p className="text-sm font-medium text-foreground">{active}</p>
+          </header>
+
+          <div className="flex min-h-0 flex-1 flex-col justify-between overflow-hidden p-5 sm:p-7">
+            <div>
+              <p className="text-xs font-medium text-muted-foreground">
+                Wednesday, July 29
+              </p>
+              <h3 className="mt-2 max-w-md text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
+                Good morning, Ava.
+              </h3>
+              <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">
+                Your workspace stays in place while the navigation folds down
+                to a focused icon rail.
+              </p>
+            </div>
+
+            <div className="flex items-end justify-between border-border border-t pt-4">
+              <div>
+                <p className="text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
+                  Active view
+                </p>
+                <p className="mt-1 text-sm font-medium text-foreground">
+                  {active}
+                </p>
+              </div>
+              <p className="hidden text-xs text-muted-foreground sm:block">
+                Press ⌘B to toggle
+              </p>
+            </div>
+          </div>
+        </AnimatedSidebarInset>
+      </AnimatedSidebarProvider>
+    </div>
+  );
+}