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

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

@@ -0,0 +1,281 @@
+"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 type { DateRange as RDPRange } from 'react-day-picker'
+import type { DateRange } from '../backend/date-range/dateRanges'
+import {
+  defaultDateRangePresets,
+  type DateRangePresetItem,
+} from './date-picker-helpers'
+
+export type { DateRangePresetItem } from './date-picker-helpers'
+
+export type DateRangePickerProps = {
+  value?: DateRange | null
+  onChange: (value: DateRange | null) => void
+  presets?: DateRangePresetItem[]
+  showPresets?: boolean
+  placeholder?: string
+  size?: 'sm' | 'default'
+  disabled?: boolean
+  readOnly?: boolean
+  withFooter?: boolean
+  align?: 'start' | 'center' | 'end'
+  minDate?: Date
+  maxDate?: Date
+  numberOfMonths?: 1 | 2
+  locale?: Locale
+  formatRange?: (value: DateRange, locale?: Locale) => 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 deriveDateFormat(locale?: Locale): string {
+  const code = locale?.code?.split('-')[0]?.toLowerCase() ?? ''
+  return code && DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'
+}
+
+function defaultFormatRange(range: DateRange, locale?: Locale): string {
+  const fmt = deriveDateFormat(locale)
+  const opts = locale ? { locale } : undefined
+  return `${format(range.start, fmt, opts)} – ${format(range.end, fmt, opts)}`
+}
+
+function toRDPRange(range: DateRange | null | undefined): RDPRange | undefined {
+  if (!range) return undefined
+  return { from: range.start, to: range.end }
+}
+
+function fromRDPRange(rdp: RDPRange | undefined): DateRange | null {
+  if (!rdp || !rdp.from) return null
+  return { start: rdp.from, end: rdp.to ?? rdp.from }
+}
+
+function rangesEqual(a: DateRange | null, b: DateRange | null): boolean {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return a.start.getTime() === b.start.getTime() && a.end.getTime() === b.end.getTime()
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  presets,
+  showPresets = true,
+  placeholder,
+  size = 'default',
+  disabled = false,
+  readOnly = false,
+  withFooter = true,
+  align = 'start',
+  minDate,
+  maxDate,
+  numberOfMonths = 2,
+  locale,
+  formatRange,
+  className,
+  popoverClassName,
+  id,
+  name,
+  required,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+}: DateRangePickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<DateRange | null>(value ?? null)
+  const [activePresetId, setActivePresetId] = React.useState<string | null>(null)
+
+  const isInteractive = !disabled && !readOnly
+  const useDraft = withFooter
+
+  React.useEffect(() => {
+    if (open) {
+      setDraft(value ?? null)
+      setActivePresetId(null)
+    }
+  }, [open, value])
+
+  const resolvedPresets = React.useMemo<DateRangePresetItem[]>(
+    () => presets ?? defaultDateRangePresets(),
+    [presets],
+  )
+
+  const placeholderText = placeholder ?? t('ui.dateRangePicker.placeholder', 'Pick a date range')
+  const formatter = formatRange ?? defaultFormatRange
+  const formattedValue = React.useMemo(() => {
+    if (!value) return null
+    return formatter(value, locale)
+  }, [value, formatter, locale])
+
+  const selectedDate = useDraft ? draft : value
+  const rdpSelected = toRDPRange(selectedDate)
+
+  const handleRangeSelect = React.useCallback(
+    (rdpRange: RDPRange | undefined) => {
+      if (!isInteractive) return
+      const next = fromRDPRange(rdpRange)
+      setActivePresetId(null)
+      if (useDraft) {
+        setDraft(next)
+      } else {
+        onChange(next)
+        if (next?.start && next?.end) setOpen(false)
+      }
+    },
+    [isInteractive, useDraft, onChange],
+  )
+
+  const handlePresetClick = React.useCallback(
+    (preset: DateRangePresetItem) => {
+      if (!isInteractive) return
+      const range = preset.range()
+      setActivePresetId(preset.id)
+      if (useDraft) {
+        setDraft(range)
+      } else {
+        onChange(range)
+        setOpen(false)
+      }
+    },
+    [isInteractive, useDraft, onChange],
+  )
+
+  const handleApply = React.useCallback(() => {
+    onChange(draft)
+    setOpen(false)
+  }, [draft, onChange])
+
+  const handleCancel = React.useCallback(() => {
+    setDraft(value ?? null)
+    setActivePresetId(null)
+    setOpen(false)
+  }, [value])
+
+  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'
+
+  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-range-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 flex flex-col overflow-hidden',
+          'max-h-[var(--radix-popover-content-available-height)]',
+          popoverClassName,
+        )}
+      >
+        <div className="flex min-h-0 flex-1 overflow-auto">
+          {showPresets ? (
+            <div
+              data-slot="date-range-presets"
+              className="flex w-[200px] shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2"
+            >
+              {resolvedPresets.map((preset) => {
+                const isActive = activePresetId === preset.id
+                return (
+                  <button
+                    key={preset.id}
+                    type="button"
+                    onClick={() => handlePresetClick(preset)}
+                    className={cn(
+                      'inline-flex h-8 items-center rounded-md px-3 text-left text-sm transition-colors shrink-0',
+                      'hover:bg-accent hover:text-accent-foreground',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                      isActive && 'bg-muted font-medium text-foreground',
+                    )}
+                  >
+                    {t(preset.labelKey, preset.id.replace(/_/g, ' '))}
+                  </button>
+                )
+              })}
+            </div>
+          ) : null}
+          <div className="p-3">
+            <Calendar
+              mode="range"
+              selected={rdpSelected}
+              onSelect={handleRangeSelect}
+              locale={locale}
+              disabled={disabledMatcher}
+              numberOfMonths={numberOfMonths}
+              initialFocus
+            />
+          </div>
+        </div>
+        {withFooter ? (
+          <div className="flex shrink-0 items-center justify-between gap-3 border-t bg-popover px-3 py-2">
+            <span className="truncate text-xs text-muted-foreground">
+              {selectedDate
+                ? `${t('ui.dateRangePicker.rangeLabel', 'Range')}: ${formatter(selectedDate, locale)}`
+                : t('ui.dateRangePicker.rangeEmpty', 'No range selected')}
+            </span>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
+                {t('ui.dateRangePicker.cancelButton', 'Cancel')}
+              </Button>
+              <Button type="button" size="sm" onClick={handleApply}>
+                {t('ui.dateRangePicker.applyButton', 'Apply')}
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/primitives/digit-input.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type DigitInputProps = {
+  value?: string
+  onChange?: (value: string) => void
+  /** Number of cells. Default `6`. */
+  length?: number
+  disabled?: boolean
+  autoFocus?: boolean
+  /** Restrict input characters. `'numeric'` filters out non-digits. */
+  inputMode?: 'numeric' | 'text'
+  /** Render each cell as a password input so characters appear as bullets. */
+  mask?: boolean
+  /** Fires when all `length` cells are filled. */
+  onComplete?: (value: string) => void
+  /** Override classes for the cell row wrapper. */
+  className?: string
+  /** Override classes applied to each cell `<input>`. */
+  cellClassName?: string
+  /** aria-label applied to the role=group wrapper. Defaults to `Verification code`. */
+  'aria-label'?: string
+  /** Indicates that the group's current value fails validation (mirrors Input's aria-invalid styling). */
+  'aria-invalid'?: boolean
+  /** Forwarded to the first cell so consumers can label the entire group with `<label htmlFor>`. */
+  id?: string
+  /** Forwarded to the first cell so form submissions carry the assembled value. */
+  name?: string
+}
+
+/**
+ * `length`-cell verification code input. Pasting a string distributes
+ * characters across cells and fires `onComplete` when all cells are filled.
+ * Backspace on an empty cell focuses the previous cell. ArrowLeft /
+ * ArrowRight move focus without committing values.
+ *
+ * The `value` prop is the assembled string (e.g. `'123456'`) — cells are an
+ * internal layout concern, not part of the contract. Same as `Input`,
+ * `mask` is purely visual (`type='password'` swap) so consumers always
+ * receive the raw characters in `onChange` / `onComplete`.
+ */
+export const DigitInput = React.forwardRef<HTMLInputElement, DigitInputProps>(
+  (
+    {
+      value: valueProp,
+      onChange,
+      length = 6,
+      disabled = false,
+      autoFocus = false,
+      inputMode = 'numeric',
+      mask = false,
+      onComplete,
+      className,
+      cellClassName,
+      'aria-label': ariaLabel,
+      'aria-invalid': ariaInvalid,
+      id,
+      name,
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = React.useState('')
+    const isControlled = valueProp !== undefined
+    const value = isControlled ? valueProp ?? '' : internalValue
+    const cellRefs = React.useRef<Array<HTMLInputElement | null>>([])
+
+    React.useImperativeHandle(
+      ref,
+      () => (cellRefs.current[0] ?? null) as HTMLInputElement,
+      [],
+    )
+
+    const setCellRef = React.useCallback(
+      (index: number) => (el: HTMLInputElement | null) => {
+        cellRefs.current[index] = el
+      },
+      [],
+    )
+
+    const commitValue = React.useCallback(
+      (next: string) => {
+        const clamped = next.slice(0, length)
+        if (!isControlled) setInternalValue(clamped)
+        onChange?.(clamped)
+        if (clamped.length === length && onComplete) onComplete(clamped)
+      },
+      [isControlled, length, onChange, onComplete],
+    )
+
+    const filterChar = React.useCallback(
+      (char: string): string | null => {
+        if (inputMode === 'numeric' && !/^\d$/.test(char)) return null
+        return char
+      },
+      [inputMode],
+    )
+
+    const focusCell = React.useCallback(
+      (index: number) => {
+        const target = cellRefs.current[Math.max(0, Math.min(length - 1, index))]
+        if (target) target.focus()
+      },
+      [length],
+    )
+
+    const handleCellChange = React.useCallback(
+      (index: number, raw: string) => {
+        if (raw.length === 0) {
+          const next = value.slice(0, index) + value.slice(index + 1)
+          commitValue(next)
+          return
+        }
+        const lastChar = raw.slice(-1)
+        const filtered = filterChar(lastChar)
+        if (filtered === null) return
+        const next = value.slice(0, index) + filtered + value.slice(index + 1)
+        commitValue(next)
+        if (index < length - 1) focusCell(index + 1)
+      },
+      [commitValue, filterChar, focusCell, length, value],
+    )
+
+    const handleKeyDown = React.useCallback(
+      (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Backspace') {
+          if (event.currentTarget.value === '' && index > 0) {
+            event.preventDefault()
+            const next = value.slice(0, index - 1) + value.slice(index)
+            commitValue(next)
+            focusCell(index - 1)
+          }
+        } else if (event.key === 'ArrowLeft' && index > 0) {
+          event.preventDefault()
+          focusCell(index - 1)
+        } else if (event.key === 'ArrowRight' && index < length - 1) {
+          event.preventDefault()
+          focusCell(index + 1)
+        }
+      },
+      [commitValue, focusCell, length, value],
+    )
+
+    const handlePaste = React.useCallback(
+      (event: React.ClipboardEvent<HTMLInputElement>) => {
+        event.preventDefault()
+        const pasted = event.clipboardData.getData('text/plain')
+        const filtered = pasted
+          .split('')
+          .map(filterChar)
+          .filter((c): c is string => c !== null)
+          .join('')
+          .slice(0, length)
+        if (filtered.length === 0) return
+        commitValue(filtered)
+        const focusIndex = Math.min(filtered.length, length - 1)
+        focusCell(focusIndex)
+      },
+      [commitValue, filterChar, focusCell, length],
+    )
+
+    return (
+      <div
+        className={cn('flex items-center gap-2', className)}
+        role="group"
+        aria-label={ariaLabel ?? 'Verification code'}
+        aria-invalid={ariaInvalid || undefined}
+        data-slot="digit-input"
+      >
+        {Array.from({ length }, (_, index) => {
+          const cellValue = value[index] ?? ''
+          return (
+            <input
+              key={index}
+              ref={setCellRef(index)}
+              id={index === 0 ? id : undefined}
+              name={index === 0 ? name : undefined}
+              type={mask ? 'password' : 'text'}
+              inputMode={inputMode === 'numeric' ? 'numeric' : 'text'}
+              autoComplete="one-time-code"
+              maxLength={1}
+              autoFocus={autoFocus && index === 0}
+              value={cellValue}
+              onChange={(event) => handleCellChange(index, event.target.value)}
+              onKeyDown={handleKeyDown(index)}
+              onPaste={handlePaste}
+              disabled={disabled}
+              aria-label={`${ariaLabel ?? 'Verification code'} digit ${index + 1}`}
+              aria-invalid={ariaInvalid || undefined}
+              data-slot="digit-input-cell"
+              data-index={index}
+              className={cn(
+                'h-16 w-12 sm:w-14 rounded-[10px] border border-input bg-background text-center text-2xl font-medium shadow-xs transition-colors',
+                'focus:outline-none focus-visible:border-foreground focus-visible:shadow-focus',
+                'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive',
+                'disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none',
+                'hover:bg-muted/40',
+                cellClassName,
+              )}
+            />
+          )
+        })}
+      </div>
+    )
+  },
+)
+DigitInput.displayName = 'DigitInput'

package/src/primitives/empty-state.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Plus } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from './button'
+
+const emptyStateVariants = cva(
+  'flex flex-col items-center justify-center text-center',
+  {
+    variants: {
+      size: {
+        sm: 'gap-2 px-4 py-6',
+        default: 'gap-3 px-6 py-10',
+        lg: 'gap-4 px-8 py-16',
+      },
+      variant: {
+        default: 'rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30',
+        subtle: 'rounded-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+)
+
+const titleVariants = cva('font-medium text-foreground', {
+  variants: {
+    size: {
+      sm: 'text-sm',
+      default: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: { size: 'default' },
+})
+
+type LegacyAction = {
+  label: string
+  onClick?: () => void
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+export type EmptyStateProps = VariantProps<typeof emptyStateVariants> & {
+  title: string
+  description?: string
+  /** Custom action node — preferred for new code (e.g. `<Button>` or button group). */
+  actions?: React.ReactNode
+  /**
+   * Optional Figma-style illustration (preferred for new code) — typically a
+   * scaled SVG sourced from the DS Open Mercato illustrations library. When
+   * provided, takes precedence over `icon`. Rendered without any icon-box
+   * wrapping so the illustration's own circular background shows through.
+   */
+  illustration?: React.ReactNode
+  /** Optional leading icon. With `variant="subtle"` it is wrapped in a round muted box; with default variant it sits inline tinted as muted-foreground. Ignored when `illustration` is provided. */
+  icon?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
+  /** @deprecated Use `actions` with a `<Button>` instead. Legacy object kept for backwards compat with the old backend EmptyState. */
+  action?: LegacyAction
+  /** @deprecated Use `actions` with a `<Button>`. */
+  actionLabel?: string
+  /** @deprecated Use `actions` with a `<Button>`. */
+  onAction?: () => void
+  /** @deprecated Kept for legacy backend EmptyState consumers. Forwarded to the auto-generated action button. */
+  actionLabelClassName?: string
+}
+
+export function EmptyState({
+  size = 'default',
+  variant = 'default',
+  title,
+  description,
+  actions,
+  illustration,
+  icon,
+  className,
+  children,
+  action,
+  actionLabel,
+  onAction,
+  actionLabelClassName,
+}: EmptyStateProps) {
+  const legacyAction = action ?? (actionLabel ? { label: actionLabel, onClick: onAction } : undefined)
+  const renderLegacyButton = !actions && legacyAction
+  const iconBoxSize = size === 'sm' ? 'size-10' : size === 'lg' ? 'size-16' : 'size-12'
+
+  return (
+    <div className={cn(emptyStateVariants({ size, variant }), className)} data-slot="empty-state">
+      {illustration ? (
+        <div className="flex items-center justify-center" aria-hidden="true">
+          {illustration}
+        </div>
+      ) : icon ? (
+        variant === 'subtle' ? (
+          <div
+            className={cn(
+              'flex items-center justify-center rounded-full bg-muted text-muted-foreground',
+              iconBoxSize,
+            )}
+            aria-hidden="true"
+          >
+            {icon}
+          </div>
+        ) : (
+          <div className="text-muted-foreground" aria-hidden="true">
+            {icon}
+          </div>
+        )
+      ) : null}
+      <div className="space-y-1">
+        <p className={cn(titleVariants({ size }))}>{title}</p>
+        {description ? (
+          <p className="mx-auto max-w-sm text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {children}
+      {actions ?? (renderLegacyButton ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={legacyAction!.onClick}
+          className={cn('inline-flex items-center gap-2 text-foreground', actionLabelClassName)}
+          disabled={legacyAction!.disabled}
+        >
+          {legacyAction!.icon ?? <Plus className="h-4 w-4" aria-hidden="true" />}
+          <span>{legacyAction!.label}</span>
+        </Button>
+      ) : null)}
+    </div>
+  )
+}
+
+export { emptyStateVariants }

package/src/primitives/inline-input.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Input, type InputProps } from './input'
+
+export type InlineInputProps = Omit<InputProps, 'size'> & {
+  /**
+   * Trigger size. `sm` (h-8) is the default — inline editors are typically
+   * embedded inside dense rows. Pass `'default'` (h-9) when the editor sits
+   * alongside other h-9 controls.
+   */
+  size?: 'sm' | 'default'
+  /**
+   * Render a subtle input border on hover so the affordance is discoverable.
+   * Default `true`. Set to `false` for editors that should remain visually
+   * invisible until focused (e.g. plain text cells inside read-only-looking
+   * card layouts).
+   */
+  showBorderOnHover?: boolean
+}
+
+/**
+ * Borderless variant of `Input`. At rest the field looks like plain text
+ * (no border, no background, no shadow). Hover reveals a subtle border via
+ * `showBorderOnHover` (default `true`); focus always reveals the standard
+ * `border-foreground` + focus shadow inherited from the underlying `Input`
+ * wrapper for accessibility.
+ *
+ * Forwards every `Input` prop (placeholder, value, onChange, type, etc.).
+ * Consumers wire `onBlur` for the "save on blur" pattern typical of inline
+ * editors.
+ */
+export const InlineInput = React.forwardRef<HTMLInputElement, InlineInputProps>(
+  (
+    { className, inputClassName, size = 'sm', showBorderOnHover = true, ...rest },
+    ref,
+  ) => {
+    return (
+      <Input
+        ref={ref}
+        size={size}
+        className={cn(
+          'border-transparent bg-transparent shadow-none',
+          showBorderOnHover ? 'hover:border-input hover:bg-muted/40' : 'hover:bg-transparent',
+          className,
+        )}
+        inputClassName={inputClassName}
+        data-slot="inline-input"
+        {...rest}
+      />
+    )
+  },
+)
+InlineInput.displayName = 'InlineInput'