@birdycom/omniaui-react 0.12.4 → 0.12.6

package/src/components/LazyImage.tsx

@@ -0,0 +1,45 @@
+// File: packages/react/src/components/LazyImage.tsx | Map: props -> figure.oc-lazy (ratio, preview) -> img loading=lazy -> loaded / error state
+// Same markup as packages/ui/snippets/lazy.html.
+import { forwardRef, useState } from "react";
+import type { CSSProperties, HTMLAttributes, ImgHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LazyImageProps extends HTMLAttributes<HTMLElement> {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  /** Aspect ratio of the box, e.g. "16 / 10" (default) or "1". */
+  ratio?: string;
+  /** URL of a tiny copy, shown blurred until the photo is there (instead of the shimmer). */
+  preview?: string;
+  caption?: ReactNode;
+  /** "lazy" (default) or "eager" for images in the first screen. */
+  loading?: "lazy" | "eager";
+  imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+}
+
+/** `.oc-lazy`: an image that keeps its place, shows a placeholder and fades in once loaded. */
+export const LazyImage = forwardRef<HTMLElement, LazyImageProps>(function LazyImage(
+  { src, alt, width, height, ratio, preview, caption, loading = "lazy", imgProps, className, style, ...rest },
+  ref,
+) {
+  const [state, setState] = useState<"" | "is-loaded" | "is-error">("");
+  const vars = { ...(ratio ? { "--oc-lazy-ratio": ratio } : {}), ...(preview ? { "--oc-lazy-preview": `url(${preview})` } : {}), ...style } as CSSProperties;
+  return (
+    <figure ref={ref} className={cx("oc-lazy", state, className)} style={vars} {...rest}>
+      <img
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={loading}
+        decoding="async"
+        onLoad={() => setState("is-loaded")}
+        onError={() => setState("is-error")}
+        {...imgProps}
+      />
+      {caption != null && <figcaption>{caption}</figcaption>}
+    </figure>
+  );
+});

package/src/components/Message.tsx

@@ -43,15 +43,16 @@ export interface MessageData {
   text?: ReactNode;
   attachments?: MessageAttachment[];
   actions?: MessageAction[];
-  /** aria-label of the row, e.g. "Lisa Verbeke, 09:12". */
+  /** aria-label of the row, e.g. "Customer 1, 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>
+/** A webicon (MDI path data, 24x24). */
+const svg = (d: string) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" 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 ICONS: Record<string, string> = { reply: "M8 9.8v.9l1.7.3c2.6.4 4.5 1.4 5.9 2.7c-1.7-.5-3.5-.8-5.6-.8H8v1.3L5.8 12zM10 5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11", delete: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z" };
 const STATUS = { sent: "Sent", read: "Read", failed: "Failed" };
 
 /** `.oc-message__attachments`: thumbnails share one `.oc-attachment-list`, files and images stand alone. */
@@ -93,7 +94,7 @@ export const Message = forwardRef<HTMLElement, MessageProps>(function Message(
             {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]}
+                {statusIcon && svg("M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z")}{statusLabel ?? STATUS[status]}
               </span>
             )}
           </p>
@@ -134,9 +135,9 @@ export interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
 
 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: "Customer 1", avatar: "C1", time: "09:12", datetime: "2026-10-14T09:12", label: "Customer 1, 09:12", text: "Morning Tom! The worktop supplier sent two samples for Project 1." },
   {
-    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",
+    sender: "Customer 1", avatar: "C1", time: "09:13", datetime: "2026-10-14T09:13", label: "Customer 1, 09:13", continued: true, id: "oc-message-demo-question",
     text: (
       <>
         <p>Which finish should we order?</p>
@@ -146,17 +147,17 @@ const DEMO: MessageListItem[] = [
     ),
   },
   {
-    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" },
+    direction: "out", avatar: "C6", time: "09:20", datetime: "2026-10-14T09:20", label: "You, 09:20", status: "read", statusIcon: true,
+    quote: { href: "#oc-message-demo-question", sender: "Customer 1", 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 },
+  { divider: "Customer 1 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 },
+  { items = DEMO, log = true, onAction, className, children, "aria-label": label = log ? "Conversation with Customer 1" : undefined, ...rest },
   ref,
 ) {
   return (

package/src/components/MessageThread.tsx

@@ -63,22 +63,22 @@ const MENU: ThreadMenuItem[] = [
 ];
 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.",
+  { sender: "Customer 1", avatar: "C1", 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,
+  { sender: "Customer 1", avatar: "C1", 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 }] },
+  { direction: "out", avatar: "C6", 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 Project 1 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?" },
+  { sender: "Customer 1", avatar: "C1", 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" },
+    title = "Kitchen worktop: which finish?", project = "Project 1", meta = "Customer 1 → Customer 6 · 14 Oct 2026",
+    participants = [{ initials: "C1", name: "Customer 1" }, { initials: "C6", name: "Customer 6" }], 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
@@ -132,7 +132,7 @@ export const MessageThread = forwardRef<HTMLElement, MessageThreadProps>(functio
             {menu && (
               <>
                 <button type="button" className="oc-message-thread__icon-btn" 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>
+                  <svg data-icon="mdi:dots-vertical" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"/></svg>
                 </button>
                 <div className="oc-dropdown-menu" id={`${base}-menu`} {...attrs({ popover: "" })} role="menu">
                   {menu.map((m, i) => "separator" in m
@@ -155,12 +155,12 @@ export const MessageThread = forwardRef<HTMLElement, MessageThreadProps>(functio
             <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>}
+                  {tools.includes("attach") && <button type="button" className="oc-chat-composer__tool" aria-label="Attach a file" onClick={() => onTool?.("attach")}><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.5 6v11.5a4 4 0 0 1-4 4a4 4 0 0 1-4-4V5a2.5 2.5 0 0 1 2.5-2.5A2.5 2.5 0 0 1 13.5 5v10.5a1 1 0 0 1-1 1a1 1 0 0 1-1-1V6H10v9.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5V5a4 4 0 0 0-4-4a4 4 0 0 0-4 4v12.5a5.5 5.5 0 0 0 5.5 5.5a5.5 5.5 0 0 0 5.5-5.5V6z"/></svg></button>}
+                  {tools.includes("emoji") && <button type="button" className="oc-chat-composer__tool" aria-label="Insert emoji" onClick={() => onTool?.("emoji")}><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-12-3.5c0 .8-.7 1.5-1.5 1.5S7 9.3 7 8.5S7.7 7 8.5 7s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 9.3 14 8.5S14.7 7 15.5 7s1.5.7 1.5 1.5m-5 9.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81"/></svg></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>
+              <button type="submit" className="oc-chat-composer__send" aria-label="Send"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2l-15 2z"/></svg></button>
             </div>
           </form>
         )}

package/src/components/MeterRow.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface MeterRowProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  /** 0–100. */
+  percent: number;
+  /** The amount as text after the percentage ("31k / 50k tokens"). */
+  value?: ReactNode;
+  /** When it resets ("Resets in 2 h"). */
+  reset?: ReactNode;
+  /** Color; default from the percentage: warn from 75, critical from 90. */
+  level?: "ok" | "warn" | "critical";
+}
+
+/** Usage line: label, percentage and amount, a colored bar and the reset line (`.oc-meter-row`). */
+export const MeterRow = forwardRef<HTMLDivElement, MeterRowProps>(function MeterRow(
+  { label, percent, value, reset, level, className, style, ...rest },
+  ref,
+) {
+  const pct = Math.max(0, Math.min(100, Math.round(percent)));
+  const tone = level ?? (pct >= 90 ? "critical" : pct >= 75 ? "warn" : "ok");
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-meter-row", className)}
+      data-level={tone === "ok" ? undefined : tone}
+      style={{ ...style, ["--oc-meter" as string]: `${pct}%` } as CSSProperties}
+      {...rest}
+    >
+      <span className="oc-meter-row__label">{label}</span>
+      <span className="oc-meter-row__value"><strong>{pct}%</strong>{value != null && <> · {value}</>}</span>
+      <span className="oc-meter-row__bar" role="meter" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct} aria-label={typeof label === "string" ? label : undefined} />
+      {reset != null && <span className="oc-meter-row__reset">{reset}</span>}
+    </div>
+  );
+});

package/src/components/NameCard.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { forwardRef, useEffect, useRef } from "react";
+import type { DetailsHTMLAttributes, ReactNode } from "react";
+import { bindNameCard } from "../../../ui/src/form-extras.js";
+import { cx } from "../utils";
+import { Icon } from "./Icon";
+
+export interface NameCardProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+  name: string;
+  /** Amount on the right (already formatted, e.g. "€ 1.940,00"). */
+  amount?: ReactNode;
+  /** Quiet extra after the name ("6 articles"). */
+  meta?: ReactNode;
+  /** Buttons on the right (e.g. a soft destructive delete). */
+  actions?: ReactNode;
+  /** Show the rename pencil; onRename gets the new name. */
+  onRename?: (name: string) => void;
+  /** Amount in the primary color (a total). */
+  total?: boolean;
+}
+
+/** `<details class="oc-name-card">`: name, rename pencil, amount and actions in the header; children are the content. */
+export const NameCard = forwardRef<HTMLDetailsElement, NameCardProps>(function NameCard(
+  { name, amount, meta, actions, onRename, total, className, children, ...rest },
+  ref,
+) {
+  const own = useRef<HTMLDetailsElement | null>(null);
+  const renameRef = useRef(onRename);
+  renameRef.current = onRename;
+  useEffect(() => {
+    const el = own.current;
+    if (!el || !onRename) return;
+    bindNameCard(el);
+    const handler = (event: Event) => renameRef.current?.((event as CustomEvent<{ name: string }>).detail.name);
+    el.addEventListener("oc-namecard-rename", handler);
+    return () => el.removeEventListener("oc-namecard-rename", handler);
+  }, [Boolean(onRename)]);
+  return (
+    <details
+      ref={(node) => { own.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }}
+      className={cx("oc-name-card", total && "oc-name-card--total", className)}
+      {...rest}
+    >
+      <summary className="oc-name-card__head">
+        <span className="oc-name-card__title">{name}</span>
+        {onRename && (
+          <button type="button" className="oc-btn oc-btn--plain" data-oc-rename="" aria-label={`Rename ${name}`} title="Rename">
+            <Icon d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z" />
+          </button>
+        )}
+        {meta != null && <span className="oc-name-card__meta">{meta}</span>}
+        {amount != null && <span className="oc-name-card__amount">{amount}</span>}
+        {actions && <span className="oc-name-card__actions">{actions}</span>}
+      </summary>
+      <div className="oc-name-card__body">{children}</div>
+    </details>
+  );
+});

package/src/components/Price.tsx

@@ -0,0 +1,45 @@
+// Same markup as packages/ui/snippets/price.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+/** Format an amount with Intl (locale and currency), or pass a string through. */
+export function formatPrice(amount: number | string, currency = "EUR", locale = "nl-BE"): string {
+  return typeof amount === "number" ? new Intl.NumberFormat(locale, { style: "currency", currency }).format(amount) : amount;
+}
+
+export interface PriceProps extends HTMLAttributes<HTMLDivElement> {
+  amount: number | string;
+  /** Old price (struck through). */
+  old?: number | string;
+  /** Discount badge text ("-20%"). */
+  discount?: ReactNode;
+  /** Quiet note: "excl. VAT". */
+  note?: ReactNode;
+  /** The other amount: "€ 180,29 incl. VAT". */
+  alt?: ReactNode;
+  currency?: string;
+  locale?: string;
+  size?: "sm" | "md" | "lg";
+  sale?: boolean;
+  inline?: boolean;
+  end?: boolean;
+}
+
+/** A price with old price, discount, VAT note and the other amount (`.oc-price`). */
+export const Price = forwardRef<HTMLDivElement, PriceProps>(function Price(
+  { amount, old, discount, note, alt, currency = "EUR", locale = "nl-BE", size = "md", sale, inline, end, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-price", size !== "md" && `oc-price--${size}`, sale && "oc-price--sale", inline && "oc-price--inline", end && "oc-price--end", className)} {...rest}>
+      <div className="oc-price__main">
+        <span className="oc-price__amount">{formatPrice(amount, currency, locale)}</span>
+        {old != null && <s className="oc-price__old">{formatPrice(old, currency, locale)}</s>}
+        {discount != null && <span className="oc-badge oc-badge--destructive">{discount}</span>}
+      </div>
+      {note != null && <span className="oc-price__note">{note}</span>}
+      {alt != null && <span className="oc-price__alt">{alt}</span>}
+    </div>
+  );
+});

package/src/components/Prose.tsx

@@ -35,7 +35,7 @@ const DEMO = (
     </ul>
     <figure>
       <div className="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop" />
-      <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+      <figcaption>Project 1: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
     </figure>
     <h3>From design to installation</h3>
     <ol>
@@ -46,7 +46,7 @@ const DEMO = (
     </ol>
     <blockquote>
       <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-      <footer>— Ann Dewitte, client in Ghent</footer>
+      <footer>— Customer 8, client in Ghent</footer>
     </blockquote>
     <h2>Worktop materials compared</h2>
     <table>
@@ -60,7 +60,7 @@ const DEMO = (
     </table>
     <h3>Sharing your floor plan</h3>
     <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-    <pre><code>{"Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)"}</code></pre>
+    <pre><code>{"Project:   2026-114 Project 1\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)"}</code></pre>
     <hr />
     <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
   </>

package/src/components/Quantity.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+// Same markup as packages/ui/snippets/quantity.html.
+import { forwardRef, useEffect, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { stepQuantity } from "../../../ui/src/form-extras.js";
+import { cx } from "../utils";
+import { Icon } from "./Icon";
+
+export interface QuantityProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: "sm" | "md";
+  /** Accessible name of the field (also used for the buttons). Default "Quantity". */
+  label?: string;
+}
+
+/** Minus, number and plus in one frame (`.oc-quantity`). */
+export const Quantity = forwardRef<HTMLInputElement, QuantityProps>(function Quantity(
+  { value, defaultValue = 1, onChange, min = 0, max, step = 1, size = "md", label = "Quantity", disabled, className, ...rest },
+  ref,
+) {
+  const [current, setCurrent] = useState(value ?? defaultValue);
+  useEffect(() => { if (value !== undefined) setCurrent(value); }, [value]);
+  const limits = { min, max: max ?? Infinity, step };
+  const set = (next: number) => { setCurrent(next); onChange?.(next); };
+  return (
+    <div className={cx("oc-quantity", size === "sm" && "oc-quantity--sm", className)}>
+      <button className="oc-quantity__step" type="button" aria-label={`Decrease ${label.toLowerCase()}`} disabled={disabled || current <= min} onClick={() => set(stepQuantity(current, -1, limits))}>
+        <Icon d="M19 13H5v-2h14z" />
+      </button>
+      <input
+        ref={ref}
+        className="oc-quantity__input"
+        type="number"
+        inputMode="numeric"
+        value={Number.isFinite(current) ? current : ""}
+        min={min}
+        max={max}
+        step={step}
+        aria-label={label}
+        disabled={disabled}
+        onChange={(event) => set(event.target.value === "" ? NaN : Number(event.target.value))}
+        {...rest}
+      />
+      <button className="oc-quantity__step" type="button" aria-label={`Increase ${label.toLowerCase()}`} disabled={disabled || (max != null && current >= max)} onClick={() => set(stepQuantity(current, 1, limits))}>
+        <Icon d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
+      </button>
+    </div>
+  );
+});

package/src/components/Rating.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+// Same markup as packages/ui/snippets/rating.html.
+import { forwardRef, useEffect, useId, useState } from "react";
+import type { CSSProperties, HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface RatingProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The score, e.g. 4.5. */
+  value: number;
+  /** Number of stars. Default 5. */
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  /** Accessible text; default "4.5 out of 5". */
+  label?: string;
+}
+
+/** Stars of a score (`.oc-rating`), halves and decimals included. */
+export const Rating = forwardRef<HTMLSpanElement, RatingProps>(function Rating(
+  { value, max = 5, size = "md", label, className, style, ...rest },
+  ref,
+) {
+  const score = Math.max(0, Math.min(max, value));
+  return (
+    <span
+      ref={ref}
+      className={cx("oc-rating", size !== "md" && `oc-rating--${size}`, className)}
+      style={{ ...style, ["--oc-rating" as string]: String(score), ...(max !== 5 ? { ["--oc-rating-max" as string]: String(max) } : {}) } as CSSProperties}
+      role="img"
+      aria-label={label ?? `${score} out of ${max}`}
+      {...rest}
+    />
+  );
+});
+
+export interface RatingInputProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue"> {
+  /** Radio name (form value 1–5). Default: a generated name. */
+  name?: string;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  legend?: string;
+  /** Text per star; default "1 star", "2 stars" … */
+  starLabel?: (n: number) => string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+}
+
+/** Five radio buttons drawn as stars (`.oc-rating-input`), CSS hover preview. */
+export const RatingInput = forwardRef<HTMLFieldSetElement, RatingInputProps>(function RatingInput(
+  { name, value, defaultValue, onChange, legend = "Rating", starLabel = (n) => (n === 1 ? "1 star" : `${n} stars`), size = "md", disabled, className, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const group = name ?? `oc-rating-${auto.replace(/:/g, "")}`;
+  const [current, setCurrent] = useState(value ?? defaultValue ?? 0);
+  useEffect(() => { if (value !== undefined) setCurrent(value); }, [value]);
+  return (
+    <fieldset ref={ref} className={cx("oc-rating-input", size !== "md" && `oc-rating-input--${size}`, className)} disabled={disabled} {...rest}>
+      <legend>{legend}</legend>
+      {[1, 2, 3, 4, 5].map((n) => (
+        <label key={n}>
+          <input type="radio" name={group} value={n} checked={current === n} onChange={() => { setCurrent(n); onChange?.(n); }} />
+          <span>{starLabel(n)}</span>
+        </label>
+      ))}
+    </fieldset>
+  );
+});

package/src/components/Ribbon.tsx

@@ -0,0 +1,30 @@
+// Same markup as packages/ui/snippets/ribbon.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type RibbonCorner = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+
+export interface RibbonProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Corner of the parent box (default top-end). */
+  corner?: RibbonCorner;
+  tone?: "primary" | "success" | "warning" | "destructive" | "muted";
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+}
+
+/** Diagonal band across a corner of its parent (`.oc-ribbon`): Paid, New, Sale. */
+export const Ribbon = forwardRef<HTMLSpanElement, RibbonProps>(function Ribbon(
+  { corner = "top-end", tone = "primary", size = "md", className, children, ...rest },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      className={cx("oc-ribbon", corner !== "top-end" && `oc-ribbon--${corner}`, tone !== "primary" && `oc-ribbon--${tone}`, size !== "md" && `oc-ribbon--${size}`, className)}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+});

package/src/components/SpecList.tsx

@@ -0,0 +1,36 @@
+// Same markup as packages/ui/snippets/spec-list.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface SpecGroup {
+  title: ReactNode;
+  icon?: ReactNode;
+  rows: { label: ReactNode; value: ReactNode; note?: ReactNode }[];
+}
+
+export interface SpecListProps extends HTMLAttributes<HTMLDivElement> {
+  groups: SpecGroup[];
+  stack?: boolean;
+}
+
+/** Technical specifications in named groups (`.oc-spec-list`). */
+export const SpecList = forwardRef<HTMLDivElement, SpecListProps>(function SpecList(
+  { groups, stack, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-spec-list", stack && "oc-spec-list--stack", className)} {...rest}>
+      {groups.map((group, g) => (
+        <section key={g} className="oc-spec-group">
+          <h3 className="oc-spec-group__title">{group.icon}{group.title}</h3>
+          <dl className="oc-spec-group__rows">
+            {group.rows.map((row, r) => (
+              <div key={r} className="oc-spec-row"><dt>{row.label}</dt><dd>{row.value}{row.note != null && <small>{row.note}</small>}</dd></div>
+            ))}
+          </dl>
+        </section>
+      ))}
+    </div>
+  );
+});

package/src/components/Stock.tsx

@@ -0,0 +1,28 @@
+// Same markup as packages/ui/snippets/stock.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface StockProps extends HTMLAttributes<HTMLSpanElement> {
+  level?: "ok" | "low" | "out" | "order";
+  badge?: boolean;
+  /** The text; default per level ("In stock", "Low stock", "Out of stock", "On order"). */
+  children?: ReactNode;
+  /** A quiet extra after the text. */
+  note?: ReactNode;
+}
+
+const STOCK_TEXT = { ok: "In stock", low: "Low stock", out: "Out of stock", order: "On order" } as const;
+
+/** Stock status with a colored dot (`.oc-stock`). */
+export const Stock = forwardRef<HTMLSpanElement, StockProps>(function Stock(
+  { level = "ok", badge, note, children, className, ...rest },
+  ref,
+) {
+  return (
+    <span ref={ref} className={cx("oc-stock", badge && "oc-stock--badge", className)} data-level={level === "ok" ? undefined : level} {...rest}>
+      {children ?? STOCK_TEXT[level]}
+      {note != null && <span className="oc-stock__note"> · {note}</span>}
+    </span>
+  );
+});

package/src/components/User.tsx

@@ -1,13 +1,13 @@
 import { forwardRef } from "react";
 import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
+import { cx, initialsOf } from "../utils";
 import { Avatar } from "./Avatar";
 import type { AvatarSize } from "./Avatar";
 
 export interface UserProps extends HTMLAttributes<HTMLDivElement> {
   name: ReactNode;
   email?: ReactNode;
-  /** Initials shown in the avatar. */
+  /** Initials shown in the avatar (default: from `name` when it is a string). */
   initials?: string;
   /** Avatar image URL (wins over initials). */
   avatarSrc?: string;
@@ -21,7 +21,7 @@ export const User = forwardRef<HTMLDivElement, UserProps>(function User(
 ) {
   return (
     <div ref={ref} className={cx("oc-user", className)} {...rest}>
-      <Avatar size={avatarSize} src={avatarSrc}>{initials}</Avatar>
+      <Avatar size={avatarSize} src={avatarSrc}>{initials ?? initialsOf(name)}</Avatar>
       <span className="oc-user-text">
         <span className="oc-user-name">{name}</span>
         {email != null && <span className="oc-user-email">{email}</span>}