### Implement a Multi-Step Registration Form

Source: https://github.com/ryadav96/gends/blob/main/form-navigation.md

This snippet provides a real-world example of building a multi-step registration form using the `FormNav` component. It outlines different sections like 'Account Setup' and 'Personal Details', showcasing how to structure various input fields and navigation buttons within each step of a complex form.

```tsx
const RegistrationForm = () => {
  return (
    <FormNav navTitles={["Account Setup", "Personal Details", "Preferences", "Confirmation"]}>
      {[
        // Account Setup Section
        <div key="account" className="cards">
          <Card title="Create Your Account">
            <Input label="Username" placeholder="Choose a username" required />
            <Input label="Password" type="password" placeholder="Create a password" required />
            <Input
              label="Confirm Password"
              type="password"
              placeholder="Confirm your password"
              required
            />
            <div className="flex justify-end mt-4">
              <Button>Next</Button>
            </div>
          </Card>
        </div>,

        // Personal Details Section
        <div key="personal" className="cards">
          <Card title="Your Information">
            <Input label="Full Name" placeholder="Enter your full name" required />
            <Input label="Date of Birth" type="date" required />
            <div className="grid grid-cols-2 gap-4">
              <Input label="Country" placeholder="Select your country" required />
              <Input label="Phone Number" placeholder="Enter your phone number" />
            </div>
            <div className="flex justify-between mt-4">
              <Button kind="secondary">Back</Button>
              <Button>Next</Button>
            </div>
          </Card>
        </div>,
      ]}
    </FormNav>
  );
};
```

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

### InputLabel Full Featured Example

Source: https://github.com/ryadav96/gends/blob/main/input-label.md

A comprehensive example showcasing the InputLabel component with all its features enabled: required indicator, help tooltip, and character counter, along with custom styling.

```tsx
<InputLabel
  htmlFor="description"
  label="Description"
  required={true}
  showHelpIcon={true}
  helpTooltipMessage="Provide a detailed description of your product"
  showCounter={true}
  currentCount={75}
  maxCount={500}
  className="w-full"
/>
```

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

### Example: Navigation Menu with Link Components

Source: https://github.com/ryadav96/gends/blob/main/link.md

Provides a real-world example of building a navigation menu using multiple Link components, demonstrating their use within a structural element. This showcases how to create a common UI pattern.

```tsx
const NavigationMenu = () => {
  return (
    <nav className="flex flex-col gap-2">
      <Link size="md" link="/dashboard" label="Dashboard" subtle={false} />
      <Link size="md" link="/profile" label="Profile" />
      <Link size="md" link="/settings" label="Settings" />
    </nav>
  );
};
```

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

### Migration Guide: Button Component v1.x to v2.x

Source: https://github.com/ryadav96/gends/blob/main/button.md

A guide illustrating the API changes for migrating the Button component from version 1.x to 2.x, showing old and new prop usage.

```tsx
// OLD v1.x API
<Button variant="primary" color="blue" size="medium">
  Old Button
</Button>

// NEW v2.x API
<Button kind="primary" appearance="default" size="m">
  New Button
</Button>
```

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

### Example of Accessible Input Component Configuration

Source: https://github.com/ryadav96/gends/blob/main/input.md

Provides a practical example of configuring the `gends` Input component with various accessibility-related props. It demonstrates how to set `validationState`, `validationMessage`, `showHelpIcon`, `helpTooltipMessage`, `required`, `aria-label`, and `aria-describedby` to enhance screen reader support and overall usability.

```tsx
// Example with full accessibility features
<Input
  label="Accessible Input"
  placeholder="Type here"
  validationState="error"
  validationMessage="This field is required"
  showHelpIcon
  helpTooltipMessage="Enter a valid email address"
  required
  aria-label="Email address input with validation"
  aria-describedby="email-help email-error"
/>
```

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

### Install GENDS DataTable Dependencies

Source: https://github.com/ryadav96/gends/blob/main/data-table.md

Installs the necessary npm packages for the DataTable component, including `@gends/ui-components`, `@tanstack/react-table`, and `@tanstack/react-virtual`.

```bash
npm install @gends/ui-components @tanstack/react-table @tanstack/react-virtual
# or
yarn add @gends/ui-components @tanstack/react-table @tanstack/react-virtual
```

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

### Pagination Loading State Example

Source: https://github.com/ryadav96/gends/blob/main/pagination.md

Shows how to enable the loading state for the Pagination component, indicating that data is being fetched or processed.

```TSX
<Pagination
  currentPage={1}
  totalPages={25}
  pageSize={10}
  onPageChange={handlePageChange}
  onPageSizeChange={handlePageSizeChange}
  isLoading={true}
/>
```

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

### Migration Guide for gends Component Upgrades

Source: https://github.com/ryadav96/gends/blob/main/bottom-sheet.md

This guide provides step-by-step instructions for upgrading gends components, covering updates to import statements, prop names, custom styling, slot customizations, event handler signatures, and accessibility attributes to ensure a smooth transition to newer versions.

```APIDOC
Migration Guide:
1. Update import statements to use `gends` package
2. Replace deprecated prop names with new API structure
3. Update custom styling to use new classNames interface
4. Test header and body slot customizations with new prop structure
5. Verify event handler functions match new callback signatures
6. Update accessibility attributes to use new automatic implementation
```

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

### Install InputLabel Component

Source: https://github.com/ryadav96/gends/blob/main/input-label.md

Demonstrates how to import the InputLabel component from the 'gends' library for use in a React application.

```tsx
import { InputLabel } from "gends";
```

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

### ProgressBar File Upload Progress Example

Source: https://github.com/ryadav96/gends/blob/main/feedback-progress.md

Provides a real-world example of using the ProgressBar component to display file upload progress. It demonstrates dynamic updates of the progress value and changing the color to success upon completion, utilizing React's `useState` hook for state management.

```tsx
const FileUploadProgress = () => {
  const [uploadProgress, setUploadProgress] = useState(0);

  return (
    <div className="w-full max-w-md">
      <ProgressBar
        value={uploadProgress}
        max={100}
        color={uploadProgress === 100 ? "success" : "default"}
        label="Uploading file..."
        size="md"
        variant="line"
      />
    </div>
  );
};
```

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

### SearchBar Small Size Variant

Source: https://github.com/ryadav96/gends/blob/main/search-bar.md

Example of rendering the SearchBar component with the 's' (small) size variant.

```tsx
<SearchBar
  size="s"
  dropdownPlaceholder="Select"
  options={[
    { id: 1, label: "Option 1", value: "opt1" },
    { id: 2, label: "Option 2", value: "opt2" },
  ]}
/>
```

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

### Render Simple Counter Badge

Source: https://github.com/ryadav96/gends/blob/main/counter-badge.md

Demonstrates how to render a basic CounterBadge component with a static numeric value. This example shows the minimal setup required for display.

```tsx
const BasicCounterBadge = () => {
  return <CounterBadge value="5" />;
};
```

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

### Basic ProgressStepper Usage for MCP Server Startup

Source: https://github.com/ryadav96/gends/blob/main/progress-stepper.md

Demonstrates a basic implementation of the ProgressStepper component to visualize a simulated MCP server startup sequence with step-by-step progress updates.

```tsx
import { ProgressStepper } from "gends";
import { useState, useEffect } from "react";

function MCPServerStartup() {
  const [currentStep, setCurrentStep] = useState(0);

  const serverStartupSteps = [
    {
      step: 1,
      title: "Contex 7 Initialization",
      description: "Starting Contex 7 runtime environment",
      status: "success" as const,
    },
    {
      step: 2,
      title: "MCP Server Bootstrap",
      description: "Loading MCP server configurations",
      status: "default" as const,
      progress: { percentage: 85, type: "success" as const },
    },
    {
      step: 3,
      title: "Service Registration",
      description: "Registering microservices with discovery",
      status: "default" as const,
      progress: { percentage: 0, type: "default" as const },
    },
  ];

  // Simulate server startup progress
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentStep(prev => Math.min(prev + 1, serverStartupSteps.length - 1));
    }, 2000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="p-6 bg-surface-10 rounded-lg">
      <h2 className="text-heading-xl mb-4">MCP Server Startup</h2>
      <ProgressStepper
        steps={serverStartupSteps}
        value={currentStep}
        onValueChange={setCurrentStep}
        orientation="horizontal"
        size="md"
      />
    </div>
  );
}
```

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

### Configure MCP Server with Gends and Contex7 Plugins

Source: https://github.com/ryadav96/gends/blob/main/progress-stepper.md

This snippet demonstrates how to initialize an MCP server instance and register the Contex7Plugin and GenesisUIPlugin. It shows how to enable specific Gends components like 'ProgressStepper' and configure theme settings for Contex7.

```typescript
// server/setup.ts
import { MCPServer } from "@mcp/core";
import { Contex7Plugin } from "@contex7/mcp-plugin";
import { GenesisUIPlugin } from "@gends/mcp-plugin";

const server = new MCPServer({
  plugins: [
    new Contex7Plugin({
      theme: "falcon", // or 'phoenix', 'jarvis'
      mode: "light" // or 'dark'
    }),
    new GenesisUIPlugin({
      components: ["ProgressStepper"], // Explicitly enable ProgressStepper
      optimizations: true
    })
  ]
});
```

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

### DatePicker Error State Example

Source: https://github.com/ryadav96/gends/blob/main/date-picker.md

Demonstrates how to display the DatePicker component in an error state. It includes a validation message and support text to guide the user on invalid input.

```tsx
<DatePicker
  type="single"
  validationState="error"
  validationMessage="Please select a valid date"
  label="Invalid Date"
  supportText="Date must be within the allowed range"
/>
```

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

### Creating and Pushing a Git Tag for Release

Source: https://github.com/ryadav96/gends/blob/main/release.md

These commands create a signed Git tag with a specified version (e.g., vX.Y.Z) and push it to the origin, marking the release point for the design system.

```bash
git tag -s vX.Y.Z -m "Genesis DS vX.Y.Z"
git push origin vX.Y.Z
```

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

### Tooltip Positioning Examples: Top Side in TSX

Source: https://github.com/ryadav96/gends/blob/main/tooltip.md

Shows various configurations for displaying tooltips on the 'top' side, including default centering, 'start' alignment, and 'end' alignment relative to the trigger element.

```tsx
const TopTooltipExample = () => (
  <div className="space-y-4">
    <Tooltip content="Default top position" side="top">
      <Button>Top tooltip</Button>
    </Tooltip>

    <Tooltip content="Top with start alignment" side="top" align="start">
      <Button>Top start</Button>
    </Tooltip>

    <Tooltip content="Top with end alignment" side="top" align="end">
      <Button>Top end</Button>
    </Tooltip>
  </div>
);
```

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

### Bumping Package Versions and Changelog

Source: https://github.com/ryadav96/gends/blob/main/release.md

These commands update package versions and changelog headings based on existing changesets, then stage and commit the changes for release.

```bash
yarn changeset version
git add .
git commit -m "chore(release): version packages"
```

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

### Pomodoro Timer Setup Component in React/TypeScript

Source: https://github.com/ryadav96/gends/blob/main/time-picker.md

This React/TypeScript component manages the state for a Pomodoro timer, allowing users to set work, short break, and long break durations. It includes functions to start, pause/resume the timer, format time, and validate duration inputs. The UI displays the current timer status and provides controls for starting different session types.

```tsx
const TimerSetup = () => {
  const [timerSettings, setTimerSettings] = useState({
    workDuration: "25:00",
    shortBreak: "05:00",
    longBreak: "15:00",
    sessions: 4,
  });

  const [currentTimer, setCurrentTimer] = useState(null);
  const [timeLeft, setTimeLeft] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  const startTimer = (type, duration) => {
    const [minutes, seconds] = duration.split(":").map(Number);
    const totalSeconds = minutes * 60 + seconds;

    setCurrentTimer(type);
    setTimeLeft(totalSeconds);
    setIsRunning(true);
  };

  const formatTime = seconds => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
  };

  const validateDuration = duration => {
    if (!duration) return false;
    const [minutes, seconds] = duration.split(":").map(Number);
    return minutes >= 1 && minutes <= 60 && seconds >= 0 && seconds < 60;
  };

  return (
    <div className="max-w-lg space-y-6">
      <h3 className="text-xl font-semibold">Pomodoro Timer Setup</h3>

      {currentTimer && (
        <div className="text-center p-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg">
          <div className="text-sm opacity-90 mb-1">{currentTimer}</div>
          <div className="text-4xl font-mono font-bold">{formatTime(timeLeft)}</div>
          <button
            onClick={() => setIsRunning(!isRunning)}
            className="mt-3 px-4 py-2 bg-white text-blue-600 rounded-md font-medium"
          >
            {isRunning ? "Pause" : "Resume"}
          </button>
        </div>
      )}

      <div className="space-y-4">
        <TimePicker
          label="Work Duration"
          value={timerSettings.workDuration}
          onChange={value => setTimerSettings(prev => ({ ...prev, workDuration: value }))}
          time24Format={true}
          placeholder="MM:SS"
          size="m"
          validationState={validateDuration(timerSettings.workDuration) ? "success" : "error"}
          validationMessage={
            !validateDuration(timerSettings.workDuration) ? "Enter 1-60 minutes" : ""
          }
          helperText="Focus work session duration"
        />

        <TimePicker
          label="Short Break"
          value={timerSettings.shortBreak}
          onChange={value => setTimerSettings(prev => ({ ...prev, shortBreak: value }))}
          time24Format={true}
          placeholder="MM:SS"
          size="m"
          validationState={validateDuration(timerSettings.shortBreak) ? "success" : "error"}
          helperText="Break between work sessions"
        />

        <TimePicker
          label="Long Break"
          value={timerSettings.longBreak}
          onChange={value => setTimerSettings(prev => ({ ...prev, longBreak: value }))}
          time24Format={true}
          placeholder="MM:SS"
          size="m"
          validationState={validateDuration(timerSettings.longBreak) ? "success" : "error"}
          helperText="Extended break after session cycle"
        />

        <div className="flex gap-3 pt-4">
          <button
            onClick={() => startTimer("Work Session", timerSettings.workDuration)}
            className="flex-1 px-4 py-2 bg-green-600 text-white rounded-md font-medium"
          >
            Start Work
          </button>
          <button
            onClick={() => startTimer("Short Break", timerSettings.shortBreak)}
            className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md font-medium"
          >
            Short Break
          </button>
          <button
            onClick={() => startTimer("Long Break", timerSettings.longBreak)}
            className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-md font-medium"
          >
            Long Break
          </button>
        </div>
      </div>
    </div>
  );
};
```

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

### Creating a Dismissible Information Banner in TSX

Source: https://github.com/ryadav96/gends/blob/main/banner.md

This example demonstrates an informational banner that can be dismissed by the user. It includes a 'Learn More' button with an action to open a feature guide and an `onClose` handler to control the banner's visibility.

```tsx
<Banner
  title="New Features Available"
  description="Check out our latest updates and improvements."
  variant="neutral"
  primaryBtnText="Learn More"
  primaryBtnAction={() => openFeatureGuide()}
  onClose={() => setShowBanner(false)}
/>
```

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

### Authoring a Changeset with Yarn

Source: https://github.com/ryadav96/gends/blob/main/release.md

This command runs an interactive CLI to help describe user-facing changes for a new release. It generates a markdown file that should be committed.

```bash
yarn changeset
```

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

### Integrating Carousel with Form Components

Source: https://github.com/ryadav96/gends/blob/main/carousel.md

This example demonstrates how to integrate the Carousel component with multi-step form components. Each form step is rendered as a separate slide, allowing users to navigate through the form sequentially. This approach is useful for creating guided user flows or wizards.

```tsx
const CarouselForm = () => (
  <Carousel
    slides={[<FormStep1 key="step1" />, <FormStep2 key="step2" />, <FormStep3 key="step3" />]}
    hideNav={false}
    showDots={true}
    label="Multi-step Form"
  />
);
```

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

### Initializing Tile Component in React

Source: https://github.com/ryadav96/gends/blob/main/tile.md

Demonstrates the basic usage of the `Tile` component by importing it and wrapping simple HTML content within it. It provides a consistent styling and hover interaction for its children.

```TSX
import { Tile } from "gends";

function Example() {
  return (
    <Tile>
      <h2>Content Title</h2>
      <p>Content description goes here</p>
    </Tile>
  );
}
```

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

### Initializing a Basic Banner Component in TSX

Source: https://github.com/ryadav96/gends/blob/main/banner.md

This snippet demonstrates how to quickly set up a basic `Banner` component using `gends`. It includes a title, description, a primary variant, and a primary action button with a console log.

```tsx
import { Banner } from "gends";

function Example() {
  return (
    <Banner
      title="Welcome!"
      description="Thank you for joining our platform."
      variant="primary"
      primaryBtnText="Get Started"
      primaryBtnAction={() => console.log("Getting started")}
    />
  );
}
```

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

### Creating a Large, Prominent Call-to-Action Link in TSX

Source: https://github.com/ryadav96/gends/blob/main/link.md

This recipe shows how to create a highly prominent call-to-action link. By combining `size="lg"`, `subtle={false}`, and an additional `className="font-bold"`, the link becomes large, bold, and visually stands out, ideal for 'Get started' buttons.

```tsx
<Link label="Get started today" link="/signup" size="lg" subtle={false} className="font-bold" />
```

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

### Responsive Configuration Wizard with ProgressStepper

Source: https://github.com/ryadav96/gends/blob/main/progress-stepper.md

Demonstrates how to implement a responsive configuration wizard using the `ProgressStepper` component. It dynamically adjusts its orientation and size based on the detected breakpoint (e.g., mobile vs. desktop) using a `useBreakpoint` hook, ensuring optimal display across different devices.

```tsx
import { ProgressStepper } from "gends";
import { useBreakpoint } from "@/hooks/useBreakpoint";

function ConfigurationWizard() {
  const { isMobile } = useBreakpoint();
  const [activeStep, setActiveStep] = useState(0);

  const configSteps = [
    {
      step: 1,
      title: "Environment Setup",
      description: "Configure Contex 7 environment variables",
      status: "success" as const,
    },
    {
      step: 2,
      title: "Database Connection",
      description: "Establish database connectivity",
      status: "default" as const,
      progress: { percentage: 60, type: "success" as const },
    },
    {
      step: 3,
      title: "Security Configuration",
      description: "Set up authentication and authorization",
      status: "default" as const,
      progress: { percentage: 0, type: "default" as const },
    },
  ];

  return (
    <div className="config-wizard">
      <ProgressStepper
        steps={configSteps}
        value={activeStep}
        onValueChange={setActiveStep}
        orientation={isMobile ? "vertical" : "horizontal"}
        size={isMobile ? "sm" : "md"}
        className={isMobile ? "w-full" : "max-w-4xl mx-auto"}
      />
    </div>
  );
}
```

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

### Vertical Configuration Wizard using StepperFlow in React

Source: https://github.com/ryadav96/gends/blob/main/stepper-flow.md

Illustrates a vertical `StepperFlow` component for a multi-step configuration wizard. It shows how to display detailed content for each step and manage the active step using React's `useState` hook. The example includes steps for environment setup, database connection, service integration, and security configuration.

```tsx
import { StepperFlow } from "gends";
import { useState } from "react";

function ConfigurationWizard() {
  const [activeStep, setActiveStep] = useState(0);

  const configSteps = [
    {
      "step": 0,
      "title": "Environment Setup",
      "description": (
        <div className="space-y-2">
          <p>Configure your Contex 7 environment</p>
          <ul className="text-sm text-muted-foreground">
            <li>• Set environment variables</li>
            <li>• Configure API endpoints</li>
            <li>• Set up authentication</li>
          </ul>
        </div>
      ),
      "stepState": "current" as const,
    },
    {
      "step": 1,
      "title": "Database Connection",
      "description": "Establish secure database connectivity",
      "stepState": "upcoming" as const,
    },
    {
      "step": 2,
      "title": "Service Integration",
      "description": "Connect external services and APIs",
      "stepState": "upcoming" as const,
    },
    {
      "step": 3,
      "title": "Security Configuration",
      "description": "Set up security policies and permissions",
      "stepState": "upcoming" as const,
    },
  ];

  return (
    <div className="config-wizard w-96">
      <StepperFlow
        steps={configSteps}
        value={activeStep}
        onValueChange={setActiveStep}
        orientation="vertical"
        showStepContent={true}
        stepClassName="pb-6"
      />
    </div>
  );
}
```

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

### React DataTable Basic Usage with GENDS

Source: https://github.com/ryadav96/gends/blob/main/data-table.md

This TypeScript example showcases a `DataTable` component setup using the `gends` library. It includes state management for UI toggles like row selection, column dividers, and grouping, as well as sorting. The `useDataTable` hook integrates with `@tanstack/react-table` to manage data, columns, and pagination. The component also demonstrates custom header, footer (with Pagination), and action bar elements for selected rows.

```typescript
// ExampleTable.tsx
"use client";

import React, { useState, useMemo, useCallback } from "react";
import { DataTable } from "gends";
import { useDataTable } from "gends";
import { TabsRow } from "gends";
import { FilterPills } from "gends";
import { Pagination } from "gends";
import { userData } from "gends";
import { Button } from "gends";
import { CustomASNTable } from "gends";
import {
  DataTableActionBar,
  DataTableActionBarSelection,
  DataTableActionBarAction,
  DataTableActionBarOverflow,
} from "gends";

import { ColumnDef, SortingState, Updater } from "@tanstack/react-table";
import type { UserRow, ASNRow } from "gends";

// flat columns & groupedColumns imported from your definitions
import { columns, groupedColumns } from "gends";
import { ColumnManagerDropdown } from "gends";

export function ExampleTable() {
  // ---- UI toggles ----
  const [enableRowSelection, setEnableRowSelection] = useState(false);
  const [showColumnDivider, setShowColumnDivider] = useState(false);
  const [showColGroup, setShowColGroup] = useState(false);
  const [stickyFooter, setStickyFooter] = useState(true);

  // ---- sorting state ----
  const [sortParam, setSortParam] = useState<string>(""); // e.g. "id.asc"
  const sorting: SortingState = useMemo(() => {
    if (!sortParam) return [];
    const [id, dir] = sortParam.split(".");
    return [{ id, desc: dir === "desc" }];
  }, [sortParam]);
  const onSortingChange = useCallback(
    (next: Updater<SortingState>) => {
      const newState = typeof next === "function" ? next(sorting) : next;
      const head = newState[0];
      if (head) setSortParam(`${head.id}.${head.desc ? "desc" : "asc"}`);
      else setSortParam("");
    },
    [sorting]
  );

  // ---- build the TanStack table instance ----
  const { table, originalColumns } = useDataTable<UserRow>({
    data: userData,
    columns: showColGroup ? groupedColumns : columns,
    pageCount: 1,
    sorting,
    onSortingChange,
    enableRowSelection,
    showExpandRowIcon: true,
    // manualPagination/filtering/sorting are already set in the hook
    defaultColumn: { size: 50, minSize: 30, maxSize: 600 },
  });

  // ---- pull out selected rows for the action bar ----
  const selectedRows = table.getSelectedRowModel().rows.map((r) => r.original);

  return (
    <div className="p-5 bg-gray-50 space-y-4">
      {/* Controls */}
      <div className="flex flex-wrap gap-2">
        <Button onClick={() => setEnableRowSelection((v) => !v)}>
          Toggle Row Selection
        </Button>
        <Button
          onClick={() => setShowColumnDivider((v) => !v)}
          variant="outline"
        >
          Toggle Borders
        </Button>
        <Button onClick={() => setShowColGroup((v) => !v)}>
          Toggle Grouping
        </Button>
      </div>

      {/* DataTable */}
      <DataTable<UserRow>
        table={table}
        originalColumns={originalColumns}
        enableRowSelection={enableRowSelection}
        showColumnDivider={showColumnDivider}
        tableHeight={stickyFooter ? "60vh" : "auto"}
        showTableFooter
        stickyFooter={stickyFooter}
        tableFooter={
          <Pagination
            currentPage={table.getState().pagination.pageIndex + 1}
            totalPages={table.getPageCount()}
            pageSize={table.getState().pagination.pageSize}
            onPageChange={(p) => table.setPageIndex(p - 1)}
            onPageSizeChange={(size) => table.setPageSize(size)}
            className="w-full"
            table={table}
          />
        }
        headerTopRow={
          <div className="border-b bg-white px-4 py-2">
            <TabsRow table={table} />
            <div className="flex items-center gap-2">
              <ColumnManagerDropdown table={table} />
            </div>
          </div>
        }
        showHeaderTopRow
        headerBottomRow={
          <div className="px-4 py-2">
            <FilterPills table={table} />
          </div>
        }
        showHeaderBottomRow
        SubTableComponent={({ data }) => (
          <CustomASNTable data={data as ASNRow[]} />
        )}
        wrapAll={false}
        truncateAll={true}
      >
        {/* Action Bar */}
        <DataTableActionBar table={table}>
          <DataTableActionBarSelection table={table} />
          <DataTableActionBarAction
            tooltip="Delete rows"
            onClick={() => console.log("Delete", selectedRows)}
          >
            Delete
          </DataTableActionBarAction>
          <DataTableActionBarAction
            tooltip="Archive rows"
            onClick={() => console.log("Archive", selectedRows)}
          >
            Archive
          </DataTableActionBarAction>
```

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

### Configure Environment Variables for Gends and Contex7

Source: https://github.com/ryadav96/gends/blob/main/progress-stepper.md

This snippet shows example environment variables used to configure the MCP server URL, Contex7 theme mode, Gends optimization level, and default size for ProgressStepper. These variables allow for flexible configuration without code changes.

```bash
# .env.local
MCP_SERVER_URL=http://localhost:3001
CONTEX7_THEME_MODE=light
GENDS_OPTIMIZATION_LEVEL=high
PROGRESS_STEPPER_DEFAULT_SIZE=md
```

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

### React TypeScript Example: Implementing an Editable Data Table with GENDS

Source: https://github.com/ryadav96/gends/blob/main/data-table.md

This comprehensive TypeScript code demonstrates the setup of an editable data table using GENDS components. It includes defining a data interface, generating sample data, managing table state with React hooks (useState, useMemo, useCallback), and configuring column definitions with `EditableTextCell` for name, email, and age, showcasing how to handle cell updates and integrate with GENDS' `DataTable`.

```typescript
// Example Editable Table with GenDS Components
import React, { useState, useMemo, useCallback } from "react";
import { ColumnDef } from "gends";
import {
  DataTable,
  useDataTable,
  EditableTextCell,
  EditableNumberCell,
  EditableDropdownCell,
  EditableCheckboxCell,
  EditableDateCell,
  type DropdownOption,
} from "gends"; // Assuming GENDS package export
import { Pagination } from "gends"; // Adjust path as per your project structure

// Sample data interface
interface EditableRow {
  id: number;
  name: string;
  email: string;
  age: number;
  department: string;
  status: "active" | "inactive" | "pending";
  priority: "low" | "medium" | "high";
  isActive: boolean;
  startDate: Date | null;
  salary: number;
}

// Sample data
const generateSampleData = (): EditableRow[] => {
  const departments = ["Engineering", "Marketing", "Sales", "HR", "Finance"];
  const statuses: ("active" | "inactive" | "pending")[] = [
    "active",
    "inactive",
    "pending",
  ];
  const priorities: ("low" | "medium" | "high")[] = ["low", "medium", "high"];

  return Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    name: `Employee ${i + 1}`,
    email: `employee${i + 1}@company.com`,
    age: 25 + (i % 15),
    department: departments[i % departments.length],
    status: statuses[i % statuses.length],
    priority: priorities[i % priorities.length],
    isActive: i % 2 === 0,
    startDate:
      i % 3 === 0 ? new Date(Date.now() - i * 30 * 24 * 60 * 60 * 1000) : null,
    salary: 50000 + i * 5000,
  }));
};

export function EditableTableExample() {
  const [data, setData] = useState<EditableRow[]>(generateSampleData);
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });

  // Dropdown options
  const departmentOptions: DropdownOption[] = [
    { id: "engineering", label: "Engineering", value: "Engineering" },
    { id: "marketing", label: "Marketing", value: "Marketing" },
    { id: "sales", label: "Sales", value: "Sales" },
    { id: "hr", label: "HR", value: "HR" },
    { id: "finance", label: "Finance", value: "Finance" },
  ];

  const statusOptions: DropdownOption[] = [
    { id: "active", label: "Active", value: "active" },
    { id: "inactive", label: "Inactive", value: "inactive" },
    { id: "pending", label: "Pending", value: "pending" },
  ];

  const priorityOptions: DropdownOption[] = [
    { id: "low", label: "Low", value: "low" },
    { id: "medium", label: "Medium", value: "medium" },
    { id: "high", label: "High", value: "high" },
  ];

  // Handle cell updates
  const handleCellUpdate = useCallback(
    (rowIndex: number, field: keyof EditableRow, value: any) => {
      setData((prevData) => {
        const newData = [...prevData];
        const actualIndex =
          pagination.pageIndex * pagination.pageSize + rowIndex;
        if (newData[actualIndex]) {
          newData[actualIndex] = { ...newData[actualIndex], [field]: value };
        }
        return newData;
      });
      console.log(`Updated row ${rowIndex}, field ${field}:`, value);
    },
    [pagination.pageIndex, pagination.pageSize]
  );

  // Column definitions with editable cells
  const columns = useMemo<ColumnDef<EditableRow]>(
    () => [
      {
        accessorKey: "id",
        header: "ID",
        size: 60,
        cell: ({ getValue }) => getValue(), // Read-only
      },
      {
        accessorKey: "name",
        header: "Name",
        cell: ({ row, getValue }) => (
          <EditableTextCell
            value={String(getValue() || "")}
            onChange={(value) => handleCellUpdate(row.index, "name", value)}
            placeholder="Enter name"
            onSave={() => console.log("Name saved for row", row.index)}
          />
        ),
      },
      {
        accessorKey: "email",
        header: "Email",
        cell: ({ row, getValue }) => (
          <EditableTextCell
            value={String(getValue() || "")}
            onChange={(value) => handleCellUpdate(row.index, "email", value)}
            type="email"
            placeholder="Enter email"
            onSave={() => console.log("Email saved for row", row.index)}
          />
        ),
      },
      {
        accessorKey: "age",
        header: "Age",
        size: 80,
        cell: ({ row, getValue }) => (
          <EditableTextCell
            value={Number(getValue() || 0)}
            onChange={(value) =>
              handleCellUpdate(row.index, "age", Number(value))
            }
            type="number"
            placeholder="Enter age"
            onSave={() => console.log("Age saved for row", row.index)}
          />
        ),
      },
      {
        accessorKey: "department",
        header: "Department",
        cell: ({ row, getValue }) => (

```

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

### Basic Usage of SearchBar Component

Source: https://github.com/ryadav96/gends/blob/main/search-bar.md

Demonstrates how to render a SearchBar component with basic options and event handlers for input and dropdown changes.

```tsx
import { SearchBar } from "gends";

function MyComponent() {
  return (
    <SearchBar
      options={[
        { id: 1, label: "Option 1", value: "opt1" },
        { id: 2, label: "Option 2", value: "opt2" },
      ]}
      onInputChange={value => console.log("Search:", value)}
      onDropdownChange={option => console.log("Selected:", option)}
    />
  );
}
```

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

### Quick Start with Text Component

Source: https://github.com/ryadav96/gends/blob/main/text.md

Demonstrates how to import and use the `Text` component with various predefined typography variants like display, heading, and body text. The component automatically maps variants to appropriate semantic HTML elements.

```tsx
import { Text } from "gends";

function Example() {
  return (
    <>
      <Text variant="desktop-display-l">Large Display Text</Text>
      <Text variant="desktop-heading-m">Medium Heading</Text>
      <Text variant="desktop-body-m">Regular body text</Text>
    </>
  );
}
```

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

### Horizontal Divider Orientation Examples

Source: https://github.com/ryadav96/gends/blob/main/divider.md

Shows various examples of horizontal dividers, including basic usage, with custom spacing, and as a full-width section separator.

```tsx
// Basic horizontal divider
<Divider orientation="horizontal" />

// With spacing
<div className="my-8">
  <Divider orientation="horizontal" />
</div>

// Full-width section separator
<div className="w-full">
  <Divider orientation="horizontal" className="my-6" />
</div>
```

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

### Vertical Divider Orientation Examples

Source: https://github.com/ryadav96/gends/blob/main/divider.md

Provides examples of vertical dividers used for horizontal content separation, such as between inline elements, in sidebars, or within a flex container.

```tsx
// Basic vertical divider
<div className="flex items-center">
  <div>Left content</div>
  <Divider orientation="vertical" className="h-16 mx-4" />
  <div>Right content</div>
</div>

// Sidebar separator
<div className="flex h-screen">
  <aside className="w-64 bg-gray-50 p-4">Sidebar content</aside>
  <Divider orientation="vertical" className="h-full" />
  <main className="flex-1 p-4">Main content</main>
</div>

// Inline content separator
<div className="flex items-center space-x-4">
  <span>Item 1</span>
  <Divider orientation="vertical" className="h-6" />
  <span>Item 2</span>
  <Divider orientation="vertical" className="h-6" />
  <span>Item 3</span>
</div>
```

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

### ProgressStepper for Real-time Deployment Pipeline Updates

Source: https://github.com/ryadav96/gends/blob/main/progress-stepper.md

Illustrates using the ProgressStepper component to display a deployment pipeline's real-time status, integrating with a custom hook for dynamic updates and progress visualization.

```tsx
import { ProgressStepper } from "gends";
import { useMCPDeployment } from "@/hooks/useMCPDeployment";

function DeploymentPipeline() {
  const { deploymentState, currentStep } = useMCPDeployment();

  const deploymentSteps = [
    {
      step: 1,
      title: "Code Validation",
      description: "Running linting and type checks",
      status: deploymentState.validation,
    },
    {
      step: 2,
      title: "Build & Package",
      description: "Compiling and bundling application",
      status: deploymentState.build === "in_progress" ? "default" : deploymentState.build,
      progress:
        deploymentState.build === "in_progress"
          ? { percentage: deploymentState.buildProgress, type: "success" }
          : undefined,
    },
    {
      step: 3,
      title: "Deploy to Contex 7",
      description: "Deploying to production cluster",
      status: deploymentState.deploy,
      progress:
        deploymentState.deploy === "default" ? { percentage: 0, type: "default" } : undefined,
    },
  ];

  return (
    <div className="deployment-pipeline">
      <ProgressStepper
        steps={deploymentSteps}
        value={currentStep}
        orientation="vertical"
        size="sm"
        className="w-80"
        stepClassName="py-3"
      />
    </div>
  );
}
```

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

### Configure MCP Server with Gends and Contex7 Plugins

Source: https://github.com/ryadav96/gends/blob/main/stepper-flow.md

This code demonstrates the initial setup of an MCP Server, integrating `Contex7Plugin` and `GenesisUIPlugin`. It shows how to configure theme settings for Contex7 and explicitly enable `StepperFlow` components within the Genesis UI plugin for optimization.

```typescript
// server/setup.ts
import { MCPServer } from "@mcp/core";
import { Contex7Plugin } from "@contex7/mcp-plugin";
import { GenesisUIPlugin } from "@gends/mcp-plugin";

const server = new MCPServer({
  plugins: [
    new Contex7Plugin({
      theme: "falcon", // or 'phoenix', 'jarvis'
      mode: "light", // or 'dark'
    }),
    new GenesisUIPlugin({
      components: ["StepperFlow"], // Explicitly enable StepperFlow
      optimizations: true,
    }),
  ],
});
```

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

### Scrollbar Usage: Image Gallery Example

Source: https://github.com/ryadav96/gends/blob/main/scrollbar.md

A real-world example demonstrating the Scrollbar component used for a horizontal image gallery, allowing users to scroll through a collection of images.

```tsx
function ImageGallery() {
  const images = Array.from({ length: 10 }).map((_, i) => ({
    src: `https://example.com/image${i + 1}.jpg`,
    alt: `Image ${i + 1}`
  }));

  return (
    <Scrollbar orientation="horizontal" size="large">
      <div className="flex space-x-4 p-4">
        {images.map(image => (
          <img
            key={image.src}
            src={image.src}
            alt={image.alt}
            className="w-32 h-32 object-cover rounded"
          />
        ))}
      </div>
    </Scrollbar>
  );
}
```

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

### Scrollbar Usage: Tag List Example

Source: https://github.com/ryadav96/gends/blob/main/scrollbar.md

A real-world example demonstrating the Scrollbar component used to manage a long list of tags, ensuring a scrollable view within a confined space.

```tsx
function TagList() {
  const tags = Array.from({ length: 50 }).map((_, i) => `Tag ${i + 1}`);

  return (
    <Scrollbar size="small">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium">Tags</h4>
        {tags.map(tag => (
          <div key={tag} className="text-sm mb-2">
            {tag}
          </div>
        ))}
      </div>
    </Scrollbar>
  );
}
```

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

### InputLabel with Detailed Help Tooltip

Source: https://github.com/ryadav96/gends/blob/main/input-label.md

An example demonstrating the InputLabel component with a help icon and a comprehensive tooltip message, providing specific password requirements.

```tsx
<InputLabel
  htmlFor="password"
  label="Password"
  required={true}
  showHelpIcon={true}
  helpTooltipMessage="Password must contain at least 8 characters, including uppercase, lowercase, numbers and special characters"
/>
```

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

### Checkbox Success Validation State Examples

Source: https://github.com/ryadav96/gends/blob/main/checkbox.md

Demonstrates the `Checkbox` component in a success validation state, showing how to display positive feedback with a message. Includes examples for both default and large sizes.

```tsx
// Success validation
<Checkbox
  label="Data processing consent"
  validationState="success"
  validationMessage="Consent successfully recorded"
/>

// Success with large size
<Checkbox
  size="l"
  label="Account verification complete"
  validationState="success"
  validationMessage="Your account has been verified"
/>
```

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

### Importing SearchBar Component

Source: https://github.com/ryadav96/gends/blob/main/search-bar.md

Shows how to import the SearchBar component from the 'gends' package.

```typescript
import { SearchBar } from "gends";
```

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

### Basic Usage of Shimmer Component

Source: https://github.com/ryadav96/gends/blob/main/shimmer.md

Illustrates the fundamental usage of the Shimmer component with default properties, showing how to render a basic loading placeholder.

```TSX
import { Shimmer } from "gends";

function MyComponent() {
  return <Shimmer width="100px" height="20px" backgroundColor="#e0e0e0" borderRadius="4px" />;
}
```

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

### Tooltip Positioning Examples: Bottom Side in TSX

Source: https://github.com/ryadav96/gends/blob/main/tooltip.md

Demonstrates how to position tooltips on the 'bottom' side, useful for elements like dropdowns or form fields, including an example with a custom offset.

```tsx
const BottomTooltipExample = () => (
  <div className="space-y-4">
    <Tooltip content="Appears below the button" side="bottom">
      <Button>Bottom tooltip</Button>
    </Tooltip>

    <Tooltip content="Form field help text appears below" side="bottom" sideOffset={8}>
      <input type="text" placeholder="Username" className="border rounded px-3 py-2" />
    </Tooltip>
  </div>
);
```

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

### Search Bar Component Troubleshooting and Migration Notes

Source: https://github.com/ryadav96/gends/blob/main/search-bar.md

Lists common issues encountered with the Search Bar component and provides guidance for troubleshooting. Also includes notes for migrating from previous versions.

```APIDOC
Common Issues:
  Search:
    - Check input validation
    - Verify search functionality
    - Review event handlers
  Dropdown:
    - Check option formatting
    - Verify selection handling
    - Review positioning
  Styling:
    - Check custom styles
    - Verify design tokens
    - Review responsive behavior
Migration Notes (From Previous Versions):
  - Update import paths
  - Review prop changes
  - Test all variants
  - Verify accessibility
```

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

### Development Tools and Documentation Features

Source: https://github.com/ryadav96/gends/blob/main/release-note.md

Highlights the comprehensive documentation and development tools available for Genesis components. It includes interactive examples, detailed prop documentation, and usage guidelines.

```APIDOC
Documentation Features:
  Interactive examples: For all 50+ components
  Props documentation: With TypeScript integration
  Usage guidelines: Best practices
```

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

### Guide Users Through Multi-Step Workflows with Banners

Source: https://github.com/ryadav96/gends/blob/main/notification-banner.md

Demonstrates how to use the Banner component to guide users through multi-step processes, providing contextual information, progress indication, and completion messages at each stage.

```tsx
// Step 1: Initial action
<Banner
  variant="primary"
  title="Welcome to Setup"
  description="Let's get your account configured with the essential settings."
  primaryBtnText="Start Setup"
  secondaryBtnText="Skip"
/>;

// Step 2: Progress indication
<Banner
  variant="primary"
  loading={true}
  title="Setting Up Your Account"
  description="Please wait while we configure your preferences..."
  hideButtons={true}
/>;

// Step 3: Completion
<Banner
  variant="success"
  title="Setup Complete"
  description="Your account has been successfully configured and is ready to use."
  primaryBtnText="Get Started"
  hideSecondaryBtn={true}
/>;
```