### Install animal-island-ui Package

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/README.md

Install the library using npm. This is the first step to using the components in your project.

```bash
npm install animal-island-ui
```

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

### Local Development Setup for Animal Island UI

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/README.md

Commands to clone the repository, install dependencies, and run development or build processes for the component library and demo site.

```bash
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

npm install

npm run dev

npm run build

npm run build:demo
```

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

### Basic Tooltip Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/08_提示框_Tooltip.md

A simple example of how to implement a basic tooltip with default settings. Ensure to import the Tooltip component and its styles.

```tsx
import { Tooltip } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  return (
    <Tooltip title="这是一个提示">
      <button>悬停我</button>
    </Tooltip>
  );
}
```

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

### Basic Radio Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/10_单选框_Radio.md

A fundamental example demonstrating how to use the Radio component with options and state management.

```tsx
import { Radio } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [selected, setSelected] = useState('');
  
  const options = [
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '橙子', value: 'orange' }
  ];

  return (
    <Radio
      options={options}
      value={selected}
      onChange={setSelected}
    />
  );
}
```

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

### Local Development Commands

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/CONTRIBUTING.md

Commands to clone the repository, install dependencies, and run development or build processes.

```bash
# 克隆仓库
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# 安装依赖
npm install

# 启动 Demo 开发服务器
npm run dev

# 构建组件库
npm run build

# 构建 Demo 站点
npm run build:demo
```

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

### Basic Tabs Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

A simple example demonstrating the basic usage of the Tabs component with a list of items.

```tsx
import { Tabs } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const items = [
    { key: 'tab1', label: '标签 1', children: '内容 1' },
    { key: 'tab2', label: '标签 2', children: '内容 2' },
    { key: 'tab3', label: '标签 3', children: '内容 3' }
  ];

  return <Tabs items={items} />;
}
```

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

### Collapse Component Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/15_其他组件_Others.md

Illustrates the usage of the Collapse component with multiple items and in accordion mode.

```tsx
<Collapse
  items={[
    { key: '1', label: '标题 1', children: '内容 1' },
    { key: '2', label: '标题 2', children: '内容 2' }
  ]}
  accordion
/>
```

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

### Footer Component Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/15_其他组件_Others.md

Shows how to use the Footer component to display copyright information or other footer content.

```tsx
<Footer>
  <p>&copy; 2024 All rights reserved</p>
</Footer>
```

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

### Dynamic Tabs Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Shows how to dynamically add new tabs and manage the active tab state when tabs are added.

```tsx
const [items, setItems] = useState([...]);
const [activeKey, setActiveKey] = useState('');

const addTab = () => {
  const newKey = `tab${Date.now()}`;
  setItems([...items, { key: newKey, label: '新标签', children: '内容' }]);
  setActiveKey(newKey);
};

<>
  <button onClick={addTab}>新建标签</button>
  <Tabs items={items} activeKey={activeKey} onChange={setActiveKey} />
</>
```

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

### Tabs with Default Active Key

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example showing how to set a default active tab using the `defaultActiveKey` prop.

```typescript
import { Tabs } from 'animal-island-ui';

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' },
  { key: 'tab3', label: '标签 3', children: '内容 3' }
];

<Tabs
  items={items}
  defaultActiveKey="tab2"
/>
```

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

### Default Active Tab Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Shows how to set a default active tab using the `defaultActiveKey` prop.

```tsx
<Tabs
  items={items}
  defaultActiveKey="tab2"
/>
```

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

### Custom Styling Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Demonstrates applying custom CSS classes and inline styles to the Tabs component.

```tsx
<Tabs
  items={items}
  className="custom-tabs"
  style={{ padding: '16px' }}
/>
```

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

### Import Components from Main Entry

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/15_其他组件_Others.md

All components can be imported from the main entry point of the 'animal-island-ui' library. Ensure you have the library installed.

```typescript
import {
  Button,
  Card,
  Modal,
  Collapse,
  Cursor,
  Footer,
  // ... 其他组件
} from 'animal-island-ui';
```

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

### Basic Table Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/13_数据表格_Table.md

Demonstrates the fundamental setup of the Table component with columns and data source. Ensure 'animal-island-ui' and its styles are imported.

```tsx
import { Table } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '年龄', dataIndex: 'age' },
    { title: '城市', dataIndex: 'city' }
  ];

  const dataSource = [
    { key: '1', name: 'Tom', age: 28, city: '纽约' },
    { key: '2', name: 'Jerry', age: 26, city: '伦敦' },
    { key: '3', name: 'Spike', age: 30, city: '巴黎' }
  ];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
    />
  );
}
```

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

### Quick Start with React Components

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/README.md

Import and use Button and Card components from animal-island-ui. Ensure styles are imported to apply correct theming and fonts.

```tsx
import { Button, Card } from 'animal-island-ui';
import 'animal-island-ui/style';

function App() {
    return (
        <div>
            <Button type="primary">Start Adventure</Button>
            <Card color="app-blue">Welcome to the deserted island!</Card>
        </div>
    );
}
```

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

### Basic Checkbox Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Demonstrates the basic usage of the Checkbox component with options, value, and an onChange handler.

```tsx
import { Checkbox } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [checked, setChecked] = useState([]);
  
  const options = [
    { label: '苹果', value: 'apple' },
    { label: '香蕉', value: 'banana' },
    { label: '橙子', value: 'orange' }
  ];

  return (
    <Checkbox
      options={options}
      value={checked}
      onChange={setChecked}
    />
  );
}
```

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

### CSS Modules Styling Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Illustrates how to customize the Tabs component's appearance using CSS Modules and CSS variables.

```tsx
<Tabs
  items={items}
  className="my-tabs"
  style={{ 
    '--tab-color': '#ff69b4'
  } as React.CSSProperties}
/>
```

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

### TypeScript Support for Components

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/00_索引_README.md

Demonstrates how to import and use component types for full TypeScript safety. Ensure 'animal-island-ui' is installed and configured.

```typescript
import type { ButtonProps, FormInstance, NamePath } from 'animal-island-ui';

// 完全类型安全
const handleForm = (form: FormInstance) => {
  form.setFieldValue('username', 'tom');
};
```

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

### Button State Examples

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/01_按钮组件_Button.md

Illustrates buttons with different states: danger, ghost, block, disabled, and loading.

```tsx
<Button danger>危险操作</Button>
<Button ghost>幽灵按钮</Button>
<Button block>块级按钮</Button>
<Button disabled>禁用按钮</Button>
<Button loading>加载中...</Button>
```

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

### Controlled Input Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Example of using the Input component in a controlled mode, where the parent component manages the state.

```tsx
const [value, setValue] = useState('');
<Input value={value} onChange={(e) => setValue(e.target.value)} />
```

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

### Tabs with Complex Content

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example showing how to render complex React nodes, such as other components, as tab content.

```typescript
import { Tabs } from 'animal-island-ui';
import { Card } from 'animal-island-ui'; // Assuming Card is another component

const items = [
  {
    key: 'profile',
    label: '个人信息',
    children: (
      <Card>
        <h2>用户名</h2>
        <p>tom</p>
      </Card>
    )
  },
  {
    key: 'settings',
    label: '设置',
    children: (
      <Card>
        <p>设置内容</p>
      </Card>
    )
  }
];

<Tabs items={items} />
```

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

### Disabled Switch Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/11_开关_Switch.md

Demonstrates how to disable the Switch component, making it non-interactive.

```tsx
<Switch disabled checked={enabled} onChange={setEnabled} />
```

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

### Controlled Tabs Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Demonstrates how to use the Tabs component in a controlled manner, managing the active tab via state.

```tsx
const [activeKey, setActiveKey] = useState('tab1');

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' }
];

<Tabs
  items={items}
  activeKey={activeKey}
  onChange={setActiveKey}
/>
```

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

### Accessibility Example with aria-label

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Demonstrates how to provide an accessible label for the Tabs component when it lacks a visible heading.

```tsx
<Tabs
  items={items}
  aria-label="内容标签页"
/>
```

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

### Divider Component Examples

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/15_其他组件_Others.md

Demonstrates various configurations of the Divider component, including horizontal, vertical, with text, and dashed styles.

```tsx
import { Divider } from 'animal-island-ui';

<Divider />
<Divider type="vertical" />
<Divider>或</Divider>
<Divider dashed>分隔线</Divider>
```

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

### Tabs with Dynamic Content

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of managing tabs dynamically, including adding new tabs and updating the active tab.

```typescript
import React, { useState } from 'react';
import { Tabs } from 'animal-island-ui';

export function DynamicTabsDemo() {
  const [items, setItems] = useState([
    { key: 'tab1', label: '标签 1', children: '内容 1' },
    { key: 'tab2', label: '标签 2', children: '内容 2' }
  ]);
  const [activeKey, setActiveKey] = useState('tab1');

  const addTab = () => {
    const newKey = `tab${Date.now()}`;
    setItems([...items, { key: newKey, label: '新标签', children: '内容' }]);
    setActiveKey(newKey);
  };

  return (
    <>
      <button onClick={addTab}>新建标签</button>
      <Tabs items={items} activeKey={activeKey} onChange={setActiveKey} />
    </>
  );
}
```

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

### CSS Module Class Name Conventions

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/16_API汇总_API_Summary.md

Provides examples of the naming conventions used for CSS modules within components.

```css
// 组件类名格式
[component-name]
btn-[type]
btn-[size]
card-[color]
pattern-[pattern]
wrapper-[size]
// ... 等等
```

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

### Import Custom Item Icons

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/06_图标_Icon.md

Example of how to import and use custom item icons from local paths. These are typically larger image files not included in the library.

```tsx
// 导入物品图标资源（由开发者提供）
import item001 from 'path/to/items/item-001.png';
import item002 from 'path/to/items/item-002.png';

// 使用
<Icon src={item001} size={48} />
```

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

### FormInstance Methods

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/05_表单_Form.md

Provides methods to interact with form fields, including getting and setting values, validation, and submission.

```APIDOC
## FormInstance API

### Description
Provides methods to interact with form fields, including getting and setting values, validation, and submission.

### Methods

- **getFieldValue** `(name: NamePath) => unknown`
  Gets the value of a single form field.

- **getFieldsValue** `(nameList?: NamePath[] | true) => T`
  Gets the values of all or specified form fields. Passing `true` retrieves all field values.

- **setFieldValue** `(name: NamePath, value: unknown) => void`
  Sets the value of a single form field without triggering validation.

- **setFieldsValue** `(values: Partial<T>) => void`
  Batch sets values for multiple form fields.

- **resetFields** `(nameList?: NamePath[]) => void`
  Resets specified fields to their initial values.

- **validateFields** `(nameList?: NamePath[]) => Promise<T>`
  Validates specified fields. Rejects with error information if validation fails.

- **submit** `() => void`
  Submits the form after performing validation.

- **setFields** `(fields: FieldData[]) => void`
  Batch updates field states, including values, errors, and touched status.

- **isFieldTouched** `(name: NamePath) => boolean`
  Checks if a field has been interacted with by the user.

- **isFieldValidating** `(name: NamePath) => boolean`
  Checks if a field is currently undergoing asynchronous validation.

- **getFieldError** `(name: NamePath) => string[] | undefined`
  Retrieves the array of error messages for a specific field.

- **scrollToField** `(name: NamePath, options?: ScrollOptions) => void`
  Smoothly scrolls the view to a specified field.
```

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

### Tabs with Custom Styling

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of applying custom CSS classes and inline styles to the Tabs component.

```typescript
import { Tabs } from 'animal-island-ui';

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' }
];

<Tabs
  items={items}
  className="custom-tabs"
  style={{ padding: '16px' }}
/>
```

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

### Card Component Pattern Styles

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/skill/SKILL.md

Styles for the Card component when using a pattern background, demonstrating a 'app-pink' example.

```css
/* pattern 叠加（pattern !== 'none' 时，纯 CSS 实现，**无 png/svg**）*/
/* 双层 radial-gradient 点阵 + 同色调 1.5px solid 边框 + pastel 浅底，
   13 种命名（default / app-pink / purple / app-blue / app-yellow / app-orange /
   app-teal / app-green / app-red / lime-green / yellow-green / brown / warm-peach-pink）
   与 Card.color 同名，但呈现为浅底波点"墙纸"而非实色块。 */
/* 例：pattern="app-pink" */
background:
    radial-gradient(circle, rgba(248, 166, 178, 0.18) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(circle, rgba(255, 200, 210, 0.12) 1px, transparent 1px) 7px 7px/14px 14px,
    #fde4e8;
border: 1.5px solid #f8a6b2;
color: #a85565;
/* 当 color 与 pattern 同时设置时，pattern 视觉上覆盖 color */
```

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

### Customizing Styles with CSS Modules

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of how to customize the Tabs component's appearance using CSS Modules and CSS variables.

```typescript
import { Tabs } from 'animal-island-ui';

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' }
];

<Tabs
  items={items}
  className="my-tabs"
  style={{
    '--tab-color': '#ff69b4'
  } as React.CSSProperties}
/>
```

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

### Button Click Event Handling with Loading State

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/01_按钮组件_Button.md

Provides an example of handling button clicks, managing a loading state, and preventing duplicate submissions.

```tsx
import { useState } from 'react';

const [loading, setLoading] = useState(false);

const handleClick = async () => {
  setLoading(true);
  try {
    await submitData();
  } finally {
    setLoading(false);
  }
};

<Button loading={loading} onClick={handleClick}>
  保存
</Button>
```

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

### Controlled Tabs Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example demonstrating how to use the Tabs component in a controlled mode, managing the active tab state externally.

```typescript
import React, { useState } from 'react';
import { Tabs } from 'animal-island-ui';

export function ControlledTabsDemo() {
  const [activeKey, setActiveKey] = useState('tab1');

  const items = [
    { key: 'tab1', label: '标签 1', children: '内容 1' },
    { key: 'tab2', label: '标签 2', children: '内容 2' }
  ];

  return (
    <Tabs
      items={items}
      activeKey={activeKey}
      onChange={setActiveKey}
    />
  );
}
```

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

### Combining with Other Components

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/04_模态对话框_Modal.md

Provides an example of integrating the Modal component with other UI elements, such as forms, to create complex interactive dialogs.

```APIDOC
## Combining with Other Components

```tsx
import { Modal, Form, Input, Button } from 'animal-island-ui';

export function FormModal() {
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();
  
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Form</Button>
      
      <Modal
        open={open}
        title="User Information"
        onClose={() => setOpen(false)}
        onOk={() => {
          form.validateFields().then(() => {
            setOpen(false);
          });
        }}
      >
        <Form form={form}>
          <Form.Item name="username" rules={[{ required: true }]}>
            <Input placeholder="Username" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}
```
```

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

### Tabs Accessibility with ARIA Label

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example demonstrating how to provide an ARIA label for accessibility when tabs lack a visible title.

```typescript
import { Tabs } from 'animal-island-ui';

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' }
];

<Tabs
  items={items}
  aria-label="内容标签页"
/>
```

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

### Display Icon Gallery

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/06_图标_Icon.md

Renders a gallery of all built-in icons using the `ICON_LIST` constant. This example uses CSS Grid for layout.

```tsx
import { Icon, ICON_LIST } from 'animal-island-ui';

export function IconGallery() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px' }}>
      {ICON_LIST.map((icon) => (
        <div key={icon.name} style={{ textAlign: 'center' }}>
          <Icon name={icon.name} size={32} />
          <p style={{ marginTop: '8px' }}>{icon.label}</p>
        </div>
      ))}
    </div>
  );
}
```

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

### Custom Tooltip Styles via CSS Modules

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/08_提示框_Tooltip.md

Shows how to customize tooltip appearance using CSS Modules by applying a custom class name and inline styles. This example targets opacity and max-width.

```tsx
<Tooltip
  title="自定义样式"
  className="my-tooltip"
  style={{
    opacity: 0.8,
    maxWidth: '200px'
  }}
>
  <button>悬停</button>
</Tooltip>
```

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

### Performance Optimization with Lazy Rendering

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example showing how the Tabs component optimizes performance by only rendering the content of the active tab, suitable for heavy components.

```tsx
// 只渲染激活标签的内容
const items = Array.from({ length: 100 }, (_, i) => ({
  key: `tab${i}`,
  label: `标签 ${i}`,
  children: <HeavyComponent index={i} />
}));

<Tabs items={items} />
```

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

### Tooltip Placement Variations

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/08_提示框_Tooltip.md

Illustrates how to position the tooltip relative to its trigger element using the 'placement' prop. Examples include top, bottom, left, and right alignments.

```tsx
<div style={{ display: 'flex', gap: '16px', justifyContent: 'center' }}>
  <Tooltip title="上方" placement="top">
    <button>上</button>
  </Tooltip>
  
  <Tooltip title="下方" placement="bottom">
    <button>下</button>
  </Tooltip>
  
  <Tooltip title="左方" placement="left">
    <button>左</button>
  </Tooltip>
  
  <Tooltip title="右方" placement="right">
    <button>右</button>
  </Tooltip>
</div>
```

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

### Creating a Controlled Form

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/00_索引_README.md

Example of creating a controlled form using the Form component and Input. Use `Form.useForm()` to get a form instance and `Form.Item` for individual fields.

```tsx
const [form] = Form.useForm();

<Form form={form} onFinish={(values) => console.log(values)}>
  <Form.Item name="username" rules={[{ required: true }]}>
    <Input placeholder="用户名" />
  </Form.Item>
</Form>
```

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

### Card with Different Colors

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/02_卡片组件_Card.md

Shows how to apply different background colors to the Card component using the 'color' prop. Examples include 'app-blue', 'app-pink', 'app-green', and 'warm-peach-pink'.

```tsx
<Card color="app-blue">蓝色卡片</Card>
<Card color="app-pink">粉色卡片</Card>
<Card color="app-green">绿色卡片</Card>
<Card color="warm-peach-pink">温暖桃粉卡片</Card>
```

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

### Select with Dynamic Options

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/07_选择框_Select.md

Shows how to populate the Select component with options loaded dynamically, for example, from an API call using useEffect.

```tsx
const [options, setOptions] = useState([]);

useEffect(() => {
  // 从 API 加载选项
  fetchOptions().then(setOptions);
}, []);

<Select
  options={options}
  value={value}
  onChange={setValue}
/>
```

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

### Modal Dialog Confirmation

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/00_索引_README.md

Provides an example of a confirmation modal dialog. Use the `Modal` component with `open`, `title`, `onOk`, and `onClose` props to manage its state and actions.

```tsx
const [open, setOpen] = useState(false);

<Modal
  open={open}
  title="确认删除"
  onOk={() => { deleteItem(); setOpen(false); }}
  onClose={() => setOpen(false)}>
  确定要删除吗？此操作无法撤销。
</Modal>
```

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

### Tooltip Adaptive Positioning Test

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/08_提示框_Tooltip.md

This example demonstrates a scenario where tooltip visibility might be affected by proximity to container boundaries. It highlights the need to test tooltips in edge cases.

```tsx
<div style={{ position: 'relative', height: '500px' }}>
  <Tooltip title="距离顶部很近" placement="top">
    <button style={{ marginTop: '10px' }}>顶部按钮</button>
  </Tooltip>
</div>
```

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

### Uncontrolled Input Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Example of using the Input component in an uncontrolled mode. The component manages its own state.

```tsx
const [value, onChange] = useState('');
<Input defaultValue="" onChange={(e) => console.log(e.target.value)} />
```

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

### Project Structure Overview

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/CONTRIBUTING.md

Illustrates the directory layout of the animal-island-ui project, including source files, styles, and demo code.

```tree
src/
  components/
    Button/
      Button.tsx            # 组件实现
      button.module.less    # 样式（CSS Modules）
      index.ts              # 导出入口
    ...
  styles/
    variables.less          # 全局 Less 变量（设计令牌）
    index.less              # 全局样式入口
  index.ts                  # 库导出入口
demo/                       # Demo 站点源码
```

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

### Checkbox with Large Size

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of configuring the Checkbox component with a 'large' size.

```tsx
<Checkbox 
  options={options} 
  size="large" 
  value={checked} 
  onChange={setChecked}
/>
```

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

### Checkbox with Middle Size

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of configuring the Checkbox component with a 'middle' size.

```tsx
<Checkbox 
  options={options} 
  size="middle" 
  value={checked} 
  onChange={setChecked}
/>
```

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

### Checkbox with Small Size

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of configuring the Checkbox component with a 'small' size.

```tsx
<Checkbox 
  options={options} 
  size="small" 
  value={checked} 
  onChange={setChecked}
/>
```

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

### Input Component Disabled State

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Example of disabling the Input component, making it non-interactive.

```tsx
<Input 
  disabled 
  value="禁用的输入框"
/>
```

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

### Basic Modal Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/04_模态对话框_Modal.md

Demonstrates the fundamental usage of the Modal component, including how to control its visibility and handle close and confirm actions.

```APIDOC
## Basic Modal Usage

```tsx
import { Modal } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      
      <Modal
        open={open}
        title="Welcome"
        onClose={() => setOpen(false)}
        onOk={() => {
          console.log('Confirmed');
          setOpen(false);
        }}
      >
        <p>This is the modal content</p>
      </Modal>
    </>
  );
}
```
```

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

### Disable Animation and Shadow

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of disabling the leaf animation and shadow effects on the active tab.

```tsx
<Tabs
  items={items}
  leafAnimation={false}
  shadow={false}
/>
```

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

### Basic Usage of Animal Island UI Components

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/00_索引_README.md

Demonstrates the basic usage of Button and Card components from the library. Ensure styles are imported before using components.

```tsx
import { Button, Card, Input } from 'animal-island-ui';
import 'animal-island-ui/style';

export function App() {
  return (
    <div>
      <Button type="primary">开始冒险</Button>
      <Card color="app-blue">欢迎来到荒岛！</Card>
    </div>
  );
}
```

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

### Controlled Checkbox Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of using the Checkbox component in a controlled mode with state management.

```tsx
const [checked, setChecked] = useState(['apple']);
<Checkbox 
  value={checked}
  options={options}
  onChange={setChecked}
/>
```

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

### Uncontrolled Checkbox Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of using the Checkbox component in an uncontrolled mode with a default value.

```tsx
<Checkbox 
  defaultValue={['apple']}
  options={options}
  onChange={(values) => console.log(values)}
/>
```

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

### Basic Select Component Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/07_选择框_Select.md

Demonstrates the basic implementation of the Select component, requiring options, a controlled value, and an onChange handler. Ensure 'animal-island-ui' and its styles are imported.

```tsx
import { Select } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [value, setValue] = useState('');
  
  const options = [
    { key: 'apple', label: '苹果' },
    { key: 'banana', label: '香蕉' },
    { key: 'orange', label: '橙子' }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}
```

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

### Tabs with Animations and Shadows Disabled

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of disabling the leaf animation and shadow effects on the Tabs component.

```typescript
import { Tabs } from 'animal-island-ui';

const items = [
  { key: 'tab1', label: '标签 1', children: '内容 1' },
  { key: 'tab2', label: '标签 2', children: '内容 2' }
];

<Tabs
  items={items}
  leafAnimation={false}
  shadow={false}
/>
```

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

### Basic Button Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/01_按钮组件_Button.md

Demonstrates how to render different types of buttons: default, primary, dashed, text, and link.

```tsx
import { Button } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  return (
    <>
      <Button>默认按钮</Button>
      <Button type="primary">主要按钮</Button>
      <Button type="dashed">虚线按钮</Button>
      <Button type="text">文本按钮</Button>
      <Button type="link">链接按钮</Button>
    </>
  );
}
```

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

### Uncontrolled Tabs Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of using Tabs in an uncontrolled mode, where the component manages its own active state.

```tsx
<Tabs 
  items={items}
  defaultActiveKey="tab1"
  onChange={(key) => console.log(key)}
/>
```

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

### Import Modes

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/16_API汇总_API_Summary.md

Illustrates different ways to import components and types from the library, including full imports, type imports, and mixed imports.

```APIDOC
## 📦 导入模式

### 完整导入

```typescript
import { Button, Card, Form, Input, Modal, Select } from 'animal-island-ui';
import 'animal-island-ui/style';
```

### 类型导入

```typescript
import type { ButtonProps, FormInstance, NamePath } from 'animal-island-ui';
```

### 混合导入

```typescript
import { Button, Form } from 'animal-island-ui';
import type { FormInstance } from 'animal-island-ui';

import 'animal-island-ui/style';
```
```

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

### Switch Uncontrolled Mode Example

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/11_开关_Switch.md

Demonstrates the uncontrolled mode of the Switch component, where its state is managed internally.

```tsx
<Switch 
  defaultChecked={false}
  onChange={(checked) => console.log(checked)}
/>
```

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

### Component Demo Page Structure

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/skill/SKILL.md

This snippet shows the basic structure for a component's demo page, including importing necessary tools and defining component properties.

```tsx
import { CodeBlock, ApiTable } from '../../tools';

const props = [{ name: 'size', type: "'small' | 'middle' | 'large'", default: "'middle'", description: '尺寸' }];

export default function MyComponentDemo() {
    return (
        <div>
            <h2>MyComponent</h2>
            <CodeBlock code={`<MyComponent size="large">内容</MyComponent>`} />
            <ApiTable data={props} />
        </div>
    );
}
```

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

### Basic Input Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Demonstrates the basic usage of the Input component with a placeholder and value binding.

```tsx
import { Input } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [value, setValue] = useState('');
  
  return (
    <Input
      placeholder="请输入内容"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}
```

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

### Checkbox Integration with Form

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/09_复选框_Checkbox.md

Example of integrating the Checkbox component with a Form component, including validation rules.

```tsx
import { Form, Checkbox } from 'animal-island-ui';

<Form onFinish={(values) => console.log(values)}>
  <Form.Item 
    name="fruits" 
    rules={[{ required: true, message: '请选择至少一个水果' }]}
  >
    <Checkbox
      options={options}
      value={form.getFieldValue('fruits')}
      onChange={(val) => form.setFieldValue('fruits', val)}
    />
  </Form.Item>
</Form>
```

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

### Form Instance API

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/14_类型参考_Types.md

Provides the command-line interface for interacting with a form instance, including methods for getting/setting field values, validation, submission, and more.

```APIDOC
## Form Instance API

### Description
Provides the command-line interface for interacting with a form instance.

### Interface: `FormInstance<T = Record<string, unknown>>`

### Methods
- **getFieldValue** (name: NamePath) => `unknown`
  - Retrieves the value of a specific form field.
- **getFieldsValue** (nameList?: NamePath[] | true) => `T`
  - Retrieves the values of one or more form fields.
- **setFieldValue** (name: NamePath, value: unknown) => `void`
  - Sets the value of a specific form field.
- **setFieldsValue** (values: Partial<T>) => `void`
  - Sets the values of multiple form fields.
- **resetFields** (nameList?: NamePath[]) => `void`
  - Resets specified form fields to their initial values.
- **validateFields** (nameList?: NamePath[]) => `Promise<T>`
  - Validates the specified form fields. Returns a promise that resolves with the form values if validation succeeds.
- **submit** () => `void`
  - Submits the form.
- **setFields** (fields: FieldData[]) => `void`
  - Sets the data for multiple fields.
- **isFieldTouched** (name: NamePath) => `boolean`
  - Checks if a specific field has been touched.
- **isFieldValidating** (name: NamePath) => `boolean`
  - Checks if a specific field is currently being validated.
- **getFieldError** (name: NamePath) => `string[] | undefined`
  - Retrieves the error messages for a specific field.
- **scrollToField** (name: NamePath, options?: ScrollOptions) => `void`
  - Scrolls to a specific form field.
```

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

### Title Component Color Variants

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/skill/SKILL.md

Examples of color variable overrides for the Title component using .color-* classes.

```less
.color-app-yellow {
    --rf: #f7cd67;
    --rb: #d4a030;
    --rk: #8a6010;
    --rt: #725d42;
}
.color-purple {
    --rf: #b77dee;
    --rb: #9050d0;
    --rk: #5a1a9a;
    --rt: #fff;
}
```

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

### Basic Modal Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/04_模态对话框_Modal.md

Demonstrates how to open and close a basic modal dialog with a title and confirmation button. Ensure to import the Modal component and its styles.

```tsx
import { Modal } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setOpen(true)}>打开对话框</button>
      
      <Modal
        open={open}
        title="欢迎"
        onClose={() => setOpen(false)}
        onOk={() => {
          console.log('确定');
          setOpen(false);
        }}
      >
        <p>这是对话框内容</p>
      </Modal>
    </>
  );
}
```

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

### Switch Integrated with Form

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/11_开关_Switch.md

Example of integrating the Switch component within a Form, utilizing `valuePropName` for proper binding.

```tsx
import { Form, Switch } from 'animal-island-ui';

<Form onFinish={(values) => console.log(values)}>
  <Form.Item 
    name="notifications" 
    valuePropName="checked"
  >
    <Switch
      checkedChildren="启用"
      unCheckedChildren="禁用"
    />
  </Form.Item>
</Form>
```

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

### Basic Switch Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/11_开关_Switch.md

A fundamental example of using the Switch component in a controlled mode with `useState` for state management.

```tsx
import { Switch } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  const [enabled, setEnabled] = useState(false);
  
  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
    />
  );
}
```

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

### Column Width Configuration

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/13_数据表格_Table.md

Demonstrates setting column widths using pixel values (string) or numeric values (pixels). Columns without specified widths will adjust automatically.

```tsx
const columns = [
  { title: '名称', dataIndex: 'name', width: '200px' },
  { title: '年龄', dataIndex: 'age', width: 100 },
  { title: '描述', dataIndex: 'desc' }
];

<Table columns={columns} dataSource={dataSource} />
```

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

### Import UI Styles

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/00_索引_README.md

Import the global styles for the UI library. This step is crucial for ensuring components render with the correct appearance and fonts.

```tsx
import 'animal-island-ui/style';
```

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

### Basic Card Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/02_卡片组件_Card.md

Demonstrates how to use the Card component with default settings to display basic content. Ensure to import the Card component and its styles.

```tsx
import { Card } from 'animal-island-ui';
import 'animal-island-ui/style';

export function Demo() {
  return (
    <Card>
      <p>这是一个基础卡片</p>
    </Card>
  );
}
```

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

### Styling Select Component via CSS Modules

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/07_选择框_Select.md

Illustrates how to apply custom styles to the Select component by wrapping it in a div with specific styling, leveraging CSS Modules for customization.

```tsx
<div style={{ maxWidth: '300px' }}>
  <Select
    options={options}
    value={value}
    onChange={setValue}
  />
</div>
```

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

### Full Component Import

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/16_API汇总_API_Summary.md

Imports multiple components and the global styles. Use this for comprehensive access to UI elements and their default styling.

```typescript
import { Button, Card, Form, Input, Modal, Select } from 'animal-island-ui';
import 'animal-island-ui/style';
```

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

### Controlled Tabs Usage

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/12_标签页_Tabs.md

Example of using Tabs in a controlled mode, where the active state is managed externally using useState.

```tsx
const [activeKey, setActiveKey] = useState('tab1');
<Tabs 
  items={items}
  activeKey={activeKey}
  onChange={setActiveKey}
/>
```

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

### Importing Public Types

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/14_类型参考_Types.md

Shows how to import various public types from the 'animal-island-ui' library using named imports.

```typescript
import type {
  ButtonType,
  ButtonSize,
  CardColor,
  FormInstance,
  NamePath,
  RuleObject,
  // ... 其他类型
} from 'animal-island-ui';
```

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

### Select Component API

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/07_选择框_Select.md

Documentation for the Select component, detailing its props and behavior.

```APIDOC
## Select Component

### Description
A dropdown selection component that supports option lists, keyboard navigation, adaptive positioning, and focus trapping.

### Props

- **options** (SelectOption[]) - Required - The list of options to display in the select dropdown.
- **value** (string) - Required - The key of the currently selected option.
- **onChange** ((key: string) => void) - Required - Callback function invoked when the selected option changes.
- **placeholder** (string) - Optional - Placeholder text to display when no option is selected. Defaults to '请选择'.
- **disabled** (boolean) - Optional - Disables the select component. Defaults to `false`.
- **aria-label** (string) - Optional - ARIA label for accessibility when no visible label is present.
- **aria-labelledby** (string) - Optional - ID of an external visible label to associate with the select component.

### Types

#### SelectOption

- **key** (string) - Required - The unique key (value) of the option.
- **label** (string) - Required - The display text of the option.

### Features

- **Controlled Component**: Requires `value` and `onChange` props.
- **Keyboard Navigation**: Supports navigation and selection via keyboard (Enter, Space, Arrow keys, Home, End, Escape).
- **Adaptive Positioning**: Dropdown automatically adjusts its position to remain visible.
- **Focus Management**: Manages focus within the component for accessibility.
```

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

### Input Component Integration with Form

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Example of using the Input component within a Form component for form submission and validation.

```tsx
import { Form, Input } from 'animal-island-ui';

<Form
  onFinish={(values) => console.log(values)}
>
  <Form.Item name="username" rules={[{ required: true }]}>
    <Input placeholder="用户名" />
  </Form.Item>
</Form>
```

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

### Input Component with Clear Button

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/03_输入框_Input.md

Example of enabling the clear button functionality for the Input component, which appears when the input has a value.

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

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  allowClear
  onClear={() => console.log('已清除')}
/>
```

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

### Component File Structure

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/skill/SKILL.md

Standard directory structure for a new component, including logic, styles, and export files. The component logic file must set a `displayName`.

```treeview
src/components/MyComponent/
├── MyComponent.tsx          # 组件逻辑（必须设置 displayName）
├── myComponent.module.less  # CSS Modules 样式
└── index.ts                 # 统一导出
```

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

### Switch with Different Sizes

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/_autodocs/11_开关_Switch.md

Shows how to apply different sizes ('small' and 'default') to the Switch component.

```tsx
<Switch size="small" checked={enabled} onChange={setEnabled} />
<Switch size="default" checked={enabled} onChange={setEnabled} />
```

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

### CSS Custom Properties for Theming

Source: https://github.com/guokaigdg/animal-island-ui/blob/main/CONTRIBUTING.md

Demonstrates how to override CSS custom properties to customize the theme of the component library at runtime.

```css
:root {
    --animal-primary-color: #19c8b9;
    --animal-text-color: #827157;
    --animal-bg-color: #f8f8f0;
}
```