open-index/open-npm huggingface dataset:
npm package: @rmwc/base
Description: RMWC base module
Author: rmwc
Latest version: 14.3.5

# Portal

The Portal component will let you render components to a portal.

- Module **@rmwc/base**


## Portal

```jsx
<Portal />
```

## PortalProvider (optional)

The PortalProvider component is an optional component that provides a global context for the Portal element in the RMWC library. This context is used by the Portal component to retrieve the Portal element without relying on document.getElementById, which doesn't work inside a Shadow DOM.

The PortalProvider component is used by importing it into your project and wrapping it around your application or component tree similar to TypographyProvider.

```jsx
function App() {
  return (
    <PortalProvider>
      <div>
        {/* Other components here */}
        <Portal />
      </div>
    </PortalProvider>
  );
}
```

In this example, the PortalProvider component is used to wrap the Portal component. Elements rendered to the portal will now render directly to the portalElement stored in the portal context instead of retrieving the Portal element using `document.getElementById()`.

The PortalProvider component is optional for most users. If you are using the RMWC library in a Shadow DOM and the Portal component is not rendering inside the correct Portal element, then you can use the PortalProvider component to ensure that the Portal element is retrieved using the PortalContext.

## Notes

The PortalProvider component does not accept any props.

The Portal component only needs to be a descendent of PortalProvider for it to be functional.

Unlike ThemeProvider or TypographyProvider, the PortalProvider component should only be used once in your application or component tree. (If you include multiple instances of PortalProvider, the context will only grab the context values from the first PortalProvider parent and the solution will break.)
npm package: @rmwc/button
Description: Buttons communicate the action that will occur when the user touches them.
Author: rmwc
Latest version: 14.3.5

# Buttons

Buttons communicate the action that will occur when the user touches them.

- Module **@rmwc/button**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/button/styles';
  - Or include stylesheets
    - **'@material/button/dist/mdc.button.css'**
    - **'@rmwc/@rmwc/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/](https://material.io/develop/web/components/buttons/)

```jsx
<Button label="Button" />
```

```jsx
<>
  <Button label="Icon" icon="favorite" />
  <Button label="Trailing" trailingIcon="keyboard_arrow_right" />
  <Button label="Loading" icon={<CircularProgress />} />
</>
```

```jsx
<>
  <Button label="Raised" raised />
  <Button label="Unelevated" unelevated />
  <Button label="Outlined" outlined />
  <Button label="Dense" dense />
  <Button label="No Ripple" ripple={false} />
</>
```

```jsx
<>
  <Button label="Danger" danger raised />
  <Button label="Danger" danger outlined />
  <Button label="Danger" danger />
</>
```

```jsx
<>
  <Button
    label="With Theme"
    raised
    theme={['secondaryBg', 'onSecondary']}
  />
  {/**
    This example uses "accent" to control the color of the Ripple.
    See the documentation on Ripples.
  */}
  <Button label="With Theme" theme="secondary" />
</>
```

```jsx
<Button>
  {/** Alternatively pass content as children */}
  As Children
</Button>
```

```jsx
<>
  {/** Wrapping a button in TouchTargetWrapper will automatically set its `touch` prop to true. */}
  <TouchTargetWrapper>
    <Button>Touch Accessible</Button>
  </TouchTargetWrapper>
</>
```

## Button
The Button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Content specified as children. |
| `danger` | `boolean` | Used to indicate a dangerous action. |
| `dense` | `boolean` | Make the Button dense. |
| `disabled` | `boolean` | Make the button disabled |
| `icon` | `IconPropT` | An Icon for the Button |
| `label` | `any` | Content specified as a label prop. |
| `outlined` | `boolean` | Make the button outlined. |
| `raised` | `boolean` | Make the Button raised. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `touch` | `boolean` | Makes the button more touch friendly. This will automatically be set true if used inside of TouchTargetWrapper. |
| `trailingIcon` | `IconPropT` | A trailing icon for the Button |
| `unelevated` | `boolean` | Make the button unelevated. |
npm package: @rmwc/checkbox
Description: RMWC Checkbox component
Author: rmwc
Latest version: 14.3.5

# Checkboxes

Checkboxes allow the user to select multiple options from a set.

- Module **@rmwc/checkbox**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/checkbox/styles';
  - Or include stylesheets
    - **'@material/checkbox/dist/mdc.checkbox.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/checkboxes/](https://material.io/develop/web/components/input-controls/checkboxes/)

```jsx
function Example() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox
      label="Cookies"
      checked={checked}
      onChange={(evt) => setChecked(!!evt.currentTarget.checked)}
    />
  );
}
```

```jsx
<Checkbox label="Pizza" />
```

```jsx
<Checkbox>Icecream</Checkbox>
```

```jsx
<>
  <Checkbox label="Broccoli" indeterminate />

  <Checkbox label="Always On" checked />
  <Checkbox label="Always Off" checked={false} />
</>
```

## Checkbox
A Checkbox component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `boolean` | Toggle the control on and off. |
| `disabled` | `boolean` | Disables the control. |
| `foundationRef` | `Ref<MDCCheckboxFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `id` | `string` | A DOM ID for the toggle. |
| `indeterminate` | `boolean` | Make the control indeterminate |
| `inputRef` | `Ref<HTMLInputElement<>>` | A reference to the native input. |
| `label` | `ReactNode` | A label for the control. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @rmwc/circular-progress
Description: Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.
Author: rmwc
Latest version: 14.3.5

# Circular Progress

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

- Module **@rmwc/circular-progress**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/circular-progress/styles';
  - Or include stylesheets
    - **'@rmwc/circular-progress/circular-progress.css'**


## Basic Usage

```jsx
<CircularProgress label="progress" />
```

```jsx
<>
  <CircularProgress label="progress" progress={0.3} />
  <CircularProgress label="progress" progress={0.6} />
  <CircularProgress label="progress" progress={0.9} />
  <CircularProgress label="progress" progress={1} />
</>
```

## Sizing

```jsx
<>
  <CircularProgress label="xsmall progress" size="xsmall" />
  <CircularProgress label="small progress" size="small" />
  <CircularProgress label="medium progress" size="medium" />
  <CircularProgress label="large progress" size="large" />
  <CircularProgress label="xlarge progress" size="xlarge" />
  <CircularProgress label="progress" size={72} />
</>
```

## Usage with other components

```jsx
<>
  <Button
    icon={<CircularProgress label="progress" theme="secondary" />}
    label="Cookies"
  />

  <List>
    <SimpleListItem
      graphic={<CircularProgress label="progress" />}
      text="Pizza"
    />
    <SimpleListItem graphic="favorite" text="Icecream" />
  </List>

  <ChipSet>
    <Chip
      icon={<CircularProgress label="progress" size="xsmall" />}
      label="Donuts"
    />
  </ChipSet>
</>
```

## CircularProgress
A Circular Progress indicator.

### Props

| Name | Type | Description |
|------|------|-------------|
| `closed` | `boolean` | Hides the progress bar. Adding / removing this prop will trigger an animation in or out. |
| `label` | `string` | The label which will set an aria-label. |
| `max` | `number` | Max value for determinate progress bars. |
| `min` | `number` | Min value for determinate progress bars. |
| `progress` | `number` | Value for determinate progress bars. |
| `size` | `number \| Size` | The size of the loader you would like to render. |
npm package: @rmwc/elevation
Description: RMWC Elevation component
Author: rmwc
Latest version: 14.3.5

# Elevation

Elevation is the relative distance between two surfaces along the z-axis.

- Module **@rmwc/elevation**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/elevation/styles';
  - Or include stylesheets
    - **'@material/elevation/dist/mdc.elevation.css'**
- MDC Docs: [https://material.io/develop/web/components/elevation/](https://material.io/develop/web/components/elevation/)

```jsx
<>
  {Array(25)
    .fill(undefined)
    .map((val, i) => (
      <Elevation z={i} key={i}>
        {i}dp
      </Elevation>
    ))}
</>
```

```jsx
function Example() {
  const [elevation, setElevation] = React.useState(0);

  return (
    <Elevation
      z={elevation}
      transition
      onMouseOver={() => setElevation(24)}
      onMouseOut={() => setElevation(0)}
    >
      Hover Me {elevation}dp
    </Elevation>
  );
}
```

## Wrapping Children

You can avoid adding extra DOM nodes by using the `wrap` prop on elevation. This will apply the classes directly to the child component. Additionally, Elevation is simply a `className`, so you can achieve the same effect by adding `className="mdc-elevation--z15"`.

```jsx
<Elevation z={21} wrap>
  <span>Wrapped!</span>
</Elevation>
```

## Elevation
The Elevation Component

### Props

| Name | Type | Description |
|------|------|-------------|
| `transition` | `boolean` | Allows for smooth transitions between elevations when the z value changes. |
| `wrap` | `boolean` | Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. |
| `z` | `string \| number` | A number from 0 - 24 for different levels of elevation |
npm package: @rmwc/fab
Description: RMWC Floating Action Button component
Author: rmwc
Latest version: 14.3.5

# Fabs

A floating action button (FAB) represents the primary action of a screen.

- Module **@rmwc/fab**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/fab/styles';
  - Or include stylesheets
    - **'@material/fab/dist/mdc.fab.css'**
    - **'@rmwc/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/floating-action-buttons/](https://material.io/develop/web/components/buttons/floating-action-buttons/)

```jsx
<Fab icon="favorite" />
```

```jsx
<Fab icon="favorite" mini />
```

```jsx
<>
  <Fab icon="add" label="Create" />
  <Fab trailingIcon="add" label="Create" />
  <Fab label="Label only" />
</>
```

```jsx
<>
  <Fab icon="favorite_outline" theme={['primaryBg', 'onPrimary']} />
  <Fab
    icon="delete"
    style={{ backgroundColor: 'var(--mdc-theme-error)' }}
    theme={['onError']}
  />
</>
```

## Fab
A floating action button component

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Content specified as children. |
| `exited` | `boolean` | Animates the FAB out of view. When this class is removed, the FAB will return to view. |
| `icon` | `IconPropT` | The icon for the FAB |
| `label` | `any` | Make the Fab extended with a label. |
| `mini` | `boolean` | Make the Fab smaller. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `trailingIcon` | `IconPropT` | A trialing icon for the FAB |
npm package: @rmwc/form-field
Description: RMWC FormField component
Author: James Friedman
Latest version: 1.10.1-alpha.0
Deprecated: this

# Form Fields

> MDC Form Field provides an mdc-form-field helper class for easily making theme-aware, RTL-aware form field + label combos. It also provides an MDCFormField class for easily making input ripples respond to label events.

- import from **rmwc/FormField** 
- import styles from **@material/form-field/dist/mdc.form-field.css**
- [https://material.io/develop/web/components/input-controls/form-fields/](https://material.io/develop/web/components/input-controls/form-fields/)

Its not immediately clear when to use this component, but it has been included in RMWC for completeness. Please refer to the official MDC docs for use cases.

```jsx render
import { FormField } from 'rmwc/FormField';

<FormField>
  <input type="checkbox" id="input"/>
  <label htmlFor="input">Input Label</label>
</FormField>
```

```jsx renderOnly
import { DocumentComponent } from 'rmwc/Base/utils/DocumentComponent';

<DocumentComponent displayName="FormField" />
```
npm package: @rmwc/formfield
Description: MDC Form Field provides an mdc-formfield helper class for easily making theme-aware, RTL-aware form field + label combos. It also provides an MDCFormField class for easily making input ripples respond to label events.
Author: rmwc
Latest version: 14.3.5

# Form Fields

MDC Form Field provides an mdc-formfield helper class for easily making theme-aware, RTL-aware form field + label combos. It also provides an MDCFormField class for easily making input ripples respond to label events.

- Module **@rmwc/formfield**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/formfield/styles';
  - Or include stylesheets
    - **'@material/form-field/dist/mdc.form-field.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/form-fields/](https://material.io/develop/web/components/input-controls/form-fields/)

```jsx
<FormField>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>
```

## Align end

```jsx
<FormField alignEnd>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>
```

## No wrap

```jsx
<FormField noWrap>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>
```

## Space between

```jsx
<FormField spaceBetween>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>
```

## FormField
A FormField component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `alignEnd` | `boolean` | Position the input after the label. |
| `foundationRef` | `Ref<MDCFormFieldFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `noWrap` | `boolean` | Forces text to stay on a single line. |
| `spaceBetween` | `boolean` | Adds space between content. |
npm package: @rmwc/grid
Description: RMWC Grid component
Author: rmwc
Latest version: 14.3.5

# Layout Grid

Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

- Module **@rmwc/grid**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/grid/styles';
  - Or include stylesheets
    - **'@material/layout-grid/dist/mdc.layout-grid.css'**
- MDC Docs: [https://material.io/develop/web/components/layout-grid/](https://material.io/develop/web/components/layout-grid/)

```jsx
<Grid>
  <GridCell span={4}>1</GridCell>
  <GridCell span={4}>2</GridCell>
  <GridCell span={4}>3</GridCell>
</Grid>
```

```jsx
<Grid>
  {/* If you need additional control over height of your grid, or need to add SubGrids, you can add your own GridRow components. */}
  <GridRow>
    <GridCell span={6}>1</GridCell>
    <GridCell span={6}>
      <GridRow>
        <GridCell span={6}>a</GridCell>
        <GridCell span={6}>b</GridCell>
      </GridRow>
    </GridCell>
  </GridRow>
</Grid>
```

## Grid
A Grid component

### Props

| Name | Type | Description |
|------|------|-------------|
| `align` | `"left" \| "right"` | Specifies the alignment of the whole grid. |
| `children` | `ReactNode` | Children for the Grid |
| `fixedColumnWidth` | `boolean` | Specifies the grid should have fixed column width. |


## GridCell
A Grid cell

### Props

| Name | Type | Description |
|------|------|-------------|
| `align` | `"middle" \| "top" \| "bottom"` | Specifies the alignment of cell |
| `desktop` | `number` | Number of columns to span on a desktop. |
| `order` | `number` | Specifies the order of the cell. |
| `phone` | `number` | Number of columns to span on a phone. |
| `span` | `number` | Default number of columns to span. |
| `tablet` | `number` | Number of columns to span on a tablet. |


## GridRow
By default, an inner grid component is included inside of <Grid>. Use GridRow when doing nested Grids.
npm package: @rmwc/icon-button
Description: Icon buttons allow users to take actions, and make choices, with a single tap.
Author: rmwc
Latest version: 14.3.5

# Icon Buttons

Icon buttons allow users to take actions, and make choices, with a single tap.

- Module **@rmwc/icon-button**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/icon-button/styles';
  - Or include stylesheets
    - **'@material/icon-button/dist/mdc.icon-button.css'**
    - **'@rmwc/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/icon-buttons/](https://material.io/develop/web/components/buttons/icon-buttons/)

## Basic Usage

`IconButton` inherits from the `Icon` component and can be passed icons in the same way.

```jsx
<>
  <IconButton icon="star" label="Rate this!" />

  <IconButton icon="favorite" label="Favorite" disabled />

  <IconButton
    icon="images/icons/twitter.png"
    aria-label="Tweet it!"
    tag="a"
    target="_blank"
    href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
      'You should definitely be using RMWC for your next project! https://rmwc.io'
    )}`}
  />
</>
```

## Usage as a Toggle

To use as a toggle, specify an additional toggled on state using 'onIcon'.

```jsx
<>
  <IconButton
    aria-label="favorite"
    icon="favorite_border"
    onIcon="favorite"
  />
  <IconButton
    aria-label="favorite"
    icon="favorite"
    onIcon="favorite"
    disabled
  />
</>
```

```jsx
function Controlled() {
  const [isChecked, setIsChecked] = React.useState(false);
  return (
    <>
      <IconButton
        aria-label="start"
        checked={isChecked}
        onClick={() => setIsChecked(!isChecked)}
        onIcon="star"
        icon="star_border"
      />

      <IconButton
        aria-label="social media"
        checked={isChecked}
        onClick={() => setIsChecked(!isChecked)}
        onIcon="images/icons/twitter.png"
        icon="images/icons/facebook.png"
      />
    </>
  );
}
```

```jsx
<IconButton
  aria-label="red and green"
  onIcon={
    <div
      style={{
        background: 'red',
        width: '24px',
        height: '24px'
      }}
    />
  }
  icon={
    <div
      style={{
        background: 'green',
        width: '24px',
        height: '24px',
        borderRadius: '50%'
      }}
    />
  }
/>
```

## IconButton
An IconButton component that can also be used as a toggle.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `boolean` | Controls the on / off state of the a toggleable button. |
| `disabled` | `boolean` | Makes the button disabled |
| `foundationRef` | `Ref<MDCIconButtonToggleFoundation<>>` | Advanced: A reference to the MDCFoundation. Only for Toggleable buttons. |
| `icon` | `IconPropT` | Icon for the button |
| `label` | `string` | Apply an aria label. |
| `onChange` | `(evt: IconButtonOnChangeEventT) => void` | An onChange callback that receives a custom event. evt.detail = { isOn: boolean } |
| `onIcon` | `IconPropT` | If specified, renders a toggle with this icon as the on state. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
npm package: @rmwc/linear-progress
Description: Progress and activity indicators are visual indications of an app loading content.
Author: rmwc
Latest version: 14.3.5

# Linear Progress

Progress and activity indicators are visual indications of an app loading content.

- Module **@rmwc/linear-progress**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/linear-progress/styles';
  - Or include stylesheets
    - **'@material/linear-progress/dist/mdc.linear-progress.css'**
- MDC Docs: [https://material.io/develop/web/components/linear-progress/](https://material.io/develop/web/components/linear-progress/)

```jsx
<LinearProgress progress={0.5} />
```

```jsx
<LinearProgress progress={0.6} buffer={0.8} />
```

```jsx
<LinearProgress />
```

```jsx
<LinearProgress reversed />
```

## LinearProgress
A component to display linear progress.

### Props

| Name | Type | Description |
|------|------|-------------|
| `buffer` | `number` | A Progress buffer float percentage between 0 and 1. |
| `closed` | `boolean` | Hides the progress bar. Adding / removing this prop will trigger an animation in or out. |
| `foundationRef` | `Ref<MDCLinearProgressFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `progress` | `number` | Progress float percentage between 0 and 1. |
| `reversed` | `boolean` | Progress goes from right to left. |
npm package: @rmwc/provider
Description: RMWC Provider component
Author: rmwc
Latest version: 14.3.5

# Provider

A component that provides global configuration for RMWC.

- Module **@rmwc/provider**


You can wrap your top level App component with RMWC provider to set global configuration options. Just pass the options in as props.

```jsx

  `
  import React from 'react';
  import * as ReactDOM from 'react-dom';
  import App from './App'; // your main app component
  import { RMWCProvider } from '@rmwc/provider';

  // This example disables ripples globally by default
  ReactDOM.render(
    <RMWCProvider
      // Globally disable ripples
      ripple={false}
      // Global options for icons
      // Takes the same options as the icon component
      icon={{
        basename: 'material-icons'
      }}
      // Global options for typography
      // allows mapping of a defaultTag or specific classes
      // See the Typography docs for more info
      typography={{
        defaultTag: 'div',
        headline1: 'h1'
      }}
      // Global options for tooltips
      // Takes most of the options for tooltips
      // See the Tooltip docs for more info
      tooltip={{
        align: 'right'
      }}
    >
      <App />
    </RMWCProvider>,
    document.getElementById('root'),
  );
`

```

```jsx
<RMWCProvider ripple={false}>
  <Button>Click me</Button>
</RMWCProvider>
```

```jsx
<RMWCProvider ripple={true}>
  <Button>Click me</Button>
</RMWCProvider>
```

## RMWCProvider
A provider for setting global options in RMWC.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Children to render |
| `icon` | `Partial<IconOptions>` | Global options for icons |
| `ripple` | `boolean` | Enable / Disable interaction ripples globally |
| `tooltip` | `Partial<TooltipOptions>` | Global tooltip options |
| `typography` | `Partial<TypographyOptions>` | Global typography options |
npm package: @rmwc/radio
Description: RMWC Radio component
Author: rmwc
Latest version: 14.3.5

# Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

- Module **@rmwc/radio**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/radio/styles';
  - Or include stylesheets
    - **'@material/radio/dist/mdc.radio.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/radio-buttons/](https://material.io/develop/web/components/input-controls/radio-buttons/)

## Controlled Usage

```jsx
function Example() {
  const [value, setValue] = React.useState('cookies');

  return (
    <>
      <Radio
        value="cookies"
        checked={value === 'cookies'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Cookies
      </Radio>

      <Radio
        value="pizza"
        checked={value === 'pizza'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Pizza
      </Radio>

      <Radio
        value="icecream"
        checked={value === 'icecream'}
        onChange={(evt) => setValue(String(evt.currentTarget.value))}
      >
        Icecream
      </Radio>
    </>
  );
}
```

## Uncontrolled Usage

You can use Radio Buttons and receive change events without having to manually set the `checked` prop. Just give the Radio components the same `name`. This example also shows using the `label` prop instead of setting the label as a child.

```jsx
<>
  <Radio
    label="Cookies"
    value="cookies"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Pizza"
    value="pizza"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Icecream"
    value="icecream"
    name="myRadioGroup"
    onChange={(evt) => console.log(evt.currentTarget.value)}
  />
</>
```

## Radio
A Radio button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `boolean` | Toggle the control on and off. |
| `disabled` | `boolean` | Disables the control. |
| `foundationRef` | `Ref<MDCRadioFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `id` | `string` | A DOM ID for the toggle. |
| `inputRef` | `Ref<HTMLInputElement<>>` | A reference to the native input. |
| `label` | `ReactNode` | A label for the control. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @rmwc/ripple
Description: RMWC Ripple component
Author: rmwc
Latest version: 14.3.5

# Ripples

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

- Module **@rmwc/ripple**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/ripple/styles';
  - Or include stylesheets
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/ripples/](https://material.io/develop/web/components/ripples/)

Ripples will wrap whatever child component you pass it and apply the appropriate classes and styles.

```jsx
<Ripple>
  <p>Standard Ripple</p>
</Ripple>
```

```jsx
<Ripple primary>
  <p>Primary</p>
</Ripple>
```

```jsx
<Ripple accent>
  <p>Accent</p>
</Ripple>
```

```jsx
<Ripple unbounded>
  <p>Unbounded</p>
</Ripple>
```

## Ripple
A component for adding Ripples to other components.

### Props

| Name | Type | Description |
|------|------|-------------|
| `accent` | `boolean` | Makes the ripple an accent color |
| `disabled` | `boolean` | makes the ripple disabled |
| `foundationRef` | `Ref<MDCRippleFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `primary` | `boolean` | Makes the ripple primary |
| `surface` | `boolean` | For internal use |
| `unbounded` | `boolean` | Makes the ripple unbounded |
npm package: @rmwc/segmented-button
Description: Segmented buttons allow users to toggle the selected states of grouped buttons.
Author: rmwc
Latest version: 14.3.5

# Segmented Button

Segmented buttons allow users to toggle the selected states of grouped buttons.

- Module **@rmwc/segmented-button**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/segmented-button/styles';
  - Or include stylesheets
    - **'@material/segmented-button/dist/mdc.segmented-button.css'**
    - **'@rmwc/@rmwc/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/segmented-button/](https://material.io/develop/web/components/segmented-button/)

```jsx
function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({ ...selected, [key]: !selected[key] });
  return (
    <SegmentedButton>
      <Segment
        icon="favorite"
        value="cookies"
        onClick={() => toggleSelected('cookies')}
        selected={selected.cookies}
      />
      <Segment
        label="Button"
        value="pizza"
        onClick={() => toggleSelected('pizza')}
        selected={selected.pizza}
      />
      <Segment
        icon="favorite"
        label="Button"
        value="icecream"
        onClick={() => toggleSelected('icecream')}
        selected={selected.icecream}
      />
    </SegmentedButton>
  );
}
```

```jsx
function Example() {
  const [selected, setSelected] = React.useState('icecream');
  return (
    <SegmentedButton selectType="single">
      <Segment
        icon="favorite"
        value="cookies"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'cookies'}
      />
      <Segment
        label="Button"
        value="pizza"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'pizza'}
      />
      <Segment
        icon="favorite"
        label="Button"
        value="icecream"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'icecream'}
      />
    </SegmentedButton>
  );
}
```

```jsx
<>
  {/** Wrapping a button in TouchTargetWrapper will automatically set its `touch` prop to true. */}
  <TouchTargetWrapper>
    <Segment>Touch Accessible</Segment>
  </TouchTargetWrapper>
</>
```

## SegmentedButton
### Props

| Name | Type | Description |
|------|------|-------------|
| `selectType` | `"multiple" \| "single"` | Determines whether the user is able to select multiple or a single button at a time. Default to multiple. |
npm package: @rmwc/shape
Description: RMWC Shape component
Author: James Friedman
Latest version: 2.2.0

# Shape

> Shapes direct attention, identify components, communicate state, and express brand.

- import from **'@rmwc/shape'**;
- Import styles:
  - import **'@material/shape/dist/mdc.shape.css'**;
- MDC Docs: [https://material.io/develop/web/components/shape/](https://material.io/develop/web/components/shape/)

```jsx render
import { ShapeContainer } from '@rmwc/shape';
import { Button } from '@rmwc/button';
import { Card, CardPrimaryAction, CardMedia } from '@rmwc/card';

<ShapeContainer corner="10" backgroundColor="#f2f2f2">
  <Button unelevated>Button</Button>
</ShapeContainer>

<ShapeContainer corner="5" backgroundColor="#f2f2f2">
  <Button unelevated>Button</Button>
</ShapeContainer>

<ShapeContainer
  topLeftCorner="10"
  bottomRightCorner="10"
  outlineWidth="2"
  outlineColor="var(--mdc-theme-primary)"
  backgroundColor="#f2f2f2"
>
  <Button outlined>Button</Button>
</ShapeContainer>

<ShapeContainer
  topLeftCorner="30"
  bottomRightCorner="30"
  outlineWidth="1"
  outlineColor="#e0e0e0"
  backgroundColor="#f2f2f2"
>
  <Card outlined>
    <CardPrimaryAction>
      <div style={{display: 'flex'}}>
      <CardMedia square style={{
        width: '110px',
        backgroundImage: 'url(https://material-components-web.appspot.com/images/1-1.jpg)'
        }}
      />
        <div style={{padding: '20px'}}>
          Card
        </div>
      </div>
    </CardPrimaryAction>
  </Card>
</ShapeContainer>
```

```jsx renderOnly
import { DocumentComponent } from '@rmwc/base/utils/DocumentComponent';
import * as docs from './docgen.json';

<DocumentComponent docs={docs} displayName="ShapeContainer" />
```
npm package: @rmwc/switch
Description: On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
Author: rmwc
Latest version: 14.3.5

# Switches

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

- Module **@rmwc/switch**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/switch/styles';
  - Or include stylesheets
    - **'@material/switch/dist/mdc.switch.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/switches/](https://material.io/develop/web/components/input-controls/switches/)

Switches are identical in function to the Checkbox component, they just present a different UI / UX paradigm.

```jsx
<Switch defaultChecked label="Pizza" />
```

```jsx
function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <Switch
      checked={checked}
      onClick={(evt) => setChecked((c) => !c)}
      label="Cookies"
    />
  );
}
```

```jsx
<Switch>Icecream</Switch>
```

```jsx
<>
  <Switch disabled label="Disabled" />
  <Switch disabled defaultChecked label="Disabled" />
</>
```

## Switch
A Switch component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `boolean` | Toggle the control on and off. |
| `disabled` | `boolean` | Disables the control. |
| `foundationRef` | `Ref<MDCSwitchFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `id` | `string` | A DOM ID for the toggle. |
| `inputRef` | `Ref<HTMLInputElement<>>` | A reference to the native input. |
| `label` | `ReactNode` | A label for the control. |
| `processing` | `boolean` |  |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @rmwc/text-field
Description: RMWC TextField component
Author: James Friedman
Latest version: 1.10.1-alpha.0

# Text Fields

> Text fields allow users to input, edit, and select text.

- import from **rmwc/TextField**  
- import styles from **@material/textfield/dist/mdc.textfield.css**
- [https://material.io/develop/web/components/input-controls/text-field/](https://material.io/develop/web/components/input-controls/text-field/)

## Text Field Variants

```jsx render
import { TextField, TextFieldIcon, TextFieldHelperText } from 'rmwc/TextField';

{/* Standard text field. */}
<TextField label="standard..." />

{/* Help text can be added to appear on focus. Place it directly after TextField. */}
<TextFieldHelperText>Optional help text.</TextFieldHelperText>

{/* Leading and trailing icons can be used, they look the best with the box prop. You can pass anything the Icon component accepts. */}
<TextField box withLeadingIcon="search" label="box withLeadingIcon..." />

{/* If you need full control over the icon, you can pass TextFieldIcon in and add your own props. */}
<TextField box withTrailingIcon={<TextFieldIcon icon="close"/>} label="box withTrailingIcon..." />

{/* An outlined TextField */}
<TextField outlined label="outlined..." />

{/* A fullWidth input. */}
<TextField fullwidth placeholder="fullWidth..."/>

{/* You can make the TextField a textarea. */}
<TextField textarea fullwidth label="textarea..." rows="8" />

{/* You can optionally make HelperText always visible with the persistent prop. */}
<TextFieldHelperText persistent validationMsg>The field is required.</TextFieldHelperText>

{/* Disabled text field. */}
<TextField disabled label="disabled..." />
```

## HTML Input Types

A preview of how `material-components-web` handles styling input types for your browser.

```jsx render
import { TextField, TextFieldIcon, TextFieldHelperText } from 'rmwc/TextField';

<TextField box label="text" type="text"/>
<TextField box label="color" type="color" style={{width: '6rem'}}/>
<TextField box label="date" type="date"/>
<TextField box label="datetime-local" type="datetime-local"/>
<TextField box label="month" type="month"/>
<TextField box label="range" type="range"/>
<TextField box label="time" type="time"/>
<TextField box label="week" type="week"/>
```

```jsx renderOnly
import { DocumentComponent } from 'rmwc/Base/utils/DocumentComponent';

<DocumentComponent displayName="TextField" />
<DocumentComponent displayName="TextFieldIcon" composes={['Icon']}/>
<DocumentComponent displayName="TextFieldHelperText" />
```
npm package: @rmwc/touch-target
Description: Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24 dp, but the padding surrounding it comprises the full 48 x 48 dp touch target.
Author: rmwc
Latest version: 14.3.5

# Touch Target

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24 dp, but the padding surrounding it comprises the full 48 x 48 dp touch target.

- Module **@rmwc/touch-target-wrapper**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/touch-target-wrapper/styles';
  - Or include stylesheets
    - **'@material/button/dist/mdc.button.css'**
- MDC Docs: [https://material.io/design/usability/accessibility.html#understanding-accessibility](https://material.io/design/usability/accessibility.html#understanding-accessibility)

```jsx
<TouchTargetWrapper>
  <Button label="Button" />
</TouchTargetWrapper>
```

## TouchTargetWrapper
The ButTouchTargetWrapperon component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Content specified as children. |
npm package: @rmwc/typography
Description: Material Design’s text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
Author: rmwc
Latest version: 14.3.5

# Typography

Material Design’s text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

- Module **@rmwc/typography**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/typography/styles';
  - Or include stylesheets
    - **'@material/typography/dist/mdc.typography.css'**
- MDC Docs: [https://material.io/develop/web/components/typography/](https://material.io/develop/web/components/typography/)

## Basic Usage

```jsx
<>
  <Typography use="headline1">headline1</Typography>
  <Typography use="headline2">headline2</Typography>
  <Typography use="headline3">headline3</Typography>
  <Typography use="headline4">headline4</Typography>
  <Typography use="headline5">headline5</Typography>
  <Typography use="headline6">headline6</Typography>
  <Typography use="subtitle1">subtitle1</Typography>
  <Typography use="subtitle2">subtitle2</Typography>
  <Typography use="body1">body1</Typography>
  <Typography use="body2">body2</Typography>
  <Typography use="caption">caption</Typography>
  <Typography use="button">button</Typography>
  <Typography use="overline">overline</Typography>
</>
```

```jsx
<Typography use="headline6" tag="h3">
  headline6
</Typography>
```

## Provider Setup

You can globally map specify type classes to HTML tags for semantics, or specify a default to be used instead of `span`.

```jsx
<RMWCProvider
  typography={{
    /** Make all Typography components default to <div>  */
    defaultTag: 'div',
    /** Make headline5 <h5>  */
    headline5: 'h5',
    /** Make body2 <p>  */
    body2: 'p',
    /** Use your own component  */
    body1: ({ children, ...rest }) => (
      <span>
        <b>{children}!!!</b>
      </span>
    )
  }}
>
  <Typography use="headline6">Rendered default `div`</Typography>
  <Typography use="headline5">Rendered with `h5`</Typography>
  <Typography use="body2">Rendered with `p`</Typography>
  <Typography use="body1">Custom rendering</Typography>
</RMWCProvider>
```

For backwards compatible typography tags, you can import and use `typographyDefaults` from `@rmwc/provider`.

```jsx
<RMWCProvider typography={typographyDefaults}>
  <Typography use="headline6">Rendered default `span`</Typography>
  <Typography use="headline5">Rendered with `span`</Typography>
  <Typography use="body2">Rendered with `span`</Typography>
</RMWCProvider>
```

## Typography
The Typography Component

### Props

| Name | Type | Description |
|------|------|-------------|
| `use` | `TypographyT` | The typography style. |
npm package: @rmx-ui/types
Description: TypeScript type definitions for RMX UI Library web components
Author: Luis Velito
Latest version: 1.0.0

# @rmx-ui/types

TypeScript type definitions for RMX UI Library web components.

## Installation

```bash
npm install @rmx-ui/types
```

## Usage

### React

```typescript
// In your main app file or types file
import '@rmx-ui/types/react';

// Now use components with full TypeScript support
<ui-avatar initials="JD" size="lg" />
<contact-cell name="John Doe" />
```

### Auto-completion

This package provides full TypeScript IntelliSense for:
- Component props
- Valid property values
- Event handlers

## Components Included

- `ui-avatar` - User avatars
- `contact-cell` - Contact information
- `status-badge` - Status indicators
- `repair-orders-table` - Data tables
- `ui-text` - Typography
- `ui-icon` - Icons
- And more...

## License

MIT
npm package: @rn-ave/ave
Description: React Native Agent Visual Edit - Complete package with all dependencies
Latest version: 0.1.0

# @rn-ave/ave

> Complete package for React Native Agent Visual Edit

This is a convenience package that includes all the core dependencies you need to get started with rn-ave.

## What's Included

This package automatically installs:
- `@rn-ave/core` - UI overlay and context extraction
- `@rn-ave/babel-plugin` - Source location injection
- `@rn-ave/metro-plugin` - Editor integration

## Installation

```bash
npm install @rn-ave/ave --save-dev
```

## Usage

See the [main documentation](https://github.com/kalil0321/rn-ave) for setup instructions.

## License

MIT
npm package: @rn-ave/core
Description: React Native Agent Visual Edit - core library for visual component selection and AI agent integration
Latest version: 0.1.1

# @rn-ave/core 🎯

The core library for `rn-ave` (React Native Agent Visual Edit). It provides the visual inspector UI, component selection logic, and context extraction for AI agents.

## Installation

```bash
npm install @rn-ave/core
```

## Usage

The easiest way to use `rn-ave` is with **auto-initialization**. Import it at the **very top** of your entry file:

**For standard Expo or React Native projects:**
Add to `App.tsx` or `index.js`:

```tsx
// App.tsx or index.js
import '@rn-ave/core/auto';
```

**For Expo Router projects:**
Add to your **root** layout file (usually `app/_layout.tsx` or `src/app/_layout.tsx`):

```tsx
// app/_layout.tsx
import '@rn-ave/core/auto';
```

Adding this import will automatically inject the inspector button and overlay into your app when running in development mode.

## Features

- **Visual Inspector**: A floating button that activates a selection overlay.
- **Box Model Visualization**: See real-time margin, padding, and content areas for any tapped element.
- **Breadcrumbs Navigation**: Traverse up the component hierarchy to select parent components for editing.
- **Context Extraction**: Automatically gathers:
  - Component Name
  - Props (sanitized)
  - Source File & Line Number (requires `@rn-ave/babel-plugin`)
  - JSX usage preview
- **Agent Bridges**: Built-in support for sending context to OpenCode, Claude Code, and Cursor servers.

## Environment Support

- React Native 0.60+
- Expo and Bare workflow
- Works only when `__DEV__` is true (zero production overhead)
npm package: @rn-ave/metro-plugin
Description: Metro plugin for rn-ave - enables 'Open in Cursor' functionality
Latest version: 0.1.0

# @rn-ave/metro-plugin

Metro plugin for `rn-ave`. Enables "Open in Cursor" functionality.

## Installation

```bash
npm install @rn-ave/metro-plugin
```

## Usage

```js
// metro.config.js
const { withAVE } = require('@rn-ave/metro-plugin');

const config = {
  // your metro config
};

module.exports = withAVE(config);
```

## Features

- **Cursor Bridge**: Opens Cursor deeplinks from the host machine (useful for simulators).
- **File Opening**: Standard endpoint for opening files at specific lines.
npm package: @rn-ave/opencode
Description: OpenCode agent server for rn-ave
Latest version: 0.1.1

# @rn-ave/opencode 🤖

OpenCode agent bridge for `rn-ave`. This server receives component context from your React Native app and triggers the [OpenCode](https://opencode.ai) AI agent to modify your code.

## Installation

```bash
npm install @rn-ave/opencode --save-dev
```

## Usage

Run the server from your project root:

```bash
npx @rn-ave/opencode
```

### Options

| Flag | Description | Default |
|------|-------------|---------|
| `--model` | Specify the AI model to use | `opencode/grok-code` |
| `--port` | The port for this bridge server | `4569` |
| `--project` | The project root path | `process.cwd()` |

### Example

```bash
npx @rn-ave/opencode --model google/gemini-3-flash
```

## How it works

1. The bridge server listens on port `4569`.
2. When you tap "OpenCode" in the `rn-ave` app UI, it sends the component's source, props, and JSX preview.
3. This server ensures a fresh OpenCode session is running on port `2222` for your current directory.
4. It passes your prompt and the component context to the OpenCode SDK.
5. OpenCode's agent analyzes your files and applies the requested changes.
npm package: @rn-base/core
Description: core
Author: Đặng Hùng
Latest version: 1.0.0-alpha.1

# @rn-base/core

core

## Installation

```sh
npm install @rn-base/core
```

## Usage

```js
import Core from '@rn-base/core';

// ...

const result = await Core.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @rn-base/input-filter
Description: react-native filter input
Author: danghung
Latest version: 1.0.0

# @rn-base/input-filter

react-native filter input

## Installation

```sh
npm install @rn-base/input-filter
```

## Usage

```js
import { Box, Text } from '@rn-base/element';
import InputFilter, { InputFilterConstants } from '@rn-base/input-filter';

<Box flex={1} center middle>
  <InputFilter
    filters={[
      { text: 'abcbcc', type: InputFilterConstants.character },
      {
        text: '[^0-9]',
        type: InputFilterConstants.regex,
      },
    ]}
    style={{ width: 100, backgroundColor: 'red' }}
    onChangeText={value => setText(value)}
  />

  <Text size={20}>{text}</Text>
</Box>;
```

## Props

- filters: Array
  - text: regex or Array<string>
  - type: view InputFilterConstants
  - inverted (suport IOS and InputFilterConstants.character)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @rn-base/native
Description: native commons
Author: Đặng Hùng
Latest version: 1.0.1

# @rn-base/native-commons

native commons

## Installation

```sh
npm install @rn-base/native-commons
```

## Usage

```js
import NativeCommons from '@rn-base/native-commons';

// ...

const result = await NativeCommons.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @rn-base/splash
Description: a
Author: Đặng Hùng
Latest version: 1.0.0

# splash

a

## Installation

```sh
npm install splash
```

## Usage

```js
import Splash from "splash";

// ...

const result = await Splash.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT