@momentumworld/ui-react 0.17.0

package/src/components/ui/chat.tsx

@@ -0,0 +1,494 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, ArrowUpIcon, SparklesIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button } from "./button";
+
+/**
+ * Chat primitives for AI-assistant experiences: a column layout, an
+ * auto-scrolling message viewport, role-styled message bubbles, header chrome,
+ * an empty-state hero with suggestion prompts, tool activity chips/cards,
+ * a typing indicator, and a submit-on-Enter composer. Purely presentational —
+ * bring your own state.
+ */
+
+function Chat({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex min-h-0 flex-1 flex-col", className)}
+      data-slot="chat"
+      {...props}
+    />
+  );
+}
+
+/**
+ * Header chrome for a chat panel: avatar + title on the left, icon actions on
+ * the right. Compose `ChatHeaderAvatar`, `ChatHeaderTitle` and
+ * `ChatHeaderActions` inside.
+ */
+function ChatHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center gap-1 border-border/72 border-b bg-background/95 px-3 py-2.5 backdrop-blur supports-backdrop-filter:bg-background/80",
+        className,
+      )}
+      data-slot="chat-header"
+      {...props}
+    />
+  );
+}
+
+function ChatHeaderAvatar({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary to-primary/78 text-primary-foreground shadow-primary/24 shadow-xs after:absolute after:right-0 after:bottom-0 after:size-2 after:rounded-full after:bg-success after:ring-2 after:ring-background [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="chat-header-avatar"
+      {...props}
+    >
+      {children ?? <SparklesIcon />}
+    </span>
+  );
+}
+
+function ChatHeaderTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("min-w-0 flex-1 leading-tight", className)}
+      data-slot="chat-header-title"
+      {...props}
+    />
+  );
+}
+
+function ChatHeaderActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex shrink-0 items-center gap-0.5", className)}
+      data-slot="chat-header-actions"
+      {...props}
+    />
+  );
+}
+
+function ChatMessages({
+  autoScroll = true,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  /** Keep the viewport pinned to the bottom while new messages stream in. */
+  autoScroll?: boolean;
+}) {
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+  const pinnedRef = React.useRef(true);
+
+  const handleScroll = React.useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const distanceFromBottom =
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    pinnedRef.current = distanceFromBottom < 48;
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children is the scroll trigger
+  React.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !autoScroll || !pinnedRef.current) return;
+    viewport.scrollTop = viewport.scrollHeight;
+  }, [children, autoScroll]);
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto scroll-smooth p-4",
+        className,
+      )}
+      data-slot="chat-messages"
+      onScroll={handleScroll}
+      ref={viewportRef}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Centered hero shown when the conversation is empty. Compose
+ * `ChatEmptyStateIcon`, `ChatEmptyStateTitle`, `ChatEmptyStateDescription`
+ * and `ChatSuggestions` inside.
+ */
+function ChatEmptyState({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center",
+        className,
+      )}
+      data-slot="chat-empty-state"
+      {...props}
+    />
+  );
+}
+
+function ChatEmptyStateIcon({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "fade-in-0 zoom-in-90 relative flex size-13 shrink-0 animate-in items-center justify-center rounded-2xl bg-linear-to-br from-primary to-primary/78 text-primary-foreground shadow-lg shadow-primary/24 duration-500 before:absolute before:-inset-2.5 before:-z-10 before:rounded-3xl before:bg-primary/8 before:blur-lg [&_svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      data-slot="chat-empty-state-icon"
+      {...props}
+    >
+      {children ?? <SparklesIcon />}
+    </span>
+  );
+}
+
+function ChatEmptyStateTitle({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn("mt-1 font-semibold text-base text-foreground", className)}
+      data-slot="chat-empty-state-title"
+      {...props}
+    />
+  );
+}
+
+function ChatEmptyStateDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn(
+        "max-w-72 text-muted-foreground text-sm leading-relaxed",
+        className,
+      )}
+      data-slot="chat-empty-state-description"
+      {...props}
+    />
+  );
+}
+
+/** Vertical stack of `ChatSuggestion` prompts. */
+function ChatSuggestions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mt-2 flex w-full max-w-sm flex-col gap-2", className)}
+      data-slot="chat-suggestions"
+      {...props}
+    />
+  );
+}
+
+export interface ChatSuggestionProps extends React.ComponentProps<"button"> {
+  /** Leading icon; defaults to a sparkle. */
+  icon?: React.ReactNode;
+  /** Position in the list — staggers the entrance animation. */
+  index?: number;
+}
+
+/**
+ * One tappable suggested prompt: icon chip + label, with an arrow that slides
+ * in on hover and a staggered fade-in entrance (via `index`).
+ */
+function ChatSuggestion({
+  className,
+  children,
+  icon,
+  index = 0,
+  style,
+  ...props
+}: ChatSuggestionProps) {
+  return (
+    <button
+      className={cn(
+        "group fade-in-0 slide-in-from-bottom-2 flex w-full animate-in cursor-pointer items-center gap-2.5 fill-mode-both rounded-xl border border-border/72 bg-card px-3 py-2.5 text-left font-medium text-card-foreground text-sm shadow-xs outline-none transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-primary/24 hover:bg-accent/56 hover:shadow-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background active:scale-[0.985] disabled:pointer-events-none disabled:opacity-64",
+        className,
+      )}
+      data-slot="chat-suggestion"
+      style={{ animationDelay: `${index * 80}ms`, ...style }}
+      type="button"
+      {...props}
+    >
+      <span className="flex size-6.5 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-primary transition-colors duration-200 group-hover:bg-primary group-hover:text-primary-foreground [&_svg:not([class*='size-'])]:size-3.5">
+        {icon ?? <SparklesIcon />}
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+      <ArrowRightIcon className="-translate-x-1 size-3.5 shrink-0 text-muted-foreground opacity-0 transition-[opacity,translate] duration-200 group-hover:translate-x-0 group-hover:opacity-100" />
+    </button>
+  );
+}
+
+const chatMessageVariants = cva(
+  "fade-in-0 slide-in-from-bottom-1 flex w-full animate-in flex-col gap-1 duration-200",
+  {
+    defaultVariants: {
+      from: "assistant",
+    },
+    variants: {
+      from: {
+        assistant: "items-start",
+        user: "items-end",
+      },
+    },
+  },
+);
+
+export interface ChatMessageProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof chatMessageVariants> {}
+
+function ChatMessage({ className, from, ...props }: ChatMessageProps) {
+  return (
+    <div
+      className={cn(chatMessageVariants({ className, from }))}
+      data-from={from ?? "assistant"}
+      data-slot="chat-message"
+      {...props}
+    />
+  );
+}
+
+const chatMessageBubbleVariants = cva(
+  "max-w-[85%] rounded-2xl px-3.5 py-2 text-sm leading-relaxed break-words",
+  {
+    defaultVariants: {
+      from: "assistant",
+    },
+    variants: {
+      from: {
+        assistant: "rounded-bl-md bg-muted text-foreground",
+        user: "rounded-br-md bg-primary text-primary-foreground shadow-primary/16 shadow-xs",
+      },
+    },
+  },
+);
+
+export interface ChatMessageBubbleProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof chatMessageBubbleVariants> {}
+
+function ChatMessageBubble({ className, from, ...props }: ChatMessageBubbleProps) {
+  return (
+    <div
+      className={cn(chatMessageBubbleVariants({ className, from }))}
+      data-from={from ?? "assistant"}
+      data-slot="chat-message-bubble"
+      {...props}
+    />
+  );
+}
+
+/**
+ * Small inline pill for tool activity ("Using X…", "X finished"). Pass the
+ * status icon (wrench, spinner, check) as `icon`.
+ */
+function ChatToolChip({
+  className,
+  children,
+  icon,
+  ...props
+}: React.ComponentProps<"div"> & { icon?: React.ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "fade-in-0 flex w-fit max-w-full animate-in items-center gap-1.5 rounded-full border border-border/72 bg-muted/48 py-1 pr-3 pl-1.5 text-muted-foreground text-xs duration-200",
+        className,
+      )}
+      data-slot="chat-tool-chip"
+      {...props}
+    >
+      {icon ? (
+        <span className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-background text-foreground/72 shadow-xs [&_svg:not([class*='size-'])]:size-2.5">
+          {icon}
+        </span>
+      ) : null}
+      <span className="min-w-0 truncate">{children}</span>
+    </div>
+  );
+}
+
+/**
+ * Framed card for tool activity inside a conversation: running/finished tool
+ * calls, results, and write-action approval prompts. Compose with `Button`s
+ * in the `actions` area for approve/decline flows.
+ */
+function ChatToolCard({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "fade-in-0 slide-in-from-bottom-1 w-full max-w-[95%] animate-in rounded-xl border border-border bg-card p-3 text-card-foreground text-sm shadow-xs duration-200",
+        className,
+      )}
+      data-slot="chat-tool-card"
+      {...props}
+    />
+  );
+}
+
+function ChatToolCardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 font-medium", className)}
+      data-slot="chat-tool-card-header"
+      {...props}
+    />
+  );
+}
+
+function ChatToolCardActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mt-3 flex items-center justify-end gap-2", className)}
+      data-slot="chat-tool-card-actions"
+      {...props}
+    />
+  );
+}
+
+function ChatTypingIndicator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      aria-label="Assistant is typing"
+      className={cn(
+        "fade-in-0 flex w-fit animate-in items-center gap-1 rounded-2xl rounded-bl-md bg-muted px-3.5 py-2.5 duration-200",
+        className,
+      )}
+      data-slot="chat-typing-indicator"
+      role="status"
+      {...props}
+    >
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:0ms]" />
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:150ms]" />
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:300ms]" />
+    </div>
+  );
+}
+
+export interface ChatInputProps
+  extends Omit<React.ComponentProps<"textarea">, "onSubmit" | "value" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed message when the user submits (Enter or button). */
+  onSubmit: (value: string) => void;
+  /** Disables both the textarea and the send button (e.g. while sending). */
+  disabled?: boolean;
+}
+
+/**
+ * Composer: a rounded card wrapping an auto-growing textarea and a round send
+ * button. Enter submits, Shift+Enter inserts a newline.
+ */
+function ChatInput({
+  className,
+  disabled,
+  onSubmit,
+  onValueChange,
+  placeholder = "Ask anything…",
+  value,
+  ...props
+}: ChatInputProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const submit = React.useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSubmit(trimmed);
+  }, [disabled, onSubmit, value]);
+
+  // Auto-grow up to ~6 lines.
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 144)}px`;
+  }, [value]);
+
+  return (
+    <form
+      className={cn("shrink-0 bg-background p-3 pt-1.5", className)}
+      data-slot="chat-input"
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      <div
+        className={cn(
+          "flex items-end gap-1.5 rounded-2xl border border-input bg-popover p-1.5 pl-3.5 shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-ring/64 focus-within:ring-2 focus-within:ring-ring/24 dark:bg-input/32",
+          disabled && "opacity-64",
+        )}
+      >
+        <textarea
+          className="max-h-36 min-h-8 flex-1 resize-none self-center bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-foreground"
+          disabled={disabled}
+          onChange={(event) => onValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          placeholder={placeholder}
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          {...props}
+        />
+        <Button
+          aria-label="Send message"
+          className="rounded-full before:rounded-full"
+          disabled={disabled || !value.trim()}
+          size="icon-sm"
+          type="submit"
+        >
+          <ArrowUpIcon />
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export {
+  Chat,
+  ChatEmptyState,
+  ChatEmptyStateDescription,
+  ChatEmptyStateIcon,
+  ChatEmptyStateTitle,
+  ChatHeader,
+  ChatHeaderActions,
+  ChatHeaderAvatar,
+  ChatHeaderTitle,
+  ChatInput,
+  ChatMessage,
+  ChatMessageBubble,
+  chatMessageBubbleVariants,
+  chatMessageVariants,
+  ChatMessages,
+  ChatSuggestion,
+  ChatSuggestions,
+  ChatToolCard,
+  ChatToolCardActions,
+  ChatToolCardHeader,
+  ChatToolChip,
+  ChatTypingIndicator,
+};

package/src/components/ui/checkbox-group.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+
+import { cn } from "../../lib/utils/css";
+
+function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
+  return (
+    <CheckboxGroupPrimitive
+      className={cn("flex flex-col items-start gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+export { CheckboxGroup };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+
+import { cn } from "../../lib/utils/css";
+
+const checkboxSizes = {
+  sm: { box: "size-4.5 sm:size-4", icon: "size-3.5 sm:size-3" },
+  md: { box: "size-5", icon: "size-4" },
+} as const;
+
+interface CheckboxProps extends CheckboxPrimitive.Root.Props {
+  /** Visual size of the checkbox. Defaults to "sm". */
+  size?: keyof typeof checkboxSizes;
+}
+
+function Checkbox({ className, size = "sm", ...props }: CheckboxProps) {
+  const sizes = checkboxSizes[size];
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        "relative inline-flex shrink-0 items-center justify-center rounded-[4px] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none",
+        sizes.box,
+        className,
+      )}
+      data-slot="checkbox"
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className="-inset-px absolute flex items-center justify-center rounded-[4px] text-primary-foreground transition-opacity duration-150 ease-out data-checked:bg-primary data-checked:opacity-100 data-indeterminate:text-foreground data-indeterminate:opacity-100 data-unchecked:opacity-0"
+        data-slot="checkbox-indicator"
+        keepMounted
+        render={(props, state) => (
+          <span {...props}>
+            {state.indeterminate ? (
+              // biome-ignore lint/a11y/noSvgWithoutTitle: Imported from library
+              <svg
+                className={sizes.icon}
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M5.252 12h13.496" />
+              </svg>
+            ) : (
+              // biome-ignore lint/a11y/noSvgWithoutTitle: Imported from library
+              <svg
+                className={sizes.icon}
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                {/* The checkmark draws itself in: pathLength normalises the
+                    stroke to 1 unit, and the dashoffset animates to 0 once the
+                    box is checked (a beat after the fill fades in). */}
+                <path
+                  className="[stroke-dasharray:1] [stroke-dashoffset:1] [transition:stroke-dashoffset_250ms_cubic-bezier(0.65,0,0.35,1)_110ms] in-[[data-checked]]:[stroke-dashoffset:0]"
+                  d="M5.252 12.7 10.2 18.63 18.748 5.37"
+                  pathLength={1}
+                />
+              </svg>
+            )}
+          </span>
+        )}
+      />
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+import { cn } from "../../lib/utils/css";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  className,
+  ...props
+}: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      className={cn("cursor-pointer", className)}
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsiblePanel({
+  className,
+  ...props
+}: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel
+      className={cn(
+        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",
+        className,
+      )}
+      data-slot="collapsible-panel"
+      {...props}
+    />
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsiblePanel,
+  CollapsiblePanel as CollapsibleContent,
+};