@idealyst/datepicker 1.0.0

package/src/primitives/CalendarOverlay/CalendarOverlay.tsx

@@ -0,0 +1,130 @@
+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
+          variant="text"
+          size="small"
+          onPress={onClose}
+          style={calendarOverlayStyles.closeButton}
+        >
+          ✕
+        </Button>
+      </View>
+
+      {mode === 'month' ? (
+        <View style={calendarOverlayStyles.monthGrid}>
+          {months.map((month, index) => (
+            <Button
+              key={month}
+              variant={index === currentMonth ? 'contained' : 'outlined'}
+              intent={index === currentMonth ? 'primary' : 'neutral'}
+              size="small"
+              onPress={() => handleMonthSelect(index)}
+              disabled={disabled}
+              style={calendarOverlayStyles.gridButton}
+            >
+              {month.slice(0, 3)}
+            </Button>
+          ))}
+        </View>
+      ) : (
+        <View style={calendarOverlayStyles.yearContainer}>
+          <View style={calendarOverlayStyles.yearNavigation}>
+            <Button
+              variant="text"
+              size="small"
+              onPress={goToPreviousYearRange}
+              disabled={disabled}
+              style={calendarOverlayStyles.yearNavButton}
+            >
+              ←
+            </Button>
+            <Text style={calendarOverlayStyles.yearRangeText}>
+              {yearRangeStart} - {yearRangeStart + 19}
+            </Text>
+            <Button
+              variant="text"
+              size="small"
+              onPress={goToNextYearRange}
+              disabled={disabled}
+              style={calendarOverlayStyles.yearNavButton}
+            >
+              →
+            </Button>
+          </View>
+          <View style={calendarOverlayStyles.yearGrid}>
+            {years.map((year) => (
+              <Button
+                key={year}
+                variant={year === currentYear ? 'contained' : 'outlined'}
+                intent={year === currentYear ? 'primary' : 'neutral'}
+                size="small"
+                onPress={() => handleYearSelect(year)}
+                disabled={disabled}
+                style={calendarOverlayStyles.gridButton}
+              >
+                {year}
+              </Button>
+            ))}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/primitives/CalendarOverlay/index.ts

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

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

@@ -0,0 +1,33 @@
+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

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