{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "title": "Calendar",
  "description": "A date field component that allows users to enter and edit date.",
  "dependencies": [
    "react-day-picker",
    "@mdi/js"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/theme.json",
    "https://blok.sitecore.com/r/button.json",
    "https://blok.sitecore.com/r/select.json"
  ],
  "files": [
    {
      "path": "src/components/ui/calendar.tsx",
      "content": "\"use client\";\n\nimport { Icon } from \"@/lib/icon\";\nimport { mdiChevronLeft, mdiChevronRight } from \"@mdi/js\";\nimport { format } from \"date-fns\";\nimport * as React from \"react\";\n\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport {\n  type DayButton,\n  DayPicker,\n  type DropdownProps,\n  getDefaultClassNames,\n} from \"react-day-picker\";\n\nexport function InBuiltDropdown({\n  options = [],\n  value,\n  onChange,\n  disabled,\n  name,\n  id,\n  \"aria-label\": ariaLabel,\n}: DropdownProps) {\n  return (\n    <Select\n      disabled={disabled}\n      name={name}\n      value={value != null ? String(value) : \"\"}\n      onValueChange={(val) => {\n        const e = {\n          target: { value: val },\n        } as unknown as React.ChangeEvent<HTMLSelectElement>;\n        onChange?.(e);\n      }}\n    >\n      <SelectTrigger\n        id={id}\n        size=\"sm\"\n        aria-label={ariaLabel}\n        className=\"z-50 px-3 text-sm [&_svg:not([class*='text-'])]:text-accent-foreground bg-transparent dark:bg-transparent dark:hover:bg-transparent\"\n      >\n        <SelectValue />\n      </SelectTrigger>\n\n      <SelectContent className=\"rounded-md borde p-0 min-w-20\">\n        {options.map(({ value: v, label, disabled }) => (\n          <SelectItem\n            key={String(v)}\n            value={String(v)}\n            disabled={disabled}\n            className=\"cursor-pointer px-3 py-1.5 text-sm\"\n          >\n            {label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  labels,\n  monthDropdownAriaLabel,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n  /** Sets `labels.labelMonthDropdown` for dropdown caption layouts (month `<select>` / custom trigger). */\n  monthDropdownAriaLabel?: string;\n}) {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      captionLayout={captionLayout}\n      labels={{\n        labelNav: () => \"Month navigation\",\n        ...labels,\n        ...(monthDropdownAriaLabel != null && !labels?.labelMonthDropdown\n          ? { labelMonthDropdown: () => monthDropdownAriaLabel }\n          : {}),\n      }}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit bg-card\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months,\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav,\n        ),\n        button_previous: cn(\n          buttonVariants({\n            variant: \"ghost\",\n            colorScheme: \"neutral\",\n            size: \"icon\",\n          }),\n          \"size-icon bg-transparent p-0 opacity-50 hover:opacity-100\",\n        ),\n        button_next: cn(\n          buttonVariants({\n            variant: \"ghost\",\n            colorScheme: \"neutral\",\n            size: \"icon\",\n          }),\n          \"size-icon bg-transparent p-0 opacity-50 hover:opacity-100 \",\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border px-2 border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0 pl-4 scrollbar-hidden w-full flex justify-center items-center  \",\n          defaultClassNames.dropdown,\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label,\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday,\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header,\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number,\n        ),\n        day_range_start:\n          \"day-range-start aria-selected:bg-primary-500 aria-selected:text-primary-foreground rounded-l-md rounded-r-none\",\n        day_range_end:\n          \"day-range-end aria-selected:bg-primary-500 aria-selected:text-primary-foreground rounded-r-md rounded-l-none\",\n\n        range_start:\n          \"day-range-start aria-selected:bg-primary-500 aria-selected:text-primary-foreground rounded-l-md rounded-r-none\",\n        range_middle:\n          \"aria-selected:bg-primary-bg aria-selected:text-body-text rounded-none\",\n        range_end:\n          \"day-range-end aria-selected:bg-primary-500 aria-selected:text-primary-foreground rounded-r-md rounded-l-none\",\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today,\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside,\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled,\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          );\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <Icon\n                path={mdiChevronLeft}\n                size={0.9}\n                className={cn(\"text-neutral size-4\", className)}\n                {...props}\n              />\n            );\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <Icon\n                path={mdiChevronRight}\n                size={0.9}\n                className={cn(\"text-neutral size-4\", className)}\n                {...props}\n              />\n            );\n          }\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          );\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        Dropdown: InBuiltDropdown,\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const ref = React.useRef<HTMLButtonElement>(null);\n\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      aria-label={`Select ${format(day.date, \"PPP\")}`}\n      data-day={format(day.date, \"yyyy-MM-dd\")}\n      data-selected={modifiers.selected ? \"true\" : \"false\"}\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      aria-pressed={modifiers.selected || false}\n      className={cn(\n        buttonVariants({ variant: \"ghost\", colorScheme: \"neutral\" }),\n        \"hover:rounded-md size-8 p-0 font-normal border border-solid border-transparent rounded-md text-body-text transition-none\",\n        !modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          \"hover:bg-primary hover:text-inverse-text\",\n        modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          \"bg-primary-500 text-inverse-text rounded-l-md hover:bg-primary-600 hover:text-inverse-text\",\n        modifiers.range_start &&\n          \"bg-primary-500 text-inverse-text rounded-l-md hover:bg-primary-600 hover:text-inverse-text\",\n        modifiers.range_middle &&\n          \"bg-primary-bg text-primary-fg hover:bg-primary hover:text-inverse-text rounded-none\",\n        modifiers.range_end &&\n          \"bg-primary-500 text-inverse-text rounded-r-md hover:bg-primary-600 hover:text-inverse-text\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n",
      "type": "registry:ui"
    },
    {
      "path": "src/lib/icon.tsx",
      "content": "import type { SVGProps } from \"react\";\n\ntype IconProps = SVGProps<SVGSVGElement> & {\n  path: string;\n  title?: string;\n  size?: number | string;\n  className?: string;\n  fill?: string;\n};\n\nexport function Icon({\n  path,\n  title,\n  size = 1,\n  className,\n  fill = \"currentColor\",\n  ...rest\n}: IconProps) {\n  return (\n    <svg\n      transform={`scale(${size})`}\n      viewBox=\"0 0 24 24\"\n      aria-label={title}\n      className={className}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      <path d={path} fill={fill} />\n    </svg>\n  );\n}\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:ui"
}