@retray-dev/ui-kit 6.0.0 → 6.1.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v6.0.0)
+# @retray-dev/ui-kit — Component Reference (v6.1.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -359,7 +359,7 @@ const styles = StyleSheet.create({
 ```tsx
 import { MenuItem } from '@retray-dev/ui-kit'
 // variants: 'plain' (default) | 'card'
-<MenuItem label="Profile" iconName="user" onPress={() => {}} />
+<MenuItem label="Profile" subtitle="Edit your details" iconName="user" onPress={() => {}} />
 <MenuItem label="Notifications" iconName="bell" rightRender={<Switch value={on} onValueChange={setOn} />} showChevron={false} onPress={() => {}} />
 ```
 
@@ -2301,13 +2301,14 @@ dismiss(id)
 
 **Import:** `import { MenuItem } from '@retray-dev/ui-kit'`
 
-**When to use:** Settings screens, navigation lists, menu entries — icon + label + optional right content. Purpose-built for Airbnb-style settings rows. Use `ListItem` when you need subtitle, caption, or more complex layouts.
+**When to use:** Settings screens, navigation lists, menu entries — icon + label + optional subtitle + optional right content. Purpose-built for Airbnb-style settings rows. Use `ListItem` when you need caption, metadata rows, or more complex layouts beyond label+subtitle.
 
 **Important:** MenuItem has **zero horizontal padding** by design — the consumer controls spacing. Wrap in a container with padding for standalone use, or use `variant="card"` for auto-styled surfaces.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | label | `string` | required | Row label |
+| subtitle | `string` | — | Secondary text below label. Uses `mutedForeground` color |
 | iconName | `string` | — | Icon from `@expo/vector-icons`. Auto-resolved across all 6 families |
 | icon | `ReactNode` | — | Custom icon (used if `iconName` not set) |
 | iconColor | `string` | — | Override icon color. Defaults to `foreground` |
@@ -2331,7 +2332,7 @@ dismiss(id)
 ```tsx
 // Settings screen (wrap in container with padding)
 <View style={{ padding: 16, backgroundColor: colors.card, borderRadius: 12 }}>
-  <MenuItem label="Personal info" iconName="user" onPress={() => navigate('profile')} showSeparator />
+  <MenuItem label="Personal info" subtitle="Name, email, phone" iconName="user" onPress={() => navigate('profile')} showSeparator />
   <MenuItem label="Security" iconName="shield" onPress={() => navigate('security')} showSeparator />
   <MenuItem label="Privacy" iconName="lock" onPress={() => navigate('privacy')} showSeparator />
   <MenuItem 

package/dist/index.d.mts

@@ -679,6 +679,8 @@ declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, r
 type MenuItemVariant = 'plain' | 'card';
 interface MenuItemProps {
     label: string;
+    /** Secondary text rendered below the label. */
+    subtitle?: string;
     /**
      * Icon name from `@expo/vector-icons` rendered on the left.
      * See https://icons.expo.fyi.
@@ -713,7 +715,7 @@ interface MenuItemProps {
     /** Style applied to the label Text. */
     labelStyle?: TextStyle;
 }
-declare function MenuItem({ label, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -865,11 +867,11 @@ type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string;
+    value: string | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;
-    /** Semantic color key or hex string for value text. */
+    /** Semantic color key or hex string for value text. Only applies when value is a string. */
     valueColor?: string;
     /** Node rendered left of the label (e.g. Avatar, Icon). */
     leftIcon?: React.ReactNode;
@@ -883,6 +885,7 @@ interface DetailRowProps {
     rightIconColor?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /** Only applies when value is a string. */
     valueStyle?: TextStyle;
 }
 declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;

package/dist/index.d.ts

@@ -679,6 +679,8 @@ declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, r
 type MenuItemVariant = 'plain' | 'card';
 interface MenuItemProps {
     label: string;
+    /** Secondary text rendered below the label. */
+    subtitle?: string;
     /**
      * Icon name from `@expo/vector-icons` rendered on the left.
      * See https://icons.expo.fyi.
@@ -713,7 +715,7 @@ interface MenuItemProps {
     /** Style applied to the label Text. */
     labelStyle?: TextStyle;
 }
-declare function MenuItem({ label, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ label, subtitle, iconName, icon, iconColor, rightRender, showChevron, onPress, disabled, variant, showSeparator, style, labelStyle, }: MenuItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -865,11 +867,11 @@ type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none';
 type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 interface DetailRowProps {
     label: React.ReactNode;
-    value: string;
+    value: string | React.ReactNode;
     /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
     separator?: DetailRowSeparator;
     labelWeight?: DetailRowLabelWeight;
-    /** Semantic color key or hex string for value text. */
+    /** Semantic color key or hex string for value text. Only applies when value is a string. */
     valueColor?: string;
     /** Node rendered left of the label (e.g. Avatar, Icon). */
     leftIcon?: React.ReactNode;
@@ -883,6 +885,7 @@ interface DetailRowProps {
     rightIconColor?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /** Only applies when value is a string. */
     valueStyle?: TextStyle;
 }
 declare function DetailRow({ label, value, separator, labelWeight, valueColor, leftIcon, leftIconName, leftIconColor, rightIconName, rightIconColor, style, labelStyle, valueStyle, }: DetailRowProps): React.JSX.Element;

package/dist/index.js

@@ -2963,6 +2963,7 @@ var styles25 = reactNative.StyleSheet.create({
 var nativeDriver11 = reactNative.Platform.OS !== "web";
 function MenuItem({
   label,
+  subtitle,
   iconName,
   icon,
   iconColor,
@@ -3024,7 +3025,7 @@ function MenuItem({
       touchSoundDisabled: true
     },
     resolvedIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.iconContainer }, resolvedIcon) : null,
-    /* @__PURE__ */ React26__default.default.createElement(
+    /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles26.labelContainer }, /* @__PURE__ */ React26__default.default.createElement(
       reactNative.Text,
       {
         style: [styles26.label, { color: colors.foreground }, labelStyle],
@@ -3032,7 +3033,15 @@ function MenuItem({
         allowFontScaling: true
       },
       label
-    ),
+    ), subtitle ? /* @__PURE__ */ React26__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles26.subtitle, { color: colors.foregroundMuted }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null),
     rightRender !== void 0 ? /* @__PURE__ */ React26__default.default.createElement(
       reactNative.View,
       {
@@ -3072,10 +3081,18 @@ var styles26 = reactNative.StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  labelContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
   label: {
     fontFamily: "Poppins-Medium",
-    fontSize: ms(15),
-    flex: 1
+    fontSize: ms(15)
+  },
+  subtitle: {
+    fontFamily: "Poppins-Regular",
+    fontSize: ms(12),
+    marginTop: vs(1)
   },
   rightContainer: {
     alignItems: "flex-end",
@@ -3792,14 +3809,14 @@ function DetailRow({
       allowFontScaling: true
     },
     label
-  ) : label), separatorStyle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: separatorStyle }) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.spacer }), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.valueSide }, /* @__PURE__ */ React26__default.default.createElement(
+  ) : label), separatorStyle ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: separatorStyle }) : /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.spacer }), /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.valueSide }, typeof value === "string" ? /* @__PURE__ */ React26__default.default.createElement(
     reactNative.Text,
     {
       style: [styles33.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
       allowFontScaling: true
     },
     value
-  ), resolvedRightIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedRightIcon) : null));
+  ) : value, resolvedRightIcon ? /* @__PURE__ */ React26__default.default.createElement(reactNative.View, { style: styles33.icon }, resolvedRightIcon) : null));
 }
 var styles33 = reactNative.StyleSheet.create({
   row: {

package/dist/index.mjs

@@ -2951,6 +2951,7 @@ var styles25 = StyleSheet.create({
 var nativeDriver11 = Platform.OS !== "web";
 function MenuItem({
   label,
+  subtitle,
   iconName,
   icon,
   iconColor,
@@ -3012,7 +3013,7 @@ function MenuItem({
       touchSoundDisabled: true
     },
     resolvedIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles26.iconContainer }, resolvedIcon) : null,
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(View, { style: styles26.labelContainer }, /* @__PURE__ */ React26.createElement(
       Text,
       {
         style: [styles26.label, { color: colors.foreground }, labelStyle],
@@ -3020,7 +3021,15 @@ function MenuItem({
         allowFontScaling: true
       },
       label
-    ),
+    ), subtitle ? /* @__PURE__ */ React26.createElement(
+      Text,
+      {
+        style: [styles26.subtitle, { color: colors.foregroundMuted }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null),
     rightRender !== void 0 ? /* @__PURE__ */ React26.createElement(
       View,
       {
@@ -3060,10 +3069,18 @@ var styles26 = StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  labelContainer: {
+    flex: 1,
+    justifyContent: "center"
+  },
   label: {
     fontFamily: "Poppins-Medium",
-    fontSize: ms(15),
-    flex: 1
+    fontSize: ms(15)
+  },
+  subtitle: {
+    fontFamily: "Poppins-Regular",
+    fontSize: ms(12),
+    marginTop: vs(1)
   },
   rightContainer: {
     alignItems: "flex-end",
@@ -3780,14 +3797,14 @@ function DetailRow({
       allowFontScaling: true
     },
     label
-  ) : label), separatorStyle ? /* @__PURE__ */ React26.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React26.createElement(View, { style: styles33.spacer }), /* @__PURE__ */ React26.createElement(View, { style: styles33.valueSide }, /* @__PURE__ */ React26.createElement(
+  ) : label), separatorStyle ? /* @__PURE__ */ React26.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React26.createElement(View, { style: styles33.spacer }), /* @__PURE__ */ React26.createElement(View, { style: styles33.valueSide }, typeof value === "string" ? /* @__PURE__ */ React26.createElement(
     Text,
     {
       style: [styles33.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
       allowFontScaling: true
     },
     value
-  ), resolvedRightIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles33.icon }, resolvedRightIcon) : null));
+  ) : value, resolvedRightIcon ? /* @__PURE__ */ React26.createElement(View, { style: styles33.icon }, resolvedRightIcon) : null));
 }
 var styles33 = StyleSheet.create({
   row: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/DetailRow/DetailRow.tsx

@@ -16,11 +16,11 @@ const weightMap: Record<DetailRowLabelWeight, string> = {
 
 export interface DetailRowProps {
   label: React.ReactNode
-  value: string
+  value: string | React.ReactNode
   /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
   separator?: DetailRowSeparator
   labelWeight?: DetailRowLabelWeight
-  /** Semantic color key or hex string for value text. */
+  /** Semantic color key or hex string for value text. Only applies when value is a string. */
   valueColor?: string
   /** Node rendered left of the label (e.g. Avatar, Icon). */
   leftIcon?: React.ReactNode
@@ -34,6 +34,7 @@ export interface DetailRowProps {
   rightIconColor?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /** Only applies when value is a string. */
   valueStyle?: TextStyle
 }
 
@@ -91,12 +92,16 @@ export function DetailRow({
       </View>
       {separatorStyle ? <View style={separatorStyle} /> : <View style={styles.spacer} />}
       <View style={styles.valueSide}>
-        <Text
-          style={[styles.valueText, { color: valueColor ?? colors.foreground }, valueStyle]}
-          allowFontScaling={true}
-        >
-          {value}
-        </Text>
+        {typeof value === 'string' ? (
+          <Text
+            style={[styles.valueText, { color: valueColor ?? colors.foreground }, valueStyle]}
+            allowFontScaling={true}
+          >
+            {value}
+          </Text>
+        ) : (
+          value
+        )}
         {resolvedRightIcon ? <View style={styles.icon}>{resolvedRightIcon}</View> : null}
       </View>
     </View>

package/src/components/MenuItem/MenuItem.tsx

@@ -22,6 +22,8 @@ export type MenuItemVariant = 'plain' | 'card'
 
 export interface MenuItemProps {
   label: string
+  /** Secondary text rendered below the label. */
+  subtitle?: string
   /**
    * Icon name from `@expo/vector-icons` rendered on the left.
    * See https://icons.expo.fyi.
@@ -59,6 +61,7 @@ export interface MenuItemProps {
 
 export function MenuItem({
   label,
+  subtitle,
   iconName,
   icon,
   iconColor,
@@ -134,13 +137,24 @@ export function MenuItem({
           <View style={styles.iconContainer}>{resolvedIcon}</View>
         ) : null}
 
-        <Text
-          style={[styles.label, { color: colors.foreground }, labelStyle]}
-          numberOfLines={1}
-          allowFontScaling={true}
-        >
-          {label}
-        </Text>
+        <View style={styles.labelContainer}>
+          <Text
+            style={[styles.label, { color: colors.foreground }, labelStyle]}
+            numberOfLines={1}
+            allowFontScaling={true}
+          >
+            {label}
+          </Text>
+          {subtitle ? (
+            <Text
+              style={[styles.subtitle, { color: colors.foregroundMuted }]}
+              numberOfLines={1}
+              allowFontScaling={true}
+            >
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
 
         {rightRender !== undefined ? (
           <View 
@@ -186,10 +200,18 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
+  labelContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
   label: {
     fontFamily: 'Poppins-Medium',
     fontSize: ms(15),
-    flex: 1,
+  },
+  subtitle: {
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(12),
+    marginTop: vs(1),
   },
   rightContainer: {
     alignItems: 'flex-end',