@korsolutions/ui 0.0.20 → 0.0.22

package/src/hooks/use-numeric-mask.ts

@@ -0,0 +1,202 @@
+import { useState, useCallback } from "react";
+
+export type NumericMaskFormat = "currency" | "decimal" | "integer" | "percentage";
+
+export interface UseNumericMaskOptions {
+  format?: NumericMaskFormat;
+  locale?: string;
+  currency?: string;
+  precision?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+  onChange?: (value: number | null) => void;
+}
+
+export interface UseNumericMaskReturn {
+  value: string;
+  numericValue: number | null;
+  onChangeText: (text: string) => void;
+  onBlur: () => void;
+  onFocus: () => void;
+  keyboardType: "numeric" | "decimal-pad" | "number-pad";
+  setValue: (value: number | null) => void;
+}
+
+export function useNumericMask({
+  format = "decimal",
+  locale = "en-US",
+  currency = "USD",
+  precision = 2,
+  min,
+  max,
+  allowNegative = true,
+  onChange,
+}: UseNumericMaskOptions = {}): UseNumericMaskReturn {
+  const [numericValue, setNumericValue] = useState<number | null>(null);
+  const [displayValue, setDisplayValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Determine actual precision based on format
+  const effectivePrecision = format === "integer" ? 0 : precision;
+
+  const formatValue = useCallback(
+    (num: number | null): string => {
+      if (num === null || isNaN(num)) return "";
+
+      switch (format) {
+        case "currency":
+          return new Intl.NumberFormat(locale, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+
+        case "percentage":
+          return new Intl.NumberFormat(locale, {
+            style: "percent",
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num / 100);
+
+        case "integer":
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(num);
+
+        case "decimal":
+        default:
+          return new Intl.NumberFormat(locale, {
+            minimumFractionDigits: effectivePrecision,
+            maximumFractionDigits: effectivePrecision,
+          }).format(num);
+      }
+    },
+    [format, locale, currency, effectivePrecision]
+  );
+
+  const parseValue = useCallback(
+    (text: string): number | null => {
+      // Remove currency symbols, spaces, thousand separators, and percentage signs
+      let cleaned = text.replace(/[^\d.-]/g, "");
+
+      // Handle negative sign
+      if (!allowNegative) {
+        cleaned = cleaned.replace(/-/g, "");
+      }
+
+      const parsed = parseFloat(cleaned);
+
+      if (isNaN(parsed) || cleaned === "" || cleaned === "-") return null;
+
+      // Apply min/max constraints
+      let constrained = parsed;
+      if (min !== undefined && constrained < min) constrained = min;
+      if (max !== undefined && constrained > max) constrained = max;
+
+      return constrained;
+    },
+    [min, max, allowNegative]
+  );
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // When focused, validate input before allowing it
+      if (isFocused) {
+        // Remove formatting characters to get raw input
+        let cleaned = text.replace(/[^\d.-]/g, "");
+
+        // Validate negative sign
+        if (!allowNegative && cleaned.includes("-")) {
+          return;
+        }
+
+        // Ensure negative sign is only at the start
+        if (allowNegative) {
+          const negativeCount = (cleaned.match(/-/g) || []).length;
+          if (negativeCount > 1 || (cleaned.includes("-") && cleaned.indexOf("-") !== 0)) {
+            return;
+          }
+        }
+
+        // Check decimal precision (skip for integer format)
+        if (effectivePrecision >= 0) {
+          const decimalIndex = cleaned.indexOf(".");
+          if (decimalIndex !== -1) {
+            const decimalPart = cleaned.substring(decimalIndex + 1);
+
+            // Prevent typing more decimals than allowed precision
+            if (decimalPart.length > effectivePrecision) {
+              return;
+            }
+          }
+
+          // Prevent multiple decimal points
+          const decimalCount = (cleaned.match(/\./g) || []).length;
+          if (decimalCount > 1) {
+            return;
+          }
+
+          // Prevent decimal point for integer format
+          if (format === "integer" && cleaned.includes(".")) {
+            return;
+          }
+        }
+      }
+
+      setDisplayValue(text);
+      const value = parseValue(text);
+      setNumericValue(value);
+      onChange?.(value);
+    },
+    [parseValue, onChange, isFocused, effectivePrecision, allowNegative, format]
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    if (numericValue !== null) {
+      setDisplayValue(formatValue(numericValue));
+    } else {
+      setDisplayValue("");
+    }
+  }, [numericValue, formatValue]);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (numericValue !== null) {
+      setDisplayValue(numericValue.toString());
+    }
+  }, [numericValue]);
+
+  const setValue = useCallback(
+    (value: number | null) => {
+      setNumericValue(value);
+      if (value !== null) {
+        if (isFocused) {
+          setDisplayValue(value.toString());
+        } else {
+          setDisplayValue(formatValue(value));
+        }
+      } else {
+        setDisplayValue("");
+      }
+      onChange?.(value);
+    },
+    [isFocused, formatValue, onChange]
+  );
+
+  // Determine keyboard type based on format
+  const keyboardType = format === "integer" ? (allowNegative ? ("numeric" as const) : ("number-pad" as const)) : ("decimal-pad" as const);
+
+  return {
+    value: displayValue,
+    numericValue,
+    onChangeText: handleChangeText,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    keyboardType,
+    setValue,
+  };
+}

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

@@ -0,0 +1,64 @@
+import React, { useMemo, useState } from "react";
+import { Text, StyleProp, TextStyle, ViewStyle, Pressable } from "react-native";
+import { formatDate, isDateSameDay, isDateToday, isDateBefore, isDateAfter, isSameMonth } from "@/utils/date-utils";
+import { useCalendarContext } from "./context";
+import { CalendarDayState } from "./types";
+
+export interface CalendarDayProps {
+  date: Date;
+  onPress?: () => void;
+
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const calculateState = (
+  date: Date,
+  selected: Date | 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 = () => {
+    console.log("Day pressed:", isDisabled, calendar.onChange);
+    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/primitives/calendar/calendar-header.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, ViewProps, StyleProp, 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/primitives/calendar/calendar-nav-button.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Pressable, PressableProps, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { addMonths, subMonths } from "../../utils/date-utils";
+import { useCalendarContext } from "./context";
+import { 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/primitives/calendar/calendar-root.tsx

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

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, TextProps, StyleProp, TextStyle } from "react-native";
+import { formatDate } from "../../utils/date-utils";
+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/primitives/calendar/calendar-week-labels.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, TextStyle } 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/primitives/calendar/calendar-weeks.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
+import { getWeekDays, getWeeksInMonth } from "@/utils/date-utils";
+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/primitives/calendar/context.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { CalendarStyles } from "./types";
+
+export interface CalendarContextValue {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  currentMonth: Date;
+  setCurrentMonth: (month: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+
+  styles?: CalendarStyles;
+}
+
+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 CalendarRoot");
+  }
+  return context;
+};

package/src/primitives/calendar/index.ts

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

package/src/primitives/calendar/types.ts

@@ -0,0 +1,39 @@
+import { ViewStyle, TextStyle } from "react-native";
+import { CalendarWeekProps, CalendarWeeksProps } from "./calendar-weeks";
+import { CalendarWeekLabelProps, CalendarWeekLabelsProps } from "./calendar-week-labels";
+import { CalendarDayProps } from "./calendar-day";
+import { CalendarRootProps } from "./calendar-root";
+import { CalendarHeaderProps } from "./calendar-header";
+import { CalendarTitleProps } from "./calendar-title";
+
+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/primitives/dropdown-menu/context.ts

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, useContext } from "react";
 import { LayoutRectangle } from "react-native";
 import { DropdownMenuStyles } from "./types";
-import { LayoutPosition } from "@/hooks/useRelativePosition";
+import { LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuContext {
   isOpen: boolean;

package/src/primitives/dropdown-menu/dropdown-menu-content.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { useDropdownMenu } from "./context";
-import { useRelativePosition } from "@/hooks/useRelativePosition";
+import { useRelativePosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuContentProps {
   children?: React.ReactNode;

package/src/primitives/dropdown-menu/dropdown-menu-root.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { LayoutRectangle } from "react-native";
 import { DropdownMenuStyles } from "./types";
 import { DropdownMenuContext } from "./context";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/useRelativePosition";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface DropdownMenuRootProps {
   children?: React.ReactNode;

package/src/primitives/index.ts

@@ -10,3 +10,4 @@ export * from "./badge";
 export * from "./textarea";
 export * from "./dropdown-menu";
 export * from "./popover";
+export * from "./calendar";

package/src/primitives/popover/context.ts

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, useContext } from "react";
 import { PopoverStyles } from "./types";
 import { LayoutRectangle } from "react-native";
-import { LayoutPosition } from "@/hooks/useRelativePosition";
+import { LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface PopoverContext {
   isOpen: boolean;

package/src/primitives/popover/popover-content.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { usePopover } from "./context";
-import { useRelativePosition } from "@/hooks/useRelativePosition";
+import { useRelativePosition } from "@/hooks/use-relative-position";
 
 export interface PopoverContentProps {
   children?: React.ReactNode;

package/src/primitives/popover/popover-root.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { PopoverContext } from "./context";
 import { PopoverStyles } from "./types";
 import { LayoutRectangle } from "react-native";
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/useRelativePosition";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, LayoutPosition } from "@/hooks/use-relative-position";
 
 export interface PopoverRootProps {
   children?: React.ReactNode;