@idealyst/datepicker 1.1.3 → 1.1.5

package/src/primitives/CalendarGrid/CalendarGrid.tsx

@@ -1,146 +0,0 @@
-import React, { useMemo } from 'react';
-import { Text, Button, View } from '@idealyst/components';
-import { calendarGridStyles } from './CalendarGrid.styles';
-
-interface CalendarGridProps {
-  currentMonth: Date;
-  selectedDate?: Date;
-  onDateSelect: (date: Date) => void;
-  onMonthChange?: (month: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  disabled?: boolean;
-}
-
-
-export const CalendarGrid: React.FC<CalendarGridProps> = ({
-  currentMonth,
-  selectedDate,
-  onDateSelect,
-  onMonthChange,
-  minDate,
-  maxDate,
-  disabled = false,
-}) => {
-  const { calendarDays, startingDayOfWeek, daysInMonth, weekCount } = useMemo(() => {
-    const monthStart = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
-    const monthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
-    const daysInMonth = monthEnd.getDate();
-    const startingDayOfWeek = monthStart.getDay();
-    
-    const calendarDays = [];
-    
-    // Add previous month days to fill start of week
-    const prevMonthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 0);
-    const prevMonthDaysToShow = startingDayOfWeek;
-    for (let i = prevMonthDaysToShow - 1; i >= 0; i--) {
-      const day = prevMonthEnd.getDate() - i;
-      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, day);
-      calendarDays.push({ date, isCurrentMonth: false });
-    }
-    
-    // Add days of the current month
-    for (let day = 1; day <= daysInMonth; day++) {
-      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
-      calendarDays.push({ date, isCurrentMonth: true });
-    }
-    
-    // Add next month days only to complete partial weeks, never add full weeks of next month
-    const currentLength = calendarDays.length;
-    const weeksNeeded = Math.ceil(currentLength / 7);
-    const maxDays = weeksNeeded * 7;
-    
-    // Only add next month days to fill partial week
-    const remainingDays = maxDays - currentLength;
-    for (let day = 1; day <= remainingDays; day++) {
-      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, day);
-      calendarDays.push({ date, isCurrentMonth: false });
-    }
-    
-    const weekCount = Math.ceil(calendarDays.length / 7);
-    return { calendarDays, startingDayOfWeek, daysInMonth, weekCount };
-  }, [currentMonth]);
-
-  const isDateDisabled = (date: Date): boolean => {
-    if (disabled) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    return false;
-  };
-
-  const isDateSelected = (date: Date): boolean => {
-    if (!selectedDate) return false;
-    return (
-      date.getDate() === selectedDate.getDate() &&
-      date.getMonth() === selectedDate.getMonth() &&
-      date.getFullYear() === selectedDate.getFullYear()
-    );
-  };
-
-  const isCurrentMonth = (date: Date): boolean => {
-    return (
-      date.getMonth() === currentMonth.getMonth() &&
-      date.getFullYear() === currentMonth.getFullYear()
-    );
-  };
-
-  const handleDateSelect = (date: Date) => {
-    // If selecting a date from previous/next month, change the current month first
-    if (!isCurrentMonth(date) && onMonthChange) {
-      const newMonth = new Date(date.getFullYear(), date.getMonth(), 1);
-      onMonthChange(newMonth);
-    }
-    onDateSelect(date);
-  };
-
-  return (
-    <>
-      {/* Weekday headers */}
-      <View style={[
-        calendarGridStyles.weekdayHeader,
-        { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }
-      ]}>
-        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
-          <View key={day} style={calendarGridStyles.weekdayCell}>
-            <Text style={calendarGridStyles.weekdayText}>
-              {day}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      {/* Calendar grid */}
-      <View
-        style={[
-          calendarGridStyles.calendarGrid,
-          {
-            display: 'grid',
-            gridTemplateColumns: 'repeat(7, 1fr)',
-            gridTemplateRows: `repeat(${weekCount}, 1fr)`,
-            gap: 2
-          }
-        ]}
-      >
-        {calendarDays.map((dayData, index) => {
-          const { date, isCurrentMonth } = dayData;
-          const isSelected = isDateSelected(date);
-
-          return (
-            <View key={index} style={calendarGridStyles.dayCell}>
-              <Button
-                type={isSelected ? 'contained' : 'text'}
-                intent={isSelected ? 'primary' : undefined}
-                disabled={isDateDisabled(date)}
-                onPress={() => handleDateSelect(date)}
-                size="sm"
-                style={calendarGridStyles.dayButton({ isCurrentMonth, isSelected })}
-              >
-                {date.getDate()}
-              </Button>
-            </View>
-          );
-        })}
-      </View>
-    </>
-  );
-};

package/src/primitives/CalendarGrid/index.ts

@@ -1 +0,0 @@
-export { CalendarGrid } from './CalendarGrid';

package/src/primitives/CalendarHeader/CalendarHeader.styles.tsx

@@ -1,25 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const calendarHeaderStyles = StyleSheet.create((theme) => ({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  centerSection: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  navButton: {
-    minWidth: 32,
-    minHeight: 32,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-  titleButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-}));

package/src/primitives/CalendarHeader/CalendarHeader.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Text, Button, View } from '@idealyst/components';
-import { calendarHeaderStyles } from './CalendarHeader.styles';
-
-interface CalendarHeaderProps {
-  currentMonth: Date;
-  onPreviousMonth: () => void;
-  onNextMonth: () => void;
-  onMonthClick: () => void;
-  onYearClick: () => void;
-  disabled?: boolean;
-}
-
-
-export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
-  currentMonth,
-  onPreviousMonth,
-  onNextMonth,
-  onMonthClick,
-  onYearClick,
-  disabled = false,
-}) => {
-  const monthName = currentMonth.toLocaleDateString('en-US', { month: 'long' });
-  const year = currentMonth.getFullYear();
-
-  return (
-    <View style={calendarHeaderStyles.container}>
-      <Button
-        type="text"
-        size="sm"
-        onPress={onPreviousMonth}
-        disabled={disabled}
-        style={calendarHeaderStyles.navButton}
-      >
-        ←
-      </Button>
-
-      <View style={calendarHeaderStyles.centerSection}>
-        <Button
-          type="text"
-          onPress={onMonthClick}
-          disabled={disabled}
-          style={calendarHeaderStyles.titleButton}
-        >
-          <Text weight="semibold">{monthName}</Text>
-        </Button>
-
-        <Button
-          type="text"
-          onPress={onYearClick}
-          disabled={disabled}
-          style={calendarHeaderStyles.titleButton}
-        >
-          <Text weight="semibold">{year}</Text>
-        </Button>
-      </View>
-
-      <Button
-        type="text"
-        size="sm"
-        onPress={onNextMonth}
-        disabled={disabled}
-        style={calendarHeaderStyles.navButton}
-      >
-        →
-      </Button>
-    </View>
-  );
-};

package/src/primitives/CalendarHeader/index.ts

@@ -1 +0,0 @@
-export { CalendarHeader } from './CalendarHeader';

package/src/primitives/CalendarOverlay/CalendarOverlay.styles.tsx

@@ -1,86 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-type CalendarOverlayVariants = {
-  isSelected: boolean;
-};
-
-export const calendarOverlayStyles = StyleSheet.create((theme) => ({
-  container: {
-    position: 'absolute',
-    top: 40,
-    left: 0,
-    right: 0,
-    backgroundColor: theme.colors?.surface?.primary || 'white',
-    borderRadius: 8,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: theme.colors?.border?.primary || '#e5e7eb',
-    zIndex: 10,
-    
-    _web: {
-      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-    }
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: '600',
-    margin: 0,
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-  closeButton: {
-    minWidth: 24,
-    minHeight: 24,
-    padding: 2,
-    fontSize: 12,
-  },
-  monthGrid: {
-    gap: 6,
-    
-    _web: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(3, 1fr)',
-    }
-  },
-  yearContainer: {
-    flexDirection: 'column',
-    gap: 8,
-  },
-  yearNavigation: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  yearGrid: {
-    gap: 6,
-    
-    _web: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
-    }
-  },
-  yearNavButton: {
-    minWidth: 32,
-    minHeight: 24,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    fontSize: 12,
-  },
-  yearRangeText: {
-    fontSize: 13,
-    fontWeight: '500',
-    color: theme.colors?.text?.primary || '#374151',
-  },
-  gridButton: ({ isSelected }: CalendarOverlayVariants) => ({
-    minHeight: 28,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    fontSize: 12,
-    color: isSelected ? undefined : theme.colors.text.primary,
-  }),
-}));

package/src/primitives/CalendarOverlay/CalendarOverlay.tsx

@@ -1,136 +0,0 @@
-import React, { useState } from 'react';
-import { Button, View, Text } from '@idealyst/components';
-import { calendarOverlayStyles } from './CalendarOverlay.styles';
-
-type OverlayMode = 'month' | 'year';
-
-interface CalendarOverlayProps {
-  mode: OverlayMode;
-  currentMonth: number;
-  currentYear: number;
-  onMonthSelect: (month: number) => void;
-  onYearSelect: (year: number) => void;
-  onClose: () => void;
-  disabled?: boolean;
-}
-
-const months = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December'
-];
-
-
-export const CalendarOverlay: React.FC<CalendarOverlayProps> = ({
-  mode,
-  currentMonth,
-  currentYear,
-  onMonthSelect,
-  onYearSelect,
-  onClose,
-  disabled = false,
-}) => {
-  const [yearRangeStart, setYearRangeStart] = useState(currentYear - 10);
-  const years = Array.from({ length: 20 }, (_, i) => yearRangeStart + i);
-
-
-  const handleMonthSelect = (monthIndex: number) => {
-    onMonthSelect(monthIndex);
-    onClose();
-  };
-
-  const handleYearSelect = (year: number) => {
-    onYearSelect(year);
-    onClose();
-  };
-
-  const goToPreviousYearRange = () => {
-    setYearRangeStart(yearRangeStart - 20);
-  };
-
-  const goToNextYearRange = () => {
-    setYearRangeStart(yearRangeStart + 20);
-  };
-
-  return (
-    <View style={calendarOverlayStyles.container}>
-      <View style={calendarOverlayStyles.header}>
-        <Text style={calendarOverlayStyles.title}>
-          Select {mode === 'month' ? 'Month' : 'Year'}
-        </Text>
-        <Button
-          type="text"
-          size="sm"
-          onPress={onClose}
-          style={calendarOverlayStyles.closeButton}
-        >
-          ✕
-        </Button>
-      </View>
-
-      {mode === 'month' ? (
-        <View style={calendarOverlayStyles.monthGrid}>
-          {months.map((month, index) => {
-            const isSelected = index === currentMonth;
-            return (
-              <Button
-                key={month}
-                type={isSelected ? 'contained' : 'text'}
-                intent={isSelected ? 'primary' : undefined}
-                size="sm"
-                onPress={() => handleMonthSelect(index)}
-                disabled={disabled}
-                style={calendarOverlayStyles.gridButton({ isSelected })}
-              >
-                {month.slice(0, 3)}
-              </Button>
-            );
-          })}
-        </View>
-      ) : (
-        <View style={calendarOverlayStyles.yearContainer}>
-          <View style={calendarOverlayStyles.yearNavigation}>
-            <Button
-              type="text"
-              size="sm"
-              onPress={goToPreviousYearRange}
-              disabled={disabled}
-              style={calendarOverlayStyles.yearNavButton}
-            >
-              ←
-            </Button>
-            <Text style={calendarOverlayStyles.yearRangeText}>
-              {yearRangeStart} - {yearRangeStart + 19}
-            </Text>
-            <Button
-              type="text"
-              size="sm"
-              onPress={goToNextYearRange}
-              disabled={disabled}
-              style={calendarOverlayStyles.yearNavButton}
-            >
-              →
-            </Button>
-          </View>
-          <View style={calendarOverlayStyles.yearGrid}>
-            {years.map((year) => {
-              const isSelected = year === currentYear;
-              return (
-                <Button
-                  key={year}
-                  type={isSelected ? 'contained' : 'text'}
-                  intent={isSelected ? 'primary' : undefined}
-                  size="sm"
-                  onPress={() => handleYearSelect(year)}
-                  disabled={disabled}
-                  style={calendarOverlayStyles.gridButton({ isSelected })}
-                >
-                  {year}
-                </Button>
-              );
-            })}
-          </View>
-        </View>
-      )}
-    </View>
-  );
-};

package/src/primitives/CalendarOverlay/index.ts

@@ -1 +0,0 @@
-export { CalendarOverlay } from './CalendarOverlay';

package/src/primitives/Wrapper/Wrapper.web.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-
-interface WrapperProps {
-  style?: any;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  'data-testid'?: string;
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-export const Wrapper = React.forwardRef<HTMLDivElement, WrapperProps>(({
-  style,
-  children,
-  onClick,
-  'data-testid': testID,
-  ...props
-}, ref) => {
-  return (
-    <div
-      ref={ref}
-      style={style}
-      onClick={onClick}
-      data-testid={testID}
-      {...getWebProps(style)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-Wrapper.displayName = 'Wrapper';

package/src/primitives/Wrapper/index.ts

@@ -1 +0,0 @@
-export { Wrapper } from './Wrapper.web';