@happyvertical/smrt-commerce 0.30.0

package/dist/svelte/components/InvoiceTotals.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+/**
+ * InvoiceTotals - Totals section for invoices/estimates
+ *
+ * Displays subtotal, tax, total, and optional amount paid/balance due.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+/** Props for InvoiceTotals component */
+export interface Props {
+  /** Subtotal in cents */
+  subtotal: number;
+  /** Tax rate as percentage (e.g., 5 for 5%) */
+  taxRate?: number;
+  /** Tax amount in cents (calculated from rate if not provided) */
+  taxAmount?: number;
+  /** Total in cents */
+  total: number;
+  /** Amount already paid in cents */
+  amountPaid?: number;
+  /** Currency code */
+  currency?: 'CAD' | 'USD';
+  /** Show tax breakdown */
+  showTax?: boolean;
+  /** Show payment status */
+  showPaid?: boolean;
+  /** Tax label */
+  taxLabel?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const {
+  subtotal,
+  taxRate = 0,
+  taxAmount,
+  total,
+  amountPaid = 0,
+  currency = 'CAD',
+  showTax = true,
+  showPaid = false,
+  taxLabel = 'GST',
+  size = 'md',
+}: Props = $props();
+
+// Calculate tax if not provided
+const calculatedTax = $derived(
+  taxAmount ?? Math.round(subtotal * (taxRate / 100)),
+);
+
+// Calculate balance due
+const balanceDue = $derived(total - amountPaid);
+
+// Format cents to dollars
+function formatMoney(cents: number): string {
+  return new Intl.NumberFormat('en-CA', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(cents / 100);
+}
+</script>
+
+<div class="invoice-totals" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  <div class="totals-row">
+    <span class="totals-label">Subtotal</span>
+    <span class="totals-value">{formatMoney(subtotal)}</span>
+  </div>
+
+  {#if showTax && (taxRate > 0 || calculatedTax > 0)}
+    <div class="totals-row">
+      <span class="totals-label">{taxLabel} ({taxRate}%)</span>
+      <span class="totals-value">{formatMoney(calculatedTax)}</span>
+    </div>
+  {/if}
+
+  <div class="totals-row total">
+    <span class="totals-label">Total</span>
+    <span class="totals-value">{formatMoney(total)}</span>
+  </div>
+
+  {#if showPaid && amountPaid > 0}
+    <div class="totals-row paid">
+      <span class="totals-label">{t(M['commerce.invoice_totals.amount_paid'])}</span>
+      <span class="totals-value">-{formatMoney(amountPaid)}</span>
+    </div>
+
+    <div class="totals-row balance" class:due={balanceDue > 0} class:credit={balanceDue < 0}>
+      <span class="totals-label">
+        {#if balanceDue > 0}
+          {t(M['commerce.invoice_totals.balance_due'])}
+        {:else if balanceDue < 0}
+          {t(M['commerce.invoice_totals.credit'])}
+        {:else}
+          {t(M['commerce.invoice_totals.paid_in_full'])}
+        {/if}
+      </span>
+      <span class="totals-value">{formatMoney(Math.abs(balanceDue))}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .invoice-totals {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    width: 100%;
+    max-width: 280px;
+    margin-left: auto;
+  }
+
+  .invoice-totals.sm {
+    max-width: 220px;
+    gap: var(--smrt-spacing-1_5, 0.375rem);
+  }
+
+  .invoice-totals.lg {
+    max-width: 320px;
+    gap: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .totals-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .sm .totals-row {
+    font: var(--smrt-typography-body-small-font);
+  }
+
+  .lg .totals-row {
+    font: var(--smrt-typography-body-large-font);
+  }
+
+  .totals-label {
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .totals-value {
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .totals-row.total {
+    padding-top: var(--smrt-spacing-2, 0.5rem);
+    border-top: 2px solid var(--smrt-color-outline-variant, #c4c6d0);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .totals-row.total .totals-label,
+  .totals-row.total .totals-value {
+    color: var(--smrt-color-on-surface, #1c1b1f);
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .lg .totals-row.total .totals-label,
+  .lg .totals-row.total .totals-value {
+    font: var(--smrt-typography-title-large-font);
+  }
+
+  .totals-row.paid {
+    color: var(--smrt-color-tertiary, #006c4c);
+  }
+
+  .totals-row.paid .totals-label {
+    color: var(--smrt-color-tertiary, #006c4c);
+  }
+
+  .totals-row.balance {
+    padding-top: var(--smrt-spacing-2, 0.5rem);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .totals-row.balance.due .totals-label,
+  .totals-row.balance.due .totals-value {
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .totals-row.balance.credit .totals-label,
+  .totals-row.balance.credit .totals-value {
+    color: var(--smrt-color-tertiary, #006c4c);
+  }
+</style>

package/dist/svelte/components/InvoiceTotals.svelte.d.ts

@@ -0,0 +1,27 @@
+/** Props for InvoiceTotals component */
+export interface Props {
+    /** Subtotal in cents */
+    subtotal: number;
+    /** Tax rate as percentage (e.g., 5 for 5%) */
+    taxRate?: number;
+    /** Tax amount in cents (calculated from rate if not provided) */
+    taxAmount?: number;
+    /** Total in cents */
+    total: number;
+    /** Amount already paid in cents */
+    amountPaid?: number;
+    /** Currency code */
+    currency?: 'CAD' | 'USD';
+    /** Show tax breakdown */
+    showTax?: boolean;
+    /** Show payment status */
+    showPaid?: boolean;
+    /** Tax label */
+    taxLabel?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const InvoiceTotals: import("svelte").Component<Props, {}, "">;
+type InvoiceTotals = ReturnType<typeof InvoiceTotals>;
+export default InvoiceTotals;
+//# sourceMappingURL=InvoiceTotals.svelte.d.ts.map

package/dist/svelte/components/InvoiceTotals.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceTotals.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceTotals.svelte.ts"],"names":[],"mappings":"AAYA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAoFD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/UnbilledItems.svelte

@@ -0,0 +1,355 @@
+<script lang="ts">
+/**
+ * UnbilledItems - Selectable list of unbilled expenses/time
+ *
+ * Shows unbilled items with checkbox selection for invoice creation.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { UnbilledItem } from '../types.js';
+
+const { t } = useI18n();
+
+/** Props for UnbilledItems component */
+export interface Props {
+  /** Unbilled items */
+  items: UnbilledItem[];
+  /** Currency code */
+  currency?: 'CAD' | 'USD';
+  /** Called when selection changes */
+  onselectionchange?: (selectedIds: string[]) => void;
+  /** Called when create invoice is clicked */
+  oncreate?: (selectedIds: string[]) => void;
+  /** Empty state message */
+  emptyMessage?: string;
+}
+
+let {
+  items = $bindable([]),
+  currency = 'CAD',
+  onselectionchange,
+  oncreate,
+  emptyMessage = 'No unbilled items',
+}: Props = $props();
+
+// Track selection state
+let selectedIds = $state<Set<string>>(
+  new Set(items.filter((i) => i.selected).map((i) => i.id)),
+);
+
+// Update parent when selection changes
+$effect(() => {
+  onselectionchange?.([...selectedIds]);
+});
+
+// Format money
+function formatMoney(cents: number): string {
+  return new Intl.NumberFormat('en-CA', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(cents / 100);
+}
+
+// Format date
+function formatDate(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return new Intl.DateTimeFormat('en-CA', {
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+// Toggle item selection
+function toggleItem(id: string) {
+  if (selectedIds.has(id)) {
+    selectedIds.delete(id);
+  } else {
+    selectedIds.add(id);
+  }
+  selectedIds = new Set(selectedIds); // Trigger reactivity
+}
+
+// Toggle all items
+function toggleAll() {
+  if (selectedIds.size === items.length) {
+    selectedIds = new Set();
+  } else {
+    selectedIds = new Set(items.map((i) => i.id));
+  }
+}
+
+// Calculate selected total
+const selectedTotal = $derived(
+  items
+    .filter((i) => selectedIds.has(i.id))
+    .reduce((sum, i) => sum + i.amount, 0),
+);
+
+// All selected
+const allSelected = $derived(
+  selectedIds.size === items.length && items.length > 0,
+);
+const someSelected = $derived(
+  selectedIds.size > 0 && selectedIds.size < items.length,
+);
+</script>
+
+<div class="unbilled-items">
+  {#if items.length === 0}
+    <div class="empty-state">
+      <p>{emptyMessage}</p>
+    </div>
+  {:else}
+    <div class="items-header">
+      <label class="select-all">
+        <input
+          type="checkbox"
+          checked={allSelected}
+          indeterminate={someSelected}
+          onchange={toggleAll}
+        />
+        <span>{t(M['commerce.unbilled_items.select_all'])}</span>
+      </label>
+      <span class="selected-count">
+        {t(M['commerce.unbilled_items.selected_count'], { selected: selectedIds.size, total: items.length })}
+      </span>
+    </div>
+
+    <div class="items-list">
+      {#each items as item (item.id)}
+        <label class="item-row" class:selected={selectedIds.has(item.id)}>
+          <input
+            type="checkbox"
+            checked={selectedIds.has(item.id)}
+            onchange={() => toggleItem(item.id)}
+          />
+          <div class="item-content">
+            <div class="item-main">
+              <span class="item-type type-{item.type}">{item.type}</span>
+              <span class="item-description">{item.description}</span>
+            </div>
+            <div class="item-meta">
+              {#if item.category}
+                <span class="item-category">{item.category}</span>
+              {/if}
+              <span class="item-date">{formatDate(item.date)}</span>
+            </div>
+          </div>
+          <span class="item-amount">{formatMoney(item.amount)}</span>
+        </label>
+      {/each}
+    </div>
+
+    {#if selectedIds.size > 0}
+      <div class="items-footer">
+        <div class="selected-summary">
+          <span class="summary-label">{t(M['commerce.unbilled_items.selected_total'])}</span>
+          <span class="summary-value">{formatMoney(selectedTotal)}</span>
+        </div>
+        {#if oncreate}
+          <button
+            type="button"
+            class="create-btn"
+            onclick={() => oncreate?.([...selectedIds])}
+          >
+            {t(M['commerce.unbilled_items.create_invoice'])}
+          </button>
+        {/if}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .unbilled-items {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    overflow: hidden;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--smrt-spacing-8, 2rem) var(--smrt-spacing-4, 1rem);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .empty-state p {
+    margin: 0;
+  }
+
+  .items-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
+    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .select-all {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+    cursor: pointer;
+  }
+
+  .selected-count {
+    font: var(--smrt-typography-label-small-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .items-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+    overflow-y: auto;
+    background: var(--smrt-color-surface, #ffffff);
+  }
+
+  .item-row {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
+    border-bottom: 1px solid var(--smrt-color-surface-variant, #e7e0ec);
+    cursor: pointer;
+    transition: background var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .item-row {
+      transition: none;
+    }
+  }
+
+  .item-row:hover {
+    background: var(--smrt-color-surface-container-low, #f7f2fa);
+  }
+
+  .item-row.selected {
+    background: var(--smrt-color-primary-container, #d3e3fd);
+  }
+
+  .item-row:last-child {
+    border-bottom: none;
+  }
+
+  .item-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    min-width: 0;
+  }
+
+  .item-main {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .item-type {
+    display: inline-flex;
+    padding: var(--smrt-spacing-0_5, 0.125rem) var(--smrt-spacing-2, 0.5rem);
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .type-expense {
+    background: var(--smrt-color-tertiary-container, #ddf5e5);
+    color: var(--smrt-color-on-tertiary-container, #0c1f15);
+  }
+
+  .type-time {
+    background: var(--smrt-color-primary-container, #d3e3fd);
+    color: var(--smrt-color-on-primary-container, #041e49);
+  }
+
+  .item-description {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .item-meta {
+    display: flex;
+    gap: var(--smrt-spacing-3, 0.75rem);
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .item-category {
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .item-amount {
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .items-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--smrt-spacing-4, 1rem);
+    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .selected-summary {
+    display: flex;
+    align-items: baseline;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .summary-label {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .summary-value {
+    font: var(--smrt-typography-title-large-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+
+  .create-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-4, 1rem);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-primary, #ffffff);
+    background: var(--smrt-color-primary, #005ac1);
+    border: none;
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    cursor: pointer;
+    transition: background var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .create-btn {
+      transition: none;
+    }
+  }
+
+  .create-btn:hover {
+    background: color-mix(in srgb, var(--smrt-color-primary, #005ac1) 85%, var(--smrt-color-shadow, #000));
+  }
+</style>

package/dist/svelte/components/UnbilledItems.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { UnbilledItem } from '../types.js';
+/** Props for UnbilledItems component */
+export interface Props {
+    /** Unbilled items */
+    items: UnbilledItem[];
+    /** Currency code */
+    currency?: 'CAD' | 'USD';
+    /** Called when selection changes */
+    onselectionchange?: (selectedIds: string[]) => void;
+    /** Called when create invoice is clicked */
+    oncreate?: (selectedIds: string[]) => void;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare const UnbilledItems: import("svelte").Component<Props, {}, "items">;
+type UnbilledItems = ReturnType<typeof UnbilledItems>;
+export default UnbilledItems;
+//# sourceMappingURL=UnbilledItems.svelte.d.ts.map

package/dist/svelte/components/UnbilledItems.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnbilledItems.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/UnbilledItems.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2ID,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/i18n.d.ts

@@ -0,0 +1,19 @@
+export declare const M: {
+    readonly 'commerce.invoice_actions.send_invoice': "commerce.invoice_actions.send_invoice";
+    readonly 'commerce.invoice_actions.mark_as_paid': "commerce.invoice_actions.mark_as_paid";
+    readonly 'commerce.invoice_header.issue_date': "commerce.invoice_header.issue_date";
+    readonly 'commerce.invoice_header.due_date': "commerce.invoice_header.due_date";
+    readonly 'commerce.invoice_header.paid_date': "commerce.invoice_header.paid_date";
+    readonly 'commerce.invoice_line_items.add_item': "commerce.invoice_line_items.add_item";
+    readonly 'commerce.invoice_line_items.unit_price': "commerce.invoice_line_items.unit_price";
+    readonly 'commerce.invoice_line_items.remove_item': "commerce.invoice_line_items.remove_item";
+    readonly 'commerce.invoice_totals.amount_paid': "commerce.invoice_totals.amount_paid";
+    readonly 'commerce.invoice_totals.balance_due': "commerce.invoice_totals.balance_due";
+    readonly 'commerce.invoice_totals.credit': "commerce.invoice_totals.credit";
+    readonly 'commerce.invoice_totals.paid_in_full': "commerce.invoice_totals.paid_in_full";
+    readonly 'commerce.unbilled_items.select_all': "commerce.unbilled_items.select_all";
+    readonly 'commerce.unbilled_items.selected_count': "commerce.unbilled_items.selected_count";
+    readonly 'commerce.unbilled_items.selected_total': "commerce.unbilled_items.selected_total";
+    readonly 'commerce.unbilled_items.create_invoice': "commerce.unbilled_items.create_invoice";
+};
+//# sourceMappingURL=i18n.d.ts.map

package/dist/svelte/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;CAiBZ,CAAC"}

package/dist/svelte/i18n.js

@@ -0,0 +1,19 @@
+import { defineMessages } from '@happyvertical/smrt-ui/i18n';
+export const M = defineMessages({
+    'commerce.invoice_actions.send_invoice': 'Send Invoice',
+    'commerce.invoice_actions.mark_as_paid': 'Mark as Paid',
+    'commerce.invoice_header.issue_date': 'Issue Date',
+    'commerce.invoice_header.due_date': 'Due Date',
+    'commerce.invoice_header.paid_date': 'Paid Date',
+    'commerce.invoice_line_items.add_item': 'Add Item',
+    'commerce.invoice_line_items.unit_price': 'Unit Price',
+    'commerce.invoice_line_items.remove_item': 'Remove item',
+    'commerce.invoice_totals.amount_paid': 'Amount Paid',
+    'commerce.invoice_totals.balance_due': 'Balance Due',
+    'commerce.invoice_totals.credit': 'Credit',
+    'commerce.invoice_totals.paid_in_full': 'Paid in Full',
+    'commerce.unbilled_items.select_all': 'Select All',
+    'commerce.unbilled_items.selected_count': '{selected} of {total} selected',
+    'commerce.unbilled_items.selected_total': 'Selected Total:',
+    'commerce.unbilled_items.create_invoice': 'Create Invoice',
+});

package/dist/svelte/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Commerce Svelte Components
+ *
+ * This module auto-registers all commerce UI components with the ModuleUIRegistry
+ * when imported. Import this module to enable registry-based component discovery.
+ *
+ * @example Direct imports
+ * ```typescript
+ * import { InvoiceCard, InvoiceHeader } from '@happyvertical/smrt-commerce/svelte';
+ * ```
+ *
+ * @example Registry-based discovery
+ * ```typescript
+ * import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
+ * import '@happyvertical/smrt-commerce/svelte'; // Auto-registers components
+ *
+ * const Component = ModuleUIRegistry.get('@happyvertical/smrt-commerce', 'invoice-card');
+ * ```
+ */
+import type { ComponentProps } from 'svelte';
+import InvoiceActions from './components/InvoiceActions.svelte';
+import InvoiceCard from './components/InvoiceCard.svelte';
+import InvoiceHeader from './components/InvoiceHeader.svelte';
+import InvoiceLineItems from './components/InvoiceLineItems.svelte';
+import InvoiceTotals from './components/InvoiceTotals.svelte';
+import UnbilledItems from './components/UnbilledItems.svelte';
+export type InvoiceActionsProps = ComponentProps<typeof InvoiceActions>;
+export { default as InvoiceActions } from './components/InvoiceActions.svelte';
+export type InvoiceCardProps = ComponentProps<typeof InvoiceCard>;
+export { default as InvoiceCard } from './components/InvoiceCard.svelte';
+export type InvoiceHeaderProps = ComponentProps<typeof InvoiceHeader>;
+export { default as InvoiceHeader } from './components/InvoiceHeader.svelte';
+export type InvoiceLineItemsProps = ComponentProps<typeof InvoiceLineItems>;
+export { default as InvoiceLineItems } from './components/InvoiceLineItems.svelte';
+export type InvoiceTotalsProps = ComponentProps<typeof InvoiceTotals>;
+export { default as InvoiceTotals } from './components/InvoiceTotals.svelte';
+export type UnbilledItemsProps = ComponentProps<typeof UnbilledItems>;
+export { default as UnbilledItems } from './components/UnbilledItems.svelte';
+export type { InvoiceData, InvoiceStatus, LineItem, UnbilledItem, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAC1D,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAG9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAE7E,YAAY,EACV,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,YAAY,CAAC"}