@duro-app/ui 0.34.6 → 0.34.8

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/dist/platform.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Platform flag resolved by the bundler's platform extensions: web bundlers
+ * (Vite/Rollup) read THIS file (`isNative = false`); Metro reads
+ * `platform.native.ts` (`isNative = true`) on React Native / Expo.
+ *
+ * It lets shared components layer a native-only style override without
+ * importing `react-native` on web (the DS web build has no react-native).
+ * Typed `boolean` (not the `false` literal) so `isNative && styles.x` stays a
+ * `false | Style` union in style arrays rather than narrowing to `false`.
+ */
+export declare const isNative: boolean;
+//# sourceMappingURL=platform.d.ts.map

package/dist/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../src/platform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAe,CAAA"}

package/dist/platform.native.d.ts

@@ -0,0 +1,2 @@
+export declare const isNative: boolean;
+//# sourceMappingURL=platform.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"platform.native.d.ts","sourceRoot":"","sources":["../src/platform.native.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,EAAE,OAAc,CAAA"}

package/package.json

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

package/src/components/Badge/Badge.tsx

@@ -1,5 +1,6 @@
 import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
@@ -17,5 +18,9 @@ const sizeMap = {
 } as const
 
 export function Badge({variant = 'default', size = 'md', children}: BadgeProps) {
-  return <html.span style={[styles.base, sizeMap[size], styles[variant]]}>{children}</html.span>
+  return (
+    <html.span style={[styles.base, isNative && styles.nativeFlex, sizeMap[size], styles[variant]]}>
+      {children}
+    </html.span>
+  )
 }

package/src/components/Badge/styles.css.ts

@@ -48,4 +48,9 @@ export const styles = css.create({
     backgroundColor: colors.infoBg,
     color: colors.infoText,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native via `isNative` so the flex container applies; web keeps inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'inverseSecondary' | 'link' | 'danger'
@@ -36,6 +37,7 @@ export function Button({
       onClick={onClick}
       style={[
         styles.base,
+        isNative && styles.nativeFlex,
         sizeMap[size],
         styles[variant],
         fullWidth && styles.fullWidth,

package/src/components/Button/styles.css.ts

@@ -116,4 +116,9 @@ export const styles = css.create({
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native via `isNative` so the flex container applies; web keeps inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 import {type ReactNode, useState, useCallback} from 'react'
 import {html} from 'react-strict-dom'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 interface CheckboxProps {
@@ -39,7 +40,9 @@ export function Checkbox({
   )
 
   return (
-    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+    <html.label
+      style={[styles.root, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
+    >
       <html.input
         type="checkbox"
         name={name}
@@ -52,7 +55,11 @@ export function Checkbox({
         style={styles.input}
       />
       <html.span
-        style={[styles.box, isChecked ? styles.boxChecked : styles.boxUnchecked]}
+        style={[
+          styles.box,
+          isNative && styles.nativeFlex,
+          isChecked ? styles.boxChecked : styles.boxUnchecked,
+        ]}
         aria-hidden
       >
         <svg

package/src/components/Checkbox/styles.css.ts

@@ -54,4 +54,9 @@ export const styles = css.create({
     opacity: 0,
     overflow: 'hidden',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native via `isNative` (on both .root and .box); web keeps inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/InputGroup/InputGroup.tsx

@@ -1,6 +1,7 @@
 import type {ReactNode} from 'react'
 import {useMemo} from 'react'
 import {css, html} from 'react-strict-dom'
+import {isNative} from '../../platform'
 import {InputGroupContext} from './InputGroupContext'
 import {styles} from './styles.css'
 
@@ -37,6 +38,7 @@ function Addon({position = 'end', onClick, disabled, minWidth, children}: AddonP
   const positionStyle = position === 'start' ? styles.addonStart : styles.addonEnd
   const style = [
     styles.addon,
+    isNative && styles.nativeFlex,
     positionStyle,
     onClick && !disabled && styles.addonClickable,
     disabled && styles.addonDisabled,

package/src/components/InputGroup/styles.css.ts

@@ -58,4 +58,9 @@ export const styles = css.create({
     opacity: 0.4,
     cursor: 'not-allowed',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native via `isNative` so the flex container applies; web keeps inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Switch/Switch.tsx

@@ -1,5 +1,6 @@
 import {type ReactNode, useCallback, useRef} from 'react'
 import {html} from 'react-strict-dom'
+import {isNative} from '../../platform'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
 
@@ -46,7 +47,9 @@ export function Switch({
   }, [disabled, checked, setChecked])
 
   return (
-    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+    <html.label
+      style={[styles.root, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
+    >
       <html.input
         ref={inputRef}
         type="checkbox"

package/src/components/Switch/styles.css.ts

@@ -68,4 +68,9 @@ export const styles = css.create({
     opacity: 0,
     overflow: 'hidden',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native via `isNative` so the flex container applies; web keeps inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

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'

package/src/platform.native.ts

@@ -0,0 +1,3 @@
+// Native (React Native / Expo) counterpart of platform.ts — Metro resolves
+// this over platform.ts via the platform extension. See platform.ts.
+export const isNative: boolean = true

package/src/platform.ts

@@ -0,0 +1,11 @@
+/**
+ * Platform flag resolved by the bundler's platform extensions: web bundlers
+ * (Vite/Rollup) read THIS file (`isNative = false`); Metro reads
+ * `platform.native.ts` (`isNative = true`) on React Native / Expo.
+ *
+ * It lets shared components layer a native-only style override without
+ * importing `react-native` on web (the DS web build has no react-native).
+ * Typed `boolean` (not the `false` literal) so `isNative && styles.x` stays a
+ * `false | Style` union in style arrays rather than narrowing to `false`.
+ */
+export const isNative: boolean = false