@better-zap/react 0.2.1 → 0.2.2

package/dist/bubble.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/bubble.tsx
+const bubbleVariants = (0, require("class-variance-authority").cva)("relative w-fit max-w-full rounded-[7.5px] px-[9px] py-[6px] text-[14.2px] leading-[19px] shadow-[0_1px_0.5px_rgba(11,20,26,0.13)]", {
+	variants: { variant: {
+		default: "bg-white text-[#111b21]",
+		primary: "bg-[#d9fdd3] text-[#111b21]",
+		destructive: "bg-[#fdd8d5] text-[#111b21]",
+		outline: "border border-gray-300 bg-transparent text-[#111b21] shadow-none",
+		muted: "bg-gray-50 text-gray-500"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const tailCornerByAlign = {
+	start: "rounded-tl-none",
+	end: "rounded-tr-none"
+};
+const tailColorByVariant = {
+	default: "text-white",
+	primary: "text-[#d9fdd3]",
+	destructive: "text-[#fdd8d5]",
+	outline: "text-transparent",
+	muted: "text-gray-50"
+};
+/** WhatsApp's bubble tail, drawn outside the top corner of the bubble. */
+function BubbleTail({ align, variant }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": true,
+		className: require_utils.cn("absolute top-0 block h-[13px] w-2", align === "start" ? "-left-2 -scale-x-100" : "-right-2", tailColorByVariant[variant]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			viewBox: "0 0 8 13",
+			width: "8",
+			height: "13",
+			fill: "none",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				fill: "#0b141a",
+				opacity: "0.13",
+				d: "M5.188 1H0v11.193l6.467-8.625C7.526 2.156 6.958 1 5.188 1Z"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				fill: "currentColor",
+				d: "M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0Z"
+			})]
+		})
+	});
+}
+function Bubble({ variant = "default", align = "start", tail = true, className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-variant": variant,
+		"data-align": align,
+		className: require_utils.cn(bubbleVariants({ variant }), tail && tailCornerByAlign[align], className),
+		...props,
+		children: [tail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BubbleTail, {
+			align,
+			variant
+		}), children]
+	});
+}
+function BubbleContent({ render, className, children, ...props }) {
+	const contentClassName = require_utils.cn("whitespace-pre-wrap break-words select-text focus-visible:outline-2 focus-visible:outline-offset-2", className);
+	if (render) return require_utils.renderSlot(render, {
+		className: contentClassName,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: contentClassName,
+		...props,
+		children
+	});
+}
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-side": side,
+		"data-align": align,
+		className: require_utils.cn("absolute z-10 flex items-center gap-0.5 rounded-full border border-gray-200 bg-white px-1.5 py-0.5 text-xs shadow-sm", side === "bottom" ? "-bottom-2.5" : "-top-2.5", align === "start" ? "left-1" : "right-1", className),
+		...props
+	});
+}
+function BubbleGroup({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-align": align,
+		className: require_utils.cn("flex w-full flex-col gap-0.5", align === "start" ? "items-start" : "items-end", className),
+		...props
+	});
+}
+//#endregion
+exports.Bubble = Bubble;
+exports.BubbleContent = BubbleContent;
+exports.BubbleGroup = BubbleGroup;
+exports.BubbleReactions = BubbleReactions;

package/dist/bubble.d.cts

@@ -0,0 +1,61 @@
+import React from "react";
+
+//#region src/bubble.d.ts
+type BubbleAlign = "start" | "end";
+type BubbleVariant = "default" | "primary" | "destructive" | "outline" | "muted";
+interface BubbleProps extends React.ComponentProps<"div"> {
+  /** Visual treatment. Presentational only — never domain terms. @default "default" */
+  variant?: BubbleVariant;
+  /** Which side the corner tail sits on. @default "start" */
+  align?: BubbleAlign;
+  /**
+   * Renders WhatsApp's corner tail and squares that corner. Show it on the
+   * first bubble of a group (or a lone bubble), hide it on follow-ups.
+   * @default true
+   */
+  tail?: boolean;
+}
+declare function Bubble({
+  variant,
+  align,
+  tail,
+  className,
+  children,
+  ...props
+}: BubbleProps): React.JSX.Element;
+interface BubbleContentProps extends React.ComponentProps<"div"> {
+  /**
+   * Element-only polymorphism (Base UI style). When provided, BubbleContent
+   * clones this element instead of rendering a &lt;div&gt;, merging props per renderSlot.
+   */
+  render?: React.ReactElement<Record<string, unknown>>;
+}
+declare function BubbleContent({
+  render,
+  className,
+  children,
+  ...props
+}: BubbleContentProps): React.JSX.Element;
+interface BubbleReactionsProps extends React.ComponentProps<"div"> {
+  /** @default "bottom" */
+  side?: "top" | "bottom";
+  /** @default "end" */
+  align?: BubbleAlign;
+}
+declare function BubbleReactions({
+  side,
+  align,
+  className,
+  ...props
+}: BubbleReactionsProps): React.JSX.Element;
+interface BubbleGroupProps extends React.ComponentProps<"div"> {
+  /** @default "start" */
+  align?: BubbleAlign;
+}
+declare function BubbleGroup({
+  align,
+  className,
+  ...props
+}: BubbleGroupProps): React.JSX.Element;
+//#endregion
+export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant };

package/dist/bubble.d.mts

@@ -0,0 +1,61 @@
+import React from "react";
+
+//#region src/bubble.d.ts
+type BubbleAlign = "start" | "end";
+type BubbleVariant = "default" | "primary" | "destructive" | "outline" | "muted";
+interface BubbleProps extends React.ComponentProps<"div"> {
+  /** Visual treatment. Presentational only — never domain terms. @default "default" */
+  variant?: BubbleVariant;
+  /** Which side the corner tail sits on. @default "start" */
+  align?: BubbleAlign;
+  /**
+   * Renders WhatsApp's corner tail and squares that corner. Show it on the
+   * first bubble of a group (or a lone bubble), hide it on follow-ups.
+   * @default true
+   */
+  tail?: boolean;
+}
+declare function Bubble({
+  variant,
+  align,
+  tail,
+  className,
+  children,
+  ...props
+}: BubbleProps): React.JSX.Element;
+interface BubbleContentProps extends React.ComponentProps<"div"> {
+  /**
+   * Element-only polymorphism (Base UI style). When provided, BubbleContent
+   * clones this element instead of rendering a &lt;div&gt;, merging props per renderSlot.
+   */
+  render?: React.ReactElement<Record<string, unknown>>;
+}
+declare function BubbleContent({
+  render,
+  className,
+  children,
+  ...props
+}: BubbleContentProps): React.JSX.Element;
+interface BubbleReactionsProps extends React.ComponentProps<"div"> {
+  /** @default "bottom" */
+  side?: "top" | "bottom";
+  /** @default "end" */
+  align?: BubbleAlign;
+}
+declare function BubbleReactions({
+  side,
+  align,
+  className,
+  ...props
+}: BubbleReactionsProps): React.JSX.Element;
+interface BubbleGroupProps extends React.ComponentProps<"div"> {
+  /** @default "start" */
+  align?: BubbleAlign;
+}
+declare function BubbleGroup({
+  align,
+  className,
+  ...props
+}: BubbleGroupProps): React.JSX.Element;
+//#endregion
+export { Bubble, BubbleAlign, BubbleContent, BubbleContentProps, BubbleGroup, BubbleGroupProps, BubbleProps, BubbleReactions, BubbleReactionsProps, BubbleVariant };

package/dist/bubble.mjs

@@ -0,0 +1,89 @@
+import { cn, renderSlot } from "./utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/bubble.tsx
+const bubbleVariants = cva("relative w-fit max-w-full rounded-[7.5px] px-[9px] py-[6px] text-[14.2px] leading-[19px] shadow-[0_1px_0.5px_rgba(11,20,26,0.13)]", {
+	variants: { variant: {
+		default: "bg-white text-[#111b21]",
+		primary: "bg-[#d9fdd3] text-[#111b21]",
+		destructive: "bg-[#fdd8d5] text-[#111b21]",
+		outline: "border border-gray-300 bg-transparent text-[#111b21] shadow-none",
+		muted: "bg-gray-50 text-gray-500"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const tailCornerByAlign = {
+	start: "rounded-tl-none",
+	end: "rounded-tr-none"
+};
+const tailColorByVariant = {
+	default: "text-white",
+	primary: "text-[#d9fdd3]",
+	destructive: "text-[#fdd8d5]",
+	outline: "text-transparent",
+	muted: "text-gray-50"
+};
+/** WhatsApp's bubble tail, drawn outside the top corner of the bubble. */
+function BubbleTail({ align, variant }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("absolute top-0 block h-[13px] w-2", align === "start" ? "-left-2 -scale-x-100" : "-right-2", tailColorByVariant[variant]),
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 8 13",
+			width: "8",
+			height: "13",
+			fill: "none",
+			children: [/* @__PURE__ */ jsx("path", {
+				fill: "#0b141a",
+				opacity: "0.13",
+				d: "M5.188 1H0v11.193l6.467-8.625C7.526 2.156 6.958 1 5.188 1Z"
+			}), /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0Z"
+			})]
+		})
+	});
+}
+function Bubble({ variant = "default", align = "start", tail = true, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-variant": variant,
+		"data-align": align,
+		className: cn(bubbleVariants({ variant }), tail && tailCornerByAlign[align], className),
+		...props,
+		children: [tail && /* @__PURE__ */ jsx(BubbleTail, {
+			align,
+			variant
+		}), children]
+	});
+}
+function BubbleContent({ render, className, children, ...props }) {
+	const contentClassName = cn("whitespace-pre-wrap break-words select-text focus-visible:outline-2 focus-visible:outline-offset-2", className);
+	if (render) return renderSlot(render, {
+		className: contentClassName,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: contentClassName,
+		...props,
+		children
+	});
+}
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-side": side,
+		"data-align": align,
+		className: cn("absolute z-10 flex items-center gap-0.5 rounded-full border border-gray-200 bg-white px-1.5 py-0.5 text-xs shadow-sm", side === "bottom" ? "-bottom-2.5" : "-top-2.5", align === "start" ? "left-1" : "right-1", className),
+		...props
+	});
+}
+function BubbleGroup({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-align": align,
+		className: cn("flex w-full flex-col gap-0.5", align === "start" ? "items-start" : "items-end", className),
+		...props
+	});
+}
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

package/dist/composer.cjs

@@ -0,0 +1,220 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _hugeicons_react = require("@hugeicons/react");
+let _hugeicons_core_free_icons = require("@hugeicons/core-free-icons");
+//#region src/composer.tsx
+const ComposerValueContext = (0, react.createContext)(null);
+const ComposerStateContext = (0, react.createContext)(null);
+/** The live draft string. Consumers re-render on every keystroke. */
+function useComposerValue() {
+	const value = (0, react.useContext)(ComposerValueContext);
+	if (value === null) throw new Error("useComposerValue must be used within <Composer>");
+	return value;
+}
+/**
+* Actions and boundary-stable flags without the live draft. Prefer this in
+* children that don't display the text (send/attach buttons, error slots) so
+* they don't re-render per keystroke.
+*/
+function useComposerState() {
+	const ctx = (0, react.useContext)(ComposerStateContext);
+	if (!ctx) throw new Error("useComposerState must be used within <Composer>");
+	return ctx;
+}
+/** Full composer context. Subscribes to the draft: re-renders per keystroke. */
+function useComposer() {
+	const ctx = (0, react.useContext)(ComposerStateContext);
+	const value = (0, react.useContext)(ComposerValueContext);
+	if (!ctx || value === null) throw new Error("useComposer must be used within <Composer>");
+	const { hasText: _hasText, ...rest } = ctx;
+	return {
+		...rest,
+		value
+	};
+}
+const PILL_CLASS = "flex flex-wrap items-center gap-1 px-2 py-1 min-h-[52px] bg-white rounded-[24px] shadow-[0_1px_3px_rgba(11,20,26,0.12)]";
+/**
+* Owns draft/send state below the pill markup, so uncontrolled keystrokes
+* re-render this provider and draft consumers only, never the pill div or
+* children that stick to useComposerState.
+*/
+function ComposerProvider({ value: valueProp, defaultValue, onValueChange, onSubmit, onError, disabled, children }) {
+	const isControlled = valueProp !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const [isSending, setIsSending] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const value = isControlled ? valueProp : internalValue;
+	const valueRef = (0, react.useRef)(value);
+	valueRef.current = value;
+	const disabledRef = (0, react.useRef)(disabled);
+	disabledRef.current = disabled;
+	const isSendingRef = (0, react.useRef)(false);
+	const onSubmitRef = (0, react.useRef)(onSubmit);
+	onSubmitRef.current = onSubmit;
+	const onErrorRef = (0, react.useRef)(onError);
+	onErrorRef.current = onError;
+	const onValueChangeRef = (0, react.useRef)(onValueChange);
+	onValueChangeRef.current = onValueChange;
+	const isControlledRef = (0, react.useRef)(isControlled);
+	isControlledRef.current = isControlled;
+	const setValue = (0, react.useCallback)((next) => {
+		if (!isControlledRef.current) setInternalValue(next);
+		onValueChangeRef.current?.(next);
+	}, []);
+	const clearError = (0, react.useCallback)(() => {
+		setError(null);
+	}, []);
+	const send = (0, react.useCallback)(() => {
+		(async () => {
+			const text = valueRef.current.trim();
+			if (!text || disabledRef.current || isSendingRef.current) return;
+			setError(null);
+			isSendingRef.current = true;
+			setIsSending(true);
+			try {
+				await onSubmitRef.current(text);
+				setValue("");
+			} catch (err) {
+				setError(err);
+				onErrorRef.current?.(err, { text });
+			} finally {
+				isSendingRef.current = false;
+				setIsSending(false);
+			}
+		})();
+	}, [setValue]);
+	const hasText = value.trim().length > 0;
+	const canSend = hasText && !disabled && !isSending;
+	const stateValue = (0, react.useMemo)(() => ({
+		setValue,
+		isSending,
+		disabled,
+		canSend,
+		hasText,
+		error,
+		clearError,
+		send
+	}), [
+		setValue,
+		isSending,
+		disabled,
+		canSend,
+		hasText,
+		error,
+		clearError,
+		send
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerStateContext.Provider, {
+		value: stateValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerValueContext.Provider, {
+			value,
+			children
+		})
+	});
+}
+function Composer({ value, defaultValue = "", onValueChange, onSubmit, onError, disabled = false, className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn(PILL_CLASS, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerProvider, {
+			value,
+			defaultValue,
+			onValueChange,
+			onSubmit,
+			onError,
+			disabled,
+			children
+		})
+	});
+}
+const TEXTAREA_CLASS = "flex-1 bg-transparent border-none text-[15px] leading-[22px] text-[#111b21] resize-none focus:outline-none max-h-[120px] placeholder:text-[#8696a0]";
+function ComposerTextarea({ submitOnEnter = true, className, disabled: disabledProp, onKeyDown, onChange, ...props }) {
+	const value = useComposerValue();
+	const { setValue, disabled, isSending, send } = useComposerState();
+	const textareaRef = (0, react.useRef)(null);
+	const isDisabled = disabled || isSending || !!disabledProp;
+	(0, react.useEffect)(() => {
+		const el = textareaRef.current;
+		if (!el) return;
+		el.style.height = "auto";
+		if (value === "") return;
+		el.style.height = `${el.scrollHeight}px`;
+	}, [value]);
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (!submitOnEnter) return;
+		if (e.key !== "Enter" || e.shiftKey) return;
+		if (e.nativeEvent.isComposing) return;
+		e.preventDefault();
+		send();
+	};
+	const handleChange = (e) => {
+		setValue(e.target.value);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		ref: textareaRef,
+		className: require_utils.cn(TEXTAREA_CLASS, className),
+		name: "message",
+		autoComplete: "off",
+		rows: 1,
+		value,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		disabled: isDisabled,
+		...props
+	});
+}
+function ComposerSend({ className, disabled: disabledProp, onClick, children, type = "button", ...props }) {
+	const { canSend, send } = useComposerState();
+	const handleClick = (e) => {
+		send();
+		onClick?.(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type,
+		className: require_utils.cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#00a884] text-white transition-colors hover:bg-[#008f72] disabled:opacity-40 disabled:cursor-not-allowed", className),
+		disabled: !canSend || !!disabledProp,
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+			icon: _hugeicons_core_free_icons.Sent02Icon,
+			size: 20
+		})
+	});
+}
+function ComposerButton({ className, disabled: disabledProp, type = "button", ...props }) {
+	const { isSending } = useComposerState();
+	const isDisabled = disabledProp !== void 0 ? disabledProp : isSending;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type,
+		className: require_utils.cn("p-2 rounded-full hover:bg-black/5 transition-colors disabled:opacity-40", className),
+		disabled: isDisabled,
+		...props
+	});
+}
+function ComposerError({ children, className, ...props }) {
+	const { error } = useComposerState();
+	if (error == null) return null;
+	const content = typeof children === "function" ? children(error) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "alert",
+		className: require_utils.cn("w-full order-last", className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+exports.Composer = Composer;
+exports.ComposerButton = ComposerButton;
+exports.ComposerError = ComposerError;
+exports.ComposerSend = ComposerSend;
+exports.ComposerTextarea = ComposerTextarea;
+exports.useComposer = useComposer;
+exports.useComposerState = useComposerState;
+exports.useComposerValue = useComposerValue;

package/dist/composer.d.cts

@@ -0,0 +1,96 @@
+import React from "react";
+
+//#region src/composer.d.ts
+interface ComposerContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  isSending: boolean;
+  disabled: boolean;
+  /** value.trim() is non-empty && !disabled && !isSending */
+  canSend: boolean;
+  /** null when no failed send is pending display */
+  error: unknown;
+  clearError: () => void;
+  /** Fire-and-forget; never rejects. See send() algorithm. */
+  send: () => void;
+}
+/**
+ * Everything except the live draft string. Changes only on boundary events
+ * (empty <-> non-empty, send lifecycle, errors), so consumers skip the
+ * per-keystroke re-render that `useComposer` implies.
+ */
+interface ComposerStateContextValue extends Omit<ComposerContextValue, "value"> {
+  /** value.trim() is non-empty. Boundary-stable, unlike `value` itself. */
+  hasText: boolean;
+}
+/** The live draft string. Consumers re-render on every keystroke. */
+declare function useComposerValue(): string;
+/**
+ * Actions and boundary-stable flags without the live draft. Prefer this in
+ * children that don't display the text (send/attach buttons, error slots) so
+ * they don't re-render per keystroke.
+ */
+declare function useComposerState(): ComposerStateContextValue;
+/** Full composer context. Subscribes to the draft: re-renders per keystroke. */
+declare function useComposer(): ComposerContextValue;
+interface ComposerProps extends Omit<React.ComponentProps<"div">, "onSubmit" | "onError"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Required. Throw/reject to signal failure; the draft is preserved. */
+  onSubmit: (text: string) => void | Promise<void>;
+  onError?: (error: unknown, context: {
+    text: string;
+  }) => void;
+  disabled?: boolean;
+}
+declare function Composer({
+  value,
+  defaultValue,
+  onValueChange,
+  onSubmit,
+  onError,
+  disabled,
+  className,
+  children,
+  ...props
+}: ComposerProps): React.JSX.Element;
+interface ComposerTextareaProps extends React.ComponentProps<"textarea"> {
+  /** Enter sends (Shift+Enter = newline). Ignores IME composition. @default true */
+  submitOnEnter?: boolean;
+}
+declare function ComposerTextarea({
+  submitOnEnter,
+  className,
+  disabled: disabledProp,
+  onKeyDown,
+  onChange,
+  ...props
+}: ComposerTextareaProps): React.JSX.Element;
+type ComposerSendProps = React.ComponentProps<"button">;
+declare function ComposerSend({
+  className,
+  disabled: disabledProp,
+  onClick,
+  children,
+  type,
+  ...props
+}: ComposerSendProps): React.JSX.Element;
+type ComposerButtonProps = React.ComponentProps<"button">;
+declare function ComposerButton({
+  className,
+  disabled: disabledProp,
+  type,
+  ...props
+}: ComposerButtonProps): React.JSX.Element;
+interface ComposerErrorProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Static node, or a function receiving the error. */
+  children?: React.ReactNode | ((error: unknown) => React.ReactNode);
+}
+declare function ComposerError({
+  children,
+  className,
+  ...props
+}: ComposerErrorProps): React.JSX.Element | null;
+//#endregion
+export { Composer, ComposerButton, ComposerButtonProps, ComposerContextValue, ComposerError, ComposerErrorProps, ComposerProps, ComposerSend, ComposerSendProps, ComposerStateContextValue, ComposerTextarea, ComposerTextareaProps, useComposer, useComposerState, useComposerValue };