### Getting Started with Atomix

Source: https://github.com/shohojdhara/atomix/blob/main/docs/getting-started/quick-start.md

Instructions on how to install the Atomix package and a basic setup example for integrating it into a React application.

```APIDOC
## Getting Started with Atomix

### Description
This section covers the installation and basic setup of the Atomix design system.

### Installation

```bash
npm install @shohojdhara/atomix
```

### Basic Setup

```jsx
import React from 'react';
import { Button, Card, Avatar } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';

function App() {
  return (
    <Card title="Welcome" text="Get started with Atomix">
      <Button label="Get Started" variant="primary" />
    </Card>
  );
}
```
```

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

### Setup Development Environment

Source: https://github.com/shohojdhara/atomix/blob/main/docs/getting-started/README.md

Commands for contributors to clone the repository, install dependencies, and start the development or Storybook server.

```bash
git clone https://github.com/shohojdhara/atomix.git
cd atomix
npm install
npm run dev
npm run storybook
```

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

### Zero-Configuration Setup Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/CONFIG_AUTOMATIC_LOADING.md

Demonstrates a zero-configuration setup for Atomix themes by creating an `atomix.config.ts` file and then using the `ThemeProvider` component without any explicit theme props.

```typescript
import { defineConfig } from '@shohojdhara/atomix/config';

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: { main: '#7AFFD7' },
      },
    },
  },
});
```

```tsx
import { ThemeProvider } from '@shohojdhara/atomix/theme';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
```

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

### Atomix Styles System - Quick Start

Source: https://github.com/shohojdhara/atomix/blob/main/docs/styles/README.md

Provides examples for basic usage, custom configuration with variable overrides, and selective imports of Atomix styles.

```APIDOC
## Quick Start

### Basic Usage

Import the complete Atomix styles:

```scss
@use '@shohojdhara/atomix/styles' as *;
```

### Custom Configuration

Override default variables:

```scss
@use '@shohojdhara/atomix/styles' with (
  $primary-6: #your-brand-color,
  $font-family-base: 'Your Font',
  $border-radius: 0.5rem
);
```

### Selective Imports

Import only the necessary modules:

```scss
@use '@shohojdhara/atomix/styles/01-settings' as *;
@use '@shohojdhara/atomix/styles/02-tools' as *;
@use '@shohojdhara/atomix/styles/06-components/components.button';
@use '@shohojdhara/atomix/styles/99-utilities/utilities.spacing';
```
```

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

### Automated Atomix Project Setup Script

Source: https://github.com/shohojdhara/atomix/blob/main/docs/CLI_PEER_DEPENDENCIES.md

A bash script to automate the installation of core and development dependencies, with an optional prompt for Storybook installation.

```bash
#!/bin/bash
echo "🚀 Setting up Atomix CLI dependencies..."
npm install react@^18.0.0 react-dom@^18.0.0 @phosphor-icons/react@2.1.10
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdom jest-axe sass typescript @types/react @types/react-dom
read -p "Install Storybook? (y/n): " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
  npm install --save-dev @storybook/react @storybook/addon-essentials @storybook/addon-a11y @storybook/react-vite
fi
echo "✅ Atomix dependencies installed successfully!"
```

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

### Basic React Usage

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/pagination.md

Example of how to use the Pagination component in a basic React setup.

```APIDOC
## Basic React Usage

### Description

This example demonstrates the fundamental implementation of the Pagination component in a React application, managing the current page state and handling page change events.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Request Body

N/A (Component Usage)

### Request Example

```jsx
import React, { useState } from 'react';
import { Pagination } from '@shohojdhara/atomix';

function BasicPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  const handlePageChange = (page) => {
    setCurrentPage(page);
    console.log('Page changed to:', page);
  };

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={handlePageChange}
    />
  );
}
```

### Response

N/A (Component Usage)
```

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

### AtomixLogo Basic React Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/atomix-logo.md

A simple React example demonstrating how to import and render the AtomixLogo component. This serves as a starting point for integrating the logo into a React application.

```jsx
import { AtomixLogo } from '@shohojdhara/atomix';

function BasicExample() {
  return <AtomixLogo />;
}
```

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

### Install and Import VideoPlayer

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/video-player.md

Demonstrates how to install the Atomix UI package using npm and import the VideoPlayer component along with its necessary CSS styles.

```bash
npm install @shohojdhara/atomix
```

```tsx
import { VideoPlayer } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';
```

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

### Install and Import PhotoViewer

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/photo-viewer.md

Instructions for installing the package via npm and importing the necessary component and CSS styles into a React project.

```bash
npm install @shohojdhara/atomix
```

```tsx
import { PhotoViewer } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';
```

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

### Quick Theme Creation with Atomix Helper

Source: https://github.com/shohojdhara/atomix/blob/main/docs/THEME_SYSTEM.md

Utilizes the `quickTheme` utility in Atomix to rapidly create a theme from brand colors. This is the fastest way to get started with theming.

```tsx
import { quickTheme, ThemeProvider } from '@shohojdhara/atomix/theme';

// Create a theme from just brand colors
const myTheme = quickTheme('My Brand', '#7AFFD7', '#FF5733');

function App() {
  return (
    <ThemeProvider defaultTheme={myTheme}>
      <YourApp />
    </ThemeProvider>
  );
}
```

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

### Basic Atomix React Setup

Source: https://github.com/shohojdhara/atomix/blob/main/docs/getting-started/quick-start.md

Demonstrates the basic setup for using Atomix components in a React application. It includes importing necessary components and the global CSS.

```jsx
import React from 'react';
import { Button, Card, Avatar } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';

function App() {
  return (
    <Card title="Welcome" text="Get started with Atomix">
      <Button label="Get Started" variant="primary" />
    </Card>
  );
}
```

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

### Installation

Source: https://github.com/shohojdhara/atomix/blob/main/docs/DEVELOPER_GUIDE.md

Instructions for installing the Atomix library using npm, yarn, or pnpm.

```APIDOC
## Installation

### Description
Instructions for installing the Atomix library using npm, yarn, or pnpm.

### Method
Package Manager Commands

### Endpoint
N/A

### Parameters
N/A

### Request Body
N/A

### Request Example
```bash
npm install @shohojdhara/atomix
# or
yarn add @shohojdhara/atomix
# or
pnpm add @shohojdhara/atomix
```

### Response
N/A
```

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

### Basic List Implementation in React

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/list.md

Demonstrates how to render a basic list using either child elements or the items prop. This is the simplest way to get started with the List component.

```jsx
import React from 'react';
import { List } from '@shohojdhara/atomix';

function BasicLists() {
  return (
    <div className="u-gap-4">
      <List>
        <span>First item</span>
        <span>Second item</span>
        <span>Third item</span>
      </List>
      <List items={['Item 1', 'Item 2', 'Item 3']} />
    </div>
  );
}
```

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

### Install and Import ColorModeToggle

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/color-mode-toggle.md

Instructions for installing the package via npm and importing the component along with its required CSS styles.

```bash
npm install @shohojdhara/atomix
```

```tsx
import { ColorModeToggle } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';
```

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

### Install and Import SectionIntro

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/section-intro.md

Instructions for installing the package via npm and importing the component along with its required styles.

```bash
npm install @shohojdhara/atomix
```

```tsx
import { SectionIntro } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';
```

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

### Start Development Server and Run Tests (Bash)

Source: https://github.com/shohojdhara/atomix/blob/main/docs/resources/contributing.md

Commands to start the development server and run automated tests for the Atomix project.

```bash
npm run dev
npm test
```

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

### Install Atomix Chart Library

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/chart.md

Instructions for installing the library via npm and importing the necessary components and styles into your project.

```bash
npm install @shohojdhara/atomix
```

```tsx
import { LineChart } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';
```

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

### Masonry Grid Examples

Source: https://github.com/shohojdhara/atomix/blob/main/src/layouts/MasonryGrid/README.md

Provides examples of customizing the Masonry Grid with different gap sizes and column configurations.

```APIDOC
## Masonry Grid Examples

### Description
This section provides practical examples of how to use the `MasonryGrid` component with various configurations, including custom gap sizes and column counts across different breakpoints.

### Method
Component Usage

### Endpoint
N/A (Component)

### Parameters
See 'Masonry Grid Component Usage' for detailed prop descriptions.

### Request Example
#### Basic Masonry Grid
```jsx
<MasonryGrid xs={1} sm={2} md={3} lg={4}>
  <MasonryGridItem>
    <div>Item 1</div>
  </MasonryGridItem>
  <MasonryGridItem>
    <div>Item 2</div>
  </MasonryGridItem>
  <MasonryGridItem>
    <div>Item 3</div>
  </MasonryGridItem>
</MasonryGrid>
```

#### Custom Gap
```jsx
<MasonryGrid xs={1} sm={2} md={3} lg={4} gap={24}>
  <MasonryGridItem>
    <div>Item 1</div>
  </MasonryGridItem>
  <MasonryGridItem>
    <div>Item 2</div>
  </MasonryGridItem>
</MasonryGrid>
```

#### Custom Column Configuration
```jsx
<MasonryGrid xs={1} sm={2} md={2} lg={3} xl={4} xxl={5}>
  <MasonryGridItem>
    <div>Item 1</div>
  </MasonryGridItem>
  <MasonryGridItem>
    <div>Item 2</div>
  </MasonryGridItem>
</MasonryGrid>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Popover Examples and Configurations

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/popover.md

Provides examples for different trigger types, delays, and positioning options available in the Popover component.

```jsx
function BasicPopover() {
  return (
    <div className="example-container">
      <Popover
        content={
          <div className="popover-content">
            <h4>Popover Title</h4>
            <p>This is some helpful information in a popover.</p>
          </div>
        }
        position="top"
      >
        <button className="trigger-button">
          Show Popover
        </button>
      </Popover>
    </div>
  );
}

function HoverPopover() {
  return (
    <div className="hover-examples">
      <Popover
        content="Quick info on hover"
        trigger="hover"
        position="top"
        delay={300}
      >
        <span className="info-text">
          Hover over me for more info
        </span>
      </Popover>
    </div>
  );
}

function PositionExamples() {
  const content = <div className="demo-content">Popover content</div>;

  return (
    <div className="position-demo">
      <div className="position-grid">
        <Popover content={content} position="top">
          <button>Top</button>
        </Popover>
        <Popover content={content} position="right">
          <button>Right</button>
        </Popover>
        <Popover content={content} position="bottom">
          <button>Bottom</button>
        </Popover>
        <Popover content={content} position="left">
          <button>Left</button>
        </Popover>
        <Popover content={content} position="auto">
          <button>Auto Position</button>
        </Popover>
      </div>
    </div>
  );
}
```

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

### E-commerce Navigation Example

Source: https://github.com/shohojdhara/atomix/blob/main/src/components/Navigation/SideMenu/SideMenu.README.md

A React example demonstrating how to use the SideMenu component to create an e-commerce navigation structure.

```APIDOC
## E-commerce Navigation

### Description
An example of implementing an e-commerce navigation menu using the SideMenu, SideMenuList, and SideMenuItem components in React.

### Method
None

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```tsx
<SideMenu title="Shop Categories">
  <SideMenuList>
    <SideMenuItem href="/electronics" icon={<Icon name="DeviceMobile" size="sm" />} active>
      Electronics
    </SideMenuItem>
    <SideMenuItem href="/clothing" icon={<Icon name="TShirt" size="sm" />}>
      Clothing
    </SideMenuItem>
    <SideMenuItem href="/home-garden" icon={<Icon name="House" size="sm" />}>
      Home & Garden
    </SideMenuItem>
  </SideMenuList>
  
  <SideMenuList>
    <SideMenuItem href="/account" icon={<Icon name="User" size="sm" />}>
      My Account
    </SideMenuItem>
    <SideMenuItem href="/orders" icon={<Icon name="Package" size="sm" />}>
      Order History
    </SideMenuItem>
    <SideMenuItem href="/wishlist" icon={<Icon name="Heart" size="sm" />}>
      Wishlist
    </SideMenuItem>
  </SideMenuList>
</SideMenu>
```

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Install and Use Atomix CLI

Source: https://github.com/shohojdhara/atomix/blob/main/src/lib/theme/devtools/README.md

Instructions for installing the Atomix package and executing various theme management commands such as validation, inspection, and comparison.

```bash
npm install @shohojdhara/atomix
atomix-theme validate
atomix-theme list
atomix-theme inspect --theme my-theme
atomix-theme compare --theme1 light --theme2 dark
atomix-theme export --theme my-theme --output theme.json
atomix-theme help
```

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

### Install Build Tool Dependencies

Source: https://github.com/shohojdhara/atomix/blob/main/docs/CLI_PEER_DEPENDENCIES.md

Commands to install necessary build tools including SCSS support, TypeScript definitions, and ESLint configurations.

```bash
npm install --save-dev sass
npm install --save-dev typescript @types/react @types/react-dom
npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

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

### Build Onboarding Flow with Icons

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/steps.md

Demonstrates an onboarding flow where steps are represented by icons, allowing users to navigate through setup tasks while tracking completion state.

```jsx
function OnboardingFlow() {
  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    { number: <Icon name="User" />, text: 'Profile Setup' },
    { number: <Icon name="Settings" />, text: 'Preferences' }
  ];

  return (
    <div className="onboarding-flow">
      <Steps 
        items={steps}
        activeIndex={activeStep}
        className="onboarding-progress"
      />
    </div>
  );
}
```

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

### Basic React Setup with Atomix Components

Source: https://context7.com/shohojdhara/atomix/llms.txt

Demonstrates how to set up a basic React application using Atomix components. It includes importing necessary components and styles, and rendering a sample Card with a Button and Badge within a ThemeProvider.

```tsx
import { Button, Card, Badge, ThemeProvider } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Card variant="elevated">
        <Card.Header>
          <h2>Welcome to Atomix</h2>
          <Badge variant="primary">New</Badge>
        </Card.Header>
        <Card.Body>
          <p>A modern design system for building amazing interfaces.</p>
          <Button variant="primary" onClick={() => console.log('Clicked!')}>
            Get Started
          </Button>
        </Card.Body>
      </Card>
    </ThemeProvider>
  );
}
```

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

### Atomix Global Configuration Setup

Source: https://github.com/shohojdhara/atomix/blob/main/docs/api/javascript.md

Configures Atomix UI globally by setting properties like prefix, theme, breakpoints, and animations. It also provides functions to get the current configuration. This setup affects the behavior and styling of all Atomix components.

```javascript
// Configure Atomix globally
Atomix.configure({
  prefix: 'atomix',
  theme: 'light',
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1440
  },
  animations: {
    duration: 300,
    easing: 'ease-in-out'
  }
});

// Get current configuration
const config = Atomix.getConfig();
```

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

### Basic React Theme Setup with Atomix

Source: https://github.com/shohojdhara/atomix/blob/main/docs/THEME_SYSTEM.md

Demonstrates setting up a basic theme in a React application using Atomix. It includes creating a theme with custom colors and applying it via ThemeProvider. It also shows how to use the useTheme hook to access and switch themes within components.

```tsx
import { ThemeProvider, useTheme, createTheme } from '@shohojdhara/atomix/theme';

// Create a theme
const myTheme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  return (
    <ThemeProvider defaultTheme={myTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

// Use theme in components
function MyComponent() {
  const { theme, setTheme, availableThemes } = useTheme();
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('dark-theme')}> 
        Switch Theme
      </button>
    </div>
  );
}
```

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

### Configuring Nav Alignment Options

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/nav.md

Examples of how to use the alignment prop to position navigation items at the start, center, or end of the container.

```jsx
function AlignmentExamples() {
  return (
    <div className="u-gap-6">
      <Nav alignment="start">
        <NavItem href="/">Home</NavItem>
        <NavItem href="/products">Products</NavItem>
      </Nav>
      <Nav alignment="center">
        <NavItem href="/">Home</NavItem>
        <NavItem href="/products">Products</NavItem>
      </Nav>
      <Nav alignment="end">
        <NavItem href="/">Home</NavItem>
        <NavItem href="/products">Products</NavItem>
      </Nav>
    </div>
  );
}
```

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

### Navigation Example (JSX)

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/index.md

Demonstrates how to build a navigation bar using the Navbar, Button, and Badge components, including a notification badge.

```jsx
import { Navbar, Button, Badge } from '@shohojdhara/atomix';

function MainNavigation() {
  return (
    <Navbar>
      <Navbar.Brand>My App</Navbar.Brand>
      <Navbar.Menu>
        <Navbar.Item href="/dashboard">Dashboard</Navbar.Item>
        <Navbar.Item href="/messages">
          Messages
          <Badge label="3" variant="error" size="sm" />
        </Navbar.Item>
      </Navbar.Menu>
    </Navbar>
  );
}
```

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

### Best Practices for Accordion Content

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/accordion.md

Examples of well-structured accordion content versus poorly structured content to guide developers on maintaining usability.

```jsx
// Good: Clear structure
<Accordion title="Account Security Settings">
  <div className="u-gap-4">
    <span>Two-factor authentication</span>
    <Button label="Change Password" variant="outline-primary" />
  </div>
</Accordion>

// Bad: Too much content
<Accordion title="Everything">
  <div>{/* Hundreds of lines of content */}</div>
</Accordion>
```

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

### Create Astro Project with Minimal Template

Source: https://github.com/shohojdhara/atomix/blob/main/examples/astro-example/README.md

This command initializes a new Astro project using the official minimal starter template. It requires Node.js and npm to be installed. The command prompts for project name and installs necessary dependencies.

```sh
npm create astro@latest -- --template minimal
```

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

### Implement ThemeProvider with Config-First Approach

Source: https://github.com/shohojdhara/atomix/blob/main/docs/CONFIG_AUTOMATIC_LOADING.md

Shows the recommended setup for new users by creating an atomix.config.ts file and using the ThemeProvider component without explicit props.

```tsx
// 1. Create atomix.config.ts (required)
// 2. Use ThemeProvider without props
<ThemeProvider>
  <App />
</ThemeProvider>
```

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

### AtomixGlass Migration Guide: Boolean to Auto-Detection

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/atomix-glass-overlight-audit.md

Provides a clear example of migrating from the older boolean-based control of the overLight prop to the more flexible 'auto' detection mode in AtomixGlass.

```tsx
Before:
<AtomixGlass overLight={true}>

After:
<AtomixGlass overLight="auto">
```

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

### Atomix Avatar Component Examples

Source: https://github.com/shohojdhara/atomix/blob/main/docs/getting-started/quick-start.md

Demonstrates various ways to use the Atomix Avatar component, including basic setup, fallback with initials, and grouping multiple avatars.

```jsx
// Basic avatar
<Avatar src="/user.jpg" alt="User" circle />

// With fallback
<Avatar src="/broken.jpg" initials="JD" circle />

// Avatar group
<AvatarGroup max={3}>
  <Avatar src="/user1.jpg" circle />
  <Avatar src="/user2.jpg" circle />
  <Avatar src="/user3.jpg" circle />
  <Avatar src="/user4.jpg" circle />
</AvatarGroup>
```

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

### Basic Masonry Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/layouts/index.md

Illustrates the usage of MasonryGrid and MasonryGridItem for creating Pinterest-style layouts.

```APIDOC
## Basic Masonry Example

### Description
Illustrates the usage of MasonryGrid and MasonryGridItem for creating Pinterest-style layouts.

### Method
`JSX`

### Endpoint
`N/A`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
import { MasonryGrid, MasonryGridItem } from '@shohojdhara/atomix';

<MasonryGrid xs={1} sm={2} md={3} lg={4}>
  <MasonryGridItem>Item 1</MasonryGridItem>
  <MasonryGridItem>Item 2</MasonryGridItem>
</MasonryGrid>
```

### Response
No specific response, this is a client-side rendering example.
```

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

### Complete React ThemeProvider Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/THEME_SYSTEM.md

A comprehensive example of setting up ThemeProvider in a React application, including creating custom themes, using useTheme hook for theme switching, and integrating ThemeErrorBoundary.

```tsx
import React from 'react';
import {
  ThemeProvider,
  ThemeErrorBoundary,
  useTheme,
  createTheme,
} from '@shohojdhara/atomix/theme';

const lightTheme = createTheme({
  name: 'Light',
  palette: {
    primary: { main: '#3b82f6' },
    background: { default: '#ffffff' },
  },
});

const darkTheme = createTheme({
  name: 'Dark',
  palette: {
    primary: { main: '#60a5fa' },
    background: { default: '#111827' },
  },
});

function ThemeSelector() {
  const { theme, setTheme } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value={lightTheme}>Light</option>
      <option value={darkTheme}>Dark</option>
    </select>
  );
}

function App() {
  return (
    <ThemeErrorBoundary
      onError={(error, errorInfo) => {
        console.error('Theme error:', error);
      }}
    >
      <ThemeProvider
        defaultTheme={lightTheme}
        enablePersistence={true}
      >
        <ThemeSelector />
        <YourApp />
      </ThemeProvider>
    </ThemeErrorBoundary>
  );
}
```

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

### ButtonGroup with Buttons and Icons (React)

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/button-group.md

An example of using ButtonGroup with buttons that include icons. It shows how to specify the icon name and its position ('start' or 'end') relative to the button label.

```jsx
<ButtonGroup>
  <Button 
    label="Previous" 
    iconName="ArrowLeft" 
    iconPosition="start" 
  />
  <Button 
    label="Next" 
    iconName="ArrowRight" 
    iconPosition="end" 
  />
</ButtonGroup>
```

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

### Atomix Form Components Examples

Source: https://github.com/shohojdhara/atomix/blob/main/docs/getting-started/quick-start.md

Demonstrates the usage of Atomix form components like Form, FormGroup, Input, Select, and Checkbox, including basic structure and validation setup.

```jsx
// Form with validation
<Form onSubmit={handleSubmit}>
  <FormGroup label="Email" required invalid={!!errors.email}>
    <Input 
      type="email" 
      value={email}
      onChange={setEmail}
      invalid={!!errors.email}
    />
  </FormGroup>
  
  <FormGroup label="Country">
    <Select 
      options={countryOptions}
      value={country}
      onChange={setCountry}
    />
  </FormGroup>
  
  <Checkbox label="Subscribe to newsletter" />
  
  <Button type="submit" label="Submit" variant="primary" />
</Form>
```

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

### Run Configuration Sync Scripts

Source: https://github.com/shohojdhara/atomix/blob/main/docs/THEME_SYSTEM.md

Command-line scripts to synchronize theme configurations, generate design tokens, and validate the current setup.

```bash
npm run sync:config
npm run sync:tokens
npm run validate:config
```

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

### Atomix Countdown Do's and Don'ts

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/countdown.md

This guide outlines best practices for using the Atomix Countdown component. It provides 'Do' examples for clear context, appropriate time unit usage, and completion handling, and 'Don't' examples for avoiding common pitfalls like missing completion states or anxiety-inducing styling.

```jsx
// Good: Clear context and appropriate handling
<div className="event-countdown">
  <h2>Product Launch Countdown</h2>
  <p>Our new product launches in:</p>
  <Countdown 
    target={launchDate}
    focused
    onComplete={() => {
      setShowLaunchModal(true);
      trackEvent('product_launch_reached');
    }}
  />
</div>

// Good: Appropriate time units for context
<Countdown 
  target={shortTermEvent}
  show={['minutes', 'seconds']} // For events less than an hour
/>

<Countdown 
  target={longTermEvent}
  show={['days', 'hours']} // For events weeks/months away
/>

// Bad: No completion handling
<Countdown target={date} /> {/* What happens when it reaches zero? */}

// Bad: Too many units for a short countdown
<Countdown 
  target={in5Minutes}
  show={['days', 'hours', 'minutes', 'seconds']} // Days and hours will be 0
/>

// Bad: Anxiety-inducing styling
<Countdown 
  target={deadline}
  className="countdown-panic-mode" // Don't stress users unnecessarily
/>
```

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

### Basic Setup with Rollup

Source: https://github.com/shohojdhara/atomix/blob/main/build-tools/EXAMPLES.md

Demonstrates the basic configuration of the Atomix Rollup plugin.

```APIDOC
## Basic Setup with Rollup

### Description
This section shows how to integrate the Atomix plugin into your Rollup build process with basic configuration options.

### Method
N/A (Configuration File)

### Endpoint
N/A

### Parameters
#### Request Body
- **atomixPlugin** (function) - Required - The Atomix plugin function.
  - **theme** (string) - Optional - The theme to use (e.g., 'light').
  - **optimize** (boolean) - Optional - Whether to optimize assets. Defaults to false.
  - **verbose** (boolean) - Optional - Whether to enable verbose logging. Defaults to false.

### Request Example
```js
// rollup.config.js
import atomixPlugin from '@shohojdhara/atomix/build-tools/rollup-plugin.js';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    atomixPlugin({
      theme: 'light',
      optimize: true,
      verbose: false
    })
  ]
};
```

### Response
N/A (Configuration applies to build process)
```

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

### Theme Management with React

Source: https://context7.com/shohojdhara/atomix/llms.txt

Demonstrates creating custom themes using createTheme and quickTheme, and applying them via the ThemeProvider. It includes a functional component to switch themes at runtime with persistence support.

```tsx
import { ThemeProvider, useTheme, createTheme, quickTheme } from '@shohojdhara/atomix/theme';

const lightTheme = createTheme({
  name: 'Light',
  palette: {
    primary: { main: '#3b82f6' },
    secondary: { main: '#10b981' },
    background: { default: '#ffffff' },
    text: { primary: '#111827' }
  },
  typography: {
    fontFamily: 'Inter, sans-serif',
    fontSize: 16
  }
});

const darkTheme = createTheme({
  name: 'Dark',
  palette: {
    primary: { main: '#60a5fa' },
    background: { default: '#111827' },
    text: { primary: '#f9fafb' }
  }
});

const brandTheme = quickTheme('Brand', '#7AFFD7', '#FF5733');

function ThemeSwitcher() {
  const { theme, setTheme, availableThemes } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {availableThemes.map(t => (
        <option key={t.class} value={t.class}>{t.name}</option>
      ))}
    </select>
  );
}

function App() {
  return (
    <ThemeProvider
      defaultTheme={lightTheme}
      enablePersistence={true}
      storageKey="atomix-theme"
      onThemeChange={(theme) => console.log('Theme changed:', theme)}
    >
      <ThemeSwitcher />
      <YourApp />
    </ThemeProvider>
  );
}
```

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

### Create Help Documentation Layout

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/accordion.md

Structures help center content using nested Accordion components. It organizes information into sections like Getting Started and Troubleshooting for better readability.

```jsx
function HelpDocumentation() {
  return (
    <div className="u-mw-100 u-mx-auto">
      <h1 className="u-text-1 u-font-bold u-mb-8">Help Center</h1>
      <div className="u-gap-6">
        <section>
          <h2 className="u-text-xl u-font-semibold u-mb-4">Getting Started</h2>
          <div className="u-gap-2">
            <Accordion title="How to create an account">
              <div className="u-prose">
                <p>Creating an account is simple:</p>
                <ol>
                  <li>Click the "Sign Up" button</li>
                  <li>Fill in your details</li>
                  <li>Verify your email</li>
                  <li>Start using the platform</li>
                </ol>
              </div>
            </Accordion>
            <Accordion title="Setting up your profile">
              <p>Complete your profile to get the most out of our platform...</p>
            </Accordion>
          </div>
        </section>
        <section>
          <h2 className="u-text-xl u-font-semibold u-mb-4">Troubleshooting</h2>
          <div className="u-gap-2">
            <Accordion title="I can't log in">
              <p>If you're having trouble logging in, try these steps...</p>
            </Accordion>
            <Accordion title="My data isn't syncing">
              <p>Data sync issues can be resolved by...</p>
            </Accordion>
          </div>
        </section>
      </div>
    </div>
  );
}
```

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

### React Router Integration Example for Atomix Logo

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/atomix-logo.md

Demonstrates how to integrate the AtomixLogo component within a React Router setup, making it a clickable link to the home page. It uses the `Link` component from `react-router-dom`.

```jsx
import { Link } from 'react-router-dom';

function NavigationLogo() {
  return (
    <Link to="/" className="logo-link">
      <AtomixLogo width={32} height={32} />
    </Link>
  );
}
```

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

### Basic Grid Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/layouts/index.md

Demonstrates how to use the Container, Grid, and GridCol components for a basic responsive grid layout.

```APIDOC
## Basic Grid Example

### Description
Demonstrates how to use the Container, Grid, and GridCol components for a basic responsive grid layout.

### Method
`JSX`

### Endpoint
`N/A`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
import { Container, Grid, GridCol } from '@shohojdhara/atomix';

<Container>
  <Grid>
    <GridCol xs={12} md={6}>Content</GridCol>
    <GridCol xs={12} md={6}>Content</GridCol>
  </Grid>
</Container>
```

### Response
No specific response, this is a client-side rendering example.
```

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

### Basic React Setup

Source: https://context7.com/shohojdhara/atomix/llms.txt

Set up Atomix in a React application by importing components and styles.

```APIDOC
## Basic React Setup

Import components and styles to start using Atomix in your React application.

```tsx
import { Button, Card, Badge, ThemeProvider } from '@shohojdhara/atomix';
import '@shohojdhara/atomix/css';

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Card variant="elevated">
        <Card.Header>
          <h2>Welcome to Atomix</h2>
          <Badge variant="primary">New</Badge>
        </Card.Header>
        <Card.Body>
          <p>A modern design system for building amazing interfaces.</p>
          <Button variant="primary" onClick={() => console.log('Clicked!')}>
            Get Started
          </Button>
        </Card.Body>
      </Card>
    </ThemeProvider>
  );
}
```
```

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

### HTML Icon Initialization with Data Attributes

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/icon.md

Provides examples of how to define and configure Atomix Icon components directly within HTML using data attributes. This allows for declarative icon setup without JavaScript.

```html
<!-- Basic icon -->
<span 
  class="c-icon c-icon--md"
  data-atomix="icon"
  data-name="Heart"
  data-size="md"
  data-weight="regular">
</span>

<!-- Icon with custom properties -->
<span 
  class="c-icon c-icon--lg"
  data-atomix="icon"
  data-name="Star"
  data-size="lg"
  data-weight="fill"
  data-color="#f59e0b"
  aria-label="Favorite">
</span>
```

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

### Migration Guide: Replacing Image Tag with Atomix Logo

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/atomix-logo.md

Provides a before-and-after example for migrating from a standard `<img>` tag displaying a logo to using the `AtomixLogo` component. It highlights the change in implementation and the addition of an `aria-label` for accessibility.

```jsx
// Before
<img src="/logo.svg" alt="Logo" width="32" height="32" />

// After
<AtomixLogo width={32} height={32} aria-label="Atomix logo" />
```

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

### Initialize Atomix Components

Source: https://github.com/shohojdhara/atomix/blob/main/docs/api/javascript.md

Demonstrates how to initialize all components, a subset of components, or components with custom selectors using the Atomix.init() method.

```javascript
// Initialize all components
Atomix.init();

// Initialize specific components
Atomix.init(['Button', 'Modal', 'Dropdown']);

// Initialize with custom selector
Atomix.init({
  components: ['Button'],
  selector: '.my-custom-selector'
});
```

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

### Astro Project Commands

Source: https://github.com/shohojdhara/atomix/blob/main/examples/astro-example/README.md

A list of common commands for managing an Astro project. These commands are executed from the project's root directory using npm. They cover dependency installation, starting the development server, building for production, and previewing the build.

```sh
npm install
npm run dev
npm run build
npm run preview
npm run astro ...
npm run astro -- --help
```

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

### Implement Registration Wizard with Steps

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/steps.md

Shows a basic implementation of a multi-step registration form using the Steps component to track user progress through account creation.

```jsx
function RegistrationWizard() {
  const [currentStep, setCurrentStep] = useState(0);
  const steps = [
    { number: 1, text: 'Account' },
    { number: 2, text: 'Profile' },
    { number: 3, text: 'Preferences' },
    { number: 4, text: 'Complete' }
  ];

  return (
    <div className="registration-wizard">
      <Steps 
        items={steps} 
        activeIndex={currentStep}
        className="registration-steps"
      />
    </div>
  );
}
```

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

### Step Wizard Example (React)

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/steps.md

A comprehensive React example demonstrating a step wizard using the Steps component, including navigation buttons and conditional rendering of content based on the active step.

```jsx
import { Steps } from '@shohojdhara/atomix';
import { useState } from 'react';

// Assume these are defined elsewhere
// const PersonalInfoForm = () => <div>Personal Info Form</div>;
// const AddressForm = () => <div>Address Form</div>;
// const PaymentForm = () => <div>Payment Form</div>;
// const ReviewForm = () => <div>Review Form</div>;

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

  const steps = [
    { number: 1, text: 'Personal Info' },
    { number: 2, text: 'Address' },
    { number: 3, text: 'Payment' },
    { number: 4, text: 'Review' }
  ];

  const nextStep = () => {
    setActiveStep(prev => Math.min(prev + 1, steps.length - 1));
  };

  const prevStep = () => {
    setActiveStep(prev => Math.max(prev - 1, 0));
  };

  return (
    <div className="step-wizard">
      <Steps
        items={steps}
        activeIndex={activeStep}
        onStepChange={setActiveStep}
      />
      
      <div className="step-content">
        {activeStep === 0 && <PersonalInfoForm />}
        {activeStep === 1 && <AddressForm />}
        {activeStep === 2 && <PaymentForm />}
        {activeStep === 3 && <ReviewForm />}
      </div>

      <div className="step-navigation">
        <button 
          onClick={prevStep}
          disabled={activeStep === 0}
          className="btn btn--secondary"
        >
          Previous
        </button>
        <button 
          onClick={nextStep}
          disabled={activeStep === steps.length - 1}
          className="btn btn--primary"
        >
          {activeStep === steps.length - 1 ? 'Complete' : 'Next'}
        </button>
      </div>
    </div>
  );
}
```

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

### Installation

Source: https://github.com/shohojdhara/atomix/blob/main/docs/layouts/index.md

Install the Atomix package using npm.

```APIDOC
## Installation

### Description
Install the Atomix package using npm.

### Method
`npm`

### Endpoint
`install @shohojdhara/atomix`

### Request Example
```bash
npm install @shohojdhara/atomix
```

### Response
No specific response, installation confirmation is typically shown in the terminal.
```

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

### FAQ Section Example

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/accordion.md

Illustrates how to use the Accordion component to build an FAQ section by dynamically rendering accordions from a data array.

```APIDOC
## FAQ Section

### Description

This example demonstrates creating a dynamic FAQ section using the Accordion component, mapping an array of questions and answers to individual accordions.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```jsx
function FAQSection() {
  const faqs = [
    {
      id: 1,
      question: "What browsers are supported?",
      answer: "Atomix supports all modern browsers including Chrome 60+, Firefox 60+, Safari 12+, and Edge 79+."
    },
    {
      id: 2,
      question: "Can I customize the theme?",
      answer: "Absolutely! Atomix provides a flexible theme system using CSS custom properties that allows you to customize colors, spacing, and other design tokens."
    },
    {
      id: 3,
      question: "Is TypeScript supported?",
      answer: "Yes, Atomix is built with TypeScript and includes comprehensive type definitions for all components and their props."
    },
    {
      id: 4,
      question: "How do I report bugs?",
      answer: "You can report bugs by creating an issue on our GitHub repository. Please include as much detail as possible to help us reproduce and fix the issue."
    }
  ];

  return (
    <div className="u-mw-100 u-mx-auto">
      <h2 className="u-text-2 u-font-bold u-mb-6">Frequently Asked Questions</h2>
      <div className="u-gap-2">
        {faqs.map((faq) => (
          <Accordion key={faq.id} title={faq.question}>
            <p>{faq.answer}</p>
          </Accordion>
        ))}
      </div>
    </div>
  );
}
```

### Response

#### Success Response (200)

N/A (Component Rendering)

#### Response Example

N/A
```

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

### Getting Help

Source: https://github.com/shohojdhara/atomix/blob/main/docs/components/overview.md

Resources for getting help and further information.

```APIDOC
## Getting Help

- Check component stories in **Storybook** for interactive examples.
- Review the **implementation guide** for setup instructions.
- See the **theme system guide** for customization options.
```

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

### Initialize Atomix Migration Workflow

Source: https://github.com/shohojdhara/atomix/blob/main/docs/CLI_MIGRATION_GUIDE.md

Commands to prepare the environment, install the Atomix CLI package, and execute a dry-run migration analysis to identify necessary changes.

```bash
git add .
git commit -m "Before Atomix migration"
npm install @shohojdhara/atomix
npx atomix migrate <framework> --dry-run
```