@particle-academy/react-fancy 4.3.0 → 4.4.1

package/dist/index.d.cts

@@ -59,6 +59,16 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "col
     disabled?: boolean;
     /** Render as anchor tag */
     href?: string;
+    /**
+     * Collapse to icon-only when squeezed — injects the minimal Tailwind classes
+     * (`sr-only sm:not-sr-only`) onto the label so it stays screen-reader
+     * accessible but visually hidden on small screens. The label is also directly
+     * targetable via `data-react-fancy-button-label` for a custom breakpoint, e.g.
+     * `className="[&_[data-react-fancy-button-label]]:hidden md:[&_[data-react-fancy-button-label]]:inline"`.
+     */
+    responsive?: boolean;
+    /** Extra classes for the label wrapper — alignment, responsive hiding, etc. */
+    labelClassName?: string;
 }
 /**
  * @deprecated Renamed to {@link ButtonProps}. `ActionProps` remains as an alias

package/dist/index.d.ts

@@ -59,6 +59,16 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "col
     disabled?: boolean;
     /** Render as anchor tag */
     href?: string;
+    /**
+     * Collapse to icon-only when squeezed — injects the minimal Tailwind classes
+     * (`sr-only sm:not-sr-only`) onto the label so it stays screen-reader
+     * accessible but visually hidden on small screens. The label is also directly
+     * targetable via `data-react-fancy-button-label` for a custom breakpoint, e.g.
+     * `className="[&_[data-react-fancy-button-label]]:hidden md:[&_[data-react-fancy-button-label]]:inline"`.
+     */
+    responsive?: boolean;
+    /** Extra classes for the label wrapper — alignment, responsive hiding, etc. */
+    labelClassName?: string;
 }
 /**
  * @deprecated Renamed to {@link ButtonProps}. `ActionProps` remains as an alias

package/dist/index.js

@@ -2375,6 +2375,8 @@ var Button = forwardRef(
     loading = false,
     disabled,
     href,
+    responsive,
+    labelClassName,
     ...props
   }, ref) => {
     const isCircle = variant === "circle";
@@ -2486,7 +2488,10 @@ var Button = forwardRef(
     const trailingAlert = renderAlertIcon(true);
     if (trailingAlert) trailingElements.push(trailingAlert);
     const classes = cn(
-      "inline-flex items-center justify-center font-medium transition-all duration-200",
+      // `text-left` overrides the UA <button> center default so a wrapped,
+      // width-constrained multi-word label stacks left-aligned. Overridable —
+      // twMerge lets a `text-center` / `text-right` in `className` win.
+      "inline-flex items-center justify-center text-left font-medium transition-all duration-200",
       "focus:outline-none focus:ring-2 focus:ring-offset-1",
       "disabled:opacity-50 disabled:cursor-not-allowed",
       isCircle ? "rounded-full" : "rounded-lg",
@@ -2508,7 +2513,27 @@ var Button = forwardRef(
       }
     ) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSizeMap[size] }) : children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       leadingElements,
-      children != null && /* @__PURE__ */ jsx("span", { children }),
+      children != null && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-react-fancy-button-label": "",
+          className: cn(
+            // A button label must stay on one line. When a host flex layout
+            // squeezes the button, `whitespace-nowrap` keeps the label and any
+            // trailing icon/arrow together instead of wrapping and stacking the
+            // icon below it (the classic "send" over "→" break). `min-w-0` keeps
+            // the span shrinkable so `truncate`/ellipsis still works; multi-line
+            // wrapping is opt-in via `labelClassName` ("whitespace-normal") or
+            // the `responsive` prop.
+            "min-w-0 whitespace-nowrap",
+            // `responsive` collapses to icon-only when squeezed, while keeping
+            // the label readable to screen readers.
+            responsive && "sr-only sm:not-sr-only",
+            labelClassName
+          ),
+          children
+        }
+      ),
       trailingElements
     ] });
     const safeHref = sanitizeHref(href);
@@ -12873,13 +12898,14 @@ function PromptInput({
             {
               variant: "ghost",
               size: "sm",
+              className: "shrink-0",
               onClick: () => {
               },
               children: "\u{1F4CE} attach"
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "ml-2 flex min-w-0 items-center gap-1.5 overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-1.5 w-24 shrink overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: /* @__PURE__ */ jsx(
               "div",
               {
                 className: "h-full rounded-full transition-all",
@@ -12892,7 +12918,7 @@ function PromptInput({
               fmtTokens(budgetTokens)
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
             showHint && /* @__PURE__ */ jsxs("span", { className: "hidden text-[10px] text-zinc-500 sm:inline", children: [
               /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "\u2318" }),
               " ",
@@ -12902,7 +12928,7 @@ function PromptInput({
               " ",
               "to send"
             ] }),
-            /* @__PURE__ */ jsx(Button, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
+            /* @__PURE__ */ jsx(Button, { color: "violet", size: "sm", className: "shrink-0", onClick: submit, children: "send \u2192" })
           ] })
         ] })
       ]