glassdate-rn 0.1.0

package/src/ConfirmFooter.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, Pressable, Platform, StyleSheet } from 'react-native';
+import type { GlassDateTokens } from './types/tokens.types';
+
+interface ConfirmFooterProps {
+  selectedDate: Date | null;
+  isConfirmEnabled: boolean;
+  resolvedTokens: GlassDateTokens;
+  confirmLabel?: (date: Date) => string;
+  placeholderLabel?: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+function defaultConfirmLabel(_date: Date): string {
+  return 'Done';
+}
+
+const webInteractive = Platform.select({
+  web: { cursor: 'pointer', outlineStyle: 'none' } as any,
+});
+
+export function ConfirmFooter({
+  selectedDate,
+  isConfirmEnabled,
+  resolvedTokens,
+  confirmLabel: confirmLabelFn,
+  placeholderLabel = 'Select a date',
+  onCancel,
+  onConfirm,
+}: ConfirmFooterProps): React.ReactElement {
+  const footer = resolvedTokens.footer;
+
+  const labelText = selectedDate
+    ? (confirmLabelFn ?? defaultConfirmLabel)(selectedDate)
+    : placeholderLabel;
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={onCancel}
+        accessibilityRole="button"
+        accessibilityLabel="Cancel"
+        style={(({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => [
+          styles.button,
+          {
+            backgroundColor: hovered ? footer.cancelHoverBackgroundColour : footer.cancelBackgroundColour,
+            borderColor: footer.cancelBorderColour,
+            borderWidth: footer.cancelBorderWidth,
+            borderRadius: footer.cancelCornerRadius,
+            opacity: pressed ? 0.7 : 1,
+          },
+          webInteractive,
+        ]) as any}
+      >
+        <Text
+          style={{
+            color: footer.cancelTextColour,
+            fontSize: 16,
+            fontWeight: '500',
+            textAlign: 'center',
+          }}
+        >
+          Cancel
+        </Text>
+      </Pressable>
+
+      <View style={styles.gap} />
+
+      <Pressable
+        disabled={!isConfirmEnabled}
+        accessibilityRole="button"
+        accessibilityLabel={labelText}
+        accessibilityState={{ disabled: !isConfirmEnabled }}
+        onPress={() => {
+          if (isConfirmEnabled) {
+            onConfirm();
+          }
+        }}
+        style={(({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => [
+          styles.button,
+          {
+            backgroundColor:
+              hovered && isConfirmEnabled
+                ? footer.confirmHoverBackgroundColour
+                : footer.confirmBackgroundColour,
+            borderColor: footer.confirmBorderColour,
+            borderWidth: footer.confirmBorderWidth,
+            borderRadius: footer.confirmCornerRadius,
+            opacity: !isConfirmEnabled ? footer.disabledOpacity : pressed ? 0.7 : 1,
+          },
+          isConfirmEnabled && webInteractive,
+        ]) as any}
+      >
+        <Text
+          style={{
+            color: footer.confirmTextColour,
+            fontSize: 16,
+            fontWeight: '600',
+            textAlign: 'center',
+          }}
+        >
+          {labelText}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingTop: 8,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+  },
+  gap: {
+    width: 8,
+  },
+});

package/src/GlassContainerRN.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Platform, type StyleProp, type ViewStyle } from 'react-native';
+
+let GlassView: React.ComponentType<any> | null = null;
+let isLiquidGlassAvailable: (() => boolean) | null = null;
+let isGlassEffectAPIAvailable: (() => boolean) | null = null;
+
+try {
+  const pkg = require('expo-glass-effect');
+  GlassView = pkg.GlassView;
+  isLiquidGlassAvailable = pkg.isLiquidGlassAvailable;
+  isGlassEffectAPIAvailable = pkg.isGlassEffectAPIAvailable;
+} catch {
+  // Not installed — solid fallback applies everywhere
+}
+
+interface GlassContainerProps {
+  blurRadius: number;
+  backgroundColour: string;
+  cornerRadius: number;
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+}
+
+export function GlassContainer({
+  blurRadius,
+  backgroundColour,
+  cornerRadius,
+  style,
+  children,
+}: GlassContainerProps): React.ReactElement {
+  const useGlass =
+    blurRadius > 0 &&
+    GlassView !== null &&
+    isLiquidGlassAvailable?.() === true &&
+    isGlassEffectAPIAvailable?.() === true;
+
+  if (useGlass && GlassView) {
+    return (
+      <GlassView
+        style={[
+          style,
+          {
+            borderRadius: cornerRadius,
+            ...Platform.select({ web: { userSelect: 'none' } as any }),
+          },
+        ]}
+        glassEffectStyle="regular"
+        tintColor={backgroundColour}
+      >
+        {children}
+      </GlassView>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        style,
+        {
+          borderRadius: cornerRadius,
+          backgroundColor: backgroundColour,
+          ...Platform.select({ web: { userSelect: 'none' } as any }),
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

package/src/GlassDatePicker.tsx

@@ -0,0 +1,390 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, Platform, useColorScheme, StyleSheet } from 'react-native';
+import type {
+  GlassDateTokens,
+  ThemeKey,
+  ConstraintPreset,
+  DayShape,
+  OpenDropdown,
+  DeepPartial,
+} from './types/tokens.types';
+import {
+  resolveConstraintBounds,
+  isDateSelectable,
+  isDateSelectableFromBounds,
+  isMonthSelectable,
+  clampDate,
+  isConstraintConfigInvalid,
+  type ConstraintConfig,
+} from './logic/constraints';
+import { previousMonth, nextMonth } from './logic/calendar';
+import { resolveTokens, mapDayShapeToRadius } from './logic/theme';
+import { GlassContainer } from './GlassContainerRN';
+import { CalendarGrid } from './CalendarGrid';
+import { MonthYearHeader } from './MonthYearHeader';
+import { MonthSelector } from './MonthSelector';
+import { YearSelector } from './YearSelector';
+import { ConfirmFooter } from './ConfirmFooter';
+
+export interface GlassDatePickerProps {
+  value?: Date | null;
+  hintDate?: Date;
+  onChange?: (date: Date) => void;
+  onConfirm?: (date: Date) => void;
+  onCancel?: () => void;
+  constraint?: ConstraintPreset;
+  minDate?: Date;
+  maxDate?: Date;
+  yearRange?: number;
+  theme?: ThemeKey;
+  colorScheme?: 'dark' | 'light' | 'auto';
+  accent?: string;
+  dayShape?: DayShape;
+  tokens?: DeepPartial<GlassDateTokens>;
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  monthNames?: [string, string, string, string, string, string,
+                string, string, string, string, string, string];
+  confirmLabel?: (date: Date) => string;
+  placeholderLabel?: string;
+  showSelectedDate?: boolean;
+  selectedDateLabel?: (date: Date) => string;
+}
+
+function defaultSelectedDateLabel(date: Date): string {
+  return new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(date);
+}
+
+function getDefaultTheme(): ThemeKey {
+  const os = Platform.OS;
+  if (os === 'ios') return 'ios-liquid';
+  if (os === 'android') return 'material3';
+  return 'default';
+}
+
+export function GlassDatePicker({
+  value,
+  hintDate,
+  onChange,
+  onConfirm,
+  onCancel,
+  constraint = 'none',
+  minDate,
+  maxDate,
+  yearRange,
+  theme,
+  colorScheme: colorSchemeProp = 'auto',
+  accent,
+  dayShape = 'circle',
+  tokens: tokenOverrides,
+  firstDayOfWeek: firstDayOfWeekProp = 0,
+  monthNames: monthNamesProp,
+  confirmLabel: confirmLabelProp,
+  placeholderLabel: placeholderLabelProp,
+  showSelectedDate = false,
+  selectedDateLabel: selectedDateLabelProp,
+}: GlassDatePickerProps): React.ReactElement {
+  const [today] = useState(() => new Date());
+  const initialView = hintDate ?? today;
+  const [viewYear, setViewYear] = useState(initialView.getFullYear());
+  const [viewMonth, setViewMonth] = useState(initialView.getMonth() + 1);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+  const [openDropdown, setOpenDropdown] = useState<OpenDropdown>('none');
+
+  const activeTheme = theme ?? getDefaultTheme();
+  const systemColorScheme = useColorScheme();
+  const resolvedColorScheme: 'dark' | 'light' =
+    colorSchemeProp === 'auto'
+      ? systemColorScheme === 'dark'
+        ? 'dark'
+        : 'light'
+      : colorSchemeProp;
+
+  let firstDayOfWeek = firstDayOfWeekProp;
+  if (firstDayOfWeek < 0 || firstDayOfWeek > 6) {
+    console.warn(
+      `GlassDate: firstDayOfWeek must be 0–6, got ${firstDayOfWeek} — defaulting to 0`,
+    );
+    firstDayOfWeek = 0;
+  }
+
+  let monthNames: string[] | undefined;
+  if (monthNamesProp) {
+    if (monthNamesProp.length === 12) {
+      monthNames = monthNamesProp;
+    } else {
+      console.warn(
+        `GlassDate: monthNames must have exactly 12 elements, got ${monthNamesProp.length} — using English defaults`,
+      );
+    }
+  }
+
+  const resolvedTokens = resolveTokens(activeTheme, resolvedColorScheme, accent, tokenOverrides);
+  const dayShapeRadius = mapDayShapeToRadius(dayShape);
+
+  const constraintConfig: ConstraintConfig = {
+    preset: constraint,
+    ...(constraint === 'custom' && minDate !== undefined && { minDate }),
+    ...(constraint === 'custom' && maxDate !== undefined && { maxDate }),
+    ...(yearRange !== undefined && { yearRange }),
+  };
+
+  const resolvedBounds = resolveConstraintBounds(constraintConfig, today);
+  const isConfirmEnabled =
+    selectedDate !== null && isDateSelectableFromBounds(selectedDate, resolvedBounds);
+
+  const prev = previousMonth(viewYear, viewMonth);
+  const nxt = nextMonth(viewYear, viewMonth);
+  const isPrevArrowDisabled = !isMonthSelectable(prev.year, prev.month, constraintConfig, today);
+  const isNextArrowDisabled = !isMonthSelectable(nxt.year, nxt.month, constraintConfig, today);
+
+  // INITIAL RENDER — view is already set from hintDate ?? today via useState
+  useEffect(() => {
+    if (isConstraintConfigInvalid(constraintConfig)) {
+      console.warn('GlassDate: minDate is after maxDate');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // VALUE PROP CHANGES
+  useEffect(() => {
+    setOpenDropdown('none');
+
+    if (value === null || value === undefined) {
+      setSelectedDate(null);
+      return;
+    }
+
+    if (isDateSelectable(value, constraintConfig, today)) {
+      setSelectedDate(value);
+      setViewYear(value.getFullYear());
+      setViewMonth(value.getMonth() + 1);
+    } else {
+      console.warn('GlassDate: updated value is outside constraint range');
+      const clamped = clampDate(value, constraintConfig, today);
+      if (clamped) {
+        setSelectedDate(clamped);
+        setViewYear(clamped.getFullYear());
+        setViewMonth(clamped.getMonth() + 1);
+      } else {
+        setSelectedDate(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value?.getTime()]);
+
+  // CONSTRAINT PROP CHANGES
+  useEffect(() => {
+    setOpenDropdown('none');
+
+    if (isConstraintConfigInvalid(constraintConfig)) {
+      setSelectedDate(null);
+      console.warn('GlassDate: minDate is after maxDate');
+      return;
+    }
+
+    if (selectedDate !== null && !isDateSelectable(selectedDate, constraintConfig, today)) {
+      setSelectedDate(null);
+    }
+
+    if (!isMonthSelectable(viewYear, viewMonth, constraintConfig, today)) {
+      const bounds = resolveConstraintBounds(constraintConfig, today);
+      setViewYear(bounds.maxDate.getFullYear());
+      setViewMonth(bounds.maxDate.getMonth() + 1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [constraint, minDate?.getTime(), maxDate?.getTime()]);
+
+  const handleDayPress = useCallback(
+    (date: Date) => {
+      if (
+        selectedDate &&
+        selectedDate.getFullYear() === date.getFullYear() &&
+        selectedDate.getMonth() === date.getMonth() &&
+        selectedDate.getDate() === date.getDate()
+      ) {
+        return;
+      }
+      setSelectedDate(date);
+      setOpenDropdown('none');
+      onChange?.(date);
+    },
+    [selectedDate, onChange],
+  );
+
+  const handleMonthPillPress = useCallback(() => {
+    setOpenDropdown((prev) => (prev === 'month' ? 'none' : 'month'));
+  }, []);
+
+  const handleYearPillPress = useCallback(() => {
+    setOpenDropdown((prev) => (prev === 'year' ? 'none' : 'year'));
+  }, []);
+
+  const handlePrevPress = useCallback(() => {
+    const p = previousMonth(viewYear, viewMonth);
+    setViewYear(p.year);
+    setViewMonth(p.month);
+    setOpenDropdown('none');
+  }, [viewYear, viewMonth]);
+
+  const handleNextPress = useCallback(() => {
+    const n = nextMonth(viewYear, viewMonth);
+    setViewYear(n.year);
+    setViewMonth(n.month);
+    setOpenDropdown('none');
+  }, [viewYear, viewMonth]);
+
+  const handleMonthSelect = useCallback((month: number) => {
+    setViewMonth(month);
+    setOpenDropdown('none');
+  }, []);
+
+  const handleYearSelect = useCallback((year: number) => {
+    setViewYear(year);
+    setOpenDropdown('none');
+    if (selectedDate) {
+      const projected = new Date(year, selectedDate.getMonth(), selectedDate.getDate());
+      if (!isDateSelectableFromBounds(projected, resolvedBounds)) {
+        setSelectedDate(null);
+      }
+    }
+  }, [selectedDate, resolvedBounds]);
+
+  const handleConfirm = useCallback(() => {
+    if (isConfirmEnabled && selectedDate) {
+      onConfirm?.(selectedDate);
+    }
+  }, [isConfirmEnabled, selectedDate, onConfirm]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+
+  const handleDismissDropdown = useCallback(() => {
+    setOpenDropdown('none');
+  }, []);
+
+  const containerTokens = resolvedTokens.container;
+
+  return (
+    <View
+      style={[
+        styles.scene,
+        { backgroundColor: resolvedTokens.scene.backgroundColour },
+        Platform.select({ web: { userSelect: 'none' } as any }),
+      ]}
+    >
+      <GlassContainer
+        blurRadius={containerTokens.blurRadius}
+        backgroundColour={containerTokens.backgroundColour}
+        cornerRadius={containerTokens.cornerRadius}
+        style={[
+          styles.container,
+          {
+            borderColor: containerTokens.borderColour,
+            borderWidth: containerTokens.borderWidth,
+            shadowColor: containerTokens.shadowColour,
+            shadowOffset: {
+              width: containerTokens.shadowOffsetX,
+              height: containerTokens.shadowOffsetY,
+            },
+            shadowRadius: containerTokens.shadowBlurRadius,
+            shadowOpacity: containerTokens.shadowOpacity,
+          },
+        ]}
+      >
+        <MonthYearHeader
+          viewYear={viewYear}
+          viewMonth={viewMonth}
+          today={today}
+          openDropdown={openDropdown}
+          isPrevArrowDisabled={isPrevArrowDisabled}
+          isNextArrowDisabled={isNextArrowDisabled}
+          resolvedTokens={resolvedTokens}
+          monthNames={monthNames}
+          onMonthPillPress={handleMonthPillPress}
+          onYearPillPress={handleYearPillPress}
+          onPrevPress={handlePrevPress}
+          onNextPress={handleNextPress}
+        />
+
+        <View style={styles.contentArea}>
+          {openDropdown === 'none' && (
+            <CalendarGrid
+              viewYear={viewYear}
+              viewMonth={viewMonth}
+              selectedDate={selectedDate}
+              today={today}
+              constraintConfig={constraintConfig}
+              resolvedTokens={resolvedTokens}
+              dayShapeRadius={dayShapeRadius}
+              firstDayOfWeek={firstDayOfWeek}
+              onDayPress={handleDayPress}
+            />
+          )}
+          {openDropdown === 'month' && (
+            <MonthSelector
+              viewYear={viewYear}
+              viewMonth={viewMonth}
+              selectedDate={selectedDate}
+              today={today}
+              constraintConfig={constraintConfig}
+              resolvedTokens={resolvedTokens}
+              monthNames={monthNames}
+              onMonthSelect={handleMonthSelect}
+              onDismiss={handleDismissDropdown}
+            />
+          )}
+          {openDropdown === 'year' && (
+            <YearSelector
+              viewYear={viewYear}
+              selectedDate={selectedDate}
+              today={today}
+              constraintConfig={constraintConfig}
+              resolvedTokens={resolvedTokens}
+              onYearSelect={handleYearSelect}
+              onDismiss={handleDismissDropdown}
+            />
+          )}
+        </View>
+
+        {showSelectedDate && selectedDate && (
+          <Text style={[
+            styles.selectedDateText,
+            { color: resolvedTokens.footer.selectedDateTextColour },
+          ]}>
+            {(selectedDateLabelProp ?? defaultSelectedDateLabel)(selectedDate)}
+          </Text>
+        )}
+
+        <ConfirmFooter
+          selectedDate={selectedDate}
+          isConfirmEnabled={isConfirmEnabled}
+          resolvedTokens={resolvedTokens}
+          confirmLabel={confirmLabelProp}
+          placeholderLabel={placeholderLabelProp}
+          onCancel={handleCancel}
+          onConfirm={handleConfirm}
+        />
+      </GlassContainer>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  scene: {
+    padding: 16,
+  },
+  container: {
+    padding: 16,
+    overflow: 'hidden',
+    height: 480,
+  },
+  contentArea: {
+    flex: 1,
+  },
+  selectedDateText: {
+    fontSize: 15,
+    textAlign: 'center',
+    paddingVertical: 8,
+  },
+});