@particle-academy/react-fancy 3.5.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/dist/index.cjs +11 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +127 -112
- package/dist/index.d.ts +127 -112
- package/dist/index.js +11 -9
- package/dist/index.js.map +1 -1
- package/docs/Action.md +15 -3
- package/docs/Button.md +91 -0
- package/package.json +1 -1
package/docs/Action.md
CHANGED
|
@@ -1,17 +1,29 @@
|
|
|
1
|
-
# Action
|
|
1
|
+
# Action (deprecated alias of [Button](./Button.md))
|
|
2
|
+
|
|
3
|
+
> ⚠️ **Deprecated.** `Action` has been renamed to **`Button`**. It remains an
|
|
4
|
+
> alias for backward compatibility and will be removed in a future major
|
|
5
|
+
> version. The two are the exact same component — migrate at your own pace:
|
|
6
|
+
>
|
|
7
|
+
> ```diff
|
|
8
|
+
> - import { Action } from "@particle-academy/react-fancy";
|
|
9
|
+
> + import { Button } from "@particle-academy/react-fancy";
|
|
10
|
+
> ```
|
|
11
|
+
>
|
|
12
|
+
> `ActionProps` → `ButtonProps`, `ActionColor` → `ButtonColor` (also deprecated
|
|
13
|
+
> aliases). Full, current documentation lives in **[Button](./Button.md)**.
|
|
2
14
|
|
|
3
15
|
A versatile button component with support for icons, emojis, avatars, badges, loading states, and color variants.
|
|
4
16
|
|
|
5
17
|
## Import
|
|
6
18
|
|
|
7
19
|
```tsx
|
|
8
|
-
import { Action } from "@particle-academy/react-fancy";
|
|
20
|
+
import { Action } from "@particle-academy/react-fancy"; // deprecated — prefer Button
|
|
9
21
|
```
|
|
10
22
|
|
|
11
23
|
## Basic Usage
|
|
12
24
|
|
|
13
25
|
```tsx
|
|
14
|
-
<Action>Click me</Action>
|
|
26
|
+
<Action>Click me</Action> // identical to <Button>Click me</Button>
|
|
15
27
|
```
|
|
16
28
|
|
|
17
29
|
## Props
|
package/docs/Button.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
A versatile button component with support for icons, emojis, avatars, badges, loading states, and color variants.
|
|
4
|
+
|
|
5
|
+
> **Naming:** `Button` is the canonical name. It was originally shipped as
|
|
6
|
+
> `Action`, which remains available as a **deprecated alias** for backward
|
|
7
|
+
> compatibility and will be removed in a future major version. New code should
|
|
8
|
+
> import `Button`. See [Action](./Action.md).
|
|
9
|
+
|
|
10
|
+
## Import
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import { Button } from "@particle-academy/react-fancy";
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Basic Usage
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
<Button>Click me</Button>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Default | Description |
|
|
25
|
+
|------|------|---------|-------------|
|
|
26
|
+
| variant | `"default" \| "circle" \| "ghost"` | `"default"` | Shape/fill variant. `"ghost"` is transparent with subtle hover. |
|
|
27
|
+
| color | `ButtonColor` | - | Standalone color (overrides state colors). One of: `"blue"`, `"emerald"`, `"amber"`, `"red"`, `"violet"`, `"indigo"`, `"sky"`, `"rose"`, `"orange"`, `"zinc"` |
|
|
28
|
+
| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Button size |
|
|
29
|
+
| active | `boolean` | - | Active state (blue highlight) |
|
|
30
|
+
| checked | `boolean` | - | Checked state (emerald highlight) |
|
|
31
|
+
| warn | `boolean` | - | Warning state (amber highlight) |
|
|
32
|
+
| alert | `boolean` | - | Pulsing animation on the entire button |
|
|
33
|
+
| icon | `string` | - | Leading icon slug resolved via the Icon component |
|
|
34
|
+
| iconTrailing | `string` | - | Trailing icon slug |
|
|
35
|
+
| iconPlace | `string` | `"left"` | Icon placement. Supports: `"left"`, `"right"`, `"top"`, `"bottom"`, and compound positions like `"top left"`, `"bottom right"` |
|
|
36
|
+
| alertIcon | `string` | - | Pulsing alert icon slug |
|
|
37
|
+
| alertIconTrailing | `boolean` | - | Position alert icon on trailing side |
|
|
38
|
+
| emoji | `string` | - | Leading emoji slug |
|
|
39
|
+
| emojiTrailing | `string` | - | Trailing emoji slug |
|
|
40
|
+
| avatar | `string` | - | Avatar image URL |
|
|
41
|
+
| avatarTrailing | `boolean` | - | Position avatar on trailing side |
|
|
42
|
+
| badge | `string` | - | Badge text |
|
|
43
|
+
| badgeTrailing | `boolean` | - | Position badge on trailing side |
|
|
44
|
+
| sort | `string` | `"eiab"` | Sort order of decorative elements: `e`=emoji, `i`=icon, `a`=avatar, `b`=badge |
|
|
45
|
+
| loading | `boolean` | `false` | Show loading spinner (disables the button) |
|
|
46
|
+
| disabled | `boolean` | - | Disable the button |
|
|
47
|
+
| href | `string` | - | Render as an anchor tag instead of a button. Sanitized to a safe-protocol allow-list (since v2.5.0) — `javascript:`, `data:`, `vbscript:` are silently dropped and the component renders a `<button>` instead of an `<a>`. |
|
|
48
|
+
|
|
49
|
+
Also extends all native `<button>` HTML attributes (except `color`).
|
|
50
|
+
|
|
51
|
+
`ButtonProps` is the prop type; `ButtonColor` is the color-name union. The legacy
|
|
52
|
+
`ActionProps` / `ActionColor` names remain as deprecated aliases.
|
|
53
|
+
|
|
54
|
+
## Examples
|
|
55
|
+
|
|
56
|
+
### Icon button with color
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<Button icon="pencil" color="blue" size="lg">
|
|
60
|
+
Edit
|
|
61
|
+
</Button>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Circle icon button
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<Button variant="circle" icon="plus" color="emerald" />
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Loading state with badge
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<Button loading badge="3" badgeTrailing>
|
|
74
|
+
Messages
|
|
75
|
+
</Button>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Link button with trailing icon
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<Button href="/docs" iconTrailing="arrow-right">
|
|
82
|
+
Read docs
|
|
83
|
+
</Button>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Ghost variant
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<Button variant="ghost" color="red" icon="trash-2">Delete</Button>
|
|
90
|
+
<Button variant="ghost" icon="download">Export</Button>
|
|
91
|
+
```
|