@compsych/mobile-ui 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,6 +32,7 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "expo-font": ">=13.0.0",
+    "lucide-react-native": ">=0.400.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
     "react-native-svg": ">=15.0.0"

package/src/components/SelectionCard/index.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Ionicons } from '@expo/vector-icons';
 
-import { ICON_MAP, type IconName } from '../../icons';
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 import { HeaderText } from '../HeaderText';
@@ -53,7 +53,8 @@ export function SelectionCard({
     [cr],
   );
 
-  const IconComponent = icon ? ICON_MAP[icon] : null;
+  const LucideIcon = icon ? resolveIcon(icon) : null;
+  const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['small'];
 
   const a11yState = {
     disabled,
@@ -102,9 +103,9 @@ export function SelectionCard({
           style,
         ]}
       >
-        {IconComponent && (
+        {LucideIcon && (
           <View style={styles.smIconWrap}>
-            <IconComponent size="small" color={iconColor} />
+            <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
           </View>
         )}
         <BodyText
@@ -131,7 +132,7 @@ export function SelectionCard({
     ? cr.accent.primary.sysPrimary
     : cr.surface.surface.sysOnSurface;
 
-  const iconCircle = IconComponent ? (
+  const iconCircle = LucideIcon ? (
     <View
       style={[
         styles.mdIconCircle,
@@ -142,7 +143,7 @@ export function SelectionCard({
         },
       ]}
     >
-      <IconComponent size="small" color={iconColor} />
+      <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
     </View>
   ) : null;
 

package/src/components/ServiceCard/index.tsx

@@ -10,9 +10,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { Ionicons } from '@expo/vector-icons';
-
-import { ICON_MAP, type IconName } from '../../icons';
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
@@ -146,7 +144,6 @@ export function ServiceCard({
         iconSize: 24,
         iconSizeName: 'small' as const,
         titleVariant: 'medium' as const,
-        descVariant: 'small' as const,
         showChevron: true,
       },
       md: {
@@ -158,7 +155,6 @@ export function ServiceCard({
         iconSize: 32,
         iconSizeName: 'medium' as const,
         titleVariant: 'medium' as const,
-        descVariant: 'small' as const,
         showChevron: false,
       },
       lg: {
@@ -170,7 +166,6 @@ export function ServiceCard({
         iconSize: 32,
         iconSizeName: 'large' as const,
         titleVariant: 'large' as const,
-        descVariant: 'small' as const,
         showChevron: false,
       },
     }),
@@ -181,10 +176,12 @@ export function ServiceCard({
   const s = sizeTokens[size];
   const isRow = s.layout === 'row';
 
-  const IconComponent = icon ? ICON_MAP[icon] : null;
+  const LucideIcon = icon ? resolveIcon(icon) : null;
+  const ChevronRight = resolveIcon('ChevronRight');
   const iconColor = v.iconBadgeColor ?? v.titleColor;
-  const renderedIcon = IconComponent ? (
-    <IconComponent size={s.iconSizeName} color={iconColor} />
+  const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP[s.iconSizeName];
+  const renderedIcon = LucideIcon ? (
+    <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />
   ) : null;
 
   const outerStyle = [
@@ -217,7 +214,7 @@ export function ServiceCard({
           </BodyText>
         )}
         {!isRow && description && (
-          <BodyText variant={s.descVariant} color={v.descColor}>
+          <BodyText variant="small" color={v.descColor}>
             {description}
           </BodyText>
         )}
@@ -289,23 +286,10 @@ export function ServiceCard({
             {renderedIcon}
           </View>
         )}
-        <View style={styles.contentRow}>
-          {(title || description) && (
-            <View style={styles.contentText}>
-              {title && (
-                <BodyText variant={s.titleVariant} color={v.titleColor}>
-                  {title}
-                </BodyText>
-              )}
-              {description && (
-                <BodyText variant={s.descVariant} color={v.descColor}>
-                  {description}
-                </BodyText>
-              )}
-            </View>
-          )}
-          {buttonIcon}
-        </View>
+        {textBlock}
+        {isRow && ChevronRight && (
+          <ChevronRight size={20} color="#ffffff" strokeWidth={1.5} />
+        )}
         {children}
       </>
     );
@@ -319,13 +303,8 @@ export function ServiceCard({
           </View>
         )}
         {textBlock}
-        {s.showChevron && (
-          <Ionicons
-            name="chevron-forward"
-            size={20}
-            color={v.chevronColor}
-            accessible={false}
-          />
+        {s.showChevron && ChevronRight && (
+          <ChevronRight size={20} color={v.chevronColor} strokeWidth={1.5} />
         )}
         {children}
       </>
@@ -339,24 +318,20 @@ export function ServiceCard({
             {renderedIcon}
           </View>
         )}
-        <View style={styles.contentRow}>
-          {(title || description) && (
-            <View style={styles.contentText}>
-              {title && (
-                <BodyText variant={s.titleVariant} color={v.titleColor}>
-                  {title}
-                </BodyText>
-              )}
-              {description && (
-                <BodyText variant={s.descVariant} color={v.descColor}>
-                  {description}
-                </BodyText>
-              )}
-            </View>
-          )}
-          {buttonIcon}
-        </View>
+        {textBlock}
         {children}
+        {buttonIcon && (
+          <View
+            style={{
+              position: 'absolute',
+              bottom: s.paddingV,
+              right: s.paddingH,
+            }}
+            pointerEvents="none"
+          >
+            {buttonIcon}
+          </View>
+        )}
       </>
     );
   }
@@ -402,16 +377,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
-  contentRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    alignSelf: 'stretch',
-    gap: 16,
-  },
-  contentText: {
-    flex: 1,
-    minWidth: 0,
-  },
   doubledIconBadge: {
     width: 48,
     height: 48,

package/src/icons/index.ts

@@ -1,63 +1,16 @@
-import { AtomIcon } from './AtomIcon';
-import { BinocularsIcon } from './BinocularsIcon';
-import { FileChartColumnIncreasingIcon } from './FileChartColumnIncreasingIcon';
-import { FlagIcon } from './FlagIcon';
-import { GlobeIcon } from './GlobeIcon';
-import { GraduationCapIcon } from './GraduationCapIcon';
-import { HandHeartIcon } from './HandHeartIcon';
-import { HandshakeIcon } from './HandshakeIcon';
-import { HazeIcon } from './HazeIcon';
-import { HeartHandshakeIcon } from './HeartHandshakeIcon';
-import { HourglassIcon } from './HourglassIcon';
-import { IdCardIcon } from './IdCardIcon';
-import { MessageCirclePlusIcon } from './MessageCirclePlusIcon';
-import { MountainSnowIcon } from './MountainSnowIcon';
-import { SnowflakeIcon } from './SnowflakeIcon';
-import { StethoscopeIcon } from './StethoscopeIcon';
-import { UserRoundIcon } from './UserRoundIcon';
-import { WheatIcon } from './WheatIcon';
-import type { IconName, IconProps } from './types';
+import type { LucideIcon } from 'lucide-react-native';
 
 export type { IconProps, IconSize, IconName } from './types';
+export { DEFAULT_ICON_COLOR, SIZE_MAP } from './types';
 
-export { UserRoundIcon } from './UserRoundIcon';
-export { GlobeIcon } from './GlobeIcon';
-export { HandshakeIcon } from './HandshakeIcon';
-export { HeartHandshakeIcon } from './HeartHandshakeIcon';
-export { AtomIcon } from './AtomIcon';
-export { HazeIcon } from './HazeIcon';
-export { HourglassIcon } from './HourglassIcon';
-export { GraduationCapIcon } from './GraduationCapIcon';
-export { HandHeartIcon } from './HandHeartIcon';
-export { IdCardIcon } from './IdCardIcon';
-export { MessageCirclePlusIcon } from './MessageCirclePlusIcon';
-export { StethoscopeIcon } from './StethoscopeIcon';
-export { BinocularsIcon } from './BinocularsIcon';
-export { FlagIcon } from './FlagIcon';
-export { MountainSnowIcon } from './MountainSnowIcon';
-export { SnowflakeIcon } from './SnowflakeIcon';
-export { FileChartColumnIncreasingIcon } from './FileChartColumnIncreasingIcon';
-export { WheatIcon } from './WheatIcon';
+/**
+ * Resolves an icon name to a Lucide React Native component.
+ * Accepts both "StethoscopeIcon" (trailing Icon suffix) and "Stethoscope".
+ * Returns undefined if the icon name is not found in lucide-react-native.
+ */
+export function resolveIcon(name: string): LucideIcon | undefined {
+  const componentName = name.endsWith('Icon') ? name.slice(0, -4) : name;
 
-type IconComponent = (props: IconProps) => React.JSX.Element;
-
-export const ICON_MAP: Record<IconName, IconComponent> = {
-  UserRoundIcon,
-  GlobeIcon,
-  HandshakeIcon,
-  HeartHandshakeIcon,
-  AtomIcon,
-  HazeIcon,
-  HourglassIcon,
-  GraduationCapIcon,
-  HandHeartIcon,
-  IdCardIcon,
-  MessageCirclePlusIcon,
-  StethoscopeIcon,
-  BinocularsIcon,
-  FlagIcon,
-  MountainSnowIcon,
-  SnowflakeIcon,
-  FileChartColumnIncreasingIcon,
-  WheatIcon,
-};
+  const icons = require('lucide-react-native') as Record<string, unknown>;
+  return icons[componentName] as LucideIcon | undefined;
+}

package/src/icons/types.ts

@@ -2,25 +2,9 @@ import { sys } from '../tokens';
 
 export type IconSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
-export type IconName =
-  | 'UserRoundIcon'
-  | 'GlobeIcon'
-  | 'HandshakeIcon'
-  | 'HeartHandshakeIcon'
-  | 'AtomIcon'
-  | 'HazeIcon'
-  | 'HourglassIcon'
-  | 'GraduationCapIcon'
-  | 'HandHeartIcon'
-  | 'IdCardIcon'
-  | 'MessageCirclePlusIcon'
-  | 'StethoscopeIcon'
-  | 'BinocularsIcon'
-  | 'FlagIcon'
-  | 'MountainSnowIcon'
-  | 'SnowflakeIcon'
-  | 'FileChartColumnIncreasingIcon'
-  | 'WheatIcon';
+/** Any Lucide icon component name, with or without the trailing "Icon" suffix.
+ *  Examples: "Stethoscope", "StethoscopeIcon", "UserRound", "UserRoundIcon" */
+export type IconName = string;
 
 export const DEFAULT_ICON_COLOR = sys.colorRoles.surface.surface.sysOnSurface;
 
@@ -32,10 +16,10 @@ export interface IconProps {
 export const SIZE_MAP: Record<IconSize, { size: number; strokeWidth: number }> =
   {
     xsmall: { size: 16, strokeWidth: 1 },
-    small: { size: 20, strokeWidth: 1.5 },
-    medium: { size: 24, strokeWidth: 2 },
-    large: { size: 32, strokeWidth: 2 },
-    xlarge: { size: 48, strokeWidth: 2 },
+    small: { size: 20, strokeWidth: 1 },
+    medium: { size: 24, strokeWidth: 1.5 },
+    large: { size: 32, strokeWidth: 1.5 },
+    xlarge: { size: 48, strokeWidth: 1.5 },
   };
 
 export const COMMON = {

package/src/index.ts

@@ -35,14 +35,6 @@ export type {
   ServiceCardSize,
 } from './components/ServiceCard';
 
-export { PromotionCard } from './components/PromotionCard';
-export type {
-  PromotionCardProps,
-  PromotionCardVariant,
-  PromotionCardUsage,
-  PromotionCardSize,
-} from './components/PromotionCard';
-
 export { Checkbox } from './components/Checkbox';
 export type {
   CheckboxProps,
@@ -153,26 +145,6 @@ export { sys } from './tokens';
 export { ThemeProvider, useTheme, defaultTheme } from './theme';
 export type { ThemeProviderProps, Theme, ThemeOverride } from './theme';
 
-// Icons
-export {
-  UserRoundIcon,
-  GlobeIcon,
-  HandshakeIcon,
-  HeartHandshakeIcon,
-  AtomIcon,
-  HazeIcon,
-  HourglassIcon,
-  GraduationCapIcon,
-  HandHeartIcon,
-  IdCardIcon,
-  MessageCirclePlusIcon,
-  StethoscopeIcon,
-  BinocularsIcon,
-  FlagIcon,
-  MountainSnowIcon,
-  SnowflakeIcon,
-  FileChartColumnIncreasingIcon,
-  WheatIcon,
-} from './icons';
+// Icons — resolved from lucide-react-native at runtime
+export { resolveIcon, SIZE_MAP, DEFAULT_ICON_COLOR } from './icons';
 export type { IconProps, IconSize, IconName } from './icons';
-export { ICON_MAP } from './icons';

package/src/components/PromotionCard/PromotionCard.test.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render } from '@testing-library/react-native';
-
-import { PromotionCard } from './index';
-
-describe('PromotionCard', () => {
-  it('renders title and description', () => {
-    const { getByText } = render(
-      <PromotionCard title="New feature" description="Check it out" />,
-    );
-    expect(getByText('New feature')).toBeTruthy();
-    expect(getByText('Check it out')).toBeTruthy();
-  });
-
-  it('renders chip label when provided', () => {
-    const { getByText } = render(
-      <PromotionCard title="Card" chipLabel="NEW" />,
-    );
-    expect(getByText('NEW')).toBeTruthy();
-  });
-
-  it('calls onPress when tapped', () => {
-    const onPress = jest.fn();
-    const { getByRole } = render(
-      <PromotionCard
-        title="Promo"
-        accessibilityLabel="Promo card"
-        onPress={onPress}
-      />,
-    );
-    fireEvent.press(getByRole('button', { name: 'Promo card' }));
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders disabled state without crashing', () => {
-    const { toJSON } = render(
-      <PromotionCard
-        title="Promo"
-        accessibilityLabel="Promo card"
-        onPress={jest.fn()}
-        disabled
-      />,
-    );
-    expect(toJSON()).toBeTruthy();
-  });
-
-  it.each(['filled', 'tonal'] as const)(
-    'renders variant "%s" without crashing',
-    (variant) => {
-      const { toJSON } = render(
-        <PromotionCard title="Card" variant={variant} />,
-      );
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-
-  it.each(['md', 'lg'] as const)(
-    'renders size "%s" without crashing',
-    (size) => {
-      const { toJSON } = render(<PromotionCard title="Card" size={size} />);
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-
-  it.each(['neutral', 'informative', 'positive', 'danger', 'warning'] as const)(
-    'renders usage "%s" without crashing',
-    (usage) => {
-      const { toJSON } = render(<PromotionCard title="Card" usage={usage} />);
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-});