@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/lib/module/components/MonthCalendar/index.js

@@ -0,0 +1,225 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { dataAttributes, mergeDataAttributes, MonthCalendarCell as MonthCalendarCellPrimitive, MonthCalendarRoot as MonthCalendarRootPrimitive, MonthCalendarYearCell as MonthCalendarYearCellPrimitive, useMonthCalendarContext } 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';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function MonthCalendarDefaultBody() {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(MonthCalendarHeader, {}), /*#__PURE__*/_jsx(MonthCalendarGrid, {})]
+  });
+}
+const MonthCalendarRoot = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(MonthCalendarRootPrimitive, {
+  ref: ref,
+  className: cn(calendarRootVariants(), className),
+  style: style,
+  ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'month-calendar'
+  })),
+  children: children ?? /*#__PURE__*/_jsx(MonthCalendarDefaultBody, {})
+}));
+MonthCalendarRoot.displayName = 'MonthCalendar';
+const MonthCalendarHeader = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    view,
+    onViewChange,
+    visibleYear,
+    onVisibleYearChange,
+    disabled,
+    labels
+  } = useMonthCalendarContext();
+  const isYearView = view === 'year';
+  const shiftYear = useCallback(delta => {
+    if (disabled) {
+      return;
+    }
+    onVisibleYearChange(visibleYear + delta);
+  }, [disabled, onVisibleYearChange, visibleYear]);
+  const toggleYearView = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onViewChange(isYearView ? 'month' : 'year');
+  }, [disabled, isYearView, onViewChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(calendarMonthHeaderVariants(), className),
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: isYearView ? labels.showMonths : labels.showYearPicker,
+      disabled: disabled,
+      onPress: toggleYearView,
+      className: calendarMonthHeaderToggleVariants(),
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: calendarMonthHeaderLabelVariants({
+          isYearView
+        }),
+        numberOfLines: 1,
+        children: formatMonthCalendarYear(visibleYear)
+      }), /*#__PURE__*/_jsx(Icon, {
+        as: isYearView ? KeyboardArrowDown : ChevronRight,
+        className: calendarMonthHeaderIconVariants({
+          isYearView
+        })
+      })]
+    }), !isYearView ? /*#__PURE__*/_jsxs(View, {
+      className: calendarMonthHeaderNavVariants(),
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        as: ChevronLeft,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: labels.previousYear,
+        isDisabled: disabled,
+        onPress: () => shiftYear(-1)
+      }), /*#__PURE__*/_jsx(IconButton, {
+        as: ChevronRight,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: labels.nextYear,
+        isDisabled: disabled,
+        onPress: () => shiftYear(1)
+      })]
+    }) : null]
+  });
+});
+MonthCalendarHeader.displayName = 'MonthCalendar.Header';
+const MonthCalendarGrid = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    view,
+    visibleYear
+  } = useMonthCalendarContext();
+  const years = useMemo(() => Array.from({
+    length: 12
+  }, (_, i) => visibleYear - 5 + i), [visibleYear]);
+  if (view === 'year') {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: cn(calendarYearPickerGridVariants(), className),
+      style: style,
+      accessibilityRole: "none",
+      ...props,
+      children: years.map(year => /*#__PURE__*/_jsx(MonthCalendarYearCell, {
+        year: year
+      }, year))
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: cn(calendarYearPickerGridVariants(), className),
+    style: style,
+    accessibilityRole: "none",
+    ...props,
+    children: Array.from({
+      length: 12
+    }, (_, i) => i + 1).map(month => /*#__PURE__*/_jsx(MonthCalendarCell, {
+      month: month
+    }, month))
+  });
+});
+MonthCalendarGrid.displayName = 'MonthCalendar.Grid';
+const MonthCalendarCell = /*#__PURE__*/forwardRef(({
+  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 /*#__PURE__*/_jsx(MonthCalendarCellPrimitive, {
+    ref: ref,
+    month: month,
+    accessibilityLabel: formatMonthCalendarMonth(month, {
+      locale
+    }),
+    className: cn(calendarPillCellVariants({
+      selected,
+      disabled
+    }), className),
+    ...props,
+    children: children ?? /*#__PURE__*/_jsx(Text, {
+      className: calendarPillCellTextVariants({
+        selected
+      }),
+      children: formatMonthCalendarMonth(month, {
+        locale
+      })
+    })
+  });
+});
+MonthCalendarCell.displayName = 'MonthCalendar.Cell';
+const MonthCalendarYearCell = /*#__PURE__*/forwardRef(({
+  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 /*#__PURE__*/_jsx(MonthCalendarYearCellPrimitive, {
+    ref: ref,
+    year: year,
+    accessibilityLabel: formatSelectYear(labels, year),
+    className: cn(calendarPillCellVariants({
+      selected,
+      disabled
+    }), className),
+    ...props,
+    children: children ?? /*#__PURE__*/_jsx(Text, {
+      className: calendarPillCellTextVariants({
+        selected
+      }),
+      children: formatMonthCalendarYear(year)
+    })
+  });
+});
+MonthCalendarYearCell.displayName = 'MonthCalendar.YearCell';
+export const MonthCalendar = Object.assign(MonthCalendarRoot, {
+  Header: MonthCalendarHeader,
+  Grid: MonthCalendarGrid,
+  Cell: MonthCalendarCell,
+  YearCell: MonthCalendarYearCell
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/MonthCalendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","Pressable","Text","View","dataAttributes","mergeDataAttributes","MonthCalendarCell","MonthCalendarCellPrimitive","MonthCalendarRoot","MonthCalendarRootPrimitive","MonthCalendarYearCell","MonthCalendarYearCellPrimitive","useMonthCalendarContext","compareMonthIds","formatMonthCalendarMonth","formatMonthCalendarYear","formatMonthId","formatSelectYear","parseMonthId","cn","ChevronLeft","ChevronRight","KeyboardArrowDown","Icon","IconButton","calendarMonthHeaderIconVariants","calendarMonthHeaderLabelVariants","calendarMonthHeaderNavVariants","calendarMonthHeaderToggleVariants","calendarMonthHeaderVariants","calendarPillCellTextVariants","calendarPillCellVariants","calendarRootVariants","calendarYearPickerGridVariants","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","MonthCalendarDefaultBody","children","MonthCalendarHeader","MonthCalendarGrid","className","style","props","ref","slot","displayName","view","onViewChange","visibleYear","onVisibleYearChange","disabled","labels","isYearView","shiftYear","delta","toggleYearView","accessibilityRole","accessibilityLabel","showMonths","showYearPicker","onPress","numberOfLines","as","variant","color","size","previousYear","isDisabled","nextYear","years","Array","from","length","_","i","map","year","month","value","locale","minValue","maxValue","monthId","selected","minYear","undefined","maxYear","MonthCalendar","Object","assign","Header","Grid","Cell","YearCell"],"sourceRoot":"../../../../src","sources":["components/MonthCalendar/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MonthPicker/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { CalendarToday } from '@cdx-ui/icons';
+import { dataAttributes, mergeDataAttributes, MonthPickerContext, MonthPickerRoot as MonthPickerRootPrimitive, useMonthPickerContext } from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { MonthCalendar } from '../MonthCalendar';
+import { PickerTrigger } from '../picker/PickerTrigger';
+import { PickerBottomSheetSurface, PickerDialogSurface, PickerPopoverSurface } from '../picker/surfaces';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+const MonthPickerRoot = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [DATE_FIELD_SCOPE]: {
+      variant: 'outline',
+      size: 'default',
+      fullWidth: true
+    }
+  }), [parent]);
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(MonthPickerRootPrimitive, {
+      ref: ref,
+      className: cn('gap-2', className),
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'month-picker'
+      })),
+      children: children
+    })
+  });
+});
+MonthPickerRoot.displayName = 'MonthPicker';
+const MonthPickerTrigger = /*#__PURE__*/forwardRef(({
+  accessibilityLabel,
+  ...props
+}, ref) => {
+  const {
+    open,
+    setOpen,
+    disabled,
+    triggerRef,
+    labels
+  } = useMonthPickerContext();
+  return /*#__PURE__*/_jsx(PickerTrigger, {
+    ref: ref,
+    open: open,
+    setOpen: setOpen,
+    disabled: disabled,
+    triggerRef: triggerRef,
+    accessibilityLabel: accessibilityLabel ?? labels.openMonthPicker,
+    ...props
+  });
+});
+MonthPickerTrigger.displayName = 'MonthPicker.Trigger';
+const MonthPickerTriggerIndicator = () => /*#__PURE__*/_jsx(Icon, {
+  as: CalendarToday,
+  className: "text-content-secondary"
+});
+MonthPickerTriggerIndicator.displayName = 'MonthPicker.TriggerIndicator';
+const MonthPickerCalendar = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  const {
+    value,
+    onValueChange,
+    open,
+    setOpen,
+    minValue,
+    maxValue,
+    locale,
+    labels
+  } = useMonthPickerContext();
+  const handleValueChange = useCallback(next => {
+    onValueChange?.(next);
+    if (open) {
+      setOpen(false);
+    }
+  }, [onValueChange, open, setOpen]);
+  return /*#__PURE__*/_jsx(MonthCalendar, {
+    ref: ref,
+    value: value,
+    onValueChange: handleValueChange,
+    minValue: minValue,
+    maxValue: maxValue,
+    locale: locale,
+    labels: labels,
+    ...props
+  });
+});
+MonthPickerCalendar.displayName = 'MonthPicker.Calendar';
+function MonthPickerDialog({
+  children
+}) {
+  const ctx = useMonthPickerContext();
+  return /*#__PURE__*/_jsx(PickerDialogSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    children: /*#__PURE__*/_jsx(Dialog.Popup, {
+      className: "p-4",
+      children: /*#__PURE__*/_jsx(MonthPickerContext.Provider, {
+        value: ctx,
+        children: children
+      })
+    })
+  });
+}
+function MonthPickerBottomSheet({
+  children
+}) {
+  const ctx = useMonthPickerContext();
+  return /*#__PURE__*/_jsx(PickerBottomSheetSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    children: /*#__PURE__*/_jsx(MonthPickerContext.Provider, {
+      value: ctx,
+      children: children
+    })
+  });
+}
+function MonthPickerPopover({
+  children,
+  className
+}) {
+  const ctx = useMonthPickerContext();
+  return /*#__PURE__*/_jsx(PickerPopoverSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    anchorRef: ctx.anchorRef,
+    triggerRef: ctx.triggerRef,
+    className: className,
+    children: /*#__PURE__*/_jsx(MonthPickerContext.Provider, {
+      value: ctx,
+      children: children
+    })
+  });
+}
+export const MonthPicker = Object.assign(MonthPickerRoot, {
+  Trigger: MonthPickerTrigger,
+  TriggerIndicator: MonthPickerTriggerIndicator,
+  Calendar: MonthPickerCalendar,
+  Popover: MonthPickerPopover,
+  Dialog: MonthPickerDialog,
+  BottomSheet: MonthPickerBottomSheet
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/MonthPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","CalendarToday","dataAttributes","mergeDataAttributes","MonthPickerContext","MonthPickerRoot","MonthPickerRootPrimitive","useMonthPickerContext","cn","ParentContext","useParentContext","Dialog","Icon","MonthCalendar","PickerTrigger","PickerBottomSheetSurface","PickerDialogSurface","PickerPopoverSurface","jsx","_jsx","DATE_FIELD_SCOPE","className","children","style","props","ref","parent","ctx","variant","size","fullWidth","Provider","value","slot","displayName","MonthPickerTrigger","accessibilityLabel","open","setOpen","disabled","triggerRef","labels","openMonthPicker","MonthPickerTriggerIndicator","as","MonthPickerCalendar","onValueChange","minValue","maxValue","locale","handleValueChange","next","MonthPickerDialog","registerSurface","Popup","MonthPickerBottomSheet","MonthPickerPopover","anchorRef","MonthPicker","Object","assign","Trigger","TriggerIndicator","Calendar","Popover","BottomSheet"],"sourceRoot":"../../../../src","sources":["components/MonthPicker/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/OtpInput/index.js

@@ -1,24 +1,25 @@
 "use strict";
 
-import { forwardRef } from 'react';
-import { createOtpInput } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { HStack } from '../Stack/HStack';
+import { forwardRef, useMemo } from 'react';
+import { View } from 'react-native';
+import { OtpCellIndexProvider, OtpInputField, OtpInputProvider, dataAttributes, mergeDataAttributes, useInputContext, useOtpInput } from '@cdx-ui/primitives';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Input } from '../Input';
+import { inputFieldVariants } from '../Input/styles';
 import { otpCellVariants, otpFieldVariants, otpRootVariants } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SCOPE = 'OTP_INPUT';
-const OtpRoot = withStyleContext(HStack, SCOPE);
 const useOtpInputStyleContext = () => useStyleContext(SCOPE);
 const OtpStyledCell = /*#__PURE__*/forwardRef(({
   className,
   children,
+  variant: variantProp,
+  size: sizeProp,
   ...props
 }, ref) => {
-  const {
-    size,
-    variant
-  } = useOtpInputStyleContext();
+  const context = useOtpInputStyleContext();
+  const variant = variantProp ?? context.variant ?? 'outline';
+  const size = sizeProp ?? context.size ?? 'default';
   return /*#__PURE__*/_jsx(Input, {
     ref: ref,
     variant: variant,
@@ -31,49 +32,126 @@ const OtpStyledCell = /*#__PURE__*/forwardRef(({
   });
 });
 OtpStyledCell.displayName = 'OtpInput.Cell';
-const OtpStyledField = /*#__PURE__*/forwardRef(({
-  className,
-  ...props
-}, ref) => {
+/**
+ * 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 = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    size
-  } = useOtpInputStyleContext();
-  return /*#__PURE__*/_jsx(Input.Field, {
+    setIsFocused
+  } = useInputContext();
+  return /*#__PURE__*/_jsx(OtpInputField, {
     ref: ref,
-    className: cn(otpFieldVariants({
-      size
-    }), className),
-    ...props
+    ...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 const OtpInput = /*#__PURE__*/forwardRef(({
+const OtpInputRoot = /*#__PURE__*/forwardRef(({
   variant = 'outline',
-  size = 'default',
-  fullWidth = true,
+  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);
-  return /*#__PURE__*/_jsx(OtpPrimitive, {
-    ref: ref,
-    className: rootClassName,
-    style: style,
-    context: {
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
       variant,
       size
-    },
-    ...rest
+    }
+  }), [parent, variant, size]);
+  const fieldClassName = cn(inputFieldVariants({
+    size
+  }), otpFieldVariants({
+    size
+  }));
+  const {
+    isDisabled: resolvedDisabled,
+    isInvalid: resolvedInvalid,
+    isReadOnly: resolvedReadOnly
+  } = otpContext;
+  const cells = [];
+  for (let i = 0; i < cellCount; i++) {
+    cells.push(/*#__PURE__*/_jsx(OtpCellIndexProvider, {
+      value: {
+        cellIndex: i
+      },
+      children: /*#__PURE__*/_jsx(OtpStyledCell, {
+        isDisabled: resolvedDisabled,
+        isInvalid: resolvedInvalid,
+        isReadOnly: resolvedReadOnly,
+        children: /*#__PURE__*/_jsx(OtpStyledField, {
+          className: fieldClassName
+        })
+      })
+    }, i));
+  }
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(OtpInputProvider, {
+      value: otpContext,
+      children: /*#__PURE__*/_jsx(View, {
+        ref: ref,
+        className: rootClassName,
+        style: style,
+        ...rest,
+        ...mergeDataAttributes(rest, dataAttributes({
+          slot: 'otp-input'
+        })),
+        children: cells
+      })
+    })
   });
 });
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+export const OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField
+});
 //# sourceMappingURL=index.js.map

package/lib/module/components/OtpInput/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","createOtpInput","cn","useStyleContext","withStyleContext","HStack","Input","otpCellVariants","otpFieldVariants","otpRootVariants","jsx","_jsx","SCOPE","OtpRoot","useOtpInputStyleContext","OtpStyledCell","className","children","props","ref","size","variant","displayName","OtpStyledField","Field","OtpPrimitive","Root","Cell","OtpInput","fullWidth","style","rest","rootClassName","context"],"sourceRoot":"../../../../src","sources":["components/OtpInput/index.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc,QAAiC,oBAAoB;AAC5E,SAASC,EAAE,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,eAAe;AACrE,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,KAAK,QAAyB,UAAU;AAEjD,SACEC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,QAEV,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElB,MAAMC,KAAK,GAAG,WAAW;AAEzB,MAAMC,OAAO,GAAGT,gBAAgB,CAACC,MAAM,EAAEO,KAAK,CAAC;AAE/C,MAAME,uBAAuB,GAAGA,CAAA,KAAMX,eAAe,CAACS,KAAK,CAAsB;AAEjF,MAAMG,aAAa,gBAAGf,UAAU,CAC9B,CAAC;EAAEgB,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAuB,KAAK;EAC9D,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAGP,uBAAuB,CAAC,CAAC;EACnD,oBACEH,IAAA,CAACL,KAAK;IACJa,GAAG,EAAEA,GAAI;IACTE,OAAO,EAAEA,OAAQ;IACjBD,IAAI,EAAEA,IAAK;IACXJ,SAAS,EAAEd,EAAE,CAACK,eAAe,CAAC;MAAEa;IAAK,CAAC,CAAC,EAAEJ,SAAS,CAAE;IAAA,GAChDE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACJ,CAAC;AAEZ,CACF,CAAC;AAEDF,aAAa,CAACO,WAAW,GAAG,eAAe;AAE3C,MAAMC,cAAc,gBAAGvB,UAAU,CAG/B,CAAC;EAAEgB,SAAS;EAAE,GAAGE;AAAM,CAAC,EAAEC,GAAG,KAAK;EAClC,MAAM;IAAEC;EAAK,CAAC,GAAGN,uBAAuB,CAAC,CAAC;EAC1C,oBAAOH,IAAA,CAACL,KAAK,CAACkB,KAAK;IAACL,GAAG,EAAEA,GAAI;IAACH,SAAS,EAAEd,EAAE,CAACM,gBAAgB,CAAC;MAAEY;IAAK,CAAC,CAAC,EAAEJ,SAAS,CAAE;IAAA,GAAKE;EAAK,CAAG,CAAC;AACnG,CAAC,CAAC;AAEFK,cAAc,CAACD,WAAW,GAAG,gBAAgB;AAE7C,MAAMG,YAAY,GAAGxB,cAAc,CAAC;EAClCyB,IAAI,EAAEb,OAAO;EACbc,IAAI,EAAEZ,aAAa;EACnBS,KAAK,EAAED;AACT,CAAC,CAAC;AAQF,OAAO,MAAMK,QAAQ,gBAAG5B,UAAU,CAChC,CAAC;EAAEqB,OAAO,GAAG,SAAS;EAAED,IAAI,GAAG,SAAS;EAAES,SAAS,GAAG,IAAI;EAAEb,SAAS;EAAEc,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEZ,GAAG,KAAK;EAC/F,MAAMa,aAAa,GAAG9B,EAAE,CAACO,eAAe,CAAC;IAAEW,IAAI;IAAES;EAAU,CAAC,CAAC,EAAEb,SAAS,CAAC;EAEzE,oBACEL,IAAA,CAACc,YAAY;IACXN,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAEgB,aAAc;IACzBF,KAAK,EAAEA,KAAM;IACbG,OAAO,EAAE;MAAEZ,OAAO;MAAED;IAAK,CAAE;IAAA,GACvBW;EAAI,CACT,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACN,WAAW,GAAG,UAAU","ignoreList":[]}
+{"version":3,"names":["forwardRef","useMemo","View","OtpCellIndexProvider","OtpInputField","OtpInputProvider","dataAttributes","mergeDataAttributes","useInputContext","useOtpInput","ParentContext","cn","useParentContext","useStyleContext","Input","inputFieldVariants","otpCellVariants","otpFieldVariants","otpRootVariants","jsx","_jsx","SCOPE","useOtpInputStyleContext","OtpStyledCell","className","children","variant","variantProp","size","sizeProp","props","ref","context","displayName","OtpStyledField","setIsFocused","onFocus","e","onBlur","OtpInputRoot","fullWidth","style","cellCount","value","onChangeText","onComplete","isDisabled","isInvalid","isReadOnly","smsOtpAutofill","filterInput","allowedCharacters","characterPattern","getCellProps","cellTestIdPrefix","accessibilityLabel","rest","otpContext","rootClassName","parent","ctx","fieldClassName","resolvedDisabled","resolvedInvalid","resolvedReadOnly","cells","i","push","cellIndex","Provider","slot","OtpInput","Object","assign","Cell","Field"],"sourceRoot":"../../../../src","sources":["components/OtpInput/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/OtpInput/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import { cva } from 'class-variance-authority';
-export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
+import { cva } from '@cdx-ui/utils';
+export const otpRootVariants = cva('flex-row items-stretch gap-2', {
   variants: {
     size: {
       default: '',
@@ -14,27 +14,29 @@ export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
   },
   defaultVariants: {
     size: 'default',
-    fullWidth: true
+    fullWidth: false
   }
 });
 
 /** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
-export const otpCellVariants = cva('shrink-0 justify-center', {
+export const otpCellVariants = cva(['shrink-0 justify-center gap-0',
+// Figma read-only: surface-secondary + stroke-primary + opacity-disabled (text stays content-primary).
+'data-[readonly=true]:opacity-[var(--opacity-disabled)]'], {
   variants: {
     size: {
-      default: 'w-12 min-w-12 max-w-12 px-1',
-      small: 'w-10 min-w-10 max-w-10 px-0.5'
+      default: ['w-11 min-w-11 max-w-11 pl-2 pr-2', 'h-14 min-h-14'],
+      small: ['w-9 min-w-9 max-w-9 pl-1.5 pr-1.5', 'h-10 min-h-10']
     }
   },
   defaultVariants: {
     size: 'default'
   }
 });
-export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums', {
+export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums font-medium', {
   variants: {
     size: {
       default: 'text-xl leading-6',
-      small: 'text-base leading-5'
+      small: 'text-lg leading-[calc(var(--spacing-5)+var(--spacing-0-5))]'
     }
   },
   defaultVariants: {