motion-ui-skill 2.0.0

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { AnimatedNumber } from "@/components/motion/animated-number";
+import { NumberTicker } from "@/components/motion/number-ticker";
+import { EASE_OUT } from "@/lib/ease";
+
+export function NumberPreview() {
+  const [value, setValue] = useState(48273);
+  const [variant, setVariant] = useState<"ticker" | "animated">("ticker");
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setValue((currentValue) => currentValue + Math.floor(Math.random() * 50));
+    }, 2500);
+    return () => window.clearInterval(id);
+  }, []);
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setVariant((currentVariant) => currentVariant === "ticker" ? "animated" : "ticker");
+    }, 3000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <div className="relative flex min-h-20 min-w-40 items-center justify-center text-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 === "ticker" ? (
+            <div>
+              <p className="text-xs text-muted-foreground">Active users</p>
+              <NumberTicker
+                value={value}
+                className="text-3xl font-semibold tracking-tight text-foreground tabular-nums"
+                format={(number) => number.toLocaleString()}
+              />
+            </div>
+          ) : (
+            <div>
+              <p className="text-xs text-muted-foreground">Revenue</p>
+              <div className="text-3xl font-semibold tracking-tight text-foreground tabular-nums">
+                <AnimatedNumber
+                  value={129480}
+                  format={(number) => `$${Math.round(number).toLocaleString()}`}
+                />
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { Button } from "@/components/motion/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/motion/popover";
+
+export function PopoverPreview() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
+      <Popover side="bottom" align="start">
+        <PopoverTrigger>
+          <Button variant="secondary">Edit profile</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-72">
+          <p className="text-sm font-medium text-foreground">Dimensions</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Set the width and height for the layer.
+          </p>
+          <div className="mt-3 flex flex-col gap-2">
+            <label className="flex items-center justify-between gap-3 text-sm">
+              <span className="text-muted-foreground">Width</span>
+              <input
+                defaultValue="100%"
+                className="h-8 w-32 rounded-lg border border-border bg-background px-2.5 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-foreground/20"
+              />
+            </label>
+            <label className="flex items-center justify-between gap-3 text-sm">
+              <span className="text-muted-foreground">Height</span>
+              <input
+                defaultValue="auto"
+                className="h-8 w-32 rounded-lg border border-border bg-background px-2.5 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-foreground/20"
+              />
+            </label>
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      <Popover trigger="hover" side="top">
+        <PopoverTrigger>
+          <Button variant="outline">Hover me</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56">
+          <p className="text-sm text-foreground">
+            Opens on hover, with a grace window so you can move into the panel.
+          </p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/components/previews/motion/preview-rail.preview.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { PreviewRail } from "@/components/motion/preview-rail";
+
+export const previewRailItems = [
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    description: "Return to your workspace overview and recent activity.",
+    href: "#dashboard",
+  },
+  {
+    id: "components",
+    label: "Components",
+    description: "Browse motion primitives for React and Next.js.",
+    href: "#components",
+  },
+  {
+    id: "blocks",
+    label: "Blocks",
+    description: "Explore composed, product-ready interface blocks.",
+    href: "#blocks",
+  },
+  {
+    id: "playground",
+    label: "Playground",
+    description: "Tune motion values and preview behavior live.",
+    href: "#playground",
+  },
+  {
+    id: "docs",
+    label: "Documentation",
+    description: "Read installation, usage, and API reference notes.",
+    href: "#docs",
+  },
+  {
+    id: "changelog",
+    label: "Changelog",
+    description: "Review newly launched components and improvements.",
+    href: "#changelog",
+  },
+  {
+    id: "sponsors",
+    label: "Sponsors",
+    description: "Support continued development of the open-source library.",
+    href: "#sponsors",
+  },
+  {
+    id: "pro",
+    label: "Motion UI Pro",
+    description: "Get premium components and lifetime access.",
+    href: "#pro",
+  },
+  {
+    id: "examples",
+    label: "Examples",
+    description: "See components composed in practical interface patterns.",
+    href: "#examples",
+  },
+  {
+    id: "templates",
+    label: "Templates",
+    description: "Start from polished layouts built with Motion UI components.",
+    href: "#templates",
+  },
+  {
+    id: "guides",
+    label: "Guides",
+    description: "Learn how to combine motion primitives effectively.",
+    href: "#guides",
+  },
+  {
+    id: "community",
+    label: "Community",
+    description: "Discover what other builders are creating with Motion UI.",
+    href: "#community",
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    description: "View the source, report issues, and contribute improvements.",
+    href: "#github",
+  },
+  {
+    id: "about",
+    label: "About",
+    description: "Learn more about the ideas and people behind Motion UI.",
+    href: "#about",
+  },
+];
+
+export function PreviewRailPreview() {
+  return (
+    <div className="flex w-full flex-col gap-8">
+      <PreviewRail
+        items={previewRailItems}
+        defaultActiveId="docs"
+        className="mx-auto h-[360px] w-full max-w-2xl"
+      />
+      <PreviewRail
+        items={previewRailItems}
+        orientation="horizontal"
+        defaultActiveId="docs"
+        className="mx-auto h-[280px] w-full max-w-2xl"
+      />
+    </div>
+  );
+}

package/components/previews/motion/pull-to-refresh.preview.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Bell, CheckCircle2, GitPullRequest, MessageCircle } from "lucide-react";
+import { useState } from "react";
+import { PullToRefresh } from "@/components/motion/pull-to-refresh";
+
+const initialUpdates = [
+  {
+    id: 1,
+    icon: GitPullRequest,
+    title: "Motion review approved",
+    detail: "The pull request is ready to merge.",
+    time: "4m",
+  },
+  {
+    id: 2,
+    icon: MessageCircle,
+    title: "New component feedback",
+    detail: "The spring feels much closer to native now.",
+    time: "18m",
+  },
+  {
+    id: 3,
+    icon: CheckCircle2,
+    title: "Registry checks passed",
+    detail: "All component files resolved successfully.",
+    time: "31m",
+  },
+  {
+    id: 4,
+    icon: Bell,
+    title: "Preview deployed",
+    detail: "The latest build is ready to inspect.",
+    time: "1h",
+  },
+  {
+    id: 5,
+    icon: MessageCircle,
+    title: "Docs comment resolved",
+    detail: "The usage example now covers async refreshes.",
+    time: "2h",
+  },
+] as const;
+
+export function PullToRefreshPreview() {
+  const [refreshCount, setRefreshCount] = useState(0);
+  const [latestUpdate, setLatestUpdate] = useState<number | null>(null);
+
+  const updates = latestUpdate
+    ? [
+        {
+          id: latestUpdate,
+          icon: Bell,
+          title: "You’re all caught up",
+          detail: "The activity feed was refreshed just now.",
+          time: "now",
+        },
+        ...initialUpdates,
+      ]
+    : initialUpdates;
+
+  return (
+    <div className="flex min-h-[34rem] w-full items-center justify-center p-4">
+      <div className="w-full max-w-sm overflow-hidden rounded-[2rem] border border-border bg-background shadow-2xl">
+        <PullToRefresh
+          ariaLabel="Activity feed"
+          className="h-[30rem]"
+          onRefresh={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 900));
+            const next = refreshCount + 1;
+            setRefreshCount(next);
+            setLatestUpdate(Date.now());
+          }}
+        >
+          <header className="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/90 px-5 py-4 backdrop-blur-md">
+            <div>
+              <p className="font-semibold text-foreground">Activity</p>
+              <p className="text-xs text-muted-foreground">
+                Pull down to check for updates
+              </p>
+            </div>
+            <span className="rounded-full bg-muted px-2.5 py-1 font-mono text-[10px] text-muted-foreground">
+              {refreshCount ? `${refreshCount} refreshed` : "live"}
+            </span>
+          </header>
+
+          <div className="divide-y divide-border px-2 pb-3">
+            {updates.map((update) => {
+              const Icon = update.icon;
+
+              return (
+                <article key={update.id} className="flex gap-3 px-3 py-4">
+                  <div className="grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-border bg-card text-muted-foreground shadow-sm">
+                    <Icon className="h-4 w-4" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-start justify-between gap-3">
+                      <p className="text-sm font-medium text-foreground">
+                        {update.title}
+                      </p>
+                      <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+                        {update.time}
+                      </span>
+                    </div>
+                    <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                      {update.detail}
+                    </p>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </PullToRefresh>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { useState } from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/motion/radio";
+
+export function RadioPreview() {
+  const [plan, setPlan] = useState("pro");
+
+  return (
+    <RadioGroup value={plan} onValueChange={setPlan} className="min-w-48">
+      <RadioGroupItem value="starter" label="Starter — free" />
+      <RadioGroupItem value="pro" label="Pro — $12/mo" />
+      <RadioGroupItem value="team" label="Team — $29/mo" />
+      <RadioGroupItem value="legacy" label="Legacy plan" disabled />
+    </RadioGroup>
+  );
+}

package/components/previews/motion/range-slider.preview.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useState } from "react";
+
+import { RangeSlider } from "@/components/motion/range-slider";
+
+export function RangeSliderPreview() {
+  const [value, setValue] = useState(40);
+
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>Drag the handle</span>
+        <span className="tabular-nums text-foreground">{value}</span>
+      </div>
+      <RangeSlider value={value} onValueChange={setValue} step={5} aria-label="Value" />
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/motion/select";
+
+export function SelectPreview() {
+  const [value, setValue] = useState("next");
+  return (
+    <div className="w-56">
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick a framework" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="next">Next.js</SelectItem>
+          <SelectItem value="remix">Remix</SelectItem>
+          <SelectItem value="astro">Astro</SelectItem>
+          <SelectItem value="vite">Vite</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}