@fairmint/ui 0.3.1 → 0.3.3

package/dist/components/generic/DocumentRow/DocumentRow.cjs

@@ -0,0 +1,297 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../../theme/index.cjs");
+const colors = require("../../../theme/colors.cjs");
+const Loader = require("../../primitives/Loader/Loader.cjs");
+const layout = require("../../primitives/layout.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const UnstyledButton = require("../../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.cjs");
+const ThemeIcon = require("../../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.cjs");
+function DefaultFileIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" })
+      ]
+    }
+  );
+}
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function DefaultClockIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })
+      ]
+    }
+  );
+}
+function DefaultAlertIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+function statusIconColor(status) {
+  switch (status) {
+    case "complete":
+      return colors.colors.success;
+    case "attention":
+      return colors.colors.warning;
+    case "error":
+      return colors.colors.error;
+    case "uploading":
+    case "processing":
+      return colors.colors.primary;
+    default:
+      return colors.colors.neutral;
+  }
+}
+function statusLabelColor(status, selected) {
+  if (selected) return index.semanticColors.info;
+  switch (status) {
+    case "complete":
+      return index.semanticColors.success;
+    case "attention":
+      return index.semanticColors.warning;
+    case "error":
+      return index.semanticColors.error;
+    case "uploading":
+    case "processing":
+      return index.brandColors.indigo;
+    default:
+      return index.neutralColors[500];
+  }
+}
+function DefaultStatusIcon({ status }) {
+  if (status === "uploading" || status === "processing") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: 14, color: colors.colors.primary, "aria-hidden": true });
+  }
+  if (status === "complete") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon.ThemeIcon, { size: 20, radius: "xl", variant: "light", color: colors.colors.success, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultCheckIcon, {}) });
+  }
+  if (status === "attention") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon.ThemeIcon, { size: 20, radius: "xl", variant: "light", color: colors.colors.warning, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultAlertIcon, {}) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon.ThemeIcon, { size: 20, radius: "xl", variant: "light", color: colors.colors.error, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultAlertIcon, {}) });
+  }
+  if (status === "queued") {
+    return /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { c: index.neutralColors[400], style: { display: "flex", flexShrink: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultClockIcon, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon.ThemeIcon, { size: 20, radius: "md", variant: "light", color: statusIconColor(status), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultFileIcon, {}) });
+}
+function ProcessingLabelStyles() {
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+      .document-row-status--live {
+        display: inline-block;
+        background-image: linear-gradient(90deg, ${index.brandColors.indigo}, ${index.brandColors.purple}, ${index.brandColors.indigo});
+        background-size: 200% auto;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        font-weight: 500;
+        animation: gradientFlow 2.2s linear infinite;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .document-row-status--live {
+          animation: none;
+          background-image: none;
+          color: ${index.neutralColors[600]};
+        }
+      }
+    ` });
+}
+function DocumentStatusRow({
+  fileName,
+  status,
+  statusLabel,
+  description,
+  icon,
+  selected = false,
+  onClick,
+  actions,
+  detail,
+  disabled = false,
+  ariaLabel
+}) {
+  const hasActivationTarget = Boolean(onClick);
+  const isClickable = hasActivationTarget && !disabled;
+  const isLive = status === "uploading" || status === "processing";
+  const borderColor = selected ? index.semanticColors.info : status === "error" ? `${index.semanticColors.error}55` : status === "attention" ? `${index.semanticColors.warning}66` : index.neutralColors[200];
+  const background = selected ? `${index.semanticColors.info}0a` : status === "error" ? `${index.semanticColors.error}08` : void 0;
+  const resolvedAriaLabel = ariaLabel ?? `${fileName}. ${statusLabel}`;
+  const statusAnnouncement = `${fileName}: ${statusLabel}`;
+  const hasDescription = description != null && description !== "";
+  const rowAlign = hasDescription ? "flex-start" : "center";
+  const activate = () => {
+    if (!isClickable) return;
+    onClick?.();
+  };
+  const primaryContent = /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "sm", wrap: "nowrap", align: rowAlign, style: { minWidth: 0, flex: 1 }, miw: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(layout.Box, { style: { flexShrink: 0, display: "flex", alignItems: "center" }, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultStatusIcon, { status }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, miw: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Text.Text,
+        {
+          size: "sm",
+          fw: 500,
+          c: index.neutralColors[900],
+          lineClamp: 1,
+          title: fileName,
+          style: { minWidth: 0 },
+          children: fileName
+        }
+      ),
+      hasDescription ? typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "xs", c: index.neutralColors[500], lineClamp: 2, style: { minWidth: 0 }, children: description }) : description : null
+    ] })
+  ] });
+  const statusAndActions = /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
+    isLive ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Text.Text,
+        {
+          size: "xs",
+          className: "document-row-status--live",
+          role: "status",
+          "aria-label": statusAnnouncement,
+          style: { whiteSpace: "nowrap" },
+          children: statusLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ProcessingLabelStyles, {})
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      Text.Text,
+      {
+        size: "xs",
+        fw: selected ? 500 : 400,
+        c: statusLabelColor(status, selected),
+        role: "status",
+        "aria-label": statusAnnouncement,
+        style: { whiteSpace: "nowrap" },
+        children: statusLabel
+      }
+    ),
+    actions
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    layout.Box,
+    {
+      "data-testid": "document-row",
+      "data-status": status,
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      className: "document-row",
+      w: "100%",
+      miw: 0,
+      style: {
+        borderRadius: 10,
+        border: `1px solid ${borderColor}`,
+        background: background ?? "transparent",
+        opacity: disabled ? 0.6 : 1,
+        transition: "border-color 0.18s ease, background-color 0.18s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Group.Group,
+          {
+            justify: "space-between",
+            wrap: "nowrap",
+            gap: "sm",
+            px: "sm",
+            py: 8,
+            align: rowAlign,
+            style: { minWidth: 0 },
+            children: [
+              hasActivationTarget ? /* @__PURE__ */ jsxRuntime.jsx(
+                UnstyledButton.UnstyledButton,
+                {
+                  onClick: activate,
+                  disabled,
+                  "aria-label": resolvedAriaLabel,
+                  "aria-expanded": selected,
+                  style: {
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    minWidth: 0,
+                    flex: 1,
+                    textAlign: "left"
+                  },
+                  children: primaryContent
+                }
+              ) : primaryContent,
+              statusAndActions
+            ]
+          }
+        ),
+        detail != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          layout.Box,
+          {
+            px: "sm",
+            pb: "sm",
+            pt: 0,
+            onClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => event.stopPropagation(),
+            children: detail
+          }
+        ) : null
+      ]
+    }
+  );
+}
+exports.DocumentStatusRow = DocumentStatusRow;
+//# sourceMappingURL=DocumentRow.cjs.map

package/dist/components/generic/DocumentRow/DocumentRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentRow.cjs","sources":["../../../../src/components/generic/DocumentRow/DocumentRow.tsx"],"sourcesContent":["import type { ReactNode, SyntheticEvent } from \"react\";\nimport { brandColors, neutralColors, semanticColors } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Loader } from \"../../primitives/Loader/Loader\";\nimport { Box, Group, Stack, Text, ThemeIcon, UnstyledButton } from \"../../primitives/layout\";\n\n/** Visual processing vocabulary for a source document after selection. */\nexport type DocumentStatusRowStatus =\n  | \"staged\"\n  | \"uploading\"\n  | \"queued\"\n  | \"processing\"\n  | \"complete\"\n  | \"attention\"\n  | \"error\";\n\nexport interface DocumentStatusRowProps {\n  /** Source document filename. */\n  fileName: string;\n  /**\n   * Neutral visual state. Product meaning (classified, approved, needs review)\n   * belongs in `statusLabel`, not in this enum.\n   */\n  status: DocumentStatusRowStatus;\n  /**\n   * Caller-supplied status word or short phrase. Required so status is never\n   * communicated by color or animation alone.\n   */\n  statusLabel: string;\n  /** Optional secondary description or metadata beneath the filename. */\n  description?: ReactNode;\n  /** Leading icon override. Defaults to a status-appropriate glyph. */\n  icon?: ReactNode;\n  /** Open / disclosed appearance (independent of `status`). Exposed as `aria-expanded` when `onClick` is set. @default false */\n  selected?: boolean;\n  /** Makes the primary row activatable (mouse + keyboard). */\n  onClick?: () => void;\n  /**\n   * Trailing actions (remove, retry, download, open). Rendered outside the\n   * clickable hit target so action clicks do not also activate the row.\n   */\n  actions?: ReactNode;\n  /** Optional detail content beneath the primary row. */\n  detail?: ReactNode;\n  /** Softens chrome and, with `onClick`, renders a disabled button that blocks activation. @default false */\n  disabled?: boolean;\n  /** Accessible name when `onClick` is set. Defaults to fileName + statusLabel. */\n  ariaLabel?: string;\n}\n\nfunction DefaultFileIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\" />\n      <path d=\"M14 2v6h6\" />\n    </svg>\n  );\n}\n\nfunction DefaultCheckIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction DefaultClockIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 6v6l4 2\" />\n    </svg>\n  );\n}\n\nfunction DefaultAlertIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n      <path d=\"M12 9v4\" />\n      <path d=\"M12 17h.01\" />\n    </svg>\n  );\n}\n\nfunction statusIconColor(status: DocumentStatusRowStatus): string {\n  switch (status) {\n    case \"complete\":\n      return colors.success;\n    case \"attention\":\n      return colors.warning;\n    case \"error\":\n      return colors.error;\n    case \"uploading\":\n    case \"processing\":\n      return colors.primary;\n    default:\n      return colors.neutral;\n  }\n}\n\nfunction statusLabelColor(status: DocumentStatusRowStatus, selected: boolean): string {\n  if (selected) return semanticColors.info;\n  switch (status) {\n    case \"complete\":\n      return semanticColors.success;\n    case \"attention\":\n      return semanticColors.warning;\n    case \"error\":\n      return semanticColors.error;\n    case \"uploading\":\n    case \"processing\":\n      return brandColors.indigo;\n    default:\n      return neutralColors[500];\n  }\n}\n\nfunction DefaultStatusIcon({ status }: { status: DocumentStatusRowStatus }) {\n  if (status === \"uploading\" || status === \"processing\") {\n    return <Loader size={14} color={colors.primary} aria-hidden />;\n  }\n  if (status === \"complete\") {\n    return (\n      <ThemeIcon size={20} radius=\"xl\" variant=\"light\" color={colors.success} aria-hidden>\n        <DefaultCheckIcon />\n      </ThemeIcon>\n    );\n  }\n  if (status === \"attention\") {\n    return (\n      <ThemeIcon size={20} radius=\"xl\" variant=\"light\" color={colors.warning} aria-hidden>\n        <DefaultAlertIcon />\n      </ThemeIcon>\n    );\n  }\n  if (status === \"error\") {\n    return (\n      <ThemeIcon size={20} radius=\"xl\" variant=\"light\" color={colors.error} aria-hidden>\n        <DefaultAlertIcon />\n      </ThemeIcon>\n    );\n  }\n  if (status === \"queued\") {\n    return (\n      <Box c={neutralColors[400]} style={{ display: \"flex\", flexShrink: 0 }} aria-hidden>\n        <DefaultClockIcon />\n      </Box>\n    );\n  }\n  return (\n    <ThemeIcon size={20} radius=\"md\" variant=\"light\" color={statusIconColor(status)} aria-hidden>\n      <DefaultFileIcon />\n    </ThemeIcon>\n  );\n}\n\nfunction ProcessingLabelStyles() {\n  return (\n    <style>{`\n      .document-row-status--live {\n        display: inline-block;\n        background-image: linear-gradient(90deg, ${brandColors.indigo}, ${brandColors.purple}, ${brandColors.indigo});\n        background-size: 200% auto;\n        -webkit-background-clip: text;\n        background-clip: text;\n        color: transparent;\n        font-weight: 500;\n        animation: gradientFlow 2.2s linear infinite;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .document-row-status--live {\n          animation: none;\n          background-image: none;\n          color: ${neutralColors[600]};\n        }\n      }\n    `}</style>\n  );\n}\n\n/**\n * Neutral source-document row for upload → process → settle flows.\n *\n * Owns visual state and accessibility for one uploaded file. Does not own OCR,\n * classification, extraction, approval, polling, or product retry logic — the\n * caller supplies `statusLabel`, actions, and meaning.\n *\n * Layout: a single row with minimal separation. Do not wrap lists of these in\n * an extra card/panel unless the app owns that composition (e.g. a processing\n * container pattern).\n */\nexport function DocumentStatusRow({\n  fileName,\n  status,\n  statusLabel,\n  description,\n  icon,\n  selected = false,\n  onClick,\n  actions,\n  detail,\n  disabled = false,\n  ariaLabel,\n}: DocumentStatusRowProps) {\n  const hasActivationTarget = Boolean(onClick);\n  const isClickable = hasActivationTarget && !disabled;\n  const isLive = status === \"uploading\" || status === \"processing\";\n  const borderColor = selected\n    ? semanticColors.info\n    : status === \"error\"\n      ? `${semanticColors.error}55`\n      : status === \"attention\"\n        ? `${semanticColors.warning}66`\n        : neutralColors[200];\n  const background = selected\n    ? `${semanticColors.info}0a`\n    : status === \"error\"\n      ? `${semanticColors.error}08`\n      : undefined;\n  const resolvedAriaLabel = ariaLabel ?? `${fileName}. ${statusLabel}`;\n  /** Accessible status announcement includes filename so lists of rows stay distinct. */\n  const statusAnnouncement = `${fileName}: ${statusLabel}`;\n  const hasDescription = description != null && description !== \"\";\n  /** Single-line rows center icon/title/actions; multi-line keeps icon top-aligned with the title. */\n  const rowAlign = hasDescription ? \"flex-start\" : \"center\";\n\n  const activate = () => {\n    if (!isClickable) return;\n    onClick?.();\n  };\n\n  const primaryContent = (\n    <Group gap=\"sm\" wrap=\"nowrap\" align={rowAlign} style={{ minWidth: 0, flex: 1 }} miw={0}>\n      <Box style={{ flexShrink: 0, display: \"flex\", alignItems: \"center\" }}>\n        {icon ?? <DefaultStatusIcon status={status} />}\n      </Box>\n      <Stack gap={2} style={{ minWidth: 0, flex: 1 }} miw={0}>\n        <Text\n          size=\"sm\"\n          fw={500}\n          c={neutralColors[900]}\n          lineClamp={1}\n          title={fileName}\n          style={{ minWidth: 0 }}\n        >\n          {fileName}\n        </Text>\n        {hasDescription ? (\n          typeof description === \"string\" ? (\n            <Text size=\"xs\" c={neutralColors[500]} lineClamp={2} style={{ minWidth: 0 }}>\n              {description}\n            </Text>\n          ) : (\n            description\n          )\n        ) : null}\n      </Stack>\n    </Group>\n  );\n\n  const statusAndActions = (\n    <Group gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n      {isLive ? (\n        <>\n          <Text\n            size=\"xs\"\n            className=\"document-row-status--live\"\n            role=\"status\"\n            aria-label={statusAnnouncement}\n            style={{ whiteSpace: \"nowrap\" }}\n          >\n            {statusLabel}\n          </Text>\n          <ProcessingLabelStyles />\n        </>\n      ) : (\n        <Text\n          size=\"xs\"\n          fw={selected ? 500 : 400}\n          c={statusLabelColor(status, selected)}\n          role=\"status\"\n          aria-label={statusAnnouncement}\n          style={{ whiteSpace: \"nowrap\" }}\n        >\n          {statusLabel}\n        </Text>\n      )}\n      {actions}\n    </Group>\n  );\n\n  return (\n    <Box\n      data-testid=\"document-row\"\n      data-status={status}\n      data-selected={selected || undefined}\n      data-disabled={disabled || undefined}\n      className=\"document-row\"\n      w=\"100%\"\n      miw={0}\n      style={{\n        borderRadius: 10,\n        border: `1px solid ${borderColor}`,\n        background: background ?? \"transparent\",\n        opacity: disabled ? 0.6 : 1,\n        transition: \"border-color 0.18s ease, background-color 0.18s ease\",\n      }}\n    >\n      <Group\n        justify=\"space-between\"\n        wrap=\"nowrap\"\n        gap=\"sm\"\n        px=\"sm\"\n        py={8}\n        align={rowAlign}\n        style={{ minWidth: 0 }}\n      >\n        {hasActivationTarget ? (\n          <UnstyledButton\n            onClick={activate}\n            disabled={disabled}\n            aria-label={resolvedAriaLabel}\n            aria-expanded={selected}\n            style={{\n              cursor: disabled ? \"not-allowed\" : \"pointer\",\n              minWidth: 0,\n              flex: 1,\n              textAlign: \"left\",\n            }}\n          >\n            {primaryContent}\n          </UnstyledButton>\n        ) : (\n          primaryContent\n        )}\n        {statusAndActions}\n      </Group>\n\n      {detail != null ? (\n        <Box\n          px=\"sm\"\n          pb=\"sm\"\n          pt={0}\n          onClick={(event: SyntheticEvent) => event.stopPropagation()}\n          onKeyDown={(event: SyntheticEvent) => event.stopPropagation()}\n        >\n          {detail}\n        </Box>\n      ) : null}\n    </Box>\n  );\n}\n"],"names":["jsxs","jsx","colors","semanticColors","brandColors","neutralColors","Loader","ThemeIcon","Box","Group","Stack","Text","Fragment","UnstyledButton"],"mappings":"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"}

package/dist/components/generic/DocumentRow/DocumentRow.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+/** Visual processing vocabulary for a source document after selection. */
+export type DocumentStatusRowStatus = "staged" | "uploading" | "queued" | "processing" | "complete" | "attention" | "error";
+export interface DocumentStatusRowProps {
+    /** Source document filename. */
+    fileName: string;
+    /**
+     * Neutral visual state. Product meaning (classified, approved, needs review)
+     * belongs in `statusLabel`, not in this enum.
+     */
+    status: DocumentStatusRowStatus;
+    /**
+     * Caller-supplied status word or short phrase. Required so status is never
+     * communicated by color or animation alone.
+     */
+    statusLabel: string;
+    /** Optional secondary description or metadata beneath the filename. */
+    description?: ReactNode;
+    /** Leading icon override. Defaults to a status-appropriate glyph. */
+    icon?: ReactNode;
+    /** Open / disclosed appearance (independent of `status`). Exposed as `aria-expanded` when `onClick` is set. @default false */
+    selected?: boolean;
+    /** Makes the primary row activatable (mouse + keyboard). */
+    onClick?: () => void;
+    /**
+     * Trailing actions (remove, retry, download, open). Rendered outside the
+     * clickable hit target so action clicks do not also activate the row.
+     */
+    actions?: ReactNode;
+    /** Optional detail content beneath the primary row. */
+    detail?: ReactNode;
+    /** Softens chrome and, with `onClick`, renders a disabled button that blocks activation. @default false */
+    disabled?: boolean;
+    /** Accessible name when `onClick` is set. Defaults to fileName + statusLabel. */
+    ariaLabel?: string;
+}
+/**
+ * Neutral source-document row for upload → process → settle flows.
+ *
+ * Owns visual state and accessibility for one uploaded file. Does not own OCR,
+ * classification, extraction, approval, polling, or product retry logic — the
+ * caller supplies `statusLabel`, actions, and meaning.
+ *
+ * Layout: a single row with minimal separation. Do not wrap lists of these in
+ * an extra card/panel unless the app owns that composition (e.g. a processing
+ * container pattern).
+ */
+export declare function DocumentStatusRow({ fileName, status, statusLabel, description, icon, selected, onClick, actions, detail, disabled, ariaLabel, }: DocumentStatusRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DocumentRow.d.ts.map

package/dist/components/generic/DocumentRow/DocumentRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/DocumentRow/DocumentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAMvD,0EAA0E;AAC1E,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,WAAW,GACX,OAAO,CAAC;AAEZ,MAAM,WAAW,sBAAsB;IACrC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,EAAE,uBAAuB,CAAC;IAChC;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8HAA8H;IAC9H,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8KD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACX,IAAI,EACJ,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,SAAS,GACV,EAAE,sBAAsB,2CAoJxB"}