### Install and Run Development Server (npm)

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Installs project dependencies using npm and starts the Next.js development server. Assumes Node.js 20+ is installed. The application will be accessible at http://localhost:3000.

```bash
npm install
npm run dev
```

--------------------------------

### Build Storybook Locally (Bash)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

Command to build Storybook for local deployment. Requires npm and Storybook setup. Outputs to storybook-static directory. Assumes dependencies are installed.

```bash
npm run build-storybook
```

--------------------------------

### Set up and Deploy Storybook to GitHub Pages (Bash and JSON)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

Install gh-pages package, add a deploy script to package.json, and run the deployment. The script builds Storybook and publishes to GitHub Pages. Requires gh-pages dependency and GitHub repo with Pages enabled.

```bash
npm install --save-dev gh-pages
```

```json
"deploy-storybook": "npm run build-storybook && gh-pages -d storybook-static"
```

```bash
npm run deploy-storybook
```

--------------------------------

### Quick Deploy Commands for Storybook (Bash)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

Simple commands for building Storybook and deploying via Vercel CLI. Assumes Vercel is set up. Options for CLI or dashboard deployment.

```bash
# Build Storybook
npm run build-storybook

# Deploy to Vercel (if using CLI)
vercel --prod

# Or use the Vercel dashboard for easier setup
```

--------------------------------

### Deploy Storybook to Vercel using CLI (Bash)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

Install Vercel CLI and deploy Storybook to production. Requires global installation and Vercel account. Can specify project name and cwd.

```bash
npm i -g vercel

# Deploy Storybook
vercel --prod --cwd . --name your-storybook-project
```

--------------------------------

### Start and Build Storybook (npm)

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Commands to start the Storybook development server for interactive component exploration and to build static Storybook files for deployment. The dev server runs on http://localhost:6006.

```bash
npm run storybook
npm run build-storybook
```

--------------------------------

### Automate Storybook Deployment to Vercel with GitHub Actions (YAML)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

GitHub Actions workflow to build and deploy Storybook on push to main branch. Requires Vercel token, org ID, and project ID as secrets. Uses actions for checkout, node setup, and Vercel deployment.

```yaml
name: Deploy Storybook

on:
  push:
    branches: [main]
    paths:
      - 'stories/**'
      - 'components/**'
      - '.storybook/**'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build-storybook
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
          working-directory: ./
          scope: ${{ secrets.VERCEL_ORG_ID }}
```

--------------------------------

### Configure Netlify for Storybook Deployment (TOML and Bash)

Source: https://github.com/motaterry/design-system-playground/blob/main/STORYBOOK_DEPLOYMENT.md

Create netlify.toml for Netlify deployment. Includes build command and publish directory. Build is done via npm run build-storybook. Requires connecting GitHub repo to Netlify for automated deploys.

```bash
npm run build-storybook
```

```toml
[build]
  command = "npm run build-storybook"
  publish = "storybook-static"
```

--------------------------------

### React TSX Component Usage Examples

Source: https://github.com/motaterry/design-system-playground/blob/main/COMPONENT_EXTRACTION.md

Demonstrates the usage of several components like AutocompleteInput, PriceCard, WeatherCard, CompareGate, and HeroSection in a React TypeScript environment. It shows how to import and configure these components with various props for different functionalities.

```tsx
import {
  AutocompleteInput,
  ShareBlock,
  CostComparisonCard,
  PriceCard,
  WeatherCard,
  CompareGate,
  CompareResult,
  PageHeader,
  HeroSection
} from "@/components"

// Autocomplete with metrics
<AutocompleteInput
  value={value}
  onChange={setValue}
  onSelect={handleSelect}
  suggestions={options}
  showMetrics={true}
/>

// Price card with custom formatting
<PriceCard
  price={145.50}
  change={2.3}
  minPrice={142}
  maxPrice={148}
  formatPrice={(p) => `$${p.toFixed(2)}`}
/>

// Weather forecast
<WeatherCard
  days={weatherData}
  temperatureUnit="°C"
  rainUnit="mm"
/>

// Comparison gate
<CompareGate
  isLocked={false}
  title="Compare Performance"
  label1="Your Score"
  label2="Average Score"
  onSubmit={handleSubmit}
/>

// Hero section
<HeroSection
  title="Welcome"
  description="Get started today"
  backgroundImageUrl="/hero.jpg"
  overlayOpacity={0.7}
>
  <SearchBar />
</HeroSection>
```

--------------------------------

### Add New shadcn/ui Components

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Command to add new components from the shadcn/ui library to the project. This command installs dependencies and creates the component files, typically within the `components/ui/` directory.

```bash
npx shadcn@latest add [component-name]

# Example: Add the avatar component
npx shadcn@latest add avatar
```

--------------------------------

### Create Storybook Story File

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Template for creating a Storybook story file for a React component. It defines metadata, the component itself, and example stories, facilitating component testing and documentation within Storybook.

```tsx
// stories/ComponentName.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { ComponentName } from '@/components/ui/component-name'

const meta = {
  title: 'Components/ComponentName',
  component: ComponentName,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ComponentName>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    // component props
  },
}
```

--------------------------------

### Theme Provider and Toggle with next-themes (React/TypeScript)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Shows next-themes setup for system-aware light/dark mode in a Next.js layout, a theme toggle component that switches between light/dark using Lucide icons, and a theme-aware UI component that reflects the current theme.

```tsx
// Layout setup (app/layout.tsx)
import { ThemeProvider } from "next-themes"
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}

// Theme toggle component
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from "lucide-react"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

// Theme-aware component
export function ThemedCard() {
  const { theme } = useTheme()

  return (
    <div className="bg-background text-foreground border border-border p-6 rounded-md">
      <p>Current theme: {theme}</p>
      <p className="text-muted-foreground">This card adapts to light/dark mode</p>
    </div>
  )
}
```

--------------------------------

### Use CSS Variables with Tailwind Utilities

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Example of applying CSS variables, mapped through Tailwind configuration, to HTML elements for styling. This showcases the integration of design tokens into the UI components.

```tsx
<div className="bg-primary text-primary-foreground rounded-md">
  Content
</div>
```

--------------------------------

### CompareGate: Advanced Custom Result Rendering

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Illustrates how to use CompareGate with custom result rendering. This example defines a `renderComparisonResult` function to display analysis based on user input, including difference calculation and conditional styling. It utilizes UI components from '@/components/ui/card'.

```tsx
import { CompareGate } from "@/components/comparison/compare-gate"
import { Card, CardContent } from "@/components/ui/card"

// Advanced comparison with custom result rendering
export function CompareWithResults() {
  const renderComparisonResult = (data: { value1: number; value2: number }) => {
    const difference = data.value1 - data.value2
    const percentDiff = ((difference / data.value2) * 100).toFixed(1)
    const isAbove = difference > 0

    return (
      <Card className="border border-border shadow-lg">
        <CardContent className="p-6 space-y-4">
          <h3 className="text-xl font-bold">Comparison Results</h3>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-muted-foreground">Your Value</p>
              <p className="text-3xl font-bold">{data.value1.toFixed(2)}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Regional Average</p>
              <p className="text-3xl font-bold">{data.value2.toFixed(2)}</p>
            </div>
          </div>
          <div className={`p-4 rounded-md ${isAbove ? 'bg-success/10' : 'bg-warning/10'}`}>
            <p className="font-semibold">
              You are {Math.abs(parseFloat(percentDiff))}% {isAbove ? 'above' : 'below'} average
            </p>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <CompareGate
      title="Profit Margin Analysis"
      description="Compare your profit margins anonymously"
      label1="Your Profit Margin (%)"
      label2="Industry Benchmark (%)"
      placeholder1="e.g., 15.5"
      placeholder2="e.g., 12.3"
      parseValue={(value) => parseFloat(value)}
      renderResult={renderComparisonResult}
      privacyTitle="🔒 Anonymous • Encrypted"
      privacyDescription="All comparisons are anonymized and encrypted end-to-end"
    />
  )
}
```

--------------------------------

### Create Card with Image using TypeScript

Source: https://context7.com/motaterry/design-system-playground/llms.txt

This snippet demonstrates how to create a card component that includes an image. The image is displayed prominently at the top, followed by the card header, content, and footer. This example is useful for visual content presentation. It uses React, TypeScript, and shadcn/ui.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

// Card with image
export function ImageCard() {
  return (
    <Card className="overflow-hidden">
      <div className="w-full h-48 bg-muted">
        <img
          src="/farm-aerial.jpg"
          alt="Farm aerial view"
          className="w-full h-full object-cover"
        />
      </div>
      <CardHeader>
        <CardTitle>Sunrise Valley Farm</CardTitle>
        <CardDescription>Organic vegetables and grains</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm">
          Award-winning sustainable farm practicing regenerative agriculture
          for over 20 years.
        </p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Visit Farm</Button>
      </CardFooter>
    </Card>
  )
}
```

--------------------------------

### Display Complex Card with Data Grid using TypeScript

Source: https://context7.com/motaterry/design-system-playground/llms.txt

This example showcases a complex card component designed to display a grid of key metrics. It utilizes data mapping to render multiple data points, suitable for dashboards or overview pages. Dependencies include React, TypeScript, and shadcn/ui for card and button components.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

// Complex card with data grid
export function DataCard() {
  const metrics = [
    { label: "Total Area", value: "250 hectares" },
    { label: "Crop Yield", value: "8.5 tons/ha" },
    { label: "Soil Quality", value: "Excellent" },
    { label: "Water Usage", value: "Optimal" }
  ]

  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Farm Overview</span>
          <span className="text-sm font-normal text-success">+12.5%</span>
        </CardTitle>
        <CardDescription>Season 2024 Performance</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          {metrics.map((metric) => (
            <div key={metric.label} className="space-y-1">
              <p className="text-xs text-muted-foreground">{metric.label}</p>
              <p className="text-xl font-bold">{metric.value}</p>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Export Report</Button>
        <Button>Optimize</Button>
      </CardFooter>
    </Card>
  )
}
```

--------------------------------

### Create Autocomplete Input in TSX

Source: https://context7.com/motaterry/design-system-playground/llms.txt

The AutocompleteInput component offers keyboard navigation, suggestion filtering, match highlighting, and optional metadata for trends. It relies on React hooks such as useState and useRef for state management. Inputs include value, onChange, and suggestions array; outputs trigger onSelect callbacks; limitations include lack of server-side API integration in examples.

```tsx
import { AutocompleteInput } from "@/components/forms/autocomplete-input"
import { useState, useRef } from "react"

// Basic autocomplete with string array
export function BasicAutocomplete() {
  const [value, setValue] = useState("")

  const suggestions = [
    "Apple Farm",
    "Banana Plantation",
    "Cherry Orchard",
    "Date Palm Grove",
    "Elderberry Field"
  ]

  return (
    <AutocompleteInput
      value={value}
      onChange={setValue}
      onSelect={(selected) => {
        setValue(selected)
        console.log("Selected:", selected)
      }}
      suggestions={suggestions}
      placeholder="Search farms..."
      showSuggestionsOnFocus={true}
    />
  )
}

// Advanced autocomplete with metadata and trends
export function AutocompleteWithMetrics() {
  const [farmName, setFarmName] = useState("")

  const farmOptions = [
    {
      label: "Sunrise Organic Farm",
      value: "farm_001",
      metadata: { trend: "up", change: 12.5 }
    },
    {
      label: "Valley View Ranch",
      value: "farm_002",
      metadata: { trend: "down", change: -3.2 }
    },
    {
      label: "Mountain Peak Agriculture",
      value: "farm_003",
      metadata: { trend: "stable", change: 0.1 }
    }
  ]

  return (
    <AutocompleteInput
      value={farmName}
      onChange={setFarmName}
      onSelect={(selected) => setFarmName(selected)}
      suggestions={farmOptions}
      placeholder="Select farm..."
      showMetrics={true}
      className="w-full"
    />
  )
}

// Custom highlight function and imperative handle
export function AutocompleteAdvanced() {
  const [query, setQuery] = useState("")
  const inputRef = useRef<AutocompleteInputHandle>(null)

  const customHighlight = (text: string, query: string) => {
    // Custom logic for highlighting multiple matches
    const regex = new RegExp(`(${query})`, 'gi')
    const parts = text.split(regex)

    return parts.map((part, i) => ({
      text: part,
      highlight: regex.test(part)
    }))
  }

  return (
    <div>
      <AutocompleteInput
        ref={inputRef}
        value={query}
        onChange={setQuery}
        onSelect={setQuery}
        suggestions={["Apple", "Apricot", "Avocado", "Banana"]}
        highlightMatch={customHighlight}
        onFocus={() => console.log("Input focused")}
        onBlur={() => console.log("Input blurred")}
      />
      <button onClick={() => inputRef.current?.focus()}>
        Focus Input
      </button>
    </div>
  )
}
```

--------------------------------

### Create Tabs Component using Radix UI in TypeScript (TSX)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Shows two implementations of an accessible tabs interface: a simple uncontrolled version and a controlled version with React state. Both examples use Radix UI primitives and Tailwind CSS classes for styling. The snippets illustrate how to structure tab lists, triggers, and content panels, and how to manage active tabs programmatically.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";

export function BasicTabs() {
  return (
    <Tabs defaultValue=\"overview\" className=\"w-full\">
      <TabsList>
        <TabsTrigger value=\"overview\">Overview</TabsTrigger>
        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>
        <TabsTrigger value=\"reports\">Reports</TabsTrigger>
      </TabsList>

      <TabsContent value="overview\">
        <Card>
          <CardHeader>
            <CardTitle>Farm Overview</CardTitle>
            <CardDescription>Quick snapshot of your farm</CardDescription>
          </CardHeader>
          <CardContent>
            <p>Total production: 2,500 tons this season</p>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value=\"analytics\">
        <Card>
          <CardHeader>
            <Card>Analytics Dashboard</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Detailed performance metrics and trends</p>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value=\"reports\">
        <Card>
          <CardHeader>
            <CardTitle>Reports</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Generate and download reports</p>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

```

```tsx
export function ControlledTabs() {
  const [activeTab, setActiveTab] = useState(\"crop\");

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab}>
      <TabsList className=\"grid w-full grid-cols-3\">
        <TabsTrigger value=\"crop\">Crop Data</TabsTrigger>
        <TabsTrigger value=\"livestock\">Livestock</TabsTrigger>
        <TabsTrigger value=\"equipment\">Equipment</TabsTrigger>
      </TabsList>

      <TabsContent value=\"crop\" className=\"space-y-4\">
        <h3 className=\"text-lg font-semibold\">Crop Management</h3>
        <div className=\"grid grid-cols-3 gap-4\">
          <Card><CardContent className=\"pt-6\">Wheat: 500 acres</CardContent></Card>
          <Card><CardContent className=\"pt-6\">Corn: 350 acres</CardContent></Card>
          <Card><CardContent className=\"pt-6\">Soybeans: 250 acres</CardContent></Card>
        </div>
      </TabsContent>

      <TabsContent value=\"livestock\">
        <p>Livestock inventory and health tracking</p>
      </TabsContent>

      <TabsContent value=\"equipment\">
        <p>Equipment maintenance schedules</p>
      </TabsContent>
    </Tabs>
  );
}

```

--------------------------------

### Implement Theme Toggle in Next.js

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

React component for toggling between light and dark themes in a Next.js application. It uses `useState` for theme state and `useEffect` to update the document's class list for styling. Assumes a CSS setup where toggling a 'dark' class on the root element changes the theme.

```tsx
import { useEffect, useState } from 'react'

export function ThemeToggle() {
  const [theme, setTheme] = useState('light')
  
  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark')
  }, [theme])
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  )
}
```

--------------------------------

### Class Name Merging with cn() Utility in TSX

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Provides a cn() utility function that combines clsx for conditional classes and tailwind-merge to resolve Tailwind CSS conflicts, enabling efficient class composition in React components. Depends on external libraries clsx and tailwind-merge, typically imported from a utils file. Takes variable class strings and boolean conditions as inputs; outputs a single merged className string. Assumes Tailwind CSS setup and may not handle non-Tailwind classes or complex overrides beyond merge rules.

```tsx
import { cn } from "@/lib/utils"

// Basic className merging
export function ButtonWithConditional({ isActive }: { isActive: boolean }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-md font-medium",
        "bg-primary text-primary-foreground",
        "hover:bg-primary/90 transition-colors",
        isActive && "ring-2 ring-ring ring-offset-2",
        !isActive && "opacity-50"
      )}
    >
      Toggle
    </button>
  )
}

// Intelligent Tailwind class merging (prevents conflicts)
export function SmartMerge() {
  // tailwind-merge resolves conflicts: p-4 wins over p-2
  return (
    <div className={cn("p-2 bg-red-500", "p-4 bg-blue-500")}>
      This will have p-4 and bg-blue-500 (later values win)
    </div>
  )
}

// Reusable component with className override
export function Card({ className, children }: {
  className?: string
  children: React.ReactNode
}) {
  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card p-6 shadow-sm",
        className  // User overrides come last
      )}
    >
      {children}
    </div>
  )
}

// Usage with override
export function CustomCard() {
  return (
    <Card className="bg-gradient-to-r from-purple-500 to-pink-500 p-8">
      Custom styled card with merged classes
    </Card>
  )
}

// Complex conditional rendering
export function Badge({
  variant = "default",
  size = "md",
  className
}: {
  variant?: "default" | "success" | "warning" | "danger"
  size?: "sm" | "md" | "lg"
  className?: string
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full font-medium",
        // Size variants
        size === "sm" && "px-2 py-0.5 text-xs",
        size === "md" && "px-2.5 py-1 text-sm",
        size === "lg" && "px-3 py-1.5 text-base",
        // Color variants
        variant === "default" && "bg-primary text-primary-foreground",
        variant === "success" && "bg-success/10 text-success",
        variant === "warning" && "bg-warning/10 text-warning",
        variant === "danger" && "bg-danger/10 text-danger",
        // User overrides
        className
      )}
    >
      Badge
    </span>
  )
}
```

--------------------------------

### Build and Deploy Storybook

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Commands to build the static Storybook and deploy it to a hosting provider. Assumes npm is used for package management.

```bash
# Build static Storybook
npm run build-storybook

# Deploy the storybook-static folder to your hosting provider
```

--------------------------------

### Define CSS Variables and Tailwind Mapping

Source: https://github.com/motaterry/design-system-playground/blob/main/README.md

Demonstrates how to define CSS variables for design tokens (colors, radii) in `globals.css` and reference them within Tailwind CSS utility classes. This ensures design consistency between Figma and the application.

```css
:root {
  --color-primary: 24 24 27;  /* Update with your Figma token */
  --radius-md: 0.5rem;
}
```

--------------------------------

### Create basic dialog component (React/TSX)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Basic dialog implementation using React and TypeScript. Includes trigger button, header, content area with form fields, and footer actions. Uses component composition pattern with Dialog primitives.

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

// Basic dialog
export function BasicDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Add New Crop</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add Crop Information</DialogTitle>
          <DialogDescription>
            Enter the details for the new crop you want to track.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="crop-name">Crop Name</Label>
            <Input id="crop-name" placeholder="e.g., Winter Wheat" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="area">Area (hectares)</Label>
            <Input id="area" type="number" placeholder="0" />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Save Crop</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

--------------------------------

### Button Component Usage and Variants (React)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Demonstrates the polymorphic Button component from shadcn/ui, showcasing basic usage with different variants (default, destructive, outline, secondary, ghost, link) and size options (sm, default, lg, icon). It also shows how to use the 'asChild' prop for rendering as a different element (e.g., an anchor tag) and managing component states like loading and disabled.

```tsx
import { Button } from "@/components/ui/button"
import React from "react"

// Basic usage with variants
export function ButtonExample() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

// Size variants
export function ButtonSizes() {
  return (
    <div className="flex items-center gap-4">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">🔍</Button>
    </div>
  )
}

// Polymorphic rendering with asChild
export function ButtonAsLink() {
  return (
    <Button asChild variant="outline">
      <a href="/preview">View Settings Demo</a>
    </Button>
  )
}

// With custom styling and disabled state
export function ButtonWithState() {
  const [loading, setLoading] = React.useState(false)

  return (
    <Button
      onClick={() => setLoading(true)}
      disabled={loading}
      className="bg-gradient-to-r from-blue-500 to-purple-600"
    >
      {loading ? "Processing..." : "Submit"}
    </Button>
  )
}
```

--------------------------------

### CompareGate: Insufficient Sample State Handling

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Shows how to configure the CompareGate component to display an 'insufficient sample' state. This is useful when a comparison requires a minimum number of participants for anonymity or statistical significance. It includes props for titles, messages, and invite actions.

```tsx
import { CompareGate } from "@/components/comparison/compare-gate"

// Insufficient sample state
export function InsufficientSampleGate() {
  return (
    <CompareGate
      title="Peer Benchmarking"
      description="Compare with farms in your region"
      isSampleInsufficient={true}
      insufficientSampleTitle="Not Enough Participants"
      insufficientSampleMessage="We need at least 10 farms in your region to ensure anonymity. Invite colleagues to unlock this feature."
      inviteButtonText="Invite Farmers"
      onInvite={() => {
        console.log("Opening invite modal...")
      }}
    />
  )
}
```

--------------------------------

### Render Basic Card Structure with TypeScript

Source: https://context7.com/motaterry/design-system-playground/llms.txt

This snippet demonstrates the basic structure of a card component using the compound component pattern. It includes a header with a title and description, a content area, and a footer with a button. This component is built using React and TypeScript with shadcn/ui components.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

// Basic card structure
export function BasicCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Farm Analytics</CardTitle>
        <CardDescription>
          View your farm's performance metrics
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>Your yield is 15% above regional average.</p>
      </CardContent>
      <CardFooter>
        <Button>View Details</Button>
      </CardFooter>
    </Card>
  )
}
```

--------------------------------

### CompareGate: Basic Usage with Locked State

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Demonstrates the basic implementation of the CompareGate component, focusing on its locked state and unlock functionality. It requires React's useState for managing the lock state and provides props for labels, placeholders, and submission handling.

```tsx
import { CompareGate } from "@/components/comparison/compare-gate"
import { useState } from "react"

// Basic comparison with locked state
export function BasicCompareGate() {
  const [isUnlocked, setIsUnlocked] = useState(false)

  return (
    <CompareGate
      title="Regional Yield Comparison"
      description="Compare your farm yield with regional averages"
      label1="Your Yield (tons/hectare)"
      label2="Regional Average (tons/hectare)"
      placeholder1="Enter your yield"
      placeholder2="Enter regional average"
      isLocked={!isUnlocked}
      onUnlock={() => setIsUnlocked(true)}
      unlockButtonText="Unlock Comparison Tool"
      lockedImageUrl="/locked-data-bg.jpg"
      onSubmit={(data) => {
        console.log("Comparison data:", data)
      }}
    />
  )
}
```

--------------------------------

### Toast Notifications with Sonner (React/TypeScript)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Demonstrates Sonner toast API in React: success, error, info, and warning messages; action buttons; async promise handling with loading/success/error states; and custom duration and rich content using description and icons.

```tsx
import { toast } from "sonner"
import { Button } from "@/components/ui/button"

// Basic toast notifications
export function ToastExamples() {
  return (
    <div className="flex flex-col gap-2">
      <Button onClick={() => toast.success("Crop data saved successfully!")}>
        Success Toast
      </Button>

      <Button
        variant="destructive"
        onClick={() => toast.error("Failed to connect to weather API")}
      >
        Error Toast
      </Button>

      <Button
        variant="outline"
        onClick={() => toast.info("Weather forecast updated")}
      >
        Info Toast
      </Button>

      <Button
        variant="secondary"
        onClick={() => toast.warning("Irrigation system pressure low")}
      >
        Warning Toast
      </Button>
    </div>
  )
}

// Toast with action button
export function ToastWithAction() {
  return (
    <Button
      onClick={() =>
        toast.success("Changes saved", {
          action: {
            label: "Undo",
            onClick: () => console.log("Undo clicked"),
          },
        })
      }
    >
      Save with Undo
    </Button>
  )
}

// Toast for async operations
export function AsyncToast() {
  const handleExport = () => {
    toast.promise(
      // Simulated async operation
      new Promise((resolve, reject) => {
        setTimeout(() => {
          Math.random() > 0.5 ? resolve({ data: "exported" }) : reject(new Error("Export failed"))
        }, 2000)
      }),
      {
        loading: "Exporting farm data...",
        success: "Export completed! Check your downloads.",
        error: "Export failed. Please try again.",
      }
    )
  }

  return (
    <Button onClick={handleExport}>
      Export Report
    </Button>
  )
}

// Toast with custom duration and rich content
export function CustomToast() {
  return (
    <Button
      onClick={() =>
        toast.success("Harvest reminder", {
          description: "Wheat field #7 is ready for harvest. Optimal conditions today.",
          duration: 10000,
          icon: "🌾",
        })
      }
    >
      Show Reminder
    </Button>
  )
}
```

--------------------------------

### Generate and Export Design Tokens in TSX

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Implements a design token generator for creating project-specific tokens with light and dark themes, including programmatic export to JSON files. Depends on React hooks like useState for state management and Blob API for file downloads. Accepts no direct inputs but generates structured token objects; outputs downloadable JSON files. Limited to browser environments for file exports and assumes Tailwind CSS integration for usage.

```tsx
// Token Generator Page Implementation (app/token-generator/page.tsx)
// Access at: http://localhost:3000/token-generator

import { useState } from "react"

// After generating tokens, use them in your globals.css:
/*
:root {
  --color-primary: 210 100% 50%;  // Generated from token generator
  --color-bg: 0 0% 100%;
  --radius-md: 0.5rem;
}
*/

// Then reference in components:
export function CustomBrandedButton() {
  return (
    <button
      className="bg-primary text-primary-foreground rounded-md px-4 py-2"
      style={{
        backgroundColor: 'hsl(var(--color-primary))',
        borderRadius: 'var(--radius-md)'
      }}
    >
      Branded Button
    </button>
  )
}

// Programmatic token generation
export function TokenExport() {
  const generateTokens = () => {
    const tokens = {
      project: {
        name: "My Farm App",
        description: "Agricultural management platform"
      },
      tokens: {
        light: {
          bg: "0 0% 100%",
          primary: "142 76% 45%",  // Green for agriculture
          success: "142 76% 45%",
          warning: "45 93% 47%",
          danger: "0 84% 60%"
        },
        dark: {
          bg: "240 6% 4%",
          primary: "142 76% 55%",
          success: "142 76% 55%",
          warning: "45 93% 57%",
          danger: "0 84% 70%"
        },
        radius: {
          sm: "0.375rem",
          md: "0.5rem",
          lg: "0.75rem"
        }
      },
      generatedAt: new Date().toISOString()
    }

    // Export as JSON
    const blob = new Blob([JSON.stringify(tokens, null, 2)], {
      type: "application/json"
    })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "farm-app-tokens.json"
    a.click()
  }

  return (
    <button onClick={generateTokens}>
      Export Design Tokens
    </button>
  )
}
```

--------------------------------

### Display Weather Card in TSX

Source: https://context7.com/motaterry/design-system-playground/llms.txt

The WeatherCard component displays a 7-day weather forecast in a grid layout with temperature ranges, precipitation data, and customizable icons. It depends on React for rendering and expects forecast data as props. Inputs include title, days array with weather details; outputs render the visual card; limitations include reliance on static data without real-time API fetching.

```tsx
import { WeatherCard } from "@/components/data-display/weather-card"

// Basic 7-day forecast
export function WeatherForecast() {
  const forecast = [
    { day: "MON", icon: "sun", temp: { max: 28, min: 18 }, rain: 0 },
    { day: "TUE", icon: "cloud", temp: { max: 25, min: 16 }, rain: 2 },
    { day: "WED", icon: "cloudRain", temp: { max: 22, min: 14 }, rain: 15 },
    { day: "THU", icon: "rain", temp: { max: 20, min: 13 }, rain: 25 },
    { day: "FRI", icon: "cloudDrizzle", temp: { max: 23, min: 15 }, rain: 8 },
    { day: "SAT", icon: "cloud", temp: { max: 26, min: 17 }, rain: 0 },
    { day: "SUN", icon: "sun", temp: { max: 29, min: 19 }, rain: 0 }
  ]

  return (
    <WeatherCard
      title="Weekly Forecast"
      days={forecast}
      temperatureUnit="°C"
      rainUnit="mm"
      accumulatedLabel="Total precipitation:"
      maxTempLabel="Highest temperature:"
    />
  )
}

// Weather card with image header
export function WeatherWithImage() {
  const forecast = [
    { day: "MON", icon: "sun", temp: { max: 82, min: 64 } },
    { day: "TUE", icon: "cloud", temp: { max: 77, min: 61 } },
    { day: "WED", icon: "rain", temp: { max: 72, min: 59 }, rain: 0.6 },
    { day: "THU", icon: "rain", temp: { max: 68, min: 55 }, rain: 1.2 },
    { day: "FRI", icon: "cloudDrizzle", temp: { max: 73, min: 58 }, rain: 0.3 },
    { day: "SAT", icon: "sun", temp: { max: 78, min: 62 } },
    { day: "SUN", icon: "sun", temp: { max: 84, min: 66 } }
  ]

  return (
    <WeatherCard
      title="Farm Weather Outlook"
      days={forecast}
      showImage={true}
      imageUrl="/field-landscape.jpg"
      imageAlt="Farm landscape"
      temperatureUnit="°F"
      rainUnit="in"
      className="max-w-2xl"
    />
  )
}
```

--------------------------------

### Create controlled dialog with state (React/TSX)

Source: https://context7.com/motaterry/design-system-playground/llms.txt

Dialog component with controlled state management. Tracks form inputs, handles save action with state reset, and demonstrates controlled open/close behavior. Uses React hooks for state management.

```tsx
// Controlled dialog with state
export function ControlledDialog() {
  const [open, setOpen] = useState(false)
  const [cropData, setCropData] = useState({ name: "", area: "" })

  const handleSave = () => {
    console.log("Saving crop:", cropData)
    setOpen(false)
    setCropData({ name: "", area: "" })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>New Crop Entry</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Crop Details</DialogTitle>
          <DialogDescription>
            This will be added to your farm management system.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label>Crop Type</Label>
            <Input
              value={cropData.name}
              onChange={(e) => setCropData({ ...cropData, name: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label>Planted Area</Label>
            <Input
              type="number"
              value={cropData.area}
              onChange={(e) => setCropData({ ...cropData, area: e.target.value })}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="secondary" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSave}>
            Add Crop
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.