### Install IUI Components and Icons

Source: https://rocket.ixigo.com/iui-docs/guide/getting-started

This command installs the core IUI React component library and the associated icon package using npm. Ensure your NPM_TOKEN is set up correctly in your environment.

```bash
npm install @ixigo/iui @ixigo/icons
```

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

### Circular Progress Basic Usage

Source: https://rocket.ixigo.com/iui-docs/guide/components/circularProgress

Shows the fundamental way to render the CircularProgress component. This serves as a starting point for integrating the component into your UI.

```JavaScript
<CircularProgress />
```

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

### Circular Progress Percentage Example

Source: https://rocket.ixigo.com/iui-docs/guide/components/circularProgress

Provides an example of how to display determinate progress, typically from 0 to 100%. This involves setting a 'value' prop to represent the current progress state.

```JavaScript
<CircularProgress value={75} />
```

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

### Token Naming Exception and Component Usage

Source: https://rocket.ixigo.com/iui-docs/guide/tokens/colors

Highlights the difference between token naming conventions and component prop naming, specifically for 'subtle' tokens mapping to `variant="soft"` and 'outline' tokens mapping to `variant="outlined"`. Includes an example of using a Button component with these props.

```html
<Button variant="soft" color="brand"> // Uses subtle tokens internally
```

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

### Tailwind CSS Spacing Usage Example

Source: https://rocket.ixigo.com/iui-docs/guide/tokens/layout

Demonstrates the correct and deprecated usage of Tailwind CSS spacing utilities based on the IUI design system's configuration. It highlights the preference for pixel-suffixed classes over numeric ones to avoid conflicts with Tailwind's default scale.

```html
<!-- ❌ Will be deprecated -->
<div className="gap-5"></div>

<!-- ✅ Use instead -->
<div className="gap-5px"></div>
```

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

### Update Icon Import Statements

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/icons

Provides specific code examples for updating import statements after icon renames. This patch addresses changes in how icons are imported from the '@ixigo/icons' package.

```javascript
- import ChevronDownWithCircle from '@ixigo/icons/ChevronDownWithCircle'
+ import ChevronDownCircle from '@ixigo/icons/ChevronDownCircle'
- import ChevronLeftWithCircle from '@ixigo/icons/ChevronLeftWithCircle'
+ import ChevronLeftCircle from '@ixigo/icons/ChevronLeftCircle'
- import ChevronRightWithCircle from '@ixigo/icons/ChevronRightWithCircle'
+ import ChevronRightCircle from '@ixigo/icons/ChevronRightCircle'
- import ChevronUpWithCircle from '@ixigo/icons/ChevronUpWithCircle'
+ import ChevronUpCircle from '@ixigo/icons/ChevronUpCircle'
```

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

### Semantic Tokens for CSS Properties

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Details on how semantic tokens are enabled for various CSS properties, allowing for consistent theming and styling across the UI library. Examples show usage with background colors, borders, and text decorations.

```APIDOC
Semantic Tokens for CSS Properties:

  Enabled Properties and Usage:
    - Gradient Stops:
      - Use semantic background colors in gradients.
      - Example: `from-success-solid to-success-subtle`

    - Outline Colors:
      - Use semantic border colors for outlines.
      - Example: `outline-success-subtle`, `outline-primary`

    - Divide Colors:
      - Use semantic border colors for dividers.
      - Example: `divide-primary`, `divide-secondary`

    - Caret Colors:
      - Use semantic text colors for text cursors.
      - Example: `caret-selection`, `caret-secondary`

    - Text Decoration Colors:
      - Use semantic text colors for underlines/overlines.
      - Example: `underline-success`, `line-through-critical`

  Purpose:
    - Ensures consistent application of theme colors and styles.
    - Simplifies theming and branding updates.
```

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

### Controlled Accordion Example

Source: https://rocket.ixigo.com/iui-docs/guide/components/accordion

Demonstrates how to manage the expanded state of an Accordion component using React's useState hook and the onChange prop for external control. This allows for programmatic manipulation of the accordion's visibility.

```javascript
const ControlledAccordion = () => {
  const [expanded, setExpanded] = React.useState(false);

  return (
    <Accordion
      expanded={expanded}
      onChange={(isExpanded) => setExpanded(isExpanded)}
    >
      <AccordionHead>Controlled Accordion</AccordionHead>
      <AccordionBody>
        This accordion's state is controlled externally.
      </AccordionBody>
    </Accordion>
  );
};
```

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

### Import IUI Transitions

Source: https://rocket.ixigo.com/iui-docs/guide/components/transitions

Shows how to import the Collapse, Fade, and Slide transition components from the '@ixigo/iui' library for use in your project.

```javascript
import Collapse from'@ixigo/iui/Collapse';
import Fade from'@ixigo/iui/Fade';
import Slide from'@ixigo/iui/Slide';
```

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

### ListItem and ListItemText Alignment

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Fixes related to the alignment of `ListItemText` within `ListItem` components, specifically when the `ListItem` is disabled or when the list is aligned to the start.

```APIDOC
ListItem and ListItemText Alignment:

  Fixes:
    - Show `ListItemText` text in disabled state when `ListItem` is disabled.
    - Fixed `ListItemIcon` alignment with `ListItemText` when list is aligned to `start`.

  Context:
    - Ensures proper visual presentation of list items, especially in edge cases like disabled states or specific alignments.
```

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

### Configure NPM Registry for IUI

Source: https://rocket.ixigo.com/iui-docs/guide/getting-started

This snippet shows how to configure your project's .npmrc file to point to the ixigo GitLab registry for private package access. It requires an NPM_TOKEN with read permissions.

```bash
@ixigo:registry=https://git.ixigo.com/api/v4/packages/npm///git.ixigo.com/api/v4/packages/npm/:_authToken=${NPM_TOKEN}//git.ixigo.com/api/v4/projects/:_authToken=${NPM_TOKEN}
```

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

### Import Input Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/input

Demonstrates how to import the Input component and its associated InputAdornment from the '@ixigo/iui/Input' module. This is the standard way to begin using the Input component in your React application.

```javascript
import Input,{ InputAdornment }from'@ixigo/iui/Input';
```

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

### Import IUI Switch Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/switch

Demonstrates how to import the Switch component from the IUI library. This is the first step to using the component in your application.

```javascript
import Switch from'@ixigo/iui/Switch';
```

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

### Slot Component Exposure

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Information regarding the exposure of Slot, SlotProps, and Slottable components from the library. This change removes the need for external installation of `@radix-ui/react-slot` when using the `asChild` pattern.

```APIDOC
Slot Component Exposure:

  Exposed Components:
    - Slot
    - SlotProps
    - Slottable

  Purpose:
    - Allows library users to build their own components using the `asChild` pattern without external dependencies.
    - Previously used internally, now available for external use.

  Dependency Change:
    - No need to install `@radix-ui/react-slot` separately.

  Usage Example (Conceptual):
    // Assuming Slot is imported from the library
    <Slot className="my-custom-class" asChild>
      <Button />
    </Slot>
```

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

### Import IUI Chip Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/chip

Shows the standard import statement for the Chip component from the '@ixigo/iui' library. This import makes the Chip component available for use in your project.

```javascript
import Chip from'@ixigo/iui/Chip';
```

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

### Import List Components

Source: https://rocket.ixigo.com/iui-docs/guide/components/list

Imports the necessary components for creating lists: ListItem, ListItemText, and ListItemIcon from the @ixigo/iui library.

```javascript
import ListItem from'@ixigo/iui/ListItem';import ListItemText from'@ixigo/iui/ListItemText';import ListItemIcon from'@ixigo/iui/ListItemIcon';
```

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

### Import Timeline Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/timeline

Demonstrates how to import the Timeline component from the '@ixigo/iui' library. This is the standard way to include the component in your project for use.

```javascript
import*as Timeline from'@ixigo/iui/Timeline';
```

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

### Import Calendar Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/calendar

Demonstrates how to import the Calendar component from the '@ixigo/iui' library into your project.

```javascript
import Calendar from'@ixigo/iui/Calendar';
```

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

### Dialog Component API Reference

Source: https://rocket.ixigo.com/iui-docs/guide/components/dialog

API documentation for the Dialog component, detailing its properties, types, and default values. This includes controls for visibility, callbacks, and styling.

```APIDOC
Dialog Component API Reference

Props:
  open:
    Description: Controls visibility of modal
    Type: boolean (Required)
    Default: false
  onClose:
    Description: Callback fired in response of user input to close the component. it could be fired due to escape keyDown event or backdrop click
    Type: func
    Default: -
  keepMounted:
    Description: Always keeps the children in dom. usefull to improve seo.
    Type: boolean
    Default: false
  hideBackdrop:
    Description: Use it to remove backdrop
    Type: boolean
    Default: -
  disableEscapeKeyDown:
    Description: If true, hitting ESC button will not fire onClose callback
    Type: boolean
    Default: -
  disableScrollLock:
    Description: If true, user would be able to scroll outside of modal as well
    Type: boolean
    Default: -
  disablePortal:
    Description: If true, Modal will not render in top layer. since React portal can not be used on server, it can be used to server render a modal
    Type: boolean
    Default: -
  slots:
    Description: A component map that can be used to override default components rendered by modal
    Type: object
    Default: -
  slotProps:
    Description: Use it to customize props of component rendered in different slots
    Type: object
    Default: -
  TransitionComponent:
    Description: Provide a custom component to override default transitioning of Dialog
    Type: elementType
    Default: Fade
  maxWidth:
    Description: Controls the max width of dialog and renders in center of screen
    Type: "false" | "xs" | "sm" | "md"
    Default: sm
  fullScreen:
    Description: Useful for full screen dialog like autocompleters in mobile devices
    Type: boolean
    Default: -
```

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

### Import ModalUnstyled Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/modal

Shows how to import the ModalUnstyled component from the '@ixigo/iui' package.

```javascript
import ModalUnstyled from'@ixigo/iui/ModalUnstyled';
```

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

### Import Dialog Components from iUI

Source: https://rocket.ixigo.com/iui-docs/guide/components/dialog

Demonstrates how to import the Dialog component and its related sub-components from the iUI library. This is the first step to using Dialogs in your application.

```javascript
import Dialog from'@ixigo/iui/Dialog';
import{ DialogTitle, DialogContent, DialogActions, DialogContentText }from'@ixigo/iui/Dialog';
```

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

### Toast Component API and Features

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Documentation for the Toast component, detailing its evolution, available props, variants, and usage patterns. Includes updates on size variants, positioning, animations, and customization options like custom icons and action buttons.

```APIDOC
Toast Component:
  Features:
    - Size variants: 'sm', 'lg'
    - Typography: Size-specific text styles
    - IconButton integration
    - Multiple positions: top/bottom, left/center/right
    - Variants: success, error, warning, neutral
    - Customizable features:
      - Custom icons (left and right)
      - Action buttons
      - Close button
      - Title and description
      - Custom colors and styling
    - Animations: Smooth enter/exit with reduced motion support
    - Utilities: customToast for management, max toast limit, gutter spacing

  Prop Changes:
    - Renamed `classes` prop to `className` for better React convention alignment.
    - Added `classes` prop for container and content customization (later reverted/clarified to `className`).

  Usage Examples:
    // Basic Toast
    <Toast message="Operation successful" />

    // Toast with custom icon and action
    <Toast
      message="File uploaded"
      iconLeft={<UploadIcon />}
      action={<Button onClick={handleRetry}>Retry</Button>}
    />

    // Toast with custom position and variant
    <Toast
      message="Error occurred"
      position="bottom-center"
      variant="error"
    />

  Related Components:
    - IconButton
    - Button
```

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

### Configure TailwindCSS with IUI Base Configuration (JavaScript)

Source: https://rocket.ixigo.com/iui-docs/guide/getting-started

This JavaScript configuration file sets up Tailwind CSS for your project using IUI's base configuration. It extends the base config with IUI's design tokens and plugins, and includes project source files and IUI components for proper style processing. Ensure the `content` array correctly points to your project's files and the IUI library.

```javascript
const baseConfig = require("@ixigo/iui/tailwind.config");
const path = require("path");
const iuiPath = require.resolve("@ixigo/iui");

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins
    // Add any additional plugins here
  ],
  content: [
    // Add your project's source files which might use tailwind classes
    "./src/**/*.{html,js,jsx,ts,tsx}",
    // Include IUI components to ensure their styles are processed
    iuiPath.replace(path.basename(iuiPath), "**/*.js")
  ],
  theme: {
    ...baseConfig.theme,
    extend: {
      ...baseConfig.theme.extend,
      // Add any custom theme extensions here
    },
  },
};
```

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

### Specify IUI Peer Dependencies

Source: https://rocket.ixigo.com/iui-docs/guide/getting-started

IUI requires specific versions of React, React DOM, and TailwindCSS to function correctly. These peer dependencies should be managed in your project's package.json.

```json
{
  "react": ">=18.2.0",
  "react-dom": ">=18.2.0",
  "tailwindcss": ">=3.4.9"
}
```

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

### Import IUI Icons in React

Source: https://rocket.ixigo.com/iui-docs/guide/icons

Demonstrates the recommended method for importing individual icons from the '@ixigo/icons' package, and also shows the less recommended named import approach. Proper imports are crucial for tree-shaking and bundle optimization.

```javascript
// 1. Individual imports (recommended)
import Train from'@ixigo/icons/Train';
import Close from'@ixigo/icons/Close';

// 2. Named imports (not recommended for production)
import{ Train, Close }from'@ixigo/icons';
```

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

### Import CircularProgress Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/circularProgress

Demonstrates how to import the CircularProgress component from the '@ixigo/iui' library. This is the first step to using the component in your application.

```JavaScript
import { CircularProgress } from '@ixigo/iui/CircularProgress';
```

```TypeScript
import { CircularProgress } from '@ixigo/iui/CircularProgress';
```

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

### Optimize IUI Icon Imports with Next.js

Source: https://rocket.ixigo.com/iui-docs/guide/icons

Provides configuration for next.config.js to optimize imports from '@ixigo/icons' using modularizeImports. This ensures that only the necessary icon components are bundled, improving build performance.

```javascript
module.exports ={
  modularizeImports:{
    '@ixigo/icons':{
      transform:'@ixigo/icons/{{member}}',
    },
  },
};
```

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

### Tailwind Config: Icon Utilities, Spacing, Theme Plugin

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Introduces icon size utilities (e.g., `icon-sm`) for easier icon sizing control. Adds pixel-based spacing values (e.g., `p-5px`) and `em` units for spacing to complement Tailwind defaults. The iuiTheme plugin is now synchronous.

```javascript
Tailwind Config:
  * Introduced icon size utilities(icon-sm, icon-md, icon-lg, icon-xl, icon-2xl, icon-3xl) allowing easier control of icon sizes as defined in the design system
  * Added pixel-based spacing values (e.g., `p-5px`) to complement Tailwind defaults. Use these when specified by design, otherwise prefer Tailwind's default spacing scale. for example instead of `p-5` use `p-5px`
  * introduced `em` in spacing to allow setting dimesnion based on font size
  * iuiTheme plugin is synchronous now
```

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

### Import Typography Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Shows how to import the Typography component from the '@ixigo/iui' library. This is the first step to using the component in a React application.

```javascript
import Typography from'@ixigo/iui/Typography';
```

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

### Import Button and IconButton Components

Source: https://rocket.ixigo.com/iui-docs/guide/components/button

This snippet demonstrates how to import the primary Button and IconButton components from the '@ixigo/iui' library. These are the foundational elements for creating interactive buttons within the IUI framework.

```javascript
import Button from'@ixigo/iui/Button';
import IconButton from'@ixigo/iui/IconButton';
```

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

### ButtonBase and Ripple Components Added

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Introduces the `ButtonBase` component, which includes a ripple effect and supports slotted content for flexible rendering. The `Ripple` component is also added, likely as a dependency or utility for `ButtonBase`.

```javascript
`ButtonBase` component has been added. it comes with ripple effect and slotted content.
`Ripple` component has been added.
```

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

### Import IUI Tabs Components

Source: https://rocket.ixigo.com/iui-docs/guide/components/tabs

Imports the core components required for implementing the Tabs feature from the @ixigo/iui library. This includes the main Tabs container, TabList for tab headers, individual Tab items, and TabPanel for content associated with each tab.

```javascript
import Tabs from'@ixigo/iui/Tabs';
import TabList from'@ixigo/iui/TabList';
import Tab from'@ixigo/iui/Tab';
import TabPanel from'@ixigo/iui/TabPanel';
```

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

### Import IUI Accordion Components

Source: https://rocket.ixigo.com/iui-docs/guide/components/accordion

Shows how to import the necessary Accordion, AccordionHead, and AccordionBody components from the @ixigo/iui library for use in a React application.

```javascript
import Accordion from'@ixigo/iui/Accordion';
import AccordionHead from'@ixigo/iui/AccordionHead';
import AccordionBody from'@ixigo/iui/AccordionBody';
```

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

### Switch Component API Documentation

Source: https://rocket.ixigo.com/iui-docs/guide/components/switch

Details the properties available for the Switch component, including their types, descriptions, and default values. This allows for customization of the switch's behavior and appearance.

```APIDOC
Switch Component Properties:

as:
  Description: The element to render as root of the component.
  Type: elementType (Required)
  Default: -

overlay:
  Description: Used to position the switch root element as static. Useful in case of listItem where one may want to toggle switch state on click of the list item.
  Type: boolean
  Default: -

checked:
  Description: If true, the switch will be checked. Use it to have controlled behavior.
  Type: boolean
  Default: -

defaultChecked:
  Description: If true, the switch will be checked by default. Use it to have uncontrolled behavior.
  Type: boolean
  Default: -

onChange:
  Description: Event handler for change event.
  Type: func
  Default: -

name:
  Description: Name of the input element.
  Type: string
  Default: -

required:
  Description: If true, the switch will be required.
  Type: boolean
  Default: -

readOnly:
  Description: If true, the switch will not allow user to change its state.
  Type: boolean
  Default: -

value:
  Description: Input value. Useful when you have multiple switches with the same name. This value will be cast to string by DOM API.
  Type: unknown
  Default: -

disabled:
  Description: If true, the switch will be disabled.
  Type: boolean
  Default: -

id:
  Description: ID of the input element.
  Type: string
  Default: -

checkedIcon:
  Description: Child of thumb for checked state.
  Type: ReactNode
  Default: -

uncheckedIcon:
  Description: Child of thumb for unchecked state.
  Type: ReactNode
  Default: -

className:
  Description: Additional css class.
  Type: string
  Default: -
```

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

### Icons Changelog - Version 1.0.0

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/icons

Marks the initial major release (version 1.0.0) of the @ixigo/icons package, representing a stable baseline.

```APIDOC
### Version 1.0.0

#### Major Changes

*   Initial release of the @ixigo/icons package.
```

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

### Input Component API Documentation

Source: https://rocket.ixigo.com/iui-docs/guide/components/input

API documentation for the Input component, detailing its purpose, variants, states, adornments, and controlled/uncontrolled usage patterns. It outlines the core features and customization options available for form input fields.

```APIDOC
Input Component:
  A form control for collecting user input in a text field. Supports various states, validation styles, and customization options.

  Features:
  - Variants: 'line' (default) and 'outlined'.
  - Validation States: Provides visual feedback for states like error, warning, success.
  - Adornments: Supports 'startAdornment' and 'endAdornment' for icons or text.
  - Controlled vs Uncontrolled: Can be managed via component state or internal state.

  Props (Commonly Used):
  - variant: string (e.g., 'line', 'outlined')
    - Description: Specifies the visual style of the input field.
  - startAdornment: ReactNode
    - Description: Content to display at the beginning of the input.
  - endAdornment: ReactNode
    - Description: Content to display at the end of the input.
  - helperText: ReactNode
    - Description: Text displayed below the input, often for validation messages or hints.
  - error: boolean
    - Description: If true, applies error styling and validation feedback.
  - disabled: boolean
    - Description: If true, disables the input field.
  - readOnly: boolean
    - Description: If true, makes the input field read-only.

  Usage Examples:
  // Basic Input
  <Input placeholder="Enter text" />

  // Outlined Input with Adornment
  <Input
    placeholder="Search"
    variant="outlined"
    startAdornment={<SearchIcon />}
  />

  // Input with Validation State
  <Input
    label="Email"
    helperText="Invalid email format"
    error
  />

  // Controlled Input
  const [value, setValue] = useState('');
  <Input value={value} onChange={(e) => setValue(e.target.value)} />

  // Uncontrolled Input
  <Input defaultValue="Initial value" />

  Related Components:
  - InputAdornment: Used to structure content within startAdornment or endAdornment.
```

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

### Import InlineAlert Component

Source: https://rocket.ixigo.com/iui-docs/guide/components/inlineAlert

This code snippet demonstrates how to import the `InlineAlert` and `InlineAlertActions` components from the `@ixigo/iui/InlineAlert` module. These components are essential for displaying inline messages and actions within an application.

```javascript
import{ InlineAlert, InlineAlertActions }from'@ixigo/iui/InlineAlert';
```

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

### Import Radio and RadioGroup Components

Source: https://rocket.ixigo.com/iui-docs/guide/components/radio

Demonstrates how to import the Radio and RadioGroup components from the '@ixigo/iui' library. These imports are necessary to use the radio button functionality within your application.

```javascript
import Radio from'@ixigo/iui/Radio';
import RadioGroup from'@ixigo/iui/RadioGroup';
```

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

### Backdrop: Basic Usage

Source: https://rocket.ixigo.com/iui-docs/guide/components/backdrop

Demonstrates the basic implementation of the Backdrop component. It controls visibility using a state variable and can be closed via an onClose handler. The component overlays content and can block background interactions.

```javascript
const BasicBackdrop = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <Backdrop open={open} onClose={() => setOpen(false)}>
      <div>Content above backdrop</div>
    </Backdrop>
  );
};
```

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

### Typography: Reference Table of Variants

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Provides a comprehensive reference for all Typography variants, detailing their mobile and desktop font sizes, line heights, and recommended use cases. This table aids in selecting the appropriate style for different content types.

```APIDOC
Typography Reference Table:

Variant | Mobile (<1280px) | Desktop (≥1280px) | Line Height | Use Case
---|---|---|---|---
display | 54px | 64px | 1.2 | Hero sections, large marketing text
h1 | 40px | 40px | 1.2 | Main page headings
h2 | 36px | 36px | 1.2 | Section headings
h3 | 30px | 32px | 1.2 | Subsection headings
h4 | 24px | 28px | 1.2 | Card headings
h5 | 20px | 24px | 1.2 | Small section headings
h6 | 18px | 20px | 1.2 | Minor headings
body-lg | 18px | 18px | 1.4 | Featured body text
body-md | 16px | 16px | 1.4 | Primary body text
body-sm | 14px | 14px | 1.4 | Secondary text
body-xs | 12px | 12px | 1.4 | Helper text
body-2xs | 10px | 10px | 1.4 | Legal text
button-xl | 24px | 24px | 1.3 | Large buttons
button-lg | 18px | 18px | 1.3 | Primary buttons
button-md | 16px | 16px | 1.3 | Secondary buttons
button-sm | 14px | 14px | 1.3 | Small buttons
overline | 14px | 14px | 1.2 | Labels, categories
overline-sm | 12px | 12px | 1.2 | Small labels
```

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

### Timeline Component API and Features

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Documentation for the Timeline component, covering its structure, orientations, content positioning, subcomponents, accessibility, and customization. Includes details on props like `hideLastConnector` and internal attributes.

```APIDOC
Timeline Component:
  Features:
    - Orientations: Vertical and Horizontal
    - Content Positioning: start, end, alternate, alternate-reverse
    - Accessibility: ARIA attributes support
    - Customization: Slot-based with `asChild` prop

  Subcomponents:
    - Item: For individual timeline entries
    - Content: Main content area for an item
    - OppositeContent: Content on the opposite side of the timeline
    - Connector: Visual line connecting timeline items
    - Separator: Visual marker for separating items
    - Indicator: Points or markers on the timeline

  Props:
    - `hideLastConnector`: (Boolean) Optionally hides the connector for the last item.

  Internal Attributes:
    - `data-iui-name`: Added for better component identification.

  Usage Examples:
    <Timeline>
      <Timeline.Item>
        <Timeline.OppositeContent>9:30 AM</Timeline.OppositeContent>
        <Timeline.Content>
          <Timeline.Separator>
            <Timeline.Indicator />
          </Timeline.Separator>
          <Timeline.ItemContent>Event Start</Timeline.ItemContent>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item hideLastConnector={true}>
        {/* ... */}
      </Timeline.Item>
    </Timeline>

  Related Components:
    - `asChild` prop usage
```

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

### Import Checkbox Component (JavaScript)

Source: https://rocket.ixigo.com/iui-docs/guide/components/checkbox

Shows how to import the Checkbox component from the '@ixigo/iui/Checkbox' module. This is the first step to using the component in your application.

```javascript
import Checkbox from'@ixigo/iui/Checkbox';
```

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

### Input Component Props

Source: https://rocket.ixigo.com/iui-docs/guide/components/input

Defines the configurable properties for the Input component, detailing their purpose, expected data types, and default values. This serves as the API reference for customizing Input behavior and appearance.

```APIDOC
Input Component API Reference:

Properties for the Input component:

- className: string
  Description: Applies to the root element of the Input component.
  Default Value: -

- classes: object
  Description: Allows applying custom classes to the internal elements of the component.
  Default Value: -

- defaultValue: unknown
  Description: Sets the initial value for the input when the component is uncontrolled.
  Default Value: -

- endAdornment: ReactNode
  Description: Renders content (e.g., an icon or text) as a suffix to the input field.
  Default Value: -

- fullWidth: boolean
  Description: If true, the input will occupy the full width of its parent container.
  Default Value: false

- helperText: ReactNode
  Description: Provides descriptive text or status messages below the input field.
  Default Value: -

- id: string
  Description: Specifies the HTML id attribute for the input element.
  Default Value: -

- label: ReactNode
  Description: Renders a label for the input field.
  Default Value: -

- placeholder: string
  Description: Displays a hint for the input value, visible until the input is not empty.
  Default Value: -

- startAdornment: ReactNode
  Description: Renders content (e.g., an icon or text) as a prefix to the input field.
  Default Value: -

- variant: "line" | "outlined"
  Description: Determines the visual style of the input field.
  Default Value: "outlined"

- validationState: "normal" | "success" | "warning" | "error"
  Description: Controls the visual feedback (color of label, helper text, borders) to indicate the input's validity.
  Default Value: "normal"

- value: unknown
  Description: The current value of the input element. Required for controlled components. Must be paired with an onChange handler.
  Default Value: -

- inputRef: Ref<HTMLInputElement>
  Description: A ref object to access the underlying HTML input element.
  Default Value: -

- focused: boolean
  Description: If true, the input will visually remain in a focused state, unless disabled.
  Default Value: -
```

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

### Button Component API

Source: https://rocket.ixigo.com/iui-docs/guide/components/button

Documentation for the iui Button component, detailing its properties, types, and default values. It allows customization of appearance, content, and behavior.

```APIDOC
Button:
  Props:
    as: elementType (Required) - The element to render as root of the component.
    children: ReactNode (Required) - The content of the component.
    variant: "flat" | "solid" | "outlined" | "soft" - Applies the theme button styles. (Default: 'solid')
    size: "sm" | "md" | "lg" | "xl" - The size of button. (Default: 'sm')
    color: "neutral" | "brand" | "new" | "success" | "warning" | "critical" - Global set of colors supported by iui. (Default: '-')
    startAdornment: ReactNode - To place icon or other content at the start of the button. Helps in adjusting horizontal spacing.
    endAdornment: ReactNode - To place icon or other content at the end of the button. Helps in adjusting horizontal spacing.
    asChild: boolean - To compose buttons functionally onto alternative element types or your own React components.
    disableRipple: boolean - Disable ripple effect.
```

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

### Icons Changelog - Version 1.1.0

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/icons

Details minor changes for version 1.1.0 of the @ixigo/icons package, introducing new icons for various categories.

```APIDOC
### Version 1.1.0

#### Minor Changes

*   **New Icons**
    *   Added Sports icon.
    *   Added FoodAndDrinks icon.
    *   Added NatureAndWildlife icon.
*   Commit: 099532c
```

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

### ListItemIcon Component API

Source: https://rocket.ixigo.com/iui-docs/guide/components/list

Details the properties available for the ListItemIcon component. This includes the type of icon to display and the component used for the root node.

```APIDOC
ListItemIcon:
  Properties:
    type:
      Description: if no type is provided then it won't have size restrictions
      Type: string
      Allowed Values: "avatar", "icon", "logo"
      Default: "icon"
    as:
      Description: The component used for the root node.
      Type: elementType
      Default: -
```

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

### Use Typography Component (Recommended)

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Demonstrates the recommended way to use the Typography component in React. It allows for type-safe variants and props, semantic HTML rendering, and proper accessibility attributes.

```javascript
<Typographyvariant="h1">Heading</Typography>
```

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

### ListItemText Component API

Source: https://rocket.ixigo.com/iui-docs/guide/components/list

Details the properties available for the ListItemText component. It includes information on deprecated props and the component used for the root node.

```APIDOC
ListItemText:
  Properties:
    disabled:
      Description: @deprecated use `disabled` prop on `ListItem` instead
      Type: boolean
      Default: -
    as:
      Description: The component used for the root node.
      Type: elementType
      Default: -
```

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

### Transition Lifecycle Callbacks

Source: https://rocket.ixigo.com/iui-docs/guide/components/transitions

Defines the TypeScript types for transition lifecycle callbacks, allowing custom logic execution before, during, and after enter/exit transitions.

```typescript
type TransitionProps = {
  /**
   * Transition lifecycle callbacks
   */  onEnter?:()=>void; // Called before enter transition starts
  onEntering?:()=>void; // Called while enter transition is executing
  onEntered?:()=>void; // Called after enter transition completes
  onExit?:()=>void; // Called before exit transition starts
  onExiting?:()=>void; // Called while exit transition is executing
  onExited?:()=>void; // Called after exit transition completes
};
```

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

### Icons Changelog - Version 1.1.2

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/icons

Details patch changes for version 1.1.2 of the @ixigo/icons package. This update includes bug fixes related to icon styling.

```APIDOC
## @ixigo/icons Changelog

### Version 1.1.2

#### Patch Changes

*   **Bug Fixes**
    *   Fixed InfoCircleIcon to have consistent stroke and fill colors.
    *   Commit: a8c5510
```

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

### IconButton Component API

Source: https://rocket.ixigo.com/iui-docs/guide/components/button

Documentation for the iui IconButton component, outlining its specific properties for size, color, variant, and layout adjustments. Suitable for icon-only buttons.

```APIDOC
IconButton:
  Props:
    size: "base" | "sm" | "md" | "lg" | "xl" - The size of the IconButton. (Default: 'base')
    color: "neutral" | "brand" | "subbrand" | "new" | "success" | "warning" | "critical" | "selection" | "info" - The color palette to use for the IconButton. (Default: 'neutral')
    variant: "flat" | "outlined" | "soft" | "solid" | "moderate" - The visual variant of the IconButton. (Default: '-')
    radius: "full" | "auto" - By default radius is decided by size prop. (Default: '-')
    edge: false | "start" | "end" - If true, the icon button will use negative margin to offset padding at the given edge to align with other contents. (Default: false)
    asChild: boolean - To compose buttons functionally onto alternative element types or your own React components.
    disableRipple: boolean - Disable ripple effect.
```

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

### Add Tailwind CSS Peer Dependency and ListItem Role

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Integrates Tailwind CSS as a peer dependency with a minimum version requirement of `>=3.4.9`. The ListItem component has been updated to include the `listitem` role for improved accessibility.

```javascript
Added `tailwindcss` as a peer dependency with version `>=3.4.9`.
* Added `listitem` role to the `ListItem` component.
```

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

### Button: New Size/Color, Adornment Props, asChild

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Adds 'xl' size and 'neutral' color to the Button component, adjusts outline border width, and improves icon handling by preferring `startAdornment` and `endAdornment` props over children. The `asChild` prop allows composition with other components.

```javascript
Button:
  * `xl` size and `neutral` color added
  * Adjusted border width for outlined variant
  * Icons passed as children to buttons now automatically adjust to the appropriate size based on the button size, reducing the need for manual size management
  * prefer `startAdornment` and `endAdornment` props to add icons to the start and end of the button instead of passing them as children
  * use asChild prop to compose buttons with other components
```

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

### Typography: Semantic HTML Mapping

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Explains the default mapping of Typography variants to semantic HTML elements. This ensures accessibility and proper document structure by default, with options to override.

```APIDOC
Semantic HTML Mapping:

Typography Variant | Default HTML Element
---|---
h1-h6 | <h1>-<h6>
body-* | <p>
button-*, overline-* | <span>
```

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

### IconButton Rewrite: New Props and Structure

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

The IconButton component has been significantly rewritten to support new properties including `asChild`, `size` (sm, md, lg, xl), `color`, `variant`, and `radius`. The `startIcon` and `endIcon` props are removed, and the import/export structure is updated for better modularity.

```javascript
IconButton
  * Rewrote `IconButton` component to support new properties:
    * `asChild`: If true, the component will render its children directly as root.
    * `size`: The size of the `IconButton` with options `sm`, `md`, `lg`, and `xl`.
    * `color`: The color palette to use for the `IconButton`.
    * `variant`: The visual variant of the `IconButton`.
    * `radius`: By default it's auto and size based, but can be set to `full`.
  * Removed `startIcon` and `endIcon` properties from `IconButton`.
  * Updated the import/export structure for `IconButton`:
    * recommended to use named export for every component if available
```

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

### Icons Changelog - Version 1.1.1

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/icons

Details patch changes for version 1.1.1 of the @ixigo/icons package. This update focuses on design improvements for existing icons.

```APIDOC
### Version 1.1.1

#### Patch Changes

*   Update Info Circle Filled icon with improved design and better visual clarity.
*   Commit: 4f95695
```

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

### Dialog Component: Forward Transition Props

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

This snippet demonstrates how to pass `transitionProps` to the Dialog component. These props are forwarded to the underlying `TransitionComponent`, enabling customization of transition behaviors such as `onExited` and `timeout`.

```jsx
<DialogTransitionProps={{onExited:()=>{}, timeout:{ enter:200, exit:195}}}>{children}</Dialog>
```

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

### ListItem Props

Source: https://rocket.ixigo.com/iui-docs/guide/components/list

Defines the properties available for the ListItem component, including their types, default values, and descriptions.

```APIDOC
ListItem:
  Props:
    as:
      Description: The element to render as root of the component. the element type to be used for the ListItem root element
      Type: elementType
      Default: li
    size:
      Description: based on the size it applies some classes only to the root element and child elements may increase or decrease their size accordingly
      Type: "lg" | "sm"
      Default: "sm"
    disabled:
      Description: disables interactivity of the ListItem
      Type: boolean
      Default: -
    className:
      Description: className to be applied to the ListItem root element
      Type: string
      Default: -
    disablePadding:
      Description: it removes the padding from the ListItem and as of now it removes gap between child items as well
      Type: boolean
      Default: false
    alignItems:
      Description: aligns the children to the start, center or end of the ListItem vertically
      Type: "center" | "start"
      Default: 'center
```

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

### IUI Timeline Component API Changes

Source: https://rocket.ixigo.com/iui-docs/guide/changelog/iui

Details changes to the IUI Timeline component, focusing on prop updates and rendering logic. These updates enhance flexibility and simplify usage.

```APIDOC
TimelineContent:
  Props:
    label: ReactNode | Accepts ReactNode for flexible label content.
    subText: ReactNode | Accepts ReactNode for flexible sub-text content.

  Changes:
    - Enhanced `TimelineContent` to accept ReactNode for `label` and `subText` props.
    - Simplified child component rendering by removing automatic `itemIndex` and `totalItems` prop injection.

Separator Component:
  Changes:
    - Fixed layout issues with the Separator component.
```

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

### Backdrop Component Props

Source: https://rocket.ixigo.com/iui-docs/guide/components/backdrop

Defines the configurable properties for the Backdrop component. These props control the appearance and behavior of the backdrop, such as its visibility, styling, and transition effects.

```APIDOC
Backdrop Component Properties:

className: string
  Description: CSS class name applied to the backdrop root element.
  Default Value: -

open: boolean (Required)
  Description: If true, the backdrop is visible.
  Default Value: -

invisible: boolean
  Description: If true, the backdrop is invisible. Useful for popovers and select menus.
  Default Value: -

TransitionComponent: elementType
  Description: Allows providing a custom component to override the default transitioning of the Backdrop.
  Default Value: Fade
```

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

### Typography Component Props Reference

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Details the properties available for the Typography component, including their types, default values, and descriptions. This table outlines how to customize font styles, semantic rendering, and apply additional classes.

```APIDOC
Typography Component Props:

Property | Description | Type | Default Value
---|---|---|---
as | The element to render as root of the component. The component used for the root node. | elementType | -
variant | Applies the theme typography styles. | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "body-2xs" | "overline" | "overline-sm" | "button-md" | "button-sm" | "button-lg" | 'body-sm'
fontWeight | The font-weight of the content. | "normal" | "medium" | "semibold" | "bold" | "extrabold" | -
className | Applies additional classes to the element | string | -
```

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

### Backdrop: Custom Transition

Source: https://rocket.ixigo.com/iui-docs/guide/components/backdrop

Shows how to use a custom transition component with the Backdrop. By default, it uses a Fade transition, but you can provide your own component and pass transition properties via TransitionProps.

```javascript
const CustomTransitionBackdrop = () => {
  return (
    <Backdrop
      open
      TransitionComponent={CustomTransition}
      TransitionProps={{ timeout: 300 }}
    >
      <div>Content with custom transition</div>
    </Backdrop>
  );
};
```

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

### Typography: Override Rendering with 'as' Prop

Source: https://rocket.ixigo.com/iui-docs/guide/components/typography

Demonstrates how to use the `as` prop on the Typography component to render text styled with a specific variant but using a different HTML element. This allows for semantic flexibility while maintaining visual consistency.

```jsx
<Typography variant="h1" as="div">Styled as h1, rendered as div</Typography>
```