npm package: @gaddex/gaddex-ui
Description: Components library for Gaddex
Author: Gaddex
Latest version: 1.3.8

# Gaddex UI

A React component library for Gaddex, built with TypeScript and styled-components.

## 📦 Installation

```bash
npm install @gaddex/gaddex-ui
```

### Required Dependencies

- `react` ^19.1.0
- `react-dom` ^19.1.0
- `styled-components` ^6.1.19

## 🧩 Components

<details>
<summary><strong>Label</strong> - Customizable label component</summary>

#### Basic Usage

```tsx
import { Label } from "@gaddex/gaddex-ui";

<Label text="Name" color="black" htmlFor="name" />
<input id="name" type="text" />
```

#### Props

| Prop       | Type                        | Required | Default | Description                    |
| ---------- | --------------------------- | -------- | ------- | ------------------------------ |
| `text`     | `string`                    | ✅       | -       | Label text                     |
| `required` | `boolean`                   | ❌       | -       | Shows red asterisk if required |
| `color`    | `"black" \| "gray"`         | ✅       | -       | Text color                     |
| `...rest`  | `React.LabelHTMLAttributes` | ❌       | -       | Native HTML label props        |

#### Examples

```tsx
// Basic label
<Label text="Email" color="black" htmlFor="email" />

// Required label
<Label text="Password" color="black" required htmlFor="password" />

// Gray label
<Label text="Description" color="gray" htmlFor="description" />

// With additional props
<Label
  text="Date"
  color="black"
  htmlFor="date"
  className="custom-label"
/>
```

</details>

<details>
<summary><strong>InputText</strong> - Simple text input component</summary>

#### Basic Usage

```tsx
import { InputText } from "@gaddex/gaddex-ui";

<InputText value={name} onChange={setName} placeholder="Enter your name" />;
```

#### Props

| Prop          | Type                                          | Required | Default  | Description                                        |
| ------------- | --------------------------------------------- | -------- | -------- | -------------------------------------------------- |
| `value`       | `string`                                      | ✅       | -        | Input value                                        |
| `onChange`    | `(value: string) => void`                     | ✅       | -        | Change function                                    |
| `error`       | `boolean`                                     | ❌       | -        | Shows error state                                  |
| `width`       | `string`                                      | ❌       | `"100%"` | Input width                                        |
| `placeholder` | `string`                                      | ❌       | -        | Placeholder text                                   |
| `...rest`     | `Omit<React.InputHTMLAttributes, "onChange">` | ❌       | -        | Native HTML input props (except onChange and type) |

#### Examples

```tsx
// Basic input
<InputText
  value={name}
  onChange={setName}
  placeholder="Name"
/>

// Input with custom width
<InputText
  value={email}
  onChange={setEmail}
  placeholder="Email"
  width="300px"
/>

// Input with error
<InputText
  value={password}
  onChange={setPassword}
  placeholder="Password"
  error
/>

// Disabled input
<InputText
  value={username}
  onChange={setUsername}
  placeholder="Username"
  disabled
/>
```

</details>

<details>
<summary><strong>Avatar</strong> - Circular avatar component with customizable image</summary>

#### Basic Usage

```tsx
import { Avatar } from "@gaddex/gaddex-ui";

<Avatar image="/path/to/image.jpg" alt="Profile photo" size={md} />;
```

#### Props

| Prop    | Type           | Required | Description                                |
| ------- | -------------- | -------- | ------------------------------------------ |
| `image` | `string`       | ✅       | Image URL                                  |
| `alt`   | `string`       | ✅       | Alt text                                   |
| `size`  | `"sm" \| "md"` | ✅       | Avatar size: "sm" (small) or "md" (medium) |

#### Examples

```tsx
// Small avatar
<Avatar
  image="/avatar.jpg"
  alt="User"
  size={sm}
/>

// Medium avatar
<Avatar
  image="/profile.jpg"
  alt="Profile photo"
  size={md}
/>
```

</details>

## 🎨 Default Styles

<details>
<summary><strong>View styles for all components</strong></summary>

### Label

- **Font**: 14px, weight 300
- **Colors**: Black (`#1F2933`) or Gray (`#7B8794`)

### InputText

- **Padding**: 8px 12px
- **Border**: 1px solid gray (`#e9e9ea`)
- **Error border**: Red (`#ff3b30`)
- **Focus border**: Blue (`#007AFF`)
- **Radius**: 4px
- **Font**: 14px, line-height 20px
- **Help text**: 12px, gray (`#7B8794`)

### Avatar

- **Shape**: Circular (border-radius: 50%)
- **Border**: 1px solid gray (`#e9e9ea`)
- **Background**: Light gray (`#e9e9ea`)
- **Fit**: `object-fit: cover`

</details>

## 🛠️ Development

```bash
npm run dev      # Development
npm run build    # Build
npm run lint     # Linting
npm run preview  # Preview
```

## 📄 License

MIT

## 📋 Changelog

<details>
<summary><strong>View recent changes and version history</strong></summary>

### Recent Changes

#### [1.3.6] - 2025-01-27

- **Changed**: Renamed components to remove "Gaddex" prefix:
  - `GaddexLabel` → `Label`
  - `GaddexInputText` → `InputText`
  - `GaddexAvatar` → `Avatar`
- **Changed**: Updated README.md to English language
- **Changed**: Updated all component documentation and examples

#### [1.3.5] - 2025-07-26

- **Added**: Initial component library setup
- **Added**: GaddexAvatar component
- **Added**: GaddexInputText component
- **Added**: GaddexLabel component

</details>