Bikram Sambat Calendar (Native)

1import * as React from "react"
2import { Pressable, View } from "react-native"
3import { ChevronLeft, ChevronRight } from "lucide-react-native"
4 
5import { BsDayPicker } from "@/lib/bs-day-picker/bs-day-picker"
6import type { BsDate } from "@/lib/bs-day-picker/types"
7import { cn } from "@/lib/utils"
8import { Icon } from "@/components/ui/icon"
9import { Text } from "@/components/ui/text"
10 
11const nativeClassNames = {
12  root: "rounded-lg border border-border bg-background p-3",
13  months: "relative",
14  month: "gap-3",
15  nav: "mb-2 flex-row items-center justify-between",
16  button_previous: "size-8 items-center justify-center rounded-md",
17  button_next: "size-8 items-center justify-center rounded-md",
18  month_caption: "items-center justify-center",
19  dropdowns: "flex-row items-center gap-2",
20  dropdown: "rounded-md border border-input px-2 py-1",
21  caption_label: "text-sm font-medium text-foreground",
22  month_grid: "w-full",
23  weekdays: "flex-row",
24  weekday: "flex-1 items-center py-2",
25  week: "flex-row",
26  day: "flex-1 items-center py-1",
27  day_button:
28    "size-9 items-center justify-center rounded-md border border-transparent",
29  outside: "opacity-50",
30  selected: "",
31  today: "",
32  disabled: "opacity-30",
33  footer: "pt-2",
34}
35 
36function BsCalendar({
37  className,
38  ...props
39}: React.ComponentProps<typeof BsDayPicker>) {
40  return (
41    <BsDayPicker
42      className={cn(nativeClassNames.root, className)}
43      classNames={nativeClassNames}
44      components={{
45        Root: ({ className: rootClassName, children }) => (
46          <View className={rootClassName}>{children}</View>
47        ),
48        Chevron: ({ orientation, className: chevronClassName }) => (
49          <Icon
50            as={orientation === "left" ? ChevronLeft : ChevronRight}
51            className={cn("size-4 text-foreground", chevronClassName)}
52          />
53        ),
54        DayButton: ({
55          label,
56          selected,
57          today,
58          outside,
59          disabled,
60          onClick,
61          className: dayClassName,
62        }) => (
63          <Pressable
64            className={cn(
65              dayClassName,
66              selected && "bg-primary",
67              today && "border-border",
68              outside && "opacity-50",
69              disabled && "opacity-30",
70            )}
71            disabled={disabled}
72            onPress={onClick}
73          >
74            <Text
75              className={cn(
76                "text-sm",
77// … truncated