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

package/src/components/EmptyState/index.js

@@ -0,0 +1,376 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EmptyState", {
+    enumerable: true,
+    get: function() {
+        return EmptyState;
+    }
+});
+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;
+}
+// ── Illustration ──────────────────────────────────────────────────────────────
+// A pure-View recreation of the Figma "collage of cards" illustration.
+// Built at 280×157 px (scaled from the Figma 398×224 desktop version).
+const ILLUS_W = 280;
+const ILLUS_H = 157;
+const SCALE = ILLUS_W / 398; // ≈ 0.703
+const CARD_W = Math.round(160 * SCALE); // 112
+const CARD_H = Math.round(98 * SCALE); // 69
+function scaledPos(left, top) {
+    return {
+        left: Math.round(left * SCALE),
+        top: Math.round(top * SCALE)
+    };
+}
+function EmptyIllustration({ cr, dim }) {
+    // Purely decorative — hidden from accessibility tree
+    // Central active card
+    const central = scaledPos(119, 63);
+    // Surrounding faded cards
+    const positions = [
+        scaledPos(-53, 63),
+        scaledPos(291, 63),
+        scaledPos(33, 173),
+        scaledPos(205, 173),
+        scaledPos(33, -47),
+        scaledPos(205, -47)
+    ];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        accessible: false,
+        importantForAccessibility: "no-hide-descendants",
+        style: [
+            styles.illusContainer,
+            {
+                width: ILLUS_W,
+                height: ILLUS_H
+            }
+        ],
+        children: [
+            positions.map((pos, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: [
+                        styles.card,
+                        {
+                            left: pos.left,
+                            top: pos.top,
+                            width: CARD_W,
+                            height: CARD_H,
+                            borderWidth: dim.borderWidth.sysStrokeThin,
+                            borderRadius: dim.borderRadius.sysRadiusMd,
+                            borderColor: cr.outline.sysOutlineVariant,
+                            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest
+                        },
+                        styles.cardFaded
+                    ]
+                }, i)),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    styles.card,
+                    styles.cardActive,
+                    {
+                        left: central.left,
+                        top: central.top,
+                        width: CARD_W,
+                        height: CARD_H,
+                        borderWidth: dim.borderWidth.sysStrokeThin,
+                        borderRadius: dim.borderRadius.sysRadiusMd,
+                        borderColor: cr.accent.primary.sysPrimary,
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                        shadowColor: cr.accent.primary.sysPrimary
+                    }
+                ],
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            styles.skeletonLine,
+                            {
+                                top: Math.round(15 * SCALE),
+                                left: Math.round(15 * SCALE),
+                                width: Math.round(32 * SCALE),
+                                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            styles.skeletonLine,
+                            {
+                                top: Math.round(51 * SCALE),
+                                left: Math.round(15 * SCALE),
+                                width: Math.round(96 * SCALE),
+                                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            styles.skeletonLine,
+                            {
+                                top: Math.round(63 * SCALE),
+                                left: Math.round(15 * SCALE),
+                                width: Math.round(122 * SCALE),
+                                backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer
+                            }
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function EmptyState({ style = 'icon', viewport = 'mobile', title = 'No results', description = 'Description if needed', showDescription = true, icon, actionLabel, onAction, showAction, containerStyle }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const viewportTokens = (0, _react.useMemo)(()=>({
+            desktop: {
+                iconCircle: 60,
+                iconSize: 32,
+                titleFontSize: ts.titleMedium.sysFontSize,
+                titleLineHeight: ts.titleMedium.sysLineHeight,
+                descFontSize: ts.bodyMedium.sysFontSize,
+                descLineHeight: ts.bodyMedium.sysLineHeight,
+                contentGap: dim.spacing.padding.sysPadding24,
+                btnHeight: 40,
+                btnPaddingL: dim.spacing.padding.sysPadding16,
+                btnPaddingR: dim.spacing.padding.sysPadding24,
+                btnGap: dim.spacing.padding.sysPadding8,
+                btnFontSize: ts.labelMedium.sysFontSize,
+                btnLineHeight: ts.labelMedium.sysLineHeight,
+                btnTracking: ts.labelMedium.sysTracking
+            },
+            mobile: {
+                iconCircle: 48,
+                iconSize: 24,
+                titleFontSize: ts.labelLarge.sysFontSize,
+                titleLineHeight: ts.labelLarge.sysLineHeight,
+                descFontSize: ts.bodySmall.sysFontSize,
+                descLineHeight: ts.bodySmall.sysLineHeight,
+                contentGap: dim.spacing.padding.sysPadding16,
+                btnHeight: 32,
+                btnPaddingL: dim.spacing.padding.sysPadding12,
+                btnPaddingR: dim.spacing.padding.sysPadding16,
+                btnGap: dim.spacing.padding.sysPadding4,
+                btnFontSize: ts.labelSmall.sysFontSize,
+                btnLineHeight: ts.labelSmall.sysLineHeight,
+                btnTracking: ts.labelSmall.sysTracking
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const vp = viewportTokens[viewport];
+    const hasAction = showAction !== undefined ? showAction : !!actionLabel;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.root,
+            {
+                padding: dim.spacing.padding.sysPadding24,
+                borderRadius: dim.borderRadius.sysRadiusLg,
+                gap: dim.spacing.padding.sysPadding24
+            },
+            containerStyle
+        ],
+        children: [
+            style === 'illustration' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(EmptyIllustration, {
+                cr: cr,
+                dim: dim
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.iconCircle,
+                    {
+                        width: vp.iconCircle,
+                        height: vp.iconCircle,
+                        backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow
+                    }
+                ],
+                children: icon ?? /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: "apps-outline",
+                    size: vp.iconSize,
+                    color: cr.surface.surface.sysOnSurfaceVariant
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                style: [
+                    styles.content,
+                    {
+                        gap: vp.contentGap
+                    }
+                ],
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            styles.textBlock,
+                            {
+                                gap: dim.spacing.padding.sysPadding4
+                            }
+                        ],
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurface,
+                                    fontSize: vp.titleFontSize,
+                                    lineHeight: vp.titleLineHeight,
+                                    fontWeight: '400',
+                                    textAlign: 'center',
+                                    includeFontPadding: false
+                                },
+                                children: title
+                            }),
+                            showDescription && description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurfaceVariant,
+                                    fontSize: vp.descFontSize,
+                                    lineHeight: vp.descLineHeight,
+                                    fontWeight: '400',
+                                    textAlign: 'center',
+                                    includeFontPadding: false
+                                },
+                                children: description
+                            })
+                        ]
+                    }),
+                    hasAction && actionLabel && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.Pressable, {
+                        onPress: onAction,
+                        accessibilityRole: "button",
+                        accessibilityLabel: actionLabel,
+                        style: ({ pressed })=>[
+                                styles.actionBtn,
+                                {
+                                    height: vp.btnHeight,
+                                    paddingLeft: vp.btnPaddingL,
+                                    paddingRight: vp.btnPaddingR,
+                                    gap: vp.btnGap,
+                                    borderWidth: dim.borderWidth.sysStrokeThin,
+                                    borderColor: cr.outline.sysOutline
+                                },
+                                pressed && {
+                                    opacity: 0.76
+                                }
+                            ],
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                name: "add",
+                                size: 16,
+                                color: cr.surface.surface.sysOnSurface
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurface,
+                                    fontSize: vp.btnFontSize,
+                                    lineHeight: vp.btnLineHeight,
+                                    letterSpacing: vp.btnTracking,
+                                    fontWeight: '400',
+                                    includeFontPadding: false
+                                },
+                                children: actionLabel
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        alignSelf: 'center'
+    },
+    // ── Icon circle ───────────────────────────────────────────────────────────
+    iconCircle: {
+        borderRadius: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+    },
+    // ── Content block ─────────────────────────────────────────────────────────
+    content: {
+        alignItems: 'center',
+        alignSelf: 'stretch'
+    },
+    textBlock: {
+        alignSelf: 'stretch',
+        alignItems: 'center'
+    },
+    // ── Action button ─────────────────────────────────────────────────────────
+    actionBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 9999,
+        overflow: 'hidden'
+    },
+    // ── Illustration ──────────────────────────────────────────────────────────
+    illusContainer: {
+        overflow: 'hidden',
+        position: 'relative'
+    },
+    card: {
+        position: 'absolute',
+        overflow: 'hidden'
+    },
+    cardFaded: {
+        opacity: 0.48
+    },
+    cardActive: {
+        // Active ring: sysPrimary08 spread shadow
+        shadowOffset: {
+            width: 0,
+            height: 0
+        },
+        shadowOpacity: 0.08,
+        shadowRadius: 0,
+        elevation: 0
+    },
+    skeletonLine: {
+        position: 'absolute',
+        height: Math.round(6 * SCALE),
+        borderRadius: 9999
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/EmptyState/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type EmptyStateStyle = 'icon' | 'illustration';\r\nexport type EmptyStateViewport = 'desktop' | 'mobile';\r\n\r\nexport interface EmptyStateProps {\r\n  /** Visual style of the graphic area */\r\n  style?: EmptyStateStyle;\r\n  /** desktop = larger type + 60px icon circle; mobile = smaller type + 48px circle */\r\n  viewport?: EmptyStateViewport;\r\n  /** Heading text (default: \"No results\") */\r\n  title?: string;\r\n  /** Body copy below the title */\r\n  description?: string;\r\n  /** Hide the description even when `description` is provided */\r\n  showDescription?: boolean;\r\n  /** Custom icon rendered inside the icon circle (icon style only) */\r\n  icon?: React.ReactNode;\r\n  /** Label for the optional action button */\r\n  actionLabel?: string;\r\n  onAction?: () => void;\r\n  /** Whether the action button is shown (default: true when actionLabel is set) */\r\n  showAction?: boolean;\r\n  containerStyle?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Illustration ──────────────────────────────────────────────────────────────\r\n// A pure-View recreation of the Figma \"collage of cards\" illustration.\r\n// Built at 280×157 px (scaled from the Figma 398×224 desktop version).\r\n\r\nconst ILLUS_W = 280;\r\nconst ILLUS_H = 157;\r\nconst SCALE = ILLUS_W / 398; // ≈ 0.703\r\n\r\nconst CARD_W = Math.round(160 * SCALE); // 112\r\nconst CARD_H = Math.round(98 * SCALE); // 69\r\n\r\nfunction scaledPos(left: number, top: number) {\r\n  return {\r\n    left: Math.round(left * SCALE),\r\n    top: Math.round(top * SCALE),\r\n  };\r\n}\r\n\r\ntype ColorRoles = ReturnType<typeof useTheme>['colorRoles'];\r\ntype Dimensions = ReturnType<typeof useTheme>['dimensions'];\r\n\r\nfunction EmptyIllustration({ cr, dim }: { cr: ColorRoles; dim: Dimensions }) {\r\n  // Purely decorative — hidden from accessibility tree\r\n  // Central active card\r\n  const central = scaledPos(119, 63);\r\n  // Surrounding faded cards\r\n  const positions = [\r\n    scaledPos(-53, 63),\r\n    scaledPos(291, 63),\r\n    scaledPos(33, 173),\r\n    scaledPos(205, 173),\r\n    scaledPos(33, -47),\r\n    scaledPos(205, -47),\r\n  ];\r\n\r\n  return (\r\n    <View\r\n      accessible={false}\r\n      importantForAccessibility=\"no-hide-descendants\"\r\n      style={[styles.illusContainer, { width: ILLUS_W, height: ILLUS_H }]}\r\n    >\r\n      {/* Faded background cards */}\r\n      {positions.map((pos, i) => (\r\n        <View\r\n          key={i}\r\n          style={[\r\n            styles.card,\r\n            {\r\n              left: pos.left,\r\n              top: pos.top,\r\n              width: CARD_W,\r\n              height: CARD_H,\r\n              borderWidth: dim.borderWidth.sysStrokeThin,\r\n              borderRadius: dim.borderRadius.sysRadiusMd,\r\n              borderColor: cr.outline.sysOutlineVariant,\r\n              backgroundColor:\r\n                cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n            },\r\n            styles.cardFaded,\r\n          ]}\r\n        />\r\n      ))}\r\n\r\n      {/* Central focused card */}\r\n      <View\r\n        style={[\r\n          styles.card,\r\n          styles.cardActive,\r\n          {\r\n            left: central.left,\r\n            top: central.top,\r\n            width: CARD_W,\r\n            height: CARD_H,\r\n            borderWidth: dim.borderWidth.sysStrokeThin,\r\n            borderRadius: dim.borderRadius.sysRadiusMd,\r\n            borderColor: cr.accent.primary.sysPrimary,\r\n            backgroundColor:\r\n              cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n            shadowColor: cr.accent.primary.sysPrimary,\r\n          },\r\n        ]}\r\n      >\r\n        {/* Skeleton content lines */}\r\n        <View\r\n          style={[\r\n            styles.skeletonLine,\r\n            {\r\n              top: Math.round(15 * SCALE),\r\n              left: Math.round(15 * SCALE),\r\n              width: Math.round(32 * SCALE),\r\n              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n            },\r\n          ]}\r\n        />\r\n        <View\r\n          style={[\r\n            styles.skeletonLine,\r\n            {\r\n              top: Math.round(51 * SCALE),\r\n              left: Math.round(15 * SCALE),\r\n              width: Math.round(96 * SCALE),\r\n              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n            },\r\n          ]}\r\n        />\r\n        <View\r\n          style={[\r\n            styles.skeletonLine,\r\n            {\r\n              top: Math.round(63 * SCALE),\r\n              left: Math.round(15 * SCALE),\r\n              width: Math.round(122 * SCALE),\r\n              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n            },\r\n          ]}\r\n        />\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function EmptyState({\r\n  style = 'icon',\r\n  viewport = 'mobile',\r\n  title = 'No results',\r\n  description = 'Description if needed',\r\n  showDescription = true,\r\n  icon,\r\n  actionLabel,\r\n  onAction,\r\n  showAction,\r\n  containerStyle,\r\n}: EmptyStateProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const viewportTokens = useMemo(\r\n    () =>\r\n      ({\r\n        desktop: {\r\n          iconCircle: 60,\r\n          iconSize: 32,\r\n          titleFontSize: ts.titleMedium.sysFontSize,\r\n          titleLineHeight: ts.titleMedium.sysLineHeight,\r\n          descFontSize: ts.bodyMedium.sysFontSize,\r\n          descLineHeight: ts.bodyMedium.sysLineHeight,\r\n          contentGap: dim.spacing.padding.sysPadding24,\r\n          btnHeight: 40,\r\n          btnPaddingL: dim.spacing.padding.sysPadding16,\r\n          btnPaddingR: dim.spacing.padding.sysPadding24,\r\n          btnGap: dim.spacing.padding.sysPadding8,\r\n          btnFontSize: ts.labelMedium.sysFontSize,\r\n          btnLineHeight: ts.labelMedium.sysLineHeight,\r\n          btnTracking: ts.labelMedium.sysTracking,\r\n        },\r\n        mobile: {\r\n          iconCircle: 48,\r\n          iconSize: 24,\r\n          titleFontSize: ts.labelLarge.sysFontSize,\r\n          titleLineHeight: ts.labelLarge.sysLineHeight,\r\n          descFontSize: ts.bodySmall.sysFontSize,\r\n          descLineHeight: ts.bodySmall.sysLineHeight,\r\n          contentGap: dim.spacing.padding.sysPadding16,\r\n          btnHeight: 32,\r\n          btnPaddingL: dim.spacing.padding.sysPadding12,\r\n          btnPaddingR: dim.spacing.padding.sysPadding16,\r\n          btnGap: dim.spacing.padding.sysPadding4,\r\n          btnFontSize: ts.labelSmall.sysFontSize,\r\n          btnLineHeight: ts.labelSmall.sysLineHeight,\r\n          btnTracking: ts.labelSmall.sysTracking,\r\n        },\r\n      }) as const,\r\n    [dim, ts],\r\n  );\r\n\r\n  const vp = viewportTokens[viewport];\r\n  const hasAction = showAction !== undefined ? showAction : !!actionLabel;\r\n\r\n  return (\r\n    <View\r\n      style={[\r\n        styles.root,\r\n        {\r\n          padding: dim.spacing.padding.sysPadding24,\r\n          borderRadius: dim.borderRadius.sysRadiusLg,\r\n          gap: dim.spacing.padding.sysPadding24,\r\n        },\r\n        containerStyle,\r\n      ]}\r\n    >\r\n      {/* ── Graphic ───────────────────────────────────────────────────────── */}\r\n      {style === 'illustration' ? (\r\n        <EmptyIllustration cr={cr} dim={dim} />\r\n      ) : (\r\n        <View\r\n          style={[\r\n            styles.iconCircle,\r\n            {\r\n              width: vp.iconCircle,\r\n              height: vp.iconCircle,\r\n              backgroundColor:\r\n                cr.surface.surfaceContainer.sysSurfaceContainerLow,\r\n            },\r\n          ]}\r\n        >\r\n          {icon ?? (\r\n            <Ionicons\r\n              name=\"apps-outline\"\r\n              size={vp.iconSize}\r\n              color={cr.surface.surface.sysOnSurfaceVariant}\r\n            />\r\n          )}\r\n        </View>\r\n      )}\r\n\r\n      {/* ── Content ───────────────────────────────────────────────────────── */}\r\n      <View style={[styles.content, { gap: vp.contentGap }]}>\r\n        {/* Text block */}\r\n        <View\r\n          style={[styles.textBlock, { gap: dim.spacing.padding.sysPadding4 }]}\r\n        >\r\n          <Text\r\n            style={{\r\n              color: cr.surface.surface.sysOnSurface,\r\n              fontSize: vp.titleFontSize,\r\n              lineHeight: vp.titleLineHeight,\r\n              fontWeight: '400',\r\n              textAlign: 'center',\r\n              includeFontPadding: false,\r\n            }}\r\n          >\r\n            {title}\r\n          </Text>\r\n\r\n          {showDescription && description && (\r\n            <Text\r\n              style={{\r\n                color: cr.surface.surface.sysOnSurfaceVariant,\r\n                fontSize: vp.descFontSize,\r\n                lineHeight: vp.descLineHeight,\r\n                fontWeight: '400',\r\n                textAlign: 'center',\r\n                includeFontPadding: false,\r\n              }}\r\n            >\r\n              {description}\r\n            </Text>\r\n          )}\r\n        </View>\r\n\r\n        {/* Action button */}\r\n        {hasAction && actionLabel && (\r\n          <Pressable\r\n            onPress={onAction}\r\n            accessibilityRole=\"button\"\r\n            accessibilityLabel={actionLabel}\r\n            style={({ pressed }) => [\r\n              styles.actionBtn,\r\n              {\r\n                height: vp.btnHeight,\r\n                paddingLeft: vp.btnPaddingL,\r\n                paddingRight: vp.btnPaddingR,\r\n                gap: vp.btnGap,\r\n                borderWidth: dim.borderWidth.sysStrokeThin,\r\n                borderColor: cr.outline.sysOutline,\r\n              },\r\n              pressed && { opacity: 0.76 },\r\n            ]}\r\n          >\r\n            <Ionicons\r\n              name=\"add\"\r\n              size={16}\r\n              color={cr.surface.surface.sysOnSurface}\r\n            />\r\n            <Text\r\n              style={{\r\n                color: cr.surface.surface.sysOnSurface,\r\n                fontSize: vp.btnFontSize,\r\n                lineHeight: vp.btnLineHeight,\r\n                letterSpacing: vp.btnTracking,\r\n                fontWeight: '400',\r\n                includeFontPadding: false,\r\n              }}\r\n            >\r\n              {actionLabel}\r\n            </Text>\r\n          </Pressable>\r\n        )}\r\n      </View>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    alignItems: 'center',\r\n    alignSelf: 'center',\r\n  },\r\n\r\n  // ── Icon circle ───────────────────────────────────────────────────────────\r\n  iconCircle: {\r\n    borderRadius: 9999,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden',\r\n  },\r\n\r\n  // ── Content block ─────────────────────────────────────────────────────────\r\n  content: {\r\n    alignItems: 'center',\r\n    alignSelf: 'stretch',\r\n  },\r\n  textBlock: {\r\n    alignSelf: 'stretch',\r\n    alignItems: 'center',\r\n  },\r\n\r\n  // ── Action button ─────────────────────────────────────────────────────────\r\n  actionBtn: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    borderRadius: 9999,\r\n    overflow: 'hidden',\r\n  },\r\n\r\n  // ── Illustration ──────────────────────────────────────────────────────────\r\n  illusContainer: {\r\n    overflow: 'hidden',\r\n    position: 'relative',\r\n  },\r\n  card: {\r\n    position: 'absolute',\r\n    overflow: 'hidden',\r\n  },\r\n  cardFaded: {\r\n    opacity: 0.48,\r\n  },\r\n  cardActive: {\r\n    // Active ring: sysPrimary08 spread shadow\r\n    shadowOffset: { width: 0, height: 0 },\r\n    shadowOpacity: 0.08,\r\n    shadowRadius: 0,\r\n    elevation: 0,\r\n  },\r\n  skeletonLine: {\r\n    position: 'absolute',\r\n    height: Math.round(6 * SCALE),\r\n    borderRadius: 9999,\r\n  },\r\n});\r\n"],"names":["EmptyState","ILLUS_W","ILLUS_H","SCALE","CARD_W","Math","round","CARD_H","scaledPos","left","top","EmptyIllustration","cr","dim","central","positions","View","accessible","importantForAccessibility","style","styles","illusContainer","width","height","map","pos","i","card","borderWidth","sysStrokeThin","borderRadius","sysRadiusMd","borderColor","outline","sysOutlineVariant","backgroundColor","surface","surfaceContainer","sysSurfaceContainerLowest","cardFaded","cardActive","accent","primary","sysPrimary","shadowColor","skeletonLine","sysSurfaceContainer","viewport","title","description","showDescription","icon","actionLabel","onAction","showAction","containerStyle","colorRoles","dimensions","typeScale","ts","useTheme","viewportTokens","useMemo","desktop","iconCircle","iconSize","titleFontSize","titleMedium","sysFontSize","titleLineHeight","sysLineHeight","descFontSize","bodyMedium","descLineHeight","contentGap","spacing","padding","sysPadding24","btnHeight","btnPaddingL","sysPadding16","btnPaddingR","btnGap","sysPadding8","btnFontSize","labelMedium","btnLineHeight","btnTracking","sysTracking","mobile","labelLarge","bodySmall","sysPadding12","sysPadding4","labelSmall","vp","hasAction","undefined","root","sysRadiusLg","gap","sysSurfaceContainerLow","Ionicons","name","size","color","sysOnSurfaceVariant","content","textBlock","Text","sysOnSurface","fontSize","lineHeight","fontWeight","textAlign","includeFontPadding","Pressable","onPress","accessibilityRole","accessibilityLabel","pressed","actionBtn","paddingLeft","paddingRight","sysOutline","opacity","letterSpacing","StyleSheet","create","alignItems","alignSelf","justifyContent","overflow","flexDirection","position","shadowOffset","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;+BAkKgBA;;;eAAAA;;;;+DAlKe;6BASxB;6BAEkB;uBAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BzB,iFAAiF;AACjF,uEAAuE;AACvE,uEAAuE;AAEvE,MAAMC,UAAU;AAChB,MAAMC,UAAU;AAChB,MAAMC,QAAQF,UAAU,KAAK,UAAU;AAEvC,MAAMG,SAASC,KAAKC,KAAK,CAAC,MAAMH,QAAQ,MAAM;AAC9C,MAAMI,SAASF,KAAKC,KAAK,CAAC,KAAKH,QAAQ,KAAK;AAE5C,SAASK,UAAUC,IAAY,EAAEC,GAAW;IAC1C,OAAO;QACLD,MAAMJ,KAAKC,KAAK,CAACG,OAAON;QACxBO,KAAKL,KAAKC,KAAK,CAACI,MAAMP;IACxB;AACF;AAKA,SAASQ,kBAAkB,EAAEC,EAAE,EAAEC,GAAG,EAAuC;IACzE,qDAAqD;IACrD,sBAAsB;IACtB,MAAMC,UAAUN,UAAU,KAAK;IAC/B,0BAA0B;IAC1B,MAAMO,YAAY;QAChBP,UAAU,CAAC,IAAI;QACfA,UAAU,KAAK;QACfA,UAAU,IAAI;QACdA,UAAU,KAAK;QACfA,UAAU,IAAI,CAAC;QACfA,UAAU,KAAK,CAAC;KACjB;IAED,qBACE,sBAACQ,iBAAI;QACHC,YAAY;QACZC,2BAA0B;QAC1BC,OAAO;YAACC,OAAOC,cAAc;YAAE;gBAAEC,OAAOrB;gBAASsB,QAAQrB;YAAQ;SAAE;;YAGlEa,UAAUS,GAAG,CAAC,CAACC,KAAKC,kBACnB,qBAACV,iBAAI;oBAEHG,OAAO;wBACLC,OAAOO,IAAI;wBACX;4BACElB,MAAMgB,IAAIhB,IAAI;4BACdC,KAAKe,IAAIf,GAAG;4BACZY,OAAOlB;4BACPmB,QAAQhB;4BACRqB,aAAaf,IAAIe,WAAW,CAACC,aAAa;4BAC1CC,cAAcjB,IAAIiB,YAAY,CAACC,WAAW;4BAC1CC,aAAapB,GAAGqB,OAAO,CAACC,iBAAiB;4BACzCC,iBACEvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACC,yBAAyB;wBACzD;wBACAlB,OAAOmB,SAAS;qBACjB;mBAfIb;0BAoBT,sBAACV,iBAAI;gBACHG,OAAO;oBACLC,OAAOO,IAAI;oBACXP,OAAOoB,UAAU;oBACjB;wBACE/B,MAAMK,QAAQL,IAAI;wBAClBC,KAAKI,QAAQJ,GAAG;wBAChBY,OAAOlB;wBACPmB,QAAQhB;wBACRqB,aAAaf,IAAIe,WAAW,CAACC,aAAa;wBAC1CC,cAAcjB,IAAIiB,YAAY,CAACC,WAAW;wBAC1CC,aAAapB,GAAG6B,MAAM,CAACC,OAAO,CAACC,UAAU;wBACzCR,iBACEvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACC,yBAAyB;wBACvDM,aAAahC,GAAG6B,MAAM,CAACC,OAAO,CAACC,UAAU;oBAC3C;iBACD;;kCAGD,qBAAC3B,iBAAI;wBACHG,OAAO;4BACLC,OAAOyB,YAAY;4BACnB;gCACEnC,KAAKL,KAAKC,KAAK,CAAC,KAAKH;gCACrBM,MAAMJ,KAAKC,KAAK,CAAC,KAAKH;gCACtBmB,OAAOjB,KAAKC,KAAK,CAAC,KAAKH;gCACvBgC,iBAAiBvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACS,mBAAmB;4BAClE;yBACD;;kCAEH,qBAAC9B,iBAAI;wBACHG,OAAO;4BACLC,OAAOyB,YAAY;4BACnB;gCACEnC,KAAKL,KAAKC,KAAK,CAAC,KAAKH;gCACrBM,MAAMJ,KAAKC,KAAK,CAAC,KAAKH;gCACtBmB,OAAOjB,KAAKC,KAAK,CAAC,KAAKH;gCACvBgC,iBAAiBvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACS,mBAAmB;4BAClE;yBACD;;kCAEH,qBAAC9B,iBAAI;wBACHG,OAAO;4BACLC,OAAOyB,YAAY;4BACnB;gCACEnC,KAAKL,KAAKC,KAAK,CAAC,KAAKH;gCACrBM,MAAMJ,KAAKC,KAAK,CAAC,KAAKH;gCACtBmB,OAAOjB,KAAKC,KAAK,CAAC,MAAMH;gCACxBgC,iBAAiBvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACS,mBAAmB;4BAClE;yBACD;;;;;;AAKX;AAIO,SAAS9C,WAAW,EACzBmB,QAAQ,MAAM,EACd4B,WAAW,QAAQ,EACnBC,QAAQ,YAAY,EACpBC,cAAc,uBAAuB,EACrCC,kBAAkB,IAAI,EACtBC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACE;IAChB,MAAM,EAAEC,YAAY5C,EAAE,EAAE6C,YAAY5C,GAAG,EAAE6C,WAAWC,EAAE,EAAE,GAAGC,IAAAA,eAAQ;IAEnE,MAAMC,iBAAiBC,IAAAA,cAAO,EAC5B,IACG,CAAA;YACCC,SAAS;gBACPC,YAAY;gBACZC,UAAU;gBACVC,eAAeP,GAAGQ,WAAW,CAACC,WAAW;gBACzCC,iBAAiBV,GAAGQ,WAAW,CAACG,aAAa;gBAC7CC,cAAcZ,GAAGa,UAAU,CAACJ,WAAW;gBACvCK,gBAAgBd,GAAGa,UAAU,CAACF,aAAa;gBAC3CI,YAAY7D,IAAI8D,OAAO,CAACC,OAAO,CAACC,YAAY;gBAC5CC,WAAW;gBACXC,aAAalE,IAAI8D,OAAO,CAACC,OAAO,CAACI,YAAY;gBAC7CC,aAAapE,IAAI8D,OAAO,CAACC,OAAO,CAACC,YAAY;gBAC7CK,QAAQrE,IAAI8D,OAAO,CAACC,OAAO,CAACO,WAAW;gBACvCC,aAAazB,GAAG0B,WAAW,CAACjB,WAAW;gBACvCkB,eAAe3B,GAAG0B,WAAW,CAACf,aAAa;gBAC3CiB,aAAa5B,GAAG0B,WAAW,CAACG,WAAW;YACzC;YACAC,QAAQ;gBACNzB,YAAY;gBACZC,UAAU;gBACVC,eAAeP,GAAG+B,UAAU,CAACtB,WAAW;gBACxCC,iBAAiBV,GAAG+B,UAAU,CAACpB,aAAa;gBAC5CC,cAAcZ,GAAGgC,SAAS,CAACvB,WAAW;gBACtCK,gBAAgBd,GAAGgC,SAAS,CAACrB,aAAa;gBAC1CI,YAAY7D,IAAI8D,OAAO,CAACC,OAAO,CAACI,YAAY;gBAC5CF,WAAW;gBACXC,aAAalE,IAAI8D,OAAO,CAACC,OAAO,CAACgB,YAAY;gBAC7CX,aAAapE,IAAI8D,OAAO,CAACC,OAAO,CAACI,YAAY;gBAC7CE,QAAQrE,IAAI8D,OAAO,CAACC,OAAO,CAACiB,WAAW;gBACvCT,aAAazB,GAAGmC,UAAU,CAAC1B,WAAW;gBACtCkB,eAAe3B,GAAGmC,UAAU,CAACxB,aAAa;gBAC1CiB,aAAa5B,GAAGmC,UAAU,CAACN,WAAW;YACxC;QACF,CAAA,GACF;QAAC3E;QAAK8C;KAAG;IAGX,MAAMoC,KAAKlC,cAAc,CAACd,SAAS;IACnC,MAAMiD,YAAY1C,eAAe2C,YAAY3C,aAAa,CAAC,CAACF;IAE5D,qBACE,sBAACpC,iBAAI;QACHG,OAAO;YACLC,OAAO8E,IAAI;YACX;gBACEtB,SAAS/D,IAAI8D,OAAO,CAACC,OAAO,CAACC,YAAY;gBACzC/C,cAAcjB,IAAIiB,YAAY,CAACqE,WAAW;gBAC1CC,KAAKvF,IAAI8D,OAAO,CAACC,OAAO,CAACC,YAAY;YACvC;YACAtB;SACD;;YAGApC,UAAU,+BACT,qBAACR;gBAAkBC,IAAIA;gBAAIC,KAAKA;+BAEhC,qBAACG,iBAAI;gBACHG,OAAO;oBACLC,OAAO4C,UAAU;oBACjB;wBACE1C,OAAOyE,GAAG/B,UAAU;wBACpBzC,QAAQwE,GAAG/B,UAAU;wBACrB7B,iBACEvB,GAAGwB,OAAO,CAACC,gBAAgB,CAACgE,sBAAsB;oBACtD;iBACD;0BAEAlD,sBACC,qBAACmD,qBAAQ;oBACPC,MAAK;oBACLC,MAAMT,GAAG9B,QAAQ;oBACjBwC,OAAO7F,GAAGwB,OAAO,CAACA,OAAO,CAACsE,mBAAmB;;;0BAOrD,sBAAC1F,iBAAI;gBAACG,OAAO;oBAACC,OAAOuF,OAAO;oBAAE;wBAAEP,KAAKL,GAAGrB,UAAU;oBAAC;iBAAE;;kCAEnD,sBAAC1D,iBAAI;wBACHG,OAAO;4BAACC,OAAOwF,SAAS;4BAAE;gCAAER,KAAKvF,IAAI8D,OAAO,CAACC,OAAO,CAACiB,WAAW;4BAAC;yBAAE;;0CAEnE,qBAACgB,iBAAI;gCACH1F,OAAO;oCACLsF,OAAO7F,GAAGwB,OAAO,CAACA,OAAO,CAAC0E,YAAY;oCACtCC,UAAUhB,GAAG7B,aAAa;oCAC1B8C,YAAYjB,GAAG1B,eAAe;oCAC9B4C,YAAY;oCACZC,WAAW;oCACXC,oBAAoB;gCACtB;0CAECnE;;4BAGFE,mBAAmBD,6BAClB,qBAAC4D,iBAAI;gCACH1F,OAAO;oCACLsF,OAAO7F,GAAGwB,OAAO,CAACA,OAAO,CAACsE,mBAAmB;oCAC7CK,UAAUhB,GAAGxB,YAAY;oCACzByC,YAAYjB,GAAGtB,cAAc;oCAC7BwC,YAAY;oCACZC,WAAW;oCACXC,oBAAoB;gCACtB;0CAEClE;;;;oBAMN+C,aAAa5C,6BACZ,sBAACgE,sBAAS;wBACRC,SAAShE;wBACTiE,mBAAkB;wBAClBC,oBAAoBnE;wBACpBjC,OAAO,CAAC,EAAEqG,OAAO,EAAE,GAAK;gCACtBpG,OAAOqG,SAAS;gCAChB;oCACElG,QAAQwE,GAAGjB,SAAS;oCACpB4C,aAAa3B,GAAGhB,WAAW;oCAC3B4C,cAAc5B,GAAGd,WAAW;oCAC5BmB,KAAKL,GAAGb,MAAM;oCACdtD,aAAaf,IAAIe,WAAW,CAACC,aAAa;oCAC1CG,aAAapB,GAAGqB,OAAO,CAAC2F,UAAU;gCACpC;gCACAJ,WAAW;oCAAEK,SAAS;gCAAK;6BAC5B;;0CAED,qBAACvB,qBAAQ;gCACPC,MAAK;gCACLC,MAAM;gCACNC,OAAO7F,GAAGwB,OAAO,CAACA,OAAO,CAAC0E,YAAY;;0CAExC,qBAACD,iBAAI;gCACH1F,OAAO;oCACLsF,OAAO7F,GAAGwB,OAAO,CAACA,OAAO,CAAC0E,YAAY;oCACtCC,UAAUhB,GAAGX,WAAW;oCACxB4B,YAAYjB,GAAGT,aAAa;oCAC5BwC,eAAe/B,GAAGR,WAAW;oCAC7B0B,YAAY;oCACZE,oBAAoB;gCACtB;0CAEC/D;;;;;;;;AAOf;AAEA,MAAMhC,SAAS2G,uBAAU,CAACC,MAAM,CAAC;IAC/B9B,MAAM;QACJ+B,YAAY;QACZC,WAAW;IACb;IAEA,6EAA6E;IAC7ElE,YAAY;QACVlC,cAAc;QACdmG,YAAY;QACZE,gBAAgB;QAChBC,UAAU;IACZ;IAEA,6EAA6E;IAC7EzB,SAAS;QACPsB,YAAY;QACZC,WAAW;IACb;IACAtB,WAAW;QACTsB,WAAW;QACXD,YAAY;IACd;IAEA,6EAA6E;IAC7ER,WAAW;QACTY,eAAe;QACfJ,YAAY;QACZE,gBAAgB;QAChBrG,cAAc;QACdsG,UAAU;IACZ;IAEA,6EAA6E;IAC7E/G,gBAAgB;QACd+G,UAAU;QACVE,UAAU;IACZ;IACA3G,MAAM;QACJ2G,UAAU;QACVF,UAAU;IACZ;IACA7F,WAAW;QACTsF,SAAS;IACX;IACArF,YAAY;QACV,0CAA0C;QAC1C+F,cAAc;YAAEjH,OAAO;YAAGC,QAAQ;QAAE;QACpCiH,eAAe;QACfC,cAAc;QACdC,WAAW;IACb;IACA7F,cAAc;QACZyF,UAAU;QACV/G,QAAQlB,KAAKC,KAAK,CAAC,IAAIH;QACvB2B,cAAc;IAChB;AACF"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type TextProps } from 'react-native';
+export type HeaderVariant = 'large' | 'medium' | 'small' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall';
+export interface HeaderTextProps extends TextProps {
+    variant?: HeaderVariant;
+    emphasized?: boolean;
+    color?: string;
+}
+export declare function HeaderText({ variant, emphasized, color, style, ...rest }: HeaderTextProps): React.JSX.Element;

package/src/components/HeaderText/index.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeaderText", {
+    enumerable: true,
+    get: function() {
+        return HeaderText;
+    }
+});
+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: 'displayLarge',
+    medium: 'displayMedium',
+    small: 'displaySmall',
+    headlineLarge: 'headlineLarge',
+    headlineMedium: 'headlineMedium',
+    headlineSmall: 'headlineSmall',
+    titleLarge: 'titleLarge',
+    titleMedium: 'titleMedium',
+    titleSmall: 'titleSmall'
+};
+function HeaderText({ 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, {
+        accessibilityRole: "header",
+        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/HeaderText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/HeaderText/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 HeaderVariant =\r\n  | 'large'\r\n  | 'medium'\r\n  | 'small'\r\n  | 'headlineLarge'\r\n  | 'headlineMedium'\r\n  | 'headlineSmall'\r\n  | 'titleLarge'\r\n  | 'titleMedium'\r\n  | 'titleSmall';\r\n\r\nexport interface HeaderTextProps extends TextProps {\r\n  variant?: HeaderVariant;\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<HeaderVariant, string> = {\r\n  large: 'displayLarge',\r\n  medium: 'displayMedium',\r\n  small: 'displaySmall',\r\n  headlineLarge: 'headlineLarge',\r\n  headlineMedium: 'headlineMedium',\r\n  headlineSmall: 'headlineSmall',\r\n  titleLarge: 'titleLarge',\r\n  titleMedium: 'titleMedium',\r\n  titleSmall: 'titleSmall',\r\n};\r\n\r\nexport function HeaderText({\r\n  variant = 'medium',\r\n  emphasized = false,\r\n  color,\r\n  style,\r\n  ...rest\r\n}: HeaderTextProps) {\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      accessibilityRole=\"header\"\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":["HeaderText","FONT_FAMILY","regular","medium","semibold","VARIANT_TOKEN_KEY","large","small","headlineLarge","headlineMedium","headlineSmall","titleLarge","titleMedium","titleSmall","variant","emphasized","color","style","rest","typeScale","ts","useTheme","fontsLoaded","useFonts","GoogleSans_400Regular","require","GoogleSans_500Medium","GoogleSans_600SemiBold","token","weight","sysFontWeightEmphasized","sysFontWeight","Text","accessibilityRole","fontFamily","undefined","fontSize","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking"],"mappings":";;;;+BA2CgBA;;;eAAAA;;;;8DA3CE;6BAEmB;0BAEZ;uBAEA;;;;;;AAmBzB,MAAMC,cAAsC;IAC1CC,SAAS;IACTC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,oBAAmD;IACvDC,OAAO;IACPH,QAAQ;IACRI,OAAO;IACPC,eAAe;IACfC,gBAAgB;IAChBC,eAAe;IACfC,YAAY;IACZC,aAAa;IACbC,YAAY;AACd;AAEO,SAASb,WAAW,EACzBc,UAAU,QAAQ,EAClBC,aAAa,KAAK,EAClBC,KAAK,EACLC,KAAK,EACL,GAAGC,MACa;IAChB,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,CAACf,iBAAiB,CAACS,QAAQ,CAAoB;IAC/D,MAAMe,SAASd,aACXa,MAAME,uBAAuB,GAC7BF,MAAMG,aAAa;IAEvB,qBACE,qBAACC,iBAAI;QACHC,mBAAkB;QAClBhB,OAAO;YACL;gBACEiB,YAAYZ,cAAcrB,WAAW,CAAC4B,OAAO,GAAGM;gBAChDC,UAAUR,MAAMS,WAAW;gBAC3BC,YAAYV,MAAMW,aAAa;gBAC/BC,eAAeZ,MAAMa,WAAW;gBAChCzB;YACF;YACAC;SACD;QACA,GAAGC,IAAI;;AAGd"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextInputProps } from 'react-native';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+    size?: InputSize;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+}
+export declare function Input({ size, label, helperText, errorText, invalid, leadingIcon, trailingIcon, editable, onFocus, onBlur, ...rest }: InputProps): React.JSX.Element;