@korsolutions/ui 0.0.72 → 0.0.75

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>;
+}

package/src/components/calendar/timeline/calendar-timeline.tsx

@@ -0,0 +1,204 @@
+import React, { useMemo } from "react";
+import { ScrollView, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { isDateSameDay } from "../../../utils/date-utils";
+import { TimelineVariants } from "./variants";
+
+const HOUR_HEIGHT = 60;
+
+function formatHour(hour: number): string {
+  if (hour === 0) return "12 AM";
+  if (hour < 12) return `${hour} AM`;
+  if (hour === 12) return "12 PM";
+  return `${hour - 12} PM`;
+}
+
+function getMinutesFromStartOfDay(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+export interface TimelineEventLayout {
+  top: number;
+  height: number;
+  left: string;
+  width: string;
+}
+
+export interface CalendarTimelineProps<T> {
+  events?: T[];
+  date: Date;
+  startHour?: number;
+  endHour?: number;
+  getStart: (event: T) => Date;
+  getEnd: (event: T) => Date;
+  keyExtractor: (event: T) => string;
+  renderEvent: (event: T, layout: TimelineEventLayout) => React.ReactNode;
+  variant?: keyof typeof TimelineVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+function groupOverlappingEvents<T>(
+  events: T[],
+  getStart: (e: T) => Date,
+  getEnd: (e: T) => Date,
+): T[][] {
+  const sorted = [...events].sort(
+    (a, b) => getStart(a).getTime() - getStart(b).getTime(),
+  );
+  const groups: T[][] = [];
+
+  for (const event of sorted) {
+    let placed = false;
+    const eStart = getStart(event);
+    const eEnd = getEnd(event);
+
+    for (const group of groups) {
+      const overlaps = group.some((g) => {
+        const gStart = getStart(g);
+        const gEnd = getEnd(g);
+        return (
+          (eStart >= gStart && eStart < gEnd) ||
+          (eEnd > gStart && eEnd <= gEnd) ||
+          (eStart <= gStart && eEnd >= gEnd)
+        );
+      });
+
+      if (overlaps) {
+        group.push(event);
+        placed = true;
+        break;
+      }
+    }
+
+    if (!placed) {
+      groups.push([event]);
+    }
+  }
+
+  return groups;
+}
+
+export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
+  const {
+    date,
+    startHour = 0,
+    endHour = 24,
+    getStart,
+    getEnd,
+    keyExtractor,
+    renderEvent,
+    style,
+  } = props;
+  const variantStyles = TimelineVariants[props.variant || "default"]();
+
+  const hours = useMemo(() => {
+    const arr: number[] = [];
+    for (let i = startHour; i < endHour; i++) {
+      arr.push(i);
+    }
+    return arr;
+  }, [startHour, endHour]);
+
+  const allEvents = props.events ?? [];
+
+  const dayEvents = useMemo(() => {
+    return allEvents.filter((event) => isDateSameDay(getStart(event), date));
+  }, [allEvents, date, getStart]);
+
+  const eventGroups = useMemo(
+    () => groupOverlappingEvents(dayEvents, getStart, getEnd),
+    [dayEvents, getStart, getEnd],
+  );
+
+  const now = new Date();
+  const isToday = isDateSameDay(now, date);
+  const currentTimePosition = isToday
+    ? ((getMinutesFromStartOfDay(now) - startHour * 60) / 60) * HOUR_HEIGHT
+    : null;
+
+  return (
+    <ScrollView
+      style={[variantStyles.container, style]}
+      showsVerticalScrollIndicator
+    >
+      <View style={variantStyles.timeline}>
+        {/* Time column */}
+        <View style={variantStyles.timeColumn}>
+          {hours.map((hour) => (
+            <View key={hour} style={variantStyles.timeSlot}>
+              <Text style={variantStyles.timeText}>{formatHour(hour)}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Events column */}
+        <View style={variantStyles.eventsColumn}>
+          {hours.map((hour) => (
+            <View key={hour} style={variantStyles.hourLine} />
+          ))}
+
+          {/* Current time indicator */}
+          {currentTimePosition != null && currentTimePosition >= 0 && (
+            <View
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: currentTimePosition,
+                flexDirection: "row",
+                alignItems: "center",
+                zIndex: 1000,
+              }}
+            >
+              <View style={variantStyles.currentTimeDot} />
+              <View style={variantStyles.currentTimeLineBar} />
+            </View>
+          )}
+
+          {/* Events */}
+          {eventGroups.map((group) =>
+            group.map((event) => {
+              const startMinutes = getMinutesFromStartOfDay(getStart(event));
+              let endMinutes = getMinutesFromStartOfDay(getEnd(event));
+              // Handle midnight (0:00) or end times on the next day
+              if (endMinutes <= startMinutes) {
+                endMinutes = endHour * 60;
+              }
+              const duration = endMinutes - startMinutes;
+
+              const top =
+                ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
+              const height = (duration / 60) * HOUR_HEIGHT - 3;
+
+              const indexInGroup = group.indexOf(event);
+              const totalInGroup = group.length;
+              const eventWidth = `${100 / totalInGroup - 1}%`;
+              const left = `${(100 / totalInGroup) * indexInGroup}%`;
+
+              const layout: TimelineEventLayout = {
+                top,
+                height: Math.max(height, 20),
+                left,
+                width: eventWidth,
+              };
+
+              return (
+                <View
+                  key={keyExtractor(event)}
+                  style={{
+                    position: "absolute",
+                    top: layout.top,
+                    height: layout.height,
+                    left: layout.left as unknown as number,
+                    width: layout.width as unknown as number,
+                  }}
+                >
+                  {renderEvent(event, layout)}
+                </View>
+              );
+            }),
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,6 @@
+export { CalendarTimeline } from "./calendar-timeline";
+export type {
+  CalendarTimelineProps,
+  TimelineEventLayout,
+} from "./calendar-timeline";
+export type { TimelineStyles } from "./types";

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

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export interface TimelineStyles {
+  container?: StyleProp<ViewStyle>;
+  timeline?: StyleProp<ViewStyle>;
+  timeColumn?: StyleProp<ViewStyle>;
+  timeSlot?: StyleProp<ViewStyle>;
+  timeText?: StyleProp<TextStyle>;
+  eventsColumn?: StyleProp<ViewStyle>;
+  hourLine?: StyleProp<ViewStyle>;
+  currentTimeDot?: StyleProp<ViewStyle>;
+  currentTimeLineBar?: StyleProp<ViewStyle>;
+}