@compsych/mobile-ui 1.0.8 → 1.0.10

package/src/icons/SnowflakeIcon.tsx

@@ -0,0 +1,86 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
+
+export function SnowflakeIcon({
+  size = 'medium',
+  color = DEFAULT_ICON_COLOR,
+}: IconProps) {
+  const { size: px, strokeWidth } = SIZE_MAP[size];
+  return (
+    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
+      <Path
+        d="M20 40L17.5 35L12 36"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M20 8L17.5 13L12 12"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M28 40L30.5 35L36 36"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M28 8L30.5 13L36 12"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M34 42L28 30H20"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M34 6L28 18L31 24"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M4 24H17L20 18"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M40 20L37 24L40 28"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M44 24H31L28 30"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M8 20L11 24L8 28"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M14 42L20 30L17 24"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M14 6L20 18H28"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+    </Svg>
+  );
+}

package/src/icons/StethoscopeIcon.tsx

@@ -0,0 +1,34 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
+
+export function StethoscopeIcon({
+  size = 'medium',
+  color = DEFAULT_ICON_COLOR,
+}: IconProps) {
+  const { size: px, strokeWidth } = SIZE_MAP[size];
+  return (
+    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
+      <Path d="M22 4V8" stroke={color} strokeWidth={strokeWidth} {...COMMON} />
+      <Path d="M10 4V8" stroke={color} strokeWidth={strokeWidth} {...COMMON} />
+      <Path
+        d="M10 6H8C6.93913 6 5.92172 6.42143 5.17157 7.17157C4.42143 7.92172 4 8.93913 4 10V18C4 21.1826 5.26428 24.2348 7.51472 26.4853C9.76516 28.7357 12.8174 30 16 30C19.1826 30 22.2348 28.7357 24.4853 26.4853C26.7357 24.2348 28 21.1826 28 18V10C28 8.93913 27.5786 7.92172 26.8284 7.17157C26.0783 6.42143 25.0609 6 24 6H22"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M16 30C16 33.1826 17.2643 36.2348 19.5147 38.4853C21.7652 40.7357 24.8174 42 28 42C31.1826 42 34.2348 40.7357 36.4853 38.4853C38.7357 36.2348 40 33.1826 40 30V24"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M40 24C42.2091 24 44 22.2091 44 20C44 17.7909 42.2091 16 40 16C37.7909 16 36 17.7909 36 20C36 22.2091 37.7909 24 40 24Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+    </Svg>
+  );
+}

package/src/icons/UserRoundIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
+
+export function UserRoundIcon({
+  size = 'medium',
+  color = DEFAULT_ICON_COLOR,
+}: IconProps) {
+  const { size: px, strokeWidth } = SIZE_MAP[size];
+  return (
+    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
+      <Path
+        d="M24 26C29.5228 26 34 21.5228 34 16C34 10.4772 29.5228 6 24 6C18.4772 6 14 10.4772 14 16C14 21.5228 18.4772 26 24 26Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M40 42C40 37.7565 38.3143 33.6869 35.3137 30.6863C32.3131 27.6857 28.2435 26 24 26C19.7565 26 15.6869 27.6857 12.6863 30.6863C9.68571 33.6869 8 37.7565 8 42"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+    </Svg>
+  );
+}

package/src/icons/WheatIcon.tsx

@@ -0,0 +1,62 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
+
+export function WheatIcon({
+  size = 'medium',
+  color = DEFAULT_ICON_COLOR,
+}: IconProps) {
+  const { size: px, strokeWidth } = SIZE_MAP[size];
+  return (
+    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
+      <Path
+        d="M4 44L32 16"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M6.94006 25.06L10.0001 22L13.0601 25.06C14.3669 26.372 15.1006 28.1483 15.1006 30C15.1006 31.8517 14.3669 33.628 13.0601 34.94L10.0001 38L6.94006 34.94C5.63326 33.628 4.89954 31.8517 4.89954 30C4.89954 28.1483 5.63326 26.372 6.94006 25.06Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M14.9401 17.06L18.0001 14L21.0601 17.06C22.3669 18.372 23.1006 20.1483 23.1006 22C23.1006 23.8517 22.3669 25.628 21.0601 26.94L18.0001 30L14.9401 26.94C13.6333 25.628 12.8995 23.8517 12.8995 22C12.8995 20.1483 13.6333 18.372 14.9401 17.06Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M22.9399 9.06L25.9999 6L29.0599 9.06C30.3667 10.372 31.1005 12.1483 31.1005 14C31.1005 15.8517 30.3667 17.628 29.0599 18.94L25.9999 22L22.9399 18.94C21.6331 17.628 20.8994 15.8517 20.8994 14C20.8994 12.1483 21.6331 10.372 22.9399 9.06Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M40 4H44V8C44 10.1217 43.1571 12.1566 41.6569 13.6569C40.1566 15.1571 38.1217 16 36 16H32V12C32 9.87827 32.8429 7.84344 34.3431 6.34315C35.8434 4.84285 37.8783 4 40 4Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M22.94 34.9399L26 37.9999L22.94 41.0599C21.628 42.3667 19.8517 43.1005 18 43.1005C16.1483 43.1005 14.372 42.3667 13.06 41.0599L10 37.9999L13.06 34.9399C14.372 33.6331 16.1483 32.8994 18 32.8994C19.8517 32.8994 21.628 33.6331 22.94 34.9399Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M30.94 26.9399L34 29.9999L30.94 33.0599C29.628 34.3667 27.8517 35.1005 26 35.1005C24.1483 35.1005 22.372 34.3667 21.06 33.0599L18 29.9999L21.06 26.9399C22.372 25.6331 24.1483 24.8994 26 24.8994C27.8517 24.8994 29.628 25.6331 30.94 26.9399Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+      <Path
+        d="M38.94 18.9399L42 21.9999L38.94 25.0599C37.628 26.3667 35.8517 27.1005 34 27.1005C32.1483 27.1005 30.372 26.3667 29.06 25.0599L26 21.9999L29.06 18.9399C30.372 17.6331 32.1483 16.8994 34 16.8994C35.8517 16.8994 37.628 17.6331 38.94 18.9399Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        {...COMMON}
+      />
+    </Svg>
+  );
+}

package/src/icons/index.ts

@@ -0,0 +1,63 @@
+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';
+
+export type { IconProps, IconSize, IconName } 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';
+
+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,
+};

package/src/icons/types.ts

@@ -0,0 +1,45 @@
+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';
+
+export const DEFAULT_ICON_COLOR = sys.colorRoles.surface.surface.sysOnSurface;
+
+export interface IconProps {
+  size?: IconSize;
+  color?: string;
+}
+
+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 },
+  };
+
+export const COMMON = {
+  fill: 'none',
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+};

package/src/index.ts

@@ -1,77 +1,165 @@
 // ComPsych Mobile UI — React Native Component Library
 // Version 1.0.0
 
-export { Alert } from './Alert';
-export type { AlertProps, AlertVariant, AlertSize } from './Alert';
-
-export { Avatar } from './Avatar';
-export type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar';
-
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeSize, BadgeStyle } from './Badge';
-
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSize } from './Breadcrumb';
-
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-
-export { Card } from './Card';
-export type { CardProps, CardVariant, CardSize } from './Card';
-
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxSize, CheckboxCheckedState } from './Checkbox';
-
-export { Chip } from './Chip';
-export type { ChipProps, ChipSize, ChipUsage } from './Chip';
-
-export { Divider } from './Divider';
-export type { DividerProps, DividerVariant, DividerWeight } from './Divider';
-
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps, EmptyStateStyle, EmptyStateViewport } from './EmptyState';
-
-export { List, ListItem } from './List';
-export type { ListProps, ListItemProps, ListItemType } from './List';
-
-export { Input } from './Input';
-export type { InputProps, InputSize } from './Input';
-
-export { PlanCard, PlanCardDropdownItem } from './PlanCard';
-export type { PlanCardProps, PlanCardItemData } from './PlanCard';
-
-export { Pagination } from './Pagination';
-export type { PaginationProps, PaginationSize } from './Pagination';
-
-export { ProgressTracker, ProgressBar } from './ProgressTracker';
-export type { ProgressTrackerProps, ProgressTrackerSize, ProgressBarProps, TrackerStep, StepState } from './ProgressTracker';
-
-export { RadioButton } from './RadioButton';
-export type { RadioButtonProps, RadioButtonSize } from './RadioButton';
-
-export { SegmentedControl } from './SegmentedControl';
-export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
-
-export { Slider } from './Slider';
-export type { SliderProps } from './Slider';
-
-export { Snackbar } from './Snackbar';
-export type { SnackbarProps, SnackbarVariant } from './Snackbar';
-
-export { Switch } from './Switch';
-export type { SwitchProps } from './Switch';
-
-export { Tooltip } from './Tooltip';
-export type { TooltipProps, TooltipVariant, TooltipDirection } from './Tooltip';
-
-export { ActionSheet } from './ActionSheet';
-export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
-
-export { BodyText } from './BodyText';
-export type { BodyTextProps, BodyVariant } from './BodyText';
-
-export { HeaderText } from './HeaderText';
-export type { HeaderTextProps, HeaderVariant } from './HeaderText';
+export { Alert } from './components/Alert';
+export type { AlertProps, AlertVariant, AlertSize } from './components/Alert';
+
+export { Avatar } from './components/Avatar';
+export type {
+  AvatarProps,
+  AvatarSize,
+  AvatarVariant,
+} from './components/Avatar';
+
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeSize, BadgeStyle } from './components/Badge';
+
+export { Breadcrumb } from './components/Breadcrumb';
+export type {
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSize,
+} from './components/Breadcrumb';
+
+export { Button } from './components/Button';
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonSize,
+} from './components/Button';
+
+export { ServiceCard } from './components/ServiceCard';
+export type {
+  ServiceCardProps,
+  ServiceCardVariant,
+  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,
+  CheckboxSize,
+  CheckboxCheckedState,
+} from './components/Checkbox';
+
+export { Chip } from './components/Chip';
+export type { ChipProps, ChipSize, ChipUsage } from './components/Chip';
+
+export { Divider } from './components/Divider';
+export type {
+  DividerProps,
+  DividerVariant,
+  DividerWeight,
+} from './components/Divider';
+
+export { EmptyState } from './components/EmptyState';
+export type {
+  EmptyStateProps,
+  EmptyStateStyle,
+  EmptyStateViewport,
+} from './components/EmptyState';
+
+export { List, ListItem } from './components/List';
+export type { ListProps, ListItemProps, ListItemType } from './components/List';
+
+export { Input } from './components/Input';
+export type { InputProps, InputSize } from './components/Input';
+
+export { PlanCard, PlanCardDropdownItem } from './components/PlanCard';
+export type { PlanCardProps, PlanCardItemData } from './components/PlanCard';
+
+export { Pagination } from './components/Pagination';
+export type { PaginationProps, PaginationSize } from './components/Pagination';
+
+export { ProgressTracker, ProgressBar } from './components/ProgressTracker';
+export type {
+  ProgressTrackerProps,
+  ProgressTrackerSize,
+  ProgressBarProps,
+  TrackerStep,
+  StepState,
+} from './components/ProgressTracker';
+
+export { RadioButton } from './components/RadioButton';
+export type {
+  RadioButtonProps,
+  RadioButtonSize,
+} from './components/RadioButton';
+
+export { SegmentedControl } from './components/SegmentedControl';
+export type {
+  SegmentedControlProps,
+  SegmentedControlOption,
+} from './components/SegmentedControl';
+
+export { SelectionCard } from './components/SelectionCard';
+export type {
+  SelectionCardProps,
+  SelectionCardSize,
+} from './components/SelectionCard';
+
+export { ScreenContainer } from './components/ScreenContainer';
+export type { ScreenContainerProps } from './components/ScreenContainer';
+
+export { Slider } from './components/Slider';
+export type { SliderProps } from './components/Slider';
+
+export { Snackbar } from './components/Snackbar';
+export type { SnackbarProps, SnackbarVariant } from './components/Snackbar';
+
+export { Switch } from './components/Switch';
+export type { SwitchProps } from './components/Switch';
+
+export { Tooltip } from './components/Tooltip';
+export type {
+  TooltipProps,
+  TooltipVariant,
+  TooltipDirection,
+} from './components/Tooltip';
+
+export { ActionSheet } from './components/ActionSheet';
+export type {
+  ActionSheetProps,
+  ActionSheetAction,
+} from './components/ActionSheet';
+
+export { BodyText } from './components/BodyText';
+export type { BodyTextProps, BodyVariant } from './components/BodyText';
+
+export { HeaderText } from './components/HeaderText';
+export type { HeaderTextProps, HeaderVariant } from './components/HeaderText';
 
 // Re-export tokens for consumers who need direct access
 export { sys } from './tokens';
+
+// Icons
+export {
+  UserRoundIcon,
+  GlobeIcon,
+  HandshakeIcon,
+  HeartHandshakeIcon,
+  AtomIcon,
+  HazeIcon,
+  HourglassIcon,
+  GraduationCapIcon,
+  HandHeartIcon,
+  IdCardIcon,
+  MessageCirclePlusIcon,
+  StethoscopeIcon,
+  BinocularsIcon,
+  FlagIcon,
+  MountainSnowIcon,
+  SnowflakeIcon,
+  FileChartColumnIncreasingIcon,
+  WheatIcon,
+} from './icons';
+export type { IconProps, IconSize, IconName } from './icons';
+export { ICON_MAP } from './icons';