@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.151

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/OtpInput/index.tsx

@@ -1,11 +1,20 @@
-import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
-import { forwardRef } from 'react';
-import type { View } from 'react-native';
-import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { HStack } from '../Stack/HStack';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { View, type TextInput, type ViewProps } from 'react-native';
+import {
+  OtpCellIndexProvider,
+  OtpInputField,
+  OtpInputProvider,
+  dataAttributes,
+  mergeDataAttributes,
+  useInputContext,
+  useOtpInput,
+  type IOtpInputRootProps,
+  type OtpInputFieldProps,
+} from '@cdx-ui/primitives';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Input, type InputProps } from '../Input';
-import type { InputVariantProps } from '../Input/styles';
+import { type InputVariantProps, inputFieldVariants } from '../Input/styles';
 import {
   otpCellVariants,
   otpFieldVariants,
@@ -15,13 +24,24 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as Partial<InputVariantProps>;
 
-const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+export interface OtpInputCellProps extends ViewProps, InputVariantProps {
+  className?: string;
+  children?: React.ReactNode;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+const OtpStyledCell = forwardRef<View, OtpInputCellProps>(
+  (
+    { className, children, variant: variantProp, size: sizeProp, ...props },
+    ref: ForwardedRef<View>,
+  ) => {
+    const context = useOtpInputStyleContext();
+    const variant = variantProp ?? context.variant ?? 'outline';
+    const size = sizeProp ?? context.size ?? 'default';
     return (
       <Input
         ref={ref}
@@ -38,42 +58,137 @@ const OtpStyledCell = forwardRef<View, InputProps>(
 
 OtpStyledCell.displayName = 'OtpInput.Cell';
 
-const OtpStyledField = forwardRef<
-  ComponentRef<typeof Input.Field>,
-  ComponentProps<typeof Input.Field>
->(({ className, ...props }, ref) => {
-  const { size } = useOtpInputStyleContext();
-  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
+export type OtpInputFieldStyledProps = OtpInputFieldProps & { className?: string };
+
+/**
+ * Bridges OtpInputField focus/blur events to the parent Input's context so
+ * InputRoot emits `data-focus=true` and the `border-stroke-action` CSS activates.
+ * The primitive OtpInputField doesn't know about InputContext — that coupling
+ * belongs here in the styled layer.
+ */
+const OtpStyledField = forwardRef<TextInput, OtpInputFieldStyledProps>((props, ref) => {
+  const { setIsFocused } = useInputContext();
+  return (
+    <OtpInputField
+      ref={ref}
+      {...props}
+      onFocus={(e) => {
+        setIsFocused?.(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused?.(false);
+        props.onBlur?.(e);
+      }}
+    />
+  );
 });
 
 OtpStyledField.displayName = 'OtpInput.Field';
 
-const OtpPrimitive = createOtpInput({
-  Root: OtpRoot,
-  Cell: OtpStyledCell,
-  Field: OtpStyledField,
-});
-
 export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
   variant?: NonNullable<InputProps['variant']>;
   size?: NonNullable<InputProps['size']>;
   className?: string;
 }
 
-export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+const OtpInputRoot = forwardRef<View, OtpInputProps>(
+  (
+    {
+      variant = 'outline',
+      size,
+      fullWidth,
+      className,
+      style,
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const otpContext = useOtpInput({
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+    });
+
     const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
+    const fieldClassName = cn(inputFieldVariants({ size }), otpFieldVariants({ size }));
+
+    const {
+      isDisabled: resolvedDisabled,
+      isInvalid: resolvedInvalid,
+      isReadOnly: resolvedReadOnly,
+    } = otpContext;
+
+    const cells: React.ReactElement[] = [];
+    for (let i = 0; i < cellCount; i++) {
+      cells.push(
+        <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+          <OtpStyledCell
+            isDisabled={resolvedDisabled}
+            isInvalid={resolvedInvalid}
+            isReadOnly={resolvedReadOnly}
+          >
+            <OtpStyledField className={fieldClassName} />
+          </OtpStyledCell>
+        </OtpCellIndexProvider>,
+      );
+    }
+
     return (
-      <OtpPrimitive
-        ref={ref}
-        className={rootClassName}
-        style={style}
-        context={{ variant, size }}
-        {...rest}
-      />
+      <ParentContext.Provider value={ctx}>
+        <OtpInputProvider value={otpContext}>
+          <View
+            ref={ref}
+            className={rootClassName}
+            style={style}
+            {...rest}
+            {...mergeDataAttributes(rest, dataAttributes({ slot: 'otp-input' }))}
+          >
+            {cells}
+          </View>
+        </OtpInputProvider>
+      </ParentContext.Provider>
     );
   },
 );
 
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+
+type OtpInputCompoundComponent = typeof OtpInputRoot & {
+  Cell: typeof OtpStyledCell;
+  Field: typeof OtpStyledField;
+};
+
+export const OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+}) as OtpInputCompoundComponent;