@onlynative/components 0.1.0-alpha.0

package/dist/text-field/index.js

@@ -0,0 +1,496 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/text-field/index.ts
+var text_field_exports = {};
+__export(text_field_exports, {
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(text_field_exports);
+
+// src/text-field/TextField.tsx
+var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var import_core = require("@onlynative/core");
+
+// src/text-field/styles.ts
+var import_react_native2 = require("react-native");
+
+// src/utils/color.ts
+function parseHexColor(color) {
+  const normalized = color.replace("#", "");
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null;
+  }
+  return { r, g, b };
+}
+function clampAlpha(alpha) {
+  return Math.max(0, Math.min(1, alpha));
+}
+function alphaColor(color, alpha) {
+  const channels = parseHexColor(color);
+  const boundedAlpha = clampAlpha(alpha);
+  if (!channels) {
+    return color;
+  }
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
+}
+
+// src/utils/rtl.ts
+var import_react_native = require("react-native");
+function transformOrigin(vertical = "top") {
+  return import_react_native.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+}
+
+// src/text-field/styles.ts
+var CONTAINER_HEIGHT = 56;
+var ICON_SIZE = 24;
+var LABEL_FLOATED_LINE_HEIGHT = 16;
+var FILLED_LABEL_RESTING_TOP = 16;
+var FILLED_LABEL_FLOATED_TOP = 8;
+var FILLED_INPUT_TOP = 24;
+var FILLED_INPUT_BOTTOM = 8;
+var OUTLINED_INPUT_VERTICAL = 16;
+var OUTLINED_LABEL_RESTING_TOP = 16;
+var OUTLINED_LABEL_FLOATED_TOP = -(LABEL_FLOATED_LINE_HEIGHT / 2);
+var labelPositions = {
+  filledRestingTop: FILLED_LABEL_RESTING_TOP,
+  filledFloatedTop: FILLED_LABEL_FLOATED_TOP,
+  outlinedRestingTop: OUTLINED_LABEL_RESTING_TOP,
+  outlinedFloatedTop: OUTLINED_LABEL_FLOATED_TOP
+};
+function getVariantColors(theme, variant) {
+  const disabledOpacity = theme.stateLayer.disabledOpacity;
+  const common = {
+    focusedBorderColor: theme.colors.primary,
+    errorBorderColor: theme.colors.error,
+    focusedLabelColor: theme.colors.primary,
+    errorLabelColor: theme.colors.error,
+    textColor: theme.colors.onSurface,
+    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
+    placeholderColor: theme.colors.onSurfaceVariant,
+    supportingTextColor: theme.colors.onSurfaceVariant,
+    errorSupportingTextColor: theme.colors.error,
+    iconColor: theme.colors.onSurfaceVariant,
+    errorIconColor: theme.colors.error,
+    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity)
+  };
+  if (variant === "outlined") {
+    return {
+      ...common,
+      backgroundColor: "transparent",
+      borderColor: theme.colors.outline,
+      disabledBackgroundColor: "transparent",
+      labelColor: theme.colors.onSurfaceVariant
+    };
+  }
+  return {
+    ...common,
+    backgroundColor: theme.colors.surfaceContainerHighest,
+    borderColor: theme.colors.onSurfaceVariant,
+    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
+    labelColor: theme.colors.onSurfaceVariant
+  };
+}
+function createStyles(theme, variant) {
+  const colors = getVariantColors(theme, variant);
+  const bodyLarge = theme.typography.bodyLarge;
+  const bodySmall = theme.typography.bodySmall;
+  const isFilled = variant === "filled";
+  return {
+    colors,
+    styles: import_react_native2.StyleSheet.create({
+      root: {
+        alignSelf: "stretch"
+      },
+      container: {
+        minHeight: CONTAINER_HEIGHT,
+        flexDirection: "row",
+        alignItems: "stretch",
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: theme.spacing.md,
+        ...isFilled ? {
+          borderTopStartRadius: theme.shape.cornerExtraSmall,
+          borderTopEndRadius: theme.shape.cornerExtraSmall
+        } : {
+          borderRadius: theme.shape.cornerExtraSmall,
+          borderWidth: 1,
+          borderColor: colors.borderColor
+        }
+      },
+      containerFocused: isFilled ? {} : {
+        borderWidth: 2,
+        borderColor: colors.focusedBorderColor,
+        paddingHorizontal: theme.spacing.md - 1
+      },
+      containerError: isFilled ? {} : {
+        borderWidth: 2,
+        borderColor: colors.errorBorderColor,
+        paddingHorizontal: theme.spacing.md - 1
+      },
+      containerDisabled: isFilled ? { backgroundColor: colors.disabledBackgroundColor } : {
+        borderColor: colors.disabledBorderColor
+      },
+      indicator: {
+        position: "absolute",
+        start: 0,
+        end: 0,
+        bottom: 0,
+        height: 1,
+        backgroundColor: colors.borderColor
+      },
+      indicatorFocused: {
+        height: 2,
+        backgroundColor: colors.focusedBorderColor
+      },
+      indicatorError: {
+        height: 2,
+        backgroundColor: colors.errorBorderColor
+      },
+      indicatorDisabled: {
+        backgroundColor: colors.disabledBorderColor
+      },
+      inputWrapper: {
+        flex: 1,
+        justifyContent: "center"
+      },
+      // When label is present, use explicit padding so the input position
+      // matches the label resting top exactly.
+      inputWrapperWithLabel: {
+        justifyContent: "flex-start",
+        paddingTop: isFilled ? FILLED_INPUT_TOP : OUTLINED_INPUT_VERTICAL,
+        paddingBottom: isFilled ? FILLED_INPUT_BOTTOM : OUTLINED_INPUT_VERTICAL
+      },
+      label: {
+        position: "absolute",
+        zIndex: 1,
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.labelColor,
+        transformOrigin: transformOrigin("top")
+      },
+      labelNotch: {
+        paddingHorizontal: 4
+      },
+      input: {
+        fontFamily: bodyLarge.fontFamily,
+        fontSize: bodyLarge.fontSize,
+        lineHeight: bodyLarge.lineHeight,
+        fontWeight: bodyLarge.fontWeight,
+        letterSpacing: bodyLarge.letterSpacing,
+        color: colors.textColor,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        margin: 0,
+        includeFontPadding: false
+      },
+      inputDisabled: {
+        color: colors.disabledTextColor
+      },
+      leadingIcon: {
+        alignSelf: "center",
+        marginStart: -4,
+        // 16dp container padding → 12dp icon inset per M3
+        marginEnd: theme.spacing.md,
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      trailingIcon: {
+        alignSelf: "center",
+        marginStart: theme.spacing.md,
+        marginEnd: -4,
+        // 16dp container padding → 12dp icon inset per M3
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      trailingIconPressable: {
+        alignSelf: "center"
+      },
+      supportingTextRow: {
+        paddingHorizontal: theme.spacing.md,
+        paddingTop: theme.spacing.xs
+      },
+      supportingText: {
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.supportingTextColor
+      },
+      errorSupportingText: {
+        color: colors.errorSupportingTextColor
+      }
+    })
+  };
+}
+
+// src/text-field/TextField.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ICON_SIZE2 = 24;
+var ICON_WITH_GAP = 12 + 24 + 16;
+function TextField({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  variant = "filled",
+  supportingText,
+  errorText,
+  error = false,
+  disabled = false,
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconPress,
+  multiline = false,
+  onFocus,
+  onBlur,
+  style,
+  containerColor,
+  contentColor,
+  inputStyle,
+  ...textInputProps
+}) {
+  const theme = (0, import_core.useTheme)();
+  const isDisabled = Boolean(disabled);
+  const isError = Boolean(error) || Boolean(errorText);
+  const isFilled = variant === "filled";
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const { colors, styles } = (0, import_react.useMemo)(
+    () => createStyles(theme, variant),
+    [theme, variant]
+  );
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const [internalHasText, setInternalHasText] = (0, import_react.useState)(
+    () => value !== void 0 && value !== ""
+  );
+  const inputRef = (0, import_react.useRef)(null);
+  const isControlled = value !== void 0;
+  const hasValue = isControlled ? value !== "" : internalHasText;
+  const isLabelFloated = isFocused || hasValue;
+  const labelAnimRef = (0, import_react.useRef)(new import_react_native3.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnim = labelAnimRef.current;
+  (0, import_react.useEffect)(() => {
+    import_react_native3.Animated.timing(labelAnim, {
+      toValue: isLabelFloated ? 1 : 0,
+      duration: 150,
+      useNativeDriver: import_react_native3.Platform.OS !== "web"
+    }).start();
+  }, [isLabelFloated, labelAnim]);
+  const labelScale = (0, import_react.useMemo)(() => {
+    const restingScale = theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize;
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingScale, 1]
+    });
+  }, [
+    labelAnim,
+    theme.typography.bodyLarge.fontSize,
+    theme.typography.bodySmall.fontSize
+  ]);
+  const labelTranslateY = (0, import_react.useMemo)(() => {
+    const restingTop = isFilled ? labelPositions.filledRestingTop : labelPositions.outlinedRestingTop;
+    const floatedTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
+    const restingOffset = restingTop - floatedTop;
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingOffset, 0]
+    });
+  }, [isFilled, labelAnim]);
+  const labelStart = theme.spacing.md + (hasLeadingIcon ? ICON_WITH_GAP - theme.spacing.md : 0);
+  const labelStaticTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
+  const handleChangeText = (0, import_react.useCallback)(
+    (text) => {
+      if (!isControlled) {
+        setInternalHasText(text !== "");
+      }
+      onChangeText == null ? void 0 : onChangeText(text);
+    },
+    [isControlled, onChangeText]
+  );
+  const handleFocus = (0, import_react.useCallback)(
+    (event) => {
+      if (isDisabled) return;
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(event);
+    },
+    [isDisabled, onFocus]
+  );
+  const handleBlur = (0, import_react.useCallback)(
+    (event) => {
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(event);
+    },
+    [onBlur]
+  );
+  const handleContainerPress = (0, import_react.useCallback)(() => {
+    var _a;
+    if (!isDisabled) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isDisabled]);
+  const labelColor = isDisabled ? colors.disabledLabelColor : isError ? colors.errorLabelColor : isFocused ? colors.focusedLabelColor : colors.labelColor;
+  const labelBackgroundColor = variant === "outlined" && isLabelFloated ? theme.colors.surface : "transparent";
+  const iconColor = isDisabled ? colors.disabledIconColor : isError ? colors.errorIconColor : contentColor != null ? contentColor : colors.iconColor;
+  const containerStyle = (0, import_react.useMemo)(
+    () => [
+      styles.container,
+      containerColor && !isDisabled ? { backgroundColor: containerColor } : void 0,
+      isFocused && styles.containerFocused,
+      isError && !isFocused && styles.containerError,
+      isDisabled && styles.containerDisabled
+    ],
+    [styles, isFocused, isError, isDisabled, containerColor]
+  );
+  const indicatorStyle = (0, import_react.useMemo)(
+    () => [
+      styles.indicator,
+      isFocused && styles.indicatorFocused,
+      isError && !isFocused && styles.indicatorError,
+      isDisabled && styles.indicatorDisabled
+    ],
+    [styles, isFocused, isError, isDisabled]
+  );
+  const displaySupportingText = isError ? errorText : supportingText;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_MaterialCommunityIcons.default,
+        {
+          name: leadingIcon,
+          size: ICON_SIZE2,
+          color: iconColor
+        }
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native3.View,
+        {
+          style: [
+            styles.inputWrapper,
+            label ? styles.inputWrapperWithLabel : void 0
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native3.TextInput,
+            {
+              ref: inputRef,
+              ...textInputProps,
+              value,
+              onChangeText: handleChangeText,
+              editable: !isDisabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder: isLabelFloated || !label ? placeholder : void 0,
+              placeholderTextColor: colors.placeholderColor,
+              multiline,
+              style: [
+                styles.input,
+                isDisabled ? styles.inputDisabled : void 0,
+                contentColor && !isDisabled ? { color: contentColor } : void 0,
+                inputStyle
+              ],
+              accessibilityLabel: label || void 0,
+              accessibilityState: { disabled: isDisabled },
+              accessibilityHint: isError && errorText ? errorText : void 0
+            }
+          )
+        }
+      ),
+      trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native3.Pressable,
+        {
+          onPress: onTrailingIconPress,
+          disabled: isDisabled || !onTrailingIconPress,
+          accessibilityRole: "button",
+          hitSlop: 12,
+          style: styles.trailingIconPressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_MaterialCommunityIcons.default,
+            {
+              name: trailingIcon,
+              size: ICON_SIZE2,
+              color: iconColor
+            }
+          ) })
+        }
+      ) : null,
+      label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native3.Animated.Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.label,
+            {
+              top: labelStaticTop,
+              start: labelStart,
+              color: labelColor,
+              backgroundColor: labelBackgroundColor,
+              transform: [
+                { translateY: labelTranslateY },
+                { scale: labelScale }
+              ]
+            },
+            variant === "outlined" && isLabelFloated ? styles.labelNotch : void 0
+          ],
+          children: label
+        }
+      ) : null,
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: indicatorStyle }) : null
+    ] }) }),
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native3.Text,
+      {
+        style: [
+          styles.supportingText,
+          isError ? styles.errorSupportingText : void 0
+        ],
+        children: displaySupportingText
+      }
+    ) }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextField
+});

package/dist/types-D3hlyvz-.d.ts

@@ -0,0 +1,51 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { ComponentProps } from 'react';
+import { PressableProps } from 'react-native';
+
+/** Visual fill style of the icon button. */
+type IconButtonVariant = 'filled' | 'tonal' | 'outlined' | 'standard';
+/** Touch target size of the icon button. */
+type IconButtonSize = 'small' | 'medium' | 'large';
+interface IconButtonProps extends Omit<PressableProps, 'children' | 'onPress' | 'style' | 'accessibilityLabel'> {
+    /** MaterialCommunityIcons icon name to display. */
+    icon: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** Icon to display when `selected` is `true` (toggle mode). */
+    selectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** Overrides the automatic icon color derived from the variant and state. */
+    iconColor?: string;
+    /**
+     * Override the content (icon) color.
+     * Takes precedence over `iconColor` when both are provided.
+     */
+    contentColor?: string;
+    /**
+     * Override the container (background) color.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+    /** Custom style applied to the root container. */
+    style?: PressableProps['style'];
+    /** Called when the button is pressed. */
+    onPress?: () => void;
+    /**
+     * Disables the button.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Visual style variant.
+     * @default 'filled'
+     */
+    variant?: IconButtonVariant;
+    /** Enables toggle mode. The button changes appearance based on selected/unselected state. */
+    selected?: boolean;
+    /**
+     * Physical size of the touch target and icon container.
+     * @default 'medium'
+     */
+    size?: IconButtonSize;
+    /** Required — icon-only buttons must have a label for screen readers. */
+    accessibilityLabel: string;
+}
+
+export type { IconButtonProps as I, IconButtonSize as a, IconButtonVariant as b };

package/dist/typography/index.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentType } from 'react';
+import { TextProps, StyleProp, TextStyle } from 'react-native';
+
+/** Material Design 3 type scale role. */
+type TypographyVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
+
+interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
+    /** Content to display. Accepts strings, numbers, or nested elements. */
+    children: ReactNode;
+    /**
+     * MD3 type scale role. Controls font size, weight, line height, and letter spacing.
+     * @default 'bodyMedium'
+     */
+    variant?: TypographyVariant;
+    /** Override the text color. Defaults to the theme's `onSurface` color. */
+    color?: string;
+    /** Additional text styles merged after the theme typography styles. */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Override the underlying text component (e.g. Animated.Text).
+     * @default Text
+     */
+    as?: ComponentType<TextProps>;
+}
+declare function Typography({ children, variant, color, style, as: Component, accessibilityRole, ...textProps }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+export { Typography, type TypographyProps, type TypographyVariant };

package/dist/typography/index.js

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/typography/index.ts
+var typography_exports = {};
+__export(typography_exports, {
+  Typography: () => Typography
+});
+module.exports = __toCommonJS(typography_exports);
+
+// src/typography/Typography.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_core = require("@onlynative/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HEADING_VARIANTS = /* @__PURE__ */ new Set([
+  "displayLarge",
+  "displayMedium",
+  "displaySmall",
+  "headlineLarge",
+  "headlineMedium",
+  "headlineSmall"
+]);
+function Typography({
+  children,
+  variant = "bodyMedium",
+  color,
+  style,
+  as: Component = import_react_native.Text,
+  accessibilityRole,
+  ...textProps
+}) {
+  const theme = (0, import_core.useTheme)();
+  const typographyStyle = theme.typography[variant];
+  const colorStyle = (0, import_react.useMemo)(
+    () => ({ color: color != null ? color : theme.colors.onSurface }),
+    [color, theme.colors.onSurface]
+  );
+  const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...textProps,
+      accessibilityRole: resolvedRole,
+      style: [typographyStyle, colorStyle, style],
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Typography
+});