@thorprovider/blocks 4.0.0 → 4.3.0

package/dist/blocks/designs/order-history/components/order-history.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-history/components/order-history.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '@thorprovider/blocks'\n\nimport type {\n  BulkActionId,\n  BulkSelection,\n  OrderActionId,\n  OrderHistoryLabels,\n  OrderHistoryProps,\n  OrderRecord,\n  OrdersPage,\n  OrdersQuery,\n  Presentation,\n  QuickFilterId,\n  SortId,\n  TableColumnId,\n} from '../contracts'\nimport {\n  DEFAULT_B2B_COLUMNS,\n  DEFAULT_COLUMNS,\n  DEFAULT_PAGE_SIZE,\n  SORT_IDS,\n} from '../contracts'\nimport { defaultQuery } from '../engine'\nimport { fillTemplate } from '../money'\nimport { BulkBar } from './bulk-bar'\nimport { Controls } from './controls'\nimport { EmptyState, ErrorState, ForbiddenState, PartialNotice, ResultsSkeleton } from './feedback'\nimport { OrderHistoryHeader } from './header'\nimport { OrderCard } from './order-card'\nimport { OrderTable } from './order-table'\nimport { Pagination } from './pagination'\n\nconst SEARCH_DEBOUNCE = 250\n\n/**\n * The order-history surface. It owns the query, calls the data source and\n * renders the collection; it never fetches a URL, stores anything or performs a\n * business operation — every action leaves through a callback.\n */\nexport function OrderHistory({\n  mode,\n  capabilities,\n  dataSource,\n  labels,\n  locale = 'es-MX',\n  formatMoney: formatMoneyProp,\n  formatDate,\n  presentation = 'cards',\n  columns,\n  sortOptions = SORT_IDS,\n  title,\n  description,\n  breadcrumbs,\n  headerActions,\n  pageSize = DEFAULT_PAGE_SIZE,\n  access = 'allowed',\n  initialQuery,\n  onQueryChange,\n  onPresentationChange,\n  onOrderSelect,\n  onOrderSelectRecord,\n  onOrderAction,\n  onBulkAction,\n}: OrderHistoryProps) {\n  const initial = useRef<OrdersQuery>({\n    ...defaultQuery(pageSize),\n    ...initialQuery,\n  })\n  const [query, setQuery] = useState<OrdersQuery>(initial.current)\n  const [searchDraft, setSearchDraft] = useState(initial.current.search)\n  const [page, setPage] = useState<OrdersPage | null>(null)\n  const [status, setStatus] = useState<'loading' | 'refreshing' | 'ready' | 'error'>('loading')\n  const [attempt, setAttempt] = useState(0)\n  const [selected, setSelected] = useState<BulkSelection | null>(null)\n  const [view, setView] = useState<Presentation>(presentation)\n  const [columnSet, setColumnSet] = useState<TableColumnId[]>(\n    () => columns ?? (mode === 'b2b' ? DEFAULT_B2B_COLUMNS : DEFAULT_COLUMNS),\n  )\n  const hasPage = useRef(false)\n  const lastEmitted = useRef<OrdersQuery | null>(null)\n\n  useEffect(() => {\n    if (searchDraft === query.search) return\n    const timer = setTimeout(() => {\n      setQuery((current) => ({ ...current, search: searchDraft, page: 1 }))\n      setSelected(null)\n    }, SEARCH_DEBOUNCE)\n    return () => clearTimeout(timer)\n  }, [searchDraft, query.search])\n\n  useEffect(() => {\n    if (access === 'forbidden') return\n    const controller = new AbortController()\n    let active = true\n    setStatus(hasPage.current ? 'refreshing' : 'loading')\n    dataSource\n      .list(query, { signal: controller.signal })\n      .then((result) => {\n        if (!active) return\n        hasPage.current = true\n        setPage(result)\n        setStatus('ready')\n      })\n      .catch((error: unknown) => {\n        if (!active) return\n        if (error instanceof Error && error.name === 'AbortError') return\n        setStatus('error')\n      })\n    return () => {\n      active = false\n      controller.abort()\n    }\n  }, [access, dataSource, query, attempt])\n\n  useEffect(() => {\n    if (lastEmitted.current === query) return\n    lastEmitted.current = query\n    onQueryChange?.(query)\n  }, [query, onQueryChange])\n\n  const updateQuery = (patch: Partial<OrdersQuery>) => {\n    setQuery((current) => ({ ...current, ...patch, page: patch.page ?? 1 }))\n    const pageOnly = Object.keys(patch).length === 1 && patch.page !== undefined\n    if (!pageOnly) setSelected(null)\n  }\n\n  const resetQuery = () => {\n    setSearchDraft('')\n    updateQuery({ search: '', quick: 'all', filters: {}, date: undefined, amount: undefined })\n  }\n\n  const selectedIds = useMemo(\n    () => new Set(selected?.kind === 'orders' ? selected.ids : []),\n    [selected],\n  )\n  const selectionMode = selected?.kind === 'query' ? 'query' : 'orders'\n\n  const rows = page?.items ?? []\n  const allPageSelected = rows.length > 0 && rows.every((order) => selectedIds.has(order.id))\n  const selectable = capabilities.bulkSelection === true\n  const tableEnabled = capabilities.tableView === true\n  const currentView: Presentation = tableEnabled ? view : 'cards'\n  const currentPage = page ? Math.min(query.page, page.pageCount) : query.page\n\n  const resultLabel =\n    page === null\n      ? ''\n      : page.total === 1\n        ? labels.header.resultsOne\n        : fillTemplate(labels.header.results, { count: page.total })\n\n  const toggleOrder = (id: string) => {\n    const ids = new Set(selectedIds)\n    if (ids.has(id)) ids.delete(id)\n    else ids.add(id)\n    setSelected(ids.size === 0 ? null : { kind: 'orders', ids: [...ids], count: ids.size })\n  }\n\n  const togglePage = () => {\n    if (selectionMode === 'query') return\n    if (allPageSelected) {\n      setSelected(null)\n      return\n    }\n    setSelected({ kind: 'orders', ids: rows.map((order) => order.id), count: rows.length })\n  }\n\n  const openOrder = (order: OrderRecord) => {\n    onOrderSelect?.(order.id)\n    onOrderSelectRecord?.(order)\n  }\n  const toggleColumn = (column: TableColumnId) => {\n    setColumnSet((current) => {\n      const next = current.includes(column)\n        ? current.filter((entry) => entry !== column)\n        : [...current, column]\n      return next.length === 0 ? current : next\n    })\n  }\n  const runAction = (action: OrderActionId, order: OrderRecord) => onOrderAction?.(action, order)\n  const runBulk = (action: BulkActionId) => {\n    if (selected) onBulkAction?.(action, selected)\n  }\n\n  const headingId = useId()\n\n  const cardList = (\n    <ul className=\"space-y-3\">\n      {rows.map((order) => (\n        <OrderCard\n          key={order.id}\n          order={order}\n          labels={labels}\n          locale={locale}\n          formatMoney={formatMoneyProp}\n          formatDate={formatDate}\n          capabilities={capabilities}\n          selectable={selectable}\n          selectionMode={selectionMode}\n          selected={selectionMode === 'query' || selectedIds.has(order.id)}\n          onToggle={toggleOrder}\n          onOpen={openOrder}\n          onAction={runAction}\n        />\n      ))}\n    </ul>\n  )\n\n  const table = (\n    <OrderTable\n      orders={rows}\n      columns={columnSet}\n      labels={labels}\n      locale={locale}\n      formatMoney={formatMoneyProp}\n      formatDate={formatDate}\n      capabilities={capabilities}\n      selectable={selectable}\n      selectionMode={selectionMode}\n      selectedIds={selectedIds}\n      allPageSelected={allPageSelected}\n      onToggle={toggleOrder}\n      onTogglePage={togglePage}\n      onOpen={openOrder}\n      onAction={runAction}\n      sort={query.sort}\n      onSort={(sort: SortId) => updateQuery({ sort })}\n    />\n  )\n\n  let content: ReactNode\n  if (status === 'loading' && page === null) {\n    content = <ResultsSkeleton presentation={currentView} labels={labels.states} />\n  } else if (status === 'error') {\n    content = <ErrorState labels={labels.states} onRetry={() => setAttempt((value) => value + 1)} />\n  } else if (page) {\n    if (page.totalAll === 0) {\n      content = <EmptyState kind=\"empty\" labels={labels.states} />\n    } else if (page.total === 0) {\n      content = (\n        <EmptyState\n          kind=\"no-results\"\n          labels={labels.states}\n          clearLabel={labels.header.clearList}\n          onClear={resetQuery}\n        />\n      )\n    } else if (currentView === 'table') {\n      content = (\n        <>\n          <div className=\"hidden md:block\">{table}</div>\n          <div className=\"md:hidden\">{cardList}</div>\n        </>\n      )\n    } else {\n      content = cardList\n    }\n  } else {\n    content = null\n  }\n\n  return (\n    <section aria-labelledby={headingId} className=\"space-y-4 text-foreground\">\n      <OrderHistoryHeader\n        headingId={headingId}\n        title={title ?? labels.header.title}\n        description={description ?? labels.header.description}\n        breadcrumbs={breadcrumbs}\n        actions={headerActions}\n      />\n\n      {access === 'forbidden' ? (\n        <ForbiddenState labels={labels.states} />\n      ) : (\n        <>\n          <Controls\n            query={query}\n            searchValue={searchDraft}\n            labels={labels}\n            capabilities={capabilities}\n            counts={page?.counts}\n            columns={columnSet}\n            presentation={currentView}\n            sortOptions={sortOptions}\n            onSearchChange={setSearchDraft}\n            onQuick={(quick: QuickFilterId) => updateQuery({ quick })}\n            onSort={(sort: SortId) => updateQuery({ sort })}\n            onPresentation={(next) => {\n              setView(next)\n              onPresentationChange?.(next)\n            }}\n            onToggleColumn={toggleColumn}\n          />\n\n          <BulkBar\n            selection={selected}\n            allPageSelected={allPageSelected}\n            total={page?.total ?? 0}\n            capabilities={capabilities}\n            labels={labels}\n            onSelectAll={() =>\n              setSelected({ kind: 'query', query, count: page?.total ?? 0 })\n            }\n            onClear={() => setSelected(null)}\n            onAction={runBulk}\n          />\n\n          <p role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n            {status === 'refreshing' ? labels.header.updating : resultLabel}\n          </p>\n\n          {page?.warning === true ? <PartialNotice labels={labels.states} /> : null}\n\n          <div\n            aria-busy={status === 'loading' || status === 'refreshing'}\n            className={cn(\n              'transition-opacity',\n              status === 'refreshing' && 'opacity-60',\n            )}\n          >\n            {content}\n          </div>\n\n          {page && page.total > 0 ? (\n            <Pagination\n              page={currentPage}\n              pageCount={page.pageCount}\n              total={page.total}\n              pageSize={query.pageSize}\n              labels={labels}\n              onPage={(next) => updateQuery({ page: next })}\n              onPageSize={(size) => updateQuery({ pageSize: size })}\n            />\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/order-history/components/order-table.d.ts

@@ -0,0 +1,23 @@
+import type { Money, OrderActionId, OrderHistoryCapabilities, OrderHistoryLabels, OrderRecord, SortId, TableColumnId } from '../contracts';
+type OrderTableProps = {
+    orders: OrderRecord[];
+    columns: TableColumnId[];
+    labels: OrderHistoryLabels;
+    locale: string;
+    formatMoney?: (money: Money) => string;
+    formatDate?: (iso: string) => string;
+    capabilities: OrderHistoryCapabilities;
+    selectable: boolean;
+    selectionMode: 'orders' | 'query';
+    selectedIds: Set<string>;
+    allPageSelected: boolean;
+    onToggle: (id: string) => void;
+    onTogglePage: () => void;
+    onOpen: (order: OrderRecord) => void;
+    onAction: (action: OrderActionId, order: OrderRecord) => void;
+    sort: SortId;
+    onSort: (sort: SortId) => void;
+};
+export declare function OrderTable({ orders, columns, labels, locale, formatMoney: formatMoneyProp, formatDate: formatDateProp, capabilities, selectable, selectionMode, selectedIds, allPageSelected, onToggle, onTogglePage, onOpen, onAction, sort, onSort, }: OrderTableProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=order-table.d.ts.map

package/dist/blocks/designs/order-history/components/order-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-table.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/order-history/components/order-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,KAAK,EACL,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EAEX,MAAM,EACN,aAAa,EAEd,MAAM,cAAc,CAAA;AA6BrB,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACpC,YAAY,EAAE,wBAAwB,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAA;IACjC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,eAAe,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAA;AAID,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,MAAM,GACP,EAAE,eAAe,+BAwMjB"}

package/dist/blocks/designs/order-history/components/order-table.js

@@ -0,0 +1,221 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var order_table_exports = {};
+__export(order_table_exports, {
+  OrderTable: () => OrderTable
+});
+module.exports = __toCommonJS(order_table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@thorprovider/blocks");
+var import_engine = require("../engine.js");
+var import_money = require("../money.js");
+var import_icons = require("./icons.js");
+var import_order_actions = require("./order-actions.js");
+var import_status_badge = require("./status-badge.js");
+const PAYMENT_TONE = {
+  unpaid: "warning",
+  authorized: "info",
+  partially_paid: "warning",
+  paid: "success"
+};
+const STATUS_TONE = {
+  pending: "neutral",
+  preparing: "neutral",
+  shipped: "info",
+  delivered: "success",
+  completed: "success",
+  cancelled: "danger",
+  "partially-delivered": "info",
+  "ready-for-pickup": "success",
+  delayed: "warning",
+  refunded: "neutral",
+  "partially-refunded": "neutral",
+  attention: "warning"
+};
+const NUMERIC = ["items", "total"];
+function OrderTable({
+  orders,
+  columns,
+  labels,
+  locale,
+  formatMoney: formatMoneyProp,
+  formatDate: formatDateProp,
+  capabilities,
+  selectable,
+  selectionMode,
+  selectedIds,
+  allPageSelected,
+  onToggle,
+  onTogglePage,
+  onOpen,
+  onAction,
+  sort,
+  onSort
+}) {
+  const money = (value) => formatMoneyProp ? formatMoneyProp(value) : (0, import_money.formatMoney)(value, locale, labels.card.amountUnavailable);
+  const date = (iso) => formatDateProp ? formatDateProp(iso) : (0, import_money.formatDate)(iso, locale, iso);
+  const has = (column) => columns.includes(column);
+  const visible = (column) => has(column) && (column !== "selection" || selectable);
+  const ariaSort = (column) => {
+    if (column === "date") {
+      return sort === "newest" ? "descending" : sort === "oldest" ? "ascending" : "none";
+    }
+    if (column === "total") {
+      return sort === "total-desc" ? "descending" : sort === "total-asc" ? "ascending" : "none";
+    }
+    return "none";
+  };
+  const sortColumn = (column) => {
+    if (column === "date") onSort(sort === "oldest" ? "newest" : "oldest");
+    if (column === "total") onSort(sort === "total-asc" ? "total-desc" : "total-asc");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto rounded-xl border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "min-w-max w-full text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { className: "sr-only", children: labels.table.caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "border-b bg-muted/40 text-left text-xs text-muted-foreground", children: [
+      visible("selection") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", className: "w-10 px-3 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: allPageSelected,
+          disabled: selectionMode === "query",
+          onChange: onTogglePage,
+          "aria-label": labels.table.columns.selection,
+          className: "size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        }
+      ) }) : null,
+      columns.map((column) => {
+        if (!visible(column) || column === "selection") return null;
+        const sortable = column === "date" || column === "total";
+        const numeric = NUMERIC.includes(column);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "th",
+          {
+            scope: "col",
+            "aria-sort": sortable ? ariaSort(column) : void 0,
+            className: (0, import_blocks.cn)(
+              "px-3 py-2.5 font-medium whitespace-nowrap",
+              numeric && "text-right"
+            ),
+            children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => sortColumn(column),
+                title: (0, import_money.fillTemplate)(labels.table.sortBy, { column: labels.table.columns[column] }),
+                className: (0, import_blocks.cn)(
+                  "inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                  numeric && "justify-end"
+                ),
+                children: [
+                  labels.table.columns[column],
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_icons.Icon,
+                    {
+                      name: "chevron",
+                      className: (0, import_blocks.cn)(
+                        "size-3 transition-transform",
+                        ariaSort(column) === "ascending" && "rotate-180",
+                        ariaSort(column) === "none" && "opacity-40"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : labels.table.columns[column]
+          },
+          column
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: orders.map((order) => {
+      const resolved = (0, import_engine.resolvePresentationStatus)(order);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "border-b last:border-0 hover:bg-muted/40", children: [
+        visible("selection") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectionMode === "query" || selectedIds.has(order.id),
+            disabled: selectionMode === "query",
+            onChange: () => onToggle(order.id),
+            "aria-label": (0, import_money.fillTemplate)(labels.card.order, { number: order.number }),
+            className: "size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          }
+        ) }) : null,
+        columns.map((column) => {
+          if (!visible(column) || column === "selection") return null;
+          switch (column) {
+            case "order":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onOpen(order),
+                  className: "rounded-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                  children: order.number
+                }
+              ) }, column);
+            case "date":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: date(order.placedAt) }, column);
+            case "buyer":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap", children: order.b2b?.buyer ?? "" }, column);
+            case "company":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap", children: order.b2b?.company ?? "" }, column);
+            case "purchaseOrder":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: order.b2b?.purchaseOrder ?? "" }, column);
+            case "items":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 text-right tabular-nums", children: order.itemCount }, column);
+            case "status":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_status_badge.StatusBadge, { label: labels.status[resolved.status], tone: resolved.tone }) }, column);
+            case "payment":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_status_badge.StatusBadge,
+                {
+                  label: labels.payment[order.payment.status],
+                  tone: PAYMENT_TONE[order.payment.status]
+                }
+              ) }, column);
+            case "fulfilment":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: labels.fulfilment[order.fulfilment.status] }, column);
+            case "total":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5 text-right font-medium tabular-nums whitespace-nowrap", children: money(order.total) }, column);
+            case "actions":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_order_actions.OrderActions,
+                {
+                  order,
+                  capabilities,
+                  labels,
+                  onOpen,
+                  onAction,
+                  showPrimary: false
+                }
+              ) }) }, column);
+            default:
+              return null;
+          }
+        })
+      ] }, order.id);
+    }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OrderTable
+});
+//# sourceMappingURL=order-table.js.map

package/dist/blocks/designs/order-history/components/order-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-history/components/order-table.tsx"],"sourcesContent":["import { cn } from '@thorprovider/blocks'\n\nimport type {\n  Money,\n  OrderActionId,\n  OrderHistoryCapabilities,\n  OrderHistoryLabels,\n  OrderRecord,\n  PresentationStatusId,\n  SortId,\n  TableColumnId,\n  Tone,\n} from '../contracts'\nimport { resolvePresentationStatus } from '../engine'\nimport { fillTemplate, formatDate, formatMoney } from '../money'\nimport { Icon } from './icons'\nimport { OrderActions } from './order-actions'\nimport { StatusBadge } from './status-badge'\n\nconst PAYMENT_TONE: Record<OrderRecord['payment']['status'], Tone> = {\n  unpaid: 'warning',\n  authorized: 'info',\n  partially_paid: 'warning',\n  paid: 'success',\n}\n\nconst STATUS_TONE: Record<PresentationStatusId, Tone> = {\n  pending: 'neutral',\n  preparing: 'neutral',\n  shipped: 'info',\n  delivered: 'success',\n  completed: 'success',\n  cancelled: 'danger',\n  'partially-delivered': 'info',\n  'ready-for-pickup': 'success',\n  delayed: 'warning',\n  refunded: 'neutral',\n  'partially-refunded': 'neutral',\n  attention: 'warning',\n}\n\ntype OrderTableProps = {\n  orders: OrderRecord[]\n  columns: TableColumnId[]\n  labels: OrderHistoryLabels\n  locale: string\n  formatMoney?: (money: Money) => string\n  formatDate?: (iso: string) => string\n  capabilities: OrderHistoryCapabilities\n  selectable: boolean\n  selectionMode: 'orders' | 'query'\n  selectedIds: Set<string>\n  allPageSelected: boolean\n  onToggle: (id: string) => void\n  onTogglePage: () => void\n  onOpen: (order: OrderRecord) => void\n  onAction: (action: OrderActionId, order: OrderRecord) => void\n  sort: SortId\n  onSort: (sort: SortId) => void\n}\n\nconst NUMERIC: TableColumnId[] = ['items', 'total']\n\nexport function OrderTable({\n  orders,\n  columns,\n  labels,\n  locale,\n  formatMoney: formatMoneyProp,\n  formatDate: formatDateProp,\n  capabilities,\n  selectable,\n  selectionMode,\n  selectedIds,\n  allPageSelected,\n  onToggle,\n  onTogglePage,\n  onOpen,\n  onAction,\n  sort,\n  onSort,\n}: OrderTableProps) {\n  const money = (value: Money) =>\n    formatMoneyProp ? formatMoneyProp(value) : formatMoney(value, locale, labels.card.amountUnavailable)\n  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, locale, iso))\n\n  const has = (column: TableColumnId) => columns.includes(column)\n  const visible = (column: TableColumnId) => has(column) && (column !== 'selection' || selectable)\n\n  const ariaSort = (column: TableColumnId): 'ascending' | 'descending' | 'none' => {\n    if (column === 'date') {\n      return sort === 'newest' ? 'descending' : sort === 'oldest' ? 'ascending' : 'none'\n    }\n    if (column === 'total') {\n      return sort === 'total-desc' ? 'descending' : sort === 'total-asc' ? 'ascending' : 'none'\n    }\n    return 'none'\n  }\n\n  const sortColumn = (column: TableColumnId) => {\n    if (column === 'date') onSort(sort === 'oldest' ? 'newest' : 'oldest')\n    if (column === 'total') onSort(sort === 'total-asc' ? 'total-desc' : 'total-asc')\n  }\n\n  return (\n    <div className=\"overflow-x-auto rounded-xl border bg-card\">\n      <table className=\"min-w-max w-full text-sm\">\n        <caption className=\"sr-only\">{labels.table.caption}</caption>\n        <thead>\n          <tr className=\"border-b bg-muted/40 text-left text-xs text-muted-foreground\">\n            {visible('selection') ? (\n              <th scope=\"col\" className=\"w-10 px-3 py-2.5\">\n                <input\n                  type=\"checkbox\"\n                  checked={allPageSelected}\n                  disabled={selectionMode === 'query'}\n                  onChange={onTogglePage}\n                  aria-label={labels.table.columns.selection}\n                  className=\"size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                />\n              </th>\n            ) : null}\n\n            {columns.map((column) => {\n              if (!visible(column) || column === 'selection') return null\n              const sortable = column === 'date' || column === 'total'\n              const numeric = NUMERIC.includes(column)\n              return (\n                <th\n                  key={column}\n                  scope=\"col\"\n                  aria-sort={sortable ? ariaSort(column) : undefined}\n                  className={cn(\n                    'px-3 py-2.5 font-medium whitespace-nowrap',\n                    numeric && 'text-right',\n                  )}\n                >\n                  {sortable ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => sortColumn(column)}\n                      title={fillTemplate(labels.table.sortBy, { column: labels.table.columns[column] })}\n                      className={cn(\n                        'inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n                        numeric && 'justify-end',\n                      )}\n                    >\n                      {labels.table.columns[column]}\n                      <Icon\n                        name=\"chevron\"\n                        className={cn(\n                          'size-3 transition-transform',\n                          ariaSort(column) === 'ascending' && 'rotate-180',\n                          ariaSort(column) === 'none' && 'opacity-40',\n                        )}\n                      />\n                    </button>\n                  ) : (\n                    labels.table.columns[column]\n                  )}\n                </th>\n              )\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {orders.map((order) => {\n            const resolved = resolvePresentationStatus(order)\n            return (\n              <tr key={order.id} className=\"border-b last:border-0 hover:bg-muted/40\">\n                {visible('selection') ? (\n                  <td className=\"px-3 py-2.5\">\n                    <input\n                      type=\"checkbox\"\n                      checked={selectionMode === 'query' || selectedIds.has(order.id)}\n                      disabled={selectionMode === 'query'}\n                      onChange={() => onToggle(order.id)}\n                      aria-label={fillTemplate(labels.card.order, { number: order.number })}\n                      className=\"size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                    />\n                  </td>\n                ) : null}\n\n                {columns.map((column) => {\n                  if (!visible(column) || column === 'selection') return null\n                  switch (column) {\n                    case 'order':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          <button\n                            type=\"button\"\n                            onClick={() => onOpen(order)}\n                            className=\"rounded-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                          >\n                            {order.number}\n                          </button>\n                        </td>\n                      )\n                    case 'date':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {date(order.placedAt)}\n                        </td>\n                      )\n                    case 'buyer':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          {order.b2b?.buyer ?? ''}\n                        </td>\n                      )\n                    case 'company':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          {order.b2b?.company ?? ''}\n                        </td>\n                      )\n                    case 'purchaseOrder':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {order.b2b?.purchaseOrder ?? ''}\n                        </td>\n                      )\n                    case 'items':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 text-right tabular-nums\">\n                          {order.itemCount}\n                        </td>\n                      )\n                    case 'status':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <StatusBadge label={labels.status[resolved.status]} tone={resolved.tone} />\n                        </td>\n                      )\n                    case 'payment':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <StatusBadge\n                            label={labels.payment[order.payment.status]}\n                            tone={PAYMENT_TONE[order.payment.status]}\n                          />\n                        </td>\n                      )\n                    case 'fulfilment':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {labels.fulfilment[order.fulfilment.status]}\n                        </td>\n                      )\n                    case 'total':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 text-right font-medium tabular-nums whitespace-nowrap\">\n                          {money(order.total)}\n                        </td>\n                      )\n                    case 'actions':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <div className=\"flex justify-end\">\n                            <OrderActions\n                              order={order}\n                              capabilities={capabilities}\n                              labels={labels}\n                              onOpen={onOpen}\n                              onAction={onAction}\n                              showPrimary={false}\n                            />\n                          </div>\n                        </td>\n                      )\n                    default:\n                      return null\n                  }\n                })}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/order-history/components/order-table.mjs

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@thorprovider/blocks";
+import { resolvePresentationStatus } from "../engine.mjs";
+import { fillTemplate, formatDate, formatMoney } from "../money.mjs";
+import { Icon } from "./icons.mjs";
+import { OrderActions } from "./order-actions.mjs";
+import { StatusBadge } from "./status-badge.mjs";
+const PAYMENT_TONE = {
+  unpaid: "warning",
+  authorized: "info",
+  partially_paid: "warning",
+  paid: "success"
+};
+const STATUS_TONE = {
+  pending: "neutral",
+  preparing: "neutral",
+  shipped: "info",
+  delivered: "success",
+  completed: "success",
+  cancelled: "danger",
+  "partially-delivered": "info",
+  "ready-for-pickup": "success",
+  delayed: "warning",
+  refunded: "neutral",
+  "partially-refunded": "neutral",
+  attention: "warning"
+};
+const NUMERIC = ["items", "total"];
+function OrderTable({
+  orders,
+  columns,
+  labels,
+  locale,
+  formatMoney: formatMoneyProp,
+  formatDate: formatDateProp,
+  capabilities,
+  selectable,
+  selectionMode,
+  selectedIds,
+  allPageSelected,
+  onToggle,
+  onTogglePage,
+  onOpen,
+  onAction,
+  sort,
+  onSort
+}) {
+  const money = (value) => formatMoneyProp ? formatMoneyProp(value) : formatMoney(value, locale, labels.card.amountUnavailable);
+  const date = (iso) => formatDateProp ? formatDateProp(iso) : formatDate(iso, locale, iso);
+  const has = (column) => columns.includes(column);
+  const visible = (column) => has(column) && (column !== "selection" || selectable);
+  const ariaSort = (column) => {
+    if (column === "date") {
+      return sort === "newest" ? "descending" : sort === "oldest" ? "ascending" : "none";
+    }
+    if (column === "total") {
+      return sort === "total-desc" ? "descending" : sort === "total-asc" ? "ascending" : "none";
+    }
+    return "none";
+  };
+  const sortColumn = (column) => {
+    if (column === "date") onSort(sort === "oldest" ? "newest" : "oldest");
+    if (column === "total") onSort(sort === "total-asc" ? "total-desc" : "total-asc");
+  };
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-xl border bg-card", children: /* @__PURE__ */ jsxs("table", { className: "min-w-max w-full text-sm", children: [
+    /* @__PURE__ */ jsx("caption", { className: "sr-only", children: labels.table.caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/40 text-left text-xs text-muted-foreground", children: [
+      visible("selection") ? /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 px-3 py-2.5", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allPageSelected,
+          disabled: selectionMode === "query",
+          onChange: onTogglePage,
+          "aria-label": labels.table.columns.selection,
+          className: "size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        }
+      ) }) : null,
+      columns.map((column) => {
+        if (!visible(column) || column === "selection") return null;
+        const sortable = column === "date" || column === "total";
+        const numeric = NUMERIC.includes(column);
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            "aria-sort": sortable ? ariaSort(column) : void 0,
+            className: cn(
+              "px-3 py-2.5 font-medium whitespace-nowrap",
+              numeric && "text-right"
+            ),
+            children: sortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => sortColumn(column),
+                title: fillTemplate(labels.table.sortBy, { column: labels.table.columns[column] }),
+                className: cn(
+                  "inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                  numeric && "justify-end"
+                ),
+                children: [
+                  labels.table.columns[column],
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "chevron",
+                      className: cn(
+                        "size-3 transition-transform",
+                        ariaSort(column) === "ascending" && "rotate-180",
+                        ariaSort(column) === "none" && "opacity-40"
+                      )
+                    }
+                  )
+                ]
+              }
+            ) : labels.table.columns[column]
+          },
+          column
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: orders.map((order) => {
+      const resolved = resolvePresentationStatus(order);
+      return /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-0 hover:bg-muted/40", children: [
+        visible("selection") ? /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectionMode === "query" || selectedIds.has(order.id),
+            disabled: selectionMode === "query",
+            onChange: () => onToggle(order.id),
+            "aria-label": fillTemplate(labels.card.order, { number: order.number }),
+            className: "size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          }
+        ) }) : null,
+        columns.map((column) => {
+          if (!visible(column) || column === "selection") return null;
+          switch (column) {
+            case "order":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onOpen(order),
+                  className: "rounded-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                  children: order.number
+                }
+              ) }, column);
+            case "date":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: date(order.placedAt) }, column);
+            case "buyer":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap", children: order.b2b?.buyer ?? "" }, column);
+            case "company":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap", children: order.b2b?.company ?? "" }, column);
+            case "purchaseOrder":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: order.b2b?.purchaseOrder ?? "" }, column);
+            case "items":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 text-right tabular-nums", children: order.itemCount }, column);
+            case "status":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ jsx(StatusBadge, { label: labels.status[resolved.status], tone: resolved.tone }) }, column);
+            case "payment":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ jsx(
+                StatusBadge,
+                {
+                  label: labels.payment[order.payment.status],
+                  tone: PAYMENT_TONE[order.payment.status]
+                }
+              ) }, column);
+            case "fulfilment":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 whitespace-nowrap text-muted-foreground", children: labels.fulfilment[order.fulfilment.status] }, column);
+            case "total":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 text-right font-medium tabular-nums whitespace-nowrap", children: money(order.total) }, column);
+            case "actions":
+              return /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+                OrderActions,
+                {
+                  order,
+                  capabilities,
+                  labels,
+                  onOpen,
+                  onAction,
+                  showPrimary: false
+                }
+              ) }) }, column);
+            default:
+              return null;
+          }
+        })
+      ] }, order.id);
+    }) })
+  ] }) });
+}
+export {
+  OrderTable
+};
+//# sourceMappingURL=order-table.mjs.map

package/dist/blocks/designs/order-history/components/order-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/order-history/components/order-table.tsx"],"sourcesContent":["import { cn } from '@thorprovider/blocks'\n\nimport type {\n  Money,\n  OrderActionId,\n  OrderHistoryCapabilities,\n  OrderHistoryLabels,\n  OrderRecord,\n  PresentationStatusId,\n  SortId,\n  TableColumnId,\n  Tone,\n} from '../contracts'\nimport { resolvePresentationStatus } from '../engine'\nimport { fillTemplate, formatDate, formatMoney } from '../money'\nimport { Icon } from './icons'\nimport { OrderActions } from './order-actions'\nimport { StatusBadge } from './status-badge'\n\nconst PAYMENT_TONE: Record<OrderRecord['payment']['status'], Tone> = {\n  unpaid: 'warning',\n  authorized: 'info',\n  partially_paid: 'warning',\n  paid: 'success',\n}\n\nconst STATUS_TONE: Record<PresentationStatusId, Tone> = {\n  pending: 'neutral',\n  preparing: 'neutral',\n  shipped: 'info',\n  delivered: 'success',\n  completed: 'success',\n  cancelled: 'danger',\n  'partially-delivered': 'info',\n  'ready-for-pickup': 'success',\n  delayed: 'warning',\n  refunded: 'neutral',\n  'partially-refunded': 'neutral',\n  attention: 'warning',\n}\n\ntype OrderTableProps = {\n  orders: OrderRecord[]\n  columns: TableColumnId[]\n  labels: OrderHistoryLabels\n  locale: string\n  formatMoney?: (money: Money) => string\n  formatDate?: (iso: string) => string\n  capabilities: OrderHistoryCapabilities\n  selectable: boolean\n  selectionMode: 'orders' | 'query'\n  selectedIds: Set<string>\n  allPageSelected: boolean\n  onToggle: (id: string) => void\n  onTogglePage: () => void\n  onOpen: (order: OrderRecord) => void\n  onAction: (action: OrderActionId, order: OrderRecord) => void\n  sort: SortId\n  onSort: (sort: SortId) => void\n}\n\nconst NUMERIC: TableColumnId[] = ['items', 'total']\n\nexport function OrderTable({\n  orders,\n  columns,\n  labels,\n  locale,\n  formatMoney: formatMoneyProp,\n  formatDate: formatDateProp,\n  capabilities,\n  selectable,\n  selectionMode,\n  selectedIds,\n  allPageSelected,\n  onToggle,\n  onTogglePage,\n  onOpen,\n  onAction,\n  sort,\n  onSort,\n}: OrderTableProps) {\n  const money = (value: Money) =>\n    formatMoneyProp ? formatMoneyProp(value) : formatMoney(value, locale, labels.card.amountUnavailable)\n  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, locale, iso))\n\n  const has = (column: TableColumnId) => columns.includes(column)\n  const visible = (column: TableColumnId) => has(column) && (column !== 'selection' || selectable)\n\n  const ariaSort = (column: TableColumnId): 'ascending' | 'descending' | 'none' => {\n    if (column === 'date') {\n      return sort === 'newest' ? 'descending' : sort === 'oldest' ? 'ascending' : 'none'\n    }\n    if (column === 'total') {\n      return sort === 'total-desc' ? 'descending' : sort === 'total-asc' ? 'ascending' : 'none'\n    }\n    return 'none'\n  }\n\n  const sortColumn = (column: TableColumnId) => {\n    if (column === 'date') onSort(sort === 'oldest' ? 'newest' : 'oldest')\n    if (column === 'total') onSort(sort === 'total-asc' ? 'total-desc' : 'total-asc')\n  }\n\n  return (\n    <div className=\"overflow-x-auto rounded-xl border bg-card\">\n      <table className=\"min-w-max w-full text-sm\">\n        <caption className=\"sr-only\">{labels.table.caption}</caption>\n        <thead>\n          <tr className=\"border-b bg-muted/40 text-left text-xs text-muted-foreground\">\n            {visible('selection') ? (\n              <th scope=\"col\" className=\"w-10 px-3 py-2.5\">\n                <input\n                  type=\"checkbox\"\n                  checked={allPageSelected}\n                  disabled={selectionMode === 'query'}\n                  onChange={onTogglePage}\n                  aria-label={labels.table.columns.selection}\n                  className=\"size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                />\n              </th>\n            ) : null}\n\n            {columns.map((column) => {\n              if (!visible(column) || column === 'selection') return null\n              const sortable = column === 'date' || column === 'total'\n              const numeric = NUMERIC.includes(column)\n              return (\n                <th\n                  key={column}\n                  scope=\"col\"\n                  aria-sort={sortable ? ariaSort(column) : undefined}\n                  className={cn(\n                    'px-3 py-2.5 font-medium whitespace-nowrap',\n                    numeric && 'text-right',\n                  )}\n                >\n                  {sortable ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => sortColumn(column)}\n                      title={fillTemplate(labels.table.sortBy, { column: labels.table.columns[column] })}\n                      className={cn(\n                        'inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n                        numeric && 'justify-end',\n                      )}\n                    >\n                      {labels.table.columns[column]}\n                      <Icon\n                        name=\"chevron\"\n                        className={cn(\n                          'size-3 transition-transform',\n                          ariaSort(column) === 'ascending' && 'rotate-180',\n                          ariaSort(column) === 'none' && 'opacity-40',\n                        )}\n                      />\n                    </button>\n                  ) : (\n                    labels.table.columns[column]\n                  )}\n                </th>\n              )\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {orders.map((order) => {\n            const resolved = resolvePresentationStatus(order)\n            return (\n              <tr key={order.id} className=\"border-b last:border-0 hover:bg-muted/40\">\n                {visible('selection') ? (\n                  <td className=\"px-3 py-2.5\">\n                    <input\n                      type=\"checkbox\"\n                      checked={selectionMode === 'query' || selectedIds.has(order.id)}\n                      disabled={selectionMode === 'query'}\n                      onChange={() => onToggle(order.id)}\n                      aria-label={fillTemplate(labels.card.order, { number: order.number })}\n                      className=\"size-4 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                    />\n                  </td>\n                ) : null}\n\n                {columns.map((column) => {\n                  if (!visible(column) || column === 'selection') return null\n                  switch (column) {\n                    case 'order':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          <button\n                            type=\"button\"\n                            onClick={() => onOpen(order)}\n                            className=\"rounded-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                          >\n                            {order.number}\n                          </button>\n                        </td>\n                      )\n                    case 'date':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {date(order.placedAt)}\n                        </td>\n                      )\n                    case 'buyer':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          {order.b2b?.buyer ?? ''}\n                        </td>\n                      )\n                    case 'company':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap\">\n                          {order.b2b?.company ?? ''}\n                        </td>\n                      )\n                    case 'purchaseOrder':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {order.b2b?.purchaseOrder ?? ''}\n                        </td>\n                      )\n                    case 'items':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 text-right tabular-nums\">\n                          {order.itemCount}\n                        </td>\n                      )\n                    case 'status':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <StatusBadge label={labels.status[resolved.status]} tone={resolved.tone} />\n                        </td>\n                      )\n                    case 'payment':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <StatusBadge\n                            label={labels.payment[order.payment.status]}\n                            tone={PAYMENT_TONE[order.payment.status]}\n                          />\n                        </td>\n                      )\n                    case 'fulfilment':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 whitespace-nowrap text-muted-foreground\">\n                          {labels.fulfilment[order.fulfilment.status]}\n                        </td>\n                      )\n                    case 'total':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5 text-right font-medium tabular-nums whitespace-nowrap\">\n                          {money(order.total)}\n                        </td>\n                      )\n                    case 'actions':\n                      return (\n                        <td key={column} className=\"px-3 py-2.5\">\n                          <div className=\"flex justify-end\">\n                            <OrderActions\n                              order={order}\n                              capabilities={capabilities}\n                              labels={labels}\n                              onOpen={onOpen}\n                              onAction={onAction}\n                              showPrimary={false}\n                            />\n                          </div>\n                        </td>\n                      )\n                    default:\n                      return null\n                  }\n                })}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/order-history/components/pagination.d.ts

@@ -0,0 +1,13 @@
+import type { OrderHistoryLabels } from '../contracts';
+type PaginationProps = {
+    page: number;
+    pageCount: number;
+    total: number;
+    pageSize: number;
+    labels: OrderHistoryLabels;
+    onPage: (page: number) => void;
+    onPageSize: (pageSize: number) => void;
+};
+export declare function Pagination({ page, pageCount, total, pageSize, labels, onPage, onPageSize, }: PaginationProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/blocks/designs/order-history/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/order-history/components/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAMtD,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,eAAe,+BAkDjB"}