@compsych-ui-components/react-native 4.0.4 → 4.0.14

package/src/components/PlanCard/index.js

@@ -0,0 +1,364 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get PlanCard () {
+        return PlanCard;
+    },
+    get PlanCardDropdownItem () {
+        return PlanCardDropdownItem;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+if (_reactnative.Platform.OS === 'android') {
+    _reactnative.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+}
+function PlanCardDropdownItem({ title, subtitle, checked = false, onToggle, onAudio, onOpen, showDivider = true }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    itemStyles.row,
+                    {
+                        paddingVertical: dim.spacing.padding.sysPadding16,
+                        gap: dim.spacing.padding.sysPadding12
+                    }
+                ],
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                        onPress: onToggle,
+                        accessibilityRole: "checkbox",
+                        accessibilityState: {
+                            checked
+                        },
+                        style: itemStyles.checkWrap,
+                        children: checked ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: [
+                                itemStyles.checkedCircle,
+                                {
+                                    borderRadius: dim.borderRadius.sysRadiusFull,
+                                    backgroundColor: cr.custom.success.sysSuccess
+                                }
+                            ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                name: "checkmark",
+                                size: 12,
+                                color: "#fff"
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: [
+                                itemStyles.uncheckedCircle,
+                                {
+                                    borderRadius: dim.borderRadius.sysRadiusFull,
+                                    borderColor: cr.outline.sysOutlineFixed
+                                }
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: itemStyles.textCol,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                                variant: "small",
+                                color: cr.surface.surface.sysOnSurface,
+                                children: title
+                            }),
+                            subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                                variant: "small",
+                                color: cr.surface.surface.sysOnSurfaceVariant,
+                                children: subtitle
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            itemStyles.actions,
+                            {
+                                gap: dim.spacing.padding.sysPadding8
+                            }
+                        ],
+                        children: [
+                            onAudio && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                onPress: onAudio,
+                                accessibilityRole: "button",
+                                accessibilityLabel: "Listen",
+                                style: ({ pressed })=>[
+                                        itemStyles.actionBtn,
+                                        {
+                                            borderRadius: dim.borderRadius.sysRadiusFull,
+                                            borderWidth: dim.borderWidth.sysStrokeThin,
+                                            borderColor: cr.outline.sysOutline
+                                        },
+                                        pressed && itemStyles.pressed
+                                    ],
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: "headset-outline",
+                                    size: 16,
+                                    color: cr.surface.surface.sysOnSurface
+                                })
+                            }),
+                            onOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                onPress: onOpen,
+                                accessibilityRole: "button",
+                                accessibilityLabel: "Open",
+                                style: ({ pressed })=>[
+                                        itemStyles.actionBtn,
+                                        {
+                                            borderRadius: dim.borderRadius.sysRadiusFull,
+                                            borderWidth: dim.borderWidth.sysStrokeThin,
+                                            borderColor: cr.outline.sysOutline
+                                        },
+                                        pressed && itemStyles.pressed
+                                    ],
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: "arrow-up-circle-outline",
+                                    size: 16,
+                                    color: cr.surface.surface.sysOnSurface
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showDivider && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    itemStyles.divider,
+                    {
+                        backgroundColor: cr.outline.sysOutline
+                    }
+                ]
+            })
+        ]
+    });
+}
+const itemStyles = _reactnative.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    checkWrap: {
+        width: 20,
+        height: 20,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    checkedCircle: {
+        width: 20,
+        height: 20,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    uncheckedCircle: {
+        width: 20,
+        height: 20,
+        borderWidth: 1.5
+    },
+    textCol: {
+        flex: 1,
+        gap: 2
+    },
+    actions: {
+        flexDirection: 'row'
+    },
+    actionBtn: {
+        width: 32,
+        height: 32,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    pressed: {
+        opacity: 0.7
+    },
+    divider: {
+        height: _reactnative.StyleSheet.hairlineWidth
+    }
+});
+function PlanCard({ title, icon, tag, items, expanded = false, onToggle, children, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    function handleToggle() {
+        if (_reactnative.Platform.OS !== 'web') {
+            _reactnative.LayoutAnimation.configureNext(_reactnative.LayoutAnimation.Presets.easeInEaseOut);
+        }
+        onToggle?.();
+    }
+    const hasContent = expanded && (children || items && items.length > 0);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            cardStyles.card,
+            {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderRadius: dim.borderRadius.sysRadiusMd,
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                borderColor: cr.outline.sysOutline,
+                padding: dim.spacing.padding.sysPadding16
+            },
+            style
+        ],
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    cardStyles.header,
+                    {
+                        gap: dim.spacing.padding.sysPadding12
+                    }
+                ],
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            cardStyles.left,
+                            {
+                                gap: dim.spacing.padding.sysPadding8
+                            }
+                        ],
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: [
+                                    cardStyles.iconCircle,
+                                    {
+                                        borderRadius: dim.borderRadius.sysRadiusFull,
+                                        backgroundColor: cr.accent.primary.sysPrimary
+                                    }
+                                ],
+                                children: icon ?? /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: "document-text-outline",
+                                    size: 16,
+                                    color: cr.accent.primary.sysOnPrimary
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                                variant: "medium",
+                                color: cr.surface.surface.sysOnSurface,
+                                children: title
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            cardStyles.right,
+                            {
+                                gap: dim.spacing.padding.sysPadding8
+                            }
+                        ],
+                        children: [
+                            tag && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: [
+                                    cardStyles.chip,
+                                    {
+                                        backgroundColor: cr.custom.info.sysInfoContainer,
+                                        borderRadius: dim.borderRadius.sysRadiusFull,
+                                        paddingHorizontal: dim.spacing.padding.sysPadding8,
+                                        paddingVertical: dim.spacing.padding.sysPadding4
+                                    }
+                                ],
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                                    variant: "small",
+                                    color: cr.custom.info.sysOnInfoContainer,
+                                    children: tag
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                onPress: handleToggle,
+                                accessibilityRole: "button",
+                                accessibilityLabel: expanded ? 'Collapse' : 'Expand',
+                                style: ({ pressed })=>[
+                                        cardStyles.toggleBtn,
+                                        {
+                                            borderRadius: dim.borderRadius.sysRadiusFull,
+                                            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer
+                                        },
+                                        pressed && cardStyles.pressed
+                                    ],
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: expanded ? 'remove' : 'add',
+                                    size: 16,
+                                    color: cr.surface.surface.sysOnSurfaceVariant
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            hasContent && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    cardStyles.content,
+                    {
+                        marginTop: dim.spacing.padding.sysPadding8
+                    }
+                ],
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            cardStyles.contentDivider,
+                            {
+                                backgroundColor: cr.outline.sysOutline,
+                                marginBottom: dim.spacing.padding.sysPadding4
+                            }
+                        ]
+                    }),
+                    children ? children : items.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(PlanCardDropdownItem, {
+                            ...item,
+                            showDivider: index < items.length - 1
+                        }, item.id))
+                ]
+            })
+        ]
+    });
+}
+const cardStyles = _reactnative.StyleSheet.create({
+    card: {
+        overflow: 'hidden'
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+    },
+    left: {
+        flex: 1
+    },
+    iconCircle: {
+        width: 28,
+        height: 28,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    right: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start'
+    },
+    chip: {},
+    toggleBtn: {
+        width: 20,
+        height: 20,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    pressed: {
+        opacity: 0.7
+    },
+    content: {},
+    contentDivider: {
+        height: _reactnative.StyleSheet.hairlineWidth
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/PlanCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/PlanCard/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport {\r\n  LayoutAnimation,\r\n  Platform,\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  UIManager,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nif (Platform.OS === 'android') {\r\n  UIManager.setLayoutAnimationEnabledExperimental?.(true);\r\n}\r\n\r\n// ─── Dropdown Item ───────────────────────────────────────────────────────────\r\n\r\nexport interface PlanCardItemData {\r\n  id: string;\r\n  title: string;\r\n  subtitle?: string;\r\n  checked?: boolean;\r\n  onToggle?: () => void;\r\n  onAudio?: () => void;\r\n  onOpen?: () => void;\r\n}\r\n\r\ninterface DropdownItemProps extends PlanCardItemData {\r\n  showDivider?: boolean;\r\n}\r\n\r\nexport function PlanCardDropdownItem({\r\n  title,\r\n  subtitle,\r\n  checked = false,\r\n  onToggle,\r\n  onAudio,\r\n  onOpen,\r\n  showDivider = true,\r\n}: DropdownItemProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  return (\r\n    <View>\r\n      <View\r\n        style={[\r\n          itemStyles.row,\r\n          {\r\n            paddingVertical: dim.spacing.padding.sysPadding16,\r\n            gap: dim.spacing.padding.sysPadding12,\r\n          },\r\n        ]}\r\n      >\r\n        {/* Check indicator */}\r\n        <Pressable\r\n          onPress={onToggle}\r\n          accessibilityRole=\"checkbox\"\r\n          accessibilityState={{ checked }}\r\n          style={itemStyles.checkWrap}\r\n        >\r\n          {checked ? (\r\n            <View\r\n              style={[\r\n                itemStyles.checkedCircle,\r\n                {\r\n                  borderRadius: dim.borderRadius.sysRadiusFull,\r\n                  backgroundColor: cr.custom.success.sysSuccess,\r\n                },\r\n              ]}\r\n            >\r\n              <Ionicons name=\"checkmark\" size={12} color=\"#fff\" />\r\n            </View>\r\n          ) : (\r\n            <View\r\n              style={[\r\n                itemStyles.uncheckedCircle,\r\n                {\r\n                  borderRadius: dim.borderRadius.sysRadiusFull,\r\n                  borderColor: cr.outline.sysOutlineFixed,\r\n                },\r\n              ]}\r\n            />\r\n          )}\r\n        </Pressable>\r\n\r\n        {/* Text */}\r\n        <View style={itemStyles.textCol}>\r\n          <BodyText variant=\"small\" color={cr.surface.surface.sysOnSurface}>\r\n            {title}\r\n          </BodyText>\r\n          {subtitle && (\r\n            <BodyText\r\n              variant=\"small\"\r\n              color={cr.surface.surface.sysOnSurfaceVariant}\r\n            >\r\n              {subtitle}\r\n            </BodyText>\r\n          )}\r\n        </View>\r\n\r\n        {/* Action buttons */}\r\n        <View\r\n          style={[itemStyles.actions, { gap: dim.spacing.padding.sysPadding8 }]}\r\n        >\r\n          {onAudio && (\r\n            <Pressable\r\n              onPress={onAudio}\r\n              accessibilityRole=\"button\"\r\n              accessibilityLabel=\"Listen\"\r\n              style={({ pressed }) => [\r\n                itemStyles.actionBtn,\r\n                {\r\n                  borderRadius: dim.borderRadius.sysRadiusFull,\r\n                  borderWidth: dim.borderWidth.sysStrokeThin,\r\n                  borderColor: cr.outline.sysOutline,\r\n                },\r\n                pressed && itemStyles.pressed,\r\n              ]}\r\n            >\r\n              <Ionicons\r\n                name=\"headset-outline\"\r\n                size={16}\r\n                color={cr.surface.surface.sysOnSurface}\r\n              />\r\n            </Pressable>\r\n          )}\r\n          {onOpen && (\r\n            <Pressable\r\n              onPress={onOpen}\r\n              accessibilityRole=\"button\"\r\n              accessibilityLabel=\"Open\"\r\n              style={({ pressed }) => [\r\n                itemStyles.actionBtn,\r\n                {\r\n                  borderRadius: dim.borderRadius.sysRadiusFull,\r\n                  borderWidth: dim.borderWidth.sysStrokeThin,\r\n                  borderColor: cr.outline.sysOutline,\r\n                },\r\n                pressed && itemStyles.pressed,\r\n              ]}\r\n            >\r\n              <Ionicons\r\n                name=\"arrow-up-circle-outline\"\r\n                size={16}\r\n                color={cr.surface.surface.sysOnSurface}\r\n              />\r\n            </Pressable>\r\n          )}\r\n        </View>\r\n      </View>\r\n\r\n      {showDivider && (\r\n        <View\r\n          style={[\r\n            itemStyles.divider,\r\n            { backgroundColor: cr.outline.sysOutline },\r\n          ]}\r\n        />\r\n      )}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst itemStyles = StyleSheet.create({\r\n  row: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  checkWrap: {\r\n    width: 20,\r\n    height: 20,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  checkedCircle: {\r\n    width: 20,\r\n    height: 20,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  uncheckedCircle: {\r\n    width: 20,\r\n    height: 20,\r\n    borderWidth: 1.5,\r\n  },\r\n  textCol: {\r\n    flex: 1,\r\n    gap: 2,\r\n  },\r\n  actions: {\r\n    flexDirection: 'row',\r\n  },\r\n  actionBtn: {\r\n    width: 32,\r\n    height: 32,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  pressed: {\r\n    opacity: 0.7,\r\n  },\r\n  divider: {\r\n    height: StyleSheet.hairlineWidth,\r\n  },\r\n});\r\n\r\n// ─── Plan Card ────────────────────────────────────────────────────────────────\r\n\r\nexport interface PlanCardProps {\r\n  title: string;\r\n  icon?: React.ReactNode;\r\n  tag?: string;\r\n  items?: PlanCardItemData[];\r\n  expanded?: boolean;\r\n  onToggle?: () => void;\r\n  children?: React.ReactNode;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function PlanCard({\r\n  title,\r\n  icon,\r\n  tag,\r\n  items,\r\n  expanded = false,\r\n  onToggle,\r\n  children,\r\n  style,\r\n}: PlanCardProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  function handleToggle() {\r\n    if (Platform.OS !== 'web') {\r\n      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\r\n    }\r\n    onToggle?.();\r\n  }\r\n\r\n  const hasContent = expanded && (children || (items && items.length > 0));\r\n\r\n  return (\r\n    <View\r\n      style={[\r\n        cardStyles.card,\r\n        {\r\n          backgroundColor:\r\n            cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n          borderRadius: dim.borderRadius.sysRadiusMd,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n          borderColor: cr.outline.sysOutline,\r\n          padding: dim.spacing.padding.sysPadding16,\r\n        },\r\n        style,\r\n      ]}\r\n    >\r\n      {/* Header */}\r\n      <View\r\n        style={[cardStyles.header, { gap: dim.spacing.padding.sysPadding12 }]}\r\n      >\r\n        {/* Left: icon + title stacked */}\r\n        <View\r\n          style={[cardStyles.left, { gap: dim.spacing.padding.sysPadding8 }]}\r\n        >\r\n          <View\r\n            style={[\r\n              cardStyles.iconCircle,\r\n              {\r\n                borderRadius: dim.borderRadius.sysRadiusFull,\r\n                backgroundColor: cr.accent.primary.sysPrimary,\r\n              },\r\n            ]}\r\n          >\r\n            {icon ?? (\r\n              <Ionicons\r\n                name=\"document-text-outline\"\r\n                size={16}\r\n                color={cr.accent.primary.sysOnPrimary}\r\n              />\r\n            )}\r\n          </View>\r\n          <BodyText variant=\"medium\" color={cr.surface.surface.sysOnSurface}>\r\n            {title}\r\n          </BodyText>\r\n        </View>\r\n\r\n        {/* Right: tag chip + toggle */}\r\n        <View\r\n          style={[cardStyles.right, { gap: dim.spacing.padding.sysPadding8 }]}\r\n        >\r\n          {tag && (\r\n            <View\r\n              style={[\r\n                cardStyles.chip,\r\n                {\r\n                  backgroundColor: cr.custom.info.sysInfoContainer,\r\n                  borderRadius: dim.borderRadius.sysRadiusFull,\r\n                  paddingHorizontal: dim.spacing.padding.sysPadding8,\r\n                  paddingVertical: dim.spacing.padding.sysPadding4,\r\n                },\r\n              ]}\r\n            >\r\n              <BodyText\r\n                variant=\"small\"\r\n                color={cr.custom.info.sysOnInfoContainer}\r\n              >\r\n                {tag}\r\n              </BodyText>\r\n            </View>\r\n          )}\r\n          <Pressable\r\n            onPress={handleToggle}\r\n            accessibilityRole=\"button\"\r\n            accessibilityLabel={expanded ? 'Collapse' : 'Expand'}\r\n            style={({ pressed }) => [\r\n              cardStyles.toggleBtn,\r\n              {\r\n                borderRadius: dim.borderRadius.sysRadiusFull,\r\n                backgroundColor:\r\n                  cr.surface.surfaceContainer.sysSurfaceContainer,\r\n              },\r\n              pressed && cardStyles.pressed,\r\n            ]}\r\n          >\r\n            <Ionicons\r\n              name={expanded ? 'remove' : 'add'}\r\n              size={16}\r\n              color={cr.surface.surface.sysOnSurfaceVariant}\r\n            />\r\n          </Pressable>\r\n        </View>\r\n      </View>\r\n\r\n      {/* Expanded content */}\r\n      {hasContent && (\r\n        <View\r\n          style={[\r\n            cardStyles.content,\r\n            { marginTop: dim.spacing.padding.sysPadding8 },\r\n          ]}\r\n        >\r\n          <View\r\n            style={[\r\n              cardStyles.contentDivider,\r\n              {\r\n                backgroundColor: cr.outline.sysOutline,\r\n                marginBottom: dim.spacing.padding.sysPadding4,\r\n              },\r\n            ]}\r\n          />\r\n          {children\r\n            ? children\r\n            : items!.map((item, index) => (\r\n                <PlanCardDropdownItem\r\n                  key={item.id}\r\n                  {...item}\r\n                  showDivider={index < items!.length - 1}\r\n                />\r\n              ))}\r\n        </View>\r\n      )}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst cardStyles = StyleSheet.create({\r\n  card: {\r\n    overflow: 'hidden',\r\n  },\r\n  header: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n  },\r\n  left: {\r\n    flex: 1,\r\n  },\r\n  iconCircle: {\r\n    width: 28,\r\n    height: 28,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  right: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    alignSelf: 'flex-start',\r\n  },\r\n  chip: {},\r\n  toggleBtn: {\r\n    width: 20,\r\n    height: 20,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  pressed: {\r\n    opacity: 0.7,\r\n  },\r\n  content: {},\r\n  contentDivider: {\r\n    height: StyleSheet.hairlineWidth,\r\n  },\r\n});\r\n"],"names":["PlanCard","PlanCardDropdownItem","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","title","subtitle","checked","onToggle","onAudio","onOpen","showDivider","colorRoles","cr","dimensions","dim","useTheme","View","style","itemStyles","row","paddingVertical","spacing","padding","sysPadding16","gap","sysPadding12","Pressable","onPress","accessibilityRole","accessibilityState","checkWrap","checkedCircle","borderRadius","sysRadiusFull","backgroundColor","custom","success","sysSuccess","Ionicons","name","size","color","uncheckedCircle","borderColor","outline","sysOutlineFixed","textCol","BodyText","variant","surface","sysOnSurface","sysOnSurfaceVariant","actions","sysPadding8","accessibilityLabel","pressed","actionBtn","borderWidth","sysStrokeThin","sysOutline","divider","StyleSheet","create","flexDirection","alignItems","width","height","justifyContent","flex","opacity","hairlineWidth","icon","tag","items","expanded","children","handleToggle","LayoutAnimation","configureNext","Presets","easeInEaseOut","hasContent","length","cardStyles","card","surfaceContainer","sysSurfaceContainerLowest","sysRadiusMd","header","left","iconCircle","accent","primary","sysPrimary","sysOnPrimary","right","chip","info","sysInfoContainer","paddingHorizontal","sysPadding4","sysOnInfoContainer","toggleBtn","sysSurfaceContainer","content","marginTop","contentDivider","marginBottom","map","item","index","id","overflow","alignSelf"],"mappings":"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"}

package/src/components/ProgressTracker/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ProgressBarProps {
+    /** 0–100 */
+    progress: number;
+}
+export declare function ProgressBar({ progress }: ProgressBarProps): React.JSX.Element;
+export type StepState = 'completed' | 'active' | 'pending';
+export interface TrackerStep {
+    label?: string;
+    /**
+     * `completed` → full green bar
+     * `active`    → full green bar (current step — same fill as completed)
+     * `pending`   → gray track only
+     */
+    state: StepState;
+}
+export type ProgressTrackerSize = 'sm' | 'lg';
+export interface ProgressTrackerProps {
+    steps: TrackerStep[];
+    size?: ProgressTrackerSize;
+    /** Render step labels above each bar. Default false. */
+    showLabels?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ProgressTracker({ steps, size, showLabels, style, }: ProgressTrackerProps): React.JSX.Element;

package/src/components/ProgressTracker/index.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ProgressBar () {
+        return ProgressBar;
+    },
+    get ProgressTracker () {
+        return ProgressTracker;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function ProgressBar({ progress }) {
+    const { colorRoles: cr } = (0, _theme.useTheme)();
+    const clamped = Math.min(100, Math.max(0, progress));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityValue: {
+            min: 0,
+            max: 100,
+            now: clamped
+        },
+        style: [
+            styles.track,
+            {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerHighest
+            }
+        ],
+        children: clamped > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            style: [
+                styles.fill,
+                {
+                    width: `${clamped}%`,
+                    backgroundColor: cr.custom.success.sysSuccess
+                }
+            ]
+        })
+    });
+}
+function stepProgress(state) {
+    return state === 'pending' ? 0 : 100;
+}
+function ProgressTracker({ steps, size = 'lg', showLabels = false, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                letterSpacing: ts.labelSmall.sysTracking,
+                labelBarGap: dim.spacing.padding.sysPadding8,
+                stepGap: dim.spacing.padding.sysPadding4
+            },
+            lg: {
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                labelBarGap: dim.spacing.padding.sysPadding16,
+                stepGap: dim.spacing.padding.sysPadding8
+            }
+        }), [
+        ts,
+        dim
+    ]);
+    const s = sizeTokens[size];
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            styles.row,
+            {
+                gap: s.stepGap
+            },
+            style
+        ],
+        children: steps.map((step, i)=>{
+            const isActive = step.state !== 'pending';
+            const labelColor = isActive ? cr.surface.surface.sysOnSurface : cr.surface.surface.sysOnSurfaceVariant;
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: styles.step,
+                children: [
+                    showLabels && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: {
+                            color: labelColor,
+                            fontSize: s.fontSize,
+                            lineHeight: s.lineHeight,
+                            letterSpacing: s.letterSpacing,
+                            includeFontPadding: false,
+                            marginBottom: s.labelBarGap
+                        },
+                        numberOfLines: 1,
+                        children: step.label
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(ProgressBar, {
+                        progress: stepProgress(step.state)
+                    })
+                ]
+            }, i);
+        })
+    });
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared styles
+// ─────────────────────────────────────────────────────────────────────────────
+const styles = _reactnative.StyleSheet.create({
+    // ProgressBar
+    track: {
+        height: 4,
+        width: '100%',
+        borderRadius: 9999,
+        overflow: 'hidden'
+    },
+    fill: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        borderRadius: 9999
+    },
+    // ProgressTracker
+    row: {
+        flexDirection: 'row',
+        alignItems: 'flex-start'
+    },
+    step: {
+        flex: 1,
+        minWidth: 0
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/ProgressTracker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ProgressTracker/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n// ProgressBar — standalone horizontal fill bar (0–100)\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n\r\nexport interface ProgressBarProps {\r\n  /** 0–100 */\r\n  progress: number;\r\n}\r\n\r\nexport function ProgressBar({ progress }: ProgressBarProps) {\r\n  const { colorRoles: cr } = useTheme();\r\n  const clamped = Math.min(100, Math.max(0, progress));\r\n\r\n  return (\r\n    <View\r\n      accessible\r\n      accessibilityRole=\"progressbar\"\r\n      accessibilityValue={{ min: 0, max: 100, now: clamped }}\r\n      style={[\r\n        styles.track,\r\n        {\r\n          backgroundColor:\r\n            cr.surface.surfaceContainer.sysSurfaceContainerHighest,\r\n        },\r\n      ]}\r\n    >\r\n      {clamped > 0 && (\r\n        <View\r\n          style={[\r\n            styles.fill,\r\n            {\r\n              width: `${clamped}%`,\r\n              backgroundColor: cr.custom.success.sysSuccess,\r\n            },\r\n          ]}\r\n        />\r\n      )}\r\n    </View>\r\n  );\r\n}\r\n\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n// ProgressTracker — multi-step bar tracker\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n\r\nexport type StepState = 'completed' | 'active' | 'pending';\r\n\r\nexport interface TrackerStep {\r\n  label?: string;\r\n  /**\r\n   * `completed` → full green bar\r\n   * `active`    → full green bar (current step — same fill as completed)\r\n   * `pending`   → gray track only\r\n   */\r\n  state: StepState;\r\n}\r\n\r\nexport type ProgressTrackerSize = 'sm' | 'lg';\r\n\r\nexport interface ProgressTrackerProps {\r\n  steps: TrackerStep[];\r\n  size?: ProgressTrackerSize;\r\n  /** Render step labels above each bar. Default false. */\r\n  showLabels?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nfunction stepProgress(state: StepState): number {\r\n  return state === 'pending' ? 0 : 100;\r\n}\r\n\r\nexport function ProgressTracker({\r\n  steps,\r\n  size = 'lg',\r\n  showLabels = false,\r\n  style,\r\n}: ProgressTrackerProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      sm: {\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        letterSpacing: ts.labelSmall.sysTracking,\r\n        labelBarGap: dim.spacing.padding.sysPadding8,\r\n        stepGap: dim.spacing.padding.sysPadding4,\r\n      },\r\n      lg: {\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        labelBarGap: dim.spacing.padding.sysPadding16,\r\n        stepGap: dim.spacing.padding.sysPadding8,\r\n      },\r\n    }),\r\n    [ts, dim],\r\n  );\r\n\r\n  const s = sizeTokens[size];\r\n\r\n  return (\r\n    <View style={[styles.row, { gap: s.stepGap }, style]}>\r\n      {steps.map((step, i) => {\r\n        const isActive = step.state !== 'pending';\r\n        const labelColor = isActive\r\n          ? cr.surface.surface.sysOnSurface\r\n          : cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n        return (\r\n          <View key={i} style={styles.step}>\r\n            {showLabels && (\r\n              <Text\r\n                style={{\r\n                  color: labelColor,\r\n                  fontSize: s.fontSize,\r\n                  lineHeight: s.lineHeight,\r\n                  letterSpacing: s.letterSpacing,\r\n                  includeFontPadding: false,\r\n                  marginBottom: s.labelBarGap,\r\n                }}\r\n                numberOfLines={1}\r\n              >\r\n                {step.label}\r\n              </Text>\r\n            )}\r\n            <ProgressBar progress={stepProgress(step.state)} />\r\n          </View>\r\n        );\r\n      })}\r\n    </View>\r\n  );\r\n}\r\n\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n// Shared styles\r\n// ─────────────────────────────────────────────────────────────────────────────\r\n\r\nconst styles = StyleSheet.create({\r\n  // ProgressBar\r\n  track: {\r\n    height: 4,\r\n    width: '100%',\r\n    borderRadius: 9999,\r\n    overflow: 'hidden',\r\n  },\r\n  fill: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    bottom: 0,\r\n    left: 0,\r\n    borderRadius: 9999,\r\n  },\r\n  // ProgressTracker\r\n  row: {\r\n    flexDirection: 'row',\r\n    alignItems: 'flex-start',\r\n  },\r\n  step: {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  },\r\n});\r\n"],"names":["ProgressBar","ProgressTracker","progress","colorRoles","cr","useTheme","clamped","Math","min","max","View","accessible","accessibilityRole","accessibilityValue","now","style","styles","track","backgroundColor","surface","surfaceContainer","sysSurfaceContainerHighest","fill","width","custom","success","sysSuccess","stepProgress","state","steps","size","showLabels","dimensions","dim","typeScale","ts","sizeTokens","useMemo","sm","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking","labelBarGap","spacing","padding","sysPadding8","stepGap","sysPadding4","lg","labelMedium","sysPadding16","s","row","gap","map","step","i","isActive","labelColor","sysOnSurface","sysOnSurfaceVariant","Text","color","includeFontPadding","marginBottom","numberOfLines","label","StyleSheet","create","height","borderRadius","overflow","position","top","bottom","left","flexDirection","alignItems","flex","minWidth"],"mappings":"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"}

package/src/components/PromotionCard/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+export type PromotionCardVariant = 'filled' | 'tonal';
+export type PromotionCardUsage = 'neutral' | 'informative' | 'positive' | 'danger' | 'warning' | 'image';
+export type PromotionCardSize = 'md' | 'lg';
+export interface PromotionCardProps {
+    size?: PromotionCardSize;
+    variant?: PromotionCardVariant;
+    usage?: PromotionCardUsage;
+    title?: string;
+    description?: string;
+    chipLabel?: string;
+    chipIcon?: React.ReactNode;
+    image?: ImageSourcePropType;
+    progress?: number;
+    showProgressBar?: boolean;
+    showRingTimer?: boolean;
+    onPress?: () => void;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PromotionCard({ size, variant, usage, title, description, chipLabel, chipIcon, image, progress, showProgressBar, showRingTimer, onPress, disabled, accessibilityLabel, style, }: PromotionCardProps): React.JSX.Element;