@mohou/ui 1.0.20

package/src/composites/date-picker.tsx

@@ -0,0 +1,97 @@
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { ChevronDown } from 'lucide-react'
+
+import { cn } from '@mohou/ui/lib/utils'
+import { useDateLocale, useLabels } from '@mohou/ui/i18n/context'
+import { Button } from '@mohou/ui/components/button'
+import { Calendar } from '@mohou/ui/components/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@mohou/ui/components/popover'
+import { DateChrome } from '@mohou/ui/composites/date-chrome'
+
+export type DatePickerProps = {
+  value?: Date
+  onChange?: (date: Date | undefined) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * Single calendar date (day precision).
+ * @when Filtering or storing one day. With a clock → `DateTimePicker`.
+ * @example
+ * <DatePicker value={d} onChange={(v) => set(v)} />
+ * @family Calendar & date
+ */
+export function DatePicker({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [month, setMonth] = React.useState(value ?? new Date())
+  const t = useLabels('datePicker')
+  const dateLocale = useDateLocale()
+  const text = placeholder ?? t.placeholder
+
+  React.useEffect(() => {
+    if (value) setMonth(value)
+  }, [value])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        disabled={disabled}
+        render={
+          <Button
+            variant="secondary"
+            data-empty={!value}
+            data-testid="date-picker-trigger"
+            className={cn(
+              'justify-between font-medium data-[empty=true]:text-muted-foreground',
+              className,
+            )}
+          />
+        }
+      >
+        <span className="truncate">
+          {value ? format(value, 'yyyy, MMMM d', { locale: dateLocale }) : text}
+        </span>
+        <ChevronDown className="size-3.5 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto overflow-hidden p-0">
+        <DateChrome
+          month={month}
+          onMonthChange={setMonth}
+          onToday={() => {
+            const now = new Date()
+            onChange?.(now)
+            setOpen(false)
+          }}
+        >
+          <Calendar
+            mode="single"
+            locale={dateLocale}
+            month={month}
+            onMonthChange={setMonth}
+            selected={value}
+            hideNavigation
+            classNames={{ month_caption: 'hidden', nav: 'hidden' }}
+            onSelect={(date) => {
+              onChange?.(date)
+              setOpen(false)
+            }}
+          />
+        </DateChrome>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/composites/date-range-picker.tsx

@@ -0,0 +1,99 @@
+
+import * as React from 'react'
+import { format, isSameMonth, isSameYear, type Locale } from 'date-fns'
+import type { DateRange } from 'react-day-picker'
+import { ChevronDown } from 'lucide-react'
+
+// Re-exported so mini-app authors (bare `@mohou/ui` only) can type the value.
+export type { DateRange }
+
+import { cn } from '@mohou/ui/lib/utils'
+import { useDateLocale, useLabels } from '@mohou/ui/i18n/context'
+import { Button } from '@mohou/ui/components/button'
+import { Calendar } from '@mohou/ui/components/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@mohou/ui/components/popover'
+import { DateChrome } from '@mohou/ui/composites/date-chrome'
+
+export type DateRangePickerProps = {
+  value?: DateRange | undefined
+  onChange?: ((range: DateRange | undefined) => void) | undefined
+  placeholder?: string | undefined
+  className?: string | undefined
+}
+
+function rangeLabel(value: DateRange, locale: Locale) {
+  const opts = { locale }
+  if (!value.from) return null
+  if (!value.to) return format(value.from, 'yyyy, MMMM d', opts)
+  if (isSameYear(value.from, value.to) && isSameMonth(value.from, value.to)) {
+    return `${format(value.from, 'yyyy, MMMM d', opts)}–${format(value.to, 'd', opts)}`
+  }
+  if (isSameYear(value.from, value.to)) {
+    return `${format(value.from, 'yyyy, MMM d', opts)} – ${format(value.to, 'MMM d', opts)}`
+  }
+  return `${format(value.from, 'MMM d, yyyy', opts)} – ${format(value.to, 'MMM d, yyyy', opts)}`
+}
+
+/**
+ * Popover date range with month/year chrome.
+ * @when Filters needing from/to calendar days
+ * @example
+ * <DateRangePicker value={range} onChange={setRange} />
+ * @family Calendar & date
+ */
+export function DateRangePicker({
+  value,
+  onChange,
+  placeholder,
+  className,
+}: DateRangePickerProps) {
+  const t = useLabels('dateRangePicker')
+  const dateLocale = useDateLocale()
+  const text = placeholder ?? t.placeholder
+  const [month, setMonth] = React.useState(value?.from ?? new Date())
+  const label = value?.from ? rangeLabel(value, dateLocale) : text
+
+  React.useEffect(() => {
+    if (value?.from) setMonth(value.from)
+  }, [value?.from])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="secondary"
+            data-testid="date-range-picker-trigger"
+            className={cn(
+              'justify-between font-medium',
+              !value?.from && 'text-muted-foreground',
+              className,
+            )}
+          />
+        }
+      >
+        <span className="truncate">{label}</span>
+        <ChevronDown className="size-3.5 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto overflow-hidden p-0">
+        <DateChrome month={month} onMonthChange={setMonth}>
+          <Calendar
+            mode="range"
+            locale={dateLocale}
+            month={month}
+            onMonthChange={setMonth}
+            {...value === undefined ? {} : { selected: value }}
+            {...onChange === undefined ? {} : { onSelect: onChange }}
+            hideNavigation
+            numberOfMonths={1}
+            classNames={{ month_caption: 'hidden', nav: 'hidden' }}
+          />
+        </DateChrome>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/composites/date-time-picker.tsx

@@ -0,0 +1,121 @@
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+
+import { Button } from '@mohou/ui/components/button'
+import { Calendar } from '@mohou/ui/components/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@mohou/ui/components/popover'
+import { DateChrome } from '@mohou/ui/composites/date-chrome'
+import { TimeWheel } from '@mohou/ui/composites/time-picker'
+import { TimezoneSelect } from '@mohou/ui/composites/timezone-select'
+import { useDateLocale, useLabels } from '@mohou/ui/i18n/context'
+import { cn } from '@mohou/ui/lib/utils'
+
+function merge(date: Date | undefined, hours: number, minutes: number): Date {
+  const next = new Date(date ?? new Date())
+  next.setHours(hours, minutes, 0, 0)
+  return next
+}
+
+export type DateTimePickerProps = {
+  value?: Date | undefined
+  onChange?: (date: Date | undefined) => void
+  timezone?: string | undefined
+  onTimezoneChange?: ((zone: string) => void) | undefined
+  placeholder?: string | undefined
+  className?: string | undefined
+}
+
+/**
+ * Date + time, optional timezone.
+ * @when Scheduling moments, not days.
+ * @example
+ * <DateTimePicker value={d} onChange={(v) => set(v)} />
+ * @family Calendar & date
+ */
+export function DateTimePicker({
+  value,
+  onChange,
+  timezone,
+  onTimezoneChange,
+  placeholder,
+  className,
+}: DateTimePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [month, setMonth] = React.useState(value ?? new Date())
+  const hours = value?.getHours() ?? 0
+  const minutes = value?.getMinutes() ?? 0
+  const t = useLabels('dateTimePicker')
+  const dateLocale = useDateLocale()
+  const text = placeholder ?? t.placeholder
+  React.useEffect(() => {
+    if (value) setMonth(value)
+  }, [value])
+
+  return (
+    <div className="flex flex-wrap items-center gap-2" data-testid="date-time-picker">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              variant="outline"
+              data-empty={!value}
+              data-testid="date-picker-trigger"
+              className={cn(
+                'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+                className,
+              )}
+            />
+          }
+        >
+          <CalendarIcon />
+          {value ? format(value, 'PPP p', { locale: dateLocale }) : <span>{text}</span>}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0">
+          <div className="flex">
+            <DateChrome
+              month={month}
+              onMonthChange={setMonth}
+              onToday={() => onChange?.(merge(new Date(), hours, minutes))}
+            >
+              <Calendar
+                mode="single"
+                locale={dateLocale}
+                month={month}
+                onMonthChange={setMonth}
+                selected={value}
+                hideNavigation
+                classNames={{ month_caption: 'hidden', nav: 'hidden' }}
+                onSelect={date => onChange?.(merge(date, hours, minutes))}
+              />
+            </DateChrome>
+            <div className="flex gap-1 border-l px-2 py-2">
+              <TimeWheel
+                testId="time-hour"
+                visible={7}
+                values={Array.from({ length: 24 }, (_, i) => i)}
+                value={hours}
+                onChange={h => onChange?.(merge(value, h, minutes))}
+              />
+              <TimeWheel
+                testId="time-minute"
+                visible={7}
+                values={Array.from({ length: 60 }, (_, i) => i)}
+                value={minutes}
+                onChange={m => onChange?.(merge(value, hours, m))}
+              />
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      {onTimezoneChange ? (
+        <TimezoneSelect value={timezone} onChange={onTimezoneChange} />
+      ) : null}
+    </div>
+  )
+}

package/src/composites/date-time-range-picker.tsx

@@ -0,0 +1,57 @@
+
+import { Label } from '@mohou/ui/components/label'
+import { DateRangePicker } from '@mohou/ui/composites/date-range-picker'
+import { DateTimePicker } from '@mohou/ui/composites/date-time-picker'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+export type DateTimeRange = { start?: Date | undefined; end?: Date | undefined }
+
+/**
+ * From/to moments, all-day toggle.
+ * @when Run windows, on-call shifts.
+ * @example
+ * <DateTimeRangePicker onChange={(r) => set(r)} />
+ * @family Calendar & date
+ */
+export function DateTimeRangePicker({
+  value,
+  onChange,
+  allDay = false,
+}: {
+  value?: DateTimeRange | undefined
+  onChange?: (value: DateTimeRange) => void
+  allDay?: boolean | undefined
+}) {
+  const t = useLabels('dateTimeRange')
+  if (allDay) {
+    return (
+      <div data-testid="date-time-range-picker">
+        <DateRangePicker
+          value={{ from: value?.start, to: value?.end }}
+          onChange={range => onChange?.({ start: range?.from, end: range?.to })}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="date-time-range-picker">
+      <div className="grid gap-1">
+        <Label>{t.start}</Label>
+        <DateTimePicker
+          value={value?.start}
+          onChange={start => onChange?.({ start, end: value?.end })}
+          className="w-full"
+        />
+      </div>
+      <div className="grid gap-1">
+        <Label>{t.end}</Label>
+        <DateTimePicker
+          value={value?.end}
+          onChange={end => onChange?.({ start: value?.start, end })}
+          className="w-full"
+        />
+      </div>
+    </div>
+  )
+}

package/src/composites/duration-input.tsx

@@ -0,0 +1,128 @@
+
+import { Minus, Plus } from 'lucide-react'
+
+import { Button } from '@mohou/ui/components/button'
+import { Input } from '@mohou/ui/components/input'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+export function parseDuration(input: string): number {
+  const hours = Number(/(\d+)\s*h/i.exec(input)?.[1] ?? 0)
+  const minutes = Number(/(\d+)\s*m/i.exec(input)?.[1] ?? 0)
+  if (!/[hm]/i.test(input) && /^\d+$/.test(input.trim())) {
+    return Number(input)
+  }
+  return hours * 60 + minutes
+}
+
+export function formatDuration(totalMinutes: number): string {
+  const hours = Math.floor(Math.max(0, totalMinutes) / 60)
+  const rest = Math.max(0, totalMinutes) % 60
+  if (hours && rest) return `${hours}h ${rest}m`
+  if (hours) return `${hours}h`
+  return `${rest}m`
+}
+
+function split(value?: string) {
+  const total = parseDuration(value ?? '0m')
+  return { hours: Math.floor(total / 60), minutes: total % 60 }
+}
+
+function Segment({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max,
+}: {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+}) {
+  const t = useLabels('durationInput')
+  const clamp = (next: number) => {
+    if (max != null) next = Math.min(max, next)
+    return Math.max(min, next)
+  }
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        aria-label={t.decrease(label)}
+        onClick={() => onChange(clamp(value - 1))}
+      >
+        <Minus />
+      </Button>
+      <Input
+        inputMode="numeric"
+        value={String(value)}
+        aria-label={label}
+        onChange={(event) => {
+          const next = Number(event.target.value.replace(/\D/g, '') || 0)
+          onChange(clamp(next))
+        }}
+        className="h-7 w-10 border-0 bg-transparent p-0 text-center shadow-none focus-visible:ring-0"
+      />
+      <span className="text-muted-foreground w-4 text-xs">{label}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        aria-label={t.increase(label)}
+        onClick={() => onChange(clamp(value + 1))}
+      >
+        <Plus />
+      </Button>
+    </div>
+  )
+}
+
+/**
+ * Duration text field (e.g. `1h30m`) with minutes.
+ * @when Timeouts/estimates where you store minutes but type human units.
+ * @example
+ * <DurationInput value="45m" onChange={(v, min) => set(min)} />
+ * @family Calendar & date
+ */
+export function DurationInput({
+  value,
+  onChange,
+}: {
+  value?: string
+  onChange?: (value: string, minutes: number) => void
+}) {
+  const t = useLabels('durationInput')
+  const { hours, minutes } = split(value)
+  const commit = (h: number, m: number) => {
+    let total = h * 60 + m
+    if (total < 0) total = 0
+    onChange?.(formatDuration(total), total)
+  }
+
+  return (
+    <div
+      data-testid="duration-input"
+      className="inline-flex items-center gap-1 rounded-lg border bg-background px-1 py-0.5"
+    >
+      <Segment
+        label={t.hours}
+        value={hours}
+        onChange={h => commit(h, minutes)}
+      />
+      <span className="text-muted-foreground/40">·</span>
+      <Segment
+        label={t.minutes}
+        value={minutes}
+        min={-1}
+        onChange={(m) => {
+          if (m >= 60) commit(hours + 1, 0)
+          else if (m < 0) commit(hours <= 0 ? 0 : hours - 1, hours <= 0 ? 0 : 59)
+          else commit(hours, m)
+        }}
+      />
+    </div>
+  )
+}