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

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

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = void 0;
+Object.defineProperty(exports, "listItemContentVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemContentVariants;
+  }
+});
+Object.defineProperty(exports, "listItemDescriptionVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemDescriptionVariants;
+  }
+});
+Object.defineProperty(exports, "listItemLeadingSlotVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemLeadingSlotVariants;
+  }
+});
+Object.defineProperty(exports, "listItemMetaVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemMetaVariants;
+  }
+});
+Object.defineProperty(exports, "listItemRootVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemRootVariants;
+  }
+});
+Object.defineProperty(exports, "listItemSectionHeaderLabelVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemSectionHeaderLabelVariants;
+  }
+});
+Object.defineProperty(exports, "listItemSectionHeaderVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemSectionHeaderVariants;
+  }
+});
+Object.defineProperty(exports, "listItemTitleVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemTitleVariants;
+  }
+});
+Object.defineProperty(exports, "listItemTrailingSlotVariants", {
+  enumerable: true,
+  get: function () {
+    return _styles.listItemTrailingSlotVariants;
+  }
+});
+var _react = require("react");
+var _reactNative = require("react-native");
+var _primitives = require("@cdx-ui/primitives");
+var _utils = require("@cdx-ui/utils");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const SCOPE = 'LIST_ITEM';
+const useListItemStyleContext = () => {
+  const ctx = (0, _utils.useStyleContext)(SCOPE);
+  return {
+    crossAlign: ctx?.crossAlign ?? 'center'
+  };
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+const ListItemRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  size = 'default',
+  showSeparator = true,
+  crossAlign: crossAlignProp = 'center',
+  className,
+  style,
+  ...props
+}, ref) => {
+  const crossAlign = crossAlignProp ?? 'center';
+  const parent = (0, _utils.useParentContext)();
+  const ctx = (0, _react.useMemo)(() => ({
+    ...parent,
+    [SCOPE]: {
+      crossAlign
+    }
+  }), [parent, crossAlign]);
+  const computedClassName = (0, _utils.cn)((0, _styles.listItemRootVariants)({
+    size,
+    showSeparator,
+    crossAlign
+  }), className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ListItemRoot, {
+      ref: ref,
+      className: computedClassName,
+      crossAlign: crossAlign,
+      style: style,
+      ...props,
+      ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+        slot: 'list-item'
+      }))
+    })
+  });
+});
+ListItemRoot.displayName = 'ListItem';
+
+// =============================================================================
+// SLOTS & TEXT
+// =============================================================================
+
+const leadingSlotStyle = {
+  flexShrink: 0
+};
+const ListItemLeadingSlot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  style,
+  'aria-hidden': ariaHidden,
+  ...props
+}, ref) => {
+  const accessibilityElementsHidden = ariaHidden !== false;
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    "aria-hidden": ariaHidden ?? true,
+    className: (0, _utils.cn)((0, _styles.listItemLeadingSlotVariants)(), className),
+    style: [leadingSlotStyle, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-leading'
+    }))
+  });
+});
+ListItemLeadingSlot.displayName = 'ListItem.LeadingSlot';
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column',
+  minWidth: 0
+};
+const ListItemContent = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    crossAlign
+  } = useListItemStyleContext();
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.listItemContentVariants)({
+      crossAlign
+    }), className),
+    style: [contentStyle, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-content'
+    }))
+  });
+});
+ListItemContent.displayName = 'ListItem.Content';
+const ListItemTitle = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.listItemTitleVariants)(), className),
+    numberOfLines: numberOfLines,
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-title'
+    }))
+  });
+});
+ListItemTitle.displayName = 'ListItem.Title';
+const ListItemDescription = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.listItemDescriptionVariants)(), className),
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-description'
+    }))
+  });
+});
+ListItemDescription.displayName = 'ListItem.Description';
+const ListItemMeta = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  numberOfLines = 1,
+  style,
+  ...props
+}, ref) => {
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.listItemMetaVariants)(), className),
+    numberOfLines: numberOfLines,
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-meta'
+    }))
+  });
+});
+ListItemMeta.displayName = 'ListItem.Meta';
+const ListItemTrailingSlot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const {
+    crossAlign
+  } = useListItemStyleContext();
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.listItemTrailingSlotVariants)({
+      crossAlign
+    }), className),
+    style: [{
+      flexShrink: 0
+    }, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-item-trailing'
+    }))
+  });
+});
+ListItemTrailingSlot.displayName = 'ListItem.TrailingSlot';
+const wrapSectionHeaderLabel = children => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      className: (0, _utils.cn)((0, _styles.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__*/(0, _react.forwardRef)(({
+  asChild,
+  children,
+  className,
+  showDivider = true,
+  style,
+  trailing,
+  accessibilityRole = 'header',
+  ...props
+}, ref) => {
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Comp, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    className: (0, _utils.cn)((0, _styles.listItemSectionHeaderVariants)({
+      showDivider
+    }), className),
+    style: [sectionHeaderRow, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'list-section-header',
+      divider: showDivider
+    })),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: sectionHeaderLabelCell,
+      children: wrapSectionHeaderLabel(children)
+    }), trailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: sectionHeaderTrailingCell,
+      children: trailing
+    }) : null]
+  });
+});
+ListItemSectionHeader.displayName = 'ListItem.SectionHeader';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+const ListItem = exports.ListItem = Object.assign(ListItemRoot, {
+  LeadingSlot: ListItemLeadingSlot,
+  Content: ListItemContent,
+  Title: ListItemTitle,
+  Description: ListItemDescription,
+  Meta: ListItemMeta,
+  TrailingSlot: ListItemTrailingSlot,
+  SectionHeader: ListItemSectionHeader
+});
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listItemTrailingSlotVariants = exports.listItemTitleVariants = exports.listItemSectionHeaderVariants = exports.listItemSectionHeaderLabelVariants = exports.listItemRootVariants = exports.listItemMetaVariants = exports.listItemLeadingSlotVariants = exports.listItemDescriptionVariants = exports.listItemContentVariants = void 0;
+var _reactNative = require("react-native");
+var _classVarianceAuthority = require("class-variance-authority");
+var _primitives = require("../../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
+
+const listItemRootVariants = exports.listItemRootVariants = (0, _classVarianceAuthority.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', _primitives.TRANSITION_COLORS, _reactNative.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', _reactNative.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 ─────────────────────────────────────────────────
+
+const listItemLeadingSlotVariants = exports.listItemLeadingSlotVariants = (0, _classVarianceAuthority.cva)(['relative z-10 flex shrink-0 items-center justify-center']);
+const listItemTrailingSlotVariants = exports.listItemTrailingSlotVariants = (0, _classVarianceAuthority.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) ───────────────────────────────
+
+const listItemContentVariants = exports.listItemContentVariants = (0, _classVarianceAuthority.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 ───────────────────────────────────────────────────────────────
+
+const listItemTitleVariants = exports.listItemTitleVariants = (0, _classVarianceAuthority.cva)('body-md font-medium text-content-primary');
+const listItemDescriptionVariants = exports.listItemDescriptionVariants = (0, _classVarianceAuthority.cva)('body-sm text-content-secondary');
+const listItemMetaVariants = exports.listItemMetaVariants = (0, _classVarianceAuthority.cva)('body-sm text-content-tertiary');
+
+// ── Section header (group label row inside lists / cards) ───────────────────
+
+const listItemSectionHeaderVariants = exports.listItemSectionHeaderVariants = (0, _classVarianceAuthority.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. */
+const listItemSectionHeaderLabelVariants = exports.listItemSectionHeaderLabelVariants = (0, _classVarianceAuthority.cva)('text-xs font-semibold uppercase tracking-wide text-content-secondary');
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_classVarianceAuthority","_primitives","listItemRootVariants","exports","cva","TRANSITION_COLORS","Platform","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":"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","ignoreList":[]}

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

@@ -5,29 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OtpInput = void 0;
 var _react = require("react");
+var _reactNative = require("react-native");
 var _primitives = require("@cdx-ui/primitives");
 var _utils = require("@cdx-ui/utils");
-var _HStack = require("../Stack/HStack");
 var _Input = require("../Input");
-var _styles = require("./styles");
+var _styles = require("../Input/styles");
+var _styles2 = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 const SCOPE = 'OTP_INPUT';
-const OtpRoot = (0, _utils.withStyleContext)(_HStack.HStack, SCOPE);
 const useOtpInputStyleContext = () => (0, _utils.useStyleContext)(SCOPE);
 const OtpStyledCell = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_Input.Input, {
     ref: ref,
     variant: variant,
     size: size,
-    className: (0, _utils.cn)((0, _styles.otpCellVariants)({
+    className: (0, _utils.cn)((0, _styles2.otpCellVariants)({
       size
     }), className),
     ...props,
@@ -35,49 +36,126 @@ const OtpStyledCell = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 OtpStyledCell.displayName = 'OtpInput.Cell';
-const OtpStyledField = /*#__PURE__*/(0, _react.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__*/(0, _react.forwardRef)((props, ref) => {
   const {
-    size
-  } = useOtpInputStyleContext();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input.Field, {
+    setIsFocused
+  } = (0, _primitives.useInputContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.OtpInputField, {
     ref: ref,
-    className: (0, _utils.cn)((0, _styles.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 = (0, _primitives.createOtpInput)({
-  Root: OtpRoot,
-  Cell: OtpStyledCell,
-  Field: OtpStyledField
-});
-const OtpInput = exports.OtpInput = /*#__PURE__*/(0, _react.forwardRef)(({
+const OtpInputRoot = /*#__PURE__*/(0, _react.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 rootClassName = (0, _utils.cn)((0, _styles.otpRootVariants)({
+  const otpContext = (0, _primitives.useOtpInput)({
+    cellCount,
+    value,
+    onChangeText,
+    onComplete,
+    isDisabled,
+    isInvalid,
+    isReadOnly,
+    smsOtpAutofill,
+    filterInput,
+    allowedCharacters,
+    characterPattern,
+    getCellProps,
+    cellTestIdPrefix,
+    accessibilityLabel
+  });
+  const rootClassName = (0, _utils.cn)((0, _styles2.otpRootVariants)({
     size,
     fullWidth
   }), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OtpPrimitive, {
-    ref: ref,
-    className: rootClassName,
-    style: style,
-    context: {
+  const parent = (0, _utils.useParentContext)();
+  const ctx = (0, _react.useMemo)(() => ({
+    ...parent,
+    [SCOPE]: {
       variant,
       size
-    },
-    ...rest
+    }
+  }), [parent, variant, size]);
+  const fieldClassName = (0, _utils.cn)((0, _styles.inputFieldVariants)({
+    size
+  }), (0, _styles2.otpFieldVariants)({
+    size
+  }));
+  const {
+    isDisabled: resolvedDisabled,
+    isInvalid: resolvedInvalid,
+    isReadOnly: resolvedReadOnly
+  } = otpContext;
+  const cells = [];
+  for (let i = 0; i < cellCount; i++) {
+    cells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.OtpCellIndexProvider, {
+      value: {
+        cellIndex: i
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OtpStyledCell, {
+        isDisabled: resolvedDisabled,
+        isInvalid: resolvedInvalid,
+        isReadOnly: resolvedReadOnly,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OtpStyledField, {
+          className: fieldClassName
+        })
+      })
+    }, i));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.OtpInputProvider, {
+      value: otpContext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        ref: ref,
+        className: rootClassName,
+        style: style,
+        ...rest,
+        ...(0, _primitives.mergeDataAttributes)(rest, (0, _primitives.dataAttributes)({
+          slot: 'otp-input'
+        })),
+        children: cells
+      })
+    })
   });
 });
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+const OtpInput = exports.OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField
+});
 //# sourceMappingURL=index.js.map