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

package/src/components/Input/index.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Input", {
+    enumerable: true,
+    get: function() {
+        return Input;
+    }
+});
+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;
+}
+// Focus-ring halo: 4px spread, sysPrimary08 colour — achieved with a fixed
+// 4px-padded wrapper whose background switches on focus.
+const RING_SIZE = 4;
+function Input({ size = 'md', label, helperText, errorText, invalid = false, leadingIcon, trailingIcon, editable = true, onFocus, onBlur, ...rest }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const [isFocused, setIsFocused] = (0, _react.useState)(false);
+    const SIZE_TOKENS = (0, _react.useMemo)(()=>({
+            sm: {
+                height: 40,
+                paddingH: dim.spacing.padding.sysPadding12,
+                paddingV: dim.spacing.padding.sysPadding8,
+                gap: dim.spacing.padding.sysPadding4,
+                fontSize: ts.bodySmall.sysFontSize,
+                lineHeight: ts.bodySmall.sysLineHeight,
+                radius: dim.borderRadius.sysRadiusSm,
+                iconSize: 20
+            },
+            md: {
+                height: 48,
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding12,
+                gap: dim.spacing.padding.sysPadding8,
+                fontSize: ts.bodyMedium.sysFontSize,
+                lineHeight: ts.bodyMedium.sysLineHeight,
+                radius: dim.borderRadius.sysRadiusSm,
+                iconSize: 20
+            },
+            lg: {
+                height: 56,
+                paddingH: dim.spacing.padding.sysPadding20,
+                paddingV: dim.spacing.padding.sysPadding16,
+                gap: dim.spacing.padding.sysPadding8,
+                fontSize: ts.bodyMedium.sysFontSize,
+                lineHeight: ts.bodyMedium.sysLineHeight,
+                radius: dim.borderRadius.sysRadiusMd,
+                iconSize: 20
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const s = SIZE_TOKENS[size];
+    const isDisabled = editable === false;
+    const hasError = invalid || !!errorText;
+    // ── Border ──────────────────────────────────────────────────────────────
+    const borderWidth = isFocused || hasError ? dim.borderWidth.sysStrokeMedium : dim.borderWidth.sysStrokeThin;
+    const borderColor = hasError ? cr.error.sysError : isFocused ? cr.accent.primary.sysPrimary : cr.outline.sysOutlineVariant;
+    // ── Text colours ─────────────────────────────────────────────────────────
+    const textColor = cr.surface.surface.sysOnSurface;
+    const placeholderColor = cr.surface.surface.sysOnSurfaceVariant;
+    // ── Helper / error text ──────────────────────────────────────────────────
+    const supportingText = errorText ?? helperText;
+    const supportingColor = hasError ? cr.error.sysError : cr.surface.surface.sysOnSurfaceVariant;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.wrapper,
+            isDisabled && styles.disabled
+        ],
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                style: [
+                    styles.label,
+                    {
+                        color: hasError ? cr.error.sysError : cr.surface.surface.sysOnSurfaceVariant,
+                        fontSize: ts.labelMedium.sysFontSize,
+                        lineHeight: ts.labelMedium.sysLineHeight
+                    }
+                ],
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    padding: RING_SIZE,
+                    borderRadius: s.radius + RING_SIZE,
+                    backgroundColor: isFocused && !hasError ? cr.transparent.primary.sysPrimary08 : 'transparent'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                    style: {
+                        height: s.height,
+                        borderRadius: s.radius,
+                        borderWidth,
+                        borderColor,
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingHorizontal: s.paddingH,
+                        paddingVertical: s.paddingV,
+                        gap: s.gap,
+                        overflow: 'hidden'
+                    },
+                    children: [
+                        leadingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: {
+                                width: s.iconSize,
+                                height: s.iconSize,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0
+                            },
+                            children: leadingIcon
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.TextInput, {
+                            ...rest,
+                            editable: editable,
+                            accessibilityLabel: label ?? rest.placeholder,
+                            accessibilityHint: supportingText,
+                            accessibilityState: {
+                                disabled: isDisabled
+                            },
+                            onFocus: (e)=>{
+                                setIsFocused(true);
+                                onFocus?.(e);
+                            },
+                            onBlur: (e)=>{
+                                setIsFocused(false);
+                                onBlur?.(e);
+                            },
+                            style: {
+                                flex: 1,
+                                fontSize: s.fontSize,
+                                lineHeight: s.lineHeight,
+                                color: textColor,
+                                includeFontPadding: false,
+                                // Reset RN TextInput default padding/margin
+                                padding: 0,
+                                margin: 0
+                            },
+                            placeholderTextColor: placeholderColor
+                        }),
+                        trailingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: {
+                                width: s.iconSize,
+                                height: s.iconSize,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0
+                            },
+                            children: trailingIcon
+                        })
+                    ]
+                })
+            }),
+            supportingText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                style: [
+                    styles.supporting,
+                    {
+                        color: supportingColor,
+                        fontSize: ts.bodySmall.sysFontSize,
+                        lineHeight: ts.bodySmall.sysLineHeight
+                    }
+                ],
+                children: supportingText
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    wrapper: {
+        gap: 4
+    },
+    disabled: {
+        opacity: 0.48
+    },
+    label: {
+        fontWeight: '500',
+        includeFontPadding: false,
+        // indent to align with the input text (ring padding + horizontal padding)
+        paddingLeft: RING_SIZE
+    },
+    supporting: {
+        includeFontPadding: false,
+        paddingLeft: RING_SIZE
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type ListItemType = 'simple' | 'detailed';
+export interface ListItemProps {
+    type?: ListItemType;
+    label: string;
+    subLabel?: string;
+    icon?: React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    showDivider?: boolean;
+}
+export interface ListProps {
+    items: Omit<ListItemProps, 'showDivider'>[];
+    type?: ListItemType;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ListItem({ type, label, subLabel, icon, onPress, disabled, showDivider, }: ListItemProps): React.JSX.Element;
+export declare function List({ items, type, style }: ListProps): React.JSX.Element;

package/src/components/List/index.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get List () {
+        return List;
+    },
+    get ListItem () {
+        return ListItem;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ListItem({ type = 'simple', label, subLabel, icon, onPress, disabled = false, showDivider = true }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const isDetailed = type === 'detailed';
+    const content = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.itemRow,
+            {
+                gap: dim.spacing.padding.sysPadding12
+            }
+        ],
+        children: [
+            isDetailed ? // Detailed: icon inside circular badge
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.iconBadge,
+                    {
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow
+                    }
+                ],
+                children: icon
+            }) : // Simple: bare icon
+            icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: styles.simpleIcon,
+                children: icon
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: styles.textBlock,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                        variant: "medium",
+                        emphasized: isDetailed,
+                        color: cr.surface.surface.sysOnSurface,
+                        children: label
+                    }),
+                    isDetailed && subLabel && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                        variant: "small",
+                        color: cr.surface.surface.sysOnSurfaceVariant,
+                        children: subLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                name: "chevron-forward",
+                size: 20,
+                color: cr.outline.sysOutlineFixed,
+                accessible: false
+            })
+        ]
+    });
+    const divider = showDivider ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            styles.divider,
+            {
+                // Indent past icon + gap: 24px (simple) or 48px+16px (detailed)
+                marginLeft: isDetailed ? 64 : 36,
+                borderBottomColor: cr.outline.sysOutline
+            }
+        ]
+    }) : null;
+    if (onPress) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: disabled && styles.disabled,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                    onPress: disabled ? undefined : onPress,
+                    accessibilityRole: "button",
+                    accessibilityLabel: label,
+                    accessibilityState: {
+                        disabled
+                    },
+                    style: ({ pressed })=>[
+                            isDetailed ? {
+                                paddingTop: dim.spacing.padding.sysPadding12
+                            } : {
+                                paddingVertical: dim.spacing.padding.sysPadding16
+                            },
+                            pressed && !disabled && styles.pressed
+                        ],
+                    children: content
+                }),
+                divider
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: disabled && styles.disabled,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: isDetailed ? {
+                    paddingTop: dim.spacing.padding.sysPadding12
+                } : {
+                    paddingVertical: dim.spacing.padding.sysPadding16
+                },
+                children: content
+            }),
+            divider
+        ]
+    });
+}
+function List({ items, type = 'simple', style }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: style,
+        children: items.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(ListItem, {
+                ...item,
+                type: item.type ?? type,
+                showDivider: index < items.length - 1
+            }, index))
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    itemRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    simpleIcon: {
+        width: 24,
+        height: 24
+    },
+    iconBadge: {
+        width: 48,
+        height: 48,
+        borderRadius: 999,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    textBlock: {
+        flex: 1,
+        minWidth: 0
+    },
+    divider: {
+        borderBottomWidth: _reactnative.StyleSheet.hairlineWidth
+    },
+    pressed: {
+        backgroundColor: 'rgba(0,0,0,0.04)'
+    },
+    disabled: {
+        opacity: 0.48
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/List/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 { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport type ListItemType = 'simple' | 'detailed';\r\n\r\nexport interface ListItemProps {\r\n  type?: ListItemType;\r\n  label: string;\r\n  subLabel?: string;\r\n  icon?: React.ReactNode;\r\n  onPress?: () => void;\r\n  disabled?: boolean;\r\n  showDivider?: boolean;\r\n}\r\n\r\nexport interface ListProps {\r\n  items: Omit<ListItemProps, 'showDivider'>[];\r\n  type?: ListItemType;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── ListItem ──────────────────────────────────────────────────────────────────\r\n\r\nexport function ListItem({\r\n  type = 'simple',\r\n  label,\r\n  subLabel,\r\n  icon,\r\n  onPress,\r\n  disabled = false,\r\n  showDivider = true,\r\n}: ListItemProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n  const isDetailed = type === 'detailed';\r\n\r\n  const content = (\r\n    <View style={[styles.itemRow, { gap: dim.spacing.padding.sysPadding12 }]}>\r\n      {isDetailed ? (\r\n        // Detailed: icon inside circular badge\r\n        <View\r\n          style={[\r\n            styles.iconBadge,\r\n            {\r\n              backgroundColor:\r\n                cr.surface.surfaceContainer.sysSurfaceContainerLow,\r\n            },\r\n          ]}\r\n        >\r\n          {icon}\r\n        </View>\r\n      ) : (\r\n        // Simple: bare icon\r\n        icon && <View style={styles.simpleIcon}>{icon}</View>\r\n      )}\r\n\r\n      <View style={styles.textBlock}>\r\n        <BodyText\r\n          variant=\"medium\"\r\n          emphasized={isDetailed}\r\n          color={cr.surface.surface.sysOnSurface}\r\n        >\r\n          {label}\r\n        </BodyText>\r\n        {isDetailed && subLabel && (\r\n          <BodyText\r\n            variant=\"small\"\r\n            color={cr.surface.surface.sysOnSurfaceVariant}\r\n          >\r\n            {subLabel}\r\n          </BodyText>\r\n        )}\r\n      </View>\r\n\r\n      <Ionicons\r\n        name=\"chevron-forward\"\r\n        size={20}\r\n        color={cr.outline.sysOutlineFixed}\r\n        accessible={false}\r\n      />\r\n    </View>\r\n  );\r\n\r\n  const divider = showDivider ? (\r\n    <View\r\n      style={[\r\n        styles.divider,\r\n        {\r\n          // Indent past icon + gap: 24px (simple) or 48px+16px (detailed)\r\n          marginLeft: isDetailed ? 64 : 36,\r\n          borderBottomColor: cr.outline.sysOutline,\r\n        },\r\n      ]}\r\n    />\r\n  ) : null;\r\n\r\n  if (onPress) {\r\n    return (\r\n      <View style={disabled && styles.disabled}>\r\n        <Pressable\r\n          onPress={disabled ? undefined : onPress}\r\n          accessibilityRole=\"button\"\r\n          accessibilityLabel={label}\r\n          accessibilityState={{ disabled }}\r\n          style={({ pressed }) => [\r\n            isDetailed\r\n              ? { paddingTop: dim.spacing.padding.sysPadding12 }\r\n              : {\r\n                  paddingVertical: dim.spacing.padding.sysPadding16,\r\n                },\r\n            pressed && !disabled && styles.pressed,\r\n          ]}\r\n        >\r\n          {content}\r\n        </Pressable>\r\n        {divider}\r\n      </View>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <View style={disabled && styles.disabled}>\r\n      <View\r\n        style={\r\n          isDetailed\r\n            ? { paddingTop: dim.spacing.padding.sysPadding12 }\r\n            : { paddingVertical: dim.spacing.padding.sysPadding16 }\r\n        }\r\n      >\r\n        {content}\r\n      </View>\r\n      {divider}\r\n    </View>\r\n  );\r\n}\r\n\r\n// ── List ──────────────────────────────────────────────────────────────────────\r\n\r\nexport function List({ items, type = 'simple', style }: ListProps) {\r\n  return (\r\n    <View style={style}>\r\n      {items.map((item, index) => (\r\n        <ListItem\r\n          key={index}\r\n          {...item}\r\n          type={item.type ?? type}\r\n          showDivider={index < items.length - 1}\r\n        />\r\n      ))}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  itemRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  simpleIcon: {\r\n    width: 24,\r\n    height: 24,\r\n  },\r\n  iconBadge: {\r\n    width: 48,\r\n    height: 48,\r\n    borderRadius: 999,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  textBlock: {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  },\r\n  divider: {\r\n    borderBottomWidth: StyleSheet.hairlineWidth,\r\n  },\r\n  pressed: {\r\n    backgroundColor: 'rgba(0,0,0,0.04)',\r\n  },\r\n  disabled: {\r\n    opacity: 0.48,\r\n  },\r\n});\r\n"],"names":["List","ListItem","type","label","subLabel","icon","onPress","disabled","showDivider","colorRoles","cr","dimensions","dim","useTheme","isDetailed","content","View","style","styles","itemRow","gap","spacing","padding","sysPadding12","iconBadge","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLow","simpleIcon","textBlock","BodyText","variant","emphasized","color","sysOnSurface","sysOnSurfaceVariant","Ionicons","name","size","outline","sysOutlineFixed","accessible","divider","marginLeft","borderBottomColor","sysOutline","Pressable","undefined","accessibilityRole","accessibilityLabel","accessibilityState","pressed","paddingTop","paddingVertical","sysPadding16","items","map","item","index","length","StyleSheet","create","flexDirection","alignItems","width","height","borderRadius","justifyContent","flex","minWidth","borderBottomWidth","hairlineWidth","opacity"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type PaginationSize = 'sm' | 'lg';
+export interface PaginationProps {
+    size?: PaginationSize;
+    totalPages: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    /** How many page numbers to show on each side of the current page */
+    siblingCount?: number;
+    /** On mobile/compact layouts — renders only prev + next arrows (no page numbers) */
+    compact?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Pagination({ size, totalPages, currentPage, onPageChange, siblingCount, compact, style, }: PaginationProps): React.JSX.Element;