@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.160

package/src/components/Menu/styles.ts

@@ -0,0 +1,153 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const menuRootVariants = cva(
+  [
+    'bg-surface-primary',
+    'border border-stroke-secondary',
+    'overflow-hidden',
+    'rounded-xl',
+    'p-1',
+    'shadow-lg',
+    'web:outline-none',
+  ],
+  {
+    variants: {
+      scrollable: {
+        true: 'max-h-60 shrink',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      scrollable: false,
+    },
+  },
+);
+
+export const menuItemVariants = cva(
+  [
+    'flex-row items-center gap-2',
+    'min-h-9',
+    'rounded-lg',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
+    DISABLED_CURSOR,
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
+    Platform.select({
+      default: 'data-[active=true]:bg-surface-action-tint-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
+    }),
+  ],
+  {
+    variants: {
+      color: {
+        neutral: 'text-content-primary',
+        danger:
+          'text-content-danger data-[hover=true]:bg-surface-danger-tint-hover data-[highlighted=true]:bg-surface-danger-tint-hover',
+      },
+      inset: {
+        true: '',
+        false: '',
+      },
+      size: {
+        default: 'px-3 py-2',
+        small: 'px-2.5 py-1.5',
+      },
+    },
+    compoundVariants: [
+      {
+        inset: true,
+        size: 'default',
+        class: 'ps-8 pe-3 py-2',
+      },
+      {
+        inset: true,
+        size: 'small',
+        class: 'ps-8 pe-2.5 py-1.5',
+      },
+      {
+        inset: false,
+        size: 'default',
+        class: 'px-3 py-2',
+      },
+      {
+        inset: false,
+        size: 'small',
+        class: 'px-2.5 py-1.5',
+      },
+    ],
+    defaultVariants: {
+      color: 'neutral',
+      inset: false,
+      size: 'default',
+    },
+  },
+);
+
+export const menuItemLabelVariants = cva(
+  [
+    'text-start',
+    Platform.select({
+      default: 'shrink-0',
+      web: 'min-w-0 flex-1',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+      color: {
+        neutral: 'text-content-primary',
+        danger: 'text-content-danger',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      color: 'neutral',
+    },
+  },
+);
+
+export const menuItemIconVariants = cva(['shrink-0', 'size-5'], {
+  variants: {
+    color: {
+      neutral: 'text-content-secondary',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'neutral',
+  },
+});
+
+export const menuItemShortcutVariants = cva([
+  'shrink-0 text-content-tertiary',
+  'text-[0.75rem]',
+  'ms-auto',
+]);
+
+export const menuItemIndicatorVariants = cva([
+  'shrink-0 data-[icon=inline-end]:ms-auto',
+  'text-content-action',
+  'size-5',
+]);
+
+export const menuSectionLabelVariants = cva([
+  'px-3 py-1.5',
+  'text-[0.75rem] font-medium',
+  'text-content-tertiary',
+]);
+
+export const menuSeparatorVariants = cva([
+  // Bleed past menu `p-1` inset so the line spans the full panel width (Figma: px-[-4px]).
+  // Omit `w-full`: percentage width ignores the negative margins and leaves a right-side gap.
+  'self-stretch py-1 -mx-1',
+]);
+
+export const menuSeparatorLineVariants = cva(['h-px w-full bg-stroke-secondary']);
+
+export type MenuRootVariantProps = VariantProps<typeof menuRootVariants>;
+export type MenuItemVariantProps = VariantProps<typeof menuItemVariants>;

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;