@cdx-ui/components 0.0.1-beta.140 → 0.0.1-beta.142

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;
+}

package/src/components/Calendar/index.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useCallback, useId, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Calendar as FlashCalendar } from '@marceloterreiro/flash-calendar';
+import {
+  CalendarGrid as CalendarGridPrimitive,
+  CalendarRoot as CalendarRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useCalendarContext,
+  type ICalendarProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { CalendarMonthHeader } from './CalendarMonthHeader';
+import { CalendarYearPickerGrid } from './CalendarYearPickerGrid';
+import {
+  FLASH_CALENDAR_DAY_HEIGHT,
+  formatFlashCalendarWeekdayShort,
+  toCalendarDateId,
+  useFlashCalendarTheme,
+} from './flashCalendarAdapter';
+import { calendarRootVariants } from './styles';
+
+export interface CalendarProps extends ICalendarProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function CalendarDefaultBody() {
+  const { view } = useCalendarContext();
+  return (
+    <>
+      <CalendarHeader />
+      {view === 'year' ? <CalendarYearPicker /> : <CalendarGrid />}
+    </>
+  );
+}
+
+const CalendarRoot = forwardRef<View, CalendarProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <CalendarRootPrimitive
+      ref={ref}
+      className={cn(calendarRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'calendar' }))}
+    >
+      {children ?? <CalendarDefaultBody />}
+    </CalendarRootPrimitive>
+  ),
+);
+
+CalendarRoot.displayName = 'Calendar';
+
+const CalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { monthId, onMonthIdChange, disabled, view, setView, locale, labels } =
+    useCalendarContext();
+  return (
+    <CalendarMonthHeader
+      ref={ref}
+      monthId={monthId}
+      onMonthIdChange={onMonthIdChange}
+      disabled={disabled}
+      view={view}
+      onViewChange={setView}
+      locale={locale}
+      labels={labels}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+CalendarHeader.displayName = 'Calendar.Header';
+
+const CalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { value, onValueChange, monthId, minValue, maxValue, disabled, locale } =
+    useCalendarContext();
+  const instanceId = useId();
+  const theme = useFlashCalendarTheme(value);
+
+  const formatWeekday = useCallback(
+    (date: Date) => formatFlashCalendarWeekdayShort(date, locale),
+    [locale],
+  );
+
+  const activeRanges = useMemo(() => (value ? [{ startId: value, endId: value }] : []), [value]);
+
+  const handleDayPress = useCallback(
+    (dateId: string) => {
+      if (!disabled) {
+        onValueChange?.(toCalendarDateId(dateId));
+      }
+    },
+    [disabled, onValueChange],
+  );
+
+  return (
+    <CalendarGridPrimitive ref={ref} className={className} style={style} {...props}>
+      <FlashCalendar
+        calendarInstanceId={instanceId}
+        calendarMonthId={monthId}
+        calendarActiveDateRanges={activeRanges}
+        calendarMinDateId={minValue}
+        calendarMaxDateId={maxValue}
+        calendarMonthHeaderHeight={0}
+        calendarDayHeight={FLASH_CALENDAR_DAY_HEIGHT}
+        calendarWeekHeaderHeight={28}
+        calendarRowVerticalSpacing={4}
+        calendarRowHorizontalSpacing={4}
+        getCalendarMonthFormat={() => ''}
+        getCalendarWeekDayFormat={formatWeekday}
+        onCalendarDayPress={handleDayPress}
+        theme={theme}
+      />
+    </CalendarGridPrimitive>
+  );
+});
+
+CalendarGrid.displayName = 'Calendar.Grid';
+
+const CalendarYearPicker = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { monthId, onMonthIdChange, disabled, setView, labels } = useCalendarContext();
+  return (
+    <CalendarYearPickerGrid
+      ref={ref}
+      monthId={monthId}
+      onMonthIdChange={onMonthIdChange}
+      disabled={disabled}
+      onViewChange={setView}
+      labels={labels}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+CalendarYearPicker.displayName = 'Calendar.YearPicker';
+
+type CalendarCompound = typeof CalendarRoot & {
+  Header: typeof CalendarHeader;
+  Grid: typeof CalendarGrid;
+  YearPicker: typeof CalendarYearPicker;
+};
+
+export const Calendar = Object.assign(CalendarRoot, {
+  Header: CalendarHeader,
+  Grid: CalendarGrid,
+  YearPicker: CalendarYearPicker,
+}) as CalendarCompound;

package/src/components/Calendar/styles.ts

@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, DISABLED_OPACITY } from '../../styles/constants';
+
+export const calendarRootVariants = cva([
+  'gap-3 rounded-[var(--border-radius-default)] bg-surface-primary p-3',
+  DISABLED_OPACITY,
+  DISABLED_CURSOR,
+]);
+
+export const calendarMonthHeaderVariants = cva('flex-row items-center justify-between gap-2 px-1');
+
+export const calendarMonthHeaderToggleVariants = cva('min-w-0 flex-1 flex-row items-center gap-1');
+
+export const calendarMonthHeaderLabelVariants = cva('body-lg font-semibold shrink', {
+  variants: {
+    isYearView: {
+      true: 'text-content-action',
+      false: 'text-content-primary',
+    },
+  },
+  defaultVariants: { isYearView: false },
+});
+
+export const calendarMonthHeaderIconVariants = cva('size-5 shrink-0', {
+  variants: {
+    isYearView: {
+      true: 'text-content-action',
+      false: 'text-content-secondary',
+    },
+  },
+  defaultVariants: { isYearView: false },
+});
+
+export const calendarMonthHeaderNavVariants = cva('flex-row items-center gap-1');
+
+export const calendarYearPickerGridVariants = cva(
+  'flex-row flex-wrap justify-between gap-y-2 px-1 py-1',
+);
+
+export const calendarPillCellVariants = cva(
+  'my-0.5 w-[31%] items-center justify-center rounded-[var(--border-radius-round)] py-2.5',
+  {
+    variants: {
+      selected: {
+        true: 'bg-surface-action-strong',
+        false: 'bg-transparent',
+      },
+      // Dims out-of-range / disabled cells and gates the compound variant
+      // below so hover is suppressed on disabled cells.
+      disabled: {
+        true: DISABLED_OPACITY,
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        selected: false,
+        disabled: false,
+        className: 'web:hover:bg-surface-action-subtle',
+      },
+    ],
+    defaultVariants: { selected: false, disabled: false },
+  },
+);
+
+export const calendarPillCellTextVariants = cva('body-md', {
+  variants: {
+    selected: {
+      true: 'font-semibold text-content-action-on-strong',
+      false: 'text-content-primary',
+    },
+  },
+  defaultVariants: { selected: false },
+});
+
+export type CalendarRootVariantProps = VariantProps<typeof calendarRootVariants>;
+export type CalendarMonthHeaderLabelVariantProps = VariantProps<
+  typeof calendarMonthHeaderLabelVariants
+>;
+export type CalendarPillCellVariantProps = VariantProps<typeof calendarPillCellVariants>;