The 32×32 selectable day cell rendered inside the Date Picker calendar grid.
Superseded by Date Picker - Cell
Superseded by Date Picker - Cell. This cell and Month and Year Picker - Item folded into one component at node
5943:41825, where Kind tells the two apart and Role and Selection replace the old Type setting that mixed display role with selection state. Range values are now Range-Start, Range-Middle and Range-End. Kept as a record of the assessment that drove the consolidation.In Context
The cell is an instance inside Date Picker - Group (Type=Date). 42 cells are rendered across 6 rows × 7 columns. A sibling weekday-header row also instance-swaps this component, which is one of the reasons C1 flags the layer-naming convention.
Live Preview
1
Properties
Type
State
DS Health
Reusable
Warn
Used only inside Date Picker - Group (Date view). Because it is coupled to the 32×32 day grid it cannot be reused for month or year cells — which is exactly why a sibling
Month and Year Picker - Item exists at 100×32 doing nearly the same job.Self-contained
Partial
Text, bg, ring, and radius are all token-bound via
main/date-picker/day/*. However, Range (Middle) uses absolutely-positioned sibling rectangles (Range highlight start, Range highlight end) to spill the range strip into adjacent cells — this is row-level geometry leaking into a cell-level component.Consistent
Warn
Type mixes display roles (Default, Today, Prev/Next) with selection state (Selected, Range Middle) on one axis. Disabled exists only on Default and Today — Selected, Range (Middle), and Prev/Next have no Disabled variant. Value Range (Middle) uses parentheses/space in a variant name.Composable
Fail
Doesn't compose into a native picker — both SwiftUI
DatePicker(.graphical) and Material 3 DatePicker render their own cells. Even if kept as a visual reference, it duplicates Month and Year Picker - Item at a different size instead of being one Picker Cell with a kind axis.Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default | Yes | Yes | Type=Default, State=Enabled | Plain day number on white. No ring, no fill. #0A2757 label. |
| Today | Yes | Yes | Type=Today, State=Enabled | 1.5px blue ring, blue label. Native equivalent: todayDateBorderColor on Material 3. |
| Selected | Yes | Yes | Type=Selected, State=Enabled | Solid blue fill (#005CE5), white bold label. Only exists as Enabled — no Disabled form. |
| Range (Middle) | Yes | Yes | Type=Range (Middle), State=Enabled | Weakest-info bg (#E5F1FF), bold blue label. Ships with extraLeft/extraRight booleans that bleed the strip into adjacent cells. |
| Prev/Next | Yes | Yes | Type=Prev/Next, State=Enabled | Greyed label (#C2CFE5) for days spilling over from the adjacent month. Not a true Disabled — the day is still conceptually pickable, just visually dimmed. |
| Disabled (Default/Today) | Yes | Yes | Type={Default|Today}, State=Disabled | Label drops to #9BC5FD (Today) or #C2CFE5 (Default). Disabled missing on Selected, Range, and Prev/Next. |
| Pressed / Focused / Hover | No | No | — | Not defined on any Type. Native pickers supply these automatically. |
| Today + Selected | No | No | — | Not defined. Unclear which presentation wins when today is also the selected date. |
| Touch target | N/A | N/A | — | Below WCAG minimum 44×44. Native pickers enforce their own hit areas, but any custom wrapper would need to extend the tap area beyond the visual cell. |
1.0.0 — April 2026Major
Initial Assessment · node 12874:42180
Component assessed — 7 variants across
InitialType × State. 32×32 pill cell with token-bound colors, spacing, radius, and typography.
DocumentedSibling duplication with Month and Year Picker - Item — Same selectable-cell primitive at different sizes. Proposal: collapse both into
C1 OpenPicker Cell with kind: day | month | year.
OpenRange continuity modelled per-cell —
C1 OpenRange highlight start and Range highlight end are absolute-positioned siblings that spill beyond the cell. Should be row-level geometry.
OpenType mixes role and selection — Default/Today/Prev-Next are display roles; Selected/Range (Middle) are selection states. Split into role + selection.
OpenVariant value
C2 OpenRange (Middle) needs cleanup — Rename to range-middle for clean code-connect output.
OpenNo native primitive for a day cell — Native
C4 OpenDatePicker renders its own cells on both platforms. Reference-only unless a custom calendar grid is built.
OpenDisabled missing on Selected/Range/Prev-Next — State axis is not rectangular. Also missing Pressed, Hover, Focused, and Today + Selected.
Open
C5 OpenSelection emphasis drifts across sibling cells — Day cell Selected is a fill; month/year cell Selected is a ring. Align on one token-driven pattern per
C6 Openkind.
OpenCode Connect not registered — Blocked by the native-pickers-own-it direction and by the pending Picker Cell family unification.
Open
C7 Open