@multiplatform.one/frappe-ui 6.4.2 → 6.6.0

package/src/FrappeForm.stories.tsx

@@ -2,6 +2,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { YStack } from "tamagui";
 import { Data } from "./fields/Data";
+import { RadioGroupField } from "./fields/RadioGroup";
 import { Select } from "./fields/Select";
 import { Check } from "./fields/Check";
 import { Date } from "./fields/Date";
@@ -51,7 +52,8 @@ function contactMeta() {
         fieldname: "status",
         fieldtype: "Select",
         label: "Status",
-        options: "Active\nLead\nInactive",
+        // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
+        options: "Active\nLead\nProspect\nCustomer\nInactive\nArchived",
       },
     ],
     permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
@@ -72,7 +74,8 @@ function salesOrderMeta() {
         fieldname: "status",
         fieldtype: "Select",
         label: "Status",
-        options: "Draft\nSubmitted\nCompleted\nCancelled",
+        // >5 options: shorter single-select lists trip `select-too-few-options` (DG-CTRL-01).
+        options: "Draft\nSubmitted\nIn Progress\nOn Hold\nCompleted\nCancelled",
       },
       { fieldname: "is_paid", fieldtype: "Check", label: "Payment Received" },
       { fieldname: "notes", fieldtype: "Small Text", label: "Notes" },
@@ -172,7 +175,7 @@ export const CreateForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Active", "Lead", "Inactive"]}
+            options={["Active", "Lead", "Prospect", "Customer", "Inactive", "Archived"]}
           />
         </YStack>
       )}
@@ -227,7 +230,7 @@ export const EditForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Active", "Lead", "Inactive"]}
+            options={["Active", "Lead", "Prospect", "Customer", "Inactive", "Archived"]}
           />
         </YStack>
       )}
@@ -359,7 +362,7 @@ export const ComplexForm = () => (
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Draft", "Submitted", "Completed", "Cancelled"]}
+            options={["Draft", "Submitted", "In Progress", "On Hold", "Completed", "Cancelled"]}
           />
           <Check
             label="Payment Received"
@@ -438,18 +441,29 @@ export const Live = (args: { name?: string }) => (
             error={errors.description}
             disabled={disabled}
           />
-          <Select
+          {/* The real ToDo doctype pins 3-option enums; DG-CTRL-01 routes short
+              single choices to RadioGroup, so the live arm composes the honest
+              control instead of tripping `select-too-few-options` at rest. */}
+          <RadioGroupField
             label="Status"
             value={doc.status || ""}
             onChange={(v) => setValue("status", v)}
-            options={["Open", "Closed", "Cancelled"]}
+            options={[
+              { label: "Open", value: "Open" },
+              { label: "Closed", value: "Closed" },
+              { label: "Cancelled", value: "Cancelled" },
+            ]}
             disabled={disabled}
           />
-          <Select
+          <RadioGroupField
             label="Priority"
             value={doc.priority || ""}
             onChange={(v) => setValue("priority", v)}
-            options={["Low", "Medium", "High"]}
+            options={[
+              { label: "Low", value: "Low" },
+              { label: "Medium", value: "Medium" },
+              { label: "High", value: "High" },
+            ]}
             disabled={disabled}
           />
         </YStack>

package/src/FrappeGantt.stories.tsx

@@ -31,7 +31,12 @@ interface ProjectTask {
 }
 
 const today = new Date();
-const formatDate = (date: Date) => date.toISOString().split("T")[0];
+// LOCAL parts, matching FrappeGantt's own `datePart`: a `toISOString()` date is
+// UTC, so east of Greenwich the fixture names yesterday for the hour after
+// local midnight and every bar sits a day off the view's "today" marker.
+const pad2 = (n: number) => String(n).padStart(2, "0");
+const formatDate = (date: Date) =>
+  `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
 const dayOffset = (days: number) => formatDate(new Date(today.getTime() + days * 86400000));
 
 // Fixture doc colors come from the sanctioned categorical palette (LC-27

package/src/FrappeGantt.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import { parseCalendarDate, useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
@@ -56,16 +56,6 @@ export interface FrappeGanttProps<TDoc extends { name: string; doctype: string }
   initialDate?: Date;
 }
 
-/**
- * Parse a date string from Frappe (YYYY-MM-DD or YYYY-MM-DD HH:MM:SS).
- */
-function parseDate(dateStr: string | Date | undefined): Date | null {
-  if (!dateStr) return null;
-  if (dateStr instanceof Date) return dateStr;
-  const parsed = new Date(dateStr.replace(" ", "T"));
-  return isNaN(parsed.getTime()) ? null : parsed;
-}
-
 /**
  * Format a moved date back into the same shape the document field used:
  * Date stays Date, "YYYY-MM-DD HH:MM:SS" keeps its time part, plain
@@ -195,9 +185,9 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
   const tasks = useMemo((): GanttTask[] => {
     return docs
       .map((doc) => {
-        const start = parseDate((doc as any)[startField]);
+        const start = parseCalendarDate((doc as any)[startField]);
         if (!start) return null;
-        const end = parseDate((doc as any)[endField]) ?? start;
+        const end = parseCalendarDate((doc as any)[endField]) ?? start;
         const title = String((doc as any)[titleField] || doc.name);
         const color = colorField
           ? resolveFrappeEventColor((doc as any)[colorField], chartPalette)

package/src/FrappeKanban.tsx

@@ -4,10 +4,11 @@ import {
   type KanbanColumn as GenericKanbanColumn,
   type KanbanProps,
 } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { PlusIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack } from "tamagui";
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
@@ -48,6 +49,8 @@ export interface FrappeKanbanProps<TDoc extends { name: string; doctype: string
   renderCard?: (item: Partial<TDoc>) => React.ReactNode;
   onCardClick?: (card: Partial<TDoc>) => void;
   onCardMove?: (cardName: string, fromStatus: string, toStatus: string) => void | Promise<void>;
+  /** Disable card dragging (the board stays a read-only visualization). */
+  readOnly?: boolean;
   enableCardCreation?: boolean;
   onCreateCard?: (status: string) => void;
   loading?: React.ReactNode;
@@ -75,10 +78,12 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
   renderCard,
   onCardClick,
   onCardMove,
+  readOnly = false,
   enableCardCreation = false,
   onCreateCard,
   loading,
   error,
+  renderColumnActions,
   ...kanbanProps
 }: FrappeKanbanProps<TDoc>) {
   const config = useFrappeConfig();
@@ -234,6 +239,37 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
     [onCardClick],
   );
 
+  // Desk parity: the quick-add "+" is anchored IN its column header (never a
+  // detached button strip) and names its column in the accessible label. The
+  // synthetic "Unassigned" bucket has no field value to prefill, so it gets
+  // no add affordance. Consumer-provided column actions compose after it.
+  const effectiveRenderColumnActions = useMemo(() => {
+    const canQuickAdd = enableCardCreation && Boolean(onCreateCard);
+    if (!canQuickAdd && !renderColumnActions) return undefined;
+    return (column: GenericKanbanColumn<Partial<TDoc>>) => (
+      <XStack alignItems="center" gap="$1">
+        {canQuickAdd && column.id !== "__unassigned__" && (
+          <Button
+            size="$2"
+            circular
+            chromeless
+            icon={<PlusIcon size={14} />}
+            aria-label={t("Add card to {{column}}", { column: column.title })}
+            onPress={() => {
+              setActionError(null);
+              try {
+                onCreateCard?.(column.id);
+              } catch (err) {
+                setActionError(err instanceof Error ? err : new Error(String(err)));
+              }
+            }}
+          />
+        )}
+        {renderColumnActions?.(column)}
+      </XStack>
+    );
+  }, [enableCardCreation, onCreateCard, renderColumnActions, t]);
+
   // Custom loading slot only — default path keeps empty columns visible so
   // fixture-less demos still render the board (Kanban owns isLoading chrome).
   if (isLoading && cards.length === 0 && loading) {
@@ -271,33 +307,15 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
           </Text>
         </YStack>
       )}
-      {enableCardCreation && onCreateCard && (
-        <XStack {...knobProps.gap} flexWrap="wrap" paddingHorizontal="$2">
-          {columns.map((col) => (
-            <Button
-              key={col.value}
-              size="$2"
-              chromeless
-              icon={PlusIcon}
-              onPress={() => {
-                setActionError(null);
-                try {
-                  onCreateCard(col.value);
-                } catch (err) {
-                  setActionError(err instanceof Error ? err : new Error(String(err)));
-                }
-              }}
-              aria-label={t("Add card to {{column}}", { column: col.title })}
-            />
-          ))}
-        </XStack>
-      )}
       <Kanban
         {...knobProps.gap}
         columns={genericColumns}
         renderCard={effectiveRenderCard}
-        onCardMove={handleCardMove}
+        // The generic Kanban enables drag when a move handler exists —
+        // readOnly withholds it so the board stays a visualization.
+        onCardMove={readOnly ? undefined : handleCardMove}
         onCardSelect={handleCardSelect}
+        renderColumnActions={effectiveRenderColumnActions}
         isLoading={isLoading}
         error={boardError}
         getItemKey={(item, index) => item.name ?? index}

package/src/FrappeLikedBy.tsx

@@ -13,11 +13,12 @@
  */
 import { AsyncBoundary, Avatar } from "@multiplatform.one/components";
 import { HttpClient, useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
+import { Button } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
+import { Text, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { useFrappeUsers } from "./frappeUsers";

package/src/FrappeList.tsx

@@ -94,8 +94,14 @@ export function FrappeList<TDoc extends { name: string; doctype: string }>({
   return (
     <YStack {...knobProps.gap} flex={1}>
       <FrappeReconnectIndicator config={connectionConfig} />
+      {/*
+        No chrome fragment rides this passthrough (LC-55 FRAGMENT-LICENSE):
+        List forwards its stack props straight to AsyncBoundary, a state-switch
+        wrapper that declares no surface class and paints no fill, border, or
+        clip. Rows and the error/empty panels own their own chrome; the error
+        branch above renders a bare AsyncBoundary, so both paths now match.
+      */}
       <List
-        {...knobProps.borderRadius}
         items={items}
         isLoading={isLoading}
         renderItem={renderItem}

package/src/FrappeListView.tsx

@@ -4,19 +4,9 @@ import { ArrowsClockwiseIcon, PlusIcon } from "@phosphor-icons/react";
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { SearchInput, Spinner } from "@multiplatform.one/forms";
-import {
-  Button,
-  Image,
-  Text,
-  View,
-  XStack,
-  YStack,
-  isWeb,
-  useTheme,
-  type YStackProps,
-} from "tamagui";
+import { Button, Text, View, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { SavedFilterDropdown, useSavedFilters, type ParsedFilter } from "@multiplatform.one/table";
-import { ViewSwitcher } from "@multiplatform.one/components";
+import { Avatar, ViewSwitcher } from "@multiplatform.one/components";
 import {
   MIN_PRESS_TARGET,
   pressTargetHitSlop,
@@ -311,15 +301,13 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
       return (
         <XStack alignItems="center" gap="$3" paddingVertical="$2" paddingHorizontal="$3">
           {imageUrl ? (
-            <Image
-              src={imageUrl}
-              alt={typeof title === "string" ? title : ""}
-              width={40}
-              height={40}
-              borderRadius={1000}
-              backgroundColor="$color3"
-              objectFit="cover"
-            />
+            <Avatar circular size={40} backgroundColor="$color3">
+              <Avatar.Image
+                src={imageUrl}
+                alt={typeof title === "string" ? title : ""}
+                objectFit="cover"
+              />
+            </Avatar>
           ) : null}
           <YStack flex={1} gap="$0.5">
             <Text fontSize="$4" fontWeight="500" numberOfLines={1}>
@@ -503,7 +491,13 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
             {...refreshPressFloorProps}
           />
           {onAdd && (
-            <Button size="$3" theme="accent" icon={PlusIcon} onPress={onAdd}>
+            <Button
+              size="$3"
+              theme="accent"
+              icon={PlusIcon}
+              onPress={onAdd}
+              {...pressTargetStyle()}
+            >
               {t("Add {{doctype}}", { doctype })}
             </Button>
           )}

package/src/FrappeTable.stories.tsx

@@ -86,7 +86,8 @@ function jsonResponse(body: unknown, status = 200): Response {
     if (urlStr.startsWith(MOCK_HOST)) {
       const url = new URL(urlStr);
       const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch) return jsonResponse({ data: customerMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (metaMatch)
+        return jsonResponse({ data: customerMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "Customer", module: "Selling" }] });
       }
@@ -382,10 +383,7 @@ export const Loading = () => (
 
 /** Zero documents, no filters, no failure — "No Customer records found" (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Customer: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ Customer: [] })}>
     <FrappeTable<Customer> doctype="Customer" columns={customerColumns} />
   </FrappeProvider>
 );

package/src/FrappeTable.tsx

@@ -556,6 +556,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
               onPress={() => onRowClick(props.row.original)}
               cursor="pointer"
               hoverStyle={{ backgroundColor: "$color2" }}
+              // Cell containment (LC-06/LC-10): a bare View defaults to
+              // flexShrink 0 and hugs its content, so long cell content
+              // (e.g. a ToDo description) painted PAST the column bounds and
+              // under the neighbor cells (the td itself doesn't clip).
+              // Shrink with the cell, cap at its box, clip the excess — the
+              // inner one-line Texts then ellipsize in-column.
+              minWidth={0}
+              maxWidth="100%"
+              flexShrink={1}
+              overflow="hidden"
             >
               {/* raw strings crash native (text must be inside <Text>) */}
               {typeof content === "string" || typeof content === "number" ? (

package/src/components/timeline.stories.tsx

@@ -1,5 +1,6 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
+import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { FrappeProvider } from "../FrappeProvider";
 import { Timeline, type FrappeComment, type FrappeVersion } from "./timeline";
 
@@ -138,14 +139,18 @@ export const ReadOnly = () => (
   </FrappeProvider>
 );
 
-/** Absolute timestamps via a custom formatTimestamp override the relative default. */
+/**
+ * The formatTimestamp eject overrides the per-class register defaults —
+ * demoed with the house absolute register pinned to always show the year
+ * (LC-12: even an ejected formatter speaks a human register, never raw ISO).
+ */
 export const AbsoluteTimestamps = () => (
   <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-001"
       label="Activity"
-      formatTimestamp={(ts) => new Date(ts).toISOString()}
+      formatTimestamp={(ts) => formatAbsoluteDateTime(ts, { year: "always" })}
     />
   </FrappeProvider>
 );

package/src/fields/Barcode/Barcode.stories.tsx

@@ -46,7 +46,7 @@ export const States = (args: StoryProps) => (
     <Controlled {...args} label="Disabled" disabled />
     <Controlled {...args} label="Disabled + error" disabled error="Broken while disabled" />
     <Controlled {...args} label="Required" required />
-    <Controlled {...args} label="Error" error="This field has an error" />
+    <Controlled {...args} label="Error" error="Value does not match the required format" />
     <Controlled {...args} label="Helper text" helperText="Some helpful context" />
   </YStack>
 );

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -118,7 +118,7 @@ ReadOnly.args = {
 
 export const States = (args: StoryProps) => (
   <YStack gap="$5">
-    <Controlled {...args} label="Error" error="Script has a syntax error" />
+    <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
     <Controlled {...args} label="Disabled" disabled />
     <Controlled {...args} label="Compact" compact />
     <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />

package/src/fields/Color/Color.stories.tsx

@@ -52,7 +52,7 @@ export const AllStates = () => (
     <ControlledColor label="Default" />
     <ControlledColor label="With Value" value="#10B981" />
     <ControlledColor label="Required" required />
-    <ControlledColor label="With Error" value="invalid" error="Invalid color" />
+    <ControlledColor label="With Error" value="invalid" error="Color must be a recognized value" />
     <ControlledColor label="Disabled" value="#F59E0B" disabled />
     <ControlledColor label="No Presets" showPresets={false} />
     <ControlledColor

package/src/fields/Date/Date.spec.tsx

@@ -0,0 +1,149 @@
+/**
+ * Date wrapper value contract (late-value display fix):
+ *
+ * The wrapper used to fold the controlled `value` into the forms DatePicker's
+ * mount-only `defaultValue` and DROP `onChange` — so a doc value arriving
+ * after first paint (create-mode engine seeding on /backoffice/todo/new)
+ * never displayed, and picks never reached the consumer doc. It now passes
+ * `value` through controlled and converts picked Dates back to the Frappe
+ * wire shape. Programmatic value application must not emit onChange (LC-14:
+ * a seeded value is not a user edit).
+ */
+
+import { describe, it, expect, vi } from "vitest";
+
+// The first field-module import in a cold fork transforms the whole fields
+// graph (same budget as tests/fieldRenderers.spec.tsx).
+vi.setConfig({ testTimeout: 240_000 });
+
+// Mock react-native-reanimated to prevent ESM module resolution failures
+// (same shim as tests/fieldRenderers.spec.tsx).
+vi.mock("react-native-reanimated", () => ({
+  default: {
+    useSharedValue: (init: any) => ({ value: init }),
+    useAnimatedStyle: () => ({}),
+    withTiming: (val: any) => val,
+    withSpring: (val: any) => val,
+    createAnimatedComponent: (component: any) => component,
+    runOnJS: (fn: any) => fn,
+    runOnUI: (fn: any) => fn,
+    useDerivedValue: (fn: () => any) => ({ value: fn() }),
+    useAnimatedRef: () => ({ current: null }),
+    Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+    FadeIn: { duration: () => ({}) },
+    FadeOut: { duration: () => ({}) },
+    Layout: { duration: () => ({}) },
+    Extrapolation: { CLAMP: "clamp" },
+    measure: () => null,
+    scrollTo: () => {},
+    makeMutable: (init: any) => ({ value: init }),
+  },
+  useSharedValue: (init: any) => ({ value: init }),
+  useAnimatedStyle: () => ({}),
+  withTiming: (val: any) => val,
+  withSpring: (val: any) => val,
+  createAnimatedComponent: (component: any) => component,
+  runOnJS: (fn: any) => fn,
+  runOnUI: (fn: any) => fn,
+  useDerivedValue: (fn: () => any) => ({ value: fn() }),
+  useAnimatedRef: () => ({ current: null }),
+  Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+  FadeIn: { duration: () => ({}) },
+  FadeOut: { duration: () => ({}) },
+  Layout: { duration: () => ({}) },
+}));
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import React from "react";
+
+async function loadDateField() {
+  return (await import(".")).Date;
+}
+
+const getDisplayInput = (container: ParentNode) =>
+  container.querySelector("input") as HTMLInputElement | null;
+
+/** Enabled day-cell buttons inside the (portaled) calendar popover. */
+function getDayButton(root: ParentNode, day: number): HTMLButtonElement | undefined {
+  const allButtons = Array.from(
+    root.querySelectorAll('button, [role="button"]'),
+  ) as HTMLButtonElement[];
+  return allButtons.find((btn) => {
+    const text = btn.textContent?.trim() ?? "";
+    const disabled =
+      btn.hasAttribute("disabled") ||
+      btn.getAttribute("aria-disabled") === "true" ||
+      btn.hasAttribute("data-disabled");
+    return text === String(day) && !disabled;
+  });
+}
+
+describe("Date wrapper — late-arriving value display", () => {
+  it("a value arriving after mount displays, without onChange", async () => {
+    const DateField = await loadDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField label="Due Date" value="" onChange={onChange} type="date" />,
+    );
+    expect(getDisplayInput(result.container)?.value ?? "").toBe("");
+
+    // Late seed: the engine applies create defaults once meta loads.
+    result.rerender(
+      <DateField label="Due Date" value="2026-03-05" onChange={onChange} type="date" />,
+    );
+    await waitFor(() => {
+      expect(getDisplayInput(result.container)?.value).toBe("Mar 5, 2026");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("Date wrapper — pick emits the Frappe wire string", () => {
+  it("emits YYYY-MM-DD once for a Date field pick", async () => {
+    const DateField = await loadDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField label="Due Date" value="2026-03-05" onChange={onChange} type="date" />,
+    );
+    const trigger = getDisplayInput(result.container);
+    expect(trigger).toBeTruthy();
+    await act(async () => {
+      if (trigger) fireEvent.click(trigger);
+    });
+    await waitFor(() => {
+      expect(getDayButton(document.body, 15)).toBeTruthy();
+    });
+    await act(async () => {
+      fireEvent.click(getDayButton(document.body, 15)!);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("2026-03-15");
+  });
+
+  it("preserves the existing time part for a Datetime field pick", async () => {
+    const DateField = await loadDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField
+        label="Starts On"
+        value="2026-03-05 14:30:00"
+        onChange={onChange}
+        type="datetime"
+      />,
+    );
+    const trigger = getDisplayInput(result.container);
+    expect(trigger).toBeTruthy();
+    await act(async () => {
+      if (trigger) fireEvent.click(trigger);
+    });
+    await waitFor(() => {
+      expect(getDayButton(document.body, 20)).toBeTruthy();
+    });
+    await act(async () => {
+      fireEvent.click(getDayButton(document.body, 20)!);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("2026-03-20 14:30:00");
+  });
+});

package/src/fields/Date/Date.stories.tsx

@@ -126,7 +126,7 @@ export const AllStates = () => (
     <ControlledDate label="Default (Empty)" type="date" />
     <ControlledDate label="With Value" type="date" value="2026-06-15" />
     <ControlledDate label="Required" type="date" required />
-    <ControlledDate label="With Error" type="date" error="Please select a valid date" />
+    <ControlledDate label="With Error" type="date" error="A valid date is required" />
     <ControlledDate label="Disabled" type="date" value="2026-01-01" disabled />
   </YStack>
 );

package/src/fields/Date/Datetime.stories.tsx

@@ -52,7 +52,7 @@ export const States = (args: StoryProps) => (
     <Controlled {...args} label="Disabled" disabled />
     <Controlled {...args} label="Disabled + error" disabled error="Broken while disabled" />
     <Controlled {...args} label="Required" required />
-    <Controlled {...args} label="Error" error="This field has an error" />
+    <Controlled {...args} label="Error" error="Value does not match the required format" />
     <Controlled {...args} label="Helper text" helperText="Some helpful context" />
   </YStack>
 );