@fairmint/ui 0.2.24 → 0.2.26

package/dist/fairmint-ui.js

@@ -19315,6 +19315,36 @@ const NumberInput = factory((_props, ref) => {
     );
     setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
   };
+  const handlePaste = (event) => {
+    const pastedText = event.clipboardData.getData("text");
+    const _decimalSeparator = others.decimalSeparator || ".";
+    const separatorsToReplace = (allowedDecimalSeparators || [".", ","]).filter(
+      (s) => s !== _decimalSeparator
+    );
+    if (separatorsToReplace.some((s) => pastedText.includes(s))) {
+      event.preventDefault();
+      let modifiedText = pastedText;
+      separatorsToReplace.forEach((s) => {
+        modifiedText = modifiedText.split(s).join(_decimalSeparator);
+      });
+      const input = inputRef.current;
+      if (input) {
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        const currentValue = input.value;
+        const newValue = currentValue.substring(0, start) + modifiedText + currentValue.substring(end);
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeInputValueSetter?.call(input, newValue);
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+        const cursorPos = start + modifiedText.length;
+        setTimeout(() => adjustCursor(cursorPos), 0);
+      }
+    }
+    others.onPaste?.(event);
+  };
   const handleKeyDown = (event) => {
     onKeyDown?.(event);
     if (readOnly || !withKeyboardEvents) {
@@ -19439,6 +19469,7 @@ const NumberInput = factory((_props, ref) => {
       unstyled,
       __staticSelector: "NumberInput",
       decimalScale: allowDecimal ? decimalScale : 0,
+      onPaste: handlePaste,
       onKeyDown: handleKeyDown,
       onKeyDownCapture: handleKeyDownCapture,
       rightSectionPointerEvents: rightSectionPointerEvents ?? (disabled ? "none" : void 0),
@@ -19928,6 +19959,7 @@ const PasswordInput$1 = factory((_props, ref) => {
       classNames: resolvedClassNames,
       styles: resolvedStyles,
       __staticSelector: "PasswordInput",
+      __stylesApiProps: props,
       unstyled,
       withAsterisk,
       inputWrapperOrder,
@@ -19953,6 +19985,7 @@ const PasswordInput$1 = factory((_props, ref) => {
           radius,
           disabled,
           __staticSelector: "PasswordInput",
+          __stylesApiProps: props,
           rightSectionWidth,
           rightSection: rightSection ?? visibilityToggleButton,
           variant,
@@ -20826,7 +20859,9 @@ const Tooltip$1 = factory((_props, ref) => {
   });
   const child = getSingleElementChild(children);
   if (!target && !child) {
-    return null;
+    throw new Error(
+      "[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported"
+    );
   }
   if (target) {
     const transition2 = getTransitionProps(transitionProps, { duration: 100, transition: "fade" });
@@ -38264,6 +38299,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,
@@ -38429,6 +38500,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,
@@ -38714,7 +38819,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",
@@ -38779,7 +38887,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 ? {
@@ -40068,6 +40176,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,
@@ -40187,6 +40369,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",
@@ -40316,26 +40560,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
     }
   );
 }
@@ -41132,9 +41438,11 @@ export {
   Collapse,
   ColorDot,
   CompanyBanner,
+  ConfidentialityBanner,
   ConfirmDialog,
   Container,
   Currency,
+  DataRow,
   DataTable,
   DateDisplay,
   DetailDrawer,
@@ -41149,6 +41457,7 @@ export {
   ErrorFallback,
   ErrorPage,
   EthereumAddressField,
+  Eyebrow,
   FairmintLogo,
   FairmintProvider,
   Flex,
@@ -41178,6 +41487,8 @@ export {
   PhotoCropModal,
   PinInput,
   Progress,
+  RadioCard,
+  RedactedValue,
   ScrollArea,
   SearchInput,
   SegmentedControl,
@@ -41187,8 +41498,10 @@ export {
   Skeleton,
   Space,
   Stack,
+  StackedValue,
   StatCard,
   StatusBadge,
+  StepCard,
   Switch,
   TABLET_BREAKPOINT,
   Table,