react-animated-ui/docs/AnimatedDropdown.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

# Animated Dropdown

## Description  
A fully customizable dropdown component with smooth opening and closing animations. Ideal for selecting from a list of options in a visually appealing way.

---

## Props

| Prop         | Type                             | Default | Description                                      |
|--------------|---------------------------------|---------|------------------------------------------------|
| `options`    | `{ label: string; value: any; }[]` | `[]`    | Array of dropdown options                        |
| `value`      | `any`                           | `null`  | Currently selected value                         |
| `onChange`   | `(value: any) => void`          | `-`     | Callback triggered when user selects an option |
| `placeholder`| `string`                       | `"Select..."` | Placeholder text when no option is selected   |
| `disabled`   | `boolean`                       | `false` | Disable the dropdown                             |
| `className`  | `string`                        | `""`    | Custom CSS class for styling                      |

---

## Usage

```tsx
import { AnimatedDropdown } from 'react-animated-ui';
import React from 'react';

function MyComponent() {
  const options = [
    { label: 'Option One', value: 'one' },
    { label: 'Option Two', value: 'two' },
    { label: 'Option Three', value: 'three' },
  ];

  const [selected, setSelected] = React.useState(null);

  return (
    <AnimatedDropdown
      options={options}
      value={selected}
      onChange={setSelected}
      placeholder="Choose an option"
    />
  );
}