@duro-app/ui 0.34.8 → 0.34.9

package/package.json

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

package/src/components/Checkbox/Checkbox.tsx

@@ -29,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) {
@@ -39,10 +40,56 @@ 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, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
-    >
+    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
       <html.input
         type="checkbox"
         name={name}
@@ -55,11 +102,7 @@ export function Checkbox({
         style={styles.input}
       />
       <html.span
-        style={[
-          styles.box,
-          isNative && styles.nativeFlex,
-          isChecked ? styles.boxChecked : styles.boxUnchecked,
-        ]}
+        style={[styles.box, isChecked ? styles.boxChecked : styles.boxUnchecked]}
         aria-hidden
       >
         <svg

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',

package/src/components/Switch/Switch.tsx

@@ -50,25 +50,32 @@ export function Switch({
     <html.label
       style={[styles.root, isNative && styles.nativeFlex, 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}
-      />
+      {!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]}