@particle-academy/react-fancy 3.5.0 → 4.0.0

package/README.md

@@ -57,7 +57,7 @@ Add the `@source` directive to your main CSS file so Tailwind v4 scans the compo
 Then import and use components:
 
 ```tsx
-import { Action, Input, Modal, Dropdown } from "@particle-academy/react-fancy";
+import { Button, Input, Modal, Dropdown } from "@particle-academy/react-fancy";
 import "@particle-academy/react-fancy/styles.css";
 ```
 
@@ -82,7 +82,8 @@ npx vite build                      # Build demo app (verifies imports work)
 
 | Component | Description | Docs |
 |-----------|-------------|------|
-| Action | Button with colors, states, icons, emoji, avatar, badge, sort control | [docs](docs/Action.md) |
+| Button | Button with colors, states, icons, emoji, avatar, badge, sort control | [docs](docs/Button.md) |
+| ~~Action~~ | Deprecated alias of `Button` (kept for backward compatibility) | [docs](docs/Action.md) |
 | Carousel | Slide carousel with directional/wizard variants, autoplay, loop | [docs](docs/Carousel.md) |
 | ColorPicker | Native color input with swatch preview, hex display, presets | [docs](docs/ColorPicker.md) |
 | Emoji | Emoji renderer from slugs | [docs](docs/Emoji.md) |
@@ -240,7 +241,7 @@ src/
 
 - `Size` — `"xs" | "sm" | "md" | "lg" | "xl"`
 - `Color` — Full Tailwind color palette (17 colors)
-- `ActionColor` — Subset of 10 standalone colors used by Action and friends
+- `ButtonColor` — Subset of 10 standalone colors used by `Button` and friends (legacy alias: `ActionColor`)
 - `Variant` — `"solid" | "outline" | "ghost" | "soft"`
 - `Placement` — `"top" | "bottom" | "left" | "right"` + start/end variants
 

package/dist/index.cjs

@@ -2344,7 +2344,7 @@ function parseSortOrder(sort) {
   }
   return valid;
 }
-var Action = react.forwardRef(
+var Button = react.forwardRef(
   ({
     children,
     className,
@@ -2507,12 +2507,13 @@ var Action = react.forwardRef(
       trailingElements
     ] });
     const safeHref = sanitizeHref(href);
-    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: safeHref, className: classes, "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsxRuntime.jsx(
+    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: safeHref, className: classes, "data-react-fancy-button": "", "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
         className: classes,
         disabled: disabled || loading,
+        "data-react-fancy-button": "",
         "data-react-fancy-action": "",
         ...props,
         children: content
@@ -2576,7 +2577,8 @@ var Action = react.forwardRef(
     return buttonEl;
   }
 );
-Action.displayName = "Action";
+Button.displayName = "Button";
+var Action = Button;
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
   const isControlled = controlledValue !== void 0;
@@ -12260,7 +12262,7 @@ function ReasonTag({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: s.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
       ] }),
-      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Action, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
     ] }) })
   ] });
 }
@@ -12700,7 +12702,7 @@ function PromptInput({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-200 bg-zinc-50/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/40", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "Drop files here, or click", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Action,
+            Button,
             {
               variant: "ghost",
               size: "sm",
@@ -12733,7 +12735,7 @@ function PromptInput({
               " ",
               "to send"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Action, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
           ] })
         ] })
       ]
@@ -13351,7 +13353,7 @@ function Wand({
             ] })
           ] }),
           actions.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Action,
+            Button,
             {
               size: "sm",
               variant: "ghost",
@@ -13438,6 +13440,7 @@ exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Brand = Brand;
 exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Callout = Callout;
 exports.Card = Card;