@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,95 @@
+// File: packages/react/src/components/ConfirmDialog.tsx
+// Map: ConfirmDialog = dialog.oc-modal -> confirm content (close X, icon ring, title) -> form (message, typed field, footer: discard, cancel, confirm)
+// A variant of AlertDialog with `.oc-alert-dialog--confirm`. The form is submitted with the confirm button;
+// with `confirmWord` the browser blocks the submit until the typed value matches (pattern + required).
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, FormEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+import type { AlertDialogType } from "./AlertDialog";
+
+const GLYPHS: Record<AlertDialogType, string> = { success: "✓", error: "×", warning: "!", info: "i", question: "?" };
+
+export interface ConfirmDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Icon color; default `error` (destructive confirm). */
+  type?: AlertDialogType;
+  icon?: ReactNode;
+  title: ReactNode;
+  /** Message: pass as `message` or as children. */
+  message?: ReactNode;
+  confirmLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  /** Optional third action at the footer start ("Don't save"). */
+  discardLabel?: ReactNode;
+  /** The user must type this word before confirming, e.g. "DELETE". */
+  confirmWord?: string;
+  /** Label above the typed field; defaults to "Type WORD to confirm". */
+  confirmWordLabel?: ReactNode;
+  closeLabel?: string;
+  onConfirm?: () => void;
+  onDiscard?: () => void;
+}
+
+/** Confirm variant of the alert dialog (`.oc-alert-dialog--confirm`). */
+export const ConfirmDialog = forwardRef<HTMLDialogElement, ConfirmDialogProps>(function ConfirmDialog(
+  {
+    open, defaultOpen, onOpenChange, type = "error", icon, title, message, children,
+    confirmLabel = "Confirm", cancelLabel = "Cancel", discardLabel, confirmWord, confirmWordLabel,
+    closeLabel = "Close", onConfirm, onDiscard, className, ...rest
+  },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const id = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+
+  // We close through state (not method="dialog"), so React stays the source of truth.
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onConfirm?.();
+    dlg.close();
+  };
+  const destructive = type === "error";
+
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-modal", className)}
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-text`}
+      {...attrs({ closedby: "any" })}
+      {...rest}
+      onClose={dlg.onClose}
+    >
+      <div className={`oc-modal-content oc-alert-dialog oc-alert-dialog--${type} oc-alert-dialog--confirm`}>
+        <button className="oc-alert-dialog-close" type="button" aria-label={closeLabel} onClick={dlg.close}>×</button>
+        <span className="oc-alert-dialog-icon" aria-hidden="true">{icon ?? GLYPHS[type]}</span>
+        <h2 className="oc-modal-title" id={`${id}-title`}>{title}</h2>
+        <form className="oc-alert-dialog-form" onSubmit={submit}>
+          <div className="oc-modal-body" id={`${id}-text`}>{message ?? children}</div>
+          {confirmWord && (
+            <label className="oc-alert-dialog-typed">
+              <span>{confirmWordLabel ?? <>Type <code>{confirmWord}</code> to confirm</>}</span>
+              <input className="oc-input" name="confirm" pattern={confirmWord} required autoComplete="off" />
+            </label>
+          )}
+          <div className="oc-modal-footer">
+            {discardLabel != null && (
+              <button className="oc-btn oc-btn--ghost oc-alert-dialog-discard" type="button" onClick={() => { onDiscard?.(); dlg.close(); }}>
+                {discardLabel}
+              </button>
+            )}
+            <button className="oc-btn oc-btn--outline" type="button" onClick={dlg.close}>{cancelLabel}</button>
+            <button className={cx("oc-btn", destructive && "oc-btn--destructive", "oc-alert-dialog-confirm")} type="submit" value="confirm">
+              {confirmLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  );
+});

package/src/components/CookieConsent.tsx

@@ -0,0 +1,137 @@
+// File: packages/react/src/components/CookieConsent.tsx
+// Map: types + demo categories -> storage helpers -> CookieConsent (reopen button, popover: title, text, categories, actions) -> effect
+// Same markup as packages/ui/snippets/cookie-consent.html on popover="manual". The effect does what the snippet script does:
+// show the banner when no choice is stored, save the choice in localStorage and fire "oc-consent" on document.
+"use client";
+
+import { forwardRef, useEffect, useRef } from "react";
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, callAll, cx } from "../utils";
+import { useMergedRef } from "../hooks";
+
+export interface CookieCategory {
+  /** Input name and key in the stored choice (e.g. "statistics"). */
+  name: string;
+  label: string;
+  text?: ReactNode;
+  /** Always on (checked + disabled), e.g. necessary cookies. */
+  required?: boolean;
+}
+
+/** Stored choice: `{ necessary: true, statistics, marketing, date }`. */
+export type ConsentChoice = { necessary: boolean; date: string } & Record<string, boolean | string>;
+
+export interface CookieConsentProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  categories?: CookieCategory[];
+  title?: ReactNode;
+  /** Replaces the whole text paragraph (put your policy link in it). */
+  text?: ReactNode;
+  policyHref?: string;
+  customizeLabel?: ReactNode;
+  necessaryLabel?: ReactNode;
+  selectedLabel?: ReactNode;
+  allLabel?: ReactNode;
+  /** Text of the "Cookie settings" button that opens the banner again; null hides it. */
+  openLabel?: ReactNode;
+  /** Full-width bar at the bottom (`--bar`). */
+  bar?: boolean;
+  /** Never open by itself (`data-oc-consent-manual`). */
+  manual?: boolean;
+  storageKey?: string;
+  /** Called with the stored choice on load and after every choice. */
+  onConsent?: (choice: ConsentChoice) => void;
+}
+
+const DEMO: CookieCategory[] = [
+  { name: "necessary", label: "Necessary", text: "Session, security and your cookie choice. Always on.", required: true },
+  { name: "statistics", label: "Statistics", text: "Anonymous visit counts." },
+  { name: "marketing", label: "Marketing", text: "Embedded videos and ads that track you." },
+];
+
+const read = (key: string): ConsentChoice | null => {
+  try { return JSON.parse(localStorage.getItem(key) ?? "null"); } catch { return null; }
+};
+
+/** `aside.oc-cookie-consent[popover=manual]` plus an optional `[data-oc-consent-open]` button. */
+export const CookieConsent = forwardRef<HTMLElement, CookieConsentProps>(function CookieConsent(
+  {
+    categories = DEMO, title = "We use cookies", text, policyHref = "#cookie-policy", customizeLabel = "Customize",
+    necessaryLabel = "Only necessary", selectedLabel = "Save choice", allLabel = "Accept all", openLabel = "Cookie settings",
+    bar, manual, storageKey = "oc-consent", onConsent, id = "oc-cookie-consent", className, onClick, ...rest
+  },
+  forwardedRef,
+) {
+  const box = useRef<HTMLElement>(null);
+  const ref = useMergedRef(box, forwardedRef);
+  const cb = useRef(onConsent);
+  cb.current = onConsent;
+  const inputs = () => Array.from(box.current?.querySelectorAll<HTMLInputElement>("input[name]") ?? []);
+  const tell = (choice: ConsentChoice) => {
+    document.dispatchEvent(new CustomEvent("oc-consent", { detail: choice }));
+    cb.current?.(choice);
+  };
+
+  // On load: report a stored choice or show the banner; any [data-oc-consent-open] opens it again.
+  useEffect(() => {
+    const stored = read(storageKey);
+    if (stored) tell(stored);
+    else if (!manual) box.current?.showPopover?.();
+    const reopen = (e: Event) => {
+      if (!(e.target as Element | null)?.closest?.("[data-oc-consent-open]")) return;
+      const choice = read(storageKey);
+      for (const i of inputs()) if (!i.disabled) i.checked = !!choice?.[i.name];
+      box.current?.showPopover?.();
+    };
+    document.addEventListener("click", reopen);
+    return () => document.removeEventListener("click", reopen);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storageKey, manual]);
+
+  const choose = (e: MouseEvent<HTMLElement>) => {
+    const mode = (e.target as HTMLElement).closest<HTMLElement>("[data-oc-consent]")?.dataset.ocConsent;
+    if (!mode) return;
+    const choice: ConsentChoice = { necessary: true, date: new Date().toISOString() };
+    for (const i of inputs()) if (!i.disabled) choice[i.name] = mode === "all" || (mode === "selected" && i.checked);
+    try { localStorage.setItem(storageKey, JSON.stringify(choice)); } catch { /* storage blocked */ }
+    box.current?.hidePopover?.();
+    tell(choice);
+  };
+
+  return (
+    <>
+      {openLabel != null && <button type="button" className="oc-btn oc-btn--outline oc-btn--sm" data-oc-consent-open="">{openLabel}</button>}
+      <aside
+        ref={ref}
+        className={cx("oc-cookie-consent", bar && "oc-cookie-consent--bar", className)}
+        id={id}
+        {...attrs({ popover: "manual", "data-oc-consent-manual": manual ? "" : undefined })}
+        aria-labelledby={`${id}-title`}
+        onClick={callAll(choose, onClick)}
+        {...rest}
+      >
+        <h2 className="oc-cookie-consent__title" id={`${id}-title`}><span aria-hidden="true">&#127850;</span> {title}</h2>
+        <p className="oc-cookie-consent__text">
+          {text ?? <>Necessary cookies keep the site working. With your permission we also measure visits to improve the site. Read the <a href={policyHref}>cookie policy</a>.</>}
+        </p>
+        <details className="oc-cookie-consent__prefs">
+          <summary>{customizeLabel}</summary>
+          {categories.map((c) => (
+            <div key={c.name} className="oc-cookie-consent__category">
+              <span className="oc-cookie-consent__category-name">{c.label}</span>
+              {c.text != null && <span className="oc-cookie-consent__category-text">{c.text}</span>}
+              <label className="oc-switch">
+                <input type="checkbox" role="switch" name={c.name} defaultChecked={c.required} disabled={c.required} aria-label={`${c.label} cookies`} />
+                <span className="oc-switch-track" />
+              </label>
+            </div>
+          ))}
+        </details>
+        <div className="oc-cookie-consent__actions">
+          <button type="button" className="oc-btn oc-btn--outline" data-oc-consent="necessary">{necessaryLabel}</button>
+          <button type="button" className="oc-btn oc-btn--secondary" data-oc-consent="selected">{selectedLabel}</button>
+          <button type="button" className="oc-btn" data-oc-consent="all">{allLabel}</button>
+        </div>
+      </aside>
+    </>
+  );
+});

package/src/components/CopyField.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { forwardRef, useEffect, useRef, useState } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface CopyFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+  value: string;
+  /** Accessible name of the read-only input. */
+  label?: string;
+  buttonLabel?: string;
+  /** How long the `is-copied` feedback stays (ms). */
+  feedbackMs?: number;
+  onCopy?: (value: string) => void;
+}
+
+/** Read-only monospace value with a copy button (`is-copied` feedback for 2s). */
+export const CopyField = forwardRef<HTMLDivElement, CopyFieldProps>(function CopyField(
+  { value, label = "Value", buttonLabel = "Copy", feedbackMs = 2000, onCopy, className, ...rest },
+  ref,
+) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    onCopy?.(value);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), feedbackMs);
+  };
+
+  return (
+    <div ref={ref} className={cx("oc-copy-field", className)} {...rest}>
+      <input className="oc-copy-field-value" type="text" readOnly value={value} aria-label={label} />
+      <button className={cx("oc-copy-field-button", copied && "is-copied")} type="button" onClick={copy}>{buttonLabel}</button>
+    </div>
+  );
+});

package/src/components/Counter.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface CounterProps extends HTMLAttributes<HTMLElement> {
+  /** Target number (`--oc-counter-to`). */
+  to: number;
+  /** Text after the number, e.g. `+` or `%` (`--oc-counter-suffix`). */
+  suffix?: string;
+  /** Start animating when scrolled into view (default true). */
+  onView?: boolean;
+}
+
+/** `<strong class="oc-counter oc-counter--on-view">`: animated number, CSS only. */
+export const Counter = forwardRef<HTMLElement, CounterProps>(function Counter(
+  { to, suffix, onView = true, className, style, ...rest },
+  ref,
+) {
+  const vars = { "--oc-counter-to": to, ...(suffix ? { "--oc-counter-suffix": `'${suffix}'` } : {}) } as CSSProperties;
+  return <strong ref={ref} className={cx("oc-counter", onView && "oc-counter--on-view", className)} style={{ ...vars, ...style }} {...rest} />;
+});

package/src/components/DataTable.tsx

@@ -0,0 +1,201 @@
+// File: packages/react/src/components/DataTable.tsx
+// Map: column and row types -> shell markup -> bind the list-table script on mount
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import type { ReactNode } from "react";
+import { bindDataTable } from "../../../ui/src/data-table.js";
+
+export interface DataTableColumn {
+  key: string;
+  header: string;
+  /** Right aligned, sorted as a number (5,15 and 5.15). */
+  numeric?: boolean;
+  /** Click the header to sort. Default true. */
+  sortable?: boolean;
+  /** Show the column in the Columns menu. Default true. */
+  hideable?: boolean;
+  /** Start hidden until the user checks it in the Columns menu. */
+  defaultHidden?: boolean;
+}
+
+export interface DataTableRow {
+  key: string;
+  status?: "active" | "deleted" | "archived";
+  cells: Record<string, string>;
+  /** Sort and export value when it differs from the visible text. */
+  values?: Record<string, string>;
+  href?: string;
+}
+
+export interface DataTableProps {
+  id?: string;
+  title?: string;
+  columns: DataTableColumn[];
+  rows: DataTableRow[];
+  pageSize?: number;
+  searchPlaceholder?: string;
+  selectable?: boolean;
+  draggable?: boolean;
+  /** Trash and archive pills. Default true. */
+  filters?: boolean;
+  /** Demo mode: trash, restore, duplicate and delete change the rows in the page. */
+  live?: boolean;
+  /** Page actions on the right of the toolbar (New article, …). */
+  actions?: ReactNode;
+  onBulk?: (action: string, keys: string[]) => void;
+}
+
+const PAGE_SIZES = [10, 15, 20, 50, 100];
+
+/** Korrekt / OmniaDesk list table. The script in @birdycom/omniaui/data-table.js does the work. */
+export function DataTable({
+  id,
+  title = "List",
+  columns,
+  rows,
+  pageSize = 15,
+  searchPlaceholder = "Search...",
+  selectable = true,
+  draggable = true,
+  filters = true,
+  live = false,
+  actions,
+  onBulk,
+}: DataTableProps) {
+  const autoId = useId().replace(/:/g, "");
+  const tableId = id || `oc-dt-${autoId}`;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const onBulkRef = useRef(onBulk);
+  onBulkRef.current = onBulk;
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    bindDataTable(root);
+    const onBulkEvent = (event: Event) => {
+      const detail = (event as CustomEvent<{ action: string; keys: string[] }>).detail;
+      onBulkRef.current?.(detail.action, detail.keys);
+    };
+    root.addEventListener("oc-datatable-bulk", onBulkEvent);
+    return () => root.removeEventListener("oc-datatable-bulk", onBulkEvent);
+  }, [columns, rows]);
+
+  const lead = (selectable ? 1 : 0) + (draggable ? 1 : 0);
+  const sizes = [...new Set([...PAGE_SIZES, pageSize])].sort((a, b) => a - b);
+
+  return (
+    <div
+      ref={rootRef}
+      className="oc-data-table oc-column-menu-scope"
+      id={tableId}
+      data-page-size={pageSize}
+      data-oc-live={live ? "true" : undefined}
+    >
+      <div className="oc-data-table-toolbar">
+        <div className="oc-data-table-heading">
+          <span className="oc-data-table-title">{title}</span>
+          <button className="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" popoverTarget={`${tableId}-menu`} aria-label="Table actions">⚙</button>
+          <div className="oc-dropdown-menu" id={`${tableId}-menu`} popover="auto">
+            <button className="oc-dropdown-item" type="button" data-oc-export="">Export CSV</button>
+            <button className="oc-dropdown-item" type="button" data-oc-import="">Import CSV</button>
+            <input className="oc-data-table-file" type="file" accept=".csv,text/csv" data-oc-file="" />
+            <div className="oc-dropdown-separator" />
+            <button className="oc-dropdown-item" type="button" data-oc-density="comfortable">Comfortable rows</button>
+            <button className="oc-dropdown-item" type="button" data-oc-density="compact">Compact rows</button>
+            <button className="oc-dropdown-item" type="button" data-oc-reset-widths="">Reset column widths</button>
+          </div>
+        </div>
+        <input className="oc-input oc-data-table-search" type="search" placeholder={searchPlaceholder} aria-label={`Search ${title}`} />
+        {filters && (
+          <div className="oc-filter-pills" role="group" aria-label="Trash filter">
+            <button className="oc-filter-pill" type="button" data-oc-filter="active" aria-current="true">Active only</button>
+            <button className="oc-filter-pill" type="button" data-oc-filter="all">Including trash</button>
+            <button className="oc-filter-pill" type="button" data-oc-filter="deleted">Trash only</button>
+            <button className="oc-filter-pill" type="button" data-oc-filter="archived">Archive only</button>
+          </div>
+        )}
+        <div className="oc-data-table-view" role="group" aria-label="View">
+          <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="table" aria-pressed="true">Table</button>
+          <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="grid">Cards</button>
+        </div>
+        {actions && <div className="oc-data-table-actions">{actions}</div>}
+        <p className="oc-data-table-sort-summary" data-oc-sort-summary="" role="status" />
+      </div>
+      <div className="oc-table-toolbar">
+        <span className="oc-table-toolbar-spacer" />
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" popoverTarget={`${tableId}-columns`}>Columns</button>
+      </div>
+      <div className="oc-column-menu" id={`${tableId}-columns`} popover="auto">
+        <p className="oc-column-menu-title">Visible columns</p>
+        <form className="oc-column-menu-list">
+          {columns.map((col, index) => col.hideable === false ? null : (
+            <label className="oc-column-menu-item" key={col.key}>
+              <input type="checkbox" data-col={lead + index + 1} defaultChecked={!col.defaultHidden} /> {col.header}
+            </label>
+          ))}
+        </form>
+      </div>
+      <div className="oc-data-table-bulk" hidden>
+        <span data-oc-selected-count="">0 selected</span>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="export">Export selection</button>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="duplicate">Duplicate</button>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="archive">Move to trash</button>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="restore">Restore</button>
+        <button className="oc-btn oc-btn--destructive oc-btn--sm" type="button" data-oc-bulk="delete">Delete permanently</button>
+        <button className="oc-btn oc-btn--ghost oc-btn--sm" type="button" data-oc-bulk="clear">Clear</button>
+      </div>
+      <div className="oc-data-table-frame">
+        <div className="oc-data-table-scroll">
+          <table className="oc-table oc-data-table-table">
+            <thead>
+              <tr>
+                {selectable && <th data-oc-col="select"><input className="oc-checkbox" type="checkbox" data-oc-select-all="" aria-label="Select all" /></th>}
+                {draggable && <th data-oc-col="order"><span className="oc-visually-hidden">Order</span></th>}
+                {columns.map((col) => (
+                  <th key={col.key} data-oc-col={col.key} data-oc-sort={col.numeric ? "numeric" : "text"} data-numeric={col.numeric ? "" : undefined}>
+                    <span className="oc-data-table-th">
+                      {col.sortable === false ? col.header : <button className="oc-table-sort" type="button">{col.header}</button>}
+                      <span className="oc-data-table-resize" role="separator" aria-orientation="vertical" aria-label={`Resize ${col.header}`} />
+                    </span>
+                  </th>
+                ))}
+                <th data-oc-col="actions"><span className="oc-visually-hidden">Actions</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={row.key} data-oc-row="" data-oc-key={row.key} data-oc-status={row.status || "active"} data-oc-href={row.href}>
+                  {selectable && (
+                    <td data-oc-col="select"><input className="oc-checkbox" type="checkbox" data-oc-select="" aria-label={`Select ${row.cells.name || row.key}`} /></td>
+                  )}
+                  {draggable && (
+                    <td data-oc-col="order" className="oc-sortable-row-grip-cell">
+                      <button className="oc-sortable-row-grip" type="button" aria-label={`Move ${row.cells.name || row.key}`} />
+                    </td>
+                  )}
+                  {columns.map((col) => (
+                    <td key={col.key} data-oc-col={col.key} data-numeric={col.numeric ? "" : undefined} data-oc-value={row.values?.[col.key]}>
+                      {row.cells[col.key] ?? ""}
+                    </td>
+                  ))}
+                  <td data-oc-col="actions" className="oc-table-actions"><button className="oc-table-row-action" type="button">Edit</button></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="oc-data-table-empty" hidden>No results</p>
+      </div>
+      <div className="oc-data-table-footer">
+        <p className="oc-data-table-summary" data-oc-summary="" />
+        <label className="oc-data-table-per-page">Rows per page
+          <select className="oc-select" data-oc-page-size="" aria-label="Rows per page" defaultValue={String(pageSize)}>
+            {sizes.map((n) => <option key={n} value={n}>{n}</option>)}
+          </select>
+        </label>
+        <nav className="oc-data-table-pager" data-oc-pager="" aria-label="Pagination" />
+      </div>
+    </div>
+  );
+}

package/src/components/DecimalInput.tsx

@@ -0,0 +1,87 @@
+// File: packages/react/src/components/DecimalInput.tsx
+// Map: helpers (locale separators, parse, format) -> component (text field, optional unit frame)
+// Same markup as packages/ui/snippets/decimal-input.html. Formats on blur with Intl.NumberFormat.
+"use client";
+
+import { forwardRef, useEffect, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface DecimalInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "type"> {
+  /** The number; null = empty. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onValueChange?: (value: number | null) => void;
+  /** BCP 47 locale for separators, e.g. "nl-BE" (1.234,56) or "en-US" (1,234.56). */
+  locale?: string;
+  /** Fixed number of decimals shown after blur. */
+  decimals?: number;
+  /** Unit text inside the frame (m², kg). */
+  unit?: string;
+  /** Left-aligned digits. */
+  alignStart?: boolean;
+  error?: boolean;
+}
+
+/** Group and decimal separator of a locale, e.g. nl-BE -> { group: ".", decimal: "," }. */
+function separators(locale: string) {
+  const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+  return { group: parts.find((p) => p.type === "group")?.value ?? ",", decimal: parts.find((p) => p.type === "decimal")?.value ?? "." };
+}
+
+/** "1.234,56" (nl-BE) -> 1234.56. Returns null for empty or unreadable text. */
+export function parseDecimal(text: string, locale = "nl-BE"): number | null {
+  const { group, decimal } = separators(locale);
+  const clean = text.trim().split(group).join("").replace(decimal, ".").replace(/\s/g, "");
+  if (!clean) return null;
+  const n = Number(clean);
+  return Number.isFinite(n) ? n : null;
+}
+
+/** 1234.56 -> "1.234,56" (nl-BE, 2 decimals). */
+export function formatDecimal(n: number | null | undefined, locale = "nl-BE", decimals = 2): string {
+  if (n == null) return "";
+  return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(n);
+}
+
+/** `.oc-decimal-input`: free typing, formatted on blur, value reported as a number. */
+export const DecimalInput = forwardRef<HTMLInputElement, DecimalInputProps>(function DecimalInput(
+  { value, defaultValue, onValueChange, locale = "nl-BE", decimals = 2, unit, alignStart, error, className, onBlur, onFocus, ...rest },
+  ref,
+) {
+  const [text, setText] = useState(() => formatDecimal(value ?? defaultValue, locale, decimals));
+  const [focused, setFocused] = useState(false);
+
+  // Controlled: show a new outside value, but never while the user is typing.
+  useEffect(() => {
+    if (value !== undefined && !focused) setText(formatDecimal(value, locale, decimals));
+  }, [value, locale, decimals, focused]);
+
+  const input = (
+    <input
+      ref={ref}
+      className={cx("oc-input", "oc-decimal-input", alignStart && "oc-decimal-input--start", className)}
+      type="text"
+      inputMode="decimal"
+      aria-invalid={error ? true : undefined}
+      value={text}
+      onFocus={(e) => { setFocused(true); onFocus?.(e); }}
+      onChange={(e) => { setText(e.target.value); onValueChange?.(parseDecimal(e.target.value, locale)); }}
+      onBlur={(e) => {
+        setFocused(false);
+        const n = parseDecimal(text, locale);
+        if (n != null || !text.trim()) setText(formatDecimal(n, locale, decimals));
+        onBlur?.(e);
+      }}
+      {...rest}
+    />
+  );
+
+  if (!unit) return input;
+  return (
+    <div className="oc-decimal-field">
+      {input}
+      <span className="oc-decimal-field-unit">{unit}</span>
+    </div>
+  );
+});

package/src/components/DefinitionList.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface DefinitionItem {
+  term: ReactNode;
+  detail: ReactNode;
+}
+
+export interface DefinitionListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  items: DefinitionItem[];
+  /** Optional footer (actions). */
+  footer?: ReactNode;
+}
+
+/** `<div class="oc-dl-panel" role="region">` with a `dl` of label / value rows. */
+export const DefinitionList = forwardRef<HTMLDivElement, DefinitionListProps>(function DefinitionList(
+  { title, description, items, footer, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-dl-panel", className)} role="region" {...rest}>
+      {title != null && <h3 className="oc-dl-title">{title}</h3>}
+      {description != null && <p className="oc-dl-description">{description}</p>}
+      <dl className="oc-dl">
+        {items.map((item, i) => (
+          <div className="oc-dl-row" key={i}>
+            <dt className="oc-dl-term">{item.term}</dt>
+            <dd className="oc-dl-detail">{item.detail}</dd>
+          </div>
+        ))}
+      </dl>
+      {footer != null && <div className="oc-dl-footer">{footer}</div>}
+    </div>
+  );
+});