{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-43",
  "type": "registry:component",
  "title": "Comp 43",
  "description": "Comp 43",
  "files": [
    {
      "path": "registry/ui-basic/comp-43.tsx",
      "content": "\"use client\";\r\n\r\nimport { getLocalTimeZone, isWeekend, today } from \"@internationalized/date\";\r\nimport { CalendarIcon } from \"lucide-react\";\r\nimport { useLocale } from \"react-aria\";\r\nimport type { DateValue } from \"react-aria-components\";\r\nimport {\r\n\tButton,\r\n\tDateInput,\r\n\tDateRangePicker,\r\n\tDateSegment,\r\n\tDialog,\r\n\tGroup,\r\n\tLabel,\r\n\tPopover,\r\n\tRangeCalendar,\r\n} from \"react-aria-components\";\r\n\r\nimport { cn } from \"../utilities/cn\";\r\n\r\nexport default function Component() {\r\n\tconst now = today(getLocalTimeZone());\r\n\tconst disabledRanges = [\r\n\t\t[now, now.add({ days: 5 })],\r\n\t\t[now.add({ days: 14 }), now.add({ days: 16 })],\r\n\t\t[now.add({ days: 23 }), now.add({ days: 24 })],\r\n\t];\r\n\r\n\tconst { locale } = useLocale();\r\n\tconst isDateUnavailable = (date: DateValue) =>\r\n\t\tisWeekend(date, locale) ||\r\n\t\tdisabledRanges.some(\r\n\t\t\t(interval) =>\r\n\t\t\t\tdate.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0\r\n\t\t);\r\n\tconst validate = (value: { start: DateValue; end: DateValue } | null) =>\r\n\t\tdisabledRanges.some(\r\n\t\t\t(interval) =>\r\n\t\t\t\tvalue &&\r\n\t\t\t\tvalue.end.compare(interval[0]) >= 0 &&\r\n\t\t\t\tvalue.start.compare(interval[1]) <= 0\r\n\t\t)\r\n\t\t\t? \"Selected date range may not include unavailable dates.\"\r\n\t\t\t: null;\r\n\tconst dateInputStyle =\r\n\t\t\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-2xs transition-[color,box-shadow] outline-hidden data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:ring-[3px] data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive\";\r\n\treturn (\r\n\t\t<DateRangePicker\r\n\t\t\tclassName=\"not-first:*:mt-2\"\r\n\t\t\tisDateUnavailable={isDateUnavailable}\r\n\t\t\tvalidate={validate}\r\n\t\t>\r\n\t\t\t<Label className=\"text-foreground text-sm font-medium\">\r\n\t\t\t\tDate range picker (unavailable dates)\r\n\t\t\t</Label>\r\n\t\t\t<div className=\"flex\">\r\n\t\t\t\t<Group className={cn(dateInputStyle, \"pe-9\")}>\r\n\t\t\t\t\t<DateInput slot=\"start\" unstyled=\"true\">\r\n\t\t\t\t\t\t{(segment) => <DateSegment segment={segment} />}\r\n\t\t\t\t\t</DateInput>{\" \"}\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\tclassName=\"text-muted-foreground/70 px-2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t-\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<DateInput slot=\"end\" unstyled=\"true\">\r\n\t\t\t\t\t\t{(segment) => <DateSegment segment={segment} />}\r\n\t\t\t\t\t</DateInput>{\" \"}\r\n\t\t\t\t</Group>\r\n\t\t\t\t<Button className=\"text-muted-foreground/80 hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 z-10 -ms-9 -me-px flex w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-hidden data-focus-visible:ring-[3px]\">\r\n\t\t\t\t\t<CalendarIcon size={16} />\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t\t<Popover\r\n\t\t\t\tclassName=\"bg-background text-popover-foreground data-entering:animate-in data-exiting:animate-out data-entering:fade-in-0 data-exiting:fade-out-0 data-entering:zoom-in-95 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-lg outline-hidden\"\r\n\t\t\t\toffset={4}\r\n\t\t\t>\r\n\t\t\t\t<Dialog className=\"max-h-[inherit] overflow-auto p-2\">\r\n\t\t\t\t\t<RangeCalendar\r\n\t\t\t\t\t\tminValue={now}\r\n\t\t\t\t\t\tisDateUnavailable={isDateUnavailable}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</Dialog>\r\n\t\t\t</Popover>\r\n\t\t\t<p\r\n\t\t\t\tclassName=\"text-muted-foreground mt-2 text-xs\"\r\n\t\t\t\trole=\"region\"\r\n\t\t\t\taria-live=\"polite\"\r\n\t\t\t>\r\n\t\t\t\tBuilt with{\" \"}\r\n\t\t\t\t<a\r\n\t\t\t\t\tclassName=\"hover:text-foreground underline\"\r\n\t\t\t\t\thref=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\r\n\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\trel=\"noopener nofollow\"\r\n\t\t\t\t>\r\n\t\t\t\t\tReact Aria\r\n\t\t\t\t</a>\r\n\t\t\t</p>\r\n\t\t</DateRangePicker>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}