@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/backend/detail/__tests__/InlineEditors.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as React from 'react'
-import { screen } from '@testing-library/react'
+import { act, fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { InlineTextEditor, resolveSafeInlineUrlHref } from '../InlineEditors'
 
@@ -42,6 +42,86 @@ describe('InlineTextEditor URL display', () => {
   })
 })
 
+describe('InlineTextEditor date types — DS unification (no native date input)', () => {
+  function activateEditor() {
+    // Pencil/edit toggle is the trailing icon-only button on the InlineTextEditor.
+    // It has no accessible text label, so we grab the last data-slot="button".
+    const buttons = document.querySelectorAll('[data-slot="button"]')
+    expect(buttons.length).toBeGreaterThan(0)
+    const editToggle = buttons[buttons.length - 1] as HTMLButtonElement
+    act(() => {
+      fireEvent.click(editToggle)
+    })
+  }
+
+  it('inputType="date" renders the DatePicker primitive trigger when editing', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Date"
+        value="2026-05-09"
+        emptyLabel="No date"
+        type="date"
+        inputType="date"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="date"]')).toBeNull()
+  })
+
+  it('inputType="datetime-local" renders the DatePicker primitive (with withTime) when editing', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="When"
+        value="2026-05-09T10:30"
+        emptyLabel="No value"
+        type="text"
+        inputType="datetime-local"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="datetime-local"]')).toBeNull()
+  })
+
+  it('non-date inputType still renders a raw input (regression: text editing path unchanged)', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Title"
+        value="Hello"
+        emptyLabel="No title"
+        type="text"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('input[type="text"]')).toBeInTheDocument()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeNull()
+  })
+
+  it('date type hides the form Save/Cancel buttons (DatePicker provides Apply/Cancel in popover)', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Date"
+        value="2026-05-09"
+        emptyLabel="No date"
+        type="date"
+        inputType="date"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    // Form Save (submit) button should not be rendered for date types
+    expect(screen.queryByRole('button', { name: /Save|Zapisz|⌘/ })).not.toBeInTheDocument()
+  })
+})
+
 describe('resolveSafeInlineUrlHref', () => {
   it.each(['http://example.com', 'https://example.com', 'mailto:user@example.com', 'tel:+48123456789'])(
     'allows %s',

package/src/backend/inputs/ComboboxInput.tsx

@@ -14,8 +14,15 @@ export type ComboboxInputProps = {
   onChange: (next: string) => void
   placeholder?: string
   suggestions?: Array<string | ComboboxOption>
+  // Options to hydrate the option map up front (typically the linked entity's
+  // display fields, already present in a record-detail payload). Merged with
+  // `suggestions` so a pre-selected value renders its label without interaction.
+  seedOptions?: ComboboxOption[]
   loadSuggestions?: (query?: string) => Promise<Array<string | ComboboxOption>>
-  resolveLabel?: (value: string) => string
+  // Eagerly resolve a pre-selected `value` to a human label when it is not
+  // covered by `suggestions`/`seedOptions`/`loadSuggestions` results. Runs once
+  // per value, before any user interaction. May be sync or async.
+  resolveLabel?: (value: string) => string | Promise<string>
   resolveDescription?: (value: string) => string | null | undefined
   autoFocus?: boolean
   disabled?: boolean
@@ -47,6 +54,7 @@ export function ComboboxInput({
   onChange,
   placeholder,
   suggestions,
+  seedOptions,
   loadSuggestions,
   resolveLabel,
   resolveDescription,
@@ -56,6 +64,7 @@ export function ComboboxInput({
 }: ComboboxInputProps) {
   const [input, setInput] = React.useState('')
   const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
+  const [resolvedOptions, setResolvedOptions] = React.useState<ComboboxOption[]>([])
   const [loading, setLoading] = React.useState(false)
   const [touched, setTouched] = React.useState(false)
   const [showSuggestions, setShowSuggestions] = React.useState(false)
@@ -63,29 +72,46 @@ export function ComboboxInput({
   const inputRef = React.useRef<HTMLInputElement>(null)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
 
-  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])
+  const staticOptions = React.useMemo(
+    () => normalizeOptions([...(seedOptions ?? []), ...(suggestions ?? [])]),
+    [seedOptions, suggestions]
+  )
+
+  // Options whose label is genuinely known (not a self-mapping `value === label`
+  // placeholder). Used to decide whether eager resolution still needs to run.
+  const knownLabelValues = React.useMemo(() => {
+    const set = new Set<string>()
+    for (const option of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
+      if (option.label && option.label !== option.value) set.add(option.value)
+    }
+    return set
+  }, [staticOptions, asyncOptions, resolvedOptions])
 
   const optionMap = React.useMemo(() => {
     const map = new Map<string, ComboboxOption>()
     const register = (option: ComboboxOption) => {
-      if (!map.has(option.value)) {
+      const existing = map.get(option.value)
+      // Prefer an entry that carries a real label over a self-mapping placeholder.
+      if (!existing || (existing.label === existing.value && option.label !== option.value)) {
         map.set(option.value, option)
       }
     }
     staticOptions.forEach(register)
     asyncOptions.forEach(register)
+    resolvedOptions.forEach(register)
     if (value) {
       const existing = map.get(value)
       if (!existing) {
+        const sync = typeof resolveLabel === 'function' ? resolveLabel(value) : undefined
         map.set(value, {
           value,
-          label: resolveLabel?.(value) ?? value,
+          label: typeof sync === 'string' && sync ? sync : value,
           description: resolveDescription?.(value) ?? null,
         })
       }
     }
     return map
-  }, [asyncOptions, resolveDescription, resolveLabel, staticOptions, value])
+  }, [asyncOptions, resolvedOptions, resolveDescription, resolveLabel, staticOptions, value])
 
   const availableOptions = React.useMemo(() => {
     return Array.from(optionMap.values())
@@ -122,7 +148,47 @@ export function ComboboxInput({
     }
   }, [disabled, input, loadSuggestions, touched])
 
-  // Sync input with value when value changes externally and input is not focused
+  // Eagerly resolve a pre-selected value to its label without requiring the user
+  // to focus the field. Runs once per value when it is not already covered.
+  const eagerResolveLabel = typeof resolveLabel === 'function' ? resolveLabel : undefined
+  React.useEffect(() => {
+    if (!value || disabled) return
+    if (knownLabelValues.has(value)) return
+    let cancelled = false
+    const apply = (label?: string | null, description?: string | null) => {
+      const clean = typeof label === 'string' ? label.trim() : ''
+      if (cancelled || !clean || clean === value) return
+      setResolvedOptions((prev) => {
+        if (prev.some((option) => option.value === value && option.label === clean)) return prev
+        return [...prev.filter((option) => option.value !== value), { value, label: clean, description: description ?? null }]
+      })
+    }
+    if (eagerResolveLabel) {
+      Promise.resolve()
+        .then(() => eagerResolveLabel(value))
+        .then((label) => apply(label, resolveDescription?.(value)))
+        .catch(() => {})
+      return () => { cancelled = true }
+    }
+    // Fallback: pull the first page of async suggestions so a remount that lost
+    // its option cache can still recover the label without user interaction.
+    if (loadSuggestions) {
+      setLoading(true)
+      Promise.resolve()
+        .then(() => loadSuggestions())
+        .then((items) => {
+          if (cancelled) return
+          const normalized = normalizeOptions(items)
+          setAsyncOptions(normalized)
+        })
+        .catch(() => {})
+        .finally(() => { if (!cancelled) setLoading(false) })
+    }
+    return () => { cancelled = true }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, disabled, knownLabelValues, eagerResolveLabel, loadSuggestions])
+
+  // Sync input with value when value changes externally and input is not focused.
   React.useEffect(() => {
     if (document.activeElement !== inputRef.current) {
       const option = optionMap.get(value)
@@ -165,10 +231,16 @@ export function ComboboxInput({
         return
       }
       if (!allowCustomValues) {
-        // Revert to current value if custom values not allowed
-        const currentOption = optionMap.get(value)
-        setInput(currentOption?.label ?? value ?? '')
+        // Revert to the current value's label — but only if we actually know it.
+        // Baking the raw value back in while eager resolution is still pending
+        // would freeze a placeholder (e.g. a UUID) into the visible input.
         setShowSuggestions(false)
+        const currentOption = optionMap.get(value)
+        if (currentOption && currentOption.label !== currentOption.value) {
+          setInput(currentOption.label)
+        } else if (!value) {
+          setInput('')
+        }
         return
       }
       selectValue(raw)

package/src/backend/inputs/DatePicker.tsx

@@ -1,162 +1,35 @@
+/**
+ * @deprecated Import from `@open-mercato/ui/primitives/date-picker` instead.
+ *
+ * This shim preserves the legacy import path
+ * `@open-mercato/ui/backend/inputs/DatePicker` for existing consumers
+ * (CrudForm, example pages) while the DatePicker is promoted to a
+ * primitive in DS Foundation v3.
+ *
+ * Default footer is the Figma-aligned `'apply-cancel'` mode (per user
+ * directive 2026-05-09 — "zmień globalnie"). Consumers that explicitly
+ * need the legacy `Today` / `Clear` footer can pass `footer="today-clear"`.
+ *
+ * Migration: replace
+ *   import { DatePicker } from '@open-mercato/ui/backend/inputs/DatePicker'
+ * with
+ *   import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+ */
+
 "use client"
 
 import * as React from 'react'
-import { format } from 'date-fns'
-import type { Locale } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { Calendar } from '../../primitives/calendar'
-
-export type DatePickerProps = {
-  value?: Date | null
-  onChange: (date: Date | null) => void
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-  locale?: Locale
-  displayFormat?: string
-  showTodayButton?: boolean
-  showClearButton?: boolean
-  closeOnSelect?: boolean
-  minDate?: Date
-  maxDate?: Date
-}
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerProps as DatePickerPrimitivePropsBase,
+  type DatePickerFooter,
+} from '../../primitives/date-picker'
 
-const DAY_FIRST_LOCALE_CODES = new Set([
-  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',
-])
+export type DatePickerProps = DatePickerPrimitivePropsBase
 
-function deriveDisplayFormat(locale?: Locale): string {
-  if (!locale) return 'MMM d, yyyy'
-  const code = locale.code?.split('-')[0]?.toLowerCase() ?? ''
-  return DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'
+/** @deprecated Use `DatePicker` from `@open-mercato/ui/primitives/date-picker`. */
+export function DatePicker(props: DatePickerProps) {
+  return <DatePickerPrimitive {...props} />
 }
 
-export function DatePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  readOnly = false,
-  className,
-  locale,
-  displayFormat,
-  showTodayButton = true,
-  showClearButton = true,
-  closeOnSelect = true,
-  minDate,
-  maxDate,
-}: DatePickerProps) {
-  const t = useT()
-  const [open, setOpen] = React.useState(false)
-
-  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale)
-  const placeholderText = placeholder ?? t('ui.datePicker.placeholder', 'Pick a date')
-  const todayText = t('ui.datePicker.todayButton', 'Today')
-  const clearText = t('ui.datePicker.clearButton', 'Clear')
-
-  const formattedValue = React.useMemo(() => {
-    if (!value) return null
-    try {
-      return format(value, resolvedFormat, locale ? { locale } : undefined)
-    } catch {
-      return null
-    }
-  }, [value, resolvedFormat, locale])
-
-  const handleDaySelect = React.useCallback(
-    (day: Date | undefined) => {
-      if (!day) return
-      const next = new Date(day)
-      next.setHours(0, 0, 0, 0)
-      onChange(next)
-      if (closeOnSelect) setOpen(false)
-    },
-    [onChange, closeOnSelect]
-  )
-
-  const handleToday = React.useCallback(() => {
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-    onChange(today)
-    setOpen(false)
-  }, [onChange])
-
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
-
-  const isInteractive = !disabled && !readOnly
-
-  const disabledMatcher = React.useMemo(() => {
-    if (!minDate && !maxDate) return undefined
-    const matchers: import('react-day-picker').Matcher[] = []
-    if (minDate) matchers.push({ before: minDate })
-    if (maxDate) matchers.push({ after: maxDate })
-    return matchers
-  }, [minDate, maxDate])
-
-  return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !formattedValue && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">
-            {formattedValue ?? placeholderText}
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0 w-auto">
-        <Calendar
-          mode="single"
-          selected={value ?? undefined}
-          onSelect={handleDaySelect}
-          locale={locale}
-          disabled={disabledMatcher}
-          initialFocus
-        />
-        {(showTodayButton || showClearButton) && (
-          <div className="flex items-center justify-between gap-2 border-t px-3 py-2">
-            {showTodayButton && (
-              <button
-                type="button"
-                onClick={handleToday}
-                className="text-sm text-primary hover:underline focus-visible:outline-none"
-              >
-                {todayText}
-              </button>
-            )}
-            {showClearButton && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-              >
-                {clearText}
-              </button>
-            )}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}
+export type { DatePickerFooter }

package/src/backend/inputs/DateTimePicker.tsx

@@ -1,199 +1,31 @@
+/**
+ * @deprecated Import `DatePicker` from `@open-mercato/ui/primitives/date-picker`
+ * and pass `withTime` instead. The standalone `DateTimePicker` is replaced by
+ * a `withTime` prop on the unified primitive in DS Foundation v3.
+ *
+ * Default footer is the Figma-aligned `'apply-cancel'` mode (per user
+ * directive 2026-05-09 — "zmień globalnie"). Consumers that explicitly
+ * need the legacy `Today` / `Clear` footer can pass `footer="today-clear"`.
+ *
+ * Migration: replace
+ *   import { DateTimePicker } from '@open-mercato/ui/backend/inputs/DateTimePicker'
+ *   <DateTimePicker value={...} onChange={...} />
+ * with
+ *   import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+ *   <DatePicker value={...} onChange={...} withTime />
+ */
+
 "use client"
 
 import * as React from 'react'
-import { format } from 'date-fns'
-import type { Locale } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { Calendar } from '../../primitives/calendar'
-import { TimeInput } from './TimeInput'
-
-export type DateTimePickerProps = {
-  value?: Date | null
-  onChange: (date: Date | null) => void
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-  locale?: Locale
-  displayFormat?: string
-  minuteStep?: number
-  showTodayButton?: boolean
-  showClearButton?: boolean
-  minDate?: Date
-  maxDate?: Date
-}
-
-const DAY_FIRST_LOCALE_CODES = new Set([
-  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',
-])
-
-function deriveDisplayFormat(locale?: Locale): string {
-  if (!locale) return 'MMM d, yyyy HH:mm'
-  const code = locale.code?.split('-')[0]?.toLowerCase() ?? ''
-  return DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy HH:mm' : 'MMM d, yyyy HH:mm'
-}
-
-function extractTime(date: Date): string {
-  const hour = String(date.getHours()).padStart(2, '0')
-  const minute = String(date.getMinutes()).padStart(2, '0')
-  return `${hour}:${minute}`
-}
-
-function applyTimeToDate(base: Date, time: string): Date {
-  const parts = time.split(':')
-  const hour = parseInt(parts[0] ?? '0', 10)
-  const minute = parseInt(parts[1] ?? '0', 10)
-  const next = new Date(base)
-  next.setHours(isNaN(hour) ? 0 : hour)
-  next.setMinutes(isNaN(minute) ? 0 : minute)
-  next.setSeconds(0)
-  next.setMilliseconds(0)
-  return next
-}
-
-export function DateTimePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  readOnly = false,
-  className,
-  locale,
-  displayFormat,
-  minuteStep = 1,
-  showTodayButton = true,
-  showClearButton = true,
-  minDate,
-  maxDate,
-}: DateTimePickerProps) {
-  const t = useT()
-  const [open, setOpen] = React.useState(false)
-
-  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale)
-  const placeholderText = placeholder ?? t('ui.dateTimePicker.placeholder', 'Pick date and time')
-  const timeLabelText = t('ui.dateTimePicker.timeLabel', 'Time')
-  const todayText = t('ui.dateTimePicker.todayButton', 'Today')
-  const clearText = t('ui.dateTimePicker.clearButton', 'Clear')
-
-  const formattedValue = React.useMemo(() => {
-    if (!value) return null
-    try {
-      return format(value, resolvedFormat, locale ? { locale } : undefined)
-    } catch {
-      return null
-    }
-  }, [value, resolvedFormat, locale])
-
-  const handleDaySelect = React.useCallback(
-    (day: Date | undefined) => {
-      if (!day) return
-      const currentTime = value ? extractTime(value) : '00:00'
-      onChange(applyTimeToDate(day, currentTime))
-    },
-    [onChange, value]
-  )
-
-  const handleTimeChange = React.useCallback(
-    (time: string) => {
-      const base = value ?? null
-      if (!base) return
-      onChange(applyTimeToDate(base, time))
-    },
-    [onChange, value]
-  )
-
-  const handleToday = React.useCallback(() => {
-    const now = new Date()
-    const currentTime = value ? extractTime(value) : extractTime(now)
-    onChange(applyTimeToDate(now, currentTime))
-    setOpen(false)
-  }, [onChange, value])
-
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
-
-  const isInteractive = !disabled && !readOnly
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerProps as DatePickerPrimitiveProps,
+} from '../../primitives/date-picker'
 
-  const disabledMatcher = React.useMemo(() => {
-    if (!minDate && !maxDate) return undefined
-    const matchers: import('react-day-picker').Matcher[] = []
-    if (minDate) matchers.push({ before: minDate })
-    if (maxDate) matchers.push({ after: maxDate })
-    return matchers
-  }, [minDate, maxDate])
+export type DateTimePickerProps = Omit<DatePickerPrimitiveProps, 'withTime'>
 
-  return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !formattedValue && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">
-            {formattedValue ?? placeholderText}
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0 w-auto">
-        <Calendar
-          mode="single"
-          selected={value ?? undefined}
-          onSelect={handleDaySelect}
-          locale={locale}
-          disabled={disabledMatcher}
-          initialFocus
-        />
-        <div className="border-t px-3 py-2 space-y-2">
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground shrink-0">{timeLabelText}:</span>
-            <TimeInput
-              value={value ? extractTime(value) : undefined}
-              onChange={handleTimeChange}
-              minuteStep={minuteStep}
-            />
-          </div>
-          {(showTodayButton || showClearButton) && (
-            <div className="flex items-center justify-between gap-2">
-              {showTodayButton && (
-                <button
-                  type="button"
-                  onClick={handleToday}
-                  className="text-sm text-primary hover:underline focus-visible:outline-none"
-                >
-                  {todayText}
-                </button>
-              )}
-              {showClearButton && (
-                <button
-                  type="button"
-                  onClick={handleClear}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-                >
-                  {clearText}
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
+/** @deprecated Use `DatePicker withTime` from `@open-mercato/ui/primitives/date-picker`. */
+export function DateTimePicker(props: DateTimePickerProps) {
+  return <DatePickerPrimitive {...props} withTime />
 }