@openzeppelin/ui-components 1.7.0 → 2.0.0

package/README.md

@@ -137,11 +137,29 @@ components/
 
 Components are styled using Tailwind CSS. The necessary Tailwind configuration is expected to be present in the consuming application. The UI package itself does not bundle CSS but provides the class names and structure.
 
-Import the shared styles from `@openzeppelin/ui-styles`:
+Important: a bare Tailwind import is not enough for OpenZeppelin packages. Tailwind v4 must be told to scan the relevant `@openzeppelin/*` sources, or some component classes will be omitted from the final CSS.
+
+For consumer apps that use `@openzeppelin/ui-dev-cli`, the recommended workflow is:
+
+```bash
+pnpm exec oz-ui-dev tailwind doctor --project "$PWD"
+pnpm exec oz-ui-dev tailwind fix --project "$PWD"
+```
+
+That creates a managed `oz-tailwind.generated.css` file and keeps the `@source` wiring in sync with your installed dependencies.
+
+If you need to configure Tailwind manually, import the shared styles and register the OpenZeppelin package sources explicitly:
 
 ```css
+@layer base, components, utilities;
+
+@import 'tailwindcss' source(none);
+@source "../node_modules/@openzeppelin/ui-components";
+@source "../node_modules/@openzeppelin/ui-react";
+@source "../node_modules/@openzeppelin/ui-renderer";
+@source "../node_modules/@openzeppelin/ui-styles";
+@source "../node_modules/@openzeppelin/ui-utils";
 @import '@openzeppelin/ui-styles/global.css';
-@import 'tailwindcss';
 ```
 
 ## Development

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "1.7.0";
+const VERSION = "2.0.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -2674,13 +2674,13 @@ const MAX_SUGGESTIONS = 5;
 * 2. TransactionForm renders the overall form structure with React Hook Form
 * 3. DynamicFormField selects the appropriate field component (like AddressField) based on field type
 * 4. BaseField provides consistent layout and hook form integration
-* 5. This component handles blockchain address-specific rendering and validation using the passed adapter
+* 5. This component handles blockchain address-specific rendering and validation using the passed addressing capability
 *
 * The component includes:
 * - Integration with React Hook Form
-* - Blockchain address validation through adapter-provided custom validation
+* - Blockchain address validation through the provided addressing capability
 * - Automatic error handling and reporting
-* - Chain-agnostic design (validation handled by adapters)
+* - Chain-agnostic design (validation handled by capabilities)
 * - Full accessibility support with ARIA attributes
 * - Keyboard navigation
 *
@@ -2695,7 +2695,7 @@ const MAX_SUGGESTIONS = 5;
 * The suggestion dropdown includes built-in debouncing, keyboard navigation (Arrow keys,
 * Enter, Escape), click-outside dismissal, and ARIA listbox semantics.
 */
-function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, adapter, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
+function AddressField({ id, label, placeholder, helperText, control, name, width = "full", validation, addressing, readOnly, suggestions: suggestionsProp, onSuggestionSelect }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -2778,8 +2778,8 @@ function AddressField({ id, label, placeholder, helperText, control, name, width
 				if (value === void 0 || value === null || value === "") return validation?.required ? "This field is required" : true;
 				const standardValidationResult = require_ErrorMessage.validateField(value, validation);
 				if (standardValidationResult !== true) return standardValidationResult;
-				if (adapter && typeof value === "string") {
-					if (!adapter.isValidAddress(value)) return "Invalid address format for the selected chain";
+				if (addressing && typeof value === "string") {
+					if (!addressing.isValidAddress(value)) return "Invalid address format for the selected chain";
 				}
 				return true;
 			} },
@@ -3335,7 +3335,7 @@ ArrayField.displayName = "ArrayField";
 * The component combines the functionality of ArrayField and ObjectField to handle
 * complex nested data structures commonly found in blockchain contracts.
 */
-function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, adapter, contractSchema }) {
+function ArrayObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], minItems = 0, maxItems, renderProperty, collapsible = true, defaultCollapsed = false, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -3452,8 +3452,8 @@ function ArrayObjectField({ id, label, helperText, control, name, width = "full"
 								}), !isCollapsed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "space-y-4 mt-4",
 									children: components.map((component) => {
-										if (!adapter) throw new Error(`ArrayObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-										const generatedField = adapter.generateDefaultField(component, contractSchema);
+										if (!typeMapping) throw new Error(`ArrayObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+										const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 										const propertyField = {
 											...generatedField,
 											id: `${id}-${index}-${component.name}`,
@@ -5166,7 +5166,7 @@ NumberField.displayName = "NumberField";
 * The component reuses existing field components for individual properties,
 * maintaining consistency across the form system while supporting complex nested structures.
 */
-function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, adapter, contractSchema }) {
+function ObjectField({ id, label, helperText, control, name, width = "full", validation, components = [], renderProperty, showCard = true, readOnly, typeMapping, contractSchema }) {
 	const isRequired = !!validation?.required;
 	const errorId = `${id}-error`;
 	const descriptionId = `${id}-description`;
@@ -5193,8 +5193,8 @@ function ObjectField({ id, label, helperText, control, name, width = "full", val
 						className: "text-muted-foreground text-sm",
 						children: "No properties defined for this object"
 					}) : components.map((component) => {
-						if (!adapter) throw new Error(`ObjectField: No adapter provided for field generation. Cannot generate field for "${component.name}"`);
-						const generatedField = adapter.generateDefaultField(component, contractSchema);
+						if (!typeMapping) throw new Error(`ObjectField: No typeMapping capability provided for field generation. Cannot generate field for "${component.name}"`);
+						const generatedField = typeMapping.generateDefaultField(component, contractSchema);
 						const propertyField = {
 							...generatedField,
 							id: `${id}-${component.name}`,
@@ -6216,19 +6216,19 @@ function useNetworkErrors() {
 	return context;
 }
 /**
-* Hook for reporting network errors for a specific adapter
+* Hook for reporting network errors for a specific runtime-bound capability
 */
-function useNetworkErrorReporter(adapter) {
+function useNetworkErrorReporter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
 	return {
 		reportRpcError: (0, react.useCallback)((message) => {
-			if (!adapter) return;
-			reportNetworkError("rpc", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError]),
+			if (!capability) return;
+			reportNetworkError("rpc", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError]),
 		reportExplorerError: (0, react.useCallback)((message) => {
-			if (!adapter) return;
-			reportNetworkError("explorer", adapter.networkConfig.id, adapter.networkConfig.name, message);
-		}, [adapter, reportNetworkError])
+			if (!capability) return;
+			reportNetworkError("explorer", capability.networkConfig.id, capability.networkConfig.name, message);
+		}, [capability, reportNetworkError])
 	};
 }
 
@@ -6237,15 +6237,15 @@ function useNetworkErrorReporter(adapter) {
 /**
 * Creates an adapter proxy that intercepts and reports network errors
 */
-function useNetworkErrorAwareAdapter(adapter) {
+function useNetworkErrorAwareAdapter(capability) {
 	const { reportNetworkError } = useNetworkErrors();
-	const wrappedAdapterRef = (0, react.useRef)(null);
+	const wrappedCapabilityRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		if (!adapter) {
-			wrappedAdapterRef.current = null;
+		if (!capability) {
+			wrappedCapabilityRef.current = null;
 			return;
 		}
-		wrappedAdapterRef.current = new Proxy(adapter, { get(target, prop, receiver) {
+		wrappedCapabilityRef.current = new Proxy(capability, { get(target, prop, receiver) {
 			const value = Reflect.get(target, prop, receiver);
 			if (typeof value === "function" && (prop === "queryViewFunction" || prop === "loadContract")) return async (...args) => {
 				try {
@@ -6259,8 +6259,8 @@ function useNetworkErrorAwareAdapter(adapter) {
 			};
 			return value;
 		} });
-	}, [adapter, reportNetworkError]);
-	return wrappedAdapterRef.current;
+	}, [capability, reportNetworkError]);
+	return wrappedCapabilityRef.current;
 }
 
 //#endregion