@particle-academy/react-fancy 4.12.0 → 4.12.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 CHANGED
@@ -232,9 +232,9 @@ Dark mode works via Tailwind's `dark:` class strategy. The library's `Portal` co
232
232
  ```
233
233
  src/
234
234
  ├── components/ # One directory per component
235
- │ ├── Action/
236
- │ │ ├── Action.tsx # Component implementation
237
- │ │ ├── Action.types.ts # Props interface
235
+ │ ├── Button/
236
+ │ │ ├── Button.tsx # Component implementation
237
+ │ │ ├── Button.types.ts # Props interface
238
238
  │ │ └── index.ts # Re-exports
239
239
  │ ├── Modal/
240
240
  │ │ ├── Modal.tsx # Root + Object.assign compound
@@ -257,7 +257,7 @@ src/
257
257
 
258
258
  - `Size` — `"xs" | "sm" | "md" | "lg" | "xl"`
259
259
  - `Color` — Full Tailwind color palette (17 colors)
260
- - `ButtonColor` — Subset of 10 standalone colors used by `Button` and friends (legacy alias: `ActionColor`)
260
+ - `ButtonColor` — Standalone colors used by `Button` and friends; alias of `Color` (full palette). Deprecated legacy alias: `ActionColor`
261
261
  - `Variant` — `"solid" | "outline" | "ghost" | "soft"`
262
262
  - `Placement` — `"top" | "bottom" | "left" | "right"` + start/end variants
263
263
 
package/dist/index.d.cts CHANGED
@@ -1128,9 +1128,9 @@ declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.Re
1128
1128
  };
1129
1129
 
1130
1130
  /**
1131
- * Subset of palette colors the TimeGrid offers for the "cell-on" tone.
1132
- * Mirrors react-fancy's `ActionColor` choice small enough to keep the
1133
- * compiled CSS tight, broad enough to cover most use cases.
1131
+ * Subset of palette colors the TimeGrid offers for the "cell-on" tone
1132
+ * small enough to keep the compiled CSS tight, broad enough to cover most
1133
+ * use cases.
1134
1134
  */
1135
1135
  type TimeGridTone = "violet" | "emerald" | "sky" | "rose" | "amber" | "indigo" | "blue" | "zinc";
1136
1136
  interface TimeGridProps {
package/dist/index.d.ts CHANGED
@@ -1128,9 +1128,9 @@ declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.Re
1128
1128
  };
1129
1129
 
1130
1130
  /**
1131
- * Subset of palette colors the TimeGrid offers for the "cell-on" tone.
1132
- * Mirrors react-fancy's `ActionColor` choice small enough to keep the
1133
- * compiled CSS tight, broad enough to cover most use cases.
1131
+ * Subset of palette colors the TimeGrid offers for the "cell-on" tone
1132
+ * small enough to keep the compiled CSS tight, broad enough to cover most
1133
+ * use cases.
1134
1134
  */
1135
1135
  type TimeGridTone = "violet" | "emerald" | "sky" | "rose" | "amber" | "indigo" | "blue" | "zinc";
1136
1136
  interface TimeGridProps {
@@ -22,22 +22,22 @@ import { AccordionPanel } from "@particle-academy/react-fancy";
22
22
  ```tsx
23
23
  <AccordionPanel orientation="horizontal" defaultValue={["wishlist"]}>
24
24
  <AccordionPanel.Section id="home" pinned>
25
- <Action icon="home" />
25
+ <Button icon="home" />
26
26
  </AccordionPanel.Section>
27
27
 
28
28
  <AccordionPanel.Section id="wishlist">
29
29
  <AccordionPanel.Trigger />
30
30
  <AccordionPanel.Content>
31
- <Action icon="list">Wishlist</Action>
32
- <Action icon="mail">Feedback</Action>
33
- <Action icon="file-text">Plans</Action>
31
+ <Button icon="list">Wishlist</Button>
32
+ <Button icon="mail">Feedback</Button>
33
+ <Button icon="file-text">Plans</Button>
34
34
  </AccordionPanel.Content>
35
35
  </AccordionPanel.Section>
36
36
 
37
37
  <AccordionPanel.Section id="board">
38
38
  <AccordionPanel.Trigger />
39
39
  <AccordionPanel.Content>
40
- <Action icon="grid">Board</Action>
40
+ <Button icon="grid">Board</Button>
41
41
  </AccordionPanel.Content>
42
42
  </AccordionPanel.Section>
43
43
  </AccordionPanel>
@@ -55,7 +55,7 @@ When closed, the Trigger renders as a standalone chevron button. When open, the
55
55
  {({ open }) => (open ? "Collapse" : "Expand")}
56
56
  </AccordionPanel.Trigger>
57
57
  <AccordionPanel.Content>
58
- <Action>Releases</Action>
58
+ <Button>Releases</Button>
59
59
  </AccordionPanel.Content>
60
60
  </AccordionPanel.Section>
61
61
  ```
package/docs/Action.md CHANGED
@@ -10,86 +10,7 @@
10
10
  > ```
11
11
  >
12
12
  > `ActionProps` → `ButtonProps`, `ActionColor` → `ButtonColor` (also deprecated
13
- > aliases). Full, current documentation lives in **[Button](./Button.md)**.
13
+ > aliases).
14
14
 
15
- A versatile button component with support for icons, emojis, avatars, badges, loading states, and color variants.
16
-
17
- ## Import
18
-
19
- ```tsx
20
- import { Action } from "@particle-academy/react-fancy"; // deprecated — prefer Button
21
- ```
22
-
23
- ## Basic Usage
24
-
25
- ```tsx
26
- <Action>Click me</Action> // identical to <Button>Click me</Button>
27
- ```
28
-
29
- ## Props
30
-
31
- | Prop | Type | Default | Description |
32
- |------|------|---------|-------------|
33
- | variant | `"default" \| "circle" \| "ghost"` | `"default"` | Shape/fill variant. `"ghost"` is transparent with subtle hover. |
34
- | color | `ActionColor` | - | Standalone color (overrides state colors). One of: `"blue"`, `"emerald"`, `"amber"`, `"red"`, `"violet"`, `"indigo"`, `"sky"`, `"rose"`, `"orange"`, `"zinc"` |
35
- | size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Button size |
36
- | active | `boolean` | - | Active state (blue highlight) |
37
- | checked | `boolean` | - | Checked state (emerald highlight) |
38
- | warn | `boolean` | - | Warning state (amber highlight) |
39
- | alert | `boolean` | - | Pulsing animation on the entire button |
40
- | icon | `string` | - | Leading icon slug resolved via the Icon component |
41
- | iconTrailing | `string` | - | Trailing icon slug |
42
- | iconPlace | `string` | `"left"` | Icon placement. Supports: `"left"`, `"right"`, `"top"`, `"bottom"`, and compound positions like `"top left"`, `"bottom right"` |
43
- | alertIcon | `string` | - | Pulsing alert icon slug |
44
- | alertIconTrailing | `boolean` | - | Position alert icon on trailing side |
45
- | emoji | `string` | - | Leading emoji slug |
46
- | emojiTrailing | `string` | - | Trailing emoji slug |
47
- | avatar | `string` | - | Avatar image URL |
48
- | avatarTrailing | `boolean` | - | Position avatar on trailing side |
49
- | badge | `string` | - | Badge text |
50
- | badgeTrailing | `boolean` | - | Position badge on trailing side |
51
- | sort | `string` | `"eiab"` | Sort order of decorative elements: `e`=emoji, `i`=icon, `a`=avatar, `b`=badge |
52
- | loading | `boolean` | `false` | Show loading spinner (disables the button) |
53
- | disabled | `boolean` | - | Disable the button |
54
- | 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>`. |
55
-
56
- Also extends all native `<button>` HTML attributes (except `color`).
57
-
58
- ## Examples
59
-
60
- ### Icon button with color
61
-
62
- ```tsx
63
- <Action icon="pencil" color="blue" size="lg">
64
- Edit
65
- </Action>
66
- ```
67
-
68
- ### Circle icon button
69
-
70
- ```tsx
71
- <Action variant="circle" icon="plus" color="emerald" />
72
- ```
73
-
74
- ### Loading state with badge
75
-
76
- ```tsx
77
- <Action loading badge="3" badgeTrailing>
78
- Messages
79
- </Action>
80
- ```
81
-
82
- ### Link button with trailing icon
83
-
84
- ```tsx
85
- <Action href="/docs" iconTrailing="arrow-right">
86
- Read docs
87
- </Action>
88
- ```
89
-
90
- ### Ghost variant
91
-
92
- ```tsx
93
- <Action variant="ghost" color="red" icon="trash-2">Delete</Action>
94
- <Action variant="ghost" icon="download">Export</Action>
95
- ```
15
+ Do not use `Action` in new code, examples, or generated snippets always use
16
+ `Button`. Full, current documentation lives in **[Button](./Button.md)**.
package/docs/utilities.md CHANGED
@@ -55,12 +55,13 @@ type Color =
55
55
  type Variant = "solid" | "outline" | "ghost" | "soft";
56
56
  ```
57
57
 
58
- ### ActionColor
58
+ ### ButtonColor
59
+
60
+ Standalone color accepted by `Button` and friends — an alias of `Color` (the
61
+ full palette above). `ActionColor` remains as a deprecated alias.
59
62
 
60
63
  ```ts
61
- type ActionColor =
62
- | "blue" | "emerald" | "amber" | "red" | "violet"
63
- | "indigo" | "sky" | "rose" | "orange" | "zinc";
64
+ type ButtonColor = Color;
64
65
  ```
65
66
 
66
67
  ### Placement
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-academy/react-fancy",
3
- "version": "4.12.0",
3
+ "version": "4.12.1",
4
4
  "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
5
5
  "repository": {
6
6
  "type": "git",