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

package/src/components/BodyText/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BodyText", {
+    enumerable: true,
+    get: function() {
+        return BodyText;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _expofont = require("expo-font");
+const _theme = require("../../theme");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FONT_FAMILY = {
+    regular: 'GoogleSans_400Regular',
+    medium: 'GoogleSans_500Medium',
+    semibold: 'GoogleSans_600SemiBold'
+};
+const VARIANT_TOKEN_KEY = {
+    large: 'bodyLarge',
+    medium: 'bodyMedium',
+    small: 'bodySmall',
+    labelLarge: 'labelLarge',
+    labelMedium: 'labelMedium',
+    labelSmall: 'labelSmall'
+};
+function BodyText({ variant = 'medium', emphasized = false, color, style, ...rest }) {
+    const { typeScale: ts } = (0, _theme.useTheme)();
+    const [fontsLoaded] = (0, _expofont.useFonts)({
+        GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),
+        GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),
+        GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf')
+    });
+    const token = ts[VARIANT_TOKEN_KEY[variant]];
+    const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+        style: [
+            {
+                fontFamily: fontsLoaded ? FONT_FAMILY[weight] : undefined,
+                fontSize: token.sysFontSize,
+                lineHeight: token.sysLineHeight,
+                letterSpacing: token.sysTracking,
+                color
+            },
+            style
+        ],
+        ...rest
+    });
+}
+
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type BreadcrumbSize = 'sm' | 'lg';
+export interface BreadcrumbItem {
+    /** Display text. Omit when `isHome` is true. */
+    label?: string;
+    /** Renders the home icon instead of text */
+    isHome?: boolean;
+    /** Renders "…" — tap to expand hidden crumbs */
+    isOverflow?: boolean;
+    /** Reduces opacity; non-interactive */
+    disabled?: boolean;
+    /**
+     * Press handler. Omit (or leave undefined) for the current/last item —
+     * it will automatically render as non-interactive with `sysOnSurface` text.
+     */
+    onPress?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    size?: BreadcrumbSize;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Breadcrumb({ items, size, style }: BreadcrumbProps): React.JSX.Element;

package/src/components/Breadcrumb/index.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Breadcrumb", {
+    enumerable: true,
+    get: function() {
+        return Breadcrumb;
+    }
+});
+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");
+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 Breadcrumb({ items, size = 'lg', style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                letterSpacing: ts.labelSmall.sysTracking,
+                paddingH: dim.spacing.padding.sysPadding8,
+                paddingV: dim.spacing.padding.sysPadding2,
+                iconSize: 16,
+                dividerWidth: 8
+            },
+            lg: {
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                paddingH: dim.spacing.padding.sysPadding8,
+                paddingV: dim.spacing.padding.sysPadding4,
+                iconSize: 16,
+                dividerWidth: 8
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const s = sizeTokens[size];
+    return(// ScrollView lets a long breadcrumb scroll horizontally without clipping
+    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: styles.row,
+        style: style,
+        children: items.map((item, index)=>{
+            const isLast = index === items.length - 1;
+            // Last item is always "current" regardless of whether onPress is set
+            const isCurrent = isLast;
+            const isInteractive = !isCurrent && !item.disabled;
+            const textColor = isCurrent ? cr.surface.surface.sysOnSurface : cr.surface.surface.sysOnSurfaceVariant;
+            const content = /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.content,
+                    {
+                        paddingHorizontal: s.paddingH,
+                        paddingVertical: item.isHome ? dim.spacing.padding.sysPadding2 : s.paddingV,
+                        gap: item.isHome ? 0 : dim.spacing.padding.sysPadding4
+                    },
+                    item.disabled && styles.disabled
+                ],
+                children: item.isHome ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: "home",
+                    size: s.iconSize,
+                    color: cr.surface.surface.sysOnSurfaceVariant
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                    style: {
+                        color: textColor,
+                        fontSize: s.fontSize,
+                        lineHeight: s.lineHeight,
+                        letterSpacing: s.letterSpacing,
+                        includeFontPadding: false,
+                        fontWeight: isCurrent ? '500' : '400'
+                    },
+                    numberOfLines: 1,
+                    children: item.isOverflow ? '…' : item.label
+                })
+            });
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: styles.item,
+                children: [
+                    isInteractive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                        onPress: item.onPress,
+                        accessibilityRole: "link",
+                        accessibilityLabel: item.isHome ? 'Home' : item.label,
+                        style: ({ pressed })=>[
+                                styles.pressable,
+                                pressed && {
+                                    backgroundColor: cr.transparent.neutral.sysBlack10,
+                                    borderRadius: 4
+                                }
+                            ],
+                        children: content
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        accessibilityRole: isCurrent ? 'text' : undefined,
+                        accessibilityState: isCurrent ? {
+                            selected: true
+                        } : undefined,
+                        children: content
+                    }),
+                    !isLast && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        accessible: false,
+                        style: [
+                            styles.divider,
+                            {
+                                width: s.dividerWidth
+                            }
+                        ],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                            style: {
+                                color: cr.surface.surface.sysOnSurfaceVariant,
+                                fontSize: s.fontSize,
+                                lineHeight: s.lineHeight,
+                                includeFontPadding: false,
+                                textAlign: 'center'
+                            },
+                            children: "/"
+                        })
+                    })
+                ]
+            }, index);
+        })
+    }));
+}
+const styles = _reactnative.StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 0
+    },
+    pressable: {
+        borderRadius: 4
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    disabled: {
+        opacity: 0.64
+    },
+    divider: {
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Breadcrumb/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  ScrollView,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type BreadcrumbSize = 'sm' | 'lg';\r\n\r\nexport interface BreadcrumbItem {\r\n  /** Display text. Omit when `isHome` is true. */\r\n  label?: string;\r\n  /** Renders the home icon instead of text */\r\n  isHome?: boolean;\r\n  /** Renders \"…\" — tap to expand hidden crumbs */\r\n  isOverflow?: boolean;\r\n  /** Reduces opacity; non-interactive */\r\n  disabled?: boolean;\r\n  /**\r\n   * Press handler. Omit (or leave undefined) for the current/last item —\r\n   * it will automatically render as non-interactive with `sysOnSurface` text.\r\n   */\r\n  onPress?: () => void;\r\n}\r\n\r\nexport interface BreadcrumbProps {\r\n  items: BreadcrumbItem[];\r\n  size?: BreadcrumbSize;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Breadcrumb({ items, size = 'lg', style }: BreadcrumbProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      sm: {\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        letterSpacing: ts.labelSmall.sysTracking,\r\n        paddingH: dim.spacing.padding.sysPadding8,\r\n        paddingV: dim.spacing.padding.sysPadding2,\r\n        iconSize: 16,\r\n        dividerWidth: 8,\r\n      },\r\n      lg: {\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        paddingH: dim.spacing.padding.sysPadding8,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        iconSize: 16,\r\n        dividerWidth: 8,\r\n      },\r\n    }),\r\n    [dim, ts],\r\n  );\r\n\r\n  const s = sizeTokens[size];\r\n\r\n  return (\r\n    // ScrollView lets a long breadcrumb scroll horizontally without clipping\r\n    <ScrollView\r\n      horizontal\r\n      showsHorizontalScrollIndicator={false}\r\n      contentContainerStyle={styles.row}\r\n      style={style}\r\n    >\r\n      {items.map((item, index) => {\r\n        const isLast = index === items.length - 1;\r\n        // Last item is always \"current\" regardless of whether onPress is set\r\n        const isCurrent = isLast;\r\n        const isInteractive = !isCurrent && !item.disabled;\r\n\r\n        const textColor = isCurrent\r\n          ? cr.surface.surface.sysOnSurface\r\n          : cr.surface.surface.sysOnSurfaceVariant;\r\n\r\n        const content = (\r\n          <View\r\n            style={[\r\n              styles.content,\r\n              {\r\n                paddingHorizontal: s.paddingH,\r\n                paddingVertical: item.isHome\r\n                  ? dim.spacing.padding.sysPadding2\r\n                  : s.paddingV,\r\n                gap: item.isHome ? 0 : dim.spacing.padding.sysPadding4,\r\n              },\r\n              item.disabled && styles.disabled,\r\n            ]}\r\n          >\r\n            {item.isHome ? (\r\n              <Ionicons\r\n                name=\"home\"\r\n                size={s.iconSize}\r\n                color={cr.surface.surface.sysOnSurfaceVariant}\r\n              />\r\n            ) : (\r\n              <Text\r\n                style={{\r\n                  color: textColor,\r\n                  fontSize: s.fontSize,\r\n                  lineHeight: s.lineHeight,\r\n                  letterSpacing: s.letterSpacing,\r\n                  includeFontPadding: false,\r\n                  fontWeight: isCurrent ? '500' : '400',\r\n                }}\r\n                numberOfLines={1}\r\n              >\r\n                {item.isOverflow ? '…' : item.label}\r\n              </Text>\r\n            )}\r\n          </View>\r\n        );\r\n\r\n        return (\r\n          <View key={index} style={styles.item}>\r\n            {/* Item — pressable if navigable, plain View if current/disabled */}\r\n            {isInteractive ? (\r\n              <Pressable\r\n                onPress={item.onPress}\r\n                accessibilityRole=\"link\"\r\n                accessibilityLabel={item.isHome ? 'Home' : item.label}\r\n                style={({ pressed }) => [\r\n                  styles.pressable,\r\n                  pressed && {\r\n                    backgroundColor: cr.transparent.neutral.sysBlack10,\r\n                    borderRadius: 4,\r\n                  },\r\n                ]}\r\n              >\r\n                {content}\r\n              </Pressable>\r\n            ) : (\r\n              <View\r\n                accessibilityRole={isCurrent ? 'text' : undefined}\r\n                accessibilityState={isCurrent ? { selected: true } : undefined}\r\n              >\r\n                {content}\r\n              </View>\r\n            )}\r\n\r\n            {/* Divider — shown after every item except the last */}\r\n            {!isLast && (\r\n              <View\r\n                accessible={false}\r\n                style={[styles.divider, { width: s.dividerWidth }]}\r\n              >\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurfaceVariant,\r\n                    fontSize: s.fontSize,\r\n                    lineHeight: s.lineHeight,\r\n                    includeFontPadding: false,\r\n                    textAlign: 'center',\r\n                  }}\r\n                >\r\n                  /\r\n                </Text>\r\n              </View>\r\n            )}\r\n          </View>\r\n        );\r\n      })}\r\n    </ScrollView>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  row: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  item: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    flexShrink: 0,\r\n  },\r\n  pressable: {\r\n    borderRadius: 4,\r\n  },\r\n  content: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  disabled: {\r\n    opacity: 0.64,\r\n  },\r\n  divider: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n});\r\n"],"names":["Breadcrumb","items","size","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","sm","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking","paddingH","spacing","padding","sysPadding8","paddingV","sysPadding2","iconSize","dividerWidth","lg","labelMedium","sysPadding4","s","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","styles","row","map","item","index","isLast","length","isCurrent","isInteractive","disabled","textColor","surface","sysOnSurface","sysOnSurfaceVariant","content","View","paddingHorizontal","paddingVertical","isHome","gap","Ionicons","name","color","Text","includeFontPadding","fontWeight","numberOfLines","isOverflow","label","Pressable","onPress","accessibilityRole","accessibilityLabel","pressed","pressable","backgroundColor","transparent","neutral","sysBlack10","borderRadius","undefined","accessibilityState","selected","accessible","divider","width","textAlign","StyleSheet","create","flexDirection","alignItems","flexShrink","opacity","justifyContent"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type PressableProps } from 'react-native';
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text' | 'danger' | 'danger-outlined' | 'warning';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label: string;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+}
+export declare function Button({ variant, size, label, disabled, loading, fullWidth, iconOnly, leadingIcon, trailingIcon, onPress, accessibilityLabel, ...rest }: ButtonProps): React.JSX.Element;

package/src/components/Button/index.js

@@ -0,0 +1,260 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function() {
+        return Button;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function Button({ variant = 'filled', size = 'md', label, disabled = false, loading = false, fullWidth = false, iconOnly = false, leadingIcon, trailingIcon, onPress, accessibilityLabel, ...rest }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts, iconography: ico } = (0, _theme.useTheme)();
+    const VARIANT_TOKENS = (0, _react.useMemo)(()=>({
+            filled: {
+                bg: cr.accent.primary.sysPrimary,
+                label: cr.accent.primary.sysOnPrimary,
+                borderColor: 'transparent',
+                borderWidth: 0
+            },
+            tonal: {
+                bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+                label: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+                borderColor: 'transparent',
+                borderWidth: 0
+            },
+            outlined: {
+                bg: 'transparent',
+                label: cr.surface.surface.sysOnSurface,
+                borderColor: cr.outline.sysOutline,
+                borderWidth: dim.borderWidth.sysStrokeThin
+            },
+            elevated: {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                label: cr.surface.surface.sysOnSurface,
+                borderColor: 'transparent',
+                borderWidth: 0
+            },
+            text: {
+                bg: 'transparent',
+                label: cr.surface.surface.sysOnSurface,
+                borderColor: 'transparent',
+                borderWidth: 0
+            },
+            danger: {
+                bg: cr.error.sysError,
+                label: cr.error.sysOnError,
+                borderColor: 'transparent',
+                borderWidth: 0
+            },
+            'danger-outlined': {
+                bg: 'transparent',
+                label: cr.error.sysError,
+                borderColor: cr.error.sysErrorContainer,
+                borderWidth: dim.borderWidth.sysStrokeThin
+            },
+            warning: {
+                bg: cr.custom.warning.sysWarning,
+                label: cr.custom.warning.sysOnWarning,
+                borderColor: 'transparent',
+                borderWidth: 0
+            }
+        }), [
+        cr,
+        dim
+    ]);
+    const SIZE_TOKENS = (0, _react.useMemo)(()=>({
+            sm: {
+                height: 32,
+                paddingH: dim.spacing.padding.sysPadding12,
+                paddingV: dim.spacing.padding.sysPadding4,
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                iconSize: ico.sysSizeXs
+            },
+            md: {
+                height: 40,
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding8,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                iconSize: ico.sysSizeXs
+            },
+            lg: {
+                height: 48,
+                paddingH: dim.spacing.padding.sysPadding24,
+                paddingV: dim.spacing.padding.sysPadding12,
+                fontSize: ts.labelLarge.sysFontSize,
+                lineHeight: ts.labelLarge.sysLineHeight,
+                iconSize: ico.sysSizeSm
+            },
+            xl: {
+                height: 56,
+                paddingH: dim.spacing.padding.sysPadding32,
+                paddingV: dim.spacing.padding.sysPadding16,
+                fontSize: ts.titleSmall.sysFontSize,
+                lineHeight: ts.titleSmall.sysLineHeight,
+                iconSize: ico.sysSizeMd
+            }
+        }), [
+        dim,
+        ts,
+        ico
+    ]);
+    const v = VARIANT_TOKENS[variant];
+    const s = SIZE_TOKENS[size];
+    const isDisabled = disabled || loading;
+    const paddingH = variant === 'text' ? 0 : s.paddingH;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+        ...rest,
+        onPress: isDisabled ? undefined : onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: {
+            disabled: isDisabled,
+            busy: loading
+        },
+        style: ({ pressed })=>[
+                styles.root,
+                {
+                    backgroundColor: v.bg,
+                    borderColor: v.borderColor,
+                    borderWidth: v.borderWidth,
+                    borderRadius: dim.borderRadius.sysRadiusFull,
+                    ...iconOnly ? {
+                        width: s.height,
+                        height: s.height
+                    } : variant === 'text' ? {
+                        // Text variant is content-height (no fixed container). Figma:
+                        // sm=26px, md=28px, lg=31px, xl=32px — each resolves to
+                        // lineHeight + 2×paddingV, not the standard fixed height.
+                        paddingHorizontal: 0,
+                        paddingVertical: s.paddingV
+                    } : {
+                        height: s.height,
+                        paddingHorizontal: paddingH,
+                        paddingVertical: s.paddingV
+                    },
+                    ...fullWidth && !iconOnly ? {
+                        alignSelf: 'stretch'
+                    } : {},
+                    opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,
+                    // Elevated: Figma specifies two drop shadows — RN only supports one
+                    // on iOS, so we use the larger/more visible one (lv2: 0px 4px 16px
+                    // rgba(0,0,0,0.10)) and fall back to elevation: 2 on Android.
+                    ...variant === 'elevated' ? {
+                        shadowColor: '#000',
+                        shadowOffset: {
+                            width: 0,
+                            height: 4
+                        },
+                        shadowOpacity: 0.1,
+                        shadowRadius: 16,
+                        elevation: 2
+                    } : {}
+                }
+            ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_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
+                })
+            ]
+        })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden'
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type CheckboxSize = 'sm' | 'md';
+export type CheckboxCheckedState = boolean | 'indeterminate';
+export interface CheckboxProps {
+    checked?: CheckboxCheckedState;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: CheckboxSize;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Checkbox({ checked: checkedProp, defaultChecked, onChange, size, label, description, disabled, invalid, style, }: CheckboxProps): React.JSX.Element;