@openzeppelin/ui-components 1.0.4 → 1.2.0

package/dist/index.cjs

@@ -1,13 +1,12 @@
 const require_ErrorMessage = require('./ErrorMessage-D4BAP8iw.cjs');
-let react = require("react");
-react = require_ErrorMessage.__toESM(react);
-let react_hook_form = require("react-hook-form");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_accordion = require("@radix-ui/react-accordion");
 _radix_ui_react_accordion = require_ErrorMessage.__toESM(_radix_ui_react_accordion);
 let class_variance_authority = require("class-variance-authority");
 let lucide_react = require("lucide-react");
+let react = require("react");
+react = require_ErrorMessage.__toESM(react);
 let _openzeppelin_ui_utils = require("@openzeppelin/ui-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let react_day_picker = require("react-day-picker");
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
@@ -19,6 +18,7 @@ let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 _radix_ui_react_dialog = require_ErrorMessage.__toESM(_radix_ui_react_dialog);
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 _radix_ui_react_dropdown_menu = require_ErrorMessage.__toESM(_radix_ui_react_dropdown_menu);
+let react_hook_form = require("react-hook-form");
 let _radix_ui_react_label = require("@radix-ui/react-label");
 _radix_ui_react_label = require_ErrorMessage.__toESM(_radix_ui_react_label);
 let _radix_ui_react_progress = require("@radix-ui/react-progress");
@@ -27,6 +27,8 @@ let _radix_ui_react_radio_group = require("@radix-ui/react-radio-group");
 _radix_ui_react_radio_group = require_ErrorMessage.__toESM(_radix_ui_react_radio_group);
 let _radix_ui_react_select = require("@radix-ui/react-select");
 _radix_ui_react_select = require_ErrorMessage.__toESM(_radix_ui_react_select);
+let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
+_radix_ui_react_collapsible = require_ErrorMessage.__toESM(_radix_ui_react_collapsible);
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 _radix_ui_react_tabs = require_ErrorMessage.__toESM(_radix_ui_react_tabs);
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
@@ -35,195 +37,6 @@ let _openzeppelin_ui_types = require("@openzeppelin/ui-types");
 let sonner = require("sonner");
 let next_themes = require("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 = (0, class_variance_authority.cva)("", {
 	variants: { variant: {
@@ -1478,6 +1291,47 @@ function SidebarButton({ icon, children, onClick, size = "default", badge, disab
 	});
 }
 
+//#endregion
+//#region src/components/ui/sidebar/SidebarGroup.tsx
+/**
+* A collapsible group component for organizing sidebar navigation items.
+* Supports both controlled and uncontrolled modes.
+*/
+function SidebarGroup({ title, icon, children, defaultOpen = false, open: controlledOpen, onOpenChange, className, triggerClassName, contentClassName }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (!isControlled) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_collapsible.Root, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		className: (0, _openzeppelin_ui_utils.cn)("w-full", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_collapsible.Trigger, {
+			className: (0, _openzeppelin_ui_utils.cn)("group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold", "text-muted-foreground transition-colors hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", triggerClassName),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: (0, _openzeppelin_ui_utils.cn)("size-4 shrink-0 transition-transform duration-200", isOpen && "rotate-90") }),
+				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0",
+					children: icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1 text-left",
+					children: title
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_collapsible.Content, {
+			className: (0, _openzeppelin_ui_utils.cn)("overflow-hidden transition-all duration-200 ease-in-out", "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", contentClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "py-1 pl-4",
+				children
+			})
+		})]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sidebar/SidebarLayout.tsx
 /**
@@ -1663,6 +1517,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
 /**
@@ -5050,6 +5093,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 = (0, react.useContext)(NetworkErrorContext);
+	const onOpenNetworkSettings = onOpenNetworkSettingsProp ?? context?.onOpenNetworkSettings;
+	const handleOpenSettings = () => {
+		onOpenNetworkSettings?.(networkConfig.id);
+	};
+	const serviceName = (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsxs)(Alert, {
+		variant: "destructive",
+		className: "border-red-500/50 bg-red-50 dark:bg-red-950/20",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CloudOff, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTitle, {
+				className: "text-red-900 dark:text-red-100",
+				children: title || defaultTitle
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDescription, {
+				className: "text-red-800 dark:text-red-200",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mb-2",
+						children: errorMessage || `The ${serviceName.toLowerCase()} for ${networkConfig.name} is currently unavailable or not responding.`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm mb-3",
+						children: description || defaultDescription
+					}),
+					onOpenNetworkSettings && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "mr-2 h-4 w-4" }),
+							"Configure ",
+							serviceName,
+							" Settings"
+						]
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/ui/sonner.tsx
 const Toaster = ({ ...props }) => {
@@ -5148,6 +5250,7 @@ exports.MidnightIcon = MidnightIcon;
 exports.NetworkErrorNotificationProvider = NetworkErrorNotificationProvider;
 exports.NetworkIcon = NetworkIcon;
 exports.NetworkSelector = NetworkSelector;
+exports.NetworkServiceErrorBanner = NetworkServiceErrorBanner;
 exports.NetworkStatusBadge = NetworkStatusBadge;
 exports.NumberField = NumberField;
 exports.ObjectField = ObjectField;
@@ -5174,6 +5277,7 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.SidebarButton = SidebarButton;
+exports.SidebarGroup = SidebarGroup;
 exports.SidebarLayout = SidebarLayout;
 exports.SidebarSection = SidebarSection;
 exports.Tabs = Tabs;