@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

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

@@ -0,0 +1,279 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { ListItemRoot as ListItemRootPrimitive, Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { listItemContentVariants, listItemDescriptionVariants, listItemLeadingSlotVariants, listItemMetaVariants, listItemRootVariants, listItemSectionHeaderLabelVariants, listItemSectionHeaderVariants, listItemTitleVariants, listItemTrailingSlotVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SCOPE = 'LIST_ITEM';
+const useListItemStyleContext = () => {
+  const ctx = useStyleContext(SCOPE);
+  return {
+    crossAlign: ctx?.crossAlign ?? 'center'
+  };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+const ListItemRoot = /*#__PURE__*/forwardRef(({
+  size = 'default',
+  showSeparator = true,
+  crossAlign: crossAlignProp = 'center',
+  className,
+  style,
+  ...props
+}, ref) => {
+  const crossAlign = crossAlignProp ?? 'center';
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      crossAlign
+    }
+  }), [parent, crossAlign]);
+  const computedClassName = cn(listItemRootVariants({
+    size,
+    showSeparator,
+    crossAlign
+  }), className);
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(ListItemRootPrimitive, {
+      ref: ref,
+      className: computedClassName,
+      crossAlign: crossAlign,
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'list-item'
+      }))
+    })
+  });
+});
+ListItemRoot.displayName = 'ListItem';
+
+// =============================================================================
+// SLOTS & TEXT
+// =============================================================================
+
+const leadingSlotStyle = {
+  flexShrink: 0
+};
+const ListItemLeadingSlot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  'aria-hidden': ariaHidden,
+  ...props
+}, ref) => {
+  const accessibilityElementsHidden = ariaHidden !== false;
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    "aria-hidden": ariaHidden ?? true,
+    className: cn(listItemLeadingSlotVariants(), className),
+    style: [leadingSlotStyle, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-leading'
+    }))
+  });
+});
+ListItemLeadingSlot.displayName = 'ListItem.LeadingSlot';
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column',
+  minWidth: 0
+};
+const ListItemContent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    crossAlign
+  } = useListItemStyleContext();
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(listItemContentVariants({
+      crossAlign
+    }), className),
+    style: [contentStyle, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-content'
+    }))
+  });
+});
+ListItemContent.displayName = 'ListItem.Content';
+const ListItemTitle = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(listItemTitleVariants(), className),
+    numberOfLines: numberOfLines,
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-title'
+    }))
+  });
+});
+ListItemTitle.displayName = 'ListItem.Title';
+const ListItemDescription = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(listItemDescriptionVariants(), className),
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-description'
+    }))
+  });
+});
+ListItemDescription.displayName = 'ListItem.Description';
+const ListItemMeta = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(listItemMetaVariants(), className),
+    numberOfLines: numberOfLines,
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-meta'
+    }))
+  });
+});
+ListItemMeta.displayName = 'ListItem.Meta';
+const ListItemTrailingSlot = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    crossAlign
+  } = useListItemStyleContext();
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: cn(listItemTrailingSlotVariants({
+      crossAlign
+    }), className),
+    style: [{
+      flexShrink: 0
+    }, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-item-trailing'
+    }))
+  });
+});
+ListItemTrailingSlot.displayName = 'ListItem.TrailingSlot';
+const wrapSectionHeaderLabel = children => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      className: cn(listItemSectionHeaderLabelVariants()),
+      children: children
+    });
+  }
+  return children;
+};
+
+// =============================================================================
+// SECTION HEADER
+// =============================================================================
+
+// TODO: ListItem.SectionHeader doesn't follow composition patterns (composing text, trailing prop, etc).
+
+const sectionHeaderRow = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 8
+};
+const sectionHeaderLabelCell = {
+  flex: 1,
+  minWidth: 0,
+  /** Keeps the label column from stretching to a taller trailing sibling (e.g. Chip). */
+  alignSelf: 'center'
+};
+const sectionHeaderTrailingCell = {
+  flexShrink: 0,
+  /** Prevents the trailing slot from stretching vertically and “filling” the row. */
+  alignSelf: 'center'
+};
+const ListItemSectionHeader = /*#__PURE__*/forwardRef(({
+  asChild,
+  children,
+  className,
+  showDivider = true,
+  style,
+  trailing,
+  accessibilityRole = 'header',
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsxs(Comp, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    className: cn(listItemSectionHeaderVariants({
+      showDivider
+    }), className),
+    style: [sectionHeaderRow, style],
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'list-section-header',
+      divider: showDivider
+    })),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: sectionHeaderLabelCell,
+      children: wrapSectionHeaderLabel(children)
+    }), trailing ? /*#__PURE__*/_jsx(View, {
+      style: sectionHeaderTrailingCell,
+      children: trailing
+    }) : null]
+  });
+});
+ListItemSectionHeader.displayName = 'ListItem.SectionHeader';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+export const ListItem = Object.assign(ListItemRoot, {
+  LeadingSlot: ListItemLeadingSlot,
+  Content: ListItemContent,
+  Title: ListItemTitle,
+  Description: ListItemDescription,
+  Meta: ListItemMeta,
+  TrailingSlot: ListItemTrailingSlot,
+  SectionHeader: ListItemSectionHeader
+});
+export { listItemContentVariants, listItemDescriptionVariants, listItemLeadingSlotVariants, listItemMetaVariants, listItemRootVariants, listItemSectionHeaderLabelVariants, listItemSectionHeaderVariants, listItemTitleVariants, listItemTrailingSlotVariants } from './styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","Text","View","ListItemRoot","ListItemRootPrimitive","Slot","dataAttributes","mergeDataAttributes","cn","ParentContext","useParentContext","useStyleContext","listItemContentVariants","listItemDescriptionVariants","listItemLeadingSlotVariants","listItemMetaVariants","listItemRootVariants","listItemSectionHeaderLabelVariants","listItemSectionHeaderVariants","listItemTitleVariants","listItemTrailingSlotVariants","jsx","_jsx","jsxs","_jsxs","SCOPE","useListItemStyleContext","ctx","crossAlign","size","showSeparator","crossAlignProp","className","style","props","ref","parent","computedClassName","Provider","value","children","slot","displayName","leadingSlotStyle","flexShrink","ListItemLeadingSlot","asChild","ariaHidden","accessibilityElementsHidden","Comp","contentStyle","flex","flexDirection","minWidth","ListItemContent","ListItemTitle","numberOfLines","ListItemDescription","ListItemMeta","ListItemTrailingSlot","wrapSectionHeaderLabel","sectionHeaderRow","alignItems","justifyContent","gap","sectionHeaderLabelCell","alignSelf","sectionHeaderTrailingCell","ListItemSectionHeader","showDivider","trailing","accessibilityRole","divider","ListItem","Object","assign","LeadingSlot","Content","Title","Description","Meta","TrailingSlot","SectionHeader"],"sourceRoot":"../../../../src","sources":["components/ListItem/index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,99 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+// ── Root (row): density, separator, interactive feedback ───────────────────
+//
+// Web hover/active/focus paint an absolutely positioned bg-content-primary overlay at
+// --opacity-hover (8%) / --opacity-hover-overlay (20%) / --opacity-selected (12%), plus a focus
+// ring on focus-visible. State is driven by the data attributes the primitive root emits
+// (data-hover / data-active / data-focus-visible) — or by the composed child on `asChild`
+// (e.g. Link emits the same attributes). Native active uses a flat tint because ::before
+// pseudo-elements are web-only.
+//
+// TODO: Handle native background color hover/focus transitions
+
+export const listItemRootVariants = cva(['relative flex-row self-stretch w-full overflow-clip px-5 bg-transparent', 'data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:pointer-events-none', TRANSITION_COLORS, Platform.select({
+  web: ['outline-none', 'before:pointer-events-none before:absolute before:inset-0 before:bg-content-primary before:opacity-0 before:content-[""]', 'before:transition-opacity before:duration-150 before:ease-out', 'data-[hover=true]:before:opacity-[var(--opacity-hover)]',
+  // Pressed wins over hover via the compound selector (higher specificity), mirroring Button.
+  'data-[active=true]:data-[hover=true]:before:opacity-[var(--opacity-hover-overlay)]', 'data-[focus-visible=true]:before:opacity-[var(--opacity-selected)]', 'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2'].join(' '),
+  default: 'data-[active=true]:bg-surface-primary-hover'
+})], {
+  variants: {
+    size: {
+      default: 'gap-3 py-3 min-h-16',
+      compact: 'gap-3 py-2 min-h-12'
+    },
+    showSeparator: {
+      true: ['border-b border-solid border-stroke-secondary', Platform.select({
+        web: 'before:-bottom-px',
+        default: ''
+      })].join(' '),
+      false: 'border-b-0'
+    },
+    crossAlign: {
+      center: 'items-center',
+      start: 'items-start'
+    }
+  },
+  defaultVariants: {
+    size: 'default',
+    showSeparator: true,
+    crossAlign: 'center'
+  }
+});
+
+// ── Leading / trailing slots ─────────────────────────────────────────────────
+
+export const listItemLeadingSlotVariants = cva(['relative z-10 flex shrink-0 items-center justify-center']);
+export const listItemTrailingSlotVariants = cva(['relative z-10 flex shrink-0 flex-row justify-end gap-2'], {
+  variants: {
+    crossAlign: {
+      center: 'items-center',
+      start: 'items-start self-start'
+    }
+  },
+  defaultVariants: {
+    crossAlign: 'center'
+  }
+});
+
+// ── Content stack (title / description / meta) ───────────────────────────────
+
+export const listItemContentVariants = cva('relative z-10 flex min-w-0 flex-1 flex-col gap-1', {
+  variants: {
+    crossAlign: {
+      center: 'justify-center',
+      start: 'justify-start'
+    }
+  },
+  defaultVariants: {
+    crossAlign: 'center'
+  }
+});
+
+// ── Typography ───────────────────────────────────────────────────────────────
+
+export const listItemTitleVariants = cva('body-md font-medium text-content-primary');
+export const listItemDescriptionVariants = cva('body-sm text-content-secondary');
+export const listItemMetaVariants = cva('body-sm text-content-tertiary');
+
+// ── Section header (group label row inside lists / cards) ───────────────────
+
+export const listItemSectionHeaderVariants = cva(['flex-row items-center justify-between gap-2 border-b border-solid px-4 py-3', 'border-stroke-secondary'], {
+  variants: {
+    showDivider: {
+      true: ['border-t-4 border-solid border-t-surface-brand-strong/40', 'border-x-0'],
+      false: 'border-t-0'
+    }
+  },
+  defaultVariants: {
+    showDivider: true
+  }
+});
+
+/** Default section-title typography; applied by `ListItem.SectionHeader` for string/number children. Exported for rare custom composition. */
+export const listItemSectionHeaderLabelVariants = cva('text-xs font-semibold uppercase tracking-wide text-content-secondary');
+//# sourceMappingURL=styles.js.map

package/lib/module/components/ListItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","cva","TRANSITION_COLORS","listItemRootVariants","select","web","join","default","variants","size","compact","showSeparator","true","false","crossAlign","center","start","defaultVariants","listItemLeadingSlotVariants","listItemTrailingSlotVariants","listItemContentVariants","listItemTitleVariants","listItemDescriptionVariants","listItemMetaVariants","listItemSectionHeaderVariants","showDivider","listItemSectionHeaderLabelVariants"],"sourceRoot":"../../../../src","sources":["components/ListItem/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,0BAA0B;AACjE,SAASC,iBAAiB,QAAQ,yBAAyB;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMC,oBAAoB,GAAGF,GAAG,CACrC,CACE,yEAAyE,EACzE,iGAAiG,EACjGC,iBAAiB,EACjBF,QAAQ,CAACI,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,cAAc,EACd,0HAA0H,EAC1H,+DAA+D,EAC/D,yDAAyD;EACzD;EACA,oFAAoF,EACpF,oEAAoE,EACpE,sHAAsH,CACvH,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;AACX,CAAC,CAAC,CACH,EACD;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJF,OAAO,EAAE,qBAAqB;MAC9BG,OAAO,EAAE;IACX,CAAC;IACDC,aAAa,EAAE;MACbC,IAAI,EAAE,CACJ,+CAA+C,EAC/CZ,QAAQ,CAACI,MAAM,CAAC;QAAEC,GAAG,EAAE,mBAAmB;QAAEE,OAAO,EAAE;MAAG,CAAC,CAAC,CAC3D,CAACD,IAAI,CAAC,GAAG,CAAC;MACXO,KAAK,EAAE;IACT,CAAC;IACDC,UAAU,EAAE;MACVC,MAAM,EAAE,cAAc;MACtBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfR,IAAI,EAAE,SAAS;IACfE,aAAa,EAAE,IAAI;IACnBG,UAAU,EAAE;EACd;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMI,2BAA2B,GAAGjB,GAAG,CAAC,CAC7C,yDAAyD,CAC1D,CAAC;AAEF,OAAO,MAAMkB,4BAA4B,GAAGlB,GAAG,CAC7C,CAAC,wDAAwD,CAAC,EAC1D;EACEO,QAAQ,EAAE;IACRM,UAAU,EAAE;MACVC,MAAM,EAAE,cAAc;MACtBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,UAAU,EAAE;EACd;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMM,uBAAuB,GAAGnB,GAAG,CAAC,kDAAkD,EAAE;EAC7FO,QAAQ,EAAE;IACRM,UAAU,EAAE;MACVC,MAAM,EAAE,gBAAgB;MACxBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,UAAU,EAAE;EACd;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMO,qBAAqB,GAAGpB,GAAG,CAAC,0CAA0C,CAAC;AAEpF,OAAO,MAAMqB,2BAA2B,GAAGrB,GAAG,CAAC,gCAAgC,CAAC;AAEhF,OAAO,MAAMsB,oBAAoB,GAAGtB,GAAG,CAAC,+BAA+B,CAAC;;AAExE;;AAEA,OAAO,MAAMuB,6BAA6B,GAAGvB,GAAG,CAC9C,CACE,6EAA6E,EAC7E,yBAAyB,CAC1B,EACD;EACEO,QAAQ,EAAE;IACRiB,WAAW,EAAE;MACXb,IAAI,EAAE,CAAC,0DAA0D,EAAE,YAAY,CAAC;MAChFC,KAAK,EAAE;IACT;EACF,CAAC;EACDI,eAAe,EAAE;IACfQ,WAAW,EAAE;EACf;AACF,CACF,CAAC;;AAED;AACA,OAAO,MAAMC,kCAAkC,GAAGzB,GAAG,CACnD,sEACF,CAAC","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', {
+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: {

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

@@ -1 +1 @@
-{"version":3,"names":["cva","otpRootVariants","variants","size","default","small","fullWidth","true","false","defaultVariants","otpCellVariants","otpFieldVariants"],"sourceRoot":"../../../../src","sources":["components/OtpInput/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AAEjE,OAAO,MAAMC,eAAe,GAAGD,GAAG,CAAC,gCAAgC,EAAE;EACnEE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,EAAE;MACXC,KAAK,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACTC,IAAI,EAAE,oCAAoC;MAC1CC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE,SAAS;IACfG,SAAS,EAAE;EACb;AACF,CAAC,CAAC;;AAEF;AACA,OAAO,MAAMI,eAAe,GAAGV,GAAG,CAAC,yBAAyB,EAAE;EAC5DE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,6BAA6B;MACtCC,KAAK,EAAE;IACT;EACF,CAAC;EACDI,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,OAAO,MAAMQ,gBAAgB,GAAGX,GAAG,CAAC,yCAAyC,EAAE;EAC7EE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,mBAAmB;MAC5BC,KAAK,EAAE;IACT;EACF,CAAC;EACDI,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["cva","otpRootVariants","variants","size","default","small","fullWidth","true","false","defaultVariants","otpCellVariants","otpFieldVariants"],"sourceRoot":"../../../../src","sources":["components/OtpInput/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AAEjE,OAAO,MAAMC,eAAe,GAAGD,GAAG,CAAC,8BAA8B,EAAE;EACjEE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,EAAE;MACXC,KAAK,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACTC,IAAI,EAAE,oCAAoC;MAC1CC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE,SAAS;IACfG,SAAS,EAAE;EACb;AACF,CAAC,CAAC;;AAEF;AACA,OAAO,MAAMI,eAAe,GAAGV,GAAG,CAChC,CACE,+BAA+B;AAC/B;AACA,wDAAwD,CACzD,EACD;EACEE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,CAAC,kCAAkC,EAAE,eAAe,CAAC;MAC9DC,KAAK,EAAE,CAAC,mCAAmC,EAAE,eAAe;IAC9D;EACF,CAAC;EACDI,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAED,OAAO,MAAMQ,gBAAgB,GAAGX,GAAG,CAAC,qDAAqD,EAAE;EACzFE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,OAAO,EAAE,mBAAmB;MAC5BC,KAAK,EAAE;IACT;EACF,CAAC;EACDI,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}