DatePicker ​

import type { Dayjs } from 'dayjs/esm'
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

// Re-exported, not redeclared: `index.ts` does `export * from './types'`, so a
// local copy publishes a second structurally identical `PopoverSide` at the
// package root that can drift from `Popover`'s without a compile error.
import type { PopoverAlign, PopoverSide } from '../Popover/types'
export type { PopoverAlign, PopoverSide }

// Shared props for both single date and range pickers
export interface CommonDatePickerProps extends InputLabelingProps {
  // Positioning — aligned with Combobox/Dropdown vocabulary
  /** Preferred popover side relative to the trigger. */
  side?: PopoverSide

  /** Alignment of the popover along the trigger edge. */
  align?: PopoverAlign

  /** Gap between the trigger and popover content in pixels. */
  offset?: number

  // Display
  /** Display format used for the input text. */
  format?: string

  /** Size of the trigger input. */
  size?: InputSize

  /** Visual style variant passed through to the input. */
  variant?: InputVariant

  /** Placeholder text shown when no value is selected. */
  placeholder?: string

  // Interaction
  /** Controls popover open state (for controlled usage). */
  open?: boolean

  /** Opens the popover when the input receives focus. Default: false. */
  openOnFocus?: boolean

  /** Opens the popover when the input is clicked. Default: true. */
  openOnClick?: boolean

  /**
   * Whether the trigger input accepts typed input. When `false` the user can
   * still open the popover and pick a date, but cannot type a date manually.
   * Default: `true`.
   */
  typeable?: boolean

  /** Disables the trigger input and calendar interactions. */
  disabled?: boolean

  /** Shows clear and quick-action controls when enabled. */
  clearable?: boolean

  /** Keeps the popover open after a date is selected. Default: false. */
  keepOpen?: boolean

  // Constraints
  /**
   * Earliest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  min?: string

  /**
   * Latest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  max?: string

  /** Return true to prevent a date from being selected. Combined with `min`/`max`. */
  isDateUnavailable?: (date: Dayjs) => boolean
}

export interface DatePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

/** A range value: a `[from, to]` tuple in `YYYY-MM-DD` format, or `[]` when cleared. */
export type DateRangeValue = [string, string] | []

export interface DateRangePickerProps extends CommonDatePickerProps {
  /**
   * Controlled range value as `[from, to]` in `YYYY-MM-DD` format, or `[]` for
   * no selection. `DateRangeValue` types both sides of `v-model` (INP-Q12): the
   * prop was `string[]`, which let a one-element array in and made a round-trip
   * through the model fail to type-check.
   */
  modelValue?: DateRangeValue

  /** Render two calendar panels side by side (current month + next month). */
  dualPane?: boolean
}

export type DatePickerEmits = {
  /** Fired when the picker value changes. */
  (event: 'update:modelValue', value: string): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized value. */
  (event: 'change', value: string): void
}

export type DateRangePickerEmits = {
  /** Fired when the range value changes. Emits `[from, to]` or `[]` when cleared. */
  (event: 'update:modelValue', value: DateRangeValue): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized range value. */
  (event: 'change', value: DateRangeValue): void
}

export interface DateTimePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

export type DateTimePickerEmits = DatePickerEmits

// ── Slot prop shapes ─────────────────────────────────────────────────────────

/** Props bound to the trigger / prefix / suffix slots on all three pickers. */
export interface DatePickerTriggerSlotProps {
  /** Whether the popover is currently open. */
  open: boolean
  /** Whether the picker is disabled. */
  disabled: boolean
  /** Sets the popover open state. */
  setOpen: (value: boolean) => void
  /** Closes the popover. Equivalent to `setOpen(false)`. */
  close: () => void
  displayLabel: string
  inputValue: string
}

/** Props bound to the `actions` slot on `DatePicker`. */
export interface DatePickerActionsSlotProps {
  selected: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateRangePicker`. */
export interface DateRangePickerActionsSlotProps {
  fromDate: string
  toDate: string
  /**
   * Commits one endpoint, mirroring a calendar cell click:
   * first call sets `from`, second call sets `to`.
   */
  setDate: (date: string | Date | Dayjs) => void
  /**
   * Commits both endpoints atomically. Normalizes order so the earlier
   * date becomes `from`. Use for fixed-window presets ("Last 7 days").
   */
  setRange: (range: [string | Date | Dayjs, string | Date | Dayjs]) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateTimePicker`. */
export interface DateTimePickerActionsSlotProps {
  selected: string
  time: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

export interface DatePickerSlots {
  /** Custom trigger renderer for the picker. */
  trigger?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered before the trigger input value. */
  prefix?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered after the trigger input value. */
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date shortcuts
   * ("Today", "Tomorrow", "Last 7 days") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DatePickerActionsSlotProps) => any
}

export interface DateRangePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for range shortcuts
   * ("Last 7 days", "Last 12 months") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DateRangePickerActionsSlotProps) => any
}

export interface DateTimePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date-time
   * shortcuts ("Now", "Tomorrow 9am") and other preset actions. When
   * omitted, the popover shows the calendar and time picker only.
   */
  actions?: (props: DateTimePickerActionsSlotProps) => any
}

export type DatePickerViewMode = 'date' | 'monthYear'

export interface DatePickerDateObj {
  date: Dayjs
  key: string
  inMonth: boolean
  isToday: boolean
  isSelected: boolean
}

import type { Dayjs } from 'dayjs/esm'
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

// Re-exported, not redeclared: `index.ts` does `export * from './types'`, so a
// local copy publishes a second structurally identical `PopoverSide` at the
// package root that can drift from `Popover`'s without a compile error.
import type { PopoverAlign, PopoverSide } from '../Popover/types'
export type { PopoverAlign, PopoverSide }

// Shared props for both single date and range pickers
export interface CommonDatePickerProps extends InputLabelingProps {
  // Positioning — aligned with Combobox/Dropdown vocabulary
  /** Preferred popover side relative to the trigger. */
  side?: PopoverSide

  /** Alignment of the popover along the trigger edge. */
  align?: PopoverAlign

  /** Gap between the trigger and popover content in pixels. */
  offset?: number

  // Display
  /** Display format used for the input text. */
  format?: string

  /** Size of the trigger input. */
  size?: InputSize

  /** Visual style variant passed through to the input. */
  variant?: InputVariant

  /** Placeholder text shown when no value is selected. */
  placeholder?: string

  // Interaction
  /** Controls popover open state (for controlled usage). */
  open?: boolean

  /** Opens the popover when the input receives focus. Default: false. */
  openOnFocus?: boolean

  /** Opens the popover when the input is clicked. Default: true. */
  openOnClick?: boolean

  /**
   * Whether the trigger input accepts typed input. When `false` the user can
   * still open the popover and pick a date, but cannot type a date manually.
   * Default: `true`.
   */
  typeable?: boolean

  /** Disables the trigger input and calendar interactions. */
  disabled?: boolean

  /** Shows clear and quick-action controls when enabled. */
  clearable?: boolean

  /** Keeps the popover open after a date is selected. Default: false. */
  keepOpen?: boolean

  // Constraints
  /**
   * Earliest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  min?: string

  /**
   * Latest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  max?: string

  /** Return true to prevent a date from being selected. Combined with `min`/`max`. */
  isDateUnavailable?: (date: Dayjs) => boolean
}

export interface DatePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

/** A range value: a `[from, to]` tuple in `YYYY-MM-DD` format, or `[]` when cleared. */
export type DateRangeValue = [string, string] | []

export interface DateRangePickerProps extends CommonDatePickerProps {
  /**
   * Controlled range value as `[from, to]` in `YYYY-MM-DD` format, or `[]` for
   * no selection. `DateRangeValue` types both sides of `v-model` (INP-Q12): the
   * prop was `string[]`, which let a one-element array in and made a round-trip
   * through the model fail to type-check.
   */
  modelValue?: DateRangeValue

  /** Render two calendar panels side by side (current month + next month). */
  dualPane?: boolean
}

export type DatePickerEmits = {
  /** Fired when the picker value changes. */
  (event: 'update:modelValue', value: string): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized value. */
  (event: 'change', value: string): void
}

export type DateRangePickerEmits = {
  /** Fired when the range value changes. Emits `[from, to]` or `[]` when cleared. */
  (event: 'update:modelValue', value: DateRangeValue): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized range value. */
  (event: 'change', value: DateRangeValue): void
}

export interface DateTimePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

export type DateTimePickerEmits = DatePickerEmits

// ── Slot prop shapes ─────────────────────────────────────────────────────────

/** Props bound to the trigger / prefix / suffix slots on all three pickers. */
export interface DatePickerTriggerSlotProps {
  /** Whether the popover is currently open. */
  open: boolean
  /** Whether the picker is disabled. */
  disabled: boolean
  /** Sets the popover open state. */
  setOpen: (value: boolean) => void
  /** Closes the popover. Equivalent to `setOpen(false)`. */
  close: () => void
  displayLabel: string
  inputValue: string
}

/** Props bound to the `actions` slot on `DatePicker`. */
export interface DatePickerActionsSlotProps {
  selected: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateRangePicker`. */
export interface DateRangePickerActionsSlotProps {
  fromDate: string
  toDate: string
  /**
   * Commits one endpoint, mirroring a calendar cell click:
   * first call sets `from`, second call sets `to`.
   */
  setDate: (date: string | Date | Dayjs) => void
  /**
   * Commits both endpoints atomically. Normalizes order so the earlier
   * date becomes `from`. Use for fixed-window presets ("Last 7 days").
   */
  setRange: (range: [string | Date | Dayjs, string | Date | Dayjs]) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateTimePicker`. */
export interface DateTimePickerActionsSlotProps {
  selected: string
  time: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

export interface DatePickerSlots {
  /** Custom trigger renderer for the picker. */
  trigger?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered before the trigger input value. */
  prefix?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered after the trigger input value. */
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date shortcuts
   * ("Today", "Tomorrow", "Last 7 days") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DatePickerActionsSlotProps) => any
}

export interface DateRangePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for range shortcuts
   * ("Last 7 days", "Last 12 months") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DateRangePickerActionsSlotProps) => any
}

export interface DateTimePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date-time
   * shortcuts ("Now", "Tomorrow 9am") and other preset actions. When
   * omitted, the popover shows the calendar and time picker only.
   */
  actions?: (props: DateTimePickerActionsSlotProps) => any
}

export type DatePickerViewMode = 'date' | 'monthYear'

export interface DatePickerDateObj {
  date: Dayjs
  key: string
  inMonth: boolean
  isToday: boolean
  isSelected: boolean
}

import type { Dayjs } from 'dayjs/esm'
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

// Re-exported, not redeclared: `index.ts` does `export * from './types'`, so a
// local copy publishes a second structurally identical `PopoverSide` at the
// package root that can drift from `Popover`'s without a compile error.
import type { PopoverAlign, PopoverSide } from '../Popover/types'
export type { PopoverAlign, PopoverSide }

// Shared props for both single date and range pickers
export interface CommonDatePickerProps extends InputLabelingProps {
  // Positioning — aligned with Combobox/Dropdown vocabulary
  /** Preferred popover side relative to the trigger. */
  side?: PopoverSide

  /** Alignment of the popover along the trigger edge. */
  align?: PopoverAlign

  /** Gap between the trigger and popover content in pixels. */
  offset?: number

  // Display
  /** Display format used for the input text. */
  format?: string

  /** Size of the trigger input. */
  size?: InputSize

  /** Visual style variant passed through to the input. */
  variant?: InputVariant

  /** Placeholder text shown when no value is selected. */
  placeholder?: string

  // Interaction
  /** Controls popover open state (for controlled usage). */
  open?: boolean

  /** Opens the popover when the input receives focus. Default: false. */
  openOnFocus?: boolean

  /** Opens the popover when the input is clicked. Default: true. */
  openOnClick?: boolean

  /**
   * Whether the trigger input accepts typed input. When `false` the user can
   * still open the popover and pick a date, but cannot type a date manually.
   * Default: `true`.
   */
  typeable?: boolean

  /** Disables the trigger input and calendar interactions. */
  disabled?: boolean

  /** Shows clear and quick-action controls when enabled. */
  clearable?: boolean

  /** Keeps the popover open after a date is selected. Default: false. */
  keepOpen?: boolean

  // Constraints
  /**
   * Earliest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  min?: string

  /**
   * Latest selectable date. Accepts `YYYY-MM-DD` (or, for `DateTimePicker`,
   * `YYYY-MM-DD HH:mm:ss` for second-level granularity).
   */
  max?: string

  /** Return true to prevent a date from being selected. Combined with `min`/`max`. */
  isDateUnavailable?: (date: Dayjs) => boolean
}

export interface DatePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

/** A range value: a `[from, to]` tuple in `YYYY-MM-DD` format, or `[]` when cleared. */
export type DateRangeValue = [string, string] | []

export interface DateRangePickerProps extends CommonDatePickerProps {
  /**
   * Controlled range value as `[from, to]` in `YYYY-MM-DD` format, or `[]` for
   * no selection. `DateRangeValue` types both sides of `v-model` (INP-Q12): the
   * prop was `string[]`, which let a one-element array in and made a round-trip
   * through the model fail to type-check.
   */
  modelValue?: DateRangeValue

  /** Render two calendar panels side by side (current month + next month). */
  dualPane?: boolean
}

export type DatePickerEmits = {
  /** Fired when the picker value changes. */
  (event: 'update:modelValue', value: string): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized value. */
  (event: 'change', value: string): void
}

export type DateRangePickerEmits = {
  /** Fired when the range value changes. Emits `[from, to]` or `[]` when cleared. */
  (event: 'update:modelValue', value: DateRangeValue): void

  /** Fired when the popover open state changes. */
  (event: 'update:open', value: boolean): void

  /** Fired after the picker commits a normalized range value. */
  (event: 'change', value: DateRangeValue): void
}

export interface DateTimePickerProps extends CommonDatePickerProps {
  /** Controlled value for the picker. */
  modelValue?: string
}

export type DateTimePickerEmits = DatePickerEmits

// ── Slot prop shapes ─────────────────────────────────────────────────────────

/** Props bound to the trigger / prefix / suffix slots on all three pickers. */
export interface DatePickerTriggerSlotProps {
  /** Whether the popover is currently open. */
  open: boolean
  /** Whether the picker is disabled. */
  disabled: boolean
  /** Sets the popover open state. */
  setOpen: (value: boolean) => void
  /** Closes the popover. Equivalent to `setOpen(false)`. */
  close: () => void
  displayLabel: string
  inputValue: string
}

/** Props bound to the `actions` slot on `DatePicker`. */
export interface DatePickerActionsSlotProps {
  selected: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateRangePicker`. */
export interface DateRangePickerActionsSlotProps {
  fromDate: string
  toDate: string
  /**
   * Commits one endpoint, mirroring a calendar cell click:
   * first call sets `from`, second call sets `to`.
   */
  setDate: (date: string | Date | Dayjs) => void
  /**
   * Commits both endpoints atomically. Normalizes order so the earlier
   * date becomes `from`. Use for fixed-window presets ("Last 7 days").
   */
  setRange: (range: [string | Date | Dayjs, string | Date | Dayjs]) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

/** Props bound to the `actions` slot on `DateTimePicker`. */
export interface DateTimePickerActionsSlotProps {
  selected: string
  time: string
  setDate: (date: string | Date | Dayjs) => void
  clear: () => void
  close: () => void
  open: boolean
  disabled: boolean
  setOpen: (value: boolean) => void
}

export interface DatePickerSlots {
  /** Custom trigger renderer for the picker. */
  trigger?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered before the trigger input value. */
  prefix?: (props: DatePickerTriggerSlotProps) => any

  /** Content rendered after the trigger input value. */
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date shortcuts
   * ("Today", "Tomorrow", "Last 7 days") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DatePickerActionsSlotProps) => any
}

export interface DateRangePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for range shortcuts
   * ("Last 7 days", "Last 12 months") and other preset actions. When
   * omitted, the popover shows the calendar only.
   */
  actions?: (props: DateRangePickerActionsSlotProps) => any
}

export interface DateTimePickerSlots {
  trigger?: (props: DatePickerTriggerSlotProps) => any

  prefix?: (props: DatePickerTriggerSlotProps) => any
  suffix?: (props: DatePickerTriggerSlotProps) => any

  /**
   * Sidebar rendered to the left of the calendar. Use for date-time
   * shortcuts ("Now", "Tomorrow 9am") and other preset actions. When
   * omitted, the popover shows the calendar and time picker only.
   */
  actions?: (props: DateTimePickerActionsSlotProps) => any
}

export type DatePickerViewMode = 'date' | 'monthYear'

export interface DatePickerDateObj {
  date: Dayjs
  key: string
  inMonth: boolean
  isToday: boolean
  isSelected: boolean
}