{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "date-range-picker",
  "title": "date-range-picker",
  "description": "date-range-picker",
  "dependencies": [
    "@heroicons/react",
    "@internationalized/date",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/date-field",
    "https://intentui.com/r/date-picker",
    "https://intentui.com/r/field",
    "https://intentui.com/r/input"
  ],
  "files": [
    {
      "path": "src/components/ui/date-range-picker.tsx",
      "content": "\"use client\"\n\nimport { CalendarDateRangeIcon } from \"@heroicons/react/24/outline\"\nimport type { DateDuration } from \"@internationalized/date\"\nimport { Button } from \"react-aria-components/Button\"\nimport type { DateValue } from \"react-aria-components/DateField\"\nimport {\n  DateRangePicker as DateRangePickerPrimitive,\n  type DateRangePickerProps as DateRangePickerPrimitiveProps,\n} from \"react-aria-components/DateRangePicker\"\nimport type { PopoverProps } from \"react-aria-components/Popover\"\nimport { twJoin } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport { DateInput as PrimitiveDateInput } from \"./date-field\"\nimport { DatePickerOverlay } from \"./date-picker\"\nimport { fieldStyles } from \"./field\"\nimport { InputGroup } from \"./input\"\n\nexport interface DateRangePickerProps<\n  T extends DateValue,\n> extends DateRangePickerPrimitiveProps<T> {\n  visibleDuration?: DateDuration\n  pageBehavior?: \"visible\" | \"single\"\n  popover?: Omit<PopoverProps, \"children\">\n}\n\nexport function DateRangePicker<T extends DateValue>({\n  className,\n  popover,\n  children,\n  visibleDuration = { months: 1 },\n  ...props\n}: DateRangePickerProps<T>) {\n  return (\n    <DateRangePickerPrimitive\n      data-slot=\"control\"\n      className={cx(fieldStyles({ className: \"group/date-range-picker\" }), className)}\n      {...props}\n    >\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          <DatePickerOverlay {...popover} visibleDuration={visibleDuration} range />\n        </>\n      )}\n    </DateRangePickerPrimitive>\n  )\n}\n\nexport function DateRangePickerTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof InputGroup>) {\n  return (\n    <InputGroup\n      className={cx(\n        \"flex items-center overflow-hidden rounded-lg pe-6\",\n        \"border border-input hover:enabled:border-muted-foreground/30\",\n        \"group-open/date-range-picker:border-ring/70 group-open/date-range-picker:bg-primary-subtle/5 group-open/date-range-picker:outline-hidden group-open/date-range-picker:ring-3 group-open/date-range-picker:ring-ring/20 group-open/date-range-picker:hover:border-ring/80\",\n        \"focus-within:border-ring/70 focus-within:bg-primary-subtle/5 focus-within:outline-hidden focus-within:ring-3 focus-within:ring-ring/20 focus-within:enabled:hover:border-ring/80\",\n        \"invalid:border-danger-subtle-foreground/70 invalid:bg-danger-subtle/5 focus-within:invalid:border-danger-subtle-foreground/70 focus-within:invalid:bg-danger-subtle/5 focus-within:invalid:ring-danger-subtle-foreground/20 invalid:hover:border-danger-subtle-foreground/80 focus-within:invalid:hover:border-danger-subtle-foreground/80\",\n        \"disabled:bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <DateInput slot=\"start\" />\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none z-10 -mx-3 block h-0.5 w-2 shrink-0 self-center rounded-full bg-foreground group-disabled/date-range-picker:text-opacity-50 sm:-mx-2 forced-colors:text-[ButtonText] forced-colors:group-disabled/date-range-picker:text-[GrayText]\"\n      />\n      <DateInput slot=\"end\" />\n      <Button\n        data-slot=\"date-picker-trigger\"\n        className={twJoin(\n          \"touch-target grid place-content-center outline-hidden focus-visible:text-foreground\",\n          \"pressed:text-foreground text-muted-foreground hover:text-foreground focus-visible:text-foreground\",\n          \"px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]\",\n          \"*:-me-px *:-mt-0.5 *:size-5 sm:*:size-4\"\n        )}\n      >\n        <CalendarDateRangeIcon />\n      </Button>\n    </InputGroup>\n  )\n}\n\nfunction DateInput({ className, ...props }: React.ComponentProps<typeof PrimitiveDateInput>) {\n  return (\n    <PrimitiveDateInput\n      className={cx(\"rounded-none border-none focus-within:ring-0\", className)}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-primary-subtle": "var(--primary-subtle)",
      "color-danger-subtle": "var(--danger-subtle)",
      "color-danger-subtle-foreground": "var(--danger-subtle-foreground)"
    },
    "light": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.15)",
      "danger-subtle": "oklch(0.637 0.237 25.331 / 0.15)",
      "danger-subtle-foreground": "oklch(0.505 0.213 27.518)"
    },
    "dark": {
      "primary-subtle": "oklch(0.623 0.214 259.815 / 0.1)",
      "danger-subtle": "oklch(0.637 0.237 25.331 / 0.1)",
      "danger-subtle-foreground": "oklch(0.704 0.191 22.216)"
    }
  },
  "type": "registry:ui"
}