@open-dy/vibecoding-sdk-taro 0.0.1-beta.4 → 0.0.1

package/src/ui/button.tsx

@@ -0,0 +1,215 @@
+import * as React from "react"
+import { Button as TaroButton, View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { collectDataIconState } from "./helpers"
+
+type TaroButtonProps = React.ComponentProps<typeof TaroButton>
+
+type OpenTypeDetailEvent = {
+  /** @desc 原生能力回调的结果明细；平台未提供时可缺省，使用前需判空。 */
+  detail?: {
+  /** @desc 平台提供的结果或错误描述；可缺省，请保留原文用于判断和诊断。 */
+  errMsg?: string;
+  /** @desc 平台提供的数值结果码；可缺省，含义以所用原生能力的契约为准。 */
+  errNo?: number }
+}
+
+type DouyinButtonExtras = {
+  /** @desc 抖音原生按钮能力类型；非空时改用 Taro Button 并透传该值，否则渲染 View。可用值和授权要求以目标平台能力为准。 */
+  openType?: TaroButtonProps["openType"] | (string & {})
+  /** @desc navigateToVideoView 的视频标识；优先于 data-video-id，同时注入两种拼写给原生按钮。其他 openType 仅透传。 */
+  dataVideoId?: string
+  /** @desc 视频类型；优先于 data-video-type。navigateToVideoView 场景省略时为 "raw"，其他场景不设置默认值。 */
+  dataVideoType?: string
+  /** @desc 原生视频能力的渠道参数；优先于 data-channel，未提供时不注入。不控制 SDK 网络通道。 */
+  dataChannel?: string
+  /** @desc dataVideoId 的兼容写法；两者都提供时以 dataVideoId 为准。 */
+  "data-video-id"?: string
+  /** @desc dataVideoType 的兼容写法；两者都提供时以 dataVideoType 为准。 */
+  "data-video-type"?: string
+  /** @desc dataChannel 的兼容写法；两者都提供时以 dataChannel 为准。 */
+  "data-channel"?: string
+  /** @desc 仅在原生 navigateToVideoView 能力分支中透传的结果回调；event.detail 可缺省，不代表业务点击回调。 */
+  onNavigateToVideoView?: (event: OpenTypeDetailEvent) => void
+  /** @desc 仅在原生 addShortcut 能力分支中透传的结果回调；结果从 event.detail 读取，普通 View 按钮不会主动调用。 */
+  onAddShortcut?: (event: OpenTypeDetailEvent) => void
+}
+
+type NativeButtonProps = TaroButtonProps &
+  DouyinButtonExtras & {
+    plain?: boolean
+  }
+
+const NativeButton = TaroButton as React.ComponentType<NativeButtonProps>
+
+type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]
+
+/** Taro Button `size`/`type` 与 CVA variant 同名，必须 Omit，否则 size 会收成只剩 `"default"`。 */
+type TaroButtonNativeKeys =
+  | keyof ViewProps
+  | "className"
+  | "style"
+  | "children"
+  | "size"
+  | "type"
+
+/**
+ * @desc 按钮组件的属性类型；保留 Taro 原生能力，避免 size/type 与样式变体同名冲突。
+ * @property {ButtonProps["variant"]} variant 视觉变体，默认 default（主题色）；outline 描边、secondary 次要、ghost 无底色、destructive 危险色、link 链接样式。只控制样式，不执行业务动作。
+ * @property {ButtonProps["size"]} size 尺寸，默认 default（h-8）；xs/sm/lg 分别为 h-6/h-7/h-9；icon/icon-xs/icon-sm/icon-lg 为 size-8/6/7/9 正方形图标按钮。
+ * @example
+ * ```tsx
+ * import { ButtonProps } from '@open-dy/vibecoding-sdk-taro/ui/button'
+ * const props: ButtonProps = { children: '确认' }
+ * ```
+ */
+export type ButtonProps = ViewProps &
+  VariantProps<typeof buttonVariants> &
+  Omit<TaroButtonProps, TaroButtonNativeKeys> &
+  DouyinButtonExtras
+
+/**
+ * @desc 生成按钮的样式类名；接受其声明的样式变体。
+ * @param {Parameters<typeof buttonVariants>[0]} props 样式变体以及附加的 class 或 className。
+ * @param {Parameters<typeof buttonVariants>[0]["variant"]} props.variant 视觉变体，默认 default（主题色）；outline 描边、secondary 次要、ghost 无底色、destructive 危险色、link 链接样式。只控制样式，不执行业务动作。
+ * @param {Parameters<typeof buttonVariants>[0]["size"]} props.size 尺寸，默认 default（h-8）；xs/sm/lg 分别为 h-6/h-7/h-9；icon/icon-xs/icon-sm/icon-lg 为 size-8/6/7/9 正方形图标按钮。
+ * @return {string} 合并后的样式类名。
+ * @example
+ * ```tsx
+ * import { buttonVariants } from '@open-dy/vibecoding-sdk-taro/ui/button'
+ * buttonVariants()
+ * ```
+ */
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,opacity,background-color,color,box-shadow] duration-150 ease-out outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:scale-[0.98] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)]",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function getButtonHoverClass(variant: ButtonVariant) {
+  switch (variant) {
+    case "outline":
+      return "scale-[0.98] bg-muted/90 text-foreground"
+    case "secondary":
+      return "scale-[0.98] opacity-85"
+    case "ghost":
+      return "scale-[0.98] bg-muted/80 text-foreground"
+    case "destructive":
+      return "scale-[0.98] bg-destructive/20 text-destructive dark:bg-destructive/30"
+    case "link":
+      return "opacity-70"
+    case "default":
+    default:
+      return "scale-[0.98] opacity-88"
+  }
+}
+
+/**
+ * @desc 支持主题样式和抖音 openType 的小程序按钮；用于普通小程序和兴趣卡落地页。
+ * @param {ButtonProps} props 按钮属性；variant 和 size 选择视觉样式，className 覆写容器，onClick 处理普通点击。
+ * @param {Parameters<typeof Button>[0]["variant"]} props.variant 视觉变体，默认 default（主题色）；outline 描边、secondary 次要、ghost 无底色、destructive 危险色、link 链接样式。只控制样式，不执行业务动作。
+ * @param {Parameters<typeof Button>[0]["size"]} props.size 尺寸，默认 default（h-8）；xs/sm/lg 分别为 h-6/h-7/h-9；icon/icon-xs/icon-sm/icon-lg 为 size-8/6/7/9 正方形图标按钮。
+ * @param {Parameters<typeof Button>[0]["className"]} props.className 追加到预置样式之后的容器类名，可覆写色彩、边框、圆角和尺寸。普通分支应用于 View，openType 分支应用于原生 Button。
+ * @param {Parameters<typeof Button>[0]["style"]} props.style 传给渲染根节点的内联样式；普通分支为 View，openType 分支为原生 Button。
+ * @param {Parameters<typeof Button>[0]["disabled"]} props.disabled 原生 Taro Button 的禁用属性，仅 openType 分支有原生禁用保证。普通 View 分支透传该值但未实现点击拦截，请在业务回调中处理。
+ * @return {React.JSX.Element} 普通交互返回 View；传入 openType 时返回原生 Taro Button。
+ * @remarks variant 默认 default（主题背景和前景色），size 默认 default（h-8）。className 合并在预置样式之后，可覆写背景、文字色、边框、圆角和尺寸。不要为获得另一种风格重写通用按钮；按 DESIGN.md 传入 className 或 variant。openType 走原生按钮能力，普通按钮走 View，两者使用同一组视觉样式。
+ * @example
+ * ```tsx
+ * import { Button } from '@open-dy/vibecoding-sdk-taro/ui/button'
+ * export function AddTaskButton() {
+ *   return <Button className="h-11 rounded-none border-4 border-black bg-black text-white" onClick={() => console.log('add task')}>添加</Button>
+ * }
+ * ```
+ */
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  openType,
+  dataVideoId,
+  dataVideoType,
+  dataChannel,
+  "data-video-id": dataVideoIdAttr,
+  "data-video-type": dataVideoTypeAttr,
+  "data-channel": dataChannelAttr,
+  style,
+  ...props
+}: ButtonProps) {
+  const { hasInlineStartIcon, hasInlineEndIcon } = React.useMemo(
+    () => collectDataIconState(props.children),
+    [props.children]
+  )
+
+  const sharedClassName = cn(
+    buttonVariants({ variant, size }),
+    hasInlineStartIcon && (size === "xs" || size === "sm" ? "pl-1.5" : "pl-2"),
+    hasInlineEndIcon && (size === "xs" || size === "sm" ? "pr-1.5" : "pr-2"),
+    className
+  )
+  const visualProps = {
+    "data-slot": "button",
+    className: sharedClassName,
+    hoverClass: getButtonHoverClass(variant),
+    hoverStartTime: 20,
+    hoverStayTime: 90,
+  }
+
+  if (openType) {
+    const videoId = dataVideoId ?? dataVideoIdAttr
+    const videoType =
+      dataVideoType ??
+      dataVideoTypeAttr ??
+      (openType === "navigateToVideoView" ? "raw" : undefined)
+    const channel = dataChannel ?? dataChannelAttr
+
+    // 不要 plain / 内联 transparent：会盖掉 Tailwind bg-primary（TT 编译已有 #9333ea 兜底）
+    return (
+      <NativeButton
+        {...props}
+        {...visualProps}
+        openType={openType}
+        {...(videoId ? { dataVideoId: videoId, "data-video-id": videoId } : {})}
+        {...(videoType
+          ? { dataVideoType: videoType, "data-video-type": videoType }
+          : {})}
+        {...(channel ? { dataChannel: channel, "data-channel": channel } : {})}
+        style={style}
+      />
+    )
+  }
+
+  return <View {...props} {...visualProps} style={style} />
+}
+
+export { Button, buttonVariants }

package/src/ui/calendar.tsx

@@ -0,0 +1,353 @@
+import * as React from "react"
+import { Picker, Text, View, type ViewProps } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { ChevronLeft, ChevronRight } from "@open-dy/lucide-taro"
+
+type DateRange = {
+  /** @desc 范围起始日；未选择起点时省略。组件仅在 mode="range" 下读取该字段。 */
+  from?: Date;
+  /** @desc 范围结束日；仅选好起点时省略，完成范围后必须不早于 from。 */
+  to?: Date }
+
+type CalendarBaseProps = ViewProps & {
+  /** @desc 受控显示月份；传入后以该 Date 的年/月为准，需通过 onMonthChange 更新。省略时从 selected 或当前日期初始化内部月份。 */
+  month?: Date
+  /** @desc 切换上一月/下一月或下拉年月时调用，参数为新月份的第一天；受控 month 需由调用方同步。 */
+  onMonthChange?: (month: Date) => void
+  /** @desc 是否显示相邻月份的日期，默认 true；为 false 时保留日历网格空位，隐藏那些日期。 */
+  showOutsideDays?: boolean
+  /** @desc 禁选日期判定函数；对每个日期返回 true 表示不可选，省略时不禁用日期，禁用日期不会触发 onSelect。 */
+  disabled?: (date: Date) => boolean
+  /** @desc 标题布局，默认 label（年月文本）；dropdown 使用原生年月 Picker。 */
+  captionLayout?: "label" | "dropdown"
+  /** @desc dropdown 年份选项的起始年，默认当前年减 100；会扩展以包含显示中的年份，不限制可选日期。 */
+  fromYear?: number
+  /** @desc dropdown 年份选项的结束年，默认当前年加 20；会扩展以包含显示中的年份，不限制可选日期。 */
+  toYear?: number
+  /** @desc 日历根 View 的附加类名，在基础样式之后合并；省略时使用 bg-background p-2。 */
+  className?: string
+}
+
+type SingleCalendarProps = CalendarBaseProps & {
+  /** @desc 单日选择模式，省略时为 single；此分支的 selected 使用 Date，onSelect 接收单日。 */
+  mode?: "single"
+  /** @desc 外部维护的选中日；省略时没有选中日。组件不保存选中状态，需在 onSelect 中更新。 */
+  selected?: Date
+  /** @desc 点击未禁用日期时传入该 Date；类型允许 undefined，但当前实现不会通过再次点击自动取消选择。 */
+  onSelect?: (date: Date | undefined) => void
+}
+
+type RangeCalendarProps = CalendarBaseProps & {
+  /** @desc 必须为 range，启用范围选择；selected 使用 { from, to }，不能与单日 props 混用。 */
+  mode: "range"
+  /** @desc 外部维护的范围；首次选择只有 from，完成后含 from/to。组件不保存选中范围，需在 onSelect 中更新。 */
+  selected?: DateRange
+  /** @desc 点击时返回下一范围：无起点/已完成时重新开始；只有起点时完成范围，早于起点的日期会交换端点。当前实现不发出 undefined。 */
+  onSelect?: (range: DateRange | undefined) => void
+}
+
+/**
+ * @desc 日历属性联合类型；mode 区分单日选择和日期范围选择。
+ * @example
+ * ```tsx
+ * import { CalendarProps } from '@open-dy/vibecoding-sdk-taro/ui/calendar'
+ * const single: CalendarProps = { mode: 'single', selected: new Date(2026, 9, 1) }
+ * const range: CalendarProps = { mode: 'range', selected: { from: new Date(2026, 9, 1), to: new Date(2026, 9, 3) } }
+ * ```
+ */
+type CalendarProps = SingleCalendarProps | RangeCalendarProps
+
+function isRangeCalendarProps(
+  props: CalendarProps
+): props is RangeCalendarProps {
+  return props.mode === "range"
+}
+
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number) {
+  return new Date(year, month, 1).getDay()
+}
+
+function isSameDay(a: Date, b: Date) {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+/**
+ * @desc 日期选择日历组件。
+ * @param {Parameters<typeof Calendar>[0]} calendarProps 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Calendar>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ * import { Calendar } from '@open-dy/vibecoding-sdk-taro/ui/calendar'
+ * export function SingleDatePicker() {
+ *   const [selected, setSelected] = useState<Date>()
+ *   const [month, setMonth] = useState(new Date(2026, 9, 1))
+ *   return <Calendar month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} />
+ * }
+ * export function DateRangePicker() {
+ *   const [selected, setSelected] = useState<{ from?: Date; to?: Date }>({})
+ *   return <Calendar mode="range" selected={selected} onSelect={(next) => setSelected(next ?? {})} />
+ * }
+ * ```
+ */
+function Calendar(calendarProps: CalendarProps) {
+  const {
+    className,
+    month: monthProp,
+    onMonthChange,
+    showOutsideDays = true,
+    disabled,
+    captionLayout = "label",
+    fromYear,
+    toYear,
+    mode = "single",
+    selected: _selected,
+    onSelect: _onSelect,
+    ...viewProps
+  } = calendarProps
+  const selectedSingle = isRangeCalendarProps(calendarProps)
+    ? undefined
+    : calendarProps.selected
+  const selectedRange = isRangeCalendarProps(calendarProps)
+    ? calendarProps.selected
+    : undefined
+  const today = new Date()
+  const [internalMonth, setInternalMonth] = React.useState(
+    monthProp ?? selectedSingle ?? selectedRange?.from ?? today
+  )
+  const currentMonth = monthProp ?? internalMonth
+
+  const year = currentMonth.getFullYear()
+  const month = currentMonth.getMonth()
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstDay = getFirstDayOfMonth(year, month)
+  const daysInPrevMonth = getDaysInMonth(year, month - 1)
+
+  const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+  const monthNames = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
+  ]
+  const yearOptions = React.useMemo(() => {
+    const baseYear = new Date().getFullYear()
+    const minYear = fromYear ?? baseYear - 100
+    const maxYear = toYear ?? baseYear + 20
+    const start = Math.min(minYear, year)
+    const end = Math.max(maxYear, year)
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index)
+  }, [fromYear, toYear, year])
+  const monthOptions = React.useMemo(
+    () => Array.from({ length: 12 }, (_, index) => index + 1),
+    []
+  )
+  const yearIndex = Math.max(yearOptions.indexOf(year), 0)
+  const monthIndex = month
+
+  const goToPrevMonth = () => {
+    const prev = new Date(year, month - 1, 1)
+    setInternalMonth(prev)
+    onMonthChange?.(prev)
+  }
+
+  const goToNextMonth = () => {
+    const next = new Date(year, month + 1, 1)
+    setInternalMonth(next)
+    onMonthChange?.(next)
+  }
+
+  const setYear = (nextYear: number) => {
+    const next = new Date(nextYear, month, 1)
+    setInternalMonth(next)
+    onMonthChange?.(next)
+  }
+
+  const setMonthOfYear = (nextMonth: number) => {
+    const next = new Date(year, nextMonth - 1, 1)
+    setInternalMonth(next)
+    onMonthChange?.(next)
+  }
+
+  const handleDayClick = (date: Date) => {
+    if (disabled?.(date)) return
+
+    if (isRangeCalendarProps(calendarProps)) {
+      const range = calendarProps.selected
+      if (!range?.from || (range.from && range.to)) {
+        calendarProps.onSelect?.({ from: date, to: undefined })
+      } else {
+        if (date < range.from) {
+          calendarProps.onSelect?.({ from: date, to: range.from })
+        } else {
+          calendarProps.onSelect?.({ from: range.from, to: date })
+        }
+      }
+    } else {
+      calendarProps.onSelect?.(date)
+    }
+  }
+
+  const isSelected = (date: Date) => {
+    if (selectedSingle) {
+      return isSameDay(date, selectedSingle)
+    }
+    if (selectedRange) {
+      if (selectedRange.from && isSameDay(date, selectedRange.from)) return true
+      if (selectedRange.to && isSameDay(date, selectedRange.to)) return true
+    }
+    return false
+  }
+
+  const isInRange = (date: Date) => {
+    if (!selectedRange?.from || !selectedRange.to) return false
+    return date > selectedRange.from && date < selectedRange.to
+  }
+
+  const days: Array<{ date: Date; isOutside: boolean }> = []
+
+  for (let i = firstDay - 1; i >= 0; i--) {
+    days.push({
+      date: new Date(year, month - 1, daysInPrevMonth - i),
+      isOutside: true,
+    })
+  }
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push({ date: new Date(year, month, i), isOutside: false })
+  }
+
+  const remaining = 42 - days.length
+  for (let i = 1; i <= remaining; i++) {
+    days.push({ date: new Date(year, month + 1, i), isOutside: true })
+  }
+
+  const weeks: typeof days[] = []
+  for (let i = 0; i < days.length; i += 7) {
+    weeks.push(days.slice(i, i + 7))
+  }
+
+  return (
+    <View
+      data-slot="calendar"
+      className={cn("bg-background p-2", className)}
+      {...viewProps}
+    >
+      <View className="flex items-center justify-between">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={goToPrevMonth}
+          onTap={goToPrevMonth}
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        {captionLayout === "dropdown" ? (
+          <View className="flex items-center gap-2">
+            <Picker
+              mode="selector"
+              range={yearOptions}
+              value={yearIndex}
+              onChange={(event) =>
+                setYear(yearOptions[Number(event.detail.value)] ?? year)
+              }
+            >
+              <Button variant="ghost" className="h-8 px-2">
+                <Text className="text-sm font-medium">{year}</Text>
+              </Button>
+            </Picker>
+            <Picker
+              mode="selector"
+              range={monthOptions}
+              value={monthIndex}
+              onChange={(event) =>
+                setMonthOfYear(
+                  monthOptions[Number(event.detail.value)] ?? month + 1
+                )
+              }
+            >
+              <Button variant="ghost" className="h-8 px-2">
+                <Text className="text-sm font-medium">
+                  {String(month + 1).padStart(2, "0")}月
+                </Text>
+              </Button>
+            </Picker>
+          </View>
+        ) : (
+          <View className="text-sm font-medium">
+            {monthNames[month]} {year}
+          </View>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={goToNextMonth}
+          onTap={goToNextMonth}
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </View>
+
+      <View className="mt-2 flex">
+        {weekdays.map((day) => (
+          <View
+            key={day}
+            className="flex-1 text-center text-xs font-normal text-muted-foreground"
+          >
+            {day}
+          </View>
+        ))}
+      </View>
+
+      {weeks.map((week, wi) => (
+        <View key={wi} className="mt-1 flex">
+          {week.map((day, di) => {
+            if (day.isOutside && !showOutsideDays) {
+              return <View key={di} className="flex-1" />
+            }
+
+            const isDisabled = disabled?.(day.date)
+            const sel = isSelected(day.date)
+            const inRange = isInRange(day.date)
+            const isToday = isSameDay(day.date, today)
+
+            return (
+              <View
+                key={di}
+                className={cn(
+                  "flex flex-1 items-center justify-center",
+                  inRange && "bg-muted"
+                )}
+              >
+                <View
+                  className={cn(
+                    "flex size-7 items-center justify-center rounded-md text-sm",
+                    day.isOutside && "text-muted-foreground opacity-50",
+                    isDisabled && "opacity-50",
+                    isToday && !sel && "bg-muted font-medium",
+                    sel && "bg-primary text-primary-foreground",
+                    !sel && !isDisabled && !day.isOutside && "active:bg-accent"
+                  )}
+                  onClick={() => !isDisabled && handleDayClick(day.date)}
+                  onTap={() => !isDisabled && handleDayClick(day.date)}
+                >
+                  {day.date.getDate()}
+                </View>
+              </View>
+            )
+          })}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export { Calendar, type CalendarProps }