react-native-molecules 0.5.0-beta.5 → 0.5.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/Chip/Chip.tsx +1 -1
  2. package/components/IconButton/utils.ts +0 -1
  3. package/components/Surface/Surface.android.tsx +14 -2
  4. package/components/Surface/Surface.ios.tsx +14 -2
  5. package/components/Surface/Surface.tsx +19 -2
  6. package/components/TouchableRipple/TouchableRipple.native.tsx +16 -2
  7. package/components/TouchableRipple/TouchableRipple.tsx +19 -2
  8. package/package.json +2 -1
package/components/Chip/Chip.tsx CHANGED
@@ -350,7 +350,7 @@ const RightElement = memo(
350
350
  {onClose ? (
351
351
  <IconButtonWithContrastColor
352
352
  name="close"
353
- size={18}
353
+ size={14}
354
354
  accessibilityLabel="Close"
355
355
  disabled={disabled}
356
356
  onPress={onClose}
package/components/IconButton/utils.ts CHANGED
@@ -27,7 +27,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
27
27
  overflow: 'hidden',
28
28
  borderWidth: 0,
29
29
  backgroundColor: 'transparent',
30
- flexGrow: 1,
31
30
  justifyContent: 'center',
32
31
  alignItems: 'center',
33
32
 
package/components/Surface/Surface.android.tsx CHANGED
@@ -23,8 +23,20 @@ export type Props = ViewProps & {
23
23
  */
24
24
  testID?: string;
25
25
  /**
26
- * Change the component to the HTML tag or custom component use the passed child.
27
- * This will merge the props of the Surface with the props of the child element.
26
+ * When `true`, the component will not render a wrapper element. Instead, it will
27
+ * merge its props (styles, elevation shadow, ref) onto its immediate child element.
28
+ * This follows the Radix UI "Slot" pattern for flexible component composition.
29
+ *
30
+ * @example
31
+ * ```tsx
32
+ * // With asChild - merges elevation styles onto the child
33
+ * <Surface asChild elevation={2}>
34
+ * <Card><Text>Content</Text></Card>
35
+ * </Surface>
36
+ * ```
37
+ *
38
+ * @note When `asChild` is `true`, only a single child element is allowed.
39
+ * @default false
28
40
  */
29
41
  asChild?: boolean;
30
42
  };
package/components/Surface/Surface.ios.tsx CHANGED
@@ -31,8 +31,20 @@ export type Props = ComponentPropsWithRef<typeof View> & {
31
31
  */
32
32
  testID?: string;
33
33
  /**
34
- * Change the component to the HTML tag or custom component use the passed child.
35
- * This will merge the props of the Surface with the props of the child element.
34
+ * When `true`, the component will not render a wrapper element. Instead, it will
35
+ * merge its props (styles, elevation shadow, ref) onto its immediate child element.
36
+ * This follows the Radix UI "Slot" pattern for flexible component composition.
37
+ *
38
+ * @example
39
+ * ```tsx
40
+ * // With asChild - merges elevation styles onto the child
41
+ * <Surface asChild elevation={2}>
42
+ * <Card><Text>Content</Text></Card>
43
+ * </Surface>
44
+ * ```
45
+ *
46
+ * @note When `asChild` is `true`, only a single child element is allowed.
47
+ * @default false
36
48
  */
37
49
  asChild?: boolean;
38
50
  };
package/components/Surface/Surface.tsx CHANGED
@@ -22,8 +22,25 @@ export type Props = ViewProps & {
22
22
  */
23
23
  testID?: string;
24
24
  /**
25
- * Change the component to the HTML tag or custom component use the passed child.
26
- * This will merge the props of the Surface with the props of the child element.
25
+ * When `true`, the component will not render a wrapper element. Instead, it will
26
+ * merge its props (styles, elevation shadow, ref) onto its immediate child element.
27
+ * This follows the Radix UI "Slot" pattern for flexible component composition.
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * // Without asChild - renders an AnimatedView wrapper
32
+ * <Surface elevation={2}>
33
+ * <Card><Text>Content</Text></Card>
34
+ * </Surface>
35
+ *
36
+ * // With asChild - merges elevation styles onto the child
37
+ * <Surface asChild elevation={2}>
38
+ * <Card><Text>Content</Text></Card>
39
+ * </Surface>
40
+ * ```
41
+ *
42
+ * @note When `asChild` is `true`, only a single child element is allowed.
43
+ * @default false
27
44
  */
28
45
  asChild?: boolean;
29
46
  };
package/components/TouchableRipple/TouchableRipple.native.tsx CHANGED
@@ -27,8 +27,22 @@ type Props = ComponentProps<typeof TouchableWithoutFeedback> & {
27
27
  children: ReactNode;
28
28
  style?: StyleProp<ViewStyle>;
29
29
  /**
30
- * Change the component to the HTML tag or custom component use the passed child.
31
- * This will merge the props of the TouchableRipple with the props of the child element.
30
+ * When `true`, the component will not render a wrapper element. Instead, it will
31
+ * merge its props (styles, event handlers, ref) onto its immediate child element.
32
+ * This follows the Radix UI "Slot" pattern for flexible component composition.
33
+ *
34
+ * @note On Android, the native ripple effect will NOT work when `asChild` is `true`
35
+ * because `TouchableNativeFeedback` requires a View wrapper. Only press events will work.
36
+ *
37
+ * @example
38
+ * ```tsx
39
+ * <TouchableRipple asChild onPress={handlePress}>
40
+ * <View><Text>Custom pressable</Text></View>
41
+ * </TouchableRipple>
42
+ * ```
43
+ *
44
+ * @note When `asChild` is `true`, only a single child element is allowed.
45
+ * @default false
32
46
  */
33
47
  asChild?: boolean;
34
48
  };
package/components/TouchableRipple/TouchableRipple.tsx CHANGED
@@ -52,8 +52,25 @@ export type Props = PressableProps & {
52
52
  children: ReactNode;
53
53
  style?: StyleProp<ViewStyle>;
54
54
  /**
55
- * Change the component to the HTML tag or custom component use the passed child.
56
- * This will merge the props of the TouchableRipple with the props of the child element.
55
+ * When `true`, the component will not render a wrapper element. Instead, it will
56
+ * merge its props (styles, event handlers, ref) onto its immediate child element.
57
+ * This follows the Radix UI "Slot" pattern for flexible component composition.
58
+ *
59
+ * @example
60
+ * ```tsx
61
+ * // Without asChild - renders a Pressable wrapper
62
+ * <TouchableRipple onPress={handlePress}>
63
+ * <View><Text>Click me</Text></View>
64
+ * </TouchableRipple>
65
+ *
66
+ * // With asChild - merges props onto the child
67
+ * <TouchableRipple asChild onPress={handlePress}>
68
+ * <Link href="/page"><Text>Navigate</Text></Link>
69
+ * </TouchableRipple>
70
+ * ```
71
+ *
72
+ * @note When `asChild` is `true`, only a single child element is allowed.
73
+ * @default false
57
74
  */
58
75
  asChild?: boolean;
59
76
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-molecules",
3
- "version": "0.5.0-beta.5",
3
+ "version": "0.5.0-beta.6",
4
4
  "author": "Thet Aung <thetaung.dev@gmail.com>",
5
5
  "license": "MIT",
6
6
  "main": "index.ts",
@@ -42,6 +42,7 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "@gorhom/portal": "^1.0.14",
45
+ "@radix-ui/react-compose-refs": "^1.1.2",
45
46
  "@react-native-vector-icons/feather": "^12.4.0",
46
47
  "@react-native-vector-icons/material-design-icons": "^12.4.0",
47
48
  "color": "^4.2.3",