@compsych-ui-components/react-native 4.0.0 → 4.0.13

package/src/components/RadioButton/index.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RadioButton", {
+    enumerable: true,
+    get: function() {
+        return RadioButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function RadioButton({ checked: checkedProp, defaultChecked = false, onChange, size = 'md', label, description, disabled = false, invalid = false, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+    const isControlled = checkedProp !== undefined;
+    const isChecked = isControlled ? checkedProp : internalChecked;
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                // Container (overall hit area)
+                hitArea: 36,
+                // Visible circle
+                circle: 20,
+                // Inner dot when selected
+                dot: 8,
+                fontSize: ts.bodySmall.sysFontSize,
+                lineHeight: ts.bodySmall.sysLineHeight
+            },
+            md: {
+                hitArea: 40,
+                circle: 24,
+                dot: 10,
+                fontSize: ts.bodyMedium.sysFontSize,
+                lineHeight: ts.bodyMedium.sysLineHeight
+            }
+        }), [
+        ts
+    ]);
+    const s = sizeTokens[size];
+    function handlePress() {
+        if (disabled) return;
+        const next = !isChecked;
+        if (!isControlled) setInternalChecked(next);
+        onChange?.(next);
+    }
+    // Border/fill colours
+    const borderColor = invalid ? cr.error.sysError : isChecked ? cr.accent.primary.sysPrimary : cr.outline.sysOutlineFixed;
+    const circleBg = isChecked ? cr.accent.primary.sysPrimary : 'transparent';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+        onPress: handlePress,
+        accessibilityRole: "radio",
+        accessibilityLabel: label,
+        accessibilityState: {
+            checked: isChecked,
+            disabled
+        },
+        style: ()=>[
+                styles.root,
+                disabled && styles.disabled,
+                style
+            ],
+        children: ({ pressed })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            styles.hitArea,
+                            {
+                                width: s.hitArea,
+                                height: s.hitArea,
+                                borderRadius: s.hitArea / 2,
+                                backgroundColor: pressed && !disabled ? cr.transparent.neutral.sysBlack10 : 'transparent'
+                            }
+                        ],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: {
+                                width: s.circle,
+                                height: s.circle,
+                                borderRadius: s.circle / 2,
+                                borderWidth: dim.borderWidth.sysStrokeMedium,
+                                borderColor,
+                                backgroundColor: circleBg,
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            children: isChecked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                style: {
+                                    width: s.dot,
+                                    height: s.dot,
+                                    borderRadius: s.dot / 2,
+                                    backgroundColor: cr.accent.primary.sysOnPrimary
+                                }
+                            })
+                        })
+                    }),
+                    (label || description) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            styles.textBlock,
+                            {
+                                gap: 2
+                            }
+                        ],
+                        children: [
+                            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurface,
+                                    fontSize: s.fontSize,
+                                    lineHeight: s.lineHeight,
+                                    includeFontPadding: false
+                                },
+                                children: label
+                            }),
+                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurfaceVariant,
+                                    fontSize: s.fontSize - 2,
+                                    lineHeight: s.lineHeight - 2,
+                                    includeFontPadding: false
+                                },
+                                children: description
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    hitArea: {
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    textBlock: {
+        flex: 1,
+        flexDirection: 'column'
+    },
+    disabled: {
+        opacity: 0.48
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ScrollView, type ScrollViewProps } from 'react-native';
+export interface ScreenContainerProps extends ScrollViewProps {
+    children?: React.ReactNode;
+}
+/**
+ * Scrollable screen wrapper that applies the default surface background and
+ * standard padding. The ref is forwarded to the underlying ScrollView so
+ * callers can imperatively scroll, measure, or attach scroll listeners.
+ *
+ * @example
+ * const scrollRef = useRef<ScrollView>(null);
+ * <ScreenContainer ref={scrollRef}>...</ScreenContainer>
+ */
+export declare const ScreenContainer: React.ForwardRefExoticComponent<ScreenContainerProps & React.RefAttributes<ScrollView>>;

package/src/components/ScreenContainer/index.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ScreenContainer", {
+    enumerable: true,
+    get: function() {
+        return ScreenContainer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ScreenContainer = /*#__PURE__*/ _react.default.forwardRef(function ScreenContainer({ children, style, contentContainerStyle, ...rest }, ref) {
+    const { dimensions: dim, colorRoles: cr } = (0, _theme.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
+        ref: ref,
+        style: [
+            {
+                flex: 1,
+                backgroundColor: cr.surface.surface.sysSurface
+            },
+            style
+        ],
+        contentContainerStyle: [
+            {
+                paddingHorizontal: dim.spacing.padding.sysPadding16,
+                paddingVertical: dim.spacing.padding.sysPadding8
+            },
+            contentContainerStyle
+        ],
+        ...rest,
+        children: children
+    });
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    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;

package/src/components/SegmentedControl/index.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SegmentedControl", {
+    enumerable: true,
+    get: function() {
+        return SegmentedControl;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function SegmentedControl({ options, value, onChange, fullWidth = false, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            styles.container,
+            {
+                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
+        ],
+        children: options.map((option)=>{
+            const isActive = option.value === value;
+            const isDisabled = option.disabled ?? false;
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
+                onPress: isDisabled ? undefined : ()=>onChange(option.value),
+                accessibilityRole: "tab",
+                accessibilityLabel: option.label,
+                accessibilityState: {
+                    selected: isActive,
+                    disabled: isDisabled
+                },
+                style: ({ pressed })=>[
+                        styles.item,
+                        {
+                            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
+                        },
+                        !isActive && pressed && !isDisabled && {
+                            backgroundColor: cr.transparent.neutral.sysBlack10
+                        },
+                        isDisabled && styles.disabled
+                    ],
+                children: [
+                    option.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: styles.iconSlot,
+                        children: option.icon
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                        variant: "small",
+                        emphasized: isActive,
+                        color: isActive ? cr.accent.primary.sysOnPrimary : cr.surface.surface.sysOnSurfaceVariant,
+                        numberOfLines: 1,
+                        children: option.label
+                    })
+                ]
+            }, option.value);
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1
+    },
+    fullWidth: {
+        alignSelf: 'stretch'
+    },
+    item: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    iconSlot: {
+        width: 16,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    disabled: {
+        opacity: 0.48
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { type IconName } from '../../icons';
+export type SelectionCardSize = 'sm' | 'md';
+export interface SelectionCardProps {
+    title: string;
+    icon?: IconName;
+    size?: SelectionCardSize;
+    multiSelect?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function SelectionCard({ title, icon, size, multiSelect, selected, disabled, onPress, accessibilityLabel, style, }: SelectionCardProps): React.JSX.Element;

package/src/components/SelectionCard/index.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SelectionCard", {
+    enumerable: true,
+    get: function() {
+        return SelectionCard;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _icons = require("../../icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+const _HeaderText = require("../HeaderText");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function SelectionCard({ title, icon, size = 'md', multiSelect = false, selected = false, disabled = false, onPress, accessibilityLabel, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const selectedRing = (0, _react.useMemo)(()=>({
+            shadowColor: cr.accent.primary.sysPrimary,
+            shadowOffset: {
+                width: 1,
+                height: 2
+            },
+            shadowOpacity: 1,
+            shadowRadius: 0,
+            elevation: 2
+        }), [
+        cr
+    ]);
+    const IconComponent = icon ? _icons.ICON_MAP[icon] : null;
+    const a11yState = {
+        disabled,
+        ...multiSelect ? {
+            checked: selected
+        } : {
+            selected
+        }
+    };
+    const checkboxNode = /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+        name: selected ? 'checkbox' : 'square-outline',
+        size: 20,
+        color: selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline,
+        accessible: false
+    });
+    if (size === 'sm') {
+        const iconColor = selected ? cr.accent.primary.sysPrimary : cr.surface.surface.sysOnSurface;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
+            onPress: disabled ? undefined : onPress,
+            accessibilityRole: multiSelect ? 'checkbox' : 'radio',
+            accessibilityLabel: accessibilityLabel ?? title,
+            accessibilityState: a11yState,
+            style: ({ pressed })=>[
+                    styles.smRoot,
+                    {
+                        gap: dim.spacing.padding.sysPadding12,
+                        paddingHorizontal: dim.spacing.padding.sysPadding20,
+                        paddingVertical: dim.spacing.padding.sysPadding16,
+                        borderRadius: dim.borderRadius.sysRadiusMd,
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                        borderColor: selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline,
+                        borderWidth: selected ? dim.borderWidth.sysStrokeMedium : dim.borderWidth.sysStrokeThin,
+                        opacity: disabled ? 0.38 : 1
+                    },
+                    selected && selectedRing,
+                    pressed && !disabled && styles.pressed,
+                    style
+                ],
+            children: [
+                IconComponent && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: styles.smIconWrap,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
+                        size: "small",
+                        color: iconColor
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                    variant: "labelLarge",
+                    color: cr.surface.surface.sysOnSurface,
+                    emphasized: selected,
+                    style: styles.smTitle,
+                    children: title
+                }),
+                multiSelect && checkboxNode
+            ]
+        });
+    }
+    // ── Medium ──────────────────────────────────────────────────────────────────
+    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, {
+        style: [
+            styles.mdIconCircle,
+            {
+                padding: dim.spacing.padding.sysPadding12,
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                backgroundColor: iconBgColor
+            }
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
+            size: "small",
+            color: iconColor
+        })
+    }) : null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
+        onPress: disabled ? undefined : onPress,
+        accessibilityRole: multiSelect ? 'checkbox' : 'radio',
+        accessibilityLabel: accessibilityLabel ?? title,
+        accessibilityState: a11yState,
+        style: ({ pressed })=>[
+                styles.mdRoot,
+                {
+                    padding: dim.spacing.padding.sysPadding24,
+                    gap: dim.spacing.padding.sysPadding24,
+                    borderRadius: dim.borderRadius.sysRadiusLg,
+                    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                    borderColor: selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline,
+                    borderWidth: selected ? dim.borderWidth.sysStrokeThick : dim.borderWidth.sysStrokeMedium,
+                    opacity: disabled ? 0.38 : 1
+                },
+                selected && selectedRing,
+                pressed && !disabled && styles.pressed,
+                style
+            ],
+        children: [
+            multiSelect ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: styles.mdIconCheckboxRow,
+                children: [
+                    iconCircle,
+                    checkboxNode
+                ]
+            }) : iconCircle,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderText.HeaderText, {
+                variant: "titleSmall",
+                color: titleColor,
+                emphasized: selected,
+                children: title
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    mdRoot: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        overflow: 'hidden'
+    },
+    mdIconCircle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+    },
+    mdIconCheckboxRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        width: '100%'
+    },
+    smRoot: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        overflow: 'hidden'
+    },
+    smIconWrap: {
+        width: 24,
+        height: 24,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    smTitle: {
+        flex: 1
+    },
+    pressed: {
+        opacity: 0.84
+    }
+});
+
+//# sourceMappingURL=index.js.map