npm - @compsych-ui-components/react-native - Versions diffs - 7.0.5 → 7.0.7 - Mend

@compsych-ui-components/react-native 7.0.5 → 7.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/package.json +3 -7
package/src/components/ActionSheet/index.d.ts +10 -1
package/src/components/ActionSheet/index.js +59 -28
package/src/components/ActionSheet/index.js.map +1 -1
package/src/components/BodyText/index.d.ts +1 -0
package/src/components/BodyText/index.js.map +1 -1
package/src/components/Button/index.d.ts +1 -1
package/src/components/Button/index.js +57 -37
package/src/components/Button/index.js.map +1 -1
package/src/components/ChatBubble/index.js +16 -14
package/src/components/ChatBubble/index.js.map +1 -1
package/src/components/ChatInput/index.d.ts +3 -1
package/src/components/ChatInput/index.js +105 -98
package/src/components/ChatInput/index.js.map +1 -1
package/src/components/Checkbox/index.js.map +1 -1
package/src/components/DateTimePicker/index.d.ts +16 -0
package/src/components/DateTimePicker/index.js +587 -0
package/src/components/DateTimePicker/index.js.map +1 -0
package/src/components/Input/index.js +2 -3
package/src/components/Input/index.js.map +1 -1
package/src/components/Pagination/index.js.map +1 -1
package/src/components/RadioButton/index.js.map +1 -1
package/src/components/ScreenContainer/index.d.ts +2 -0
package/src/components/ScreenContainer/index.js +2 -2
package/src/components/ScreenContainer/index.js.map +1 -1
package/src/components/SegmentedControl/index.d.ts +3 -3
package/src/components/SegmentedControl/index.js +27 -40
package/src/components/SegmentedControl/index.js.map +1 -1
package/src/components/SelectionCard/index.js +12 -9
package/src/components/SelectionCard/index.js.map +1 -1
package/src/components/ServiceCard/index.js +141 -47
package/src/components/ServiceCard/index.js.map +1 -1
package/src/components/StatusChip/index.d.ts +15 -0
package/src/components/StatusChip/index.js +80 -0
package/src/components/StatusChip/index.js.map +1 -0
package/src/icons/index.d.ts +8 -21
package/src/icons/index.js +12 -92
package/src/icons/index.js.map +1 -1
package/src/icons/types.d.ts +3 -1
package/src/icons/types.js +4 -4
package/src/icons/types.js.map +1 -1
package/src/index.d.ts +6 -5
package/src/index.js +16 -60
package/src/index.js.map +1 -1
package/src/components/PromotionCard/index.d.ts +0 -23
package/src/components/PromotionCard/index.js +0 -514
package/src/components/PromotionCard/index.js.map +0 -1
package/src/icons/AtomIcon.d.ts +0 -2
package/src/icons/AtomIcon.js +0 -85
package/src/icons/AtomIcon.js.map +0 -1
package/src/icons/BinocularsIcon.d.ts +0 -2
package/src/icons/BinocularsIcon.js +0 -103
package/src/icons/BinocularsIcon.js.map +0 -1
package/src/icons/FileChartColumnIncreasingIcon.d.ts +0 -2
package/src/icons/FileChartColumnIncreasingIcon.js +0 -97
package/src/icons/FileChartColumnIncreasingIcon.js.map +0 -1
package/src/icons/FlagIcon.d.ts +0 -2
package/src/icons/FlagIcon.js +0 -71
package/src/icons/FlagIcon.js.map +0 -1
package/src/icons/GlobeIcon.d.ts +0 -2
package/src/icons/GlobeIcon.js +0 -71
package/src/icons/GlobeIcon.js.map +0 -1
package/src/icons/GraduationCapIcon.d.ts +0 -2
package/src/icons/GraduationCapIcon.js +0 -85
package/src/icons/GraduationCapIcon.js.map +0 -1
package/src/icons/HandHeartIcon.d.ts +0 -2
package/src/icons/HandHeartIcon.js +0 -91
package/src/icons/HandHeartIcon.js.map +0 -1
package/src/icons/HandshakeIcon.d.ts +0 -2
package/src/icons/HandshakeIcon.js +0 -97
package/src/icons/HandshakeIcon.js.map +0 -1
package/src/icons/HazeIcon.d.ts +0 -2
package/src/icons/HazeIcon.js +0 -115
package/src/icons/HazeIcon.js.map +0 -1
package/src/icons/HeartHandshakeIcon.d.ts +0 -2
package/src/icons/HeartHandshakeIcon.js +0 -71
package/src/icons/HeartHandshakeIcon.js.map +0 -1
package/src/icons/HourglassIcon.d.ts +0 -2
package/src/icons/HourglassIcon.js +0 -91
package/src/icons/HourglassIcon.js.map +0 -1
package/src/icons/IdCardIcon.d.ts +0 -2
package/src/icons/IdCardIcon.js +0 -97
package/src/icons/IdCardIcon.js.map +0 -1
package/src/icons/MessageCirclePlusIcon.d.ts +0 -2
package/src/icons/MessageCirclePlusIcon.js +0 -85
package/src/icons/MessageCirclePlusIcon.js.map +0 -1
package/src/icons/MountainSnowIcon.d.ts +0 -2
package/src/icons/MountainSnowIcon.js +0 -79
package/src/icons/MountainSnowIcon.js.map +0 -1
package/src/icons/SnowflakeIcon.d.ts +0 -2
package/src/icons/SnowflakeIcon.js +0 -139
package/src/icons/SnowflakeIcon.js.map +0 -1
package/src/icons/StethoscopeIcon.d.ts +0 -2
package/src/icons/StethoscopeIcon.js +0 -97
package/src/icons/StethoscopeIcon.js.map +0 -1
package/src/icons/UserRoundIcon.d.ts +0 -2
package/src/icons/UserRoundIcon.js +0 -79
package/src/icons/UserRoundIcon.js.map +0 -1
package/src/icons/WheatIcon.d.ts +0 -2
package/src/icons/WheatIcon.js +0 -115
package/src/icons/WheatIcon.js.map +0 -1

package/src/components/Input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/Input/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n StyleSheet,\r\n Text,\r\n TextInput,\r\n TextInputProps,\r\n View,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type InputSize = 'sm' \| 'md' \| 'lg';\r\n\r\nexport interface InputProps extends Omit<TextInputProps, 'style'> {\r\n size?: InputSize;\r\n label?: string;\r\n helperText?: string;\r\n errorText?: string;\r\n invalid?: boolean;\r\n leadingIcon?: React.ReactNode;\r\n trailingIcon?: React.ReactNode;\r\n}\r\n\r\n// Focus-ring halo: 4px spread, sysPrimary08 colour — achieved with a fixed\r\n// 4px-padded wrapper whose background switches on focus.\r\nconst RING_SIZE = 4;\r\n\r\nexport function Input({\r\n size = 'md',\r\n label,\r\n helperText,\r\n errorText,\r\n invalid = false,\r\n leadingIcon,\r\n trailingIcon,\r\n editable = true,\r\n onFocus,\r\n onBlur,\r\n ...rest\r\n}: InputProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const SIZE_TOKENS = useMemo(\r\n () => ({\r\n sm: {\r\n height: 40,\r\n paddingH: dim.spacing.padding.sysPadding12,\r\n paddingV: dim.spacing.padding.sysPadding8,\r\n gap: dim.spacing.padding.sysPadding4,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusSm,\r\n iconSize: 20,\r\n },\r\n md: {\r\n height: 48,\r\n paddingH: dim.spacing.padding.sysPadding16,\r\n paddingV: dim.spacing.padding.sysPadding12,\r\n gap: dim.spacing.padding.sysPadding8,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusSm,\r\n iconSize: 20,\r\n },\r\n lg: {\r\n height: 56,\r\n paddingH: dim.spacing.padding.sysPadding20,\r\n paddingV: dim.spacing.padding.sysPadding16,\r\n gap: dim.spacing.padding.sysPadding8,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusMd,\r\n iconSize: 20,\r\n },\r\n }),\r\n [dim, ts],\r\n );\r\n\r\n const s = SIZE_TOKENS[size];\r\n const isDisabled = editable === false;\r\n const hasError = invalid \|\| !!errorText;\r\n\r\n // ── Border ──────────────────────────────────────────────────────────────\r\n const borderWidth =\r\n isFocused \|\| hasError\r\n ? dim.borderWidth.sysStrokeMedium\r\n : dim.borderWidth.sysStrokeThin;\r\n\r\n const borderColor = hasError\r\n ? cr.error.sysError\r\n : isFocused\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutlineVariant;\r\n\r\n // ── Text colours ─────────────────────────────────────────────────────────\r\n const textColor = cr.surface.surface.sysOnSurface;\r\n const placeholderColor = cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n // ── Helper / error text ──────────────────────────────────────────────────\r\n const supportingText = errorText ?? helperText;\r\n const supportingColor = hasError\r\n ? cr.error.sysError\r\n : cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n return (\r\n <View style={[styles.wrapper, isDisabled && styles.disabled]}>\r\n {/* Label /}\r\n {label && (\r\n <Text\r\n style={[\r\n styles.label,\r\n {\r\n color: hasError\r\n ? cr.error.sysError\r\n : cr.surface.surface.sysOnSurfaceVariant,\r\n fontSize: ts.labelMedium.sysFontSize,\r\n lineHeight: ts.labelMedium.sysLineHeight,\r\n },\r\n ]}\r\n >\r\n {label}\r\n </Text>\r\n )}\r\n\r\n {/ Focus-ring halo wrapper — always 4px padding, bg appears on focus /}\r\n <View\r\n style={{\r\n padding: RING_SIZE,\r\n borderRadius: s.radius + RING_SIZE,\r\n backgroundColor:\r\n isFocused && !hasError\r\n ? cr.transparent.primary.sysPrimary08\r\n : 'transparent',\r\n }}\r\n >\r\n {/ Input container /}\r\n <View\r\n style={{\r\n height: s.height,\r\n borderRadius: s.radius,\r\n borderWidth,\r\n borderColor,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n paddingHorizontal: s.paddingH,\r\n paddingVertical: s.paddingV,\r\n gap: s.gap,\r\n overflow: 'hidden',\r\n }}\r\n >\r\n {/ Leading icon /}\r\n {leadingIcon && (\r\n <View\r\n style={{\r\n width: s.iconSize,\r\n height: s.iconSize,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n }}\r\n >\r\n {leadingIcon}\r\n </View>\r\n )}\r\n\r\n {/ Text input /}\r\n <TextInput\r\n {...rest}\r\n editable={editable}\r\n accessibilityLabel={label ?? rest.placeholder}\r\n accessibilityHint={supportingText}\r\n accessibilityState={{ disabled: isDisabled }}\r\n onFocus={(e) => {\r\n setIsFocused(true);\r\n onFocus?.(e);\r\n }}\r\n onBlur={(e) => {\r\n setIsFocused(false);\r\n onBlur?.(e);\r\n }}\r\n style={{\r\n flex: 1,\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n color: textColor,\r\n includeFontPadding: false,\r\n // Reset RN TextInput default padding/margin\r\n padding: 0,\r\n margin: 0,\r\n }}\r\n placeholderTextColor={placeholderColor}\r\n />\r\n\r\n {/ Trailing icon /}\r\n {trailingIcon && (\r\n <View\r\n style={{\r\n width: s.iconSize,\r\n height: s.iconSize,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n }}\r\n >\r\n {trailingIcon}\r\n </View>\r\n )}\r\n </View>\r\n </View>\r\n\r\n {/ Supporting text: error message or helper text */}\r\n {supportingText && (\r\n <Text\r\n style={[\r\n styles.supporting,\r\n {\r\n color: supportingColor,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n },\r\n ]}\r\n >\r\n {supportingText}\r\n </Text>\r\n )}\r\n </View>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n wrapper: {\r\n gap: 4,\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n label: {\r\n fontWeight: '500',\r\n includeFontPadding: false,\r\n // indent to align with the input text (ring padding + horizontal padding)\r\n paddingLeft: RING_SIZE,\r\n },\r\n supporting: {\r\n includeFontPadding: false,\r\n paddingLeft: RING_SIZE,\r\n },\r\n});\r\n"],"names":["Input","RING_SIZE","size","label","helperText","errorText","invalid","leadingIcon","trailingIcon","editable","onFocus","onBlur","rest","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","isFocused","setIsFocused","useState","SIZE_TOKENS","useMemo","sm","height","paddingH","spacing","padding","sysPadding12","paddingV","sysPadding8","gap","sysPadding4","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","radius","borderRadius","sysRadiusSm","iconSize","md","sysPadding16","bodyMedium","lg","sysPadding20","sysRadiusMd","s","isDisabled","hasError","borderWidth","sysStrokeMedium","sysStrokeThin","borderColor","error","sysError","accent","primary","sysPrimary","outline","sysOutlineVariant","textColor","surface","sysOnSurface","placeholderColor","sysOnSurfaceVariant","supportingText","supportingColor","View","style","styles","wrapper","disabled","Text","color","labelMedium","backgroundColor","transparent","sysPrimary08","surfaceContainer","sysSurfaceContainerLowest","flexDirection","alignItems","paddingHorizontal","paddingVertical","overflow","width","justifyContent","flexShrink","TextInput","accessibilityLabel","placeholder","accessibilityHint","accessibilityState","e","flex","includeFontPadding","margin","placeholderTextColor","supporting","StyleSheet","create","opacity","fontWeight","paddingLeft"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/Input/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n StyleSheet,\r\n Text,\r\n TextInput,\r\n TextInputProps,\r\n View,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type InputSize = 'sm' \| 'md' \| 'lg';\r\n\r\nexport interface InputProps extends Omit<TextInputProps, 'style'> {\r\n size?: InputSize;\r\n label?: string;\r\n helperText?: string;\r\n errorText?: string;\r\n invalid?: boolean;\r\n leadingIcon?: React.ReactNode;\r\n trailingIcon?: React.ReactNode;\r\n}\r\n\r\n// Focus-ring halo: 4px spread, sysPrimary08 colour — achieved with a fixed\r\n// 4px-padded wrapper whose background switches on focus.\r\nconst RING_SIZE = 4;\r\n\r\nexport function Input({\r\n size = 'md',\r\n label,\r\n helperText,\r\n errorText,\r\n invalid = false,\r\n leadingIcon,\r\n trailingIcon,\r\n editable = true,\r\n onFocus,\r\n onBlur,\r\n ...rest\r\n}: InputProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const SIZE_TOKENS = useMemo(\r\n () => ({\r\n sm: {\r\n height: 40,\r\n paddingH: dim.spacing.padding.sysPadding12,\r\n paddingV: dim.spacing.padding.sysPadding8,\r\n gap: dim.spacing.padding.sysPadding4,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusSm,\r\n iconSize: 20,\r\n },\r\n md: {\r\n height: 48,\r\n paddingH: dim.spacing.padding.sysPadding16,\r\n paddingV: dim.spacing.padding.sysPadding12,\r\n gap: dim.spacing.padding.sysPadding8,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusSm,\r\n iconSize: 20,\r\n },\r\n lg: {\r\n height: 56,\r\n paddingH: dim.spacing.padding.sysPadding20,\r\n paddingV: dim.spacing.padding.sysPadding16,\r\n gap: dim.spacing.padding.sysPadding8,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n radius: dim.borderRadius.sysRadiusMd,\r\n iconSize: 20,\r\n },\r\n }),\r\n [dim, ts],\r\n );\r\n\r\n const s = SIZE_TOKENS[size];\r\n const isDisabled = editable === false;\r\n const hasError = invalid \|\| !!errorText;\r\n\r\n // ── Border ──────────────────────────────────────────────────────────────\r\n const borderWidth =\r\n isFocused \|\| hasError\r\n ? dim.borderWidth.sysStrokeMedium\r\n : dim.borderWidth.sysStrokeThin;\r\n\r\n const borderColor = hasError\r\n ? cr.error.sysError\r\n : isFocused\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutlineVariant;\r\n\r\n // ── Text colours ─────────────────────────────────────────────────────────\r\n const textColor = cr.surface.surface.sysOnSurface;\r\n const placeholderColor = cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n // ── Helper / error text ──────────────────────────────────────────────────\r\n const supportingText = errorText ?? helperText;\r\n const supportingColor = hasError\r\n ? cr.error.sysError\r\n : cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n return (\r\n <View style={[styles.wrapper, isDisabled && styles.disabled]}>\r\n {/* Label /}\r\n {label && (\r\n <Text\r\n style={[\r\n styles.label,\r\n {\r\n color: hasError\r\n ? cr.error.sysError\r\n : cr.surface.surface.sysOnSurfaceVariant,\r\n fontSize: ts.labelMedium.sysFontSize,\r\n lineHeight: ts.labelMedium.sysLineHeight,\r\n },\r\n ]}\r\n >\r\n {label}\r\n </Text>\r\n )}\r\n\r\n {/ Focus-ring halo wrapper — always 4px padding, bg appears on focus /}\r\n <View\r\n style={{\r\n padding: RING_SIZE,\r\n borderRadius: s.radius + RING_SIZE,\r\n backgroundColor:\r\n isFocused && !hasError\r\n ? cr.transparent.primary.sysPrimary08\r\n : 'transparent',\r\n }}\r\n >\r\n {/ Input container /}\r\n <View\r\n style={{\r\n height: s.height,\r\n borderRadius: s.radius,\r\n borderWidth,\r\n borderColor,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n paddingHorizontal: s.paddingH,\r\n paddingVertical: s.paddingV,\r\n gap: s.gap,\r\n }}\r\n >\r\n {/ Leading icon /}\r\n {leadingIcon && (\r\n <View\r\n style={{\r\n width: s.iconSize,\r\n height: s.iconSize,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n }}\r\n >\r\n {leadingIcon}\r\n </View>\r\n )}\r\n\r\n {/ Text input /}\r\n <TextInput\r\n {...rest}\r\n editable={editable}\r\n accessibilityLabel={label ?? rest.placeholder}\r\n accessibilityHint={supportingText}\r\n accessibilityState={{ disabled: isDisabled }}\r\n onFocus={(e) => {\r\n setIsFocused(true);\r\n onFocus?.(e);\r\n }}\r\n onBlur={(e) => {\r\n setIsFocused(false);\r\n onBlur?.(e);\r\n }}\r\n style={{\r\n flex: 1,\r\n fontSize: s.fontSize,\r\n color: textColor,\r\n includeFontPadding: false,\r\n textAlignVertical: 'center',\r\n // Reset RN TextInput default padding/margin\r\n padding: 0,\r\n margin: 0,\r\n }}\r\n placeholderTextColor={placeholderColor}\r\n />\r\n\r\n {/ Trailing icon /}\r\n {trailingIcon && (\r\n <View\r\n style={{\r\n width: s.iconSize,\r\n height: s.iconSize,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n }}\r\n >\r\n {trailingIcon}\r\n </View>\r\n )}\r\n </View>\r\n </View>\r\n\r\n {/ Supporting text: error message or helper text */}\r\n {supportingText && (\r\n <Text\r\n style={[\r\n styles.supporting,\r\n {\r\n color: supportingColor,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n },\r\n ]}\r\n >\r\n {supportingText}\r\n </Text>\r\n )}\r\n </View>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n wrapper: {\r\n gap: 4,\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n label: {\r\n fontWeight: '500',\r\n includeFontPadding: false,\r\n // indent to align with the input text (ring padding + horizontal padding)\r\n paddingLeft: RING_SIZE,\r\n },\r\n supporting: {\r\n includeFontPadding: false,\r\n paddingLeft: RING_SIZE,\r\n },\r\n});\r\n"],"names":["Input","RING_SIZE","size","label","helperText","errorText","invalid","leadingIcon","trailingIcon","editable","onFocus","onBlur","rest","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","isFocused","setIsFocused","useState","SIZE_TOKENS","useMemo","sm","height","paddingH","spacing","padding","sysPadding12","paddingV","sysPadding8","gap","sysPadding4","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","radius","borderRadius","sysRadiusSm","iconSize","md","sysPadding16","bodyMedium","lg","sysPadding20","sysRadiusMd","s","isDisabled","hasError","borderWidth","sysStrokeMedium","sysStrokeThin","borderColor","error","sysError","accent","primary","sysPrimary","outline","sysOutlineVariant","textColor","surface","sysOnSurface","placeholderColor","sysOnSurfaceVariant","supportingText","supportingColor","View","style","styles","wrapper","disabled","Text","color","labelMedium","backgroundColor","transparent","sysPrimary08","surfaceContainer","sysSurfaceContainerLowest","flexDirection","alignItems","paddingHorizontal","paddingVertical","width","justifyContent","flexShrink","TextInput","accessibilityLabel","placeholder","accessibilityHint","accessibilityState","e","flex","includeFontPadding","textAlignVertical","margin","placeholderTextColor","supporting","StyleSheet","create","opacity","fontWeight","paddingLeft"],"mappings":"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"}

package/src/components/Pagination/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n Text,\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\n\r\nexport type PaginationSize = 'sm' \| 'lg';\r\n\r\n// Shared token shape so sub-components accept either size\r\ntype SizeTokens = {\r\n itemSize: number;\r\n iconSize: number;\r\n fontSize: number;\r\n lineHeight: number;\r\n activeWeight: '500';\r\n inactiveWeight: '400';\r\n gap: number;\r\n hasPill: boolean;\r\n pillPaddingH: number;\r\n pillPaddingV: number;\r\n pillGap: number;\r\n};\r\n\r\nexport interface PaginationProps {\r\n size?: PaginationSize;\r\n totalPages: number;\r\n currentPage: number;\r\n onPageChange: (page: number) => void;\r\n /** How many page numbers to show on each side of the current page /\r\n siblingCount?: number;\r\n /* On mobile/compact layouts — renders only prev + next arrows (no page numbers) /\r\n compact?: boolean;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Pagination range logic ────────────────────────────────────────────────────\r\n\r\nfunction buildPageRange(\r\n total: number,\r\n current: number,\r\n siblings: number,\r\n): (number \| '...')[] {\r\n // Always show: 1, last, current, siblings\r\n const range: (number \| '...')[] = [];\r\n\r\n if (total <= 1) return [1];\r\n\r\n const left = Math.max(2, current - siblings);\r\n const right = Math.min(total - 1, current + siblings);\r\n\r\n // First page\r\n range.push(1);\r\n\r\n // Left ellipsis\r\n if (left > 2) range.push('...');\r\n\r\n // Middle range\r\n for (let i = left; i <= right; i++) range.push(i);\r\n\r\n // Right ellipsis\r\n if (right < total - 1) range.push('...');\r\n\r\n // Last page\r\n if (total > 1) range.push(total);\r\n\r\n return range;\r\n}\r\n\r\n// ── Active ring wrapper ───────────────────────────────────────────────────────\r\n// Mirrors the 4px padding + sysPrimary08 background pattern from Input.\r\n\r\nconst RING_SIZE = 4;\r\n\r\n// ── Page item ────────────────────────────────────────────────────────────────\r\n\r\ninterface PageItemProps {\r\n s: SizeTokens;\r\n page: number;\r\n isActive: boolean;\r\n onPress: () => void;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction PageItem({ s, page, isActive, onPress, cr }: PageItemProps) {\r\n const borderWidth = isActive ? 1.5 : 0;\r\n const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';\r\n const textColor = isActive\r\n ? cr.custom.info.sysOnInfoContainer\r\n : cr.surface.surface.sysOnSurface;\r\n const fontWeight = isActive ? s.activeWeight : s.inactiveWeight;\r\n\r\n return (\r\n <Pressable\r\n onPress={onPress}\r\n accessibilityRole=\"button\"\r\n accessibilityLabel={`Page ${page}`}\r\n accessibilityState={{ selected: isActive }}\r\n >\r\n {({ pressed }: { pressed: boolean }) => (\r\n // Ring wrapper — always RING_SIZE padding for layout stability;\r\n // background only when active (or focused — handled via pressed state here)\r\n <View\r\n style={{\r\n padding: RING_SIZE,\r\n borderRadius: s.itemSize / 2 + RING_SIZE,\r\n backgroundColor: isActive\r\n ? cr.transparent.primary.sysPrimary08\r\n : 'transparent',\r\n }}\r\n >\r\n <View\r\n style={{\r\n width: s.itemSize,\r\n height: s.itemSize,\r\n borderRadius: s.itemSize / 2,\r\n borderWidth,\r\n borderColor,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor:\r\n pressed && !isActive\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n }}\r\n >\r\n <Text\r\n style={{\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n fontWeight,\r\n color: textColor,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {page}\r\n </Text>\r\n </View>\r\n </View>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\n// ── Ellipsis item ─────────────────────────────────────────────────────────────\r\n\r\ninterface EllipsisItemProps {\r\n s: SizeTokens;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction EllipsisItem({ s, cr }: EllipsisItemProps) {\r\n return (\r\n <View\r\n accessible\r\n accessibilityLabel=\"More pages\"\r\n style={{\r\n width: s.itemSize + RING_SIZE 2,\r\n height: s.itemSize + RING_SIZE * 2,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n }}\r\n >\r\n <Text\r\n style={{\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n fontWeight: s.inactiveWeight,\r\n color: cr.surface.surface.sysOnSurfaceVariant,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n …\r\n </Text>\r\n </View>\r\n );\r\n}\r\n\r\n// ── Prev / Next button ────────────────────────────────────────────────────────\r\n\r\ninterface NavButtonProps {\r\n s: SizeTokens;\r\n direction: 'prev' \| 'next';\r\n disabled: boolean;\r\n onPress: () => void;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction NavButton({ s, direction, disabled, onPress, cr }: NavButtonProps) {\r\n const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole=\"button\"\r\n accessibilityLabel={direction === 'prev' ? 'Previous page' : 'Next page'}\r\n accessibilityState={{ disabled }}\r\n style={{ opacity: disabled ? 0.38 : 1 }}\r\n >\r\n {({ pressed }: { pressed: boolean }) => (\r\n <View\r\n style={{\r\n width: s.itemSize,\r\n height: s.itemSize,\r\n borderRadius: s.itemSize / 2,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor:\r\n pressed && !disabled\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n }}\r\n >\r\n <Ionicons\r\n name={iconName}\r\n size={s.iconSize}\r\n color={cr.surface.surface.sysOnSurface}\r\n />\r\n </View>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\n// ── Main component ────────────────────────────────────────────────────────────\r\n\r\nexport function Pagination({\r\n size = 'lg',\r\n totalPages,\r\n currentPage,\r\n onPageChange,\r\n siblingCount = 1,\r\n compact = false,\r\n style,\r\n}: PaginationProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n const sizeTokens = useMemo(\r\n () => ({\r\n sm: {\r\n itemSize: 32,\r\n iconSize: 20,\r\n fontSize: ts.labelMedium.sysFontSize,\r\n lineHeight: ts.labelMedium.sysLineHeight,\r\n activeWeight: '500' as const,\r\n inactiveWeight: '400' as const,\r\n gap: dim.spacing.padding.sysPadding8,\r\n // Pill container: sm has NO outer pill\r\n hasPill: false,\r\n pillPaddingH: 0,\r\n pillPaddingV: 0,\r\n pillGap: dim.spacing.padding.sysPadding8,\r\n },\r\n lg: {\r\n itemSize: 40,\r\n iconSize: 24,\r\n fontSize: ts.labelLarge.sysFontSize,\r\n lineHeight: ts.labelLarge.sysLineHeight,\r\n activeWeight: '500' as const,\r\n inactiveWeight: '400' as const,\r\n gap: dim.spacing.padding.sysPadding16,\r\n // Pill container: lg wraps in pill border\r\n hasPill: true,\r\n pillPaddingH: dim.spacing.padding.sysPadding12,\r\n pillPaddingV: dim.spacing.padding.sysPadding8,\r\n pillGap: dim.spacing.padding.sysPadding16,\r\n },\r\n }),\r\n [ts, dim],\r\n );\r\n\r\n const s = sizeTokens[size];\r\n const pages = buildPageRange(totalPages, currentPage, siblingCount);\r\n\r\n const prevDisabled = currentPage <= 1;\r\n const nextDisabled = currentPage >= totalPages;\r\n\r\n // ── Compact (prev + next only) ────────────────────────────────────────────\r\n const content = compact ? (\r\n <View style={[styles.inner, { gap: dim.spacing.padding.sysPadding4 }]}>\r\n <NavButton\r\n s={s}\r\n direction=\"prev\"\r\n disabled={prevDisabled}\r\n onPress={() => onPageChange(currentPage - 1)}\r\n cr={cr}\r\n />\r\n <NavButton\r\n s={s}\r\n direction=\"next\"\r\n disabled={nextDisabled}\r\n onPress={() => onPageChange(currentPage + 1)}\r\n cr={cr}\r\n />\r\n </View>\r\n ) : (\r\n // ── Full paginator ────────────────────────────────────────────────────\r\n <View style={[styles.inner, { gap: s.gap }]}>\r\n <NavButton\r\n s={s}\r\n direction=\"prev\"\r\n disabled={prevDisabled}\r\n onPress={() => onPageChange(currentPage - 1)}\r\n cr={cr}\r\n />\r\n\r\n <View style={[styles.pages, { gap: s.hasPill ? 0 : s.gap }]}>\r\n {pages.map((p, i) =>\r\n p === '...' ? (\r\n <EllipsisItem key={`ellipsis-${i}`} s={s} cr={cr} />\r\n ) : (\r\n <PageItem\r\n key={p}\r\n s={s}\r\n page={p}\r\n isActive={p === currentPage}\r\n onPress={() => onPageChange(p)}\r\n cr={cr}\r\n />\r\n ),\r\n )}\r\n </View>\r\n\r\n <NavButton\r\n s={s}\r\n direction=\"next\"\r\n disabled={nextDisabled}\r\n onPress={() => onPageChange(currentPage + 1)}\r\n cr={cr}\r\n />\r\n </View>\r\n );\r\n\r\n // ── Pill wrapper (lg only) ────────────────────────────────────────────────\r\n if (s.hasPill) {\r\n return (\r\n <View\r\n style={[\r\n styles.pill,\r\n {\r\n paddingHorizontal: s.pillPaddingH,\r\n paddingVertical: s.pillPaddingV,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: cr.outline.sysOutline,\r\n borderWidth: dim.borderWidth.sysStrokeThin,\r\n },\r\n style,\r\n ]}\r\n >\r\n {content}\r\n </View>\r\n );\r\n }\r\n\r\n // sm — wrap content in a View so style can be applied\r\n return <View style={style}>{content}</View>;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n pill: {\r\n alignSelf: 'flex-start',\r\n borderRadius: 9999,\r\n overflow: 'hidden',\r\n },\r\n inner: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n pages: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n});\r\n"],"names":["Pagination","buildPageRange","total","current","siblings","range","left","Math","max","right","min","push","i","RING_SIZE","PageItem","s","page","isActive","onPress","cr","borderWidth","borderColor","accent","primary","sysPrimary","textColor","custom","info","sysOnInfoContainer","surface","sysOnSurface","fontWeight","activeWeight","inactiveWeight","Pressable","accessibilityRole","accessibilityLabel","accessibilityState","selected","pressed","View","style","padding","borderRadius","itemSize","backgroundColor","transparent","sysPrimary08","width","height","alignItems","justifyContent","neutral","sysBlack10","Text","fontSize","lineHeight","color","includeFontPadding","EllipsisItem","accessible","sysOnSurfaceVariant","NavButton","direction","disabled","iconName","undefined","opacity","Ionicons","name","size","iconSize","totalPages","currentPage","onPageChange","siblingCount","compact","colorRoles","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","sm","labelMedium","sysFontSize","sysLineHeight","gap","spacing","sysPadding8","hasPill","pillPaddingH","pillPaddingV","pillGap","lg","labelLarge","sysPadding16","sysPadding12","pages","prevDisabled","nextDisabled","content","styles","inner","sysPadding4","map","p","pill","paddingHorizontal","paddingVertical","surfaceContainer","sysSurfaceContainerLowest","outline","sysOutline","sysStrokeThin","StyleSheet","create","alignSelf","overflow","flexDirection"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n Text,\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\n\r\nexport type PaginationSize = 'sm' \| 'lg';\r\n\r\n// Shared token shape so sub-components accept either size\r\ntype SizeTokens = {\r\n itemSize: number;\r\n iconSize: number;\r\n fontSize: number;\r\n lineHeight: number;\r\n activeWeight: '500';\r\n inactiveWeight: '400';\r\n gap: number;\r\n hasPill: boolean;\r\n pillPaddingH: number;\r\n pillPaddingV: number;\r\n pillGap: number;\r\n};\r\n\r\nexport interface PaginationProps {\r\n size?: PaginationSize;\r\n totalPages: number;\r\n currentPage: number;\r\n onPageChange: (page: number) => void;\r\n /** How many page numbers to show on each side of the current page /\r\n siblingCount?: number;\r\n /* On mobile/compact layouts — renders only prev + next arrows (no page numbers) /\r\n compact?: boolean;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Pagination range logic ────────────────────────────────────────────────────\r\n\r\nfunction buildPageRange(\r\n total: number,\r\n current: number,\r\n siblings: number,\r\n): (number \| '...')[] {\r\n // Always show: 1, last, current, siblings\r\n const range: (number \| '...')[] = [];\r\n\r\n if (total <= 1) return [1];\r\n\r\n const left = Math.max(2, current - siblings);\r\n const right = Math.min(total - 1, current + siblings);\r\n\r\n // First page\r\n range.push(1);\r\n\r\n // Left ellipsis\r\n if (left > 2) range.push('...');\r\n\r\n // Middle range\r\n for (let i = left; i <= right; i++) range.push(i);\r\n\r\n // Right ellipsis\r\n if (right < total - 1) range.push('...');\r\n\r\n // Last page\r\n if (total > 1) range.push(total);\r\n\r\n return range;\r\n}\r\n\r\n// ── Active ring wrapper ───────────────────────────────────────────────────────\r\n// Mirrors the 4px padding + sysPrimary08 background pattern from Input.\r\n\r\nconst RING_SIZE = 4;\r\n\r\n// ── Page item ────────────────────────────────────────────────────────────────\r\n\r\ninterface PageItemProps {\r\n s: SizeTokens;\r\n page: number;\r\n isActive: boolean;\r\n onPress: () => void;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction PageItem({ s, page, isActive, onPress, cr }: PageItemProps) {\r\n const borderWidth = isActive ? 1.5 : 0;\r\n const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';\r\n const textColor = isActive\r\n ? cr.custom.info.sysOnInfoContainer\r\n : cr.surface.surface.sysOnSurface;\r\n const fontWeight = isActive ? s.activeWeight : s.inactiveWeight;\r\n\r\n return (\r\n <Pressable\r\n onPress={onPress}\r\n accessibilityRole=\"button\"\r\n accessibilityLabel={`Page ${page}`}\r\n accessibilityState={{ selected: isActive }}\r\n >\r\n {({ pressed }) => (\r\n // Ring wrapper — always RING_SIZE padding for layout stability;\r\n // background only when active (or focused — handled via pressed state here)\r\n <View\r\n style={{\r\n padding: RING_SIZE,\r\n borderRadius: s.itemSize / 2 + RING_SIZE,\r\n backgroundColor: isActive\r\n ? cr.transparent.primary.sysPrimary08\r\n : 'transparent',\r\n }}\r\n >\r\n <View\r\n style={{\r\n width: s.itemSize,\r\n height: s.itemSize,\r\n borderRadius: s.itemSize / 2,\r\n borderWidth,\r\n borderColor,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor:\r\n pressed && !isActive\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n }}\r\n >\r\n <Text\r\n style={{\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n fontWeight,\r\n color: textColor,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {page}\r\n </Text>\r\n </View>\r\n </View>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\n// ── Ellipsis item ─────────────────────────────────────────────────────────────\r\n\r\ninterface EllipsisItemProps {\r\n s: SizeTokens;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction EllipsisItem({ s, cr }: EllipsisItemProps) {\r\n return (\r\n <View\r\n accessible\r\n accessibilityLabel=\"More pages\"\r\n style={{\r\n width: s.itemSize + RING_SIZE 2,\r\n height: s.itemSize + RING_SIZE * 2,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n }}\r\n >\r\n <Text\r\n style={{\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n fontWeight: s.inactiveWeight,\r\n color: cr.surface.surface.sysOnSurfaceVariant,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n …\r\n </Text>\r\n </View>\r\n );\r\n}\r\n\r\n// ── Prev / Next button ────────────────────────────────────────────────────────\r\n\r\ninterface NavButtonProps {\r\n s: SizeTokens;\r\n direction: 'prev' \| 'next';\r\n disabled: boolean;\r\n onPress: () => void;\r\n cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction NavButton({ s, direction, disabled, onPress, cr }: NavButtonProps) {\r\n const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole=\"button\"\r\n accessibilityLabel={direction === 'prev' ? 'Previous page' : 'Next page'}\r\n accessibilityState={{ disabled }}\r\n style={{ opacity: disabled ? 0.38 : 1 }}\r\n >\r\n {({ pressed }) => (\r\n <View\r\n style={{\r\n width: s.itemSize,\r\n height: s.itemSize,\r\n borderRadius: s.itemSize / 2,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor:\r\n pressed && !disabled\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n }}\r\n >\r\n <Ionicons\r\n name={iconName}\r\n size={s.iconSize}\r\n color={cr.surface.surface.sysOnSurface}\r\n />\r\n </View>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\n// ── Main component ────────────────────────────────────────────────────────────\r\n\r\nexport function Pagination({\r\n size = 'lg',\r\n totalPages,\r\n currentPage,\r\n onPageChange,\r\n siblingCount = 1,\r\n compact = false,\r\n style,\r\n}: PaginationProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n const sizeTokens = useMemo(\r\n () => ({\r\n sm: {\r\n itemSize: 32,\r\n iconSize: 20,\r\n fontSize: ts.labelMedium.sysFontSize,\r\n lineHeight: ts.labelMedium.sysLineHeight,\r\n activeWeight: '500' as const,\r\n inactiveWeight: '400' as const,\r\n gap: dim.spacing.padding.sysPadding8,\r\n // Pill container: sm has NO outer pill\r\n hasPill: false,\r\n pillPaddingH: 0,\r\n pillPaddingV: 0,\r\n pillGap: dim.spacing.padding.sysPadding8,\r\n },\r\n lg: {\r\n itemSize: 40,\r\n iconSize: 24,\r\n fontSize: ts.labelLarge.sysFontSize,\r\n lineHeight: ts.labelLarge.sysLineHeight,\r\n activeWeight: '500' as const,\r\n inactiveWeight: '400' as const,\r\n gap: dim.spacing.padding.sysPadding16,\r\n // Pill container: lg wraps in pill border\r\n hasPill: true,\r\n pillPaddingH: dim.spacing.padding.sysPadding12,\r\n pillPaddingV: dim.spacing.padding.sysPadding8,\r\n pillGap: dim.spacing.padding.sysPadding16,\r\n },\r\n }),\r\n [ts, dim],\r\n );\r\n\r\n const s = sizeTokens[size];\r\n const pages = buildPageRange(totalPages, currentPage, siblingCount);\r\n\r\n const prevDisabled = currentPage <= 1;\r\n const nextDisabled = currentPage >= totalPages;\r\n\r\n // ── Compact (prev + next only) ────────────────────────────────────────────\r\n const content = compact ? (\r\n <View style={[styles.inner, { gap: dim.spacing.padding.sysPadding4 }]}>\r\n <NavButton\r\n s={s}\r\n direction=\"prev\"\r\n disabled={prevDisabled}\r\n onPress={() => onPageChange(currentPage - 1)}\r\n cr={cr}\r\n />\r\n <NavButton\r\n s={s}\r\n direction=\"next\"\r\n disabled={nextDisabled}\r\n onPress={() => onPageChange(currentPage + 1)}\r\n cr={cr}\r\n />\r\n </View>\r\n ) : (\r\n // ── Full paginator ────────────────────────────────────────────────────\r\n <View style={[styles.inner, { gap: s.gap }]}>\r\n <NavButton\r\n s={s}\r\n direction=\"prev\"\r\n disabled={prevDisabled}\r\n onPress={() => onPageChange(currentPage - 1)}\r\n cr={cr}\r\n />\r\n\r\n <View style={[styles.pages, { gap: s.hasPill ? 0 : s.gap }]}>\r\n {pages.map((p, i) =>\r\n p === '...' ? (\r\n <EllipsisItem key={`ellipsis-${i}`} s={s} cr={cr} />\r\n ) : (\r\n <PageItem\r\n key={p}\r\n s={s}\r\n page={p}\r\n isActive={p === currentPage}\r\n onPress={() => onPageChange(p)}\r\n cr={cr}\r\n />\r\n ),\r\n )}\r\n </View>\r\n\r\n <NavButton\r\n s={s}\r\n direction=\"next\"\r\n disabled={nextDisabled}\r\n onPress={() => onPageChange(currentPage + 1)}\r\n cr={cr}\r\n />\r\n </View>\r\n );\r\n\r\n // ── Pill wrapper (lg only) ────────────────────────────────────────────────\r\n if (s.hasPill) {\r\n return (\r\n <View\r\n style={[\r\n styles.pill,\r\n {\r\n paddingHorizontal: s.pillPaddingH,\r\n paddingVertical: s.pillPaddingV,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: cr.outline.sysOutline,\r\n borderWidth: dim.borderWidth.sysStrokeThin,\r\n },\r\n style,\r\n ]}\r\n >\r\n {content}\r\n </View>\r\n );\r\n }\r\n\r\n // sm — wrap content in a View so style can be applied\r\n return <View style={style}>{content}</View>;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n pill: {\r\n alignSelf: 'flex-start',\r\n borderRadius: 9999,\r\n overflow: 'hidden',\r\n },\r\n inner: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n pages: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n});\r\n"],"names":["Pagination","buildPageRange","total","current","siblings","range","left","Math","max","right","min","push","i","RING_SIZE","PageItem","s","page","isActive","onPress","cr","borderWidth","borderColor","accent","primary","sysPrimary","textColor","custom","info","sysOnInfoContainer","surface","sysOnSurface","fontWeight","activeWeight","inactiveWeight","Pressable","accessibilityRole","accessibilityLabel","accessibilityState","selected","pressed","View","style","padding","borderRadius","itemSize","backgroundColor","transparent","sysPrimary08","width","height","alignItems","justifyContent","neutral","sysBlack10","Text","fontSize","lineHeight","color","includeFontPadding","EllipsisItem","accessible","sysOnSurfaceVariant","NavButton","direction","disabled","iconName","undefined","opacity","Ionicons","name","size","iconSize","totalPages","currentPage","onPageChange","siblingCount","compact","colorRoles","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","sm","labelMedium","sysFontSize","sysLineHeight","gap","spacing","sysPadding8","hasPill","pillPaddingH","pillPaddingV","pillGap","lg","labelLarge","sysPadding16","sysPadding12","pages","prevDisabled","nextDisabled","content","styles","inner","sysPadding4","map","p","pill","paddingHorizontal","paddingVertical","surfaceContainer","sysSurfaceContainerLowest","outline","sysOutline","sysStrokeThin","StyleSheet","create","alignSelf","overflow","flexDirection"],"mappings":"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"}

package/src/components/RadioButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/RadioButton/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n Text,\r\n View,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type RadioButtonSize = 'sm' \| 'md';\r\n\r\nexport interface RadioButtonProps {\r\n checked?: boolean;\r\n defaultChecked?: boolean;\r\n onChange?: (checked: boolean) => void;\r\n size?: RadioButtonSize;\r\n label?: string;\r\n description?: string;\r\n disabled?: boolean;\r\n invalid?: boolean;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function RadioButton({\r\n checked: checkedProp,\r\n defaultChecked = false,\r\n onChange,\r\n size = 'md',\r\n label,\r\n description,\r\n disabled = false,\r\n invalid = false,\r\n style,\r\n}: RadioButtonProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n const [internalChecked, setInternalChecked] =\r\n useState<boolean>(defaultChecked);\r\n const isControlled = checkedProp !== undefined;\r\n const isChecked: boolean = isControlled\r\n ? (checkedProp as boolean)\r\n : internalChecked;\r\n\r\n const sizeTokens = useMemo(\r\n () => ({\r\n sm: {\r\n // Container (overall hit area)\r\n hitArea: 36,\r\n // Visible circle\r\n circle: 20,\r\n // Inner dot when selected\r\n dot: 8,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n },\r\n md: {\r\n hitArea: 40,\r\n circle: 24,\r\n dot: 10,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n },\r\n }),\r\n [ts],\r\n );\r\n\r\n const s = sizeTokens[size];\r\n\r\n function handlePress() {\r\n if (disabled) return;\r\n const next = !isChecked;\r\n if (!isControlled) setInternalChecked(next);\r\n onChange?.(next);\r\n }\r\n\r\n // Border/fill colours\r\n const borderColor = invalid\r\n ? cr.error.sysError\r\n : isChecked\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutlineFixed;\r\n\r\n const circleBg = isChecked ? cr.accent.primary.sysPrimary : 'transparent';\r\n\r\n return (\r\n <Pressable\r\n onPress={handlePress}\r\n accessibilityRole=\"radio\"\r\n accessibilityLabel={label}\r\n accessibilityState={{ checked: isChecked, disabled }}\r\n style={() => [styles.root, disabled && styles.disabled, style]}\r\n >\r\n {({ pressed }~~: { pressed: boolean }~~) => (\r\n <>\r\n {/* Hit-area / state-layer circle /}\r\n <View\r\n style={[\r\n styles.hitArea,\r\n {\r\n width: s.hitArea,\r\n height: s.hitArea,\r\n borderRadius: s.hitArea / 2,\r\n backgroundColor:\r\n pressed && !disabled\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n },\r\n ]}\r\n >\r\n {/ Visible radio circle /}\r\n <View\r\n style={{\r\n width: s.circle,\r\n height: s.circle,\r\n borderRadius: s.circle / 2,\r\n borderWidth: dim.borderWidth.sysStrokeMedium,\r\n borderColor,\r\n backgroundColor: circleBg,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n }}\r\n >\r\n {/ Inner white dot — only visible when selected */}\r\n {isChecked && (\r\n <View\r\n style={{\r\n width: s.dot,\r\n height: s.dot,\r\n borderRadius: s.dot / 2,\r\n backgroundColor: cr.accent.primary.sysOnPrimary,\r\n }}\r\n />\r\n )}\r\n </View>\r\n </View>\r\n\r\n {(label \|\| description) && (\r\n <View style={[styles.textBlock, { gap: 2 }]}>\r\n {label && (\r\n <Text\r\n style={{\r\n color: cr.surface.surface.sysOnSurface,\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {label}\r\n </Text>\r\n )}\r\n {description && (\r\n <Text\r\n style={{\r\n color: cr.surface.surface.sysOnSurfaceVariant,\r\n fontSize: s.fontSize - 2,\r\n lineHeight: s.lineHeight - 2,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {description}\r\n </Text>\r\n )}\r\n </View>\r\n )}\r\n </>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n root: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n hitArea: {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n textBlock: {\r\n flex: 1,\r\n flexDirection: 'column',\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n});\r\n"],"names":["RadioButton","checked","checkedProp","defaultChecked","onChange","size","label","description","disabled","invalid","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","internalChecked","setInternalChecked","useState","isControlled","undefined","isChecked","sizeTokens","useMemo","sm","hitArea","circle","dot","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","md","bodyMedium","s","handlePress","next","borderColor","error","sysError","accent","primary","sysPrimary","outline","sysOutlineFixed","circleBg","Pressable","onPress","accessibilityRole","accessibilityLabel","accessibilityState","styles","root","pressed","View","width","height","borderRadius","backgroundColor","transparent","neutral","sysBlack10","borderWidth","sysStrokeMedium","alignItems","justifyContent","sysOnPrimary","textBlock","gap","Text","color","surface","sysOnSurface","includeFontPadding","sysOnSurfaceVariant","StyleSheet","create","flexDirection","flex","opacity"],"mappings":";;;;+BA2BgBA;;;eAAAA;;;;+DA3ByB;6BASlC;uBAEkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBlB,SAASA,YAAY,EAC1BC,SAASC,WAAW,EACpBC,iBAAiB,KAAK,EACtBC,QAAQ,EACRC,OAAO,IAAI,EACXC,KAAK,EACLC,WAAW,EACXC,WAAW,KAAK,EAChBC,UAAU,KAAK,EACfC,KAAK,EACY;IACjB,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAEC,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IACnE,MAAM,CAACC,iBAAiBC,mBAAmB,GACzCC,IAAAA,eAAQ,EAAUjB;IACpB,MAAMkB,eAAenB,gBAAgBoB;IACrC,MAAMC,YAAqBF,eACtBnB,cACDgB;IAEJ,MAAMM,aAAaC,IAAAA,cAAO,EACxB,IAAO,CAAA;YACLC,IAAI;gBACF,+BAA+B;gBAC/BC,SAAS;gBACT,iBAAiB;gBACjBC,QAAQ;gBACR,0BAA0B;gBAC1BC,KAAK;gBACLC,UAAUd,GAAGe,SAAS,CAACC,WAAW;gBAClCC,YAAYjB,GAAGe,SAAS,CAACG,aAAa;YACxC;YACAC,IAAI;gBACFR,SAAS;gBACTC,QAAQ;gBACRC,KAAK;gBACLC,UAAUd,GAAGoB,UAAU,CAACJ,WAAW;gBACnCC,YAAYjB,GAAGoB,UAAU,CAACF,aAAa;YACzC;QACF,CAAA,GACA;QAAClB;KAAG;IAGN,MAAMqB,IAAIb,UAAU,CAACnB,KAAK;IAE1B,SAASiC;QACP,IAAI9B,UAAU;QACd,MAAM+B,OAAO,CAAChB;QACd,IAAI,CAACF,cAAcF,mBAAmBoB;QACtCnC,WAAWmC;IACb;IAEA,sBAAsB;IACtB,MAAMC,cAAc/B,UAChBG,GAAG6B,KAAK,CAACC,QAAQ,GACjBnB,YACEX,GAAG+B,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BjC,GAAGkC,OAAO,CAACC,eAAe;IAEhC,MAAMC,WAAWzB,YAAYX,GAAG+B,MAAM,CAACC,OAAO,CAACC,UAAU,GAAG;IAE5D,qBACE,qBAACI,sBAAS;QACRC,SAASZ;QACTa,mBAAkB;QAClBC,oBAAoB9C;QACpB+C,oBAAoB;YAAEpD,SAASsB;YAAWf;QAAS;QACnDE,OAAO,IAAM;gBAAC4C,OAAOC,IAAI;gBAAE/C,YAAY8C,OAAO9C,QAAQ;gBAAEE;aAAM;kBAE7D,CAAC,EAAE8C,OAAO,~~EAAwB~~,~~iBACjC~~;;kCAEE,qBAACC,iBAAI;wBACH/C,OAAO;4BACL4C,OAAO3B,OAAO;4BACd;gCACE+B,OAAOrB,EAAEV,OAAO;gCAChBgC,QAAQtB,EAAEV,OAAO;gCACjBiC,cAAcvB,EAAEV,OAAO,GAAG;gCAC1BkC,iBACEL,WAAW,CAAChD,WACRI,GAAGkD,WAAW,CAACC,OAAO,CAACC,UAAU,GACjC;4BACR;yBACD;kCAGD,cAAA,qBAACP,iBAAI;4BACH/C,OAAO;gCACLgD,OAAOrB,EAAET,MAAM;gCACf+B,QAAQtB,EAAET,MAAM;gCAChBgC,cAAcvB,EAAET,MAAM,GAAG;gCACzBqC,aAAanD,IAAImD,WAAW,CAACC,eAAe;gCAC5C1B;gCACAqB,iBAAiBb;gCACjBmB,YAAY;gCACZC,gBAAgB;4BAClB;sCAGC7C,2BACC,qBAACkC,iBAAI;gCACH/C,OAAO;oCACLgD,OAAOrB,EAAER,GAAG;oCACZ8B,QAAQtB,EAAER,GAAG;oCACb+B,cAAcvB,EAAER,GAAG,GAAG;oCACtBgC,iBAAiBjD,GAAG+B,MAAM,CAACC,OAAO,CAACyB,YAAY;gCACjD;;;;oBAMN/D,CAAAA,SAASC,WAAU,mBACnB,sBAACkD,iBAAI;wBAAC/C,OAAO;4BAAC4C,OAAOgB,SAAS;4BAAE;gCAAEC,KAAK;4BAAE;yBAAE;;4BACxCjE,uBACC,qBAACkE,iBAAI;gCACH9D,OAAO;oCACL+D,OAAO7D,GAAG8D,OAAO,CAACA,OAAO,CAACC,YAAY;oCACtC7C,UAAUO,EAAEP,QAAQ;oCACpBG,YAAYI,EAAEJ,UAAU;oCACxB2C,oBAAoB;gCACtB;0CAECtE;;4BAGJC,6BACC,qBAACiE,iBAAI;gCACH9D,OAAO;oCACL+D,OAAO7D,GAAG8D,OAAO,CAACA,OAAO,CAACG,mBAAmB;oCAC7C/C,UAAUO,EAAEP,QAAQ,GAAG;oCACvBG,YAAYI,EAAEJ,UAAU,GAAG;oCAC3B2C,oBAAoB;gCACtB;0CAECrE;;;;;;;AASnB;AAEA,MAAM+C,SAASwB,uBAAU,CAACC,MAAM,CAAC;IAC/BxB,MAAM;QACJyB,eAAe;QACfb,YAAY;IACd;IACAxC,SAAS;QACPwC,YAAY;QACZC,gBAAgB;IAClB;IACAE,WAAW;QACTW,MAAM;QACND,eAAe;IACjB;IACAxE,UAAU;QACR0E,SAAS;IACX;AACF"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/RadioButton/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n Text,\r\n View,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type RadioButtonSize = 'sm' \| 'md';\r\n\r\nexport interface RadioButtonProps {\r\n checked?: boolean;\r\n defaultChecked?: boolean;\r\n onChange?: (checked: boolean) => void;\r\n size?: RadioButtonSize;\r\n label?: string;\r\n description?: string;\r\n disabled?: boolean;\r\n invalid?: boolean;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function RadioButton({\r\n checked: checkedProp,\r\n defaultChecked = false,\r\n onChange,\r\n size = 'md',\r\n label,\r\n description,\r\n disabled = false,\r\n invalid = false,\r\n style,\r\n}: RadioButtonProps) {\r\n const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n const [internalChecked, setInternalChecked] =\r\n useState<boolean>(defaultChecked);\r\n const isControlled = checkedProp !== undefined;\r\n const isChecked: boolean = isControlled\r\n ? (checkedProp as boolean)\r\n : internalChecked;\r\n\r\n const sizeTokens = useMemo(\r\n () => ({\r\n sm: {\r\n // Container (overall hit area)\r\n hitArea: 36,\r\n // Visible circle\r\n circle: 20,\r\n // Inner dot when selected\r\n dot: 8,\r\n fontSize: ts.bodySmall.sysFontSize,\r\n lineHeight: ts.bodySmall.sysLineHeight,\r\n },\r\n md: {\r\n hitArea: 40,\r\n circle: 24,\r\n dot: 10,\r\n fontSize: ts.bodyMedium.sysFontSize,\r\n lineHeight: ts.bodyMedium.sysLineHeight,\r\n },\r\n }),\r\n [ts],\r\n );\r\n\r\n const s = sizeTokens[size];\r\n\r\n function handlePress() {\r\n if (disabled) return;\r\n const next = !isChecked;\r\n if (!isControlled) setInternalChecked(next);\r\n onChange?.(next);\r\n }\r\n\r\n // Border/fill colours\r\n const borderColor = invalid\r\n ? cr.error.sysError\r\n : isChecked\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutlineFixed;\r\n\r\n const circleBg = isChecked ? cr.accent.primary.sysPrimary : 'transparent';\r\n\r\n return (\r\n <Pressable\r\n onPress={handlePress}\r\n accessibilityRole=\"radio\"\r\n accessibilityLabel={label}\r\n accessibilityState={{ checked: isChecked, disabled }}\r\n style={() => [styles.root, disabled && styles.disabled, style]}\r\n >\r\n {({ pressed }) => (\r\n <>\r\n {/* Hit-area / state-layer circle /}\r\n <View\r\n style={[\r\n styles.hitArea,\r\n {\r\n width: s.hitArea,\r\n height: s.hitArea,\r\n borderRadius: s.hitArea / 2,\r\n backgroundColor:\r\n pressed && !disabled\r\n ? cr.transparent.neutral.sysBlack10\r\n : 'transparent',\r\n },\r\n ]}\r\n >\r\n {/ Visible radio circle /}\r\n <View\r\n style={{\r\n width: s.circle,\r\n height: s.circle,\r\n borderRadius: s.circle / 2,\r\n borderWidth: dim.borderWidth.sysStrokeMedium,\r\n borderColor,\r\n backgroundColor: circleBg,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n }}\r\n >\r\n {/ Inner white dot — only visible when selected */}\r\n {isChecked && (\r\n <View\r\n style={{\r\n width: s.dot,\r\n height: s.dot,\r\n borderRadius: s.dot / 2,\r\n backgroundColor: cr.accent.primary.sysOnPrimary,\r\n }}\r\n />\r\n )}\r\n </View>\r\n </View>\r\n\r\n {(label \|\| description) && (\r\n <View style={[styles.textBlock, { gap: 2 }]}>\r\n {label && (\r\n <Text\r\n style={{\r\n color: cr.surface.surface.sysOnSurface,\r\n fontSize: s.fontSize,\r\n lineHeight: s.lineHeight,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {label}\r\n </Text>\r\n )}\r\n {description && (\r\n <Text\r\n style={{\r\n color: cr.surface.surface.sysOnSurfaceVariant,\r\n fontSize: s.fontSize - 2,\r\n lineHeight: s.lineHeight - 2,\r\n includeFontPadding: false,\r\n }}\r\n >\r\n {description}\r\n </Text>\r\n )}\r\n </View>\r\n )}\r\n </>\r\n )}\r\n </Pressable>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n root: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n hitArea: {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n textBlock: {\r\n flex: 1,\r\n flexDirection: 'column',\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n});\r\n"],"names":["RadioButton","checked","checkedProp","defaultChecked","onChange","size","label","description","disabled","invalid","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","internalChecked","setInternalChecked","useState","isControlled","undefined","isChecked","sizeTokens","useMemo","sm","hitArea","circle","dot","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","md","bodyMedium","s","handlePress","next","borderColor","error","sysError","accent","primary","sysPrimary","outline","sysOutlineFixed","circleBg","Pressable","onPress","accessibilityRole","accessibilityLabel","accessibilityState","styles","root","pressed","View","width","height","borderRadius","backgroundColor","transparent","neutral","sysBlack10","borderWidth","sysStrokeMedium","alignItems","justifyContent","sysOnPrimary","textBlock","gap","Text","color","surface","sysOnSurface","includeFontPadding","sysOnSurfaceVariant","StyleSheet","create","flexDirection","flex","opacity"],"mappings":"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"}

package/src/components/ScreenContainer/index.d.ts CHANGED Viewed

@@ -2,6 +2,8 @@ import React from 'react';
 import { ScrollView, type ScrollViewProps } from 'react-native';
 export interface ScreenContainerProps extends ScrollViewProps {
     children?: React.ReactNode;
+    noPadding?: boolean;
+    keyboardShouldPersistTaps?: 'always' | 'never' | 'handled' | boolean;
 }
 /**
  * Scrollable screen wrapper that applies the default surface background and

package/src/components/ScreenContainer/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const ScreenContainer = /*#__PURE__*/ _react.default.forwardRef(function ScreenContainer({ children, style, contentContainerStyle, ...rest }, ref) {
+const ScreenContainer = /*#__PURE__*/ _react.default.forwardRef(function ScreenContainer({ children, style, contentContainerStyle, noPadding = false, ...rest }, ref) {
     const { dimensions: dim, colorRoles: cr } = (0, _theme.useTheme)();
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
         ref: ref,
@@ -29,7 +29,7 @@ const ScreenContainer = /*#__PURE__*/ _react.default.forwardRef(function ScreenC
             style
         ],
         contentContainerStyle: [
-            {
+            noPadding ? undefined : {
                 paddingHorizontal: dim.spacing.padding.sysPadding16,
                 paddingVertical: dim.spacing.padding.sysPadding8
             },

package/src/components/ScreenContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/ScreenContainer/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { ScrollView, type ScrollViewProps } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport interface ScreenContainerProps extends ScrollViewProps {\r\n children?: React.ReactNode;\r\n}\r\n\r\n/*\r\n Scrollable screen wrapper that applies the default surface background and\r\n * standard padding. The ref is forwarded to the underlying ScrollView so\r\n * callers can imperatively scroll, measure, or attach scroll listeners.\r\n \r\n @example\r\n * const scrollRef = useRef<ScrollView>(null);\r\n * <ScreenContainer ref={scrollRef}>...</ScreenContainer>\r\n */\r\nexport const ScreenContainer = React.forwardRef<\r\n ScrollView,\r\n ScreenContainerProps\r\n>(function ScreenContainer(\r\n { children, style, contentContainerStyle, ...rest },\r\n ref,\r\n) {\r\n const { dimensions: dim, colorRoles: cr } = useTheme();\r\n\r\n return (\r\n <ScrollView\r\n ref={ref}\r\n style={[\r\n {\r\n flex: 1,\r\n backgroundColor: cr.surface.surface.sysSurface,\r\n },\r\n style,\r\n ]}\r\n contentContainerStyle={[\r\n {\r\n paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n paddingVertical: dim.spacing.padding.sysPadding8,\r\n },\r\n contentContainerStyle,\r\n ]}\r\n {...rest}\r\n >\r\n {children}\r\n </ScrollView>\r\n );\r\n});\r\n"],"names":["ScreenContainer","React","forwardRef","children","style","contentContainerStyle","rest","ref","dimensions","dim","colorRoles","cr","useTheme","ScrollView","flex","backgroundColor","surface","sysSurface","paddingHorizontal","spacing","padding","sysPadding16","paddingVertical","sysPadding8"],"mappings":";;;;+~~BAmBaA~~;;;eAAAA;;;;~~8DAnBK~~;6BAE+B;uBAExB;;;;;;~~AAelB~~,MAAMA,gCAAkBC,cAAK,CAACC,UAAU,CAG7C,SAASF,gBACT,EAAEG,QAAQ,EAAEC,KAAK,EAAEC,qBAAqB,EAAE,GAAGC,MAAM,~~EACnDC~~,GAAG;IAEH,MAAM,EAAEC,YAAYC,GAAG,EAAEC,YAAYC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,qBACE,qBAACC,uBAAU;QACTN,KAAKA;~~QACLH~~,OAAO;YACL;~~gBACEU~~,MAAM;gBACNC,iBAAiBJ,GAAGK,OAAO,CAACA,OAAO,CAACC,UAAU;YAChD;~~YACAb~~;SACD;QACDC,uBAAuB;~~YACrB~~;~~gBACEa~~,~~mBAAmBT~~,~~IAAIU~~,OAAO,CAACC,OAAO,CAACC,YAAY;gBACnDC,~~iBAAiBb~~,~~IAAIU~~,OAAO,CAACC,OAAO,CAACG,WAAW;YAClD;~~YACAlB~~;SACD;QACA,~~GAAGC~~,IAAI;~~kBAEPH~~;;AAGP"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/ScreenContainer/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { ScrollView, type ScrollViewProps } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport interface ScreenContainerProps extends ScrollViewProps {\r\n children?: React.ReactNode;\r\n noPadding?: boolean;\r\n keyboardShouldPersistTaps?: 'always' \| 'never' \| 'handled' \| boolean;\r\n}\r\n\r\n/*\r\n Scrollable screen wrapper that applies the default surface background and\r\n * standard padding. The ref is forwarded to the underlying ScrollView so\r\n * callers can imperatively scroll, measure, or attach scroll listeners.\r\n \r\n @example\r\n * const scrollRef = useRef<ScrollView>(null);\r\n * <ScreenContainer ref={scrollRef}>...</ScreenContainer>\r\n */\r\nexport const ScreenContainer = React.forwardRef<\r\n ScrollView,\r\n ScreenContainerProps\r\n>(function ScreenContainer(\r\n { children, style, contentContainerStyle, noPadding = false, ...rest },\r\n ref,\r\n) {\r\n const { dimensions: dim, colorRoles: cr } = useTheme();\r\n\r\n return (\r\n <ScrollView\r\n ref={ref}\r\n style={[\r\n {\r\n flex: 1,\r\n backgroundColor: cr.surface.surface.sysSurface,\r\n },\r\n style,\r\n ]}\r\n contentContainerStyle={[\r\n noPadding\r\n ? undefined\r\n : {\r\n paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n paddingVertical: dim.spacing.padding.sysPadding8,\r\n },\r\n contentContainerStyle,\r\n ]}\r\n {...rest}\r\n >\r\n {children}\r\n </ScrollView>\r\n );\r\n});\r\n"],"names":["ScreenContainer","React","forwardRef","children","style","contentContainerStyle","noPadding","rest","ref","dimensions","dim","colorRoles","cr","useTheme","ScrollView","flex","backgroundColor","surface","sysSurface","undefined","paddingHorizontal","spacing","padding","sysPadding16","paddingVertical","sysPadding8"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;8DArBK;6BAE+B;uBAExB;;;;;;AAiBlB,MAAMA,gCAAkBC,cAAK,CAACC,UAAU,CAG7C,SAASF,gBACT,EAAEG,QAAQ,EAAEC,KAAK,EAAEC,qBAAqB,EAAEC,YAAY,KAAK,EAAE,GAAGC,MAAM,EACtEC,GAAG;IAEH,MAAM,EAAEC,YAAYC,GAAG,EAAEC,YAAYC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,qBACE,qBAACC,uBAAU;QACTN,KAAKA;QACLJ,OAAO;YACL;gBACEW,MAAM;gBACNC,iBAAiBJ,GAAGK,OAAO,CAACA,OAAO,CAACC,UAAU;YAChD;YACAd;SACD;QACDC,uBAAuB;YACrBC,YACIa,YACA;gBACEC,mBAAmBV,IAAIW,OAAO,CAACC,OAAO,CAACC,YAAY;gBACnDC,iBAAiBd,IAAIW,OAAO,CAACC,OAAO,CAACG,WAAW;YAClD;YACJpB;SACD;QACA,GAAGE,IAAI;kBAEPJ;;AAGP"}

package/src/components/SegmentedControl/index.d.ts CHANGED Viewed

@@ -1,16 +1,16 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import { type IconName } from '../../icons';
 export interface SegmentedControlOption {
     value: string;
     label: string;
-    icon?: React.ReactNode;
+    icon?: IconName;
     disabled?: boolean;
 }
 export interface SegmentedControlProps {
     options: SegmentedControlOption[];
     value: string;
     onChange: (value: string) => void;
-    fullWidth?: boolean;
     style?: StyleProp<ViewStyle>;
 }
-export declare function SegmentedControl({ options, value, onChange, fullWidth, style, }: SegmentedControlProps): React.JSX.Element;
+export declare function SegmentedControl({ options, value, onChange, style, }: SegmentedControlProps): React.JSX.Element;

package/src/components/SegmentedControl/index.js CHANGED Viewed

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "SegmentedControl", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _reactnative = require("react-native");
+const _icons = require("../../icons");
 const _theme = require("../../theme");
 const _BodyText = require("../BodyText");
 function _interop_require_default(obj) {
@@ -18,25 +19,27 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function SegmentedControl({ options, value, onChange, fullWidth = false, style }) {
+function SegmentedControl({ options, value, onChange, style }) {
     const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
-        style: [
-            styles.container,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [
+            styles.contentContainer,
             {
-                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-                borderWidth: dim.borderWidth.sysStrokeThin,
-                borderColor: cr.outline.sysOutline,
-                borderRadius: dim.borderRadius.sysRadiusFull,
-                padding: dim.spacing.padding.sysPadding4,
                 gap: dim.spacing.padding.sysPadding4
-            },
-            fullWidth && styles.fullWidth,
+            }
+        ],
+        style: [
+            styles.scroll,
             style
         ],
         children: options.map((option)=>{
             const isActive = option.value === value;
             const isDisabled = option.disabled ?? false;
+            const iconColor = isActive ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurfaceVariant;
+            const IconComponent = option.icon ? (0, _icons.resolveIcon)(option.icon) : null;
+            const { size: iconPx, strokeWidth: iconSW } = _icons.SIZE_MAP['xsmall'];
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
                 onPress: isDisabled ? undefined : ()=>onChange(option.value),
                 accessibilityRole: "tab",
@@ -51,25 +54,24 @@ function SegmentedControl({ options, value, onChange, fullWidth = false, style }
                             paddingHorizontal: dim.spacing.padding.sysPadding12,
                             paddingVertical: dim.spacing.padding.sysPadding6,
                             gap: dim.spacing.padding.sysPadding4,
-                            borderRadius: dim.borderRadius.sysRadiusFull
-                        },
-                        isActive && {
-                            backgroundColor: cr.accent.primary.sysPrimary
+                            borderRadius: dim.borderRadius.sysRadiusFull,
+                            backgroundColor: isActive ? cr.accent.primary.sysPrimary : cr.surface.surfaceContainer.sysSurfaceContainerHighest
                         },
                         !isActive && pressed && !isDisabled && {
-                            backgroundColor: cr.transparent.neutral.sysBlack10
+                            opacity: 0.7
                         },
                         isDisabled && styles.disabled
                     ],
                 children: [
-                    option.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
-                        style: styles.iconSlot,
-                        children: option.icon
+                    IconComponent && /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
+                        size: iconPx,
+                        strokeWidth: iconSW,
+                        color: iconColor
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
                         variant: "small",
                         emphasized: isActive,
-                        color: isActive ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurfaceVariant,
+                        color: iconColor,
                         numberOfLines: 1,
                         children: option.label
                     })
@@ -79,34 +81,19 @@ function SegmentedControl({ options, value, onChange, fullWidth = false, style }
     });
 }
 const styles = _reactnative.StyleSheet.create({
-    container: {
+    scroll: {
+        width: '100%'
+    },
+    contentContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        alignSelf: 'flex-start',
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 2
-        },
-        shadowOpacity: 0.06,
-        shadowRadius: 4,
-        elevation: 1
-    },
-    fullWidth: {
-        alignSelf: 'stretch'
+        paddingVertical: 2
     },
     item: {
-        flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center'
     },
-    iconSlot: {
-        width: 16,
-        height: 16,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
     disabled: {
         opacity: 0.48
     }

package/src/components/SegmentedControl/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport {\r\n Pressable,\r\n ~~StyleProp~~,\r\n ~~StyleSheet~~,\r\n ~~View~~,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport interface SegmentedControlOption {\r\n value: string;\r\n label: string;\r\n icon?: ~~React.ReactNode~~;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SegmentedControlProps {\r\n options: SegmentedControlOption[];\r\n value: string;\r\n onChange: (value: string) => void;\r\n ~~fullWidth?: boolean;\r\n~~ style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function SegmentedControl({\r\n options,\r\n value,\r\n onChange,\r\n ~~fullWidth = false,\r\n~~ style,\r\n}: SegmentedControlProps) {\r\n const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n return (\r\n <~~View~~\r\n ~~style={[~~\r\n ~~styles.container,\r\n~~ {\r\n ~~backgroundColor:\r~~\~~n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\~~r\n ~~borderWidth: dim~~.~~borderWidth.sysStrokeThin~~,\r\n ~~borderColor:~~ ~~cr.outline.sysOutline,\r\n borderRadius~~: dim.~~borderRadius.sysRadiusFull,\r\n padding: dim.~~spacing.padding.sysPadding4~~,\r\n gap:~~ ~~dim.spacing.padding.sysPadding4~~,\r\n },\r\n ~~fullWidth &&~~ styles.~~fullWidth,\r\n~~ style~~,\r\n~~ ]}\r\n >\r\n {options.map((option) => {\r\n const isActive = option.value === value;\r\n const isDisabled = option.disabled ?? false;\r\n\r\n return (\r\n <Pressable\r\n key={option.value}\r\n onPress={isDisabled ? undefined : () => onChange(option.value)}\r\n accessibilityRole=\"tab\"\r\n accessibilityLabel={option.label}\r\n accessibilityState={{ selected: isActive, disabled: isDisabled }}\r\n style={({ pressed }) => [\r\n styles.item,\r\n {\r\n paddingHorizontal: dim.spacing.padding.sysPadding12,\r\n paddingVertical: dim.spacing.padding.sysPadding6,\r\n gap: dim.spacing.padding.sysPadding4,\r\n borderRadius: dim.borderRadius.sysRadiusFull,\r\n ~~},\~~r\n ~~isActive~~ ~~&& { backgroundColor:~~ cr.accent.primary.sysPrimary },\r\n !isActive ~~&&\r\n~~ pressed ~~&&\r\n~~ !isDisabled && {~~\r\n backgroundColor~~: cr.~~transparent.neutral.sysBlack10,\r\n~~ },\r\n isDisabled && styles.disabled,\r\n ]}\r\n >\r\n {~~option.icon~~ && <~~View style~~={~~styles.iconSlot~~}>{~~option.icon~~}~~</View>~~}\r\n <BodyText\r\n variant=\"small\"\r\n emphasized={isActive}\r\n color={~~\r\n isActive\r\n ? cr.accent.primary.sysOnPrimary\r\n : cr.surface.surface.sysOnSurfaceVariant\r\n~~ }\r\n numberOfLines={1}\r\n >\r\n {option.label}\r\n </BodyText>\r\n </Pressable>\r\n );\r\n })}\r\n </~~View~~>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n ~~container~~: {\r\n ~~flexDirection: 'row',\r\n alignItems: 'center',\r\n alignSelf: 'flex-start',\r\n shadowColor: '#000',\r\n shadowOffset: {~~ width: ~~0, height: 2 },\r\n shadowOpacity: 0.06,\r\n shadowRadius: 4,\r\n elevation: 1,\r\n },\r\n fullWidth: {\r\n alignSelf:~~ '~~stretch~~',\r\n },\r\n ~~item~~: {\r\n ~~flex: 1,\r\n~~ flexDirection: 'row',\r\n alignItems: 'center',\r\n ~~justifyContent~~: ~~'center'~~,\r\n },\r\n ~~iconSlot~~: {\r\n ~~width~~: 16,\r\n ~~height: 16,\r\n~~ alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n});\r\n"],"names":["SegmentedControl","options","value","onChange","~~fullWidth","~~style","colorRoles","cr","dimensions","dim","useTheme","~~View~~","styles","~~container~~","~~backgroundColor~~","~~surface~~","~~surfaceContainer~~","~~sysSurfaceContainerLowest~~","~~borderWidth~~","~~sysStrokeThin~~","~~borderColor~~","~~outline~~","~~sysOutline~~","~~borderRadius~~","~~sysRadiusFull~~","~~padding~~","~~spacing~~","~~sysPadding4~~","~~gap~~","~~map~~","~~option~~","~~isActive~~","~~isDisabled~~","~~disabled~~","Pressable","onPress","undefined","accessibilityRole","accessibilityLabel","label","accessibilityState","selected","pressed","item","paddingHorizontal","sysPadding12","paddingVertical","sysPadding6","~~accent~~","~~primary~~","~~sysPrimary~~","~~transparent~~","~~neutral~~","~~sysBlack10~~","~~icon~~","~~iconSlot~~","BodyText","variant","emphasized","~~color","sysOnPrimary","sysOnSurfaceVariant","~~numberOfLines","StyleSheet","create","~~flexDirection","alignItems","alignSelf","shadowColor","shadowOffset","~~width","~~height~~","~~shadowOpacity~~","~~shadowRadius","elevation","flex","~~justifyContent"~~,"opacity"~~],"mappings":";;;;+BA4BgBA;;;eAAAA;;;;8DA5BE;6BAQX;~~uBAEkB~~;0BACA;;;;;;~~AAiBlB~~,SAASA,iBAAiB,EAC/BC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,~~YAAY,~~KAAK,~~EACjBC,KAAK,~~EACiB;IACtB,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,qBACE,qBAACC,~~iBAAI~~;~~QACHN~~,~~OAAO~~;~~YACLO~~,OAAOC,~~SAAS~~;~~YAChB~~;~~gBACEC~~,~~iBACEP~~,~~GAAGQ~~,OAAO,CAACC,~~gBAAgB~~,CAACC,~~yBAAyB~~;~~gBACvDC~~,~~aAAaT~~,~~IAAIS~~,~~WAAW~~,CAACC~~,aAAa~~;~~gBAC1CC~~,~~aAAab~~,~~GAAGc~~,~~OAAO~~,~~CAACC~~,~~UAAU~~;~~gBAClCC~~,~~cAAcd~~,~~IAAIc~~,~~YAAY~~,~~CAACC~~,~~aAAa~~;~~gBAC5CC~~,~~SAAShB~~,~~IAAIiB~~,~~OAAO~~,~~CAACD~~,OAAO,~~CAACE~~,~~WAAW;gBACxCC~~,~~KAAKnB~~,~~IAAIiB~~,OAAO,~~CAACD~~,OAAO,~~CAACE~~,~~WAAW~~;~~YACtC;YACAvB~~,~~aAAaQ~~,~~OAAOR~~,~~SAAS;YAC7BC;SACD;kBAEAJ~~,~~QAAQ4B~~,~~GAAG~~,~~CAAC~~,~~CAACC~~;~~YACZ~~,MAAMC,~~WAAWD~~,~~OAAO5B~~,~~KAAK~~,~~KAAKA;YAClC~~,~~MAAM8B~~,~~aAAaF~~,~~OAAOG~~,~~QAAQ~~,~~IAAI~~;~~YAEtC~~,qBACE,sBAACC,sBAAS;gBAERC,~~SAASH~~,~~aAAaI~~,YAAY,~~IAAMjC~~,~~SAAS2B~~,~~OAAO5B~~,KAAK;~~gBAC7DmC~~,mBAAkB;gBAClBC,~~oBAAoBR~~,~~OAAOS~~,KAAK;gBAChCC,oBAAoB;oBAAEC,~~UAAUV~~;oBAAUE,UAAUD;gBAAW;gBAC/~~D3B~~,OAAO,CAAC,~~EAAEqC~~,OAAO,EAAE,GAAK;~~wBACtB9B~~,~~OAAO+B~~,IAAI;wBACX;4BACEC,~~mBAAmBnC~~,~~IAAIiB~~,OAAO,~~CAACD~~,OAAO,~~CAACoB~~,YAAY;4BACnDC,~~iBAAiBrC~~,~~IAAIiB~~,OAAO,~~CAACD~~,OAAO,~~CAACsB~~,WAAW;~~4BAChDnB~~,~~KAAKnB~~,~~IAAIiB~~,OAAO,~~CAACD~~,OAAO,~~CAACE~~,WAAW;~~4BACpCJ~~,~~cAAcd~~,~~IAAIc~~,YAAY,CAACC,aAAa;~~wBAC9C;wBACAO~~,~~YAAY;4BAAEjB~~,~~iBAAiBP~~,~~GAAGyC~~,MAAM,CAACC,OAAO,~~CAACC~~,UAAU~~;wBAAC;wBAC5D~~,~~CAACnB~~,~~YACCW~~,~~WACA~~,~~CAACV~~,~~cAAc~~;~~4BACblB~~,~~iBAAiBP~~,~~GAAG4C~~,WAAW,~~CAACC~~,~~OAAO~~,~~CAACC,UAAU~~;~~wBACpD~~;~~wBACFrB~~,~~cAAcpB~~,~~OAAOqB~~,QAAQ;qBAC9B;;~~oBAEAH~~,~~OAAOwB~~,~~IAAI,kBAAI,qBAAC3C,iBAAI~~;~~wBAACN~~,~~OAAOO,OAAO2C,QAAQ~~;~~kCAAGzB~~,~~OAAOwB,IAAI~~;;~~kCAC1D~~,~~qBAACE~~,kBAAQ;wBACPC,SAAQ;wBACRC,~~YAAY3B~~;~~wBACZ4B~~,~~OACE5B,WACIxB,GAAGyC,MAAM,CAACC,OAAO,CAACW,YAAY,GAC9BrD,GAAGQ,OAAO,CAACA,OAAO,CAAC8C,mBAAmB~~;~~wBAE5CC~~,eAAe;~~kCAEdhC~~,~~OAAOS~~,KAAK;;;~~eAjCVT~~,~~OAAO5B~~,KAAK;QAqCvB;;AAGN;AAEA,~~MAAMU~~,~~SAASmD~~,uBAAU,CAACC,MAAM,CAAC;IAC/~~BnD~~,~~WAAW~~;~~QACToD~~,~~eAAe~~;~~QACfC,YAAY~~;~~QACZC~~,~~WAAW~~;~~QACXC~~,~~aAAa;QACbC,cAAc;YAAEC,OAAO;YAAGC,QAAQ;QAAE;QACpCC,~~eAAe;QACfC,~~cAAc~~;~~QACdC~~,~~WAAW~~;~~IACb~~;~~IACAtE~~,~~WAAW;QACT+D,WAAW;IACb;IACAxB,~~MAAM;~~QACJgC~~,~~MAAM;QACNV,~~eAAe;QACfC,YAAY;~~QACZU~~,gBAAgB;IAClB;~~IACArB~~,UAAU;~~QACRe~~,~~OAAO;QACPC,QAAQ;QACRL,YAAY;QACZU,gBAAgB;IAClB;IACA3C,UAAU;QACR4C,~~SAAS;IACX;AACF"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/SegmentedControl/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport {\r\n Pressable,\r\n ScrollView,\r\n StyleProp,\r\n StyleSheet,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { type IconName, SIZE_MAP, resolveIcon } from '../../icons';\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport interface SegmentedControlOption {\r\n value: string;\r\n label: string;\r\n icon?: IconName;\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface SegmentedControlProps {\r\n options: SegmentedControlOption[];\r\n value: string;\r\n onChange: (value: string) => void;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function SegmentedControl({\r\n options,\r\n value,\r\n onChange,\r\n style,\r\n}: SegmentedControlProps) {\r\n const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n return (\r\n <ScrollView\r\n horizontal\r\n showsHorizontalScrollIndicator={false}\r\n contentContainerStyle={[\r\n styles.contentContainer,\r\n { gap: dim.spacing.padding.sysPadding4 },\r\n ]}\r\n style={[styles.scroll, style]}\r\n >\r\n {options.map((option) => {\r\n const isActive = option.value === value;\r\n const isDisabled = option.disabled ?? false;\r\n\r\n const iconColor = isActive\r\n ? cr.accent.primary.sysOnPrimary\r\n : cr.surface.surface.sysOnSurfaceVariant;\r\n const IconComponent = option.icon ? resolveIcon(option.icon) : null;\r\n const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['xsmall'];\r\n\r\n return (\r\n <Pressable\r\n key={option.value}\r\n onPress={isDisabled ? undefined : () => onChange(option.value)}\r\n accessibilityRole=\"tab\"\r\n accessibilityLabel={option.label}\r\n accessibilityState={{ selected: isActive, disabled: isDisabled }}\r\n style={({ pressed }) => [\r\n styles.item,\r\n {\r\n paddingHorizontal: dim.spacing.padding.sysPadding12,\r\n paddingVertical: dim.spacing.padding.sysPadding6,\r\n gap: dim.spacing.padding.sysPadding4,\r\n borderRadius: dim.borderRadius.sysRadiusFull,\r\n backgroundColor: isActive\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surfaceContainer.sysSurfaceContainerHighest,\r\n },\r\n !isActive && pressed && !isDisabled && { opacity: 0.7 },\r\n isDisabled && styles.disabled,\r\n ]}\r\n >\r\n {IconComponent && (\r\n <IconComponent\r\n size={iconPx}\r\n strokeWidth={iconSW}\r\n color={iconColor}\r\n />\r\n )}\r\n <BodyText\r\n variant=\"small\"\r\n emphasized={isActive}\r\n color={iconColor}\r\n numberOfLines={1}\r\n >\r\n {option.label}\r\n </BodyText>\r\n </Pressable>\r\n );\r\n })}\r\n </ScrollView>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n scroll: {\r\n width: '100%',\r\n },\r\n contentContainer: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n paddingVertical: 2,\r\n },\r\n item: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n disabled: {\r\n opacity: 0.48,\r\n },\r\n});\r\n"],"names":["SegmentedControl","options","value","onChange","style","colorRoles","cr","dimensions","dim","useTheme","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","styles","contentContainer","gap","spacing","padding","sysPadding4","scroll","map","option","isActive","isDisabled","disabled","iconColor","accent","primary","sysOnPrimary","surface","sysOnSurfaceVariant","IconComponent","icon","resolveIcon","size","iconPx","strokeWidth","iconSW","SIZE_MAP","Pressable","onPress","undefined","accessibilityRole","accessibilityLabel","label","accessibilityState","selected","pressed","item","paddingHorizontal","sysPadding12","paddingVertical","sysPadding6","borderRadius","sysRadiusFull","backgroundColor","sysPrimary","surfaceContainer","sysSurfaceContainerHighest","opacity","color","BodyText","variant","emphasized","numberOfLines","StyleSheet","create","width","flexDirection","alignItems","justifyContent"],"mappings":";;;;+BA4BgBA;;;eAAAA;;;;8DA5BE;6BAQX;uBAE8C;uBAC5B;0BACA;;;;;;AAgBlB,SAASA,iBAAiB,EAC/BC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACiB;IACtB,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,qBACE,qBAACC,uBAAU;QACTC,UAAU;QACVC,gCAAgC;QAChCC,uBAAuB;YACrBC,OAAOC,gBAAgB;YACvB;gBAAEC,KAAKR,IAAIS,OAAO,CAACC,OAAO,CAACC,WAAW;YAAC;SACxC;QACDf,OAAO;YAACU,OAAOM,MAAM;YAAEhB;SAAM;kBAE5BH,QAAQoB,GAAG,CAAC,CAACC;YACZ,MAAMC,WAAWD,OAAOpB,KAAK,KAAKA;YAClC,MAAMsB,aAAaF,OAAOG,QAAQ,IAAI;YAEtC,MAAMC,YAAYH,WACdjB,GAAGqB,MAAM,CAACC,OAAO,CAACC,YAAY,GAC9BvB,GAAGwB,OAAO,CAACA,OAAO,CAACC,mBAAmB;YAC1C,MAAMC,gBAAgBV,OAAOW,IAAI,GAAGC,IAAAA,kBAAW,EAACZ,OAAOW,IAAI,IAAI;YAC/D,MAAM,EAAEE,MAAMC,MAAM,EAAEC,aAAaC,MAAM,EAAE,GAAGC,eAAQ,CAAC,SAAS;YAEhE,qBACE,sBAACC,sBAAS;gBAERC,SAASjB,aAAakB,YAAY,IAAMvC,SAASmB,OAAOpB,KAAK;gBAC7DyC,mBAAkB;gBAClBC,oBAAoBtB,OAAOuB,KAAK;gBAChCC,oBAAoB;oBAAEC,UAAUxB;oBAAUE,UAAUD;gBAAW;gBAC/DpB,OAAO,CAAC,EAAE4C,OAAO,EAAE,GAAK;wBACtBlC,OAAOmC,IAAI;wBACX;4BACEC,mBAAmB1C,IAAIS,OAAO,CAACC,OAAO,CAACiC,YAAY;4BACnDC,iBAAiB5C,IAAIS,OAAO,CAACC,OAAO,CAACmC,WAAW;4BAChDrC,KAAKR,IAAIS,OAAO,CAACC,OAAO,CAACC,WAAW;4BACpCmC,cAAc9C,IAAI8C,YAAY,CAACC,aAAa;4BAC5CC,iBAAiBjC,WACbjB,GAAGqB,MAAM,CAACC,OAAO,CAAC6B,UAAU,GAC5BnD,GAAGwB,OAAO,CAAC4B,gBAAgB,CAACC,0BAA0B;wBAC5D;wBACA,CAACpC,YAAYyB,WAAW,CAACxB,cAAc;4BAAEoC,SAAS;wBAAI;wBACtDpC,cAAcV,OAAOW,QAAQ;qBAC9B;;oBAEAO,+BACC,qBAACA;wBACCG,MAAMC;wBACNC,aAAaC;wBACbuB,OAAOnC;;kCAGX,qBAACoC,kBAAQ;wBACPC,SAAQ;wBACRC,YAAYzC;wBACZsC,OAAOnC;wBACPuC,eAAe;kCAEd3C,OAAOuB,KAAK;;;eAjCVvB,OAAOpB,KAAK;QAqCvB;;AAGN;AAEA,MAAMY,SAASoD,uBAAU,CAACC,MAAM,CAAC;IAC/B/C,QAAQ;QACNgD,OAAO;IACT;IACArD,kBAAkB;QAChBsD,eAAe;QACfC,YAAY;QACZlB,iBAAiB;IACnB;IACAH,MAAM;QACJoB,eAAe;QACfC,YAAY;QACZC,gBAAgB;IAClB;IACA9C,UAAU;QACRmC,SAAS;IACX;AACF"}

package/src/components/SelectionCard/index.js CHANGED Viewed

@@ -71,7 +71,8 @@ function SelectionCard({ title, icon, size = 'md', multiSelect = false, selected
         }), [
         cr
     ]);
-    const IconComponent = icon ? _icons.ICON_MAP[icon] : null;
+    const LucideIcon = icon ? (0, _icons.resolveIcon)(icon) : null;
+    const { size: iconPx, strokeWidth: iconSW } = _icons.SIZE_MAP['small'];
     const a11yState = {
         disabled,
         ...multiSelect ? {
@@ -110,11 +111,12 @@ function SelectionCard({ title, icon, size = 'md', multiSelect = false, selected
                     style
                 ],
             children: [
-                IconComponent && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                LucideIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
                     style: styles.smIconWrap,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
-                        size: "small",
-                        color: iconColor
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LucideIcon, {
+                        size: iconPx,
+                        color: iconColor,
+                        strokeWidth: iconSW
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
@@ -132,7 +134,7 @@ function SelectionCard({ title, icon, size = 'md', multiSelect = false, selected
     const iconBgColor = selected ? cr.accent.primary.sysPrimary : cr.surface.surfaceContainer.sysSurfaceContainer;
     const iconColor = selected ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurface;
     const titleColor = selected ? cr.accent.primary.sysPrimary : cr.surface.surface.sysOnSurface;
-    const iconCircle = IconComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+    const iconCircle = LucideIcon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
         style: [
             styles.mdIconCircle,
             {
@@ -141,9 +143,10 @@ function SelectionCard({ title, icon, size = 'md', multiSelect = false, selected
                 backgroundColor: iconBgColor
             }
         ],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
-            size: "small",
-            color: iconColor
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LucideIcon, {
+            size: iconPx,
+            color: iconColor,
+            strokeWidth: iconSW
         })
     }) : null;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {

package/src/components/SelectionCard/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../packages/react-native/src/components/SelectionCard/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n View,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { ICON_MAP, type IconName } from '../../icons';\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport type SelectionCardSize = 'sm' \| 'md';\r\n\r\nexport interface SelectionCardProps {\r\n title: string;\r\n icon?: IconName;\r\n size?: SelectionCardSize;\r\n multiSelect?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n onPress?: () => void;\r\n accessibilityLabel?: string;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function SelectionCard({\r\n title,\r\n icon,\r\n size = 'md',\r\n multiSelect = false,\r\n selected = false,\r\n disabled = false,\r\n onPress,\r\n accessibilityLabel,\r\n style,\r\n}: SelectionCardProps) {\r\n const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n const selectedRing = useMemo(\r\n () => ({\r\n shadowColor: cr.accent.primary.sysPrimary,\r\n shadowOffset: { width: 1, height: 2 },\r\n shadowOpacity: 1,\r\n shadowRadius: 0,\r\n elevation: 2,\r\n }),\r\n [cr],\r\n );\r\n\r\n const IconComponent = icon ? ICON_MAP[icon] : null;\r\n\r\n const a11yState = {\r\n disabled,\r\n ...(multiSelect ? { checked: selected } : { selected }),\r\n };\r\n\r\n const checkboxNode = (\r\n <Ionicons\r\n name={selected ? 'checkbox' : 'square-outline'}\r\n size={20}\r\n color={selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline}\r\n accessible={false}\r\n />\r\n );\r\n\r\n if (size === 'sm') {\r\n const iconColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n accessibilityLabel={accessibilityLabel ?? title}\r\n accessibilityState={a11yState}\r\n style={({ pressed }) => [\r\n styles.smRoot,\r\n {\r\n gap: dim.spacing.padding.sysPadding12,\r\n paddingHorizontal: dim.spacing.padding.sysPadding20,\r\n paddingVertical: dim.spacing.padding.sysPadding16,\r\n borderRadius: dim.borderRadius.sysRadiusMd,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutline,\r\n borderWidth: selected\r\n ? dim.borderWidth.sysStrokeMedium\r\n : dim.borderWidth.sysStrokeThin,\r\n opacity: disabled ? 0.38 : 1,\r\n },\r\n selected && selectedRing,\r\n pressed && !disabled && styles.pressed,\r\n style,\r\n ]}\r\n >\r\n {IconComponent && (\r\n <View style={styles.smIconWrap}>\r\n <IconComponent size=\"small\" color={iconColor} />\r\n </View>\r\n )}\r\n <BodyText\r\n variant=\"labelLarge\"\r\n color={cr.surface.surface.sysOnSurface}\r\n emphasized={selected}\r\n style={styles.smTitle}\r\n >\r\n {title}\r\n </BodyText>\r\n {multiSelect && checkboxNode}\r\n </Pressable>\r\n );\r\n }\r\n\r\n // ── Medium ──────────────────────────────────────────────────────────────────\r\n const iconBgColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surfaceContainer.sysSurfaceContainer;\r\n const iconColor = selected\r\n ? cr.accent.primary.sysOnPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n const titleColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n\r\n const iconCircle = IconComponent ? (\r\n <View\r\n style={[\r\n styles.mdIconCircle,\r\n {\r\n padding: dim.spacing.padding.sysPadding12,\r\n borderRadius: dim.borderRadius.sysRadiusFull,\r\n backgroundColor: iconBgColor,\r\n },\r\n ]}\r\n >\r\n <IconComponent size=\"small\" color={iconColor} />\r\n </View>\r\n ) : null;\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n accessibilityLabel={accessibilityLabel ?? title}\r\n accessibilityState={a11yState}\r\n style={({ pressed }) => [\r\n styles.mdRoot,\r\n {\r\n padding: dim.spacing.padding.sysPadding24,\r\n gap: dim.spacing.padding.sysPadding24,\r\n borderRadius: dim.borderRadius.sysRadiusLg,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutline,\r\n borderWidth: selected\r\n ? dim.borderWidth.sysStrokeThick\r\n : dim.borderWidth.sysStrokeMedium,\r\n opacity: disabled ? 0.38 : 1,\r\n },\r\n selected && selectedRing,\r\n pressed && !disabled && styles.pressed,\r\n style,\r\n ]}\r\n >\r\n {multiSelect ? (\r\n <View style={styles.mdIconCheckboxRow}>\r\n {iconCircle}\r\n {checkboxNode}\r\n </View>\r\n ) : (\r\n iconCircle\r\n )}\r\n <HeaderText variant=\"titleSmall\" color={titleColor} emphasized={selected}>\r\n {title}\r\n </HeaderText>\r\n </Pressable>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n mdRoot: {\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n overflow: 'hidden',\r\n },\r\n mdIconCircle: {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n overflow: 'hidden',\r\n },\r\n mdIconCheckboxRow: {\r\n flexDirection: 'row',\r\n alignItems: 'flex-start',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n },\r\n smRoot: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n overflow: 'hidden',\r\n },\r\n smIconWrap: {\r\n width: 24,\r\n height: 24,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n smTitle: {\r\n flex: 1,\r\n },\r\n pressed: {\r\n opacity: 0.84,\r\n },\r\n});\r\n"],"names":["SelectionCard","title","icon","size","multiSelect","selected","disabled","onPress","accessibilityLabel","style","colorRoles","cr","dimensions","dim","useTheme","selectedRing","useMemo","shadowColor","accent","primary","sysPrimary","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","IconComponent","ICON_MAP","a11yState","checked","checkboxNode","Ionicons","name","color","outline","sysOutline","accessible","iconColor","surface","sysOnSurface","Pressable","undefined","accessibilityRole","accessibilityState","pressed","styles","smRoot","gap","spacing","padding","sysPadding12","paddingHorizontal","sysPadding20","paddingVertical","sysPadding16","borderRadius","sysRadiusMd","backgroundColor","surfaceContainer","sysSurfaceContainerLowest","borderColor","borderWidth","sysStrokeMedium","sysStrokeThin","opacity","View","smIconWrap","BodyText","variant","emphasized","smTitle","iconBgColor","sysSurfaceContainer","sysOnPrimary","titleColor","iconCircle","mdIconCircle","sysRadiusFull","mdRoot","sysPadding24","sysRadiusLg","sysStrokeThick","mdIconCheckboxRow","HeaderText","StyleSheet","create","flexDirection","alignItems","overflow","justifyContent","flex"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../../packages/react-native/src/components/SelectionCard/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n Pressable,\r\n StyleProp,\r\n StyleSheet,\r\n View,\r\n ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { type IconName, SIZE_MAP, resolveIcon } from '../../icons';\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport type SelectionCardSize = 'sm' \| 'md';\r\n\r\nexport interface SelectionCardProps {\r\n title: string;\r\n icon?: IconName;\r\n size?: SelectionCardSize;\r\n multiSelect?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n onPress?: () => void;\r\n accessibilityLabel?: string;\r\n style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function SelectionCard({\r\n title,\r\n icon,\r\n size = 'md',\r\n multiSelect = false,\r\n selected = false,\r\n disabled = false,\r\n onPress,\r\n accessibilityLabel,\r\n style,\r\n}: SelectionCardProps) {\r\n const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n const selectedRing = useMemo(\r\n () => ({\r\n shadowColor: cr.accent.primary.sysPrimary,\r\n shadowOffset: { width: 1, height: 2 },\r\n shadowOpacity: 1,\r\n shadowRadius: 0,\r\n elevation: 2,\r\n }),\r\n [cr],\r\n );\r\n\r\n const LucideIcon = icon ? resolveIcon(icon) : null;\r\n const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['small'];\r\n\r\n const a11yState = {\r\n disabled,\r\n ...(multiSelect ? { checked: selected } : { selected }),\r\n };\r\n\r\n const checkboxNode = (\r\n <Ionicons\r\n name={selected ? 'checkbox' : 'square-outline'}\r\n size={20}\r\n color={selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline}\r\n accessible={false}\r\n />\r\n );\r\n\r\n if (size === 'sm') {\r\n const iconColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n accessibilityLabel={accessibilityLabel ?? title}\r\n accessibilityState={a11yState}\r\n style={({ pressed }) => [\r\n styles.smRoot,\r\n {\r\n gap: dim.spacing.padding.sysPadding12,\r\n paddingHorizontal: dim.spacing.padding.sysPadding20,\r\n paddingVertical: dim.spacing.padding.sysPadding16,\r\n borderRadius: dim.borderRadius.sysRadiusMd,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutline,\r\n borderWidth: selected\r\n ? dim.borderWidth.sysStrokeMedium\r\n : dim.borderWidth.sysStrokeThin,\r\n opacity: disabled ? 0.38 : 1,\r\n },\r\n selected && selectedRing,\r\n pressed && !disabled && styles.pressed,\r\n style,\r\n ]}\r\n >\r\n {LucideIcon && (\r\n <View style={styles.smIconWrap}>\r\n <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />\r\n </View>\r\n )}\r\n <BodyText\r\n variant=\"labelLarge\"\r\n color={cr.surface.surface.sysOnSurface}\r\n emphasized={selected}\r\n style={styles.smTitle}\r\n >\r\n {title}\r\n </BodyText>\r\n {multiSelect && checkboxNode}\r\n </Pressable>\r\n );\r\n }\r\n\r\n // ── Medium ──────────────────────────────────────────────────────────────────\r\n const iconBgColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surfaceContainer.sysSurfaceContainer;\r\n const iconColor = selected\r\n ? cr.accent.primary.sysOnPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n const titleColor = selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.surface.surface.sysOnSurface;\r\n\r\n const iconCircle = LucideIcon ? (\r\n <View\r\n style={[\r\n styles.mdIconCircle,\r\n {\r\n padding: dim.spacing.padding.sysPadding12,\r\n borderRadius: dim.borderRadius.sysRadiusFull,\r\n backgroundColor: iconBgColor,\r\n },\r\n ]}\r\n >\r\n <LucideIcon size={iconPx} color={iconColor} strokeWidth={iconSW} />\r\n </View>\r\n ) : null;\r\n\r\n return (\r\n <Pressable\r\n onPress={disabled ? undefined : onPress}\r\n accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n accessibilityLabel={accessibilityLabel ?? title}\r\n accessibilityState={a11yState}\r\n style={({ pressed }) => [\r\n styles.mdRoot,\r\n {\r\n padding: dim.spacing.padding.sysPadding24,\r\n gap: dim.spacing.padding.sysPadding24,\r\n borderRadius: dim.borderRadius.sysRadiusLg,\r\n backgroundColor:\r\n cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n borderColor: selected\r\n ? cr.accent.primary.sysPrimary\r\n : cr.outline.sysOutline,\r\n borderWidth: selected\r\n ? dim.borderWidth.sysStrokeThick\r\n : dim.borderWidth.sysStrokeMedium,\r\n opacity: disabled ? 0.38 : 1,\r\n },\r\n selected && selectedRing,\r\n pressed && !disabled && styles.pressed,\r\n style,\r\n ]}\r\n >\r\n {multiSelect ? (\r\n <View style={styles.mdIconCheckboxRow}>\r\n {iconCircle}\r\n {checkboxNode}\r\n </View>\r\n ) : (\r\n iconCircle\r\n )}\r\n <HeaderText variant=\"titleSmall\" color={titleColor} emphasized={selected}>\r\n {title}\r\n </HeaderText>\r\n </Pressable>\r\n );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n mdRoot: {\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n overflow: 'hidden',\r\n },\r\n mdIconCircle: {\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n overflow: 'hidden',\r\n },\r\n mdIconCheckboxRow: {\r\n flexDirection: 'row',\r\n alignItems: 'flex-start',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n },\r\n smRoot: {\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n overflow: 'hidden',\r\n },\r\n smIconWrap: {\r\n width: 24,\r\n height: 24,\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n smTitle: {\r\n flex: 1,\r\n },\r\n pressed: {\r\n opacity: 0.84,\r\n },\r\n});\r\n"],"names":["SelectionCard","title","icon","size","multiSelect","selected","disabled","onPress","accessibilityLabel","style","colorRoles","cr","dimensions","dim","useTheme","selectedRing","useMemo","shadowColor","accent","primary","sysPrimary","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","LucideIcon","resolveIcon","iconPx","strokeWidth","iconSW","SIZE_MAP","a11yState","checked","checkboxNode","Ionicons","name","color","outline","sysOutline","accessible","iconColor","surface","sysOnSurface","Pressable","undefined","accessibilityRole","accessibilityState","pressed","styles","smRoot","gap","spacing","padding","sysPadding12","paddingHorizontal","sysPadding20","paddingVertical","sysPadding16","borderRadius","sysRadiusMd","backgroundColor","surfaceContainer","sysSurfaceContainerLowest","borderColor","borderWidth","sysStrokeMedium","sysStrokeThin","opacity","View","smIconWrap","BodyText","variant","emphasized","smTitle","iconBgColor","sysSurfaceContainer","sysOnPrimary","titleColor","iconCircle","mdIconCircle","sysRadiusFull","mdRoot","sysPadding24","sysRadiusLg","sysStrokeThick","mdIconCheckboxRow","HeaderText","StyleSheet","create","flexDirection","alignItems","overflow","justifyContent","flex"],"mappings":"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"}