@duro-app/ui 0.34.8 → 0.34.10

package/package.json

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

package/src/components/Button/Button.tsx

@@ -13,6 +13,8 @@ interface ButtonProps {
   disabled?: boolean
   type?: 'button' | 'submit'
   onClick?: () => void
+  /** Accessible name override — e.g. for buttons whose visible text isn't unique. */
+  'aria-label'?: string
   children: ReactNode
 }
 
@@ -28,6 +30,7 @@ export function Button({
   disabled = false,
   type = 'button',
   onClick,
+  'aria-label': ariaLabel,
   children,
 }: ButtonProps) {
   return (
@@ -35,6 +38,7 @@ export function Button({
       type={type}
       disabled={disabled}
       onClick={onClick}
+      aria-label={ariaLabel}
       style={[
         styles.base,
         isNative && styles.nativeFlex,

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/Combobox/useComboboxRoot.ts

@@ -24,7 +24,13 @@ export function useComboboxRoot({
     defaultValue ?? null,
     onValueChange,
   )
-  const [internalInputValue, setInternalInputValue] = useState('')
+  // Seed the visible text from the initially-selected value's label, so a
+  // defaultValue/value shows its label on mount — and so the reconcile effect
+  // below doesn't see "value set but input empty" and wipe the selection.
+  const [internalInputValue, setInternalInputValue] = useState<string>(() => {
+    const initial = controlledValue ?? defaultValue
+    return initial ? (initialLabels?.[initial] ?? '') : ''
+  })
   const inputValue = controlledInputValue !== undefined ? controlledInputValue : internalInputValue
   const setInputValue = useCallback(
     (v: string) => {
@@ -201,7 +207,11 @@ export function useComboboxRoot({
   //   - inputValue equals the selected label: nothing to do.
   useEffect(() => {
     if (open) return
-    if (value === null) return
+    // Treat an empty value (null OR '') as "no selection" — nothing to
+    // reconcile. Without this, a controlled value="" (e.g. a table column
+    // filter) fires setValue(null) every render → inline onValueChange →
+    // parent state change → re-render → infinite "Maximum update depth" loop.
+    if (!value) return
     if (inputValue === '') {
       setValue(null)
       return

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]}

package/src/components/Table/Table.stories.tsx

@@ -1128,7 +1128,9 @@ export const SlotPropsOnRoot: Story = {
   play: async ({canvas}) => {
     await expect(canvas.getByRole('table')).toBeInTheDocument()
     // Note no Table.HeaderCell label — children are plain strings, so the
-    // label fallback uses extractText. Verify the rendered text appears.
-    await expect(canvas.getByText('Name')).toBeInTheDocument()
+    // label fallback uses extractText. "Name" appears both in the header and
+    // the SortChip option list, so assert at least one rendered (not getByText,
+    // which throws on multiple matches).
+    await expect(canvas.getAllByText('Name').length).toBeGreaterThan(0)
   },
 }