@duro-app/ui 0.34.7 → 0.34.8

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.7",
+  "version": "0.34.8",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.7"
+    "@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/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