@atlure/ui 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,9 +37,9 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/icons": "0.5.0",
-    "@atlure/tokens": "0.5.0",
-    "@atlure/types": "0.5.0"
+    "@atlure/icons": "0.6.1",
+    "@atlure/tokens": "0.6.1",
+    "@atlure/types": "0.6.1"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,189 @@
+import { ChevronLeft, ChevronRight, iconSize } from "@atlure/icons";
+import { useEffect, useMemo, useState } from "react";
+import { Pressable, View } from "react-native";
+
+import {
+  addMonths,
+  buildMonthGrid,
+  firstDayOfWeek,
+  formatFullDate,
+  formatMonthLabel,
+  formatWeekdayShort,
+  isDateInRange,
+} from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { useLocale } from "../../lib/locale";
+import {
+  calendarContainerClassName,
+  calendarDayCellClassName,
+  calendarDayCellDisabledClassName,
+  calendarDayCellInRangeClassName,
+  calendarDayCellRangeEndClassName,
+  calendarDayCellRangeStartClassName,
+  calendarDayCellSelectedClassName,
+  calendarDayLabelClassName,
+  calendarDayLabelOutsideMonthClassName,
+  calendarDayLabelSelectedClassName,
+  calendarHeaderClassName,
+  calendarMarkerDotClassName,
+  calendarMonthLabelClassName,
+  calendarNavButtonClassName,
+  calendarWeekRowClassName,
+  calendarWeekdayCellClassName,
+  calendarWeekdayLabelClassName,
+  calendarWeekdayRowClassName,
+} from "../../variants/calendar-variants";
+import { Text } from "../text/text";
+
+export interface CalendarHighlight {
+  start?: string;
+  end?: string;
+  inProgressStart?: string;
+}
+
+export interface CalendarProps {
+  yearMonth: string;
+  selected?: string;
+  onSelect?: (iso: string) => void;
+  onMonthChange?: (yearMonth: string) => void;
+  disabledDates?: (iso: string) => boolean;
+  minDate?: string;
+  maxDate?: string;
+  markers?: readonly string[];
+  highlight?: CalendarHighlight;
+  accessibilityLabel?: string;
+  previousMonthAccessibilityLabel?: string;
+  nextMonthAccessibilityLabel?: string;
+  className?: string;
+}
+
+export function Calendar({
+  yearMonth,
+  selected,
+  onSelect,
+  onMonthChange,
+  disabledDates,
+  minDate,
+  maxDate,
+  markers,
+  highlight,
+  accessibilityLabel,
+  previousMonthAccessibilityLabel = "Previous month",
+  nextMonthAccessibilityLabel = "Next month",
+  className,
+}: CalendarProps) {
+  const { locale } = useLocale();
+  const [displayYearMonth, setDisplayYearMonth] = useState(yearMonth);
+
+  useEffect(() => setDisplayYearMonth(yearMonth), [yearMonth]);
+
+  const firstDow = useMemo(() => firstDayOfWeek(locale), [locale]);
+  const weeks = useMemo(
+    () => buildMonthGrid(displayYearMonth, firstDow),
+    [displayYearMonth, firstDow],
+  );
+  const weekdayLabels = useMemo(
+    () => Array.from({ length: 7 }, (_, i) => formatWeekdayShort((firstDow + i) % 7, locale)),
+    [firstDow, locale],
+  );
+  const markerSet = useMemo(() => new Set(markers ?? []), [markers]);
+
+  const changeMonth = (delta: number) => {
+    const next = addMonths(displayYearMonth, delta);
+    setDisplayYearMonth(next);
+    onMonthChange?.(next);
+  };
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(calendarContainerClassName, className)}
+    >
+      <View className={calendarHeaderClassName}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={previousMonthAccessibilityLabel}
+          className={calendarNavButtonClassName}
+          onPress={() => changeMonth(-1)}
+        >
+          <ChevronLeft size={iconSize.md} />
+        </Pressable>
+        <Text className={calendarMonthLabelClassName}>
+          {formatMonthLabel(displayYearMonth, locale)}
+        </Text>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={nextMonthAccessibilityLabel}
+          className={calendarNavButtonClassName}
+          onPress={() => changeMonth(1)}
+        >
+          <ChevronRight size={iconSize.md} />
+        </Pressable>
+      </View>
+
+      <View className={calendarWeekdayRowClassName}>
+        {weekdayLabels.map((label, weekdayIndex) => (
+          <View key={weekdayIndex} className={calendarWeekdayCellClassName}>
+            <Text className={calendarWeekdayLabelClassName}>{label}</Text>
+          </View>
+        ))}
+      </View>
+
+      {weeks.map((week, weekIndex) => (
+        <View key={weekIndex} className={calendarWeekRowClassName}>
+          {week.map((cell) => {
+            const isDisabled =
+              disabledDates?.(cell.iso) === true || !isDateInRange(cell.iso, minDate, maxDate);
+            const isSelected = selected === cell.iso;
+            const isRangeStart = highlight?.start === cell.iso;
+            const isRangeEnd = highlight?.end === cell.iso;
+            const isInProgressStart = highlight?.inProgressStart === cell.iso;
+            const isInRange =
+              highlight?.start !== undefined &&
+              highlight.end !== undefined &&
+              cell.iso > highlight.start &&
+              cell.iso < highlight.end;
+            const isHighlighted =
+              isSelected || isRangeStart || isRangeEnd || isInProgressStart;
+            const hasMarker = markerSet.has(cell.iso);
+
+            return (
+              <Pressable
+                key={cell.iso}
+                accessibilityRole="button"
+                accessibilityLabel={formatFullDate(cell.iso, locale)}
+                accessibilityState={{ disabled: isDisabled, selected: isHighlighted }}
+                aria-disabled={isDisabled}
+                aria-selected={isHighlighted}
+                disabled={isDisabled}
+                onPress={() => {
+                  if (isDisabled) return;
+                  onSelect?.(cell.iso);
+                }}
+                className={cn(
+                  calendarDayCellClassName,
+                  isInRange && calendarDayCellInRangeClassName,
+                  isRangeStart && calendarDayCellRangeStartClassName,
+                  isRangeEnd && calendarDayCellRangeEndClassName,
+                  (isSelected || isInProgressStart) && calendarDayCellSelectedClassName,
+                  isDisabled && calendarDayCellDisabledClassName,
+                )}
+              >
+                <Text
+                  className={cn(
+                    calendarDayLabelClassName,
+                    !cell.isCurrentMonth && calendarDayLabelOutsideMonthClassName,
+                    isHighlighted && calendarDayLabelSelectedClassName,
+                  )}
+                >
+                  {cell.dayNumber}
+                </Text>
+                {hasMarker && <View className={calendarMarkerDotClassName} />}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { View } from "react-native";
+
+import { daysBetween } from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { formatDateRange, type DateStyle } from "../../lib/format/date";
+import { useLocale } from "../../lib/locale";
+import {
+  dateRangePickerContainerClassName,
+  dateRangePickerSummaryClassName,
+} from "../../variants/calendar-variants";
+import { Calendar } from "../calendar/calendar";
+import { Text } from "../text/text";
+
+export interface DateRange {
+  start?: string;
+  end?: string;
+}
+
+export interface DateRangePickerProps {
+  yearMonth: string;
+  onYearMonthChange?: (yearMonth: string) => void;
+  range?: DateRange;
+  onRangeChange: (range: { start: string; end: string }) => void;
+  minNights?: number;
+  maxNights?: number;
+  disabledDates?: (iso: string) => boolean;
+  minDate?: string;
+  maxDate?: string;
+  markers?: readonly string[];
+  accessibilityLabel?: string;
+  summaryAccessibilityLabel?: string;
+  summaryDateStyle?: DateStyle;
+  className?: string;
+}
+
+export function DateRangePicker({
+  yearMonth,
+  onYearMonthChange,
+  range,
+  onRangeChange,
+  minNights,
+  maxNights,
+  disabledDates,
+  minDate,
+  maxDate,
+  markers,
+  accessibilityLabel,
+  summaryAccessibilityLabel = "Selected date range",
+  summaryDateStyle = "medium",
+  className,
+}: DateRangePickerProps) {
+  const { locale } = useLocale();
+  const [inProgressStart, setInProgressStart] = useState<string | undefined>(undefined);
+
+  const handleSelect = (iso: string) => {
+    if (inProgressStart === undefined) {
+      setInProgressStart(iso);
+      return;
+    }
+
+    setInProgressStart(undefined);
+
+    const [start, end] =
+      inProgressStart < iso ? [inProgressStart, iso] : [iso, inProgressStart];
+    const nights = daysBetween(start, end);
+
+    if (nights <= 0) return;
+    if (minNights !== undefined && nights < minNights) return;
+    if (maxNights !== undefined && nights > maxNights) return;
+
+    onRangeChange({ start, end });
+  };
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(dateRangePickerContainerClassName, className)}
+    >
+      <Calendar
+        yearMonth={yearMonth}
+        onMonthChange={onYearMonthChange}
+        onSelect={handleSelect}
+        disabledDates={disabledDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        markers={markers}
+        highlight={{
+          start: range?.start,
+          end: range?.end,
+          inProgressStart,
+        }}
+      />
+      {range?.start !== undefined && range.end !== undefined && (
+        <Text
+          accessibilityLabel={summaryAccessibilityLabel}
+          className={dateRangePickerSummaryClassName}
+        >
+          {formatDateRange(range.start, range.end, locale, summaryDateStyle)}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/time-picker/time-picker.tsx

@@ -0,0 +1,131 @@
+import { useMemo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+
+import {
+  formatHourLabel,
+  formatTimeValue,
+  isLocaleHour12,
+  padTwoDigits,
+  parseTimeValue,
+} from "../../lib/calendar";
+import { cn } from "../../lib/cn";
+import { useLocale } from "../../lib/locale";
+import {
+  timePickerBodyClassName,
+  timePickerColumnClassName,
+  timePickerOptionClassName,
+  timePickerOptionLabelClassName,
+  timePickerOptionSelectedClassName,
+} from "../../variants/calendar-variants";
+import { Sheet } from "../sheet/sheet";
+import { Text } from "../text/text";
+
+export interface TimePickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  value?: string;
+  onChange: (value: string) => void;
+  minuteStep?: number;
+  hour12?: boolean;
+  bottomInset?: number;
+  accessibilityLabel: string;
+  backdropAccessibilityLabel: string;
+  hourColumnAccessibilityLabel?: string;
+  minuteColumnAccessibilityLabel?: string;
+}
+
+const HOURS_IN_DAY = 24;
+const MINUTES_IN_HOUR = 60;
+
+export function TimePicker({
+  isOpen,
+  onClose,
+  value,
+  onChange,
+  minuteStep = 15,
+  hour12,
+  bottomInset,
+  accessibilityLabel,
+  backdropAccessibilityLabel,
+  hourColumnAccessibilityLabel = "Hour",
+  minuteColumnAccessibilityLabel = "Minute",
+}: TimePickerProps) {
+  const { locale } = useLocale();
+  const useHour12 = hour12 ?? isLocaleHour12(locale);
+
+  const parsed = value !== undefined ? parseTimeValue(value) : undefined;
+  const selectedHour = parsed?.hour;
+  const selectedMinute = parsed?.minute;
+
+  const hours = useMemo(() => Array.from({ length: HOURS_IN_DAY }, (_, i) => i), []);
+  const minutes = useMemo(
+    () =>
+      Array.from({ length: Math.ceil(MINUTES_IN_HOUR / minuteStep) }, (_, i) => i * minuteStep),
+    [minuteStep],
+  );
+
+  const emit = (hour: number, minute: number) => onChange(formatTimeValue(hour, minute));
+
+  return (
+    <Sheet
+      isOpen={isOpen}
+      onClose={onClose}
+      accessibilityLabel={accessibilityLabel}
+      backdropAccessibilityLabel={backdropAccessibilityLabel}
+      bottomInset={bottomInset}
+    >
+      <View className={timePickerBodyClassName}>
+        <ScrollView
+          accessibilityLabel={hourColumnAccessibilityLabel}
+          className={timePickerColumnClassName}
+        >
+          {hours.map((hour) => {
+            const isActive = hour === selectedHour;
+            return (
+              <Pressable
+                key={hour}
+                accessibilityRole="button"
+                accessibilityLabel={formatHourLabel(hour, useHour12, locale)}
+                accessibilityState={{ selected: isActive }}
+                aria-selected={isActive}
+                onPress={() => emit(hour, selectedMinute ?? 0)}
+                className={cn(
+                  timePickerOptionClassName,
+                  isActive && timePickerOptionSelectedClassName,
+                )}
+              >
+                <Text className={timePickerOptionLabelClassName}>
+                  {formatHourLabel(hour, useHour12, locale)}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+        <ScrollView
+          accessibilityLabel={minuteColumnAccessibilityLabel}
+          className={timePickerColumnClassName}
+        >
+          {minutes.map((minute) => {
+            const isActive = minute === selectedMinute;
+            return (
+              <Pressable
+                key={minute}
+                accessibilityRole="button"
+                accessibilityLabel={padTwoDigits(minute)}
+                accessibilityState={{ selected: isActive }}
+                aria-selected={isActive}
+                onPress={() => emit(selectedHour ?? 0, minute)}
+                className={cn(
+                  timePickerOptionClassName,
+                  isActive && timePickerOptionSelectedClassName,
+                )}
+              >
+                <Text className={timePickerOptionLabelClassName}>{padTwoDigits(minute)}</Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </Sheet>
+  );
+}

package/src/index.ts

@@ -7,10 +7,12 @@ export * from "./components/badge/badge";
 export * from "./components/badge/urgency-badge";
 export * from "./components/button/button";
 export * from "./components/button/types";
+export * from "./components/calendar/calendar";
 export * from "./components/card/card";
 export * from "./components/card/card-section";
 export * from "./components/checkbox/checkbox";
 export * from "./components/chip/chip";
+export * from "./components/date-range-picker/date-range-picker";
 export * from "./components/dialog/dialog";
 export * from "./components/empty-state/empty-state";
 export * from "./components/error-state/error-state";
@@ -50,9 +52,11 @@ export * from "./components/tabs/tabs-context";
 export * from "./components/text/text";
 export * from "./components/text/text-class-context";
 export * from "./components/textarea/textarea";
+export * from "./components/time-picker/time-picker";
 export * from "./components/toast/toast";
 export * from "./components/toast/toast-context";
 export * from "./components/toast/toast-provider";
+export * from "./lib/calendar";
 export * from "./lib/cn";
 export * from "./lib/format/date";
 export * from "./lib/format/distance";
@@ -66,6 +70,7 @@ export * from "./lib/use-toast";
 export * from "./variants/avatar-variants";
 export * from "./variants/badge-variants";
 export * from "./variants/button-variants";
+export * from "./variants/calendar-variants";
 export * from "./variants/card-variants";
 export * from "./variants/checkbox-variants";
 export * from "./variants/chip-variants";

package/src/lib/calendar.ts

@@ -0,0 +1,204 @@
+export type IsoDate = string;
+export type YearMonth = string;
+
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const YEAR_MONTH_PATTERN = /^\d{4}-\d{2}$/;
+const MS_PER_DAY = 86_400_000;
+
+const SUNDAY_FIRST_REGIONS: ReadonlySet<string> = new Set([
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "KR",
+  "PH",
+  "BR",
+  "IL",
+  "SA",
+  "AE",
+  "EG",
+  "AU",
+]);
+
+export function parseIsoDate(iso: IsoDate): { year: number; month: number; day: number } {
+  if (!ISO_DATE_PATTERN.test(iso)) {
+    throw new Error(`Invalid ISO date: ${iso}`);
+  }
+  const parts = iso.split("-");
+  return {
+    year: Number(parts[0]),
+    month: Number(parts[1]),
+    day: Number(parts[2]),
+  };
+}
+
+export function parseYearMonth(yearMonth: YearMonth): { year: number; month: number } {
+  if (!YEAR_MONTH_PATTERN.test(yearMonth)) {
+    throw new Error(`Invalid year-month: ${yearMonth}`);
+  }
+  const parts = yearMonth.split("-");
+  return {
+    year: Number(parts[0]),
+    month: Number(parts[1]),
+  };
+}
+
+export function toIsoDate(year: number, month: number, day: number): IsoDate {
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+
+export function toYearMonth(year: number, month: number): YearMonth {
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}`;
+}
+
+export function yearMonthOf(iso: IsoDate): YearMonth {
+  const { year, month } = parseIsoDate(iso);
+  return toYearMonth(year, month);
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+
+export function dayOfWeek(iso: IsoDate): number {
+  const { year, month, day } = parseIsoDate(iso);
+  return new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+}
+
+export function addMonths(yearMonth: YearMonth, delta: number): YearMonth {
+  const { year, month } = parseYearMonth(yearMonth);
+  const totalMonths = year * 12 + (month - 1) + delta;
+  const nextYear = Math.floor(totalMonths / 12);
+  const nextMonth = ((totalMonths % 12) + 12) % 12 + 1;
+  return toYearMonth(nextYear, nextMonth);
+}
+
+export function daysBetween(startIso: IsoDate, endIso: IsoDate): number {
+  const start = parseIsoDate(startIso);
+  const end = parseIsoDate(endIso);
+  const startUtc = Date.UTC(start.year, start.month - 1, start.day);
+  const endUtc = Date.UTC(end.year, end.month - 1, end.day);
+  return Math.round((endUtc - startUtc) / MS_PER_DAY);
+}
+
+export function firstDayOfWeek(locale: string): number {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info =
+      (loc as unknown as { getWeekInfo?: () => { firstDay?: number } }).getWeekInfo?.() ??
+      (loc as unknown as { weekInfo?: { firstDay?: number } }).weekInfo;
+    if (info && typeof info.firstDay === "number") {
+      return info.firstDay === 7 ? 0 : info.firstDay;
+    }
+    const region = loc.maximize().region;
+    return region !== undefined && SUNDAY_FIRST_REGIONS.has(region) ? 0 : 1;
+  } catch {
+    return 1;
+  }
+}
+
+export interface MonthGridCell {
+  iso: IsoDate;
+  dayNumber: number;
+  isCurrentMonth: boolean;
+}
+
+export function buildMonthGrid(yearMonth: YearMonth, firstDow: number): MonthGridCell[][] {
+  const { year, month } = parseYearMonth(yearMonth);
+  const firstOfMonthDow = dayOfWeek(toIsoDate(year, month, 1));
+  const leading = (firstOfMonthDow - firstDow + 7) % 7;
+  const inThisMonth = daysInMonth(year, month);
+  const totalCells = Math.ceil((leading + inThisMonth) / 7) * 7;
+
+  const previousYearMonth = addMonths(yearMonth, -1);
+  const { year: prevY, month: prevM } = parseYearMonth(previousYearMonth);
+  const previousMonthDays = daysInMonth(prevY, prevM);
+  const nextYearMonth = addMonths(yearMonth, 1);
+  const { year: nextY, month: nextM } = parseYearMonth(nextYearMonth);
+
+  const cells: MonthGridCell[] = [];
+  for (let cellIndex = 0; cellIndex < totalCells; cellIndex++) {
+    const offset = cellIndex - leading;
+    if (offset < 0) {
+      const day = previousMonthDays + offset + 1;
+      cells.push({ iso: toIsoDate(prevY, prevM, day), dayNumber: day, isCurrentMonth: false });
+    } else if (offset < inThisMonth) {
+      const day = offset + 1;
+      cells.push({ iso: toIsoDate(year, month, day), dayNumber: day, isCurrentMonth: true });
+    } else {
+      const day = offset - inThisMonth + 1;
+      cells.push({ iso: toIsoDate(nextY, nextM, day), dayNumber: day, isCurrentMonth: false });
+    }
+  }
+
+  const weeks: MonthGridCell[][] = [];
+  for (let start = 0; start < cells.length; start += 7) {
+    weeks.push(cells.slice(start, start + 7));
+  }
+  return weeks;
+}
+
+export function isDateInRange(iso: IsoDate, minDate?: IsoDate, maxDate?: IsoDate): boolean {
+  if (minDate !== undefined && iso < minDate) return false;
+  if (maxDate !== undefined && iso > maxDate) return false;
+  return true;
+}
+
+export function formatMonthLabel(yearMonth: YearMonth, locale: string): string {
+  const { year, month } = parseYearMonth(yearMonth);
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month - 1, 1, 12, 0, 0)));
+}
+
+const SUNDAY_ANCHOR_UTC = Date.UTC(2024, 0, 7);
+
+export function formatWeekdayShort(dayOfWeekIndex: number, locale: string): string {
+  const date = new Date(SUNDAY_ANCHOR_UTC + dayOfWeekIndex * MS_PER_DAY);
+  return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(date);
+}
+
+export function formatFullDate(iso: IsoDate, locale: string): string {
+  const { year, month, day } = parseIsoDate(iso);
+  return new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(
+    new Date(Date.UTC(year, month - 1, day, 12, 0, 0)),
+  );
+}
+
+export function isLocaleHour12(locale: string): boolean {
+  const parts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "numeric",
+    timeZone: "UTC",
+  }).formatToParts(new Date(Date.UTC(2024, 0, 1, 13, 0, 0)));
+  return parts.some((part) => part.type === "dayPeriod");
+}
+
+export function formatHourLabel(hour24: number, hour12Mode: boolean, locale: string): string {
+  const date = new Date(Date.UTC(2024, 0, 1, hour24, 0, 0));
+  return new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: hour12Mode,
+    timeZone: "UTC",
+  }).format(date);
+}
+
+export function padTwoDigits(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+export function formatTimeValue(hour24: number, minute: number): string {
+  return `${padTwoDigits(hour24)}:${padTwoDigits(minute)}`;
+}
+
+export function parseTimeValue(value: string): { hour: number; minute: number } | undefined {
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (match === null) return undefined;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) return undefined;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return undefined;
+  return { hour, minute };
+}

package/src/variants/calendar-variants.ts

@@ -0,0 +1,26 @@
+export const calendarContainerClassName = "w-full px-md";
+export const calendarHeaderClassName = "flex-row items-center justify-between py-md";
+export const calendarMonthLabelClassName = "text-base font-medium text-foreground";
+export const calendarNavButtonClassName = "px-md py-sm";
+export const calendarWeekdayRowClassName = "flex-row";
+export const calendarWeekdayCellClassName = "flex-1 items-center py-xs";
+export const calendarWeekdayLabelClassName = "text-xs uppercase text-muted-foreground";
+export const calendarWeekRowClassName = "flex-row";
+export const calendarDayCellClassName =
+  "flex-1 aspect-square items-center justify-center rounded-full";
+export const calendarDayCellSelectedClassName = "bg-primary";
+export const calendarDayCellInRangeClassName = "rounded-none bg-primary/20";
+export const calendarDayCellRangeStartClassName = "rounded-l-full rounded-r-none bg-primary";
+export const calendarDayCellRangeEndClassName = "rounded-l-none rounded-r-full bg-primary";
+export const calendarDayCellDisabledClassName = "opacity-40";
+export const calendarDayLabelClassName = "text-sm text-foreground";
+export const calendarDayLabelOutsideMonthClassName = "text-muted-foreground/50";
+export const calendarDayLabelSelectedClassName = "text-primary-foreground";
+export const calendarMarkerDotClassName = "absolute bottom-1 h-1 w-1 rounded-full bg-primary";
+export const dateRangePickerContainerClassName = "w-full";
+export const dateRangePickerSummaryClassName = "px-md pb-md text-sm text-foreground";
+export const timePickerBodyClassName = "flex-row py-md";
+export const timePickerColumnClassName = "flex-1";
+export const timePickerOptionClassName = "items-center py-sm";
+export const timePickerOptionSelectedClassName = "bg-primary/10";
+export const timePickerOptionLabelClassName = "text-base text-foreground";