### React Pagination Component Examples

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Illustrates the use of the Pagination component for navigating through pages of content. It includes basic usage, custom styling, and an example demonstrating URL synchronization with a router. Dependencies include React and @sima-land/ui-nucleons/pagination.

```tsx
import { Pagination } from '@sima-land/ui-nucleons/pagination';
import { useState } from 'react';

function PaginationExample() {
  const [currentPage, setCurrentPage] = useState(1);
  const [items, setItems] = useState([]);
  const totalPages = 25;
  const itemsPerPage = 10;

  const handlePageChange = async (event, button) => {
    event.preventDefault();
    const newPage = button.value;

    setCurrentPage(newPage);

    // Fetch data for the new page
    try {
      const response = await fetch(`/api/items?page=${newPage}&limit=${itemsPerPage}`);
      const data = await response.json();
      setItems(data.items);

      // Scroll to top
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (error) {
      console.error('Failed to fetch page:', error);
    }
  };

  return (
    <div>
      <div style={{ minHeight: '500px' }}>
        {items.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>

      {/* Basic pagination */}
      <Pagination
        current={currentPage}
        total={totalPages}
        onPageChange={handlePageChange}
      />

      {/* Custom styled pagination */}
      <Pagination
        current={currentPage}
        total={totalPages}
        onPageChange={handlePageChange}
        className="custom-pagination"
        style={{
          display: 'flex',
          justifyContent: 'center',
          marginTop: '32px',
          gap: '8px',
        }}
      />
    </div>
  );
}

// Example with URL sync
function PaginationWithRouter() {
  const searchParams = new URLSearchParams(window.location.search);
  const initialPage = parseInt(searchParams.get('page') || '1', 10);
  const [currentPage, setCurrentPage] = useState(initialPage);

  const handlePageChange = (event, button) => {
    event.preventDefault();
    const newPage = button.value;

    setCurrentPage(newPage);

    // Update URL
    const url = new URL(window.location.href);
    url.searchParams.set('page', newPage.toString());
    window.history.pushState({}, '', url);
  };

  return (
    <Pagination
      current={currentPage}
      total={50}
      onPageChange={handlePageChange}
    />
  );
}

```

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

### Install UI-Nucleons via npm or yarn

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Instructions for installing the UI-Nucleons package using either npm or yarn package managers. This is the first step to integrate the component library into your project.

```bash
npm install @sima-land/ui-nucleons
# or
yarn add @sima-land/ui-nucleons
```

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

### React Select Component Example

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Demonstrates the usage of the Select component for creating dropdown menus. It supports controlled and uncontrolled modes, custom opener and menu rendering, and integrates with other UI elements. Dependencies include React and @sima-land/ui-nucleons/select.

```tsx
import { Select } from '@sima-land/ui-nucleons/select';
import { SelectFieldBlock, SelectMenu, SelectOption } from '@sima-land/ui-nucleons/select';
import { useState } from 'react';

interface Option {
  value: string;
  label: string;
}

function SelectExample() {
  const [value, setValue] = useState('');

  const countries: Option[] = [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
    { value: 'au', label: 'Australia' },
    { value: 'de', label: 'Germany' },
  ];

  return (
    <div>
      {/* Controlled select */}
      <Select
        value={value}
        onValueChange={(newValue) => {
          setValue(newValue);
          console.log('Selected:', newValue);
        }}
        opener={
          <SelectFieldBlock
            label="Country"
            placeholder="Select a country"
          />
        }
        menu={
          <SelectMenu>
            {countries.map((country) => (
              <SelectOption
                key={country.value}
                value={country.value}
              >
                {country.label}
              </SelectOption>
            ))}
          </SelectMenu>
        }
      />

      {/* Uncontrolled select with default value */}
      <Select
        defaultValue="us"
        onValueChange={(newValue) => {
          console.log('Changed to:', newValue);
        }}
      />

      {/* Custom styled select */}
      <Select
        value={value}
        onValueChange={setValue}
        opener={
          <SelectFieldBlock
            label="Priority"
            placeholder="Choose priority"
            style={{ width: '300px' }}
          />
        }
        menu={
          <SelectMenu style={{ maxHeight: '200px' }}>
            <SelectOption value="low">Low Priority</SelectOption>
            <SelectOption value="medium">Medium Priority</SelectOption>
            <SelectOption value="high">High Priority</SelectOption>
            <SelectOption value="urgent">Urgent</SelectOption>
          </SelectMenu>
        }
      />
    </div>
  );
}

```

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

### React Button Component Examples

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Demonstrates various use cases for the UI-Nucleons Button component, including primary, secondary, info, link appearances, different sizes, icon integration, loading states, and custom styling via CSS variables.

```tsx
import { Button } from '@sima-land/ui-nucleons/button';
import HomeSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Home';
import { useState } from 'react';

function ButtonExamples() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    try {
      await fetch('/api/submit', { method: 'POST' });
    } catch (error) {
      console.error('Submit failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {/* Primary button with loading state */}
      <Button
        viewType="primary"
        size="m"
        loading={loading}
        onClick={handleSubmit}
        disabled={loading}
      >
        Submit Form
      </Button>

      {/* Button with icon */}
      <Button
        viewType="secondary"
        size="s"
        icon={HomeSVG}
        iconPosition="start"
      >
        Go Home
      </Button>

      {/* Icon-only button */}
      <Button
        viewType="info"
        size="xs"
        icon={HomeSVG}
        aria-label="Home"
      />

      {/* Button as link */}
      <Button
        appearance="link"
        viewType="success"
        href="/dashboard"
      >
        Dashboard
      </Button>

      {/* Custom styled button */}
      <Button
        viewType="unset"
        style={{
          '--button-color': '#fff',
          '--button-background': '#ff6b35',
          '--button-hover-background': '#ff5520',
        }}
      >
        Custom Colors
      </Button>
    </div>
  );
}

```

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

### Webpack Configuration for CSS Modules and Assets

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Example Webpack configuration to handle CSS Modules, SCSS files, and image assets required by UI-Nucleons. Ensures proper module resolution and asset loading for styled components and responsive images.

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: /\.(module|m)\.(css|scss)$/,
                localIdentName: '[name]__[local]--[hash:hex:3]',
              },
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(apng|avif|gif|jpg|jpeg|png|webp)$/,
        type: 'asset/resource',
      },
    ],
  },
};
```

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

### Menu Popup with Icon Button

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Illustrates creating a menu-style popup using the Popup component, triggered by an icon button. This example shows how to render a list of menu items within the popup and handle their actions. Dependencies include '@sima-land/ui-nucleons/popup' and '@sima-land/ui-nucleons/button'.

```tsx
// Menu popup example
function MenuPopup() {
  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  const menuItems = [
    { id: 1, label: 'Edit', action: () => console.log('Edit') },
    { id: 2, label: 'Duplicate', action: () => console.log('Duplicate') },
    { id: 3, label: 'Delete', action: () => console.log('Delete') },
  ];

  return (
    <div>
      <Button
        ref={buttonRef}
        onClick={() => setAnchorElement(buttonRef.current)}
        icon={MoreSVG} // Assuming MoreSVG is imported elsewhere
      />

      <Popup
        showFor={anchorElement}
        placement="bottom-end"
        offset={4}
        onDismiss={() => setAnchorElement(null)}
        withCloseButton={false}
      >
        <div style={{
          minWidth: '150px',
          padding: '8px 0',
          background: 'white',
          borderRadius: '4px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        }}>
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => {
                item.action();
                setAnchorElement(null);
              }}
              style={{
                width: '100%',
                padding: '12px 16px',
                border: 'none',
                background: 'transparent',
                textAlign: 'left',
                cursor: 'pointer',
              }}
            >
              {item.label}
            </button>
          ))}
        </div>
      </Popup>
    </div>
  );
}

```

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

### Basic Modal Usage with UI Nucleons

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Demonstrates how to implement a basic modal dialog using the Modal and ModalBody components from '@sima-land/ui-nucleons/modal'. Includes state management for opening/closing the modal and basic content structure. Dependencies: '@sima-land/ui-nucleons/modal', '@sima-land/ui-nucleons/button'.

```tsx
import { Modal, ModalBody } from '@sima-land/ui-nucleons/modal';
import { Button } from '@sima-land/ui-nucleons/button';
import { useState } from 'react';

function ModalExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Open Modal
      </Button>

      {open && (
        <Modal
          size="m"
          rounds="m"
          onClose={() => setOpen(false)}
          overlayProps={{
            withScrollDisable: true,
          }}
        >
          <div style={{ padding: '24px' }}>
            <h2>Confirm Action</h2>
            <ModalBody
              withScrollDisable
              style={{ maxHeight: '400px' }}
            >
              <p>Are you sure you want to proceed with this action?</p>
              <p>This will permanently delete the selected items.</p>
              <div style={{ marginTop: '20px' }}>
                <Button
                  viewType="primary"
                  onClick={() => {
                    console.log('Confirmed');
                    setOpen(false);
                  }}
                >
                  Confirm
                </Button>
                <Button
                  viewType="secondary"
                  onClick={() => setOpen(false)}
                  style={{ marginLeft: '12px' }}
                >
                  Cancel
                </Button>
              </div>
            </ModalBody>
          </div>
        </Modal>
      )}
    </>
  );
}

```

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

### Basic Popup with Button Trigger

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Demonstrates a basic implementation of the Popup component triggered by a button click. It shows how to manage the anchor element and dismiss the popup. Dependencies include '@sima-land/ui-nucleons/popup' and '@sima-land/ui-nucleons/button'.

```tsx
import { Popup } from '@sima-land/ui-nucleons/popup';
import { Button } from '@sima-land/ui-nucleons/button';
import { useState, useRef } from 'react';

function PopupExample() {
  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <div>
      {/* Basic popup */}
      <Button
        ref={buttonRef}
        onClick={() => setAnchorElement(buttonRef.current)}
      >
        Open Popup
      </Button>

      <Popup
        showFor={anchorElement}
        placement="bottom-start"
        offset={8}
        onDismiss={() => setAnchorElement(null)}
        withCloseButton={true}
      >
        <div style={{ padding: '16px', minWidth: '200px' }}>
          <h3>Popup Content</h3>
          <p>This is a floating popup element.</p>
          <Button
            size="s"
            onClick={() => {
              console.log('Action clicked');
              setAnchorElement(null);
            }}
          >
            Action
          </Button>
        </div>
      </Popup>
    </div>
  );
}

```

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

### Fullscreen Modal with UI Nucleons

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Illustrates the usage of the Modal component for a fullscreen view using the 'fullscreen' size prop. Shows how to manage content within the fullscreen modal, including header and scrollable body. Dependencies: '@sima-land/ui-nucleons/modal', '@sima-land/ui-nucleons/button'.

```tsx
// Fullscreen modal example
function FullscreenModalExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Open Fullscreen
      </Button>

      {open && (
        <Modal
          size="fullscreen"
          onClose={() => setOpen(false)}
          style={{
            '--modal-overlay-padding': '0',
          }}
        >
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
            <header style={{ padding: '20px', borderBottom: '1px solid #e0e0e0' }}>
              <h1>Fullscreen Content</h1>
            </header>
            <ModalBody style={{ flex: 1 }}>
              <p>This modal takes up the entire screen</p>
            </ModalBody>
          </div>
        </Modal>
      )}
    </>
  );
}

```

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

### Basic Carousel with Infinite Scroll

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Demonstrates a basic carousel implementation with infinite scrolling enabled. It takes an array of products, displays them with custom rendering, and allows navigation through an index. The controls are automatically shown based on content overflow.

```tsx
import { Carousel } from '@sima-land/ui-nucleons/carousel';
import { ArrowButton } from '@sima-land/ui-nucleons/arrow-button';
import { useState } from 'react';

interface Product {
  id: number;
  name: string;
  image: string;
  price: number;
}

function CarouselExample() {
  const products: Product[] = [
    { id: 1, name: 'Product 1', image: '/img1.jpg', price: 1999 },
    { id: 2, name: 'Product 2', image: '/img2.jpg', price: 2499 },
    { id: 3, name: 'Product 3', image: '/img3.jpg', price: 1799 },
    { id: 4, name: 'Product 4', image: '/img4.jpg', price: 2999 },
    { id: 5, name: 'Product 5', image: '/img5.jpg', price: 1599 },
  ];

  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <div style={{ width: '800px', margin: '0 auto' }}>
      {/* Basic carousel with infinite scroll */}
      <Carousel
        items={products}
        infinite={true}
        step={1}
        targetIndex={currentIndex}
        onChangeTargetIndex={setCurrentIndex}
        renderItem={(product: Product, index) => (
          <div
            key={product.id}
            style={{ 
              minWidth: '250px',
              padding: '16px',
              border: '1px solid #e0e0e0',
              borderRadius: '8px',
              marginRight: '16px',
            }}
          >
            <img
              src={product.image}
              alt={product.name}
              style={{ width: '100%', height: '200px', objectFit: 'cover' }}
            />
            <h3>{product.name}</h3>
            <p>${product.price}</p>
          </div>
        )}
        withControls="auto"
        draggable="auto"
      />

      {/* Carousel with autoplay */}
      <Carousel
        items={products}
        autoplay={true}
        autoplayTimeout={3000}
        autoplayHoverPause={true}
        infinite={true}
        renderItem={(product: Product) => (
          <div style={{ minWidth: '300px', padding: '20px' }}>
            <img src={product.image} alt={product.name} />
          </div>
        )}
        onReady={(index) => {
          console.log('Carousel ready, starting at index:', index);
        }}
      />

      {/* Vertical carousel */}
      <div style={{ height: '500px' }}>
        <Carousel
          items={products}
          vertical={true}
          step={2}
          renderItem={(product: Product) => (
            <div style={{ height: '150px', padding: '12px' }}>
              <h4>{product.name}</h4>
              <p>${product.price}</p>
            </div>
          )}
          renderControl={({ canUse, onUse, type, vertical }) => (
            <ArrowButton
              size="m"
              direction={type === 'forward' ? 'down' : 'up'}
              onClick={onUse}
              disabled={!canUse}
              style={{
                position: 'absolute',
                [type === 'forward' ? 'bottom' : 'top']: '10px',
                left: '50%',
                transform: 'translateX(-50%)',
              }}
            />
          )}
        />
      </div>
    </div>
  );
}

```

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

### Tooltip-Style Popup on Hover

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Shows how to use the Popup component as a tooltip, appearing when the user hovers over a specific element. The popup is managed using 'onMouseEnter' and 'onMouseLeave' events. Dependencies include '@sima-land/ui-nucleons/popup'.

```tsx
// Tooltip-style popup
function TooltipPopup() {
  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);

  return (
    <div>
      <span
        onMouseEnter={(e) => setAnchorElement(e.currentTarget)}
        onMouseLeave={() => setAnchorElement(null)}
        style={{ cursor: 'help', textDecoration: 'underline' }}
      >
        Hover me
      </span>

      <Popup
        showFor={anchorElement}
        placement="top"
        offset={8}
        onDismiss={() => setAnchorElement(null)}
        withCloseButton={false}
      >
        <div style={{
          padding: '8px 12px',
          background: '#333',
          color: 'white',
          borderRadius: '4px',
          fontSize: '14px',
          maxWidth: '200px',
        }}>
          This is helpful tooltip information
        </div>
      </Popup>
    </div>
  );
}

```

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

### Responsive Design with useBreakpoint Hook (React)

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

The useBreakpoint hook allows for conditional rendering and styling based on predefined design system breakpoints. It supports various query formats like 'xs+' or 'm-'. For performance optimization and SSR compatibility, it can be used with the optional BreakpointProvider.

```tsx
import { useBreakpoint, BreakpointProvider } from '@sima-land/ui-nucleons/hooks';
import { useState, useEffect } from 'react';

function ResponsiveComponent() {
  // Check if screen is mobile (xs or s)
  const isMobile = useBreakpoint('xs+');

  // Check if screen is tablet or larger
  const isTablet = useBreakpoint('m+');

  // Check if screen is desktop
  const isDesktop = useBreakpoint('l+');

  return (
    <div>
      {isMobile && <p>Mobile view (xs or s)</p>}
      {isTablet && !isDesktop && <p>Tablet view (m)</p>}
      {isDesktop && <p>Desktop view (l or xl)</p>}
    </div>
  );
}

// Optimized with provider
function App() {
  return (
    <BreakpointProvider>
      <ResponsiveLayout />
    </BreakpointProvider>
  );
}

function ResponsiveLayout() {
  const isMobile = useBreakpoint('xs+');
  const isDesktop = useBreakpoint('l+');

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : isDesktop ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
      gap: '16px',
    }}>
      <Card />
      <Card />
      <Card />
    </div>
  );
}

// Conditional rendering based on breakpoint
function Navigation() {
  const isMobile = useBreakpoint('xs+');

  if (isMobile) {
    return <MobileNav />;
  }

  return <DesktopNav />;
}

function MobileNav() {
  return (
    <nav style={{
      position: 'fixed',
      bottom: 0,
      width: '100%',
      display: 'flex',
      justifyContent: 'space-around',
    }}>
      <button>Home</button>
      <button>Search</button>
      <button>Profile</button>
    </nav>
  );
}

function DesktopNav() {
  return (
    <nav style={{
      display: 'flex',
      gap: '24px',
      padding: '20px',
    }}>
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  );
}

```

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

### TypeScript Type Declarations for CSS Modules

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

TypeScript declaration files (.d.ts) for handling CSS module imports, including support for .module.css, .m.css, .module.scss, and .m.scss file extensions. This ensures type safety when importing styles.

```typescript
// src/custom.d.ts
declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.m.css' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}

declare module '*.m.scss' {
  const classes: { [key: string]: string };
  export default classes;
}
```

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

### Type-Safe Slot Distribution with defineSlots Helper (React)

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

The defineSlots helper provides a type-safe way to distribute React children into named slots, simplifying component composition. It automatically detects child elements by their component type, ensuring strong TypeScript typing and flexible structure.

```tsx
import { defineSlots } from '@sima-land/ui-nucleons/helpers';
import { ReactNode } from 'react';

// Define slot components
function CardHeader({ children }: { children: ReactNode }) {
  return <header style={{ padding: '16px', borderBottom: '1px solid #e0e0e0' }}>{children}</header>;
}

function CardBody({ children }: { children: ReactNode }) {
  return <div style={{ padding: '16px', flex: 1 }}>{children}</div>;
}

function CardFooter({ children }: { children: ReactNode }) {
  return <footer style={{ padding: '16px', borderTop: '1px solid #e0e0e0' }}>{children}</footer>;
}

// Card component using slots
function Card({ children }: { children: ReactNode }) {
  const slots = defineSlots(children, {
    header: CardHeader,
    body: CardBody,
    footer: CardFooter,
  });

  return (
    <div style={{
      border: '1px solid #e0e0e0',
      borderRadius: '8px',
      display: 'flex',
      flexDirection: 'column',
      minHeight: '200px',
    }}>
      {slots.header}
      {slots.body}
      {slots.footer}
    </div>
  );
}

// Usage example
function CardExample() {
  return (
    <Card>
      <CardHeader>
        <h2>Product Details</h2>
      </CardHeader>
      <CardBody>
        <p>This is the main content area of the card.</p>
        <p>It can contain any React elements.</p>
      </CardBody>
      <CardFooter>
        <button>Add to Cart</button>
        <button>View Details</button>
      </CardFooter>
    </Card>
  );
}

// Complex example with optional slots
function Dialog({ children }: { children: ReactNode }) {
  const slots = defineSlots(children, {
    header: CardHeader,
    body: CardBody,
    footer: CardFooter,
  });

  return (
    <div
      role="dialog"
      aria-modal="true"
      style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'white',
        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
        borderRadius: '8px',
        minWidth: '400px',
      }}>
      {slots.header && slots.header}
      {slots.body}
      {slots.footer && slots.footer}
    </div>
  );
}

function DialogExample() {
  return (
    <Dialog>
      <CardHeader>
        <h2>Confirmation</h2>
      </CardHeader>
      <CardBody>
        <p>Are you sure you want to delete this item?</p>
      </CardBody>
      <CardFooter>
        <button onClick={() => console.log('Confirmed')}>Yes</button>
        <button onClick={() => console.log('Cancelled')}>No</button>
      </CardFooter>
    </Dialog>
  );
}

```

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

### Carousel with Autoplay and Custom Item Rendering

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Configures a carousel to automatically play through items with a specified timeout and pause on hover. It uses a custom render function for each item, displaying product images within a defined padding.

```tsx
import { Carousel } from '@sima-land/ui-nucleons/carousel';

interface Product {
  id: number;
  name: string;
  image: string;
  price: number;
}

function CarouselWithAutoplay() {
  const products: Product[] = [
    { id: 1, name: 'Product 1', image: '/img1.jpg', price: 1999 },
    { id: 2, name: 'Product 2', image: '/img2.jpg', price: 2499 },
    { id: 3, name: 'Product 3', image: '/img3.jpg', price: 1799 },
    { id: 4, name: 'Product 4', image: '/img4.jpg', price: 2999 },
    { id: 5, name: 'Product 5', image: '/img5.jpg', price: 1599 },
  ];

  return (
    <Carousel
      items={products}
      autoplay={true}
      autoplayTimeout={3000}
      autoplayHoverPause={true}
      infinite={true}
      renderItem={(product: Product) => (
        <div style={{ minWidth: '300px', padding: '20px' }}>
          <img src={product.image} alt={product.name} />
        </div>
      )}
      onReady={(index) => {
        console.log('Carousel ready, starting at index:', index);
      }}
    />
  );
}

```

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

### Vertical Carousel with Custom Controls

Source: https://context7.com/sima-land/ui-nucleons/llms.txt

Implements a vertical carousel that displays items with a fixed height and custom navigation buttons. The `renderControl` prop is used to define the appearance and behavior of the up/down arrow buttons, which are positioned absolutely.

```tsx
import { Carousel } from '@sima-land/ui-nucleons/carousel';
import { ArrowButton } from '@sima-land/ui-nucleons/arrow-button';

interface Product {
  id: number;
  name: string;
  image: string;
  price: number;
}

function VerticalCarousel() {
  const products: Product[] = [
    { id: 1, name: 'Product 1', image: '/img1.jpg', price: 1999 },
    { id: 2, name: 'Product 2', image: '/img2.jpg', price: 2499 },
    { id: 3, name: 'Product 3', image: '/img3.jpg', price: 1799 },
    { id: 4, name: 'Product 4', image: '/img4.jpg', price: 2999 },
    { id: 5, name: 'Product 5', image: '/img5.jpg', price: 1599 },
  ];

  return (
    <div style={{ height: '500px' }}>
      <Carousel
        items={products}
        vertical={true}
        step={2}
        renderItem={(product: Product) => (
          <div style={{ height: '150px', padding: '12px' }}>
            <h4>{product.name}</h4>
            <p>${product.price}</p>
          </div>
        )}
        renderControl={({ canUse, onUse, type, vertical }) => (
          <ArrowButton
            size="m"
            direction={type === 'forward' ? 'down' : 'up'}
            onClick={onUse}
            disabled={!canUse}
            style={{
              position: 'absolute',
              [type === 'forward' ? 'bottom' : 'top']: '10px',
              left: '50%',
              transform: 'translateX(-50%)',
            }}
          />
        )}
      />
    </div>
  );
}

```

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