radix-native 0.0.1

package/src/components/typography/Code.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import { Text as RNText } from 'react-native'
+import type { TextProps as RNTextProps, StyleProp, TextStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { fontSize, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import { getRadius } from '../../tokens/radius'
+import type { FontSizeToken } from '../../tokens/typography'
+import type { MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import type { TextWeight, TextWrap } from './Text'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type CodeVariant = 'solid' | 'soft' | 'outline' | 'ghost'
+
+export interface CodeProps extends Omit<RNTextProps, 'style'> {
+  /** Text size token (1–9). Default: inherits context — set to 3 (16px) if no parent. */
+  size?: FontSizeToken
+  /**
+   * Visual style.
+   * 'soft'    → light accent background, accent-a11 text (default)
+   * 'solid'   → filled accent-9 background, contrast text
+   * 'outline' → transparent background with accent border
+   * 'ghost'   → no background, no border
+   */
+  variant?: CodeVariant
+  weight?: TextWeight
+  /** Accent color. Default: theme accent. */
+  color?: AccentColor
+  /** Increases color contrast (a11 → 12 for text in soft/outline/ghost). */
+  highContrast?: boolean
+  /** Truncates text with an ellipsis when it overflows. */
+  truncate?: boolean
+  /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+  wrap?: TextWrap
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<TextStyle>
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const FONT_WEIGHT: Record<TextWeight, NonNullable<TextStyle['fontWeight']>> = {
+  light:   '300',
+  regular: '400',
+  medium:  '500',
+  bold:    '700',
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Inline code. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ *
+ * Note: In RN, `backgroundColor` on inline Text fills the tight text bounds
+ * without padding/borderRadius support when nested. For block-level code with
+ * full visual fidelity, wrap in a `<Box>` with explicit styling.
+ */
+export function Code({
+  size = 3,
+  variant = 'soft',
+  weight,
+  color,
+  highContrast,
+  truncate,
+  wrap,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: CodeProps) {
+  const { scaling, fonts, radius } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Typography ─────────────────────────────────────────────────────────────
+  const scalingFactor = scalingMap[scaling]
+  // Rendered at 85% of the base size to visually match inline code conventions.
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor * 0.85)
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize
+
+  // ─── Color helpers ───────────────────────────────────────────────────────────
+  // When `color` prop is set, use that color's steps; otherwise use 'accent-*'
+  const prefix = color ?? 'accent'
+
+  const textColor = (() => {
+    switch (variant) {
+      case 'solid':
+        return rc(`${prefix}-contrast` as Parameters<typeof rc>[0])
+      case 'soft':
+      case 'outline':
+      case 'ghost':
+      default:
+        return rc((highContrast ? `${prefix}-12` : `${prefix}-a11`) as Parameters<typeof rc>[0])
+    }
+  })()
+
+  const backgroundColor = (() => {
+    switch (variant) {
+      case 'solid': return rc(`${prefix}-9` as Parameters<typeof rc>[0])
+      case 'soft':  return rc(`${prefix}-a3` as Parameters<typeof rc>[0])
+      default:      return undefined
+    }
+  })()
+
+  const borderColor = variant === 'outline'
+    ? rc(`${prefix}-a7` as Parameters<typeof rc>[0])
+    : undefined
+
+  // ─── Font family ─────────────────────────────────────────────────────────────
+  const effectiveWeight: TextWeight = weight ?? 'regular'
+  const fontFamily = fonts.code ?? fonts[effectiveWeight] ?? fonts.regular
+
+  // ─── Wrapping / truncation ──────────────────────────────────────────────────
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  // ─── Padding — proportional to font size (mirrors Radix's 0.1em / 0.35em) ───
+  const paddingVertical   = Math.round(resolvedSize * 0.1)
+  const paddingHorizontal = Math.round(resolvedSize * 0.35)
+
+  // ─── Style ──────────────────────────────────────────────────────────────────
+  const codeStyle: TextStyle = {
+    fontSize:         resolvedSize,
+    letterSpacing:    resolvedLetterSpacing,
+    fontWeight:       weight ? FONT_WEIGHT[weight] : undefined,
+    fontFamily,
+    color:            textColor,
+    backgroundColor,
+    borderRadius:     getRadius(radius, 1),
+    borderWidth:      borderColor ? 1 : undefined,
+    borderColor,
+    paddingVertical,
+    paddingHorizontal,
+    // Shrink to content width when used standalone (no-op when nested inline in Text).
+    alignSelf:        variant !== 'ghost' ? 'flex-start' : undefined,
+    // Margins
+    marginTop:    sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft:   sp(ml ?? mx ?? m),
+    marginRight:  sp(mr ?? mx ?? m),
+  }
+
+  return (
+    <RNText
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[codeStyle, style]}
+      {...rest}
+    />
+  )
+}
+Code.displayName = 'Code'

package/src/components/typography/Em.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Text as RNText } from 'react-native'
+import type { TextProps as RNTextProps, StyleProp, TextStyle } from 'react-native'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import type { MarginToken } from '../../tokens/spacing'
+import type { TextWrap } from './Text'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface EmProps extends Omit<RNTextProps, 'style'> {
+  /** Truncates text with an ellipsis when it overflows. */
+  truncate?: boolean
+  /** Controls text wrapping. 'pretty'/'balance' are not supported in React Native, no-op. */
+  wrap?: TextWrap
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<TextStyle>
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Inline italic text. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ */
+export function Em({
+  truncate,
+  wrap,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: EmProps) {
+  const { scaling } = useThemeContext()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  const emStyle: TextStyle = {
+    fontStyle: 'italic',
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink:    1,
+    marginTop:    sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft:   sp(ml ?? mx ?? m),
+    marginRight:  sp(mr ?? mx ?? m),
+  }
+
+  return (
+    <RNText
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[emStyle, style]}
+      {...rest}
+    />
+  )
+}
+Em.displayName = 'Em'

package/src/components/typography/Heading.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { Text as RNText } from 'react-native'
+import type { StyleProp, TextStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { fontSize, headingLineHeight, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import type { FontSizeToken } from '../../tokens/typography'
+import type { MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import type { TextWeight, TextAlign, TextWrap } from './Text'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type HeadingSize = FontSizeToken
+
+export interface HeadingProps {
+  /** Heading size token (1–9). Default: 6 (24px). */
+  size?: HeadingSize
+  /** Font weight. Default: 'bold'. */
+  weight?: TextWeight
+  /** Text alignment. */
+  align?: TextAlign
+  /** Truncates text with an ellipsis when it overflows its container. */
+  truncate?: boolean
+  /**
+   * Controls text wrapping.
+   * 'nowrap' → single line with clip. 'pretty'/'balance' → not supported in React Native, no-op.
+   */
+  wrap?: TextWrap
+  /**
+   * Text color from the theme palette.
+   * No color → gray-12; color → {color}-a11; color + highContrast → {color}-12.
+   */
+  color?: AccentColor
+  /** Increases color contrast when `color` is set (a11 → solid 12). */
+  highContrast?: boolean
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<TextStyle>
+  children?: React.ReactNode
+  accessibilityLabel?: string
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const FONT_WEIGHT: Record<TextWeight, NonNullable<TextStyle['fontWeight']>> = {
+  light:   '300',
+  regular: '400',
+  medium:  '500',
+  bold:    '700',
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function Heading({
+  size = 6,
+  weight = 'bold',
+  align,
+  truncate,
+  wrap,
+  color,
+  highContrast,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  children,
+  ...rest
+}: HeadingProps) {
+  const { scaling, fonts } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Typography ─────────────────────────────────────────────────────────────
+  // Heading uses the same font size scale as Text but has its own tighter
+  // line heights. Letter spacing values are identical to Text.
+  const scalingFactor = scalingMap[scaling]
+  const resolvedSize          = Math.round(fontSize[size] * scalingFactor)
+  const resolvedLineHeight    = Math.round(headingLineHeight[size] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize
+
+  // ─── Color ──────────────────────────────────────────────────────────────────
+  // Same logic as Text.
+  const textColor = color
+    ? rc(highContrast ? `${color}-12` : `${color}-a11`)
+    : rc('gray-12')
+
+  // ─── Font family ─────────────────────────────────────────────────────────────
+  // Heading prefers fonts.heading, then the specific weight's font, then bold, then regular.
+  const effectiveWeight: TextWeight = weight ?? 'bold'
+  const fontFamily = fonts.heading ?? fonts[effectiveWeight] ?? fonts.bold ?? fonts.regular
+
+  // ─── Wrapping / truncation ──────────────────────────────────────────────────
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  // ─── Style ──────────────────────────────────────────────────────────────────
+  const headingStyle: TextStyle = {
+    fontSize:               resolvedSize,
+    lineHeight:             resolvedLineHeight,
+    letterSpacing:          resolvedLetterSpacing,
+    color:                  textColor,
+    textAlign:              align,
+    fontWeight:             FONT_WEIGHT[weight],
+    fontFamily,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink:    1,
+    // Margins
+    marginTop:    sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft:   sp(ml ?? mx ?? m),
+    marginRight:  sp(mr ?? mx ?? m),
+  }
+
+  return (
+    <RNText
+      accessibilityRole="header"
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[headingStyle, style]}
+      {...rest}
+    >
+      {children}
+    </RNText>
+  )
+}
+Heading.displayName = 'Heading'

package/src/components/typography/Kbd.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import { Platform, View, Text as RNText } from 'react-native'
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { fontSize, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import { getRadius } from '../../tokens/radius'
+import type { FontSizeToken } from '../../tokens/typography'
+import type { MarginToken } from '../../tokens/spacing'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type KbdVariant = 'classic' | 'soft'
+
+export interface KbdProps {
+  /**
+   * Text size token (1–9).
+   *
+   * In Radix web, Kbd uses `0.75em` to inherit from the parent.
+   * In RN there are no relative units, so `size` sets the *parent* text size
+   * and the Kbd font is derived as `fontSize[size] * 0.8` (matching Radix).
+   */
+  size?: FontSizeToken
+  /** Visual variant. Default: `'classic'`. */
+  variant?: KbdVariant
+  // ─── Margin props (Radix layout) ──────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+  children?: React.ReactNode
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Keyboard key indicator — styled to look like a physical key.
+ *
+ * Follows the Radix Themes Kbd API:
+ * - `size` 1-9 (default 2)
+ * - `variant` 'classic' (raised key with shadow) | 'soft' (flat tinted bg)
+ * - Margin props: m, mx, my, mt, mr, mb, ml
+ *
+ * When nested inline inside `<Text>`, RN places the View's bottom at the
+ * text baseline. We use `transform: translateY` to shift it into alignment
+ * (marginBottom is ignored for inline Views in Text).
+ */
+export function Kbd({
+  size = 2,
+  variant = 'classic',
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  children,
+}: KbdProps) {
+  const { scaling, fonts, radius } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  const sf = scalingMap[scaling]
+
+  // Radix: font-size = fontSize[size] * 0.8
+  const kbdFontSize = Math.round(fontSize[size] * sf * 0.8)
+  // Radix: border-radius = radiusFactor * 0.35em (relative to kbdFontSize)
+  const borderR = Math.max(2, Math.round(getRadius(radius, 2) * 0.35 * (kbdFontSize / 14)))
+  // Radix: min-width 1.75em, line-height 1.7em (em = kbdFontSize)
+  const minW = Math.round(kbdFontSize * 1.75)
+  const kbdHeight = Math.round(kbdFontSize * 1.7)
+  // Radix: padding 0.5em horizontal, 0.05em bottom
+  const ph = Math.round(kbdFontSize * 0.5)
+  const pb = Math.round(kbdFontSize * 0.05)
+
+  // Inline alignment: shift down so Kbd centers with surrounding text.
+  // In RN, inline View bottom = text baseline. Kbd sticks above by
+  // (kbdHeight - ascender). We shift it down by that amount.
+  const parentFontSize = Math.round(fontSize[size] * sf)
+  const ascender = Math.round(parentFontSize * 0.82)
+  const translateY = Math.round((kbdHeight - ascender) * 0.5)
+
+  const isClassic = variant === 'classic'
+
+  const containerStyle: ViewStyle = {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: kbdHeight,
+    minWidth: minW,
+    paddingHorizontal: ph,
+    paddingBottom: pb,
+    borderRadius: borderR,
+    backgroundColor: isClassic ? rc('gray-1') : rc('gray-a3'),
+    // Classic uses border to approximate box-shadow outline + bottom shadow
+    ...(isClassic
+      ? {
+          borderWidth: 1,
+          borderColor: rc('gray-a5'),
+          borderBottomWidth: 2,
+          borderBottomColor: rc('gray-a7'),
+        }
+      : {}),
+    transform: [{ translateY }],
+    // iOS shadow approximates the outer drop shadow from Radix box-shadow
+    ...(isClassic
+      ? Platform.select({
+          ios: {
+            shadowColor: rc('gray-12'),
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.12,
+            shadowRadius: 1,
+          },
+          android: {
+            elevation: 1,
+          },
+        })
+      : {}),
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m),
+  }
+
+  const textStyle: TextStyle = {
+    fontSize: kbdFontSize,
+    // Radix uses the default (body) font, NOT monospace
+    fontFamily: fonts.regular,
+    fontWeight: 'normal',
+    color: rc('gray-12'),
+    letterSpacing: letterSpacingEm[size] * kbdFontSize,
+  }
+
+  // Classic variant: thin highlight line at the top to simulate
+  // the inset box-shadow highlight from Radix
+  const highlightStyle: ViewStyle | null = isClassic
+    ? {
+        position: 'absolute',
+        top: 0,
+        left: 1,
+        right: 1,
+        height: 1,
+        backgroundColor: rc('gray-a3'),
+        borderTopLeftRadius: Math.max(0, borderR - 1),
+        borderTopRightRadius: Math.max(0, borderR - 1),
+      }
+    : null
+
+  return (
+    <View style={[containerStyle, style]}>
+      {highlightStyle && <View style={highlightStyle} />}
+      <RNText style={textStyle}>{children}</RNText>
+    </View>
+  )
+}
+Kbd.displayName = 'Kbd'