@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/counter-input.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+import * as React from 'react'
+import { Minus, Plus } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const counterWrapperVariants = cva(
+  'inline-flex w-full items-center bg-background border border-input shadow-xs transition-colors ' +
+    'focus-within:outline-none focus-within:shadow-focus focus-within:border-foreground ' +
+    'hover:bg-muted/40 ' +
+    'has-[input:disabled]:bg-bg-disabled has-[input:disabled]:border-border-disabled has-[input:disabled]:shadow-none has-[input:disabled]:hover:bg-bg-disabled ' +
+    'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:focus-within:border-destructive',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 gap-1 p-1 rounded-md',
+        default: 'h-9 gap-1.5 p-1.5 rounded-md',
+        lg: 'h-10 gap-2 p-2 rounded-[10px]',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+const counterButtonVariants = cva(
+  'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'size-6 [&_svg]:size-3.5',
+        default: 'size-6 [&_svg]:size-4',
+        lg: 'size-6 [&_svg]:size-4',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+const counterInputElementVariants = cva(
+  'flex-1 min-w-0 bg-transparent border-0 outline-none text-center placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-transparent ' +
+    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+  {
+    variants: {
+      size: {
+        sm: 'text-xs',
+        default: 'text-sm',
+        lg: 'text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export type CounterInputProps = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'value' | 'onChange' | 'size' | 'type' | 'children'
+> &
+  VariantProps<typeof counterWrapperVariants> & {
+    value?: number | null
+    /**
+     * Fired whenever the value changes through `-`/`+`, keyboard arrows, or direct typing.
+     * `null` is emitted when the user clears the input. Component clamps to `min`/`max`
+     * and rounds to `precision` decimal places before emitting.
+     */
+    onChange?: (value: number | null) => void
+    min?: number
+    max?: number
+    /** Increment amount for `+` / `-` and ArrowUp / ArrowDown. Default `1`. */
+    step?: number
+    /** Decimal places used when formatting the displayed value. Default `0`. */
+    precision?: number
+    /** aria-label for the decrement (`-`) button. Default English `Decrease`. */
+    decrementAriaLabel?: string
+    /** aria-label for the increment (`+`) button. Default English `Increase`. */
+    incrementAriaLabel?: string
+    /** Override classes applied to the inner `<input>` element. */
+    inputClassName?: string
+  }
+
+export const CounterInput = React.forwardRef<HTMLInputElement, CounterInputProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size,
+      value: valueProp,
+      onChange,
+      min,
+      max,
+      step = 1,
+      precision = 0,
+      disabled = false,
+      placeholder,
+      decrementAriaLabel = 'Decrease',
+      incrementAriaLabel = 'Increase',
+      ...rest
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<number | null>(
+      valueProp ?? null,
+    )
+    const isControlled = valueProp !== undefined
+    const value = isControlled ? valueProp ?? null : internalValue
+
+    const factor = React.useMemo(() => 10 ** precision, [precision])
+
+    const clamp = React.useCallback(
+      (n: number) => {
+        let next = n
+        if (typeof min === 'number' && next < min) next = min
+        if (typeof max === 'number' && next > max) next = max
+        return Math.round(next * factor) / factor
+      },
+      [factor, max, min],
+    )
+
+    const commitValue = React.useCallback(
+      (next: number | null) => {
+        if (!isControlled) setInternalValue(next)
+        onChange?.(next)
+      },
+      [isControlled, onChange],
+    )
+
+    const formatNumber = React.useCallback(
+      (n: number) => (precision > 0 ? n.toFixed(precision) : String(n)),
+      [precision],
+    )
+
+    const adjust = React.useCallback(
+      (direction: 1 | -1) => {
+        const current = typeof value === 'number' ? value : 0
+        commitValue(clamp(current + direction * step))
+      },
+      [clamp, commitValue, step, value],
+    )
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const text = event.target.value
+      if (text === '' || text === '-') {
+        commitValue(null)
+        return
+      }
+      const parsed = Number(text)
+      if (!Number.isFinite(parsed)) return
+      commitValue(clamp(parsed))
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        adjust(1)
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        adjust(-1)
+      }
+    }
+
+    const incrementDisabled =
+      disabled || (typeof max === 'number' && value !== null && value >= max)
+    const decrementDisabled =
+      disabled || (typeof min === 'number' && value !== null && value <= min)
+
+    return (
+      <div
+        className={cn(counterWrapperVariants({ size }), className)}
+        data-slot="counter-input"
+      >
+        <button
+          type="button"
+          onClick={() => adjust(-1)}
+          disabled={decrementDisabled}
+          aria-label={decrementAriaLabel}
+          className={cn(counterButtonVariants({ size }))}
+          data-slot="counter-input-decrement"
+        >
+          <Minus aria-hidden="true" />
+        </button>
+        <input
+          ref={ref}
+          type="number"
+          inputMode="decimal"
+          value={value === null ? '' : formatNumber(value)}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          placeholder={placeholder}
+          min={min}
+          max={max}
+          step={step}
+          className={cn(counterInputElementVariants({ size }), inputClassName)}
+          {...rest}
+        />
+        <button
+          type="button"
+          onClick={() => adjust(1)}
+          disabled={incrementDisabled}
+          aria-label={incrementAriaLabel}
+          className={cn(counterButtonVariants({ size }))}
+          data-slot="counter-input-increment"
+        >
+          <Plus aria-hidden="true" />
+        </button>
+      </div>
+    )
+  },
+)
+
+CounterInput.displayName = 'CounterInput'

package/src/primitives/date-picker-helpers.ts

@@ -0,0 +1,96 @@
+import {
+  startOfDay,
+  endOfDay,
+  startOfMonth,
+  startOfYear,
+  subDays,
+  subMonths,
+  subYears,
+} from 'date-fns'
+import type { DateRange } from '../backend/date-range/dateRanges'
+
+export type DateRangePresetItem = {
+  id: string
+  labelKey: string
+  range: (referenceDate?: Date) => DateRange
+}
+
+/**
+ * Returns the canonical 8 date-range presets aligned with the Figma
+ * Range Picker spec (`446:7412` Period Range track).
+ *
+ * The list is intentionally shorter than `DATE_RANGE_OPTIONS` from
+ * `@open-mercato/ui/backend/date-range`: that constant powers
+ * dashboard/analytics modules with 13 presets (today, yesterday,
+ * this/last week/month/quarter/year, last 7/30/90 days), but the Figma
+ * Range Picker UI exposes 8 options optimised for filter UX (today plus
+ * sliding windows and month/year-to-date).
+ *
+ * Used by `<DateRangePicker>` as the default `presets` value.
+ */
+export function defaultDateRangePresets(): DateRangePresetItem[] {
+  return [
+    {
+      id: 'today',
+      labelKey: 'ui.dateRangePicker.presets.today',
+      range: (ref = new Date()) => ({ start: startOfDay(ref), end: endOfDay(ref) }),
+    },
+    {
+      id: 'last_7_days',
+      labelKey: 'ui.dateRangePicker.presets.last7Days',
+      range: (ref = new Date()) => ({
+        start: startOfDay(subDays(ref, 6)),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'last_30_days',
+      labelKey: 'ui.dateRangePicker.presets.last30Days',
+      range: (ref = new Date()) => ({
+        start: startOfDay(subDays(ref, 29)),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'last_3_months',
+      labelKey: 'ui.dateRangePicker.presets.last3Months',
+      range: (ref = new Date()) => ({
+        start: startOfDay(subMonths(ref, 3)),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'last_12_months',
+      labelKey: 'ui.dateRangePicker.presets.last12Months',
+      range: (ref = new Date()) => ({
+        start: startOfDay(subYears(ref, 1)),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'month_to_date',
+      labelKey: 'ui.dateRangePicker.presets.monthToDate',
+      range: (ref = new Date()) => ({
+        start: startOfMonth(ref),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'year_to_date',
+      labelKey: 'ui.dateRangePicker.presets.yearToDate',
+      range: (ref = new Date()) => ({
+        start: startOfYear(ref),
+        end: endOfDay(ref),
+      }),
+    },
+    {
+      id: 'all_time',
+      labelKey: 'ui.dateRangePicker.presets.allTime',
+      range: (ref = new Date()) => ({
+        // Symbolic "all time": from epoch to end of reference day.
+        start: new Date(0),
+        end: endOfDay(ref),
+      }),
+    },
+  ]
+}

package/src/primitives/date-picker.tsx

@@ -0,0 +1,290 @@
+"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 './popover'
+import { Calendar } from './calendar'
+import { Button } from './button'
+import { LinkButton } from './link-button'
+import { TimeInput } from '../backend/inputs/TimeInput'
+
+export type DatePickerFooter = 'apply-cancel' | 'today-clear' | 'none'
+
+export type DatePickerProps = {
+  value?: Date | null
+  onChange: (value: Date | null) => void
+  placeholder?: string
+  size?: 'sm' | 'default'
+  disabled?: boolean
+  readOnly?: boolean
+  /**
+   * Footer mode in the popover.
+   * - `'apply-cancel'` (default, Figma-aligned): selecting a day stages a draft;
+   *   Apply commits and closes; Cancel reverts and closes.
+   * - `'today-clear'`: legacy behavior — Today commits today, Clear sets null.
+   * - `'none'`: no footer; selecting a day commits immediately and closes.
+   */
+  footer?: DatePickerFooter
+  /**
+   * Whether selecting a day commits the value and closes the popover.
+   * - In `footer='apply-cancel'`: ignored (commit happens via Apply).
+   * - In `footer='today-clear'`: default `true` for backward compatibility.
+   * - In `footer='none'`: always `true` (popover always closes after selection).
+   */
+  closeOnSelect?: boolean
+  /**
+   * Whether to show the "Today" link in `footer='today-clear'` mode. Default `true`.
+   * Only meaningful when `footer='today-clear'`.
+   */
+  showTodayButton?: boolean
+  /**
+   * Whether to show the "Clear" link in `footer='today-clear'` mode. Default `true`.
+   * Only meaningful when `footer='today-clear'`.
+   */
+  showClearButton?: boolean
+  withTime?: boolean
+  minuteStep?: number
+  align?: 'start' | 'center' | 'end'
+  minDate?: Date
+  maxDate?: Date
+  locale?: Locale
+  displayFormat?: string
+  className?: string
+  popoverClassName?: string
+  id?: string
+  name?: string
+  required?: boolean
+  'aria-label'?: string
+  'aria-describedby'?: string
+}
+
+const DAY_FIRST_LOCALE_CODES = new Set([
+  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',
+])
+
+function deriveDisplayFormat(locale: Locale | undefined, withTime: boolean): string {
+  const code = locale?.code?.split('-')[0]?.toLowerCase() ?? ''
+  const dateFmt = code && DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'
+  return withTime ? `${dateFmt} HH:mm` : dateFmt
+}
+
+function extractTime(date: Date): string {
+  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+function applyTimeToDate(base: Date, time: string): Date {
+  const [hourStr = '0', minuteStr = '0'] = time.split(':')
+  const hour = parseInt(hourStr, 10)
+  const minute = parseInt(minuteStr, 10)
+  const next = new Date(base)
+  next.setHours(isNaN(hour) ? 0 : hour, isNaN(minute) ? 0 : minute, 0, 0)
+  return next
+}
+
+function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder,
+  size = 'default',
+  disabled = false,
+  readOnly = false,
+  footer = 'apply-cancel',
+  closeOnSelect,
+  showTodayButton = true,
+  showClearButton = true,
+  withTime = false,
+  minuteStep = 1,
+  align = 'start',
+  minDate,
+  maxDate,
+  locale,
+  displayFormat,
+  className,
+  popoverClassName,
+  id,
+  name,
+  required,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+}: DatePickerProps) {
+  const resolvedCloseOnSelect = closeOnSelect ?? footer === 'today-clear'
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<Date | null>(value ?? null)
+
+  const isInteractive = !disabled && !readOnly
+  const useDraft = footer === 'apply-cancel'
+
+  React.useEffect(() => {
+    if (open) setDraft(value ?? null)
+  }, [open, value])
+
+  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale, withTime)
+  const placeholderText = placeholder ?? (
+    withTime
+      ? t('ui.dateTimePicker.placeholder', 'Pick date and time')
+      : t('ui.datePicker.placeholder', 'Pick a date')
+  )
+
+  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 || !isInteractive) return
+      const reference = withTime ? (useDraft ? draft : value) : null
+      const base = withTime
+        ? applyTimeToDate(day, reference ? extractTime(reference) : '00:00')
+        : startOfDay(day)
+      if (useDraft) {
+        setDraft(base)
+      } else {
+        onChange(base)
+        if (footer === 'none' || resolvedCloseOnSelect) setOpen(false)
+      }
+    },
+    [isInteractive, withTime, useDraft, draft, value, footer, resolvedCloseOnSelect, onChange],
+  )
+
+  const handleTimeChange = React.useCallback(
+    (time: string) => {
+      const target = useDraft ? draft : value
+      if (!target) return
+      const next = applyTimeToDate(target, time)
+      if (useDraft) setDraft(next)
+      else onChange(next)
+    },
+    [useDraft, draft, value, onChange],
+  )
+
+  const handleApply = React.useCallback(() => {
+    onChange(draft)
+    setOpen(false)
+  }, [draft, onChange])
+
+  const handleCancel = React.useCallback(() => {
+    setDraft(value ?? null)
+    setOpen(false)
+  }, [value])
+
+  const handleToday = React.useCallback(() => {
+    const today = withTime ? new Date() : startOfDay(new Date())
+    onChange(today)
+    setOpen(false)
+  }, [withTime, onChange])
+
+  const handleClear = React.useCallback(() => {
+    onChange(null)
+    setOpen(false)
+  }, [onChange])
+
+  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])
+
+  const heightClass = size === 'sm' ? 'h-8 px-2.5 text-xs' : 'h-9 px-3 text-sm'
+  const selectedDate = useDraft ? draft : value
+
+  return (
+    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          id={id}
+          name={name}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-haspopup="dialog"
+          aria-required={required ? true : undefined}
+          data-crud-focus-target=""
+          data-slot="date-picker-trigger"
+          disabled={disabled}
+          className={cn(
+            'w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left',
+            'focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground',
+            'hover:bg-muted/40',
+            'disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed',
+            'aria-invalid:border-destructive',
+            heightClass,
+            readOnly && 'cursor-default opacity-70',
+            !formattedValue && 'text-muted-foreground',
+            className,
+          )}
+          onClick={isInteractive ? undefined : (event) => event.preventDefault()}
+        >
+          <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+          <span className="flex-1 truncate">
+            {formattedValue ?? placeholderText}
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align={align} className={cn('w-auto p-0', popoverClassName)}>
+        <Calendar
+          mode="single"
+          selected={selectedDate ?? undefined}
+          onSelect={handleDaySelect}
+          locale={locale}
+          disabled={disabledMatcher}
+          initialFocus
+        />
+        {withTime && (
+          <div className="flex items-center gap-2 border-t px-3 py-2">
+            <span className="text-sm text-muted-foreground shrink-0">
+              {t('ui.datePicker.timeLabel', 'Time')}:
+            </span>
+            <TimeInput
+              value={selectedDate ? extractTime(selectedDate) : undefined}
+              onChange={handleTimeChange}
+              minuteStep={minuteStep}
+              disabled={!isInteractive || !selectedDate}
+            />
+          </div>
+        )}
+        {footer === 'apply-cancel' && (
+          <div className="flex items-center justify-end gap-2 border-t px-3 py-2">
+            <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
+              {t('ui.datePicker.cancelButton', 'Cancel')}
+            </Button>
+            <Button type="button" size="sm" onClick={handleApply}>
+              {t('ui.datePicker.applyButton', 'Apply')}
+            </Button>
+          </div>
+        )}
+        {footer === 'today-clear' && (showTodayButton || showClearButton) && (
+          <div className="flex items-center justify-between gap-2 border-t px-3 py-2">
+            {showTodayButton ? (
+              <LinkButton type="button" variant="primary" onClick={handleToday}>
+                {t('ui.datePicker.todayButton', 'Today')}
+              </LinkButton>
+            ) : null}
+            {showClearButton ? (
+              <LinkButton type="button" variant="gray" onClick={handleClear} className="ml-auto">
+                {t('ui.datePicker.clearButton', 'Clear')}
+              </LinkButton>
+            ) : null}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}