@korsolutions/ui 0.0.71 → 0.0.74

package/src/components/calendar/{components → calendar}/calendar-weeks.tsx

@@ -1,25 +1,38 @@
-import { getWeekDays, getWeeksInMonth } from "../../../utils/date-utils";
 import React from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { useCalendarContext } from "../context";
-import { CalendarDay } from "./calendar-day";
+import {
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { getWeekDays, getWeeksInMonth } from "../../../utils/date-utils";
+import { useCalendarContext } from "../shared/calendar-context";
+import { CalendarDay } from "../shared/calendar-day";
+import type { CalendarStyles } from "./types";
 
 export interface CalendarWeekProps extends ViewProps {
   index: number;
-
   style?: StyleProp<ViewStyle>;
 }
 
 function CalendarWeek(props: CalendarWeekProps) {
   const { style, ...viewProps } = props;
   const { currentMonth, styles } = useCalendarContext();
+  const calStyles = styles as CalendarStyles;
 
-  const days = getWeekDays(currentMonth.getMonth(), currentMonth.getFullYear(), props.index);
+  const days = getWeekDays(
+    currentMonth.getMonth(),
+    currentMonth.getFullYear(),
+    props.index,
+  );
 
-  const composedStyle = [styles?.week, style];
+  const composedStyle = [calStyles?.week, style];
   return (
     <View {...viewProps} style={composedStyle}>
       {days.map((day, index) => {
+        if (!day) {
+          return <View key={index} style={styles?.dayButton?.default} />;
+        }
         return <CalendarDay key={index} date={day} />;
       })}
     </View>
@@ -32,10 +45,11 @@ export interface CalendarWeeksProps extends ViewProps {
 
 export function CalendarWeeks(props: CalendarWeeksProps) {
   const { currentMonth, styles } = useCalendarContext();
+  const calStyles = styles as CalendarStyles;
 
   const weeks = getWeeksInMonth(currentMonth);
 
-  const composedStyle = [styles?.weeks, props.style];
+  const composedStyle = [calStyles?.weeks, props.style];
 
   return (
     <View style={composedStyle}>

package/src/components/calendar/calendar/index.ts

@@ -0,0 +1,26 @@
+import { CalendarDay } from "../shared/calendar-day";
+import { CalendarHeader } from "../shared/calendar-header";
+import { CalendarNavButtons } from "../shared/calendar-nav-buttons";
+import { CalendarTitle } from "../shared/calendar-title";
+import { CalendarWeekLabels } from "../shared/calendar-week-labels";
+import { CalendarRoot } from "./calendar-root";
+import { CalendarWeeks } from "./calendar-weeks";
+
+export const Calendar = {
+  Root: CalendarRoot,
+  Header: CalendarHeader,
+  Title: CalendarTitle,
+  NavButtons: CalendarNavButtons,
+  CalendarWeekLabels: CalendarWeekLabels,
+  Weeks: CalendarWeeks,
+  Day: CalendarDay,
+};
+
+export type { CalendarDayProps } from "../shared/calendar-day";
+export type { CalendarHeaderProps } from "../shared/calendar-header";
+export type { CalendarNavButtonsProps } from "../shared/calendar-nav-buttons";
+export type { CalendarTitleProps } from "../shared/calendar-title";
+export type { CalendarWeekLabelsProps } from "../shared/calendar-week-labels";
+export type { CalendarRootProps } from "./calendar-root";
+export type { CalendarWeeksProps } from "./calendar-weeks";
+export type { CalendarStyles } from "./types";

package/src/components/calendar/calendar/types.ts

@@ -0,0 +1,7 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { BaseCalendarStyles } from "../shared/types";
+
+export interface CalendarStyles extends BaseCalendarStyles {
+  weeks?: StyleProp<ViewStyle>;
+  week?: StyleProp<ViewStyle>;
+}

package/src/components/calendar/{variants → calendar/variants}/default.tsx

@@ -1,5 +1,6 @@
-import { type CalendarStyles } from "../..";
-import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { hslaSetRelativeLightness } from "../../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../../utils/use-themed-styles";
+import type { CalendarStyles } from "../types";
 
 export const useCalendarVariantDefault = (): CalendarStyles => {
   return useThemedStyles(
@@ -25,24 +26,38 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
         fontFamily,
         color: colors.foreground,
       },
+      navButtons: {
+        flexDirection: "row",
+        gap: 4,
+      },
       navButton: {
         default: {
           width: 32,
           height: 32,
-          borderRadius: radius * 0.5,
+          borderRadius: radius,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "transparent",
         },
         disabled: {
-          opacity: 0.3,
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
         },
       },
-      navButtonText: {
+      navButtonIcon: {
         default: {
-          fontSize: fontSize * 1.5,
           color: colors.foreground,
-          fontWeight: "500",
+          size: fontSize * 1.25,
+          style: {
+            color: colors.foreground,
+            fontSize: fontSize * 1.25,
+            lineHeight: fontSize * 1.25,
+            textAlign: "center",
+            fontWeight: "500",
+            pointerEvents: "none",
+          },
         },
         disabled: {
           color: colors.mutedForeground,
@@ -91,9 +106,6 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
         disabled: {
           opacity: 0.3,
         },
-        deprioritized: {
-          backgroundColor: "transparent",
-        },
         hovered: {
           backgroundColor: colors.muted,
         },
@@ -117,10 +129,14 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
         disabled: {
           color: colors.mutedForeground,
         },
-        deprioritized: {
-          color: colors.mutedForeground,
-          opacity: 0.5,
-        },
+      },
+      dayMarker: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+        backgroundColor: colors.primary,
+        marginTop: 2,
+        alignSelf: "center",
       },
     }),
   );

package/src/components/calendar/index.ts

@@ -1,26 +1,23 @@
-import { CalendarDay } from "./components/calendar-day";
-import { CalendarHeader } from "./components/calendar-header";
-import { CalendarNavButton } from "./components/calendar-nav-button";
-import { CalendarRoot } from "./components/calendar-root";
-import { CalendarTitle } from "./components/calendar-title";
-import { CalendarWeekLabels } from "./components/calendar-week-labels";
-import { CalendarWeeks } from "./components/calendar-weeks";
+export { Calendar } from "./calendar";
+export type {
+  CalendarDayProps,
+  CalendarHeaderProps,
+  CalendarNavButtonsProps,
+  CalendarRootProps,
+  CalendarStyles,
+  CalendarTitleProps,
+  CalendarWeekLabelsProps,
+  CalendarWeeksProps,
+} from "./calendar";
 
-export const Calendar = {
-  Root: CalendarRoot,
-  Header: CalendarHeader,
-  Title: CalendarTitle,
-  NavButton: CalendarNavButton,
-  CalendarWeekLabels: CalendarWeekLabels,
-  Weeks: CalendarWeeks,
-  Day: CalendarDay,
-};
+export { WeekCalendar } from "./week-calendar";
+export type { WeekCalendarProps, WeekCalendarStyles } from "./week-calendar";
 
-export type { CalendarDayProps } from "./components/calendar-day";
-export type { CalendarHeaderProps } from "./components/calendar-header";
-export type { CalendarNavButtonProps } from "./components/calendar-nav-button";
-export type { CalendarRootProps } from "./components/calendar-root";
-export type { CalendarTitleProps } from "./components/calendar-title";
-export type { CalendarWeekLabelsProps } from "./components/calendar-week-labels";
-export type { CalendarWeeksProps } from "./components/calendar-weeks";
-export type { CalendarDayState, CalendarStyles } from "./types";
+export { CalendarTimeline } from "./timeline";
+export type {
+  CalendarTimelineProps,
+  TimelineEventLayout,
+  TimelineStyles,
+} from "./timeline";
+
+export type { CalendarDayState } from "./shared/types";

package/src/components/calendar/shared/calendar-context.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import type { BaseCalendarStyles } from "./types";
+
+export interface CalendarContextValue {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  currentMonth: Date;
+  goToPrev: () => void;
+  goToNext: () => void;
+  isPrevDisabled: boolean;
+  isNextDisabled: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  markedDates?: Date[];
+
+  // WeekCalendar-specific
+  currentWeekStart?: Date;
+  setCurrentWeekStart?: (date: Date) => void;
+
+  styles?: BaseCalendarStyles;
+}
+
+export const CalendarContext = React.createContext<
+  CalendarContextValue | undefined
+>(undefined);
+
+export const useCalendarContext = () => {
+  const context = React.useContext(CalendarContext);
+  if (!context) {
+    throw new Error(
+      "Calendar components must be used within a Calendar or WeekCalendar Root",
+    );
+  }
+  return context;
+};

package/src/components/calendar/{components → shared}/calendar-day.tsx

@@ -1,8 +1,21 @@
-import { formatDate, isDateAfter, isDateBefore, isDateSameDay, isDateToday, isSameMonth } from "../../../utils/date-utils";
 import React, { useMemo, useState } from "react";
-import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
-import { useCalendarContext } from "../context";
-import type { CalendarDayState } from "../types";
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import {
+  formatDate,
+  isDateAfter,
+  isDateBefore,
+  isDateSameDay,
+  isDateToday,
+} from "../../../utils/date-utils";
+import { useCalendarContext } from "./calendar-context";
+import type { CalendarDayState } from "./types";
 
 export interface CalendarDayProps {
   date: Date;
@@ -15,7 +28,6 @@ export interface CalendarDayProps {
 const calculateState = (
   date: Date,
   selected: Date | null | undefined,
-  isCurrentMonth: boolean,
   isDisabled: boolean,
   isHovered: boolean,
 ): CalendarDayState => {
@@ -23,7 +35,6 @@ const calculateState = (
   if (selected && isDateSameDay(date, selected)) return "selected";
   if (isDateToday(date)) return "today";
   if (isHovered) return "hovered";
-  if (!isCurrentMonth) return "deprioritized";
   return "default";
 };
 
@@ -31,23 +42,39 @@ export function CalendarDay(props: CalendarDayProps) {
   const calendar = useCalendarContext();
   const [isHovered, setIsHovered] = useState(false);
 
-  const isCurrentMonth = isSameMonth(props.date, calendar.currentMonth);
-
   const isDisabled = useMemo(() => {
-    if (calendar.minDate && isDateBefore(props.date, calendar.minDate)) return true;
-    if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate)) return true;
+    if (calendar.minDate && isDateBefore(props.date, calendar.minDate))
+      return true;
+    if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate))
+      return true;
     return false;
   }, [props.date, calendar.minDate, calendar.maxDate]);
 
-  const state = calculateState(props.date, calendar.value, isCurrentMonth, isDisabled, isHovered);
+  const isMarked =
+    calendar.markedDates?.some((d) => isDateSameDay(d, props.date)) ?? false;
+
+  const state = calculateState(
+    props.date,
+    calendar.value,
+    isDisabled,
+    isHovered,
+  );
 
   const handlePress = () => {
     if (isDisabled || !calendar.onChange) return;
     calendar.onChange(props.date);
   };
 
-  const composedStyle = [calendar.styles?.dayButton?.default, calendar.styles?.dayButton?.[state], props.style];
-  const composedTextStyle = [calendar.styles?.dayText?.default, calendar.styles?.dayText?.[state], props.textStyle];
+  const composedStyle = [
+    calendar.styles?.dayButton?.default,
+    calendar.styles?.dayButton?.[state],
+    props.style,
+  ];
+  const composedTextStyle = [
+    calendar.styles?.dayText?.default,
+    calendar.styles?.dayText?.[state],
+    props.textStyle,
+  ];
 
   return (
     <Pressable
@@ -58,6 +85,7 @@ export function CalendarDay(props: CalendarDayProps) {
       style={composedStyle}
     >
       <Text style={composedTextStyle}>{formatDate(props.date, "d")}</Text>
+      {isMarked && <View style={calendar.styles?.dayMarker} />}
     </Pressable>
   );
 }

package/src/components/calendar/{components → shared}/calendar-header.tsx

@@ -1,6 +1,11 @@
 import React from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { useCalendarContext } from "../context";
+import {
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { useCalendarContext } from "./calendar-context";
 
 export interface CalendarHeaderProps extends ViewProps {
   children?: React.ReactNode;

package/src/components/calendar/shared/calendar-nav-buttons.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useComponentsConfig } from "../../../themes";
+import { useCalendarContext } from "./calendar-context";
+import type { CalendarNavButtonState } from "./types";
+
+export interface CalendarNavButtonsProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isDisabled: boolean,
+  isHovered: boolean,
+): CalendarNavButtonState => {
+  if (isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function CalendarNavButtons(props: CalendarNavButtonsProps) {
+  const { style } = props;
+  const { goToPrev, goToNext, isPrevDisabled, isNextDisabled, styles } =
+    useCalendarContext();
+  const config = useComponentsConfig();
+  const PrevIcon = config?.calendar?.prevIcon;
+  const NextIcon = config?.calendar?.nextIcon;
+  const [prevHovered, setPrevHovered] = useState(false);
+  const [nextHovered, setNextHovered] = useState(false);
+
+  const prevState = calculateState(isPrevDisabled, prevHovered);
+  const nextState = calculateState(isNextDisabled, nextHovered);
+
+  const prevIconProps = StyleSheet.flatten([
+    styles?.navButtonIcon?.default,
+    styles?.navButtonIcon?.[prevState],
+  ]);
+  const nextIconProps = StyleSheet.flatten([
+    styles?.navButtonIcon?.default,
+    styles?.navButtonIcon?.[nextState],
+  ]);
+
+  const composedStyle = [styles?.navButtons, style];
+
+  return (
+    <View style={composedStyle}>
+      <Pressable
+        onPress={goToPrev}
+        onHoverIn={() => setPrevHovered(true)}
+        onHoverOut={() => setPrevHovered(false)}
+        disabled={isPrevDisabled}
+        style={[styles?.navButton?.default, styles?.navButton?.[prevState]]}
+      >
+        {PrevIcon ? (
+          <PrevIcon {...prevIconProps} />
+        ) : (
+          <Text style={prevIconProps?.style}>‹</Text>
+        )}
+      </Pressable>
+      <Pressable
+        onPress={goToNext}
+        onHoverIn={() => setNextHovered(true)}
+        onHoverOut={() => setNextHovered(false)}
+        disabled={isNextDisabled}
+        style={[styles?.navButton?.default, styles?.navButton?.[nextState]]}
+      >
+        {NextIcon ? (
+          <NextIcon {...nextIconProps} />
+        ) : (
+          <Text style={nextIconProps?.style}>›</Text>
+        )}
+      </Pressable>
+    </View>
+  );
+}

package/src/components/calendar/{components → shared}/calendar-title.tsx

@@ -1,7 +1,12 @@
-import { formatDate } from "../../../utils/date-utils";
 import React from "react";
-import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
-import { useCalendarContext } from "../context";
+import {
+  Text,
+  type StyleProp,
+  type TextProps,
+  type TextStyle,
+} from "react-native";
+import { formatDate } from "../../../utils/date-utils";
+import { useCalendarContext } from "./calendar-context";
 
 export interface CalendarTitleProps extends TextProps {
   children?: React.ReactNode;

package/src/components/calendar/{components → shared}/calendar-week-labels.tsx

@@ -1,6 +1,12 @@
 import React from "react";
-import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
-import { useCalendarContext } from "../context";
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { useCalendarContext } from "./calendar-context";
 
 export interface CalendarWeekLabelProps {
   children: string;

package/src/components/calendar/shared/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { IconProps } from "../../icon";
+
+export type CalendarDayState =
+  | "default"
+  | "selected"
+  | "today"
+  | "disabled"
+  | "hovered";
+export type CalendarNavButtonState = "default" | "disabled" | "hovered";
+
+export interface BaseCalendarStyles {
+  root?: StyleProp<ViewStyle>;
+  header?: StyleProp<ViewStyle>;
+  headerTitle?: StyleProp<TextStyle>;
+  navButtons?: StyleProp<ViewStyle>;
+  navButton?: Partial<Record<CalendarNavButtonState, ViewStyle>>;
+  navButtonIcon?: Partial<Record<CalendarNavButtonState, IconProps>>;
+  weekLabels?: StyleProp<ViewStyle>;
+  weekLabel?: StyleProp<TextStyle>;
+  dayButton?: Partial<Record<CalendarDayState, StyleProp<ViewStyle>>>;
+  dayText?: Partial<Record<CalendarDayState, StyleProp<TextStyle>>>;
+  dayMarker?: StyleProp<ViewStyle>;
+}