@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/StatCard.tsx

@@ -1,49 +1,49 @@
-// File: packages/react/src/components/StatCard.tsx
-// Map: StatCardGrid (row of cards) -> StatCard = card (div, a or button) -> icon -> body (value + trend, label)
-// With `href` the card is a link, with `onClick` a button; otherwise a plain div.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-/** `.oc-stat-card-grid`: responsive grid for a row of stat cards. */
-export const StatCardGrid = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatCardGrid(
-  { className, ...rest },
-  ref,
-) {
-  return <div ref={ref} className={cx("oc-stat-card-grid", className)} {...rest} />;
-});
-
-export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
-  value: ReactNode;
-  label: ReactNode;
-  icon?: ReactNode;
-  /** Trend chip text after the value, e.g. "+12%". */
-  trend?: ReactNode;
-  trendDirection?: "up" | "down";
-  tone?: "default" | "accent" | "success" | "warning";
-  /** Colored start edge. */
-  stripe?: boolean;
-  href?: string;
-  onClick?: () => void;
-}
-
-/** `.oc-stat-card`: compact KPI tile. */
-export function StatCard({ value, label, icon, trend, trendDirection = "up", tone = "default", stripe, href, onClick, className, ...rest }: StatCardProps) {
-  const cls = cx("oc-stat-card", tone !== "default" && `oc-stat-card--${tone}`, stripe && "oc-stat-card--stripe", className);
-  // Spans only inside the body, so the markup is also valid inside a link or button.
-  const content = (
-    <>
-      {icon != null && <span className="oc-stat-card-icon" aria-hidden="true">{icon}</span>}
-      <span className="oc-stat-card-body">
-        <span className="oc-stat-card-value">
-          {value}
-          {trend != null && <span className={`oc-stat-card-trend oc-stat-card-trend--${trendDirection}`}>{trend}</span>}
-        </span>
-        <span className="oc-stat-card-label">{label}</span>
-      </span>
-    </>
-  );
-  if (href !== undefined) return <a className={cls} href={href} {...rest}>{content}</a>;
-  if (onClick) return <button className={cls} type="button" onClick={onClick} {...rest}>{content}</button>;
-  return <div className={cls} {...rest}>{content}</div>;
-}
+// File: packages/react/src/components/StatCard.tsx
+// Map: StatCardGrid (row of cards) -> StatCard = card (div, a or button) -> icon -> body (value + trend, label)
+// With `href` the card is a link, with `onClick` a button; otherwise a plain div.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+/** `.oc-stat-card-grid`: responsive grid for a row of stat cards. */
+export const StatCardGrid = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatCardGrid(
+  { className, ...rest },
+  ref,
+) {
+  return <div ref={ref} className={cx("oc-stat-card-grid", className)} {...rest} />;
+});
+
+export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
+  value: ReactNode;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Trend chip text after the value, e.g. "+12%". */
+  trend?: ReactNode;
+  trendDirection?: "up" | "down";
+  tone?: "default" | "accent" | "success" | "warning";
+  /** Colored start edge. */
+  stripe?: boolean;
+  href?: string;
+  onClick?: () => void;
+}
+
+/** `.oc-stat-card`: compact KPI tile. */
+export function StatCard({ value, label, icon, trend, trendDirection = "up", tone = "default", stripe, href, onClick, className, ...rest }: StatCardProps) {
+  const cls = cx("oc-stat-card", tone !== "default" && `oc-stat-card--${tone}`, stripe && "oc-stat-card--stripe", className);
+  // Spans only inside the body, so the markup is also valid inside a link or button.
+  const content = (
+    <>
+      {icon != null && <span className="oc-stat-card-icon" aria-hidden="true">{icon}</span>}
+      <span className="oc-stat-card-body">
+        <span className="oc-stat-card-value">
+          {value}
+          {trend != null && <span className={`oc-stat-card-trend oc-stat-card-trend--${trendDirection}`}>{trend}</span>}
+        </span>
+        <span className="oc-stat-card-label">{label}</span>
+      </span>
+    </>
+  );
+  if (href !== undefined) return <a className={cls} href={href} {...rest}>{content}</a>;
+  if (onClick) return <button className={cls} type="button" onClick={onClick} {...rest}>{content}</button>;
+  return <div className={cls} {...rest}>{content}</div>;
+}

package/src/components/Stepper.tsx

@@ -1,54 +1,54 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface StepperStep {
-  label: ReactNode;
-  /** Small text under the label, e.g. `2/4`. */
-  meta?: ReactNode;
-}
-
-export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, "onChange"> {
-  steps: StepperStep[];
-  /** Index of the active step (0-based). Earlier steps are done, later ones disabled. */
-  current: number;
-  horizontal?: boolean;
-  /** Called when a done step is clicked. */
-  onStepChange?: (index: number) => void;
-}
-
-/** `<ol class="oc-stepper">`: done, active and upcoming steps. */
-export const Stepper = forwardRef<HTMLOListElement, StepperProps>(function Stepper(
-  { steps, current, horizontal, onStepChange, className, ...rest },
-  ref,
-) {
-  return (
-    <ol ref={ref} className={cx("oc-stepper", horizontal && "oc-stepper--horizontal", className)} {...rest}>
-      {steps.map((step, i) => {
-        const done = i < current;
-        const active = i === current;
-        const label = <span className="oc-stepper-label">{step.label}</span>;
-        return (
-          <li key={i}>
-            <button
-              className={cx("oc-stepper-item", done && "oc-stepper-item--done", active && "oc-stepper-item--active")}
-              type="button"
-              aria-current={active ? "step" : undefined}
-              disabled={i > current}
-              onClick={() => onStepChange?.(i)}
-            >
-              {step.meta != null ? (
-                <span>
-                  {label}
-                  <span className="oc-stepper-meta">{step.meta}</span>
-                </span>
-              ) : (
-                label
-              )}
-            </button>
-          </li>
-        );
-      })}
-    </ol>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface StepperStep {
+  label: ReactNode;
+  /** Small text under the label, e.g. `2/4`. */
+  meta?: ReactNode;
+}
+
+export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, "onChange"> {
+  steps: StepperStep[];
+  /** Index of the active step (0-based). Earlier steps are done, later ones disabled. */
+  current: number;
+  horizontal?: boolean;
+  /** Called when a done step is clicked. */
+  onStepChange?: (index: number) => void;
+}
+
+/** `<ol class="oc-stepper">`: done, active and upcoming steps. */
+export const Stepper = forwardRef<HTMLOListElement, StepperProps>(function Stepper(
+  { steps, current, horizontal, onStepChange, className, ...rest },
+  ref,
+) {
+  return (
+    <ol ref={ref} className={cx("oc-stepper", horizontal && "oc-stepper--horizontal", className)} {...rest}>
+      {steps.map((step, i) => {
+        const done = i < current;
+        const active = i === current;
+        const label = <span className="oc-stepper-label">{step.label}</span>;
+        return (
+          <li key={i}>
+            <button
+              className={cx("oc-stepper-item", done && "oc-stepper-item--done", active && "oc-stepper-item--active")}
+              type="button"
+              aria-current={active ? "step" : undefined}
+              disabled={i > current}
+              onClick={() => onStepChange?.(i)}
+            >
+              {step.meta != null ? (
+                <span>
+                  {label}
+                  <span className="oc-stepper-meta">{step.meta}</span>
+                </span>
+              ) : (
+                label
+              )}
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+});

package/src/components/Switch.tsx

@@ -1,18 +1,18 @@
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
-  /** Class for the wrapping label (`className` goes to the input). */
-  labelClassName?: string;
-}
-
-/** `<label class="oc-switch"><input type="checkbox" role="switch">`. Works controlled (`checked`) or uncontrolled. */
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({ labelClassName, className, ...rest }, ref) {
-  return (
-    <label className={cx("oc-switch", labelClassName)}>
-      <input ref={ref} type="checkbox" role="switch" className={className} {...rest} />
-      <span className="oc-switch-track" />
-    </label>
-  );
-});
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+  /** Class for the wrapping label (`className` goes to the input). */
+  labelClassName?: string;
+}
+
+/** `<label class="oc-switch"><input type="checkbox" role="switch">`. Works controlled (`checked`) or uncontrolled. */
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({ labelClassName, className, ...rest }, ref) {
+  return (
+    <label className={cx("oc-switch", labelClassName)}>
+      <input ref={ref} type="checkbox" role="switch" className={className} {...rest} />
+      <span className="oc-switch-track" />
+    </label>
+  );
+});

package/src/components/Table.tsx

@@ -1,75 +1,75 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
-  striped?: boolean;
-  compact?: boolean;
-  borderless?: boolean;
-  sticky?: boolean;
-  /** `<caption>` text. */
-  caption?: ReactNode;
-  /** Class for the `oc-table-wrap` scroll container. */
-  wrapClassName?: string;
-}
-
-/** `div.oc-table-wrap > table.oc-table` */
-export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
-  { striped, compact, borderless, sticky, caption, wrapClassName, className, children, ...rest },
-  ref,
-) {
-  return (
-    <div className={cx("oc-table-wrap", wrapClassName)}>
-      <table
-        ref={ref}
-        className={cx(
-          "oc-table",
-          striped && "oc-table--striped",
-          compact && "oc-table--compact",
-          borderless && "oc-table--borderless",
-          sticky && "oc-table--sticky",
-          className,
-        )}
-        {...rest}
-      >
-        {caption != null && <caption>{caption}</caption>}
-        {children}
-      </table>
-    </div>
-  );
-});
-
-export interface TableSortProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
-
-/** `a.oc-table-sort` inside a `<th aria-sort="ascending|descending">`. */
-export const TableSort = forwardRef<HTMLAnchorElement, TableSortProps>(function TableSort({ className, ...rest }, ref) {
-  return <a ref={ref} className={cx("oc-table-sort", className)} {...rest} />;
-});
-
-/** `td.oc-table-actions` */
-export function TableActions({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
-  return <td className={cx("oc-table-actions", className)} {...rest} />;
-}
-
-type RowActionProps = {
-  tone?: "default" | "destructive" | "primary" | "success";
-} & (
-  | (AnchorHTMLAttributes<HTMLAnchorElement> & { href: string })
-  | (ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined })
-);
-
-/** `.oc-table-row-action`: link (with `href`) or button. */
-export function TableRowAction({ tone = "default", className, ...props }: RowActionProps) {
-  const cls = cx("oc-table-row-action", tone !== "default" && `oc-table-row-action--${tone}`, className);
-  if (props.href !== undefined) return <a className={cls} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)} />;
-  return <button type="button" className={cls} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)} />;
-}
-
-/** Empty-state row: `<tr class="oc-table-empty"><td colspan>`; put an `<EmptyState>` inside. */
-export function TableEmpty({ colSpan, children, ...rest }: HTMLAttributes<HTMLTableRowElement> & { colSpan: number }) {
-  return (
-    <tr className="oc-table-empty" {...rest}>
-      <td colSpan={colSpan}>{children}</td>
-    </tr>
-  );
-}
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  striped?: boolean;
+  compact?: boolean;
+  borderless?: boolean;
+  sticky?: boolean;
+  /** `<caption>` text. */
+  caption?: ReactNode;
+  /** Class for the `oc-table-wrap` scroll container. */
+  wrapClassName?: string;
+}
+
+/** `div.oc-table-wrap > table.oc-table` */
+export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { striped, compact, borderless, sticky, caption, wrapClassName, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div className={cx("oc-table-wrap", wrapClassName)}>
+      <table
+        ref={ref}
+        className={cx(
+          "oc-table",
+          striped && "oc-table--striped",
+          compact && "oc-table--compact",
+          borderless && "oc-table--borderless",
+          sticky && "oc-table--sticky",
+          className,
+        )}
+        {...rest}
+      >
+        {caption != null && <caption>{caption}</caption>}
+        {children}
+      </table>
+    </div>
+  );
+});
+
+export interface TableSortProps extends AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+/** `a.oc-table-sort` inside a `<th aria-sort="ascending|descending">`. */
+export const TableSort = forwardRef<HTMLAnchorElement, TableSortProps>(function TableSort({ className, ...rest }, ref) {
+  return <a ref={ref} className={cx("oc-table-sort", className)} {...rest} />;
+});
+
+/** `td.oc-table-actions` */
+export function TableActions({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cx("oc-table-actions", className)} {...rest} />;
+}
+
+type RowActionProps = {
+  tone?: "default" | "destructive" | "primary" | "success";
+} & (
+  | (AnchorHTMLAttributes<HTMLAnchorElement> & { href: string })
+  | (ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined })
+);
+
+/** `.oc-table-row-action`: link (with `href`) or button. */
+export function TableRowAction({ tone = "default", className, ...props }: RowActionProps) {
+  const cls = cx("oc-table-row-action", tone !== "default" && `oc-table-row-action--${tone}`, className);
+  if (props.href !== undefined) return <a className={cls} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)} />;
+  return <button type="button" className={cls} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)} />;
+}
+
+/** Empty-state row: `<tr class="oc-table-empty"><td colspan>`; put an `<EmptyState>` inside. */
+export function TableEmpty({ colSpan, children, ...rest }: HTMLAttributes<HTMLTableRowElement> & { colSpan: number }) {
+  return (
+    <tr className="oc-table-empty" {...rest}>
+      <td colSpan={colSpan}>{children}</td>
+    </tr>
+  );
+}

package/src/components/TableActions.tsx

@@ -1,54 +1,54 @@
-// File: packages/react/src/components/TableActions.tsx
-// Map: TableActionIcon (square icon action) -> TableActionsMenu (three dots trigger + popover menu)
-// The cell itself (`td.oc-table-actions`) is the existing `TableActions` in Table.tsx.
-// This file only adds the new parts, so the export names do not collide with it.
-import { forwardRef, useId } from "react";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export type TableActionTone = "default" | "primary" | "success" | "destructive";
-
-type IconActionProps = {
-  /** Accessible name; also used as the hover title. */
-  label: string;
-  tone?: TableActionTone;
-  children: ReactNode;
-} & (
-  | (Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & { href: string })
-  | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & { href?: undefined })
-);
-
-/** `.oc-table-actions-icon`: a link (with `href`) or a button showing only an icon. */
-export function TableActionIcon({ label, tone = "default", className, children, ...props }: IconActionProps) {
-  const cls = cx("oc-table-actions-icon", tone !== "default" && `oc-table-actions-icon--${tone}`, className);
-  // aria-label gives the name to screen readers; title shows it on hover.
-  const common = { className: cls, "aria-label": label, title: label };
-  if (props.href !== undefined) {
-    return <a {...common} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}>{children}</a>;
-  }
-  return <button type="button" {...common} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>{children}</button>;
-}
-
-export interface TableActionsMenuProps extends HTMLAttributes<HTMLDivElement> {
-  /** Accessible name of the three dots trigger, e.g. "Actions for Ada". */
-  label: string;
-  /** Menu items: `<a class="oc-dropdown-item">`, `<button class="oc-dropdown-item">`, separators. */
-  children: ReactNode;
-}
-
-/** `.oc-table-actions-more` trigger + `.oc-dropdown-menu[popover]`; the browser opens and closes it. */
-export const TableActionsMenu = forwardRef<HTMLDivElement, TableActionsMenuProps>(function TableActionsMenu(
-  { label, id, className, children, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const menuId = id ?? `oc-table-actions-menu-${auto.replace(/:/g, "")}`;
-  return (
-    <>
-      <button className="oc-table-actions-more" type="button" aria-label={label} {...attrs({ popovertarget: menuId })} />
-      <div ref={ref} id={menuId} className={cx("oc-dropdown-menu", className)} {...attrs({ popover: "" })} {...rest}>
-        {children}
-      </div>
-    </>
-  );
-});
+// File: packages/react/src/components/TableActions.tsx
+// Map: TableActionIcon (square icon action) -> TableActionsMenu (three dots trigger + popover menu)
+// The cell itself (`td.oc-table-actions`) is the existing `TableActions` in Table.tsx.
+// This file only adds the new parts, so the export names do not collide with it.
+import { forwardRef, useId } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export type TableActionTone = "default" | "primary" | "success" | "destructive";
+
+type IconActionProps = {
+  /** Accessible name; also used as the hover title. */
+  label: string;
+  tone?: TableActionTone;
+  children: ReactNode;
+} & (
+  | (Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & { href: string })
+  | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & { href?: undefined })
+);
+
+/** `.oc-table-actions-icon`: a link (with `href`) or a button showing only an icon. */
+export function TableActionIcon({ label, tone = "default", className, children, ...props }: IconActionProps) {
+  const cls = cx("oc-table-actions-icon", tone !== "default" && `oc-table-actions-icon--${tone}`, className);
+  // aria-label gives the name to screen readers; title shows it on hover.
+  const common = { className: cls, "aria-label": label, title: label };
+  if (props.href !== undefined) {
+    return <a {...common} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}>{children}</a>;
+  }
+  return <button type="button" {...common} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}>{children}</button>;
+}
+
+export interface TableActionsMenuProps extends HTMLAttributes<HTMLDivElement> {
+  /** Accessible name of the three dots trigger, e.g. "Actions for Ada". */
+  label: string;
+  /** Menu items: `<a class="oc-dropdown-item">`, `<button class="oc-dropdown-item">`, separators. */
+  children: ReactNode;
+}
+
+/** `.oc-table-actions-more` trigger + `.oc-dropdown-menu[popover]`; the browser opens and closes it. */
+export const TableActionsMenu = forwardRef<HTMLDivElement, TableActionsMenuProps>(function TableActionsMenu(
+  { label, id, className, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const menuId = id ?? `oc-table-actions-menu-${auto.replace(/:/g, "")}`;
+  return (
+    <>
+      <button className="oc-table-actions-more" type="button" aria-label={label} {...attrs({ popovertarget: menuId })} />
+      <div ref={ref} id={menuId} className={cx("oc-dropdown-menu", className)} {...attrs({ popover: "" })} {...rest}>
+        {children}
+      </div>
+    </>
+  );
+});

package/src/components/TableCompact.tsx

@@ -1,61 +1,61 @@
-// File: packages/react/src/components/TableCompact.tsx
-// Map: TableCompact = wrapper div -> table.oc-table (thead from columns, tbody from rows, tfoot from footer) or your own children
-// Pass `columns` + `rows` for a quick table, or put your own <table class="oc-table"> as children.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface TableCompactColumn {
-  key: string;
-  label: ReactNode;
-  /** Right aligned, tabular figures (`data-numeric`). */
-  numeric?: boolean;
-  /** The cell may wrap (`data-wrap`). */
-  wrap?: boolean;
-}
-
-export interface TableCompactProps extends HTMLAttributes<HTMLDivElement> {
-  columns?: TableCompactColumn[];
-  rows?: Array<Record<string, ReactNode>>;
-  /** Total row: one value per column key (missing keys stay empty). */
-  footer?: Record<string, ReactNode>;
-  bordered?: boolean;
-  plain?: boolean;
-}
-
-/** Cell attributes from the column settings. */
-const cellAttrs = (c: TableCompactColumn) => ({
-  "data-numeric": c.numeric ? "" : undefined,
-  "data-wrap": c.wrap ? "" : undefined,
-});
-
-/** `.oc-table-compact`: small striped table for inside cards. */
-export const TableCompact = forwardRef<HTMLDivElement, TableCompactProps>(function TableCompact(
-  { columns, rows = [], footer, bordered, plain, className, children, ...rest },
-  ref,
-) {
-  const cls = cx("oc-table-compact", bordered && "oc-table-compact--bordered", plain && "oc-table-compact--plain", className);
-  return (
-    <div ref={ref} className={cls} {...rest}>
-      {columns ? (
-        <table className="oc-table">
-          <thead>
-            <tr>{columns.map((c) => <th key={c.key} {...cellAttrs(c)}>{c.label}</th>)}</tr>
-          </thead>
-          <tbody>
-            {rows.map((row, i) => (
-              <tr key={i}>{columns.map((c) => <td key={c.key} {...cellAttrs(c)}>{row[c.key]}</td>)}</tr>
-            ))}
-          </tbody>
-          {footer && (
-            <tfoot>
-              <tr>{columns.map((c) => <td key={c.key} {...cellAttrs(c)}>{footer[c.key]}</td>)}</tr>
-            </tfoot>
-          )}
-        </table>
-      ) : (
-        children
-      )}
-    </div>
-  );
-});
+// File: packages/react/src/components/TableCompact.tsx
+// Map: TableCompact = wrapper div -> table.oc-table (thead from columns, tbody from rows, tfoot from footer) or your own children
+// Pass `columns` + `rows` for a quick table, or put your own <table class="oc-table"> as children.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface TableCompactColumn {
+  key: string;
+  label: ReactNode;
+  /** Right aligned, tabular figures (`data-numeric`). */
+  numeric?: boolean;
+  /** The cell may wrap (`data-wrap`). */
+  wrap?: boolean;
+}
+
+export interface TableCompactProps extends HTMLAttributes<HTMLDivElement> {
+  columns?: TableCompactColumn[];
+  rows?: Array<Record<string, ReactNode>>;
+  /** Total row: one value per column key (missing keys stay empty). */
+  footer?: Record<string, ReactNode>;
+  bordered?: boolean;
+  plain?: boolean;
+}
+
+/** Cell attributes from the column settings. */
+const cellAttrs = (c: TableCompactColumn) => ({
+  "data-numeric": c.numeric ? "" : undefined,
+  "data-wrap": c.wrap ? "" : undefined,
+});
+
+/** `.oc-table-compact`: small striped table for inside cards. */
+export const TableCompact = forwardRef<HTMLDivElement, TableCompactProps>(function TableCompact(
+  { columns, rows = [], footer, bordered, plain, className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-table-compact", bordered && "oc-table-compact--bordered", plain && "oc-table-compact--plain", className);
+  return (
+    <div ref={ref} className={cls} {...rest}>
+      {columns ? (
+        <table className="oc-table">
+          <thead>
+            <tr>{columns.map((c) => <th key={c.key} {...cellAttrs(c)}>{c.label}</th>)}</tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => (
+              <tr key={i}>{columns.map((c) => <td key={c.key} {...cellAttrs(c)}>{row[c.key]}</td>)}</tr>
+            ))}
+          </tbody>
+          {footer && (
+            <tfoot>
+              <tr>{columns.map((c) => <td key={c.key} {...cellAttrs(c)}>{footer[c.key]}</td>)}</tr>
+            </tfoot>
+          )}
+        </table>
+      ) : (
+        children
+      )}
+    </div>
+  );
+});