@duro-app/ui 0.34.7 → 0.34.9

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.9",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.7"
+    "@duro-app/tokens": "^0.34.9"
   },
   "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 {
@@ -28,6 +29,7 @@ export function Checkbox({
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
   const isChecked = isControlled ? controlledChecked : internalChecked
 
+  // Web: the real <input type=checkbox> drives toggling, a11y and form submit.
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (!isControlled) {
@@ -38,6 +40,54 @@ export function Checkbox({
     [isControlled, onChange],
   )
 
+  // Native: RSD only makes <button> pressable and has no <input type=checkbox>,
+  // so the whole row is a button and we synthesize the change payload that
+  // consumers read (e.target.checked).
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    const next = !isChecked
+    if (!isControlled) {
+      setInternalChecked(next)
+    }
+    onChange?.({
+      target: {checked: next, name, value},
+    } as unknown as React.ChangeEvent<HTMLInputElement>)
+  }, [disabled, isChecked, isControlled, onChange, name, value])
+
+  if (isNative) {
+    return (
+      <html.button
+        type="button"
+        onClick={handlePress}
+        disabled={disabled}
+        role="checkbox"
+        aria-checked={isChecked}
+        aria-label={!children ? ariaLabel : undefined}
+        style={[
+          styles.root,
+          styles.nativeFlex,
+          styles.nativeButton,
+          disabled && styles.rootDisabled,
+        ]}
+      >
+        <html.div
+          style={[
+            styles.box,
+            styles.nativeFlex,
+            isChecked ? styles.boxChecked : styles.boxUnchecked,
+          ]}
+        >
+          {/* CSS-border checkmark (rotated right+bottom borders) — no SVG, no
+              react-native-svg dep, so nothing is added to the web bundle. */}
+          <html.div
+            style={[styles.checkmark, isChecked ? styles.checkmarkVisible : styles.checkmarkHidden]}
+          />
+        </html.div>
+        {children && <html.span style={styles.labelText}>{children}</html.span>}
+      </html.button>
+    )
+  }
+
   return (
     <html.label style={[styles.root, disabled && styles.rootDisabled]}>
       <html.input

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

@@ -42,10 +42,39 @@ export const styles = css.create({
     backgroundColor: colors.accent,
     borderColor: colors.accent,
   },
-  check: {
-    width: 12,
-    height: 12,
-    color: colors.accentContrast,
+  // Native-only checkmark: a small box showing just its right + bottom border,
+  // rotated 45° into a tick. Pure CSS (RSD translates the transform string to
+  // an RN transform), so no SVG / react-native-svg weight reaches web.
+  checkmark: {
+    width: 5,
+    height: 9,
+    borderRightWidth: 2,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.accentContrast,
+    borderBottomWidth: 2,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.accentContrast,
+    transform: 'rotate(45deg)',
+    marginTop: -2,
+  },
+  checkmarkVisible: {
+    opacity: 1,
+  },
+  checkmarkHidden: {
+    opacity: 0,
+  },
+  // Native label text — RN <Text> doesn't inherit color/size from the button
+  // ancestor the way web inherits from <label>, so set it explicitly.
+  labelText: {
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+  },
+  // Strip the default button chrome RSD gives <button> on native (border/bg/
+  // padding mimic the browser default) so the row matches the web checkbox.
+  nativeButton: {
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    padding: 0,
   },
   input: {
     position: 'absolute',
@@ -54,4 +83,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,26 +47,35 @@ export function Switch({
   }, [disabled, checked, setChecked])
 
   return (
-    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
-      <html.input
-        ref={inputRef}
-        type="checkbox"
-        role="switch"
-        name={name}
-        value={value}
-        checked={controlledChecked !== undefined ? controlledChecked : undefined}
-        defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
-        disabled={disabled}
-        aria-checked={checked}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          onCheckedChange?.(e.target.checked)
-        }}
-        style={styles.input}
-      />
+    <html.label
+      style={[styles.root, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
+    >
+      {!isNative && (
+        // Web: hidden real checkbox carries a11y + form submission. RSD has no
+        // <input type=checkbox> on native, so it's omitted there and the
+        // button below carries the switch role instead.
+        <html.input
+          ref={inputRef}
+          type="checkbox"
+          role="switch"
+          name={name}
+          value={value}
+          checked={controlledChecked !== undefined ? controlledChecked : undefined}
+          defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
+          disabled={disabled}
+          aria-checked={checked}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onCheckedChange?.(e.target.checked)
+          }}
+          style={styles.input}
+        />
+      )}
       <html.button
         type="button"
         tabIndex={-1}
-        aria-hidden
+        aria-hidden={isNative ? undefined : true}
+        role={isNative ? 'switch' : undefined}
+        aria-checked={isNative ? checked : undefined}
         disabled={disabled}
         onClick={handleClick}
         style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}

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