fancy-ui-react 0.2.0

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { BUTTON_GROUP_CONTEXT_KEY } from "./types.js";
+/* empty css                 */
+const ButtonGroup = forwardRef(
+  ({ orientation = "horizontal", label, children, className }, ref) => {
+    const context = useMemo(() => ({ orientation }), [orientation]);
+    return /* @__PURE__ */ jsx(BUTTON_GROUP_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "ft-button-group border-border inline-flex rounded-lg border",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        "data-orientation": orientation,
+        role: "group",
+        "aria-label": label,
+        children
+      }
+    ) });
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup
+};

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,4 @@
+export { ButtonGroup } from "./ButtonGroup.js";
+export type { ButtonGroupProps } from "./ButtonGroup.js";
+export { BUTTON_GROUP_CONTEXT_KEY } from "./types.js";
+export type { ButtonGroupContext, ButtonGroupOrientation } from "./types.js";

package/dist/components/button-group/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The contract ButtonGroup publishes to whatever it wraps.
+ *
+ * ButtonGroup only owns the seam — the border, the radius, the divider
+ * between items. It has no idea what its children are (a Button, a plain
+ * `<button>`, an `<a>`), so anything a nested control needs to adapt its own
+ * layout has to come through context rather than a prop threaded down
+ * through markup ButtonGroup does not control.
+ */
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+/** What the root publishes. Read-only: only the root decides the orientation. */
+export interface ButtonGroupContext {
+    /**
+     * The root's current orientation. On the Svelte side this is a getter so a
+     * reactive read tracks the root's prop; here the root rebuilds the context
+     * object whenever `orientation` changes, which is what re-renders the
+     * consumers below it — same live behaviour, no getter needed.
+     */
+    readonly orientation: ButtonGroupOrientation;
+}
+/**
+ * The context a nested control reads to learn the surrounding group's
+ * orientation. The Svelte source publishes it under a `Symbol` context key;
+ * React's own context object plays that role here, so the exported name is
+ * kept and the value is a `React.Context` rather than a symbol:
+ *
+ * ```tsx
+ * const group = useContext(BUTTON_GROUP_CONTEXT_KEY);
+ * ```
+ *
+ * Read it as optional — a control rendered outside a `ButtonGroup` gets
+ * `undefined` rather than throwing.
+ */
+export declare const BUTTON_GROUP_CONTEXT_KEY: import("react").Context<ButtonGroupContext | undefined>;

package/dist/components/button-group/types.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+const BUTTON_GROUP_CONTEXT_KEY = createContext(void 0);
+BUTTON_GROUP_CONTEXT_KEY.displayName = "ButtonGroupContext";
+export {
+  BUTTON_GROUP_CONTEXT_KEY
+};

package/dist/components/card-3d/CardBody.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface CardBodyProps {
+    /** Additional CSS classes. */
+    className?: string;
+    /** The card's layers — typically `<CardItem>`s. */
+    children?: ReactNode;
+}
+export declare function CardBody({ className, children }: CardBodyProps): import("react").JSX.Element;

package/dist/components/card-3d/CardBody.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function CardBody({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("h-96 w-96", className), style: { transformStyle: "preserve-3d" }, children });
+}
+export {
+  CardBody
+};

package/dist/components/card-3d/CardContainer.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+/** What a `<CardItem>` reads from its enclosing `<CardContainer>`. */
+export interface Card3DContextValue {
+    /** Whether the pointer is currently over the container. */
+    isMouseEntered: boolean;
+}
+/** Provider half of the container/item link. Rendered by `<CardContainer>`. */
+export declare const Card3DProvider: import("react").Provider<Card3DContextValue | undefined>;
+/** Reads the container's hover state. Throws outside a `<CardContainer>`. */
+export declare const useCard3D: () => Card3DContextValue;
+export interface CardContainerProps {
+    /** Additional CSS classes for the tilting 3d container. */
+    className?: string;
+    /** Additional CSS classes for the outer perspective wrapper. */
+    containerClass?: string;
+    /** The card content — typically a `<CardBody>` holding `<CardItem>`s. */
+    children?: ReactNode;
+}
+export declare function CardContainer({ className, containerClass, children, }: CardContainerProps): import("react").JSX.Element;

package/dist/components/card-3d/CardContainer.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { createInternalContext } from "../../internals/dom/context.js";
+const Card3DContext = createInternalContext("Card3DContext");
+const Card3DProvider = Card3DContext.Provider;
+const useCard3D = Card3DContext.useRequired;
+function CardContainer({
+  className = "",
+  containerClass = "",
+  children
+}) {
+  const containerRef = useRef(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+  const contextValue = useMemo(() => ({ isMouseEntered }), [isMouseEntered]);
+  function handleMouseMove(e) {
+    const container = containerRef.current;
+    if (!container) return;
+    const { left, top, width, height } = container.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) / 25;
+    const y = (e.clientY - top - height / 2) / 25;
+    container.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+  }
+  function handleMouseEnter() {
+    setIsMouseEntered(true);
+  }
+  function handleMouseLeave() {
+    const container = containerRef.current;
+    if (!container) return;
+    setIsMouseEntered(false);
+    container.style.transform = `rotateY(0deg) rotateX(0deg)`;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-center p-2", containerClass),
+      style: { perspective: "1000px" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "relative flex items-center justify-center transition-all duration-200 ease-linear",
+            className
+          ),
+          style: { transformStyle: "preserve-3d" },
+          onMouseEnter: handleMouseEnter,
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx(Card3DProvider, { value: contextValue, children })
+        }
+      )
+    }
+  );
+}
+export {
+  Card3DProvider,
+  CardContainer,
+  useCard3D
+};

package/dist/components/card-3d/CardItem.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, ReactNode } from "react";
+export interface CardItemProps {
+    /** Element to render. */
+    as?: ElementType;
+    /** Additional CSS classes. */
+    className?: string;
+    /** X offset, in pixels, applied while the container is hovered. */
+    translateX?: number | string;
+    /** Y offset, in pixels, applied while the container is hovered. */
+    translateY?: number | string;
+    /** Z offset, in pixels, applied while the container is hovered. */
+    translateZ?: number | string;
+    /** X rotation, in degrees, applied while the container is hovered. */
+    rotateX?: number | string;
+    /** Y rotation, in degrees, applied while the container is hovered. */
+    rotateY?: number | string;
+    /** Z rotation, in degrees, applied while the container is hovered. */
+    rotateZ?: number | string;
+    /** The layer's content. */
+    children?: ReactNode;
+}
+export declare function CardItem({ as, className, translateX, translateY, translateZ, rotateX, rotateY, rotateZ, children, }: CardItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/card-3d/CardItem.js

@@ -0,0 +1,29 @@
+"use client";
+import { createElement } from "react";
+import { cn } from "../../utils.js";
+import { useCard3D } from "./CardContainer.js";
+function CardItem({
+  as = "div",
+  className = "",
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  children
+}) {
+  const { isMouseEntered } = useCard3D();
+  const transform = isMouseEntered ? `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` : `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+  return createElement(
+    as,
+    {
+      className: cn("w-fit transition duration-500 ease-in-out", className),
+      style: { transform }
+    },
+    children
+  );
+}
+export {
+  CardItem
+};

package/dist/components/card-3d/index.d.ts

@@ -0,0 +1,6 @@
+export { CardContainer } from "./CardContainer.js";
+export type { CardContainerProps } from "./CardContainer.js";
+export { CardBody } from "./CardBody.js";
+export type { CardBodyProps } from "./CardBody.js";
+export { CardItem } from "./CardItem.js";
+export type { CardItemProps } from "./CardItem.js";

package/dist/components/card-spotlight/CardSpotlight.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface CardSpotlightProps {
+    /** Classes for the outer container. */
+    className?: string;
+    /** Classes for the content wrapper. */
+    slotClass?: string;
+    /** Radius of the spotlight gradient. */
+    gradientSize?: number;
+    /** Color of the spotlight. */
+    gradientColor?: string;
+    /** Opacity of the gradient overlay. */
+    gradientOpacity?: number;
+    /** The card content. */
+    children?: ReactNode;
+}
+export declare function CardSpotlight({ className, slotClass, gradientSize, gradientColor, gradientOpacity, children, }: CardSpotlightProps): import("react").JSX.Element;

package/dist/components/card-spotlight/CardSpotlight.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { cn } from "../../utils.js";
+function CardSpotlight({
+  className = "",
+  slotClass = "",
+  gradientSize = 200,
+  gradientColor = "#262626",
+  gradientOpacity = 0.8,
+  children
+}) {
+  const overlayRef = useRef(null);
+  const restingX = -gradientSize * 10;
+  const restingY = -gradientSize * 10;
+  const pointerRef = useRef({ x: restingX, y: restingY });
+  function paint(x, y) {
+    pointerRef.current = { x, y };
+    const overlay = overlayRef.current;
+    if (overlay) {
+      overlay.style.background = `radial-gradient(circle at ${x}px ${y}px, ${gradientColor} 0%, rgba(0, 0, 0, 0) 70%)`;
+    }
+  }
+  function handleMouseMove(e) {
+    const target = e.currentTarget;
+    const rect = target.getBoundingClientRect();
+    paint(e.clientX - rect.left, e.clientY - rect.top);
+  }
+  function handleMouseLeave() {
+    paint(restingX, restingY);
+  }
+  const restingBackground = `radial-gradient(circle at ${restingX}px ${restingY}px, ${gradientColor} 0%, rgba(0, 0, 0, 0) 70%)`;
+  useIsomorphicLayoutEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const { x, y } = pointerRef.current;
+    overlay.style.background = `radial-gradient(circle at ${x}px ${y}px, ${gradientColor} 0%, rgba(0, 0, 0, 0) 70%)`;
+  }, [restingBackground, gradientColor]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative flex size-full overflow-hidden rounded-xl border bg-neutral-100 text-black dark:bg-neutral-900 dark:text-white",
+        className
+      ),
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative z-10", slotClass), children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            className: "pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+            style: { background: restingBackground, opacity: gradientOpacity }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CardSpotlight
+};

package/dist/components/card-spotlight/index.d.ts

@@ -0,0 +1,2 @@
+export { CardSpotlight } from "./CardSpotlight.js";
+export type { CardSpotlightProps } from "./CardSpotlight.js";

package/dist/components/chat-error/ChatError.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/**
+ * Props for ChatError
+ */
+export interface ChatErrorProps {
+    /** The failure line, e.g. "Something went wrong" */
+    message?: string;
+    /** Secondary muted line under the message, e.g. the error code */
+    detail?: string;
+    /** Called when the retry button is pressed. The button only exists when this is set. */
+    onRetry?: () => void;
+    /** Label for the retry button */
+    retryLabel?: string;
+    /** Whether a retry is in flight: disables the button and marks the row busy */
+    retrying?: boolean;
+    /** Leading icon, replacing the default warning triangle */
+    icon?: ReactNode;
+    /** Rendered instead of the message and detail block */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the press cue through the sound controller when retry is
+     * pressed. Off by default; only audible once the user has enabled
+     * sound.
+     */
+    sound?: boolean;
+}
+/**
+ * ChatError
+ */
+export declare const ChatError: import("react").ForwardRefExoticComponent<ChatErrorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/chat-error/ChatError.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css               */
+const ChatError = forwardRef(function ChatError2({
+  message = "Something went wrong",
+  detail,
+  onRetry,
+  retryLabel = "Retry",
+  retrying = false,
+  icon,
+  children,
+  className,
+  sound = false
+}, ref) {
+  const playCue = useSoundCue(sound);
+  function handleRetry() {
+    if (retrying) return;
+    playCue("press");
+    onRetry?.();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "ft-error flex w-full items-start gap-2.5 rounded-md border px-3 py-2 text-sm",
+        className
+      ),
+      role: "alert",
+      "aria-busy": retrying ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ft-error-icon mt-0.5 flex-none", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ft-error-body min-w-0 flex-1", children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "ft-error-message text-foreground", children: message }),
+          detail && /* @__PURE__ */ jsx("p", { className: "ft-error-detail text-foreground/70 mt-0.5 text-xs", children: detail })
+        ] }) }),
+        onRetry && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ft-error-retry text-foreground/80 hover:text-foreground hover:bg-foreground/5 -my-0.5 flex flex-none items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-colors disabled:pointer-events-none disabled:opacity-60",
+            disabled: retrying,
+            onClick: handleRetry,
+            children: [
+              retrying && /* @__PURE__ */ jsx("span", { className: "ft-error-dot", "aria-hidden": "true" }),
+              retryLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ChatError
+};

package/dist/components/chat-error/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatError } from "./ChatError.js";
+export type { ChatErrorProps } from "./ChatError.js";

package/dist/components/chat-message/ChatMessage.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ChatMessage
+ */
+export interface ChatMessageProps {
+    /** Who produced this turn. Drives alignment, chrome, and the accessible name. */
+    role?: "user" | "assistant" | "system";
+    /** The message body. Growing strings animate — see StreamingText's contract. */
+    content?: string;
+    /** Whether `content` is still arriving. Passed through to the body renderer. */
+    streaming?: boolean;
+    /** Render the body as markdown instead of a tinted plain-text stream. */
+    markdown?: boolean;
+    /** When the turn was produced. Rendered relative, with the exact time as its tooltip. */
+    timestamp?: Date | number;
+    /** Rendered beside the body: an image, initials, an icon. */
+    avatar?: ReactNode;
+    /** Replaces the default body rendering entirely. `content` is then ignored. */
+    children?: ReactNode;
+    /** Action buttons, in a rail that fades in on hover or focus. Put `ChatMessageActions` here. */
+    actions?: ReactNode;
+    /** Rendered under the body — where `ChatMessageBranches` belongs. */
+    footer?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays press on a message action and select on a branch step,
+     * through the sound controller. Off by default; only audible once
+     * the user has enabled sound. Threaded to `ChatMessageAction` and
+     * `ChatMessageBranches` through context — enable it on one layer
+     * only, since a sound-enabled action nested inside another
+     * sound-enabled control would otherwise double-play.
+     */
+    sound?: boolean;
+}
+/**
+ * One turn in a conversation: an avatar, a body that can still be arriving, a
+ * relative timestamp, an action rail and a footer.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const ChatMessage: import("react").ForwardRefExoticComponent<ChatMessageProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/chat-message/ChatMessage.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { StreamingText } from "../streaming-text/StreamingText.js";
+import { formatRelativeTime } from "../../internals/relative-time.js";
+import { useNow } from "../../internals/use-elapsed.js";
+import { CHAT_MESSAGE_CONTEXT_KEY } from "./types.js";
+/* empty css                 */
+const LABELS = {
+  user: "User message",
+  assistant: "Assistant message",
+  system: "System message"
+};
+const ChatMessage = forwardRef(function ChatMessage2({
+  role = "assistant",
+  content = "",
+  streaming = false,
+  markdown = false,
+  timestamp,
+  avatar,
+  children,
+  actions,
+  footer,
+  className,
+  sound = false
+}, ref) {
+  const [pointerInside, setPointerInside] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const hovered = pointerInside || focusInside;
+  const context = useMemo(
+    () => ({ role, streaming, hovered: { current: hovered }, sound }),
+    [role, streaming, hovered, sound]
+  );
+  const isUser = role === "user";
+  const isSystem = role === "system";
+  const time = timestamp === void 0 ? void 0 : timestamp instanceof Date ? timestamp.getTime() : timestamp;
+  const isValidTime = time !== void 0 && Number.isFinite(time);
+  const now = useNow();
+  const relative = isValidTime ? formatRelativeTime(time, { now }) : "";
+  const iso = isValidTime ? new Date(time).toISOString() : void 0;
+  const body = children ?? /* @__PURE__ */ jsx(StreamingText, { text: content, streaming, markdown });
+  return /* @__PURE__ */ jsx(CHAT_MESSAGE_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "article",
+    {
+      ref,
+      className: cn(
+        "ft-message flex w-full gap-3",
+        isUser && "flex-row-reverse",
+        isSystem && "justify-center",
+        className
+      ),
+      "data-role": role,
+      "aria-label": LABELS[role],
+      onPointerEnter: () => setPointerInside(true),
+      onPointerLeave: () => setPointerInside(false),
+      onFocus: () => setFocusInside(true),
+      onBlur: () => setFocusInside(false),
+      children: isSystem ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex max-w-prose flex-col items-center gap-1 py-1 text-center", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-xs leading-relaxed text-balance",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "aria-busy": streaming,
+            children: body
+          }
+        ),
+        relative ? /* @__PURE__ */ jsx(
+          "time",
+          {
+            className: "text-[0.6875rem] tabular-nums opacity-80",
+            dateTime: iso,
+            title: iso,
+            children: relative
+          }
+        ) : null,
+        footer
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        avatar ? /* @__PURE__ */ jsx("div", { className: "ft-message-avatar mt-0.5 shrink-0", children: avatar }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-col gap-1.5",
+              isUser ? "items-end" : "w-full",
+              isUser && "ft-message-capped"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    isUser && "rounded-2xl px-4 py-2.5",
+                    isUser && "ft-message-bubble"
+                  ),
+                  "aria-live": "polite",
+                  "aria-atomic": "true",
+                  "aria-busy": streaming,
+                  children: body
+                }
+              ),
+              relative || actions ? /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", isUser && "flex-row-reverse"), children: [
+                relative ? /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    className: "text-muted-foreground text-xs tabular-nums",
+                    dateTime: iso,
+                    title: iso,
+                    children: relative
+                  }
+                ) : null,
+                actions
+              ] }) : null,
+              footer
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+});
+export {
+  ChatMessage
+};

package/dist/components/chat-message/ChatMessageAction.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent, ReactNode } from "react";
+/**
+ * Props for ChatMessageAction
+ */
+export interface ChatMessageActionProps {
+    /** Accessible name and tooltip. Required — the icon alone names nothing. */
+    label: string;
+    /** Called on click, before any confirmation label swaps in. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Pressed state for a toggle. Omit entirely for a plain button. */
+    active?: boolean;
+    /** Swapped in as the label for two seconds after a click, e.g. "Copied". */
+    confirmLabel?: string;
+    /** The icon. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** One icon button in the rail, optionally a toggle, optionally self-confirming. */
+export declare function ChatMessageAction({ label, onClick, active, confirmLabel, children, className, }: ChatMessageActionProps): import("react").JSX.Element;