motion-ui-skill 2.0.0

package/references/motion/page-transition.md

@@ -0,0 +1,78 @@
+---
+title: "Page Transition"
+description: "Composable page and view transition container supporting fade, slide, scale, push, and 3D flip modes with AnimatePresence."
+category: "Components"
+publishedAt: "2026-09-05"
+updatedAt: "2026-09-05"
+documentation: "references/motion/page-transition.md"
+markdown: "references/motion/page-transition.md"
+license: "MIT"
+---
+
+# Page Transition
+
+> Composable page and view transition container supporting fade, slide, scale, push, and 3D flip modes with AnimatePresence. Inspired by transitions.dev and Motion.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py page-transition --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `motion`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { PageTransition } from "@/components/motion/page-transition";
+import { useState } from "react";
+
+export function PageTransitionExample() {
+  const [tab, setTab] = useState("overview");
+
+  return (
+    <div className="p-8 max-w-xl">
+      <div className="flex gap-2 mb-6 border-b border-border pb-2">
+        {["overview", "analytics", "settings"].map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-3 py-1.5 text-xs font-semibold rounded-lg ${
+              tab === t ? "bg-primary text-primary-foreground" : "text-muted-foreground"
+            }`}
+          >
+            {t.toUpperCase()}
+          </button>
+        ))}
+      </div>
+
+      <PageTransition transitionKey={tab} mode="slide">
+        <div className="p-6 rounded-2xl bg-card border border-border">
+          <h2 className="text-lg font-bold capitalize">{tab} Section</h2>
+          <p className="text-xs text-muted-foreground mt-2">
+            Dynamic view content rendered with smooth spatial spring transition.
+          </p>
+        </div>
+      </PageTransition>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `transitionKey` | `string \| number` | Required | Key that triggers transition when changed (e.g. pathname or tab id). |
+| `mode` | `"fade" \| "slide" \| "scale" \| "push" \| "flip"` | `"fade"` | Transition animation mode. |
+| `direction` | `1 \| -1` | `1` | Spatial navigation direction (1 for forward, -1 for backward). |
+| `children` | `React.ReactNode` | Required | Content to animate. |
+| `className` | `string` | `undefined` | Container classes. |

package/references/motion/pagination.md

@@ -0,0 +1,64 @@
+---
+title: "Pagination"
+description: "Animated pagination navigation with layoutId gliding active pill, ellipsis jump indicators, and keyboard accessibility."
+category: "Components"
+publishedAt: "2026-09-05"
+updatedAt: "2026-09-05"
+documentation: "references/motion/pagination.md"
+markdown: "references/motion/pagination.md"
+license: "MIT"
+---
+
+# Pagination
+
+> Animated pagination navigation with `layoutId` gliding active pill, ellipsis jump indicators, and keyboard accessibility. Inspired by shadcn/ui and Transitions.dev.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py pagination --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `motion`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { Pagination } from "@/components/motion/pagination";
+import { useState } from "react";
+
+export function PaginationExample() {
+  const [page, setPage] = useState(3);
+
+  return (
+    <div className="p-6 bg-card rounded-2xl border border-border flex flex-col items-center gap-4">
+      <p className="text-xs text-muted-foreground">Showing page {page} of 12</p>
+      <Pagination
+        currentPage={page}
+        totalPages={12}
+        siblingCount={1}
+        onPageChange={(p) => setPage(p)}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `currentPage` | `number` | required | 1-indexed current active page number. |
+| `totalPages` | `number` | required | Total available page count. |
+| `onPageChange` | `(page: number) => void` | required | Callback triggered when a new page is selected. |
+| `siblingCount` | `number` | `1` | Number of sibling page buttons shown on either side of the active page. |
+| `className` | `string` | `undefined` | Custom styling overrides merged via `cn()`. |

package/references/motion/password-input.md

@@ -0,0 +1,77 @@
+---
+title: "Password Input"
+description: "Smart password field with show/hide toggle, animated multi-segment strength meter, and live criteria validation checklist."
+category: "Components"
+publishedAt: "2026-09-05"
+updatedAt: "2026-09-05"
+documentation: "references/motion/password-input.md"
+markdown: "references/motion/password-input.md"
+license: "MIT"
+---
+
+# Password Input
+
+> Smart password field with show/hide toggle, animated multi-segment strength meter, and live criteria validation checklist. Inspired by Coss (Origin UI) and Design System Checklist.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py password-input --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `motion`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { PasswordInput } from "@/components/motion/password-input";
+import { useState } from "react";
+
+export function PasswordInputExample() {
+  const [password, setPassword] = useState("");
+  const [isValid, setIsValid] = useState(false);
+
+  return (
+    <div className="max-w-sm p-6 bg-card rounded-2xl border border-border flex flex-col gap-4">
+      <h3 className="text-sm font-semibold">Create Secure Password</h3>
+      <PasswordInput
+        value={password}
+        onChange={(val, valid) => {
+          setPassword(val);
+          setIsValid(valid);
+        }}
+        showStrengthMeter={true}
+        showCriteria={true}
+        placeholder="Enter password..."
+      />
+
+      <button
+        type="button"
+        disabled={!isValid}
+        className="w-full py-2.5 rounded-xl bg-primary text-primary-foreground text-xs font-semibold disabled:opacity-40"
+      >
+        Continue
+      </button>
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | `undefined` | Controlled password string value. |
+| `onChange` | `(value: string, isValid: boolean) => void` | `undefined` | Callback emitted when input value or validity status updates. |
+| `showStrengthMeter` | `boolean` | `true` | Displays the 4-segment animated score progress bar. |
+| `showCriteria` | `boolean` | `true` | Displays the checklist of password security requirements. |
+| `className` | `string` | `undefined` | Custom styling overrides merged via `cn()`. |

package/references/motion/phone-input.md

@@ -0,0 +1,63 @@
+---
+title: "Phone Input"
+description: "International phone number input with search-filtered country selector dropdown, flags, dial codes, and spring transitions."
+category: "Components"
+publishedAt: "2026-09-05"
+updatedAt: "2026-09-05"
+documentation: "references/motion/phone-input.md"
+markdown: "references/motion/phone-input.md"
+license: "MIT"
+---
+
+# Phone Input
+
+> International phone number input with search-filtered country selector dropdown, flags, dial codes, and spring transitions. Inspired by Origin UI (Coss) and KeenThemes ReUI.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py phone-input --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `motion`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { PhoneInput, type CountryCode } from "@/components/motion/phone-input";
+import { useState } from "react";
+
+export function PhoneInputExample() {
+  const [phone, setPhone] = useState("");
+
+  return (
+    <div className="max-w-xs p-8">
+      <PhoneInput
+        value={phone}
+        onChange={(val, country) => setPhone(val)}
+        placeholder="(555) 000-0000"
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string` | `""` | Phone number input string. |
+| `onChange` | `(val: string, country: CountryCode) => void` | `undefined` | Change callback returning value and selected country. |
+| `countries` | `CountryCode[]` | Default list | List of country flags and dialing prefixes. |
+| `defaultCountry` | `string` | `"United States"` | Initially selected country. |
+| `disabled` | `boolean` | `false` | Disables country picker and input field. |
+| `className` | `string` | `undefined` | Custom outer wrapper classes. |

package/references/motion/popover.md

@@ -0,0 +1,209 @@
+---
+title: "Popover"
+description: "Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled."
+category: "Components"
+publishedAt: "2026-07-07"
+updatedAt: "2026-07-27"
+documentation: "references/motion/popover.md"
+markdown: "references/motion/popover.md"
+license: "MIT"
+---
+
+# Popover
+
+> Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.
+
+## Install
+
+### Gooey Popover
+
+Composable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on top. Click or hover, controlled or uncontrolled.
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py popover --dest ./src
+```
+
+### Morph Popover
+
+Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips as one piece — a single-surface morph with a drop-shadow that hugs the shape. Side/align aware, controlled or uncontrolled.
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py popover-morph --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `motion`
+- `react`
+- `react-dom`
+- `tailwind-merge`
+
+## Usage
+
+### Gooey Popover usage
+
+Composable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on top. Click or hover, controlled or uncontrolled.
+
+```tsx
+"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>
+  );
+}
+```
+
+### Morph Popover usage
+
+Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips as one piece — a single-surface morph with a drop-shadow that hugs the shape. Side/align aware, controlled or uncontrolled.
+
+```tsx
+"use client";
+
+import { ChevronDown, Copy, Pencil, Share2, Trash2 } from "lucide-react";
+import { useState } from "react";
+import {
+  MorphPopover,
+  MorphPopoverContent,
+  MorphPopoverTrigger,
+} from "@/components/motion/popover-morph";
+
+const ACTIONS = [
+  { icon: Pencil, label: "Edit" },
+  { icon: Copy, label: "Duplicate" },
+  { icon: Share2, label: "Share" },
+  { icon: Trash2, label: "Delete" },
+];
+
+export function MorphPopoverPreview() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MorphPopover open={open} onOpenChange={setOpen}>
+      <MorphPopoverTrigger>
+        <button
+          type="button"
+          className="inline-flex h-10 items-center gap-2 rounded-xl border border-border bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-border-strong focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Options
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </button>
+      </MorphPopoverTrigger>
+
+      <MorphPopoverContent align="start" className="w-48 p-1.5">
+        {ACTIONS.map(({ icon: Icon, label }) => (
+          <button
+            key={label}
+            type="button"
+            onClick={() => setOpen(false)}
+            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted"
+          >
+            <Icon className="h-4 w-4 text-muted-foreground" />
+            {label}
+          </button>
+        ))}
+      </MorphPopoverContent>
+    </MorphPopover>
+  );
+}
+```
+
+## API Reference
+
+### Popover
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean` | — | No | Controlled open state. |
+| `defaultOpen` | `boolean` | `false` | No | Uncontrolled initial open state. |
+| `onOpenChange` | `((open: boolean) => void)` | — | No | — |
+| `trigger` | `"click" \| "hover"` | `click` | No | How the popover is summoned. Default "click". |
+| `side` | `"bottom" \| "top"` | `bottom` | No | Which side of the trigger the panel oozes out of. Default "bottom". |
+| `align` | `"end" \| "start" \| "center"` | `center` | No | Alignment along the trigger's edge. Default "center". |
+| `sideOffset` | `number` | `14` | No | Gap between trigger and panel, in px — the length of the gooey neck. Default 14. |
+| `panelRadius` | `number` | `16` | No | Corner radius of the open panel, in px. Default 16. |
+| `gooStrength` | `number` | `8` | No | Blur radius feeding the goo filter — higher melts more. Default 8. |
+| `className` | `string` | — | No | — |
+
+### PopoverTrigger
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | — | Yes | A single focusable element (e.g. a Button) that opens the popover. |
+
+### PopoverContent
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `className` | `string` | — | No | — |
+
+### MorphPopover
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean` | — | No | Controlled open state. |
+| `defaultOpen` | `boolean` | `false` | No | Uncontrolled initial open state. |
+| `onOpenChange` | `((open: boolean) => void)` | — | No | — |
+| `className` | `string` | — | No | — |
+
+### MorphPopoverContent
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `side` | `"bottom" \| "top"` | `bottom` | No | — |
+| `align` | `"end" \| "start"` | `end` | No | — |
+| `sideOffset` | `number` | `8` | No | Gap between trigger and panel, in px. Default 8. |
+| `radius` | `number` | `16` | No | Panel corner radius, in px. Default 16. |
+| `className` | `string` | — | No | — |
+

package/references/motion/preview-rail.md

@@ -0,0 +1,165 @@
+---
+title: "Preview Rail"
+description: "Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview."
+category: "Components"
+publishedAt: "2026-07-11"
+updatedAt: "2026-07-11"
+documentation: "references/motion/preview-rail.md"
+markdown: "references/motion/preview-rail.md"
+license: "MIT"
+---
+
+# Preview Rail
+
+> Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py preview-rail --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `motion`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"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>
+  );
+}
+```
+
+## API Reference
+
+### PreviewRail
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `items` | `PreviewRailItem[]` | — | Yes | — |
+| `label` | `string` | `Section navigation` | No | — |
+| `orientation` | `"horizontal" \| "vertical"` | `vertical` | No | — |
+| `activeId` | `string` | — | No | — |
+| `defaultActiveId` | `string` | — | No | — |
+| `onActiveChange` | `((id: string) => void)` | — | No | — |
+| `onItemSelect` | `((item: PreviewRailItem) => void)` | — | No | — |
+| `renderPreview` | `((item: PreviewRailItem) => ReactNode)` | — | No | — |
+| `showPreview` | `boolean` | `true` | No | — |
+| `previewSide` | `"before" \| "after"` | `after` | No | — |
+| `highlightActive` | `boolean` | `false` | No | — |
+| `itemSize` | `number` | `24` | No | — |
+| `className` | `string` | — | No | — |
+| `railClassName` | `string` | — | No | — |
+| `previewContainerClassName` | `string` | — | No | — |
+| `previewClassName` | `string` | — | No | — |
+