@particle-academy/react-fancy 4.4.0 → 4.4.2

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, TdHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
@@ -626,9 +626,13 @@ interface TableRowTrayProps {
     children: ReactNode;
     className?: string;
 }
-interface TableCellProps {
-    children: ReactNode;
-    className?: string;
+/**
+ * Extends the native cell attributes so `colSpan`/`rowSpan` (full-span
+ * empty-state rows, trays) plus `onClick`, `style`, `scope`, `data-*`, etc. are
+ * forwarded onto the underlying `<td>`/`<th>` instead of silently dropped.
+ */
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Render a `<th>` header cell instead of a `<td>`. */
     header?: boolean;
 }
 interface TableColumnProps {
@@ -656,7 +660,7 @@ declare function TableBody({ children, className }: TableBodyProps): react.JSX.E
 
 declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, }: TableRowProps): react.JSX.Element;
 
-declare function TableCell({ children, className, header }: TableCellProps): react.JSX.Element;
+declare function TableCell({ children, className, header, ...rest }: TableCellProps): react.JSX.Element;
 
 declare function TableColumn({ label, sortKey, className }: TableColumnProps): react.JSX.Element;
 
@@ -1292,7 +1296,7 @@ interface ModalContextValue {
     open: boolean;
     close: () => void;
 }
-interface ModalProps {
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     children: ReactNode;
     open: boolean;
     onClose: () => void;
@@ -1327,7 +1331,7 @@ declare namespace ModalFooter {
     var displayName: string;
 }
 
-declare function ModalRoot({ children, open, onClose, size, className, }: ModalProps): react.JSX.Element | null;
+declare function ModalRoot({ children, open, onClose, size, className, ...rest }: ModalProps): react.JSX.Element | null;
 declare const Modal: typeof ModalRoot & {
     Header: typeof ModalHeader;
     Body: typeof ModalBody;
@@ -1455,7 +1459,7 @@ interface TabsListProps {
     children: ReactNode;
     className?: string;
 }
-interface TabsTabProps {
+interface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
     children: ReactNode;
     value: string;
     disabled?: boolean;
@@ -1476,7 +1480,7 @@ declare namespace TabsList {
     var displayName: string;
 }
 
-declare function TabsTab({ children, value, disabled, className, }: TabsTabProps): react.JSX.Element;
+declare function TabsTab({ children, value, disabled, className, onClick, ...rest }: TabsTabProps): react.JSX.Element;
 declare namespace TabsTab {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, TdHTMLAttributes, HTMLAttributes, ComponentType, CSSProperties, ReactElement, RefObject } from 'react';
 import { ClassValue } from 'clsx';
 
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
@@ -626,9 +626,13 @@ interface TableRowTrayProps {
     children: ReactNode;
     className?: string;
 }
-interface TableCellProps {
-    children: ReactNode;
-    className?: string;
+/**
+ * Extends the native cell attributes so `colSpan`/`rowSpan` (full-span
+ * empty-state rows, trays) plus `onClick`, `style`, `scope`, `data-*`, etc. are
+ * forwarded onto the underlying `<td>`/`<th>` instead of silently dropped.
+ */
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Render a `<th>` header cell instead of a `<td>`. */
     header?: boolean;
 }
 interface TableColumnProps {
@@ -656,7 +660,7 @@ declare function TableBody({ children, className }: TableBodyProps): react.JSX.E
 
 declare function TableRow({ children, className, onClick, tray, trayTriggerPosition, expanded: controlledExpanded, defaultExpanded, onExpandedChange, }: TableRowProps): react.JSX.Element;
 
-declare function TableCell({ children, className, header }: TableCellProps): react.JSX.Element;
+declare function TableCell({ children, className, header, ...rest }: TableCellProps): react.JSX.Element;
 
 declare function TableColumn({ label, sortKey, className }: TableColumnProps): react.JSX.Element;
 
@@ -1292,7 +1296,7 @@ interface ModalContextValue {
     open: boolean;
     close: () => void;
 }
-interface ModalProps {
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     children: ReactNode;
     open: boolean;
     onClose: () => void;
@@ -1327,7 +1331,7 @@ declare namespace ModalFooter {
     var displayName: string;
 }
 
-declare function ModalRoot({ children, open, onClose, size, className, }: ModalProps): react.JSX.Element | null;
+declare function ModalRoot({ children, open, onClose, size, className, ...rest }: ModalProps): react.JSX.Element | null;
 declare const Modal: typeof ModalRoot & {
     Header: typeof ModalHeader;
     Body: typeof ModalBody;
@@ -1455,7 +1459,7 @@ interface TabsListProps {
     children: ReactNode;
     className?: string;
 }
-interface TabsTabProps {
+interface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
     children: ReactNode;
     value: string;
     disabled?: boolean;
@@ -1476,7 +1480,7 @@ declare namespace TabsList {
     var displayName: string;
 }
 
-declare function TabsTab({ children, value, disabled, className, }: TabsTabProps): react.JSX.Element;
+declare function TabsTab({ children, value, disabled, className, onClick, ...rest }: TabsTabProps): react.JSX.Element;
 declare namespace TabsTab {
     var displayName: string;
 }

package/dist/index.js

@@ -2518,9 +2518,14 @@ var Button = forwardRef(
         {
           "data-react-fancy-button-label": "",
           className: cn(
-            // min-w-0 lets the label shrink + wrap inside the flex row instead
-            // of overflowing and shoving the icon out of place.
-            "min-w-0",
+            // 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",
@@ -5498,7 +5503,7 @@ function TableRow({
     hasTray && expanded && /* @__PURE__ */ jsx("tr", { className: "bg-zinc-50/50 dark:bg-zinc-800/30", children: /* @__PURE__ */ jsx("td", { colSpan: 999, children: tray }) })
   ] });
 }
-function TableCell({ children, className, header }) {
+function TableCell({ children, className, header, ...rest }) {
   const Tag = header ? "th" : "td";
   return /* @__PURE__ */ jsx(
     Tag,
@@ -5509,6 +5514,7 @@ function TableCell({ children, className, header }) {
         header && "text-left font-medium text-zinc-500 dark:text-zinc-400",
         className
       ),
+      ...rest,
       children
     }
   );
@@ -7904,7 +7910,8 @@ function ModalRoot({
   open,
   onClose,
   size = "md",
-  className
+  className,
+  ...rest
 }) {
   const panelRef = useRef(null);
   const close = useCallback(() => onClose(), [onClose]);
@@ -7945,6 +7952,7 @@ function ModalRoot({
         "data-react-fancy-modal": "",
         role: "dialog",
         "aria-modal": "true",
+        ...rest,
         className: cn(
           "relative flex w-full flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900",
           SIZE_MAP[size],
@@ -8312,7 +8320,9 @@ function TabsTab({
   children,
   value,
   disabled = false,
-  className
+  className,
+  onClick,
+  ...rest
 }) {
   const { activeTab, setActiveTab, variant } = useTabs();
   const isActive = activeTab === value;
@@ -8325,7 +8335,11 @@ function TabsTab({
       disabled,
       "aria-selected": isActive,
       tabIndex: isActive ? 0 : -1,
-      onClick: () => !disabled && setActiveTab(value),
+      onClick: (e) => {
+        if (!disabled) setActiveTab(value);
+        onClick?.(e);
+      },
+      ...rest,
       className: cn(
         "text-sm font-medium transition-colors",
         disabled && "cursor-not-allowed opacity-50",
@@ -12893,13 +12907,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",
@@ -12912,7 +12927,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" }),
               " ",
@@ -12922,7 +12937,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" })
           ] })
         ] })
       ]