@openzeppelin/ui-components 1.2.1 → 1.3.0

package/dist/index.cjs

@@ -618,6 +618,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.useState(false);
+	const selectedOption = options.find((o) => o.value === value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-labelledby": ariaLabelledby,
+				disabled,
+				className: (0, _openzeppelin_ui_utils.cn)("w-full justify-between", className),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex items-center gap-2 truncate",
+					children: selectedOption ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [getEcosystemIcon?.(selectedOption.value), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: selectedOption.label
+					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground",
+						children: placeholder
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuContent, {
+			className: "w-[--radix-dropdown-menu-trigger-width] min-w-[200px]",
+			align: "start",
+			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuItem, {
+				disabled: !option.enabled,
+				onSelect: () => {
+					onValueChange(option.value);
+					setOpen(false);
+				},
+				className: "gap-2",
+				children: [
+					getEcosystemIcon?.(option.value),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex-1 truncate",
+						children: option.label
+					}),
+					!option.enabled && option.disabledLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "shrink-0 text-xs text-muted-foreground",
+						children: option.disabledLabel
+					}),
+					value === option.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "357.64",
+				y: "357.64",
+				width: "74.09",
+				height: "74.09",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "357.64",
+				y: "240.66",
+				width: "74.09",
+				height: "74.09",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(MidnightIcon, {
+		size,
+		variant,
+		className: (0, _openzeppelin_ui_utils.cn)("shrink-0", className)
+	});
+	if (ecosystem.iconComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ecosystem.iconComponent, {
+		size,
+		variant,
+		className: (0, _openzeppelin_ui_utils.cn)("shrink-0", className)
+	});
+	const initial = (fallbackLabel ?? ecosystem.id).charAt(0).toUpperCase();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _openzeppelin_ui_utils.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
 /**
@@ -943,50 +1071,6 @@ const LoadingButton = react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("rect", {
-				x: "357.64",
-				y: "357.64",
-				width: "74.09",
-				height: "74.09",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-				x: "357.64",
-				y: "240.66",
-				width: "74.09",
-				height: "74.09",
-				fill: "currentColor"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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. */
@@ -5226,6 +5310,8 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EcosystemDropdown = EcosystemDropdown;
+exports.EcosystemIcon = EcosystemIcon;
 exports.EmptyState = EmptyState;
 exports.EnumField = EnumField;
 exports.ErrorMessage = require_ErrorMessage.ErrorMessage;