feat(release): prepare 1.1.0 candidate

apps/mobile-rn/src/theme/themed-components.tsx

@@ -0,0 +1,170 @@
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextProps,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { d3roNativeFonts, d3roNativeRadius, d3roNativeTypo, type D3roNativeTypoKey } from '@d3ro/ui-native'
+import { useMobilePreferences } from '../lib/preferences-context'
+
+type ThemeTextColor =
+  | 'primary'
+  | 'secondary'
+  | 'muted'
+  | 'accent'
+  | 'success'
+  | 'danger'
+  | 'onAccent'
+
+interface ThemeTextProps extends TextProps {
+  variant?: D3roNativeTypoKey
+  color?: ThemeTextColor
+  style?: StyleProp<TextStyle>
+}
+
+export function ThemeText({
+  variant = 'body',
+  color = 'primary',
+  style,
+  children,
+  ...textProps
+}: ThemeTextProps): React.ReactElement {
+  const { palette } = useMobilePreferences()
+  const resolvedColor: Record<ThemeTextColor, string> = {
+    primary: palette.text.primary,
+    secondary: palette.text.secondary,
+    muted: palette.text.muted,
+    accent: palette.accent.main,
+    success: palette.tag.green,
+    danger: palette.tag.red,
+    onAccent: palette.text.onAccent,
+  }
+
+  return (
+    <Text
+      {...textProps}
+      style={[
+        d3roNativeTypo[variant],
+        {
+          color: resolvedColor[color],
+          // v3: 시스템 산세리프 — 한글은 iOS Apple SD Gothic Neo /
+          // Android Noto Sans KR로 자동 폴백 (Menlo/monospace 폐기).
+          fontFamily: d3roNativeFonts.sans,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  )
+}
+
+interface ThemeCardProps extends ViewProps {
+  inset?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+export function ThemeCard({
+  inset = false,
+  style,
+  children,
+  ...viewProps
+}: ThemeCardProps): React.ReactElement {
+  const { palette } = useMobilePreferences()
+  return (
+    <View
+      {...viewProps}
+      style={[
+        {
+          backgroundColor: inset ? palette.bg.inset : palette.bg.card,
+          borderColor: palette.border.subtle,
+          borderWidth: inset ? 0 : 1,
+          // 카드 반경은 SSOT 토큰 사용
+          borderRadius: inset ? d3roNativeRadius.inner : d3roNativeRadius.card,
+          padding: inset ? 10 : 16,
+          shadowColor: palette.shadow,
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: inset ? 0 : 0.12,
+          shadowRadius: inset ? 0 : 8,
+          elevation: inset ? 0 : 2,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  )
+}
+
+interface ThemeButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  label: string
+  variant?: 'primary' | 'secondary' | 'danger' | 'quiet'
+  style?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+}
+
+export function ThemeButton({
+  label,
+  variant = 'primary',
+  disabled = false,
+  style,
+  textStyle,
+  ...pressableProps
+}: ThemeButtonProps): React.ReactElement {
+  const { palette } = useMobilePreferences()
+  const primary = variant === 'primary'
+  const danger = variant === 'danger'
+  const quiet = variant === 'quiet'
+  const backgroundColor = primary
+    ? palette.accent.main
+    : danger
+      ? palette.tag.red
+      : 'transparent'
+  const borderColor = quiet
+    ? 'transparent'
+    : primary
+      ? palette.accent.main
+      : danger
+        ? palette.tag.red
+        : palette.border.strong
+
+  return (
+    <Pressable
+      {...pressableProps}
+      accessibilityRole={pressableProps.accessibilityRole ?? 'button'}
+      disabled={disabled}
+      style={({ pressed }) => [
+        {
+          minHeight: 48,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingHorizontal: 18,
+          paddingVertical: 12,
+          borderRadius: d3roNativeRadius.button,
+          borderWidth: quiet ? 0 : 1,
+          borderColor,
+          backgroundColor: pressed && primary
+            ? palette.accent.pressed
+            : pressed && !primary
+              ? palette.bg.cardHover
+              : backgroundColor,
+          opacity: disabled ? 0.48 : 1,
+        },
+        style,
+      ]}
+    >
+      <ThemeText
+        variant="small"
+        color={primary || danger ? 'onAccent' : quiet ? 'muted' : 'primary'}
+        style={[{ textAlign: 'center' }, textStyle]}
+      >
+        {label}
+      </ThemeText>
+    </Pressable>
+  )
+}