import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import TokenInput from '../TokenInput';
import { EyeOutline } from '@useblu/ocean-icons-react';

<Meta
  title="Components/Inputs/TokenInput"
  component={TokenInput}
  decorators={[(storyFn) => <div className="input-story">{storyFn()}</div>]}
/>

# Input Text API

The API documentation of the Token Input React component.
Learn more about the props and the CSS customization points.

## Import

```javascript
import { TokenInput } from '@useblu/ocean-react';
```

## Usage

<Canvas>
  <Story
    name="TokenInput"
    args={{
      label: 'Token Input',
      errorMessage: 'Código incorreto.',
      error: false,
      disabled: false,
      digitsQuantity: 4,
    }}
    parameters={{
      controls: { exclude: /^blocked*/ },
    }}
    argTypes={{
      label: {
        control: 'text',
      },
      disabled: {
        control: 'boolean',
      },
      errorMessage: {
        control: 'text',
      },
    }}
  >
    {(props) => <TokenInput {...props} />}
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class               | Description                                          |
| -------------------------- | ---------------------------------------------------- |
| .ods-token-input           | Styles applied to the input element.                 |
| .ods-token-input\_\_input  | Styles applied to the input element.                 |
| .ods-token-input--error    | Styles applied to the input element if error={true}. |
| .ods-token-input--disabled | Styles applied to the element if is disabled         |

## Inheritance

The props of the [FormControl](?path=/docs/components-formcontrol--page) component are also available.
