@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Tabs/Tabs.js

@@ -0,0 +1,289 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tabs = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Tabs — top tabs with animated underline (or pills) indicator.
+ *
+ * Layout: equal-width row by default, or horizontal-scrollable when
+ * `scrollable` is true. The active indicator (underline or pill) is an
+ * Animated.View positioned absolutely; its translateX + width spring to the
+ * measured layout of the active tab. Driven by native driver where possible
+ * (transform); width animates separately on the JS thread because RN's
+ * native driver does not support layout props.
+ */
+
+const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    tabs,
+    activeKey,
+    onChange,
+    variant = 'underline',
+    scrollable = false,
+    align = 'left',
+    style,
+    containerStyle,
+    tabStyle,
+    tabLabelStyle,
+    tabIconStyle,
+    tabBadgeStyle,
+    dividerStyle,
+    indicatorStyle,
+    progress,
+    haptic,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tabsTokens = theme.components.tabs;
+  const tabPaddingHorizontal = tabsTokens?.tabPaddingHorizontal ?? theme.spacing.lg;
+  const tabPaddingVertical = tabsTokens?.tabPaddingVertical ?? theme.spacing.md;
+  const tabIconSpacing = tabsTokens?.tabIconSpacing ?? 6;
+  const underlineHeight = tabsTokens?.underlineHeight ?? 2;
+  const pillInset = tabsTokens?.pillInset ?? 4;
+  const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
+  const badgeGap = tabsTokens?.badgeGap ?? 6;
+
+  // Per-tab measured layouts (key → {x, width}).
+  const [layouts, setLayouts] = (0, _react.useState)({});
+  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const indicatorWidth = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const activeLayout = layouts[activeKey];
+
+  // Progress-driven mode: when the caller supplies a fractional-index signal
+  // and every tab has reported its layout, the indicator's translateX/width
+  // are interpolated from that signal — the press-spring is suppressed so the
+  // two drivers don't fight for the same view.
+  const allMeasured = tabs.every(t => layouts[t.key] !== undefined);
+  const useProgress = progress !== undefined && allMeasured && tabs.length > 1;
+  const progressTranslateX = (0, _react.useMemo)(() => {
+    if (!useProgress || !progress) {
+      return null;
+    }
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].x),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+  const progressWidth = (0, _react.useMemo)(() => {
+    if (!useProgress || !progress) {
+      return null;
+    }
+    return progress.interpolate({
+      inputRange: tabs.map((_, i) => i),
+      outputRange: tabs.map(t => layouts[t.key].width),
+      extrapolate: 'clamp'
+    });
+  }, [useProgress, progress, tabs, layouts]);
+
+  // Animate indicator whenever activeKey or its layout changes.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `activeKey` is the TRIGGER that moves the indicator; the body reads the derived `activeLayout`, so removing it would stop the indicator from animating on tab change
+  (0, _react.useEffect)(() => {
+    if (!activeLayout) {
+      return;
+    }
+    if (useProgress) {
+      return;
+    }
+    const spring = theme.motion.spring.snappy;
+    const anim = _reactNative.Animated.parallel([
+    // Both must use the JS driver: width can't run on native, and mixing
+    // drivers on the same view (transform native + width JS) trips RN's
+    // "node already moved to native" guard under the new architecture.
+    _reactNative.Animated.spring(indicatorTranslateX, {
+      toValue: activeLayout.x,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: false
+    }), _reactNative.Animated.spring(indicatorWidth, {
+      toValue: activeLayout.width,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: false
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
+  const handleLayout = (0, _react.useCallback)(key => e => {
+    const {
+      x,
+      width
+    } = e.nativeEvent.layout;
+    setLayouts(prev => {
+      const existing = prev[key];
+      if (existing && existing.x === x && existing.width === width) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [key]: {
+          x,
+          width
+        }
+      };
+    });
+  }, []);
+  const handlePress = (0, _react.useCallback)(tab => {
+    if (tab.disabled) {
+      return;
+    }
+    if (tab.key === activeKey) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    onChange(tab.key);
+  }, [activeKey, onChange, haptic]);
+  const indicatorIsPill = variant === 'pills';
+
+  // Indicator visual.
+  const indicator = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    pointerEvents: "none",
+    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, indicatorIsPill ? {
+      top: pillInset,
+      bottom: pillInset
+    } : {
+      height: underlineHeight
+    }, {
+      width: progressWidth ?? indicatorWidth,
+      transform: [{
+        translateX: progressTranslateX ?? indicatorTranslateX
+      }],
+      backgroundColor: indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
+      borderRadius: indicatorIsPill ? theme.radius.full : 0
+    }, indicatorStyle]
+  });
+  const renderTabs = () => tabs.map(tab => {
+    const isActive = tab.key === activeKey;
+    const isDisabled = tab.disabled === true;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => handlePress(tab),
+      onLayout: handleLayout(tab.key),
+      disabled: isDisabled,
+      accessibilityRole: "tab",
+      accessibilityLabel: tab.label,
+      accessibilityState: {
+        selected: isActive,
+        disabled: isDisabled
+      },
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.tab, scrollable ? null : styles.tabFlex, {
+        paddingHorizontal: tabPaddingHorizontal,
+        paddingVertical: tabPaddingVertical,
+        opacity: isDisabled ? disabledOpacity : 1,
+        backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+      }, tabStyle],
+      children: [tab.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.tabIcon, {
+          marginRight: tabIconSpacing
+        }, tabIconStyle],
+        children: tab.icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.tabLabel, {
+          color: isActive ? theme.colors.primary : theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+        }, tabLabelStyle],
+        numberOfLines: 1,
+        children: tab.label
+      }), tab.badge !== undefined && tab.badge !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.tabBadge, {
+          marginLeft: badgeGap,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          paddingHorizontal: theme.spacing.xs
+        }, tabBadgeStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: theme.colors.primary,
+            fontSize: theme.typography.fontSize.xs,
+            fontWeight: theme.typography.fontWeight.semibold
+          },
+          numberOfLines: 1,
+          children: String(tab.badge)
+        })
+      }) : null]
+    }, tab.key);
+  });
+  const baseRowStyle = {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    justifyContent: scrollable ? 'flex-start' : align === 'center' ? 'center' : 'flex-start',
+    position: 'relative'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: [styles.container, {
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: variant === 'underline' ? _reactNative.StyleSheet.hairlineWidth : 0
+    }, variant === 'underline' ? dividerStyle : null, style, containerStyle],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    children: scrollable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [baseRowStyle],
+      keyboardShouldPersistTaps: "handled",
+      children: [renderTabs(), indicator]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: baseRowStyle,
+      children: [renderTabs(), indicator]
+    })
+  });
+});
+Tabs.displayName = 'Tabs';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative'
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tabFlex: {
+    flex: 1
+  },
+  tabIcon: {},
+  tabLabel: {
+    includeFontPadding: false
+  },
+  tabBadge: {
+    minWidth: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indicatorUnderline: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  },
+  indicatorPill: {
+    position: 'absolute',
+    left: 0,
+    zIndex: -1
+  }
+});
+var _default = exports.default = Tabs;
+//# sourceMappingURL=Tabs.js.map

package/lib/commonjs/components/Tabs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+var _Tabs = _interopRequireWildcard(require("./Tabs.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/TagInput/TagInput.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TagInput = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _index4 = require("../Chip/index.js");
+var _index5 = require("../FieldBase/index.js");
+var _index6 = require("../FormField/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Chips as input — the "type a value, press enter, it becomes a tag" field.
+ * Chip renders a tag and Input takes text, but nothing joined them, so consumers
+ * built this by hand each time (and each one disagreed about backspace).
+ */
+const TagInput = exports.TagInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    label,
+    helperText,
+    error,
+    required,
+    disabled = false,
+    size = 'md',
+    variant,
+    maxTags,
+    unique = true,
+    transform,
+    separators = [','],
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [tags, setTags] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange
+  });
+  const [draft, setDraft] = (0, _react.useState)('');
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const atCapacity = typeof maxTags === 'number' && tags.length >= maxTags;
+  const commit = (0, _react.useCallback)(raw => {
+    const candidate = transform ? transform(raw.trim()) : raw.trim();
+    if (!candidate) {
+      return;
+    }
+    if (atCapacity) {
+      return;
+    }
+    if (unique && tags.some(t => t.toLowerCase() === candidate.toLowerCase())) {
+      setDraft('');
+      return;
+    }
+    setTags([...tags, candidate]);
+    setDraft('');
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+  }, [atCapacity, haptic, setTags, tags, transform, unique]);
+  const removeAt = (0, _react.useCallback)(index => {
+    const next = tags.filter((_, i) => i !== index);
+    setTags(next);
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+  }, [haptic, setTags, tags]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    // A separator keystroke commits rather than being typed into the draft.
+    const hit = separators.find(s => s.length > 0 && text.includes(s));
+    if (hit) {
+      const [head] = text.split(hit);
+      commit(head);
+      return;
+    }
+    setDraft(text);
+  }, [commit, separators]);
+  const handleKeyPress = (0, _react.useCallback)(e => {
+    if (disabled) {
+      return;
+    }
+    // Backspace on an empty draft removes the last tag — the behaviour every
+    // hand-rolled version got wrong or skipped.
+    if (e.nativeEvent.key === 'Backspace' && draft === '' && tags.length > 0) {
+      removeAt(tags.length - 1);
+    }
+  }, [disabled, draft, removeAt, tags.length]);
+  const field = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.FieldBase, {
+    size: size,
+    variant: variant,
+    focused: focused,
+    disabled: disabled,
+    error: Boolean(error),
+    filled: tags.length > 0 || draft.length > 0,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.wrap,
+      children: [tags.map((tag, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Chip, {
+        label: tag,
+        size: "sm",
+        onClose: disabled ? undefined : () => removeAt(index),
+        haptic: haptic
+      }, `${tag}-${index}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: ref,
+        value: draft,
+        onChangeText: handleChangeText,
+        onKeyPress: handleKeyPress,
+        onSubmitEditing: () => commit(draft),
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          // Committing on blur means a typed-but-unsubmitted value is not lost.
+          commit(draft);
+        },
+        editable: !disabled && !atCapacity,
+        placeholder: atCapacity ? undefined : placeholder,
+        placeholderTextColor: theme.colors.text.tertiary,
+        blurOnSubmit: false,
+        returnKeyType: "done",
+        style: [styles.input, {
+          color: theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.base
+        }],
+        testID: testID ? `${testID}-input` : undefined
+      })]
+    })
+  });
+  if (!label && !helperText && !error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID,
+      children: field
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.FormField, {
+      label: label,
+      helperText: helperText,
+      error: error,
+      required: required,
+      children: field
+    })
+  });
+});
+TagInput.displayName = 'TagInput';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  wrap: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: theme.spacing.xs,
+    paddingVertical: theme.spacing.xs
+  },
+  input: {
+    ...(0, _index2.fontFor)(theme, 'normal'),
+    flexGrow: 1,
+    minWidth: 80,
+    padding: 0
+  }
+});
+var _default = exports.default = TagInput;
+//# sourceMappingURL=TagInput.js.map

package/lib/commonjs/components/TagInput/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TagInput", {
+  enumerable: true,
+  get: function () {
+    return _TagInput.TagInput;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TagInput.default;
+  }
+});
+var _TagInput = _interopRequireWildcard(require("./TagInput.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Text/Text.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const VARIANTS = {
+  display: {
+    size: '4xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h1: {
+    size: '3xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h2: {
+    size: '2xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h3: {
+    size: 'xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  title: {
+    size: 'lg',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'primary'
+  },
+  body: {
+    size: 'base',
+    weight: 'normal',
+    line: 'normal',
+    color: 'primary'
+  },
+  bodySmall: {
+    size: 'sm',
+    weight: 'normal',
+    line: 'normal',
+    color: 'secondary'
+  },
+  caption: {
+    size: 'xs',
+    weight: 'normal',
+    line: 'normal',
+    color: 'tertiary'
+  },
+  label: {
+    size: 'sm',
+    weight: 'medium',
+    line: 'normal',
+    color: 'secondary'
+  },
+  overline: {
+    size: 'xs',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'secondary',
+    uppercase: true,
+    letterSpacing: 'wide'
+  }
+};
+const TEXT_ROLES = {
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  inverse: true,
+  disabled: true,
+  link: true
+};
+const SEMANTIC = {
+  success: true,
+  warning: true,
+  error: true,
+  info: true
+};
+const resolveColor = (theme, color) => {
+  // Text roles win over the same-named brand colour ('primary' -> text.primary),
+  // which is the intent the vast majority of the time for text.
+  if (TEXT_ROLES[color]) {
+    return theme.colors.text[color];
+  }
+  if (SEMANTIC[color]) {
+    return theme.colors[color];
+  }
+  return color; // raw colour string
+};
+const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    variant = 'body',
+    color,
+    weight,
+    size,
+    align,
+    italic,
+    underline,
+    style,
+    children,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const textStyle = (0, _react.useMemo)(() => {
+    const spec = VARIANTS[variant];
+    const fontSize = typeof size === 'number' ? size : theme.typography.fontSize[size ?? spec.size];
+    const lineHeight = Math.round(fontSize * theme.typography.lineHeight[spec.line]);
+    return {
+      fontSize,
+      lineHeight,
+      color: resolveColor(theme, color ?? spec.color),
+      textAlign: align,
+      textTransform: spec.uppercase ? 'uppercase' : undefined,
+      letterSpacing: spec.letterSpacing ? theme.typography.letterSpacing[spec.letterSpacing] : undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      textDecorationLine: underline ? 'underline' : undefined,
+      ...(0, _index.fontFor)(theme, weight ?? spec.weight)
+    };
+  }, [theme, variant, color, weight, size, align, italic, underline]);
+  const heading = VARIANTS[variant].heading;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    ref: ref,
+    style: [textStyle, style],
+    accessibilityRole: heading ? 'header' : rest.accessibilityRole,
+    ...rest,
+    children: children
+  });
+});
+Text.displayName = 'Text';
+var _default = exports.default = Text;
+//# sourceMappingURL=Text.js.map

package/lib/commonjs/components/Text/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
+var _Text = require("./Text.js");
+//# sourceMappingURL=index.js.map