@passui/react 0.1.47 → 0.2.0

package/dist/components/toast/toaster.js

@@ -0,0 +1,345 @@
+import { cn } from "../../cn.js";
+import { spring } from "../../motion/transitions.js";
+import { getToasts, subscribeToasts, toast, toastLimits } from "./toast-store.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@passui/icons/check";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { CloseIcon } from "@passui/icons/close";
+// src/components/toast/toaster.tsx
+const PILL = {
+	sm: 32,
+	md: 40,
+	lg: 48
+};
+const contentClasses = {
+	sm: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2 py-2 pr-3 pl-2 text-on-inverse",
+	md: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse",
+	lg: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-3 py-3 pr-5 pl-3 text-on-inverse"
+};
+const titleClasses = {
+	sm: "text-footnote leading-4 font-semibold",
+	md: "text-subheadline leading-5 font-semibold",
+	lg: "text-body leading-6 font-semibold"
+};
+const descriptionClasses = {
+	sm: "text-caption2 leading-snug text-on-inverse/70",
+	md: "text-footnote leading-snug text-on-inverse/70",
+	lg: "text-subheadline leading-snug text-on-inverse/70"
+};
+const actionClasses = {
+	sm: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-2.5 py-0.5 text-caption2 font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+	md: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
+	lg: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3.5 py-1.5 text-subheadline font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20"
+};
+const toneIconClasses = {
+	sm: "flex size-4 shrink-0 items-center justify-center rounded-full",
+	md: "flex size-5 shrink-0 items-center justify-center rounded-full",
+	lg: "flex size-6 shrink-0 items-center justify-center rounded-full"
+};
+const EMPTY = [];
+/** A little loose, so the body overshoots and settles like a drop of honey. */
+const BODY_SPRING = {
+	type: "spring",
+	stiffness: 260,
+	damping: 19,
+	mass: .9
+};
+/**
+* Toasts drop from the top centre like an island: a small pill carrying the
+* icon, out of which the message flows. Both shapes sit under an SVG "goo"
+* filter, so where they meet looks liquid while they grow, morph between
+* states and shrink away. Text is drawn above the filter to stay crisp.
+*/
+function Toaster({ className, label = "Notifications" }) {
+	const toasts = useSyncExternalStore(subscribeToasts, getToasts, () => EMPTY);
+	const filterId = useId();
+	const reducedMotion = useReducedMotion();
+	const [hovered, setHovered] = useState(false);
+	const visible = toasts.slice(0, toastLimits.visible);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(GooFilter, { id: filterId }), /* @__PURE__ */ jsx("section", {
+		"aria-label": label,
+		"aria-live": "polite",
+		className: cn("pointer-events-none fixed inset-x-0 top-[max(10px,env(safe-area-inset-top))] z-[60] flex justify-center px-3", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "relative flex w-full max-w-[420px] flex-col items-center",
+			onMouseEnter: () => setHovered(true),
+			onMouseLeave: () => setHovered(false),
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: visible.map((item, index) => /* @__PURE__ */ jsx(ToastItem, {
+					toast: item,
+					index,
+					expanded: hovered,
+					paused: hovered,
+					filterId,
+					reducedMotion: Boolean(reducedMotion)
+				}, item.id))
+			})
+		})
+	})] });
+}
+function GooFilter({ id }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute size-0",
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+			id,
+			children: [
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: "7",
+					result: "blur"
+				}),
+				/* @__PURE__ */ jsx("feColorMatrix", {
+					in: "blur",
+					mode: "matrix",
+					values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10",
+					result: "goo"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					in: "SourceGraphic",
+					in2: "goo",
+					operator: "atop"
+				})
+			]
+		}) })
+	});
+}
+function ToastItem({ toast: toast$1, index, expanded, paused, filterId, reducedMotion }) {
+	const pill = PILL[toast$1.size];
+	const content = useRef(null);
+	const [size, setSize] = useState({
+		width: pill,
+		height: pill
+	});
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		const timer = setTimeout(() => setOpen(true), reducedMotion ? 0 : 140);
+		return () => clearTimeout(timer);
+	}, [reducedMotion]);
+	useLayoutEffect(() => {
+		const element = content.current;
+		if (!element) return;
+		const measure = () => setSize({
+			width: Math.ceil(element.offsetWidth),
+			height: Math.ceil(element.offsetHeight)
+		});
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (toast$1.duration === null || paused) return;
+		const timer = setTimeout(() => toast.dismiss(toast$1.id), toast$1.duration);
+		return () => clearTimeout(timer);
+	}, [
+		toast$1.id,
+		toast$1.duration,
+		paused
+	]);
+	const width = open ? size.width : pill;
+	const height = open ? size.height : pill;
+	const stacked = !expanded && index > 0;
+	return /* @__PURE__ */ jsx(motion.li, {
+		layout: !reducedMotion,
+		className: "pointer-events-none absolute inset-x-0 top-0 flex justify-center",
+		style: { zIndex: 10 - index },
+		initial: reducedMotion ? false : {
+			opacity: 0,
+			y: -24,
+			scale: .6
+		},
+		animate: {
+			opacity: stacked ? 1 - index * .25 : 1,
+			y: stacked ? index * 9 : index * (pill + 14) + index * 6,
+			scale: stacked ? 1 - index * .05 : 1
+		},
+		exit: reducedMotion ? { opacity: 0 } : {
+			opacity: 0,
+			y: -18,
+			scale: .6,
+			transition: spring.snappy
+		},
+		transition: reducedMotion ? { duration: 0 } : spring.bouncy,
+		drag: reducedMotion ? false : "y",
+		dragConstraints: {
+			top: 0,
+			bottom: 0
+		},
+		dragElastic: {
+			top: .6,
+			bottom: .1
+		},
+		onDragEnd: (_, info) => {
+			if (info.offset.y < -30 || info.velocity.y < -300) toast.dismiss(toast$1.id);
+		},
+		children: /* @__PURE__ */ jsxs(motion.div, {
+			role: "status",
+			className: "pointer-events-auto relative",
+			initial: {
+				width: pill,
+				height: pill
+			},
+			animate: {
+				width,
+				height
+			},
+			transition: reducedMotion ? { duration: 0 } : BODY_SPRING,
+			children: [/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "absolute -inset-3",
+				style: { filter: reducedMotion ? void 0 : `url(#${filterId})` },
+				children: [/* @__PURE__ */ jsx(motion.span, {
+					className: "bg-inverse absolute top-3 left-3 rounded-full shadow-xl",
+					style: {
+						width: pill,
+						height: pill
+					},
+					animate: { scale: open ? 1 : 1.06 },
+					transition: reducedMotion ? { duration: 0 } : spring.bouncy
+				}), /* @__PURE__ */ jsx(motion.span, {
+					className: "bg-inverse absolute top-3 left-3",
+					initial: {
+						width: pill,
+						height: pill,
+						borderRadius: pill / 2
+					},
+					animate: {
+						width,
+						height,
+						borderRadius: Math.min(pill / 2, height / 2, 22)
+					},
+					transition: reducedMotion ? { duration: 0 } : BODY_SPRING
+				})]
+			}), /* @__PURE__ */ jsxs(motion.div, {
+				ref: content,
+				className: contentClasses[toast$1.size],
+				style: { minHeight: pill },
+				animate: { opacity: open ? 1 : 0 },
+				transition: reducedMotion ? { duration: 0 } : {
+					duration: open ? .22 : .1,
+					delay: open ? .08 : 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(ToneIcon, {
+						tone: toast$1.tone,
+						size: toast$1.size,
+						reducedMotion
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col py-px",
+						children: [/* @__PURE__ */ jsx(AnimatePresence, {
+							mode: "popLayout",
+							initial: false,
+							children: /* @__PURE__ */ jsx(motion.span, {
+								className: titleClasses[toast$1.size],
+								initial: reducedMotion ? false : {
+									opacity: 0,
+									y: 6,
+									filter: "blur(4px)"
+								},
+								animate: {
+									opacity: 1,
+									y: 0,
+									filter: "blur(0px)"
+								},
+								exit: reducedMotion ? { opacity: 0 } : {
+									opacity: 0,
+									y: -6,
+									filter: "blur(4px)"
+								},
+								transition: reducedMotion ? { duration: 0 } : spring.snappy,
+								children: toast$1.title
+							}, toast$1.title)
+						}), toast$1.description && /* @__PURE__ */ jsx("span", {
+							className: descriptionClasses[toast$1.size],
+							children: toast$1.description
+						})]
+					}),
+					toast$1.action && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							toast$1.action?.onClick();
+							toast.dismiss(toast$1.id);
+						},
+						className: actionClasses[toast$1.size],
+						children: toast$1.action.label
+					})
+				]
+			})]
+		})
+	});
+}
+const toneColors = {
+	neutral: "bg-transparent",
+	success: "bg-success text-white",
+	error: "bg-danger text-white",
+	loading: "bg-on-inverse/15 text-on-inverse"
+};
+function ToneIcon({ tone, size, reducedMotion }) {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		initial: false,
+		children: /* @__PURE__ */ jsxs(motion.span, {
+			className: cn(toneIconClasses[size], toneColors[tone]),
+			initial: reducedMotion ? false : {
+				scale: .3,
+				opacity: 0,
+				rotate: -40
+			},
+			animate: {
+				scale: 1,
+				opacity: 1,
+				rotate: 0
+			},
+			exit: {
+				scale: .3,
+				opacity: 0
+			},
+			transition: reducedMotion ? { duration: 0 } : spring.bouncy,
+			children: [
+				tone === "success" && /* @__PURE__ */ jsx(CheckIcon, {
+					size: 13,
+					strokeWidth: 3
+				}),
+				tone === "error" && /* @__PURE__ */ jsx(CloseIcon, {
+					size: 12,
+					strokeWidth: 3
+				}),
+				tone === "neutral" && /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-[#EE8A2A]" }),
+				tone === "loading" && /* @__PURE__ */ jsx(Spinner, { reducedMotion })
+			]
+		}, tone)
+	});
+}
+function Spinner({ reducedMotion }) {
+	return /* @__PURE__ */ jsxs(motion.svg, {
+		viewBox: "0 0 20 20",
+		className: "size-4",
+		animate: reducedMotion ? void 0 : { rotate: 360 },
+		transition: {
+			repeat: Number.POSITIVE_INFINITY,
+			duration: .8,
+			ease: "linear"
+		},
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "10",
+			r: "7",
+			fill: "none",
+			stroke: "currentColor",
+			strokeOpacity: "0.25",
+			strokeWidth: "2.4"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10 3a7 7 0 0 1 7 7",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.4",
+			strokeLinecap: "round"
+		})]
+	});
+}
+export { Toaster };

package/dist/context-menu.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuTrigger, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "./dropdown-menu.js";
+export { ContextMenu, DropdownMenuCheckboxItem as ContextMenuCheckboxItem, DropdownMenuContent as ContextMenuContent, DropdownMenuGroup as ContextMenuGroup, DropdownMenuItem as ContextMenuItem, DropdownMenuLabel as ContextMenuLabel, DropdownMenuRadioGroup as ContextMenuRadioGroup, DropdownMenuRadioItem as ContextMenuRadioItem, DropdownMenuSeparator as ContextMenuSeparator, DropdownMenuShortcut as ContextMenuShortcut, DropdownMenuSub as ContextMenuSub, DropdownMenuSubContent as ContextMenuSubContent, DropdownMenuSubTrigger as ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/context-menu.js

@@ -0,0 +1,2 @@
+"use client";
+export { ContextMenu, DropdownMenuCheckboxItem as ContextMenuCheckboxItem, DropdownMenuContent as ContextMenuContent, DropdownMenuGroup as ContextMenuGroup, DropdownMenuItem as ContextMenuItem, DropdownMenuLabel as ContextMenuLabel, DropdownMenuRadioGroup as ContextMenuRadioGroup, DropdownMenuRadioItem as ContextMenuRadioItem, DropdownMenuSeparator as ContextMenuSeparator, DropdownMenuShortcut as ContextMenuShortcut, DropdownMenuSub as ContextMenuSub, DropdownMenuSubContent as ContextMenuSubContent, DropdownMenuSubTrigger as ContextMenuSubTrigger, ContextMenuTrigger } from "./dropdown-menu.js";

package/dist/conversation.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+export type ConversationMessage = {
+  id: string;
+  body: string;
+  /** Written by whoever is looking: drawn on the right. */
+  mine: boolean;
+  author?: string;
+  /** Shown beside the other side's messages, like their avatar. */
+  avatar?: ReactNode;
+  createdAt: string;
+};
+export type ConversationSize = "sm" | "md" | "lg";
+/**
+ * A thread of plain-text messages like Messages on iPhone: a day line when
+ * the date changes, back-to-back messages from one side grouped under one
+ * name, theirs on the left with an avatar, yours on the right.
+ */
+declare function Messages({ messages, locale, size }: {
+  messages: ConversationMessage[];
+  /** For day names and times; the reader's own by default. */
+  locale?: string;
+  /** Bubble, avatar, author and time scale. @default "md" */
+  size?: ConversationSize;
+}): import("react").JSX.Element;
+type ComposerProps = {
+  onSend: (body: string) => Promise<unknown>;
+  pending?: boolean;
+  maxLength: number;
+  placeholder: string;
+  /** Extra controls under the field, like a status picker. */
+  actions?: ReactNode;
+  /** Names the round Send button for screen readers. */
+  sendLabel: string;
+  /**
+   * Words for the characters left, shown near the limit, such as
+   * (count) => `${count} left`. Without it, just the number shows.
+   */
+  remaining?: (count: number) => string;
+  /** Surface, textarea, send button and counter scale. @default "md" */
+  size?: ConversationSize;
+};
+/** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
+declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, size }: ComposerProps): import("react").JSX.Element;
+export declare const Conversation: {
+  Messages: typeof Messages;
+  Composer: typeof Composer;
+};
+export {};

package/dist/conversation.js

@@ -0,0 +1,202 @@
+import { cx } from "./lib/cx.js";
+import { formatTime } from "./date.js";
+import { Button } from "./button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SendIcon } from "@passui/icons";
+// src/components/conversation.tsx
+const avatarSizes = {
+	sm: "size-6",
+	md: "size-7",
+	lg: "size-8"
+};
+const bubbleClasses = {
+	sm: "rounded-3xl px-3 py-1.5 text-footnote leading-snug",
+	md: "rounded-4xl px-3.5 py-2 text-subheadline leading-snug",
+	lg: "rounded-5xl px-4 py-2.5 text-body leading-snug"
+};
+const bubbleTails = {
+	sm: "rounded-br-sm",
+	md: "rounded-br-md",
+	lg: "rounded-br-lg"
+};
+const bubbleTailsOther = {
+	sm: "rounded-bl-sm",
+	md: "rounded-bl-md",
+	lg: "rounded-bl-lg"
+};
+const authorText = {
+	sm: "px-3 text-caption2 text-label-secondary",
+	md: "px-3 text-caption2 text-label-secondary",
+	lg: "px-3.5 text-caption text-label-secondary"
+};
+const timeText = {
+	sm: "px-3 text-caption2 text-label-secondary tabular-nums",
+	md: "px-3 text-caption2 text-label-secondary tabular-nums",
+	lg: "px-3.5 text-caption text-label-secondary tabular-nums"
+};
+/** Indent that lines a theirs-side timestamp up with its bubble, past the avatar column. */
+const timeIndent = {
+	sm: "ms-8",
+	md: "ms-9",
+	lg: "ms-10"
+};
+const dayMargins = {
+	sm: "my-3",
+	md: "my-4",
+	lg: "my-5"
+};
+const composerSurfaces = {
+	sm: "flex items-end gap-2 rounded-[1.25rem] border border-separator bg-elevated p-0.5 pl-3.5 transition-colors focus-within:border-accent-text/60",
+	md: "flex items-end gap-2 rounded-3xl border border-separator bg-elevated p-0.5 pl-4 transition-colors focus-within:border-accent-text/60",
+	lg: "flex items-end gap-2 rounded-3xl border border-separator bg-elevated p-1 pl-5 transition-colors focus-within:border-accent-text/60"
+};
+const textareaClasses = {
+	sm: "field-sizing-content max-h-48 min-h-8 flex-1 resize-none bg-transparent py-[7px] text-footnote text-label outline-none placeholder:text-label-secondary",
+	md: "field-sizing-content max-h-48 min-h-9 flex-1 resize-none bg-transparent py-2 text-subheadline text-label outline-none placeholder:text-label-secondary",
+	lg: "field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent py-[9px] text-body text-label outline-none placeholder:text-label-secondary"
+};
+const sendButtonClasses = {
+	sm: "size-8! shrink-0",
+	md: "size-9! shrink-0",
+	lg: "size-10! shrink-0"
+};
+const sendIconSizes = {
+	sm: 16,
+	md: 18,
+	lg: 20
+};
+const counterText = {
+	sm: "text-caption2 text-label-secondary tabular-nums",
+	md: "text-caption2 text-label-secondary tabular-nums",
+	lg: "text-caption text-label-secondary tabular-nums"
+};
+const GROUP_GAP_MS = 3e5;
+function dayLabel(iso, locale) {
+	const date = new Date(iso);
+	const today = /* @__PURE__ */ new Date();
+	const yesterday = /* @__PURE__ */ new Date();
+	yesterday.setDate(today.getDate() - 1);
+	const offset = date.toDateString() === today.toDateString() ? 0 : date.toDateString() === yesterday.toDateString() ? -1 : null;
+	if (offset === null) return date.toLocaleDateString(locale, {
+		weekday: "long",
+		month: "long",
+		day: "numeric"
+	});
+	const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(offset, "day");
+	return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+}
+const clock = (iso, locale) => new Date(iso).toLocaleTimeString(locale, {
+	hour: "numeric",
+	minute: "2-digit"
+});
+/**
+* A thread of plain-text messages like Messages on iPhone: a day line when
+* the date changes, back-to-back messages from one side grouped under one
+* name, theirs on the left with an avatar, yours on the right.
+*/
+function Messages({ messages, locale, size = "md" }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "conversation-messages",
+		"data-not-typeset": true,
+		className: "flex flex-col",
+		children: messages.map((message, index) => {
+			const prev = messages[index - 1];
+			const next = messages[index + 1];
+			const newDay = !prev || new Date(prev.createdAt).toDateString() !== new Date(message.createdAt).toDateString();
+			const startsGroup = newDay || prev.mine !== message.mine || new Date(message.createdAt).getTime() - new Date(prev.createdAt).getTime() > GROUP_GAP_MS;
+			const endsGroup = !next || next.mine !== message.mine || new Date(next.createdAt).getTime() - new Date(message.createdAt).getTime() > GROUP_GAP_MS;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-col",
+				children: [
+					newDay && /* @__PURE__ */ jsx("span", {
+						suppressHydrationWarning: true,
+						className: cx(dayMargins[size], "text-caption2 text-label-secondary text-center font-medium"),
+						children: dayLabel(message.createdAt, locale)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cx("flex items-end gap-2", message.mine ? "justify-end" : "justify-start", startsGroup ? "mt-3" : "mt-0.5"),
+						children: [!message.mine && /* @__PURE__ */ jsx("span", {
+							className: cx("flex shrink-0 items-center justify-center", avatarSizes[size]),
+							children: endsGroup && message.avatar
+						}), /* @__PURE__ */ jsxs("div", {
+							className: cx("flex max-w-[78%] flex-col gap-0.5", message.mine ? "items-end" : "items-start"),
+							children: [startsGroup && message.author && /* @__PURE__ */ jsx("span", {
+								className: authorText[size],
+								children: message.author
+							}), /* @__PURE__ */ jsx("p", {
+								suppressHydrationWarning: true,
+								title: formatTime(message.createdAt),
+								className: cx(bubbleClasses[size], "wrap-break-word whitespace-pre-wrap", message.mine ? "bg-inverse text-on-inverse" : "bg-fill text-label", endsGroup && (message.mine ? bubbleTails[size] : bubbleTailsOther[size])),
+								children: message.body
+							})]
+						})]
+					}),
+					endsGroup && /* @__PURE__ */ jsx("time", {
+						suppressHydrationWarning: true,
+						dateTime: message.createdAt,
+						className: cx("mt-1", timeText[size], message.mine ? "self-end" : timeIndent[size]),
+						children: clock(message.createdAt, locale)
+					})
+				]
+			}, message.id);
+		})
+	});
+}
+/** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
+function Composer({ onSend, pending = false, maxLength, placeholder, actions, sendLabel, remaining, size = "md" }) {
+	const [body, setBody] = useState("");
+	const ready = body.trim().length > 0 && !pending;
+	const send = async () => {
+		if (!ready) return;
+		await onSend(body.trim());
+		setBody("");
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "conversation-composer",
+		"data-not-typeset": true,
+		className: "flex flex-col gap-2",
+		onSubmit: (event) => {
+			event.preventDefault();
+			send();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: composerSurfaces[size],
+			children: [/* @__PURE__ */ jsx("textarea", {
+				value: body,
+				onChange: (event) => setBody(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+						event.preventDefault();
+						send();
+					}
+				},
+				maxLength,
+				placeholder,
+				rows: 1,
+				className: textareaClasses[size]
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				size: "icon-xs",
+				disabled: !ready,
+				"aria-label": sendLabel,
+				className: cx("active:scale-[0.92]", sendButtonClasses[size]),
+				children: /* @__PURE__ */ jsx(SendIcon, {
+					size: sendIconSizes[size],
+					strokeWidth: 2.5
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-6 items-center gap-2 px-1",
+			children: [actions, /* @__PURE__ */ jsx("span", {
+				className: cx("ml-auto", counterText[size]),
+				children: body.length > maxLength * .8 && (remaining?.(maxLength - body.length) ?? maxLength - body.length)
+			})]
+		})]
+	});
+}
+const Conversation = {
+	Messages,
+	Composer
+};
+export { Conversation };

package/dist/date-time-picker.d.ts

@@ -0,0 +1,50 @@
+import { DateRange } from "./calendar.js";
+interface Base {
+  /** Names the button and the panel for assistive technology. */
+  label: string;
+  locale: string;
+  /** Shown when nothing is chosen. */
+  placeholder?: string;
+  min?: string;
+  max?: string;
+  /** Minutes offered in the time columns. Default 5. */
+  minuteStep?: number;
+  labels: {
+    previousMonth: string;
+    nextMonth: string;
+    hour: string;
+    minute: string;
+    period: string;
+  };
+  disabled?: boolean;
+  className?: string;
+}
+export type DateTimePickerProps = Base & ({
+  mode?: "date";
+  value: string;
+  onValueChange: (value: string) => void;
+} | {
+  mode: "time";
+  value: string;
+  onValueChange: (value: string) => void;
+} | {
+  mode: "datetime";
+  /** `YYYY-MM-DDTHH:MM`, or "". */
+  value: string;
+  onValueChange: (value: string) => void;
+} | {
+  mode: "range";
+  value: DateRange;
+  onValueChange: (value: DateRange) => void;
+});
+/**
+ * One picker for dates, times, both together, and ranges, the way Apple's
+ * compact DatePicker works: a chip for the date, a chip for the time, each
+ * opening its own panel. The date panel is a calendar whose month title opens
+ * month and year wheels, so a far date is one flick and not a hundred taps.
+ * The time panel is hour, minute and period wheels. Values are plain strings
+ * (`YYYY-MM-DD`, `HH:MM`, `YYYY-MM-DDTHH:MM`) or a `{ from, to }` range, so
+ * they go straight to a form or an API.
+ */
+export declare function DateTimePicker(props: DateTimePickerProps): import("react").JSX.Element;
+export type { DateRange };