@cdx-ui/components 0.0.1-beta.17 → 0.0.1-beta.171

package/src/components/Calendar/CalendarMonthHeader.tsx

@@ -0,0 +1,124 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import {
+  formatCalendarMonthYear,
+  formatMonthId,
+  parseMonthId,
+  resolveDateComponentLabels,
+  type DateComponentLabels,
+  type MonthId,
+} from '@cdx-ui/formatters';
+import { cn } from '@cdx-ui/utils';
+import { ChevronLeft, ChevronRight, KeyboardArrowDown } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import {
+  calendarMonthHeaderIconVariants,
+  calendarMonthHeaderLabelVariants,
+  calendarMonthHeaderNavVariants,
+  calendarMonthHeaderToggleVariants,
+  calendarMonthHeaderVariants,
+} from './styles';
+
+export type CalendarNavigationView = 'month' | 'year';
+
+export interface CalendarMonthHeaderProps extends ViewProps {
+  monthId: MonthId;
+  onMonthIdChange: (monthId: MonthId) => void;
+  disabled?: boolean;
+  view: CalendarNavigationView;
+  onViewChange: (view: CalendarNavigationView) => void;
+  locale?: string;
+  labels?: Partial<DateComponentLabels>;
+}
+
+export const CalendarMonthHeader = forwardRef<ComponentRef<typeof View>, CalendarMonthHeaderProps>(
+  (
+    {
+      monthId,
+      onMonthIdChange,
+      disabled = false,
+      view,
+      onViewChange,
+      locale = 'en-US',
+      labels: labelsProp,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const label = formatCalendarMonthYear(monthId, { locale });
+    const isYearView = view === 'year';
+
+    const shiftMonth = useCallback(
+      (delta: number) => {
+        const parts = parseMonthId(monthId);
+        if (!parts) {
+          return;
+        }
+        const date = new Date(parts.year, parts.month - 1 + delta, 1);
+        onMonthIdChange(formatMonthId({ year: date.getFullYear(), month: date.getMonth() + 1 }));
+      },
+      [monthId, onMonthIdChange],
+    );
+
+    const toggleYearView = useCallback(() => {
+      if (disabled) {
+        return;
+      }
+      onViewChange(isYearView ? 'month' : 'year');
+    }, [disabled, isYearView, onViewChange]);
+
+    return (
+      <View
+        ref={ref}
+        className={cn(calendarMonthHeaderVariants(), className)}
+        style={style}
+        {...props}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={isYearView ? labels.showCalendar : labels.showYearPicker}
+          disabled={disabled}
+          onPress={toggleYearView}
+          className={calendarMonthHeaderToggleVariants()}
+        >
+          <Text className={calendarMonthHeaderLabelVariants({ isYearView })} numberOfLines={1}>
+            {label}
+          </Text>
+          <Icon
+            as={isYearView ? KeyboardArrowDown : ChevronRight}
+            className={calendarMonthHeaderIconVariants({ isYearView })}
+          />
+        </Pressable>
+
+        {!isYearView ? (
+          <View className={calendarMonthHeaderNavVariants()}>
+            <IconButton
+              as={ChevronLeft}
+              variant="ghost"
+              color="neutral"
+              size="small"
+              accessibilityLabel={labels.previousMonth}
+              isDisabled={disabled}
+              onPress={() => shiftMonth(-1)}
+            />
+            <IconButton
+              as={ChevronRight}
+              variant="ghost"
+              color="neutral"
+              size="small"
+              accessibilityLabel={labels.nextMonth}
+              isDisabled={disabled}
+              onPress={() => shiftMonth(1)}
+            />
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+CalendarMonthHeader.displayName = 'CalendarMonthHeader';

package/src/components/Calendar/CalendarYearPickerGrid.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import {
+  formatMonthId,
+  formatSelectYear,
+  parseMonthId,
+  resolveDateComponentLabels,
+  type DateComponentLabels,
+  type MonthId,
+} from '@cdx-ui/formatters';
+import { cn } from '@cdx-ui/utils';
+import type { CalendarNavigationView } from './CalendarMonthHeader';
+import {
+  calendarPillCellTextVariants,
+  calendarPillCellVariants,
+  calendarYearPickerGridVariants,
+} from './styles';
+
+const YEAR_RANGE_BEFORE = 9;
+const YEAR_RANGE_AFTER = 11;
+
+export interface CalendarYearPickerGridProps extends ViewProps {
+  monthId: MonthId;
+  onMonthIdChange: (monthId: MonthId) => void;
+  disabled?: boolean;
+  onViewChange: (view: CalendarNavigationView) => void;
+  labels?: Partial<DateComponentLabels>;
+}
+
+export const CalendarYearPickerGrid = forwardRef<
+  ComponentRef<typeof View>,
+  CalendarYearPickerGridProps
+>(
+  (
+    {
+      monthId,
+      onMonthIdChange,
+      disabled = false,
+      onViewChange,
+      labels: labelsProp,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const parts = parseMonthId(monthId);
+    const currentYear = parts?.year ?? new Date().getFullYear();
+    const currentMonth = parts?.month ?? 1;
+
+    const years = useMemo(
+      () =>
+        Array.from(
+          { length: YEAR_RANGE_BEFORE + YEAR_RANGE_AFTER + 1 },
+          (_, i) => currentYear - YEAR_RANGE_BEFORE + i,
+        ),
+      [currentYear],
+    );
+
+    const selectYear = useCallback(
+      (year: number) => {
+        if (disabled) {
+          return;
+        }
+        onMonthIdChange(formatMonthId({ year, month: currentMonth }));
+        onViewChange('month');
+      },
+      [currentMonth, disabled, onMonthIdChange, onViewChange],
+    );
+
+    return (
+      <View
+        ref={ref}
+        className={cn(calendarYearPickerGridVariants(), className)}
+        style={style}
+        accessibilityRole="none"
+        {...props}
+      >
+        {years.map((year) => {
+          const selected = year === currentYear;
+          return (
+            <Pressable
+              key={year}
+              accessibilityRole="button"
+              accessibilityState={{ selected, disabled }}
+              accessibilityLabel={formatSelectYear(labels, year)}
+              disabled={disabled}
+              onPress={() => selectYear(year)}
+              className={calendarPillCellVariants({ selected, disabled })}
+            >
+              <Text className={calendarPillCellTextVariants({ selected })}>{String(year)}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+CalendarYearPickerGrid.displayName = 'CalendarYearPickerGrid';

package/src/components/Calendar/flashCalendarAdapter.ts

@@ -0,0 +1,362 @@
+import { useMemo } from 'react';
+import { useCSSVariable } from 'uniwind';
+import type { CalendarTheme } from '@marceloterreiro/flash-calendar';
+import type { DateId } from '@cdx-ui/formatters';
+
+const DAY_SIZE = 36;
+const DAY_RADIUS = DAY_SIZE / 2;
+
+const CALENDAR_COLOR_VARS = [
+  '--color-surface-action-strong',
+  '--color-content-action-on-strong',
+  '--color-content-tertiary',
+  '--color-surface-action-subtle',
+  '--color-content-primary',
+  '--color-stroke-action',
+  '--color-surface-action-subtle-hover',
+  '--color-content-action',
+];
+
+const CALENDAR_LENGTH_VARS = ['--text-sm', '--border-width-selected', '--opacity-disabled'];
+
+const DAY_FONT_SIZE_FALLBACK = 14;
+const TODAY_BORDER_WIDTH_FALLBACK = 2;
+const DISABLED_OPACITY_FALLBACK = 0.5;
+const ROOT_FONT_SIZE_PX = 16;
+
+interface CalendarColors {
+  surfaceActionStrong: string;
+  contentActionOnStrong: string;
+  contentTertiary: string;
+  surfaceActionSubtle: string;
+  contentPrimary: string;
+  strokeAction: string;
+  surfaceActionSubtleHover: string;
+  contentAction: string;
+}
+
+interface CalendarLengths {
+  dayFontSize: number;
+  todayBorderWidth: number;
+  disabledOpacity: number;
+}
+
+function tokenValue(resolved: string | number | undefined, cssVar: string): string {
+  return resolved != null ? String(resolved) : `var(${cssVar})`;
+}
+
+/**
+ * Coerces a length token to the numeric px RN `fontSize`/`borderWidth` require.
+ *
+ * `useCSSVariable` resolves lengths differently per platform: native returns a
+ * number already in px, while web returns the raw CSS string (`0.875rem`). Only
+ * the rem form needs the root-font-size conversion — scaling the native value
+ * would multiply it a second time.
+ */
+function lengthToPx(resolved: string | number | undefined, fallback: number): number {
+  if (typeof resolved === 'number') {
+    return Number.isFinite(resolved) ? resolved : fallback;
+  }
+  if (typeof resolved !== 'string') {
+    return fallback;
+  }
+  const trimmed = resolved.trim();
+  const numeric = Number.parseFloat(trimmed);
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+  return trimmed.endsWith('rem') ? numeric * ROOT_FONT_SIZE_PX : numeric;
+}
+
+function useFlashCalendarColors(): CalendarColors {
+  const [
+    surfaceActionStrong,
+    contentActionOnStrong,
+    contentTertiary,
+    surfaceActionSubtle,
+    contentPrimary,
+    strokeAction,
+    surfaceActionSubtleHover,
+    contentAction,
+  ] = useCSSVariable(CALENDAR_COLOR_VARS);
+
+  return useMemo(
+    () => ({
+      surfaceActionStrong: tokenValue(surfaceActionStrong, '--color-surface-action-strong'),
+      contentActionOnStrong: tokenValue(contentActionOnStrong, '--color-content-action-on-strong'),
+      contentTertiary: tokenValue(contentTertiary, '--color-content-tertiary'),
+      surfaceActionSubtle: tokenValue(surfaceActionSubtle, '--color-surface-action-subtle'),
+      contentPrimary: tokenValue(contentPrimary, '--color-content-primary'),
+      strokeAction: tokenValue(strokeAction, '--color-stroke-action'),
+      surfaceActionSubtleHover: tokenValue(
+        surfaceActionSubtleHover,
+        '--color-surface-action-subtle-hover',
+      ),
+      contentAction: tokenValue(contentAction, '--color-content-action'),
+    }),
+    [
+      contentAction,
+      contentActionOnStrong,
+      contentPrimary,
+      contentTertiary,
+      strokeAction,
+      surfaceActionStrong,
+      surfaceActionSubtle,
+      surfaceActionSubtleHover,
+    ],
+  );
+}
+
+function useFlashCalendarLengths(): CalendarLengths {
+  const [textSm, borderWidthSelected, opacityDisabled] = useCSSVariable(CALENDAR_LENGTH_VARS);
+
+  return useMemo(
+    () => ({
+      dayFontSize: lengthToPx(textSm, DAY_FONT_SIZE_FALLBACK),
+      todayBorderWidth: lengthToPx(borderWidthSelected, TODAY_BORDER_WIDTH_FALLBACK),
+      disabledOpacity: lengthToPx(opacityDisabled, DISABLED_OPACITY_FALLBACK),
+    }),
+    [borderWidthSelected, opacityDisabled, textSm],
+  );
+}
+
+function isSelectedDay(id: string, selectedDateId?: DateId): boolean {
+  return selectedDateId !== undefined && id === selectedDateId;
+}
+
+function selectedDayStyles(colors: CalendarColors) {
+  return {
+    container: {
+      borderRadius: DAY_RADIUS,
+      borderWidth: 0,
+      backgroundColor: colors.surfaceActionStrong,
+    },
+    content: {
+      color: colors.contentActionOnStrong,
+      fontWeight: '600' as const,
+    },
+  };
+}
+
+export function useFlashCalendarTheme(selectedDateId?: DateId): CalendarTheme {
+  const colors = useFlashCalendarColors();
+  const lengths = useFlashCalendarLengths();
+  const selected = useMemo(() => selectedDayStyles(colors), [colors]);
+
+  return useMemo(
+    () => ({
+      rowMonth: {
+        container: {
+          height: 0,
+          paddingVertical: 0,
+          overflow: 'hidden' as const,
+        },
+        content: {
+          fontSize: 0,
+          height: 0,
+          opacity: 0,
+        },
+      },
+      rowWeek: {
+        container: {
+          paddingBottom: 4,
+        },
+      },
+      itemWeekName: {
+        content: {
+          fontSize: 13,
+          fontWeight: '500' as const,
+          color: colors.contentTertiary,
+        },
+      },
+      itemDay: {
+        base: () => ({
+          container: {
+            borderRadius: DAY_RADIUS,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+          },
+          content: {
+            fontSize: lengths.dayFontSize,
+            fontWeight: '500' as const,
+          },
+        }),
+        idle: ({ id, isPressed }) =>
+          isSelectedDay(id, selectedDateId)
+            ? selected
+            : {
+                container: {
+                  borderRadius: DAY_RADIUS,
+                  backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent',
+                },
+                content: {
+                  color: colors.contentPrimary,
+                },
+              },
+        today: ({ id, isPressed }) =>
+          isSelectedDay(id, selectedDateId)
+            ? selected
+            : {
+                container: {
+                  borderRadius: DAY_RADIUS,
+                  borderWidth: lengths.todayBorderWidth,
+                  borderColor: colors.strokeAction,
+                  backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent',
+                },
+                content: {
+                  color: colors.contentPrimary,
+                  fontWeight: '600' as const,
+                },
+              },
+        active: () => selected,
+        disabled: () => ({
+          container: {
+            borderRadius: DAY_RADIUS,
+            backgroundColor: 'transparent',
+          },
+          content: {
+            color: colors.contentPrimary,
+            opacity: lengths.disabledOpacity,
+          },
+        }),
+      },
+    }),
+    [colors, lengths, selected, selectedDateId],
+  );
+}
+
+export function useFlashCalendarRangeTheme(range?: {
+  startId?: DateId;
+  endId?: DateId;
+}): CalendarTheme {
+  const colors = useFlashCalendarColors();
+  const lengths = useFlashCalendarLengths();
+  const selected = useMemo(() => selectedDayStyles(colors), [colors]);
+
+  return useMemo(
+    () => ({
+      rowMonth: {
+        container: {
+          height: 0,
+          paddingVertical: 0,
+          overflow: 'hidden' as const,
+        },
+        content: {
+          fontSize: 0,
+          height: 0,
+          opacity: 0,
+        },
+      },
+      rowWeek: {
+        container: {
+          paddingBottom: 4,
+        },
+      },
+      itemWeekName: {
+        content: {
+          fontSize: 13,
+          fontWeight: '500' as const,
+          color: colors.contentTertiary,
+        },
+      },
+      itemDayContainer: {
+        activeDayFiller: {
+          backgroundColor: colors.surfaceActionSubtleHover,
+        },
+      },
+      itemDay: {
+        base: () => ({
+          container: {
+            borderRadius: 0,
+            padding: 0,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+          },
+          content: {
+            fontSize: lengths.dayFontSize,
+            fontWeight: '500' as const,
+          },
+        }),
+        idle: ({ isPressed }) => ({
+          container: {
+            borderRadius: DAY_RADIUS,
+            backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent',
+          },
+          content: {
+            color: colors.contentPrimary,
+          },
+        }),
+        today: ({ id, isPressed }) => {
+          const isEndpoint =
+            (range?.startId !== undefined && id === range.startId) ||
+            (range?.endId !== undefined && id === range.endId);
+          if (isEndpoint) {
+            return selected;
+          }
+          return {
+            container: {
+              borderRadius: DAY_RADIUS,
+              borderWidth: lengths.todayBorderWidth,
+              borderColor: colors.strokeAction,
+              backgroundColor: isPressed ? colors.surfaceActionSubtle : 'transparent',
+            },
+            content: {
+              color: colors.contentPrimary,
+              fontWeight: '600' as const,
+            },
+          };
+        },
+        active: ({ isStartOfRange, isEndOfRange }) => {
+          const isEndpoint = isStartOfRange || isEndOfRange;
+          const isSingleDay = isStartOfRange && isEndOfRange;
+          return {
+            container: {
+              padding: 0,
+              borderRadius: isSingleDay ? DAY_RADIUS : 0,
+              borderTopLeftRadius: isStartOfRange ? DAY_RADIUS : 0,
+              borderBottomLeftRadius: isStartOfRange ? DAY_RADIUS : 0,
+              borderTopRightRadius: isEndOfRange ? DAY_RADIUS : 0,
+              borderBottomRightRadius: isEndOfRange ? DAY_RADIUS : 0,
+              backgroundColor: isEndpoint
+                ? colors.surfaceActionStrong
+                : colors.surfaceActionSubtleHover,
+            },
+            content: {
+              color: isEndpoint ? colors.contentActionOnStrong : colors.contentAction,
+              fontWeight: isEndpoint ? ('600' as const) : ('500' as const),
+            },
+          };
+        },
+        disabled: () => ({
+          container: {
+            borderRadius: DAY_RADIUS,
+            backgroundColor: 'transparent',
+          },
+          content: {
+            color: colors.contentPrimary,
+            opacity: lengths.disabledOpacity,
+          },
+        }),
+      },
+    }),
+    [colors, lengths, range?.endId, range?.startId, selected],
+  );
+}
+
+/** Keep range days flush so the band reads as one shape (filler covers residual sub-pixel gaps). */
+export const FLASH_CALENDAR_RANGE_DAY_SPACING = 0;
+
+export const FLASH_CALENDAR_DAY_HEIGHT = DAY_SIZE;
+
+export function formatFlashCalendarWeekdayShort(date: Date, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
+}
+
+/**
+ * Brands a raw Flash Calendar day id as a wire {@link DateId}. Flash Calendar
+ * always hands back `YYYY-MM-DD`, so this is the trusted third-party boundary
+ * where the wire brand is applied.
+ */
+export function toCalendarDateId(id: string): DateId {
+  return id as DateId;
+}