@mindbill/react 0.1.0 → 0.2.0

package/README.md

@@ -1,11 +1,77 @@
 # @mindbill/react
 
-React wrappers for the secure `@mindbill/embed` custom elements. See the [widget guide](https://github.com/incidentfox/mindbill-widgets/blob/main/docs/widgets.md).
+MindBill's partner-facing React components. The package includes two integration
+levels:
 
-> **Publication pending:** `@mindbill/react` and its `@mindbill/embed` dependency are not yet available from npm. The import below documents the post-publication interface and currently returns 404 through package registries. Clone the [source repository](https://github.com/incidentfox/mindbill-widgets) to evaluate it locally.
+- Native, data-driven components for teams that want MindBill workflows to feel
+  like part of their own product.
+- Hosted workflow wrappers for teams that want MindBill to own the secure UI and
+  API orchestration.
+
+Import the stylesheet once near your application root.
 
 ```tsx
-import { MindBillBillTimeline } from "@mindbill/react";
+import "@mindbill/react/styles.css";
 ```
 
-Create the short-lived embed session on your server; never send a Partner API key to React/browser code.
+## Native components
+
+Native components render the same lifecycle, reporting, collections, and document
+patterns used by the MindBill product. They never fetch data or receive API keys;
+your application supplies already-authorized data and handles user actions.
+
+```tsx
+import {
+  AccountsReceivableSummary,
+  BillStatusTimeline,
+  CollectionsTable,
+} from "@mindbill/react";
+
+<BillStatusTimeline
+  status="accepted"
+  message="Accepted by clearinghouse"
+  messageTone="success"
+/>
+
+<AccountsReceivableSummary
+  totalOutstanding={184250}
+  buckets={[
+    { label: "0–30 days", amount: 61200, count: 24 },
+    { label: "31–60 days", amount: 48300, count: 17 },
+    { label: "61–90 days", amount: 31750, count: 9 },
+    { label: "90+ days", amount: 43000, count: 12 },
+  ]}
+/>
+```
+
+Available native components:
+
+- `BillStatusTimeline`
+- `BillSummaryCard`
+- `AccountsReceivableSummary`
+- `CollectionsTable`
+- `DocumentList`
+
+## Hosted workflows
+
+Hosted wrappers render MindBill's short-lived, origin-bound embed sessions. Mint
+the session on your server. Never expose a MindBill partner API key to the browser.
+
+```tsx
+import { HostedCollections } from "@mindbill/react";
+
+<HostedCollections
+  sessionToken={session.token}
+  embedUrl={session.embedUrl}
+  onMindBill={(event) => console.log(event.event, event.billId)}
+/>
+```
+
+The available wrappers are `HostedBillTimeline`, `HostedBillFromReport`,
+`HostedCollections`, and `HostedOnboarding`. The original names (`BillTimeline`,
+`BillFromReport`, `Collections`, and `Onboarding`) remain available for backwards
+compatibility.
+
+See the [interactive component gallery](https://app.mindbill.org/developers/components),
+[API documentation](https://app.mindbill.org/developers/reference), and
+[reference integration](https://github.com/incidentfox/mindbill/tree/main/examples/partner-reference).

package/dist/index.d.ts

@@ -1,19 +1,145 @@
-import { MindBillAppearance, MindBillEventDetail, MindBillErrorDetail } from '@mindbill/embed';
-export { MindBillAppearance, MindBillErrorDetail, MindBillEventDetail } from '@mindbill/embed';
-import { CSSProperties, ReactElement } from 'react';
-
-type MindBillWidgetProps = {
+import "@mindbill/embed";
+import { type CSSProperties, type ReactNode } from "react";
+import type { MindBillEvent } from "@mindbill/embed";
+export type MindBillWidgetProps = {
     sessionToken: string;
     embedUrl: string;
-    appearance?: MindBillAppearance;
+    onMindBill?: (event: MindBillEvent) => void;
     className?: string;
     style?: CSSProperties;
-    onMindBill?: (event: CustomEvent<MindBillEventDetail>) => void;
-    onMindBillError?: (event: CustomEvent<MindBillErrorDetail>) => void;
-};
-declare function MindBillBillTimeline(props: MindBillWidgetProps): ReactElement;
-declare function MindBillBillFromReport(props: MindBillWidgetProps): ReactElement;
-declare function MindBillCollections(props: MindBillWidgetProps): ReactElement;
-declare function MindBillOnboarding(props: MindBillWidgetProps): ReactElement;
-
-export { MindBillBillFromReport, MindBillBillTimeline, MindBillCollections, MindBillOnboarding, type MindBillWidgetProps };
+};
+export declare const BillTimeline: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const BillFromReport: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const Collections: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const Onboarding: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const HostedBillTimeline: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const HostedBillFromReport: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const HostedCollections: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const HostedOnboarding: ({ sessionToken, embedUrl, onMindBill, className, style }: MindBillWidgetProps) => import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    "session-token": string;
+    "embed-url": string;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export type { MindBillEvent } from "@mindbill/embed";
+export type BillLifecycleStatus = "incomplete" | "send" | "sent" | "accepted" | "accepted_no_response" | "processed" | "denied" | "appealing" | "ibr" | "lien" | "paid" | "closed";
+export type BillStatusTimelineProps = {
+    status: BillLifecycleStatus;
+    label?: string;
+    message?: string;
+    messageTone?: "neutral" | "success" | "warning" | "danger";
+    className?: string;
+};
+export declare function BillStatusTimeline({ status, label, message, messageTone, className }: BillStatusTimelineProps): import("react/jsx-runtime").JSX.Element;
+export type BillSummaryCardProps = {
+    billNumber: string;
+    status: BillLifecycleStatus | string;
+    patientLabel?: string;
+    serviceDate?: string;
+    charges: number;
+    paid: number;
+    balance: number;
+    currency?: string;
+    action?: ReactNode;
+    className?: string;
+};
+export declare function BillSummaryCard({ billNumber, status, patientLabel, serviceDate, charges, paid, balance, currency, action, className }: BillSummaryCardProps): import("react/jsx-runtime").JSX.Element;
+export type AgingBucket = {
+    label: string;
+    amount: number;
+    count?: number;
+};
+export type PayerBalance = {
+    payer: string;
+    outstanding: number;
+    share?: number;
+    oldestDays?: number;
+};
+export type AccountsReceivableSummaryProps = {
+    totalOutstanding: number;
+    buckets: AgingBucket[];
+    payers?: PayerBalance[];
+    currency?: string;
+    title?: string;
+    className?: string;
+};
+export declare function AccountsReceivableSummary({ totalOutstanding, buckets, payers, currency, title, className }: AccountsReceivableSummaryProps): import("react/jsx-runtime").JSX.Element;
+export type CollectionRow = {
+    id: string;
+    billNumber: string;
+    patientLabel?: string;
+    status: string;
+    submittedAt?: string;
+    charges: number;
+    paid: number;
+    balance: number;
+    aging: string;
+    hasEor?: boolean;
+};
+export type CollectionsTableProps = {
+    rows: CollectionRow[];
+    currency?: string;
+    onOpenBill?: (row: CollectionRow) => void;
+    onOpenEor?: (row: CollectionRow) => void;
+    className?: string;
+};
+export declare function CollectionsTable({ rows, currency, onOpenBill, onOpenEor, className }: CollectionsTableProps): import("react/jsx-runtime").JSX.Element;
+export type DocumentItem = {
+    id: string;
+    name: string;
+    kind?: string;
+    createdAt?: string;
+    sizeLabel?: string;
+    status?: "ready" | "processing" | "needs_attention";
+};
+export type DocumentListProps = {
+    documents: DocumentItem[];
+    onOpen?: (document: DocumentItem) => void;
+    onUpload?: () => void;
+    title?: string;
+    className?: string;
+};
+export declare function DocumentList({ documents, onOpen, onUpload, title, className }: DocumentListProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,50 +1,57 @@
 "use client";
-
-// src/index.tsx
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@mindbill/embed";
 import { createElement, useEffect, useRef } from "react";
-function widget(tagName, props) {
-  const ref = useRef(null);
-  const { onMindBill, onMindBillError } = props;
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    const handleEvent = (event) => onMindBill?.(event);
-    const handleError = (event) => onMindBillError?.(event);
-    element.addEventListener("mindbill", handleEvent);
-    element.addEventListener("mindbill-error", handleError);
-    return () => {
-      element.removeEventListener("mindbill", handleEvent);
-      element.removeEventListener("mindbill-error", handleError);
+function widget(tag) {
+    return function MindBillWidget({ sessionToken, embedUrl, onMindBill, className, style }) {
+        const ref = useRef(null);
+        useEffect(() => {
+            const element = ref.current;
+            if (!element || !onMindBill)
+                return;
+            const listener = (event) => onMindBill(event.detail);
+            element.addEventListener("mindbill", listener);
+            return () => element.removeEventListener("mindbill", listener);
+        }, [onMindBill]);
+        return createElement(tag, { ref, "session-token": sessionToken, "embed-url": embedUrl, className, style });
     };
-  }, [onMindBill, onMindBillError]);
-  return createElement(tagName, {
-    ref,
-    "session-token": props.sessionToken,
-    "embed-url": props.embedUrl,
-    theme: props.appearance?.theme,
-    "accent-color": props.appearance?.accentColor,
-    locale: props.appearance?.locale,
-    class: props.className,
-    style: props.style
-  });
 }
-function MindBillBillTimeline(props) {
-  return widget("mindbill-bill-timeline", props);
+export const BillTimeline = widget("mindbill-bill-timeline");
+export const BillFromReport = widget("mindbill-bill-from-report");
+export const Collections = widget("mindbill-collections");
+export const Onboarding = widget("mindbill-onboarding");
+export const HostedBillTimeline = BillTimeline;
+export const HostedBillFromReport = BillFromReport;
+export const HostedCollections = Collections;
+export const HostedOnboarding = Onboarding;
+const LIFECYCLE_STAGES = [
+    { statuses: ["incomplete", "send"], label: "Incomplete" },
+    { statuses: ["sent"], label: "Queued" },
+    { statuses: ["accepted", "accepted_no_response"], label: "Accepted" },
+    { statuses: ["processed", "denied", "appealing"], label: "Processed" },
+    { statuses: ["ibr", "lien"], label: "IBR / Lien" },
+    { statuses: ["paid", "closed"], label: "Closed" },
+];
+export function BillStatusTimeline({ status, label = "Bill payment cycle", message, messageTone = "neutral", className = "" }) {
+    const activeIndex = Math.max(0, LIFECYCLE_STAGES.findIndex((stage) => stage.statuses.includes(status)));
+    return (_jsxs("section", { className: `mb-card mb-timeline ${className}`, "aria-label": label, children: [_jsxs("div", { className: "mb-section-head", children: [_jsx("span", { className: "mb-kicker", children: label }), message ? _jsx("span", { className: `mb-badge mb-badge--${messageTone}`, children: message }) : null] }), _jsx("ol", { className: "mb-timeline__track", children: LIFECYCLE_STAGES.map((stage, index) => {
+                    const state = index < activeIndex ? "complete" : index === activeIndex ? "current" : "upcoming";
+                    return (_jsxs("li", { className: `mb-timeline__step mb-timeline__step--${state}`, "aria-current": state === "current" ? "step" : undefined, children: [_jsx("span", { className: "mb-timeline__dot", "aria-hidden": "true", children: state === "complete" ? "✓" : "" }), _jsx("span", { children: stage.label })] }, stage.label));
+                }) })] }));
 }
-function MindBillBillFromReport(props) {
-  return widget("mindbill-bill-from-report", props);
+function money(value, currency = "USD") {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 2 }).format(value);
 }
-function MindBillCollections(props) {
-  return widget("mindbill-collections", props);
+export function BillSummaryCard({ billNumber, status, patientLabel, serviceDate, charges, paid, balance, currency = "USD", action, className = "" }) {
+    return (_jsxs("article", { className: `mb-card mb-bill ${className}`, children: [_jsxs("div", { className: "mb-section-head mb-bill__head", children: [_jsxs("div", { children: [_jsx("span", { className: "mb-kicker", children: "Bill" }), _jsxs("h3", { children: ["#", billNumber] })] }), _jsx("span", { className: "mb-badge mb-badge--neutral", children: status.replace(/_/g, " ") })] }), (patientLabel || serviceDate) ? _jsxs("p", { className: "mb-bill__context", children: [patientLabel, patientLabel && serviceDate ? " · " : "", serviceDate] }) : null, _jsxs("dl", { className: "mb-metrics", children: [_jsxs("div", { children: [_jsx("dt", { children: "Charges" }), _jsx("dd", { children: money(charges, currency) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Paid" }), _jsx("dd", { className: "mb-positive", children: money(paid, currency) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Balance" }), _jsx("dd", { children: money(balance, currency) })] })] }), action ? _jsx("div", { className: "mb-card__action", children: action }) : null] }));
 }
-function MindBillOnboarding(props) {
-  return widget("mindbill-onboarding", props);
+export function AccountsReceivableSummary({ totalOutstanding, buckets, payers = [], currency = "USD", title = "Accounts receivable", className = "" }) {
+    const max = Math.max(...buckets.map((bucket) => bucket.amount), 1);
+    return (_jsxs("section", { className: `mb-card mb-report ${className}`, children: [_jsxs("div", { className: "mb-section-head", children: [_jsxs("div", { children: [_jsx("span", { className: "mb-kicker", children: "Reporting" }), _jsx("h3", { children: title })] }), _jsx("strong", { className: "mb-report__total", children: money(totalOutstanding, currency) })] }), _jsx("div", { className: "mb-aging", "aria-label": "Outstanding balance by age", children: buckets.map((bucket, index) => (_jsxs("div", { className: "mb-aging__item", children: [_jsxs("div", { className: "mb-aging__label", children: [_jsx("span", { children: bucket.label }), _jsx("strong", { children: money(bucket.amount, currency) })] }), _jsx("div", { className: "mb-aging__bar", children: _jsx("i", { style: { width: `${Math.max(3, (bucket.amount / max) * 100)}%` } }) }), bucket.count == null ? null : _jsxs("small", { children: [bucket.count, " bill", bucket.count === 1 ? "" : "s"] })] }, bucket.label))) }), payers.length ? _jsxs("div", { className: "mb-payers", children: [_jsxs("div", { className: "mb-table-head", children: [_jsx("span", { children: "Payer exposure" }), _jsx("span", { children: "Outstanding" })] }), payers.map((payer) => _jsxs("div", { className: "mb-payer", children: [_jsxs("span", { children: [_jsx("strong", { children: payer.payer }), payer.oldestDays == null ? null : _jsxs("small", { children: ["Oldest ", payer.oldestDays, "d"] })] }), _jsxs("span", { children: [_jsx("strong", { children: money(payer.outstanding, currency) }), payer.share == null ? null : _jsxs("small", { children: [payer.share, "% of AR"] })] })] }, payer.payer))] }) : null] }));
+}
+export function CollectionsTable({ rows, currency = "USD", onOpenBill, onOpenEor, className = "" }) {
+    return _jsxs("section", { className: `mb-card mb-collections ${className}`, children: [_jsxs("div", { className: "mb-section-head", children: [_jsxs("div", { children: [_jsx("span", { className: "mb-kicker", children: "Collections" }), _jsx("h3", { children: "Open balances" })] }), _jsxs("span", { className: "mb-badge mb-badge--neutral", children: [rows.length, " bills"] })] }), _jsx("div", { className: "mb-table-scroll", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Bill" }), _jsx("th", { children: "Patient" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Aging" }), _jsx("th", { className: "mb-numeric", children: "Charges" }), _jsx("th", { className: "mb-numeric", children: "Paid" }), _jsx("th", { className: "mb-numeric", children: "Balance" }), onOpenEor ? _jsx("th", { children: _jsx("span", { className: "mb-sr-only", children: "Actions" }) }) : null] }) }), _jsx("tbody", { children: rows.map((row) => _jsxs("tr", { children: [_jsx("td", { children: onOpenBill ? _jsxs("button", { className: "mb-link", onClick: () => onOpenBill(row), "aria-label": `Open bill ${row.billNumber}`, children: ["#", row.billNumber] }) : _jsxs(_Fragment, { children: ["#", row.billNumber] }) }), _jsx("td", { children: row.patientLabel || "—" }), _jsx("td", { children: _jsx("span", { className: "mb-badge mb-badge--neutral", children: row.status.replace(/_/g, " ") }) }), _jsx("td", { children: row.aging }), _jsx("td", { className: "mb-numeric", children: money(row.charges, currency) }), _jsx("td", { className: "mb-numeric mb-positive", children: money(row.paid, currency) }), _jsx("td", { className: "mb-numeric", children: _jsx("strong", { children: money(row.balance, currency) }) }), onOpenEor ? _jsx("td", { children: row.hasEor ? _jsx("button", { className: "mb-button mb-button--secondary", onClick: () => onOpenEor(row), "aria-label": `View EOR for bill ${row.billNumber}`, children: "View EOR" }) : null }) : null] }, row.id)) })] }) })] });
+}
+export function DocumentList({ documents, onOpen, onUpload, title = "Documents", className = "" }) {
+    return _jsxs("section", { className: `mb-card mb-documents ${className}`, children: [_jsxs("div", { className: "mb-section-head", children: [_jsxs("div", { children: [_jsx("span", { className: "mb-kicker", children: "Bill files" }), _jsx("h3", { children: title })] }), onUpload ? _jsx("button", { className: "mb-button", onClick: onUpload, children: "Upload document" }) : null] }), _jsx("ul", { children: documents.map((document) => _jsxs("li", { children: [_jsx("span", { className: "mb-file-icon", "aria-hidden": "true", children: "PDF" }), _jsxs("span", { className: "mb-file-copy", children: [_jsx("strong", { children: document.name }), _jsx("small", { children: [document.kind, document.createdAt, document.sizeLabel].filter(Boolean).join(" · ") })] }), document.status ? _jsx("span", { className: `mb-badge mb-badge--${document.status === "ready" ? "success" : document.status === "needs_attention" ? "warning" : "neutral"}`, children: document.status.replace(/_/g, " ") }) : null, onOpen ? _jsx("button", { className: "mb-button mb-button--secondary", onClick: () => onOpen(document), "aria-label": `Open ${document.name}`, children: "Open" }) : null] }, document.id)) })] });
 }
-export {
-  MindBillBillFromReport,
-  MindBillBillTimeline,
-  MindBillCollections,
-  MindBillOnboarding
-};
-//# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -0,0 +1 @@
+.mb-card{--mb-ink:#12211c;--mb-primary:#0e5c5e;--mb-positive:#267653;--mb-warning:#9a5b16;--mb-danger:#a52a2a;--mb-muted:#64716b;--mb-border:#d7ddd8;--mb-soft:#f2f5f1;box-sizing:border-box;border:1px solid var(--mb-border);border-radius:12px;background:#fffdf8;color:var(--mb-ink);font:14px/1.45 Inter Tight,ui-sans-serif,system-ui,-apple-system,sans-serif;box-shadow:0 1px 2px rgba(18,33,28,.04);overflow:hidden}.mb-card *{box-sizing:border-box}.mb-card h3{margin:4px 0 0;font-size:19px;line-height:1.2;letter-spacing:-.025em}.mb-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}.mb-kicker{color:var(--mb-muted);font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.mb-badge{display:inline-flex;align-items:center;max-width:100%;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;line-height:1.2;text-transform:capitalize;white-space:nowrap}.mb-badge--neutral{background:#e8f0ec;color:#31564a}.mb-badge--success{background:#e1f3e8;color:#226044}.mb-badge--warning{background:#f8ead5;color:#81501c}.mb-badge--danger{background:#f9e3e1;color:#922e2d}.mb-timeline{padding-bottom:18px}.mb-timeline__track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(70px,1fr));margin:0;padding:4px 18px 0;list-style:none}.mb-timeline__track:before{position:absolute;top:16px;left:8%;right:8%;height:1px;background:var(--mb-border);content:""}.mb-timeline__step{position:relative;display:flex;z-index:1;flex-direction:column;align-items:center;gap:7px;color:#7c8983;font-size:10px;font-weight:650;text-align:center}.mb-timeline__dot{display:grid;width:25px;height:25px;place-items:center;border:2px solid var(--mb-border);border-radius:50%;background:#fffdf8;color:white;font-size:12px}.mb-timeline__step--complete{color:var(--mb-positive)}.mb-timeline__step--complete .mb-timeline__dot{border-color:var(--mb-positive);background:var(--mb-positive)}.mb-timeline__step--current{color:var(--mb-primary)}.mb-timeline__step--current .mb-timeline__dot{border:7px solid var(--mb-primary);background:white}.mb-bill__context{margin:-8px 20px 0;color:var(--mb-muted);font-size:12px}.mb-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 0;border-top:1px solid var(--mb-border)}.mb-metrics>div{padding:15px 20px;border-right:1px solid var(--mb-border)}.mb-metrics>div:last-child{border:0}.mb-metrics dt{color:var(--mb-muted);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.mb-metrics dd{margin:4px 0 0;font-size:18px;font-weight:730;font-variant-numeric:tabular-nums}.mb-positive{color:var(--mb-positive)!important}.mb-card__action{border-top:1px solid var(--mb-border);padding:12px 20px}.mb-report{padding-bottom:4px}.mb-report__total{font-size:25px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.mb-aging{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:5px 20px 22px}.mb-aging__label{display:flex;justify-content:space-between;gap:8px;font-size:12px}.mb-aging__label strong{font-variant-numeric:tabular-nums}.mb-aging__bar{height:7px;margin-top:8px;border-radius:999px;background:#e5ebe7;overflow:hidden}.mb-aging__bar i{display:block;height:100%;border-radius:inherit;background:var(--mb-primary)}.mb-aging__item:nth-child(3) i{background:#bf7a2e}.mb-aging__item:nth-child(4) i{background:#a3473f}.mb-aging small,.mb-payer small,.mb-file-copy small{display:block;margin-top:5px;color:var(--mb-muted);font-size:10px}.mb-payers{border-top:1px solid var(--mb-border)}.mb-table-head,.mb-payer{display:grid;grid-template-columns:1fr auto;gap:20px;padding:11px 20px}.mb-table-head{background:var(--mb-soft);color:var(--mb-muted);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.mb-payer{align-items:center;border-top:1px solid #e7ebe8}.mb-payer:first-of-type{border-top:0}.mb-payer>span:last-child{text-align:right;font-variant-numeric:tabular-nums}.mb-table-scroll{overflow-x:auto}.mb-collections table{width:100%;border-collapse:collapse;font-size:12px}.mb-collections th,.mb-collections td{padding:11px 13px;border-top:1px solid #e5e9e6;text-align:left;white-space:nowrap}.mb-collections th{background:var(--mb-soft);color:var(--mb-muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.mb-numeric{text-align:right!important;font-variant-numeric:tabular-nums}.mb-button,.mb-link{border:0;font:inherit;cursor:pointer}.mb-button{min-height:31px;border-radius:7px;background:var(--mb-primary);color:#fff;padding:6px 10px;font-size:11px;font-weight:700}.mb-button--secondary{border:1px solid #b8c6bf;background:#fff;color:#244c40}.mb-button:hover,.mb-button:focus-visible,.mb-link:hover,.mb-link:focus-visible{filter:brightness(.92)}.mb-button:focus-visible,.mb-link:focus-visible{outline:3px solid rgba(14,92,94,.25);outline-offset:2px}.mb-link{background:transparent;color:var(--mb-primary);padding:0;font-weight:750;text-decoration:underline;text-decoration-color:#aac5bb;text-underline-offset:3px}.mb-documents ul{margin:0;padding:0;list-style:none}.mb-documents li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #e5e9e6}.mb-file-icon{display:grid;width:34px;height:38px;place-items:center;border-radius:5px;background:#e7f0ec;color:var(--mb-primary);font-size:9px;font-weight:800;letter-spacing:.05em}.mb-file-copy{min-width:0}.mb-file-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.mb-section-head{align-items:flex-start}.mb-timeline__track{grid-template-columns:repeat(6,82px);overflow-x:auto;justify-content:flex-start;padding-bottom:6px}.mb-timeline__track:before{display:none}.mb-aging{grid-template-columns:repeat(2,1fr)}.mb-documents li{grid-template-columns:auto minmax(0,1fr) auto}.mb-documents li>.mb-badge{display:none}}@media(max-width:420px){.mb-metrics{grid-template-columns:1fr}.mb-metrics>div{border-right:0;border-bottom:1px solid var(--mb-border)}.mb-aging{grid-template-columns:1fr}.mb-report__total{font-size:19px}.mb-documents li{grid-template-columns:auto minmax(0,1fr)}.mb-documents li>.mb-button{grid-column:2;justify-self:start}}

package/package.json

@@ -1,51 +1,17 @@
 {
   "name": "@mindbill/react",
-  "version": "0.1.0",
-  "description": "React components for MindBill hosted billing workflows",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    "./styles.css": "./dist/styles.css"
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "peerDependencies": {
-    "react": ">=18"
-  },
-  "dependencies": {
-    "@mindbill/embed": "^0.2.0"
-  },
-  "keywords": [
-    "mindbill",
-    "react",
-    "medical-legal",
-    "workers-compensation",
-    "widget"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/incidentfox/mindbill-widgets.git",
-    "directory": "packages/react"
-  },
-  "homepage": "https://github.com/incidentfox/mindbill-widgets#readme",
-  "bugs": {
-    "url": "https://github.com/incidentfox/mindbill-widgets/issues"
-  },
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "sideEffects": true,
+  "files": ["dist", "README.md"],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm --dts --clean --sourcemap --external react --external react/jsx-runtime",
-    "clean": "rm -rf dist"
-  }
-}
+    "build": "tsc -p tsconfig.build.json && node -e \"require('node:fs').copyFileSync('src/styles.css','dist/styles.css')\""
+  },
+  "dependencies": { "@mindbill/embed": "^0.2.0" },
+  "peerDependencies": { "react": ">=18" }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 IncidentFox, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport \"@mindbill/embed\";\nimport type { CSSProperties, ReactElement } from \"react\";\nimport { createElement, useEffect, useRef } from \"react\";\nimport type { MindBillAppearance, MindBillErrorDetail, MindBillEventDetail } from \"@mindbill/embed\";\n\nexport type MindBillWidgetProps = {\n  sessionToken: string;\n  embedUrl: string;\n  appearance?: MindBillAppearance;\n  className?: string;\n  style?: CSSProperties;\n  onMindBill?: (event: CustomEvent<MindBillEventDetail>) => void;\n  onMindBillError?: (event: CustomEvent<MindBillErrorDetail>) => void;\n};\n\nfunction widget(tagName: string, props: MindBillWidgetProps): ReactElement {\n  const ref = useRef<HTMLElement | null>(null);\n  const { onMindBill, onMindBillError } = props;\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const handleEvent = (event: Event) => onMindBill?.(event as CustomEvent<MindBillEventDetail>);\n    const handleError = (event: Event) => onMindBillError?.(event as CustomEvent<MindBillErrorDetail>);\n    element.addEventListener(\"mindbill\", handleEvent);\n    element.addEventListener(\"mindbill-error\", handleError);\n    return () => {\n      element.removeEventListener(\"mindbill\", handleEvent);\n      element.removeEventListener(\"mindbill-error\", handleError);\n    };\n  }, [onMindBill, onMindBillError]);\n\n  return createElement(tagName, {\n    ref,\n    \"session-token\": props.sessionToken,\n    \"embed-url\": props.embedUrl,\n    theme: props.appearance?.theme,\n    \"accent-color\": props.appearance?.accentColor,\n    locale: props.appearance?.locale,\n    class: props.className,\n    style: props.style,\n  });\n}\n\nexport function MindBillBillTimeline(props: MindBillWidgetProps): ReactElement {\n  return widget(\"mindbill-bill-timeline\", props);\n}\nexport function MindBillBillFromReport(props: MindBillWidgetProps): ReactElement {\n  return widget(\"mindbill-bill-from-report\", props);\n}\nexport function MindBillCollections(props: MindBillWidgetProps): ReactElement {\n  return widget(\"mindbill-collections\", props);\n}\nexport function MindBillOnboarding(props: MindBillWidgetProps): ReactElement {\n  return widget(\"mindbill-onboarding\", props);\n}\n\nexport type { MindBillAppearance, MindBillErrorDetail, MindBillEventDetail } from \"@mindbill/embed\";\n"],"mappings":";;;AAEA,OAAO;AAEP,SAAS,eAAe,WAAW,cAAc;AAajD,SAAS,OAAO,SAAiB,OAA0C;AACzE,QAAM,MAAM,OAA2B,IAAI;AAC3C,QAAM,EAAE,YAAY,gBAAgB,IAAI;AACxC,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,cAAc,CAAC,UAAiB,aAAa,KAAyC;AAC5F,UAAM,cAAc,CAAC,UAAiB,kBAAkB,KAAyC;AACjG,YAAQ,iBAAiB,YAAY,WAAW;AAChD,YAAQ,iBAAiB,kBAAkB,WAAW;AACtD,WAAO,MAAM;AACX,cAAQ,oBAAoB,YAAY,WAAW;AACnD,cAAQ,oBAAoB,kBAAkB,WAAW;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,SAAO,cAAc,SAAS;AAAA,IAC5B;AAAA,IACA,iBAAiB,MAAM;AAAA,IACvB,aAAa,MAAM;AAAA,IACnB,OAAO,MAAM,YAAY;AAAA,IACzB,gBAAgB,MAAM,YAAY;AAAA,IAClC,QAAQ,MAAM,YAAY;AAAA,IAC1B,OAAO,MAAM;AAAA,IACb,OAAO,MAAM;AAAA,EACf,CAAC;AACH;AAEO,SAAS,qBAAqB,OAA0C;AAC7E,SAAO,OAAO,0BAA0B,KAAK;AAC/C;AACO,SAAS,uBAAuB,OAA0C;AAC/E,SAAO,OAAO,6BAA6B,KAAK;AAClD;AACO,SAAS,oBAAoB,OAA0C;AAC5E,SAAO,OAAO,wBAAwB,KAAK;AAC7C;AACO,SAAS,mBAAmB,OAA0C;AAC3E,SAAO,OAAO,uBAAuB,KAAK;AAC5C;","names":[]}