@ezpg/app-ui 0.2.0 → 0.3.0

package/src/blocks/claim-row/claim-row.tsx

@@ -112,7 +112,7 @@ export function ClaimRow({
           {deadline ? (
             <Text
               weight="bold"
-              tone={days !== null && days <= 1 ? 'destructive' : 'muted'}
+              tone={days !== null && days <= 1 ? 'danger' : 'muted'}
               style={s.deadline}
             >
               {deadline}

package/src/blocks/copy-variant-picker/copy-variant-picker.tsx

@@ -80,7 +80,7 @@ export function CopyVariantPicker({
       <Text weight="semibold">{label}</Text>
       {conflict ? (
         <View style={s.conflict} accessibilityLiveRegion="polite">
-          <Text tone="destructive">다른 기기에서 먼저 수정했어요.</Text>
+          <Text tone="danger">다른 기기에서 먼저 수정했어요.</Text>
           {onReload ? (
             <Button
               size="sm"

package/src/blocks/generation-progress/generation-progress.tsx

@@ -106,8 +106,8 @@ export function GenerationProgress({
           <View style={s.dot}>
             <AlertGlyph
               filled
-              color={t.colors.destructive}
-              onColor={t.colors.destructiveForeground}
+              color={t.colors.danger}
+              onColor={t.colors.dangerForeground}
               size={DOT}
             />
           </View>
@@ -143,7 +143,7 @@ export function GenerationProgress({
                 style={s.label}
                 tone={
                   state === 'failed'
-                    ? 'destructive'
+                    ? 'danger'
                     : state === 'pending'
                       ? 'muted'
                       : 'default'
@@ -161,7 +161,7 @@ export function GenerationProgress({
         })}
       </View>
       {status === 'failed' && errorText ? (
-        <Text tone="destructive" accessibilityLiveRegion="polite">
+        <Text tone="danger" accessibilityLiveRegion="polite">
           {errorText}
         </Text>
       ) : null}

package/src/blocks/image-grid/image-grid.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles((t) => ({
   },
   dim: { backgroundColor: `${t.colors.background}B3` },
   light: { gap: 2, backgroundColor: `${t.colors.background}D9` },
-  failed: { fontSize: 12, lineHeight: 16, color: t.colors.destructive },
+  failed: { fontSize: 12, lineHeight: 16, color: t.colors.danger },
   cover: {
     position: 'absolute',
     left: 0,
@@ -248,7 +248,7 @@ export function ImageGrid({
                     onPress={() => onRetry?.(item.id)}
                     style={[s.fill, s.light]}
                   >
-                    <RetryGlyph color={t.colors.destructive} size={22} />
+                    <RetryGlyph color={t.colors.danger} size={22} />
                     <Text weight="bold" style={s.failed}>
                       실패
                     </Text>

package/src/blocks/invoice-row/invoice-row.tsx

@@ -74,11 +74,11 @@ export function InvoiceRow({
       <View style={s.row}>
         <AlertGlyph
           filled
-          color={t.colors.destructive}
-          onColor={t.colors.destructiveForeground}
+          color={t.colors.danger}
+          onColor={t.colors.dangerForeground}
           size={t.iconSize.md}
         />
-        <Text weight="bold" tone="destructive" style={[s.head, s.grow]}>
+        <Text weight="bold" tone="danger" style={[s.head, s.grow]}>
           결제 실패
         </Text>
         <Text weight="bold" style={s.head}>

package/src/blocks/order-card/order-card.tsx

@@ -128,7 +128,7 @@ export function OrderCard({
         </Text>
       </View>
       {deadline ? (
-        <Text weight="bold" tone="destructive" style={s.deadline}>
+        <Text weight="bold" tone="danger" style={s.deadline}>
           {deadline}
         </Text>
       ) : null}

package/src/blocks/plan-card/plan-card.tsx

@@ -112,7 +112,7 @@ export function PlanCard({
       </View>
       {alert ? (
         <Text
-          tone={notice ? 'muted' : 'destructive'}
+          tone={notice ? 'muted' : 'danger'}
           weight={notice ? 'semibold' : undefined}
         >
           {alert}

package/src/blocks/sales-chart/sales-chart.tsx

@@ -92,7 +92,7 @@ export function SalesChart({
                 {rate !== null ? (
                   <Text
                     weight="bold"
-                    tone={up ? 'destructive' : 'default'}
+                    tone={up ? 'danger' : 'default'}
                     style={!up && s.down}
                     accessibilityLabel={`직전 기간보다 ${Math.abs(rate).toFixed(1)}% ${up ? '증가' : '감소'}`}
                   >

package/src/blocks/service-state-banner/service-state-banner.tsx

@@ -49,7 +49,7 @@ export function ServiceStateBanner({
   const severe =
     state === 'suspended' || state === 'closed' || state === 'stopped';
   const [bg, fg] = severe
-    ? [t.colors.destructive, t.colors.destructiveForeground]
+    ? [t.colors.danger, t.colors.dangerForeground]
     : [t.colors.warning, t.colors.warningForeground];
   return (
     <View

package/src/blocks/stat-card/stat-card.tsx

@@ -57,7 +57,7 @@ export function StatCard({
             {hasChange ? (
               <Text
                 weight="bold"
-                tone={flat ? 'muted' : up ? 'destructive' : 'default'}
+                tone={flat ? 'muted' : up ? 'danger' : 'default'}
                 style={!flat && !up && s.down}
               >
                 {flat ? '변동 없음' : `${up ? '▲' : '▼'} ${rate}`}

package/src/components/button/button.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type ButtonVariant =
-  'solid' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+  'solid' | 'secondary' | 'outline' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export type ButtonProps = Omit<
@@ -53,7 +53,7 @@ const useStyles = makeStyles((t) => ({
     borderColor: t.colors.input,
   },
   ghost: { backgroundColor: 'transparent' },
-  destructive: { backgroundColor: t.colors.destructive },
+  danger: { backgroundColor: t.colors.danger },
   label: { fontFamily: t.fontFamily, fontWeight: '600' },
   smLabel: { fontSize: 14, lineHeight: 20 },
   mdLabel: {
@@ -82,7 +82,7 @@ export function Button({
     secondary: t.colors.foreground,
     outline: t.colors.foreground,
     ghost: t.colors.foreground,
-    destructive: t.colors.destructiveForeground,
+    danger: t.colors.dangerForeground,
   }[variant];
   const icon = { color, size: size === 'sm' ? t.iconSize.sm : t.iconSize.md };
 

package/src/components/dialog/dialog.tsx

@@ -12,7 +12,7 @@ export type DialogProps = {
   onConfirm: () => void;
   confirmLabel?: string;
   cancelLabel?: string;
-  destructive?: boolean;
+  danger?: boolean;
   loading?: boolean;
   dismissible?: boolean;
 };
@@ -50,7 +50,7 @@ export function Dialog({
   onConfirm,
   confirmLabel = '확인',
   cancelLabel = '취소',
-  destructive = false,
+  danger = false,
   loading = false,
   dismissible = true,
 }: DialogProps) {
@@ -108,7 +108,7 @@ export function Dialog({
               {cancelLabel}
             </Button>
             <Button
-              variant={destructive ? 'destructive' : 'solid'}
+              variant={danger ? 'danger' : 'solid'}
               style={s.action}
               loading={loading}
               onPress={onConfirm}

package/src/components/field/field.tsx

@@ -51,7 +51,7 @@ const useStyles = makeStyles((t) => ({
   invalid: {
     borderWidth: 2,
     paddingHorizontal: t.space[4] - 1,
-    borderColor: t.colors.destructive,
+    borderColor: t.colors.danger,
   },
   disabled: { opacity: t.opacity.disabled, backgroundColor: t.colors.muted },
   input: {
@@ -67,9 +67,9 @@ const useStyles = makeStyles((t) => ({
     fontSize: 13,
     lineHeight: 18,
     paddingLeft: t.space[1],
-    color: t.colors.destructive,
+    color: t.colors.danger,
   },
-  errorLabel: { color: t.colors.destructive },
+  errorLabel: { color: t.colors.danger },
   warned: {
     borderWidth: 2,
     paddingHorizontal: t.space[4] - 1,
@@ -159,8 +159,8 @@ export function Field({
         {error ? (
           <AlertGlyph
             filled
-            color={t.colors.destructive}
-            onColor={t.colors.destructiveForeground}
+            color={t.colors.danger}
+            onColor={t.colors.dangerForeground}
             size={t.iconSize.md}
           />
         ) : trailing ? (

package/src/components/price/price.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles((t) => ({
     ...t.typography.caption,
     fontFamily: t.fontFamily,
     fontWeight: '700',
-    color: t.colors.destructive,
+    color: t.colors.danger,
   },
 }));
 

package/src/components/status-badge/status-badge.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type StatusBadgeTone =
-  'neutral' | 'info' | 'success' | 'warning' | 'destructive';
+  'neutral' | 'info' | 'success' | 'warning' | 'danger';
 
 export type StatusBadgeProps = {
   tone?: StatusBadgeTone;
@@ -37,7 +37,7 @@ export function StatusBadge({
     info: [t.colors.info, t.colors.infoForeground],
     success: [t.colors.success, t.colors.successForeground],
     warning: [t.colors.warning, t.colors.warningForeground],
-    destructive: [t.colors.destructive, t.colors.destructiveForeground],
+    danger: [t.colors.danger, t.colors.dangerForeground],
   }[tone];
   return (
     <View style={[s.base, { backgroundColor: bg }, style]}>

package/src/components/text/text.tsx

@@ -4,7 +4,7 @@ import type { TypographyVariant } from '../../types';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type TextTone = 'default' | 'muted' | 'destructive' | 'success';
+export type TextTone = 'default' | 'muted' | 'danger' | 'success';
 
 export type TextProps = RNTextProps & {
   ref?: Ref<ComponentRef<typeof RNText>>;
@@ -23,7 +23,7 @@ const useStyles = makeStyles((t) => ({
   display: t.typography.display,
   default: { color: t.colors.foreground },
   muted: { color: t.colors.mutedForeground },
-  destructive: { color: t.colors.destructive },
+  danger: { color: t.colors.danger },
   success: { color: t.colors.success },
   font: { fontFamily: t.fontFamily },
   regular: { fontWeight: '400' },

package/src/components/toast/toast.tsx

@@ -21,7 +21,7 @@ import { useReducedMotion } from '../../internal/use-reduced-motion';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type ToastTone = 'neutral' | 'success' | 'destructive';
+export type ToastTone = 'neutral' | 'success' | 'danger';
 
 export type ToastOptions = {
   message: string;
@@ -183,7 +183,7 @@ function ToastHostInner({ store }: { store: ToastStore }) {
   const [bg, fg] = {
     neutral: [t.colors.foreground, t.colors.background],
     success: [t.colors.success, t.colors.successForeground],
-    destructive: [t.colors.destructive, t.colors.destructiveForeground],
+    danger: [t.colors.danger, t.colors.dangerForeground],
   }[current.tone];
   const actionColor =
     current.tone !== 'neutral'

package/src/theme/base.ts

@@ -0,0 +1,113 @@
+export const semantic = {
+  light: {
+    background: '#ffffff',
+    foreground: '#0a0a0a',
+    muted: '#f5f5f5',
+    mutedForeground: '#737373',
+    border: '#e5e5e5',
+    input: '#d4d4d4',
+    ring: '#a3a3a3',
+    primary: '#171717',
+    primaryForeground: '#fafafa',
+    danger: '#dc2626',
+    dangerForeground: '#ffffff',
+    success: '#15803d',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#0a0a0a',
+    info: '#2563eb',
+    infoForeground: '#ffffff',
+  },
+  dark: {
+    background: '#0a0a0a',
+    foreground: '#fafafa',
+    muted: '#262626',
+    mutedForeground: '#a3a3a3',
+    border: '#262626',
+    input: '#404040',
+    ring: '#737373',
+    primary: '#fafafa',
+    primaryForeground: '#171717',
+    danger: '#f87171',
+    dangerForeground: '#0a0a0a',
+    success: '#4ade80',
+    successForeground: '#0a0a0a',
+    warning: '#fbbf24',
+    warningForeground: '#0a0a0a',
+    info: '#60a5fa',
+    infoForeground: '#0a0a0a',
+  },
+} as const;
+
+export const space = {
+  '0': 0,
+  '1': 4,
+  '2': 8,
+  '3': 12,
+  '4': 16,
+  '5': 20,
+  '6': 24,
+  '8': 32,
+  '10': 40,
+  '12': 48,
+  '16': 64,
+} as const;
+
+export const radius = {
+  sm: 6,
+  md: 8,
+  lg: 12,
+  full: 9999,
+} as const;
+
+export const typography = {
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '400',
+  },
+  bodyLg: {
+    fontSize: 17,
+    lineHeight: 24,
+    fontWeight: '400',
+  },
+  title: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: '600',
+  },
+  display: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: '700',
+  },
+} as const;
+
+export const shadow = {
+  sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
+  md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
+} as const;
+
+export const motion = {
+  duration: 200,
+} as const;
+
+export const opacity = {
+  pressed: 0.8,
+  disabled: 0.5,
+} as const;
+
+export const iconSize = {
+  sm: 16,
+  md: 20,
+} as const;
+
+export const touch = {
+  ios: 44,
+  android: 48,
+} as const;

package/src/theme/tokens.ts

@@ -1,90 +1,28 @@
 import { Platform } from 'react-native';
 import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
+import {
+  iconSize,
+  motion,
+  opacity,
+  radius,
+  semantic,
+  shadow,
+  space,
+  touch,
+  typography,
+} from './base';
 
-const neutral = {
-  50: '#fafafa',
-  100: '#f5f5f5',
-  200: '#e5e5e5',
-  300: '#d4d4d4',
-  400: '#a3a3a3',
-  500: '#737373',
-  700: '#404040',
-  800: '#262626',
-  900: '#171717',
-  950: '#0a0a0a',
-};
-
-export const colors: Record<ColorScheme, ThemeColors> = {
-  light: {
-    background: '#ffffff',
-    foreground: neutral[950],
-    muted: neutral[100],
-    mutedForeground: neutral[500],
-    border: neutral[200],
-    input: neutral[300],
-    ring: neutral[400],
-    primary: neutral[900],
-    primaryForeground: neutral[50],
-    destructive: '#dc2626',
-    destructiveForeground: '#ffffff',
-    success: '#15803d',
-    successForeground: '#ffffff',
-    warning: '#f59e0b',
-    warningForeground: neutral[950],
-    info: '#2563eb',
-    infoForeground: '#ffffff',
-  },
-  dark: {
-    background: neutral[950],
-    foreground: neutral[50],
-    muted: neutral[800],
-    mutedForeground: neutral[400],
-    border: neutral[800],
-    input: neutral[700],
-    ring: neutral[500],
-    primary: neutral[50],
-    primaryForeground: neutral[900],
-    destructive: '#f87171',
-    destructiveForeground: neutral[950],
-    success: '#4ade80',
-    successForeground: neutral[950],
-    warning: '#fbbf24',
-    warningForeground: neutral[950],
-    info: '#60a5fa',
-    infoForeground: neutral[950],
-  },
-};
+export const colors: Record<ColorScheme, ThemeColors> = semantic;
 
 export const tokens: ThemeTokens = {
-  space: {
-    0: 0,
-    1: 4,
-    2: 8,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    8: 32,
-    10: 40,
-    12: 48,
-    16: 64,
-  },
-  radius: { sm: 6, md: 8, lg: 12, full: 9999 },
-  typography: {
-    caption: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
-    body: { fontSize: 15, lineHeight: 22, fontWeight: '400' },
-    bodyLg: { fontSize: 17, lineHeight: 24, fontWeight: '400' },
-    title: { fontSize: 20, lineHeight: 28, fontWeight: '600' },
-    display: { fontSize: 28, lineHeight: 34, fontWeight: '700' },
-  },
+  space,
+  radius,
+  typography,
   fontFamily: undefined,
   maxFontScale: 1.3,
-  shadow: {
-    sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
-    md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
-  },
-  motion: { duration: 200 },
-  opacity: { pressed: 0.8, disabled: 0.5 },
-  iconSize: { sm: 16, md: 20 },
-  minTouchSize: Platform.OS === 'ios' ? 44 : 48,
+  shadow,
+  motion,
+  opacity,
+  iconSize,
+  minTouchSize: Platform.OS === 'ios' ? touch.ios : touch.android,
 };

package/src/types/index.ts

@@ -12,8 +12,8 @@ export type ThemeColors = {
   ring: string;
   primary: string;
   primaryForeground: string;
-  destructive: string;
-  destructiveForeground: string;
+  danger: string;
+  dangerForeground: string;
   success: string;
   successForeground: string;
   warning: string;