@hzblj/kara-components 0.17.0 → 0.19.0

package/src/atoms/button/button.ios.tsx

@@ -1,15 +1,19 @@
-import {Button as SwiftUIButton} from '@expo/ui/swift-ui'
+import {Button as SwiftUIButton, Label as SwiftUILabel} from '@expo/ui/swift-ui'
 import {
   buttonStyle as buttonStyleModifier,
+  contentShape,
   controlSize as controlSizeModifier,
   disabled as disabledModifier,
   glassEffect as glassEffectModifier,
+  labelStyle,
+  shapes,
   tint as tintModifier,
 } from '@expo/ui/swift-ui/modifiers'
 import {useAccessibilityModifiers} from '@hzblj/kara-sx'
-import {type ColorToken, useAppTheme} from '@hzblj/kara-theme'
+import {type ColorToken, type Theme, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
+import {Icon} from '../icon'
 import {Text} from '../text'
 import {VStack} from '../v-stack'
 import type {ButtonComponent, ButtonProps, ButtonStyleName, ButtonVariant} from './button.types'
@@ -19,6 +23,7 @@ const STYLE_BY_VARIANT = {
   accent: 'borderedProminent',
   destructive: 'borderedProminent',
   glass: 'glass',
+  plain: 'borderless',
   secondary: 'bordered',
 } as const satisfies Record<ButtonVariant, ButtonStyleName>
 
@@ -26,14 +31,56 @@ const TINT_BY_VARIANT = {
   accent: 'fill.accent.primary',
   destructive: 'fill.destructive.primary',
   glass: undefined,
+  plain: undefined,
   secondary: undefined,
 } as const satisfies Record<ButtonVariant, ColorToken | undefined>
 
+/** Both, wherever the button sits: a toolbar or a menu would otherwise show the icon alone. */
+const TITLE_AND_ICON = [labelStyle('titleAndIcon')]
+
+/**
+ * `borderless` draws nothing around the label, so the label is the button: padding takes it to a 44pt tap target,
+ * and a rectangle content shape makes the whole of it (the padding, and the width `wide` gives it) take the tap,
+ * not only the glyphs.
+ */
+const TEXT_BUTTON_TARGET = {modifiers: [contentShape(shapes.rectangle())]}
+
+/**
+ * A prominent style (and tinted glass) is coloured by the tint, so a caller's own tint picks the label on it. A text
+ * style has nothing to fill, so there the tint is the label's own colour.
+ */
+const labelColor = ({
+  disabled,
+  filled,
+  textOnly,
+  theme,
+  tint,
+  tokens,
+}: {
+  disabled: boolean
+  filled: boolean
+  textOnly: boolean
+  theme: Theme
+  tint: ColorToken | undefined
+  tokens: {content: ColorToken}
+}): ColorToken => {
+  if (!tint || disabled) {
+    return tokens.content
+  }
+
+  if (filled) {
+    return contentOnTint(tint, theme)
+  }
+
+  return textOnly ? tint : tokens.content
+}
+
 export const Button: ButtonComponent = ({
   accessibilityHint,
   buttonStyle,
   controlSize = 'large',
   disabled = false,
+  icon,
   label,
   onPress,
   testID,
@@ -58,8 +105,10 @@ export const Button: ButtonComponent = ({
    */
   const glassTint = style === 'glass' && resolvedTint ? theme.color(resolvedTint) : undefined
   const filled = Boolean(glassTint) || style === 'borderedProminent' || style === 'glassProminent'
-  // A prominent style — and tinted glass — is coloured by the tint, so a caller's own tint picks the label on it.
-  const content = tint && filled && !disabled ? contentOnTint(tint, theme) : tokens.content
+  const textOnly = style === 'borderless' || style === 'plain'
+  // Only the `plain` variant's own text button is padded out; another variant restyled `plain` keeps its layout.
+  const textButton = variant === 'plain' && textOnly
+  const content = labelColor({disabled, filled, textOnly, theme, tint, tokens})
 
   const accessibilityModifiers = useAccessibilityModifiers({accessibilityHint})
 
@@ -85,12 +134,27 @@ export const Button: ButtonComponent = ({
     return list
   }, [accessibilityModifiers, controlSize, disabled, glassTint, resolvedTint, style, theme])
 
+  const text = (
+    <Text color={content} variant="body">
+      {label}
+    </Text>
+  )
+
   return (
     <SwiftUIButton modifiers={modifiers} onPress={onPress} testID={testID}>
-      <VStack align="center" py={glassTint ? 's16' : undefined} wide={wide}>
-        <Text color={content} variant="body">
-          {label}
-        </Text>
+      <VStack
+        align="center"
+        ios={textButton ? TEXT_BUTTON_TARGET : undefined}
+        py={glassTint ? 's16' : textButton ? 's12' : undefined}
+        wide={wide}
+      >
+        {icon ? (
+          <SwiftUILabel icon={<Icon color={content} name={icon} size="s20" />} modifiers={TITLE_AND_ICON}>
+            {text}
+          </SwiftUILabel>
+        ) : (
+          text
+        )}
       </VStack>
     </SwiftUIButton>
   )

package/src/atoms/button/button.types.ts

@@ -1,7 +1,9 @@
 import type {ColorToken} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
-export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary'
+import type {IconName} from '../icon'
+
+export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'plain' | 'secondary'
 
 /**
  * SwiftUI `ButtonStyle`. iOS only: Compose has no equivalent, so Android ignores it and keeps
@@ -22,19 +24,28 @@ export type ButtonStyleName =
  */
 export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small'
 
-/** A text button: SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
+/**
+ * A text button: SwiftUI `Button` on iOS, Material's filled button on Android (outlined for `glass`, a `TextButton`
+ * for `plain`).
+ */
 export type ButtonProps = {
   /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
   accessibilityHint?: string
   /**
    * Replaces the style the variant picks: `borderedProminent` for `accent` and `destructive`, `bordered` for
-   * `secondary`, `glass` for `glass`. iOS only. Android ignores it.
+   * `secondary`, `glass` for `glass`, `borderless` for `plain`. iOS only. Android ignores it.
    */
   buttonStyle?: ButtonStyleName
   /** SwiftUI's control size. `large` by default. iOS only. Android ignores it. */
   controlSize?: ButtonControlSize
   /** Draws the button in its disabled colours and stops it responding to presses. */
   disabled?: boolean
+  /**
+   * One of the app's icons, before the label and in the label's colour. iOS sets the two as a SwiftUI `Label`; Android
+   * puts the icon in the button's content row, as Material's buttons with an icon do. Screen readers read the label
+   * only.
+   */
+  icon?: IconName
   /** The button's text. */
   label: string
   /** Called when the button is pressed. */
@@ -44,10 +55,14 @@ export type ButtonProps = {
   /**
    * Overrides the variant's own tint. A prominent style takes it as the fill and picks a contrasting
    * label. `glass` has to reach the material through `glassEffect` instead, so tinting one costs it
-   * the stock `.glass` style (see the iOS implementation).
+   * the stock `.glass` style (see the iOS implementation). `plain` has no fill, so there it colours the label.
    */
   tint?: ColorToken
-  /** The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. */
+  /**
+   * The look. `accent` by default. Material has no glass, so on Android `glass` is an outlined button. `plain` is a
+   * text button in the accent, with no fill or border, for a lesser action beside a prominent one ("Skip", "Forgot
+   * password?"): SwiftUI's `borderless` style, Material's `TextButton`.
+   */
   variant?: ButtonVariant
   /** Stretches the button to the full width it is offered. On by default. */
   wide?: boolean

package/src/atoms/checkbox/checkbox.android.tsx

@@ -1,5 +1,5 @@
 import {Checkbox as ComposeCheckbox, Row, Text} from '@expo/ui/jetpack-compose'
-import {clickable, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers'
+import {clickable, fillMaxWidth, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -14,17 +14,20 @@ const NOOP = () => undefined
  * gets a handler, so a disabled or read-only box keeps the touch target an enabled one has, and lines up with it;
  * `enabled` is what stops the input.
  */
-export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, value}: CheckboxProps) => {
+export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, testID, value}: CheckboxProps) => {
   useHostGuard('Checkbox')
   const theme = useAppTheme()
   const rowModifiers = useMemo(
     () => (disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))]),
     [disabled, onValueChange, value]
   )
+  // On the box, not the row: the box is its own toggleable node inside the row, and the one a test reads.
+  const controlModifiers = useMemo(() => (testID ? [testIdModifier(testID)] : undefined), [testID])
   const control = (
     <ComposeCheckbox
       colors={{checkedColor: theme.color('fill.accent.primary'), checkmarkColor: theme.color('content.on.accent')}}
       enabled={!disabled}
+      modifiers={controlModifiers}
       onCheckedChange={onValueChange ?? NOOP}
       value={value}
     />

package/src/atoms/checkbox/checkbox.ios.tsx

@@ -6,7 +6,7 @@ import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {CheckboxComponent, CheckboxProps} from './checkbox.types'
 
-export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, value}: CheckboxProps) => {
+export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueChange, testID, value}: CheckboxProps) => {
   useHostGuard('Checkbox')
   const theme = useAppTheme()
 
@@ -20,5 +20,5 @@ export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueCha
     return list
   }, [disabled, theme])
 
-  return <Toggle isOn={value} label={label} modifiers={modifiers} onIsOnChange={onValueChange} />
+  return <Toggle isOn={value} label={label} modifiers={modifiers} onIsOnChange={onValueChange} testID={testID} />
 }

package/src/atoms/checkbox/checkbox.types.ts

@@ -8,6 +8,8 @@ export type CheckboxProps = {
   label?: string
   /** Called with the new value when the user toggles it. */
   onValueChange?: (value: boolean) => void
+  /** Test identifier, forwarded to the native control (on Android the box itself, not the labelled row). */
+  testID?: string
   /** Whether it is checked. Controlled: update it from `onValueChange`. */
   value: boolean
 }

package/src/atoms/color-picker/color-picker.android.tsx

@@ -9,8 +9,10 @@ import type {ColorPickerComponent, ColorPickerProps} from './color-picker.types'
 /**
  * The row SwiftUI's `ColorPicker` lays out on iOS, the label leading and the well trailing, around kara's own Compose
  * well: Compose ships no colour picker, so the sheet behind it draws the iOS picker's grid, spectrum and sliders.
+ * `disabled` dims the label and the well, which then does not open its sheet.
  */
 export const ColorPicker: ColorPickerComponent = ({
+  disabled = false,
   label,
   onValueChange,
   supportsOpacity = false,
@@ -21,9 +23,15 @@ export const ColorPicker: ColorPickerComponent = ({
 
   return (
     <HStack align="center" spacing="s12" testID={testID} wide>
-      {label ? <Text>{label}</Text> : null}
+      {label ? <Text color={disabled ? 'content.tertiary' : undefined}>{label}</Text> : null}
       <Spacer />
-      <ColorWell onValueChange={onValueChange} supportsOpacity={supportsOpacity} title={label} value={value} />
+      <ColorWell
+        enabled={!disabled}
+        onValueChange={onValueChange}
+        supportsOpacity={supportsOpacity}
+        title={label}
+        value={value}
+      />
     </HStack>
   )
 }

package/src/atoms/color-picker/color-picker.ios.tsx

@@ -1,9 +1,19 @@
 import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, labelsHidden, opacity as opacityModifier} from '@expo/ui/swift-ui/modifiers'
+import {opacity} from '@hzblj/kara-theme'
 
 import {useHostGuard} from '../../host-context'
+import {HStack} from '../h-stack'
+import {Spacer} from '../spacer'
+import {Text} from '../text'
 import type {ColorPickerComponent, ColorPickerProps} from './color-picker.types'
 
+// iOS 27 stops a disabled picker but draws its label and well at full strength: the label is then kara's own text,
+// dimmed, and the well takes the opacity.
+const DISABLED = [labelsHidden(), disabledModifier(true), opacityModifier(opacity.o40)]
+
 export const ColorPicker: ColorPickerComponent = ({
+  disabled = false,
   label,
   onValueChange,
   supportsOpacity = false,
@@ -12,13 +22,26 @@ export const ColorPicker: ColorPickerComponent = ({
 }: ColorPickerProps) => {
   useHostGuard('ColorPicker')
 
-  return (
+  const picker = (
     <SwiftUIColorPicker
       label={label}
+      modifiers={disabled ? DISABLED : undefined}
       onSelectionChange={onValueChange}
       selection={value}
       supportsOpacity={supportsOpacity}
       testID={testID}
     />
   )
+
+  if (!disabled) {
+    return picker
+  }
+
+  return (
+    <HStack align="center" spacing="s12" wide>
+      {label ? <Text color="content.tertiary">{label}</Text> : null}
+      <Spacer />
+      {picker}
+    </HStack>
+  )
 }

package/src/atoms/color-picker/color-picker.types.ts

@@ -6,6 +6,8 @@ import type {ReactNode} from 'react'
  * spectrum and RGB sliders.
  */
 export type ColorPickerProps = {
+  /** Stops the user picking a colour, and dims the label and the well. */
+  disabled?: boolean
   /** Text beside the colour well, and the Android sheet's title. */
   label?: string
   /** Called with the colour the user picks. */

package/src/atoms/date-picker/date-picker.android.tsx

@@ -1,7 +1,8 @@
 import {DateTimePicker} from '@expo/ui/community/datetime-picker'
-import {RNHostView} from '@expo/ui/jetpack-compose'
-import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback, useState} from 'react'
+import {DateTimePicker as ComposeDateTimePicker, Host, RNHostView} from '@expo/ui/jetpack-compose'
+import {alpha, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {opacity, useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useMemo, useState} from 'react'
 
 import {useInsideHost} from '../../host-context'
 import {Box} from '../box'
@@ -9,6 +10,8 @@ import {Pressable} from '../pressable'
 import {RnText} from '../rn-text'
 import type {DatePickerComponent, DatePickerMode, DatePickerProps} from './date-picker.types'
 
+const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
+
 const formatted = (value: Date, mode: DatePickerMode): string => {
   if (mode === 'time') {
     return value.toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'})
@@ -21,20 +24,68 @@ const formatted = (value: Date, mode: DatePickerMode): string => {
     : date
 }
 
+/** Material's calendar counts in UTC days: `value`'s local day goes in as that day's UTC midnight. */
+const utcDayOf = (value: Date): string =>
+  new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())).toISOString()
+
+/** The UTC day the calendar reports, back on `value`'s local time of day. */
+const localDayOf = (utcDay: Date, value: Date): Date => {
+  const next = new Date(value)
+  next.setFullYear(utcDay.getUTCFullYear(), utcDay.getUTCMonth(), utcDay.getUTCDate())
+
+  return next
+}
+
+/**
+ * Material's calendar in place, for `graphical`: the month and its days, without the title and headline its dialog
+ * shows, in the accent. It also reports its day when it first shows and whenever `value` hands it a new one, so only a
+ * day that differs from `value` goes out. It has no disabled state, so a disabled one is dimmed and offers only the
+ * selected day.
+ */
+const Calendar = ({disabled, max, min, onValueChange, testID, value}: DatePickerProps) => {
+  const theme = useAppTheme()
+
+  const onDateSelected = useCallback(
+    (date: Date) => {
+      const next = localDayOf(date, value)
+
+      if (!disabled && next.getTime() !== value.getTime()) {
+        onValueChange?.(next)
+      }
+    },
+    [disabled, onValueChange, value]
+  )
+
+  const modifiers = useMemo(
+    () => [...(disabled ? [alpha(opacity.o40)] : []), ...(testID ? [testIdModifier(testID)] : [])],
+    [disabled, testID]
+  )
+
+  return (
+    <ComposeDateTimePicker
+      color={theme.color('fill.accent.primary')}
+      displayedComponents="date"
+      initialDate={utcDayOf(value)}
+      modifiers={modifiers}
+      onDateSelected={onDateSelected}
+      selectableDates={disabled ? {end: value, start: value} : min || max ? {end: max, start: min} : undefined}
+      showHeadline={false}
+      showTitle={false}
+      showVariantToggle={false}
+      variant="picker"
+    />
+  )
+}
+
 /**
- * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog — mounted, it
- * opens — so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
+ * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog (mounted, it
+ * opens), so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
  * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
- * field (see `useInsideHost`).
+ * field (see `useInsideHost`). With `datePickerStyle="graphical"` and a date to pick, it is Material's calendar in
+ * place instead: a Compose view, in a host of its own the width of its container, or straight in the enclosing one.
  */
-export const DatePicker: DatePickerComponent = ({
-  max,
-  min,
-  mode = 'date',
-  onValueChange,
-  testID,
-  value,
-}: DatePickerProps) => {
+export const DatePicker: DatePickerComponent = (props: DatePickerProps) => {
+  const {datePickerStyle = 'compact', disabled = false, max, min, mode = 'date', onValueChange, testID, value} = props
   const theme = useAppTheme()
   const insideHost = useInsideHost()
   const [open, setOpen] = useState(false)
@@ -50,20 +101,39 @@ export const DatePicker: DatePickerComponent = ({
     [onValueChange]
   )
 
+  if (datePickerStyle === 'graphical' && mode !== 'time') {
+    const calendar = <Calendar {...props} disabled={disabled} />
+
+    return insideHost ? (
+      calendar
+    ) : (
+      <Host
+        colorScheme={theme.dark ? 'dark' : 'light'}
+        matchContents={MATCH_HEIGHT_ONLY}
+        seedColor={theme.materialSeed}
+      >
+        {calendar}
+      </Host>
+    )
+  }
+
   const field = (
     <>
       <Pressable
         alignSelf="flex-start"
         bg="fill.tertiary"
         borderRadius="medium"
+        disabled={disabled}
         onPress={show}
         px="s12"
         py="s8"
         testID={testID}
       >
-        <RnText variant="body">{formatted(value, mode)}</RnText>
+        <RnText color={disabled ? 'content.tertiary' : 'content.primary'} variant="body">
+          {formatted(value, mode)}
+        </RnText>
       </Pressable>
-      {open ? (
+      {open && !disabled ? (
         <DateTimePicker
           accentColor={theme.colorString('fill.accent.primary')}
           maximumDate={max}

package/src/atoms/date-picker/date-picker.ios.tsx

@@ -1,5 +1,10 @@
 import {Host, DatePicker as SwiftUIDatePicker} from '@expo/ui/swift-ui'
-import {datePickerStyle, labelsHidden, tint} from '@expo/ui/swift-ui/modifiers'
+import {
+  datePickerStyle as datePickerStyleModifier,
+  disabled as disabledModifier,
+  labelsHidden,
+  tint,
+} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -13,13 +18,15 @@ const COMPONENTS = {
 } as const satisfies Record<DatePickerMode, ('date' | 'hourAndMinute')[]>
 
 /**
- * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
- * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
- * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
- * `useInsideHost`).
+ * The system's date picker, in the accent. `compact` by default: the value in a pill, and a tap on it opens the
+ * calendar popover UIKit owns. `graphical` is that calendar in place, `wheel` the value on wheels. Its own host, sized
+ * to the picker on both axes (a host that took the width it was given would lay the pill out against the far edge of
+ * it, or past its container's), so it drops into a row the way a `Text` does. The label is the caller's, beside it.
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`).
  */
 export const DatePicker: DatePickerComponent = ({
+  datePickerStyle = 'compact',
+  disabled = false,
   max,
   min,
   mode = 'date',
@@ -31,8 +38,13 @@ export const DatePicker: DatePickerComponent = ({
   const insideHost = useInsideHost()
 
   const modifiers = useMemo(
-    () => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))],
-    [theme]
+    () => [
+      datePickerStyleModifier(datePickerStyle),
+      labelsHidden(),
+      tint(theme.color('fill.accent.primary')),
+      ...(disabled ? [disabledModifier(true)] : []),
+    ],
+    [datePickerStyle, disabled, theme]
   )
 
   const picker = (

package/src/atoms/date-picker/date-picker.types.ts

@@ -2,24 +2,48 @@ import type {ReactNode} from 'react'
 
 export type DatePickerMode = 'date' | 'datetime' | 'time'
 
+/** How SwiftUI shows the picker: a pill that opens the calendar, the calendar in place, or wheels. */
+export type DatePickerStyleName = 'compact' | 'graphical' | 'wheel'
+
 /**
- * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
- * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
- * its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
+ * A date or time picker: SwiftUI's `DatePicker` on iOS (a pill by default, a calendar or wheels with
+ * `datePickerStyle`), a field that opens Material's picker dialog on a tap on Android, or Material's calendar in place
+ * with `datePickerStyle="graphical"`. The React Native tier: it brings its own host and sizes itself to the value, so it
+ * sits in a row beside its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a
+ * native `Text` label.
  */
 export type DatePickerProps = {
+  /**
+   * SwiftUI's date picker style. `compact` by default: the value in a pill, which opens the calendar in a popover.
+   * `graphical` is the calendar in place, a month at a time, with the time under it in `datetime` mode: what a screen
+   * built around picking a day wants. `wheel` puts the value on wheels. Android shows Material's calendar in place for
+   * `graphical` in `date` and `datetime` modes (without its title and headline); otherwise it keeps its field and
+   * dialog, since Material has no wheel.
+   */
+  datePickerStyle?: DatePickerStyleName
+  /**
+   * Stops the user changing the date, and dims the picker. Material's calendar has no disabled state of its own, so a
+   * `graphical` picker on Android is dimmed and offers only the selected day.
+   */
+  disabled?: boolean
   /** The latest date that can be picked. Android ignores it in `time` mode. */
   max?: Date
   /** The earliest date that can be picked. Android ignores it in `time` mode. */
   min?: Date
   /**
-   * What it picks. `date` by default. Android has no combined dialog, so there `datetime` picks the date and keeps
-   * `value`'s time of day.
+   * What it picks. `date` by default. Android has no combined dialog or calendar, so there `datetime` picks the date
+   * and keeps `value`'s time of day.
    */
   mode?: DatePickerMode
-  /** Called with the new date: on iOS as it changes, on Android when the dialog is confirmed. */
+  /**
+   * Called with the new date: on iOS as it changes, on Android when the dialog is confirmed or a day in the calendar
+   * is tapped.
+   */
   onValueChange?: (date: Date) => void
-  /** Test identifier, on the native picker on iOS and on the tappable field on Android. */
+  /**
+   * Test identifier, on the native picker on iOS and on Android's calendar, and on the tappable field elsewhere on
+   * Android.
+   */
   testID?: string
   /** The selected date. Controlled: update it from `onValueChange`. */
   value: Date

package/src/atoms/divider/divider.android.tsx

@@ -1,12 +1,23 @@
-import {HorizontalDivider} from '@expo/ui/jetpack-compose'
+import {HorizontalDivider, VerticalDivider} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
 import type {DividerComponent, DividerProps} from './divider.types'
 
-export const Divider: DividerComponent = ({color = 'border.tertiary'}: DividerProps) => {
+/**
+ * Compose's dividers. Unlike SwiftUI's, a Compose divider does not turn with its stack, so `axis` picks the one:
+ * `VerticalDivider` fills the height of the `Row` around it.
+ */
+export const Divider: DividerComponent = ({axis = 'horizontal', color = 'border.tertiary', testID}: DividerProps) => {
   useHostGuard('Divider')
   const theme = useAppTheme()
+  const modifiers = useMemo(() => (testID ? [testIdModifier(testID)] : undefined), [testID])
 
-  return <HorizontalDivider color={theme.color(color)} />
+  return axis === 'vertical' ? (
+    <VerticalDivider color={theme.color(color)} modifiers={modifiers} />
+  ) : (
+    <HorizontalDivider color={theme.color(color)} modifiers={modifiers} />
+  )
 }

package/src/atoms/divider/divider.ios.tsx

@@ -6,6 +6,10 @@ import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {DividerComponent, DividerProps} from './divider.types'
 
+/**
+ * SwiftUI's divider, which turns with its stack: vertical in an `HStack`, horizontal anywhere else. So `axis`, which
+ * Android needs to pick its divider, has nothing to do here.
+ */
 export const Divider: DividerComponent = ({color = 'border.tertiary', testID}: DividerProps) => {
   useHostGuard('Divider')
   const theme = useAppTheme()

package/src/atoms/divider/divider.types.ts

@@ -1,11 +1,23 @@
 import type {ColorToken} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
-/** A horizontal hairline: SwiftUI `Divider` / Compose `HorizontalDivider`. */
+/** Which way the line runs. */
+export type DividerAxis = 'horizontal' | 'vertical'
+
+/**
+ * A hairline between views: SwiftUI `Divider` / Compose `HorizontalDivider`, or `VerticalDivider` with
+ * `axis="vertical"`.
+ */
 export type DividerProps = {
+  /**
+   * Which way the line runs. `horizontal` by default: across a `VStack`. `vertical` stands it up between the children
+   * of an `HStack`, as tall as the stack, so give the stack a height (`h`). iOS ignores it: SwiftUI's divider turns by
+   * itself, vertical in an `HStack` and horizontal anywhere else. Set it anyway, so Android draws the same.
+   */
+  axis?: DividerAxis
   /** The line's colour. `border.tertiary` by default. */
   color?: ColorToken
-  /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
+  /** Test identifier, forwarded to the native view. */
   testID?: string
 }