@duro-app/ui 0.34.6 → 0.34.7

package/dist/components/ThemeProvider/ThemeProvider.native.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type ThemeName = 'dark' | 'light' | 'high-contrast';
+interface ThemeProviderProps {
+    theme?: ThemeName;
+    children: ReactNode;
+}
+export declare function usePortalMount(): HTMLElement | null;
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeProvider.native.d.ts.map

package/dist/components/ThemeProvider/ThemeProvider.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.native.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.native.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,SAAS,EAAa,MAAM,OAAO,CAAA;AAM/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,eAAe,CAAA;AAE1D,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAwBD,wBAAgB,cAAc,IAAI,WAAW,GAAG,IAAI,CAEnD;AAED,wBAAgB,aAAa,CAAC,EAAC,KAAc,EAAE,QAAQ,EAAC,EAAE,kBAAkB,2CAI3E"}

package/dist/index.native.d.ts

@@ -28,4 +28,5 @@ export { Stack, type SpacingKey } from './components/Stack/Stack';
 export { Inline } from './components/Inline/Inline';
 export { Cluster } from './components/Cluster/Cluster';
 export { Grid } from './components/Grid/Grid';
+export { ThemeProvider, usePortalMount, type ThemeName, } from './components/ThemeProvider/ThemeProvider';
 //# sourceMappingURL=index.native.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAI3C,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,SAAS,GACf,MAAM,0CAA0C,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.34.6",
+  "version": "0.34.7",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.6"
+    "@duro-app/tokens": "^0.34.7"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ThemeProvider/ThemeProvider.native.tsx

@@ -0,0 +1,49 @@
+// Native (React Native / Expo) ThemeProvider — Metro resolves this over
+// ThemeProvider.tsx via the platform extension. The web version uses
+// `display:contents` + a fixed portal-mount, neither of which exists on RN, so
+// this applies the theme StyleX styles to a plain flex-column container and
+// drops the portal mount (native overlays don't portal to a fixed div).
+import {createContext, type ReactNode, useContext} from 'react'
+import {css, html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
+import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
+
+export type ThemeName = 'dark' | 'light' | 'high-contrast'
+
+interface ThemeProviderProps {
+  theme?: ThemeName
+  children: ReactNode
+}
+
+const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof lightShadows]>> = {
+  light: [lightTheme, lightShadows],
+  'high-contrast': [highContrastTheme, highContrastShadows],
+}
+
+const styles = css.create({
+  // No `display:contents` on RN. RSD uses web flex semantics on native, so
+  // declare flex + column explicitly; flex:1 lets a root provider fill.
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    color: colors.text,
+  },
+})
+
+type DivStyle = Parameters<typeof html.div>[0]['style']
+
+// Parity with the web export — there's no portal mount on native, so this is
+// always null. (The components that consume it aren't in the native barrel.)
+const PortalMountContext = createContext<HTMLElement | null>(null)
+
+export function usePortalMount(): HTMLElement | null {
+  return useContext(PortalMountContext)
+}
+
+export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
+  const overrides = themeMap[theme]
+  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
+  return <html.div style={themeStyles}>{children}</html.div>
+}

package/src/index.native.ts

@@ -34,3 +34,11 @@ export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
 export {Grid} from './components/Grid/Grid'
+
+// Theming — resolves to ThemeProvider.native.tsx on Metro (RN-safe variant:
+// no display:contents / portal mount; applies the theme to a flex container).
+export {
+  ThemeProvider,
+  usePortalMount,
+  type ThemeName,
+} from './components/ThemeProvider/ThemeProvider'