@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/DatePicker/parts.cjs

@@ -0,0 +1,478 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var parts_exports = {};
+__export(parts_exports, {
+  CalendarHeader: () => CalendarHeader,
+  DatePickerInputTrigger: () => DatePickerInputTrigger,
+  DatePickerPopoverShell: () => DatePickerPopoverShell,
+  MonthGrid: () => MonthGrid,
+  ViewSwitcher: () => ViewSwitcher,
+  WeekView: () => WeekView,
+  YearGrid: () => YearGrid,
+  formatDateDisplay: () => formatDateDisplay,
+  isSameDay: () => isSameDay,
+  months: () => months,
+  toWeeks: () => toWeeks,
+  useCalendarData: () => useCalendarData,
+  useDateAnimation: () => useDateAnimation,
+  useDateNavigation: () => useDateNavigation,
+  weekdays: () => weekdays,
+  yearPageSize: () => yearPageSize
+});
+module.exports = __toCommonJS(parts_exports);
+var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const yearPageSize = 12;
+function useDateAnimation(current) {
+  const prev = (0, import_react.useRef)(null);
+  const direction = (0, import_react.useMemo)(() => {
+    if (prev.current === null) return 0;
+    return current > prev.current ? 1 : current < prev.current ? -1 : 0;
+  }, [current]);
+  (0, import_react.useEffect)(() => {
+    prev.current = current;
+  }, [current]);
+  const animation = (0, import_react.useMemo)(() => ({
+    enterStyle: {
+      opacity: 0,
+      x: direction * 15
+    },
+    exitStyle: {
+      opacity: 0,
+      x: direction * -15
+    }
+  }), [direction]);
+  return {
+    animation,
+    animationKey: current
+  };
+}
+function useCalendarData(displayDate) {
+  return (0, import_react.useMemo)(() => {
+    const year = displayDate.getFullYear();
+    const month = displayDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay());
+    const endDate = new Date(lastDay);
+    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
+    const days = [];
+    const current = new Date(startDate);
+    while (current <= endDate) {
+      days.push(new Date(current));
+      current.setDate(current.getDate() + 1);
+    }
+    return {
+      year,
+      month,
+      monthName: displayDate.toLocaleDateString("en-US", {
+        month: "long"
+      }),
+      days,
+      today: /* @__PURE__ */new Date()
+    };
+  }, [displayDate]);
+}
+function useDateNavigation(initialDate) {
+  const [displayDate, setDisplayDate] = (0, import_react.useState)(initialDate ?? /* @__PURE__ */new Date());
+  const navigateMonth = (0, import_react.useCallback)(direction => {
+    setDisplayDate(prev => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() + (direction === "prev" ? -1 : 1));
+      return next;
+    });
+  }, []);
+  return {
+    displayDate,
+    setDisplayDate,
+    navigateMonth
+  };
+}
+function toWeeks(days) {
+  const result = [];
+  for (let i = 0; i < days.length; i += 7) {
+    result.push(days.slice(i, i + 7));
+  }
+  return result;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.toDateString() === b.toDateString();
+}
+function WeekView() {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    flexDirection: "row",
+    ...knobProps.gap,
+    width: "100%",
+    children: weekdays.map(day => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      flex: 1,
+      textAlign: "center",
+      fontSize: knobProps.sizeToken,
+      color: "$placeholderColor",
+      ...knobProps.body,
+      ...knobProps.textWeight,
+      children: day
+    }, day))
+  });
+}
+function CalendarHeader({
+  year,
+  monthName,
+  onPrevMonth,
+  onNextMonth,
+  onYearPress,
+  onMonthPress,
+  showPrev = true,
+  showNext = true
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    flexDirection: "row",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+    children: [showPrev && onPrevMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      circular: true,
+      size: knobProps.sizeToken,
+      chromeless: true,
+      scaleIcon: 1.5,
+      onPress: onPrevMonth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {})
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: "$3"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "column",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        onPress: onYearPress,
+        chromeless: true,
+        padding: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: knobProps.sizeToken,
+          color: "$placeholderColor",
+          ...knobProps.body,
+          ...knobProps.textWeight,
+          children: year
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        onPress: onMonthPress,
+        chromeless: true,
+        padding: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: knobProps.sizeToken,
+          color: "$color",
+          ...knobProps.body,
+          ...knobProps.textWeight,
+          children: monthName
+        })
+      })]
+    }), showNext && onNextMonth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      circular: true,
+      size: knobProps.sizeToken,
+      chromeless: true,
+      scaleIcon: 1.5,
+      onPress: onNextMonth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {})
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: "$3"
+    })]
+  });
+}
+function MonthGrid({
+  currentYear,
+  selectedMonth,
+  onSelectMonth
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    animation,
+    animationKey
+  } = useDateAnimation(currentYear);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...animation,
+      transition: "quick",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      ...knobProps.gap,
+      width: "100%",
+      children: months.map((name, index) => {
+        const isSelected = selectedMonth === index;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          theme: isSelected ? "accent" : void 0,
+          borderRadius: knobProps.borderRadius.borderRadius,
+          flexBasis: "30%",
+          flexGrow: 1,
+          backgroundColor: isSelected ? "$background" : "transparent",
+          chromeless: true,
+          padding: 0,
+          onPress: () => onSelectMonth(index),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+            fontWeight: isSelected ? "bold" : "400",
+            children: name.slice(0, 3)
+          })
+        }, name);
+      })
+    })
+  }, animationKey);
+}
+function YearGrid({
+  yearPageStart,
+  selectedYear,
+  onSelectYear,
+  onPrevPage,
+  onNextPage
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const years = (0, import_react.useMemo)(() => {
+    const result = [];
+    for (let i = 0; i < yearPageSize; i++) {
+      result.push(yearPageStart + i);
+    }
+    return result;
+  }, [yearPageStart]);
+  const {
+    animation,
+    animationKey
+  } = useDateAnimation(yearPageStart);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    width: "100%",
+    ...knobProps.gapLg,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "row",
+      width: "100%",
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        circular: true,
+        size: knobProps.sizeToken,
+        chromeless: true,
+        scaleIcon: 1.5,
+        onPress: onPrevPage,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronLeft, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+        fontSize: knobProps.sizeToken,
+        ...knobProps.body,
+        ...knobProps.textWeight,
+        children: [years[0], " \u2013 ", years[years.length - 1]]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        circular: true,
+        size: knobProps.sizeToken,
+        chromeless: true,
+        scaleIcon: 1.5,
+        onPress: onNextPage,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.ChevronRight, {})
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        ...animation,
+        transition: "quick",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        ...knobProps.gap,
+        width: "100%",
+        children: years.map(year => {
+          const isSelected = year === selectedYear;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            theme: isSelected ? "accent" : void 0,
+            borderRadius: knobProps.borderRadius.borderRadius,
+            flexBasis: "30%",
+            flexGrow: 1,
+            backgroundColor: isSelected ? "$background" : "transparent",
+            chromeless: true,
+            padding: 0,
+            onPress: () => onSelectYear(year),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+              fontWeight: isSelected ? "bold" : "400",
+              children: year
+            })
+          }, year);
+        })
+      })
+    }, animationKey)]
+  });
+}
+const DatePickerInputTrigger = import_InputParts.Input.Area.styleable((triggerProps, ref) => {
+  const {
+    value,
+    onButtonPress,
+    onReset,
+    disabled,
+    placeholder,
+    error,
+    ...props
+  } = triggerProps;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    cursor: "pointer",
+    onPress: disabled ? void 0 : onButtonPress,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      theme: error ? "red" : void 0,
+      ...(disabled ? {
+        opacity: 0.5,
+        pointerEvents: "none"
+      } : void 0),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          readOnly: true,
+          value,
+          ref,
+          placeholder,
+          disabled,
+          color: import_colorRamps.formCommonColors.text,
+          ...props
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          onPress: e => {
+            e.stopPropagation();
+            onReset();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {})
+        })
+      })]
+    })
+  });
+});
+function DatePickerPopoverShell({
+  open,
+  onOpenChange,
+  trigger,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+    open,
+    onOpenChange,
+    trigger,
+    scrollable: true,
+    sizing: "fill",
+    fitContent: true,
+    children
+  });
+}
+function ViewSwitcher({
+  calendarData,
+  displayDate,
+  onSetDisplayDate,
+  viewMode,
+  setViewMode,
+  yearPageStart,
+  setYearPageStart,
+  children
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const handleSelectMonth = (0, import_react.useCallback)(month => {
+    const newDate = new Date(displayDate);
+    newDate.setMonth(month);
+    onSetDisplayDate(newDate);
+    setViewMode("day");
+  }, [displayDate, onSetDisplayDate, setViewMode]);
+  const handleSelectYear = (0, import_react.useCallback)(year => {
+    const newDate = new Date(displayDate);
+    newDate.setFullYear(year);
+    onSetDisplayDate(newDate);
+    setViewMode("month");
+  }, [displayDate, onSetDisplayDate, setViewMode]);
+  if (viewMode === "month") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "column",
+      alignItems: "center",
+      ...knobProps.gapLg,
+      width: "100%",
+      ...knobProps.panelPadding,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: knobProps.sizeToken,
+        alignSelf: "center",
+        ...knobProps.body,
+        ...knobProps.textWeight,
+        children: "Select a month"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(MonthGrid, {
+        currentYear: calendarData.year,
+        selectedMonth: calendarData.month,
+        onSelectMonth: handleSelectMonth
+      })]
+    });
+  }
+  if (viewMode === "year") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flexDirection: "column",
+      alignItems: "center",
+      ...knobProps.gapLg,
+      width: "100%",
+      ...knobProps.panelPadding,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(YearGrid, {
+        yearPageStart,
+        selectedYear: calendarData.year,
+        onSelectYear: handleSelectYear,
+        onPrevPage: () => setYearPageStart(s => s - yearPageSize),
+        onNextPage: () => setYearPageStart(s => s + yearPageSize)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+}
+function formatDateDisplay(date) {
+  if (!date) return "";
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+}