@better-zap/react 0.2.0 → 0.2.2

package/dist/composer.d.mts

@@ -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 };

package/dist/composer.mjs

@@ -0,0 +1,211 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Sent02Icon } from "@hugeicons/core-free-icons";
+//#region src/composer.tsx
+const ComposerValueContext = createContext(null);
+const ComposerStateContext = createContext(null);
+/** The live draft string. Consumers re-render on every keystroke. */
+function useComposerValue() {
+	const value = 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 = 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 = useContext(ComposerStateContext);
+	const value = 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] = useState(defaultValue);
+	const [isSending, setIsSending] = useState(false);
+	const [error, setError] = useState(null);
+	const value = isControlled ? valueProp : internalValue;
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const disabledRef = useRef(disabled);
+	disabledRef.current = disabled;
+	const isSendingRef = useRef(false);
+	const onSubmitRef = useRef(onSubmit);
+	onSubmitRef.current = onSubmit;
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
+	const onValueChangeRef = useRef(onValueChange);
+	onValueChangeRef.current = onValueChange;
+	const isControlledRef = useRef(isControlled);
+	isControlledRef.current = isControlled;
+	const setValue = useCallback((next) => {
+		if (!isControlledRef.current) setInternalValue(next);
+		onValueChangeRef.current?.(next);
+	}, []);
+	const clearError = useCallback(() => {
+		setError(null);
+	}, []);
+	const send = 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 = useMemo(() => ({
+		setValue,
+		isSending,
+		disabled,
+		canSend,
+		hasText,
+		error,
+		clearError,
+		send
+	}), [
+		setValue,
+		isSending,
+		disabled,
+		canSend,
+		hasText,
+		error,
+		clearError,
+		send
+	]);
+	return /* @__PURE__ */ jsx(ComposerStateContext.Provider, {
+		value: stateValue,
+		children: /* @__PURE__ */ jsx(ComposerValueContext.Provider, {
+			value,
+			children
+		})
+	});
+}
+function Composer({ value, defaultValue = "", onValueChange, onSubmit, onError, disabled = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(PILL_CLASS, className),
+		...props,
+		children: /* @__PURE__ */ 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 = useRef(null);
+	const isDisabled = disabled || isSending || !!disabledProp;
+	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__ */ jsx("textarea", {
+		ref: textareaRef,
+		className: 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__ */ jsx("button", {
+		type,
+		className: 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__ */ jsx(HugeiconsIcon, {
+			icon: Sent02Icon,
+			size: 20
+		})
+	});
+}
+function ComposerButton({ className, disabled: disabledProp, type = "button", ...props }) {
+	const { isSending } = useComposerState();
+	const isDisabled = disabledProp !== void 0 ? disabledProp : isSending;
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		className: 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__ */ jsx("div", {
+		role: "alert",
+		className: cn("w-full order-last", className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Composer, ComposerButton, ComposerError, ComposerSend, ComposerTextarea, useComposer, useComposerState, useComposerValue };

package/dist/conversation-list-BlhJhDsc.d.cts

@@ -0,0 +1,100 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Conversation } from "better-zap";
+
+//#region src/conversation-filter-chips.d.ts
+type ConversationFilterValue = "all" | "unread";
+interface ConversationFilterChipsProps {
+  value: ConversationFilterValue;
+  onValueChange: (value: ConversationFilterValue) => void;
+  unreadCount?: number;
+  className?: string;
+  labels?: {
+    all: string;
+    unread: string;
+  };
+}
+/**
+ * Memoized: with stable onValueChange and labels, typing in the search box
+ * doesn't re-render the chips.
+ */
+declare const ConversationFilterChips: React.MemoExoticComponent<({
+  value,
+  onValueChange,
+  unreadCount,
+  className,
+  labels
+}: ConversationFilterChipsProps) => react_jsx_runtime0.JSX.Element>;
+//#endregion
+//#region src/conversation-list.d.ts
+interface ConversationListLabels {
+  searchPlaceholder: string;
+  searchLabel: string;
+  filterAll: string;
+  filterUnread: string;
+  loading: string;
+  error: string;
+  empty: string;
+  outgoingPrefix: string;
+  noPreview: string;
+  yesterday: string;
+}
+interface ConversationListProps extends Omit<React.ComponentProps<"div">, "onSelect"> {
+  conversations: Conversation[];
+  isLoading?: boolean;
+  isError?: boolean;
+  selectedConversationId?: string | null;
+  onSelect?: (id: string) => void;
+  search?: string;
+  defaultSearch?: string;
+  onSearchChange?: (value: string) => void;
+  filter?: ConversationFilterValue;
+  defaultFilter?: ConversationFilterValue;
+  onFilterChange?: (value: ConversationFilterValue) => void;
+  renderItem?: (conversation: Conversation, context: {
+    isSelected: boolean;
+    select: () => void;
+  }) => React.ReactNode;
+  renderAvatar?: (conversation: Conversation) => React.ReactNode;
+  formatTime?: (isoDate: string) => string;
+  labels?: Partial<ConversationListLabels>;
+}
+declare function ConversationList({
+  conversations,
+  isLoading,
+  isError,
+  selectedConversationId,
+  onSelect,
+  search: searchProp,
+  defaultSearch,
+  onSearchChange,
+  filter: filterProp,
+  defaultFilter,
+  onFilterChange,
+  renderItem,
+  renderAvatar,
+  formatTime: formatTimeProp,
+  labels: labelsProp,
+  className,
+  ...props
+}: ConversationListProps): react_jsx_runtime0.JSX.Element;
+interface ConversationItemProps extends React.ComponentProps<"button"> {
+  conversation: Conversation;
+  isSelected?: boolean;
+  avatar?: React.ReactNode;
+  outgoingPrefix?: string;
+  noPreviewLabel?: string;
+  formatTime?: (isoDate: string) => string;
+}
+declare function ConversationItem({
+  conversation,
+  isSelected,
+  avatar,
+  outgoingPrefix,
+  noPreviewLabel,
+  formatTime: formatTimeProp,
+  className,
+  ...props
+}: ConversationItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ConversationListProps as a, ConversationFilterValue as c, ConversationListLabels as i, ConversationItemProps as n, ConversationFilterChips as o, ConversationList as r, ConversationFilterChipsProps as s, ConversationItem as t };

package/dist/conversation-list-BwQ4oK2J.d.mts

@@ -0,0 +1,100 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Conversation } from "better-zap";
+
+//#region src/conversation-filter-chips.d.ts
+type ConversationFilterValue = "all" | "unread";
+interface ConversationFilterChipsProps {
+  value: ConversationFilterValue;
+  onValueChange: (value: ConversationFilterValue) => void;
+  unreadCount?: number;
+  className?: string;
+  labels?: {
+    all: string;
+    unread: string;
+  };
+}
+/**
+ * Memoized: with stable onValueChange and labels, typing in the search box
+ * doesn't re-render the chips.
+ */
+declare const ConversationFilterChips: React.MemoExoticComponent<({
+  value,
+  onValueChange,
+  unreadCount,
+  className,
+  labels
+}: ConversationFilterChipsProps) => react_jsx_runtime0.JSX.Element>;
+//#endregion
+//#region src/conversation-list.d.ts
+interface ConversationListLabels {
+  searchPlaceholder: string;
+  searchLabel: string;
+  filterAll: string;
+  filterUnread: string;
+  loading: string;
+  error: string;
+  empty: string;
+  outgoingPrefix: string;
+  noPreview: string;
+  yesterday: string;
+}
+interface ConversationListProps extends Omit<React.ComponentProps<"div">, "onSelect"> {
+  conversations: Conversation[];
+  isLoading?: boolean;
+  isError?: boolean;
+  selectedConversationId?: string | null;
+  onSelect?: (id: string) => void;
+  search?: string;
+  defaultSearch?: string;
+  onSearchChange?: (value: string) => void;
+  filter?: ConversationFilterValue;
+  defaultFilter?: ConversationFilterValue;
+  onFilterChange?: (value: ConversationFilterValue) => void;
+  renderItem?: (conversation: Conversation, context: {
+    isSelected: boolean;
+    select: () => void;
+  }) => React.ReactNode;
+  renderAvatar?: (conversation: Conversation) => React.ReactNode;
+  formatTime?: (isoDate: string) => string;
+  labels?: Partial<ConversationListLabels>;
+}
+declare function ConversationList({
+  conversations,
+  isLoading,
+  isError,
+  selectedConversationId,
+  onSelect,
+  search: searchProp,
+  defaultSearch,
+  onSearchChange,
+  filter: filterProp,
+  defaultFilter,
+  onFilterChange,
+  renderItem,
+  renderAvatar,
+  formatTime: formatTimeProp,
+  labels: labelsProp,
+  className,
+  ...props
+}: ConversationListProps): react_jsx_runtime0.JSX.Element;
+interface ConversationItemProps extends React.ComponentProps<"button"> {
+  conversation: Conversation;
+  isSelected?: boolean;
+  avatar?: React.ReactNode;
+  outgoingPrefix?: string;
+  noPreviewLabel?: string;
+  formatTime?: (isoDate: string) => string;
+}
+declare function ConversationItem({
+  conversation,
+  isSelected,
+  avatar,
+  outgoingPrefix,
+  noPreviewLabel,
+  formatTime: formatTimeProp,
+  className,
+  ...props
+}: ConversationItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ConversationListProps as a, ConversationFilterValue as c, ConversationListLabels as i, ConversationItemProps as n, ConversationFilterChips as o, ConversationList as r, ConversationFilterChipsProps as s, ConversationItem as t };