@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/components/ChartLine.tsx

@@ -1,119 +1,119 @@
-// File: packages/react/src/components/ChartLine.tsx
-// Map: types + demo data -> geometry (smooth path, area, percentages) -> ChartLine (head -> y axis -> plot: svg series + hover columns -> x axis -> legend)
-// Same markup as packages/ui/snippets/chart-line.html. The paths are computed here; tooltips open on :hover / :focus-visible (CSS only).
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ChartLineSeries {
-  name: string;
-  values: number[];
-  dashed?: boolean;
-}
-
-export interface ChartLineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title?: ReactNode;
-  sub?: ReactNode;
-  /** Big number in the head (`oc-chart-line__value`). */
-  value?: ReactNode;
-  series?: ChartLineSeries[];
-  /** One label per point, used in the tooltips (e.g. "January"). */
-  labels?: string[];
-  /** Short x axis labels (default: labels; "Jan"… for the demo months). */
-  xLabels?: string[];
-  /** Top of the y axis (default: a round number above the highest value). */
-  max?: number;
-  /** Gridline rows (default 4). */
-  rows?: number;
-  /** "area" fills the series, "spark" hides axes and grid. */
-  variant?: "line" | "area" | "spark";
-  /** Dots always visible. */
-  dots?: boolean;
-  /** aria-label of the point columns. */
-  label?: string;
-  format?: (value: number) => string;
-}
-
-const DEMO: ChartLineSeries[] = [
-  { name: "Desktop", values: [186, 305, 237, 73, 209, 214] },
-  { name: "Mobile", values: [80, 200, 120, 190, 130, 140] },
-];
-const MONTHS = ["January", "February", "March", "April", "May", "June"];
-const SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
-
-/** Number with at most 2 decimals and no trailing zeros ("75", "37.5", "4.69"). */
-const n2 = (n: number) => String(parseFloat(n.toFixed(2)));
-/** Round axis maximum: step = max / rows rounded up to 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 or 10 x 10^k. */
-export function niceMax(value: number, rows = 4) {
-  if (value <= 0) return rows;
-  const raw = value / rows, pow = 10 ** Math.floor(Math.log10(raw));
-  return ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((s) => s * pow >= raw) ?? 10) * pow * rows;
-}
-/** Smooth path through the points (x 0-100, y = 100 - value / max * 100); control points stay between their two ends. */
-export function chartLinePath(values: number[], max: number) {
-  const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * 100 : 50, 100 - (v / max) * 100]);
-  if (!pts.length) return "";
-  const clamp = (v: number, a: number, b: number) => Math.min(Math.max(v, Math.min(a, b)), Math.max(a, b));
-  let d = `M${n2(pts[0][0])} ${n2(pts[0][1])}`;
-  for (let i = 0; i < pts.length - 1; i++) {
-    const p0 = pts[i - 1] ?? pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] ?? p2;
-    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, clamp(p1[1] + (p2[1] - p0[1]) / 6, p1[1], p2[1])];
-    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, clamp(p2[1] - (p3[1] - p1[1]) / 6, p1[1], p2[1])];
-    d += ` C${n2(c1[0])} ${n2(c1[1])} ${n2(c2[0])} ${n2(c2[1])} ${n2(p2[0])} ${n2(p2[1])}`;
-  }
-  return d;
-}
-
-/** `figure.oc-chart-line`: line / area chart in inline SVG with axes, legend and tooltips. */
-export const ChartLine = forwardRef<HTMLElement, ChartLineProps>(function ChartLine(
-  { title = "Visitors", sub = "January – June 2026", value, series = DEMO, labels: labelsProp, xLabels, max, rows = 4, variant = "line", dots = true,
-    label = "Visitors per month", format = String, className, ...rest },
-  ref,
-) {
-  const top = max ?? niceMax(Math.max(0, ...series.flatMap((s) => s.values)), rows);
-  const count = Math.max(0, ...series.map((s) => s.values.length));
-  const labels = labelsProp ?? MONTHS;
-  const axis = xLabels ?? labelsProp ?? SHORT;
-  return (
-    <figure ref={ref} className={cx("oc-chart-line", variant !== "line" && `oc-chart-line--${variant}`, dots && "oc-chart-line--dots", className)} {...rest}>
-      {(title != null || sub != null || value != null) && (
-        <figcaption className="oc-chart-line__head">
-          {title != null && <span className="oc-chart-line__title">{title}</span>}
-          {sub != null && <span className="oc-chart-line__sub">{sub}</span>}
-          {value != null && <span className="oc-chart-line__value">{value}</span>}
-        </figcaption>
-      )}
-      <div className="oc-chart-line__body">
-        <ul className="oc-chart-line__y" aria-hidden="true">
-          {Array.from({ length: rows + 1 }, (_, i) => <li key={i}>{format(top - (top / rows) * i)}</li>)}
-        </ul>
-        <div className="oc-chart-line__plot" style={rows !== 4 ? ({ "--oc-chart-line-rows": rows } as CSSProperties) : undefined}>
-          <svg className="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-            {series.map((s, i) => {
-              const d = chartLinePath(s.values, top);
-              return (
-                <g key={i} className="oc-chart-line__series">
-                  <path className="oc-chart-line__area" d={`${d} L100 100 L0 100 Z`} />
-                  <path className={cx("oc-chart-line__path", s.dashed && "oc-chart-line__path--dashed")} d={d} />
-                </g>
-              );
-            })}
-          </svg>
-          <ul className="oc-chart-line__cols" style={{ "--n": count } as CSSProperties} aria-label={label}>
-            {Array.from({ length: count }, (_, i) => (
-              <li key={i} className="oc-chart-line__col" style={{ "--x": i } as CSSProperties} tabIndex={0} aria-label={`${labels[i] ?? i + 1}: ${series.map((s) => `${s.name} ${format(s.values[i])}`).join(", ")}`}>
-                {series.map((s, j) => <i key={j} className="oc-chart-line__dot" style={{ "--y": `${n2((s.values[i] / top) * 100)}%` } as CSSProperties} />)}
-                <span className="oc-chart-line__tip" aria-hidden="true">
-                  <strong>{labels[i] ?? i + 1}</strong>
-                  {series.map((s, j) => <span key={j} className="oc-chart-line__row">{s.name}<b>{format(s.values[i])}</b></span>)}
-                </span>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <ol className="oc-chart-line__x" aria-hidden="true">{axis.map((l, i) => <li key={i}>{l}</li>)}</ol>
-      </div>
-      <ul className="oc-chart-legend">{series.map((s, i) => <li key={i}><span className="oc-chart-swatch" />{s.name}</li>)}</ul>
-    </figure>
-  );
-});
+// File: packages/react/src/components/ChartLine.tsx
+// Map: types + demo data -> geometry (smooth path, area, percentages) -> ChartLine (head -> y axis -> plot: svg series + hover columns -> x axis -> legend)
+// Same markup as packages/ui/snippets/chart-line.html. The paths are computed here; tooltips open on :hover / :focus-visible (CSS only).
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ChartLineSeries {
+  name: string;
+  values: number[];
+  dashed?: boolean;
+}
+
+export interface ChartLineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  sub?: ReactNode;
+  /** Big number in the head (`oc-chart-line__value`). */
+  value?: ReactNode;
+  series?: ChartLineSeries[];
+  /** One label per point, used in the tooltips (e.g. "January"). */
+  labels?: string[];
+  /** Short x axis labels (default: labels; "Jan"… for the demo months). */
+  xLabels?: string[];
+  /** Top of the y axis (default: a round number above the highest value). */
+  max?: number;
+  /** Gridline rows (default 4). */
+  rows?: number;
+  /** "area" fills the series, "spark" hides axes and grid. */
+  variant?: "line" | "area" | "spark";
+  /** Dots always visible. */
+  dots?: boolean;
+  /** aria-label of the point columns. */
+  label?: string;
+  format?: (value: number) => string;
+}
+
+const DEMO: ChartLineSeries[] = [
+  { name: "Desktop", values: [186, 305, 237, 73, 209, 214] },
+  { name: "Mobile", values: [80, 200, 120, 190, 130, 140] },
+];
+const MONTHS = ["January", "February", "March", "April", "May", "June"];
+const SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+
+/** Number with at most 2 decimals and no trailing zeros ("75", "37.5", "4.69"). */
+const n2 = (n: number) => String(parseFloat(n.toFixed(2)));
+/** Round axis maximum: step = max / rows rounded up to 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8 or 10 x 10^k. */
+export function niceMax(value: number, rows = 4) {
+  if (value <= 0) return rows;
+  const raw = value / rows, pow = 10 ** Math.floor(Math.log10(raw));
+  return ([1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10].find((s) => s * pow >= raw) ?? 10) * pow * rows;
+}
+/** Smooth path through the points (x 0-100, y = 100 - value / max * 100); control points stay between their two ends. */
+export function chartLinePath(values: number[], max: number) {
+  const pts = values.map((v, i) => [values.length > 1 ? (i / (values.length - 1)) * 100 : 50, 100 - (v / max) * 100]);
+  if (!pts.length) return "";
+  const clamp = (v: number, a: number, b: number) => Math.min(Math.max(v, Math.min(a, b)), Math.max(a, b));
+  let d = `M${n2(pts[0][0])} ${n2(pts[0][1])}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] ?? p2;
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, clamp(p1[1] + (p2[1] - p0[1]) / 6, p1[1], p2[1])];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, clamp(p2[1] - (p3[1] - p1[1]) / 6, p1[1], p2[1])];
+    d += ` C${n2(c1[0])} ${n2(c1[1])} ${n2(c2[0])} ${n2(c2[1])} ${n2(p2[0])} ${n2(p2[1])}`;
+  }
+  return d;
+}
+
+/** `figure.oc-chart-line`: line / area chart in inline SVG with axes, legend and tooltips. */
+export const ChartLine = forwardRef<HTMLElement, ChartLineProps>(function ChartLine(
+  { title = "Visitors", sub = "January – June 2026", value, series = DEMO, labels: labelsProp, xLabels, max, rows = 4, variant = "line", dots = true,
+    label = "Visitors per month", format = String, className, ...rest },
+  ref,
+) {
+  const top = max ?? niceMax(Math.max(0, ...series.flatMap((s) => s.values)), rows);
+  const count = Math.max(0, ...series.map((s) => s.values.length));
+  const labels = labelsProp ?? MONTHS;
+  const axis = xLabels ?? labelsProp ?? SHORT;
+  return (
+    <figure ref={ref} className={cx("oc-chart-line", variant !== "line" && `oc-chart-line--${variant}`, dots && "oc-chart-line--dots", className)} {...rest}>
+      {(title != null || sub != null || value != null) && (
+        <figcaption className="oc-chart-line__head">
+          {title != null && <span className="oc-chart-line__title">{title}</span>}
+          {sub != null && <span className="oc-chart-line__sub">{sub}</span>}
+          {value != null && <span className="oc-chart-line__value">{value}</span>}
+        </figcaption>
+      )}
+      <div className="oc-chart-line__body">
+        <ul className="oc-chart-line__y" aria-hidden="true">
+          {Array.from({ length: rows + 1 }, (_, i) => <li key={i}>{format(top - (top / rows) * i)}</li>)}
+        </ul>
+        <div className="oc-chart-line__plot" style={rows !== 4 ? ({ "--oc-chart-line-rows": rows } as CSSProperties) : undefined}>
+          <svg className="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+            {series.map((s, i) => {
+              const d = chartLinePath(s.values, top);
+              return (
+                <g key={i} className="oc-chart-line__series">
+                  <path className="oc-chart-line__area" d={`${d} L100 100 L0 100 Z`} />
+                  <path className={cx("oc-chart-line__path", s.dashed && "oc-chart-line__path--dashed")} d={d} />
+                </g>
+              );
+            })}
+          </svg>
+          <ul className="oc-chart-line__cols" style={{ "--n": count } as CSSProperties} aria-label={label}>
+            {Array.from({ length: count }, (_, i) => (
+              <li key={i} className="oc-chart-line__col" style={{ "--x": i } as CSSProperties} tabIndex={0} aria-label={`${labels[i] ?? i + 1}: ${series.map((s) => `${s.name} ${format(s.values[i])}`).join(", ")}`}>
+                {series.map((s, j) => <i key={j} className="oc-chart-line__dot" style={{ "--y": `${n2((s.values[i] / top) * 100)}%` } as CSSProperties} />)}
+                <span className="oc-chart-line__tip" aria-hidden="true">
+                  <strong>{labels[i] ?? i + 1}</strong>
+                  {series.map((s, j) => <span key={j} className="oc-chart-line__row">{s.name}<b>{format(s.values[i])}</b></span>)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <ol className="oc-chart-line__x" aria-hidden="true">{axis.map((l, i) => <li key={i}>{l}</li>)}</ol>
+      </div>
+      <ul className="oc-chart-legend">{series.map((s, i) => <li key={i}><span className="oc-chart-swatch" />{s.name}</li>)}</ul>
+    </figure>
+  );
+});

package/src/components/ChatComposer.tsx

@@ -1,73 +1,73 @@
-// File: packages/react/src/components/ChatComposer.tsx
-// Map: props -> ChatComposer (form -> label + textarea -> bar: tools, hint, send) -> submit / Enter handling
-// Same markup as packages/ui/snippets/chat-composer.html. React adds onSend and (optional) Enter to send.
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { FormHTMLAttributes, KeyboardEvent, ReactNode } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-/** The event type React gives to a form's onSubmit (differs between React 18 and 19 typings). */
-type SubmitEvent = Parameters<NonNullable<FormHTMLAttributes<HTMLFormElement>["onSubmit"]>>[0];
-
-export interface ChatComposerProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onChange"> {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  /** Called with the trimmed text on submit; the field is cleared afterwards. */
-  onSend?: (text: string) => void;
-  placeholder?: string;
-  /** Accessible label of the field (visually hidden). */
-  label?: string;
-  /** Tool buttons (`.oc-chat-composer__tool`), e.g. attach or an EmojiPicker. */
-  tools?: ReactNode;
-  hint?: ReactNode;
-  inline?: boolean;
-  /** Enter sends, Shift+Enter adds a new line. Default true. */
-  sendOnEnter?: boolean;
-  disabled?: boolean;
-}
-
-/** `form.oc-chat-composer`: growing textarea + toolbar + send button. */
-export const ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(function ChatComposer(
-  { value, defaultValue = "", onValueChange, onSend, placeholder = "Write a message…", label = "Message", tools, hint, inline, sendOnEnter = true, disabled, className, onSubmit, ...rest },
-  ref,
-) {
-  const id = `oc-chat-${useId().replace(/:/g, "")}`;
-  const [text, setText] = useControllable(value, defaultValue, onValueChange);
-  const submit = (e: SubmitEvent) => {
-    e.preventDefault();
-    onSubmit?.(e);
-    if (!text.trim() || disabled) return;
-    onSend?.(text.trim());
-    setText("");
-  };
-  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (sendOnEnter && e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-      e.preventDefault();
-      e.currentTarget.form?.requestSubmit();
-    }
-  };
-  return (
-    <form ref={ref} className={cx("oc-chat-composer", inline && "oc-chat-composer--inline", className)} onSubmit={submit} {...rest}>
-      <label className="oc-visually-hidden" htmlFor={id}>{label}</label>
-      <textarea
-        className="oc-chat-composer__input"
-        id={id}
-        rows={1}
-        placeholder={placeholder}
-        required
-        disabled={disabled}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={onKeyDown}
-      />
-      <div className="oc-chat-composer__bar">
-        {tools != null && <div className="oc-chat-composer__tools">{tools}</div>}
-        {hint != null && <span className="oc-chat-composer__hint">{hint}</span>}
-        <button type="submit" className="oc-chat-composer__send" aria-label="Send" disabled={disabled}>&#10148;</button>
-      </div>
-    </form>
-  );
-});
+// File: packages/react/src/components/ChatComposer.tsx
+// Map: props -> ChatComposer (form -> label + textarea -> bar: tools, hint, send) -> submit / Enter handling
+// Same markup as packages/ui/snippets/chat-composer.html. React adds onSend and (optional) Enter to send.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { FormHTMLAttributes, KeyboardEvent, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+/** The event type React gives to a form's onSubmit (differs between React 18 and 19 typings). */
+type SubmitEvent = Parameters<NonNullable<FormHTMLAttributes<HTMLFormElement>["onSubmit"]>>[0];
+
+export interface ChatComposerProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text on submit; the field is cleared afterwards. */
+  onSend?: (text: string) => void;
+  placeholder?: string;
+  /** Accessible label of the field (visually hidden). */
+  label?: string;
+  /** Tool buttons (`.oc-chat-composer__tool`), e.g. attach or an EmojiPicker. */
+  tools?: ReactNode;
+  hint?: ReactNode;
+  inline?: boolean;
+  /** Enter sends, Shift+Enter adds a new line. Default true. */
+  sendOnEnter?: boolean;
+  disabled?: boolean;
+}
+
+/** `form.oc-chat-composer`: growing textarea + toolbar + send button. */
+export const ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(function ChatComposer(
+  { value, defaultValue = "", onValueChange, onSend, placeholder = "Write a message…", label = "Message", tools, hint, inline, sendOnEnter = true, disabled, className, onSubmit, ...rest },
+  ref,
+) {
+  const id = `oc-chat-${useId().replace(/:/g, "")}`;
+  const [text, setText] = useControllable(value, defaultValue, onValueChange);
+  const submit = (e: SubmitEvent) => {
+    e.preventDefault();
+    onSubmit?.(e);
+    if (!text.trim() || disabled) return;
+    onSend?.(text.trim());
+    setText("");
+  };
+  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (sendOnEnter && e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      e.currentTarget.form?.requestSubmit();
+    }
+  };
+  return (
+    <form ref={ref} className={cx("oc-chat-composer", inline && "oc-chat-composer--inline", className)} onSubmit={submit} {...rest}>
+      <label className="oc-visually-hidden" htmlFor={id}>{label}</label>
+      <textarea
+        className="oc-chat-composer__input"
+        id={id}
+        rows={1}
+        placeholder={placeholder}
+        required
+        disabled={disabled}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={onKeyDown}
+      />
+      <div className="oc-chat-composer__bar">
+        {tools != null && <div className="oc-chat-composer__tools">{tools}</div>}
+        {hint != null && <span className="oc-chat-composer__hint">{hint}</span>}
+        <button type="submit" className="oc-chat-composer__send" aria-label="Send" disabled={disabled}>&#10148;</button>
+      </div>
+    </form>
+  );
+});

package/src/components/Checkbox.tsx

@@ -1,14 +1,14 @@
-import { forwardRef } from "react";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  /** When set the input is wrapped in a <label> with this text. */
-  label?: ReactNode;
-}
-
-/** `<input class="oc-checkbox" type="checkbox">`, wrapped in a label when `label` is given. */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ label, className, ...rest }, ref) {
-  const input = <input ref={ref} type="checkbox" className={cx("oc-checkbox", className)} {...rest} />;
-  return label != null ? <label>{input} {label}</label> : input;
-});
+import { forwardRef } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** When set the input is wrapped in a <label> with this text. */
+  label?: ReactNode;
+}
+
+/** `<input class="oc-checkbox" type="checkbox">`, wrapped in a label when `label` is given. */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ label, className, ...rest }, ref) {
+  const input = <input ref={ref} type="checkbox" className={cx("oc-checkbox", className)} {...rest} />;
+  return label != null ? <label>{input} {label}</label> : input;
+});

package/src/components/Checklist.tsx

@@ -1,45 +1,45 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ChecklistProps extends HTMLAttributes<HTMLUListElement> {
-  /** Bordered rows with an action slot. */
-  card?: boolean;
-}
-
-/** `<ul class="oc-checklist">` */
-export const Checklist = forwardRef<HTMLUListElement, ChecklistProps>(function Checklist({ card, className, ...rest }, ref) {
-  return <ul ref={ref} className={cx("oc-checklist", card && "oc-checklist--card", className)} {...rest} />;
-});
-
-export interface ChecklistItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
-  /** Rule is met / step is done (`is-done`). */
-  done?: boolean;
-  /** Card variant: title + hint text column. Without it `children` are the row content. */
-  title?: ReactNode;
-  hint?: ReactNode;
-  /** Card variant: trailing action (usually a button or link). */
-  action?: ReactNode;
-}
-
-/** `<li class="oc-checklist-item is-done">` */
-export const ChecklistItem = forwardRef<HTMLLIElement, ChecklistItemProps>(function ChecklistItem(
-  { done, title, hint, action, className, children, ...rest },
-  ref,
-) {
-  return (
-    <li ref={ref} className={cx("oc-checklist-item", done && "is-done", className)} {...rest}>
-      {title != null ? (
-        <>
-          <span className="oc-checklist-text">
-            <span className="oc-checklist-title">{title}</span>
-            {hint != null && <span className="oc-checklist-hint">{hint}</span>}
-          </span>
-          {action}
-        </>
-      ) : (
-        children
-      )}
-    </li>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ChecklistProps extends HTMLAttributes<HTMLUListElement> {
+  /** Bordered rows with an action slot. */
+  card?: boolean;
+}
+
+/** `<ul class="oc-checklist">` */
+export const Checklist = forwardRef<HTMLUListElement, ChecklistProps>(function Checklist({ card, className, ...rest }, ref) {
+  return <ul ref={ref} className={cx("oc-checklist", card && "oc-checklist--card", className)} {...rest} />;
+});
+
+export interface ChecklistItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title"> {
+  /** Rule is met / step is done (`is-done`). */
+  done?: boolean;
+  /** Card variant: title + hint text column. Without it `children` are the row content. */
+  title?: ReactNode;
+  hint?: ReactNode;
+  /** Card variant: trailing action (usually a button or link). */
+  action?: ReactNode;
+}
+
+/** `<li class="oc-checklist-item is-done">` */
+export const ChecklistItem = forwardRef<HTMLLIElement, ChecklistItemProps>(function ChecklistItem(
+  { done, title, hint, action, className, children, ...rest },
+  ref,
+) {
+  return (
+    <li ref={ref} className={cx("oc-checklist-item", done && "is-done", className)} {...rest}>
+      {title != null ? (
+        <>
+          <span className="oc-checklist-text">
+            <span className="oc-checklist-title">{title}</span>
+            {hint != null && <span className="oc-checklist-hint">{hint}</span>}
+          </span>
+          {action}
+        </>
+      ) : (
+        children
+      )}
+    </li>
+  );
+});

package/src/components/ChipFilter.tsx

@@ -1,60 +1,60 @@
-// File: packages/react/src/components/ChipFilter.tsx
-// Map: types -> component (group -> one chip label per option: checkbox or radio + text + optional count)
-// Same markup as packages/ui/snippets/chip-filter.html. multiple = checkboxes (array value), else radios (string).
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface ChipFilterOption {
-  value: string;
-  label: ReactNode;
-  count?: number;
-  disabled?: boolean;
-}
-
-export interface ChipFilterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-  options: ChipFilterOption[];
-  /** Several chips at once (checkboxes). */
-  multiple?: boolean;
-  /** string for single choice, string[] with `multiple`. */
-  value?: string | string[];
-  defaultValue?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  name?: string;
-  size?: "sm" | "md";
-  /** One line that scrolls sideways. */
-  scroll?: boolean;
-}
-
-/** `.oc-chip-filter`: rounded filter chips. */
-export const ChipFilter = forwardRef<HTMLDivElement, ChipFilterProps>(function ChipFilter(
-  { options, multiple, value, defaultValue, onChange, name, size = "md", scroll, className, ...rest },
-  ref,
-) {
-  const group = name ?? `oc-chip-${useId().replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<string | string[]>(value, defaultValue ?? (multiple ? [] : ""), onChange);
-  const selected = Array.isArray(current) ? current : current ? [current] : [];
-
-  // Checkbox: add or remove the value. Radio: replace it.
-  const toggle = (v: string) => setCurrent(multiple ? (selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]) : v);
-
-  return (
-    <div
-      ref={ref}
-      className={cx("oc-chip-filter", size === "sm" && "oc-chip-filter--sm", scroll && "oc-chip-filter--scroll", className)}
-      role={multiple ? "group" : "radiogroup"}
-      {...rest}
-    >
-      {options.map((o) => (
-        <label key={o.value} className="oc-chip-filter-item">
-          <input type={multiple ? "checkbox" : "radio"} name={group} value={o.value} disabled={o.disabled} checked={selected.includes(o.value)} onChange={() => toggle(o.value)} />
-          {" "}{o.label}
-          {o.count != null && <span className="oc-chip-filter-count">{o.count}</span>}
-        </label>
-      ))}
-    </div>
-  );
-});
+// File: packages/react/src/components/ChipFilter.tsx
+// Map: types -> component (group -> one chip label per option: checkbox or radio + text + optional count)
+// Same markup as packages/ui/snippets/chip-filter.html. multiple = checkboxes (array value), else radios (string).
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface ChipFilterOption {
+  value: string;
+  label: ReactNode;
+  count?: number;
+  disabled?: boolean;
+}
+
+export interface ChipFilterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  options: ChipFilterOption[];
+  /** Several chips at once (checkboxes). */
+  multiple?: boolean;
+  /** string for single choice, string[] with `multiple`. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  name?: string;
+  size?: "sm" | "md";
+  /** One line that scrolls sideways. */
+  scroll?: boolean;
+}
+
+/** `.oc-chip-filter`: rounded filter chips. */
+export const ChipFilter = forwardRef<HTMLDivElement, ChipFilterProps>(function ChipFilter(
+  { options, multiple, value, defaultValue, onChange, name, size = "md", scroll, className, ...rest },
+  ref,
+) {
+  const group = name ?? `oc-chip-${useId().replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string | string[]>(value, defaultValue ?? (multiple ? [] : ""), onChange);
+  const selected = Array.isArray(current) ? current : current ? [current] : [];
+
+  // Checkbox: add or remove the value. Radio: replace it.
+  const toggle = (v: string) => setCurrent(multiple ? (selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]) : v);
+
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-chip-filter", size === "sm" && "oc-chip-filter--sm", scroll && "oc-chip-filter--scroll", className)}
+      role={multiple ? "group" : "radiogroup"}
+      {...rest}
+    >
+      {options.map((o) => (
+        <label key={o.value} className="oc-chip-filter-item">
+          <input type={multiple ? "checkbox" : "radio"} name={group} value={o.value} disabled={o.disabled} checked={selected.includes(o.value)} onChange={() => toggle(o.value)} />
+          {" "}{o.label}
+          {o.count != null && <span className="oc-chip-filter-count">{o.count}</span>}
+        </label>
+      ))}
+    </div>
+  );
+});