@thorprovider/blocks 4.1.0 → 4.3.0

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

@@ -0,0 +1,310 @@
+"use strict";
+"use client";
+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_history_exports = {};
+__export(order_history_exports, {
+  OrderHistory: () => OrderHistory
+});
+module.exports = __toCommonJS(order_history_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_blocks = require("@thorprovider/blocks");
+var import_contracts = require("../contracts.js");
+var import_engine = require("../engine.js");
+var import_money = require("../money.js");
+var import_bulk_bar = require("./bulk-bar.js");
+var import_controls = require("./controls.js");
+var import_feedback = require("./feedback.js");
+var import_header = require("./header.js");
+var import_order_card = require("./order-card.js");
+var import_order_table = require("./order-table.js");
+var import_pagination = require("./pagination.js");
+const SEARCH_DEBOUNCE = 250;
+function OrderHistory({
+  mode,
+  capabilities,
+  dataSource,
+  labels,
+  locale = "es-MX",
+  formatMoney: formatMoneyProp,
+  formatDate,
+  presentation = "cards",
+  columns,
+  sortOptions = import_contracts.SORT_IDS,
+  title,
+  description,
+  breadcrumbs,
+  headerActions,
+  pageSize = import_contracts.DEFAULT_PAGE_SIZE,
+  access = "allowed",
+  initialQuery,
+  onQueryChange,
+  onPresentationChange,
+  onOrderSelect,
+  onOrderSelectRecord,
+  onOrderAction,
+  onBulkAction
+}) {
+  const initial = (0, import_react.useRef)({
+    ...(0, import_engine.defaultQuery)(pageSize),
+    ...initialQuery
+  });
+  const [query, setQuery] = (0, import_react.useState)(initial.current);
+  const [searchDraft, setSearchDraft] = (0, import_react.useState)(initial.current.search);
+  const [page, setPage] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("loading");
+  const [attempt, setAttempt] = (0, import_react.useState)(0);
+  const [selected, setSelected] = (0, import_react.useState)(null);
+  const [view, setView] = (0, import_react.useState)(presentation);
+  const [columnSet, setColumnSet] = (0, import_react.useState)(
+    () => columns ?? (mode === "b2b" ? import_contracts.DEFAULT_B2B_COLUMNS : import_contracts.DEFAULT_COLUMNS)
+  );
+  const hasPage = (0, import_react.useRef)(false);
+  const lastEmitted = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (searchDraft === query.search) return;
+    const timer = setTimeout(() => {
+      setQuery((current) => ({ ...current, search: searchDraft, page: 1 }));
+      setSelected(null);
+    }, SEARCH_DEBOUNCE);
+    return () => clearTimeout(timer);
+  }, [searchDraft, query.search]);
+  (0, import_react.useEffect)(() => {
+    if (access === "forbidden") return;
+    const controller = new AbortController();
+    let active = true;
+    setStatus(hasPage.current ? "refreshing" : "loading");
+    dataSource.list(query, { signal: controller.signal }).then((result) => {
+      if (!active) return;
+      hasPage.current = true;
+      setPage(result);
+      setStatus("ready");
+    }).catch((error) => {
+      if (!active) return;
+      if (error instanceof Error && error.name === "AbortError") return;
+      setStatus("error");
+    });
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [access, dataSource, query, attempt]);
+  (0, import_react.useEffect)(() => {
+    if (lastEmitted.current === query) return;
+    lastEmitted.current = query;
+    onQueryChange?.(query);
+  }, [query, onQueryChange]);
+  const updateQuery = (patch) => {
+    setQuery((current) => ({ ...current, ...patch, page: patch.page ?? 1 }));
+    const pageOnly = Object.keys(patch).length === 1 && patch.page !== void 0;
+    if (!pageOnly) setSelected(null);
+  };
+  const resetQuery = () => {
+    setSearchDraft("");
+    updateQuery({ search: "", quick: "all", filters: {}, date: void 0, amount: void 0 });
+  };
+  const selectedIds = (0, import_react.useMemo)(
+    () => new Set(selected?.kind === "orders" ? selected.ids : []),
+    [selected]
+  );
+  const selectionMode = selected?.kind === "query" ? "query" : "orders";
+  const rows = page?.items ?? [];
+  const allPageSelected = rows.length > 0 && rows.every((order) => selectedIds.has(order.id));
+  const selectable = capabilities.bulkSelection === true;
+  const tableEnabled = capabilities.tableView === true;
+  const currentView = tableEnabled ? view : "cards";
+  const currentPage = page ? Math.min(query.page, page.pageCount) : query.page;
+  const resultLabel = page === null ? "" : page.total === 1 ? labels.header.resultsOne : (0, import_money.fillTemplate)(labels.header.results, { count: page.total });
+  const toggleOrder = (id) => {
+    const ids = new Set(selectedIds);
+    if (ids.has(id)) ids.delete(id);
+    else ids.add(id);
+    setSelected(ids.size === 0 ? null : { kind: "orders", ids: [...ids], count: ids.size });
+  };
+  const togglePage = () => {
+    if (selectionMode === "query") return;
+    if (allPageSelected) {
+      setSelected(null);
+      return;
+    }
+    setSelected({ kind: "orders", ids: rows.map((order) => order.id), count: rows.length });
+  };
+  const openOrder = (order) => {
+    onOrderSelect?.(order.id);
+    onOrderSelectRecord?.(order);
+  };
+  const toggleColumn = (column) => {
+    setColumnSet((current) => {
+      const next = current.includes(column) ? current.filter((entry) => entry !== column) : [...current, column];
+      return next.length === 0 ? current : next;
+    });
+  };
+  const runAction = (action, order) => onOrderAction?.(action, order);
+  const runBulk = (action) => {
+    if (selected) onBulkAction?.(action, selected);
+  };
+  const headingId = (0, import_react.useId)();
+  const cardList = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-3", children: rows.map((order) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_order_card.OrderCard,
+    {
+      order,
+      labels,
+      locale,
+      formatMoney: formatMoneyProp,
+      formatDate,
+      capabilities,
+      selectable,
+      selectionMode,
+      selected: selectionMode === "query" || selectedIds.has(order.id),
+      onToggle: toggleOrder,
+      onOpen: openOrder,
+      onAction: runAction
+    },
+    order.id
+  )) });
+  const table = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_order_table.OrderTable,
+    {
+      orders: rows,
+      columns: columnSet,
+      labels,
+      locale,
+      formatMoney: formatMoneyProp,
+      formatDate,
+      capabilities,
+      selectable,
+      selectionMode,
+      selectedIds,
+      allPageSelected,
+      onToggle: toggleOrder,
+      onTogglePage: togglePage,
+      onOpen: openOrder,
+      onAction: runAction,
+      sort: query.sort,
+      onSort: (sort) => updateQuery({ sort })
+    }
+  );
+  let content;
+  if (status === "loading" && page === null) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback.ResultsSkeleton, { presentation: currentView, labels: labels.states });
+  } else if (status === "error") {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback.ErrorState, { labels: labels.states, onRetry: () => setAttempt((value) => value + 1) });
+  } else if (page) {
+    if (page.totalAll === 0) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback.EmptyState, { kind: "empty", labels: labels.states });
+    } else if (page.total === 0) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_feedback.EmptyState,
+        {
+          kind: "no-results",
+          labels: labels.states,
+          clearLabel: labels.header.clearList,
+          onClear: resetQuery
+        }
+      );
+    } else if (currentView === "table") {
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden md:block", children: table }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "md:hidden", children: cardList })
+      ] });
+    } else {
+      content = cardList;
+    }
+  } else {
+    content = null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": headingId, className: "space-y-4 text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_header.OrderHistoryHeader,
+      {
+        headingId,
+        title: title ?? labels.header.title,
+        description: description ?? labels.header.description,
+        breadcrumbs,
+        actions: headerActions
+      }
+    ),
+    access === "forbidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback.ForbiddenState, { labels: labels.states }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_controls.Controls,
+        {
+          query,
+          searchValue: searchDraft,
+          labels,
+          capabilities,
+          counts: page?.counts,
+          columns: columnSet,
+          presentation: currentView,
+          sortOptions,
+          onSearchChange: setSearchDraft,
+          onQuick: (quick) => updateQuery({ quick }),
+          onSort: (sort) => updateQuery({ sort }),
+          onPresentation: (next) => {
+            setView(next);
+            onPresentationChange?.(next);
+          },
+          onToggleColumn: toggleColumn
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_bulk_bar.BulkBar,
+        {
+          selection: selected,
+          allPageSelected,
+          total: page?.total ?? 0,
+          capabilities,
+          labels,
+          onSelectAll: () => setSelected({ kind: "query", query, count: page?.total ?? 0 }),
+          onClear: () => setSelected(null),
+          onAction: runBulk
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: status === "refreshing" ? labels.header.updating : resultLabel }),
+      page?.warning === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback.PartialNotice, { labels: labels.states }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          "aria-busy": status === "loading" || status === "refreshing",
+          className: (0, import_blocks.cn)(
+            "transition-opacity",
+            status === "refreshing" && "opacity-60"
+          ),
+          children: content
+        }
+      ),
+      page && page.total > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_pagination.Pagination,
+        {
+          page: currentPage,
+          pageCount: page.pageCount,
+          total: page.total,
+          pageSize: query.pageSize,
+          labels,
+          onPage: (next) => updateQuery({ page: next }),
+          onPageSize: (size) => updateQuery({ pageSize: size })
+        }
+      ) : null
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OrderHistory
+});
+//# sourceMappingURL=order-history.js.map

package/dist/blocks/designs/order-history/components/order-history.js.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-history.mjs

@@ -0,0 +1,291 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cn } from "@thorprovider/blocks";
+import {
+  DEFAULT_B2B_COLUMNS,
+  DEFAULT_COLUMNS,
+  DEFAULT_PAGE_SIZE,
+  SORT_IDS
+} from "../contracts.mjs";
+import { defaultQuery } from "../engine.mjs";
+import { fillTemplate } from "../money.mjs";
+import { BulkBar } from "./bulk-bar.mjs";
+import { Controls } from "./controls.mjs";
+import { EmptyState, ErrorState, ForbiddenState, PartialNotice, ResultsSkeleton } from "./feedback.mjs";
+import { OrderHistoryHeader } from "./header.mjs";
+import { OrderCard } from "./order-card.mjs";
+import { OrderTable } from "./order-table.mjs";
+import { Pagination } from "./pagination.mjs";
+const SEARCH_DEBOUNCE = 250;
+function OrderHistory({
+  mode,
+  capabilities,
+  dataSource,
+  labels,
+  locale = "es-MX",
+  formatMoney: formatMoneyProp,
+  formatDate,
+  presentation = "cards",
+  columns,
+  sortOptions = SORT_IDS,
+  title,
+  description,
+  breadcrumbs,
+  headerActions,
+  pageSize = DEFAULT_PAGE_SIZE,
+  access = "allowed",
+  initialQuery,
+  onQueryChange,
+  onPresentationChange,
+  onOrderSelect,
+  onOrderSelectRecord,
+  onOrderAction,
+  onBulkAction
+}) {
+  const initial = useRef({
+    ...defaultQuery(pageSize),
+    ...initialQuery
+  });
+  const [query, setQuery] = useState(initial.current);
+  const [searchDraft, setSearchDraft] = useState(initial.current.search);
+  const [page, setPage] = useState(null);
+  const [status, setStatus] = useState("loading");
+  const [attempt, setAttempt] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [view, setView] = useState(presentation);
+  const [columnSet, setColumnSet] = useState(
+    () => columns ?? (mode === "b2b" ? DEFAULT_B2B_COLUMNS : DEFAULT_COLUMNS)
+  );
+  const hasPage = useRef(false);
+  const lastEmitted = useRef(null);
+  useEffect(() => {
+    if (searchDraft === query.search) return;
+    const timer = setTimeout(() => {
+      setQuery((current) => ({ ...current, search: searchDraft, page: 1 }));
+      setSelected(null);
+    }, SEARCH_DEBOUNCE);
+    return () => clearTimeout(timer);
+  }, [searchDraft, query.search]);
+  useEffect(() => {
+    if (access === "forbidden") return;
+    const controller = new AbortController();
+    let active = true;
+    setStatus(hasPage.current ? "refreshing" : "loading");
+    dataSource.list(query, { signal: controller.signal }).then((result) => {
+      if (!active) return;
+      hasPage.current = true;
+      setPage(result);
+      setStatus("ready");
+    }).catch((error) => {
+      if (!active) return;
+      if (error instanceof Error && error.name === "AbortError") return;
+      setStatus("error");
+    });
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [access, dataSource, query, attempt]);
+  useEffect(() => {
+    if (lastEmitted.current === query) return;
+    lastEmitted.current = query;
+    onQueryChange?.(query);
+  }, [query, onQueryChange]);
+  const updateQuery = (patch) => {
+    setQuery((current) => ({ ...current, ...patch, page: patch.page ?? 1 }));
+    const pageOnly = Object.keys(patch).length === 1 && patch.page !== void 0;
+    if (!pageOnly) setSelected(null);
+  };
+  const resetQuery = () => {
+    setSearchDraft("");
+    updateQuery({ search: "", quick: "all", filters: {}, date: void 0, amount: void 0 });
+  };
+  const selectedIds = useMemo(
+    () => new Set(selected?.kind === "orders" ? selected.ids : []),
+    [selected]
+  );
+  const selectionMode = selected?.kind === "query" ? "query" : "orders";
+  const rows = page?.items ?? [];
+  const allPageSelected = rows.length > 0 && rows.every((order) => selectedIds.has(order.id));
+  const selectable = capabilities.bulkSelection === true;
+  const tableEnabled = capabilities.tableView === true;
+  const currentView = tableEnabled ? view : "cards";
+  const currentPage = page ? Math.min(query.page, page.pageCount) : query.page;
+  const resultLabel = page === null ? "" : page.total === 1 ? labels.header.resultsOne : fillTemplate(labels.header.results, { count: page.total });
+  const toggleOrder = (id) => {
+    const ids = new Set(selectedIds);
+    if (ids.has(id)) ids.delete(id);
+    else ids.add(id);
+    setSelected(ids.size === 0 ? null : { kind: "orders", ids: [...ids], count: ids.size });
+  };
+  const togglePage = () => {
+    if (selectionMode === "query") return;
+    if (allPageSelected) {
+      setSelected(null);
+      return;
+    }
+    setSelected({ kind: "orders", ids: rows.map((order) => order.id), count: rows.length });
+  };
+  const openOrder = (order) => {
+    onOrderSelect?.(order.id);
+    onOrderSelectRecord?.(order);
+  };
+  const toggleColumn = (column) => {
+    setColumnSet((current) => {
+      const next = current.includes(column) ? current.filter((entry) => entry !== column) : [...current, column];
+      return next.length === 0 ? current : next;
+    });
+  };
+  const runAction = (action, order) => onOrderAction?.(action, order);
+  const runBulk = (action) => {
+    if (selected) onBulkAction?.(action, selected);
+  };
+  const headingId = useId();
+  const cardList = /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: rows.map((order) => /* @__PURE__ */ jsx(
+    OrderCard,
+    {
+      order,
+      labels,
+      locale,
+      formatMoney: formatMoneyProp,
+      formatDate,
+      capabilities,
+      selectable,
+      selectionMode,
+      selected: selectionMode === "query" || selectedIds.has(order.id),
+      onToggle: toggleOrder,
+      onOpen: openOrder,
+      onAction: runAction
+    },
+    order.id
+  )) });
+  const table = /* @__PURE__ */ jsx(
+    OrderTable,
+    {
+      orders: rows,
+      columns: columnSet,
+      labels,
+      locale,
+      formatMoney: formatMoneyProp,
+      formatDate,
+      capabilities,
+      selectable,
+      selectionMode,
+      selectedIds,
+      allPageSelected,
+      onToggle: toggleOrder,
+      onTogglePage: togglePage,
+      onOpen: openOrder,
+      onAction: runAction,
+      sort: query.sort,
+      onSort: (sort) => updateQuery({ sort })
+    }
+  );
+  let content;
+  if (status === "loading" && page === null) {
+    content = /* @__PURE__ */ jsx(ResultsSkeleton, { presentation: currentView, labels: labels.states });
+  } else if (status === "error") {
+    content = /* @__PURE__ */ jsx(ErrorState, { labels: labels.states, onRetry: () => setAttempt((value) => value + 1) });
+  } else if (page) {
+    if (page.totalAll === 0) {
+      content = /* @__PURE__ */ jsx(EmptyState, { kind: "empty", labels: labels.states });
+    } else if (page.total === 0) {
+      content = /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          kind: "no-results",
+          labels: labels.states,
+          clearLabel: labels.header.clearList,
+          onClear: resetQuery
+        }
+      );
+    } else if (currentView === "table") {
+      content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: table }),
+        /* @__PURE__ */ jsx("div", { className: "md:hidden", children: cardList })
+      ] });
+    } else {
+      content = cardList;
+    }
+  } else {
+    content = null;
+  }
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": headingId, className: "space-y-4 text-foreground", children: [
+    /* @__PURE__ */ jsx(
+      OrderHistoryHeader,
+      {
+        headingId,
+        title: title ?? labels.header.title,
+        description: description ?? labels.header.description,
+        breadcrumbs,
+        actions: headerActions
+      }
+    ),
+    access === "forbidden" ? /* @__PURE__ */ jsx(ForbiddenState, { labels: labels.states }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Controls,
+        {
+          query,
+          searchValue: searchDraft,
+          labels,
+          capabilities,
+          counts: page?.counts,
+          columns: columnSet,
+          presentation: currentView,
+          sortOptions,
+          onSearchChange: setSearchDraft,
+          onQuick: (quick) => updateQuery({ quick }),
+          onSort: (sort) => updateQuery({ sort }),
+          onPresentation: (next) => {
+            setView(next);
+            onPresentationChange?.(next);
+          },
+          onToggleColumn: toggleColumn
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BulkBar,
+        {
+          selection: selected,
+          allPageSelected,
+          total: page?.total ?? 0,
+          capabilities,
+          labels,
+          onSelectAll: () => setSelected({ kind: "query", query, count: page?.total ?? 0 }),
+          onClear: () => setSelected(null),
+          onAction: runBulk
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: status === "refreshing" ? labels.header.updating : resultLabel }),
+      page?.warning === true ? /* @__PURE__ */ jsx(PartialNotice, { labels: labels.states }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-busy": status === "loading" || status === "refreshing",
+          className: cn(
+            "transition-opacity",
+            status === "refreshing" && "opacity-60"
+          ),
+          children: content
+        }
+      ),
+      page && page.total > 0 ? /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page: currentPage,
+          pageCount: page.pageCount,
+          total: page.total,
+          pageSize: query.pageSize,
+          labels,
+          onPage: (next) => updateQuery({ page: next }),
+          onPageSize: (size) => updateQuery({ pageSize: size })
+        }
+      ) : null
+    ] })
+  ] });
+}
+export {
+  OrderHistory
+};
+//# sourceMappingURL=order-history.mjs.map