@freighttech/ui 0.13.18

package/dist/backend/charts/WaterfallChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/WaterfallChart.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ComposedChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Cell,\n  LabelList,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\n\nexport type WaterfallStep = {\n  label: string\n  /** Signed delta for a step, or the absolute value for a total/start bar. */\n  value: number\n  /** A total/subtotal bar starts from zero rather than the running cumulative. */\n  isTotal?: boolean\n}\n\nexport type WaterfallChartProps = {\n  title?: string\n  data: WaterfallStep[]\n  loading?: boolean\n  error?: string | null\n  valueFormatter?: (value: number) => string\n  /** Colors for increases / decreases / totals. */\n  colorUp?: string\n  colorDown?: string\n  colorTotal?: string\n  /**\n   * Render a small value \"pill\" on every bar (PoC \"Mostek EBITDA\" style),\n   * formatted via {@link valueFormatter}. Defaults to `false` to preserve\n   * the current label-free behavior.\n   */\n  showValues?: boolean\n  className?: string\n  emptyMessage?: string\n}\n\ntype Computed = {\n  label: string\n  base: number\n  bar: number\n  display: number\n  fill: string\n}\n\nfunction defaultFmt(value: number): string {\n  if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`\n  if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(1)}K`\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\n/**\n * Build the transparent-base + visible-bar pairs for a waterfall. A total bar\n * starts at zero; a step bar starts at the running cumulative and moves by its\n * (possibly negative) delta. Exported for unit testing the geometry.\n */\nexport function computeWaterfall(\n  data: WaterfallStep[],\n  colors: { up: string; down: string; total: string },\n): Computed[] {\n  let cumulative = 0\n  return data.map((step) => {\n    if (step.isTotal) {\n      const out: Computed = {\n        label: step.label,\n        base: 0,\n        bar: Math.abs(step.value),\n        display: step.value,\n        fill: colors.total,\n      }\n      cumulative = step.value\n      return out\n    }\n    const next = cumulative + step.value\n    const base = Math.min(cumulative, next)\n    const bar = Math.abs(step.value)\n    const fill = step.value >= 0 ? colors.up : colors.down\n    cumulative = next\n    return { label: step.label, base, bar, display: step.value, fill }\n  })\n}\n\nexport function WaterfallChart({\n  title,\n  data,\n  loading,\n  error,\n  valueFormatter = defaultFmt,\n  colorUp = 'hsl(var(--chart-2, 160 84% 39%))',\n  colorDown = 'hsl(var(--destructive))',\n  colorTotal = 'hsl(var(--chart-1, 221 83% 53%))',\n  showValues = false,\n  className = '',\n  emptyMessage = 'No data available',\n}: WaterfallChartProps) {\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const computed = computeWaterfall(data, { up: colorUp, down: colorDown, total: colorTotal })\n\n  const chartContent = (\n    <ResponsiveContainer width=\"100%\" height={240}>\n      <ComposedChart data={computed} margin={{ top: 10, right: 20, bottom: 5, left: 10 }}>\n        <CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" vertical={false} />\n        <XAxis dataKey=\"label\" tick={{ fontSize: 10 }} interval={0} />\n        <YAxis tickFormatter={valueFormatter} tick={{ fontSize: 10 }} width={50} />\n        <Tooltip\n          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}\n          content={({ active, payload }) => {\n            if (!active || !payload?.length) return null\n            const p = payload[0].payload as Computed\n            return (\n              <div className=\"rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md\">\n                <div className=\"mb-1 text-sm font-medium\">{p.label}</div>\n                <div className=\"text-sm tabular-nums\">{valueFormatter(p.display)}</div>\n              </div>\n            )\n          }}\n        />\n        {/* Transparent base lifts each visible bar to its starting height. */}\n        <Bar dataKey=\"base\" stackId=\"wf\" fill=\"transparent\" isAnimationActive={false} />\n        <Bar dataKey=\"bar\" stackId=\"wf\" radius={[2, 2, 0, 0]} isAnimationActive={false}>\n          {computed.map((c, idx) => (\n            <Cell key={idx} fill={c.fill} />\n          ))}\n          {showValues && (\n            <LabelList\n              dataKey=\"display\"\n              content={(props) => {\n                const { x, y, width } = props as {\n                  x?: number\n                  y?: number\n                  width?: number\n                  value?: number | string\n                }\n                const value = (props as { value?: number | string }).value\n                if (\n                  typeof x !== 'number' ||\n                  typeof y !== 'number' ||\n                  typeof width !== 'number' ||\n                  typeof value !== 'number'\n                ) {\n                  return null\n                }\n                // Center the pill on the bar; sit it 6px above the bar's top edge.\n                return (\n                  <text\n                    x={x + width / 2}\n                    y={y - 6}\n                    textAnchor=\"middle\"\n                    dominantBaseline=\"auto\"\n                    fontSize={10}\n                    fontWeight={600}\n                    fill=\"hsl(var(--foreground))\"\n                  >\n                    {valueFormatter(value)}\n                  </text>\n                )\n              }}\n            />\n          )}\n        </Bar>\n      </ComposedChart>\n    </ResponsiveContainer>\n  )\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      {chartContent}\n    </div>\n  )\n}\n\nexport default WaterfallChart\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/charts/index.js

@@ -0,0 +1,30 @@
+import { KpiCard } from "./KpiCard.js";
+import { BarChart } from "./BarChart.js";
+import { LineChart } from "./LineChart.js";
+import { PieChart } from "./PieChart.js";
+import { ScatterChart } from "./ScatterChart.js";
+import {
+  WaterfallChart,
+  computeWaterfall
+} from "./WaterfallChart.js";
+import {
+  ComboChart
+} from "./ComboChart.js";
+import { TopNTable } from "./TopNTable.js";
+import { ChartContainer, ChartTooltipContent, CHART_COLORS, getChartColor } from "./ChartUtils.js";
+export {
+  BarChart,
+  CHART_COLORS,
+  ChartContainer,
+  ChartTooltipContent,
+  ComboChart,
+  KpiCard,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  TopNTable,
+  WaterfallChart,
+  computeWaterfall,
+  getChartColor
+};
+//# sourceMappingURL=index.js.map

package/dist/backend/charts/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/index.ts"],
+  "sourcesContent": ["export { KpiCard, type KpiCardProps, type KpiTrend } from './KpiCard'\nexport { BarChart, type BarChartProps, type BarChartDataItem } from './BarChart'\nexport { LineChart, type LineChartProps, type LineChartDataItem } from './LineChart'\nexport { PieChart, type PieChartProps, type PieChartDataItem } from './PieChart'\nexport { ScatterChart, type ScatterChartProps, type ScatterChartDataItem } from './ScatterChart'\nexport {\n  WaterfallChart,\n  computeWaterfall,\n  type WaterfallChartProps,\n  type WaterfallStep,\n} from './WaterfallChart'\nexport {\n  ComboChart,\n  type ComboChartProps,\n  type ComboSeries,\n  type ComboBand,\n  type ComboMarker,\n  type ComboDashStyle,\n} from './ComboChart'\nexport { TopNTable, type TopNTableProps, type TopNTableColumn } from './TopNTable'\nexport { ChartContainer, ChartTooltipContent, CHART_COLORS, getChartColor, type ChartConfig } from './ChartUtils'\n"],
+  "mappings": "AAAA,SAAS,eAAiD;AAC1D,SAAS,gBAA2D;AACpE,SAAS,iBAA8D;AACvE,SAAS,gBAA2D;AACpE,SAAS,oBAAuE;AAChF;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,OAMK;AACP,SAAS,iBAA4D;AACrE,SAAS,gBAAgB,qBAAqB,cAAc,qBAAuC;",
+  "names": []
+}

package/dist/backend/columns/ColumnChooserPanel.js

@@ -0,0 +1,244 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, GripVertical, X, ChevronRight } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { IconButton } from "../../primitives/icon-button.js";
+import { Switch } from "../../primitives/switch.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+function SortableColumnItem({
+  column,
+  onToggle
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: column.key });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "cursor-grab text-muted-foreground", ...attributes, ...listeners, children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate flex-1 min-w-0", children: column.label }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: true,
+            disabled: column.alwaysVisible,
+            onCheckedChange: () => onToggle(column.key),
+            className: "shrink-0 scale-90"
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnChooserSection({
+  availableColumns,
+  visibleColumnKeys,
+  columnOrder,
+  onToggleColumn,
+  onReorderColumns,
+  dndContextId = "column-chooser"
+}) {
+  const t = useT();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [expandedGroups, setExpandedGroups] = React.useState(/* @__PURE__ */ new Set());
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const visibleSet = React.useMemo(() => new Set(visibleColumnKeys), [visibleColumnKeys]);
+  const selectedColumns = React.useMemo(() => {
+    const ordered = [];
+    for (const key of columnOrder) {
+      const col = availableColumns.find((c) => c.key === key);
+      if (col && visibleSet.has(key)) ordered.push(col);
+    }
+    for (const col of availableColumns) {
+      if (visibleSet.has(col.key) && !ordered.some((o) => o.key === col.key)) {
+        ordered.push(col);
+      }
+    }
+    if (!searchQuery) return ordered;
+    const lowerQuery = searchQuery.toLowerCase();
+    return ordered.filter((c) => c.label.toLowerCase().includes(lowerQuery));
+  }, [availableColumns, visibleSet, columnOrder, searchQuery]);
+  const groupedAvailable = React.useMemo(() => {
+    const lowerQuery = searchQuery.toLowerCase();
+    const filtered = availableColumns.filter((c) => !visibleSet.has(c.key)).filter((c) => !searchQuery || c.label.toLowerCase().includes(lowerQuery));
+    const groups = /* @__PURE__ */ new Map();
+    for (const col of filtered) {
+      const group = col.group || t("ui.columnChooser.ungrouped", "Other");
+      const list = groups.get(group) ?? [];
+      list.push(col);
+      groups.set(group, list);
+    }
+    return groups;
+  }, [availableColumns, searchQuery, visibleSet, t]);
+  const toggleGroup = React.useCallback((group) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(group)) next.delete(group);
+      else next.add(group);
+      return next;
+    });
+  }, []);
+  const handleDragEnd = React.useCallback((event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = selectedColumns.findIndex((c) => c.key === active.id);
+    const newIndex = selectedColumns.findIndex((c) => c.key === over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+    const reordered = [...selectedColumns];
+    const [moved] = reordered.splice(oldIndex, 1);
+    reordered.splice(newIndex, 0, moved);
+    onReorderColumns(reordered.map((c) => c.key));
+  }, [selectedColumns, onReorderColumns]);
+  const handleHideAll = React.useCallback(() => {
+    for (const col of selectedColumns) {
+      if (!col.alwaysVisible) onToggleColumn(col.key);
+    }
+  }, [selectedColumns, onToggleColumn]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: "w-full rounded border bg-background pl-8 pr-2 py-2 text-sm",
+          placeholder: t("ui.columnChooser.search", "Search columns..."),
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      selectedColumns.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.columnChooser.shown", "Shown") }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              selectedColumns.length,
+              "/",
+              availableColumns.length
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "link",
+              size: "sm",
+              className: "h-auto px-0 text-sm text-muted-foreground hover:text-foreground",
+              onClick: handleHideAll,
+              children: t("ui.columnChooser.hideAll", "Hide all")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(DndContext, { id: dndContextId, sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: selectedColumns.map((c) => c.key), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: selectedColumns.map((col) => /* @__PURE__ */ jsx(SortableColumnItem, { column: col, onToggle: onToggleColumn }, col.key)) }) }) })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "border-t px-4 py-3 mt-4 mb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground mb-3", children: t("ui.columnChooser.available", "Available columns") }),
+        Array.from(groupedAvailable.entries()).map(([group, columns]) => {
+          const isCollapsed = !searchQuery && !expandedGroups.has(group);
+          return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "w-full justify-start gap-2 h-auto px-1 py-2 text-xs font-medium uppercase text-muted-foreground",
+                onClick: () => toggleGroup(group),
+                children: [
+                  /* @__PURE__ */ jsx(ChevronRight, { className: `size-4 transition-transform ${isCollapsed ? "" : "rotate-90"}` }),
+                  /* @__PURE__ */ jsx("span", { children: group })
+                ]
+              }
+            ),
+            !isCollapsed ? /* @__PURE__ */ jsx("div", { className: "space-y-2 mt-2", children: columns.map((col) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-2 rounded pl-7 pr-2 py-1.5 text-sm hover:bg-muted/50 cursor-pointer",
+                onClick: () => {
+                  if (!col.alwaysVisible) onToggleColumn(col.key);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate flex-1 min-w-0", children: col.label }),
+                  /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: false,
+                      disabled: col.alwaysVisible,
+                      onCheckedChange: () => onToggleColumn(col.key),
+                      onClick: (e) => e.stopPropagation(),
+                      className: "shrink-0 scale-90"
+                    }
+                  )
+                ]
+              },
+              col.key
+            )) }) : null
+          ] }, group);
+        })
+      ] })
+    ] })
+  ] });
+}
+function ColumnChooserPanel({
+  open,
+  onOpenChange,
+  ...sectionProps
+}) {
+  const t = useT();
+  React.useEffect(() => {
+    if (!open) return;
+    if (typeof document === "undefined") return;
+    document.body.dataset.columnChooserOpen = "true";
+    return () => {
+      delete document.body.dataset.columnChooserOpen;
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-y-0 right-0 z-50 w-80 border-l bg-background shadow-lg flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: t("ui.columnChooser.title", "Columns") }),
+      /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", type: "button", onClick: () => onOpenChange(false), "aria-label": t("ui.columnChooser.close", "Close"), children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(ColumnChooserSection, { ...sectionProps }) })
+  ] });
+}
+export {
+  ColumnChooserPanel,
+  ColumnChooserSection
+};
+//# sourceMappingURL=ColumnChooserPanel.js.map

package/dist/backend/columns/ColumnChooserPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/columns/ColumnChooserPanel.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Search, GripVertical, X, ChevronRight } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Switch } from '../../primitives/switch'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from '@dnd-kit/core'\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n  useSortable,\n} from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nexport type ColumnChooserField = {\n  key: string\n  label: string\n  group: string\n  defaultVisible?: boolean\n  alwaysVisible?: boolean\n}\n\nexport type ColumnChooserSectionProps = {\n  availableColumns: ColumnChooserField[]\n  visibleColumnKeys: string[]\n  columnOrder: string[]\n  onToggleColumn: (key: string) => void\n  onReorderColumns: (newOrder: string[]) => void\n  dndContextId?: string\n}\n\nexport type ColumnChooserPanelProps = ColumnChooserSectionProps & {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}\n\nfunction SortableColumnItem({\n  column,\n  onToggle,\n}: {\n  column: ColumnChooserField\n  onToggle: (key: string) => void\n}) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: column.key })\n\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className=\"flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50\"\n    >\n      <span className=\"cursor-grab text-muted-foreground\" {...attributes} {...listeners}>\n        <GripVertical className=\"size-4\" />\n      </span>\n      <span className=\"truncate flex-1 min-w-0\">{column.label}</span>\n      <Switch\n        checked\n        disabled={column.alwaysVisible}\n        onCheckedChange={() => onToggle(column.key)}\n        className=\"shrink-0 scale-90\"\n      />\n    </div>\n  )\n}\n\nexport function ColumnChooserSection({\n  availableColumns,\n  visibleColumnKeys,\n  columnOrder,\n  onToggleColumn,\n  onReorderColumns,\n  dndContextId = 'column-chooser',\n}: ColumnChooserSectionProps) {\n  const t = useT()\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(new Set())\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  )\n\n  const visibleSet = React.useMemo(() => new Set(visibleColumnKeys), [visibleColumnKeys])\n\n  const selectedColumns = React.useMemo(() => {\n    const ordered: ColumnChooserField[] = []\n    for (const key of columnOrder) {\n      const col = availableColumns.find((c) => c.key === key)\n      if (col && visibleSet.has(key)) ordered.push(col)\n    }\n    for (const col of availableColumns) {\n      if (visibleSet.has(col.key) && !ordered.some((o) => o.key === col.key)) {\n        ordered.push(col)\n      }\n    }\n    if (!searchQuery) return ordered\n    const lowerQuery = searchQuery.toLowerCase()\n    return ordered.filter((c) => c.label.toLowerCase().includes(lowerQuery))\n  }, [availableColumns, visibleSet, columnOrder, searchQuery])\n\n  const groupedAvailable = React.useMemo(() => {\n    const lowerQuery = searchQuery.toLowerCase()\n    const filtered = availableColumns\n      .filter((c) => !visibleSet.has(c.key))\n      .filter((c) => !searchQuery || c.label.toLowerCase().includes(lowerQuery))\n\n    const groups = new Map<string, ColumnChooserField[]>()\n    for (const col of filtered) {\n      const group = col.group || t('ui.columnChooser.ungrouped', 'Other')\n      const list = groups.get(group) ?? []\n      list.push(col)\n      groups.set(group, list)\n    }\n    return groups\n  }, [availableColumns, searchQuery, visibleSet, t])\n\n  const toggleGroup = React.useCallback((group: string) => {\n    setExpandedGroups((prev) => {\n      const next = new Set(prev)\n      if (next.has(group)) next.delete(group)\n      else next.add(group)\n      return next\n    })\n  }, [])\n\n  const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = selectedColumns.findIndex((c) => c.key === active.id)\n    const newIndex = selectedColumns.findIndex((c) => c.key === over.id)\n    if (oldIndex === -1 || newIndex === -1) return\n    const reordered = [...selectedColumns]\n    const [moved] = reordered.splice(oldIndex, 1)\n    reordered.splice(newIndex, 0, moved)\n    onReorderColumns(reordered.map((c) => c.key))\n  }, [selectedColumns, onReorderColumns])\n\n  const handleHideAll = React.useCallback(() => {\n    for (const col of selectedColumns) {\n      if (!col.alwaysVisible) onToggleColumn(col.key)\n    }\n  }, [selectedColumns, onToggleColumn])\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"px-4 py-3 border-t\">\n        <div className=\"relative\">\n          <Search className=\"absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground\" />\n          <input\n            type=\"text\"\n            className=\"w-full rounded border bg-background pl-8 pr-2 py-2 text-sm\"\n            placeholder={t('ui.columnChooser.search', 'Search columns...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n          />\n        </div>\n      </div>\n\n      <div>\n        {selectedColumns.length > 0 ? (\n          <div className=\"px-4 py-3\">\n            <div className=\"flex items-center justify-between mb-3\">\n              <div className=\"flex items-baseline gap-2\">\n                <div className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n                  {t('ui.columnChooser.shown', 'Shown')}\n                </div>\n                <span className=\"text-xs text-muted-foreground\">\n                  {selectedColumns.length}/{availableColumns.length}\n                </span>\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                className=\"h-auto px-0 text-sm text-muted-foreground hover:text-foreground\"\n                onClick={handleHideAll}\n              >\n                {t('ui.columnChooser.hideAll', 'Hide all')}\n              </Button>\n            </div>\n            <DndContext id={dndContextId} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n              <SortableContext items={selectedColumns.map((c) => c.key)} strategy={verticalListSortingStrategy}>\n                <div className=\"space-y-2\">\n                  {selectedColumns.map((col) => (\n                    <SortableColumnItem key={col.key} column={col} onToggle={onToggleColumn} />\n                  ))}\n                </div>\n              </SortableContext>\n            </DndContext>\n          </div>\n        ) : null}\n\n        <div className=\"border-t px-4 py-3 mt-4 mb-4\">\n          <div className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground mb-3\">\n            {t('ui.columnChooser.available', 'Available columns')}\n          </div>\n          {Array.from(groupedAvailable.entries()).map(([group, columns]) => {\n            const isCollapsed = !searchQuery && !expandedGroups.has(group)\n            return (\n              <div key={group} className=\"mb-2\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start gap-2 h-auto px-1 py-2 text-xs font-medium uppercase text-muted-foreground\"\n                  onClick={() => toggleGroup(group)}\n                >\n                  <ChevronRight className={`size-4 transition-transform ${isCollapsed ? '' : 'rotate-90'}`} />\n                  <span>{group}</span>\n                </Button>\n                {!isCollapsed ? (\n                  <div className=\"space-y-2 mt-2\">\n                    {columns.map((col) => (\n                      <div\n                        key={col.key}\n                        className=\"flex items-center gap-2 rounded pl-7 pr-2 py-1.5 text-sm hover:bg-muted/50 cursor-pointer\"\n                        onClick={() => { if (!col.alwaysVisible) onToggleColumn(col.key) }}\n                      >\n                        <span className=\"truncate flex-1 min-w-0\">{col.label}</span>\n                        <Switch\n                          checked={false}\n                          disabled={col.alwaysVisible}\n                          onCheckedChange={() => onToggleColumn(col.key)}\n                          onClick={(e) => e.stopPropagation()}\n                          className=\"shrink-0 scale-90\"\n                        />\n                      </div>\n                    ))}\n                  </div>\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function ColumnChooserPanel({\n  open,\n  onOpenChange,\n  ...sectionProps\n}: ColumnChooserPanelProps) {\n  const t = useT()\n  React.useEffect(() => {\n    if (!open) return\n    if (typeof document === 'undefined') return\n    document.body.dataset.columnChooserOpen = 'true'\n    return () => {\n      delete document.body.dataset.columnChooserOpen\n    }\n  }, [open])\n  if (!open) return null\n  return (\n    <div className=\"fixed inset-y-0 right-0 z-50 w-80 border-l bg-background shadow-lg flex flex-col\">\n      <div className=\"flex items-center justify-between border-b px-4 py-3\">\n        <h3 className=\"font-semibold text-sm\">\n          {t('ui.columnChooser.title', 'Columns')}\n        </h3>\n        <IconButton variant=\"ghost\" size=\"sm\" type=\"button\" onClick={() => onOpenChange(false)} aria-label={t('ui.columnChooser.close', 'Close')}>\n          <X className=\"size-4\" />\n        </IconButton>\n      </div>\n      <div className=\"flex-1 overflow-auto\">\n        <ColumnChooserSection {...sectionProps} />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/confirm-dialog/ConfirmDialog.js

@@ -0,0 +1,214 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@freighttech/ui/primitives/button";
+import { IconButton } from "../../primitives/icon-button.js";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Loader2, X } from "lucide-react";
+function ConfirmDialog({
+  open: controlledOpen,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+  title,
+  text,
+  confirmText,
+  cancelText,
+  variant = "default",
+  loading = false,
+  trigger
+}) {
+  const t = useT();
+  const dialogRef = React.useRef(null);
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const cancelButtonRef = React.useRef(null);
+  const confirmButtonRef = React.useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled ? onOpenChange || (() => {
+  }) : setInternalOpen;
+  const handleCancelCallback = React.useCallback(() => {
+    if (!isControlled) {
+      onCancel?.();
+    }
+  }, [isControlled, onCancel]);
+  const resolvedTitle = title ?? t("ui.dialogs.confirm.defaultTitle", "Are you sure?");
+  const resolvedConfirmText = confirmText === false ? false : confirmText ?? t("ui.dialogs.confirm.confirmText", "Confirm");
+  const resolvedCancelText = cancelText === false ? false : cancelText ?? t("ui.dialogs.confirm.cancelText", "Cancel");
+  const closeAriaLabel = t("ui.dialog.close.ariaLabel", "Close");
+  const requestClose = React.useCallback(() => {
+    setOpen(false);
+    handleCancelCallback();
+  }, [setOpen, handleCancelCallback]);
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      if (!dialog.open) {
+        dialog.showModal();
+        setTimeout(() => {
+          if (resolvedCancelText !== false && cancelButtonRef.current) {
+            cancelButtonRef.current.focus();
+          } else if (confirmButtonRef.current) {
+            confirmButtonRef.current.focus();
+          }
+        }, 0);
+      }
+    } else {
+      if (dialog.open) {
+        dialog.close();
+      }
+    }
+  }, [open, resolvedCancelText]);
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleCancel2 = (e) => {
+      if (loading) {
+        e.preventDefault();
+        return;
+      }
+      requestClose();
+    };
+    dialog.addEventListener("cancel", handleCancel2);
+    return () => dialog.removeEventListener("cancel", handleCancel2);
+  }, [loading, requestClose]);
+  const handleBackdropClick = (e) => {
+    if (e.target === dialogRef.current && !loading) {
+      requestClose();
+    }
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && !loading) {
+        e.preventDefault();
+        handleConfirm();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, loading]);
+  const handleConfirm = async () => {
+    await onConfirm();
+    if (!loading) {
+      setOpen(false);
+    }
+  };
+  const handleCancel = () => {
+    requestClose();
+  };
+  const handleTriggerClick = () => {
+    if (trigger) {
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger && /* @__PURE__ */ jsx("div", { onClick: handleTriggerClick, className: "inline-block", role: "presentation", children: trigger }),
+    /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        role: "alertdialog",
+        "aria-labelledby": "confirm-dialog-title",
+        "aria-describedby": text ? "confirm-dialog-description" : void 0,
+        onClick: handleBackdropClick,
+        className: cn(
+          // Reset dialog defaults
+          "m-0 p-0 max-w-none bg-transparent border-none",
+          // Backdrop styling
+          "backdrop:bg-black/50 backdrop:transition-opacity",
+          // Mobile: bottom sheet
+          "fixed inset-x-0 bottom-0 top-auto w-full",
+          // Desktop: centered
+          "sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+          // Animation with reduced motion support
+          "motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4",
+          "sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95",
+          // Duration
+          "motion-safe:open:duration-300"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "document",
+            className: cn(
+              // Panel container
+              "flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg",
+              "sm:rounded-xl sm:border",
+              // Relative positioning for close button
+              "relative"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: handleCancel,
+                  disabled: loading,
+                  "aria-label": closeAriaLabel,
+                  className: "absolute right-4 top-4 opacity-70 hover:opacity-100",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "confirm-dialog-title",
+                  className: cn(
+                    "text-sm font-medium leading-snug tracking-tight pr-6",
+                    // Mobile: centered, Desktop: left-aligned
+                    "text-center sm:text-left"
+                  ),
+                  children: resolvedTitle
+                }
+              ),
+              text && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: "confirm-dialog-description",
+                  className: "text-sm font-medium leading-snug text-muted-foreground",
+                  children: text
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+                resolvedCancelText !== false && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ref: cancelButtonRef,
+                    variant: "outline",
+                    onClick: handleCancel,
+                    disabled: loading,
+                    className: "w-full sm:w-auto",
+                    children: resolvedCancelText
+                  }
+                ),
+                resolvedConfirmText !== false && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    ref: confirmButtonRef,
+                    variant: variant === "destructive" ? "destructive" : "default",
+                    onClick: handleConfirm,
+                    disabled: loading,
+                    className: "w-full sm:w-auto",
+                    children: [
+                      loading && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+                      resolvedConfirmText
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ConfirmDialog
+};
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/backend/confirm-dialog/ConfirmDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/confirm-dialog/ConfirmDialog.tsx"],
+  "sourcesContent": ["\"use client\";\nimport * as React from \"react\";\nimport { useT } from \"@open-mercato/shared/lib/i18n/context\";\nimport { Button } from \"@freighttech/ui/primitives/button\";\nimport { IconButton } from \"../../primitives/icon-button\";\nimport { cn } from \"@open-mercato/shared/lib/utils\";\nimport { Loader2, X } from \"lucide-react\";\n\nexport type ConfirmDialogProps = {\n  /** Whether the dialog is open (controlled mode \u2014 used by useConfirmDialog) */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode) */\n  onOpenChange?: (open: boolean) => void;\n  /** Callback when user confirms */\n  onConfirm: () => void | Promise<void>;\n  /** Callback when user cancels (optional, defaults to closing) */\n  onCancel?: () => void;\n  /** Dialog title. Defaults to i18n key \"ui.dialogs.confirm.defaultTitle\" (\"Are you sure?\") */\n  title?: string;\n  /** Dialog body text / description */\n  text?: string;\n  /** Confirm button label. Defaults to i18n \"ui.dialogs.confirm.confirmText\" (\"Confirm\").\n   *  Pass `false` to hide the confirm button entirely. */\n  confirmText?: string | false;\n  /** Cancel button label. Defaults to i18n \"ui.dialogs.confirm.cancelText\" (\"Cancel\").\n   *  Pass `false` to hide the cancel button entirely. */\n  cancelText?: string | false;\n  /** Visual variant \u2014 \"destructive\" renders the confirm button in red */\n  variant?: \"default\" | \"destructive\";\n  /** Whether the confirm button shows a loading spinner.\n   *  Useful for async onConfirm handlers (e.g., waiting for API response before closing). */\n  loading?: boolean;\n  /** Trigger element \u2014 when provided, component manages its own open state (declarative mode).\n   *  Clicking the trigger opens the dialog. */\n  trigger?: React.ReactNode;\n};\n\nexport function ConfirmDialog({\n  open: controlledOpen,\n  onOpenChange,\n  onConfirm,\n  onCancel,\n  title,\n  text,\n  confirmText,\n  cancelText,\n  variant = \"default\",\n  loading = false,\n  trigger,\n}: ConfirmDialogProps) {\n  const t = useT();\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);\n  const confirmButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  // Determine if we're in controlled mode (open prop provided) or declarative mode (trigger provided)\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const setOpen = isControlled\n    ? onOpenChange || (() => {})\n    : setInternalOpen;\n  const handleCancelCallback = React.useCallback(() => {\n    if (!isControlled) {\n      onCancel?.();\n    }\n  }, [isControlled, onCancel]);\n\n  // Default text values from i18n\n  const resolvedTitle =\n    title ?? t(\"ui.dialogs.confirm.defaultTitle\", \"Are you sure?\");\n  const resolvedConfirmText =\n    confirmText === false\n      ? false\n      : confirmText ?? t(\"ui.dialogs.confirm.confirmText\", \"Confirm\");\n  const resolvedCancelText =\n    cancelText === false\n      ? false\n      : cancelText ?? t(\"ui.dialogs.confirm.cancelText\", \"Cancel\");\n  const closeAriaLabel = t(\"ui.dialog.close.ariaLabel\", \"Close\");\n  const requestClose = React.useCallback(() => {\n    setOpen(false);\n    handleCancelCallback();\n  }, [setOpen, handleCancelCallback]);\n\n  // Handle dialog open/close with native showModal/close\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n        // Focus cancel button (safe default) or confirm if no cancel\n        setTimeout(() => {\n          if (resolvedCancelText !== false && cancelButtonRef.current) {\n            cancelButtonRef.current.focus();\n          } else if (confirmButtonRef.current) {\n            confirmButtonRef.current.focus();\n          }\n        }, 0);\n      }\n    } else {\n      if (dialog.open) {\n        dialog.close();\n      }\n    }\n  }, [open, resolvedCancelText]);\n\n  // Handle native cancel event (Escape key)\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    const handleCancel = (e: Event) => {\n      // Prevent close if loading\n      if (loading) {\n        e.preventDefault();\n        return;\n      }\n      requestClose();\n    };\n\n    dialog.addEventListener(\"cancel\", handleCancel);\n    return () => dialog.removeEventListener(\"cancel\", handleCancel);\n  }, [loading, requestClose]);\n\n  // Handle backdrop click\n  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    // Only close if clicking directly on the dialog (backdrop), not its children\n    if (e.target === dialogRef.current && !loading) {\n      requestClose();\n    }\n  };\n\n  // Handle keyboard shortcuts\n  React.useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Cmd/Ctrl+Enter confirms\n      if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\" && !loading) {\n        e.preventDefault();\n        handleConfirm();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, loading]);\n\n  const handleConfirm = async () => {\n    await onConfirm();\n    // Don't auto-close if loading \u2014 let the parent control when to close\n    if (!loading) {\n      setOpen(false);\n    }\n  };\n\n  const handleCancel = () => {\n    requestClose();\n  };\n\n  const handleTriggerClick = () => {\n    if (trigger) {\n      setOpen(true);\n    }\n  };\n\n  return (\n    <>\n      {trigger && (\n        <div onClick={handleTriggerClick} className=\"inline-block\" role=\"presentation\">\n          {trigger}\n        </div>\n      )}\n\n      <dialog\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-labelledby=\"confirm-dialog-title\"\n        aria-describedby={text ? \"confirm-dialog-description\" : undefined}\n        onClick={handleBackdropClick}\n        className={cn(\n          // Reset dialog defaults\n          \"m-0 p-0 max-w-none bg-transparent border-none\",\n          // Backdrop styling\n          \"backdrop:bg-black/50 backdrop:transition-opacity\",\n          // Mobile: bottom sheet\n          \"fixed inset-x-0 bottom-0 top-auto w-full\",\n          // Desktop: centered\n          \"sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2\",\n          // Animation with reduced motion support\n          \"motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4\",\n          \"sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95\",\n          // Duration\n          \"motion-safe:open:duration-300\"\n        )}\n      >\n        <div\n          role=\"document\"\n          className={cn(\n            // Panel container\n            \"flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg\",\n            \"sm:rounded-xl sm:border\",\n            // Relative positioning for close button\n            \"relative\"\n          )}\n        >\n          {/* Close button */}\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleCancel}\n            disabled={loading}\n            aria-label={closeAriaLabel}\n            className=\"absolute right-4 top-4 opacity-70 hover:opacity-100\"\n          >\n            <X className=\"h-4 w-4\" />\n          </IconButton>\n\n          {/* Title */}\n          <h2\n            id=\"confirm-dialog-title\"\n            className={cn(\n              \"text-sm font-medium leading-snug tracking-tight pr-6\",\n              // Mobile: centered, Desktop: left-aligned\n              \"text-center sm:text-left\"\n            )}\n          >\n            {resolvedTitle}\n          </h2>\n\n          {/* Description (optional) */}\n          {text && (\n            <p\n              id=\"confirm-dialog-description\"\n              className=\"text-sm font-medium leading-snug text-muted-foreground\"\n            >\n              {text}\n            </p>\n          )}\n\n          {/* Actions */}\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            {resolvedCancelText !== false && (\n              <Button\n                ref={cancelButtonRef}\n                variant=\"outline\"\n                onClick={handleCancel}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {resolvedCancelText}\n              </Button>\n            )}\n            {resolvedConfirmText !== false && (\n              <Button\n                ref={confirmButtonRef}\n                variant={variant === \"destructive\" ? \"destructive\" : \"default\"}\n                onClick={handleConfirm}\n                disabled={loading}\n                className=\"w-full sm:w-auto\"\n              >\n                {loading && <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />}\n                {resolvedConfirmText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </dialog>\n    </>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["handleCancel"]
+}

package/dist/backend/confirm-dialog/index.js

@@ -0,0 +1,7 @@
+import { ConfirmDialog } from "./ConfirmDialog.js";
+import { useConfirmDialog } from "./useConfirmDialog.js";
+export {
+  ConfirmDialog,
+  useConfirmDialog
+};
+//# sourceMappingURL=index.js.map

package/dist/backend/confirm-dialog/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/confirm-dialog/index.ts"],
+  "sourcesContent": ["export { ConfirmDialog } from \"./ConfirmDialog\";\nexport type { ConfirmDialogProps } from \"./ConfirmDialog\";\nexport { useConfirmDialog } from \"./useConfirmDialog\";\nexport type {\n  UseConfirmDialogReturn,\n  ConfirmDialogOptions,\n} from \"./useConfirmDialog\";\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;",
+  "names": []
+}