@jaw.id/ui 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -13,4 +13,5 @@ export * from './icons';
 export * from './hooks';
 export * from './utils';
 export * from './react';
+export * from './theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,39 +1,50 @@
-import { h as e, C as o, j as n, k as c, m as i, D as t, E as l, n as r, o as I, F as d, G as g, L as D, O as C, p as k, P as u, q as T, R as p, S as h, r as m, T as P, U as f, t as E, W as S, u as U, v as y, w as x, x as A, y as F, z as G, A as N, I as O, J as R, K as b, M as v, N as w, Q as B } from "./index-DdcUSYhO.js";
+import { h as s, j as o, C as n, k as c, m as t, n as i, D as l, o as r, p as T, E as I, q as D, r as g, F as d, t as C, G as h, L as A, O as E, u as k, P as m, v as P, R as S, S as u, w as p, T as _, U, x as L, W as R, y, z as F, A as O, I as f, J as v, K as x, M as G, N as M, Q as N, V as B, X as K, Y as b, Z as w, _ as H, $ as J, a0 as W, a1 as j, a2 as q, a3 as z, a4 as Q } from "./index-Bj8-z_bB.js";
 export {
-  e as BadgeDollarIcon,
-  o as CloseIcon,
-  n as ConnectDialog,
-  c as CopiedIcon,
+  s as BORDER_RADIUS_MAP,
+  o as BadgeDollarIcon,
+  n as CloseIcon,
+  c as ConnectDialog,
+  t as CopiedIcon,
   i as CopyIcon,
-  t as DefaultDialog,
-  l as Eip712Dialog,
-  r as EthIcon,
-  I as EyeIcon,
-  d as FeeTokenSelector,
-  g as GenericTokenIcon,
-  D as LockIcon,
-  C as OnboardingDialog,
+  l as DEFAULT_DARK_PALETTE,
+  r as DEFAULT_LIGHT_PALETTE,
+  T as DefaultDialog,
+  I as Eip712Dialog,
+  D as EthIcon,
+  g as EyeIcon,
+  d as FONT_STACK_MAP,
+  C as FeeTokenSelector,
+  h as GenericTokenIcon,
+  A as LockIcon,
+  E as OnboardingDialog,
   k as OrSeparator,
-  u as PermissionDialog,
-  T as PortalContainerContext,
-  p as ReactUIHandler,
-  h as SignatureDialog,
-  m as SiweDialog,
-  P as TransactionDialog,
-  f as UsdcIcon,
-  E as UsdtIcon,
-  S as WalletIcon,
-  U as clearTokenPriceCache,
-  y as cn,
-  x as fetchTokenBalance,
-  A as fetchTokenPrice,
-  F as formatAddress,
-  G as getDisplayAddress,
+  m as PermissionDialog,
+  P as PortalContainerContext,
+  S as ReactUIHandler,
+  u as SignatureDialog,
+  p as SiweDialog,
+  _ as TransactionDialog,
+  U as UsdcIcon,
+  L as UsdtIcon,
+  R as WalletIcon,
+  y as applyThemeToContainer,
+  F as clearTokenPriceCache,
+  O as cn,
+  f as deriveAccentPalette,
+  v as fetchTokenBalance,
+  x as fetchTokenPrice,
+  G as formatAddress,
+  M as getDisplayAddress,
   N as getJustaNameInstance,
-  O as isNativeToken,
-  R as useChainIconURI,
-  b as useDecodedCalldata,
-  v as useFeeTokenPrice,
-  w as useGasEstimation,
-  B as useIsMobile
+  B as getSystemColorScheme,
+  K as hexToOklch,
+  b as isNativeToken,
+  w as oklchToString,
+  H as resolveTheme,
+  J as useChainIconURI,
+  W as useColorScheme,
+  j as useDecodedCalldata,
+  q as useFeeTokenPrice,
+  z as useGasEstimation,
+  Q as useIsMobile
 };

package/dist/react/ReactUIHandler.d.ts

@@ -1,4 +1,11 @@
-import { UIHandler, UIHandlerConfig, UIRequest, UIResponse } from '../../../core/src/index.ts';
+import { UIHandler, UIHandlerConfig, UIRequest, UIResponse, JawTheme } from '../../../core/src/index.ts';
+/**
+ * Options for ReactUIHandler constructor.
+ */
+export interface ReactUIHandlerOptions {
+    /** Theme configuration. Takes precedence over theme provided via JAW.create(). */
+    readonly theme?: JawTheme;
+}
 /**
  * React UI handler for app-specific mode
  *
@@ -18,15 +25,36 @@ import { UIHandler, UIHandlerConfig, UIRequest, UIResponse } from '../../../core
  *     uiHandler: new ReactUIHandler(),
  *   },
  * });
+ *
+ * // With theme:
+ * const jaw2 = JAW.create({
+ *   apiKey: 'your-api-key',
+ *   theme: { mode: 'dark', accentColor: '#6366f1' },
+ *   preference: {
+ *     mode: Mode.AppSpecific,
+ *     uiHandler: new ReactUIHandler({
+ *       theme: { accentColor: '#7b3fe4', borderRadius: 'lg' },
+ *     }),
+ *   },
+ * });
  * ```
  */
 export declare class ReactUIHandler implements UIHandler {
     private config;
+    private localTheme?;
+    constructor(options?: ReactUIHandlerOptions);
     /**
      * Initialize the handler with SDK configuration
      * Called automatically by the SDK - do not call directly
      */
     init(config: UIHandlerConfig): void;
+    /**
+     * Update the theme without recreating the SDK or disconnecting.
+     * Takes effect on the next dialog that opens.
+     */
+    setTheme(theme: JawTheme): void;
+    /** Merged theme: local theme wins over init-provided theme */
+    private get effectiveTheme();
     request<T = unknown>(request: UIRequest): Promise<UIResponse<T>>;
     canHandle(request: UIRequest): boolean;
     cleanup(): Promise<void>;

package/dist/react/ReactUIHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactUIHandler.d.ts","sourceRoot":"","sources":["../../src/react/ReactUIHandler.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,UAAU,EA0BX,MAAM,cAAc,CAAC;AAyHtB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,cAAe,YAAW,SAAS;IAC9C,OAAO,CAAC,MAAM,CAA0C;IAExD;;;OAGG;IACH,IAAI,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI;IAI7B,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IA2FtE,SAAS,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO;IAahC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAU9B,OAAO,CAAC,YAAY;CAgNrB"}
+{"version":3,"file":"ReactUIHandler.d.ts","sourceRoot":"","sources":["../../src/react/ReactUIHandler.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,SAAS,EACT,eAAe,EACf,SAAS,EACT,UAAU,EA0BX,MAAM,cAAc,CAAC;AA2BtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA6H7C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,cAAe,YAAW,SAAS;IAC9C,OAAO,CAAC,MAAM,CAA0C;IACxD,OAAO,CAAC,UAAU,CAAC,CAAW;gBAElB,OAAO,CAAC,EAAE,qBAAqB;IAI3C;;;OAGG;IACH,IAAI,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI;IAInC;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAI/B,8DAA8D;IAC9D,OAAO,KAAK,cAAc,GAIzB;IAEK,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAgGtE,SAAS,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO;IAahC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAU9B,OAAO,CAAC,YAAY;CAgNrB"}

package/dist/theme/apply-theme.d.ts

@@ -0,0 +1,12 @@
+import { ResolvedTheme } from './resolve-theme.js';
+/**
+ * Apply resolved theme variables to an HTML element.
+ *
+ * - Sets every `--jaw-*` variable via `style.setProperty`
+ * - Also sets the short backwards-compat aliases (--primary, --background, etc.)
+ *   so Tailwind utilities like `bg-primary` resolve correctly on this container
+ * - Toggles the `dark` class based on `colorScheme`
+ * - Sets `color-scheme` CSS property for native form controls
+ */
+export declare function applyThemeToContainer(container: HTMLElement, resolved: ResolvedTheme): void;
+//# sourceMappingURL=apply-theme.d.ts.map

package/dist/theme/apply-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-theme.d.ts","sourceRoot":"","sources":["../../src/theme/apply-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAmCnD;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,aAAa,GACtB,IAAI,CAkCN"}

package/dist/theme/constants.d.ts

@@ -0,0 +1,6 @@
+import { JawBorderRadius, JawFontStack } from '../../../core/src/index.ts';
+export declare const DEFAULT_LIGHT_PALETTE: Readonly<Record<string, string>>;
+export declare const DEFAULT_DARK_PALETTE: Readonly<Record<string, string>>;
+export declare const BORDER_RADIUS_MAP: Readonly<Record<JawBorderRadius, string>>;
+export declare const FONT_STACK_MAP: Readonly<Record<JawFontStack, string>>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/theme/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/theme/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM7D,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2B/D,CAAC;AAML,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2B9D,CAAC;AAML,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAKpE,CAAC;AAML,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAO9D,CAAC"}

package/dist/theme/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Theme resolution engine for @jaw.id/ui.
+ *
+ * Re-exports all public APIs from the theme module.
+ */
+export { hexToOklch, oklchToString, deriveAccentPalette } from './palette.js';
+export type { Oklch } from './palette.js';
+export { DEFAULT_LIGHT_PALETTE, DEFAULT_DARK_PALETTE, BORDER_RADIUS_MAP, FONT_STACK_MAP, } from './constants.js';
+export { resolveTheme } from './resolve-theme.js';
+export type { ResolvedTheme } from './resolve-theme.js';
+export { applyThemeToContainer } from './apply-theme.js';
+export { useColorScheme, getSystemColorScheme } from './use-color-scheme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC9E,YAAY,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,cAAc,GACf,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/theme/palette.d.ts

@@ -0,0 +1,27 @@
+/**
+ * OKLCH palette generation from hex colors.
+ *
+ * Conversion chain: Hex -> sRGB -> Linear RGB -> XYZ D65 -> OKLab -> OKLCH
+ */
+export interface Oklch {
+    readonly l: number;
+    readonly c: number;
+    readonly h: number;
+}
+/**
+ * Convert a hex color string to OKLCH color space.
+ */
+export declare function hexToOklch(hex: string): Oklch;
+/**
+ * Format an OKLCH value as a CSS `oklch(L C H)` string.
+ * L and C use 3 decimal places; H uses 1 decimal place.
+ */
+export declare function oklchToString(oklch: Oklch): string;
+/**
+ * Derive accent palette CSS variables from a single hex accent color.
+ *
+ * Sets `--jaw-color-primary` (buttons, key actions) and related tokens.
+ * In dark mode, slightly lightens the accent for better visibility on dark backgrounds.
+ */
+export declare function deriveAccentPalette(accentHex: string, effectiveMode: "light" | "dark", accentColorForeground?: string): Readonly<Record<string, string>>;
+//# sourceMappingURL=palette.d.ts.map

package/dist/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAiFD;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAQ7C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAKlD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,OAAO,GAAG,MAAM,EAC/B,qBAAqB,CAAC,EAAE,MAAM,GAC7B,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAyClC"}

package/dist/theme/resolve-theme.d.ts

@@ -0,0 +1,17 @@
+import { JawTheme } from '../../../core/src/index.ts';
+export interface ResolvedTheme {
+    readonly variables: Readonly<Record<string, string>>;
+    readonly colorScheme: "light" | "dark";
+}
+/**
+ * Resolve a `JawTheme` configuration into a flat set of CSS variables.
+ *
+ * Resolution order (later wins):
+ * 1. Default palette (light or dark)
+ * 2. Accent color overrides (derived from `accentColor`)
+ * 3. Explicit `accentColorForeground` override
+ * 4. Border radius & font stack presets
+ * 5. Raw `cssVariables` (Layer 2 user overrides)
+ */
+export declare function resolveTheme(theme: JawTheme, systemMode: "light" | "dark"): ResolvedTheme;
+//# sourceMappingURL=resolve-theme.d.ts.map

package/dist/theme/resolve-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme.d.ts","sourceRoot":"","sources":["../../src/theme/resolve-theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,QAAQ,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;CACxC;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE,OAAO,GAAG,MAAM,GAC3B,aAAa,CAwDf"}

package/dist/theme/use-color-scheme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Color scheme detection utilities.
+ *
+ * Provides both a React hook and a plain function for detecting
+ * the user's system color scheme preference.
+ */
+/**
+ * Get the current system color scheme (SSR-safe).
+ * Returns `'light'` when `window` is not available.
+ */
+export declare function getSystemColorScheme(): 'light' | 'dark';
+/**
+ * React hook that tracks the system color scheme preference.
+ *
+ * - SSR-safe: defaults to `'light'` during server rendering
+ * - Subscribes to `matchMedia` change events
+ * - Cleans up listener on unmount
+ */
+export declare function useColorScheme(): 'light' | 'dark';
+//# sourceMappingURL=use-color-scheme.d.ts.map

package/dist/theme/use-color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-scheme.d.ts","sourceRoot":"","sources":["../../src/theme/use-color-scheme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,GAAG,MAAM,CAGvD;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,OAAO,GAAG,MAAM,CAoBjD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jaw.id/ui",
   "description": "Pre-built React dialogs for JAW.id",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "sideEffects": [
     "**/*.css",
@@ -39,7 +39,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@jaw.id/core": "0.2.0",
+    "@jaw.id/core": "0.2.2",
     "@hookform/resolvers": "^5.2.2",
     "@justaname.id/sdk": "^0.2.204",
     "@radix-ui/react-accordion": "^1.2.12",