"use strict";

import React, { memo } from 'react';
import { Text as RNText, Platform } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { fontFamilies } from "../fonts/tokens.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Platform-aware font-family value. On web we resolve to the CSS custom
 * property set by `applyFontFaces` so consumer apps can re-skin Bloom by
 * overriding `--bloom-font-*` at any subtree. On native we use the literal
 * family name registered by `expo-font`'s `useFonts(FONT_ASSETS)`.
 */
function fontFamilyStyle(kind) {
  if (Platform.OS === 'web') {
    return {
      fontFamily: `var(--bloom-font-${kind})`
    };
  }
  if (kind === 'mono') return {
    fontFamily: 'Geist Mono'
  };
  // `display` and `sans` both resolve to BlomusModernus on native — Bloom's
  // default body font. The CSS stack in `tokens.ts` differs (display vs sans
  // have different fallback chains for web), but on RN the literal family
  // name is the only thing that matters; the .ttf is registered via
  // `useFonts(FONT_ASSETS)` in `FontLoader.native.tsx`.
  return {
    fontFamily: 'BlomusModernus'
  };
}
const SANS_FONT_FAMILY = fontFamilyStyle('sans');
const DISPLAY_FONT_FAMILY = fontFamilyStyle('display');

/**
 * Base text component with theme-aware default color and the Bloom sans
 * font family applied.
 */
const TextComponent = function Text({
  children,
  style,
  ...rest
}) {
  const {
    colors
  } = useTheme();
  return /*#__PURE__*/_jsx(RNText, {
    ...rest,
    style: [{
      fontSize: 13,
      color: colors.text,
      ...SANS_FONT_FAMILY
    }, style],
    children: children
  });
};
export const Text = /*#__PURE__*/memo(TextComponent);
Text.displayName = 'Text';
export { Text as Span };
const HEADING_STYLE = {
  ...DISPLAY_FONT_FAMILY,
  fontWeight: '700'
};
function createHeadingElement({
  level
}) {
  return function HeadingElement({
    style,
    ...rest
  }) {
    const extraProps = Platform.OS === 'web' ? {
      role: 'heading',
      'aria-level': level
    } : {};
    return /*#__PURE__*/_jsx(Text, {
      ...extraProps,
      ...rest,
      style: [HEADING_STYLE, style]
    });
  };
}
export const H1 = createHeadingElement({
  level: 1
});
H1.displayName = 'H1';
export const H2 = createHeadingElement({
  level: 2
});
H2.displayName = 'H2';
export const H3 = createHeadingElement({
  level: 3
});
H3.displayName = 'H3';
export const H4 = createHeadingElement({
  level: 4
});
H4.displayName = 'H4';
export const H5 = createHeadingElement({
  level: 5
});
H5.displayName = 'H5';
export const H6 = createHeadingElement({
  level: 6
});
H6.displayName = 'H6';
export function P({
  style,
  ...rest
}) {
  const extraProps = Platform.OS === 'web' ? {
    role: 'paragraph'
  } : {};
  return /*#__PURE__*/_jsx(Text, {
    ...extraProps,
    ...rest,
    style: [{
      fontSize: 15,
      lineHeight: 15 * 1.625
    }, style]
  });
}
P.displayName = 'P';
export { fontFamilies };
//# sourceMappingURL=index.js.map