@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/calendar.tsx

@@ -0,0 +1,410 @@
+import { CaretLeft, CaretRight } from "@phosphor-icons/react";
+import { useMemo, useRef, useState, type KeyboardEvent } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type DateRange = { start: Date | null; end: Date | null };
+export type CalendarSize = ControlSize;
+
+type CommonProps = {
+  /** First visible month; defaults to the selected date or today. */
+  defaultMonth?: Date;
+  month?: Date;
+  onMonthChange?: (month: Date) => void;
+  isDateDisabled?: (date: Date) => boolean;
+  /** BCP 47 locale for the month title, weekdays and day labels. */
+  locale?: string;
+  /** 0 = Sunday (the Figma calendar), 1 = Monday. */
+  weekStartsOn?: 0 | 1;
+  className?: string;
+  today?: Date;
+  /**
+   * `default` is the day picker calendar (60:245): centered title-sm month.
+   * `popover` is the `Calendar popover` (88:495): 24px radius, left label-lg
+   * month and 32px round arrow buttons on the right.
+   */
+  variant?: "default" | "popover";
+  /**
+   * `solid` (default) is an opaque surface with a default border. `glass` puts it on the veil (`veil-overlay`),
+   * the material of the `DateField` popup; `flat` keeps the 80% white fill of the old thick glass
+   * without it (Paper Schedule mini calendar).
+   */
+  surface?: "glass" | "flat" | "solid";
+  /** Days drawn as subtle ink circles in the day cell size, e.g. the week the schedule shows; selection still draws on top. */
+  highlight?: Date[];
+  /**
+   * Day cell size: `sm` 32px, `md` 40px (default, the Figma size), `lg` 48px.
+   * Scales the header, padding, weekday row and day text with the cells.
+   */
+  size?: CalendarSize;
+};
+
+const containerSizeClass: Record<CalendarSize, { default: string; popover: string }> = {
+  // The default calendar fills its parent up to the Figma width (250/314/374px: seven cells plus padding),
+  // so it lands on that size on desktop and folds to the column on a narrow screen. `w-full` rather than a
+  // fixed `w-*` keeps its min-content at zero, which is what lets a flex parent shrink it. The popover is
+  // fixed by design, so it caps against the viewport instead: its positioner is auto-width.
+  //
+  // Below `sm` the frame gives its padding and cell gaps back to the grid: at a 320px viewport the demo
+  // stage leaves 248px, and the desktop 16px padding plus 12px gaps left each day about 21px. The narrower
+  // frame and gap keep every day at or above `min-w-7` (28px), which is the smallest a seven-column month
+  // can be without dropping under the 24px pointer minimum.
+  sm: {
+    default: "w-full max-w-62.5 gap-2 p-3 max-sm:gap-1 max-sm:p-2",
+    popover: "w-62 max-w-[calc(100vw-2rem)] gap-1.5 p-3",
+  },
+  md: {
+    default: "w-full max-w-78.5 gap-3 p-4 max-sm:gap-1 max-sm:p-2",
+    popover: "w-77 max-w-[calc(100vw-2rem)] gap-2 p-3.5",
+  },
+  lg: {
+    default: "w-full max-w-93.5 gap-3.5 p-4.5 max-sm:gap-1 max-sm:p-2",
+    popover: "w-92 max-w-[calc(100vw-2rem)] gap-2.5 p-4",
+  },
+};
+
+const titleSizeClass: Record<CalendarSize, string> = {
+  sm: "text-label-lg",
+  md: "text-title-sm",
+  lg: "text-title-md",
+};
+
+const popoverTitleSizeClass: Record<CalendarSize, string> = {
+  sm: "text-label-md",
+  md: "text-label-lg",
+  lg: "text-label-lg",
+};
+
+const popoverHeaderSizeClass: Record<CalendarSize, string> = {
+  sm: "gap-0.5 pb-0.5 pl-1",
+  md: "gap-1 pb-1 pl-1.5",
+  lg: "gap-1.5 pb-1.5 pl-2",
+};
+
+const arrowSizeClass: Record<CalendarSize, string> = {
+  sm: "size-5.5 sm:size-6 [&_svg]:size-3.5 sm:[&_svg]:size-4",
+  md: "size-6 sm:size-7 [&_svg]:size-4 sm:[&_svg]:size-4.5",
+  lg: "size-7 sm:size-8 [&_svg]:size-4.5 sm:[&_svg]:size-5",
+};
+
+const popoverArrowSizeClass: Record<CalendarSize, string> = {
+  sm: "size-6 sm:size-7 [&_svg]:size-3.5 sm:[&_svg]:size-4",
+  md: "size-7 sm:size-8 [&_svg]:size-4 sm:[&_svg]:size-4.5",
+  lg: "size-9 sm:size-10 [&_svg]:size-4.5 sm:[&_svg]:size-5",
+};
+
+const weekdayHeaderSizeClass: Record<CalendarSize, string> = {
+  sm: "h-5 max-w-8",
+  md: "h-6 max-w-10",
+  lg: "h-7 max-w-12",
+};
+
+/**
+ * Seven cells share one seventh of the calendar each and cap at the Figma size for their rung (32/40/48px),
+ * so the grid reads exactly as designed on desktop and narrows instead of overflowing when the calendar is
+ * squeezed. `min-w-0`/`flex-1` keep the calendar's min-content at its padding, which is what lets a parent
+ * flex item shrink it at all; `aspect-square` keeps each target square below the cap.
+ */
+const daySizeClass: Record<CalendarSize, string> = {
+  sm: "max-w-8",
+  md: "max-w-10",
+  lg: "max-w-12",
+};
+
+/**
+ * A day cell takes an equal share of the row and never drops below 28px, so a phone grid stays tappable
+ * while a desktop grid keeps the Figma size from `daySizeClass` as its ceiling.
+ */
+const cellFluidClass = "min-w-7 flex-1";
+const dayShapeClass = "aspect-square";
+
+const dayTextClass: Record<CalendarSize, string> = {
+  sm: "text-body-sm",
+  md: "text-body-md",
+  lg: "text-body-lg",
+};
+
+const dayEmphasisClass: Record<CalendarSize, string> = {
+  sm: "text-label-md",
+  md: "text-label-lg",
+  lg: "text-label-lg",
+};
+
+/** The today dot sits 4px above the cell's bottom edge, centred at every rung. */
+const todayDotClass = "bottom-1 left-1/2 -translate-x-1/2";
+
+const popoverDayTextClass: Record<CalendarSize, string> = {
+  sm: "[&_[role=gridcell]]:text-label-sm",
+  md: "[&_[role=gridcell]]:text-label-md",
+  lg: "[&_[role=gridcell]]:text-label-lg",
+};
+
+export type CalendarProps = CommonProps &
+  (
+    | { mode?: "single"; value?: Date | null; onValueChange?: (value: Date) => void }
+    | { mode: "range"; value?: DateRange; onValueChange?: (value: DateRange) => void }
+  );
+
+const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const sameDay = (a: Date | null | undefined, b: Date | null | undefined) =>
+  !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const addDays = (date: Date, days: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+const firstOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const addMonths = (date: Date, months: number) => new Date(date.getFullYear(), date.getMonth() + months, 1);
+
+function monthGrid(month: Date, weekStartsOn: 0 | 1): Date[] {
+  const first = firstOfMonth(month);
+  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -lead);
+  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const weeks = Math.ceil((lead + daysInMonth) / 7);
+  return Array.from({ length: weeks * 7 }, (_, index) => addDays(start, index));
+}
+
+/** Figma `Day` (60:125) inside the `Calendar` of the day picker example (60:245). */
+export function Calendar(props: CalendarProps) {
+  const {
+    defaultMonth,
+    month: monthProp,
+    onMonthChange,
+    isDateDisabled,
+    locale,
+    weekStartsOn = 0,
+    className,
+    variant = "default",
+    surface = "solid",
+    highlight,
+    size = "md",
+  } = props;
+  const [now] = useState(() => new Date());
+  const today = startOfDay(props.today ?? now);
+  const single = props.mode === "range" ? null : (props.value ?? null);
+  const range = props.mode === "range" ? (props.value ?? { start: null, end: null }) : null;
+  const anchor = range ? range.start : single;
+  const [monthState, setMonthState] = useState(() => firstOfMonth(defaultMonth ?? anchor ?? today));
+  const month = monthProp ? firstOfMonth(monthProp) : monthState;
+  const [focused, setFocused] = useState<Date>(() => anchor ?? today);
+  const grid = useRef<HTMLDivElement>(null);
+  const [shownMonth, setShownMonth] = useState(month);
+  const [slide, setSlide] = useState<"next" | "prev" | null>(null);
+  if (month.getTime() !== shownMonth.getTime()) {
+    setSlide(month > shownMonth ? "next" : "prev");
+    setShownMonth(month);
+  }
+
+  const setMonth = (next: Date) => {
+    if (!monthProp) setMonthState(next);
+    onMonthChange?.(next);
+  };
+
+  const days = useMemo(() => monthGrid(month, weekStartsOn), [month, weekStartsOn]);
+  const title = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month);
+  const weekday = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
+  const full = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+
+  const isSelected = (date: Date) =>
+    range ? sameDay(date, range.start) || sameDay(date, range.end) : sameDay(date, single);
+  const inRange = (date: Date) =>
+    !!range?.start && !!range.end && date > startOfDay(range.start) && date < startOfDay(range.end);
+
+  const select = (date: Date) => {
+    if (props.mode === "range") {
+      const current = props.value ?? { start: null, end: null };
+      const next =
+        !current.start || current.end || date < current.start
+          ? { start: date, end: null }
+          : { start: current.start, end: date };
+      props.onValueChange?.(next);
+    } else {
+      props.onValueChange?.(date);
+    }
+  };
+
+  const moveFocus = (next: Date) => {
+    setFocused(next);
+    if (next.getMonth() !== month.getMonth() || next.getFullYear() !== month.getFullYear())
+      setMonth(firstOfMonth(next));
+    requestAnimationFrame(() => {
+      grid.current?.querySelector<HTMLButtonElement>(`[data-date="${next.toDateString()}"]`)?.focus();
+    });
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const step: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    const offset = step[event.key];
+    if (typeof offset === "number") {
+      event.preventDefault();
+      moveFocus(addDays(focused, offset));
+    }
+  };
+
+  const focusInMonth = focused.getMonth() === month.getMonth() ? focused : month;
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col",
+        // The default grid scrolls sideways rather than clipping when a viewport is narrower than the
+        // 28px cell floor allows; the popover is viewport-capped, so it keeps clipping its corners.
+        variant === "popover" ? "overflow-clip" : "overflow-x-auto overflow-y-clip",
+        surface === "solid"
+          ? "border border-border-default bg-bg-surface"
+          : surface === "glass"
+            ? "veil-overlay"
+            : "bg-glass-thick",
+        variant === "popover"
+          ? cn("rounded-[24px]", containerSizeClass[size].popover)
+          : cn("rounded-xl", containerSizeClass[size].default),
+        // Paper renders every popover day on the label scale; the default calendar mixes body and label.
+        variant === "popover" && popoverDayTextClass[size],
+        className,
+      )}
+    >
+      {variant === "popover" ? (
+        <div className={cn("relative flex w-full items-center", popoverHeaderSizeClass[size])}>
+          <p aria-live="polite" className={cn("min-w-0 flex-1 text-text-primary", popoverTitleSizeClass[size])}>
+            <span key={title} className="animate-fade-in">
+              {title}
+            </span>
+          </p>
+          {(
+            [
+              ["Previous month", -1, <CaretLeft key="prev" />],
+              ["Next month", 1, <CaretRight key="next" />],
+            ] as const
+          ).map(([label, step, icon]) => (
+            <button
+              key={label}
+              type="button"
+              aria-label={label}
+              className={cn(
+                "flex motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary hover:bg-overlay-ink-6",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+                popoverArrowSizeClass[size],
+              )}
+              onClick={() => setMonth(addMonths(month, step))}
+            >
+              {icon}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="relative flex w-full items-center">
+          <button
+            type="button"
+            aria-label="Previous month"
+            className={cn(
+              "flex motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary hover:bg-overlay-ink-6 hover:text-text-primary",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+              arrowSizeClass[size],
+            )}
+            onClick={() => setMonth(addMonths(month, -1))}
+          >
+            <CaretLeft />
+          </button>
+          <p aria-live="polite" className={cn("flex-1 text-center text-text-primary", titleSizeClass[size])}>
+            <span key={title} className="animate-fade-in">
+              {title}
+            </span>
+          </p>
+          <button
+            type="button"
+            aria-label="Next month"
+            className={cn(
+              "flex motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary hover:bg-overlay-ink-6 hover:text-text-primary",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+              arrowSizeClass[size],
+            )}
+            onClick={() => setMonth(addMonths(month, 1))}
+          >
+            <CaretRight />
+          </button>
+        </div>
+      )}
+      <div
+        key={month.getTime()}
+        ref={grid}
+        role="grid"
+        aria-label={title}
+        className={cn(
+          "relative flex flex-col",
+          slide === "next" && "animate-slide-shift-next",
+          slide === "prev" && "animate-slide-shift-prev",
+        )}
+        onKeyDown={onKeyDown}
+      >
+        <div role="row" className="flex">
+          {days.slice(0, 7).map((date) => (
+            <span
+              key={date.getDay()}
+              role="columnheader"
+              className={cn(
+                "flex justify-center text-caption text-text-secondary",
+                cellFluidClass,
+                weekdayHeaderSizeClass[size],
+              )}
+            >
+              {weekday.format(date)}
+            </span>
+          ))}
+        </div>
+        {Array.from({ length: days.length / 7 }, (_, week) => (
+          <div key={week} role="row" className="flex">
+            {days.slice(week * 7, week * 7 + 7).map((date) => {
+              const outside = date.getMonth() !== month.getMonth();
+              const disabled = isDateDisabled?.(date) ?? false;
+              const selected = isSelected(date);
+              const between = inRange(date);
+              const isToday = sameDay(date, today);
+              const marked = !selected && !between && (highlight?.some((day) => sameDay(day, date)) ?? false);
+              return (
+                <button
+                  key={date.toDateString()}
+                  type="button"
+                  role="gridcell"
+                  data-date={date.toDateString()}
+                  aria-selected={selected || between}
+                  aria-label={full.format(date)}
+                  aria-current={isToday ? "date" : undefined}
+                  disabled={disabled}
+                  tabIndex={sameDay(date, focusInMonth) ? 0 : -1}
+                  onClick={() => select(date)}
+                  onFocus={() => setFocused(date)}
+                  className={cn(
+                    "relative flex cursor-pointer flex-col items-center justify-center motion-colors",
+                    cellFluidClass,
+                    dayShapeClass,
+                    daySizeClass[size],
+                    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-text-brand",
+                    between
+                      ? cn("bg-overlay-ink-8 text-text-primary", dayTextClass[size])
+                      : selected
+                        ? cn("rounded-full bg-interactive-primary text-text-inverse", dayEmphasisClass[size])
+                        : marked
+                          ? "rounded-full bg-overlay-ink-6"
+                          : "rounded-full hover:not-disabled:bg-overlay-ink-5",
+                    !between &&
+                      !selected &&
+                      (disabled
+                        ? cn("cursor-not-allowed text-text-disabled", dayTextClass[size])
+                        : outside
+                          ? cn("text-text-placeholder", dayTextClass[size])
+                          : isToday
+                            ? cn("text-text-brand", dayEmphasisClass[size])
+                            : cn("text-text-primary", dayTextClass[size])),
+                  )}
+                >
+                  {date.getDate()}
+                  {isToday && !selected && !between && (
+                    <span aria-hidden className={cn("absolute size-1 rounded-full bg-status-live", todayDotClass)} />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/card.tsx

@@ -0,0 +1,79 @@
+import { useRender } from "@base-ui/react/use-render";
+import { CaretRight } from "@phosphor-icons/react";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type CardProps = Omit<ComponentProps<"div">, "className" | "title"> & {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Shows the trailing caret, for cards that open something. */
+  interactive?: boolean;
+  /** Brand rim for the selected card. */
+  selected?: boolean;
+  /** Render as another element, such as `<button />` or `<a />`. */
+  render?: ReactElement;
+  /**
+   * `solid` (default) is an opaque surface with a default border. `glass` is the thick glass.
+   * `frost` is the Paper home board card: the same glass with the denser frost fill and a 0 8 24 6% drop.
+   */
+  surface?: "glass" | "frost" | "solid";
+  className?: string;
+};
+
+/** Figma `Card` (63:310): a 320px thick-glass card, 20px padding and radius, Default / Interactive / Selected. */
+export function Card({
+  title,
+  description,
+  interactive,
+  selected,
+  render,
+  surface = "solid",
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return useRender({
+    render: render ?? <div />,
+    props: {
+      ...props,
+      "data-selected": selected ? "" : undefined,
+      className: cn(
+        // `isolate` makes the card its own stacking context so the glass layer can sit at
+        // `-z-10`: behind the title, description and children, above the card's own fill.
+        // Without it the absolutely positioned layer paints over static body content and
+        // every screen has to patch the card's className to lift it. `min-w-0` keeps the
+        // grid/flex min-content of the card from widening a narrow parent.
+        "relative isolate flex min-w-0 flex-col items-start gap-2 overflow-clip rounded-xl p-5 text-left motion-colors [&>.liquid-layers]:-z-10",
+        surface === "solid" ? "border border-border-default bg-bg-surface" : "bg-glass-thick",
+        surface === "frost" && "bg-glass-fill-frost shadow-[0_8px_24px_#0a14240f]",
+        selected && (surface === "solid" ? "border-border-brand" : "[--glass-edge:var(--color-border-brand)]"),
+        interactive &&
+          cn(
+            "cursor-pointer transition-[color,background-color,border-color,box-shadow,scale] duration-150 ease-out",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:scale-[0.99]",
+            !selected &&
+              (surface === "solid" ? "hover:border-border-strong" : "hover:[--glass-edge:var(--color-border-strong)]"),
+          ),
+        className,
+      ),
+      children: (
+        <>
+          {surface !== "solid" && <LiquidGlass />}
+          {title && (
+            <div className="relative flex w-full items-center gap-2">
+              <span className="min-w-0 flex-1 text-title-sm text-text-primary">{title}</span>
+              {interactive && <CaretRight aria-hidden className="size-4 shrink-0 text-text-secondary" />}
+            </div>
+          )}
+          {interactive && !title && (
+            <CaretRight aria-hidden className="absolute top-5 right-5 size-4 shrink-0 text-text-secondary" />
+          )}
+          {description && <p className="relative text-body-sm text-text-secondary">{description}</p>}
+          {children && <div className="relative w-full">{children}</div>}
+        </>
+      ),
+    },
+  });
+}

package/src/components/chat-bubble.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type ChatBubbleSize = ControlSize;
+
+export type ChatBubbleProps = Omit<ComponentProps<"div">, "className"> & {
+  /** `me` is the ink bubble, `bot` the flat subtle bubble. Neither uses glass. */
+  from?: "me" | "bot";
+  /** Bubble size: `sm` 12/8px padding with body-sm, `md` 16/12px with body-md (default), `lg` 20/14px with body-lg. */
+  size?: ChatBubbleSize;
+  className?: string;
+};
+
+const sizeClass: Record<ChatBubbleSize, string> = {
+  sm: "px-3 py-2 text-body-sm",
+  md: "px-4 py-3 text-body-md",
+  lg: "px-5 py-3.5 text-body-lg",
+};
+
+/** Figma `Chat bubble` (64:359): 16/12px padding, 20px radius, body-md text. */
+export function ChatBubble({ from = "me", size = "md", className, ...props }: ChatBubbleProps) {
+  return (
+    <div
+      data-from={from}
+      className={cn(
+        "w-fit max-w-[min(100%,560px)] motion-rise rounded-xl wrap-break-word",
+        sizeClass[size],
+        from === "me" ? "ml-auto bg-interactive-primary text-interactive-on-primary" : "bg-bg-subtle text-text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/chat-controls.tsx

@@ -0,0 +1,118 @@
+import { CaretDown } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type ChatControlSurface = "solid" | "glass";
+
+type ButtonProps = Omit<ComponentProps<"button">, "className"> & {
+  className?: string;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels. */
+  surface?: ChatControlSurface;
+};
+
+const controlBase =
+  "motion-press relative flex motion-rise cursor-pointer items-center overflow-clip rounded-full text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
+
+const surfaceClass: Record<ChatControlSurface, string> = {
+  glass: "bg-glass-clear hover:bg-glass-clear-hover active:bg-glass-clear-pressed",
+  solid: "border border-border-default bg-bg-surface hover:bg-bg-subtle active:bg-interactive-secondary-hover",
+};
+
+/** Figma `Jump to latest` (Chat controls 88:659): a 44px clear-glass circle with a 20px caret. */
+export function JumpToLatest({
+  surface = "solid",
+  className,
+  "aria-label": ariaLabel = "Jump to latest",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={cn(controlBase, surfaceClass[surface], "size-11 justify-center", className)}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <CaretDown aria-hidden className="relative size-5" />
+    </button>
+  );
+}
+
+/** Figma `New messages` (88:659): a 40px clear-glass pill with a 16px caret and a label. */
+export function NewMessagesPill({ surface = "solid", className, children, ...props }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={cn(controlBase, surfaceClass[surface], "h-10 gap-1.5 pr-4 pl-3.5 text-label-md", className)}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <CaretDown aria-hidden className="relative size-4" />
+      <span className="relative whitespace-nowrap">{children}</span>
+    </button>
+  );
+}
+
+/** Bar heights of the Figma waveform, in px. */
+const WAVEFORM = [8, 14, 22, 12, 26, 18, 10, 20, 28, 16, 9, 18, 24, 12, 7, 15, 21, 11];
+
+export type VoiceInputProps = {
+  /** Elapsed time, such as "0:07". */
+  elapsed: ReactNode;
+  /** 0-1 levels for the 18 bars; defaults to the Figma waveform. */
+  levels?: number[];
+  /** Animates the waveform while true; set false once recording stops. */
+  recording?: boolean;
+  onStop?: () => void;
+  stopLabel?: string;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels. */
+  surface?: ChatControlSurface;
+  className?: string;
+};
+
+/** Figma `Voice input` (88:659): a 52px pill with a red stop button, waveform and timer. */
+export function VoiceInput({
+  elapsed,
+  levels,
+  recording = true,
+  onStop,
+  stopLabel = "Stop recording",
+  surface = "solid",
+  className,
+}: VoiceInputProps) {
+  const heights = levels ? levels.map((level) => Math.max(4, Math.round(level * 28))) : WAVEFORM;
+  const bars = heights.map((height, position) => ({ height, id: `bar-${position}` }));
+  return (
+    <div
+      className={cn(
+        "relative flex h-13 w-60 max-w-full min-w-0 items-center gap-3 overflow-clip rounded-full px-2",
+        surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <button
+        type="button"
+        aria-label={stopLabel}
+        onClick={onStop}
+        className="relative flex size-9 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-interactive-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+      >
+        <span className="size-3 rounded-[3px] bg-interactive-on-danger" />
+      </button>
+      <div aria-hidden className="relative flex min-w-0 flex-1 items-center gap-[3px] overflow-hidden">
+        {bars.map((bar, position) => (
+          <span
+            key={bar.id}
+            className={cn("w-[3px] shrink-0 rounded-[2px] bg-interactive-primary-75", recording && "animate-wave")}
+            style={{ height: bar.height, animationDelay: recording ? `${position * 120}ms` : undefined }}
+          />
+        ))}
+      </div>
+      <span className="relative w-10 shrink-0 text-right text-label-md whitespace-nowrap text-text-secondary tabular-nums">
+        {elapsed}
+      </span>
+    </div>
+  );
+}