@txnlab/use-wallet-ui-react 0.3.1 → 0.4.0

package/dist/style.css

@@ -13,18 +13,10 @@
   --color-red-900: oklch(39.6% 0.141 25.723);
   --color-green-500: oklch(72.3% 0.219 149.579);
   --color-blue-500: oklch(62.3% 0.214 259.815);
-  --color-gray-50: oklch(98.5% 0.002 247.839);
-  --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
-  --color-gray-300: oklch(87.2% 0.01 258.338);
   --color-gray-400: oklch(70.7% 0.022 261.325);
   --color-gray-500: oklch(55.1% 0.027 264.364);
-  --color-gray-600: oklch(44.6% 0.03 256.802);
-  --color-gray-700: oklch(37.3% 0.034 259.733);
-  --color-gray-800: oklch(27.8% 0.033 256.848);
-  --color-gray-900: oklch(21% 0.034 264.665);
   --color-black: #000;
-  --color-white: #fff;
   --spacing: 0.25rem;
   --container-sm: 24rem;
   --text-sm: 0.875rem;
@@ -194,6 +186,72 @@
     display: none !important;
   }
 }
+[data-wallet-ui] {
+  --wui-color-primary: #2d2df1;
+  --wui-color-primary-hover: #2929d9;
+  --wui-color-primary-text: #ffffff;
+  --wui-color-bg: #ffffff;
+  --wui-color-bg-secondary: #f9fafb;
+  --wui-color-bg-tertiary: #f3f4f6;
+  --wui-color-bg-hover: #e9e9fd;
+  --wui-color-text: #1f2937;
+  --wui-color-text-secondary: #6b7280;
+  --wui-color-text-tertiary: #9ca3af;
+  --wui-color-border: #e5e7eb;
+  --wui-color-link: rgba(45, 45, 241, 0.8);
+  --wui-color-link-hover: #2d2df1;
+  --wui-color-overlay: rgba(0, 0, 0, 0.3);
+}
+[data-wallet-ui][data-theme='dark'] {
+  --wui-color-primary: #bfbff9;
+  --wui-color-primary-hover: #d4d4fa;
+  --wui-color-primary-text: #001324;
+  --wui-color-bg: #001324;
+  --wui-color-bg-secondary: #101b29;
+  --wui-color-bg-tertiary: #192a39;
+  --wui-color-bg-hover: #192a39;
+  --wui-color-text: #e9e9fd;
+  --wui-color-text-secondary: #99a1a7;
+  --wui-color-text-tertiary: #6b7280;
+  --wui-color-border: #192a39;
+  --wui-color-link: #6c6cf1;
+  --wui-color-link-hover: #8080f3;
+  --wui-color-overlay: rgba(0, 0, 0, 0.5);
+}
+.dark [data-wallet-ui]:not([data-theme='light']) {
+  --wui-color-primary: #bfbff9;
+  --wui-color-primary-hover: #d4d4fa;
+  --wui-color-primary-text: #001324;
+  --wui-color-bg: #001324;
+  --wui-color-bg-secondary: #101b29;
+  --wui-color-bg-tertiary: #192a39;
+  --wui-color-bg-hover: #192a39;
+  --wui-color-text: #e9e9fd;
+  --wui-color-text-secondary: #99a1a7;
+  --wui-color-text-tertiary: #6b7280;
+  --wui-color-border: #192a39;
+  --wui-color-link: #6c6cf1;
+  --wui-color-link-hover: #8080f3;
+  --wui-color-overlay: rgba(0, 0, 0, 0.5);
+}
+@media (prefers-color-scheme: dark) {
+  [data-wallet-ui]:not([data-theme='light']):not([data-theme='dark']) {
+    --wui-color-primary: #bfbff9;
+    --wui-color-primary-hover: #d4d4fa;
+    --wui-color-primary-text: #001324;
+    --wui-color-bg: #001324;
+    --wui-color-bg-secondary: #101b29;
+    --wui-color-bg-tertiary: #192a39;
+    --wui-color-bg-hover: #192a39;
+    --wui-color-text: #e9e9fd;
+    --wui-color-text-secondary: #99a1a7;
+    --wui-color-text-tertiary: #6b7280;
+    --wui-color-border: #192a39;
+    --wui-color-link: #6c6cf1;
+    --wui-color-link-hover: #8080f3;
+    --wui-color-overlay: rgba(0, 0, 0, 0.5);
+  }
+}
 [data-wallet-ui-reset] {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     all: revert-layer;
@@ -445,32 +503,29 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
-[data-wallet-ui] .border-gray-200 {
-  border-color: var(--color-gray-200);
-}
-[data-wallet-ui] .border-gray-300 {
-  border-color: var(--color-gray-300);
+[data-wallet-ui] .border-\[var\(--wui-color-border\)\] {
+  border-color: var(--wui-color-border);
 }
 [data-wallet-ui] .border-green-500 {
   border-color: var(--color-green-500);
 }
-[data-wallet-ui] .bg-\[\#2D2DF1\] {
-  background-color: #2D2DF1;
+[data-wallet-ui] .bg-\[var\(--wui-color-bg\)\] {
+  background-color: var(--wui-color-bg);
 }
-[data-wallet-ui] .bg-black\/30 {
-  background-color: color-mix(in srgb, #000 30%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-  }
+[data-wallet-ui] .bg-\[var\(--wui-color-bg-secondary\)\] {
+  background-color: var(--wui-color-bg-secondary);
 }
-[data-wallet-ui] .bg-blue-500 {
-  background-color: var(--color-blue-500);
+[data-wallet-ui] .bg-\[var\(--wui-color-bg-tertiary\)\] {
+  background-color: var(--wui-color-bg-tertiary);
+}
+[data-wallet-ui] .bg-\[var\(--wui-color-overlay\)\] {
+  background-color: var(--wui-color-overlay);
 }
-[data-wallet-ui] .bg-gray-50 {
-  background-color: var(--color-gray-50);
+[data-wallet-ui] .bg-\[var\(--wui-color-primary\)\] {
+  background-color: var(--wui-color-primary);
 }
-[data-wallet-ui] .bg-gray-100 {
-  background-color: var(--color-gray-100);
+[data-wallet-ui] .bg-blue-500 {
+  background-color: var(--color-blue-500);
 }
 [data-wallet-ui] .bg-gray-200 {
   background-color: var(--color-gray-200);
@@ -478,9 +533,6 @@
 [data-wallet-ui] .bg-red-100 {
   background-color: var(--color-red-100);
 }
-[data-wallet-ui] .bg-white {
-  background-color: var(--color-white);
-}
 [data-wallet-ui] .object-contain {
   object-fit: contain;
 }
@@ -590,32 +642,29 @@
   --tw-font-weight: var(--font-weight-normal);
   font-weight: var(--font-weight-normal);
 }
-[data-wallet-ui] .text-\[\#2D2DF1\] {
-  color: #2D2DF1;
-}
-[data-wallet-ui] .text-\[\#2D2DF1\]\/80 {
-  color: color-mix(in oklab, #2D2DF1 80%, transparent);
+[data-wallet-ui] .text-\[var\(--wui-color-link\)\] {
+  color: var(--wui-color-link);
 }
-[data-wallet-ui] .text-blue-500 {
-  color: var(--color-blue-500);
+[data-wallet-ui] .text-\[var\(--wui-color-primary\)\] {
+  color: var(--wui-color-primary);
 }
-[data-wallet-ui] .text-gray-400 {
-  color: var(--color-gray-400);
+[data-wallet-ui] .text-\[var\(--wui-color-primary-text\)\] {
+  color: var(--wui-color-primary-text);
 }
-[data-wallet-ui] .text-gray-500 {
-  color: var(--color-gray-500);
+[data-wallet-ui] .text-\[var\(--wui-color-text\)\] {
+  color: var(--wui-color-text);
 }
-[data-wallet-ui] .text-gray-600 {
-  color: var(--color-gray-600);
+[data-wallet-ui] .text-\[var\(--wui-color-text-secondary\)\] {
+  color: var(--wui-color-text-secondary);
 }
-[data-wallet-ui] .text-gray-700 {
-  color: var(--color-gray-700);
+[data-wallet-ui] .text-\[var\(--wui-color-text-tertiary\)\] {
+  color: var(--wui-color-text-tertiary);
 }
-[data-wallet-ui] .text-gray-800 {
-  color: var(--color-gray-800);
+[data-wallet-ui] .text-blue-500 {
+  color: var(--color-blue-500);
 }
-[data-wallet-ui] .text-gray-900 {
-  color: var(--color-gray-900);
+[data-wallet-ui] .text-gray-400 {
+  color: var(--color-gray-400);
 }
 [data-wallet-ui] .text-green-500 {
   color: var(--color-green-500);
@@ -623,9 +672,6 @@
 [data-wallet-ui] .text-red-700 {
   color: var(--color-red-700);
 }
-[data-wallet-ui] .text-white {
-  color: var(--color-white);
-}
 [data-wallet-ui] .opacity-80 {
   opacity: 80%;
 }
@@ -694,31 +740,17 @@
     display: none;
   }
 }
-[data-wallet-ui] .hover\:bg-\[\#2929D9\] {
+[data-wallet-ui] .hover\:bg-\[var\(--wui-color-bg-hover\)\] {
   &:hover {
     @media (hover: hover) {
-      background-color: #2929D9;
+      background-color: var(--wui-color-bg-hover);
     }
   }
 }
-[data-wallet-ui] .hover\:bg-\[\#E9E9FD\] {
+[data-wallet-ui] .hover\:bg-\[var\(--wui-color-primary-hover\)\] {
   &:hover {
     @media (hover: hover) {
-      background-color: #E9E9FD;
-    }
-  }
-}
-[data-wallet-ui] .hover\:bg-gray-200 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-gray-200);
-    }
-  }
-}
-[data-wallet-ui] .hover\:bg-gray-300 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-gray-300);
+      background-color: var(--wui-color-primary-hover);
     }
   }
 }
@@ -729,17 +761,18 @@
     }
   }
 }
-[data-wallet-ui] .hover\:text-\[\#2D2DF1\] {
+[data-wallet-ui] .hover\:text-\[var\(--wui-color-link-hover\)\] {
   &:hover {
     @media (hover: hover) {
-      color: #2D2DF1;
+      color: var(--wui-color-link-hover);
     }
   }
 }
-[data-wallet-ui] .hover\:text-gray-700 {
+[data-wallet-ui] .hover\:brightness-90 {
   &:hover {
     @media (hover: hover) {
-      color: var(--color-gray-700);
+      --tw-brightness: brightness(90%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
   }
 }
@@ -754,9 +787,9 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-[data-wallet-ui] .focus\:ring-\[\#2D2DF1\] {
+[data-wallet-ui] .focus\:ring-\[var\(--wui-color-primary\)\] {
   &:focus {
-    --tw-ring-color: #2D2DF1;
+    --tw-ring-color: var(--wui-color-primary);
   }
 }
 [data-wallet-ui] .focus\:outline-none {
@@ -770,14 +803,9 @@
     opacity: 50%;
   }
 }
-[data-wallet-ui] .data-\[focus\]\:bg-\[\#E9E9FD\] {
-  &[data-focus] {
-    background-color: #E9E9FD;
-  }
-}
-[data-wallet-ui] .data-\[focus\]\:text-gray-900 {
+[data-wallet-ui] .data-\[focus\]\:bg-\[var\(--wui-color-bg-hover\)\] {
   &[data-focus] {
-    color: var(--color-gray-900);
+    background-color: var(--wui-color-bg-hover);
   }
 }
 [data-wallet-ui] .data-\[focus\]\:outline-none {
@@ -866,44 +894,11 @@
     padding-left: calc(var(--spacing) * 3.5);
   }
 }
-[data-wallet-ui] .dark\:border-\[\#192A39\] {
-  @media (prefers-color-scheme: dark) {
-    border-color: #192A39;
-  }
-}
-[data-wallet-ui] .dark\:bg-\[\#101B29\] {
-  @media (prefers-color-scheme: dark) {
-    background-color: #101B29;
-  }
-}
 [data-wallet-ui] .dark\:bg-\[\#192A39\] {
   @media (prefers-color-scheme: dark) {
     background-color: #192A39;
   }
 }
-[data-wallet-ui] .dark\:bg-\[\#192A39\]\/75 {
-  @media (prefers-color-scheme: dark) {
-    background-color: color-mix(in oklab, #192A39 75%, transparent);
-  }
-}
-[data-wallet-ui] .dark\:bg-\[\#001324\] {
-  @media (prefers-color-scheme: dark) {
-    background-color: #001324;
-  }
-}
-[data-wallet-ui] .dark\:bg-\[\#BFBFF9\] {
-  @media (prefers-color-scheme: dark) {
-    background-color: #BFBFF9;
-  }
-}
-[data-wallet-ui] .dark\:bg-black\/50 {
-  @media (prefers-color-scheme: dark) {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-}
 [data-wallet-ui] .dark\:bg-gray-200 {
   @media (prefers-color-scheme: dark) {
     background-color: var(--color-gray-200);
@@ -917,46 +912,6 @@
     }
   }
 }
-[data-wallet-ui] .dark\:bg-transparent {
-  @media (prefers-color-scheme: dark) {
-    background-color: transparent;
-  }
-}
-[data-wallet-ui] .dark\:text-\[\#6C6CF1\] {
-  @media (prefers-color-scheme: dark) {
-    color: #6C6CF1;
-  }
-}
-[data-wallet-ui] .dark\:text-\[\#99A1A7\] {
-  @media (prefers-color-scheme: dark) {
-    color: #99A1A7;
-  }
-}
-[data-wallet-ui] .dark\:text-\[\#001324\] {
-  @media (prefers-color-scheme: dark) {
-    color: #001324;
-  }
-}
-[data-wallet-ui] .dark\:text-\[\#BFBFF9\] {
-  @media (prefers-color-scheme: dark) {
-    color: #BFBFF9;
-  }
-}
-[data-wallet-ui] .dark\:text-\[\#E9E9FD\] {
-  @media (prefers-color-scheme: dark) {
-    color: #E9E9FD;
-  }
-}
-[data-wallet-ui] .dark\:text-gray-300 {
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-300);
-  }
-}
-[data-wallet-ui] .dark\:text-gray-400 {
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-400);
-  }
-}
 [data-wallet-ui] .dark\:text-gray-500 {
   @media (prefers-color-scheme: dark) {
     color: var(--color-gray-500);
@@ -967,43 +922,6 @@
     color: var(--color-red-300);
   }
 }
-[data-wallet-ui] .dark\:text-white {
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-white);
-  }
-}
-[data-wallet-ui] .dark\:ring-\[\#192A39\]\/50 {
-  @media (prefers-color-scheme: dark) {
-    --tw-ring-color: color-mix(in oklab, #192A39 50%, transparent);
-  }
-}
-[data-wallet-ui] .dark\:hover\:bg-\[\#192A39\] {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #192A39;
-      }
-    }
-  }
-}
-[data-wallet-ui] .dark\:hover\:bg-\[\#263A4A\] {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #263A4A;
-      }
-    }
-  }
-}
-[data-wallet-ui] .dark\:hover\:bg-\[\#D4D4FA\] {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #D4D4FA;
-      }
-    }
-  }
-}
 [data-wallet-ui] .dark\:hover\:bg-red-800\/60 {
   @media (prefers-color-scheme: dark) {
     &:hover {
@@ -1016,45 +934,6 @@
     }
   }
 }
-[data-wallet-ui] .dark\:hover\:text-\[\#8080F3\] {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        color: #8080F3;
-      }
-    }
-  }
-}
-[data-wallet-ui] .dark\:hover\:text-\[\#D4D4FA\] {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        color: #D4D4FA;
-      }
-    }
-  }
-}
-[data-wallet-ui] .dark\:focus\:ring-\[\#BFBFF9\] {
-  @media (prefers-color-scheme: dark) {
-    &:focus {
-      --tw-ring-color: #BFBFF9;
-    }
-  }
-}
-[data-wallet-ui] .dark\:data-\[focus\]\:bg-\[\#192A39\] {
-  @media (prefers-color-scheme: dark) {
-    &[data-focus] {
-      background-color: #192A39;
-    }
-  }
-}
-[data-wallet-ui] .dark\:data-\[focus\]\:text-\[\#E9E9FD\] {
-  @media (prefers-color-scheme: dark) {
-    &[data-focus] {
-      color: #E9E9FD;
-    }
-  }
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -1162,6 +1041,59 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -1204,6 +1136,19 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;

package/dist/types/index.d.cts

@@ -85,6 +85,10 @@ declare type RefableElement_2 = ReactElement & {
     ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
 };
 
+export declare type ResolvedTheme = 'light' | 'dark';
+
+export declare type Theme = 'light' | 'dark' | 'system';
+
 /**
  * Custom hook to fetch account information for Algorand address
  *
@@ -107,6 +111,15 @@ export declare function useNfd(options?: {
     view?: NfdView;
 }): UseQueryResult<NfdRecord | null>;
 
+/**
+ * Hook to resolve the actual theme value, handling 'system' preference detection.
+ * When theme is 'system', it listens to the user's OS/browser color scheme preference.
+ *
+ * @param theme - The theme setting: 'light', 'dark', or 'system'
+ * @returns The resolved theme: 'light' or 'dark'
+ */
+export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
+
 /**
  * Hook to access the WalletUI context
  * @throws Error if used outside of WalletUIProvider
@@ -124,6 +137,8 @@ declare interface WalletListProps {
 
 declare interface WalletUIContextType {
     queryClient: QueryClient;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
 }
 
 /**
@@ -133,8 +148,13 @@ declare interface WalletUIContextType {
  *
  * Automatically prefetches data for all accounts in connected wallets for smoother
  * account switching experience.
+ *
+ * Supports theme configuration via the `theme` prop:
+ * - 'light': Always use light mode
+ * - 'dark': Always use dark mode
+ * - 'system': Follow the user's OS/browser preference (default)
  */
-export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, }: WalletUIProviderProps): JSX.Element;
+export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, theme, }: WalletUIProviderProps): JSX.Element;
 
 declare interface WalletUIProviderProps {
     children: ReactNode;
@@ -147,6 +167,16 @@ declare interface WalletUIProviderProps {
      * NFD view type for prefetching (defaults to 'thumbnail')
      */
     prefetchNfdView?: NfdView;
+    /**
+     * Theme setting for wallet UI components.
+     * - 'light': Always use light mode
+     * - 'dark': Always use dark mode
+     * - 'system': Follow the user's OS/browser preference (default)
+     *
+     * The library also respects the `.dark` class on ancestor elements (Tailwind convention),
+     * which will enable dark mode unless explicitly overridden with theme="light".
+     */
+    theme?: Theme;
 }
 
 export { }

package/dist/types/index.d.ts

@@ -85,6 +85,10 @@ declare type RefableElement_2 = ReactElement & {
     ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
 };
 
+export declare type ResolvedTheme = 'light' | 'dark';
+
+export declare type Theme = 'light' | 'dark' | 'system';
+
 /**
  * Custom hook to fetch account information for Algorand address
  *
@@ -107,6 +111,15 @@ export declare function useNfd(options?: {
     view?: NfdView;
 }): UseQueryResult<NfdRecord | null>;
 
+/**
+ * Hook to resolve the actual theme value, handling 'system' preference detection.
+ * When theme is 'system', it listens to the user's OS/browser color scheme preference.
+ *
+ * @param theme - The theme setting: 'light', 'dark', or 'system'
+ * @returns The resolved theme: 'light' or 'dark'
+ */
+export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
+
 /**
  * Hook to access the WalletUI context
  * @throws Error if used outside of WalletUIProvider
@@ -124,6 +137,8 @@ declare interface WalletListProps {
 
 declare interface WalletUIContextType {
     queryClient: QueryClient;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
 }
 
 /**
@@ -133,8 +148,13 @@ declare interface WalletUIContextType {
  *
  * Automatically prefetches data for all accounts in connected wallets for smoother
  * account switching experience.
+ *
+ * Supports theme configuration via the `theme` prop:
+ * - 'light': Always use light mode
+ * - 'dark': Always use dark mode
+ * - 'system': Follow the user's OS/browser preference (default)
  */
-export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, }: WalletUIProviderProps): JSX.Element;
+export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, theme, }: WalletUIProviderProps): JSX.Element;
 
 declare interface WalletUIProviderProps {
     children: ReactNode;
@@ -147,6 +167,16 @@ declare interface WalletUIProviderProps {
      * NFD view type for prefetching (defaults to 'thumbnail')
      */
     prefetchNfdView?: NfdView;
+    /**
+     * Theme setting for wallet UI components.
+     * - 'light': Always use light mode
+     * - 'dark': Always use dark mode
+     * - 'system': Follow the user's OS/browser preference (default)
+     *
+     * The library also respects the `.dark` class on ancestor elements (Tailwind convention),
+     * which will enable dark mode unless explicitly overridden with theme="light".
+     */
+    theme?: Theme;
 }
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txnlab/use-wallet-ui-react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React components for use-wallet UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -18,10 +18,12 @@
       }
     },
     "./dist/style.css": "./dist/style.css",
+    "./theme.css": "./src/theme.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src/theme.css",
     "README.md"
   ],
   "keywords": [