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

package/src/components/MonthCalendar/index.tsx

@@ -0,0 +1,252 @@
+import { forwardRef, useCallback, useMemo, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import {
+  dataAttributes,
+  mergeDataAttributes,
+  MonthCalendarCell as MonthCalendarCellPrimitive,
+  MonthCalendarRoot as MonthCalendarRootPrimitive,
+  MonthCalendarYearCell as MonthCalendarYearCellPrimitive,
+  useMonthCalendarContext,
+  type MonthCalendarRootProps,
+} from '@cdx-ui/primitives';
+import {
+  compareMonthIds,
+  formatMonthCalendarMonth,
+  formatMonthCalendarYear,
+  formatMonthId,
+  formatSelectYear,
+  parseMonthId,
+} 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,
+  calendarPillCellTextVariants,
+  calendarPillCellVariants,
+  calendarRootVariants,
+  calendarYearPickerGridVariants,
+} from '../Calendar/styles';
+
+export interface MonthCalendarProps
+  extends Omit<MonthCalendarRootProps, 'children'>, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function MonthCalendarDefaultBody() {
+  return (
+    <>
+      <MonthCalendarHeader />
+      <MonthCalendarGrid />
+    </>
+  );
+}
+
+const MonthCalendarRoot = forwardRef<View, MonthCalendarProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <MonthCalendarRootPrimitive
+      ref={ref}
+      className={cn(calendarRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'month-calendar' }))}
+    >
+      {children ?? <MonthCalendarDefaultBody />}
+    </MonthCalendarRootPrimitive>
+  ),
+);
+
+MonthCalendarRoot.displayName = 'MonthCalendar';
+
+const MonthCalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { view, onViewChange, visibleYear, onVisibleYearChange, disabled, labels } =
+    useMonthCalendarContext();
+  const isYearView = view === 'year';
+
+  const shiftYear = useCallback(
+    (delta: number) => {
+      if (disabled) {
+        return;
+      }
+      onVisibleYearChange(visibleYear + delta);
+    },
+    [disabled, onVisibleYearChange, visibleYear],
+  );
+
+  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.showMonths : labels.showYearPicker}
+        disabled={disabled}
+        onPress={toggleYearView}
+        className={calendarMonthHeaderToggleVariants()}
+      >
+        <Text className={calendarMonthHeaderLabelVariants({ isYearView })} numberOfLines={1}>
+          {formatMonthCalendarYear(visibleYear)}
+        </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.previousYear}
+            isDisabled={disabled}
+            onPress={() => shiftYear(-1)}
+          />
+          <IconButton
+            as={ChevronRight}
+            variant="ghost"
+            color="neutral"
+            size="small"
+            accessibilityLabel={labels.nextYear}
+            isDisabled={disabled}
+            onPress={() => shiftYear(1)}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+MonthCalendarHeader.displayName = 'MonthCalendar.Header';
+
+const MonthCalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { view, visibleYear } = useMonthCalendarContext();
+
+  const years = useMemo(
+    () => Array.from({ length: 12 }, (_, i) => visibleYear - 5 + i),
+    [visibleYear],
+  );
+
+  if (view === 'year') {
+    return (
+      <View
+        ref={ref}
+        className={cn(calendarYearPickerGridVariants(), className)}
+        style={style}
+        accessibilityRole="none"
+        {...props}
+      >
+        {years.map((year) => (
+          <MonthCalendarYearCell key={year} year={year} />
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={cn(calendarYearPickerGridVariants(), className)}
+      style={style}
+      accessibilityRole="none"
+      {...props}
+    >
+      {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
+        <MonthCalendarCell key={month} month={month} />
+      ))}
+    </View>
+  );
+});
+
+MonthCalendarGrid.displayName = 'MonthCalendar.Grid';
+
+const MonthCalendarCell = forwardRef<
+  View,
+  { month: number; className?: string; children?: ReactNode }
+>(({ month, className, children, ...props }, ref) => {
+  const { visibleYear, value, locale, minValue, maxValue } = useMonthCalendarContext();
+  const monthId = formatMonthId({ year: visibleYear, month });
+  const selected = value === monthId;
+  const disabled =
+    (minValue != null && compareMonthIds(monthId, minValue) < 0) ||
+    (maxValue != null && compareMonthIds(monthId, maxValue) > 0);
+
+  return (
+    <MonthCalendarCellPrimitive
+      ref={ref}
+      month={month}
+      accessibilityLabel={formatMonthCalendarMonth(month, { locale })}
+      className={cn(calendarPillCellVariants({ selected, disabled }), className)}
+      {...props}
+    >
+      {children ?? (
+        <Text className={calendarPillCellTextVariants({ selected })}>
+          {formatMonthCalendarMonth(month, { locale })}
+        </Text>
+      )}
+    </MonthCalendarCellPrimitive>
+  );
+});
+
+MonthCalendarCell.displayName = 'MonthCalendar.Cell';
+
+const MonthCalendarYearCell = forwardRef<
+  View,
+  { year: number; className?: string; children?: ReactNode }
+>(({ year, className, children, ...props }, ref) => {
+  const { visibleYear, labels, minValue, maxValue } = useMonthCalendarContext();
+  const selected = visibleYear === year;
+  const minYear = minValue ? parseMonthId(minValue)?.year : undefined;
+  const maxYear = maxValue ? parseMonthId(maxValue)?.year : undefined;
+  const disabled = (minYear != null && year < minYear) || (maxYear != null && year > maxYear);
+
+  return (
+    <MonthCalendarYearCellPrimitive
+      ref={ref}
+      year={year}
+      accessibilityLabel={formatSelectYear(labels, year)}
+      className={cn(calendarPillCellVariants({ selected, disabled }), className)}
+      {...props}
+    >
+      {children ?? (
+        <Text className={calendarPillCellTextVariants({ selected })}>
+          {formatMonthCalendarYear(year)}
+        </Text>
+      )}
+    </MonthCalendarYearCellPrimitive>
+  );
+});
+
+MonthCalendarYearCell.displayName = 'MonthCalendar.YearCell';
+
+type MonthCalendarCompound = typeof MonthCalendarRoot & {
+  Header: typeof MonthCalendarHeader;
+  Grid: typeof MonthCalendarGrid;
+  Cell: typeof MonthCalendarCell;
+  YearCell: typeof MonthCalendarYearCell;
+};
+
+export const MonthCalendar = Object.assign(MonthCalendarRoot, {
+  Header: MonthCalendarHeader,
+  Grid: MonthCalendarGrid,
+  Cell: MonthCalendarCell,
+  YearCell: MonthCalendarYearCell,
+}) as MonthCalendarCompound;

package/src/components/MonthPicker/index.tsx

@@ -0,0 +1,188 @@
+import { forwardRef, useCallback, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { CalendarToday } from '@cdx-ui/icons';
+import {
+  dataAttributes,
+  mergeDataAttributes,
+  MonthPickerContext,
+  MonthPickerRoot as MonthPickerRootPrimitive,
+  useMonthPickerContext,
+  type MonthPickerRootProps as MonthPickerRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import type { MonthId } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { MonthCalendar, type MonthCalendarProps } from '../MonthCalendar';
+import { PickerTrigger, type PickerTriggerProps } from '../picker/PickerTrigger';
+import {
+  PickerBottomSheetSurface,
+  PickerDialogSurface,
+  PickerPopoverSurface,
+} from '../picker/surfaces';
+
+export interface MonthPickerProps
+  extends MonthPickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+
+const MonthPickerRoot = forwardRef<View, MonthPickerProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [DATE_FIELD_SCOPE]: { variant: 'outline', size: 'default', fullWidth: true },
+      }),
+      [parent],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <MonthPickerRootPrimitive
+          ref={ref}
+          className={cn('gap-2', className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'month-picker' }))}
+        >
+          {children}
+        </MonthPickerRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+MonthPickerRoot.displayName = 'MonthPicker';
+
+type MonthPickerTriggerProps = Omit<
+  PickerTriggerProps,
+  'open' | 'setOpen' | 'disabled' | 'triggerRef' | 'accessibilityLabel'
+> & {
+  accessibilityLabel?: string;
+};
+
+const MonthPickerTrigger = forwardRef<View, MonthPickerTriggerProps>(
+  ({ accessibilityLabel, ...props }, ref) => {
+    const { open, setOpen, disabled, triggerRef, labels } = useMonthPickerContext();
+    return (
+      <PickerTrigger
+        ref={ref}
+        open={open}
+        setOpen={setOpen}
+        disabled={disabled}
+        triggerRef={triggerRef}
+        accessibilityLabel={accessibilityLabel ?? labels.openMonthPicker}
+        {...props}
+      />
+    );
+  },
+);
+
+MonthPickerTrigger.displayName = 'MonthPicker.Trigger';
+
+const MonthPickerTriggerIndicator = () => (
+  <Icon as={CalendarToday} className="text-content-secondary" />
+);
+
+MonthPickerTriggerIndicator.displayName = 'MonthPicker.TriggerIndicator';
+
+type MonthPickerCalendarProps = Omit<
+  MonthCalendarProps,
+  'value' | 'onValueChange' | 'minValue' | 'maxValue'
+>;
+
+const MonthPickerCalendar = forwardRef<View, MonthPickerCalendarProps>(({ ...props }, ref) => {
+  const { value, onValueChange, open, setOpen, minValue, maxValue, locale, labels } =
+    useMonthPickerContext();
+
+  const handleValueChange = useCallback(
+    (next: MonthId | undefined) => {
+      onValueChange?.(next);
+      if (open) {
+        setOpen(false);
+      }
+    },
+    [onValueChange, open, setOpen],
+  );
+
+  return (
+    <MonthCalendar
+      ref={ref}
+      value={value}
+      onValueChange={handleValueChange}
+      minValue={minValue}
+      maxValue={maxValue}
+      locale={locale}
+      labels={labels}
+      {...props}
+    />
+  );
+});
+
+MonthPickerCalendar.displayName = 'MonthPicker.Calendar';
+
+function MonthPickerDialog({ children }: { children: ReactNode }) {
+  const ctx = useMonthPickerContext();
+  return (
+    <PickerDialogSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <Dialog.Popup className="p-4">
+        <MonthPickerContext.Provider value={ctx}>{children}</MonthPickerContext.Provider>
+      </Dialog.Popup>
+    </PickerDialogSurface>
+  );
+}
+
+function MonthPickerBottomSheet({ children }: { children: ReactNode }) {
+  const ctx = useMonthPickerContext();
+  return (
+    <PickerBottomSheetSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <MonthPickerContext.Provider value={ctx}>{children}</MonthPickerContext.Provider>
+    </PickerBottomSheetSurface>
+  );
+}
+
+function MonthPickerPopover({ children, className }: { children: ReactNode; className?: string }) {
+  const ctx = useMonthPickerContext();
+  return (
+    <PickerPopoverSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+      anchorRef={ctx.anchorRef}
+      triggerRef={ctx.triggerRef}
+      className={className}
+    >
+      <MonthPickerContext.Provider value={ctx}>{children}</MonthPickerContext.Provider>
+    </PickerPopoverSurface>
+  );
+}
+
+type MonthPickerCompound = typeof MonthPickerRoot & {
+  Trigger: typeof MonthPickerTrigger;
+  TriggerIndicator: typeof MonthPickerTriggerIndicator;
+  Calendar: typeof MonthPickerCalendar;
+  Popover: typeof MonthPickerPopover;
+  Dialog: typeof MonthPickerDialog;
+  BottomSheet: typeof MonthPickerBottomSheet;
+};
+
+export const MonthPicker = Object.assign(MonthPickerRoot, {
+  Trigger: MonthPickerTrigger,
+  TriggerIndicator: MonthPickerTriggerIndicator,
+  Calendar: MonthPickerCalendar,
+  Popover: MonthPickerPopover,
+  Dialog: MonthPickerDialog,
+  BottomSheet: MonthPickerBottomSheet,
+}) as MonthPickerCompound;

package/src/components/RangeCalendar/index.tsx

@@ -0,0 +1,162 @@
+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 {
+  dataAttributes,
+  mergeDataAttributes,
+  RangeCalendarRoot as RangeCalendarRootPrimitive,
+  useRangeCalendarContext,
+  type RangeCalendarRootProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { CalendarMonthHeader } from '../Calendar/CalendarMonthHeader';
+import { CalendarYearPickerGrid } from '../Calendar/CalendarYearPickerGrid';
+import {
+  FLASH_CALENDAR_DAY_HEIGHT,
+  FLASH_CALENDAR_RANGE_DAY_SPACING,
+  formatFlashCalendarWeekdayShort,
+  toCalendarDateId,
+  useFlashCalendarRangeTheme,
+} from '../Calendar/flashCalendarAdapter';
+import { calendarRootVariants } from '../Calendar/styles';
+
+export interface RangeCalendarProps
+  extends Omit<RangeCalendarRootProps, 'children'>, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function RangeCalendarDefaultBody() {
+  const { view } = useRangeCalendarContext();
+  return (
+    <>
+      <RangeCalendarHeader />
+      {view === 'year' ? <RangeCalendarYearPicker /> : <RangeCalendarGrid />}
+    </>
+  );
+}
+
+const RangeCalendarRoot = forwardRef<View, RangeCalendarProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <RangeCalendarRootPrimitive
+      ref={ref}
+      className={cn(calendarRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'range-calendar' }))}
+    >
+      {children ?? <RangeCalendarDefaultBody />}
+    </RangeCalendarRootPrimitive>
+  ),
+);
+
+RangeCalendarRoot.displayName = 'RangeCalendar';
+
+const RangeCalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { monthId, onMonthIdChange, disabled, view, setView, locale, labels } =
+    useRangeCalendarContext();
+  return (
+    <CalendarMonthHeader
+      ref={ref}
+      monthId={monthId}
+      onMonthIdChange={onMonthIdChange}
+      disabled={disabled}
+      view={view}
+      onViewChange={setView}
+      locale={locale}
+      labels={labels}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+RangeCalendarHeader.displayName = 'RangeCalendar.Header';
+
+const RangeCalendarYearPicker = forwardRef<View, ViewProps>(
+  ({ className, style, ...props }, ref) => {
+    const { monthId, onMonthIdChange, disabled, setView, labels } = useRangeCalendarContext();
+    return (
+      <CalendarYearPickerGrid
+        ref={ref}
+        monthId={monthId}
+        onMonthIdChange={onMonthIdChange}
+        disabled={disabled}
+        onViewChange={setView}
+        labels={labels}
+        className={className}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+RangeCalendarYearPicker.displayName = 'RangeCalendar.YearPicker';
+
+const RangeCalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
+  const { startId, endId, monthId, minValue, maxValue, disabled, onDayPress, locale } =
+    useRangeCalendarContext();
+  const instanceId = useId();
+  const theme = useFlashCalendarRangeTheme({ startId, endId });
+
+  const formatWeekday = useCallback(
+    (date: Date) => formatFlashCalendarWeekdayShort(date, locale),
+    [locale],
+  );
+
+  const activeRanges = useMemo(() => {
+    if (startId && endId) {
+      return [{ startId, endId }];
+    }
+    if (startId) {
+      return [{ startId, endId: startId }];
+    }
+    return [];
+  }, [endId, startId]);
+
+  const handleDayPress = useCallback(
+    (dateId: string) => {
+      if (!disabled) {
+        onDayPress(toCalendarDateId(dateId));
+      }
+    },
+    [disabled, onDayPress],
+  );
+
+  return (
+    <View 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={FLASH_CALENDAR_RANGE_DAY_SPACING}
+        getCalendarMonthFormat={() => ''}
+        getCalendarWeekDayFormat={formatWeekday}
+        onCalendarDayPress={handleDayPress}
+        theme={theme}
+      />
+    </View>
+  );
+});
+
+RangeCalendarGrid.displayName = 'RangeCalendar.Grid';
+
+type RangeCalendarCompound = typeof RangeCalendarRoot & {
+  Header: typeof RangeCalendarHeader;
+  Grid: typeof RangeCalendarGrid;
+  YearPicker: typeof RangeCalendarYearPicker;
+};
+
+export const RangeCalendar = Object.assign(RangeCalendarRoot, {
+  Header: RangeCalendarHeader,
+  Grid: RangeCalendarGrid,
+  YearPicker: RangeCalendarYearPicker,
+}) as RangeCalendarCompound;

package/src/components/index.ts

@@ -11,6 +11,16 @@ export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CurrencyInput';
+export * from './DateField';
+export * from './Calendar';
+export * from './RangeCalendar';
+export * from './MonthCalendar';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './MonthPicker';
+export * from './DateTimeField';
+export * from './DateTimeList';
+export * from './DateTimePicker';
 export * from './Dialog';
 export * from './Divider';
 export * from './Field';

package/src/components/picker/PickerTrigger.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type ReactNode, type RefObject } from 'react';
+import { Pressable, type PressableProps, type View } from 'react-native';
+import { Slot } from '@cdx-ui/primitives';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+
+export interface PickerTriggerProps extends PressableProps {
+  /**
+   * Merge press / a11y props onto the single child instead of rendering a `Pressable`.
+   * Use when the trigger should be another interactive host (e.g. `IconButton`).
+   * For a larger field hit target, prefer wrapping `DateField.Group` as children
+   * without `asChild` so the outer `Pressable` covers the whole input chrome.
+   */
+  asChild?: boolean;
+  children?: ReactNode;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled?: boolean;
+  triggerRef: RefObject<View | null>;
+  accessibilityLabel: string;
+}
+
+/**
+ * Shared open/close press host for date / month / date-time picker compounds.
+ * Compose two ways:
+ * - **Icon-only** (editable segmented fields): wrap `TriggerIndicator` inside `DateField.Suffix`
+ * - **Full-field** (range or overlay-primary selection): wrap the entire `DateField.Group`
+ */
+export const PickerTrigger = forwardRef<View, PickerTriggerProps>(
+  (
+    {
+      asChild = false,
+      children,
+      className,
+      style,
+      onPress,
+      open,
+      setOpen,
+      disabled,
+      triggerRef,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergeRefs(ref, triggerRef)}
+        className={className}
+        style={style}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: !!disabled, expanded: open }}
+        disabled={disabled}
+        onPress={composeEventHandlers(onPress, () => setOpen(!open))}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PickerTrigger.displayName = 'PickerTrigger';

package/src/components/picker/styles.ts

@@ -0,0 +1,17 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+
+/** Keeps the picker popover above app chrome and other absolutely-positioned surfaces. */
+export const PICKER_POPOVER_Z_INDEX = 9999;
+
+export const pickerPopoverContentVariants = cva([
+  'bg-surface-primary',
+  'border border-stroke-secondary',
+  'overflow-hidden',
+  'rounded-[var(--border-radius-default)]',
+  Platform.select({
+    web: 'shadow-sm',
+    default: '',
+  }),
+  'p-3',
+]);