radix-native 0.0.1

package/src/components/typography/Link.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import { Text as RNText, Linking } 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, lineHeight, 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, TextWrap } from './Text'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * Controls underline visibility.
+ * 'auto'   → no underline by default (Radix shows on hover; RN has no hover).
+ *             highContrast forces underline visible (matches Radix .rt-high-contrast).
+ * 'always' → underline always visible
+ * 'hover'  → no underline (hover never fires in RN)
+ * 'none'   → no underline
+ */
+export type LinkUnderline = 'auto' | 'always' | 'hover' | 'none'
+
+export interface LinkProps extends Omit<RNTextProps, 'style'> {
+  /** Text size token (1–9). Default: inherits — set to 3 (16px) if no parent. */
+  size?: FontSizeToken
+  weight?: TextWeight
+  /** 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
+  /**
+   * Underline visibility. Default: 'auto'.
+   * 'auto' → no underline, unless highContrast is set.
+   * 'hover' → no underline (hover does not exist on mobile).
+   */
+  underline?: LinkUnderline
+  /** Accent color for the link. Default: theme accent (accent-11). */
+  color?: AccentColor
+  /** Switches color to step 12 and forces underline visible in 'auto' mode. */
+  highContrast?: boolean
+  /**
+   * RN-only: URL opened via Linking.openURL when pressed.
+   * If both `href` and `onPress` are provided, `onPress` takes precedence.
+   */
+  href?: string
+  // ─── 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 ────────────────────────────────────────────────────────────────
+
+export function Link({
+  size = 3,
+  weight,
+  truncate,
+  wrap,
+  underline = 'auto',
+  color,
+  highContrast,
+  href,
+  onPress,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: LinkProps) {
+  const { scaling, fonts } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Typography ─────────────────────────────────────────────────────────────
+  const scalingFactor = scalingMap[scaling]
+  const resolvedSize        = Math.round(fontSize[size] * scalingFactor)
+  const resolvedLineHeight  = Math.round(lineHeight[size] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize
+
+  // ─── Color ──────────────────────────────────────────────────────────────────
+  // Radix: accent links use a11 (vibrant foreground), highContrast → step 12.
+  // Gray links always use gray-12 (distinguishes via underline/weight, not color).
+  const prefix = color ?? 'accent'
+  const isGray = color === 'gray'
+  const linkColor = rc(
+    isGray || highContrast ? `${prefix}-12` : `${prefix}-a11`,
+  )
+
+  // ─── Font family ─────────────────────────────────────────────────────────────
+  const effectiveWeight: TextWeight = weight ?? 'regular'
+  const fontFamily = fonts[effectiveWeight] ?? fonts.regular
+
+  // ─── Underline ──────────────────────────────────────────────────────────────
+  // Radix CSS rules for .rt-underline-auto:
+  //   - hover (web only) → underline
+  //   - .rt-high-contrast → underline always, color: accent-a6
+  //   - inside colored parent (data-accent-color) → underline always
+  // In RN there is no hover, so 'auto' only shows underline for highContrast.
+  // 'always' → underline, 'hover'/'none' → no underline.
+  const showUnderline =
+    underline === 'always' || (underline === 'auto' && !!highContrast)
+  const textDecorationLine: TextStyle['textDecorationLine'] =
+    showUnderline ? 'underline' : 'none'
+  // Radix: accent-a5 for normal underline, accent-a6 for highContrast
+  const textDecorationColor = showUnderline
+    ? rc(highContrast ? `${prefix}-a6` : `${prefix}-a5`)
+    : undefined
+
+  // ─── Wrapping / truncation ──────────────────────────────────────────────────
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  // ─── Press handler ──────────────────────────────────────────────────────────
+  const handlePress = React.useCallback(
+    (e: Parameters<NonNullable<RNTextProps['onPress']>>[0]) => {
+      if (onPress) {
+        onPress(e)
+      } else if (href) {
+        void Linking.openURL(href)
+      }
+    },
+    [onPress, href],
+  )
+
+  // ─── Style ──────────────────────────────────────────────────────────────────
+  const linkStyle: TextStyle = {
+    fontSize:      resolvedSize,
+    lineHeight:    resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color:         linkColor,
+    fontWeight:    weight ? FONT_WEIGHT[weight] : undefined,
+    fontFamily,
+    textDecorationLine,
+    textDecorationColor,
+    // 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="link"
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      onPress={handlePress}
+      style={[linkStyle, style]}
+      {...rest}
+    />
+  )
+}
+Link.displayName = 'Link'

package/src/components/typography/Quote.tsx

@@ -0,0 +1,71 @@
+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 QuoteProps 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 quoted text. Wraps children with typographic curly quotes (" ").
+ * Can be nested inside `<Text>` for inline use.
+ */
+export function Quote({
+  truncate,
+  wrap,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  children,
+  ...rest
+}: QuoteProps) {
+  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 quoteStyle: 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={[quoteStyle, style]}
+      {...rest}
+    >
+      {'\u201c'}{children}{'\u201d'}
+    </RNText>
+  )
+}
+Quote.displayName = 'Quote'

package/src/components/typography/Strong.tsx

@@ -0,0 +1,70 @@
+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 StrongProps 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 bold text. Can be nested inside `<Text>` for inline use.
+ * Can be nested inside `<Text>` for inline use.
+ * Uses `fonts.bold` when provided, otherwise `fontWeight: '700'`.
+ */
+export function Strong({
+  truncate,
+  wrap,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: StrongProps) {
+  const { scaling, fonts } = 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 strongStyle: TextStyle = {
+    fontWeight: '700',
+    fontFamily: fonts.bold ?? fonts.regular,
+    // 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={[strongStyle, style]}
+      {...rest}
+    />
+  )
+}
+Strong.displayName = 'Strong'

package/src/components/typography/Text.tsx

@@ -0,0 +1,140 @@
+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, lineHeight, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import type { FontSizeToken } from '../../tokens/typography'
+import type { SpaceToken, MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TextSize = FontSizeToken
+export type TextWeight = 'light' | 'regular' | 'medium' | 'bold'
+export type TextAlign = 'left' | 'center' | 'right'
+/** 'pretty' and 'balance' are not supported in React Native and have no effect. */
+export type TextWrap = 'wrap' | 'nowrap' | 'pretty' | 'balance'
+
+export interface TextProps extends Omit<RNTextProps, 'style'> {
+  /** Text size token (1–9). Default: 3 (16px). */
+  size?: TextSize
+  /** Font weight. Each weight maps to its own fontFamily when configured in ThemeFonts. */
+  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 (no ellipsis).
+   * 'pretty' / 'balance' → not supported in React Native, no-op.
+   */
+  wrap?: TextWrap
+  /**
+   * Text color from the theme palette.
+   * When set: uses alpha step a11 (accessible foreground).
+   * When not set: uses gray-12 (standard body text color).
+   */
+  color?: AccentColor
+  /**
+   * Increases color contrast when `color` is set: switches from a11 → solid 12.
+   * Has no effect when `color` is not set (gray-12 is already maximum contrast).
+   */
+  highContrast?: boolean
+  // ─── 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 ────────────────────────────────────────────────────────────────
+
+export function Text({
+  size = 3,
+  weight,
+  align,
+  truncate,
+  wrap,
+  color,
+  highContrast,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: TextProps) {
+  const { scaling, fonts } = useThemeContext()
+  const rc = useResolveColor()
+
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Typography ─────────────────────────────────────────────────────────────
+  const scalingFactor = scalingMap[scaling]
+  const resolvedSize        = Math.round(fontSize[size] * scalingFactor)
+  const resolvedLineHeight  = Math.round(lineHeight[size] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize
+
+  // ─── Color ──────────────────────────────────────────────────────────────────
+  //   no color prop        → gray-12        (standard body text)
+  //   color prop           → {color}-a11    (alpha step 11 — accessible foreground)
+  //   color + highContrast → {color}-12     (solid step 12 — maximum contrast)
+  const textColor = color
+    ? rc(highContrast ? `${color}-12` : `${color}-a11`)
+    : rc('gray-12')
+
+  // ─── Font family ─────────────────────────────────────────────────────────────
+  // Each weight maps to its own fontFamily — in RN, fontWeight alone doesn't
+  // load a different font file; the fontFamily must be registered per weight.
+  const effectiveWeight: TextWeight = weight ?? 'regular'
+  const fontFamily = fonts[effectiveWeight] ?? fonts.regular
+
+  // ─── Wrapping / truncation ──────────────────────────────────────────────────
+  // truncate takes precedence over wrap
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  // ─── Style ──────────────────────────────────────────────────────────────────
+  const textStyle: TextStyle = {
+    fontSize:      resolvedSize,
+    lineHeight:    resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color:         textColor,
+    textAlign:     align,
+    fontWeight:    weight ? FONT_WEIGHT[weight] : undefined,
+    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
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[textStyle, style]}
+      {...rest}
+    />
+  )
+}
+Text.displayName = 'Text'

package/src/components/typography/index.ts

@@ -0,0 +1,9 @@
+export { Text, type TextProps, type TextSize, type TextWeight, type TextAlign, type TextWrap } from './Text'
+export { Heading, type HeadingProps, type HeadingSize } from './Heading'
+export { Link, type LinkProps, type LinkUnderline } from './Link'
+export { Blockquote, type BlockquoteProps } from './Blockquote'
+export { Em, type EmProps } from './Em'
+export { Strong, type StrongProps } from './Strong'
+export { Code, type CodeProps, type CodeVariant } from './Code'
+export { Kbd, type KbdProps, type KbdVariant } from './Kbd'
+export { Quote, type QuoteProps } from './Quote'

package/src/hooks/useResolveColor.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useThemeContext } from './useThemeContext'
+import { resolveColor } from '../utils/resolveColor'
+import type { ThemeColor } from '../theme/theme.types'
+
+/**
+ * Returns a resolver function bound to the current theme context.
+ * Use this to resolve ThemeColor tokens to hex strings inside components.
+ *
+ * @example
+ * const rc = useResolveColor()
+ * const bg = rc('gray-1')
+ * const accent = rc('accent-9')
+ * const blue = rc('blue-5')
+ */
+export function useResolveColor(): (color: ThemeColor) => string {
+  const { appearance, accentColor, resolvedGrayColor, colorOverrides } = useThemeContext()
+
+  return React.useCallback(
+    (color: ThemeColor) =>
+      resolveColor(color, appearance, accentColor, resolvedGrayColor, colorOverrides),
+    [appearance, accentColor, resolvedGrayColor, colorOverrides],
+  )
+}

package/src/hooks/useThemeContext.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ThemeContext } from '../theme/ThemeContext'
+import type { ThemeContextValue } from '../theme/theme.types'
+
+export function useThemeContext(): ThemeContextValue {
+  const context = React.useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('`useThemeContext` must be used within a `Theme`')
+  }
+  return context
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+// radix-native — public entry point
+
+// Theme
+export { Theme } from './theme/Theme'
+export { createTheme } from './theme/createTheme'
+export { useThemeContext } from './hooks/useThemeContext'
+export { useResolveColor } from './hooks/useResolveColor'
+export type {
+  ThemeProps,
+  ThemeContextValue,
+  ThemeAppearance,
+  ThemeColor,
+  ThemeFonts,
+  ColorScaleOverride,
+  ColorOverrides,
+  AccentColor,
+  GrayColor,
+  RadiusToken,
+  ScalingMode,
+} from './theme/theme.types'
+
+// Utils
+export { applyScaling } from './utils/applyScaling'
+export { resolveSpace } from './utils/resolveSpace'
+export { resolveColor } from './utils/resolveColor'
+export { getClassicEffect } from './utils/classicEffect'
+
+// Components
+export { Box, type BoxProps } from './components/layout'
+export {
+  Flex, type FlexProps, type FlexDirection, type FlexAlign, type FlexJustify, type FlexWrap,
+} from './components/layout'
+export {
+  Grid, type GridProps, type GridAlign, type GridJustify,
+} from './components/layout'
+export {
+  Text, type TextProps, type TextSize, type TextWeight, type TextAlign, type TextWrap,
+  Heading, type HeadingProps, type HeadingSize,
+  Link, type LinkProps, type LinkUnderline,
+  Blockquote, type BlockquoteProps,
+  Em, type EmProps,
+  Strong, type StrongProps,
+  Code, type CodeProps, type CodeVariant,
+  Kbd, type KbdProps, type KbdVariant,
+  Quote, type QuoteProps,
+} from './components/typography'
+
+// Actions
+export {
+  Button, type ButtonProps, type ButtonSize, type ButtonVariant,
+  Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CheckedState,
+  CheckboxGroup, type CheckboxGroupProps, type CheckboxGroupItemProps,
+  CheckboxCards, type CheckboxCardsProps, type CheckboxCardsItemProps, type CheckboxCardsVariant,
+} from './components/actions'
+
+// Playground
+export { ThemeControls, type ThemeControlsProps } from './components/playground'
+
+// Tokens
+export { space, type SpaceToken, type MarginToken } from './tokens/spacing'
+export { fontSize, lineHeight, headingLineHeight, letterSpacingEm, type FontSizeToken } from './tokens/typography'
+export { getRadius, getFullRadius, type RadiusLevel } from './tokens/radius'
+export { scalingMap } from './tokens/scaling'

package/src/theme/Theme.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { ThemeContext } from './ThemeContext'
+import { ThemeRoot } from './ThemeRoot'
+import { ThemeImpl } from './ThemeImpl'
+import type { ThemeProps } from './theme.types'
+
+export function Theme(props: ThemeProps) {
+  const context = React.useContext(ThemeContext)
+  const isRoot = context === undefined
+  return isRoot ? <ThemeRoot {...props} /> : <ThemeImpl {...props} />
+}
+Theme.displayName = 'Theme'

package/src/theme/ThemeContext.ts

@@ -0,0 +1,4 @@
+import React from 'react'
+import type { ThemeContextValue } from './theme.types'
+
+export const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined)

package/src/theme/ThemeImpl.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { ThemeContext } from './ThemeContext'
+import { resolveGrayColor } from './resolveGrayColor'
+import type { ThemeProps, ThemeContextValue } from './theme.types'
+
+export function ThemeImpl({
+  appearance: appearanceProp,
+  accentColor: accentColorProp,
+  grayColor: grayColorProp,
+  radius: radiusProp,
+  scaling: scalingProp,
+  fonts: fontsProp,
+  colorOverrides: colorOverridesProp,
+  children,
+}: ThemeProps) {
+  // Always defined here — ThemeImpl is only rendered when context exists
+  const parent = React.useContext(ThemeContext)!
+
+  const appearance =
+    appearanceProp !== undefined && appearanceProp !== 'inherit'
+      ? appearanceProp
+      : parent.appearance
+
+  const accentColor = accentColorProp ?? parent.accentColor
+  // Inherit resolvedGrayColor from parent (same as Radix) so 'auto' doesn't
+  // re-resolve against the nested accentColor unless explicitly set
+  const grayColor = grayColorProp ?? parent.resolvedGrayColor
+  const radius = radiusProp ?? parent.radius
+  const scaling = scalingProp ?? parent.scaling
+  const resolvedGrayColor = grayColor === 'auto' ? resolveGrayColor(accentColor) : grayColor
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({
+      appearance,
+      accentColor,
+      grayColor,
+      resolvedGrayColor,
+      radius,
+      scaling,
+      fonts: fontsProp ?? parent.fonts,
+      colorOverrides: colorOverridesProp ?? parent.colorOverrides,
+      // Handlers always bubble up to ThemeRoot
+      onAppearanceChange: parent.onAppearanceChange,
+      onAccentColorChange: parent.onAccentColorChange,
+      onGrayColorChange: parent.onGrayColorChange,
+      onRadiusChange: parent.onRadiusChange,
+      onScalingChange: parent.onScalingChange,
+    }),
+    [appearance, accentColor, grayColor, resolvedGrayColor, radius, scaling, fontsProp, colorOverridesProp, parent],
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+ThemeImpl.displayName = 'ThemeImpl'