motion-ui-skill 2.0.0

package/references/craft/radio-group-field-input.md

@@ -0,0 +1,51 @@
+---
+title: "Radio Group Field Input"
+description: "Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/radio-group-field-input.md"
+markdown: "references/craft/radio-group-field-input.md"
+license: "MIT"
+---
+
+# Radio Group Field Input
+
+> Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py radio-group-field-input --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RadioGroupFieldInput } from "@/components/inputs/radio-group-field-input";
+
+export function RadioGroupFieldInputDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RadioGroupFieldInput />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RadioGroupFieldInput
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/rain-prism-background.md

@@ -0,0 +1,51 @@
+---
+title: "Rain Prism"
+description: "Moody rainfall with angled streaks and a soft prism band across the scene — music, film, and reflective editorial layouts."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/rain-prism-background.md"
+markdown: "references/craft/rain-prism-background.md"
+license: "MIT"
+---
+
+# Rain Prism
+
+> Moody rainfall with angled streaks and a soft prism band across the scene — music, film, and reflective editorial layouts.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py rain-prism-background --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RainPrismBackground } from "@/components/background-gradient/rain-prism-background";
+
+export function RainPrismBackgroundDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RainPrismBackground />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RainPrismBackground
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/recent-transactions-table.md

@@ -0,0 +1,52 @@
+---
+title: "Recent Transactions Table"
+description: "Stripe-style transaction list with positive and negative amounts and simple pagination."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/recent-transactions-table.md"
+markdown: "references/craft/recent-transactions-table.md"
+license: "MIT"
+---
+
+# Recent Transactions Table
+
+> Stripe-style transaction list with positive and negative amounts and simple pagination.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py recent-transactions-table --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RecentTransactionsTable } from "@/components/table/recent-transactions-table";
+
+export function RecentTransactionsTableDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RecentTransactionsTable />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RecentTransactionsTable
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/recorder-face.md

@@ -0,0 +1,52 @@
+---
+title: "Recorder Face"
+description: "A quirky record button with a mascot face, circular dial, and live timer. Tap to start and pause — feels like a tiny dedicated recorder app."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/recorder-face.md"
+markdown: "references/craft/recorder-face.md"
+license: "MIT"
+---
+
+# Recorder Face
+
+> A quirky record button with a mascot face, circular dial, and live timer. Tap to start and pause — feels like a tiny dedicated recorder app.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py recorder-face --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RecorderFaceWidget } from "@/components/widgets/recorder-face-widget";
+
+export function RecorderFaceWidgetDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RecorderFaceWidget />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RecorderFaceWidget
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/resource-links-panel.md

@@ -0,0 +1,52 @@
+---
+title: "Resource Links Panel"
+description: "Resource link list with logo, name, description, and domain per row — same layout as the homepage Resources section. Copy and pass title + items."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/resource-links-panel.md"
+markdown: "references/craft/resource-links-panel.md"
+license: "MIT"
+---
+
+# Resource Links Panel
+
+> Resource link list with logo, name, description, and domain per row — same layout as the homepage Resources section. Copy and pass title + items.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py resource-links-panel --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { ResourceLinksPanel } from "@/components/resources/resource-links-panel";
+
+export function ResourceLinksPanelDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <ResourceLinksPanel />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### ResourceLinksPanel
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/retail-price-tag.md

@@ -0,0 +1,51 @@
+---
+title: "Retail Price Tag"
+description: "Hanging store tag with discount badge, sale price, SKU, and barcode stripes. E-commerce editorial and product drops."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/retail-price-tag.md"
+markdown: "references/craft/retail-price-tag.md"
+license: "MIT"
+---
+
+# Retail Price Tag
+
+> Hanging store tag with discount badge, sale price, SKU, and barcode stripes. E-commerce editorial and product drops.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py retail-price-tag --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RetailPriceTagCard } from "@/components/pricing/retail-price-tag-card";
+
+export function RetailPriceTagCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RetailPriceTagCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RetailPriceTagCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/reverse-diagonal-box-pattern.md

@@ -0,0 +1,51 @@
+---
+title: "Reverse Diagonal Box"
+description: "Mirrored 45° hairline hatch — same quiet stage as Diagonal Box, rotated right to left for visual variety."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/reverse-diagonal-box-pattern.md"
+markdown: "references/craft/reverse-diagonal-box-pattern.md"
+license: "MIT"
+---
+
+# Reverse Diagonal Box
+
+> Mirrored 45° hairline hatch — same quiet stage as Diagonal Box, rotated right to left for visual variety.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py reverse-diagonal-box-pattern --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { ReverseDiagonalBoxPattern } from "@/components/background-pattern/reverse-diagonal-box-pattern";
+
+export function ReverseDiagonalBoxPatternDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <ReverseDiagonalBoxPattern />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### ReverseDiagonalBoxPattern
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/ride-pickup.md

@@ -0,0 +1,53 @@
+---
+title: "Ride Pickup"
+description: "Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/ride-pickup.md"
+markdown: "references/craft/ride-pickup.md"
+license: "MIT"
+---
+
+# Ride Pickup
+
+> Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py ride-pickup --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { RidePickupWidget } from "@/components/widgets/ride-pickup-widget";
+
+export function RidePickupWidgetDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <RidePickupWidget />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### RidePickupWidget
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/sand-drift-background.md

@@ -0,0 +1,51 @@
+---
+title: "Sand Drift"
+description: "Layered desert dunes in stone and amber tones with fine grain — travel, hospitality, and calm wellness layouts."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/sand-drift-background.md"
+markdown: "references/craft/sand-drift-background.md"
+license: "MIT"
+---
+
+# Sand Drift
+
+> Layered desert dunes in stone and amber tones with fine grain — travel, hospitality, and calm wellness layouts.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py sand-drift-background --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SandDriftBackground } from "@/components/background-gradient/sand-drift-background";
+
+export function SandDriftBackgroundDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SandDriftBackground />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SandDriftBackground
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/search-input.md

@@ -0,0 +1,52 @@
+---
+title: "Search Input"
+description: "Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/search-input.md"
+markdown: "references/craft/search-input.md"
+license: "MIT"
+---
+
+# Search Input
+
+> Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py search-input --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SearchInput } from "@/components/inputs/search-input";
+
+export function SearchInputDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SearchInput />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SearchInput
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/segmented-toggle-button.md

@@ -0,0 +1,51 @@
+---
+title: "Segmented Toggle Button"
+description: "iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/segmented-toggle-button.md"
+markdown: "references/craft/segmented-toggle-button.md"
+license: "MIT"
+---
+
+# Segmented Toggle Button
+
+> iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py segmented-toggle-button --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SegmentedToggleButton } from "@/components/buttons/segmented-toggle-button";
+
+export function SegmentedToggleButtonDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SegmentedToggleButton />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SegmentedToggleButton
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/select-field-input.md

@@ -0,0 +1,52 @@
+---
+title: "Select Field Input"
+description: "Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/select-field-input.md"
+markdown: "references/craft/select-field-input.md"
+license: "MIT"
+---
+
+# Select Field Input
+
+> Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py select-field-input --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SelectFieldInput } from "@/components/inputs/select-field-input";
+
+export function SelectFieldInputDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SelectFieldInput />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SelectFieldInput
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/share-menu.md

@@ -0,0 +1,52 @@
+---
+title: "Share Menu"
+description: "Square icon trigger opens a horizontal brand rail — four social tiles in a row plus a full-width copy button."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/share-menu.md"
+markdown: "references/craft/share-menu.md"
+license: "MIT"
+---
+
+# Share Menu
+
+> Square icon trigger opens a horizontal brand rail — four social tiles in a row plus a full-width copy button.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py share-menu --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { ShareMenuDropdown } from "@/components/dropdowns/share-menu-dropdown";
+
+export function ShareMenuDropdownDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <ShareMenuDropdown />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### ShareMenuDropdown
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |