radix-native 0.0.1

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "radix-native",
+  "version": "0.0.1",
+  "description": "Radix Themes API for React Native",
+  "author": "Atotaro98",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Atotaro98/radix-native"
+  },
+  "homepage": "https://github.com/Atotaro98/radix-native",
+  "keywords": ["react-native", "radix", "ui", "components", "expo", "themes"],
+  "type": "module",
+  "sideEffects": false,
+  "source": "src/index",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --watch",
+    "generate:colors": "tsx scripts/generate-colors.ts",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@radix-ui/colors": "latest",
+    "@types/node": "latest",
+    "tsx": "latest",
+    "typescript": "latest",
+    "unbuild": "latest"
+  }
+}

package/src/components/actions/Button.tsx

@@ -0,0 +1,337 @@
+import React, { useCallback, useMemo } from 'react'
+import { Pressable, ActivityIndicator, View } from 'react-native'
+import { Text as RNText } from 'react-native'
+import type {
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  GestureResponderEvent,
+} 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 { getRadius, getFullRadius } from '../../tokens/radius'
+import type { RadiusToken, RadiusLevel } from '../../tokens/radius'
+import type { MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import { getClassicEffect } from '../../utils/classicEffect'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ButtonSize = 1 | 2 | 3 | 4
+export type ButtonVariant = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost'
+
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Button size (1–4). Default: 2. */
+  size?: ButtonSize
+  /** Visual variant. Default: 'solid'. */
+  variant?: ButtonVariant
+  /** Accent color. Default: theme accent. */
+  color?: AccentColor
+  /** Increases color contrast with the background. */
+  highContrast?: boolean
+  /** Override the theme radius for this button. */
+  radius?: RadiusToken
+  /** Shows a loading spinner and disables the button. */
+  loading?: boolean
+  /** Disables the button. */
+  disabled?: boolean
+  /** Button content (usually a string). */
+  children?: React.ReactNode
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Size mappings (Radix tokens) ─────────────────────────────────────────────
+
+/** height per size: space-5, space-6, space-7, space-8 */
+const SIZE_HEIGHT: Record<ButtonSize, number> = { 1: 24, 2: 32, 3: 40, 4: 48 }
+/** horizontal padding per size (non-ghost) */
+const SIZE_PADDING_X: Record<ButtonSize, number> = { 1: 8, 2: 12, 3: 16, 4: 24 }
+/** horizontal padding per size (ghost) — smaller than non-ghost */
+const GHOST_PADDING_X: Record<ButtonSize, number> = { 1: 8, 2: 8, 3: 12, 4: 16 }
+/** vertical padding per size (ghost only) */
+const GHOST_PADDING_Y: Record<ButtonSize, number> = { 1: 4, 2: 4, 3: 6, 4: 8 }
+/** gap per size (non-ghost) */
+const SIZE_GAP: Record<ButtonSize, number> = { 1: 4, 2: 8, 3: 12, 4: 12 }
+/** gap per size (ghost) — smaller than non-ghost */
+const GHOST_GAP: Record<ButtonSize, number> = { 1: 4, 2: 4, 3: 8, 4: 8 }
+/** font-size index per button size */
+const SIZE_FONT: Record<ButtonSize, 1 | 2 | 3 | 4> = { 1: 1, 2: 2, 3: 3, 4: 4 }
+/** radius level per size */
+const SIZE_RADIUS_LEVEL: Record<ButtonSize, RadiusLevel> = { 1: 1, 2: 2, 3: 3, 4: 4 }
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function Button({
+  size = 2,
+  variant = 'solid',
+  color,
+  highContrast,
+  radius: radiusProp,
+  loading = false,
+  disabled = false,
+  children,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  onPress,
+  ...rest
+}: ButtonProps) {
+  const { appearance, scaling, fonts, radius: themeRadius } = useThemeContext()
+  const rc = useResolveColor()
+
+  const effectiveRadius = radiusProp ?? themeRadius
+  const isDisabled = disabled || loading
+  const prefix = color ?? 'accent'
+
+  // ─── Space helper ──────────────────────────────────────────────────────────
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Typography ────────────────────────────────────────────────────────────
+  const scalingFactor = scalingMap[scaling]
+  const fontIdx = SIZE_FONT[size]
+  const resolvedFontSize = Math.round(fontSize[fontIdx] * scalingFactor)
+  const resolvedLineHeight = Math.round(lineHeight[fontIdx] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[fontIdx] * resolvedFontSize
+
+  // ─── Dimensions ────────────────────────────────────────────────────────────
+  const isGhost = variant === 'ghost'
+  const resolvedHeight = Math.round(SIZE_HEIGHT[size] * scalingFactor)
+  const resolvedPaddingX = Math.round(
+    (isGhost ? GHOST_PADDING_X[size] : SIZE_PADDING_X[size]) * scalingFactor,
+  )
+  const resolvedPaddingY = isGhost ? Math.round(GHOST_PADDING_Y[size] * scalingFactor) : 0
+  const resolvedGap = Math.round(
+    (isGhost ? GHOST_GAP[size] : SIZE_GAP[size]) * scalingFactor,
+  )
+
+  // ─── Radius ────────────────────────────────────────────────────────────────
+  const level = SIZE_RADIUS_LEVEL[size]
+  const borderRadius = Math.max(getRadius(effectiveRadius, level), getFullRadius(effectiveRadius))
+
+  // ─── Color helpers ─────────────────────────────────────────────────────────
+  type C = Parameters<typeof rc>[0]
+
+  const colors = useMemo(() => {
+    // Radix: loading sets [data-disabled], so both disabled AND loading use disabled styling
+    if (isDisabled) {
+      const disabledText = rc('gray-a8' as C)
+      switch (variant) {
+        case 'classic':
+          return {
+            bg: rc('gray-2' as C),
+            text: disabledText,
+            border: undefined,
+            pressedBg: rc('gray-2' as C),
+          }
+        case 'solid':
+        case 'soft':
+          return {
+            bg: rc('gray-a3' as C),
+            text: disabledText,
+            border: undefined,
+            pressedBg: rc('gray-a3' as C),
+          }
+        case 'surface':
+          return {
+            bg: rc('gray-a2' as C),
+            text: disabledText,
+            border: rc('gray-a6' as C),
+            pressedBg: rc('gray-a2' as C),
+          }
+        case 'outline':
+          return {
+            bg: 'transparent',
+            text: disabledText,
+            border: rc('gray-a7' as C),
+            pressedBg: 'transparent',
+          }
+        case 'ghost':
+          return {
+            bg: 'transparent',
+            text: disabledText,
+            border: undefined,
+            pressedBg: 'transparent',
+          }
+      }
+    }
+
+    // Active variant colors
+    const hc = highContrast
+
+    switch (variant) {
+      case 'classic':
+      case 'solid': {
+        const bg = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-9` as C)
+        const text = hc ? rc('gray-1' as C) : rc(`${prefix}-contrast` as C)
+        const pressedBg = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-10` as C)
+        // highContrast: accent-12 bg and pressedBg are identical, use opacity for press feedback
+        const pressedOpacity = hc ? 0.88 : undefined
+        return { bg, text, border: undefined, pressedBg, pressedOpacity }
+      }
+      case 'soft': {
+        const bg = rc(`${prefix}-a3` as C)
+        const text = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-a11` as C)
+        const pressedBg = rc(`${prefix}-a5` as C)
+        return { bg, text, border: undefined, pressedBg }
+      }
+      case 'surface': {
+        const bg = rc(`${prefix}-surface` as C)
+        const text = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-a11` as C)
+        const border = rc(`${prefix}-a7` as C)
+        const pressedBg = rc(`${prefix}-a3` as C)
+        return { bg, text, border, pressedBg }
+      }
+      case 'outline': {
+        const text = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-a11` as C)
+        // Radix highContrast: double inset shadow with accent-a7 + gray-a11
+        const border = hc ? rc('gray-a11' as C) : rc(`${prefix}-a8` as C)
+        const pressedBg = hc ? rc(`${prefix}-a3` as C) : rc(`${prefix}-a2` as C)
+        return { bg: 'transparent', text, border, pressedBg }
+      }
+      case 'ghost': {
+        const text = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-a11` as C)
+        const pressedBg = rc(`${prefix}-a4` as C)
+        return { bg: 'transparent', text, border: undefined, pressedBg }
+      }
+    }
+  }, [variant, prefix, highContrast, isDisabled, loading, rc])
+
+  // ─── Font family ───────────────────────────────────────────────────────────
+  // Radix: only non-ghost uses font-weight: medium; ghost uses regular
+  const fontFamily = isGhost ? (fonts.regular) : (fonts.medium ?? fonts.regular)
+
+  // ─── Press handler ─────────────────────────────────────────────────────────
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (!isDisabled && onPress) onPress(e)
+    },
+    [isDisabled, onPress],
+  )
+
+  // ─── Variant flags ──────────────────────────────────────────────────────────
+  const isClassic = variant === 'classic'
+
+  // ─── Render ────────────────────────────────────────────────────────────────
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      style={({ pressed }) => {
+        const bg = pressed && !isDisabled ? colors.pressedBg : colors.bg
+        const opacity = (pressed && !isDisabled && colors.pressedOpacity != null)
+          ? colors.pressedOpacity
+          : (isDisabled && !loading ? 1 : undefined)
+
+        const containerStyle: ViewStyle = {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          alignSelf: 'flex-start',
+          overflow: 'hidden',
+          height: isGhost ? undefined : resolvedHeight,
+          paddingHorizontal: resolvedPaddingX,
+          paddingVertical: isGhost ? resolvedPaddingY : undefined,
+          gap: resolvedGap,
+          backgroundColor: bg,
+          borderRadius,
+          borderWidth: colors.border ? 1 : undefined,
+          borderColor: colors.border,
+          opacity,
+          // Margins
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m),
+        }
+
+        // Classic 3D effect (shadow + bevel)
+        const classicStyle = isClassic
+          ? getClassicEffect(appearance, { pressed, disabled: isDisabled && !loading })
+          : undefined
+
+        return [containerStyle, classicStyle, style] as StyleProp<ViewStyle>
+      }}
+      {...rest}
+    >
+      {/* Classic gradient simulation: light overlay on top, dark on bottom */}
+      {isClassic && !isDisabled && (
+        <>
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '50%',
+              backgroundColor: 'rgba(255,255,255,0.12)',
+            }}
+          />
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '50%',
+              backgroundColor: 'rgba(0,0,0,0.08)',
+            }}
+          />
+        </>
+      )}
+      {loading ? (
+        <View style={{ position: 'relative', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+          {/* Invisible children to maintain dimensions */}
+          <View style={{ opacity: 0, flexDirection: 'row', alignItems: 'center', gap: resolvedGap }}>
+            {renderContent(children, {
+              fontSize: resolvedFontSize,
+              lineHeight: resolvedLineHeight,
+              letterSpacing: resolvedLetterSpacing,
+              color: colors.text,
+              fontWeight: isGhost ? '400' : '500',
+              fontFamily,
+            })}
+          </View>
+          {/* Spinner overlay */}
+          <View style={{ position: 'absolute', alignItems: 'center', justifyContent: 'center' }}>
+            <ActivityIndicator size="small" color={colors.text} />
+          </View>
+        </View>
+      ) : (
+        renderContent(children, {
+          fontSize: resolvedFontSize,
+          lineHeight: resolvedLineHeight,
+          letterSpacing: resolvedLetterSpacing,
+          color: colors.text,
+          fontWeight: isGhost ? '400' : '500',
+          fontFamily,
+        })
+      )}
+    </Pressable>
+  )
+}
+Button.displayName = 'Button'
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function renderContent(children: React.ReactNode, textStyle: TextStyle): React.ReactNode {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return <RNText style={textStyle}>{children}</RNText>
+  }
+  return children
+}

package/src/components/actions/Checkbox.tsx

@@ -0,0 +1,216 @@
+import React, { useCallback, useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+import { Text as RNText } from 'react-native'
+import type {
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { resolveSpace } from '../../utils/resolveSpace'
+import { scalingMap } from '../../tokens/scaling'
+import { getRadius } from '../../tokens/radius'
+import type { MarginToken } from '../../tokens/spacing'
+import type { AccentColor } from '../../tokens/colors/types'
+import { getClassicEffect } from '../../utils/classicEffect'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type CheckboxSize = 1 | 2 | 3
+export type CheckboxVariant = 'classic' | 'surface' | 'soft'
+export type CheckedState = boolean | 'indeterminate'
+
+export interface CheckboxProps extends Omit<PressableProps, 'style' | 'children'> {
+  /** Checkbox size (1–3). Default: 2. */
+  size?: CheckboxSize
+  /** Visual variant. Default: 'surface'. */
+  variant?: CheckboxVariant
+  /** Accent color. Default: theme accent. */
+  color?: AccentColor
+  /** Increases color contrast with the background. */
+  highContrast?: boolean
+  /** Controlled checked state. */
+  checked?: CheckedState
+  /** Uncontrolled default checked state. */
+  defaultChecked?: CheckedState
+  /** Called when the checked state changes. */
+  onCheckedChange?: (checked: CheckedState) => void
+  /** Disables the checkbox. */
+  disabled?: boolean
+  // ─── Margin props ──────────────────────────────────────────────────────────
+  m?: MarginToken
+  mx?: MarginToken
+  my?: MarginToken
+  mt?: MarginToken
+  mr?: MarginToken
+  mb?: MarginToken
+  ml?: MarginToken
+  style?: StyleProp<ViewStyle>
+}
+
+// ─── Size mappings ────────────────────────────────────────────────────────────
+
+/** Checkbox size in px (space-4 = 16, scaled by 0.875 / 1 / 1.25) */
+const SIZE_PX: Record<CheckboxSize, number> = { 1: 14, 2: 16, 3: 20 }
+/** Indicator (check/dash) size in px */
+const INDICATOR_SIZE: Record<CheckboxSize, number> = { 1: 9, 2: 10, 3: 12 }
+/** Radius multiplier per size (relative to radius-level-1) */
+const RADIUS_MULT: Record<CheckboxSize, number> = { 1: 0.875, 2: 1, 3: 1.25 }
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function Checkbox({
+  size = 2,
+  variant = 'surface',
+  color,
+  highContrast,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  ...rest
+}: CheckboxProps) {
+  const { appearance, scaling, radius } = useThemeContext()
+  const rc = useResolveColor()
+
+  // ─── Controlled / uncontrolled ─────────────────────────────────────────────
+  const [internal, setInternal] = React.useState<CheckedState>(defaultChecked)
+  const isControlled = checkedProp !== undefined
+  const checkedState = isControlled ? checkedProp : internal
+  const isChecked = checkedState === true
+  const isIndeterminate = checkedState === 'indeterminate'
+  const isActive = isChecked || isIndeterminate
+
+  // ─── Space helper ──────────────────────────────────────────────────────────
+  const sp = (token: MarginToken | undefined): number | undefined =>
+    token !== undefined ? resolveSpace(token, scaling) : undefined
+
+  // ─── Dimensions ────────────────────────────────────────────────────────────
+  const scalingFactor = scalingMap[scaling]
+  const boxSize = Math.round(SIZE_PX[size] * scalingFactor)
+  const indicatorSize = Math.round(INDICATOR_SIZE[size] * scalingFactor)
+  const borderRadius = Math.round(getRadius(radius, 1) * RADIUS_MULT[size])
+
+  const prefix = color ?? 'accent'
+  type C = Parameters<typeof rc>[0]
+
+  // ─── Colors ────────────────────────────────────────────────────────────────
+  const colors = useMemo(() => {
+    if (disabled) {
+      const indicator = isActive ? rc('gray-a8' as C) : undefined
+      switch (variant) {
+        case 'classic':
+        case 'surface':
+          return {
+            bg: rc('gray-a3' as C),
+            border: rc('gray-a6' as C),
+            indicator,
+            showBorder: true,
+          }
+        case 'soft':
+          return {
+            bg: rc('gray-a3' as C),
+            border: undefined,
+            indicator,
+            showBorder: false,
+          }
+      }
+    }
+
+    const hc = highContrast
+
+    switch (variant) {
+      case 'classic':
+      case 'surface': {
+        if (isActive) {
+          const bg = hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-9` as C)
+          const indicator = hc ? rc(`${prefix}-1` as C) : rc(`${prefix}-contrast` as C)
+          return { bg, border: undefined, indicator, showBorder: false }
+        }
+        return {
+          bg: rc('gray-surface' as C),
+          border: rc('gray-a7' as C),
+          indicator: undefined,
+          showBorder: true,
+        }
+      }
+      case 'soft': {
+        const bg = rc(`${prefix}-a5` as C)
+        const indicator = isActive
+          ? (hc ? rc(`${prefix}-12` as C) : rc(`${prefix}-a11` as C))
+          : undefined
+        return { bg, border: undefined, indicator, showBorder: false }
+      }
+    }
+  }, [variant, prefix, highContrast, isActive, disabled, rc])
+
+  // ─── Toggle ────────────────────────────────────────────────────────────────
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    const next: CheckedState = isChecked ? false : true
+    if (!isControlled) setInternal(next)
+    onCheckedChange?.(next)
+  }, [disabled, isChecked, isControlled, onCheckedChange])
+
+  // ─── Classic effect ────────────────────────────────────────────────────────
+  const isClassic = variant === 'classic'
+  const classicStyle = isClassic
+    ? getClassicEffect(appearance, { disabled })
+    : undefined
+
+  // ─── Styles ────────────────────────────────────────────────────────────────
+  const boxStyle: ViewStyle = {
+    width: boxSize,
+    height: boxSize,
+    borderRadius,
+    backgroundColor: colors.bg,
+    borderWidth: colors.showBorder ? 1 : undefined,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m),
+  }
+
+  const indicatorStyle: TextStyle = {
+    fontSize: indicatorSize,
+    lineHeight: indicatorSize + 2,
+    color: colors.indicator,
+    fontWeight: '700',
+  }
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: isIndeterminate ? 'mixed' : isChecked,
+        disabled,
+      }}
+      style={[boxStyle, classicStyle, style]}
+      {...rest}
+    >
+      {/* Classic gradient simulation when checked — wrapped with overflow:hidden for borderRadius clipping */}
+      {isClassic && isActive && !disabled && (
+        <View pointerEvents="none" style={{ position: 'absolute', inset: 0, overflow: 'hidden', borderRadius }}>
+          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '50%', backgroundColor: 'rgba(255,255,255,0.12)' }} />
+          <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '50%', backgroundColor: 'rgba(0,0,0,0.08)' }} />
+        </View>
+      )}
+      {isActive && (
+        <RNText style={indicatorStyle}>
+          {isIndeterminate ? '\u2013' : '\u2713'}
+        </RNText>
+      )}
+    </Pressable>
+  )
+}
+Checkbox.displayName = 'Checkbox'