@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/lib/module/input/InputField.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import { forwardRef, useMemo } from 'react';
+import { TextInput } from 'react-native';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useInputContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InputField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    asChild,
+    children,
+    onKeyPress,
+    type = 'text',
+    accessibilityLabel,
+    'aria-label': ariaLabelProp,
+    secureTextEntry,
+    editable,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    isDisabled,
+    isReadOnly,
+    isFocused,
+    isInvalid,
+    setIsFocused,
+    inputFieldRef,
+    isRequired
+  } = useInputContext();
+  const inputProps = useFormControl({
+    isDisabled: rest.isDisabled || disabled,
+    isInvalid: rest.isInvalid,
+    isReadOnly: rest.isReadOnly,
+    isRequired: rest.isRequired,
+    id: rest.id
+  });
+  const field = useFormControlContext();
+  const reportLabelFocus = focused => {
+    const active = focused && !(isDisabled || inputProps.disabled);
+    field.setIsLabelFocused?.(active);
+  };
+  const handleFocus = (focusState, callback) => {
+    setIsFocused?.(focusState);
+    reportLabelFocus(focusState);
+    callback();
+  };
+  const mergedRef = mergeRefs(ref, inputFieldRef, field.inputRef);
+  const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+  const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+  const editableProp = useMemo(() => {
+    if (editable !== undefined) {
+      return editable;
+    }
+    return !(isDisabled || inputProps.disabled || isReadOnly);
+  }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+  const Comp = asChild ? Slot : TextInput;
+  return /*#__PURE__*/_jsx(Comp, {
+    ...inputProps,
+    ...rest,
+    type: type,
+    disabled: isEffectivelyDisabled,
+    secureTextEntry: secureTextEntry || type === 'password',
+    accessible: true,
+    accessibilityLabel: ariaLabel,
+    "aria-label": ariaLabel,
+    "aria-required": isRequired || inputProps.required,
+    "aria-invalid": isInvalid || inputProps['aria-invalid'],
+    "aria-disabled": isEffectivelyDisabled,
+    "aria-selected": isFocused,
+    accessibilityElementsHidden: isEffectivelyDisabled,
+    readOnly: !editableProp,
+    onKeyPress: e => {
+      e.persist();
+      onKeyPress?.(e);
+    },
+    onFocus: e => {
+      handleFocus(true, () => rest.onFocus?.(e));
+    },
+    onBlur: e => {
+      handleFocus(false, () => rest.onBlur?.(e));
+    },
+    ref: mergedRef,
+    children: children
+  });
+});
+InputField.displayName = 'InputField';
+//# sourceMappingURL=InputField.js.map

package/lib/module/input/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","TextInput","mergeRefs","useFormControl","useFormControlContext","Slot","useInputContext","jsx","_jsx","InputField","props","ref","asChild","children","onKeyPress","type","accessibilityLabel","ariaLabelProp","secureTextEntry","editable","disabled","rest","isDisabled","isReadOnly","isFocused","isInvalid","setIsFocused","inputFieldRef","isRequired","inputProps","id","field","reportLabelFocus","focused","active","setIsLabelFocused","handleFocus","focusState","callback","mergedRef","inputRef","isEffectivelyDisabled","ariaLabel","editableProp","undefined","Comp","accessible","required","accessibilityElementsHidden","readOnly","e","persist","onFocus","onBlur","displayName"],"sourceRoot":"../../../src","sources":["input/InputField.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/input/InputField.web.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { TextInput } from 'react-native';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useInputContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fileInputStyle = {
+  flex: 1,
+  minWidth: 0,
+  border: 'none',
+  outline: 'none',
+  background: 'transparent',
+  fontSize: 'inherit',
+  fontFamily: 'inherit'
+};
+export const InputField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    asChild,
+    children,
+    onKeyPress,
+    type = 'text',
+    accessibilityLabel,
+    'aria-label': ariaLabelProp,
+    secureTextEntry,
+    editable,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    setIsFocused,
+    isRequired,
+    inputFieldRef
+  } = useInputContext();
+  const inputProps = useFormControl({
+    isDisabled: rest.isDisabled || disabled,
+    isInvalid: rest.isInvalid,
+    isReadOnly: rest.isReadOnly,
+    isRequired: rest.isRequired,
+    id: rest.id
+  });
+  const field = useFormControlContext();
+  const reportLabelFocus = focused => {
+    const active = focused && !(isDisabled || inputProps.disabled);
+    field.setIsLabelFocused?.(active);
+  };
+  const handleFocus = (focusState, callback) => {
+    setIsFocused?.(focusState);
+    reportLabelFocus(focusState);
+    callback();
+  };
+  const mergedRef = mergeRefs(ref, inputFieldRef);
+  const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+  const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+  const editableProp = useMemo(() => {
+    if (editable !== undefined) {
+      return editable;
+    }
+    return !(isDisabled || inputProps.disabled || isReadOnly);
+  }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+  if (!asChild && type === 'file') {
+    const fileProps = rest;
+    return /*#__PURE__*/React.createElement('input', {
+      ref: mergedRef,
+      type: 'file',
+      accept: fileProps.accept || undefined,
+      multiple: fileProps.multiple || undefined,
+      capture: fileProps.capture || undefined,
+      disabled: isEffectivelyDisabled || undefined,
+      'aria-label': ariaLabel,
+      'aria-required': isRequired || inputProps.required || undefined,
+      'aria-invalid': isInvalid || inputProps['aria-invalid'] || undefined,
+      'aria-disabled': isEffectivelyDisabled || undefined,
+      onChange: e => {
+        const files = e.target.files;
+        if (files && fileProps.onFiles) {
+          fileProps.onFiles(Array.from(files));
+        }
+      },
+      onFocus: e => {
+        handleFocus(true, () => rest.onFocus?.(e));
+      },
+      onBlur: e => {
+        handleFocus(false, () => rest.onBlur?.(e));
+      },
+      style: {
+        ...fileInputStyle,
+        cursor: isEffectivelyDisabled ? 'not-allowed' : 'pointer'
+      }
+    });
+  }
+  const Comp = asChild ? Slot : TextInput;
+  return /*#__PURE__*/_jsx(Comp, {
+    ...inputProps,
+    ...rest,
+    type: type,
+    disabled: isEffectivelyDisabled,
+    secureTextEntry: secureTextEntry || type === 'password',
+    accessible: true,
+    accessibilityLabel: ariaLabel,
+    "aria-label": ariaLabel,
+    "aria-required": isRequired || inputProps.required,
+    "aria-invalid": isInvalid || inputProps['aria-invalid'],
+    "aria-disabled": isEffectivelyDisabled,
+    accessibilityElementsHidden: isEffectivelyDisabled,
+    readOnly: !editableProp,
+    onKeyPress: e => {
+      e.persist();
+      onKeyPress?.(e);
+    },
+    onFocus: e => {
+      handleFocus(true, () => rest.onFocus?.(e));
+    },
+    onBlur: e => {
+      handleFocus(false, () => rest.onBlur?.(e));
+    },
+    ref: mergedRef,
+    children: children
+  });
+});
+InputField.displayName = 'InputField';
+//# sourceMappingURL=InputField.web.js.map

package/lib/module/input/InputField.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useMemo","TextInput","mergeRefs","useFormControl","useFormControlContext","Slot","useInputContext","jsx","_jsx","fileInputStyle","flex","minWidth","border","outline","background","fontSize","fontFamily","InputField","props","ref","asChild","children","onKeyPress","type","accessibilityLabel","ariaLabelProp","secureTextEntry","editable","disabled","rest","isDisabled","isReadOnly","isInvalid","setIsFocused","isRequired","inputFieldRef","inputProps","id","field","reportLabelFocus","focused","active","setIsLabelFocused","handleFocus","focusState","callback","mergedRef","isEffectivelyDisabled","ariaLabel","editableProp","undefined","fileProps","createElement","accept","multiple","capture","required","onChange","e","files","target","onFiles","Array","from","onFocus","onBlur","style","cursor","Comp","accessible","accessibilityElementsHidden","readOnly","persist","displayName"],"sourceRoot":"../../../src","sources":["input/InputField.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/input/{createInputRoot.js → InputRoot.js}

@@ -1,15 +1,16 @@
 "use strict";
 
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
 import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
 import { useFocusRing } from '@react-native-aria/focus';
 import { useHover } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { InputProvider } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-// TODO: Does this need useControllableState?
-
-export const createInputRoot = BaseInput => /*#__PURE__*/forwardRef(({
+export const InputRoot = /*#__PURE__*/forwardRef(({
+  asChild,
   children,
   isReadOnly,
   isDisabled,
@@ -18,11 +19,11 @@ export const createInputRoot = BaseInput => /*#__PURE__*/forwardRef(({
   isHovered: isHoveredProp,
   isFocused: isFocusedProp,
   isFocusVisible: isFocusVisibleProp,
-  ...props
+  ...rest
 }, ref) => {
-  const inputRef = React.useRef(null);
-  const inputFieldRef = React.useRef(null);
-  const [isFocused, setIsFocused] = React.useState(false);
+  const inputRef = useRef(null);
+  const inputFieldRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
   const handleFocus = useCallback((focusState, callback) => {
     setIsFocused(focusState);
     callback();
@@ -41,6 +42,8 @@ export const createInputRoot = BaseInput => /*#__PURE__*/forwardRef(({
   const resolvedHovered = isHoveredProp || isHovered;
   const resolvedFocused = isFocusedProp || isFocused;
   const resolvedFocusVisible = isFocusVisibleProp || isFocusVisible;
+
+  // TODO: Remove is prefix from props (align with ButtonRoot)
   const contextValue = useMemo(() => ({
     isDisabled: resolvedDisabled,
     isInvalid: resolvedInvalid,
@@ -54,23 +57,24 @@ export const createInputRoot = BaseInput => /*#__PURE__*/forwardRef(({
     setIsFocused,
     inputFieldRef
   }), [resolvedDisabled, resolvedInvalid, resolvedHovered, resolvedFocused, resolvedFocusVisible, resolvedReadOnly, resolvedRequired, handleFocus]);
-  return /*#__PURE__*/_jsx(BaseInput, {
-    ...dataAttributes({
-      hover: resolvedHovered,
-      focus: resolvedFocused,
-      disabled: resolvedDisabled,
-      invalid: resolvedInvalid,
-      readonly: resolvedReadOnly,
-      required: resolvedRequired,
-      focusVisible: resolvedFocusVisible
-    }),
-    ...props,
-    ref: mergeRefs(inputRef, ref) // TODO: Somehow utils and primitives package are resolving to different versions of react (@types/react?)
-    ,
-    children: /*#__PURE__*/_jsx(InputProvider, {
-      value: contextValue,
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(InputProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Comp, {
+      ref: mergeRefs(inputRef, ref),
+      ...rest,
+      ...mergeDataAttributes(rest, dataAttributes({
+        hover: resolvedHovered,
+        focus: resolvedFocused,
+        disabled: resolvedDisabled,
+        invalid: resolvedInvalid,
+        readonly: resolvedReadOnly,
+        required: resolvedRequired,
+        focusVisible: resolvedFocusVisible
+      })),
       children: children
     })
   });
 });
-//# sourceMappingURL=createInputRoot.js.map
+InputRoot.displayName = 'InputRoot';
+//# sourceMappingURL=InputRoot.js.map

package/lib/module/input/InputRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","useRef","useState","View","mergeRefs","useFormControlContext","useFocusRing","useHover","Slot","dataAttributes","mergeDataAttributes","InputProvider","jsx","_jsx","InputRoot","asChild","children","isReadOnly","isDisabled","isInvalid","isRequired","isHovered","isHoveredProp","isFocused","isFocusedProp","isFocusVisible","isFocusVisibleProp","rest","ref","inputRef","inputFieldRef","setIsFocused","handleFocus","focusState","callback","inputProps","resolvedDisabled","resolvedInvalid","resolvedReadOnly","resolvedRequired","resolvedHovered","resolvedFocused","resolvedFocusVisible","contextValue","Comp","value","hover","focus","disabled","invalid","readonly","required","focusVisible","displayName"],"sourceRoot":"../../../src","sources":["input/InputRoot.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAA2B,OAAO;AAC7F,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,SAAS,EAAEC,qBAAqB,QAAQ,eAAe;AAChE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,yBAAyB;AAC7E,SAASC,aAAa,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK1C,OAAO,MAAMC,SAAS,gBAAGhB,UAAU,CACjC,CACE;EACEiB,OAAO;EACPC,QAAQ;EACRC,UAAU;EACVC,UAAU;EACVC,SAAS;EACTC,UAAU;EACVC,SAAS,EAAEC,aAAa;EACxBC,SAAS,EAAEC,aAAa;EACxBC,cAAc,EAAEC,kBAAkB;EAClC,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,QAAQ,GAAG5B,MAAM,CAAmC,IAAI,CAAC;EAC/D,MAAM6B,aAAa,GAAG7B,MAAM,CAAC,IAAI,CAAC;EAElC,MAAM,CAACsB,SAAS,EAAEQ,YAAY,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM8B,WAAW,GAAGjC,WAAW,CAAC,CAACkC,UAAmB,EAAEC,QAAoB,KAAK;IAC7EH,YAAY,CAACE,UAAU,CAAC;IACxBC,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,UAAU,GAAG9B,qBAAqB,CAAC,CAAC;EAC1C,MAAM;IAAEgB;EAAU,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC,EAAEsB,QAAQ,CAAC;EAC5C,MAAM;IAAEJ;EAAe,CAAC,GAAGnB,YAAY,CAAC,CAAC;EAEzC,MAAM8B,gBAAgB,GAAGlB,UAAU,IAAIiB,UAAU,CAACjB,UAAU;EAC5D,MAAMmB,eAAe,GAAGlB,SAAS,IAAIgB,UAAU,CAAChB,SAAS;EACzD,MAAMmB,gBAAgB,GAAGrB,UAAU,IAAIkB,UAAU,CAAClB,UAAU;EAC5D,MAAMsB,gBAAgB,GAAGnB,UAAU,IAAIe,UAAU,CAACf,UAAU;EAC5D,MAAMoB,eAAe,GAAGlB,aAAa,IAAID,SAAS;EAClD,MAAMoB,eAAe,GAAGjB,aAAa,IAAID,SAAS;EAClD,MAAMmB,oBAAoB,GAAGhB,kBAAkB,IAAID,cAAc;;EAEjE;EACA,MAAMkB,YAAY,GAAG3C,OAAO,CAC1B,OAAO;IACLkB,UAAU,EAAEkB,gBAAgB;IAC5BjB,SAAS,EAAEkB,eAAe;IAC1BhB,SAAS,EAAEmB,eAAe;IAC1BjB,SAAS,EAAEkB,eAAe;IAC1BhB,cAAc,EAAEiB,oBAAoB;IACpCzB,UAAU,EAAEqB,gBAAgB;IAC5BlB,UAAU,EAAEmB,gBAAgB;IAC5BV,QAAQ;IACRG,WAAW;IACXD,YAAY;IACZD;EACF,CAAC,CAAC,EACF,CACEM,gBAAgB,EAChBC,eAAe,EACfG,eAAe,EACfC,eAAe,EACfC,oBAAoB,EACpBJ,gBAAgB,EAChBC,gBAAgB,EAChBP,WAAW,CAEf,CAAC;EAED,MAAMY,IAAI,GAAG7B,OAAO,GAAGP,IAAI,GAAGL,IAAI;EAElC,oBACEU,IAAA,CAACF,aAAa;IAACkC,KAAK,EAAEF,YAAa;IAAA3B,QAAA,eACjCH,IAAA,CAAC+B,IAAI;MACHhB,GAAG,EAAExB,SAAS,CAACyB,QAAQ,EAAED,GAAG,CAAE;MAAA,GACzBD,IAAI;MAAA,GACLjB,mBAAmB,CACrBiB,IAAI,EACJlB,cAAc,CAAC;QACbqC,KAAK,EAAEN,eAAe;QACtBO,KAAK,EAAEN,eAAe;QACtBO,QAAQ,EAAEZ,gBAAgB;QAC1Ba,OAAO,EAAEZ,eAAe;QACxBa,QAAQ,EAAEZ,gBAAgB;QAC1Ba,QAAQ,EAAEZ,gBAAgB;QAC1Ba,YAAY,EAAEV;MAChB,CAAC,CACH,CAAC;MAAA1B,QAAA,EAEAA;IAAQ,CACL;EAAC,CACM,CAAC;AAEpB,CACF,CAAC;AAEDF,SAAS,CAACuC,WAAW,GAAG,WAAW","ignoreList":[]}

package/lib/module/input/index.js

@@ -1,18 +1,6 @@
 "use strict";
 
-import { createInputField } from './createInputField';
-import { createInputRoot } from './createInputRoot';
-import { createInputSlot } from './createInputSlot';
-export function createInput(BaseComponents) {
-  const Input = createInputRoot(BaseComponents.Root);
-  const Slot = createInputSlot(BaseComponents.Slot);
-  const Field = createInputField(BaseComponents.Field);
-  Input.displayName = 'InputPrimitive';
-  Slot.displayName = 'InputPrimitive.Slot';
-  Field.displayName = 'InputPrimitive.Field';
-  return Object.assign(Input, {
-    Slot,
-    Field
-  });
-}
+export { useInputContext } from './context';
+export { InputRoot } from './InputRoot';
+export { InputField } from './InputField';
 //# sourceMappingURL=index.js.map

package/lib/module/input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createInputField","createInputRoot","createInputSlot","createInput","BaseComponents","Input","Root","Slot","Field","displayName","Object","assign"],"sourceRoot":"../../../src","sources":["input/index.tsx"],"mappings":";;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,eAAe,QAAQ,mBAAmB;AAWnD,OAAO,SAASC,WAAWA,CAMzBC,cAID,EAAE;EACD,MAAMC,KAAK,GAAGJ,eAAe,CAACG,cAAc,CAACE,IAAI,CAAC;EAClD,MAAMC,IAAI,GAAGL,eAAe,CAACE,cAAc,CAACG,IAAI,CAAC;EACjD,MAAMC,KAAK,GAAGR,gBAAgB,CAACI,cAAc,CAACI,KAAK,CAAC;EAEpDH,KAAK,CAACI,WAAW,GAAG,gBAAgB;EACpCF,IAAI,CAACE,WAAW,GAAG,qBAAqB;EACxCD,KAAK,CAACC,WAAW,GAAG,sBAAsB;EAE1C,OAAOC,MAAM,CAACC,MAAM,CAACN,KAAK,EAAE;IAC1BE,IAAI;IACJC;EACF,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["useInputContext","InputRoot","InputField"],"sourceRoot":"../../../src","sources":["input/index.tsx"],"mappings":";;AACA,SAASA,eAAe,QAAQ,WAAW;AAC3C,SAASC,SAAS,QAA6B,aAAa;AAC5D,SAASC,UAAU,QAA8B,cAAc","ignoreList":[]}

package/lib/module/link/{createLink.js → LinkRoot.js}

@@ -1,16 +1,17 @@
 "use strict";
 
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { Pressable } from 'react-native';
 import { composeEventHandlers } from '@cdx-ui/utils';
-import { useFocusRing, useFocus } from '@react-native-aria/focus';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { LinkInteractionProvider } from './context';
 import { useLink } from './useLink';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const createLink = ({
-  Root
-}) => /*#__PURE__*/forwardRef(({
+export const LinkRoot = /*#__PURE__*/forwardRef(({
+  asChild,
   children,
   isHovered: isHoveredProp,
   isPressed: isPressedProp,
@@ -50,33 +51,34 @@ export const createLink = ({
   const hover = isHoveredProp || isHovered;
   const visited = isVisitedProp ?? false;
   const focusVisible = isFocusVisibleProp || isFocusVisible;
-  const interactionState = useMemo(() => ({
+  const contextValue = useMemo(() => ({
     hover,
     visited,
     focusVisible
   }), [hover, visited, focusVisible]);
-  const interactionAttrs = dataAttributes({
-    hover,
-    focus: isFocusedProp || isFocused,
-    active: isPressedProp || isPressed,
-    focusVisible,
-    visited
-  });
+  const Comp = asChild ? Slot : Pressable;
   return /*#__PURE__*/_jsx(LinkInteractionProvider, {
-    value: interactionState,
-    children: /*#__PURE__*/_jsx(Root, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Comp, {
       ref: ref,
-      ...interactionAttrs,
       ...linkProps,
       ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        hover,
+        focus: isFocusedProp || isFocused,
+        active: isPressedProp || isPressed,
+        focusVisible,
+        visited
+      })),
       onPressIn: composeEventHandlers(props?.onPressIn, pressProps.onPressIn),
       onPressOut: composeEventHandlers(props?.onPressOut, pressProps.onPressOut),
       onHoverIn: composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn),
       onHoverOut: composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut),
       onFocus: composeEventHandlers(composeEventHandlers(props?.onFocus, focusProps.onFocus), focusRingProps.onFocus),
       onBlur: composeEventHandlers(composeEventHandlers(props?.onBlur, focusProps.onBlur), focusRingProps.onBlur),
-      children: children
+      children: typeof children === 'function' ? children(contextValue) : children
     })
   });
 });
-//# sourceMappingURL=createLink.js.map
+LinkRoot.displayName = 'LinkRoot';
+//# sourceMappingURL=LinkRoot.js.map

package/lib/module/link/LinkRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useMemo","Pressable","composeEventHandlers","useFocus","useFocusRing","useHover","usePress","Slot","dataAttributes","mergeDataAttributes","LinkInteractionProvider","useLink","jsx","_jsx","LinkRoot","asChild","children","isHovered","isHoveredProp","isPressed","isPressedProp","isFocused","isFocusedProp","isFocusVisible","isFocusVisibleProp","isVisited","isVisitedProp","href","onPress","action","webProps","props","ref","focusProps","focusRingProps","pressProps","hoverProps","linkProps","hover","visited","focusVisible","contextValue","Comp","value","focus","active","onPressIn","onPressOut","onHoverIn","onHoverOut","onFocus","onBlur","displayName"],"sourceRoot":"../../../src","sources":["link/LinkRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/link/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-export { createLink } from './createLink';
+export { LinkRoot } from './LinkRoot';
 export { LinkInteractionProvider, useLinkInteractionContext } from './context';
 export { LinkProvider } from './LinkProvider';
 export { useLink } from './useLink';

package/lib/module/link/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createLink","LinkInteractionProvider","useLinkInteractionContext","LinkProvider","useLink"],"sourceRoot":"../../../src","sources":["link/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,uBAAuB,EAAEC,yBAAyB,QAAQ,WAAW;AAE9E,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,SAASC,OAAO,QAAQ,WAAW","ignoreList":[]}
+{"version":3,"names":["LinkRoot","LinkInteractionProvider","useLinkInteractionContext","LinkProvider","useLink"],"sourceRoot":"../../../src","sources":["link/index.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAA4B,YAAY;AACzD,SAASC,uBAAuB,EAAEC,yBAAyB,QAAQ,WAAW;AAE9E,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,SAASC,OAAO,QAAQ,WAAW","ignoreList":[]}

package/lib/module/list-item/{createListItemRoot.js → ListItemRoot.js}

@@ -1,20 +1,14 @@
 "use strict";
 
 import React, { forwardRef, useMemo } from 'react';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { Pressable, View } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { ListItemProvider } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-function listItemRootDataAttrs(size, showSeparator, crossAlign) {
-  return dataAttributes({
-    slot: 'list-item',
-    size: size ?? 'default',
-    separator: showSeparator ?? true,
-    crossAlign: crossAlign ?? 'center'
-  });
-}
 function rowStyleForCrossAlign(crossAlign) {
   return {
     flexDirection: 'row',
@@ -22,23 +16,15 @@ function rowStyleForCrossAlign(crossAlign) {
     alignItems: crossAlign === 'start' ? 'flex-start' : 'center'
   };
 }
-export const createListItemRoot = (BaseView, BasePressable) => /*#__PURE__*/forwardRef(({
+export const ListItemRoot = /*#__PURE__*/forwardRef(({
   asChild = false,
   children,
   onPress,
-  size = 'default',
-  showSeparator = true,
   crossAlign = 'center',
   isDisabled = false,
   style,
   ...restProps
 }, ref) => {
-  const childOnPress = /*#__PURE__*/React.isValidElement(children) ? children.props.onPress : undefined;
-
-  // asChild always wins when explicitly set with a valid element — even when the press
-  // surface is built internally by the child (e.g. `Link` adds its onPress via `useLink`,
-  // not as a JSX-level prop). The clone path below preserves the child's own press by
-  // *omitting* `onPress` when there is nothing to compose.
   const asChildInteractive = asChild && /*#__PURE__*/React.isValidElement(children);
   const isPressableRoot = !!onPress && !asChildInteractive;
   const pressState = usePress({
@@ -58,61 +44,51 @@ export const createListItemRoot = (BaseView, BasePressable) => /*#__PURE__*/forw
     isFocusVisible,
     focusProps: focusRingProps
   } = useFocusRing();
-  const slotAttrs = listItemRootDataAttrs(size, showSeparator, crossAlign);
+  const childDisabled = asChildInteractive && !!(children.props.isDisabled ?? children.props.disabled);
+  const resolvedDisabled = isDisabled || childDisabled;
   const contextValue = useMemo(() => ({
-    isPressed: isPressableRoot ? isPressed : false,
-    isHovered,
-    isDisabled,
-    crossAlign: crossAlign ?? 'center'
-  }), [isPressableRoot, isPressed, isHovered, isDisabled, crossAlign]);
+    hover: isPressableRoot ? isHovered : false,
+    focus: isPressableRoot ? isFocused : false,
+    active: isPressableRoot ? isPressed : false,
+    disabled: isPressableRoot ? isDisabled : resolvedDisabled,
+    focusVisible: isPressableRoot ? isFocusVisible : false
+  }), [isPressableRoot, isHovered, isFocused, isPressed, isDisabled, resolvedDisabled, isFocusVisible]);
   if (asChildInteractive) {
-    const child = children;
-    const childProps = child.props;
-    const childDisabled = !!(childProps.isDisabled ?? childProps.disabled);
-    const resolvedDisabled = isDisabled || childDisabled;
-    const cloneProps = {
+    const slotMergeProps = {
       ...restProps,
-      ...slotAttrs,
-      ...dataAttributes({
-        disabled: resolvedDisabled
-      }),
       ...(resolvedDisabled && {
         accessibilityState: {
           disabled: true
         }
       }),
       disabled: resolvedDisabled,
-      ref: mergeRefs(ref, child.props.ref),
-      style: [rowStyleForCrossAlign(crossAlign), style, child.props.style]
+      style: [rowStyleForCrossAlign(crossAlign), style]
     };
 
-    // Only override the child's `onPress` when we have something to add (a parent handler)
-    // or need to suppress (disabled). Otherwise leave the child's own onPress alone — e.g.
-    // `Link` builds its navigation handler inside `useLink`, not as a JSX-level prop, and
-    // overriding here would shadow it.
-    if (resolvedDisabled) {
-      cloneProps.onPress = undefined;
-    } else if (onPress) {
-      cloneProps.onPress = composeEventHandlers(childOnPress, onPress);
+    // Only set onPress when we have a parent handler to compose. Slot merges this
+    // with the child's own onPress (child first, then ours). When there is no parent
+    // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+    // When disabled, `disabled` prop suppresses press events on the child.
+    if (!resolvedDisabled && onPress) {
+      slotMergeProps.onPress = onPress;
     }
     return /*#__PURE__*/_jsx(ListItemProvider, {
-      value: {
-        isPressed: false,
-        isHovered: false,
-        isDisabled: resolvedDisabled,
-        crossAlign: crossAlign ?? 'center'
-      },
-      children: /*#__PURE__*/React.cloneElement(child, cloneProps)
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(Slot, {
+        ref: ref,
+        ...slotMergeProps,
+        ...mergeDataAttributes(restProps, dataAttributes({
+          active: false,
+          hover: false,
+          focus: false,
+          focusVisible: false,
+          disabled: resolvedDisabled
+        })),
+        children: children
+      })
     });
   }
   if (isPressableRoot) {
-    const interactionAttrs = dataAttributes({
-      active: isPressed,
-      hover: isHovered,
-      focus: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled
-    });
     const {
       onPressIn: onPressInProp,
       onPressOut: onPressOutProp,
@@ -123,17 +99,15 @@ export const createListItemRoot = (BaseView, BasePressable) => /*#__PURE__*/forw
     } = restProps;
     return /*#__PURE__*/_jsx(ListItemProvider, {
       value: contextValue,
-      children: /*#__PURE__*/_jsx(BasePressable, {
+      children: /*#__PURE__*/_jsx(Pressable, {
         ...restProps,
-        ...slotAttrs,
-        ...interactionAttrs,
+        ref: ref,
         ...(isDisabled && {
           accessibilityState: {
             disabled: true
           }
         }),
         disabled: isDisabled,
-        ref: ref,
         style: [rowStyleForCrossAlign(crossAlign), style],
         onPress: isDisabled ? undefined : onPress,
         onPressIn: composeEventHandlers(onPressInProp, pressProps.onPressIn),
@@ -142,22 +116,29 @@ export const createListItemRoot = (BaseView, BasePressable) => /*#__PURE__*/forw
         onHoverOut: composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut),
         onFocus: composeEventHandlers(composeEventHandlers(onFocusProp, focusProps.onFocus), focusRingProps.onFocus),
         onBlur: composeEventHandlers(composeEventHandlers(onBlurProp, focusProps.onBlur), focusRingProps.onBlur),
+        ...mergeDataAttributes(restProps, dataAttributes({
+          active: isPressed,
+          hover: isHovered,
+          focus: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled
+        })),
         children: children
       })
     });
   }
   return /*#__PURE__*/_jsx(ListItemProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(BaseView, {
+    children: /*#__PURE__*/_jsx(View, {
       ...restProps,
-      ...slotAttrs,
-      ...(isDisabled ? dataAttributes({
-        disabled: true
-      }) : undefined),
       ref: ref,
       style: [rowStyleForCrossAlign(crossAlign), style],
+      ...mergeDataAttributes(restProps, isDisabled ? dataAttributes({
+        disabled: true
+      }) : undefined),
       children: children
     })
   });
 });
-//# sourceMappingURL=createListItemRoot.js.map
+ListItemRoot.displayName = 'ListItemRoot';
+//# sourceMappingURL=ListItemRoot.js.map