@fairmint/ui 0.2.2 → 0.2.4

package/dist/components/form/EthereumAddressField/EthereumAddressField.d.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+import { TextInputProps } from '../../primitives/TextInput/TextInput';
+/**
+ * Zod schema for Ethereum wallet address validation.
+ * Trims whitespace, then validates `0x` + 40 hex characters, rejecting the zero address.
+ */
+export declare const ethereumAddressSchema: z.ZodEffects<z.ZodString, string, string>;
+export interface EthereumAddressFieldProps extends Omit<TextInputProps, "type"> {
+    error?: string;
+}
+/** Ethereum wallet address input with monospace font and Zod-based validation via `ethereumAddressSchema`. */
+export declare function EthereumAddressField({ error, ...rest }: EthereumAddressFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EthereumAddressField.d.ts.map

package/dist/components/form/EthereumAddressField/EthereumAddressField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EthereumAddressField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/EthereumAddressField/EthereumAddressField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAG3E;;;GAGG;AACH,eAAO,MAAM,qBAAqB,2CAU/B,CAAC;AAEJ,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,8GAA8G;AAC9G,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,yBAAyB,2CAcjF"}

package/dist/components/form/ZipField/ZipField.d.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod';
+import { TextInputProps } from '../../primitives/TextInput/TextInput';
+export interface ZipSchemaOptions {
+    /** When true, accepts international postal codes (UK, Canada, Europe, etc.).
+     *  Defaults to false — US ZIP codes only. */
+    international?: boolean;
+}
+/**
+ * Creates a Zod schema for postal/ZIP code validation.
+ *
+ * Default (US): accepts `94105` and `94105-1234` only.
+ * International: accepts `K1A 0B1`, `SW1A 2AA`, `12345`, etc.
+ * Input is trimmed before validation in both modes.
+ */
+export declare function createZipSchema(options?: ZipSchemaOptions): z.ZodString;
+/** Zod schema for US ZIP codes (`94105`, `94105-1234`). Use `createZipSchema({ international: true })` for international. */
+export declare const zipSchema: z.ZodString;
+export interface ZipFieldProps extends Omit<TextInputProps, "type"> {
+    error?: string;
+    /** When true, adjusts placeholder for international postal codes. */
+    international?: boolean;
+}
+/** Postal/ZIP code input. US ZIP only by default; pass `international` for global formats. */
+export declare function ZipField({ error, international, ...rest }: ZipFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ZipField.d.ts.map

package/dist/components/form/ZipField/ZipField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZipField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/ZipField/ZipField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAa3E,MAAM,WAAW,gBAAgB;IAC/B;iDAC6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,gBAAgB,eAazD;AAED,6HAA6H;AAC7H,eAAO,MAAM,SAAS,aAAoB,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,8FAA8F;AAC9F,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,aAAqB,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAYhF"}

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

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+export interface EditableSectionProps {
+    /** Section heading shown in the header row. */
+    title?: ReactNode;
+    /** Content rendered in read (non-editing) mode. */
+    readView: ReactNode;
+    /**
+     * Called when Save is clicked. Resolve to close edit mode; throw to stay open
+     * (e.g. validation failure or API error — handle `notify.error` inside here).
+     */
+    onSave: () => Promise<void>;
+    /** Called when Cancel is clicked, before the edit mode closes. Use to reset form state. */
+    onCancel?: () => void;
+    /**
+     * When true the edit button is hidden and any open edit session is closed.
+     * Pass `isViewingAs` to prevent edits during admin impersonation.
+     */
+    disabled?: boolean;
+    /**
+     * Called when `onSave` throws. Use for logging or error tracking. The
+     * component stays in edit mode regardless — this is purely observational.
+     */
+    onSaveError?: (error: unknown) => void;
+    /**
+     * Icon rendered inside the edit `ActionIcon`. When omitted a plain text
+     * "Edit" button is shown instead.
+     */
+    editIcon?: ReactNode;
+    /** Save button label. @default "Save" */
+    saveLabel?: string;
+    /** Cancel button label. @default "Cancel" */
+    cancelLabel?: string;
+    /** Children rendered in edit mode (form fields, etc.). */
+    children: ReactNode;
+}
+/**
+ * Wraps a section of the page with a pencil-icon toggle between a read view
+ * and an edit view. Manages `isEditing` and `isSaving` state internally so
+ * consumers only need to supply `readView`, the edit fields as `children`,
+ * and the async `onSave` callback.
+ */
+export declare function EditableSection({ title, readView, onSave, onCancel, disabled, onSaveError, editIcon, saveLabel, cancelLabel, children, }: EditableSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditableSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableSection.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/EditableSection/EditableSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5D,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAgB,EAChB,WAAW,EACX,QAAQ,EACR,SAAkB,EAClB,WAAsB,EACtB,QAAQ,GACT,EAAE,oBAAoB,2CAwFtB"}

package/dist/fairmint-ui.cjs

@@ -23751,6 +23751,46 @@ function EmailField({ error: error2, ...rest }) {
     }
   );
 }
+function truncateAddress(address, chars = 4) {
+  if (address.length <= chars * 2 + 2) return address;
+  return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;
+}
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+const ETH_ADDRESS_RE = /^0x[a-fA-F0-9]{40}$/;
+function isEthereumAddress(value) {
+  return ETH_ADDRESS_RE.test(value) && value.toLowerCase() !== ZERO_ADDRESS;
+}
+function validateEthereumAddress(value) {
+  if (!ETH_ADDRESS_RE.test(value))
+    return "Must be a valid Ethereum address (0x + 40 hex characters)";
+  if (value.toLowerCase() === ZERO_ADDRESS) return "Cannot use the zero address";
+  return null;
+}
+const ETHEREUM_ADDRESS_REGEX = ETH_ADDRESS_RE;
+const ZERO_ETHEREUM_ADDRESS = ZERO_ADDRESS;
+const ethereumAddressSchema = stringType().trim().regex(
+  ETHEREUM_ADDRESS_REGEX,
+  "Must be a valid Ethereum address (0x followed by 40 hex characters)"
+).refine(
+  (v) => v.toLowerCase() !== ZERO_ETHEREUM_ADDRESS.toLowerCase(),
+  "Cannot use the zero address"
+);
+function EthereumAddressField({ error: error2, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      type: "text",
+      label: rest.label ?? "Wallet Address",
+      placeholder: rest.placeholder ?? "0x...",
+      autoComplete: "off",
+      inputMode: "text",
+      spellCheck: false,
+      styles: { input: { fontFamily: "monospace" } },
+      error: error2,
+      ...rest
+    }
+  );
+}
 function validateFormName(name) {
   if (!/^[0-9a-zA-Z-]+$/.test(name)) {
     throw new Error(
@@ -24840,6 +24880,29 @@ function PhoneField({ error: error2, ...rest }) {
     }
   );
 }
+const US_ZIP_REGEX = /^\d{5}(-\d{4})?$/;
+const INTL_POSTAL_REGEX = /^[A-Z0-9]+(?:[ -][A-Z0-9]+)*$/i;
+function createZipSchema(options) {
+  if (options?.international) {
+    return stringType().trim().min(3, "Please enter a valid postal code").max(10, "Please enter a valid postal code").regex(INTL_POSTAL_REGEX, "Please enter a valid postal code");
+  }
+  return stringType().trim().regex(US_ZIP_REGEX, "Please enter a valid ZIP code (e.g. 94105 or 94105-1234)");
+}
+const zipSchema = createZipSchema();
+function ZipField({ error: error2, international = false, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      type: "text",
+      label: rest.label ?? "ZIP / Postal Code",
+      placeholder: rest.placeholder ?? (international ? "SW1A 2AA" : "94105"),
+      autoComplete: "postal-code",
+      inputMode: "text",
+      error: error2,
+      ...rest
+    }
+  );
+}
 const ANIMATION_MAP = {
   up: "fadeUp",
   down: "fadeDown",
@@ -25072,6 +25135,75 @@ function DetailDrawer({
     }
   );
 }
+function EditableSection({
+  title,
+  readView,
+  onSave,
+  onCancel,
+  disabled = false,
+  onSaveError,
+  editIcon,
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  children
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  React.useEffect(() => {
+    if (disabled && isEditing) {
+      onCancel?.();
+      setIsEditing(false);
+    }
+  }, [disabled, isEditing, onCancel]);
+  const handleEdit = () => setIsEditing(true);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await onSave();
+      setIsEditing(false);
+    } catch (err) {
+      onSaveError?.(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleCancel = () => {
+    onCancel?.();
+    setIsEditing(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "md", children: [
+    (title || !disabled && !isEditing) && /* @__PURE__ */ jsxRuntime.jsxs(Group, { justify: "space-between", align: "center", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Text, { fw: 500, size: "sm", children: title }),
+      !disabled && !isEditing && (editIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+        ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: handleEdit,
+          "aria-label": `Edit ${typeof title === "string" ? title : "section"}`,
+          children: editIcon
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "subtle", size: "xs", onClick: handleEdit, children: "Edit" }))
+    ] }),
+    isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", justify: "flex-end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "subtle",
+            size: "xs",
+            color: colors.neutral,
+            onClick: handleCancel,
+            disabled: isSaving,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "xs", onClick: handleSave, loading: isSaving, children: saveLabel })
+      ] })
+    ] }) : readView
+  ] });
+}
 const DefaultChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -25533,23 +25665,6 @@ function InvestorProfileCard({
     children
   ] });
 }
-function truncateAddress(address, chars = 4) {
-  if (address.length <= chars * 2 + 2) return address;
-  return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;
-}
-const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
-const ETH_ADDRESS_RE = /^0x[a-fA-F0-9]{40}$/;
-function isEthereumAddress(value) {
-  return ETH_ADDRESS_RE.test(value) && value.toLowerCase() !== ZERO_ADDRESS;
-}
-function validateEthereumAddress(value) {
-  if (!ETH_ADDRESS_RE.test(value))
-    return "Must be a valid Ethereum address (0x + 40 hex characters)";
-  if (value.toLowerCase() === ZERO_ADDRESS) return "Cannot use the zero address";
-  return null;
-}
-const ETHEREUM_ADDRESS_REGEX = ETH_ADDRESS_RE;
-const ZERO_ETHEREUM_ADDRESS = ZERO_ADDRESS;
 const DEFAULT_TYPE_LABELS = {
   fairmint: "Fairmint Wallet",
   privy: "Fairmint Wallet",
@@ -25793,10 +25908,12 @@ exports.Divider = Divider;
 exports.DocumentRow = DocumentRow;
 exports.Drawer = Drawer;
 exports.ETHEREUM_ADDRESS_REGEX = ETHEREUM_ADDRESS_REGEX;
+exports.EditableSection = EditableSection;
 exports.EmailField = EmailField;
 exports.EmptyState = EmptyState;
 exports.EquityGrantCard = EquityGrantCard;
 exports.ErrorFallback = ErrorFallback;
+exports.EthereumAddressField = EthereumAddressField;
 exports.FairmintLogo = FairmintLogo;
 exports.FairmintProvider = FairmintProvider;
 exports.Flex = Flex;
@@ -25838,9 +25955,12 @@ exports.Tooltip = Tooltip;
 exports.UserMenu = UserMenu;
 exports.WalletList = WalletList;
 exports.ZERO_ETHEREUM_ADDRESS = ZERO_ETHEREUM_ADDRESS;
+exports.ZipField = ZipField;
 exports.brandColors = brandColors;
 exports.colors = colors;
+exports.createZipSchema = createZipSchema;
 exports.emailSchema = emailSchema;
+exports.ethereumAddressSchema = ethereumAddressSchema;
 exports.formatCurrency = formatCurrency;
 exports.formatCurrencyPrecise = formatCurrencyPrecise;
 exports.formatDate = formatDate;
@@ -25871,4 +25991,5 @@ exports.useScrollIntoView = useScrollIntoView;
 exports.useViewportSize = useViewportSize;
 exports.validateEthereumAddress = validateEthereumAddress;
 exports.z = z;
+exports.zipSchema = zipSchema;
 //# sourceMappingURL=fairmint-ui.cjs.map