@oods/components-react 0.3.0

package/dist/status.d.cts

@@ -0,0 +1,35 @@
+import { ComponentTone } from './types.cjs';
+import 'react';
+
+type StatusTone = ComponentTone;
+type StatusDomain = string;
+type StatusTokenSet = {
+    readonly background: string;
+    readonly border: string;
+    readonly foreground: string;
+};
+type StatusPresentation = {
+    readonly domain: StatusDomain;
+    readonly status: string;
+    readonly label: string;
+    readonly description: string;
+    readonly tone: StatusTone;
+    readonly iconName?: string;
+    readonly badge: {
+        readonly subtle: StatusTokenSet;
+        readonly solid: StatusTokenSet;
+    };
+    readonly banner: {
+        readonly subtle: StatusTokenSet;
+        readonly solid: StatusTokenSet;
+    };
+};
+declare const STATUS_DOMAINS: readonly StatusDomain[];
+declare function getStatusPresentation(domain: StatusDomain, status: string): StatusPresentation;
+declare function listStatuses(domain: StatusDomain): readonly StatusPresentation[];
+declare function getToneTokenSet(tone: StatusTone): StatusTokenSet;
+declare function getBannerToneTokenSet(tone: StatusTone): StatusTokenSet;
+declare function resolveStatusGlyph(iconName: string | undefined): string | undefined;
+declare function defaultStatusGlyph(): string;
+
+export { STATUS_DOMAINS, type StatusDomain, type StatusPresentation, type StatusTokenSet, type StatusTone, defaultStatusGlyph, getBannerToneTokenSet, getStatusPresentation, getToneTokenSet, listStatuses, resolveStatusGlyph };

package/dist/status.d.ts

@@ -0,0 +1,35 @@
+import { ComponentTone } from './types.js';
+import 'react';
+
+type StatusTone = ComponentTone;
+type StatusDomain = string;
+type StatusTokenSet = {
+    readonly background: string;
+    readonly border: string;
+    readonly foreground: string;
+};
+type StatusPresentation = {
+    readonly domain: StatusDomain;
+    readonly status: string;
+    readonly label: string;
+    readonly description: string;
+    readonly tone: StatusTone;
+    readonly iconName?: string;
+    readonly badge: {
+        readonly subtle: StatusTokenSet;
+        readonly solid: StatusTokenSet;
+    };
+    readonly banner: {
+        readonly subtle: StatusTokenSet;
+        readonly solid: StatusTokenSet;
+    };
+};
+declare const STATUS_DOMAINS: readonly StatusDomain[];
+declare function getStatusPresentation(domain: StatusDomain, status: string): StatusPresentation;
+declare function listStatuses(domain: StatusDomain): readonly StatusPresentation[];
+declare function getToneTokenSet(tone: StatusTone): StatusTokenSet;
+declare function getBannerToneTokenSet(tone: StatusTone): StatusTokenSet;
+declare function resolveStatusGlyph(iconName: string | undefined): string | undefined;
+declare function defaultStatusGlyph(): string;
+
+export { STATUS_DOMAINS, type StatusDomain, type StatusPresentation, type StatusTokenSet, type StatusTone, defaultStatusGlyph, getBannerToneTokenSet, getStatusPresentation, getToneTokenSet, listStatuses, resolveStatusGlyph };

package/dist/status.js

@@ -0,0 +1 @@
+export { STATUS_DOMAINS, defaultStatusGlyph, getBannerToneTokenSet, getStatusPresentation, getToneTokenSet, listStatuses, resolveStatusGlyph } from './chunk-G74PKSW3.js';

package/dist/table.cjs

@@ -0,0 +1,515 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/table.tsx
+
+// src/status-map.json
+var status_map_default = {
+  domains: {
+    subscription: {
+      future: {
+        description: "Subscription is scheduled but not yet active.",
+        chip: {
+          foreground: "color.text.info",
+          background: "color.background.info.subtle",
+          border: "color.border.info",
+          icon: "icon.status.scheduled"
+        },
+        banner: {
+          foreground: "color.text.info",
+          background: "color.background.surface.default",
+          border: "color.border.info",
+          icon: "icon.status.scheduled"
+        }
+      },
+      trialing: {
+        description: "Subscription is in a trial period before billing begins.",
+        chip: {
+          foreground: "color.text.accent",
+          background: "color.background.accent.subtle",
+          border: "color.border.accent",
+          icon: "icon.status.trial"
+        },
+        banner: {
+          foreground: "color.text.accent",
+          background: "color.background.surface.default",
+          border: "color.border.accent",
+          icon: "icon.status.trial"
+        }
+      },
+      active: {
+        description: "Subscription is paid and service is provisioned.",
+        chip: {
+          foreground: "color.text.positive",
+          background: "color.background.positive.subtle",
+          border: "color.border.positive",
+          icon: "icon.status.success"
+        },
+        banner: {
+          foreground: "color.text.positive",
+          background: "color.background.surface.default",
+          border: "color.border.positive",
+          icon: "icon.status.success"
+        }
+      },
+      paused: {
+        description: "Billing paused temporarily by finance or customer request.",
+        chip: {
+          foreground: "color.text.neutral",
+          background: "color.background.neutral.subtle",
+          border: "color.border.neutral",
+          icon: "icon.status.paused"
+        },
+        banner: {
+          foreground: "color.text.neutral",
+          background: "color.background.surface.muted",
+          border: "color.border.neutral",
+          icon: "icon.status.paused"
+        }
+      },
+      pending_cancellation: {
+        description: "Subscription will cancel at period end but remains active now.",
+        chip: {
+          foreground: "color.text.info",
+          background: "color.background.info.subtle",
+          border: "color.border.info",
+          icon: "icon.status.pending"
+        },
+        banner: {
+          foreground: "color.text.info",
+          background: "color.background.surface.default",
+          border: "color.border.info",
+          icon: "icon.status.pending"
+        }
+      },
+      past_due: {
+        description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
+        chip: {
+          foreground: "color.text.danger",
+          background: "color.background.danger.subtle",
+          border: "color.border.danger",
+          icon: "icon.status.warning"
+        },
+        banner: {
+          foreground: "color.text.onbold",
+          background: "color.background.danger.bold",
+          border: "color.border.danger",
+          icon: "icon.status.warning"
+        }
+      },
+      unpaid: {
+        description: "Payment retries exhausted; service access revoked.",
+        chip: {
+          foreground: "color.text.danger",
+          background: "color.background.danger.subtle",
+          border: "color.border.danger",
+          icon: "icon.status.error"
+        },
+        banner: {
+          foreground: "color.text.onbold",
+          background: "color.background.danger.bold",
+          border: "color.border.danger",
+          icon: "icon.status.error"
+        }
+      },
+      terminated: {
+        description: "Subscription ended; service access revoked and billing stopped.",
+        chip: {
+          foreground: "color.text.disabled",
+          background: "color.background.disabled",
+          border: "color.border.disabled",
+          icon: "icon.status.canceled"
+        },
+        banner: {
+          foreground: "color.text.neutral",
+          background: "color.background.neutral.subtle",
+          border: "color.border.neutral",
+          icon: "icon.status.canceled"
+        }
+      }
+    },
+    invoice: {
+      draft: {
+        description: "Invoice is editable and not yet finalized.",
+        chip: {
+          foreground: "color.text.neutral",
+          background: "color.background.neutral.subtle",
+          border: "color.border.neutral",
+          icon: "icon.status.draft"
+        },
+        banner: {
+          foreground: "color.text.neutral",
+          background: "color.background.surface.muted",
+          border: "color.border.neutral",
+          icon: "icon.status.draft"
+        }
+      },
+      posted: {
+        description: "Invoice finalized with terms before collection.",
+        chip: {
+          foreground: "color.text.info",
+          background: "color.background.info.subtle",
+          border: "color.border.info",
+          icon: "icon.status.pending"
+        },
+        banner: {
+          foreground: "color.text.info",
+          background: "color.background.surface.default",
+          border: "color.border.info",
+          icon: "icon.status.pending"
+        }
+      },
+      paid: {
+        description: "Invoice collected successfully in full.",
+        chip: {
+          foreground: "color.text.positive",
+          background: "color.background.positive.subtle",
+          border: "color.border.positive",
+          icon: "icon.status.success"
+        },
+        banner: {
+          foreground: "color.text.positive",
+          background: "color.background.surface.default",
+          border: "color.border.positive",
+          icon: "icon.status.success"
+        }
+      },
+      past_due: {
+        description: "Invoice is unpaid past its due date.",
+        chip: {
+          foreground: "color.text.danger",
+          background: "color.background.danger.subtle",
+          border: "color.border.danger",
+          icon: "icon.status.error"
+        },
+        banner: {
+          foreground: "color.text.onbold",
+          background: "color.background.danger.bold",
+          border: "color.border.danger",
+          icon: "icon.status.error"
+        }
+      },
+      void: {
+        description: "Invoice canceled and no longer payable.",
+        chip: {
+          foreground: "color.text.disabled",
+          background: "color.background.disabled",
+          border: "color.border.disabled",
+          icon: "icon.status.void"
+        },
+        banner: {
+          foreground: "color.text.neutral",
+          background: "color.background.neutral.subtle",
+          border: "color.border.neutral",
+          icon: "icon.status.void"
+        }
+      }
+    }
+  }
+};
+
+// src/status.ts
+var TONE_ALIASES = {
+  info: "info",
+  informational: "info",
+  accent: "accent",
+  highlight: "accent",
+  positive: "success",
+  success: "success",
+  ok: "success",
+  warning: "warning",
+  caution: "warning",
+  danger: "critical",
+  critical: "critical",
+  error: "critical",
+  negative: "critical",
+  neutral: "neutral",
+  pending: "info"
+};
+var toLabel = (status) => status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
+var inferTone = (entry) => {
+  if (!entry) return "neutral";
+  for (const reference of [entry.foreground, entry.background, entry.border]) {
+    const segments = reference.replace(/^\{|\}$/g, "").split(/[\s./_-]+/).reverse();
+    for (const segment of segments) {
+      const tone = TONE_ALIASES[segment.toLowerCase()];
+      if (tone) return tone;
+    }
+  }
+  return "neutral";
+};
+var componentTokenSet = (tone) => {
+  const normalized = tone === "positive" ? "success" : tone === "danger" ? "critical" : tone;
+  return {
+    background: `var(--sys-status-${normalized}-surface)`,
+    border: `var(--sys-status-${normalized}-border)`,
+    foreground: `var(--sys-status-${normalized}-text)`
+  };
+};
+var rawTokenSet = (entry) => {
+  const tone = inferTone(entry);
+  return componentTokenSet(tone);
+};
+var bannerFallback = (tone) => tone === "neutral" ? {
+  background: "var(--cmp-banner-background)",
+  border: "var(--cmp-banner-border)",
+  foreground: "var(--cmp-banner-text)"
+} : componentTokenSet(tone);
+var fallback = (domain, status, tone = "neutral") => ({
+  domain,
+  status,
+  label: toLabel(status || "Unknown"),
+  description: "Status not found in registry; falling back to the requested token set.",
+  tone,
+  badge: { subtle: componentTokenSet(tone), solid: componentTokenSet(tone) },
+  banner: { subtle: bannerFallback(tone), solid: componentTokenSet(tone) }
+});
+var registry = /* @__PURE__ */ new Map();
+for (const [domain, entries] of Object.entries(status_map_default.domains)) {
+  const domainEntries = /* @__PURE__ */ new Map();
+  for (const [status, entry] of Object.entries(entries)) {
+    const tone = inferTone(entry.chip);
+    domainEntries.set(status.toLowerCase(), {
+      domain,
+      status,
+      label: toLabel(status),
+      description: entry.description,
+      tone,
+      iconName: entry.chip.icon ?? entry.banner?.icon,
+      badge: { subtle: rawTokenSet(entry.chip), solid: componentTokenSet(tone) },
+      banner: {
+        subtle: entry.banner ? rawTokenSet(entry.banner) : bannerFallback(tone),
+        solid: componentTokenSet(tone)
+      }
+    });
+  }
+  registry.set(domain, domainEntries);
+}
+var LEGACY_STATUS_ALIASES = {
+  subscription: { delinquent: "unpaid" }
+};
+Object.freeze([...registry.keys()]);
+function getStatusPresentation(domain, status) {
+  const entries = registry.get(domain);
+  if (!entries) return fallback(domain, status);
+  const normalized = status.toLowerCase();
+  const direct = entries.get(normalized);
+  if (direct) return direct;
+  const alias = LEGACY_STATUS_ALIASES[domain]?.[normalized];
+  const aliased = alias ? entries.get(alias) : void 0;
+  return aliased ? { ...aliased, status, label: toLabel(status) } : fallback(domain, status);
+}
+function getToneTokenSet(tone) {
+  return componentTokenSet(tone);
+}
+var classes = (...values) => values.filter(Boolean).join(" ");
+var TableHead = React__namespace.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes("oods-table__header", className), ...rest })
+);
+TableHead.displayName = "OODS.Table.Head";
+var TableBody = React__namespace.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: classes("oods-table__body", className), ...rest })
+);
+TableBody.displayName = "OODS.Table.Body";
+var TableCaption = React__namespace.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: classes("oods-table__caption", className), ...rest })
+);
+TableCaption.displayName = "OODS.Table.Caption";
+var TableRow = React__namespace.forwardRef(
+  ({
+    selectable = false,
+    selected = false,
+    onActivate,
+    className,
+    tabIndex,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) onActivate?.(event);
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented && selectable && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        onActivate?.(event);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ref,
+        className: classes("oods-table__row", className),
+        "data-selectable": selectable ? "true" : void 0,
+        "data-selected": selected ? "true" : void 0,
+        "aria-selected": selectable ? selected : void 0,
+        tabIndex: selectable ? tabIndex ?? 0 : tabIndex,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...rest
+      }
+    );
+  }
+);
+TableRow.displayName = "OODS.Table.Row";
+var TableHeaderCell = React__namespace.forwardRef(
+  ({ numeric = false, className, scope = "col", ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: classes(
+        "oods-table__header-cell",
+        numeric && "oods-table__header-cell--numeric",
+        className
+      ),
+      "data-numeric": numeric ? "true" : void 0,
+      scope,
+      ...rest
+    }
+  )
+);
+TableHeaderCell.displayName = "OODS.Table.HeaderCell";
+var TableCell = React__namespace.forwardRef(
+  ({
+    numeric = false,
+    status,
+    statusDomain = "subscription",
+    tone: toneOverride,
+    statusEmphasis = "surface",
+    className,
+    children,
+    style,
+    title,
+    ...rest
+  }, ref) => {
+    const presentation = status ? getStatusPresentation(statusDomain, status) : void 0;
+    const tone = toneOverride ?? presentation?.tone;
+    const tokens = tone ? getToneTokenSet(tone) : void 0;
+    const statusStyle = tokens ? statusEmphasis === "text" ? { "--table-cell-status-foreground": tokens.foreground } : {
+      "--table-cell-status-background": tokens.background,
+      "--table-cell-status-border": tokens.border,
+      "--table-cell-status-foreground": tokens.foreground
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        ref,
+        className: classes(
+          "oods-table__cell",
+          numeric && "oods-table__cell--numeric",
+          status && "oods-table__cell--status",
+          className
+        ),
+        "data-numeric": numeric ? "true" : void 0,
+        "data-status": status,
+        "data-status-domain": status ? statusDomain : void 0,
+        "data-status-tone": status ? tone : void 0,
+        "data-status-emphasis": status ? statusEmphasis : void 0,
+        "data-has-status": status ? "true" : void 0,
+        title: title ?? presentation?.description,
+        style: { ...statusStyle, ...style },
+        ...rest,
+        children: children ?? presentation?.label ?? status
+      }
+    );
+  }
+);
+TableCell.displayName = "OODS.Table.Cell";
+var TableRoot = React__namespace.forwardRef(
+  ({
+    caption,
+    columns,
+    rows,
+    density = "comfortable",
+    selectable = false,
+    onRowActivate,
+    children,
+    containerClassName,
+    containerStyle,
+    className,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes("oods-table__container", containerClassName),
+      style: containerStyle,
+      "data-density": density,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "table",
+        {
+          ref,
+          className: classes("oods-table", className),
+          "data-oods-component": "Table",
+          "data-density": density,
+          ...rest,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+              "tr",
+              {
+                className: "oods-table__row",
+                "data-selectable": selectable ? "true" : void 0,
+                children: columns?.map((column, columnIndex) => {
+                  const value = row[column.key];
+                  const rendered = column.render ? column.render(value, row) : String(value ?? "");
+                  return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { numeric: column.numeric, children: selectable && columnIndex === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "oods-table-row-action",
+                      onClick: (event) => onRowActivate?.(row.id, row, event),
+                      children: rendered
+                    }
+                  ) : rendered }, column.key);
+                })
+              },
+              row.id
+            )) })
+          ] })
+        }
+      )
+    }
+  )
+);
+TableRoot.displayName = "OODS.Table";
+var Table = Object.assign(TableRoot, {
+  Head: TableHead,
+  Body: TableBody,
+  Caption: TableCaption,
+  Row: TableRow,
+  HeaderCell: TableHeaderCell,
+  Cell: TableCell
+});
+
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;

package/dist/table.d.cts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TableCompound, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderCellProps, TableCellProps } from './types.cjs';
+
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHeaderCell: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const Table: TableCompound;
+
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow };

package/dist/table.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TableCompound, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderCellProps, TableCellProps } from './types.js';
+
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHeaderCell: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const Table: TableCompound;
+
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow };

package/dist/table.js

@@ -0,0 +1,2 @@
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-YCI5AEWL.js';
+import './chunk-G74PKSW3.js';

package/dist/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+