@mindbill/react 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+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/README.md

@@ -1,77 +1,11 @@
 # @mindbill/react
 
-MindBill's partner-facing React components. The package includes two integration
-levels:
+React wrappers for the secure `@mindbill/embed` custom elements. See the [widget guide](https://github.com/incidentfox/mindbill-widgets/blob/main/docs/widgets.md).
 
-- 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.
+Published on npm as [`@mindbill/react`](https://www.npmjs.com/package/@mindbill/react). Install it with `npm install @mindbill/react @mindbill/embed` or your preferred package manager.
 
 ```tsx
-import "@mindbill/react/styles.css";
+import { HostedBillReview } from "@mindbill/react";
 ```
 
-## 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).
+Create the short-lived embed session on your server; never send a Partner API key to React/browser code.

package/dist/index.d.ts

@@ -1,145 +1,25 @@
-import "@mindbill/embed";
-import { type CSSProperties, type ReactNode } from "react";
-import type { MindBillEvent } from "@mindbill/embed";
-export type MindBillWidgetProps = {
+import { MindBillAppearance, MindBillEventDetail, MindBillErrorDetail } from '@mindbill/embed';
+export { MindBillAppearance, MindBillErrorDetail, MindBillEventDetail } from '@mindbill/embed';
+import { CSSProperties, ReactElement } from 'react';
+
+type MindBillWidgetProps = {
     sessionToken: string;
     embedUrl: string;
-    onMindBill?: (event: MindBillEvent) => void;
+    appearance?: MindBillAppearance;
     className?: string;
     style?: CSSProperties;
-};
-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;
+    onMindBill?: (event: CustomEvent<MindBillEventDetail>) => void;
+    onMindBillError?: (event: CustomEvent<MindBillErrorDetail>) => void;
+};
+declare function MindBillBillTimeline(props: MindBillWidgetProps): ReactElement;
+declare function MindBillBillReview(props: MindBillWidgetProps): ReactElement;
+declare function MindBillBillFromReport(props: MindBillWidgetProps): ReactElement;
+declare function MindBillCollections(props: MindBillWidgetProps): ReactElement;
+declare function MindBillOnboarding(props: MindBillWidgetProps): ReactElement;
+declare const HostedBillTimeline: typeof MindBillBillTimeline;
+declare const HostedBillReview: typeof MindBillBillReview;
+declare const HostedBillFromReport: typeof MindBillBillFromReport;
+declare const HostedCollections: typeof MindBillCollections;
+declare const HostedOnboarding: typeof MindBillOnboarding;
+
+export { HostedBillFromReport, HostedBillReview, HostedBillTimeline, HostedCollections, HostedOnboarding, MindBillBillFromReport, MindBillBillReview, MindBillBillTimeline, MindBillCollections, MindBillOnboarding, type MindBillWidgetProps };

package/dist/index.js

@@ -1,57 +1,64 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
+// src/index.tsx
 import "@mindbill/embed";
 import { createElement, useEffect, useRef } from "react";
-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 });
+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);
     };
+  }, [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
+  });
 }
-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 MindBillBillTimeline(props) {
+  return widget("mindbill-bill-timeline", props);
 }
-function money(value, currency = "USD") {
-    return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 2 }).format(value);
+function MindBillBillReview(props) {
+  return widget("mindbill-bill-review", 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 MindBillBillFromReport(props) {
+  return widget("mindbill-bill-from-report", 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] }));
+function MindBillCollections(props) {
+  return widget("mindbill-collections", props);
 }
-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)) })] });
+function MindBillOnboarding(props) {
+  return widget("mindbill-onboarding", props);
 }
+var HostedBillTimeline = MindBillBillTimeline;
+var HostedBillReview = MindBillBillReview;
+var HostedBillFromReport = MindBillBillFromReport;
+var HostedCollections = MindBillCollections;
+var HostedOnboarding = MindBillOnboarding;
+export {
+  HostedBillFromReport,
+  HostedBillReview,
+  HostedBillTimeline,
+  HostedCollections,
+  HostedOnboarding,
+  MindBillBillFromReport,
+  MindBillBillReview,
+  MindBillBillTimeline,
+  MindBillCollections,
+  MindBillOnboarding
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"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 {\n  MindBillAppearance,\n  MindBillErrorDetail,\n  MindBillEventDetail,\n} 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) =>\n      onMindBill?.(event as CustomEvent<MindBillEventDetail>);\n    const handleError = (event: Event) =>\n      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 MindBillBillReview(props: MindBillWidgetProps): ReactElement {\n  return widget(\"mindbill-bill-review\", props);\n}\nexport function MindBillBillFromReport(\n  props: MindBillWidgetProps,\n): 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 const HostedBillTimeline = MindBillBillTimeline;\nexport const HostedBillReview = MindBillBillReview;\nexport const HostedBillFromReport = MindBillBillFromReport;\nexport const HostedCollections = MindBillCollections;\nexport const HostedOnboarding = MindBillOnboarding;\n\nexport type {\n  MindBillAppearance,\n  MindBillErrorDetail,\n  MindBillEventDetail,\n} from \"@mindbill/embed\";\n"],"mappings":";;;AAEA,OAAO;AAEP,SAAS,eAAe,WAAW,cAAc;AAiBjD,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,UACnB,aAAa,KAAyC;AACxD,UAAM,cAAc,CAAC,UACnB,kBAAkB,KAAyC;AAC7D,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,mBAAmB,OAA0C;AAC3E,SAAO,OAAO,wBAAwB,KAAK;AAC7C;AACO,SAAS,uBACd,OACc;AACd,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;AAEO,IAAM,qBAAqB;AAC3B,IAAM,mBAAmB;AACzB,IAAM,uBAAuB;AAC7B,IAAM,oBAAoB;AAC1B,IAAM,mBAAmB;","names":[]}

package/package.json

@@ -1,17 +1,51 @@
 {
   "name": "@mindbill/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
+  "description": "React components for MindBill hosted billing workflows",
   "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" },
-    "./styles.css": "./dist/styles.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
-  "files": ["dist", "README.md"],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node -e \"require('node:fs').copyFileSync('src/styles.css','dist/styles.css')\""
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@mindbill/embed": "^0.3.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"
   },
-  "dependencies": { "@mindbill/embed": "^0.2.0" },
-  "peerDependencies": { "react": ">=18" }
-}
+  "homepage": "https://github.com/incidentfox/mindbill-widgets#readme",
+  "bugs": {
+    "url": "https://github.com/incidentfox/mindbill-widgets/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": true,
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm --dts --clean --sourcemap --external react --external react/jsx-runtime",
+    "clean": "rm -rf dist"
+  }
+}

package/dist/styles.css

@@ -1 +0,0 @@
-.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}}