motion-ui-skill 2.0.0

package/components/previews/blocks/availability-scheduler.preview.tsx

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

package/components/previews/blocks/bloom-menu.preview.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { BloomMenu } from "@/components/motion/bloom-menu";
+
+export function BloomMenuPreview() {
+  return (
+    <div className="flex min-h-[420px] w-full items-start justify-center pt-24">
+      <BloomMenu />
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { CardFolder } from "@/components/motion/card-folder";
+import { DigitSwap } from "@/components/motion/digit-swap";
+
+const CARD_NUMBER = "3745 6987 4096 0806";
+const MASKED_CARD_NUMBER = "•••• •••• •••• 0806";
+const CONTOUR_RADII = Array.from({ length: 18 }, (_, index) => 72 + index * 24);
+
+function CardArtwork({ detailsVisible }: { detailsVisible: boolean }) {
+  return (
+    <span className="relative block h-full w-full overflow-hidden bg-[linear-gradient(135deg,#383a38_0%,#202120_48%,#111211_100%)] text-white">
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 640 404"
+        className="absolute inset-0 h-full w-full"
+      >
+        {CONTOUR_RADII.map((radius, index) => (
+          <circle
+            // The concentric contours deliberately begin outside the card so
+            // their cropped curves read like the reference artwork.
+            key={radius}
+            cx="-20"
+            cy="-28"
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            strokeOpacity={0.32 - index * 0.009}
+            strokeWidth="1.5"
+          />
+        ))}
+      </svg>
+
+      <span className="absolute inset-0 bg-[radial-gradient(circle_at_78%_8%,rgb(255_255_255/0.11),transparent_32%)]" />
+
+      <span className="absolute left-[6%] top-[8%] flex flex-col gap-2">
+        <span className="text-[10px] font-medium uppercase tracking-[0.22em] text-white/55">
+          Saurabh Chauhan
+        </span>
+        <DigitSwap
+          value={detailsVisible ? CARD_NUMBER : MASKED_CARD_NUMBER}
+          animationKey={detailsVisible ? "revealed" : "masked"}
+          direction={detailsVisible ? "up" : "down"}
+          suffixLength={4}
+          glyphClassName={detailsVisible ? "text-white/90" : "text-white/65"}
+          suffixClassName="text-white/90"
+          className="font-mono text-xs tracking-[0.13em]"
+        />
+      </span>
+
+      <span className="absolute top-[8%] right-[7%] h-[20%] w-[13%] overflow-hidden rounded-[18%] border border-black/30 bg-[linear-gradient(135deg,#f2f0ea_0%,#b9b7b1_45%,#e4e1d9_100%)]">
+        <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-black/30" />
+        <span className="absolute inset-x-0 top-1/3 h-px bg-black/30" />
+        <span className="absolute inset-x-0 bottom-1/3 h-px bg-black/30" />
+        <span className="absolute left-0 top-1/2 h-[34%] w-[28%] -translate-y-1/2 rounded-r-[35%] border border-l-0 border-black/30" />
+        <span className="absolute right-0 top-1/2 h-[34%] w-[28%] -translate-y-1/2 rounded-l-[35%] border border-r-0 border-black/30" />
+      </span>
+
+      <span className="absolute bottom-[9%] left-[6%] flex items-center gap-2 text-lg font-semibold tracking-[-0.04em]">
+        Motion UI <span className="block size-2.5 rotate-45 rounded-[2px] bg-white/85" />
+      </span>
+
+      <span className="absolute right-[7%] bottom-[10%] flex items-end gap-5">
+        <span className="flex flex-col gap-1">
+          <span className="text-[8px] font-medium uppercase tracking-[0.16em] text-white/40">
+            Expiry
+          </span>
+          <span className="text-xs font-medium text-white/90 tabular-nums">
+            08/29
+          </span>
+        </span>
+        <span className="flex flex-col gap-1">
+          <span className="text-[8px] font-medium uppercase tracking-[0.16em] text-white/40">
+            CVV
+          </span>
+          <DigitSwap
+            value={detailsVisible ? "123" : "•••"}
+            animationKey={detailsVisible ? "revealed" : "masked"}
+            direction={detailsVisible ? "up" : "down"}
+            className="font-mono text-xs font-medium text-white/90"
+          />
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export function CardFolderPreview() {
+  const [detailsVisible, setDetailsVisible] = useState(false);
+
+  return (
+    <div className="flex min-h-72 w-full items-center justify-center px-6 py-9">
+      <CardFolder
+        title="Saurabh Chauhan"
+        cardNumber={CARD_NUMBER}
+        expiry="08/29"
+        cvv="123"
+        detailsVisible={detailsVisible}
+        onDetailsVisibleChange={setDetailsVisible}
+        card={<CardArtwork detailsVisible={detailsVisible} />}
+      />
+    </div>
+  );
+}

package/components/previews/blocks/command-palette.preview.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { FileText, Home, Plus, Settings, User } from "lucide-react";
+import { useState } from "react";
+import { CommandPalette } from "@/components/motion/command-palette";
+
+export function CommandPalettePreview() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <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 command palette
+      </button>
+      <p className="text-sm text-muted-foreground">
+        Press{" "}
+        <kbd className="rounded border border-border bg-card px-1.5 py-0.5 text-xs text-foreground">
+          ⌘ J
+        </kbd>{" "}
+        (or <kbd className="rounded border border-border bg-card px-1.5 py-0.5 text-xs text-foreground">Ctrl J</kbd>) to open.
+      </p>
+      <CommandPalette
+        open={open}
+        onOpenChange={setOpen}
+        shortcut="j"
+        items={[
+          { id: "home", label: "Go to Home", group: "Navigation", icon: Home, hint: "G H", onSelect: () => {} },
+          { id: "profile", label: "Open profile", group: "Navigation", icon: User, hint: "G P", onSelect: () => {} },
+          { id: "settings", label: "Settings", group: "Navigation", icon: Settings, onSelect: () => {} },
+          { id: "new-doc", label: "Create document", group: "Actions", icon: FileText, hint: "⌘ N", onSelect: () => {} },
+          { id: "new-project", label: "New project", group: "Actions", icon: Plus, hint: "⌘ ⇧ N", onSelect: () => {} },
+        ]}
+      />
+    </div>
+  );
+}

package/components/previews/blocks/dynamic-island.preview.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Music, Phone, PhoneOff, Timer } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/motion/button";
+import {
+  DynamicIsland,
+  DynamicIslandView,
+} from "@/components/motion/dynamic-island";
+import { NumberTicker } from "@/components/motion/number-ticker";
+
+type IslandView = "call" | "timer" | "music" | null;
+
+const BAR_DELAYS = [0, 0.18, 0.09, 0.27];
+
+function EqBars() {
+  const reduce = useReducedMotion();
+  return (
+    <span className="flex h-4 items-end gap-0.5" aria-hidden>
+      {BAR_DELAYS.map((delay) => (
+        <motion.span
+          key={delay}
+          animate={reduce ? undefined : { scaleY: [0.4, 1, 0.55, 0.9, 0.4] }}
+          transition={{
+            duration: 1.1,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay,
+          }}
+          className="h-full w-0.5 origin-bottom rounded-full bg-(--color-success)"
+          style={{ scaleY: 0.6 }}
+        />
+      ))}
+    </span>
+  );
+}
+
+function formatClock(totalSeconds: number) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export function DynamicIslandPreview() {
+  const [view, setView] = useState<IslandView>(null);
+  const [seconds, setSeconds] = useState(154);
+
+  useEffect(() => {
+    if (view !== "timer") return;
+    const id = window.setInterval(() => {
+      setSeconds((s) => (s > 0 ? s - 1 : 0));
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [view]);
+
+  return (
+    <div className="flex w-full flex-col items-center gap-4">
+      {/* Fixed-height, top-aligned zone: the island stays pinned at the top
+          like under a notch and unfurls downward into reserved space. */}
+      <div className="flex h-32 w-full items-start justify-center pt-2">
+        <DynamicIsland
+          view={view}
+          compact={
+            <>
+              <span className="h-1.5 w-1.5 rounded-full bg-(--color-success)" />
+              <span>9:41</span>
+            </>
+          }
+        >
+          <DynamicIslandView id="call" className="gap-4">
+            <div className="flex flex-col">
+              <span className="text-[10px] uppercase tracking-wider opacity-60">
+                Incoming call
+              </span>
+              <span className="text-sm font-semibold">Saurabh</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                aria-label="Decline"
+                onClick={() => setView(null)}
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-destructive text-white"
+              >
+                <PhoneOff className="h-3.5 w-3.5" />
+              </button>
+              <button
+                type="button"
+                aria-label="Accept"
+                onClick={() => setView(null)}
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-(--color-success) text-white"
+              >
+                <Phone className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </DynamicIslandView>
+
+          <DynamicIslandView id="timer" className="gap-3">
+            <Timer className="h-4 w-4 text-(--color-warning)" />
+            <span className="text-[10px] uppercase tracking-wider opacity-60">
+              Timer
+            </span>
+            <NumberTicker
+              value={seconds}
+              format={formatClock}
+              startOnView={false}
+              duration={0.5}
+              className="text-sm font-semibold"
+            />
+          </DynamicIslandView>
+
+          <DynamicIslandView id="music" className="gap-3">
+            <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/15">
+              <Music className="h-3.5 w-3.5" />
+            </span>
+            <div className="flex flex-col text-left">
+              <span className="text-xs font-semibold leading-tight">
+                Midnight City
+              </span>
+              <span className="text-[10px] opacity-60">M83</span>
+            </div>
+            <EqBars />
+          </DynamicIslandView>
+        </DynamicIsland>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        <Button size="sm" variant="secondary" onClick={() => setView("call")}>
+          Call
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => {
+            setSeconds(154);
+            setView("timer");
+          }}
+        >
+          Timer
+        </Button>
+        <Button size="sm" variant="secondary" onClick={() => setView("music")}>
+          Music
+        </Button>
+        <Button size="sm" variant="ghost" onClick={() => setView(null)}>
+          Dismiss
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/previews/blocks/expandable-action-bar.preview.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  Archive,
+  Bell,
+  Copy,
+  Download,
+  Send,
+  Settings,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useMemo, useState } from "react";
+import {
+  ExpandableActionBar,
+  type ExpandableActionBarItem,
+} from "@/components/motion/expandable-action-bar";
+
+const ACTIONS: ExpandableActionBarItem[] = [
+  {
+    id: "send",
+    label: "Send",
+    icon: <Send className="h-4 w-4 motion-safe:group-hover:animate-action-send" />,
+    shortcut: "S",
+  },
+  {
+    id: "copy",
+    label: "Copy",
+    icon: <Copy className="h-4 w-4 motion-safe:group-hover:animate-action-copy" />,
+    shortcut: "C",
+  },
+  {
+    id: "download",
+    label: "Export",
+    icon: <Download className="h-4 w-4 motion-safe:group-hover:animate-action-download" />,
+    shortcut: "E",
+  },
+  {
+    id: "archive",
+    label: "Archive",
+    icon: <Archive className="h-4 w-4 motion-safe:group-hover:animate-action-archive" />,
+  },
+  {
+    id: "alerts",
+    label: "Alerts",
+    icon: <Bell className="h-4 w-4 origin-top motion-safe:group-hover:animate-action-bell" />,
+    badge: "3",
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    icon: <Settings className="h-4 w-4 motion-safe:group-hover:animate-action-settings" />,
+  },
+];
+
+export function ExpandableActionBarPreview() {
+  const [expanded, setExpanded] = useState(false);
+  const [activeId, setActiveId] = useState("send");
+
+  const items = useMemo(
+    () =>
+      ACTIONS.map((item) => ({
+        ...item,
+        active: item.id === activeId,
+      })),
+    [activeId],
+  );
+
+  return (
+    <div className="flex min-h-72 w-full flex-col items-center justify-center gap-6">
+      <div className="flex min-h-24 w-full items-center justify-center">
+        <ExpandableActionBar
+          items={items}
+          expanded={expanded}
+          onExpandedChange={setExpanded}
+          activeId={activeId}
+          onAction={(item) => setActiveId(item.id)}
+          classNames={{
+            item: "group",
+          }}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center justify-center gap-2">
+        <motion.button
+          type="button"
+          onClick={() => setExpanded((current) => !current)}
+          className="relative flex h-9 w-[110px] items-center justify-center overflow-hidden rounded-full border border-border bg-card text-xs font-medium text-foreground transition-colors hover:border-(--color-border-strong)"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.96 }}
+        >
+          <motion.div layout className="flex items-center gap-1.5">
+            <motion.svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-3.5 w-3.5 shrink-0"
+            >
+              <motion.path
+                initial={false}
+                animate={{
+                  d: expanded ? "M 10 20 L 10 14 L 4 14" : "M 9 21 L 3 21 L 3 15",
+                }}
+                transition={{ type: "spring", bounce: 0, duration: 0.3 }}
+              />
+              <motion.path
+                initial={false}
+                animate={{
+                  d: expanded ? "M 14 4 L 14 10 L 20 10" : "M 15 3 L 21 3 L 21 9",
+                }}
+                transition={{ type: "spring", bounce: 0, duration: 0.3 }}
+              />
+              <line x1="14" x2="21" y1="10" y2="3" />
+              <line x1="3" x2="10" y1="21" y2="14" />
+            </motion.svg>
+            <AnimatePresence mode="popLayout" initial={false}>
+              <motion.span
+                key={expanded ? "expanded" : "collapsed"}
+                initial={{ opacity: 0, y: -25, filter: "blur(4px)" }}
+                animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                exit={{ opacity: 0, y: 25, filter: "blur(4px)" }}
+                transition={{ type: "spring", bounce: 0, duration: 0.3 }}
+              >
+                {expanded ? "Collapse" : "Expand"}
+              </motion.span>
+            </AnimatePresence>
+          </motion.div>
+        </motion.button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  BadgeCheck,
+  Brush,
+  CalendarClock,
+  ChartSpline,
+  ChevronRight,
+  ClipboardCheck,
+  CloudUpload,
+  FileText,
+  Gauge,
+  GitBranch,
+  Images,
+  Inbox,
+  type LucideIcon,
+  Megaphone,
+  MessageCircle,
+  PackageOpen,
+  RefreshCw,
+  Rocket,
+  Siren,
+  SwatchBook,
+  UploadCloud,
+  Users,
+  Webhook,
+  Workflow,
+} from "lucide-react";
+import { ExpandableTabs } from "@/components/motion/expandable-tabs";
+
+function Row({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
+  return (
+    <button
+      type="button"
+      className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium text-foreground transition-colors hover:bg-muted"
+    >
+      <Icon className="h-4 w-4 text-muted-foreground" />
+      <span className="flex-1">{label}</span>
+      <ChevronRight className="h-4 w-4 text-muted-foreground" />
+    </button>
+  );
+}
+
+function Menu({ rows }: { rows: { icon: LucideIcon; label: string }[] }) {
+  return (
+    <div className="flex w-[17.125rem] flex-col gap-0.5">
+      {rows.map((r) => (
+        <Row key={r.label} icon={r.icon} label={r.label} />
+      ))}
+    </div>
+  );
+}
+
+export function ExpandableTabsPreview() {
+  return (
+    <div className="flex min-h-88 w-full items-end justify-center">
+      <ExpandableTabs
+        items={[
+          {
+            id: "launch",
+            label: "Launch",
+            icon: <Rocket className="h-4 w-4" />,
+            content: (
+              <Menu
+                rows={[
+                  { icon: FileText, label: "Release Brief" },
+                  { icon: ClipboardCheck, label: "Launch Checklist" },
+                  { icon: Megaphone, label: "Campaign Notes" },
+                  { icon: CalendarClock, label: "Rollout Calendar" },
+                  { icon: CloudUpload, label: "Ship Build" },
+                ]}
+              />
+            ),
+          },
+          {
+            id: "inbox",
+            label: "Inbox",
+            icon: <Inbox className="h-4 w-4" />,
+            content: (
+              <Menu
+                rows={[
+                  { icon: MessageCircle, label: "Client Feedback" },
+                  { icon: Users, label: "Team Requests" },
+                  { icon: BadgeCheck, label: "Approval Notes" },
+                ]}
+              />
+            ),
+          },
+          {
+            id: "flows",
+            label: "Flows",
+            icon: <Workflow className="h-4 w-4" />,
+            content: (
+              <Menu
+                rows={[
+                  { icon: GitBranch, label: "Trigger Map" },
+                  { icon: Webhook, label: "Webhook Runs" },
+                  { icon: RefreshCw, label: "Retry Queue" },
+                ]}
+              />
+            ),
+          },
+          {
+            id: "assets",
+            label: "Assets",
+            icon: <PackageOpen className="h-4 w-4" />,
+            content: (
+              <Menu
+                rows={[
+                  { icon: SwatchBook, label: "Brand Kit" },
+                  { icon: Images, label: "Mockup Library" },
+                  { icon: Brush, label: "Design Tokens" },
+                  { icon: UploadCloud, label: "Export Queue" },
+                ]}
+              />
+            ),
+          },
+          {
+            id: "status",
+            label: "Status",
+            icon: <ChartSpline className="h-4 w-4" />,
+            content: (
+              <Menu
+                rows={[
+                  { icon: Gauge, label: "Activation" },
+                  { icon: ChartSpline, label: "Conversion" },
+                  { icon: Siren, label: "Incidents" },
+                ]}
+              />
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+}

package/components/previews/blocks/feedback-widget.preview.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRef } from "react";
+import { FeedbackWidget } from "@/components/motion/feedback-widget";
+
+export function FeedbackWidgetPreview() {
+  const attempts = useRef(0);
+
+  const submitFeedback = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 900));
+    attempts.current += 1;
+
+    if (attempts.current === 1) {
+      throw new Error("Preview submission failed");
+    }
+  };
+
+  return (
+    <div className="relative h-80 w-full max-w-md overflow-hidden rounded-2xl border border-border bg-background">
+      {/* Faux app surface so the corner trigger has something to sit on. */}
+      <div className="border-b border-border px-5 py-3">
+        <div className="h-2.5 w-24 rounded-full bg-muted-foreground/20" />
+      </div>
+      <div className="flex flex-col gap-3 p-5">
+        <div className="h-2.5 w-3/4 rounded-full bg-muted-foreground/15" />
+        <div className="h-2.5 w-1/2 rounded-full bg-muted-foreground/15" />
+        <div className="h-24 w-full rounded-xl bg-muted-foreground/[0.06]" />
+        <div className="h-2.5 w-2/3 rounded-full bg-muted-foreground/15" />
+      </div>
+
+      <FeedbackWidget onSubmit={submitFeedback} />
+    </div>
+  );
+}