@particle-academy/react-fancy 3.4.3 → 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;
@@ -6413,6 +6415,98 @@ var Callout = react.forwardRef(
   }
 );
 Callout.displayName = "Callout";
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var FauxClient = react.forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const viewportRef = react.useRef(null);
+    const stageRef = react.useRef(null);
+    const [s, setS] = react.useState(typeof scale === "number" ? scale : 1);
+    const [contentHeight, setContentHeight] = react.useState(void 0);
+    react.useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
+        const naturalHeight = stage.offsetHeight;
+        setS(next);
+        setContentHeight(naturalHeight * next);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-faux-client": "",
+        className: cn(
+          "overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: cn("relative overflow-hidden", bodyClassName),
+              style: scaled ? { height: contentHeight } : void 0,
+              children: scaled ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: stageRef,
+                  className: "absolute left-0 top-0 origin-top-left",
+                  style: { width, transform: `scale(${s})` },
+                  children
+                }
+              ) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
 var colorClasses5 = {
   yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
   blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
@@ -12168,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" }) })
     ] }) })
   ] });
 }
@@ -12608,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",
@@ -12641,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" })
           ] })
         ] })
       ]
@@ -13259,7 +13353,7 @@ function Wand({
             ] })
           ] }),
           actions.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Action,
+            Button,
             {
               size: "sm",
               variant: "ghost",
@@ -13346,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;
@@ -13367,6 +13462,7 @@ exports.EMOJI_ENTRIES = EMOJI_ENTRIES;
 exports.Editor = Editor;
 exports.Emoji = Emoji;
 exports.EmojiSelect = EmojiSelect;
+exports.FauxClient = FauxClient;
 exports.Field = Field;
 exports.FileUpload = FileUpload;
 exports.Heading = Heading;