motion-ui-skill 2.0.0

package/components/previews/motion/animated-toast-stack.preview.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { Check, LoaderCircle, Sparkles, X } from "lucide-react";
+import { useState } from "react";
+import {
+  AnimatedToastStack,
+  type ToastInput,
+  type ToastPosition,
+  useAnimatedToastStack,
+} from "@/components/motion/animated-toast-stack";
+import { cn } from "@/lib/utils";
+
+const POSITIONS: ToastPosition[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+const EXAMPLES: Array<ToastInput & { label: string }> = [
+  {
+    label: "Promise",
+    status: "loading",
+    title: "Publishing component",
+    description: "Bundling source, preview, and registry metadata.",
+    duration: 0,
+  },
+  {
+    label: "Success",
+    status: "success",
+    title: "Component published",
+    description: "Registry endpoint and raw source are available.",
+  },
+  {
+    label: "Error",
+    status: "error",
+    title: "Snapshot failed",
+    description: "Retry after the browser target settles.",
+  },
+];
+
+export function AnimatedToastStackPreview() {
+  const [position, setPosition] = useState<ToastPosition>("bottom-right");
+  const {
+    toasts,
+    showToast,
+    updateToast,
+    dismissToast,
+    clearToasts,
+  } = useAnimatedToastStack({
+    defaultDuration: 3600,
+    limit: 5,
+  });
+
+  const openToast = (input: ToastInput) => {
+    const id = showToast(input);
+    if (input.status === "loading") {
+      window.setTimeout(() => {
+        updateToast(id, {
+          status: "success",
+          title: "Publish complete",
+          description: "Toast updated in-place from loading to success.",
+          duration: 3200,
+        });
+      }, 1800);
+    }
+  };
+
+  const moveStack = (nextPosition: ToastPosition) => {
+    setPosition(nextPosition);
+    showToast({
+      status: "info",
+      title: "Position changed",
+      description: `New toasts open from ${nextPosition}.`,
+    });
+  };
+
+  return (
+    <div className="flex min-h-72 w-full flex-col items-center justify-center gap-6">
+      <AnimatedToastStack
+        toasts={toasts}
+        onDismiss={dismissToast}
+        position={position}
+        placement="fixed"
+        maxVisible={4}
+        classNames={{
+          surface: "bg-card/95",
+        }}
+        icons={{
+          neutral: <Sparkles className="h-3.5 w-3.5" />,
+        }}
+      />
+
+      <div className="flex flex-col items-center gap-2 text-center">
+        <p className="text-sm font-medium text-foreground">Open a real toast</p>
+        <p className="max-w-sm text-xs leading-5 text-muted-foreground">
+          Toasts render fixed on the screen. Change position to open a toast from that edge.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        {EXAMPLES.map((example) => {
+          return (
+            <button
+              key={example.label}
+              type="button"
+              onClick={() => openToast(example)}
+              className="inline-flex h-9 items-center gap-2 rounded-full border border-border bg-card px-4 text-xs font-medium text-foreground transition-colors press hover:border-(--color-border-strong)"
+            >
+              {example.status === "loading" ? (
+                <LoaderCircle className="h-3.5 w-3.5" />
+              ) : example.status === "success" ? (
+                <Check className="h-3.5 w-3.5" />
+              ) : (
+                <X className="h-3.5 w-3.5" />
+              )}
+              {example.label}
+            </button>
+          );
+        })}
+        <button
+          type="button"
+          onClick={clearToasts}
+          className="inline-flex h-9 items-center rounded-full px-4 text-xs font-medium text-muted-foreground press hover:bg-foreground/[0.06] hover:text-foreground"
+        >
+          Clear
+        </button>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-1.5">
+        {POSITIONS.map((positionOption) => (
+          <button
+            key={positionOption}
+            type="button"
+            onClick={() => moveStack(positionOption)}
+            className={cn(
+              "rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors press",
+              position === positionOption
+                ? "bg-foreground text-background"
+                : "bg-foreground/[0.04] text-muted-foreground hover:bg-foreground/[0.08] hover:text-foreground",
+            )}
+          >
+            {positionOption}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/previews/motion/bottom-sheet.preview.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from "react";
+import { BottomSheet } from "@/components/motion/bottom-sheet";
+
+export function BottomSheetPreview() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="inline-flex h-10 items-center rounded-full border border-border bg-card px-5 text-sm font-medium text-foreground press hover:border-(--color-border-strong)"
+      >
+        Open bottom sheet
+      </button>
+      <BottomSheet
+        open={open}
+        onOpenChange={setOpen}
+        snapPoints={[0.4, 0.85]}
+        title="Quick actions"
+        description="Drag the handle, fling, or swipe down to dismiss."
+      >
+        <ul className="divide-y divide-border">
+          {["Share", "Duplicate", "Move to folder", "Rename", "Archive", "Delete"].map((item) => (
+            <li key={item} className="py-3 text-sm text-foreground">{item}</li>
+          ))}
+        </ul>
+        <div className="py-12 text-center text-xs text-muted-foreground">
+          Fling up to expand, fling down to dismiss.
+        </div>
+      </BottomSheet>
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+import { BounceSidebar } from "@/components/motion/bounce-sidebar";
+
+const destinations = [
+  { id: "overview", label: "Overview" },
+  { id: "components", label: "Components" },
+  { id: "motion", label: "Motion" },
+  { id: "templates", label: "Templates" },
+  { id: "changelog", label: "Changelog" },
+];
+
+export function BounceSidebarPreview() {
+  const [active, setActive] = useState("components");
+
+  return (
+    <div className="flex min-h-[360px] w-full items-center justify-center">
+      <BounceSidebar
+        items={destinations}
+        value={active}
+        onValueChange={setActive}
+        ariaLabel="Navigation sections"
+        className="w-52"
+        listClassName="w-full"
+        itemClassName="text-base"
+      />
+    </div>
+  );
+}

package/components/previews/motion/bouncy-accordion.preview.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  CalendarClock,
+  FileText,
+  FolderKanban,
+  PackageCheck,
+  RadioTower,
+  ShieldCheck,
+} from "lucide-react";
+import { BouncyAccordion } from "@/components/motion/bouncy-accordion";
+
+const items = [
+  {
+    id: "brief",
+    title: "Release Brief",
+    description:
+      "Collect launch notes, owners, and risks in one compact handoff before the release window opens.",
+    icon: <FileText className="h-4 w-4" />,
+  },
+  {
+    id: "launch",
+    title: "Launch Checklist",
+    description:
+      "Verify copy, links, analytics, rollback steps, and final approvals without leaving the queue.",
+    icon: <ShieldCheck className="h-4 w-4" />,
+  },
+  {
+    id: "campaign",
+    title: "Campaign Notes",
+    description:
+      "Keep channel-specific notes close to the task while preserving a calm collapsed list.",
+    icon: <RadioTower className="h-4 w-4" />,
+  },
+  {
+    id: "calendar",
+    title: "Rollout Calendar",
+    description:
+      "Plan announcements, staging checks, reminders, and quiet periods around the same timeline.",
+    icon: <CalendarClock className="h-4 w-4" />,
+  },
+  {
+    id: "ship",
+    title: "Ship Build",
+    description:
+      "Track the current artifact, deploy status, and final sign-off before marking the release complete.",
+    icon: <PackageCheck className="h-4 w-4" />,
+  },
+  {
+    id: "archive",
+    title: "Archive Assets",
+    description:
+      "Move final copy, images, and source files into the campaign folder once the rollout is done.",
+    icon: <FolderKanban className="h-4 w-4" />,
+  },
+];
+
+export function BouncyAccordionPreview() {
+  return (
+    <div className="flex min-h-96 w-full items-center justify-center">
+      <div className="w-full max-w-sm h-[480px]">
+        <BouncyAccordion items={items} defaultValue="calendar" />
+      </div>
+    </div>
+  );
+}

package/components/previews/motion/center-morph-modal.preview.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { ArrowUpRight, Check } from "lucide-react";
+import {
+  CenterMorphModal,
+  CenterMorphModalContent,
+  CenterMorphModalTrigger,
+} from "@/components/motion/center-morph-modal";
+
+export function CenterMorphModalPreview() {
+  return (
+    <div className="flex min-h-[420px] w-full items-center justify-center">
+      <CenterMorphModal>
+        <CenterMorphModalTrigger>
+          <button
+            type="button"
+            className="inline-flex h-10 items-center justify-center rounded-full bg-foreground px-5 text-sm font-medium text-background press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          >
+            Open modal
+          </button>
+        </CenterMorphModalTrigger>
+
+        <CenterMorphModalContent
+          ariaLabel="Motion UI Pro"
+          ariaDescribedBy="center-morph-pro-description"
+        >
+          <div className="p-7 sm:p-8">
+            <p className="text-sm font-medium text-muted-foreground">
+              Motion UI Pro
+            </p>
+            <h2 className="mt-5 max-w-xs pr-8 text-2xl font-medium tracking-tight text-foreground">
+              Ship the whole experience.
+            </h2>
+            <p
+              id="center-morph-pro-description"
+              className="mt-3 text-sm leading-relaxed text-muted-foreground"
+            >
+              Go beyond individual components with premium animated sections
+              and complete Next.js templates.
+            </p>
+
+            <div className="mt-7 space-y-3 border-y border-border py-5">
+              {[
+                "Premium animated sections",
+                "Complete Next.js templates",
+                "Editable source and private registry",
+              ].map((feature) => (
+                <div
+                  key={feature}
+                  className="flex items-center gap-3 text-sm text-foreground"
+                >
+                  <Check
+                    className="h-4 w-4 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                  <span>{feature}</span>
+                </div>
+              ))}
+            </div>
+
+            <a
+              href="#"
+              target="_blank"
+              rel="noreferrer"
+              className="mt-7 inline-flex h-11 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-sm font-medium text-background press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              Explore Motion UI Pro
+              <ArrowUpRight className="h-4 w-4" aria-hidden="true" />
+            </a>
+          </div>
+        </CenterMorphModalContent>
+      </CenterMorphModal>
+    </div>
+  );
+}

package/components/previews/motion/checkbox.preview.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from "react";
+import { Checkbox } from "@/components/motion/checkbox";
+
+export function CheckboxPreview() {
+  const [terms, setTerms] = useState(true);
+  const [updates, setUpdates] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Checkbox
+        checked={terms}
+        onCheckedChange={setTerms}
+        label="Accept terms and conditions"
+      />
+      <Checkbox
+        checked={updates}
+        onCheckedChange={setUpdates}
+        label="Email me product updates"
+      />
+      <Checkbox checked indeterminate onCheckedChange={() => {}} label="Select all (partial)" />
+      <Checkbox checked disabled onCheckedChange={() => {}} label="Disabled" />
+    </div>
+  );
+}

package/components/previews/motion/combobox.preview.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Blocks, Box, Component, Layers3 } from "lucide-react";
+import { useState } from "react";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+} from "@/components/motion/combobox";
+
+const WORKSPACES = [
+  {
+    value: "studio",
+    label: "Design studio",
+    detail: "12 projects",
+    group: "Recent",
+    icon: Component,
+    color: "bg-amber-400/20 text-amber-700 dark:text-amber-300",
+  },
+  {
+    value: "product",
+    label: "Product team",
+    detail: "8 projects",
+    group: "Recent",
+    icon: Layers3,
+    color: "bg-sky-400/20 text-sky-700 dark:text-sky-300",
+  },
+  {
+    value: "playground",
+    label: "Playground",
+    detail: "24 experiments",
+    group: "Workspaces",
+    icon: Blocks,
+    color: "bg-emerald-400/20 text-emerald-700 dark:text-emerald-300",
+  },
+  {
+    value: "archive",
+    label: "Component archive",
+    detail: "41 components",
+    group: "Workspaces",
+    icon: Box,
+    color: "bg-rose-400/20 text-rose-700 dark:text-rose-300",
+  },
+] as const;
+
+function WorkspaceMark({ value }: { value: string }) {
+  const workspace = WORKSPACES.find((item) => item.value === value);
+  if (!workspace) return null;
+  const Icon = workspace.icon;
+  return (
+    <span
+      className={`grid size-7 shrink-0 place-items-center rounded-lg ${workspace.color}`}
+    >
+      <Icon className="size-3.5" />
+    </span>
+  );
+}
+
+export function ComboboxPreview() {
+  const [value, setValue] = useState("studio");
+
+  return (
+    <div className="w-full max-w-72">
+      <p className="mb-2 text-xs font-medium text-muted-foreground">
+        Workspace
+      </p>
+      <Combobox value={value} onValueChange={setValue}>
+        <ComboboxTrigger className="h-12 rounded-2xl px-2.5">
+          <ComboboxInput
+            aria-label="Search workspaces"
+            placeholder="Search workspaces…"
+          />
+        </ComboboxTrigger>
+
+        <ComboboxContent className="w-72 rounded-2xl">
+          <ComboboxList ariaLabel="Workspaces" className="p-2">
+            <ComboboxEmpty>No workspaces found.</ComboboxEmpty>
+            {(["Recent", "Workspaces"] as const).map((group, groupIndex) => (
+              <ComboboxGroup key={group}>
+                {groupIndex > 0 ? <ComboboxSeparator /> : null}
+                <ComboboxLabel>{group}</ComboboxLabel>
+                {WORKSPACES.filter((item) => item.group === group).map(
+                  (workspace) => (
+                    <ComboboxItem
+                      key={workspace.value}
+                      value={workspace.value}
+                      textValue={workspace.label}
+                      keywords={[workspace.detail, workspace.group]}
+                      className="py-2"
+                    >
+                      <span className="flex min-w-0 items-center gap-2.5">
+                        <WorkspaceMark value={workspace.value} />
+                        <span className="min-w-0">
+                          <span className="block truncate font-medium text-foreground">
+                            {workspace.label}
+                          </span>
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {workspace.detail}
+                          </span>
+                        </span>
+                      </span>
+                    </ComboboxItem>
+                  ),
+                )}
+              </ComboboxGroup>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
+  );
+}

package/components/previews/motion/context-menu.preview.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  Check,
+  Copy,
+  Download,
+  Eye,
+  Pencil,
+  Trash2,
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useState } from "react";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/components/motion/context-menu";
+import { SPRING_SWAP } from "@/lib/ease";
+
+export function ContextMenuPreview() {
+  const reduce = useReducedMotion() ?? false;
+  const [message, setMessage] = useState<string | null>(null);
+  const [offline, setOffline] = useState(false);
+
+  return (
+    <div className="flex min-h-[360px] w-full items-center justify-center">
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <button
+            type="button"
+            className="group flex flex-col items-center outline-none"
+          >
+            <div className="relative h-24 w-32 transition-transform duration-150 group-active:scale-[0.98] group-focus-visible:rounded-2xl group-focus-visible:ring-2 group-focus-visible:ring-foreground/20 group-focus-visible:ring-offset-4 group-focus-visible:ring-offset-background">
+              <div className="absolute left-1 top-1 h-7 w-14 rounded-t-[10px] bg-[#d4a84f] dark:bg-[#a77d2f]" />
+              <div className="absolute inset-x-0 bottom-0 top-5 rounded-[14px] bg-[#e7bb61] shadow-[0_14px_24px_-16px_rgba(90,58,8,0.75)] dark:bg-[#bd8d36]" />
+              <div className="absolute inset-x-0 bottom-0 top-9 rounded-[14px] bg-[#efc86f] dark:bg-[#cb9a41]" />
+              <div className="absolute inset-x-5 bottom-4 h-px bg-black/10 dark:bg-white/10" />
+            </div>
+
+            <span className="mt-4 text-sm font-medium text-foreground">
+              Right click on me
+            </span>
+
+            <div className="mt-1 h-4">
+              <AnimatePresence mode="wait" initial={false}>
+                {message ? (
+                  <motion.span
+                    key={message}
+                    initial={
+                      reduce
+                        ? { opacity: 0 }
+                        : { opacity: 0, y: 3, filter: "blur(2px)" }
+                    }
+                    animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                    exit={
+                      reduce
+                        ? { opacity: 0 }
+                        : { opacity: 0, y: -2, filter: "blur(2px)" }
+                    }
+                    transition={reduce ? { duration: 0.1 } : SPRING_SWAP}
+                    className="flex items-center gap-1 text-[10px] text-muted-foreground"
+                  >
+                    <Check aria-hidden="true" className="h-3 w-3 text-success" />
+                    {message}
+                  </motion.span>
+                ) : (
+                  <span className="text-[10px] text-muted-foreground">
+                    or long-press · Shift + F10
+                  </span>
+                )}
+              </AnimatePresence>
+            </div>
+          </button>
+        </ContextMenuTrigger>
+
+        <ContextMenuContent ariaLabel="Folder actions" className="w-60">
+          <ContextMenuLabel>Project files</ContextMenuLabel>
+          <ContextMenuItem
+            textValue="Open"
+            onSelect={() => setMessage("Folder opened")}
+          >
+            <Eye aria-hidden="true" className="h-4 w-4" />
+            Open
+            <ContextMenuShortcut>↵</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem
+            textValue="Rename"
+            onSelect={() => setMessage("Ready to rename")}
+          >
+            <Pencil aria-hidden="true" className="h-4 w-4" />
+            Rename
+            <ContextMenuShortcut>R</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem
+            textValue="Duplicate"
+            onSelect={() => setMessage("Folder duplicated")}
+          >
+            <Copy aria-hidden="true" className="h-4 w-4" />
+            Duplicate
+            <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem
+            textValue="Download"
+            onSelect={() => setMessage("Download started")}
+          >
+            <Download aria-hidden="true" className="h-4 w-4" />
+            Download
+          </ContextMenuItem>
+
+          <ContextMenuSeparator />
+
+          <ContextMenuCheckboxItem
+            textValue="Keep offline"
+            checked={offline}
+            closeOnSelect={false}
+            onCheckedChange={(checked) => {
+              setOffline(checked);
+              setMessage(checked ? "Available offline" : "Online only");
+            }}
+          >
+            Keep offline
+          </ContextMenuCheckboxItem>
+
+          <ContextMenuSeparator />
+
+          <ContextMenuItem
+            tone="destructive"
+            textValue="Move to trash"
+            onSelect={() => setMessage("Moved to trash")}
+          >
+            <Trash2 aria-hidden="true" className="h-4 w-4" />
+            Move to trash
+            <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  );
+}