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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/react-native",
-  "version": "7.0.5",
+  "version": "7.0.9",
   "description": "ComPsych React Native Design System — components, icons, tokens, and theming",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -23,15 +23,11 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
     "expo-font": ">=13.0.0",
-    "expo-linear-gradient": ">=13.0.0",
+    "lucide-react-native": ">=0.400.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
+    "react-native-linear-gradient": ">=2.0.0",
     "react-native-svg": ">=15.0.0"
   },
-  "peerDependenciesMeta": {
-    "expo-linear-gradient": {
-      "optional": true
-    }
-  },
   "type": "commonjs"
 }

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

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from 'react-native';
 export interface ActionSheetAction {
     label: string;
     onPress: () => void;
+    loading?: boolean;
 }
 export interface ActionSheetProps {
     visible: boolean;
@@ -11,6 +12,14 @@ export interface ActionSheetProps {
     children?: React.ReactNode;
     primaryAction?: ActionSheetAction;
     secondaryAction?: ActionSheetAction;
+    /**
+     * `half`  — floats at the bottom with a 6 px inset gutter; all corners
+     *           rounded; content limited to maxHeight. Default.
+     * `full`  — fills the screen from 10 px below the top; only top corners
+     *           rounded; content expands to fill; close button appears on both
+     *           sides of the title for one-handed reachability.
+     */
+    variant?: 'half' | 'full';
     style?: StyleProp<ViewStyle>;
 }
-export declare function ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, style, }: ActionSheetProps): React.JSX.Element;
+export declare function ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, variant, style, }: ActionSheetProps): React.JSX.Element;

package/src/components/ActionSheet/index.js

@@ -56,17 +56,26 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, style }) {
+function ActionSheet({ visible, onClose, title, children, primaryAction, secondaryAction, variant = 'half', style }) {
     const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const isFull = variant === 'full';
     const dynamicStyles = (0, _react.useMemo)(()=>({
-            sheetWrapper: {
+            sheetWrapperHalf: {
                 paddingHorizontal: dim.spacing.padding.sysPadding6,
                 paddingBottom: dim.spacing.padding.sysPadding6
             },
-            sheet: {
+            sheetWrapperFull: {
+                marginTop: 10
+            },
+            sheetHalf: {
                 backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
                 borderRadius: dim.borderRadius.sysRadiusXxl
             },
+            sheetFull: {
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderTopLeftRadius: dim.borderRadius.sysRadiusXxl,
+                borderTopRightRadius: dim.borderRadius.sysRadiusXxl
+            },
             titleRow: {
                 paddingHorizontal: dim.spacing.padding.sysPadding16,
                 paddingVertical: dim.spacing.padding.sysPadding8
@@ -86,6 +95,21 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
         cr,
         dim
     ]);
+    const closeButton = /*#__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
+        })
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Modal, {
         visible: visible,
         transparent: true,
@@ -101,14 +125,15 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
                 style: [
                     styles.sheetWrapper,
-                    dynamicStyles.sheetWrapper,
+                    isFull ? dynamicStyles.sheetWrapperFull : dynamicStyles.sheetWrapperHalf,
                     style
                 ],
                 pointerEvents: "box-none",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
                     style: [
                         styles.sheet,
-                        dynamicStyles.sheet
+                        isFull ? styles.sheetFull : styles.sheetHalf,
+                        isFull ? dynamicStyles.sheetFull : dynamicStyles.sheetHalf
                     ],
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
@@ -126,7 +151,7 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
                                         dynamicStyles.titleRow
                                     ],
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                        isFull ? closeButton : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
                                             style: styles.closeButtonSize
                                         }),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderText.HeaderText, {
@@ -136,27 +161,13 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
                                             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
-                                            })
-                                        })
+                                        closeButton
                                     ]
                                 })
                             ]
                         }),
                         children && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
-                            style: styles.content,
+                            style: isFull ? styles.contentFull : styles.contentHalf,
                             contentContainerStyle: dynamicStyles.contentInner,
                             showsVerticalScrollIndicator: false,
                             children: children
@@ -169,6 +180,7 @@ function ActionSheet({ visible, onClose, title, children, primaryAction, seconda
                                     variant: "filled",
                                     size: "xl",
                                     fullWidth: true,
+                                    loading: primaryAction.loading,
                                     onPress: primaryAction.onPress
                                 }),
                                 secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
@@ -199,10 +211,13 @@ const styles = _reactnative.StyleSheet.create({
         flex: 1,
         justifyContent: 'flex-end'
     },
+    // ── half ────────────────────────────────────────────────────────────────────
     sheet: {
         borderWidth: 1,
         borderColor: 'rgba(255,255,255,0.4)',
-        overflow: 'hidden',
+        overflow: 'hidden'
+    },
+    sheetHalf: {
         shadowColor: '#000',
         shadowOffset: {
             width: 0,
@@ -212,15 +227,34 @@ const styles = _reactnative.StyleSheet.create({
         shadowRadius: 16,
         elevation: 8
     },
+    contentHalf: {
+        maxHeight: 400
+    },
+    // ── full ────────────────────────────────────────────────────────────────────
+    sheetFull: {
+        flex: 1,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 15
+        },
+        shadowOpacity: 0.18,
+        shadowRadius: 75,
+        elevation: 16
+    },
+    contentFull: {
+        flex: 1
+    },
+    // ── shared ──────────────────────────────────────────────────────────────────
     toolbar: {
         alignItems: 'center',
         width: '100%'
     },
     grabberRow: {
+        width: '100%',
         height: 16,
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
         alignItems: 'center',
-        paddingBottom: 0,
         paddingTop: 5
     },
     grabber: {
@@ -247,9 +281,6 @@ const styles = _reactnative.StyleSheet.create({
     },
     closePressed: {
         opacity: 0.7
-    },
-    content: {
-        maxHeight: 400
     }
 });
 

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

@@ -1 +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', top: 0, left: 0, right: 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","top","left","right","bottom","flex","justifyContent","borderWidth","borderColor","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignItems","paddingTop","flexDirection","textAlign","opacity","maxHeight"],"mappings":";;;;+BAiCgBA;;;eAAAA;;;;+DAjCe;6BAUxB;6BAEkB;uBAEA;wBACF;4BACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBpB,SAASA,YAAY,EAC1BC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,eAAe,EACfC,KAAK,EACY;IACjB,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,MAAMC,gBAAgBC,IAAAA,cAAO,EAC3B,IAAO,CAAA;YACLC,cAAc;gBACZC,mBAAmBL,IAAIM,OAAO,CAACC,OAAO,CAACC,WAAW;gBAClDC,eAAeT,IAAIM,OAAO,CAACC,OAAO,CAACC,WAAW;YAChD;YACAE,OAAO;gBACLC,iBAAiBb,GAAGc,OAAO,CAACC,gBAAgB,CAACC,yBAAyB;gBACtEC,cAAcf,IAAIe,YAAY,CAACC,YAAY;YAC7C;YACAC,UAAU;gBACRZ,mBAAmBL,IAAIM,OAAO,CAACC,OAAO,CAACW,YAAY;gBACnDC,iBAAiBnB,IAAIM,OAAO,CAACC,OAAO,CAACa,WAAW;YAClD;YACAC,aAAa;gBACXN,cAAcf,IAAIe,YAAY,CAACO,aAAa;gBAC5CX,iBAAiBb,GAAGc,OAAO,CAACC,gBAAgB,CAACU,mBAAmB;YAClE;YACAC,cAAc;gBACZjB,SAASP,IAAIM,OAAO,CAACC,OAAO,CAACW,YAAY;YAC3C;YACAO,SAAS;gBACPlB,SAASP,IAAIM,OAAO,CAACC,OAAO,CAACmB,YAAY;gBACzCC,KAAK3B,IAAIM,OAAO,CAACC,OAAO,CAACqB,YAAY;YACvC;QACF,CAAA,GACA;QAAC9B;QAAIE;KAAI;IAGX,qBACE,sBAAC6B,kBAAK;QACJvC,SAASA;QACTwC,WAAW;QACXC,eAAc;QACdC,gBAAgBzC;QAChB0C,oBAAoB;;0BAGpB,qBAACC,sBAAS;gBAACtC,OAAOuC,OAAOC,QAAQ;gBAAEC,SAAS9C;gBAAS+C,YAAY;;0BAGjE,qBAACC,iBAAI;gBACH3C,OAAO;oBAACuC,OAAO/B,YAAY;oBAAEF,cAAcE,YAAY;oBAAER;iBAAM;gBAC/D4C,eAAc;0BAEd,cAAA,sBAACD,iBAAI;oBAAC3C,OAAO;wBAACuC,OAAOzB,KAAK;wBAAER,cAAcQ,KAAK;qBAAC;;sCAE9C,sBAAC6B,iBAAI;4BAAC3C,OAAOuC,OAAOM,OAAO;;8CAEzB,qBAACF,iBAAI;oCAAC3C,OAAOuC,OAAOO,UAAU;8CAC5B,cAAA,qBAACH,iBAAI;wCAAC3C,OAAOuC,OAAOQ,OAAO;;;8CAI7B,sBAACJ,iBAAI;oCAAC3C,OAAO;wCAACuC,OAAOlB,QAAQ;wCAAEf,cAAce,QAAQ;qCAAC;;sDAEpD,qBAACsB,iBAAI;4CAAC3C,OAAOuC,OAAOS,eAAe;;sDAEnC,qBAACC,sBAAU;4CACTC,SAAQ;4CACRC,UAAU;4CACVC,OAAOlD,GAAGc,OAAO,CAACA,OAAO,CAACqC,YAAY;4CACtCrD,OAAOuC,OAAOe,SAAS;sDAEtB1D,SAAS;;sDAIZ,qBAAC0C,sBAAS;4CACRG,SAAS9C;4CACT4D,mBAAkB;4CAClBC,oBAAmB;4CACnBxD,OAAO,CAAC,EAAEyD,OAAO,EAAE,GAAK;oDACtBlB,OAAOS,eAAe;oDACtB1C,cAAcmB,WAAW;oDACzBgC,WAAWlB,OAAOmB,YAAY;iDAC/B;sDAED,cAAA,qBAACC,qBAAQ;gDACPC,MAAK;gDACLC,MAAM;gDACNT,OAAOlD,GAAGc,OAAO,CAACA,OAAO,CAACqC,YAAY;;;;;;;wBAO7CxD,0BACC,qBAACiE,uBAAU;4BACT9D,OAAOuC,OAAOwB,OAAO;4BACrBC,uBAAuB1D,cAAcsB,YAAY;4BACjDqC,8BAA8B;sCAE7BpE;;wBAKHC,CAAAA,iBAAiBC,eAAc,mBAC/B,sBAAC4C,iBAAI;4BAAC3C,OAAOM,cAAcuB,OAAO;;gCAC/B/B,+BACC,qBAACoE,cAAM;oCACLC,OAAOrE,cAAcqE,KAAK;oCAC1BjB,SAAQ;oCACRW,MAAK;oCACLO,SAAS;oCACT3B,SAAS3C,cAAc2C,OAAO;;gCAGjC1C,iCACC,qBAACmE,cAAM;oCACLC,OAAOpE,gBAAgBoE,KAAK;oCAC5BjB,SAAQ;oCACRW,MAAK;oCACLO,SAAS;oCACT3B,SAAS1C,gBAAgB0C,OAAO;;;;;;;;;AASlD;AAEA,MAAMF,SAAS8B,uBAAU,CAACC,MAAM,CAAC;IAC/B9B,UAAU;QACR+B,UAAU;QAAYC,KAAK;QAAGC,MAAM;QAAGC,OAAO;QAAGC,QAAQ;QACzD5D,iBAAiB;IACnB;IACAP,cAAc;QACZoE,MAAM;QACNC,gBAAgB;IAClB;IACA/D,OAAO;QACLgE,aAAa;QACbC,aAAa;QACbC,UAAU;QACVC,aAAa;QACbC,cAAc;YAAEC,OAAO;YAAGC,QAAQ;QAAE;QACpCC,eAAe;QACfC,cAAc;QACdC,WAAW;IACb;IACA1C,SAAS;QACP2C,YAAY;QACZL,OAAO;IACT;IACArC,YAAY;QACVsC,QAAQ;QACRP,gBAAgB;QAChBW,YAAY;QACZ3E,eAAe;QACf4E,YAAY;IACd;IACA1C,SAAS;QACPoC,OAAO;QACPC,QAAQ;QACRjE,cAAc;QACdJ,iBAAiB;IACnB;IACAM,UAAU;QACRqE,eAAe;QACfF,YAAY;QACZX,gBAAgB;QAChBM,OAAO;IACT;IACA7B,WAAW;QACTsB,MAAM;QACNe,WAAW;IACb;IACA3C,iBAAiB;QACfmC,OAAO;QACPC,QAAQ;QACRI,YAAY;QACZX,gBAAgB;IAClB;IACAnB,cAAc;QACZkC,SAAS;IACX;IACA7B,SAAS;QACP8B,WAAW;IACb;AACF"}
+{"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  loading?: boolean;\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  /**\r\n   * `half`  — floats at the bottom with a 6 px inset gutter; all corners\r\n   *           rounded; content limited to maxHeight. Default.\r\n   * `full`  — fills the screen from 10 px below the top; only top corners\r\n   *           rounded; content expands to fill; close button appears on both\r\n   *           sides of the title for one-handed reachability.\r\n   */\r\n  variant?: 'half' | 'full';\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  variant = 'half',\r\n  style,\r\n}: ActionSheetProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n  const isFull = variant === 'full';\r\n\r\n  const dynamicStyles = useMemo(\r\n    () => ({\r\n      sheetWrapperHalf: {\r\n        paddingHorizontal: dim.spacing.padding.sysPadding6,\r\n        paddingBottom: dim.spacing.padding.sysPadding6,\r\n      },\r\n      sheetWrapperFull: {\r\n        marginTop: 10,\r\n      },\r\n      sheetHalf: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderRadius: dim.borderRadius.sysRadiusXxl,\r\n      },\r\n      sheetFull: {\r\n        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderTopLeftRadius: dim.borderRadius.sysRadiusXxl,\r\n        borderTopRightRadius: 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  const closeButton = (\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  );\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 wrapper */}\r\n      <View\r\n        style={[\r\n          styles.sheetWrapper,\r\n          isFull\r\n            ? dynamicStyles.sheetWrapperFull\r\n            : dynamicStyles.sheetWrapperHalf,\r\n          style,\r\n        ]}\r\n        pointerEvents=\"box-none\"\r\n      >\r\n        <View\r\n          style={[\r\n            styles.sheet,\r\n            isFull ? styles.sheetFull : styles.sheetHalf,\r\n            isFull ? dynamicStyles.sheetFull : dynamicStyles.sheetHalf,\r\n          ]}\r\n        >\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              {/* Left slot: close button (full) or invisible spacer (half) */}\r\n              {isFull ? closeButton : <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              {/* Right close button — always shown */}\r\n              {closeButton}\r\n            </View>\r\n          </View>\r\n\r\n          {/* Content */}\r\n          {children && (\r\n            <ScrollView\r\n              style={isFull ? styles.contentFull : styles.contentHalf}\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                  loading={primaryAction.loading}\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',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    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  // ── half ────────────────────────────────────────────────────────────────────\r\n  sheet: {\r\n    borderWidth: 1,\r\n    borderColor: 'rgba(255,255,255,0.4)',\r\n    overflow: 'hidden',\r\n  },\r\n  sheetHalf: {\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  contentHalf: {\r\n    maxHeight: 400,\r\n  },\r\n  // ── full ────────────────────────────────────────────────────────────────────\r\n  sheetFull: {\r\n    flex: 1,\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 15 },\r\n    shadowOpacity: 0.18,\r\n    shadowRadius: 75,\r\n    elevation: 16,\r\n  },\r\n  contentFull: {\r\n    flex: 1,\r\n  },\r\n  // ── shared ──────────────────────────────────────────────────────────────────\r\n  toolbar: {\r\n    alignItems: 'center',\r\n    width: '100%',\r\n  },\r\n  grabberRow: {\r\n    width: '100%',\r\n    height: 16,\r\n    justifyContent: 'flex-start',\r\n    alignItems: 'center',\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});\r\n"],"names":["ActionSheet","visible","onClose","title","children","primaryAction","secondaryAction","variant","style","colorRoles","cr","dimensions","dim","useTheme","isFull","dynamicStyles","useMemo","sheetWrapperHalf","paddingHorizontal","spacing","padding","sysPadding6","paddingBottom","sheetWrapperFull","marginTop","sheetHalf","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","borderRadius","sysRadiusXxl","sheetFull","borderTopLeftRadius","borderTopRightRadius","titleRow","sysPadding16","paddingVertical","sysPadding8","closeButton","sysRadiusFull","sysSurfaceContainer","contentInner","actions","sysPadding24","gap","sysPadding12","Pressable","onPress","accessibilityRole","accessibilityLabel","pressed","styles","closeButtonSize","closePressed","Ionicons","name","size","color","sysOnSurface","Modal","transparent","animationType","onRequestClose","statusBarTranslucent","backdrop","accessible","View","sheetWrapper","pointerEvents","sheet","toolbar","grabberRow","grabber","HeaderText","emphasized","titleText","ScrollView","contentFull","contentHalf","contentContainerStyle","showsVerticalScrollIndicator","Button","label","fullWidth","loading","StyleSheet","create","position","top","left","right","bottom","flex","justifyContent","borderWidth","borderColor","overflow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","maxHeight","alignItems","paddingTop","flexDirection","textAlign","opacity"],"mappings":"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"}

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

@@ -5,5 +5,6 @@ export interface BodyTextProps extends TextProps {
     variant?: BodyVariant;
     emphasized?: boolean;
     color?: string;
+    children?: React.ReactNode;
 }
 export declare function BodyText({ variant, emphasized, color, style, ...rest }: BodyTextProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../packages/react-native/src/components/BodyText/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { Text, type TextProps } from 'react-native';\r\n\r\nimport { useFonts } from 'expo-font';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type BodyVariant =\r\n  | 'large'\r\n  | 'medium'\r\n  | 'small'\r\n  | 'labelLarge'\r\n  | 'labelMedium'\r\n  | 'labelSmall';\r\n\r\nexport interface BodyTextProps extends TextProps {\r\n  variant?: BodyVariant;\r\n  emphasized?: boolean;\r\n  color?: string;\r\n}\r\n\r\nconst FONT_FAMILY: Record<string, string> = {\r\n  regular: 'GoogleSans_400Regular',\r\n  medium: 'GoogleSans_500Medium',\r\n  semibold: 'GoogleSans_600SemiBold',\r\n};\r\n\r\nconst VARIANT_TOKEN_KEY: Record<BodyVariant, string> = {\r\n  large: 'bodyLarge',\r\n  medium: 'bodyMedium',\r\n  small: 'bodySmall',\r\n  labelLarge: 'labelLarge',\r\n  labelMedium: 'labelMedium',\r\n  labelSmall: 'labelSmall',\r\n};\r\n\r\nexport function BodyText({\r\n  variant = 'medium',\r\n  emphasized = false,\r\n  color,\r\n  style,\r\n  ...rest\r\n}: BodyTextProps) {\r\n  const { typeScale: ts } = useTheme();\r\n\r\n  const [fontsLoaded] = useFonts({\r\n    GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),\r\n    GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),\r\n    GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf'),\r\n  });\r\n\r\n  const token = ts[VARIANT_TOKEN_KEY[variant] as keyof typeof ts];\r\n  const weight = emphasized\r\n    ? token.sysFontWeightEmphasized\r\n    : token.sysFontWeight;\r\n\r\n  return (\r\n    <Text\r\n      style={[\r\n        {\r\n          fontFamily: fontsLoaded ? FONT_FAMILY[weight] : undefined,\r\n          fontSize: token.sysFontSize,\r\n          lineHeight: token.sysLineHeight,\r\n          letterSpacing: token.sysTracking,\r\n          color,\r\n        },\r\n        style,\r\n      ]}\r\n      {...rest}\r\n    />\r\n  );\r\n}\r\n"],"names":["BodyText","FONT_FAMILY","regular","medium","semibold","VARIANT_TOKEN_KEY","large","small","labelLarge","labelMedium","labelSmall","variant","emphasized","color","style","rest","typeScale","ts","useTheme","fontsLoaded","useFonts","GoogleSans_400Regular","require","GoogleSans_500Medium","GoogleSans_600SemiBold","token","weight","sysFontWeightEmphasized","sysFontWeight","Text","fontFamily","undefined","fontSize","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking"],"mappings":";;;;+BAqCgBA;;;eAAAA;;;;8DArCE;6BAEmB;0BAEZ;uBAEA;;;;;;AAgBzB,MAAMC,cAAsC;IAC1CC,SAAS;IACTC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,oBAAiD;IACrDC,OAAO;IACPH,QAAQ;IACRI,OAAO;IACPC,YAAY;IACZC,aAAa;IACbC,YAAY;AACd;AAEO,SAASV,SAAS,EACvBW,UAAU,QAAQ,EAClBC,aAAa,KAAK,EAClBC,KAAK,EACLC,KAAK,EACL,GAAGC,MACW;IACd,MAAM,EAAEC,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAElC,MAAM,CAACC,YAAY,GAAGC,IAAAA,kBAAQ,EAAC;QAC7BC,uBAAuBC,QAAQ;QAC/BC,sBAAsBD,QAAQ;QAC9BE,wBAAwBF,QAAQ;IAClC;IAEA,MAAMG,QAAQR,EAAE,CAACZ,iBAAiB,CAACM,QAAQ,CAAoB;IAC/D,MAAMe,SAASd,aACXa,MAAME,uBAAuB,GAC7BF,MAAMG,aAAa;IAEvB,qBACE,qBAACC,iBAAI;QACHf,OAAO;YACL;gBACEgB,YAAYX,cAAclB,WAAW,CAACyB,OAAO,GAAGK;gBAChDC,UAAUP,MAAMQ,WAAW;gBAC3BC,YAAYT,MAAMU,aAAa;gBAC/BC,eAAeX,MAAMY,WAAW;gBAChCxB;YACF;YACAC;SACD;QACA,GAAGC,IAAI;;AAGd"}
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/BodyText/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { Text, type TextProps } from 'react-native';\r\n\r\nimport { useFonts } from 'expo-font';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type BodyVariant =\r\n  | 'large'\r\n  | 'medium'\r\n  | 'small'\r\n  | 'labelLarge'\r\n  | 'labelMedium'\r\n  | 'labelSmall';\r\n\r\nexport interface BodyTextProps extends TextProps {\r\n  variant?: BodyVariant;\r\n  emphasized?: boolean;\r\n  color?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst FONT_FAMILY: Record<string, string> = {\r\n  regular: 'GoogleSans_400Regular',\r\n  medium: 'GoogleSans_500Medium',\r\n  semibold: 'GoogleSans_600SemiBold',\r\n};\r\n\r\nconst VARIANT_TOKEN_KEY: Record<BodyVariant, string> = {\r\n  large: 'bodyLarge',\r\n  medium: 'bodyMedium',\r\n  small: 'bodySmall',\r\n  labelLarge: 'labelLarge',\r\n  labelMedium: 'labelMedium',\r\n  labelSmall: 'labelSmall',\r\n};\r\n\r\nexport function BodyText({\r\n  variant = 'medium',\r\n  emphasized = false,\r\n  color,\r\n  style,\r\n  ...rest\r\n}: BodyTextProps) {\r\n  const { typeScale: ts } = useTheme();\r\n\r\n  const [fontsLoaded] = useFonts({\r\n    GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),\r\n    GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),\r\n    GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf'),\r\n  });\r\n\r\n  const token = ts[VARIANT_TOKEN_KEY[variant] as keyof typeof ts];\r\n  const weight = emphasized\r\n    ? token.sysFontWeightEmphasized\r\n    : token.sysFontWeight;\r\n\r\n  return (\r\n    <Text\r\n      style={[\r\n        {\r\n          fontFamily: fontsLoaded ? FONT_FAMILY[weight] : undefined,\r\n          fontSize: token.sysFontSize,\r\n          lineHeight: token.sysLineHeight,\r\n          letterSpacing: token.sysTracking,\r\n          color,\r\n        },\r\n        style,\r\n      ]}\r\n      {...rest}\r\n    />\r\n  );\r\n}\r\n"],"names":["BodyText","FONT_FAMILY","regular","medium","semibold","VARIANT_TOKEN_KEY","large","small","labelLarge","labelMedium","labelSmall","variant","emphasized","color","style","rest","typeScale","ts","useTheme","fontsLoaded","useFonts","GoogleSans_400Regular","require","GoogleSans_500Medium","GoogleSans_600SemiBold","token","weight","sysFontWeightEmphasized","sysFontWeight","Text","fontFamily","undefined","fontSize","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking"],"mappings":";;;;+BAsCgBA;;;eAAAA;;;;8DAtCE;6BAEmB;0BAEZ;uBAEA;;;;;;AAiBzB,MAAMC,cAAsC;IAC1CC,SAAS;IACTC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,oBAAiD;IACrDC,OAAO;IACPH,QAAQ;IACRI,OAAO;IACPC,YAAY;IACZC,aAAa;IACbC,YAAY;AACd;AAEO,SAASV,SAAS,EACvBW,UAAU,QAAQ,EAClBC,aAAa,KAAK,EAClBC,KAAK,EACLC,KAAK,EACL,GAAGC,MACW;IACd,MAAM,EAAEC,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAElC,MAAM,CAACC,YAAY,GAAGC,IAAAA,kBAAQ,EAAC;QAC7BC,uBAAuBC,QAAQ;QAC/BC,sBAAsBD,QAAQ;QAC9BE,wBAAwBF,QAAQ;IAClC;IAEA,MAAMG,QAAQR,EAAE,CAACZ,iBAAiB,CAACM,QAAQ,CAAoB;IAC/D,MAAMe,SAASd,aACXa,MAAME,uBAAuB,GAC7BF,MAAMG,aAAa;IAEvB,qBACE,qBAACC,iBAAI;QACHf,OAAO;YACL;gBACEgB,YAAYX,cAAclB,WAAW,CAACyB,OAAO,GAAGK;gBAChDC,UAAUP,MAAMQ,WAAW;gBAC3BC,YAAYT,MAAMU,aAAa;gBAC/BC,eAAeX,MAAMY,WAAW;gBAChCxB;YACF;YACAC;SACD;QACA,GAAGC,IAAI;;AAGd"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type PressableProps } from 'react-native';
-export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text' | 'danger' | 'danger-outlined' | 'warning';
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'inverted' | 'text' | 'danger' | 'danger-outlined' | 'warning';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
     variant?: ButtonVariant;

package/src/components/Button/index.js

@@ -80,6 +80,12 @@ function Button({ variant = 'filled', size = 'md', label, disabled = false, load
                 borderColor: 'transparent',
                 borderWidth: 0
             },
+            inverted: {
+                bg: cr.accent.primary.sysOnPrimary,
+                label: cr.surface.surface.sysOnSurface,
+                borderColor: cr.outline.sysOutline,
+                borderWidth: dim.borderWidth.sysStrokeThin
+            },
             text: {
                 bg: 'transparent',
                 label: cr.surface.surface.sysOnSurface,
@@ -196,50 +202,65 @@ function Button({ variant = 'filled', size = 'md', label, disabled = false, load
                         shadowOpacity: 0.1,
                         shadowRadius: 16,
                         elevation: 2
+                    } : {},
+                    // Inverted: a deliberately sharper, more pronounced "lifted off the
+                    // screen" shadow — tighter radius reads as a crisper edge, higher
+                    // opacity/offset than Elevated's soft lv2 shadow.
+                    ...variant === 'inverted' ? {
+                        shadowColor: '#000',
+                        shadowOffset: {
+                            width: 0,
+                            height: 6
+                        },
+                        shadowOpacity: 0.11,
+                        shadowRadius: 8,
+                        elevation: 10
                     } : {}
                 }
             ],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
             style: [
                 styles.content,
                 {
                     gap: dim.spacing.padding.sysPadding8
                 }
             ],
-            children: [
-                loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ActivityIndicator, {
-                    size: s.iconSize,
-                    color: v.label
-                }) : leadingIcon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
-                    style: {
-                        width: s.iconSize,
-                        height: s.iconSize,
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    },
-                    children: leadingIcon
-                }) : null,
-                !iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
-                    style: {
-                        color: v.label,
-                        fontSize: s.fontSize,
-                        lineHeight: s.lineHeight,
-                        fontWeight: '600',
-                        includeFontPadding: false
-                    },
-                    numberOfLines: 1,
-                    children: label
-                }),
-                trailingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
-                    style: {
-                        width: s.iconSize,
-                        height: s.iconSize,
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    },
-                    children: trailingIcon
-                })
-            ]
+            children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ActivityIndicator, {
+                size: s.iconSize,
+                color: v.label
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    !iconOnly && leadingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: {
+                            width: s.iconSize,
+                            height: s.iconSize,
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        },
+                        children: leadingIcon
+                    }),
+                    !iconOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: {
+                            color: v.label,
+                            fontSize: s.fontSize,
+                            lineHeight: s.lineHeight,
+                            fontWeight: '600',
+                            includeFontPadding: false
+                        },
+                        numberOfLines: 1,
+                        children: label
+                    }),
+                    trailingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: {
+                            width: s.iconSize,
+                            height: s.iconSize,
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        },
+                        children: trailingIcon
+                    })
+                ]
+            })
         })
     });
 }
@@ -247,8 +268,7 @@ const styles = _reactnative.StyleSheet.create({
     root: {
         flexDirection: 'row',
         justifyContent: 'center',
-        alignItems: 'center',
-        overflow: 'hidden'
+        alignItems: 'center'
     },
     content: {
         flexDirection: 'row',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../packages/react-native/src/components/Button/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  ActivityIndicator,\r\n  Pressable,\r\n  type PressableProps,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type ButtonVariant =\r\n  | 'filled'\r\n  | 'tonal'\r\n  | 'outlined'\r\n  | 'elevated'\r\n  | 'text'\r\n  | 'danger'\r\n  | 'danger-outlined'\r\n  | 'warning';\r\n\r\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';\r\n\r\nexport interface ButtonProps extends Omit<\r\n  PressableProps,\r\n  'children' | 'style'\r\n> {\r\n  variant?: ButtonVariant;\r\n  size?: ButtonSize;\r\n  label: string;\r\n  disabled?: boolean;\r\n  loading?: boolean;\r\n  fullWidth?: boolean;\r\n  iconOnly?: boolean;\r\n  leadingIcon?: React.ReactNode;\r\n  trailingIcon?: React.ReactNode;\r\n}\r\n\r\nexport function Button({\r\n  variant = 'filled',\r\n  size = 'md',\r\n  label,\r\n  disabled = false,\r\n  loading = false,\r\n  fullWidth = false,\r\n  iconOnly = false,\r\n  leadingIcon,\r\n  trailingIcon,\r\n  onPress,\r\n  accessibilityLabel,\r\n  ...rest\r\n}: ButtonProps) {\r\n  const {\r\n    colorRoles: cr,\r\n    dimensions: dim,\r\n    typeScale: ts,\r\n    iconography: ico,\r\n  } = useTheme();\r\n\r\n  const VARIANT_TOKENS = useMemo(\r\n    () =>\r\n      ({\r\n        filled: {\r\n          bg: cr.accent.primary.sysPrimary,\r\n          label: cr.accent.primary.sysOnPrimary,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        tonal: {\r\n          bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,\r\n          label: cr.addOn.primaryFixed.sysOnPrimaryFixed,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        outlined: {\r\n          bg: 'transparent',\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: cr.outline.sysOutline,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n        },\r\n        elevated: {\r\n          bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        text: {\r\n          bg: 'transparent',\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        danger: {\r\n          bg: cr.error.sysError,\r\n          label: cr.error.sysOnError,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        'danger-outlined': {\r\n          bg: 'transparent',\r\n          label: cr.error.sysError,\r\n          borderColor: cr.error.sysErrorContainer,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n        },\r\n        warning: {\r\n          bg: cr.custom.warning.sysWarning,\r\n          label: cr.custom.warning.sysOnWarning,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n      }) as Record<\r\n        ButtonVariant,\r\n        { bg: string; label: string; borderColor: string; borderWidth: number }\r\n      >,\r\n    [cr, dim],\r\n  );\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        height: 32,\r\n        paddingH: dim.spacing.padding.sysPadding12,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        iconSize: ico.sysSizeXs,\r\n      },\r\n      md: {\r\n        height: 40,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        iconSize: ico.sysSizeXs,\r\n      },\r\n      lg: {\r\n        height: 48,\r\n        paddingH: dim.spacing.padding.sysPadding24,\r\n        paddingV: dim.spacing.padding.sysPadding12,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        iconSize: ico.sysSizeSm,\r\n      },\r\n      xl: {\r\n        height: 56,\r\n        paddingH: dim.spacing.padding.sysPadding32,\r\n        paddingV: dim.spacing.padding.sysPadding16,\r\n        fontSize: ts.titleSmall.sysFontSize,\r\n        lineHeight: ts.titleSmall.sysLineHeight,\r\n        iconSize: ico.sysSizeMd,\r\n      },\r\n    }),\r\n    [dim, ts, ico],\r\n  );\r\n\r\n  const v = VARIANT_TOKENS[variant];\r\n  const s = SIZE_TOKENS[size];\r\n  const isDisabled = disabled || loading;\r\n  const paddingH = variant === 'text' ? 0 : s.paddingH;\r\n\r\n  return (\r\n    <Pressable\r\n      {...rest}\r\n      onPress={isDisabled ? undefined : onPress}\r\n      accessibilityRole=\"button\"\r\n      accessibilityLabel={accessibilityLabel ?? label}\r\n      accessibilityState={{ disabled: isDisabled, busy: loading }}\r\n      style={({ pressed }) => [\r\n        styles.root,\r\n        {\r\n          backgroundColor: v.bg,\r\n          borderColor: v.borderColor,\r\n          borderWidth: v.borderWidth,\r\n          borderRadius: dim.borderRadius.sysRadiusFull,\r\n          ...(iconOnly\r\n            ? { width: s.height, height: s.height }\r\n            : variant === 'text'\r\n              ? {\r\n                  // Text variant is content-height (no fixed container). Figma:\r\n                  // sm=26px, md=28px, lg=31px, xl=32px — each resolves to\r\n                  // lineHeight + 2×paddingV, not the standard fixed height.\r\n                  paddingHorizontal: 0,\r\n                  paddingVertical: s.paddingV,\r\n                }\r\n              : {\r\n                  height: s.height,\r\n                  paddingHorizontal: paddingH,\r\n                  paddingVertical: s.paddingV,\r\n                }),\r\n          ...(fullWidth && !iconOnly ? { alignSelf: 'stretch' } : {}),\r\n          opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,\r\n          // Elevated: Figma specifies two drop shadows — RN only supports one\r\n          // on iOS, so we use the larger/more visible one (lv2: 0px 4px 16px\r\n          // rgba(0,0,0,0.10)) and fall back to elevation: 2 on Android.\r\n          ...(variant === 'elevated'\r\n            ? {\r\n                shadowColor: '#000',\r\n                shadowOffset: { width: 0, height: 4 },\r\n                shadowOpacity: 0.1,\r\n                shadowRadius: 16,\r\n                elevation: 2,\r\n              }\r\n            : {}),\r\n        },\r\n      ]}\r\n    >\r\n      <View style={[styles.content, { gap: dim.spacing.padding.sysPadding8 }]}>\r\n        {loading ? (\r\n          <ActivityIndicator size={s.iconSize} color={v.label} />\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            }}\r\n          >\r\n            {leadingIcon}\r\n          </View>\r\n        ) : null}\r\n\r\n        {!iconOnly && (\r\n          <Text\r\n            style={{\r\n              color: v.label,\r\n              fontSize: s.fontSize,\r\n              lineHeight: s.lineHeight,\r\n              fontWeight: '600',\r\n              includeFontPadding: false,\r\n            }}\r\n            numberOfLines={1}\r\n          >\r\n            {label}\r\n          </Text>\r\n        )}\r\n\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            }}\r\n          >\r\n            {trailingIcon}\r\n          </View>\r\n        )}\r\n      </View>\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    overflow: 'hidden',\r\n  },\r\n  content: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n});\r\n"],"names":["Button","variant","size","label","disabled","loading","fullWidth","iconOnly","leadingIcon","trailingIcon","onPress","accessibilityLabel","rest","colorRoles","cr","dimensions","dim","typeScale","ts","iconography","ico","useTheme","VARIANT_TOKENS","useMemo","filled","bg","accent","primary","sysPrimary","sysOnPrimary","borderColor","borderWidth","tonal","addOn","primaryFixed","sysPrimaryFixedDim","sysOnPrimaryFixed","outlined","surface","sysOnSurface","outline","sysOutline","sysStrokeThin","elevated","surfaceContainer","sysSurfaceContainerLowest","text","danger","error","sysError","sysOnError","sysErrorContainer","warning","custom","sysWarning","sysOnWarning","SIZE_TOKENS","sm","height","paddingH","spacing","padding","sysPadding12","paddingV","sysPadding4","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","iconSize","sysSizeXs","md","sysPadding16","sysPadding8","labelMedium","lg","sysPadding24","labelLarge","sysSizeSm","xl","sysPadding32","titleSmall","sysSizeMd","v","s","isDisabled","Pressable","undefined","accessibilityRole","accessibilityState","busy","style","pressed","styles","root","backgroundColor","borderRadius","sysRadiusFull","width","paddingHorizontal","paddingVertical","alignSelf","opacity","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","View","content","gap","ActivityIndicator","color","alignItems","justifyContent","Text","fontWeight","includeFontPadding","numberOfLines","StyleSheet","create","flexDirection","overflow"],"mappings":";;;;+BAwCgBA;;;eAAAA;;;;+DAxCe;6BASxB;uBAEkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BlB,SAASA,OAAO,EACrBC,UAAU,QAAQ,EAClBC,OAAO,IAAI,EACXC,KAAK,EACLC,WAAW,KAAK,EAChBC,UAAU,KAAK,EACfC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,WAAW,EACXC,YAAY,EACZC,OAAO,EACPC,kBAAkB,EAClB,GAAGC,MACS;IACZ,MAAM,EACJC,YAAYC,EAAE,EACdC,YAAYC,GAAG,EACfC,WAAWC,EAAE,EACbC,aAAaC,GAAG,EACjB,GAAGC,IAAAA,eAAQ;IAEZ,MAAMC,iBAAiBC,IAAAA,cAAO,EAC5B,IACG,CAAA;YACCC,QAAQ;gBACNC,IAAIX,GAAGY,MAAM,CAACC,OAAO,CAACC,UAAU;gBAChCzB,OAAOW,GAAGY,MAAM,CAACC,OAAO,CAACE,YAAY;gBACrCC,aAAa;gBACbC,aAAa;YACf;YACAC,OAAO;gBACLP,IAAIX,GAAGmB,KAAK,CAACC,YAAY,CAACC,kBAAkB;gBAC5ChC,OAAOW,GAAGmB,KAAK,CAACC,YAAY,CAACE,iBAAiB;gBAC9CN,aAAa;gBACbC,aAAa;YACf;YACAM,UAAU;gBACRZ,IAAI;gBACJtB,OAAOW,GAAGwB,OAAO,CAACA,OAAO,CAACC,YAAY;gBACtCT,aAAahB,GAAG0B,OAAO,CAACC,UAAU;gBAClCV,aAAaf,IAAIe,WAAW,CAACW,aAAa;YAC5C;YACAC,UAAU;gBACRlB,IAAIX,GAAGwB,OAAO,CAACM,gBAAgB,CAACC,yBAAyB;gBACzD1C,OAAOW,GAAGwB,OAAO,CAACA,OAAO,CAACC,YAAY;gBACtCT,aAAa;gBACbC,aAAa;YACf;YACAe,MAAM;gBACJrB,IAAI;gBACJtB,OAAOW,GAAGwB,OAAO,CAACA,OAAO,CAACC,YAAY;gBACtCT,aAAa;gBACbC,aAAa;YACf;YACAgB,QAAQ;gBACNtB,IAAIX,GAAGkC,KAAK,CAACC,QAAQ;gBACrB9C,OAAOW,GAAGkC,KAAK,CAACE,UAAU;gBAC1BpB,aAAa;gBACbC,aAAa;YACf;YACA,mBAAmB;gBACjBN,IAAI;gBACJtB,OAAOW,GAAGkC,KAAK,CAACC,QAAQ;gBACxBnB,aAAahB,GAAGkC,KAAK,CAACG,iBAAiB;gBACvCpB,aAAaf,IAAIe,WAAW,CAACW,aAAa;YAC5C;YACAU,SAAS;gBACP3B,IAAIX,GAAGuC,MAAM,CAACD,OAAO,CAACE,UAAU;gBAChCnD,OAAOW,GAAGuC,MAAM,CAACD,OAAO,CAACG,YAAY;gBACrCzB,aAAa;gBACbC,aAAa;YACf;QACF,CAAA,GAIF;QAACjB;QAAIE;KAAI;IAGX,MAAMwC,cAAcjC,IAAAA,cAAO,EACzB,IAAO,CAAA;YACLkC,IAAI;gBACFC,QAAQ;gBACRC,UAAU3C,IAAI4C,OAAO,CAACC,OAAO,CAACC,YAAY;gBAC1CC,UAAU/C,IAAI4C,OAAO,CAACC,OAAO,CAACG,WAAW;gBACzCC,UAAU/C,GAAGgD,UAAU,CAACC,WAAW;gBACnCC,YAAYlD,GAAGgD,UAAU,CAACG,aAAa;gBACvCC,UAAUlD,IAAImD,SAAS;YACzB;YACAC,IAAI;gBACFd,QAAQ;gBACRC,UAAU3C,IAAI4C,OAAO,CAACC,OAAO,CAACY,YAAY;gBAC1CV,UAAU/C,IAAI4C,OAAO,CAACC,OAAO,CAACa,WAAW;gBACzCT,UAAU/C,GAAGyD,WAAW,CAACR,WAAW;gBACpCC,YAAYlD,GAAGyD,WAAW,CAACN,aAAa;gBACxCC,UAAUlD,IAAImD,SAAS;YACzB;YACAK,IAAI;gBACFlB,QAAQ;gBACRC,UAAU3C,IAAI4C,OAAO,CAACC,OAAO,CAACgB,YAAY;gBAC1Cd,UAAU/C,IAAI4C,OAAO,CAACC,OAAO,CAACC,YAAY;gBAC1CG,UAAU/C,GAAG4D,UAAU,CAACX,WAAW;gBACnCC,YAAYlD,GAAG4D,UAAU,CAACT,aAAa;gBACvCC,UAAUlD,IAAI2D,SAAS;YACzB;YACAC,IAAI;gBACFtB,QAAQ;gBACRC,UAAU3C,IAAI4C,OAAO,CAACC,OAAO,CAACoB,YAAY;gBAC1ClB,UAAU/C,IAAI4C,OAAO,CAACC,OAAO,CAACY,YAAY;gBAC1CR,UAAU/C,GAAGgE,UAAU,CAACf,WAAW;gBACnCC,YAAYlD,GAAGgE,UAAU,CAACb,aAAa;gBACvCC,UAAUlD,IAAI+D,SAAS;YACzB;QACF,CAAA,GACA;QAACnE;QAAKE;QAAIE;KAAI;IAGhB,MAAMgE,IAAI9D,cAAc,CAACrB,QAAQ;IACjC,MAAMoF,IAAI7B,WAAW,CAACtD,KAAK;IAC3B,MAAMoF,aAAalF,YAAYC;IAC/B,MAAMsD,WAAW1D,YAAY,SAAS,IAAIoF,EAAE1B,QAAQ;IAEpD,qBACE,qBAAC4B,sBAAS;QACP,GAAG3E,IAAI;QACRF,SAAS4E,aAAaE,YAAY9E;QAClC+E,mBAAkB;QAClB9E,oBAAoBA,sBAAsBR;QAC1CuF,oBAAoB;YAAEtF,UAAUkF;YAAYK,MAAMtF;QAAQ;QAC1DuF,OAAO,CAAC,EAAEC,OAAO,EAAE,GAAK;gBACtBC,OAAOC,IAAI;gBACX;oBACEC,iBAAiBZ,EAAE3D,EAAE;oBACrBK,aAAasD,EAAEtD,WAAW;oBAC1BC,aAAaqD,EAAErD,WAAW;oBAC1BkE,cAAcjF,IAAIiF,YAAY,CAACC,aAAa;oBAC5C,GAAI3F,WACA;wBAAE4F,OAAOd,EAAE3B,MAAM;wBAAEA,QAAQ2B,EAAE3B,MAAM;oBAAC,IACpCzD,YAAY,SACV;wBACE,8DAA8D;wBAC9D,wDAAwD;wBACxD,0DAA0D;wBAC1DmG,mBAAmB;wBACnBC,iBAAiBhB,EAAEtB,QAAQ;oBAC7B,IACA;wBACEL,QAAQ2B,EAAE3B,MAAM;wBAChB0C,mBAAmBzC;wBACnB0C,iBAAiBhB,EAAEtB,QAAQ;oBAC7B,CAAC;oBACP,GAAIzD,aAAa,CAACC,WAAW;wBAAE+F,WAAW;oBAAU,IAAI,CAAC,CAAC;oBAC1DC,SAASjB,aAAa,OAAOO,UAAU,OAAO;oBAC9C,oEAAoE;oBACpE,mEAAmE;oBACnE,8DAA8D;oBAC9D,GAAI5F,YAAY,aACZ;wBACEuG,aAAa;wBACbC,cAAc;4BAAEN,OAAO;4BAAGzC,QAAQ;wBAAE;wBACpCgD,eAAe;wBACfC,cAAc;wBACdC,WAAW;oBACb,IACA,CAAC,CAAC;gBACR;aACD;kBAED,cAAA,sBAACC,iBAAI;YAACjB,OAAO;gBAACE,OAAOgB,OAAO;gBAAE;oBAAEC,KAAK/F,IAAI4C,OAAO,CAACC,OAAO,CAACa,WAAW;gBAAC;aAAE;;gBACpErE,wBACC,qBAAC2G,8BAAiB;oBAAC9G,MAAMmF,EAAEf,QAAQ;oBAAE2C,OAAO7B,EAAEjF,KAAK;qBACjDK,4BACF,qBAACqG,iBAAI;oBACHjB,OAAO;wBACLO,OAAOd,EAAEf,QAAQ;wBACjBZ,QAAQ2B,EAAEf,QAAQ;wBAClB4C,YAAY;wBACZC,gBAAgB;oBAClB;8BAEC3G;qBAED;gBAEH,CAACD,0BACA,qBAAC6G,iBAAI;oBACHxB,OAAO;wBACLqB,OAAO7B,EAAEjF,KAAK;wBACd8D,UAAUoB,EAAEpB,QAAQ;wBACpBG,YAAYiB,EAAEjB,UAAU;wBACxBiD,YAAY;wBACZC,oBAAoB;oBACtB;oBACAC,eAAe;8BAEdpH;;gBAIJM,8BACC,qBAACoG,iBAAI;oBACHjB,OAAO;wBACLO,OAAOd,EAAEf,QAAQ;wBACjBZ,QAAQ2B,EAAEf,QAAQ;wBAClB4C,YAAY;wBACZC,gBAAgB;oBAClB;8BAEC1G;;;;;AAMb;AAEA,MAAMqF,SAAS0B,uBAAU,CAACC,MAAM,CAAC;IAC/B1B,MAAM;QACJ2B,eAAe;QACfP,gBAAgB;QAChBD,YAAY;QACZS,UAAU;IACZ;IACAb,SAAS;QACPY,eAAe;QACfR,YAAY;QACZC,gBAAgB;IAClB;AACF"}
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Button/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  ActivityIndicator,\r\n  Pressable,\r\n  type PressableProps,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n} from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type ButtonVariant =\r\n  | 'filled'\r\n  | 'tonal'\r\n  | 'outlined'\r\n  | 'elevated'\r\n  | 'inverted'\r\n  | 'text'\r\n  | 'danger'\r\n  | 'danger-outlined'\r\n  | 'warning';\r\n\r\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';\r\n\r\nexport interface ButtonProps extends Omit<\r\n  PressableProps,\r\n  'children' | 'style'\r\n> {\r\n  variant?: ButtonVariant;\r\n  size?: ButtonSize;\r\n  label: string;\r\n  disabled?: boolean;\r\n  loading?: boolean;\r\n  fullWidth?: boolean;\r\n  iconOnly?: boolean;\r\n  leadingIcon?: React.ReactNode;\r\n  trailingIcon?: React.ReactNode;\r\n}\r\n\r\nexport function Button({\r\n  variant = 'filled',\r\n  size = 'md',\r\n  label,\r\n  disabled = false,\r\n  loading = false,\r\n  fullWidth = false,\r\n  iconOnly = false,\r\n  leadingIcon,\r\n  trailingIcon,\r\n  onPress,\r\n  accessibilityLabel,\r\n  ...rest\r\n}: ButtonProps) {\r\n  const {\r\n    colorRoles: cr,\r\n    dimensions: dim,\r\n    typeScale: ts,\r\n    iconography: ico,\r\n  } = useTheme();\r\n\r\n  const VARIANT_TOKENS = useMemo(\r\n    () =>\r\n      ({\r\n        filled: {\r\n          bg: cr.accent.primary.sysPrimary,\r\n          label: cr.accent.primary.sysOnPrimary,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        tonal: {\r\n          bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,\r\n          label: cr.addOn.primaryFixed.sysOnPrimaryFixed,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        outlined: {\r\n          bg: 'transparent',\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: cr.outline.sysOutline,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n        },\r\n        elevated: {\r\n          bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        inverted: {\r\n          bg: cr.accent.primary.sysOnPrimary,\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: cr.outline.sysOutline,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n        },\r\n        text: {\r\n          bg: 'transparent',\r\n          label: cr.surface.surface.sysOnSurface,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        danger: {\r\n          bg: cr.error.sysError,\r\n          label: cr.error.sysOnError,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n        'danger-outlined': {\r\n          bg: 'transparent',\r\n          label: cr.error.sysError,\r\n          borderColor: cr.error.sysErrorContainer,\r\n          borderWidth: dim.borderWidth.sysStrokeThin,\r\n        },\r\n        warning: {\r\n          bg: cr.custom.warning.sysWarning,\r\n          label: cr.custom.warning.sysOnWarning,\r\n          borderColor: 'transparent',\r\n          borderWidth: 0,\r\n        },\r\n      }) as Record<\r\n        ButtonVariant,\r\n        { bg: string; label: string; borderColor: string; borderWidth: number }\r\n      >,\r\n    [cr, dim],\r\n  );\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        height: 32,\r\n        paddingH: dim.spacing.padding.sysPadding12,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        iconSize: ico.sysSizeXs,\r\n      },\r\n      md: {\r\n        height: 40,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        iconSize: ico.sysSizeXs,\r\n      },\r\n      lg: {\r\n        height: 48,\r\n        paddingH: dim.spacing.padding.sysPadding24,\r\n        paddingV: dim.spacing.padding.sysPadding12,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        iconSize: ico.sysSizeSm,\r\n      },\r\n      xl: {\r\n        height: 56,\r\n        paddingH: dim.spacing.padding.sysPadding32,\r\n        paddingV: dim.spacing.padding.sysPadding16,\r\n        fontSize: ts.titleSmall.sysFontSize,\r\n        lineHeight: ts.titleSmall.sysLineHeight,\r\n        iconSize: ico.sysSizeMd,\r\n      },\r\n    }),\r\n    [dim, ts, ico],\r\n  );\r\n\r\n  const v = VARIANT_TOKENS[variant];\r\n  const s = SIZE_TOKENS[size];\r\n  const isDisabled = disabled || loading;\r\n  const paddingH = variant === 'text' ? 0 : s.paddingH;\r\n\r\n  return (\r\n    <Pressable\r\n      {...rest}\r\n      onPress={isDisabled ? undefined : onPress}\r\n      accessibilityRole=\"button\"\r\n      accessibilityLabel={accessibilityLabel ?? label}\r\n      accessibilityState={{ disabled: isDisabled, busy: loading }}\r\n      style={({ pressed }) => [\r\n        styles.root,\r\n        {\r\n          backgroundColor: v.bg,\r\n          borderColor: v.borderColor,\r\n          borderWidth: v.borderWidth,\r\n          borderRadius: dim.borderRadius.sysRadiusFull,\r\n          ...(iconOnly\r\n            ? { width: s.height, height: s.height }\r\n            : variant === 'text'\r\n              ? {\r\n                  // Text variant is content-height (no fixed container). Figma:\r\n                  // sm=26px, md=28px, lg=31px, xl=32px — each resolves to\r\n                  // lineHeight + 2×paddingV, not the standard fixed height.\r\n                  paddingHorizontal: 0,\r\n                  paddingVertical: s.paddingV,\r\n                }\r\n              : {\r\n                  height: s.height,\r\n                  paddingHorizontal: paddingH,\r\n                  paddingVertical: s.paddingV,\r\n                }),\r\n          ...(fullWidth && !iconOnly ? { alignSelf: 'stretch' } : {}),\r\n          opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,\r\n          // Elevated: Figma specifies two drop shadows — RN only supports one\r\n          // on iOS, so we use the larger/more visible one (lv2: 0px 4px 16px\r\n          // rgba(0,0,0,0.10)) and fall back to elevation: 2 on Android.\r\n          ...(variant === 'elevated'\r\n            ? {\r\n                shadowColor: '#000',\r\n                shadowOffset: { width: 0, height: 4 },\r\n                shadowOpacity: 0.1,\r\n                shadowRadius: 16,\r\n                elevation: 2,\r\n              }\r\n            : {}),\r\n          // Inverted: a deliberately sharper, more pronounced \"lifted off the\r\n          // screen\" shadow — tighter radius reads as a crisper edge, higher\r\n          // opacity/offset than Elevated's soft lv2 shadow.\r\n          ...(variant === 'inverted'\r\n            ? {\r\n                shadowColor: '#000',\r\n                shadowOffset: { width: 0, height: 6 },\r\n                shadowOpacity: 0.11,\r\n                shadowRadius: 8,\r\n                elevation: 10,\r\n              }\r\n            : {}),\r\n        },\r\n      ]}\r\n    >\r\n      <View style={[styles.content, { gap: dim.spacing.padding.sysPadding8 }]}>\r\n        {loading ? (\r\n          <ActivityIndicator size={s.iconSize} color={v.label} />\r\n        ) : (\r\n          <>\r\n            {!iconOnly && 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                }}\r\n              >\r\n                {leadingIcon}\r\n              </View>\r\n            )}\r\n            {!iconOnly && (\r\n              <Text\r\n                style={{\r\n                  color: v.label,\r\n                  fontSize: s.fontSize,\r\n                  lineHeight: s.lineHeight,\r\n                  fontWeight: '600',\r\n                  includeFontPadding: false,\r\n                }}\r\n                numberOfLines={1}\r\n              >\r\n                {label}\r\n              </Text>\r\n            )}\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                }}\r\n              >\r\n                {trailingIcon}\r\n              </View>\r\n            )}\r\n          </>\r\n        )}\r\n      </View>\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    // No overflow: 'hidden' here — on iOS that clips to bounds, which cuts\r\n    // off the elevated/inverted drop shadow (shadows render outside the\r\n    // layer's frame). Background/border-radius already render correctly\r\n    // rounded without it, and this button's content (icon + text) never\r\n    // overflows its own corners.\r\n  },\r\n  content: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n});\r\n"],"names":["Button","variant","size","label","disabled","loading","fullWidth","iconOnly","leadingIcon","trailingIcon","onPress","accessibilityLabel","rest","colorRoles","cr","dimensions","dim","typeScale","ts","iconography","ico","useTheme","VARIANT_TOKENS","useMemo","filled","bg","accent","primary","sysPrimary","sysOnPrimary","borderColor","borderWidth","tonal","addOn","primaryFixed","sysPrimaryFixedDim","sysOnPrimaryFixed","outlined","surface","sysOnSurface","outline","sysOutline","sysStrokeThin","elevated","surfaceContainer","sysSurfaceContainerLowest","inverted","text","danger","error","sysError","sysOnError","sysErrorContainer","warning","custom","sysWarning","sysOnWarning","SIZE_TOKENS","sm","height","paddingH","spacing","padding","sysPadding12","paddingV","sysPadding4","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","iconSize","sysSizeXs","md","sysPadding16","sysPadding8","labelMedium","lg","sysPadding24","labelLarge","sysSizeSm","xl","sysPadding32","titleSmall","sysSizeMd","v","s","isDisabled","Pressable","undefined","accessibilityRole","accessibilityState","busy","style","pressed","styles","root","backgroundColor","borderRadius","sysRadiusFull","width","paddingHorizontal","paddingVertical","alignSelf","opacity","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","View","content","gap","ActivityIndicator","color","alignItems","justifyContent","Text","fontWeight","includeFontPadding","numberOfLines","StyleSheet","create","flexDirection"],"mappings":"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"}

package/src/components/ChatBubble/index.js

@@ -60,19 +60,21 @@ function ChatBubble({ variant, message, timestamp, onThumbsUp, onThumbsDown, sty
     const isOutgoing = variant === 'outgoing';
     const tokenStyles = (0, _react.useMemo)(()=>({
             bubble: {
-                maxWidth: '80%',
-                paddingVertical: dim.spacing.padding.sysPadding8,
-                paddingHorizontal: dim.spacing.padding.sysPadding12,
-                borderRadius: dim.borderRadius.sysRadiusMd
+                paddingVertical: dim.spacing.padding.sysPadding12,
+                paddingHorizontal: dim.spacing.padding.sysPadding16
             },
             bubbleIncoming: {
-                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-                borderWidth: dim.borderWidth.sysStrokeThin,
-                borderColor: cr.outline.sysOutlineVariant,
-                borderBottomLeftRadius: dim.borderRadius.sysRadiusXs
+                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,
+                borderTopLeftRadius: dim.borderRadius.sysRadiusLg,
+                borderTopRightRadius: dim.borderRadius.sysRadiusLg,
+                borderBottomLeftRadius: dim.borderRadius.sysRadiusXs,
+                borderBottomRightRadius: dim.borderRadius.sysRadiusXs
             },
             bubbleOutgoing: {
                 backgroundColor: cr.accent.primary.sysPrimary,
+                borderTopLeftRadius: dim.borderRadius.sysRadiusXl,
+                borderTopRightRadius: dim.borderRadius.sysRadiusXl,
+                borderBottomLeftRadius: dim.borderRadius.sysRadiusXl,
                 borderBottomRightRadius: dim.borderRadius.sysRadiusXs
             },
             metaRow: {
@@ -99,6 +101,7 @@ function ChatBubble({ variant, message, timestamp, onThumbsUp, onThumbsDown, sty
             style
         ],
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: styles.bubbleWrapper,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
                     style: [
@@ -108,7 +111,6 @@ function ChatBubble({ variant, message, timestamp, onThumbsUp, onThumbsDown, sty
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
                         variant: "medium",
                         color: textColor,
-                        style: styles.messageText,
                         children: message
                     })
                 }),
@@ -167,10 +169,12 @@ const styles = _reactnative.StyleSheet.create({
         width: '100%'
     },
     rowIncoming: {
-        justifyContent: 'flex-start'
+        justifyContent: 'flex-start',
+        paddingRight: 64
     },
     rowOutgoing: {
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
+        paddingLeft: 32
     },
     metaIncoming: {
         justifyContent: 'flex-start'
@@ -178,9 +182,7 @@ const styles = _reactnative.StyleSheet.create({
     metaOutgoing: {
         justifyContent: 'flex-end'
     },
-    messageText: {
-        flexShrink: 1
-    },
+    bubbleWrapper: {},
     pressed: {
         opacity: 0.6
     }