@openzeppelin/ui-utils 1.0.0 → 1.1.1

package/dist/index.cjs

@@ -216,7 +216,7 @@ const logger = Logger.getInstance();
 * Determine whether logging should be enabled by default.
 *
 * - In Vite/browser contexts, use `import.meta.env.DEV`.
-* - In Node/tsup contexts, use `process.env.NODE_ENV`.
+* - In Node/tsdown contexts, use `process.env.NODE_ENV`.
 *
 * Defaults to disabled outside development to avoid runtime overhead and noise.
 */
@@ -2102,6 +2102,160 @@ function formatAccessControlError(error) {
 	return message;
 }
 
+//#endregion
+//#region src/walletComponentSizing.ts
+/**
+* Maps WalletComponentSize to Button component props and styling.
+* Used for ConnectButton and similar button-based wallet components.
+*
+* @param walletSize - The wallet component size ('sm' | 'default' | 'lg' | 'xl')
+* @returns Button size props including component size, className overrides, and icon size
+*
+* @example
+* ```tsx
+* const sizeProps = getWalletButtonSizeProps(size);
+* <Button size={sizeProps.size} className={sizeProps.className}>
+*   <Icon className={sizeProps.iconSize} />
+* </Button>
+* ```
+*/
+function getWalletButtonSizeProps(walletSize) {
+	switch (walletSize) {
+		case "sm": return {
+			size: "sm",
+			className: "h-7 px-2 text-[11px]",
+			iconSize: "size-3"
+		};
+		case "lg": return {
+			size: "lg",
+			className: "h-11 px-5",
+			iconSize: "size-5"
+		};
+		case "xl": return {
+			size: "lg",
+			className: "h-12 px-6 text-base",
+			iconSize: "size-5"
+		};
+		case "default":
+		default: return {
+			size: "default",
+			className: "h-9 px-4 text-sm",
+			iconSize: "size-4"
+		};
+	}
+}
+/**
+* Maps WalletComponentSize to AccountDisplay component styling.
+* Provides text sizes and icon button dimensions for account info display.
+*
+* @param walletSize - The wallet component size ('sm' | 'default' | 'lg' | 'xl')
+* @returns Account display size props for text, subtitle, and disconnect button
+*
+* @example
+* ```tsx
+* const sizeProps = getWalletAccountDisplaySizeProps(size);
+* <span className={sizeProps.textSize}>{address}</span>
+* <Button className={sizeProps.iconButtonSize}>
+*   <LogOut className={sizeProps.iconSize} />
+* </Button>
+* ```
+*/
+function getWalletAccountDisplaySizeProps(walletSize) {
+	switch (walletSize) {
+		case "sm": return {
+			textSize: "text-[11px]",
+			subTextSize: "text-[8px]",
+			iconButtonSize: "size-5",
+			iconSize: "size-3"
+		};
+		case "lg": return {
+			textSize: "text-base",
+			subTextSize: "text-xs",
+			iconButtonSize: "size-8",
+			iconSize: "size-4"
+		};
+		case "xl": return {
+			textSize: "text-lg",
+			subTextSize: "text-sm",
+			iconButtonSize: "size-10",
+			iconSize: "size-5"
+		};
+		case "default":
+		default: return {
+			textSize: "text-xs",
+			subTextSize: "text-[9px]",
+			iconButtonSize: "size-6",
+			iconSize: "size-3.5"
+		};
+	}
+}
+/**
+* Maps WalletComponentSize to NetworkSwitcher component styling.
+* Provides sizing for select trigger, items, and loading indicator.
+*
+* @param walletSize - The wallet component size ('sm' | 'default' | 'lg' | 'xl')
+* @returns Network switcher size props for select components
+*
+* @example
+* ```tsx
+* const sizeProps = getWalletNetworkSwitcherSizeProps(size);
+* <SelectTrigger className={sizeProps.triggerClassName}>
+*   ...
+* </SelectTrigger>
+* <Loader2 className={sizeProps.loaderSize} />
+* ```
+*/
+function getWalletNetworkSwitcherSizeProps(walletSize) {
+	switch (walletSize) {
+		case "sm": return {
+			triggerClassName: "h-8 text-xs px-2 min-w-[90px] max-w-[120px]",
+			itemClassName: "text-xs py-1.5",
+			loaderSize: "h-3 w-3"
+		};
+		case "lg": return {
+			triggerClassName: "h-10 text-sm px-3 min-w-[120px] max-w-[180px]",
+			itemClassName: "text-sm py-2",
+			loaderSize: "h-4 w-4"
+		};
+		case "xl": return {
+			triggerClassName: "h-12 text-base px-4 min-w-[140px] max-w-[200px]",
+			itemClassName: "text-base py-2.5",
+			loaderSize: "h-5 w-5"
+		};
+		case "default":
+		default: return {
+			triggerClassName: "h-9 text-sm px-3 min-w-[100px] max-w-[150px]",
+			itemClassName: "text-sm py-1.5",
+			loaderSize: "h-3.5 w-3.5"
+		};
+	}
+}
+/**
+* Maps WalletComponentVariant to NetworkSwitcher SelectTrigger styling.
+* Since Select components don't have a native variant prop like Button,
+* this maps variants to appropriate Tailwind CSS classes.
+*
+* @param variant - The wallet component variant ('default' | 'outline' | 'ghost' | 'secondary')
+* @returns CSS class string for the SelectTrigger
+*
+* @example
+* ```tsx
+* const variantClassName = getWalletNetworkSwitcherVariantClassName(variant);
+* <SelectTrigger className={cn(sizeProps.triggerClassName, variantClassName)}>
+*   ...
+* </SelectTrigger>
+* ```
+*/
+function getWalletNetworkSwitcherVariantClassName(variant) {
+	switch (variant) {
+		case "ghost": return "border-transparent bg-transparent hover:bg-accent";
+		case "secondary": return "border-secondary bg-secondary/10 hover:bg-secondary/20";
+		case "outline": return "border-input bg-transparent hover:bg-accent";
+		case "default":
+		default: return "";
+	}
+}
+
 //#endregion
 exports.AnalyticsService = AnalyticsService;
 exports.AppConfigService = AppConfigService;
@@ -2134,6 +2288,10 @@ exports.getForcedService = getForcedService;
 exports.getInvalidUrlMessage = getInvalidUrlMessage;
 exports.getMissingRequiredContractInputs = getMissingRequiredContractInputs;
 exports.getTotalMemberCount = getTotalMemberCount;
+exports.getWalletAccountDisplaySizeProps = getWalletAccountDisplaySizeProps;
+exports.getWalletButtonSizeProps = getWalletButtonSizeProps;
+exports.getWalletNetworkSwitcherSizeProps = getWalletNetworkSwitcherSizeProps;
+exports.getWalletNetworkSwitcherVariantClassName = getWalletNetworkSwitcherVariantClassName;
 exports.hasMissingRequiredContractInputs = hasMissingRequiredContractInputs;
 exports.hasOwnership = hasOwnership;
 exports.hasRoles = hasRoles;