@korsolutions/ui 0.0.21 → 0.0.23

package/dist/{primitives-DNeYBN-3.mjs → primitives-ApsPS0vU.mjs}

@@ -1,5 +1,5 @@
 import { n as DEFAULT_POSITION, r as useRelativePosition, t as DEFAULT_LAYOUT } from "./use-relative-position-BTKEyT1F.mjs";
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { Fragment, jsx } from "react/jsx-runtime";
 
@@ -123,14 +123,14 @@ const FieldPrimitive = {
 
 //#endregion
 //#region src/primitives/input/input.tsx
-const calculateState$5 = (props, isFocused) => {
+const calculateState$7 = (props, isFocused) => {
 	if (props.isDisabled) return "disabled";
 	if (isFocused) return "focused";
 	return "default";
 };
 function InputPrimitive(props) {
 	const [isFocused, setIsFocused] = useState(false);
-	const state = calculateState$5(props, isFocused);
+	const state = calculateState$7(props, isFocused);
 	const composedStyles = [
 		props.styles?.default?.style,
 		props.styles?.[state]?.style,
@@ -169,7 +169,7 @@ const useButtonPrimitive = () => {
 
 //#endregion
 //#region src/primitives/button/button-root.tsx
-const calculateState$4 = (props, isHovered) => {
+const calculateState$6 = (props, isHovered) => {
 	if (props.isDisabled) return "disabled";
 	if (props.isLoading) return "loading";
 	if (isHovered) return "hovered";
@@ -177,7 +177,7 @@ const calculateState$4 = (props, isHovered) => {
 };
 function ButtonRoot(props) {
 	const [isHovered, setIsHovered] = useState(false);
-	const state = calculateState$4(props, isHovered);
+	const state = calculateState$6(props, isHovered);
 	const calculatedStyle = [
 		props.styles?.root?.default,
 		props.styles?.root?.[state],
@@ -247,7 +247,7 @@ const useSelect = () => {
 
 //#endregion
 //#region src/primitives/select/select-root.tsx
-const calculateState$3 = (props) => {
+const calculateState$5 = (props) => {
 	if (props.isDisabled) return "disabled";
 	return "default";
 };
@@ -255,7 +255,7 @@ function SelectRoot(props) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [triggerLayout, setTriggerLayout] = useState(null);
 	const [options, setOptions] = useState([]);
-	const state = calculateState$3(props);
+	const state = calculateState$5(props);
 	const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
 	const Component = props.render ?? View;
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
@@ -371,7 +371,7 @@ function SelectContent(props) {
 
 //#endregion
 //#region src/primitives/select/select-option.tsx
-const calculateState$2 = (selectState, hovered, selected) => {
+const calculateState$4 = (selectState, hovered, selected) => {
 	if (selectState === "disabled") return "disabled";
 	if (selected) return "selected";
 	if (hovered) return "hovered";
@@ -381,7 +381,7 @@ function SelectOption(props) {
 	const [isHovered, setIsHovered] = useState(false);
 	const select = useSelect();
 	const isSelected = select.value === props.value;
-	const optionState = calculateState$2(select.state, isHovered, isSelected);
+	const optionState = calculateState$4(select.state, isHovered, isSelected);
 	const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
 	useEffect(() => {
 		select.setOptions((prev) => {
@@ -707,14 +707,14 @@ const BadgePrimitive = {
 
 //#endregion
 //#region src/primitives/textarea/textarea.tsx
-const calculateState$1 = (props, isFocused) => {
+const calculateState$3 = (props, isFocused) => {
 	if (props.isDisabled) return "disabled";
 	if (isFocused) return "focused";
 	return "default";
 };
 function TextareaPrimitive(props) {
 	const [isFocused, setIsFocused] = useState(false);
-	const state = calculateState$1(props, isFocused);
+	const state = calculateState$3(props, isFocused);
 	const composedStyles = [
 		props.styles?.default?.style,
 		props.styles?.[state]?.style,
@@ -832,14 +832,14 @@ function DropdownMenuContent(props) {
 
 //#endregion
 //#region src/primitives/dropdown-menu/dropdown-menu-button.tsx
-const calculateState = (isHovered) => {
+const calculateState$2 = (isHovered) => {
 	if (isHovered) return "hovered";
 	return "default";
 };
 function DropdownMenuButton(props) {
 	const menu = useDropdownMenu();
 	const [isHovered, setIsHovered] = useState(false);
-	const state = calculateState(isHovered);
+	const state = calculateState$2(isHovered);
 	const composedStyle = [
 		menu.styles?.button?.default,
 		menu.styles?.button?.[state],
@@ -1061,4 +1061,323 @@ const PopoverPrimitive = {
 };
 
 //#endregion
-export { BadgePrimitive as a, EmptyPrimitive as c, ButtonPrimitive as d, InputPrimitive as f, TextareaPrimitive as i, CardPrimitive as l, PortalHost as m, usePopover as n, ToastPrimitive as o, FieldPrimitive as p, DropdownMenuPrimitive as r, AvatarPrimitive as s, PopoverPrimitive as t, SelectPrimitive as u };
+//#region src/primitives/calendar/context.ts
+const CalendarContext = React.createContext(void 0);
+const useCalendarContext = () => {
+	const context = React.useContext(CalendarContext);
+	if (!context) throw new Error("Calendar components must be used within CalendarRoot");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/calendar/calendar-root.tsx
+function CalendarRoot(props) {
+	const { children, value, onChange, defaultMonth = /* @__PURE__ */ new Date(), minDate, maxDate, style, styles, ...viewProps } = props;
+	const [currentMonth, setCurrentMonth] = useState(defaultMonth);
+	const containerStyle = [styles?.root, style];
+	return /* @__PURE__ */ jsx(CalendarContext.Provider, {
+		value: {
+			value,
+			onChange,
+			currentMonth,
+			setCurrentMonth,
+			styles,
+			minDate,
+			maxDate
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			...viewProps,
+			style: containerStyle,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/calendar-header.tsx
+function CalendarHeader(props) {
+	const { children, style, ...viewProps } = props;
+	const { styles } = useCalendarContext();
+	const headerStyle = [styles?.header, style];
+	return /* @__PURE__ */ jsx(View, {
+		...viewProps,
+		style: headerStyle,
+		children
+	});
+}
+
+//#endregion
+//#region src/utils/date-utils.ts
+const formatDate = (date, format) => {
+	const months = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	];
+	const day = date.getDate();
+	const month = months[date.getMonth()];
+	const year = date.getFullYear();
+	if (format === "MMMM yyyy") return `${month} ${year}`;
+	if (format === "d") return day.toString();
+	return date.toLocaleDateString();
+};
+const isDateSameDay = (date1, date2) => {
+	return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+const isDateToday = (date) => {
+	return isDateSameDay(date, /* @__PURE__ */ new Date());
+};
+const isDateBefore = (date1, date2) => {
+	const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+	const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+	return d1.getTime() < d2.getTime();
+};
+const isDateAfter = (date1, date2) => {
+	const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+	const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+	return d1.getTime() > d2.getTime();
+};
+const addMonths = (date, months) => {
+	const newDate = new Date(date);
+	newDate.setMonth(newDate.getMonth() + months);
+	return newDate;
+};
+const subMonths = (date, months) => {
+	return addMonths(date, -months);
+};
+const startOfMonth = (date) => {
+	return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+const endOfMonth = (date) => {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+};
+const getDaysInMonth = (date) => {
+	return endOfMonth(date).getDate();
+};
+const getFirstDayOfMonth = (date) => {
+	return startOfMonth(date).getDay();
+};
+const isSameMonth = (date1, date2) => {
+	return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+};
+const getWeekDays = (month, year, week) => {
+	const days = [];
+	const firstDayOfMonth = new Date(year, month, 1).getDay();
+	const daysInMonth = getDaysInMonth(new Date(year, month));
+	const startDay = week * 7 - (firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1);
+	for (let i = 0; i < 7; i++) {
+		const day = startDay + i;
+		let date;
+		if (day < 1) {
+			const prevMonth = month === 0 ? 11 : month - 1;
+			const prevYear = month === 0 ? year - 1 : year;
+			const daysInPrevMonth = getDaysInMonth(new Date(prevYear, prevMonth));
+			date = new Date(prevYear, prevMonth, daysInPrevMonth + day);
+		} else if (day > daysInMonth) {
+			const nextMonth = month === 11 ? 0 : month + 1;
+			const nextYear = month === 11 ? year + 1 : year;
+			date = new Date(nextYear, nextMonth, day - daysInMonth);
+		} else date = new Date(year, month, day);
+		days.push(date);
+	}
+	return days;
+};
+const getWeeksInMonth = (date) => {
+	const firstDayOfMonth = getFirstDayOfMonth(date);
+	const daysInMonth = getDaysInMonth(date);
+	return Math.ceil((firstDayOfMonth + daysInMonth) / 7);
+};
+
+//#endregion
+//#region src/primitives/calendar/calendar-title.tsx
+function CalendarTitle(props) {
+	const { children, style, formatStr = "MMMM yyyy", ...textProps } = props;
+	const { currentMonth, styles } = useCalendarContext();
+	const titleStyle = [styles?.headerTitle, style];
+	return /* @__PURE__ */ jsx(Text, {
+		...textProps,
+		style: titleStyle,
+		children: children ?? formatDate(currentMonth, formatStr)
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/calendar-nav-button.tsx
+const calculateState$1 = (isDisabled, isHovered) => {
+	if (isDisabled) return "disabled";
+	if (isHovered) return "hovered";
+	return "default";
+};
+function CalendarNavButton(props) {
+	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) return subMonths(currentMonth, 1) < minDate;
+		if (direction === "next" && maxDate) return addMonths(currentMonth, 1) > maxDate;
+		return false;
+	}, [
+		direction,
+		currentMonth,
+		minDate,
+		maxDate
+	]);
+	const state = calculateState$1(isDisabled, isHovered);
+	const handlePress = () => {
+		if (isDisabled) return;
+		setCurrentMonth(direction === "prev" ? subMonths(currentMonth, 1) : addMonths(currentMonth, 1));
+	};
+	const buttonStyle = [
+		styles?.navButton?.default,
+		styles?.navButton?.[state],
+		style
+	];
+	const textStyleCombined = [
+		styles?.navButtonText?.default,
+		styles?.navButtonText?.[state],
+		textStyle
+	];
+	return /* @__PURE__ */ jsx(Pressable, {
+		...pressableProps,
+		onPress: handlePress,
+		onHoverIn: () => setIsHovered(true),
+		onHoverOut: () => setIsHovered(false),
+		disabled: isDisabled,
+		style: buttonStyle,
+		children: /* @__PURE__ */ jsx(Text, {
+			style: textStyleCombined,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/calendar-week-labels.tsx
+function CalendarWeekLabel(props) {
+	const { styles } = useCalendarContext();
+	return /* @__PURE__ */ jsx(Text, {
+		numberOfLines: 1,
+		style: [styles?.weekLabel, props.style],
+		children: props.children
+	});
+}
+const DEFAULT_WEEK_DAYS = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+];
+function CalendarWeekLabels(props) {
+	const { weekDays = DEFAULT_WEEK_DAYS, style } = props;
+	const { styles } = useCalendarContext();
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles?.weekLabels, style],
+		children: weekDays.map((day, index) => /* @__PURE__ */ jsx(CalendarWeekLabel, {
+			style: styles?.weekLabel,
+			children: day
+		}, index))
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/calendar-day.tsx
+const calculateState = (date, selected, isCurrentMonth, isDisabled, isHovered) => {
+	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";
+};
+function CalendarDay(props) {
+	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);
+	};
+	return /* @__PURE__ */ jsx(Pressable, {
+		onPress: handlePress,
+		onHoverIn: () => setIsHovered(true),
+		onHoverOut: () => setIsHovered(false),
+		disabled: isDisabled,
+		style: [
+			calendar.styles?.dayButton?.default,
+			calendar.styles?.dayButton?.[state],
+			props.style
+		],
+		children: /* @__PURE__ */ jsx(Text, {
+			style: [
+				calendar.styles?.dayText?.default,
+				calendar.styles?.dayText?.[state],
+				props.textStyle
+			],
+			children: formatDate(props.date, "d")
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/calendar-weeks.tsx
+function CalendarWeek(props) {
+	const { style, ...viewProps } = props;
+	const { currentMonth, styles } = useCalendarContext();
+	const days = getWeekDays(currentMonth.getMonth(), currentMonth.getFullYear(), props.index);
+	const composedStyle = [styles?.week, style];
+	return /* @__PURE__ */ jsx(View, {
+		...viewProps,
+		style: composedStyle,
+		children: days.map((day, index) => {
+			return /* @__PURE__ */ jsx(CalendarDay, { date: day }, index);
+		})
+	});
+}
+function CalendarWeeks(props) {
+	const { currentMonth, styles } = useCalendarContext();
+	const weeks = getWeeksInMonth(currentMonth);
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles?.weeks, props.style],
+		children: Array.from({ length: weeks }).map((_, index) => {
+			return /* @__PURE__ */ jsx(CalendarWeek, { index }, index);
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/calendar/index.ts
+const CalendarPrimitive = {
+	Root: CalendarRoot,
+	Header: CalendarHeader,
+	Title: CalendarTitle,
+	NavButton: CalendarNavButton,
+	CalendarWeekLabels,
+	Weeks: CalendarWeeks,
+	Day: CalendarDay
+};
+
+//#endregion
+export { TextareaPrimitive as a, AvatarPrimitive as c, SelectPrimitive as d, ButtonPrimitive as f, PortalHost as h, DropdownMenuPrimitive as i, EmptyPrimitive as l, FieldPrimitive as m, PopoverPrimitive as n, BadgePrimitive as o, InputPrimitive as p, usePopover as r, ToastPrimitive as s, CalendarPrimitive as t, CardPrimitive as u };

package/dist/{toast-manager-BfoJ-_dB.mjs → toast-manager-Cdhl1ep0.mjs}

@@ -1,4 +1,4 @@
-import { o as ToastPrimitive } from "./primitives-DNeYBN-3.mjs";
+import { s as ToastPrimitive } from "./primitives-ApsPS0vU.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { CalendarPrimitive } from "@/primitives";
+import { CalendarVariants } from "./variants";
+
+export interface CalendarProps {
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  defaultMonth?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  variant?: keyof typeof CalendarVariants;
+  weekDays?: string[];
+}
+
+export function Calendar(props: CalendarProps) {
+  const { variant = "default", weekDays, ...rootProps } = props;
+  const useVariantStyles = CalendarVariants[variant];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <CalendarPrimitive.Root {...rootProps} styles={variantStyles}>
+      <CalendarPrimitive.Header>
+        <CalendarPrimitive.NavButton direction="prev" />
+        <CalendarPrimitive.Title />
+        <CalendarPrimitive.NavButton direction="next" />
+      </CalendarPrimitive.Header>
+      <CalendarPrimitive.CalendarWeekLabels weekDays={weekDays} />
+      <CalendarPrimitive.Weeks />
+    </CalendarPrimitive.Root>
+  );
+}

package/src/components/calendar/index.ts

@@ -0,0 +1 @@
+export * from "./calendar";

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

@@ -0,0 +1,127 @@
+import { CalendarStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useCalendarVariantDefault = (): CalendarStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): CalendarStyles => ({
+      root: {
+        padding: 16,
+        backgroundColor: colors.background,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        width: 324,
+      },
+      header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 16,
+        paddingHorizontal: 8,
+      },
+      headerTitle: {
+        fontSize: fontSize * 1.125,
+        fontWeight: "600",
+        fontFamily,
+        color: colors.foreground,
+      },
+      navButton: {
+        default: {
+          width: 32,
+          height: 32,
+          borderRadius: radius * 0.5,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        disabled: {
+          opacity: 0.3,
+        },
+      },
+      navButtonText: {
+        default: {
+          fontSize: fontSize * 1.5,
+          color: colors.foreground,
+          fontWeight: "500",
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      weekLabels: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: 8,
+        paddingVertical: 8,
+        gap: 2,
+      },
+      weekLabel: {
+        fontSize: fontSize * 0.875,
+        fontWeight: "500",
+        fontFamily,
+        color: colors.mutedForeground,
+        width: 40,
+        textAlign: "center",
+      },
+      weeks: {
+        flexDirection: "column",
+        gap: 2,
+      },
+      week: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        gap: 2,
+      },
+      dayButton: {
+        default: {
+          width: 40,
+          height: 40,
+          borderRadius: radius * 0.5,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        selected: {
+          backgroundColor: colors.primary,
+        },
+        today: {
+          borderWidth: 1,
+          borderColor: colors.primary,
+        },
+        disabled: {
+          opacity: 0.3,
+        },
+        deprioritized: {
+          backgroundColor: "transparent",
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      dayText: {
+        default: {
+          fontSize,
+          fontFamily,
+          color: colors.foreground,
+          fontWeight: "400",
+          pointerEvents: "none",
+        },
+        selected: {
+          color: colors.primaryForeground,
+          fontWeight: "600",
+        },
+        today: {
+          color: colors.primary,
+          fontWeight: "600",
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        deprioritized: {
+          color: colors.mutedForeground,
+          opacity: 0.5,
+        },
+      },
+    })
+  );
+};

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

@@ -0,0 +1,5 @@
+import { useCalendarVariantDefault } from "./default";
+
+export const CalendarVariants = {
+  default: useCalendarVariantDefault,
+};

package/src/components/index.ts

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

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

@@ -12,9 +12,6 @@ export const usePopoverVariantDefault = (): PopoverStyles => {
         borderRadius: radius,
         borderWidth: 1,
         borderColor: colors.border,
-        padding: 16,
-        minWidth: 280,
-        maxWidth: 320,
         shadowColor: "#000",
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.15,

package/src/components/popover/variants/index.ts

@@ -1,5 +1,7 @@
 import { usePopoverVariantDefault } from "./default";
+import { usePopoverVariantUnstyled } from "./unstyled";
 
 export const PopoverVariants = {
   default: usePopoverVariantDefault,
+  unstyled: usePopoverVariantUnstyled,
 };

package/src/components/popover/variants/unstyled.tsx

@@ -0,0 +1,13 @@
+import { PopoverStyles } from "@/primitives/popover/types";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const usePopoverVariantUnstyled = (): PopoverStyles => {
+  return useThemedStyles(
+    (): PopoverStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {},
+    })
+  );
+};