radix-native 0.0.1

package/src/components/playground/ThemeControls.tsx

@@ -0,0 +1,456 @@
+import React, { useState } from 'react'
+import { Animated, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import { useThemeContext } from '../../hooks/useThemeContext'
+import { useResolveColor } from '../../hooks/useResolveColor'
+import { Text } from '../typography/Text'
+import { Heading } from '../typography/Heading'
+import { getRadius } from '../../tokens/radius'
+import type { AccentColor, GrayColor } from '../../tokens/colors/types'
+import type { RadiusToken } from '../../tokens/radius'
+import type { ScalingMode } from '../../tokens/scaling'
+import type { ThemeColor } from '../../theme/theme.types'
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const ACCENT_COLORS: AccentColor[] = [
+  'gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange',
+  'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet',
+  'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass',
+  'lime', 'mint', 'sky',
+]
+
+const GRAY_OPTIONS: (GrayColor | 'auto')[] = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand']
+const RADIUS_OPTIONS: RadiusToken[] = ['none', 'small', 'medium', 'large', 'full']
+const SCALING_OPTIONS: ScalingMode[] = ['90%', '95%', '100%', '105%', '110%']
+
+const PANEL_WIDTH = 280
+
+// ─── ThemeControls ────────────────────────────────────────────────────────────
+
+export interface ThemeControlsProps {
+  /** Show the "Copy Theme" button at the bottom */
+  showCopyTheme?: boolean
+  /** Callback when "Copy Theme" is pressed — receives the config string */
+  onCopyTheme?: (config: string) => void
+  /** Start with the panel open */
+  defaultOpen?: boolean
+}
+
+export function ThemeControls({ showCopyTheme, onCopyTheme, defaultOpen = false }: ThemeControlsProps = {}) {
+  const [open, setOpen] = useState(defaultOpen)
+  const slideAnim = React.useRef(new Animated.Value(defaultOpen ? 0 : PANEL_WIDTH + 20)).current
+  const { height: windowHeight } = useWindowDimensions()
+
+  const {
+    appearance,
+    accentColor,
+    grayColor,
+    resolvedGrayColor,
+    radius,
+    scaling,
+    onAppearanceChange,
+    onAccentColorChange,
+    onGrayColorChange,
+    onRadiusChange,
+    onScalingChange,
+  } = useThemeContext()
+
+  const rc = useResolveColor()
+
+  const toggle = () => {
+    const toValue = open ? PANEL_WIDTH + 20 : 0
+    Animated.spring(slideAnim, {
+      toValue,
+      useNativeDriver: true,
+      damping: 20,
+      stiffness: 200,
+    }).start()
+    setOpen(!open)
+  }
+
+  const handleCopyTheme = () => {
+    const config = `<Theme accentColor="${accentColor}" grayColor="${grayColor}" appearance="${appearance}" radius="${radius}" scaling="${scaling}">`
+    onCopyTheme?.(config)
+  }
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {/* "T" toggle button — always visible */}
+      <Pressable
+        onPress={toggle}
+        accessibilityRole="button"
+        accessibilityLabel="Toggle theme panel"
+        style={[
+          styles.toggleButton,
+          {
+            backgroundColor: rc('gray-2'),
+            borderColor: rc('gray-6'),
+          },
+        ]}
+      >
+        <Text size={2} weight="bold" style={{ color: rc('gray-12') }}>T</Text>
+      </Pressable>
+
+      {/* Sliding panel */}
+      <Animated.View
+        style={[
+          styles.panelWrapper,
+          { maxHeight: windowHeight - 120, transform: [{ translateX: slideAnim }] },
+        ]}
+      >
+        <ScrollView
+          style={[styles.panel, { backgroundColor: rc('gray-2'), borderColor: rc('gray-6') }]}
+          contentContainerStyle={styles.panelContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Header */}
+          <View style={styles.headerRow}>
+            <Heading size={5} style={{ color: rc('gray-12') }}>Theme</Heading>
+            <Pressable
+              onPress={toggle}
+              accessibilityRole="button"
+              accessibilityLabel="Close theme panel"
+              style={[styles.closeButton, { borderColor: rc('gray-6') }]}
+            >
+              <Text size={2} weight="bold" style={{ color: rc('gray-12') }}>T</Text>
+            </Pressable>
+          </View>
+
+          {/* ─── Accent color ─────────────────────────────────────── */}
+          <SectionLabel rc={rc}>Accent color</SectionLabel>
+          <View style={styles.dotGrid}>
+            {ACCENT_COLORS.map((c) => (
+              <ColorDot
+                key={c}
+                color={`${c}-9` as ThemeColor}
+                selected={accentColor === c}
+                onPress={() => onAccentColorChange(c)}
+                rc={rc}
+                label={c}
+              />
+            ))}
+          </View>
+
+          {/* ─── Gray color ───────────────────────────────────────── */}
+          <SectionLabel rc={rc}>Gray color</SectionLabel>
+          <View style={styles.dotGrid}>
+            {GRAY_OPTIONS.map((g) => {
+              const dotColor = g === 'auto'
+                ? `${resolvedGrayColor}-9` as ThemeColor
+                : `${g}-9` as ThemeColor
+              return (
+                <ColorDot
+                  key={g}
+                  color={dotColor}
+                  selected={grayColor === g}
+                  onPress={() => onGrayColorChange(g)}
+                  rc={rc}
+                  label={g}
+                />
+              )
+            })}
+          </View>
+
+          {/* ─── Appearance ───────────────────────────────────────── */}
+          <SectionLabel rc={rc}>Appearance</SectionLabel>
+          <View style={styles.segmentedRow}>
+            <SegmentedButton
+              label="Light"
+              icon={'\u2600\uFE0E'}
+              selected={appearance === 'light'}
+              onPress={() => onAppearanceChange('light')}
+              rc={rc}
+            />
+            <SegmentedButton
+              label="Dark"
+              icon={'\u263E'}
+              selected={appearance === 'dark'}
+              onPress={() => onAppearanceChange('dark')}
+              rc={rc}
+            />
+          </View>
+
+          {/* ─── Radius ───────────────────────────────────────────── */}
+          <SectionLabel rc={rc}>Radius</SectionLabel>
+          <View style={styles.radiusRow}>
+            {RADIUS_OPTIONS.map((r) => (
+              <RadiusPreview
+                key={r}
+                token={r}
+                selected={radius === r}
+                onPress={() => onRadiusChange(r)}
+                rc={rc}
+              />
+            ))}
+          </View>
+
+          {/* ─── Scaling ──────────────────────────────────────────── */}
+          <SectionLabel rc={rc}>Scaling</SectionLabel>
+          <View style={styles.chipRow}>
+            {SCALING_OPTIONS.map((s) => (
+              <Chip
+                key={s}
+                label={s}
+                selected={scaling === s}
+                onPress={() => onScalingChange(s)}
+                rc={rc}
+              />
+            ))}
+          </View>
+
+          {/* ─── Copy Theme ───────────────────────────────────────── */}
+          {showCopyTheme && (
+            <Pressable
+              style={[styles.copyButton, { backgroundColor: rc('accent-9') }]}
+              onPress={handleCopyTheme}
+            >
+              <Text size={2} weight="bold" style={{ color: rc('accent-contrast') }}>
+                Copy Theme
+              </Text>
+            </Pressable>
+          )}
+        </ScrollView>
+      </Animated.View>
+    </View>
+  )
+}
+ThemeControls.displayName = 'ThemeControls'
+
+// ─── Internal components ──────────────────────────────────────────────────────
+
+type RC = (color: ThemeColor) => string
+
+function SectionLabel({ children, rc }: { children: string; rc: RC }) {
+  return (
+    <Text size={2} weight="medium" style={{ color: rc('accent-11'), marginTop: 4 }}>
+      {children}
+    </Text>
+  )
+}
+
+function ColorDot({
+  color, selected, onPress, rc, label,
+}: { color: ThemeColor; selected: boolean; onPress: () => void; rc: RC; label: string }) {
+  const bg = rc(color)
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      style={[
+        styles.dotOuter,
+        selected && { borderColor: rc('gray-12') },
+      ]}
+    >
+      <View style={[styles.dotInner, { backgroundColor: bg }]} />
+    </Pressable>
+  )
+}
+
+function SegmentedButton({
+  label, icon, selected, onPress, rc,
+}: { label: string; icon: string; selected: boolean; onPress: () => void; rc: RC }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      style={[
+        styles.segmentedButton,
+        {
+          borderColor: selected ? rc('gray-12') : rc('gray-6'),
+          backgroundColor: selected ? rc('gray-3') : 'transparent',
+        },
+      ]}
+    >
+      <Text size={2} style={{ color: rc('gray-12') }}>{icon}</Text>
+      <Text size={2} weight="medium" style={{ color: rc('gray-12') }}>{label}</Text>
+    </Pressable>
+  )
+}
+
+function RadiusPreview({
+  token, selected, onPress, rc,
+}: { token: RadiusToken; selected: boolean; onPress: () => void; rc: RC }) {
+  const previewRadius = token === 'full'
+    ? 26
+    : getRadius(token, 5)
+
+  const label = token.charAt(0).toUpperCase() + token.slice(1)
+  const borderAccent = rc('accent-a8')
+
+  return (
+    <Pressable onPress={onPress} accessibilityRole="button" style={styles.radiusItem}>
+      <View
+        style={[
+          styles.radiusCard,
+          {
+            borderColor: selected ? rc('gray-12') : rc('gray-6'),
+            backgroundColor: selected ? rc('gray-3') : 'transparent',
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.radiusPreviewShape,
+            {
+              backgroundColor: rc('accent-4'),
+              borderTopLeftRadius: previewRadius,
+              borderTopWidth: 2,
+              borderLeftWidth: 2,
+              borderTopColor: borderAccent,
+              borderLeftColor: borderAccent,
+            },
+          ]}
+        />
+      </View>
+      <Text size={1} style={{ color: rc('gray-11'), textAlign: 'center' }}>{label}</Text>
+    </Pressable>
+  )
+}
+
+function Chip({
+  label, selected, onPress, rc,
+}: { label: string; selected: boolean; onPress: () => void; rc: RC }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      style={[
+        styles.chip,
+        {
+          borderColor: selected ? rc('gray-12') : rc('gray-6'),
+          backgroundColor: selected ? rc('gray-3') : 'transparent',
+        },
+      ]}
+    >
+      <Text
+        size={2}
+        weight={selected ? 'bold' : 'regular'}
+        style={{ color: rc('gray-12') }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 54,
+    right: 12,
+    zIndex: 1000,
+    alignItems: 'flex-end',
+  },
+  toggleButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  panelWrapper: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: PANEL_WIDTH,
+    marginTop: 44,
+  },
+  panel: {
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  panelContent: {
+    padding: 20,
+    rowGap: 10,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dotGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+  },
+  dotOuter: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dotInner: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
+  segmentedRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  segmentedButton: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  chipRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+  },
+  radiusRow: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  radiusItem: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 6,
+  },
+  radiusCard: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radiusPreviewShape: {
+    width: 32,
+    height: 32,
+  },
+  copyButton: {
+    marginTop: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/playground/index.ts

@@ -0,0 +1 @@
+export { ThemeControls, type ThemeControlsProps } from './ThemeControls'

package/src/components/typography/Blockquote.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { 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 as fontSizeMap, lineHeight, letterSpacingEm } from '../../tokens/typography'
+import { scalingMap } from '../../tokens/scaling'
+import { space } from '../../tokens/spacing'
+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 interface BlockquoteProps {
+  /** Text size token (1–9). Default: 3 (16px). */
+  size?: FontSizeToken
+  /** Font weight. Default: 'regular'. */
+  weight?: TextWeight
+  /** Text color. When not set: uses gray-12. */
+  color?: AccentColor
+  /** Increases color contrast when `color` is set (a11 → 12). */
+  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<ViewStyle>
+  children?: React.ReactNode
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const FONT_WEIGHT: Record<TextWeight, NonNullable<TextStyle['fontWeight']>> = {
+  light:   '300',
+  regular: '400',
+  medium:  '500',
+  bold:    '700',
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function Blockquote({
+  size = 3,
+  weight = 'regular',
+  color,
+  highContrast,
+  truncate,
+  wrap,
+  m, mx, my, mt, mr, mb, ml,
+  style,
+  children,
+}: BlockquoteProps) {
+  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(fontSizeMap[size] * scalingFactor)
+  const resolvedLineHeight  = Math.round(lineHeight[size] * scalingFactor)
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize
+
+  // ─── Color ──────────────────────────────────────────────────────────────────
+  // Radix scopes --accent-a6 per-component via data-accent-color.
+  // In RN we resolve the border color from the explicit color prop (or accent fallback).
+  const borderColor = rc(color ? `${color}-a6` : 'accent-a6')
+  const textColor = color
+    ? rc(highContrast ? `${color}-12` : `${color}-a11`)
+    : rc('gray-12')
+
+  // ─── Font family ─────────────────────────────────────────────────────────────
+  const fontFamily = fonts[weight] ?? fonts.regular
+
+  // ─── Wrapping / truncation ──────────────────────────────────────────────────
+  const numberOfLines = truncate ? 1 : wrap === 'nowrap' ? 1 : undefined
+  const ellipsizeMode = truncate ? 'tail' : wrap === 'nowrap' ? 'clip' : undefined
+
+  // ─── Border & padding (match Radix CSS: dynamic based on font size) ────────
+  // Space tokens are scaled in Radix: --space-N: calc(Npx * var(--scaling))
+  const s1 = space[1] * scalingFactor
+  const s3 = space[3] * scalingFactor
+  const s5 = space[5] * scalingFactor
+  // Radix: border-left: max(var(--space-1), 0.25em) solid var(--accent-a6)
+  const borderWidth = Math.max(s1, resolvedSize * 0.25)
+  // Radix: padding-left: min(var(--space-5), max(var(--space-3), 0.5em))
+  const paddingLeft = Math.min(s5, Math.max(s3, resolvedSize * 0.5))
+
+  // ─── Styles ─────────────────────────────────────────────────────────────────
+  const containerStyle: ViewStyle = {
+    borderLeftWidth: borderWidth,
+    borderLeftColor: borderColor,
+    paddingLeft,
+    // 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),
+  }
+
+  const textStyle: TextStyle = {
+    fontSize:      resolvedSize,
+    lineHeight:    resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    fontWeight:    FONT_WEIGHT[weight],
+    fontFamily,
+    color:         textColor,
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      <RNText
+        numberOfLines={numberOfLines}
+        ellipsizeMode={ellipsizeMode}
+        style={textStyle}
+      >
+        {children}
+      </RNText>
+    </View>
+  )
+}
+Blockquote.displayName = 'Blockquote'