@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/Message.tsx

@@ -0,0 +1,171 @@
+// File: packages/react/src/components/Message.tsx
+// Map: types + icons -> MessageAttachments -> Message (avatar, bubble: sender, quote, text, attachments, meta; actions)
+//      -> MessageDivider -> MessageList (demo conversation)
+// Same markup as packages/ui/snippets/message.html. No JavaScript: grouping (--continued) and hover actions are CSS.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Attachment, AttachmentImage, AttachmentThumb } from "./Attachment";
+import type { AttachmentFile } from "./Attachment";
+
+/** File chip (default), image preview or square thumbnail inside a message. */
+export type MessageAttachment =
+  | (AttachmentFile & { kind?: "file" })
+  | { kind: "image"; href?: string; src?: string; alt: string; art?: number; caption?: ReactNode }
+  | { kind: "thumb"; src?: string; alt: string; art?: number };
+
+export interface MessageAction {
+  /** Passed to onAction, e.g. "reply". */
+  name: string;
+  /** aria-label, e.g. "Reply to this message". */
+  label: string;
+  /** Built-in "reply" / "delete" icon, or your own svg. */
+  icon?: "reply" | "delete" | ReactNode;
+  destructive?: boolean;
+}
+
+export interface MessageData {
+  direction?: "in" | "out";
+  sender?: ReactNode;
+  /** Initials in the avatar. */
+  avatar?: ReactNode;
+  time?: ReactNode;
+  datetime?: string;
+  status?: "sent" | "read" | "failed";
+  /** Default "Sent" / "Read" / "Failed". */
+  statusLabel?: ReactNode;
+  /** Double check icon before the status. */
+  statusIcon?: boolean;
+  /** Follows a message of the same sender (no name; avatar on the last one). */
+  continued?: boolean;
+  quote?: { href?: string; sender: ReactNode; text: ReactNode };
+  /** A string becomes one paragraph; pass elements for lists, links and more paragraphs. */
+  text?: ReactNode;
+  attachments?: MessageAttachment[];
+  actions?: MessageAction[];
+  /** aria-label of the row, e.g. "Lisa Verbeke, 09:12". */
+  label?: string;
+  id?: string;
+}
+
+const svg = (d: string, width = "2") => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={width} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>
+);
+const ICONS: Record<string, string> = { reply: "M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4", delete: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" };
+const STATUS = { sent: "Sent", read: "Read", failed: "Failed" };
+
+/** `.oc-message__attachments`: thumbnails share one `.oc-attachment-list`, files and images stand alone. */
+export function MessageAttachments({ items }: { items: MessageAttachment[] }) {
+  const thumbs = items.every((a) => a.kind === "thumb");
+  return (
+    <div className="oc-message__attachments">
+      {thumbs ? (
+        <div className="oc-attachment-list">{items.map((a, i) => <AttachmentThumb key={i} as="span" {...(a as Extract<MessageAttachment, { kind: "thumb" }>)} />)}</div>
+      ) : items.map((a, i) => {
+        if (a.kind === "image") { const { kind: _k, ...img } = a; return <AttachmentImage key={i} {...img} />; }
+        if (a.kind === "thumb") { const { kind: _k, ...t } = a; return <AttachmentThumb key={i} as="span" {...t} />; }
+        const { kind: _k, ...file } = a;
+        return <Attachment key={i} {...file} />;
+      })}
+    </div>
+  );
+}
+
+export interface MessageProps extends Omit<HTMLAttributes<HTMLElement>, "id">, MessageData {
+  onAction?: (name: string) => void;
+}
+
+/** `article.oc-message`: one chat bubble with avatar, meta and hover actions. */
+export const Message = forwardRef<HTMLElement, MessageProps>(function Message(
+  { direction = "in", sender, avatar, time, datetime, status, statusLabel, statusIcon, continued, quote, text, attachments, actions, label, onAction, className, children, ...rest },
+  ref,
+) {
+  return (
+    <article ref={ref} className={cx("oc-message", direction === "out" && "oc-message--out", continued && "oc-message--continued", className)} aria-label={label} {...rest}>
+      <span className="oc-avatar oc-message__avatar">{avatar}</span>
+      <div className="oc-message__bubble">
+        {sender != null && !continued && <p className="oc-message__sender">{sender}</p>}
+        {quote && <a className="oc-message__quote" href={quote.href}><strong>{quote.sender}</strong><span>{quote.text}</span></a>}
+        {(text != null || children != null) && <div className="oc-message__text">{typeof text === "string" ? <p>{text}</p> : text}{children}</div>}
+        {attachments?.length ? <MessageAttachments items={attachments} /> : null}
+        {(time != null || status) && (
+          <p className="oc-message__meta">
+            {time != null && <time dateTime={datetime}>{time}</time>}
+            {status && (
+              <span className={cx("oc-message__status", status !== "sent" && `oc-message__status--${status}`)}>
+                {statusIcon && svg("M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9", "2.2")}{statusLabel ?? STATUS[status]}
+              </span>
+            )}
+          </p>
+        )}
+      </div>
+      {actions?.length ? (
+        <div className="oc-message__actions">
+          {actions.map((a) => (
+            <button key={a.name} type="button" className={cx("oc-message__action", a.destructive && "oc-message__action--destructive")} aria-label={a.label} onClick={() => onAction?.(a.name)}>
+              {typeof a.icon === "string" || a.icon == null ? svg(ICONS[(a.icon as string) ?? a.name] ?? ICONS.reply) : a.icon}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </article>
+  );
+});
+
+export interface MessageDividerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Centred notice without lines. */
+  system?: boolean;
+}
+
+/** `.oc-message-divider`: date divider, or a system notice. */
+export function MessageDivider({ system, className, children, ...rest }: MessageDividerProps) {
+  return <div className={cx("oc-message-divider", system && "oc-message-divider--system", className)} role={system ? "note" : undefined} {...rest}><span>{children}</span></div>;
+}
+
+export type MessageListItem = MessageData | { divider: ReactNode; system?: boolean };
+
+export interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
+  /** Messages and dividers in order; `children` replace them. */
+  items?: MessageListItem[];
+  /** role="log" for a list that updates live (default true). */
+  log?: boolean;
+  onAction?: (name: string, message: MessageData, index: number) => void;
+}
+
+const DEMO: MessageListItem[] = [
+  { divider: "Tuesday 14 October" },
+  { sender: "Lisa Verbeke", avatar: "LV", time: "09:12", datetime: "2026-10-14T09:12", label: "Lisa Verbeke, 09:12", text: "Morning Tom! The worktop supplier sent two samples for Villa Dewitte." },
+  {
+    sender: "Lisa Verbeke", avatar: "LV", time: "09:13", datetime: "2026-10-14T09:13", label: "Lisa Verbeke, 09:13", continued: true, id: "oc-message-demo-question",
+    text: (
+      <>
+        <p>Which finish should we order?</p>
+        <ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul>
+        <p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>
+      </>
+    ),
+  },
+  {
+    direction: "out", avatar: "TP", time: "09:20", datetime: "2026-10-14T09:20", label: "You, 09:20", status: "read", statusIcon: true,
+    quote: { href: "#oc-message-demo-question", sender: "Lisa Verbeke", text: "Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm" },
+    text: "Calacatta matt. The client wants the lighter look next to the oak fronts.",
+    actions: [{ name: "reply", label: "Reply to this message" }, { name: "delete", label: "Delete this message", destructive: true }],
+  },
+  { divider: "Lisa Verbeke marked this question as answered", system: true },
+];
+
+/** `.oc-message-list`: column of messages and dividers. */
+export const MessageList = forwardRef<HTMLDivElement, MessageListProps>(function MessageList(
+  { items = DEMO, log = true, onAction, className, children, "aria-label": label = log ? "Conversation with Lisa Verbeke" : undefined, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-message-list", className)} role={log ? "log" : undefined} aria-label={label} {...rest}>
+      {children ?? items.map((item, i) =>
+        "divider" in item
+          ? <MessageDivider key={i} system={item.system}>{item.divider}</MessageDivider>
+          : <Message key={i} {...item} onAction={(name) => onAction?.(name, item, i)} />,
+      )}
+    </div>
+  );
+});

package/src/components/MessageThread.tsx

@@ -0,0 +1,177 @@
+// File: packages/react/src/components/MessageThread.tsx
+// Map: types + demo -> MessageThread (state: messages, sending) -> header (back, heading, people, badge, menu) -> scroll (MessageList)
+//      -> footer (composer form / note / own composer) -> busy overlay
+// Same markup as packages/ui/snippets/message-thread.html. Like the snippet script, a sent text is appended as an outgoing bubble
+// (after onSend resolves; aria-busy shows the overlay meanwhile) and Ctrl/Cmd + Enter sends.
+"use client";
+
+import { forwardRef, useEffect, useId, useState } from "react";
+import type { FormEvent, HTMLAttributes, KeyboardEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { MessageList } from "./Message";
+import type { MessageData, MessageListItem } from "./Message";
+
+export interface ThreadParticipant { initials: ReactNode; name?: string }
+export type ThreadMenuItem = { name: string; label: ReactNode; destructive?: boolean } | { separator: true };
+
+export interface MessageThreadProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  /** Bold first part of the meta line, e.g. the project. */
+  project?: ReactNode;
+  meta?: ReactNode;
+  participants?: ThreadParticipant[];
+  /** Badge in the header, e.g. { label: "Urgent", variant: "destructive" }. */
+  status?: { label: ReactNode; variant?: string } | null;
+  /** Actions menu; null hides the button. */
+  menu?: ThreadMenuItem[] | null;
+  onMenu?: (name: string) => void;
+  messages?: MessageListItem[];
+  /** aria-label of the scroll area (default "Messages"). */
+  scrollLabel?: string;
+  /** aria-live="polite" on the scroll area (default true). */
+  live?: boolean;
+  /** Show the sending overlay (aria-busy). */
+  busy?: boolean;
+  /** Overlay title; null leaves the overlay out. */
+  busyTitle?: ReactNode;
+  busyText?: ReactNode;
+  /** Replaces the default composer form. */
+  composer?: ReactNode;
+  /** Text instead of a composer, e.g. for a closed conversation. */
+  note?: ReactNode;
+  placeholder?: string;
+  composerLabel?: string;
+  inline?: boolean;
+  tools?: Array<"attach" | "emoji">;
+  onTool?: (tool: "attach" | "emoji") => void;
+  hint?: ReactNode;
+  /** Called with the text; the bubble is appended when it resolves (not when it throws). */
+  onSend?: (text: string) => void | Promise<void>;
+  /** Append sent messages yourself through `messages` (default false = append here). */
+  manual?: boolean;
+  /** Avatar of new outgoing messages (default: the last outgoing avatar, else "Me"). */
+  me?: ReactNode;
+  /** Element at the start of the header, e.g. a back link. */
+  back?: ReactNode;
+  /** No wallpaper (`--plain`). */
+  plain?: boolean;
+}
+
+const MENU: ThreadMenuItem[] = [
+  { name: "unread", label: "Mark as unread" }, { name: "archive", label: "Move to archive" }, { separator: true },
+  { name: "delete", label: "Delete conversation", destructive: true },
+];
+const DEMO: MessageListItem[] = [
+  { divider: "Tuesday 14 October" },
+  { sender: "Lisa Verbeke", avatar: "LV", time: "09:12", datetime: "2026-10-14T09:12", text: "The supplier dropped off two worktop samples at the workshop. Photo attached.",
+    attachments: [{ kind: "image", href: "#samples.jpg", alt: "Two worktop samples on the workbench", art: 6, caption: "samples.jpg · 2.1 MB" }] },
+  { sender: "Lisa Verbeke", avatar: "LV", time: "09:13", datetime: "2026-10-14T09:13", continued: true,
+    text: <p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p> },
+  { direction: "out", avatar: "TP", time: "09:20", datetime: "2026-10-14T09:20", status: "read", text: "Calacatta matt, 20 mm. I'll send the updated quote to the client today.",
+    attachments: [{ name: "Quote kitchen Dewitte v2.pdf", size: "1.2 MB", href: "#quote.pdf" }], actions: [{ name: "delete", label: "Delete this message", destructive: true }] },
+  { divider: "Today" },
+  { sender: "Lisa Verbeke", avatar: "LV", time: "10:02", datetime: "2026-10-24T10:02", text: "Client signed. Can you confirm the edge profile before 16:00?" },
+];
+const isOut = (m?: MessageListItem): m is MessageData => !!m && !("divider" in m) && m.direction === "out";
+
+/** `section.oc-message-thread`: header, scrolling messages (newest at the bottom), composer and sending overlay. */
+export const MessageThread = forwardRef<HTMLElement, MessageThreadProps>(function MessageThread(
+  {
+    title = "Kitchen worktop: which finish?", project = "Villa Dewitte", meta = "Lisa Verbeke → Tom Peeters · 14 Oct 2026",
+    participants = [{ initials: "LV", name: "Lisa Verbeke" }, { initials: "TP", name: "Tom Peeters" }], status = { label: "Urgent", variant: "destructive" },
+    menu = MENU, onMenu, messages = DEMO, scrollLabel = "Messages", live = true, busy, busyTitle = "Sending message…",
+    busyText = "Please wait, do not close this conversation.", composer, note, placeholder = "Type your reply…", composerLabel = "Reply", inline,
+    tools = ["attach", "emoji"], onTool, hint = "Ctrl + Enter to send", onSend, manual, me, back, plain, id, className, ...rest
+  },
+  ref,
+) {
+  const auto = useId().replace(/[^\w-]/g, "");
+  const base = id ?? `oc-thread-${auto}`;
+  const [list, setList] = useState(messages);
+  const [sending, setSending] = useState(false);
+  useEffect(() => setList(messages), [messages]);
+
+  const send = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const field = e.currentTarget.elements.namedItem("message") as HTMLTextAreaElement;
+    const text = field.value.trim();
+    if (!text) return;
+    setSending(true);
+    try { await onSend?.(text); } catch { setSending(false); return; }
+    if (!manual) setList((l) => {
+      const last = l[l.length - 1];
+      const mine = me ?? [...l].reverse().find(isOut)?.avatar ?? "Me";
+      return [...l, { direction: "out", avatar: mine, continued: isOut(last), text, time: new Date().toTimeString().slice(0, 5), status: "sent" }];
+    });
+    field.value = "";
+    setSending(false);
+    field.focus();
+  };
+  const ctrlEnter = (e: KeyboardEvent<HTMLFormElement>) => {
+    if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    e.currentTarget.requestSubmit();
+  };
+
+  return (
+    <section ref={ref} className={cx("oc-message-thread", plain && "oc-message-thread--plain", className)} aria-labelledby={`${base}-title`} aria-busy={busy || sending || undefined} {...rest}>
+      <header className="oc-message-thread__header">
+        {back}
+        <div className="oc-message-thread__heading">
+          <h3 className="oc-message-thread__title" id={`${base}-title`}>{title}</h3>
+          {(project != null || meta != null) && <p className="oc-message-thread__meta">{project != null && <strong>{project}</strong>}{project != null && meta != null && " · "}{meta}</p>}
+        </div>
+        {participants.length > 0 && (
+          <div className="oc-avatar-group oc-message-thread__people" aria-label={`${participants.length} participants`}>
+            {participants.map((p, i) => <span key={i} className="oc-avatar" title={p.name}>{p.initials}</span>)}
+          </div>
+        )}
+        {(status || menu) && (
+          <div className="oc-message-thread__actions">
+            {status && <span className={cx("oc-badge", status.variant && `oc-badge--${status.variant}`)}>{status.label}</span>}
+            {menu && (
+              <>
+                <button type="button" className="oc-message-thread__icon-btn" {...attrs({ popovertarget: `${base}-menu` })} aria-label="Conversation actions">
+                  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg>
+                </button>
+                <div className="oc-dropdown-menu" id={`${base}-menu`} {...attrs({ popover: "" })} role="menu">
+                  {menu.map((m, i) => "separator" in m
+                    ? <div key={i} className="oc-dropdown-separator" role="separator" />
+                    : <button key={i} type="button" className={cx("oc-dropdown-item", m.destructive && "oc-dropdown-item--destructive")} role="menuitem" onClick={() => onMenu?.(m.name)}>{m.label}</button>)}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </header>
+      <div className="oc-message-thread__scroll" tabIndex={0} role="log" aria-label={scrollLabel} aria-live={live ? "polite" : undefined}>
+        <MessageList items={list} log={false} />
+      </div>
+      <div className="oc-message-thread__footer">
+        {note != null ? <p className="oc-message-thread__note">{note}</p> : composer ?? (
+          <form className={cx("oc-chat-composer", inline && "oc-chat-composer--inline")} action="#" aria-label={composerLabel} onSubmit={send} onKeyDown={ctrlEnter}>
+            <label className="oc-visually-hidden" htmlFor={`${base}-input`}>Message</label>
+            <textarea className="oc-chat-composer__input" id={`${base}-input`} name="message" rows={1} placeholder={placeholder} required />
+            <div className="oc-chat-composer__bar">
+              {tools.length > 0 && (
+                <div className="oc-chat-composer__tools">
+                  {tools.includes("attach") && <button type="button" className="oc-chat-composer__tool" aria-label="Attach a file" onClick={() => onTool?.("attach")}>&#128206;</button>}
+                  {tools.includes("emoji") && <button type="button" className="oc-chat-composer__tool" aria-label="Insert emoji" onClick={() => onTool?.("emoji")}>&#128578;</button>}
+                </div>
+              )}
+              {hint != null && <span className="oc-chat-composer__hint">{hint}</span>}
+              <button type="submit" className="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+            </div>
+          </form>
+        )}
+      </div>
+      {busyTitle != null && (
+        <div className="oc-message-thread__busy" role="status">
+          <span className="oc-spinner oc-spinner--lg" aria-hidden="true" />
+          <strong>{busyTitle}</strong>
+          {busyText != null && <span>{busyText}</span>}
+        </div>
+      )}
+    </section>
+  );
+});

package/src/components/Modal.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { DialogContext, useDialog, useDialogContext, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+import { Button } from "./Button";
+import type { ButtonProps } from "./Button";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Heading (`oc-modal-title`). */
+  title?: ReactNode;
+  /** Muted text under the title (`oc-modal-description`). */
+  description?: ReactNode;
+  /** Button row (`oc-modal-footer`). Use `<ModalClose>` for buttons that close the dialog. */
+  footer?: ReactNode;
+  size?: ModalSize;
+  /** Close when the backdrop is clicked (native `closedby="any"`). Default true. */
+  closeOnBackdrop?: boolean;
+}
+
+/**
+ * `<dialog class="oc-modal">`. The `open` prop is synced to showModal() / close() in an effect;
+ * Escape and backdrop clicks are reported through `onOpenChange(false)`.
+ */
+export const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
+  { open, defaultOpen, onOpenChange, title, description, footer, size = "md", closeOnBackdrop = true, className, children, ...rest },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const titleId = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const onClick = (e: MouseEvent<HTMLDialogElement>) => {
+    rest.onClick?.(e);
+    if (closeOnBackdrop && e.target === e.currentTarget) dlg.close();
+  };
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-modal", className)}
+      aria-labelledby={title != null ? titleId : undefined}
+      {...attrs({ closedby: closeOnBackdrop ? "any" : "closerequest" })}
+      {...rest}
+      onClick={onClick}
+      onClose={dlg.onClose}
+    >
+      <DialogContext.Provider value={{ close: dlg.close }}>
+        <div className={cx("oc-modal-content", size !== "md" && `oc-modal-content--${size}`)}>
+          {(title != null || description != null) && (
+            <div className="oc-modal-header">
+              {title != null && <h2 className="oc-modal-title" id={titleId}>{title}</h2>}
+              {description != null && <p className="oc-modal-description">{description}</p>}
+            </div>
+          )}
+          {children}
+          {footer != null && <div className="oc-modal-footer">{footer}</div>}
+        </div>
+      </DialogContext.Provider>
+    </dialog>
+  );
+});
+
+/** A button that closes the surrounding Modal / AlertDialog / Sheet. */
+export const ModalClose = forwardRef<HTMLButtonElement, ButtonProps>(function ModalClose({ onClick, ...rest }, ref) {
+  const ctx = useDialogContext();
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      {...rest}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) ctx?.close();
+      }}
+    />
+  );
+});

package/src/components/Navmenu.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, useId } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface NavmenuProps extends HTMLAttributes<HTMLUListElement> {
+  /** `aria-label` of the wrapping <nav>. */
+  label?: string;
+  /** Class for the wrapping <nav> (e.g. `oc-block-appbar-nav`). */
+  navClassName?: string;
+}
+
+/** `<nav><ul class="oc-navmenu">`: horizontal navigation links. */
+export const Navmenu = forwardRef<HTMLUListElement, NavmenuProps>(function Navmenu(
+  { label = "Navigation", navClassName, className, ...rest },
+  ref,
+) {
+  return (
+    <nav aria-label={label} className={navClassName}>
+      <ul ref={ref} className={cx("oc-navmenu", className)} {...rest} />
+    </nav>
+  );
+});
+
+/** `<li>` of a Navmenu. */
+export function NavmenuItem(props: LiHTMLAttributes<HTMLLIElement>) {
+  return <li {...props} />;
+}
+
+export interface NavmenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Current page (`aria-current="page"`). */
+  current?: boolean;
+}
+
+/** `<a class="oc-navmenu-link">` */
+export const NavmenuLink = forwardRef<HTMLAnchorElement, NavmenuLinkProps>(function NavmenuLink(
+  { current, className, ...rest },
+  ref,
+) {
+  return <a ref={ref} className={cx("oc-navmenu-link", className)} aria-current={current ? "page" : undefined} {...rest} />;
+});
+
+export interface NavmenuDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /** Trigger text (button with a chevron). */
+  label: ReactNode;
+}
+
+/** `<li>` with a caret trigger button and a `.oc-dropdown-menu[popover]` of children. */
+export const NavmenuDropdown = forwardRef<HTMLDivElement, NavmenuDropdownProps>(function NavmenuDropdown(
+  { label, className, id, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const menuId = id ?? `oc-navmenu-${auto.replace(/:/g, "")}`;
+  return (
+    <li>
+      <button className="oc-navmenu-link oc-navmenu-link--caret" type="button" {...attrs({ popovertarget: menuId })}>{label}</button>
+      <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
+        {children}
+      </div>
+    </li>
+  );
+});

package/src/components/NextTeaser.tsx

@@ -0,0 +1,29 @@
+// File: packages/react/src/components/NextTeaser.tsx | Map: props -> NextTeaser (a -> label -> name (+ mark) -> tagline)
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface NextTeaserProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Small uppercase label (default "Next product"). */
+  label?: ReactNode;
+  name: ReactNode;
+  tagline?: ReactNode;
+  /** Element before the name, usually a <ProductMark size="sm" />. */
+  mark?: ReactNode;
+  /** "Previous" link: arrow left. */
+  prev?: boolean;
+}
+
+/** `<a class="oc-next-teaser">`: "Next product" teaser card. */
+export const NextTeaser = forwardRef<HTMLAnchorElement, NextTeaserProps>(function NextTeaser(
+  { label = "Next product", name, tagline, mark, prev = false, className, ...rest },
+  ref,
+) {
+  return (
+    <a ref={ref} className={cx("oc-next-teaser", prev && "oc-next-teaser--prev", className)} {...rest}>
+      {label != null && <span className="oc-next-teaser__label">{label}</span>}
+      <span className="oc-next-teaser__name">{mark}{name}</span>
+      {tagline != null && <span className="oc-next-teaser__tagline">{tagline}</span>}
+    </a>
+  );
+});

package/src/components/NumberInput.tsx

@@ -0,0 +1,64 @@
+// File: packages/react/src/components/NumberInput.tsx
+// Map: props -> clamp helper -> component (minus button, number field, plus button)
+// Same markup as packages/ui/snippets/number-input.html. The buttons are handled here (no page script needed).
+"use client";
+
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+  /** Current number; null = empty field. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: "sm" | "md";
+  /** Full width. */
+  block?: boolean;
+  error?: boolean;
+  decrementLabel?: string;
+  incrementLabel?: string;
+}
+
+/** Keep a number inside min/max and drop float noise (0.1 + 0.2). */
+function clamp(n: number, min?: number, max?: number) {
+  const rounded = Math.round(n * 1e6) / 1e6;
+  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, rounded));
+}
+
+/** `.oc-number-input`: number field with - / + buttons. Buttons disable themselves at min / max. */
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
+  { value, defaultValue, onChange, min, max, step = 1, size = "md", block, error, decrementLabel = "Decrease", incrementLabel = "Increase", className, disabled, ...rest },
+  ref,
+) {
+  const [current, setCurrent] = useControllable<number | null>(value, defaultValue ?? null, onChange);
+  const stepBy = (dir: 1 | -1) => setCurrent(clamp((current ?? min ?? 0) + dir * step, min, max));
+
+  return (
+    <div className={cx("oc-number-input", size === "sm" && "oc-number-input--sm", block && "oc-number-input--block", error && "oc-number-input--error", className)}>
+      <button className="oc-number-input-step" type="button" aria-label={decrementLabel} disabled={disabled || (min != null && current != null && current <= min)} onClick={() => stepBy(-1)}>
+        &minus;
+      </button>
+      <input
+        ref={ref}
+        className="oc-number-input-field"
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        value={current ?? ""}
+        onChange={(e) => setCurrent(e.target.value === "" ? null : Number(e.target.value))}
+        {...rest}
+      />
+      <button className="oc-number-input-step" type="button" aria-label={incrementLabel} disabled={disabled || (max != null && current != null && current >= max)} onClick={() => stepBy(1)}>
+        +
+      </button>
+    </div>
+  );
+});

package/src/components/OtpInput.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { forwardRef } from "react";
+import type { CSSProperties, InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength"> {
+  /** Code length (default 6). */
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Called once when `length` characters have been entered. */
+  onComplete?: (value: string) => void;
+  /** Error state (`aria-invalid`). */
+  invalid?: boolean;
+  /** Allow letters as well as digits. */
+  alphanumeric?: boolean;
+}
+
+/** `<input class="oc-otp">`: separate cells drawn on a single real input. */
+export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(function OtpInput(
+  { length = 6, value, defaultValue = "", onChange, onComplete, invalid, alphanumeric, className, style, ...rest },
+  ref,
+) {
+  const [code, setCode] = useControllable<string>(value, defaultValue, onChange);
+  return (
+    <input
+      ref={ref}
+      className={cx("oc-otp", className)}
+      type="text"
+      inputMode={alphanumeric ? "text" : "numeric"}
+      autoComplete="one-time-code"
+      maxLength={length}
+      pattern={alphanumeric ? undefined : "[0-9]*"}
+      style={{ "--oc-otp-length": length, ...style } as CSSProperties}
+      aria-invalid={invalid ? true : undefined}
+      value={code}
+      onChange={(e) => {
+        const next = alphanumeric ? e.target.value : e.target.value.replace(/\D/g, "");
+        setCode(next);
+        if (next.length === length) onComplete?.(next);
+      }}
+      {...rest}
+    />
+  );
+});