### Install Dependencies

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Install the necessary npm packages for Pattern Craft.

```bash
npm install next react react-dom tailwindcss @radix-ui/react-tabs next-themes sonner lucide-react
```

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

### Debouncing Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Demonstrates adjusting the debounce delay for search functionality.

```typescript
const handleSearch = debounce((query) => {
  // Your search logic
}, 500); // Increase delay for slower devices
```

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

### Pattern Library Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Display all patterns with category tabs and search functionality.

```typescript
import PatternShowcase from "@/components/patterns/pattern-showcase";
import { useState } from "react";

export function PatternLibrary() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");

  return (
    <section>
      <h1>Pattern Library</h1>
      <PatternShowcase
        activePattern={activePattern}
        setActivePattern={setActivePattern}
        theme={theme}
      />
    </section>
  );
}
```

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

### Usage Example for Theme Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Example showing how to use theme mode constants.

```typescript
import { THEME_CONFIG } from "@/lib/constants";

const isDarkTheme = currentTheme === THEME_CONFIG.dark;

const applyTheme = (mode: "light" | "dark") => {
  if (mode === THEME_CONFIG.light) {
    // Apply light theme
  } else if (mode === THEME_CONFIG.dark) {
    // Apply dark theme
  }
};
```

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

### Memoization Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Applies React.memo for optimizing component rendering with large lists.

```typescript
const PatternCardMemo = React.memo(PatternCard);
```

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

### State Lifting Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Illustrates good practice for state management by keeping state as low as possible.

```typescript
// ✅ Good: State lives where it's used
function Component() {
  const [activePattern, setActivePattern] = useState(null);
  return <PatternShowcase activePattern={activePattern} ... />;
}

// ❌ Avoid: Unnecessary prop drilling
function GrandparentComponent() {
  const [active, setActive] = useState(null);
  return <ParentComponent active={active} />;
}
```

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

### Single Pattern Preview Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Display a large preview of a specific pattern, including its code.

```typescript
import { gridPatterns } from "@/data/patterns";
import { useCopy } from "@/hooks/useCopy";
import { Button } from "@/components/ui/button";
import { Copy, Check } from "lucide-react";

export function SinglePatternPreview({ patternId }: { patternId: string }) {
  const pattern = gridPatterns.find((p) => p.id === patternId);
  const { copyToClipboard, isCopied } = useCopy();

  if (!pattern) return <div>Pattern not found</div>;

  return (
    <div>
      <h2>{pattern.name}</h2>
      <p>{pattern.description}</p>

      {/* Pattern Preview */}
      <div
        className="w-full h-96 rounded-lg"
        style={pattern.style}
      />

      {/* Copy Button */}
      <Button
        onClick={() => copyToClipboard(pattern.code, pattern.id)}
      >
        {isCopied(pattern.id) ? (
          <>
            <Check className="w-4 h-4 mr-2" />
            Copied!
          </>
        ) : (
          <>
            <Copy className="w-4 h-4 mr-2" />
            Copy Code
          </>
        )}
      </Button>

      {/* Code Display */}
      <pre className="bg-gray-900 text-white p-4 rounded overflow-auto">
        {pattern.code}
      </pre>
    </div>
  );
}
```

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

### Custom Data Source

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Example of replacing the default `gridPatterns` with a custom data source.

```typescript
import { Pattern } from "@/types/pattern";

const customPatterns: Pattern[] = [
  {
    id: "my-gradient",
    name: "My Custom Gradient",
    category: "gradients",
    style: {
      background: "linear-gradient(to right, #ff0000, #00ff00)",
    },
    code: "<div style=\"background: linear-gradient(to right, #ff0000, #00ff00);\" />",
  },
  // ... more patterns
];

export function MyComponent() {
  return <PatternGrid patterns={customPatterns} ... />;
}
```

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

### Installation

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Steps to clone the repository and install dependencies using npm, yarn, or pnpm.

```bash
git clone https://github.com/megh-bari/pattern-craft.git
cd pattern-craft
```

```bash
npm install
# or
yarn install
# or
pnpm install
```

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

### Usage Example for Application Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Example showing how to use application configuration links in a footer component.

```typescript
import { APP_CONFIG } from "@/lib/constants";

export function Footer() {
  return (
    <footer>
      <a href={APP_CONFIG.GITHUB_URL} target="_blank" rel="noopener noreferrer">
        GitHub
      </a>
      <a href={APP_CONFIG.TWITTER_URL} target="_blank" rel="noopener noreferrer">
        Twitter
      </a>
      <a href={APP_CONFIG.CONTRIBUTING_URL} target="_blank" rel="noopener noreferrer">
        Contributing
      </a>
    </footer>
  );
}
```

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

### Usage Example for Support Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Example demonstrating how to use support configuration for donation links and UPI strings.

```typescript
import { SUPPORT_CONFIG } from "@/lib/constants";

export function DonationLinks() {
  return (
    <div>
      <a href={SUPPORT_CONFIG.BUY_ME_COFFEE_URL} target="_blank">
        Buy Me Coffee
      </a>
      <a href={SUPPORT_CONFIG.PAYPAL_URL} target="_blank">
        PayPal Donation
      </a>
    </div>
  );
}

// Generate UPI payment string
const upiString = `upi://pay?pa=${SUPPORT_CONFIG.UPI_ID}&pn=${encodeURIComponent(
  SUPPORT_CONFIG.PAYEE_NAME
)}&tn=${encodeURIComponent(SUPPORT_CONFIG.UPI_MSG)}`;
```

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

### Usage Example for Pattern Categories

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Example demonstrating how to iterate and filter pattern categories.

```typescript
import { PATTERN_CATEGORIES } from "@/lib/constants";

// Iterate categories
PATTERN_CATEGORIES.forEach((cat) => {
  console.log(`${cat.id}: ${cat.label}`);
});

// Filter to exclude "all" and "favourites"
const filterableCategories = PATTERN_CATEGORIES.filter(
  (cat) => cat.id !== "all" && cat.id !== "favourites"
);
```

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

### Search Patterns with Custom Logic Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Implement custom search logic for patterns, allowing filtering by category and search term.

```typescript
import { gridPatterns } from "@/data/patterns";
import { searchPatterns } from "@/lib/utils";
import { useState } from "react";

export function CustomSearch() {
  const [searchTerm, setSearchTerm] = useState("");
  const [category, setCategory] = useState("all");

  const results = searchPatterns(gridPatterns, category, searchTerm);

  return (
    <div>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search patterns..."
      />

      <select
        value={category}
        onChange={(e) => setCategory(e.target.value)}
      >
        <option value="all">All</option>
        <option value="gradients">Gradients</option>
        <option value="geometric">Geometric</option>
      </select>

      <div>Found {results.length} patterns</div>
      {results.map((pattern) => (
        <div key={pattern.id}>{pattern.name}</div>
      ))}
    </div>
  );
}
```

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

### SearchBar Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-feature.md

Example of how to use the SearchBar component with state management.

```typescript
import { SearchBar } from "@/components/search/search-bar";
import { useState } from "react";

export function MyComponent() {
  const [searchInput, setSearchInput] = useState("");
  
  return (
    <SearchBar
      searchInput={searchInput}
      setSearchInput={setSearchInput}
      isPatternDark={false}
    />
  );
}
```

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

### PatternGrid Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-feature.md

Example of how to use the PatternGrid component.

```typescript
import PatternGrid from "@/components/patterns/pattern-grid";
import { gridPatterns } from "@/data/patterns";

export function MyShowcase() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const [activeMobileCard, setActiveMobileCard] = useState<string | null>(null);
  
  return (
    <PatternGrid
      patterns={gridPatterns}
      activePattern={activePattern}
      setActivePattern={setActivePattern}
      theme="light"
      activeMobileCard={activeMobileCard}
      setActiveMobileCard={setActiveMobileCard}
    />
  );
}
```

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

### Wrap with Providers

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Wrap your application with ThemeProvider and FavoritesProvider for full functionality.

```typescript
// src/app/layout.tsx
import { FavoritesProvider } from "@/context/favourites-context";
import { ThemeProvider } from "@/components/providers/theme-provider";

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          <FavoritesProvider>
            {children}
          </FavoritesProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
```

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

### PatternCard Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-feature.md

Example of how to use the PatternCard component with state management.

```typescript
import PatternCard from "@/components/patterns/pattern-card";
import { gridPatterns } from "@/data/patterns";

export function MyCard() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const [activeMobileCard, setActiveMobileCard] = useState<string | null>(null);
  
  const pattern = gridPatterns[0];
  
  return (
    <PatternCard
      pattern={pattern}
      activePattern={activePattern}
      setActivePattern={setActivePattern}
      theme="light"
      activeMobileCard={activeMobileCard}
      setActiveMobileCard={setActiveMobileCard}
    />
  );
}
```

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

### Build for Production

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Commands to build and start the production server.

```bash
npm run build
npm start
```

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

### Filter Patterns by Category Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Display only patterns belonging to a specific category, like 'gradients'.

```typescript
import { gridPatterns } from "@/data/patterns";
import { Pattern } from "@/types/pattern";

export function GradientOnly() {
  const gradients = gridPatterns.filter(
    (p) => p.category === "gradients"
  );

  return (
    <div className="grid grid-cols-3 gap-4">
      {gradients.map((pattern) => (
        <div key={pattern.id} style={pattern.style} className="h-48 rounded-lg" />
      ))}
    </div>
  );
}
```

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

### Tabs Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-ui.md

Example demonstrating how to use the Tabs component with multiple triggers and content areas.

```typescript
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function PatternShowcase() {
  return (
    <Tabs defaultValue="all" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="all">All</TabsTrigger>
        <TabsTrigger value="gradients">Gradients</TabsTrigger>
        <TabsTrigger value="geometric">Geometric</TabsTrigger>
        <TabsTrigger value="decorative">Decorative</TabsTrigger>
      </TabsList>
      
      <TabsContent value="all">
        <div>All patterns go here</div>
      </TabsContent>
      
      <TabsContent value="gradients">
        <div>Gradient patterns only</div>
      </TabsContent>
      
      {/* More content tabs... */}
    </Tabs>
  );
}
```

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

### Pull Request Commit Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Example Git commands for committing and pushing changes for a new pattern.

```bash
git add .
git commit -m "feat: add new geometric grid pattern"
git push origin feature/new-pattern-name
```

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

### ThemeProvider Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

Shows how to integrate ThemeProvider into the root layout for theme switching.

```typescript
import { ThemeProvider } from "@/components/providers/theme-provider";

export function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}
```

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

### PatternShowcase Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-feature.md

Example of how to use the PatternShowcase component in a React application.

```typescript
import PatternShowcase from "@/components/patterns/pattern-showcase";
import { useState } from "react";

export function HomePage() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  
  return (
    <div>
      <PatternShowcase
        activePattern={activePattern}
        setActivePattern={setActivePattern}
        theme={theme}
      />
    </div>
  );
}
```

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

### Get Pattern Categories

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Example of accessing and logging pattern categories using a constant.

```typescript
import { PATTERN_CATEGORIES } from "@/lib/constants";
import { categories } from "@/data/categories";

// Both work identically
PATTERN_CATEGORIES.forEach(cat => console.log(cat.label));
```

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

### Button Variants

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Shows how to use predefined button variants for custom styling.

```typescript
import { Button, buttonVariants } from "@/components/ui/button";

// Use variant styles for custom elements
<div className={buttonVariants({ variant: "primary", size: "lg" })}>
  Custom styled div
</div>
```

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

### Use PatternShowcase

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Basic usage of PatternShowcase component in your page.

```typescript
// src/app/page.tsx
"use client";

import { useState } from "react";
import PatternShowcase from "@/components/patterns/pattern-showcase";

export default function Home() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");

  return (
    <PatternShowcase
      activePattern={activePattern}
      setActivePattern={setActivePattern}
      theme={theme}
    />
  );
}
```

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

### Get Favorite Patterns

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Example of how to retrieve favorite patterns using the `useFavorites` context.

```typescript
import { useFavorites } from "@/context/favourites-context";
import { gridPatterns } from "@/data/patterns";

const { favourites } = useFavorites();
const favoritePatterns = gridPatterns.filter(p => 
  favourites.includes(p.id)
);
```

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

### Badge Variants

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Demonstrates using badge variants for custom badge styling.

```typescript
import { Badge, badgeVariants } from "@/components/ui/badge";

<span className={badgeVariants({ variant: "outline" })}>
  Custom badge
</span>
```

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

### Button Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-ui.md

Demonstrates various ways to use the Button component with different variants, sizes, and props.

```typescript
import { Button } from "@/components/ui/button";

export function MyComponent() {
  return (
    <div className="space-y-4">
      {/* Default button */}
      <Button onClick={() => console.log("clicked")}>
        Save Changes
      </Button>
      
      {/* Different variants */}
      <Button variant="outline">Outlined</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="ghost">Subtle</Button>
      <Button variant="link">Link Style</Button>
      
      {/* Different sizes */}
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <Icon />
      </Button>
      
      {/* With custom class */}
      <Button className="w-full">Full Width</Button>
      
      {/* As child element */}
      <Button asChild>
        <a href="/path">Navigate</a>
      </Button>
    </div>
  );
}
```

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

### Badge Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-ui.md

Illustrates how to use the Badge component with different variants and for various purposes.

```typescript
import { Badge } from "@/components/ui/badge";
import { Sparkles } from "lucide-react";

export function PatternCard() {
  return (
    <div>
      {/* Basic badge */}
      <Badge>New</Badge>
      
      {/* With icon */}
      <Badge variant="secondary" className="gap-1">
        <Sparkles className="h-2.5 w-2.5" />
        Featured
      </Badge>
      
      {/* Destructive badge */}
      <Badge variant="destructive">Error</Badge>
      
      {/* Outline badge */}
      <Badge variant="outline">Custom</Badge>
      
      {/* As link */}
      <Badge asChild>
        <a href="/category/new">New Patterns</a>
      </Badge>
    </div>
  );
}
```

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

### LocalStorage Error Handling

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Explains how `FavoritesProvider` handles `localStorage` parse errors.

```typescript
// If localStorage is corrupted, initializes with empty array
const { favourites } = useFavorites(); // Always returns array
```

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

### Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to use the `searchPatterns` utility function with various search criteria.

```typescript
import { searchPatterns } from "@/lib/utils";
import { gridPatterns } from "@/data/patterns";

// Search in all patterns
const results1 = searchPatterns(gridPatterns, "all", "gradient");
// Returns all patterns with names starting with "gradient"

// Search in specific category
const results2 = searchPatterns(gridPatterns, "geometric", "grid");
// Returns geometric patterns with "grid" in name

// Search with multiple words
const results3 = searchPatterns(gridPatterns, "all", "top violet");
// Returns patterns where each word matches (e.g., "Top Violet Radial")

// Single character search
const results4 = searchPatterns(gridPatterns, "gradients", "t");
// Returns patterns in gradients category starting with "t"

// No matches
const results5 = searchPatterns(gridPatterns, "all", "nonexistent");
// Returns []
```

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

### Copy to Clipboard Error Handling

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Illustrates how the `useCopy` hook handles copy-to-clipboard failures internally.

```typescript
// This is handled internally - shows "Failed to copy code" toast
const { copyToClipboard } = useCopy();
await copyToClipboard(code, id);
```

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

### Example Customization

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Demonstrates how to customize background patterns by changing colors and background sizes.

```typescript
// Original pattern
backgroundImage: `linear-gradient(to right, #f0f0f0 1px, transparent 1px)`;

// Customized version
backgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px)`; // Blue lines
backgroundSize: "48px 32px"; // Smaller grid
```

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

### Context Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for context providers and hooks.

```typescript
import { FavoritesProvider, useFavorites } from "@/context/favourites-context";
```

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

### Missing Patterns Check

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Shows how to safely check for the existence of a pattern before using it.

```typescript
const pattern = gridPatterns.find((p) => p.id === id);
if (!pattern) {
  return <div>Pattern not found</div>;
}
```

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

### Utilities Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for utility functions.

```typescript
import { cn } from "@/lib/utils";
import { debounce, searchPatterns } from "@/lib/utils";
```

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

### useFavorites Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/hooks.md

Provides an example of using the useFavorites hook in a React component to display favorite status, toggle favorites, and show the total count of favorites.

```typescript
import { useFavorites } from "@/context/favourites-context";

export function PatternCard({ pattern }) {
  const { isFavourite, toggleFavourite, favourites } = useFavorites();
  
  const handleStarClick = () => {
    toggleFavourite(pattern.id);
  };
  
  const isStarred = isFavourite(pattern.id);
  
  return (
    <div>
      <button onClick={handleStarClick}>
        {isStarred ? "⭐" : "☆"}
      </button>
      <p>Total favorites: {favourites.length}</p>
    </div>
  );
}
```

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

### Access All Patterns

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Example of iterating through all available patterns.

```typescript
import { gridPatterns } from "@/data/patterns";

gridPatterns.forEach(pattern => {
  console.log(pattern.id, pattern.name);
});
```

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

### Components - UI Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for UI components.

```typescript
import { Button, buttonVariants } from "@/components/ui/button";
import { Badge, badgeVariants } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { ThemeProvider } from "@/components/providers/theme-provider";
```

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

### Debounced Actions

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Implements debouncing for performance optimization in search functionality.

```typescript
import { debounce } from "@/lib/utils";

export function SearchWithDebounce() {
  const [results, setResults] = useState([]);

  const performSearch = debounce((query: string) => {
    const filtered = gridPatterns.filter((p) =>
      p.name.toLowerCase().includes(query)
    );
    setResults(filtered);
  }, 300);

  return (
    <input
      onChange={(e) => performSearch(e.target.value)}
      placeholder="Type to search..."
    />
  );
}
```

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

### Constants Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for constants.

```typescript
import { PATTERN_CATEGORIES, THEME_CONFIG, SUPPORT_CONFIG, APP_CONFIG } from "@/lib/constants";
```

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

### Data Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for data modules.

```typescript
import { gridPatterns } from "@/data/patterns";
import { categories } from "@/data/categories";
```

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

### CategoryFilter Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/types.md

Example of how to use the CategoryFilter component to manage active categories.

```typescript
import type { CategoryId } from "@/data/categories";

export function CategoryFilter() {
  const [activeCategory, setActiveCategory] = useState<CategoryId>("all");
  
  const handleCategoryChange = (id: CategoryId) => {
    setActiveCategory(id);
  };
  
  return (
    <select
      value={activeCategory}
      onChange={(e) => handleCategoryChange(e.target.value as CategoryId)}
    >
      <option value="all">All Patterns</option>
      <option value="gradients">Gradients</option>
      <option value="geometric">Geometric</option>
      <option value="decorative">Decorative</option>
      <option value="effects">Effects</option>
      <option value="favourites">Favourites</option>
    </select>
  );
}
```

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

### Example Pattern Object

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/types.md

An example of a Pattern object, demonstrating its structure and typical values.

```typescript
const examplePattern: Pattern = {
  id: "top-gradient-radial",
  name: "Top Gradient Radial",
  category: "decorative",
  description: "Radial gradient from white to indigo starting from top",
  badge: "New",
  style: {
    background: "radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%)",
  },
  code: `<div className=\"min-h-screen w-full relative\">
  {/* Radial Gradient Background */}
  <div
    className=\"absolute inset-0 z-0\"
    style={{
      background: \"radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%)\",
    }}
  />
  {/* Your Content/Components */}
</div>`,
};
```

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

### FavoritesProvider Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

Demonstrates how to wrap the application with FavoritesProvider and use the useFavorites hook in a child component.

```typescript
import { FavoritesProvider } from "@/context/favourites-context";
import { useFavorites } from "@/context/favourites-context";

// At the root level of your app
export function RootLayout({ children }) {
  return (
    <FavoritesProvider>
      {children}
    </FavoritesProvider>
  );
}

// In any child component
export function MyComponent() {
  const { favourites, toggleFavourite, isFavourite } = useFavorites();
  
  return (
    <div>
      <p>Favorites: {favourites.length}</p>
      <button onClick={() => toggleFavourite("pattern-1")}>
        Star Pattern 1
      </button>
      {isFavourite("pattern-1") && <p>✓ Pattern 1 is starred</p>}
    </div>
  );
}
```

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

### Hooks Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for custom hooks.

```typescript
import { useTheme } from "@/hooks/useTheme";
import { useCopy } from "@/hooks/useCopy";
```

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

### Type Definitions Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for type definitions.

```typescript
import { Pattern } from "@/types/pattern";
import type { CategoryId } from "@/data/categories";
```

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

### Export Patterns Data

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Saves favorite patterns to a JSON file.

```typescript
import { useFavorites } from "@/context/favourites-context";
import { gridPatterns } from "@/data/patterns";

export function ExportFavorites() {
  const { favourites } = useFavorites();

  const handleExport = () => {
    const selected = gridPatterns.filter((p) => favourites.includes(p.id));
    const json = JSON.stringify(selected, null, 2);

    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "favorite-patterns.json";
    a.click();
  };

  return <button onClick={handleExport}>Export as JSON</button>;
}
```

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

### Custom Pattern Grid with Actions

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Creates a custom grid of patterns with additional functionalities like favoriting and copying code.

```typescript
import { gridPatterns } from "@/data/patterns";
import { useCopy } from "@/hooks/useCopy";
import { useFavorites } from "@/context/favourites-context";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export function CustomPatternGrid() {
  const { copyToClipboard, isCopied } = useCopy();
  const { toggleFavourite, isFavourite } = useFavorites();

  return (
    <div className="grid grid-cols-4 gap-6">
      {gridPatterns.map((pattern) => (
        <div key={pattern.id} className="group">
          {/* Pattern Preview */}
          <div
            style={pattern.style}
            className="h-48 rounded-lg mb-3 overflow-hidden relative"
          >
            {/* Badge */}
            {pattern.badge && (
              <div className="absolute top-2 right-2">
                <Badge variant="secondary">{pattern.badge}</Badge>
              </div>
            )}
          </div>

          {/* Pattern Name */}
          <h3 className="font-semibold text-sm mb-2">{pattern.name}</h3>

          {/* Actions */}
          <div className="flex gap-2">
            <Button
              size="sm"
              variant="outline"
              onClick={() => toggleFavourite(pattern.id)}
            >
              {isFavourite(pattern.id) ? "⭐ Favorited" : "☆ Favorite"}
            </Button>
            <Button
              size="sm"
              onClick={() => copyToClipboard(pattern.code, pattern.id)}
            >
              {isCopied(pattern.id) ? "✓ Copied" : "Copy"}
            </Button>
          </div>
        </div>
      ))}
    </div>
  );
}
```

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

### useTheme Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/hooks.md

Demonstrates how to use the useTheme hook in a React component to manage and display the current theme, with functions to manually set or update the theme based on a pattern.

```typescript
import { useTheme } from "@/hooks/useTheme";

export function MyComponent() {
  const { theme, setTheme, updateThemeFromPattern } = useTheme();
  
  // When user selects a pattern
  const handlePatternSelect = (patternId: string) => {
    updateThemeFromPattern(patternId, allPatterns);
  };
  
  // To manually switch theme
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };
  
  return (
    <div className={theme === "dark" ? "bg-black" : "bg-white"}>
      Current theme: {theme}
    </div>
  );
}
```

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

### Components - Feature Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Example imports for feature-specific components.

```typescript
import PatternShowcase from "@/components/patterns/pattern-showcase";
import PatternGrid from "@/components/patterns/pattern-grid";
import PatternCard from "@/components/patterns/pattern-card";
import PatternEmptyState from "@/components/patterns/pattern-empty-state";
import { SearchBar } from "@/components/search/search-bar";
```

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

### Manage Favorites

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Displays and manages user's favorite patterns, allowing users to add, remove, and clear favorites.

```typescript
import { gridPatterns } from "@/data/patterns";
import { useFavorites } from "@/context/favourites-context";
import { Button } from "@/components/ui/button";

export function FavoritePatterns() {
  const { favourites, toggleFavourite, clearFavourites } = useFavorites();

  const favoritePatterns = gridPatterns.filter((p) =>
    favourites.includes(p.id)
  );

  return (
    <div>
      <h2>My Favorites ({favourites.length})</h2>

      {favoritePatterns.length === 0 ? (
        <p>No favorites yet. Add some patterns!</p>
      ) : (
        <div className="grid grid-cols-3 gap-4">
          {favoritePatterns.map((pattern) => (
            <div key={pattern.id}>
              <div style={pattern.style} className="h-40 rounded-lg mb-2" />
              <p>{pattern.name}</p>
              <Button
                variant="secondary"
                onClick={() => toggleFavourite(pattern.id)}
              >
                Remove from Favorites
              </Button>
            </div>
          ))}
        </div>
      )}

      {favourites.length > 0 && (
        <Button
          variant="destructive"
          onClick={clearFavourites}
          className="mt-4"
        >
          Clear All Favorites
        </Button>
      )}
    </div>
  );
}
```

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

### Theme-Aware Pattern Display

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Automatically adjusts the UI theme based on the darkness of the selected pattern.

```typescript
import { useTheme } from "@/hooks/useTheme";
import { gridPatterns } from "@/data/patterns";
import PatternShowcase from "@/components/patterns/pattern-showcase";

export function ThemeAwareShowcase() {
  const [activePattern, setActivePattern] = useState<string | null>(null);
  const { theme, updateThemeFromPattern } = useTheme();

  const handlePatternSelect = (patternId: string) => {
    setActivePattern(patternId);
    updateThemeFromPattern(patternId, gridPatterns);
  };

  return (
    <div className={theme === "dark" ? "bg-black text-white" : "bg-white text-black"}>
      <PatternShowcase
        activePattern={activePattern}
        setActivePattern={handlePatternSelect}
        theme={theme}
      />
    </div>
  );
}
```

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

### useCopy Usage Example

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/hooks.md

Illustrates the use of the useCopy hook in a React component to provide a button that copies code to the clipboard and visually indicates the copied state.

```typescript
import { useCopy } from "@/hooks/useCopy";

export function PatternActions({ code, patternId }) {
  const { copyToClipboard, isCopied } = useCopy();
  
  return (
    <button
      onClick={() => copyToClipboard(code, patternId)}
      disabled={isCopied(patternId)}
    >
      {isCopied(patternId) ? "Copied!" : "Copy Code"}
    </button>
  );
}
```

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

### Search Patterns

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Example of how to search for patterns using the `searchPatterns` utility function.

```typescript
import { searchPatterns } from "@/lib/utils";
import { gridPatterns } from "@/data/patterns";

const results = searchPatterns(gridPatterns, "gradients", "top");
```

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

### Copy Pattern Code

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Example of how to use the `useCopy` hook to copy pattern code to the clipboard.

```typescript
import { useCopy } from "@/hooks/useCopy";

const { copyToClipboard } = useCopy();
copyToClipboard(patternCode, patternId);
```

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

### Usage in Components

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/types.md

Example of how to use the Pattern type within a React component to display pattern information.

```typescript
import type { Pattern } from "@/types/pattern";
import { gridPatterns } from "@/data/patterns";

export function MyComponent() {
  const [selected, setSelected] = useState<Pattern | null>(null);
  
  const handleSelect = (pattern: Pattern) => {
    setSelected(pattern);
  };
  
  return (
    <div>
      {selected && (
        <div>
          <h2>{selected.name}</h2>
          <p>{selected.description}</p>
          <div style={selected.style} className="w-full h-64" />
          <pre>{selected.code}</pre>
        </div>
      )}
    </div>
  );
}
```

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

### Styling with data-state

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-ui.md

Example showing how to style TabsTrigger based on its active or inactive state using the `data-state` attribute.

```typescript
// Style based on active/inactive state
<TabsTrigger
  value="tab1"
  className="data-[state=active]:bg-white data-[state=inactive]:text-gray-500"
>
  Tab 1
</TabsTrigger>
```

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

### FavoritesContextType Usage

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/types.md

Example of how to access the Favorites context using the useFavorites() hook.

```typescript
const { favourites, toggleFavourite, isFavourite, clearFavourites } = useFavorites();
```

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

### Primary App Entry (Next.js App Router)

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Illustrates the root layout and home page structure in a Next.js App Router setup.

```plaintext
src/app/layout.tsx - Root layout wrapper
  └── src/app/page.tsx - Home page
      └── src/components/patterns/pattern-showcase.tsx (main UI)
```

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

### Development Server

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Command to run the development server.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

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

### Common Configuration Options for ThemeProvider

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

Lists and explains common configuration props for the ThemeProvider.

```typescript
<ThemeProvider
  attribute="class"              // Use class attribute for theme switching
  defaultTheme="light"           // Default theme if not stored
  enableSystem={true}            // Respect system preferences
  storageKey="theme"             // Key for localStorage
  disableTransitionOnChange={true}  // Disable CSS transitions on theme change
>
  {children}
</ThemeProvider>
```

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

### Create Feature Branch

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Command to create a new feature branch for adding patterns.

```bash
git checkout -b feature/new-pattern-name
```

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

### Minimal Next.js Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

A basic Next.js configuration file with no custom options, demonstrating the structure for defining NextConfig.

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;
```

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

### Application Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Links and URLs related to the application, such as GitHub and Twitter.

```typescript
export const APP_CONFIG = {
  GITHUB_URL: "https://github.com/megh-bari/pattern-craft",
  TWITTER_URL: "https://twitter.com/meghtrix",
  CONTRIBUTING_URL: "https://github.com/megh-bari/pattern-craft#contributing",
} as const;
```

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

### Pattern Categories

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Predefined list of pattern category options with their IDs and display labels.

```typescript
export const PATTERN_CATEGORIES = [
  { id: "all", label: "All Patterns" },
  { id: "gradients", label: "Gradients" },
  { id: "geometric", label: "Geometric" },
  { id: "decorative", label: "Decorative" },
  { id: "effects", label: "Effects" },
  { id: "favourites", label: "Favourites" },
] as const;
```

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

### Tailwind Class Merging

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/integration-guide.md

Utilizes a utility function for merging Tailwind CSS classes.

```typescript
import { cn } from "@/lib/utils";

<Button className={cn("w-full", "text-lg")}>Full Width Large Button</Button>
```

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

### ThemeProvider Component Signature

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

The wrapper component for next-themes ThemeProvider that enables Next.js theme switching.

```typescript
export function ThemeProvider({ children, ...props }: ThemeProviderProps): JSX.Element
```

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

### Storage Format for Favorites

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

Illustrates the JSON structure used to store favorite pattern IDs in localStorage.

```json
["pattern-id-1", "pattern-id-2", "pattern-id-3"]
```

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

### Theme Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Constants for theme modes (light and dark).

```typescript
export const THEME_CONFIG = {
  light: "light",
  dark: "dark",
} as const;
```

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

### Support Configuration

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/configuration.md

Configuration values for user support features, including UPI and donation links.

```typescript
export const SUPPORT_CONFIG = {
  UPI_ID: "barimegh21@okaxis",
  PAYEE_NAME: "Megh Bari",
  UPI_MSG: "Keep building cool stuff!",
  BUY_ME_COFFEE_URL: "https://coff.ee/meghdev",
  PAYPAL_URL: "https://www.paypal.com/paypalme/meghbari01",
} as const;
```

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

### File Organization

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/README.md

Illustrates the directory structure of the Pattern Craft project.

```tree
src/
├── app/                        # Next.js app router pages
├── components/
│   ├── ui/                     # Base UI components (Button, Badge, Tabs)
│   ├── patterns/               # Feature components (PatternShowcase, etc.)
│   ├── search/                 # Search component
│   ├── providers/              # Context providers
│   └── ...                     # Layout, home, sponsors components
├── context/                    # React Context (Favorites)
├── hooks/                      # Custom React hooks
├── types/                      # TypeScript type definitions
├── data/                       # Pattern data and categories
├── lib/                        # Utilities and constants
└── ...
```

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

### Project Structure

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

The directory structure of the Pattern Craft project.

```tree
pattern-craft/
src/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── not-found.tsx
│
├── components/
│   ├── ui/                # shadcn/ui components
│   │   ├── badge.tsx
│   │   ├── button.tsx
│   │   └── tabs.tsx
│   ├── layout/
│   │   ├── navbar.tsx
│   │   └── footer.tsx
│   ├── patterns/
│   │   ├── pattern-showcase.tsx
│   │   ├── pattern-card.tsx
│   │   ├── pattern-grid.tsx
│   │   └── pattern-empty-state.tsx
│   ├── home/
│   │   ├── hero.tsx
│   │   ├── support-dropdown.tsx
│   │   └── return-to-preview.tsx
│   └── providers/
│       └── theme-provider.tsx
│
├── lib/
│   ├── utils.ts
│   └── constants.ts
│
├── hooks/
│   ├── useTheme.tsx
│   └── useCopy.tsx
│
├── types/
│   ├── pattern.ts
│   └── index.ts
│
├── context/
│   └── favourites-context.tsx
│
└── data/
    ├── patterns.ts        # Pattern used in UI (contribute here)
    └── categories.ts

```

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

### Utilities Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/INDEX.md

Imports for utility functions and constants.

```typescript
import { cn, debounce, searchPatterns } from "@/lib/utils";
import { PATTERN_CATEGORIES, THEME_CONFIG } from "@/lib/constants";
```

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

### Export Summary: src/data/patterns.ts

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the initial gridPatterns array.

```typescript
export const gridPatterns: Pattern[] = [ ]
```

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

### Theme Flow

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Data flow for managing the application theme based on active patterns.

```mermaid
useTheme() hook (manages state)
    ↓
activePattern + patterns array
    ↓
updateThemeFromPattern() (analyzes pattern)
    ↓
Dark detection (ID or color analysis)
    ↓
Component styling (dark/light classes)
```

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

### Favorites Flow

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Data flow for managing user favorites, from context provider to UI interaction.

```mermaid
FavoritesProvider (context wrapper)
    ↓
localStorage ("favourite" key)
    ↓
useFavorites() hook (read/write)
    ↓
PatternCard (display star, handle toggle)
    ↓
PatternShowcase (filter favorites category)
```

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

### Export Summary: src/lib/constants.ts

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports various configuration constants for the application.

```typescript
export const PATTERN_CATEGORIES = [ ]
export const THEME_CONFIG = { }
export const SUPPORT_CONFIG = { }
export const APP_CONFIG = { }
```

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

### Export Summary: src/hooks/useCopy.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the useCopy hook.

```typescript
export function useCopy()
```

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

### Export Summary: src/components/patterns/pattern-showcase.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the PatternShowcase component.

```typescript
export default function PatternShowcase({ })
```

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

### Pattern Display Flow

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Data flow for displaying patterns, from data fetching to individual card rendering.

```mermaid
gridPatterns (data)
    ↓
PatternShowcase (filters by category + search)
    ↓
searchPatterns() utility (filters & sorts)
    ↓
PatternGrid (layouts in grid)
    ↓
PatternCard × N (displays each pattern)
    ↓
useCopy, useFavorites, activePattern state
```

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

### Export Summary: src/hooks/useTheme.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the useTheme hook.

```typescript
export function useTheme()
```

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

### Export Summary: src/components/providers/theme-provider.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the ThemeProvider component.

```typescript
export function ThemeProvider({ children, ...props })
```

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

### Export Summary: src/context/favourites-context.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the FavoritesProvider component and the useFavorites hook.

```typescript
export function FavoritesProvider({ children }: { children: ReactNode })
export const useFavorites = () => useContext(FavoritesContext)
```

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

### Manual Pattern Customization Structure

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

Defines the structure for customizing background patterns, including ID, name, badge, style, and code.

```typescript
{
  id: "unique-pattern-id",
  name: "Pattern Display Name",
  badge: "New",
  style: {
    background: "#ffffff",
    backgroundImage: `
      // Your CSS background patterns here
      linear-gradient(to right, #f0f0f0 1px, transparent 1px),
      radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
    `,
    backgroundSize: "96px 64px, 100% 100%",
  },
  code: `<div className="min-h-screen w-full bg-white relative">
  {/* Pattern Name Background */}
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        // Your background image styles
      `,
      backgroundSize: "96px 64px, 100% 100%",
    }}
  />
  {/* Your Content/Components */}
</div>`,
}
```

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

### Component Tree

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Illustrates the hierarchical structure of the React components used in the application.

```jsx
<ThemeProvider>
  <FavoritesProvider>
    <RootLayout>
      <HomePage>
        <PatternShowcase>
          <Tabs>
            <TabsList>
              <TabsTrigger /> (one per category)
            </TabsList>
            <SearchBar />
            <TabsContent /> (one per category)
              <PatternGrid>
                <PatternCard /> (multiple)
                  <Button /> (Preview)
                  <Button /> (Copy)
                  <Badge /> (New)
              </PatternGrid>
              or
              <PatternEmptyState />
          </Tabs>
        </PatternShowcase>
      </HomePage>
    </RootLayout>
  </FavoritesProvider>
</ThemeProvider>
```

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

### Export Summary: src/types/pattern.ts

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the main Pattern interface.

```typescript
export interface Pattern { }
```

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

### Types Imports

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/INDEX.md

Imports for TypeScript type definitions.

```typescript
import type { Pattern } from "@/types/pattern";
import type { CategoryId } from "@/data/categories";
```

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

### FavoritesProvider Component Signature

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/contexts.md

The React Context Provider for managing favorited patterns across the application.

```typescript
export function FavoritesProvider({ children }: { children: ReactNode }): JSX.Element
```

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

### Export Summary: src/components/patterns/pattern-grid.tsx

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports the PatternGrid component.

```typescript
export default function PatternGrid({ })
```

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

### Adding New Patterns Structure

Source: https://github.com/megh-bari/pattern-craft/blob/main/README.md

The structure for adding a new pattern to `src/data/patterns.ts`, including optional category and badge properties.

```typescript
{
  id: "unique-pattern-id",
  name: "Pattern Display Name",
  category: "gradients" | "geometric" | "decorative" | "effects",
  badge: "New", // Optional: "New"
  style: {
    background: "#ffffff",
    backgroundImage: `
      // Your CSS background patterns here
      linear-gradient(to right, #f0f0f0 1px, transparent 1px),
      radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
    `,
    backgroundSize: "96px 64px, 100% 100%",
  },
  code: `<div className="min-h-screen w-full bg-white relative">
  {/* Pattern Name Background */}
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        // Your background image styles
      `,
      backgroundSize: "96px 64px, 100% 100%",
    }}
  />
  {/* Your Content/Components */}
</div>`,
}
```

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

### SearchBar Interface and Export

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-feature.md

TypeScript interface and function signature for the SearchBar component.

```typescript
interface SearchBarProps {
  searchInput: string;
  setSearchInput: (arg: string) => void;
  isPatternDark: boolean;
}

export function SearchBar({
  searchInput,
  setSearchInput,
  isPatternDark,
}: SearchBarProps): JSX.Element
```

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

### TabsList Component Definition

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/api-reference/components-ui.md

TypeScript definition for the TabsList component.

```typescript
function TabsList({
  className?: string;
  ...props: React.ComponentProps<typeof TabsPrimitive.List>;
}): JSX.Element
```

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

### Export Summary: src/lib/utils.ts

Source: https://github.com/megh-bari/pattern-craft/blob/main/_autodocs/module-graph.md

Exports utility functions for class name merging, debouncing, and pattern searching.

```typescript
export function cn(...inputs: ClassValue[])
export function debounce<T extends any[]>(fn, timeout)
export function searchPatterns(gridPatterns, category, searchInput)
```