@korsolutions/ui 0.0.50 → 0.0.52

package/src/components/button/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import type { ButtonState, ButtonStyles } from "./types";
+
+export interface ButtonContext {
+  state: ButtonState;
+  styles?: ButtonStyles;
+}
+
+export const ButtonContext = createContext<ButtonContext | undefined>(undefined);
+
+export const useButton = () => {
+  const context = useContext(ButtonContext);
+  if (!context) {
+    throw new Error("useButton must be used within a ButtonProvider");
+  }
+  return context;
+};

package/src/components/button/index.ts

@@ -0,0 +1,14 @@
+import { ButtonLabel } from "./components/button-label";
+import { ButtonRoot } from "./components/button-root";
+import { ButtonSpinner } from "./components/button-spinner";
+
+export const Button = {
+  Root: ButtonRoot,
+  Label: ButtonLabel,
+  Spinner: ButtonSpinner,
+};
+
+export type { ButtonLabelProps } from "./components/button-label";
+export type { ButtonRootProps } from "./components/button-root";
+export type { ButtonSpinnerProps } from "./components/button-spinner";
+export type { ButtonStyles } from "./types";

package/src/components/button/types.ts

@@ -0,0 +1,11 @@
+import type { ButtonLabelProps } from "./components/button-label";
+import type { ButtonRootProps } from "./components/button-root";
+import type { ButtonSpinnerProps } from "./components/button-spinner";
+
+export type ButtonState = "default" | "disabled" | "loading" | "hovered";
+
+export interface ButtonStyles {
+  root?: Partial<Record<ButtonState, ButtonRootProps["style"]>>;
+  label?: Partial<Record<ButtonState, ButtonLabelProps["style"]>>;
+  spinner?: Partial<Record<ButtonState, ButtonSpinnerProps>>;
+}

package/src/components/button/variants/default.tsx

@@ -1,4 +1,4 @@
-import { type ButtonStyles } from "@/primitives";
+import { type ButtonStyles } from "@/components";
 import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 

package/src/components/button/variants/secondary.tsx

@@ -1,4 +1,4 @@
-import { type ButtonStyles } from "@/primitives";
+import { type ButtonStyles } from "@/components";
 import { hslaSetRelativeLightness } from "@/utils/hsla-utils";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 

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

@@ -0,0 +1,63 @@
+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";
+
+export interface CalendarDayProps {
+  date: Date;
+  onPress?: () => void;
+
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const calculateState = (
+  date: Date,
+  selected: Date | null | undefined,
+  isCurrentMonth: boolean,
+  isDisabled: boolean,
+  isHovered: boolean,
+): CalendarDayState => {
+  if (isDisabled) return "disabled";
+  if (selected && isDateSameDay(date, selected)) return "selected";
+  if (isDateToday(date)) return "today";
+  if (isHovered) return "hovered";
+  if (!isCurrentMonth) return "deprioritized";
+  return "default";
+};
+
+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;
+    return false;
+  }, [props.date, calendar.minDate, calendar.maxDate]);
+
+  const state = calculateState(props.date, calendar.value, isCurrentMonth, 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];
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      disabled={isDisabled}
+      style={composedStyle}
+    >
+      <Text style={composedTextStyle}>{formatDate(props.date, "d")}</Text>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useCalendarContext } from "../context";
+
+export interface CalendarHeaderProps extends ViewProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CalendarHeader(props: CalendarHeaderProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useCalendarContext();
+
+  const headerStyle = [styles?.header, style];
+
+  return (
+    <View {...viewProps} style={headerStyle}>
+      {children}
+    </View>
+  );
+}

package/src/components/calendar/components/calendar-nav-button.tsx

@@ -0,0 +1,60 @@
+import { addMonths, subMonths } from "@/utils/date-utils";
+import React, { useState } from "react";
+import { Pressable, Text, type PressableProps, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { useCalendarContext } from "../context";
+import type { CalendarNavButtonState } from "../types";
+
+export interface CalendarNavButtonProps extends PressableProps {
+  children?: React.ReactNode;
+  direction: "prev" | "next";
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
+  if (isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function CalendarNavButton(props: CalendarNavButtonProps) {
+  const { children = props.direction === "prev" ? "‹" : "›", direction, style, textStyle, ...pressableProps } = props;
+  const { currentMonth, setCurrentMonth, minDate, maxDate, styles } = useCalendarContext();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isDisabled = React.useMemo(() => {
+    if (direction === "prev" && minDate) {
+      const prevMonth = subMonths(currentMonth, 1);
+      return prevMonth < minDate;
+    }
+    if (direction === "next" && maxDate) {
+      const nextMonth = addMonths(currentMonth, 1);
+      return nextMonth > maxDate;
+    }
+    return false;
+  }, [direction, currentMonth, minDate, maxDate]);
+
+  const state = calculateState(isDisabled, isHovered);
+
+  const handlePress = () => {
+    if (isDisabled) return;
+    const newMonth = direction === "prev" ? subMonths(currentMonth, 1) : addMonths(currentMonth, 1);
+    setCurrentMonth(newMonth);
+  };
+
+  const buttonStyle = [styles?.navButton?.default, styles?.navButton?.[state], style];
+  const textStyleCombined = [styles?.navButtonText?.default, styles?.navButtonText?.[state], textStyle];
+
+  return (
+    <Pressable
+      {...pressableProps}
+      onPress={handlePress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      disabled={isDisabled}
+      style={buttonStyle}
+    >
+      <Text style={textStyleCombined}>{children}</Text>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { CalendarContext } from "../context";
+import { CalendarVariants } from "../variants";
+
+export interface CalendarRootProps {
+  variant?: keyof typeof CalendarVariants;
+  children?: React.ReactNode;
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  defaultMonth?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CalendarRoot(props: CalendarRootProps) {
+  const { children, value, onChange, defaultMonth = new Date(), minDate, maxDate, style, ...viewProps } = props;
+  const variantStyles = CalendarVariants[props.variant || "default"]();
+
+  const [currentMonth, setCurrentMonth] = useState<Date>(defaultMonth);
+
+  const containerStyle = [variantStyles.root, style];
+
+  return (
+    <CalendarContext.Provider
+      value={{
+        value,
+        onChange,
+        currentMonth,
+        setCurrentMonth,
+        styles: variantStyles,
+        minDate,
+        maxDate,
+      }}
+    >
+      <View {...viewProps} style={containerStyle}>
+        {children}
+      </View>
+    </CalendarContext.Provider>
+  );
+}

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

@@ -0,0 +1,23 @@
+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";
+
+export interface CalendarTitleProps extends TextProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  formatStr?: string;
+}
+
+export function CalendarTitle(props: CalendarTitleProps) {
+  const { children, style, formatStr = "MMMM yyyy", ...textProps } = props;
+  const { currentMonth, styles } = useCalendarContext();
+
+  const titleStyle = [styles?.headerTitle, style];
+
+  return (
+    <Text {...textProps} style={titleStyle}>
+      {children ?? formatDate(currentMonth, formatStr)}
+    </Text>
+  );
+}

package/src/components/calendar/components/calendar-week-labels.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { useCalendarContext } from "../context";
+
+export interface CalendarWeekLabelProps {
+  children: string;
+  style?: StyleProp<TextStyle>;
+}
+
+function CalendarWeekLabel(props: CalendarWeekLabelProps) {
+  const { styles } = useCalendarContext();
+
+  const composedStyle = [styles?.weekLabel, props.style];
+
+  return (
+    <Text numberOfLines={1} style={composedStyle}>
+      {props.children}
+    </Text>
+  );
+}
+
+export interface CalendarWeekLabelsProps {
+  weekDays?: string[];
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+export function CalendarWeekLabels(props: CalendarWeekLabelsProps) {
+  const { weekDays = DEFAULT_WEEK_DAYS, style } = props;
+  const { styles } = useCalendarContext();
+
+  const composedStyle = [styles?.weekLabels, style];
+
+  return (
+    <View style={composedStyle}>
+      {weekDays.map((day, index) => (
+        <CalendarWeekLabel key={index} style={styles?.weekLabel}>
+          {day}
+        </CalendarWeekLabel>
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,47 @@
+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";
+
+export interface CalendarWeekProps extends ViewProps {
+  index: number;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+function CalendarWeek(props: CalendarWeekProps) {
+  const { style, ...viewProps } = props;
+  const { currentMonth, styles } = useCalendarContext();
+
+  const days = getWeekDays(currentMonth.getMonth(), currentMonth.getFullYear(), props.index);
+
+  const composedStyle = [styles?.week, style];
+  return (
+    <View {...viewProps} style={composedStyle}>
+      {days.map((day, index) => {
+        return <CalendarDay key={index} date={day} />;
+      })}
+    </View>
+  );
+}
+
+export interface CalendarWeeksProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CalendarWeeks(props: CalendarWeeksProps) {
+  const { currentMonth, styles } = useCalendarContext();
+
+  const weeks = getWeeksInMonth(currentMonth);
+
+  const composedStyle = [styles?.weeks, props.style];
+
+  return (
+    <View style={composedStyle}>
+      {Array.from({ length: weeks }).map((_, index) => {
+        return <CalendarWeek key={index} index={index} />;
+      })}
+    </View>
+  );
+}

package/src/components/calendar/index.ts

@@ -1 +1,26 @@
-export * from "./calendar";
+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 const Calendar = {
+  Root: CalendarRoot,
+  Header: CalendarHeader,
+  Title: CalendarTitle,
+  NavButton: CalendarNavButton,
+  CalendarWeekLabels: CalendarWeekLabels,
+  Weeks: CalendarWeeks,
+  Day: CalendarDay,
+};
+
+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";

package/src/components/calendar/types.ts

@@ -0,0 +1,39 @@
+import type { TextStyle, ViewStyle } from "react-native";
+import type { CalendarDayProps } from "./components/calendar-day";
+import type { CalendarHeaderProps } from "./components/calendar-header";
+import type { CalendarRootProps } from "./components/calendar-root";
+import type { CalendarTitleProps } from "./components/calendar-title";
+import type { CalendarWeekLabelProps, CalendarWeekLabelsProps } from "./components/calendar-week-labels";
+import type { CalendarWeekProps, CalendarWeeksProps } from "./components/calendar-weeks";
+
+export type CalendarDayState = "default" | "selected" | "today" | "disabled" | "deprioritized" | "hovered";
+export type CalendarNavButtonState = "default" | "disabled" | "hovered";
+
+export interface CalendarStyles {
+  root?: CalendarRootProps["style"];
+  header?: CalendarHeaderProps["style"];
+  headerTitle?: CalendarTitleProps["style"];
+  navButton?: Partial<Record<CalendarNavButtonState, ViewStyle>>;
+  navButtonText?: Partial<Record<CalendarNavButtonState, TextStyle>>;
+  weekLabels: CalendarWeekLabelsProps["style"];
+  weekLabel?: CalendarWeekLabelProps["style"];
+  weeks?: CalendarWeekProps["style"];
+  week?: CalendarWeeksProps["style"];
+  dayButton?: Partial<Record<CalendarDayState, CalendarDayProps["style"]>>;
+  dayText?: Partial<Record<CalendarDayState, CalendarDayProps["textStyle"]>>;
+}
+
+export type Months = [
+  january: number,
+  february: number,
+  march: number,
+  april: number,
+  may: number,
+  june: number,
+  july: number,
+  august: number,
+  september: number,
+  october: number,
+  november: number,
+  december: number,
+];

package/src/components/calendar/variants/default.tsx

@@ -1,4 +1,4 @@
-import { type CalendarStyles } from "@/primitives";
+import { type CalendarStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useCalendarVariantDefault = (): CalendarStyles => {
@@ -122,6 +122,6 @@ export const useCalendarVariantDefault = (): CalendarStyles => {
           opacity: 0.5,
         },
       },
-    })
+    }),
   );
 };

package/src/components/card/variants/default.tsx

@@ -0,0 +1,45 @@
+import { type CardStyles } from "@/components";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useCardVariantDefault(): CardStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): CardStyles => ({
+      root: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+        },
+      },
+      header: {
+        default: {
+          paddingHorizontal: 24,
+          paddingTop: 24,
+        },
+      },
+      title: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * 1.25,
+          fontWeight: "600",
+          color: colors.foreground,
+        },
+      },
+      body: {
+        default: {
+          padding: 24,
+          gap: 24,
+        },
+      },
+      footer: {
+        default: {
+          flexDirection: "row",
+          paddingHorizontal: 24,
+          paddingBottom: 24,
+          gap: 24,
+        },
+      },
+    }),
+  );
+}

package/src/components/checkbox/components/checkbox-content.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CheckboxContent(props: CheckboxContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.content?.default, styles?.content?.[state], style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

package/src/components/checkbox/components/checkbox-description.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxDescription(props: CheckboxDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.description?.default, styles?.description?.[state], style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/components/checkbox/components/checkbox-indicator.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+import type { CheckboxState } from "../types";
+
+export interface CheckboxIndicatorProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (rootState: CheckboxState, checked: boolean): CheckboxState => {
+  if (rootState === "disabled") {
+    return "disabled";
+  }
+  if (checked) {
+    return "checked";
+  }
+  return rootState;
+};
+
+export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const { style, ...viewProps } = props;
+  const { value, state, styles } = useCheckboxContext();
+
+  const indicatorState = calculateState(state, value);
+
+  const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
+  const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {value && <Text style={checkmarkStyle}>✓</Text>}
+    </View>
+  );
+}

package/src/components/checkbox/components/checkbox-root.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { CheckboxContext } from "../context";
+import type { CheckboxState } from "../types";
+import { CheckboxVariants } from "../variants";
+
+export interface CheckboxRootProps extends Omit<PressableProps, "children"> {
+  variant?: keyof typeof CheckboxVariants;
+  children: React.ReactNode;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  isDisabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
+  if (isDisabled) {
+    return "disabled";
+  }
+  if (isHovered) {
+    return "hovered";
+  }
+  if (value) {
+    return "checked";
+  }
+  return "default";
+};
+
+export function CheckboxRoot(props: CheckboxRootProps) {
+  const { children, value, onChange, isDisabled, style, ...pressableProps } = props;
+  const variantStyles = CheckboxVariants[props.variant || "default"]();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(value, isDisabled, isHovered);
+  const handlePress = () => {
+    if (!isDisabled) {
+      onChange(!value);
+    }
+  };
+
+  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      isDisabled,
+      state,
+      styles: variantStyles,
+    }),
+    [value, isDisabled, state, variantStyles],
+  );
+
+  return (
+    <CheckboxContext.Provider value={contextValue}>
+      <Pressable
+        {...pressableProps}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={calculatedStyle}
+      >
+        {children}
+      </Pressable>
+    </CheckboxContext.Provider>
+  );
+}

package/src/components/checkbox/components/checkbox-title.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxTitle(props: CheckboxTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.title?.default, styles?.title?.[state], style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}