{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "range-calendar",
  "title": "Range Calendar",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/range-calendar/range-calendar.component.ts",
      "content": "import { Component, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/ui/button/button.component'\nimport {\n  DAY_PICKER_TEMPLATE,\n  UiDayContentDirective,\n  UiDayPickerBase,\n  narrowWeekday,\n  type DateRange,\n  type DayPickerClassNames,\n  type DayPickerFormatters,\n  type DayPickerMode,\n} from '@/ui/calendar/day-picker'\n\nexport type { DateRange }\n\n/** The React RangeCalendar's `classNames` map (react-day-picker keys), before consumer overrides. */\nexport function rangeCalendarClassNames(classNames?: DayPickerClassNames): DayPickerClassNames {\n  return {\n    months: 'relative flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0',\n    month: 'flex flex-1 flex-col gap-4',\n    month_caption: 'flex items-center justify-center',\n    caption_label: 'text-sm font-medium',\n    nav: 'absolute inset-x-1 top-0 flex items-center justify-between',\n    button_previous: cn(\n      buttonVariants({ variant: 'outline' }),\n      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n    ),\n    button_next: cn(buttonVariants({ variant: 'outline' }), 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'),\n    month_grid: 'w-full border-collapse space-y-1',\n    weekdays: 'flex',\n    weekday: 'text-muted-foreground flex-1 rounded-md text-xs font-normal',\n    week: 'mt-2 flex w-full',\n    day: cn(\n      'relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20',\n      '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',\n      '[&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',\n    ),\n    day_button: cn(\n      buttonVariants({ variant: 'ghost' }),\n      'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',\n    ),\n    today: '[&:not([aria-selected])]:bg-accent [&:not([aria-selected])]:text-accent-foreground',\n    outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',\n    disabled: 'text-muted-foreground opacity-50',\n    range_start:\n      'day-range-start rounded-l-md [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:bg-primary [&>button:focus]:text-primary-foreground',\n    range_end:\n      'day-range-end rounded-r-md [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:bg-primary [&>button:focus]:text-primary-foreground',\n    range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground [&>button]:hover:bg-accent',\n    hidden: 'invisible',\n    ...classNames,\n  }\n}\n\n/**\n * Angular port of the UIPKGE React RangeCalendar: react-day-picker forced to\n * `mode=\"range\"`. Click two dates and the range fills in between -- start / end cells get\n * the primary fill, the middle the accent fill. `selected` is a `{ from, to }` range and\n * `(select)` emits the next range (or undefined). Same props, DOM and class strings as\n * React; the day-picker engine is shared with Calendar.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-range-calendar, [ui-range-calendar]',\n  standalone: true,\n  imports: [UiDayContentDirective],\n  host: {\n    '[class]': 'hostClass',\n    '[attr.lang]': 'lang ?? localeCode',\n    '[attr.dir]': 'dir ?? null',\n    '[attr.data-mode]': 'mode',\n    '[attr.data-required]': 'required ? \"true\" : null',\n    '[attr.data-multiple-months]': 'dataMultipleMonths',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': 'slot',\n  },\n  template: DAY_PICKER_TEMPLATE,\n})\nexport class UiRangeCalendarComponent extends UiDayPickerBase {\n  protected readonly slot = 'range-calendar'\n  override mode: DayPickerMode = 'range'\n\n  constructor() {\n    super()\n    this.showOutsideDays = true\n  }\n\n  get hostClass(): string {\n    return cn('block', [this.cls['root'], cn('p-3', this.className)].join(' '))\n  }\n\n  protected componentClassNames(): DayPickerClassNames {\n    return rangeCalendarClassNames(this.classNames)\n  }\n\n  protected override componentFormatters(): Partial<DayPickerFormatters> {\n    return { formatWeekdayName: narrowWeekday }\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/range-calendar/range-calendar.component.ts"
    },
    {
      "path": "packages/registry-angular/components/range-calendar/index.ts",
      "content": "export { UiRangeCalendarComponent, rangeCalendarClassNames, type DateRange } from './range-calendar.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/range-calendar/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/calendar.json"
  ],
  "description": "Inline from→to calendar grid. Click two dates; the range fills between. For a form field with a trigger, use Date Picker type=\"range\" instead. Same min/max and disabled-date support as Calendar.",
  "categories": [
    "date-time"
  ]
}