@openzeppelin/ui-components 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -606,6 +606,134 @@ const DropdownMenuShortcut = ({ className, ...props }) => {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
+//#endregion
+//#region src/components/ui/ecosystem-dropdown.tsx
+/** Simple dropdown selector for choosing a blockchain ecosystem. */
+function EcosystemDropdown({ options, value, onValueChange, getEcosystemIcon, disabled = false, className, placeholder = "Select blockchain...", "aria-labelledby": ariaLabelledby }) {
+	const [open, setOpen] = React$1.useState(false);
+	const selectedOption = options.find((o) => o.value === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-labelledby": ariaLabelledby,
+				disabled,
+				className: cn("w-full justify-between", className),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex items-center gap-2 truncate",
+					children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [getEcosystemIcon?.(selectedOption.value), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: selectedOption.label
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: placeholder
+					})
+				}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "w-[--radix-dropdown-menu-trigger-width] min-w-[200px]",
+			align: "start",
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: !option.enabled,
+				onSelect: () => {
+					onValueChange(option.value);
+					setOpen(false);
+				},
+				className: "gap-2",
+				children: [
+					getEcosystemIcon?.(option.value),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate",
+						children: option.label
+					}),
+					!option.enabled && option.disabledLabel && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-xs text-muted-foreground",
+						children: option.disabledLabel
+					}),
+					value === option.value && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 opacity-100" })
+				]
+			}, option.value))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/icons/MidnightIcon.tsx
+/**
+* MidnightIcon - SVG icon for the Midnight blockchain
+* Inline SVG to ensure it renders correctly when this package is consumed as a library
+*/
+function MidnightIcon({ size = 16, className = "", variant: _variant }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 789.37 789.37",
+		width: size,
+		height: size,
+		className,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "m394.69,0C176.71,0,0,176.71,0,394.69s176.71,394.69,394.69,394.69,394.69-176.71,394.69-394.69S612.67,0,394.69,0Zm0,716.6c-177.5,0-321.91-144.41-321.91-321.91S217.18,72.78,394.69,72.78s321.91,144.41,321.91,321.91-144.41,321.91-321.91,321.91Z",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "357.64",
+				y: "357.64",
+				width: "74.09",
+				height: "74.09",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "357.64",
+				y: "240.66",
+				width: "74.09",
+				height: "74.09",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "357.64",
+				y: "123.69",
+				width: "74.09",
+				height: "74.09",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/ui/ecosystem-icon.tsx
+/** Displays the appropriate icon for a blockchain ecosystem. */
+function EcosystemIcon({ ecosystem, fallbackLabel, className, size = 16, variant = "branded" }) {
+	if (ecosystem.id === "midnight") return /* @__PURE__ */ jsx(MidnightIcon, {
+		size,
+		variant,
+		className: cn("shrink-0", className)
+	});
+	if (ecosystem.iconComponent) return /* @__PURE__ */ jsx(ecosystem.iconComponent, {
+		size,
+		variant,
+		className: cn("shrink-0", className)
+	});
+	const initial = (fallbackLabel ?? ecosystem.id).charAt(0).toUpperCase();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-muted text-muted-foreground shrink-0 rounded-full flex items-center justify-center font-medium", className),
+		style: {
+			width: size,
+			height: size,
+			fontSize: size * .5
+		},
+		role: "img",
+		"aria-label": fallbackLabel ?? ecosystem.id,
+		children: initial
+	});
+}
+
 //#endregion
 //#region src/components/ui/empty-state.tsx
 /**
@@ -931,50 +1059,6 @@ const LoadingButton = React$1.forwardRef(({ className, loading = false, children
 });
 LoadingButton.displayName = "LoadingButton";
 
-//#endregion
-//#region src/components/icons/MidnightIcon.tsx
-/**
-* MidnightIcon - SVG icon for the Midnight blockchain
-* Inline SVG to ensure it renders correctly when this package is consumed as a library
-*/
-function MidnightIcon({ size = 16, className = "", variant: _variant }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 789.37 789.37",
-		width: size,
-		height: size,
-		className,
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "m394.69,0C176.71,0,0,176.71,0,394.69s176.71,394.69,394.69,394.69,394.69-176.71,394.69-394.69S612.67,0,394.69,0Zm0,716.6c-177.5,0-321.91-144.41-321.91-321.91S217.18,72.78,394.69,72.78s321.91,144.41,321.91,321.91-144.41,321.91-321.91,321.91Z",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "357.64",
-				y: "357.64",
-				width: "74.09",
-				height: "74.09",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "357.64",
-				y: "240.66",
-				width: "74.09",
-				height: "74.09",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ jsx("rect", {
-				x: "357.64",
-				y: "123.69",
-				width: "74.09",
-				height: "74.09",
-				fill: "currentColor"
-			})
-		]
-	});
-}
-
 //#endregion
 //#region src/components/ui/network-icon.tsx
 /** Displays the appropriate icon for a blockchain network. */
@@ -2701,7 +2785,7 @@ BooleanField.displayName = "BooleanField";
 * 4. BaseField provides consistent layout and hook form integration
 * 5. This component handles bytes-specific validation and formatting
 */
-function BytesField({ id, label, helperText, control, name, width = "full", validation, placeholder = "Enter hex or base64 encoded bytes", rows = 3, maxBytes, acceptedFormats = "both", autoPrefix = false, allowHexPrefix = true, readOnly }) {
+function BytesField({ id, label, helperText, control, name, width = "full", validation, placeholder = "Enter hex or base64 encoded bytes", rows = 3, maxBytes, exactBytes, acceptedFormats = "both", autoPrefix = false, allowHexPrefix = true, readOnly }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -2712,6 +2796,7 @@ function BytesField({ id, label, helperText, control, name, width = "full", vali
 		return validateBytesSimple(value, {
 			acceptedFormats,
 			maxBytes,
+			exactBytes,
 			allowHexPrefix
 		});
 	};
@@ -2787,7 +2872,8 @@ function BytesField({ id, label, helperText, control, name, width = "full", vali
 								acceptedFormats === "hex" && "Hex format (e.g., 48656c6c6f or 0x48656c6c6f)",
 								acceptedFormats === "base64" && "Base64 format (e.g., SGVsbG8=)",
 								acceptedFormats === "both" && "Hex (e.g., 48656c6c6f) or Base64 (e.g., SGVsbG8=) format",
-								maxBytes && ` • Max ${maxBytes} bytes`
+								exactBytes && ` • Exactly ${exactBytes} bytes (${exactBytes * 2} hex chars)`,
+								!exactBytes && maxBytes && ` • Max ${maxBytes} bytes`
 							]
 						})]
 					}),
@@ -5159,5 +5245,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, 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 };
+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, EcosystemDropdown, EcosystemIcon, 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