### InputField Usage Examples

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/InputField.md

Examples demonstrating how to import and use the InputField component in various scenarios.

```APIDOC
## Basic Usage

### Import

```tsx
import { InputField } from 'opal-mobile';
```

### Simple InputField

```tsx
<InputField label="Email" type="textfield" placeholder="name@example.com" />
```

## Advanced Usage

```tsx
const [value, setValue] = useState('');

<InputField
  label="Promo Code"
  type="coupon-field"
  value={value}
  onChangeText={setValue}
/>
```

## Complete Example

```tsx
const InputFieldExample = () => (
  <>
    <InputField label="Email" type="textfield" placeholder="name@example.com" />
  </>
);
```
```

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

### Complete Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Typography.md

Provides a comprehensive example of using the Typography component.

```APIDOC
## Complete Example

```tsx
const TypographyExample = () => (
  <>
    <Typography variant="body-s" color="default">Hello world</Typography>
  </>
);
```
```

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

### Complete Tab Example (TypeScript)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Tab.md

A comprehensive example showcasing the Tab component within a React functional component. It includes the necessary import and a basic Tab setup, similar to the simple usage example.

```tsx
const TabExample = () => (
  <>
    <Tab items={[{ id: "overview", label: "Overview" }, { id: "activity", label: "Activity" }]} activeId={activeId} onChange={setActiveId} />
  </>
);
```

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

### LayoutGrid: Visual Layout Guides (React Native)

Source: https://context7.com/ryadav96/opal-mobile-docs/llms.txt

Illustrates the use of the LayoutGrid component to render visual layout guides for columns, rows, or full grid overlays. Examples cover column grids, row grids, combined grids, and custom styling for design alignment.

```tsx
import { LayoutGrid } from 'opal-mobile';

// Column grid overlay
<LayoutGrid variant="columns" preset="default" columns={4} />

// Row grid
<LayoutGrid variant="rows" rows={12} gutter={8} margin={16} />

// Full grid overlay
<LayoutGrid
  variant="grid"
  columns={4}
  rows={12}
  margin={16}
  gutter={8}
  cellColor="rgba(0, 0, 255, 0.1)"
/>

// Custom styling
<LayoutGrid
  variant="columns"
  columns={6}
  columnColor="rgba(255, 0, 0, 0.2)"
  backgroundColor="transparent"
  style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
/>

// Available options:
// LayoutGridVariant: 'columns' | 'rows' | 'grid'
```

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

### TabItem Usage Examples

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/TabItem.md

Provides examples of how to import and use the TabItem component in various scenarios.

```APIDOC
## Basic Usage

### Import

```tsx
import { TabItem } from 'opal-mobile';
```

### Simple TabItem

```tsx
<TabItem label="Overview" state="active" onPress={() => {}} />
```

## Variants and States

### Available Type Options

| Alias | Options |
| --- | --- |
| `TabItemType` | `primary`, `secondary` |
| `TabItemSize` | `small`, `large` |
| `TabItemState` | `rest`, `active` |

## Advanced Usage

Use this component with external state and pass explicit values through its props table above when control is needed.

## Complete Example

```tsx
const TabItemExample = () => (
  <>
    <TabItem label="Overview" state="active" onPress={() => {}} />
  </>
);
```
```

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

### LayoutGrid Usage Examples

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/LayoutGrid.md

Provides examples of how to import and use the LayoutGrid component in various scenarios.

```APIDOC
## Basic Usage

### Import

```tsx
import { LayoutGrid } from 'opal-mobile';
```

### Simple LayoutGrid

```tsx
<LayoutGrid variant="columns" preset="default" columns={4} />
```

## Complete Example

```tsx
const LayoutGridExample = () => (
  <>
    <LayoutGrid variant="columns" preset="default" columns={4} />
  </>
);
```
```

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

### Complete SelectorPill Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/SelectorPill.md

Provides a complete example of rendering a SelectorPill component within a functional component. This example includes the necessary import and JSX structure for a basic implementation.

```tsx
const SelectorPillExample = () => (
  <>
    <SelectorPill label="Recommended" selected={true} onPress={() => {}} />
  </>
);
```

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

### Complete LayoutGrid Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/LayoutGrid.md

A more complete example demonstrating the usage of the LayoutGrid component within a React functional component. This example also uses the 'columns' variant with specific configurations.

```tsx
const LayoutGridExample = () => (
  <>
    <LayoutGrid variant="columns" preset="default" columns={4} />
  </>
);
```

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

### Complete InputField Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/InputField.md

Provides a complete, albeit simple, example of rendering the InputField component within a React component. This serves as a basic integration point.

```tsx
const InputFieldExample = () => (
  <>
    <InputField label="Email" type="textfield" placeholder="name@example.com" />
  </>
);
```

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

### Complete Spinner Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Spinner.md

A complete example of using the Spinner component within a React functional component. This illustrates how to render the spinner with its props.

```tsx
const SpinnerExample = () => (
  <>
    <Spinner size="m" label="Loading data" position="right" />
  </>
);
```

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

### Basic Usage Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Typography.md

Demonstrates the basic import and usage of the Typography component.

```APIDOC
## Basic Usage

### Import

```tsx
import { Typography } from 'opal-mobile';
```

### Simple Typography

```tsx
<Typography variant="body-s" color="default">Hello world</Typography>
```
```

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

### Complete Tag Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Tag.md

Provides a complete example of rendering a Tag component within a React functional component. This example showcases a 'removable' tag with a label and an interaction handler.

```tsx
const TagExample = () => (
  <>
    <Tag variant="removable" label="React Native" onSuffixIconPress={() => {}} />
  </>
);
```

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

### Checkbox Usage Examples

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Checkbox.md

Illustrates how to import and use the Checkbox component in basic and advanced scenarios.

```APIDOC
## Basic Usage

### Import

```tsx
import { Checkbox } from 'opal-mobile';
```

### Simple Checkbox

```tsx
<Checkbox label="Accept terms" checked={accepted} onPress={() => setAccepted(!accepted)} />
```

## Advanced Usage

```tsx
const [checked, setChecked] = useState(false);

<Checkbox
  label="Receive updates"
  checked={checked}
  onPress={() => setChecked((prev) => !prev)}
/>
```

## Complete Example

```tsx
const CheckboxExample = () => (
  <>
    <Checkbox label="Accept terms" checked={accepted} onPress={() => setAccepted(!accepted)} />
  </>
);
```
```

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

### Complete Button Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Button.md

Provides a complete example of a Button component within a functional component. This demonstrates how to integrate the Button into a React component structure.

```tsx
const ButtonExample = () => (
  <>
    <Button label="Continue" onPress={() => {}} />
  </>
);
```

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

### Complete IconButton Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/IconButton.md

Provides a complete example of using the IconButton component within a React functional component, demonstrating its integration into a UI.

```tsx
const IconButtonExample = () => (
  <>
    <IconButton icon={<IcFavorite />} accessibilityLabel="Favorite" onPress={() => {}} />
  </>
);
```

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

### Complete Typography Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Typography.md

Provides a complete example of the Typography component within a functional component. This demonstrates a practical use case for rendering text with specific styles.

```tsx
const TypographyExample = () => (
  <>
    <Typography variant="body-s" color="default">Hello world</Typography>
  </>
);
```

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

### Complete Badge Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Badge.md

A complete example showcasing the rendering of a Badge component within a React functional component. This illustrates how to integrate the Badge into a larger UI structure.

```tsx
const BadgeExample = () => (
  <>
    <Badge label="New" appearance="success" />
  </>
);
```

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

### Basic Radio Usage Example (TypeScript/React)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Radio.md

A simple example showing how to render a Radio button. It requires an `id`, a `label`, and a `selected` prop to indicate if it's currently chosen. The `onPress` prop handles selection changes.

```tsx
<Radio id="pro" label="Pro plan" selected={selectedId === "pro"} onPress={setSelectedId} />
```

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

### Complete Radio Example with JSX (TypeScript/React)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Radio.md

A complete functional example of the Radio component within a React component. This illustrates how to integrate it into a larger UI structure.

```tsx
const RadioExample = () => (
  <>
    <Radio id="pro" label="Pro plan" selected={selectedId === "pro"} onPress={setSelectedId} />
  </>
);
```

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

### Complete TabItem Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/TabItem.md

Provides a complete example of rendering a TabItem component within a React functional component. This illustrates how to integrate it into a larger UI structure.

```tsx
const TabItemExample = () => (
  <>
    <TabItem label="Overview" state="active" onPress={() => {}} />
  </>
);
```

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

### Complete NotificationBanner Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/NotificationBanner.md

A more comprehensive example of the NotificationBanner component, showcasing its integration within a React component. This example includes a title, appearance, and a primary action, suitable for advanced use cases.

```tsx
const NotificationBannerExample = () => (
  <>
    <NotificationBanner title="Connection restored" appearance="positive" primaryAction={{ label: "View", onPress: () => {} }} />
  </>
);
```

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

### Complete Toggle Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Toggle.md

A complete example of a Toggle component integrated within a React functional component. This illustrates a self-contained usage scenario.

```tsx
const ToggleExample = () => (
  <>
    <Toggle label="Enable notifications" active={enabled} onValueChange={setEnabled} />
  </>
);
```

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

### Simple Button Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Button.md

Shows a basic example of rendering a Button component with a label and an onPress handler. This illustrates the fundamental way to instantiate and use the Button.

```tsx
<Button label="Continue" onPress={() => {}} />
```

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

### Complete MessageBox Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/MessageBox.md

A comprehensive example showcasing the MessageBox component within a functional React component. It includes a success message, illustrating how to integrate it into a larger UI structure.

```tsx
const MessageBoxExample = () => (
  <>
    <MessageBox type="success">Profile updated successfully.</MessageBox>
  </>
);
```

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

### Complete SelectionLabel Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/SelectionLabel.md

A complete example illustrating how to use the SelectionLabel component within a functional React component. It includes the necessary import and JSX structure for rendering.

```tsx
const SelectionLabelExample = () => (
  <>
    <SelectionLabel label="Selected" size="s" color="#141414" />
  </>
);
```

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

### Advanced RadioGroup Example with State

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/RadioGroup.md

An advanced example demonstrating the RadioGroup component with state management using `useState`. It shows how to handle user selections and update the UI accordingly. The `radioButtons` prop is used to configure the available options.

```tsx
const [selectedId, setSelectedId] = useState('card');

<RadioGroup
  selectedId={selectedId}
  onPress={setSelectedId}
  radioButtons={[
    { id: 'card', label: 'Card' },
    { id: 'upi', label: 'UPI' },
  ]}/>
```

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

### Complete NotificationNudge Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/NotificationNudge.md

Provides a complete example of using the NotificationNudge component within a React functional component. This includes importing and rendering the component with its essential props.

```tsx
const NotificationNudgeExample = () => (
  <>
    <NotificationNudge heading="File uploaded" appearance="positive" primaryAction={{ label: "Open", onPress: () => {} }} />
  </>
);
```

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

### Basic InputField Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/InputField.md

Shows a simple example of using the InputField component with a label and placeholder. This is suitable for basic text input scenarios.

```tsx
<InputField label="Email" type="textfield" placeholder="name@example.com" />
```

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

### Complete Checkbox Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Checkbox.md

A complete example of rendering a Checkbox component within a React functional component. This shows how to integrate it into a larger UI structure.

```tsx
const CheckboxExample = () => (
  <>
    <Checkbox label="Accept terms" checked={accepted} onPress={() => setAccepted(!accepted)} />
  </>
);
```

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

### Simple Typography Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Typography.md

Shows a basic example of using the Typography component with a specified variant and color. This illustrates how to render simple text with custom styling.

```tsx
<Typography variant="body-s" color="default">Hello world</Typography>
```

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

### Simple NotificationNudge Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/NotificationNudge.md

Shows a basic example of how to render a NotificationNudge component with a heading, a positive appearance, and a primary action. This illustrates the core props for displaying a simple alert.

```tsx
<NotificationNudge heading="File uploaded" appearance="positive" primaryAction={{ label: "Open", onPress: () => {} }} />
```

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

### Simple Toggle Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Toggle.md

A basic example of using the Toggle component with a label and state management. It shows how to bind the 'active' prop to a state variable and update it using 'onValueChange'.

```tsx
<Toggle label="Enable notifications" active={enabled} onValueChange={setEnabled} />
```

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

### Basic NotificationBanner Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/NotificationBanner.md

Demonstrates a simple implementation of the NotificationBanner component with a title, appearance, and a primary action. This is a foundational example for displaying alerts.

```tsx
<NotificationBanner title="Connection restored" appearance="positive" primaryAction={{ label: "View", onPress: () => {} }} />
```

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

### Import IconButton and Icons

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/IconButton.md

Demonstrates how to import the IconButton component and an example icon (IcFavorite) from the opal-mobile library and its associated icons package.

```tsx
import { IconButton } from 'opal-mobile';
import { IcFavorite } from '@opal/icons';
```

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

### InputField: Text Entry Component Examples (React Native)

Source: https://context7.com/ryadav96/opal-mobile-docs/llms.txt

Demonstrates the usage of the InputField component for various text entry scenarios, including basic text fields, password inputs with validation, phone numbers, OTPs, search inputs with icons, and text areas. It highlights different types, states, and accessory slots available.

```tsx
import { InputField } from 'opal-mobile';
import { useState } from 'react';
import { SearchIcon, ClearIcon } from '@opal/icons';

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

// Basic text input
<InputField
  label="Email"
  type="textfield"
  placeholder="name@example.com"
  value={email}
  onChangeText={setEmail}
/>

// Password with validation
<InputField
  label="Password"
  type="password"
  value={password}
  onChangeText={setPassword}
  state={passwordError ? "error" : "rest"}
  supportText={passwordError || "Must be at least 8 characters"}
  mandatory={true}
  showCharacterCount={true}
  maxLength={50}
/>

// Phone number input
<InputField label="Phone" type="phone-number" placeholder="+1 (555) 000-0000" />

// OTP input
<InputField label="Verification Code" type="OTP" maxLength={6} />

// With icons and elements
<InputField
  label="Search"
  type="textfield"
  leftIcon={<SearchIcon />}
  rightIcon={<ClearIcon />}
  trailingElement={<Button label="Search" size="s" />}
  placeholder="Search products..."
/>

// Textarea
<InputField
  label="Description"
  type="textarea"
  multiline={true}
  numberOfLines={4}
  showCharacterCount={true}
  maxLength={500}
/>

// Available options:
// InputFieldType: 'textfield' | 'phone-number' | 'OTP' | 'password' | 'textarea' | 'currency' | 'numeric-field' | etc.
// InputFieldState: 'rest' | 'active' | 'typing' | 'filled' | 'disabled' | 'success' | 'error' | 'warning'
```

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

### Simple LayoutGrid Usage (Columns Variant)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/LayoutGrid.md

Shows a basic example of using the LayoutGrid component with the 'columns' variant. It configures 4 columns with a default preset and no explicit margin or gutter.

```tsx
<LayoutGrid variant="columns" preset="default" columns={4} />
```

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

### Advanced Tab Configuration (TypeScript)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Tab.md

Provides an example of configuring the Tab component with state management for the active tab. It uses `useState` to control the `activeId` and logs the change to the console.

```tsx
const [activeId, setActiveId] = useState('home');

<Tab
  activeId={activeId}
  onChange={(id) => setActiveId(String(id))}
  items={[
    { id: 'home', label: 'Home' },
    { id: 'settings', label: 'Settings' },
  ]} 
/>
```

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

### Button Component Usage in React Native

Source: https://context7.com/ryadav96/opal-mobile-docs/llms.txt

Illustrates the usage of the Button component for primary actions, showcasing different variants, sizes, and states like loading and disabled. Includes examples with and without icons.

```tsx
import { Button } from 'opal-mobile';
import { ArrowRight, Download } from '@opal/icons';

// Basic button
<Button label="Continue" onPress={() => console.log('Pressed')} />

// Variants and sizes
<Button label="Primary" variant="primary" size="l" onPress={handleSubmit} />
<Button label="Secondary" variant="secondary" size="m" onPress={handleCancel} />
<Button label="Tertiary" variant="tertiary" size="s" onPress={handleSkip} />

// With icons and loading state
<Button
  label="Download"
  leftIcon={<Download />}
  rightIcon={<ArrowRight />}
  loading={isLoading}
  disabled={!isValid}
  onPress={handleDownload}
  testID="download-button"
/>
```

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

### InputField Best Practices

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/InputField.md

Recommended practices for using the InputField component effectively.

```APIDOC
## Best Practices

- Prefer controlled usage for forms and settings screens where state is externally managed.
- Pass `testID` for stable E2E selectors.
- Keep labels and action copy explicit and user-facing.
```

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

### Complete RadioGroup Example

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/RadioGroup.md

A complete example of the RadioGroup component, suitable for integration into a React Native application. It includes the necessary import and a functional component structure.

```tsx
const RadioGroupExample = () => (
  <>
    <RadioGroup selectedId={selectedId} onPress={setSelectedId} radioButtons={[{ id: "a", label: "Option A" }, { id: "b", label: "Option B" }]} />
  </>
);
```

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

### Import Toggle Component

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Toggle.md

Demonstrates how to import the Toggle component from the 'opal-mobile' library. This is the first step before using the component in your application.

```tsx
import { Toggle } from 'opal-mobile';
```

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

### Simple Tab Usage (TypeScript)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Tab.md

Illustrates a basic implementation of the Tab component with two items: 'Overview' and 'Activity'. It shows how to manage the active tab using state variables for `activeId` and `setActiveId`.

```tsx
<Tab items={[{ id: "overview", label: "Overview" }, { id: "activity", label: "Activity" }]} activeId={activeId} onChange={setActiveId} />
```

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

### Simple Badge Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Badge.md

Demonstrates the basic usage of the Badge component with a label and a success appearance. This is the most straightforward way to render a badge.

```tsx
<Badge label="New" appearance="success" />
```

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

### Import InputField Component

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/InputField.md

Demonstrates how to import the InputField component from the 'opal-mobile' library. This is the first step before using the component in your application.

```tsx
import { InputField } from 'opal-mobile';
```

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

### Render Simple SelectionLabel

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/SelectionLabel.md

Demonstrates the basic usage of the SelectionLabel component with essential props: 'label', 'size', and 'color'. This is the most straightforward way to display a selection label.

```tsx
<SelectionLabel label="Selected" size="s" color="#141414" />
```

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

### Toggle Component with State Management

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Toggle.md

An advanced usage example demonstrating how to manage the state of a Toggle component using React's 'useState' hook. This is suitable for forms and settings screens.

```tsx
const [enabled, setEnabled] = useState(false);

<Toggle
  label="Biometric login"
  active={enabled}
  onValueChange={setEnabled}
/>
```

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

### Import LayoutGrid Component

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/LayoutGrid.md

Demonstrates how to import the LayoutGrid component from the 'opal-mobile' library. This is the first step before using the component in your application.

```tsx
import { LayoutGrid } from 'opal-mobile';
```

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

### SelectorPill with State Management

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/SelectorPill.md

Shows an advanced usage example of the SelectorPill component where its selected state is managed by React's `useState` hook. This allows for dynamic updates to the pill's selection status.

```tsx
const [selected, setSelected] = useState(false);

<SelectorPill
  label="Priority"
  selected={selected}
  onPress={() => setSelected((prev) => !prev)}
/>
```

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

### Advanced Radio Usage with State Management (TypeScript/React)

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/Radio.md

An example demonstrating the Radio component's integration with React's `useState` hook for managing the selected state. This pattern is common for controlled components.

```tsx
const [selectedId, setSelectedId] = useState('basic');

<Radio
  id="pro"
  label="Pro"
  selected={selectedId === 'pro'}
  onPress={setSelectedId}
/>
```

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

### Simple SelectorPill Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/SelectorPill.md

Illustrates the basic usage of the SelectorPill component with a label and a selected state. The `onPress` prop is included as a placeholder for interaction handling.

```tsx
<SelectorPill label="Recommended" selected={true} onPress={() => {}} />
```

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

### Simple TabItem Usage

Source: https://github.com/ryadav96/opal-mobile-docs/blob/main/TabItem.md

Demonstrates the basic usage of the TabItem component with a label and an active state. It includes a placeholder onPress handler.

```tsx
<TabItem label="Overview" state="active" onPress={() => {}} />
```