@calimero-network/mero-react 2.0.1 → 2.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { CSSProperties } from 'react';
 import * as _calimero_network_mero_js from '@calimero-network/mero-js';
 import { MeroJs, AddGroupMembersRequest, CreateContextRequest, CreateGroupInNamespaceRequest, CreateNamespaceRequest, CreateNamespaceInvitationRequest, CreateNamespaceInvitationResponseData, CreateRecursiveInvitationResponseData, DeleteGroupRequest, DeleteNamespaceRequest, DetachContextFromGroupRequest, GroupContextEntry, GroupInfo, CreateGroupInvitationRequest, GroupMember, GroupUpgradeStatusResponseData, JoinGroupRequest, JoinNamespaceRequest, Namespace, SubgroupEntry, NamespaceIdentity, NestGroupRequest, RegisterGroupSigningKeyRequest, RemoveGroupMembersRequest, RetryGroupUpgradeRequest, SetDefaultCapabilitiesRequest, SetGroupAliasRequest, SetMemberAliasRequest, SetSubgroupVisibilityRequest, SetTeeAdmissionPolicyRequest, SseEventData, SyncGroupRequest, UnnestGroupRequest, UpdateGroupSettingsRequest, UpdateMemberRoleRequest, UpgradeGroupRequest, TokenData } from '@calimero-network/mero-js';
 export * from '@calimero-network/mero-js';
@@ -122,6 +122,81 @@ interface MeroProviderProps extends MeroProviderConfig {
 declare function MeroProvider({ children, mode, packageName, packageVersion, registryUrl, timeoutMs, }: MeroProviderProps): react_jsx_runtime.JSX.Element;
 declare function useMero(): MeroContextValue;
 
+/**
+ * Theme tokens for mero-react components.
+ *
+ * Defaults match the green palette used across Calimero apps (admin-dashboard,
+ * tauri-app, app-registry). Pass a partial `MeroTheme` to `ConnectButton` or
+ * `LoginModal` to override any token.
+ */
+
+interface MeroTheme {
+    /** Primary accent / CTA color */
+    primary?: string;
+    /** Primary accent on hover */
+    primaryHover?: string;
+    /** Text color rendered on top of `primary` (e.g. inside the Connect button when connected) */
+    primaryText?: string;
+    /** Main surface color (modal background, button background) */
+    background?: string;
+    /** Secondary surface color (input fields, info chips) */
+    backgroundSecondary?: string;
+    /** Tertiary surface color (subtle elevation) */
+    backgroundTertiary?: string;
+    /** Border color */
+    border?: string;
+    /** Primary text color */
+    text?: string;
+    /** Muted / secondary text color */
+    textSecondary?: string;
+    /** Error / danger color */
+    error?: string;
+    /** Modal backdrop color */
+    overlay?: string;
+    /** Border radius (any CSS length) */
+    radius?: string;
+}
+type ResolvedMeroTheme = Required<MeroTheme>;
+declare const defaultMeroTheme: Readonly<ResolvedMeroTheme>;
+/**
+ * Merge a partial theme with the defaults.
+ *
+ * Filtering rules — values that fall back to the default:
+ *   - `undefined` (the prop key wasn't set, or was set to `undefined`)
+ *   - empty string `''`
+ *   - whitespace-only strings (e.g. `'   '`)
+ *
+ * These are dropped because they're invalid CSS and would produce
+ * invisible elements (transparent backgrounds, missing borders, etc.).
+ * If you genuinely want the browser default for a token, omit the key
+ * from the theme prop rather than passing an empty string.
+ *
+ * Any other non-empty string is forwarded as-is — CSS syntax itself
+ * is NOT validated.
+ */
+declare function resolveMeroTheme(theme?: MeroTheme): ResolvedMeroTheme;
+/**
+ * Single source of truth mapping each `MeroTheme` token name to the CSS
+ * custom-property name it surfaces as. Used by `themeToCssVars` to emit the
+ * inline-style map and by component code (e.g. `LoginModal`) to read the
+ * variable in inline styles via `var(--mero-*, fallback)`.
+ *
+ * Adding a new token? Add it here, in `MeroTheme`, and in `defaultMeroTheme`,
+ * and the rest of the system picks it up automatically.
+ */
+declare const MERO_CSS_VARS: Record<keyof MeroTheme, string>;
+/**
+ * Build a `style` object that exposes a resolved theme as CSS variables, so
+ * descendant CSS rules (e.g. those in `styles.css`) pick up the overrides.
+ */
+declare function themeToCssVars(theme: ResolvedMeroTheme): CSSProperties;
+/**
+ * Returns a `var(--mero-*, fallback)` reference for a theme token, suitable
+ * for inline styles in portal-rendered components where descendant CSS
+ * variables also need to support global `:root` overrides.
+ */
+declare function cssVar(theme: ResolvedMeroTheme, key: keyof MeroTheme): string;
+
 interface ConnectButtonProps {
     /** Connection type for login modal */
     connectionType?: ConnectionType | CustomConnectionConfig;
@@ -129,11 +204,29 @@ interface ConnectButtonProps {
     className?: string;
     /** Custom styles */
     style?: React__default.CSSProperties;
+    /** Theme overrides — accepts any subset of `MeroTheme` tokens */
+    theme?: MeroTheme;
+    /**
+     * Render only the Calimero logo, no text. Produces a square 40×40 icon
+     * button. The label is still announced to screen readers via `aria-label`.
+     * Default: false.
+     */
+    logoOnly?: boolean;
+    /**
+     * Override the default labels per state. A bare string is shorthand for
+     * `{ connect: '<string>' }`. The connected and reconnecting states keep
+     * their defaults unless explicitly overridden.
+     */
+    label?: string | {
+        connect?: string;
+        connected?: string;
+        reconnecting?: string;
+    };
 }
 /**
  * ConnectButton - Displays connection status and handles login/logout
  */
-declare function ConnectButton({ connectionType, className, style, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
+declare function ConnectButton({ connectionType, className, style, theme, logoOnly, label, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LoginModalProps {
     /** Callback when user connects */
@@ -144,11 +237,19 @@ interface LoginModalProps {
     connectionType: ConnectionType | CustomConnectionConfig;
     /** Whether the modal is open */
     isOpen: boolean;
+    /** Theme overrides — accepts any subset of `MeroTheme` tokens */
+    theme?: MeroTheme;
 }
 /**
  * LoginModal - Connection modal component
  */
-declare function LoginModal({ onConnect, onClose, connectionType, isOpen, }: LoginModalProps): React.ReactPortal | null;
+declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, }: LoginModalProps): React.ReactPortal | null;
+
+interface CalimeroLogoProps extends React__default.SVGAttributes<SVGSVGElement> {
+    /** Width / height shorthand (applied to both). Default: 24. */
+    size?: number | string;
+}
+declare function CalimeroLogo({ size, color, style, ...rest }: CalimeroLogoProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Execute RPC methods against a context.
@@ -455,4 +556,4 @@ declare function clearContextIdentity(): void;
  */
 declare function clearAllStorage(): void;
 
-export { type AppContext, AppMode, type ApplicationContextRecord, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, setApplicationId, setContextId, setContextIdentity, setNodeUrl, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, type ResolvedMeroTheme, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { CSSProperties } from 'react';
 import * as _calimero_network_mero_js from '@calimero-network/mero-js';
 import { MeroJs, AddGroupMembersRequest, CreateContextRequest, CreateGroupInNamespaceRequest, CreateNamespaceRequest, CreateNamespaceInvitationRequest, CreateNamespaceInvitationResponseData, CreateRecursiveInvitationResponseData, DeleteGroupRequest, DeleteNamespaceRequest, DetachContextFromGroupRequest, GroupContextEntry, GroupInfo, CreateGroupInvitationRequest, GroupMember, GroupUpgradeStatusResponseData, JoinGroupRequest, JoinNamespaceRequest, Namespace, SubgroupEntry, NamespaceIdentity, NestGroupRequest, RegisterGroupSigningKeyRequest, RemoveGroupMembersRequest, RetryGroupUpgradeRequest, SetDefaultCapabilitiesRequest, SetGroupAliasRequest, SetMemberAliasRequest, SetSubgroupVisibilityRequest, SetTeeAdmissionPolicyRequest, SseEventData, SyncGroupRequest, UnnestGroupRequest, UpdateGroupSettingsRequest, UpdateMemberRoleRequest, UpgradeGroupRequest, TokenData } from '@calimero-network/mero-js';
 export * from '@calimero-network/mero-js';
@@ -122,6 +122,81 @@ interface MeroProviderProps extends MeroProviderConfig {
 declare function MeroProvider({ children, mode, packageName, packageVersion, registryUrl, timeoutMs, }: MeroProviderProps): react_jsx_runtime.JSX.Element;
 declare function useMero(): MeroContextValue;
 
+/**
+ * Theme tokens for mero-react components.
+ *
+ * Defaults match the green palette used across Calimero apps (admin-dashboard,
+ * tauri-app, app-registry). Pass a partial `MeroTheme` to `ConnectButton` or
+ * `LoginModal` to override any token.
+ */
+
+interface MeroTheme {
+    /** Primary accent / CTA color */
+    primary?: string;
+    /** Primary accent on hover */
+    primaryHover?: string;
+    /** Text color rendered on top of `primary` (e.g. inside the Connect button when connected) */
+    primaryText?: string;
+    /** Main surface color (modal background, button background) */
+    background?: string;
+    /** Secondary surface color (input fields, info chips) */
+    backgroundSecondary?: string;
+    /** Tertiary surface color (subtle elevation) */
+    backgroundTertiary?: string;
+    /** Border color */
+    border?: string;
+    /** Primary text color */
+    text?: string;
+    /** Muted / secondary text color */
+    textSecondary?: string;
+    /** Error / danger color */
+    error?: string;
+    /** Modal backdrop color */
+    overlay?: string;
+    /** Border radius (any CSS length) */
+    radius?: string;
+}
+type ResolvedMeroTheme = Required<MeroTheme>;
+declare const defaultMeroTheme: Readonly<ResolvedMeroTheme>;
+/**
+ * Merge a partial theme with the defaults.
+ *
+ * Filtering rules — values that fall back to the default:
+ *   - `undefined` (the prop key wasn't set, or was set to `undefined`)
+ *   - empty string `''`
+ *   - whitespace-only strings (e.g. `'   '`)
+ *
+ * These are dropped because they're invalid CSS and would produce
+ * invisible elements (transparent backgrounds, missing borders, etc.).
+ * If you genuinely want the browser default for a token, omit the key
+ * from the theme prop rather than passing an empty string.
+ *
+ * Any other non-empty string is forwarded as-is — CSS syntax itself
+ * is NOT validated.
+ */
+declare function resolveMeroTheme(theme?: MeroTheme): ResolvedMeroTheme;
+/**
+ * Single source of truth mapping each `MeroTheme` token name to the CSS
+ * custom-property name it surfaces as. Used by `themeToCssVars` to emit the
+ * inline-style map and by component code (e.g. `LoginModal`) to read the
+ * variable in inline styles via `var(--mero-*, fallback)`.
+ *
+ * Adding a new token? Add it here, in `MeroTheme`, and in `defaultMeroTheme`,
+ * and the rest of the system picks it up automatically.
+ */
+declare const MERO_CSS_VARS: Record<keyof MeroTheme, string>;
+/**
+ * Build a `style` object that exposes a resolved theme as CSS variables, so
+ * descendant CSS rules (e.g. those in `styles.css`) pick up the overrides.
+ */
+declare function themeToCssVars(theme: ResolvedMeroTheme): CSSProperties;
+/**
+ * Returns a `var(--mero-*, fallback)` reference for a theme token, suitable
+ * for inline styles in portal-rendered components where descendant CSS
+ * variables also need to support global `:root` overrides.
+ */
+declare function cssVar(theme: ResolvedMeroTheme, key: keyof MeroTheme): string;
+
 interface ConnectButtonProps {
     /** Connection type for login modal */
     connectionType?: ConnectionType | CustomConnectionConfig;
@@ -129,11 +204,29 @@ interface ConnectButtonProps {
     className?: string;
     /** Custom styles */
     style?: React__default.CSSProperties;
+    /** Theme overrides — accepts any subset of `MeroTheme` tokens */
+    theme?: MeroTheme;
+    /**
+     * Render only the Calimero logo, no text. Produces a square 40×40 icon
+     * button. The label is still announced to screen readers via `aria-label`.
+     * Default: false.
+     */
+    logoOnly?: boolean;
+    /**
+     * Override the default labels per state. A bare string is shorthand for
+     * `{ connect: '<string>' }`. The connected and reconnecting states keep
+     * their defaults unless explicitly overridden.
+     */
+    label?: string | {
+        connect?: string;
+        connected?: string;
+        reconnecting?: string;
+    };
 }
 /**
  * ConnectButton - Displays connection status and handles login/logout
  */
-declare function ConnectButton({ connectionType, className, style, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
+declare function ConnectButton({ connectionType, className, style, theme, logoOnly, label, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LoginModalProps {
     /** Callback when user connects */
@@ -144,11 +237,19 @@ interface LoginModalProps {
     connectionType: ConnectionType | CustomConnectionConfig;
     /** Whether the modal is open */
     isOpen: boolean;
+    /** Theme overrides — accepts any subset of `MeroTheme` tokens */
+    theme?: MeroTheme;
 }
 /**
  * LoginModal - Connection modal component
  */
-declare function LoginModal({ onConnect, onClose, connectionType, isOpen, }: LoginModalProps): React.ReactPortal | null;
+declare function LoginModal({ onConnect, onClose, connectionType, isOpen, theme, }: LoginModalProps): React.ReactPortal | null;
+
+interface CalimeroLogoProps extends React__default.SVGAttributes<SVGSVGElement> {
+    /** Width / height shorthand (applied to both). Default: 24. */
+    size?: number | string;
+}
+declare function CalimeroLogo({ size, color, style, ...rest }: CalimeroLogoProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Execute RPC methods against a context.
@@ -455,4 +556,4 @@ declare function clearContextIdentity(): void;
  */
 declare function clearAllStorage(): void;
 
-export { type AppContext, AppMode, type ApplicationContextRecord, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, setApplicationId, setContextId, setContextIdentity, setNodeUrl, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };
+export { type AppContext, AppMode, type ApplicationContextRecord, CalimeroLogo, type CalimeroLogoProps, ConnectButton, type ConnectButtonProps, ConnectionType, type ContextDiscoveryOptions, type ContextDiscoveryState, type CustomConnectionConfig, type ExecutionResult, LoginModal, type LoginModalProps, MERO_CSS_VARS, MeroContext, type MeroContextValue, MeroProvider, type MeroProviderConfig, type MeroProviderProps, type MeroTheme, type ResolvedMeroTheme, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, cssVar, defaultMeroTheme, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, resolveMeroTheme, setApplicationId, setContextId, setContextIdentity, setNodeUrl, themeToCssVars, useAddGroupMembers, useApplicationContexts, useContextDiscovery, useContextGroup, useContexts, useCreateContext, useCreateGroupInNamespace, useCreateNamespace, useCreateNamespaceInvitation, useDeleteContext, useDeleteGroup, useDeleteNamespace, useDetachContextFromGroup, useExecute, useGroupCapabilities, useGroupContexts, useGroupInfo, useGroupInvitations, useGroupMembers, useGroupUpgradeStatus, useJoinContext, useJoinGroup, useJoinNamespace, useMero, useNamespace, useNamespaceGroups, useNamespaceIdentity, useNamespaces, useNamespacesForApplication, useNestGroup, useRegisterGroupSigningKey, useRemoveGroupMembers, useRetryGroupUpgrade, useSetDefaultCapabilities, useSetGroupAlias, useSetMemberAlias, useSetSubgroupVisibility, useSetTeeAdmissionPolicy, useSubgroups, useSubscription, useSyncGroup, useUnnestGroup, useUpdateGroupSettings, useUpdateMemberRole, useUpgradeGroup };