@openzeppelin/ui-components 1.1.0 → 1.2.0

package/dist/{index.js → index.mjs}

@@ -1,12 +1,11 @@
-import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-DyO9ZWWz.js";
+import { a as getValidationStateClasses, c as isDuplicateMapKey, d as INTEGER_HTML_PATTERN, f as INTEGER_INPUT_PATTERN, i as getErrorMessage, l as validateField, n as createValidationResult, o as handleValidationError, p as INTEGER_PATTERN, r as formatValidationError, s as hasFieldError, t as ErrorMessage, u as validateMapEntries } from "./ErrorMessage-BqOEJm84.mjs";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cva } from "class-variance-authority";
+import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CloudOff, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, Network, Plus, Search, Settings, Timer, Upload, X } from "lucide-react";
 import * as React$1 from "react";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Controller, FormProvider, useFieldArray, useFormContext, useWatch } from "react-hook-form";
+import { cn, getDefaultValueForType, getInvalidUrlMessage, getServiceDisplayName, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { cva } from "class-variance-authority";
-import { AlertCircle, Calendar as Calendar$1, Check, CheckCircle, CheckCircle2, CheckIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, Copy, DollarSign, ExternalLink as ExternalLink$1, ExternalLinkIcon, Eye, EyeOff, File, FileText, GripVertical, Hash, Info, Loader2, Menu, Network, Plus, Search, Timer, Upload, X } from "lucide-react";
-import { cn, getDefaultValueForType, getInvalidUrlMessage, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { DayPicker } from "react-day-picker";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -14,6 +13,7 @@ import { format } from "date-fns";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Controller, FormProvider, useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -25,195 +25,6 @@ import { isMapEntryArray } from "@openzeppelin/ui-types";
 import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
-//#region src/components/fields/utils/accessibility.ts
-/**
-* Accessibility utilities for form field components
-*/
-/**
-* Default aria-describedby ID generator based on field ID
-*/
-function getDescribedById(id, type = "error") {
-	return `${id}-${type}`;
-}
-/**
-* Generates accessibility attributes for form fields
-*/
-function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
-	const describedByIds = [];
-	if (hasError) describedByIds.push(getDescribedById(id, "error"));
-	if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
-	if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
-	return {
-		"aria-invalid": hasError,
-		"aria-required": isRequired,
-		"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
-		"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
-		required: isRequired,
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		tabIndex: isDisabled ? -1 : 0
-	};
-}
-/**
-* Utility function to handle keyboard events for interactive elements
-* Helps ensure keyboard users can interact with form controls
-*/
-function handleKeyboardEvent(event, handlers) {
-	switch (event.key) {
-		case "Enter":
-			if (handlers.onEnter) {
-				event.preventDefault();
-				handlers.onEnter();
-			}
-			break;
-		case " ":
-			if (handlers.onSpace) {
-				event.preventDefault();
-				handlers.onSpace();
-			}
-			break;
-		case "Escape":
-			if (handlers.onEscape) {
-				event.preventDefault();
-				handlers.onEscape();
-			}
-			break;
-		case "ArrowUp":
-			if (handlers.onArrowUp) {
-				event.preventDefault();
-				handlers.onArrowUp();
-			}
-			break;
-		case "ArrowDown":
-			if (handlers.onArrowDown) {
-				event.preventDefault();
-				handlers.onArrowDown();
-			}
-			break;
-		case "ArrowLeft":
-			if (handlers.onArrowLeft) {
-				event.preventDefault();
-				handlers.onArrowLeft();
-			}
-			break;
-		case "ArrowRight":
-			if (handlers.onArrowRight) {
-				event.preventDefault();
-				handlers.onArrowRight();
-			}
-			break;
-		case "Tab":
-			if (handlers.onTab) {
-				event.preventDefault();
-				handlers.onTab();
-			}
-			break;
-		default: break;
-	}
-}
-/**
-* Field focus management utility
-* For managing focus within a field group or complex form component
-*/
-function createFocusManager() {
-	return {
-		focusFirstElement(container) {
-			if (!container) return;
-			const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
-			if (focusable.length > 0) focusable[0].focus();
-		},
-		focusElementById(id) {
-			const element = document.getElementById(id);
-			if (element) element.focus();
-		},
-		trapFocus(event, container) {
-			if (!container || event.key !== "Tab") return;
-			const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
-			if (focusable.length === 0) return;
-			const firstElement = focusable[0];
-			const lastElement = focusable[focusable.length - 1];
-			if (event.shiftKey && document.activeElement === firstElement) {
-				event.preventDefault();
-				lastElement.focus();
-			} else if (!event.shiftKey && document.activeElement === lastElement) {
-				event.preventDefault();
-				firstElement.focus();
-			}
-		}
-	};
-}
-/**
-* Provides a handler for Escape key to clear input fields
-*
-* @param onChange - Function to call when value changes
-* @param value - Current value of the input
-* @returns A function to handle the Escape key press
-*/
-function handleEscapeKey(onChange, value) {
-	return (e) => {
-		if (e.key === "Escape") {
-			e.preventDefault();
-			if (value) onChange("");
-			else e.target.blur();
-		}
-	};
-}
-/**
-* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
-*
-* @param onChange - Function to call when value changes
-* @param value - Current value of the input
-* @returns A function to handle the Space/Enter key press
-*/
-function handleToggleKeys(onChange, value) {
-	return (e) => {
-		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault();
-			onChange(!value);
-		}
-	};
-}
-/**
-* Provides a handler for arrow keys for numeric inputs
-*
-* @param onChange - Function to call when value changes
-* @param value - Current numeric value
-* @param step - Step amount for increments/decrements
-* @param min - Minimum allowed value (optional)
-* @param max - Maximum allowed value (optional)
-* @returns A function to handle arrow key presses
-*/
-function handleNumericKeys(onChange, value, step = 1, min, max) {
-	return (e) => {
-		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-			e.preventDefault();
-			const direction = e.key === "ArrowUp" ? 1 : -1;
-			let newValue = typeof value === "number" ? value + step * direction : 0;
-			if (typeof min === "number") newValue = Math.max(min, newValue);
-			if (typeof max === "number") newValue = Math.min(max, newValue);
-			onChange(newValue);
-		}
-	};
-}
-
-//#endregion
-//#region src/components/fields/utils/layout.ts
-/**
-* Layout utility functions for form components
-*/
-/**
-* Helper function to get width classes based on the field width
-*/
-function getWidthClasses(width) {
-	switch (width) {
-		case "half": return "form-field-half";
-		case "third": return "form-field-third";
-		case "full":
-		default: return "form-field-full";
-	}
-}
-
-//#endregion
 //#region src/components/ui/accordion.tsx
 const accordionItemVariants = cva("", {
 	variants: { variant: {
@@ -1694,6 +1505,195 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
 	});
 }
 
+//#endregion
+//#region src/components/fields/utils/accessibility.ts
+/**
+* Accessibility utilities for form field components
+*/
+/**
+* Default aria-describedby ID generator based on field ID
+*/
+function getDescribedById(id, type = "error") {
+	return `${id}-${type}`;
+}
+/**
+* Generates accessibility attributes for form fields
+*/
+function getAccessibilityProps({ id, hasError = false, isRequired = false, isDisabled = false, isReadOnly = false, hasHelperText = false, hasCharacterCounter = false }) {
+	const describedByIds = [];
+	if (hasError) describedByIds.push(getDescribedById(id, "error"));
+	if (hasHelperText) describedByIds.push(getDescribedById(id, "description"));
+	if (hasCharacterCounter) describedByIds.push(getDescribedById(id, "counter"));
+	return {
+		"aria-invalid": hasError,
+		"aria-required": isRequired,
+		"aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0,
+		"aria-errormessage": hasError ? getDescribedById(id, "error") : void 0,
+		required: isRequired,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		tabIndex: isDisabled ? -1 : 0
+	};
+}
+/**
+* Utility function to handle keyboard events for interactive elements
+* Helps ensure keyboard users can interact with form controls
+*/
+function handleKeyboardEvent(event, handlers) {
+	switch (event.key) {
+		case "Enter":
+			if (handlers.onEnter) {
+				event.preventDefault();
+				handlers.onEnter();
+			}
+			break;
+		case " ":
+			if (handlers.onSpace) {
+				event.preventDefault();
+				handlers.onSpace();
+			}
+			break;
+		case "Escape":
+			if (handlers.onEscape) {
+				event.preventDefault();
+				handlers.onEscape();
+			}
+			break;
+		case "ArrowUp":
+			if (handlers.onArrowUp) {
+				event.preventDefault();
+				handlers.onArrowUp();
+			}
+			break;
+		case "ArrowDown":
+			if (handlers.onArrowDown) {
+				event.preventDefault();
+				handlers.onArrowDown();
+			}
+			break;
+		case "ArrowLeft":
+			if (handlers.onArrowLeft) {
+				event.preventDefault();
+				handlers.onArrowLeft();
+			}
+			break;
+		case "ArrowRight":
+			if (handlers.onArrowRight) {
+				event.preventDefault();
+				handlers.onArrowRight();
+			}
+			break;
+		case "Tab":
+			if (handlers.onTab) {
+				event.preventDefault();
+				handlers.onTab();
+			}
+			break;
+		default: break;
+	}
+}
+/**
+* Field focus management utility
+* For managing focus within a field group or complex form component
+*/
+function createFocusManager() {
+	return {
+		focusFirstElement(container) {
+			if (!container) return;
+			const focusable = container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
+			if (focusable.length > 0) focusable[0].focus();
+		},
+		focusElementById(id) {
+			const element = document.getElementById(id);
+			if (element) element.focus();
+		},
+		trapFocus(event, container) {
+			if (!container || event.key !== "Tab") return;
+			const focusable = Array.from(container.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"));
+			if (focusable.length === 0) return;
+			const firstElement = focusable[0];
+			const lastElement = focusable[focusable.length - 1];
+			if (event.shiftKey && document.activeElement === firstElement) {
+				event.preventDefault();
+				lastElement.focus();
+			} else if (!event.shiftKey && document.activeElement === lastElement) {
+				event.preventDefault();
+				firstElement.focus();
+			}
+		}
+	};
+}
+/**
+* Provides a handler for Escape key to clear input fields
+*
+* @param onChange - Function to call when value changes
+* @param value - Current value of the input
+* @returns A function to handle the Escape key press
+*/
+function handleEscapeKey(onChange, value) {
+	return (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			if (value) onChange("");
+			else e.target.blur();
+		}
+	};
+}
+/**
+* Provides a handler for Space/Enter keys for toggle components (checkboxes, switches)
+*
+* @param onChange - Function to call when value changes
+* @param value - Current value of the input
+* @returns A function to handle the Space/Enter key press
+*/
+function handleToggleKeys(onChange, value) {
+	return (e) => {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			onChange(!value);
+		}
+	};
+}
+/**
+* Provides a handler for arrow keys for numeric inputs
+*
+* @param onChange - Function to call when value changes
+* @param value - Current numeric value
+* @param step - Step amount for increments/decrements
+* @param min - Minimum allowed value (optional)
+* @param max - Maximum allowed value (optional)
+* @returns A function to handle arrow key presses
+*/
+function handleNumericKeys(onChange, value, step = 1, min, max) {
+	return (e) => {
+		if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+			e.preventDefault();
+			const direction = e.key === "ArrowUp" ? 1 : -1;
+			let newValue = typeof value === "number" ? value + step * direction : 0;
+			if (typeof min === "number") newValue = Math.max(min, newValue);
+			if (typeof max === "number") newValue = Math.min(max, newValue);
+			onChange(newValue);
+		}
+	};
+}
+
+//#endregion
+//#region src/components/fields/utils/layout.ts
+/**
+* Layout utility functions for form components
+*/
+/**
+* Helper function to get width classes based on the field width
+*/
+function getWidthClasses(width) {
+	switch (width) {
+		case "half": return "form-field-half";
+		case "third": return "form-field-third";
+		case "full":
+		default: return "form-field-full";
+	}
+}
+
 //#endregion
 //#region src/components/fields/AddressField.tsx
 /**
@@ -5081,6 +5081,65 @@ function useNetworkErrorAwareAdapter(adapter) {
 	return wrappedAdapterRef.current;
 }
 
+//#endregion
+//#region src/components/network-errors/NetworkServiceErrorBanner.tsx
+/**
+* User-friendly banner displayed when a network service connection fails.
+* Works with any service type (RPC, Explorer, Indexer, etc.) and provides
+* a clear explanation of the issue with a call-to-action to open the
+* network settings dialog where users can configure an alternative endpoint.
+*
+* This component can be used with or without the NetworkErrorNotificationProvider:
+* - With provider: The settings handler is obtained from context
+* - Without provider: Pass onOpenNetworkSettings prop directly, or the button won't render
+*/
+function NetworkServiceErrorBanner({ networkConfig, serviceType, errorMessage, title, description, onOpenNetworkSettings: onOpenNetworkSettingsProp }) {
+	const context = useContext(NetworkErrorContext);
+	const onOpenNetworkSettings = onOpenNetworkSettingsProp ?? context?.onOpenNetworkSettings;
+	const handleOpenSettings = () => {
+		onOpenNetworkSettings?.(networkConfig.id);
+	};
+	const serviceName = getServiceDisplayName(serviceType);
+	const defaultTitle = `Unable to Connect to ${networkConfig.name}`;
+	const defaultDescription = onOpenNetworkSettings ? `This could be due to network congestion, rate limiting, or the service being temporarily down. You can configure a custom ${serviceName.toLowerCase()} endpoint in the network settings.` : `This could be due to network congestion, rate limiting, or the service being temporarily down.`;
+	return /* @__PURE__ */ jsxs(Alert, {
+		variant: "destructive",
+		className: "border-red-500/50 bg-red-50 dark:bg-red-950/20",
+		children: [
+			/* @__PURE__ */ jsx(CloudOff, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+			/* @__PURE__ */ jsx(AlertTitle, {
+				className: "text-red-900 dark:text-red-100",
+				children: title || defaultTitle
+			}),
+			/* @__PURE__ */ jsxs(AlertDescription, {
+				className: "text-red-800 dark:text-red-200",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "mb-2",
+						children: errorMessage || `The ${serviceName.toLowerCase()} for ${networkConfig.name} is currently unavailable or not responding.`
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm mb-3",
+						children: description || defaultDescription
+					}),
+					onOpenNetworkSettings && /* @__PURE__ */ jsxs(Button, {
+						onClick: handleOpenSettings,
+						variant: "default",
+						size: "sm",
+						className: "bg-red-600 hover:bg-red-700 text-white dark:bg-red-500 dark:hover:bg-red-600",
+						children: [
+							/* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
+							"Configure ",
+							serviceName,
+							" Settings"
+						]
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sonner.tsx
 const Toaster = ({ ...props }) => {
@@ -5100,5 +5159,5 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkStatusBadge, NumberField, ObjectField, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
-//# sourceMappingURL=index.js.map
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
+//# sourceMappingURL=index.mjs.map