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

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "@compsych-ui-components/react-native",
-  "version": "4.0.4",
-  "description": "React Native UI components for compsych",
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "default": "./src/index.js"
-    }
-  },
+  "version": "4.0.13",
+  "description": "ComPsych React Native Design System — components, icons, tokens, and theming",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src"
+  ],
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
+  "keywords": [
+    "react-native",
+    "compsych",
+    "design-system",
+    "components",
+    "expo"
+  ],
+  "license": "UNLICENSED",
   "peerDependencies": {
-    "@compsych-ui-components/shared": "*",
+    "@expo/vector-icons": ">=15.0.0",
+    "expo-font": ">=13.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0"
+    "react-native": ">=0.73.0",
+    "react-native-svg": ">=15.0.0"
   },
   "type": "commonjs"
 }

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ActionSheetAction {
+    label: string;
+    onPress: () => void;
+}
+export interface ActionSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+    primaryAction?: ActionSheetAction;
+    secondaryAction?: ActionSheetAction;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, style, }: ActionSheetProps): React.JSX.Element;

package/src/components/ActionSheet/index.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ActionSheet", {
+    enumerable: true,
+    get: function() {
+        return ActionSheet;
+    }
+});
+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 _theme = require("../../theme");
+const _Button = require("../Button");
+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 ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const dynamicStyles = (0, _react.useMemo)(()=>({
+            sheetWrapper: {
+                paddingHorizontal: dim.spacing.padding.sysPadding6,
+                paddingBottom: dim.spacing.padding.sysPadding6
+            },
+            sheet: {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderRadius: dim.borderRadius.sysRadiusXxl
+            },
+            titleRow: {
+                paddingHorizontal: dim.spacing.padding.sysPadding16,
+                paddingVertical: dim.spacing.padding.sysPadding8
+            },
+            closeButton: {
+                borderRadius: dim.borderRadius.sysRadiusFull,
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer
+            },
+            contentInner: {
+                padding: dim.spacing.padding.sysPadding16
+            },
+            actions: {
+                padding: dim.spacing.padding.sysPadding24,
+                gap: dim.spacing.padding.sysPadding12
+            }
+        }), [
+        cr,
+        dim
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Modal, {
+        visible: visible,
+        transparent: true,
+        animationType: "slide",
+        onRequestClose: onClose,
+        statusBarTranslucent: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                style: styles.backdrop,
+                onPress: onClose,
+                accessible: false
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.sheetWrapper,
+                    dynamicStyles.sheetWrapper,
+                    style
+                ],
+                pointerEvents: "box-none",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                    style: [
+                        styles.sheet,
+                        dynamicStyles.sheet
+                    ],
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                            style: styles.toolbar,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                    style: styles.grabberRow,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                        style: styles.grabber
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                                    style: [
+                                        styles.titleRow,
+                                        dynamicStyles.titleRow
+                                    ],
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                            style: styles.closeButtonSize
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderText.HeaderText, {
+                                            variant: "titleSmall",
+                                            emphasized: true,
+                                            color: cr.surface.surface.sysOnSurface,
+                                            style: styles.titleText,
+                                            children: title ?? ''
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                                            onPress: onClose,
+                                            accessibilityRole: "button",
+                                            accessibilityLabel: "Close",
+                                            style: ({ pressed })=>[
+                                                    styles.closeButtonSize,
+                                                    dynamicStyles.closeButton,
+                                                    pressed && styles.closePressed
+                                                ],
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                                name: "close",
+                                                size: 20,
+                                                color: cr.surface.surface.sysOnSurface
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        children && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
+                            style: styles.content,
+                            contentContainerStyle: dynamicStyles.contentInner,
+                            showsVerticalScrollIndicator: false,
+                            children: children
+                        }),
+                        (primaryAction || secondaryAction) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                            style: dynamicStyles.actions,
+                            children: [
+                                primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+                                    label: primaryAction.label,
+                                    variant: "filled",
+                                    size: "xl",
+                                    fullWidth: true,
+                                    onPress: primaryAction.onPress
+                                }),
+                                secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+                                    label: secondaryAction.label,
+                                    variant: "outlined",
+                                    size: "xl",
+                                    fullWidth: true,
+                                    onPress: secondaryAction.onPress
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    backdrop: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.4)'
+    },
+    sheetWrapper: {
+        flex: 1,
+        justifyContent: 'flex-end'
+    },
+    sheet: {
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.4)',
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 16,
+        elevation: 8
+    },
+    toolbar: {
+        alignItems: 'center',
+        width: '100%'
+    },
+    grabberRow: {
+        height: 16,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingBottom: 0,
+        paddingTop: 5
+    },
+    grabber: {
+        width: 36,
+        height: 5,
+        borderRadius: 100,
+        backgroundColor: '#ccc'
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+    },
+    titleText: {
+        flex: 1,
+        textAlign: 'center'
+    },
+    closeButtonSize: {
+        width: 32,
+        height: 32,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    closePressed: {
+        opacity: 0.7
+    },
+    content: {
+        maxHeight: 400
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ActionSheet/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Modal,\r\n  Pressable,\r\n  ScrollView,\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 { Button } from '../Button';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport interface ActionSheetAction {\r\n  label: string;\r\n  onPress: () => void;\r\n}\r\n\r\nexport interface ActionSheetProps {\r\n  visible: boolean;\r\n  onClose: () => void;\r\n  title?: string;\r\n  children?: React.ReactNode;\r\n  primaryAction?: ActionSheetAction;\r\n  secondaryAction?: ActionSheetAction;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function ActionSheet({\r\n  visible,\r\n  onClose,\r\n  title,\r\n  children,\r\n  primaryAction,\r\n  secondaryAction,\r\n  style,\r\n}: ActionSheetProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const dynamicStyles = useMemo(\r\n    () => ({\r\n      sheetWrapper: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding6,\r\n        paddingBottom: dim.spacing.padding.sysPadding6,\r\n      },\r\n      sheet: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderRadius: dim.borderRadius.sysRadiusXxl,\r\n      },\r\n      titleRow: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding16,\r\n        paddingVertical: dim.spacing.padding.sysPadding8,\r\n      },\r\n      closeButton: {\r\n        borderRadius: dim.borderRadius.sysRadiusFull,\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n      },\r\n      contentInner: {\r\n        padding: dim.spacing.padding.sysPadding16,\r\n      },\r\n      actions: {\r\n        padding: dim.spacing.padding.sysPadding24,\r\n        gap: dim.spacing.padding.sysPadding12,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  return (\r\n    <Modal\r\n      visible={visible}\r\n      transparent\r\n      animationType=\"slide\"\r\n      onRequestClose={onClose}\r\n      statusBarTranslucent\r\n    >\r\n      {/* Backdrop */}\r\n      <Pressable style={styles.backdrop} onPress={onClose} accessible={false} />\r\n\r\n      {/* Sheet */}\r\n      <View\r\n        style={[styles.sheetWrapper, dynamicStyles.sheetWrapper, style]}\r\n        pointerEvents=\"box-none\"\r\n      >\r\n        <View style={[styles.sheet, dynamicStyles.sheet]}>\r\n          {/* Toolbar */}\r\n          <View style={styles.toolbar}>\r\n            {/* Grabber */}\r\n            <View style={styles.grabberRow}>\r\n              <View style={styles.grabber} />\r\n            </View>\r\n\r\n            {/* Title row */}\r\n            <View style={[styles.titleRow, dynamicStyles.titleRow]}>\r\n              {/* Invisible spacer to balance the close button */}\r\n              <View style={styles.closeButtonSize} />\r\n\r\n              <HeaderText\r\n                variant=\"titleSmall\"\r\n                emphasized\r\n                color={cr.surface.surface.sysOnSurface}\r\n                style={styles.titleText}\r\n              >\r\n                {title ?? ''}\r\n              </HeaderText>\r\n\r\n              {/* Close button */}\r\n              <Pressable\r\n                onPress={onClose}\r\n                accessibilityRole=\"button\"\r\n                accessibilityLabel=\"Close\"\r\n                style={({ pressed }) => [\r\n                  styles.closeButtonSize,\r\n                  dynamicStyles.closeButton,\r\n                  pressed && styles.closePressed,\r\n                ]}\r\n              >\r\n                <Ionicons\r\n                  name=\"close\"\r\n                  size={20}\r\n                  color={cr.surface.surface.sysOnSurface}\r\n                />\r\n              </Pressable>\r\n            </View>\r\n          </View>\r\n\r\n          {/* Content */}\r\n          {children && (\r\n            <ScrollView\r\n              style={styles.content}\r\n              contentContainerStyle={dynamicStyles.contentInner}\r\n              showsVerticalScrollIndicator={false}\r\n            >\r\n              {children}\r\n            </ScrollView>\r\n          )}\r\n\r\n          {/* Actions */}\r\n          {(primaryAction || secondaryAction) && (\r\n            <View style={dynamicStyles.actions}>\r\n              {primaryAction && (\r\n                <Button\r\n                  label={primaryAction.label}\r\n                  variant=\"filled\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={primaryAction.onPress}\r\n                />\r\n              )}\r\n              {secondaryAction && (\r\n                <Button\r\n                  label={secondaryAction.label}\r\n                  variant=\"outlined\"\r\n                  size=\"xl\"\r\n                  fullWidth\r\n                  onPress={secondaryAction.onPress}\r\n                />\r\n              )}\r\n            </View>\r\n          )}\r\n        </View>\r\n      </View>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  backdrop: {\r\n    position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,\r\n    backgroundColor: 'rgba(0,0,0,0.4)',\r\n  },\r\n  sheetWrapper: {\r\n    flex: 1,\r\n    justifyContent: 'flex-end',\r\n  },\r\n  sheet: {\r\n    borderWidth: 1,\r\n    borderColor: 'rgba(255,255,255,0.4)',\r\n    overflow: 'hidden',\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 4 },\r\n    shadowOpacity: 0.1,\r\n    shadowRadius: 16,\r\n    elevation: 8,\r\n  },\r\n  toolbar: {\r\n    alignItems: 'center',\r\n    width: '100%',\r\n  },\r\n  grabberRow: {\r\n    height: 16,\r\n    justifyContent: 'flex-end',\r\n    alignItems: 'center',\r\n    paddingBottom: 0,\r\n    paddingTop: 5,\r\n  },\r\n  grabber: {\r\n    width: 36,\r\n    height: 5,\r\n    borderRadius: 100,\r\n    backgroundColor: '#ccc',\r\n  },\r\n  titleRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    width: '100%',\r\n  },\r\n  titleText: {\r\n    flex: 1,\r\n    textAlign: 'center',\r\n  },\r\n  closeButtonSize: {\r\n    width: 32,\r\n    height: 32,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  closePressed: {\r\n    opacity: 0.7,\r\n  },\r\n  content: {\r\n    maxHeight: 400,\r\n  },\r\n});\r\n"],"names":["ActionSheet","visible","onClose","title","children","primaryAction","secondaryAction","style","colorRoles","cr","dimensions","dim","useTheme","dynamicStyles","useMemo","sheetWrapper","paddingHorizontal","spacing","padding","sysPadding6","paddingBottom","sheet","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","borderRadius","sysRadiusXxl","titleRow","sysPadding16","paddingVertical","sysPadding8","closeButton","sysRadiusFull","sysSurfaceContainer","contentInner","actions","sysPadding24","gap","sysPadding12","Modal","transparent","animationType","onRequestClose","statusBarTranslucent","Pressable","styles","backdrop","onPress","accessible","View","pointerEvents","toolbar","grabberRow","grabber","closeButtonSize","HeaderText","variant","emphasized","color","sysOnSurface","titleText","accessibilityRole","accessibilityLabel","pressed","closePressed","Ionicons","name","size","ScrollView","content","contentContainerStyle","showsVerticalScrollIndicator","Button","label","fullWidth","StyleSheet","create","position","left","right","top","bottom","flex","justifyContent","borderWidth","borderColor","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignItems","paddingTop","flexDirection","textAlign","opacity","maxHeight"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type AlertVariant = 'default' | 'elevated' | 'informative' | 'warning' | 'positive' | 'danger';
+export type AlertSize = 'sm' | 'lg';
+export interface AlertProps {
+    variant?: AlertVariant;
+    size?: AlertSize;
+    /** Bold title — lg size only */
+    title?: string;
+    /** Body / description text */
+    description: string;
+    /** Custom leading icon — overrides the default per-variant icon */
+    icon?: React.ReactNode;
+    /** Hide the leading icon entirely */
+    hideIcon?: boolean;
+    /** Label for the optional action button */
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Show dismiss (×) button */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Alert({ variant, size, title, description, icon, hideIcon, actionLabel, onAction, dismissible, onDismiss, style, }: AlertProps): React.JSX.Element;

package/src/components/Alert/index.js

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Alert", {
+    enumerable: true,
+    get: function() {
+        return Alert;
+    }
+});
+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");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getVariantColors(variant, cr) {
+    switch(variant){
+        case 'default':
+            return {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+                text: cr.surface.surface.sysOnSurface,
+                iconColor: cr.surface.surface.sysOnSurfaceVariant,
+                elevated: false,
+                actionBorder: false
+            };
+        case 'elevated':
+            return {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                text: cr.surface.surface.sysOnSurface,
+                iconColor: cr.surface.surface.sysOnSurfaceVariant,
+                elevated: true,
+                actionBorder: true
+            };
+        case 'informative':
+            return {
+                bg: cr.custom.info.sysInfoContainer,
+                text: cr.custom.info.sysOnInfoContainer,
+                iconColor: cr.custom.info.sysOnInfoContainer,
+                elevated: false,
+                actionBorder: false
+            };
+        case 'warning':
+            return {
+                bg: cr.custom.warning.sysWarningContainer,
+                text: cr.custom.warning.sysOnWarningContainer,
+                iconColor: cr.custom.warning.sysOnWarningContainer,
+                elevated: false,
+                actionBorder: false
+            };
+        case 'positive':
+            return {
+                bg: cr.custom.success.sysSuccessContainer,
+                text: cr.custom.success.sysOnSuccessContainer,
+                iconColor: cr.custom.success.sysOnSuccessContainer,
+                elevated: false,
+                actionBorder: false
+            };
+        case 'danger':
+            return {
+                bg: cr.error.sysErrorContainer,
+                text: cr.error.sysOnErrorContainer,
+                iconColor: cr.error.sysOnErrorContainer,
+                elevated: false,
+                actionBorder: false
+            };
+    }
+}
+// ── Default icon per variant ─────────────────────────────────────────────────
+function defaultIconName(variant) {
+    switch(variant){
+        case 'default':
+        case 'elevated':
+            return 'information-circle-outline';
+        case 'informative':
+            return 'information-circle';
+        case 'warning':
+            return 'warning';
+        case 'positive':
+            return 'checkmark-circle';
+        case 'danger':
+            return 'alert-circle';
+    }
+}
+function Alert({ variant = 'default', size = 'lg', title, description, icon, hideIcon = false, actionLabel, onAction, dismissible = false, onDismiss, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const c = getVariantColors(variant, cr);
+    const isLg = size === 'lg';
+    const resolvedIcon = !hideIcon && (icon ?? /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+        name: defaultIconName(variant),
+        size: isLg ? 24 : 20,
+        color: c.iconColor
+    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        accessibilityRole: "alert",
+        accessibilityLiveRegion: "polite",
+        style: [
+            styles.root,
+            {
+                backgroundColor: c.bg,
+                borderRadius: isLg ? dim.borderRadius.sysRadiusLg : dim.borderRadius.sysRadiusMd
+            },
+            c.elevated && styles.elevated,
+            style
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                styles.content,
+                {
+                    paddingHorizontal: isLg ? dim.spacing.padding.sysPadding24 : dim.spacing.padding.sysPadding16,
+                    paddingVertical: isLg ? dim.spacing.padding.sysPadding16 : dim.spacing.padding.sysPadding16,
+                    gap: isLg ? dim.spacing.padding.sysPadding16 : dim.spacing.padding.sysPadding12,
+                    alignItems: isLg ? 'flex-start' : 'center'
+                }
+            ],
+            children: [
+                resolvedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        paddingTop: isLg ? dim.spacing.padding.sysPadding2 : 0,
+                        flexShrink: 0
+                    },
+                    children: resolvedIcon
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                    style: styles.textAction,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                            style: [
+                                styles.textBlock,
+                                {
+                                    gap: 4
+                                }
+                            ],
+                            children: [
+                                isLg && title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                    style: {
+                                        color: c.text,
+                                        fontSize: ts.titleSmall.sysFontSize,
+                                        lineHeight: ts.titleSmall.sysLineHeight,
+                                        fontWeight: '500',
+                                        includeFontPadding: false
+                                    },
+                                    children: title
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                    style: {
+                                        color: c.text,
+                                        fontSize: isLg ? ts.bodyMedium.sysFontSize : ts.bodySmall.sysFontSize,
+                                        lineHeight: isLg ? ts.bodyMedium.sysLineHeight : ts.bodySmall.sysLineHeight,
+                                        fontWeight: '400',
+                                        includeFontPadding: false
+                                    },
+                                    children: description
+                                })
+                            ]
+                        }),
+                        actionLabel && (isLg ? // lg: pill button with white bg + shadow (or border for elevated)
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                            onPress: onAction,
+                            accessibilityRole: "button",
+                            accessibilityLabel: actionLabel,
+                            style: ({ pressed })=>[
+                                    styles.actionLg,
+                                    {
+                                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest
+                                    },
+                                    c.actionBorder && [
+                                        styles.actionLgBorderBase,
+                                        {
+                                            borderColor: cr.outline.sysOutline
+                                        }
+                                    ],
+                                    pressed && {
+                                        opacity: 0.84
+                                    }
+                                ],
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurface,
+                                    fontSize: ts.labelMedium.sysFontSize,
+                                    lineHeight: ts.labelMedium.sysLineHeight,
+                                    fontWeight: '400',
+                                    includeFontPadding: false
+                                },
+                                children: actionLabel
+                            })
+                        }) : // sm: text-only button
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                            onPress: onAction,
+                            accessibilityRole: "button",
+                            accessibilityLabel: actionLabel,
+                            style: styles.actionSm,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: c.text,
+                                    fontSize: ts.labelMedium.sysFontSize,
+                                    lineHeight: ts.labelMedium.sysLineHeight,
+                                    fontWeight: '500',
+                                    includeFontPadding: false
+                                },
+                                children: actionLabel
+                            })
+                        }))
+                    ]
+                }),
+                dismissible && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                    onPress: onDismiss,
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Dismiss",
+                    style: ({ pressed })=>[
+                            styles.closeBtn,
+                            isLg ? styles.closeBtnLg : styles.closeBtnSm,
+                            pressed && {
+                                opacity: 0.6
+                            }
+                        ],
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                        name: "close",
+                        size: 16,
+                        color: c.iconColor
+                    })
+                })
+            ]
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        overflow: 'hidden'
+    },
+    elevated: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1,
+        overflow: 'visible'
+    },
+    content: {
+        flexDirection: 'row'
+    },
+    textAction: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minWidth: 0,
+        gap: 16
+    },
+    textBlock: {
+        flex: 1,
+        minWidth: 0
+    },
+    // lg action button — elevated pill (backgroundColor and borderColor applied inline)
+    actionLg: {
+        height: 40,
+        paddingHorizontal: 24,
+        borderRadius: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1
+    },
+    actionLgBorderBase: {
+        borderWidth: 1
+    },
+    // sm action button — text only
+    actionSm: {
+        flexShrink: 0
+    },
+    closeBtn: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999
+    },
+    closeBtnLg: {
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        width: 32,
+        height: 32
+    },
+    closeBtnSm: {
+        width: 32,
+        height: 32,
+        flexShrink: 0
+    }
+});
+
+//# sourceMappingURL=index.js.map