@fairmint/ui 0.3.18 → 0.3.20

package/dist/components/generic/NotificationRow/NotificationRow.js

@@ -0,0 +1,169 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fairmintVars } from "../../../theme/index.js";
+import { colors } from "../../../theme/colors.js";
+import { ActionIcon } from "../../primitives/ActionIcon/ActionIcon.js";
+import { Badge } from "../../primitives/Badge/Badge.js";
+import { Box, Stack } from "../../primitives/layout.js";
+import { ColorDot } from "../ColorDot/ColorDot.js";
+import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+const SEVERITY_BADGE_COLORS = {
+  critical: colors.error,
+  high: colors.warning,
+  medium: colors.info,
+  low: colors.neutral,
+  info: colors.info,
+  success: colors.success,
+  resolved: colors.success
+};
+const DEFAULT_SEVERITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+  info: "Info",
+  success: "Success",
+  resolved: "Completed"
+};
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function DefaultMailIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" }),
+        /* @__PURE__ */ jsx("path", { d: "m22 6-10 7L2 6" })
+      ]
+    }
+  );
+}
+function NotificationRow({
+  ariaLabel,
+  body,
+  className,
+  isUnread = false,
+  onToggleRead,
+  severity = "medium",
+  severityLabel,
+  timestamp,
+  title,
+  toggleReadLabel,
+  variant = "standalone",
+  withDivider = true
+}) {
+  const resolvedSeverityLabel = severityLabel ?? DEFAULT_SEVERITY_LABELS[severity];
+  const resolvedToggleReadLabel = toggleReadLabel ?? (isUnread ? `Mark read: ${title}` : `Mark unread: ${title}`);
+  const readStateLabel = isUnread ? "Unread notification" : "Read notification";
+  const resolvedAriaLabel = ariaLabel ?? (timestamp ? `${title}. ${resolvedSeverityLabel}. ${readStateLabel}. ${timestamp}` : `${title}. ${resolvedSeverityLabel}. ${readStateLabel}`);
+  const isList = variant === "list";
+  const badgeColor = SEVERITY_BADGE_COLORS[severity];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      role: "group",
+      className,
+      "data-severity": severity,
+      "data-testid": "notification-row",
+      "data-unread": isUnread || void 0,
+      "data-variant": variant,
+      px: "md",
+      py: "sm",
+      w: "100%",
+      style: {
+        backgroundColor: isUnread ? fairmintVars.colorBgSurface : fairmintVars.colorBgSurfaceSecondary,
+        border: isList ? "none" : `1px solid ${fairmintVars.colorBorderDefault}`,
+        borderBottom: isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : void 0,
+        borderRadius: isList ? 0 : 10
+      },
+      children: /* @__PURE__ */ jsxs(Group, { align: "flex-start", gap: "sm", justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Group, { align: "flex-start", gap: "sm", miw: 0, wrap: "nowrap", style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-hidden": true,
+              mt: 6,
+              style: {
+                flexShrink: 0,
+                width: 8,
+                display: "flex",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                ColorDot,
+                {
+                  color: isUnread ? fairmintVars.colorBrandPrimary : fairmintVars.colorBorderDisabled,
+                  size: 8
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack, { gap: 4, miw: 0, style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Badge, { color: badgeColor, size: "xs", variant: "light", children: resolvedSeverityLabel }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fw: isUnread ? 600 : 500,
+                lineClamp: 2,
+                size: "sm",
+                c: fairmintVars.colorTextPrimary,
+                style: { minWidth: 0 },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                c: fairmintVars.colorTextSecondary,
+                lineClamp: 3,
+                size: "sm",
+                style: { minWidth: 0 },
+                children: body
+              }
+            )
+          ] })
+        ] }),
+        onToggleRead ? /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            "aria-label": resolvedToggleReadLabel,
+            color: colors.neutral,
+            onClick: onToggleRead,
+            size: "md",
+            variant: "subtle",
+            children: isUnread ? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsx(DefaultMailIcon, {})
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+export {
+  NotificationRow
+};
+//# sourceMappingURL=NotificationRow.js.map

package/dist/components/generic/NotificationRow/NotificationRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationRow.js","sources":["../../../../src/components/generic/NotificationRow/NotificationRow.tsx"],"sourcesContent":["import { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { ColorDot } from \"../ColorDot/ColorDot\";\n\nexport type NotificationRowSeverity =\n  | \"critical\"\n  | \"high\"\n  | \"medium\"\n  | \"low\"\n  | \"info\"\n  | \"success\"\n  | \"resolved\";\n\nexport type NotificationRowVariant = \"standalone\" | \"list\";\n\nexport interface NotificationRowProps {\n  /** Whether the notification is unread. @default false */\n  isUnread?: boolean;\n  /** Severity shown as a pill above the title. @default \"medium\" */\n  severity?: NotificationRowSeverity;\n  /**\n   * Severity pill label. Defaults to the capitalized severity name\n   * (for example, \"Critical\", \"High\", \"Completed\" for resolved).\n   */\n  severityLabel?: string;\n  /** Primary notification title. */\n  title: string;\n  /** Supporting body copy. */\n  body: string;\n  /**\n   * Caller-formatted timestamp (for example, \"2 hours ago\").\n   * Included in the accessible name when provided; not shown in the row body.\n   */\n  timestamp?: string;\n  /**\n   * Toggle read/unread handler. Renders a mark-read icon action on the right.\n   * Unread rows show a check icon; read rows show an envelope icon.\n   */\n  onToggleRead?: () => void;\n  /** Accessible label for the toggle-read control. */\n  toggleReadLabel?: string;\n  /**\n   * Layout presentation. Use `list` inside a shared bordered stack so rows\n   * sit flush with no card gaps. @default \"standalone\"\n   */\n  variant?: NotificationRowVariant;\n  /**\n   * When `variant=\"list\"`, draw a bottom divider. Set false on the last row.\n   * @default true\n   */\n  withDivider?: boolean;\n  /** Accessible label for the row. Defaults to title plus read state. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst SEVERITY_BADGE_COLORS: Record<NotificationRowSeverity, string> = {\n  critical: colors.error,\n  high: colors.warning,\n  medium: colors.info,\n  low: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  resolved: colors.success,\n};\n\nconst DEFAULT_SEVERITY_LABELS: Record<NotificationRowSeverity, string> = {\n  critical: \"Critical\",\n  high: \"High\",\n  medium: \"Medium\",\n  low: \"Low\",\n  info: \"Info\",\n  success: \"Success\",\n  resolved: \"Completed\",\n};\n\nfunction DefaultCheckIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"16\"\n      height=\"16\"\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=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction DefaultMailIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      width=\"16\"\n      height=\"16\"\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=\"M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\" />\n      <path d=\"m22 6-10 7L2 6\" />\n    </svg>\n  );\n}\n\n/**\n * Presentational notification row for bell/inbox surfaces.\n *\n * Owns read/unread dot, severity pill, title, body, and a mark-read icon\n * action. The caller owns routing, dedupe, and domain resolution — toggling\n * read state silences awareness only; it never completes related work.\n */\nexport function NotificationRow({\n  ariaLabel,\n  body,\n  className,\n  isUnread = false,\n  onToggleRead,\n  severity = \"medium\",\n  severityLabel,\n  timestamp,\n  title,\n  toggleReadLabel,\n  variant = \"standalone\",\n  withDivider = true,\n}: NotificationRowProps) {\n  const resolvedSeverityLabel = severityLabel ?? DEFAULT_SEVERITY_LABELS[severity];\n  const resolvedToggleReadLabel =\n    toggleReadLabel ?? (isUnread ? `Mark read: ${title}` : `Mark unread: ${title}`);\n  const readStateLabel = isUnread ? \"Unread notification\" : \"Read notification\";\n  const resolvedAriaLabel =\n    ariaLabel ??\n    (timestamp\n      ? `${title}. ${resolvedSeverityLabel}. ${readStateLabel}. ${timestamp}`\n      : `${title}. ${resolvedSeverityLabel}. ${readStateLabel}`);\n  const isList = variant === \"list\";\n  const badgeColor = SEVERITY_BADGE_COLORS[severity];\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      role=\"group\"\n      className={className}\n      data-severity={severity}\n      data-testid=\"notification-row\"\n      data-unread={isUnread || undefined}\n      data-variant={variant}\n      px=\"md\"\n      py=\"sm\"\n      w=\"100%\"\n      style={{\n        backgroundColor: isUnread\n          ? fairmintVars.colorBgSurface\n          : fairmintVars.colorBgSurfaceSecondary,\n        border: isList ? \"none\" : `1px solid ${fairmintVars.colorBorderDefault}`,\n        borderBottom:\n          isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : undefined,\n        borderRadius: isList ? 0 : 10,\n      }}\n    >\n      <Group align=\"flex-start\" gap=\"sm\" justify=\"space-between\" wrap=\"nowrap\">\n        <Group align=\"flex-start\" gap=\"sm\" miw={0} wrap=\"nowrap\" style={{ flex: 1 }}>\n          <Box\n            aria-hidden\n            mt={6}\n            style={{\n              flexShrink: 0,\n              width: 8,\n              display: \"flex\",\n              justifyContent: \"center\",\n            }}\n          >\n            <ColorDot\n              color={isUnread ? fairmintVars.colorBrandPrimary : fairmintVars.colorBorderDisabled}\n              size={8}\n            />\n          </Box>\n\n          <Stack gap={4} miw={0} style={{ flex: 1 }}>\n            <Badge color={badgeColor} size=\"xs\" variant=\"light\">\n              {resolvedSeverityLabel}\n            </Badge>\n\n            <Text\n              fw={isUnread ? 600 : 500}\n              lineClamp={2}\n              size=\"sm\"\n              c={fairmintVars.colorTextPrimary}\n              style={{ minWidth: 0 }}\n            >\n              {title}\n            </Text>\n\n            <Text\n              c={fairmintVars.colorTextSecondary}\n              lineClamp={3}\n              size=\"sm\"\n              style={{ minWidth: 0 }}\n            >\n              {body}\n            </Text>\n          </Stack>\n        </Group>\n\n        {onToggleRead ? (\n          <ActionIcon\n            aria-label={resolvedToggleReadLabel}\n            color={colors.neutral}\n            onClick={onToggleRead}\n            size=\"md\"\n            variant=\"subtle\"\n          >\n            {isUnread ? <DefaultCheckIcon /> : <DefaultMailIcon />}\n          </ActionIcon>\n        ) : null}\n      </Group>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/generic/TaskRow/TaskRow.cjs

@@ -0,0 +1,151 @@
+"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 ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
+const Button = require("../../primitives/Button/Button.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 PRIORITY_SEVERITY_COLORS = {
+  critical: index.fairmintVars.colorErrorText,
+  // Mid warning ramp (amber) — clearer than warning-text/solid brown vs error red.
+  high: "warning.5",
+  medium: "warning.5",
+  low: index.fairmintVars.colorTextTertiary
+};
+const DEFAULT_PRIORITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low"
+};
+const CRITICAL_ROW_BACKGROUND = `color-mix(in srgb, ${index.fairmintVars.colorErrorSolid} 18%, ${index.fairmintVars.colorBgSurface})`;
+function DefaultDismissIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function TaskRow({
+  action,
+  ariaLabel,
+  className,
+  description,
+  dismissLabel = "Dismiss task",
+  onDismiss,
+  priority = "medium",
+  priorityLabel,
+  timingLabel,
+  title,
+  variant = "standalone",
+  withDivider = true
+}) {
+  const resolvedSeverityLabel = priorityLabel ?? DEFAULT_PRIORITY_LABELS[priority];
+  const resolvedAriaLabel = ariaLabel ?? (timingLabel ? `${title}. ${resolvedSeverityLabel} priority. ${timingLabel}` : `${title}. ${resolvedSeverityLabel} priority`);
+  const isCritical = priority === "critical";
+  const isList = variant === "list";
+  const hasDescription = description.trim().length > 0;
+  const { label: actionLabel, ...actionProps } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    layout.Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      role: "group",
+      className,
+      "data-priority": priority,
+      "data-testid": "task-row",
+      "data-variant": variant,
+      px: "sm",
+      py: 10,
+      w: "100%",
+      miw: 0,
+      style: {
+        background: isCritical ? CRITICAL_ROW_BACKGROUND : index.fairmintVars.colorBgSurface,
+        border: isList ? "none" : `1px solid ${index.fairmintVars.colorBorderDefault}`,
+        borderBottom: isList && withDivider ? `1px solid ${index.fairmintVars.colorBorderDefault}` : void 0,
+        borderRadius: isList ? 0 : 10
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "center", gap: "sm", justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, miw: 0, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Text.Text,
+            {
+              "aria-hidden": true,
+              c: PRIORITY_SEVERITY_COLORS[priority],
+              fw: 650,
+              size: "xs",
+              style: {
+                letterSpacing: "0.03em",
+                lineHeight: 1.2,
+                textTransform: "uppercase"
+              },
+              children: resolvedSeverityLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Text.Text,
+            {
+              fw: 600,
+              lineClamp: 2,
+              size: "sm",
+              c: index.fairmintVars.colorTextPrimary,
+              style: { minWidth: 0 },
+              children: title
+            }
+          ),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(
+            Text.Text,
+            {
+              c: index.fairmintVars.colorTextSecondary,
+              lineClamp: 2,
+              size: "sm",
+              style: { minWidth: 0 },
+              children: description
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "center", gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              ...actionProps,
+              color: colors.colors.primary,
+              size: "sm",
+              variant: isCritical ? "filled" : "light",
+              children: actionLabel
+            }
+          ),
+          onDismiss ? /* @__PURE__ */ jsxRuntime.jsx(
+            ActionIcon.ActionIcon,
+            {
+              "aria-label": dismissLabel,
+              color: colors.colors.neutral,
+              onClick: onDismiss,
+              size: "md",
+              variant: "subtle",
+              children: /* @__PURE__ */ jsxRuntime.jsx(DefaultDismissIcon, {})
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  );
+}
+exports.TaskRow = TaskRow;
+//# sourceMappingURL=TaskRow.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskRow.cjs","sources":["../../../../src/components/generic/TaskRow/TaskRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport type TaskRowPriority = \"critical\" | \"high\" | \"medium\" | \"low\";\n\nexport type TaskRowVariant = \"standalone\" | \"list\";\n\nexport interface TaskRowActionProps\n  extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"size\"> {\n  /** Visible primary CTA label. */\n  label: ReactNode;\n}\n\nexport interface TaskRowProps {\n  /** Priority / urgency affordance. @default \"medium\" */\n  priority?: TaskRowPriority;\n  /**\n   * Severity label shown above the title in uppercase plain text.\n   * Defaults to the capitalized priority name (for example, \"Critical\", \"High\").\n   */\n  priorityLabel?: string;\n  /** Task title. */\n  title: string;\n  /** Supporting description. */\n  description: string;\n  /**\n   * Caller-formatted due date or age (for example, \"Due today\", \"3 days ago\").\n   * Included in the accessible name when provided; not shown beside the CTA.\n   */\n  timingLabel?: string;\n  /** Primary workflow CTA. */\n  action: TaskRowActionProps;\n  /**\n   * Layout presentation. Use `list` inside a shared bordered stack so rows\n   * sit flush with no card gaps. @default \"standalone\"\n   */\n  variant?: TaskRowVariant;\n  /**\n   * When `variant=\"list\"`, draw a bottom divider. Set false on the last row.\n   * @default true\n   */\n  withDivider?: boolean;\n  /** Optional dismiss or snooze handler. */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss control. @default \"Dismiss task\" */\n  dismissLabel?: string;\n  /** Accessible label for the row. Defaults to title plus timing when provided. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst PRIORITY_SEVERITY_COLORS = {\n  critical: fairmintVars.colorErrorText,\n  // Mid warning ramp (amber) — clearer than warning-text/solid brown vs error red.\n  high: \"warning.5\",\n  medium: \"warning.5\",\n  low: fairmintVars.colorTextTertiary,\n} as const;\n\nconst DEFAULT_PRIORITY_LABELS: Record<TaskRowPriority, string> = {\n  critical: \"Critical\",\n  high: \"High\",\n  medium: \"Medium\",\n  low: \"Low\",\n};\n\n/** Soft critical tint that stays readable in Light and Dark (avoids solid error-bg in dark). */\nconst CRITICAL_ROW_BACKGROUND = `color-mix(in srgb, ${fairmintVars.colorErrorSolid} 18%, ${fairmintVars.colorBgSurface})`;\n\nfunction DefaultDismissIcon() {\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=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\n/**\n * Presentational durable-task row for Studio Tasks and future Investor inbox work.\n *\n * Owns uppercase severity text above the title, description, a right-pinned\n * vertically centered `sm` primary CTA, and optional dismiss. Only `critical`\n * priority receives a semantic fill; non-critical rows stay on the neutral\n * list surface. The owning workflow resolves completion; this row does not\n * infer resolution from dismiss.\n */\nexport function TaskRow({\n  action,\n  ariaLabel,\n  className,\n  description,\n  dismissLabel = \"Dismiss task\",\n  onDismiss,\n  priority = \"medium\",\n  priorityLabel,\n  timingLabel,\n  title,\n  variant = \"standalone\",\n  withDivider = true,\n}: TaskRowProps) {\n  const resolvedSeverityLabel = priorityLabel ?? DEFAULT_PRIORITY_LABELS[priority];\n  const resolvedAriaLabel =\n    ariaLabel ??\n    (timingLabel\n      ? `${title}. ${resolvedSeverityLabel} priority. ${timingLabel}`\n      : `${title}. ${resolvedSeverityLabel} priority`);\n  const isCritical = priority === \"critical\";\n  const isList = variant === \"list\";\n  const hasDescription = description.trim().length > 0;\n  const { label: actionLabel, ...actionProps } = action;\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      role=\"group\"\n      className={className}\n      data-priority={priority}\n      data-testid=\"task-row\"\n      data-variant={variant}\n      px=\"sm\"\n      py={10}\n      w=\"100%\"\n      miw={0}\n      style={{\n        background: isCritical ? CRITICAL_ROW_BACKGROUND : fairmintVars.colorBgSurface,\n        border: isList ? \"none\" : `1px solid ${fairmintVars.colorBorderDefault}`,\n        borderBottom:\n          isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : undefined,\n        borderRadius: isList ? 0 : 10,\n      }}\n    >\n      <Group align=\"center\" gap=\"sm\" justify=\"space-between\" wrap=\"nowrap\">\n        <Stack gap={4} miw={0} style={{ flex: 1 }}>\n          <Text\n            aria-hidden\n            c={PRIORITY_SEVERITY_COLORS[priority]}\n            fw={650}\n            size=\"xs\"\n            style={{\n              letterSpacing: \"0.03em\",\n              lineHeight: 1.2,\n              textTransform: \"uppercase\",\n            }}\n          >\n            {resolvedSeverityLabel}\n          </Text>\n\n          <Text\n            fw={600}\n            lineClamp={2}\n            size=\"sm\"\n            c={fairmintVars.colorTextPrimary}\n            style={{ minWidth: 0 }}\n          >\n            {title}\n          </Text>\n\n          {hasDescription ? (\n            <Text\n              c={fairmintVars.colorTextSecondary}\n              lineClamp={2}\n              size=\"sm\"\n              style={{ minWidth: 0 }}\n            >\n              {description}\n            </Text>\n          ) : null}\n        </Stack>\n\n        <Group align=\"center\" gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n          <Button\n            {...actionProps}\n            color={colors.primary}\n            size=\"sm\"\n            variant={isCritical ? \"filled\" : \"light\"}\n          >\n            {actionLabel}\n          </Button>\n          {onDismiss ? (\n            <ActionIcon\n              aria-label={dismissLabel}\n              color={colors.neutral}\n              onClick={onDismiss}\n              size=\"md\"\n              variant=\"subtle\"\n            >\n              <DefaultDismissIcon />\n            </ActionIcon>\n          ) : null}\n        </Group>\n      </Group>\n    </Box>\n  );\n}\n"],"names":["fairmintVars","jsxs","jsx","Box","Group","Stack","Text","Button","colors","ActionIcon"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../../primitives/Button/Button';
+export type TaskRowPriority = "critical" | "high" | "medium" | "low";
+export type TaskRowVariant = "standalone" | "list";
+export interface TaskRowActionProps extends Omit<ButtonProps, "children" | "color" | "variant" | "size"> {
+    /** Visible primary CTA label. */
+    label: ReactNode;
+}
+export interface TaskRowProps {
+    /** Priority / urgency affordance. @default "medium" */
+    priority?: TaskRowPriority;
+    /**
+     * Severity label shown above the title in uppercase plain text.
+     * Defaults to the capitalized priority name (for example, "Critical", "High").
+     */
+    priorityLabel?: string;
+    /** Task title. */
+    title: string;
+    /** Supporting description. */
+    description: string;
+    /**
+     * Caller-formatted due date or age (for example, "Due today", "3 days ago").
+     * Included in the accessible name when provided; not shown beside the CTA.
+     */
+    timingLabel?: string;
+    /** Primary workflow CTA. */
+    action: TaskRowActionProps;
+    /**
+     * Layout presentation. Use `list` inside a shared bordered stack so rows
+     * sit flush with no card gaps. @default "standalone"
+     */
+    variant?: TaskRowVariant;
+    /**
+     * When `variant="list"`, draw a bottom divider. Set false on the last row.
+     * @default true
+     */
+    withDivider?: boolean;
+    /** Optional dismiss or snooze handler. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss control. @default "Dismiss task" */
+    dismissLabel?: string;
+    /** Accessible label for the row. Defaults to title plus timing when provided. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Presentational durable-task row for Studio Tasks and future Investor inbox work.
+ *
+ * Owns uppercase severity text above the title, description, a right-pinned
+ * vertically centered `sm` primary CTA, and optional dismiss. Only `critical`
+ * priority receives a semantic fill; non-critical rows stay on the neutral
+ * list surface. The owning workflow resolves completion; this row does not
+ * infer resolution from dismiss.
+ */
+export declare function TaskRow({ action, ariaLabel, className, description, dismissLabel, onDismiss, priority, priorityLabel, timingLabel, title, variant, withDivider, }: TaskRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TaskRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/TaskRow/TaskRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACpE,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,MAAM,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuCD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,YAA6B,EAC7B,SAAS,EACT,QAAmB,EACnB,aAAa,EACb,WAAW,EACX,KAAK,EACL,OAAsB,EACtB,WAAkB,GACnB,EAAE,YAAY,2CA8Fd"}

package/dist/components/generic/TaskRow/TaskRow.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fairmintVars } from "../../../theme/index.js";
+import { colors } from "../../../theme/colors.js";
+import { ActionIcon } from "../../primitives/ActionIcon/ActionIcon.js";
+import { Button } from "../../primitives/Button/Button.js";
+import { Box, Stack } from "../../primitives/layout.js";
+import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+const PRIORITY_SEVERITY_COLORS = {
+  critical: fairmintVars.colorErrorText,
+  // Mid warning ramp (amber) — clearer than warning-text/solid brown vs error red.
+  high: "warning.5",
+  medium: "warning.5",
+  low: fairmintVars.colorTextTertiary
+};
+const DEFAULT_PRIORITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low"
+};
+const CRITICAL_ROW_BACKGROUND = `color-mix(in srgb, ${fairmintVars.colorErrorSolid} 18%, ${fairmintVars.colorBgSurface})`;
+function DefaultDismissIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function TaskRow({
+  action,
+  ariaLabel,
+  className,
+  description,
+  dismissLabel = "Dismiss task",
+  onDismiss,
+  priority = "medium",
+  priorityLabel,
+  timingLabel,
+  title,
+  variant = "standalone",
+  withDivider = true
+}) {
+  const resolvedSeverityLabel = priorityLabel ?? DEFAULT_PRIORITY_LABELS[priority];
+  const resolvedAriaLabel = ariaLabel ?? (timingLabel ? `${title}. ${resolvedSeverityLabel} priority. ${timingLabel}` : `${title}. ${resolvedSeverityLabel} priority`);
+  const isCritical = priority === "critical";
+  const isList = variant === "list";
+  const hasDescription = description.trim().length > 0;
+  const { label: actionLabel, ...actionProps } = action;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      role: "group",
+      className,
+      "data-priority": priority,
+      "data-testid": "task-row",
+      "data-variant": variant,
+      px: "sm",
+      py: 10,
+      w: "100%",
+      miw: 0,
+      style: {
+        background: isCritical ? CRITICAL_ROW_BACKGROUND : fairmintVars.colorBgSurface,
+        border: isList ? "none" : `1px solid ${fairmintVars.colorBorderDefault}`,
+        borderBottom: isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : void 0,
+        borderRadius: isList ? 0 : 10
+      },
+      children: /* @__PURE__ */ jsxs(Group, { align: "center", gap: "sm", justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, miw: 0, style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              "aria-hidden": true,
+              c: PRIORITY_SEVERITY_COLORS[priority],
+              fw: 650,
+              size: "xs",
+              style: {
+                letterSpacing: "0.03em",
+                lineHeight: 1.2,
+                textTransform: "uppercase"
+              },
+              children: resolvedSeverityLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              fw: 600,
+              lineClamp: 2,
+              size: "sm",
+              c: fairmintVars.colorTextPrimary,
+              style: { minWidth: 0 },
+              children: title
+            }
+          ),
+          hasDescription ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              c: fairmintVars.colorTextSecondary,
+              lineClamp: 2,
+              size: "sm",
+              style: { minWidth: 0 },
+              children: description
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { align: "center", gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...actionProps,
+              color: colors.primary,
+              size: "sm",
+              variant: isCritical ? "filled" : "light",
+              children: actionLabel
+            }
+          ),
+          onDismiss ? /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              "aria-label": dismissLabel,
+              color: colors.neutral,
+              onClick: onDismiss,
+              size: "md",
+              variant: "subtle",
+              children: /* @__PURE__ */ jsx(DefaultDismissIcon, {})
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  TaskRow
+};
+//# sourceMappingURL=TaskRow.js.map

package/dist/components/generic/TaskRow/TaskRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskRow.js","sources":["../../../../src/components/generic/TaskRow/TaskRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\n\nexport type TaskRowPriority = \"critical\" | \"high\" | \"medium\" | \"low\";\n\nexport type TaskRowVariant = \"standalone\" | \"list\";\n\nexport interface TaskRowActionProps\n  extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"size\"> {\n  /** Visible primary CTA label. */\n  label: ReactNode;\n}\n\nexport interface TaskRowProps {\n  /** Priority / urgency affordance. @default \"medium\" */\n  priority?: TaskRowPriority;\n  /**\n   * Severity label shown above the title in uppercase plain text.\n   * Defaults to the capitalized priority name (for example, \"Critical\", \"High\").\n   */\n  priorityLabel?: string;\n  /** Task title. */\n  title: string;\n  /** Supporting description. */\n  description: string;\n  /**\n   * Caller-formatted due date or age (for example, \"Due today\", \"3 days ago\").\n   * Included in the accessible name when provided; not shown beside the CTA.\n   */\n  timingLabel?: string;\n  /** Primary workflow CTA. */\n  action: TaskRowActionProps;\n  /**\n   * Layout presentation. Use `list` inside a shared bordered stack so rows\n   * sit flush with no card gaps. @default \"standalone\"\n   */\n  variant?: TaskRowVariant;\n  /**\n   * When `variant=\"list\"`, draw a bottom divider. Set false on the last row.\n   * @default true\n   */\n  withDivider?: boolean;\n  /** Optional dismiss or snooze handler. */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss control. @default \"Dismiss task\" */\n  dismissLabel?: string;\n  /** Accessible label for the row. Defaults to title plus timing when provided. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst PRIORITY_SEVERITY_COLORS = {\n  critical: fairmintVars.colorErrorText,\n  // Mid warning ramp (amber) — clearer than warning-text/solid brown vs error red.\n  high: \"warning.5\",\n  medium: \"warning.5\",\n  low: fairmintVars.colorTextTertiary,\n} as const;\n\nconst DEFAULT_PRIORITY_LABELS: Record<TaskRowPriority, string> = {\n  critical: \"Critical\",\n  high: \"High\",\n  medium: \"Medium\",\n  low: \"Low\",\n};\n\n/** Soft critical tint that stays readable in Light and Dark (avoids solid error-bg in dark). */\nconst CRITICAL_ROW_BACKGROUND = `color-mix(in srgb, ${fairmintVars.colorErrorSolid} 18%, ${fairmintVars.colorBgSurface})`;\n\nfunction DefaultDismissIcon() {\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=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\n/**\n * Presentational durable-task row for Studio Tasks and future Investor inbox work.\n *\n * Owns uppercase severity text above the title, description, a right-pinned\n * vertically centered `sm` primary CTA, and optional dismiss. Only `critical`\n * priority receives a semantic fill; non-critical rows stay on the neutral\n * list surface. The owning workflow resolves completion; this row does not\n * infer resolution from dismiss.\n */\nexport function TaskRow({\n  action,\n  ariaLabel,\n  className,\n  description,\n  dismissLabel = \"Dismiss task\",\n  onDismiss,\n  priority = \"medium\",\n  priorityLabel,\n  timingLabel,\n  title,\n  variant = \"standalone\",\n  withDivider = true,\n}: TaskRowProps) {\n  const resolvedSeverityLabel = priorityLabel ?? DEFAULT_PRIORITY_LABELS[priority];\n  const resolvedAriaLabel =\n    ariaLabel ??\n    (timingLabel\n      ? `${title}. ${resolvedSeverityLabel} priority. ${timingLabel}`\n      : `${title}. ${resolvedSeverityLabel} priority`);\n  const isCritical = priority === \"critical\";\n  const isList = variant === \"list\";\n  const hasDescription = description.trim().length > 0;\n  const { label: actionLabel, ...actionProps } = action;\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      role=\"group\"\n      className={className}\n      data-priority={priority}\n      data-testid=\"task-row\"\n      data-variant={variant}\n      px=\"sm\"\n      py={10}\n      w=\"100%\"\n      miw={0}\n      style={{\n        background: isCritical ? CRITICAL_ROW_BACKGROUND : fairmintVars.colorBgSurface,\n        border: isList ? \"none\" : `1px solid ${fairmintVars.colorBorderDefault}`,\n        borderBottom:\n          isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : undefined,\n        borderRadius: isList ? 0 : 10,\n      }}\n    >\n      <Group align=\"center\" gap=\"sm\" justify=\"space-between\" wrap=\"nowrap\">\n        <Stack gap={4} miw={0} style={{ flex: 1 }}>\n          <Text\n            aria-hidden\n            c={PRIORITY_SEVERITY_COLORS[priority]}\n            fw={650}\n            size=\"xs\"\n            style={{\n              letterSpacing: \"0.03em\",\n              lineHeight: 1.2,\n              textTransform: \"uppercase\",\n            }}\n          >\n            {resolvedSeverityLabel}\n          </Text>\n\n          <Text\n            fw={600}\n            lineClamp={2}\n            size=\"sm\"\n            c={fairmintVars.colorTextPrimary}\n            style={{ minWidth: 0 }}\n          >\n            {title}\n          </Text>\n\n          {hasDescription ? (\n            <Text\n              c={fairmintVars.colorTextSecondary}\n              lineClamp={2}\n              size=\"sm\"\n              style={{ minWidth: 0 }}\n            >\n              {description}\n            </Text>\n          ) : null}\n        </Stack>\n\n        <Group align=\"center\" gap=\"xs\" wrap=\"nowrap\" style={{ flexShrink: 0 }}>\n          <Button\n            {...actionProps}\n            color={colors.primary}\n            size=\"sm\"\n            variant={isCritical ? \"filled\" : \"light\"}\n          >\n            {actionLabel}\n          </Button>\n          {onDismiss ? (\n            <ActionIcon\n              aria-label={dismissLabel}\n              color={colors.neutral}\n              onClick={onDismiss}\n              size=\"md\"\n              variant=\"subtle\"\n            >\n              <DefaultDismissIcon />\n            </ActionIcon>\n          ) : null}\n        </Group>\n      </Group>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/primitives/Alert/Alert.cjs

@@ -132,6 +132,10 @@ function Alert({
       // Slightly more room on the trailing edge than Mantine's symmetric md.
       paddingInlineEnd: spacing.spacing.lg
     },
+    // Top-align the icon with the title rather than centering against multi-line body.
+    wrapper: {
+      alignItems: "flex-start"
+    },
     body: {
       // Tighter than Mantine's default spacing.xs between title and body.
       gap: "0.25rem"
@@ -163,6 +167,7 @@ function Alert({
       ...surfaceStyles,
       ...resolved,
       root: mergePart("root", resolved.root),
+      wrapper: mergePart("wrapper", resolved.wrapper),
       body: mergePart("body", resolved.body),
       title: mergePart("title", resolved.title),
       label: mergePart("label", resolved.label),
@@ -173,6 +178,7 @@ function Alert({
     ...surfaceStyles,
     ...styles,
     root: mergePart("root", styles?.root),
+    wrapper: mergePart("wrapper", styles?.wrapper),
     body: mergePart("body", styles?.body),
     title: mergePart("title", styles?.title),
     label: mergePart("label", styles?.label),