@fairmint/ui 0.2.25 → 0.2.27

package/dist/fairmint-ui.js

@@ -36432,6 +36432,7 @@ const AVATAR_PALETTE = [
   colors.accent2,
   colors.accent3
 ];
+const overlayZIndexAboveLegacyShell = 1300;
 const radii = {
   xs: "0.25rem",
   sm: "0.375rem",
@@ -36725,8 +36726,8 @@ const Card = forwardRef((props, ref) => /* @__PURE__ */ jsx(Card$1, { padding: "
 Card.displayName = "Card";
 const Checkbox = forwardRef((props, ref) => /* @__PURE__ */ jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
 Checkbox.displayName = "Checkbox";
-function Drawer(props) {
-  return /* @__PURE__ */ jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
+function Drawer({ zIndex = overlayZIndexAboveLegacyShell, ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props, zIndex });
 }
 function Loader(props) {
   return /* @__PURE__ */ jsx(Loader$1, { ...props });
@@ -36741,8 +36742,8 @@ const Menu = Object.assign(MenuBase, {
   Label: Menu$1.Label,
   Divider: Menu$1.Divider
 });
-function Modal(props) {
-  return /* @__PURE__ */ jsx(Modal$1, { centered: true, radius: "lg", ...props });
+function Modal({ zIndex = overlayZIndexAboveLegacyShell, ...props }) {
+  return /* @__PURE__ */ jsx(Modal$1, { centered: true, radius: "lg", ...props, zIndex });
 }
 const PasswordInput = forwardRef((props, ref) => /* @__PURE__ */ jsx(PasswordInput$1, { size: "md", ...props, ref }));
 PasswordInput.displayName = "PasswordInput";
@@ -38299,6 +38300,42 @@ function CompanyBanner({
     detailEl
   ] });
 }
+const DefaultLockIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+    ]
+  }
+);
+function ConfidentialityBanner({ children, icon }) {
+  const iconNode = icon === void 0 ? /* @__PURE__ */ jsx(DefaultLockIcon, {}) : icon;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      py: 8,
+      px: "md",
+      style: {
+        background: `linear-gradient(90deg, ${brandColors.indigo}14 0%, ${brandColors.purple}14 100%)`,
+        borderBottom: `1px solid ${neutralColors[200]}`
+      },
+      children: /* @__PURE__ */ jsxs(Group, { justify: "center", gap: 6, wrap: "nowrap", children: [
+        iconNode !== null && /* @__PURE__ */ jsx(Box, { c: neutralColors[600], style: { display: "inline-flex" }, children: iconNode }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: neutralColors[700], fw: 500, ta: "center", children })
+      ] })
+    }
+  );
+}
 function ConfirmDialog({
   title,
   message,
@@ -38464,6 +38501,40 @@ function Currency({ value, precise = false, currency, style, ...rest }) {
   }
   return /* @__PURE__ */ jsx(Text, { component: "span", style: [TABULAR_NUMS, style], ...rest, children: formatted });
 }
+function DataRow({ label, value, accent = false }) {
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: neutralColors[600], style: { flexShrink: 0 }, children: label }),
+    value === null ? /* @__PURE__ */ jsx(RedactedValue, {}) : typeof value === "string" ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "sm",
+        fw: accent ? 700 : 500,
+        c: accent ? `${colors.success}.8` : neutralColors[900],
+        ta: "right",
+        style: { minWidth: 0 },
+        children: value
+      }
+    ) : value
+  ] });
+}
+function StackedValue({ values: values2 }) {
+  return /* @__PURE__ */ jsx(Stack, { gap: 2, align: "flex-end", children: values2.map((v) => /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: neutralColors[800], ta: "right", children: v }, v)) });
+}
+function RedactedValue({ width = 80 } = {}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "img",
+      "aria-label": "Redacted — sign in to view",
+      style: {
+        height: 14,
+        width,
+        borderRadius: 4,
+        background: `repeating-linear-gradient(135deg, ${neutralColors[200]} 0 4px, ${neutralColors[100]} 4px 8px)`
+      }
+    }
+  );
+}
 function EmptyState({
   icon,
   title,
@@ -38749,7 +38820,10 @@ function ErrorPage({
     }
   );
 }
-const DefaultChevronIcon = () => /* @__PURE__ */ jsx(
+function Eyebrow({ children, size: size2 = "xs", c = neutralColors[500], ...rest }) {
+  return /* @__PURE__ */ jsx(Text, { size: size2, fw: 700, tt: "uppercase", c, style: { letterSpacing: "0.08em" }, ...rest, children });
+}
+const DefaultChevronIcon$1 = () => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "14",
@@ -38814,7 +38888,7 @@ function ListRow({
           }
         )
       ] })),
-      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(DefaultChevronIcon, {}) }))
+      displayChevron && (chevronIcon ?? /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorTextTertiary, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(DefaultChevronIcon$1, {}) }))
     ] })
   ] });
   const animationStyle = animate ? {
@@ -40103,6 +40177,80 @@ function PhotoCropModal({
     ] })
   ] }) });
 }
+function RadioCard({
+  selected,
+  title,
+  description,
+  badge,
+  leading,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick: onSelect,
+      role: "radio",
+      "aria-checked": selected,
+      style: {
+        display: "block",
+        width: "100%",
+        padding: 16,
+        borderRadius: 12,
+        border: `1.5px solid ${selected ? brandColors.indigo : neutralColors[200]}`,
+        background: selected ? `${brandColors.indigo}08` : "white",
+        transition: "all 120ms ease",
+        textAlign: "left"
+      },
+      children: /* @__PURE__ */ jsxs(Box, { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: [
+        leading && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: leading }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "baseline",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", c: neutralColors[900], children: title }),
+                badge
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(Text, { size: "xs", c: neutralColors[600], lh: 1.5, children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 18,
+              height: 18,
+              borderRadius: "50%",
+              border: `2px solid ${selected ? brandColors.indigo : neutralColors[300]}`,
+              background: selected ? brandColors.indigo : "transparent",
+              position: "relative",
+              flexShrink: 0,
+              marginTop: 2
+            },
+            children: selected && /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  position: "absolute",
+                  inset: 4,
+                  borderRadius: "50%",
+                  background: "white"
+                }
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
 function SearchInput({
   value,
   onChange,
@@ -40222,6 +40370,68 @@ function StatusBadge({ status, colorMap, label, ...rest }) {
   const displayLabel = label ?? status.charAt(0).toUpperCase() + status.slice(1);
   return /* @__PURE__ */ jsx(Badge, { color, variant: "light", ...rest, children: displayLabel });
 }
+const DefaultCheckIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+    ]
+  }
+);
+function StepCard({
+  index: index2,
+  title,
+  description,
+  done = false,
+  doneIcon,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      radius: "lg",
+      p: { base: "md", sm: "xl" },
+      style: {
+        background: "white",
+        border: `1px solid ${neutralColors[200]}`
+      },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "md", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(
+            ThemeIcon,
+            {
+              size: 32,
+              radius: "xl",
+              variant: done ? "filled" : "light",
+              color: done ? "indigo" : "gray",
+              style: {
+                flexShrink: 0,
+                background: done ? brandColors.indigo : neutralColors[100],
+                color: done ? "white" : neutralColors[600]
+              },
+              children: done ? doneIcon ?? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsx(Text, { fw: 700, fz: 14, children: index2 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsx(Text, { fw: 700, fz: { base: 17, sm: 19 }, c: neutralColors[900], lh: 1.3, children: title }),
+            description && /* @__PURE__ */ jsx(Text, { size: "sm", c: neutralColors[600], lh: 1.5, mt: 4, children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { pl: { base: 0, sm: 48 }, children })
+      ] })
+    }
+  );
+}
 function LoadingSpinner({ size: size2 = 32 }) {
   const iconProps = {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40351,26 +40561,88 @@ function UserMenu({
     ] }, item.id)) })
   ] });
 }
+const DefaultDocumentIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+      /* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
+    ]
+  }
+);
+const DefaultChevronIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
 function DocumentRow({
   name,
+  caption,
   type,
   date: date2,
+  icon,
   rightSection,
   onClick,
-  animationDelay
+  showChevron = false,
+  animationDelay,
+  ariaLabel
 }) {
-  const subtitle = [type, date2 ? formatDate(date2) : void 0].filter(Boolean).join(" · ");
+  const isClickable = Boolean(onClick);
+  const animate = animationDelay !== void 0;
+  const resolvedCaption = caption ?? (type || date2 ? [type, date2 ? formatDate(date2) : void 0].filter(Boolean).join(" · ") : void 0);
+  const leadingNode = icon ?? /* @__PURE__ */ jsx(ThemeIcon, { size: 36, radius: "md", variant: "light", color: colors.primary, children: /* @__PURE__ */ jsx(DefaultDocumentIcon, {}) });
+  const content = /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", align: "center", children: [
+    /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: leadingNode }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", lineClamp: 1, children: name }),
+      resolvedCaption !== void 0 && resolvedCaption !== null && resolvedCaption !== "" ? typeof resolvedCaption === "string" ? /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lineClamp: 1, children: resolvedCaption }) : resolvedCaption : null
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [
+      rightSection,
+      showChevron && /* @__PURE__ */ jsx(Box, { c: fairmintVars.colorTextTertiary, style: { display: "inline-flex" }, children: /* @__PURE__ */ jsx(DefaultChevronIcon, {}) })
+    ] })
+  ] });
+  const animationStyle = animate ? {
+    opacity: 0,
+    animation: "rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards",
+    animationDelay: `${animationDelay}s`
+  } : void 0;
+  if (!isClickable) {
+    return /* @__PURE__ */ jsx(Box, { py: "sm", px: "md", style: animationStyle, children: content });
+  }
   return /* @__PURE__ */ jsx(
-    ListRow,
+    UnstyledButton,
     {
-      title: name,
-      subtitle: subtitle || void 0,
-      avatarName: name,
-      avatarColor: colors.neutral,
-      rightSection,
       onClick,
-      animationDelay,
-      showChevron: Boolean(onClick)
+      className: "fairmint-list-row",
+      w: "100%",
+      py: "sm",
+      px: "md",
+      style: animationStyle,
+      "aria-label": ariaLabel ?? name,
+      children: content
     }
   );
 }
@@ -41167,9 +41439,11 @@ export {
   Collapse,
   ColorDot,
   CompanyBanner,
+  ConfidentialityBanner,
   ConfirmDialog,
   Container,
   Currency,
+  DataRow,
   DataTable,
   DateDisplay,
   DetailDrawer,
@@ -41184,6 +41458,7 @@ export {
   ErrorFallback,
   ErrorPage,
   EthereumAddressField,
+  Eyebrow,
   FairmintLogo,
   FairmintProvider,
   Flex,
@@ -41213,6 +41488,8 @@ export {
   PhotoCropModal,
   PinInput,
   Progress,
+  RadioCard,
+  RedactedValue,
   ScrollArea,
   SearchInput,
   SegmentedControl,
@@ -41222,8 +41499,10 @@ export {
   Skeleton,
   Space,
   Stack,
+  StackedValue,
   StatCard,
   StatusBadge,
+  StepCard,
   Switch,
   TABLET_BREAKPOINT,
   Table,