# CountryPicker

A customizable input field for selecting countries from a list.

### **Import**
```tsx
import { CountryPicker } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const DefaultCountryPicker = () => <CountryPicker label="Country" />;
```

### **error**
Optional error flag to indicate validation state

- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** ``

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const ErrorCountryPicker = () => (
  <CountryPicker id="error" label="Country" error />
);
```

### **helperText**
Optional helper text for guiding the user

- **Type:** `string`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import React from 'react';

import { CountryPicker } from '../CountryPicker';

export const HelperTextCountryPicker = () => (
  <CountryPicker helperText="CountryPicker one item!" error />
);
```

### **shape**
Optional shape of the CountryPicker for visual styles

- **Type:** `Shape`
- **Default:** `default`
- **Possible Values:** `default, square, rounded, pill`

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

import { Vertical } from 'app-studio';

import { Shape } from '../CountryPicker/CountryPicker.type';

export const ShapeCountryPicker = () => (
  <Vertical gap={10}>
    {['default', 'square', 'rounded', 'pill'].map((shape) => (
      <CountryPicker
        key={shape}
        label={shape}
        shape={shape as Shape}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);
```

### **variant**
Variant for different visual types of CountryPicker

- **Type:** `Variant`
- **Default:** `default`
- **Possible Values:** `default, outline, none`

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

import { Vertical } from 'app-studio';

import { Variant } from '../CountryPicker/CountryPicker.type';

export const VariantCountryPicker = () => (
  <Vertical gap={10}>
    {['outline', 'default', 'none'].map((variant) => (
      <CountryPicker
        key={variant}
        variant={variant as Variant}
        label={variant}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);
```

### **shadow**
Shadow or Elevation styles for visual depth and perspective

- **Type:** `Shadow | Elevation | ViewProps`
- **Default:** `{}`
- **Possible Values:** ``

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const ShadowCountryPicker = () => (
  <CountryPicker shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }} />
);
```

### **Color**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { CountryPicker } from '../CountryPicker';

export const ColorCountryPicker = () => (
  <Vertical gap={15}>
    {[
      'theme-primary',
      'theme-secondary',
      'theme-error',
      'theme-success',
      'theme-warning',
    ].map((color) => (
      <CountryPicker key={color} label={color} />
    ))}
  </Vertical>
);
```

### **Default**

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const DefaultCountryPicker = () => <CountryPicker label="Country" />;
```

### **Disabled**

```tsx
import React from 'react';

import { CountryPicker } from '../CountryPicker';

export const DisabledCountryPicker = () => <CountryPicker isDisabled />;
```

### **Error**

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const ErrorCountryPicker = () => (
  <CountryPicker id="error" label="Country" error />
);
```

### **Form**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Vertical } from 'app-studio';

import { CountryPicker } from '../CountryPicker';

export const FormCountryPicker = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`You CountryPickered: ${formData.getAll('formItem')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10} width="100%">
        <CountryPicker
          id="formItem"
          name="formItem"
          placeholder="CountryPicker an item..."
        />
        <Button type="submit" alignSelf="center">
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **HelperText**

```tsx
import React from 'react';

import { CountryPicker } from '../CountryPicker';

export const HelperTextCountryPicker = () => (
  <CountryPicker helperText="CountryPicker one item!" error />
);
```

### **ReadOnlyInput**

```tsx
import React from 'react';

import { CountryPicker } from '../CountryPicker';

export const ReadOnlyCountryPicker = () => <CountryPicker isReadOnly />;
```

### **Shadow**

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

export const ShadowCountryPicker = () => (
  <CountryPicker shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }} />
);
```

### **Shape**

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

import { Vertical } from 'app-studio';

import { Shape } from '../CountryPicker/CountryPicker.type';

export const ShapeCountryPicker = () => (
  <Vertical gap={10}>
    {['default', 'square', 'rounded', 'pill'].map((shape) => (
      <CountryPicker
        key={shape}
        label={shape}
        shape={shape as Shape}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);
```

### **SizeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { CountryPicker } from '../CountryPicker';

export const SizeCountryPicker = () => {
  return (
    <Vertical gap={10}>
      <CountryPicker name="xs" size="xs" label="xs" />
      <CountryPicker name="sm" size="sm" label="sm" />
      <CountryPicker name="md" size="md" label="md" />
      <CountryPicker name="lg" size="lg" label="lg" />
      <CountryPicker name="xl" size="xl" label="xl" />
    </Vertical>
  );
};
```

### **StylesInput**

```tsx
import React from 'react';

import { CountryPicker } from '../CountryPicker';

export const StyledCountryPicker = () => (
  <CountryPicker
    name="noColorScheme"
    views={{
      text: { color: 'theme-primary' }, // Assuming theme-primary is still desired
      label: { fontWeight: 'bold', color: 'theme-primary' }, // Assuming theme-primary is still desired
      dropDown: { color: 'theme-primary' }, // Assuming theme-primary is still desired
      field: { color: 'theme-primary' }, // Assuming theme-primary is still desired
    }}
  />
);
```

### **Variant**

```tsx
import React from 'react';
import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';

import { Vertical } from 'app-studio';

import { Variant } from '../CountryPicker/CountryPicker.type';

export const VariantCountryPicker = () => (
  <Vertical gap={10}>
    {['outline', 'default', 'none'].map((variant) => (
      <CountryPicker
        key={variant}
        variant={variant as Variant}
        label={variant}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);
```

### **Index**

```tsx
export * from './Color';
export * from './Default';
export * from './Disabled';
export * from './Error';
export * from './Form';
export * from './HelperText';
export * from './ReadOnlyInput';
export * from './Shadow';
export * from './Shape';
export * from './SizeInput';
export * from './StylesInput';
export * from './Variant';
```