@hzblj/kara-components 0.17.0 → 0.18.0

package/src/atoms/badge/badge.ios.tsx

@@ -5,13 +5,13 @@ import {Text} from '../text'
 import type {BadgeComponent, BadgeProps} from './badge.types'
 import {BADGE_TOKENS} from './badge-tokens'
 
-export const Badge: BadgeComponent = ({label, tone = 'neutral'}: BadgeProps) => {
+export const Badge: BadgeComponent = ({label, testID, tone = 'neutral'}: BadgeProps) => {
   useHostGuard('Badge')
   const tokens = BADGE_TOKENS[tone]
   const modifiers = useSxModifiers({bg: tokens.fill, borderRadius: 'full', px: 's8', py: 's2'})
 
   return (
-    <HStack modifiers={modifiers}>
+    <HStack modifiers={modifiers} testID={testID}>
       <Text color={tokens.content} variant="labelMedium">
         {label}
       </Text>

package/src/atoms/badge/badge.types.ts

@@ -6,6 +6,8 @@ export type BadgeTone = 'accent' | 'destructive' | 'neutral' | 'success'
 export type BadgeProps = {
   /** The text inside. */
   label: string
+  /** Test identifier, forwarded to the native view. */
+  testID?: string
   /** The fill and text colours. `neutral` by default. */
   tone?: BadgeTone
 }

package/src/atoms/button/button-tokens.ts

@@ -2,16 +2,18 @@ import type {ColorToken, ShadowName, Theme} from '@hzblj/kara-theme'
 
 import type {ButtonVariant} from './button.types'
 
+/** `fill` and `shadow` are unset for `plain`: a text button has no container to fill or lift. */
 type ButtonTokens = {
   content: ColorToken
-  fill: ColorToken
-  shadow: ShadowName
+  fill: ColorToken | undefined
+  shadow: ShadowName | undefined
 }
 
 const TOKENS = {
   accent: {content: 'content.on.accent', fill: 'fill.accent.primary', shadow: 'btn.accent'},
   destructive: {content: 'content.on.destructive', fill: 'fill.destructive.primary', shadow: 'btn.destructive'},
   glass: {content: 'content.primary', fill: 'btn.bg.glass.base', shadow: 'btn.glass'},
+  plain: {content: 'content.accent', fill: undefined, shadow: undefined},
   secondary: {content: 'content.primary', fill: 'btn.bg.secondary.base', shadow: 'btn.secondary'},
 } as const satisfies Record<ButtonVariant, ButtonTokens>
 
@@ -26,8 +28,9 @@ export const buttonTokens = (variant: ButtonVariant, disabled: boolean, theme: T
     accent: 'fill.accent.disabled',
     destructive: 'fill.destructive.disabled',
     glass: 'btn.bg.glass.disabled',
+    plain: undefined,
     secondary: 'btn.bg.secondary.disabled',
-  } as const satisfies Record<ButtonVariant, ColorToken>
+  } as const satisfies Record<ButtonVariant, ColorToken | undefined>
 
   void theme
 

package/src/atoms/button/button.android.tsx

@@ -1,23 +1,43 @@
-import {Button as ComposeButton, Text as ComposeText, OutlinedButton} from '@expo/ui/jetpack-compose'
-import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {
+  Button as ComposeButton,
+  Spacer as ComposeSpacer,
+  Text as ComposeText,
+  OutlinedButton,
+  TextButton,
+} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier, width as widthModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
-import {useAppTheme} from '@hzblj/kara-theme'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
+import {Icon} from '../icon'
 import type {ButtonComponent, ButtonProps} from './button.types'
 import {buttonTokens, contentOnTint} from './button-tokens'
 
+/** Material's `ButtonDefaults.IconSpacing`: the gap between a button's icon and its label. */
+const ICON_GAP = [widthModifier(spacing.s8)]
+
+/**
+ * Material's padding for a button with a leading icon (`ButtonWithIconContentPadding`,
+ * `TextButtonWithIconContentPadding`): the icon side a step tighter than the label's. Top and bottom keep the defaults.
+ */
+const WITH_ICON_PADDING = {end: spacing.s24, start: spacing.s16}
+const TEXT_WITH_ICON_PADDING = {end: spacing.s16, start: spacing.s12}
+
 /**
  * Material's filled button, in its own stadium shape. No `borderRadius` or `shadow` from the tokens: those shape the
  * SwiftUI button's glossy ring, and laid over a Compose button they clip and outline a rounded rectangle around the
- * pill Material draws. The label is a Compose `Text` — `@expo/ui`'s button takes composable content, not a string.
+ * pill Material draws. The label is a Compose `Text` — `@expo/ui`'s button takes composable content, not a string —
+ * after the `icon`, when there is one, in the same row.
  *
- * Material has no glass, so `glass` is its outlined button — and a `tint` makes any variant a filled button in that
- * colour, as a prominent style does on iOS. `buttonStyle` and `controlSize` are SwiftUI's alone.
+ * Material has no glass, so `glass` is its outlined button — and a `tint` makes any variant but `plain` a filled
+ * button in that colour, as a prominent style does on iOS. `plain` is Material's `TextButton`, and a `tint` colours its
+ * label. `buttonStyle` and `controlSize` are SwiftUI's alone.
  */
 export const Button: ButtonComponent = ({
   accessibilityHint,
   disabled = false,
+  icon,
   label,
   onPress,
   testID,
@@ -35,27 +55,31 @@ export const Button: ButtonComponent = ({
     [accessibilityModifiers, sxModifiers, testID]
   )
   const style = theme.typography.body
+  const text = variant === 'plain'
   const outlined = variant === 'glass' && !tint
   const fill = tint && !disabled ? tint : tokens.fill
-  const content = tint && !disabled ? contentOnTint(tint, theme) : tokens.content
-  const MaterialButton = outlined ? OutlinedButton : ComposeButton
+  const content = !tint || disabled ? tokens.content : text ? tint : contentOnTint(tint, theme)
+  const MaterialButton = text ? TextButton : outlined ? OutlinedButton : ComposeButton
 
   return (
     <MaterialButton
       colors={
-        outlined
-          ? {contentColor: theme.color(content), disabledContentColor: theme.color(content)}
-          : {
+        fill && !text && !outlined
+          ? {
               containerColor: theme.color(fill),
               contentColor: theme.color(content),
               disabledContainerColor: theme.color(fill),
               disabledContentColor: theme.color(content),
             }
+          : {contentColor: theme.color(content), disabledContentColor: theme.color(content)}
       }
+      contentPadding={icon ? (text ? TEXT_WITH_ICON_PADDING : WITH_ICON_PADDING) : undefined}
       enabled={!disabled}
       modifiers={modifiers}
       onClick={onPress}
     >
+      {icon ? <Icon color={content} name={icon} size="s20" /> : null}
+      {icon ? <ComposeSpacer modifiers={ICON_GAP} /> : null}
       <ComposeText
         color={theme.colorString(content)}
         style={{

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}