@ezpg/app-ui 0.1.0 → 0.3.0

package/src/components/field/field.tsx

@@ -15,11 +15,11 @@ import { makeStyles } from '../../utils/styles';
 export type FieldProps = Omit<TextInputProps, 'style'> & {
   ref?: Ref<ComponentRef<typeof TextInput>>;
   label?: string;
-  /** 있으면 오류 상태로 표시하고 입력칸 아래에 보여준다 */
   error?: string;
+  hint?: string;
+  warning?: string;
   leading?: IconSlot;
   trailing?: IconSlot;
-  /** 바깥 컨테이너 스타일 */
   style?: StyleProp<ViewStyle>;
 };
 
@@ -43,7 +43,6 @@ const useStyles = makeStyles((t) => ({
     borderColor: t.colors.input,
     backgroundColor: t.colors.background,
   },
-  // 테두리가 두꺼워져도 글자가 밀리지 않게 padding을 줄인다
   focused: {
     borderWidth: 2,
     paddingHorizontal: t.space[4] - 1,
@@ -52,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: {
@@ -68,14 +67,42 @@ const useStyles = makeStyles((t) => ({
     fontSize: 13,
     lineHeight: 18,
     paddingLeft: t.space[1],
-    color: t.colors.destructive,
+    color: t.colors.danger,
+  },
+  errorLabel: { color: t.colors.danger },
+  warned: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.warning,
+  },
+  noteRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[1],
+    paddingLeft: t.space[1],
+  },
+  grow: { flex: 1, paddingLeft: 0 },
+  hint: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.mutedForeground,
+  },
+  warning: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.foreground,
   },
-  errorLabel: { color: t.colors.destructive },
 }));
 
 export function Field({
   label,
   error,
+  hint,
+  warning,
   leading,
   trailing,
   style,
@@ -88,6 +115,8 @@ export function Field({
   const s = useStyles();
   const [focused, setFocused] = useState(false);
   const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+  const warn = error ? undefined : warning;
+  const note = error ?? warn ?? hint;
 
   return (
     <View style={[s.root, style]}>
@@ -104,6 +133,7 @@ export function Field({
           s.frame,
           focused && s.focused,
           !!error && s.invalid,
+          !!warn && s.warned,
           !editable && s.disabled,
         ]}
       >
@@ -113,7 +143,7 @@ export function Field({
           selectionColor={t.colors.ring}
           maxFontSizeMultiplier={t.maxFontScale}
           accessibilityLabel={label}
-          accessibilityHint={error}
+          accessibilityHint={note}
           {...input}
           editable={editable}
           style={s.input}
@@ -129,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 ? (
@@ -145,6 +175,26 @@ export function Field({
         >
           {error}
         </Text>
+      ) : warn ? (
+        <View style={s.noteRow}>
+          <AlertGlyph
+            filled
+            color={t.colors.warning}
+            onColor={t.colors.warningForeground}
+            size={t.iconSize.sm}
+          />
+          <Text
+            maxFontSizeMultiplier={t.maxFontScale}
+            accessibilityLiveRegion="polite"
+            style={[s.warning, s.grow]}
+          >
+            {warn}
+          </Text>
+        </View>
+      ) : hint ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.hint}>
+          {hint}
+        </Text>
       ) : null}
     </View>
   );

package/src/components/list-row/list-row.tsx

@@ -15,11 +15,8 @@ export type ListRowProps = Omit<
   title: string;
   description?: string;
   leading?: IconSlot;
-  /** 오른쪽 내용 (Switch, StatusBadge, 값 텍스트 등) */
   trailing?: IconSlot;
-  /** 오른쪽 화살표. 기본은 onPress가 있을 때 true */
   chevron?: boolean;
-  /** 제목 줄 수. 기본 1 */
   titleLines?: number;
 };
 

package/src/components/photo/photo.tsx

@@ -12,11 +12,8 @@ import { useTheme } from '../../theme/theme-provider';
 
 export type PhotoProps = Omit<ImageProps, 'source' | 'style'> & {
   source: ImageSourcePropType;
-  /** 가로 / 세로. 기본 1 */
   aspectRatio?: number;
-  /** 기본 radius.md */
   radius?: number;
-  /** 불러오지 못했을 때 보여줄 내용 */
   fallback?: ReactNode;
   style?: StyleProp<ViewStyle>;
 };
@@ -27,9 +24,7 @@ function sourceKey(source: ImageSourcePropType): string {
   return (source as { uri?: string }).uri ?? '';
 }
 
-/** 로딩 중에는 muted 배경, 실패하면 fallback을 보여주는 이미지 */
 export function Photo(props: PhotoProps) {
-  // 주소가 바뀌면 로딩 · 실패 상태를 처음부터 다시 잡는다.
   return <PhotoInner key={sourceKey(props.source)} {...props} />;
 }
 

package/src/components/price/price.tsx

@@ -3,7 +3,6 @@ import type { TypographyVariant } from '../../types';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-/** 12000 → '12,000원'. 웹 · Jest · 네이티브에서 같은 결과를 내도록 Intl을 쓰지 않는다 */
 export function formatPrice(value: number, unit = '원'): string {
   const n = Math.round(value);
   const digits = String(Math.abs(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
@@ -12,9 +11,7 @@ export function formatPrice(value: number, unit = '원'): string {
 
 export type PriceProps = {
   value: number;
-  /** 할인 전 가격. value보다 클 때만 취소선으로 표시한다 */
   originalValue?: number;
-  /** 기본 'body' */
   variant?: TypographyVariant;
   unit?: string;
   style?: StyleProp<ViewStyle>;
@@ -37,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/progress-bar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './progress-bar';

package/src/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,80 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ProgressBarProps = {
+  done: number;
+  total: number;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: t.space[2],
+  },
+  label: {
+    ...t.typography.body,
+    flex: 1,
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+    color: t.colors.foreground,
+  },
+  count: {
+    ...t.typography.body,
+    marginLeft: 'auto',
+    fontFamily: t.fontFamily,
+    fontVariant: ['tabular-nums'],
+    color: t.colors.mutedForeground,
+  },
+  strong: { fontWeight: '700', color: t.colors.foreground },
+  track: {
+    height: 6,
+    borderRadius: t.radius.full,
+    overflow: 'hidden',
+    backgroundColor: t.colors.muted,
+  },
+  fill: {
+    height: '100%',
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.primary,
+  },
+}));
+
+export function ProgressBar({ done, total, label, style }: ProgressBarProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const max = Math.max(0, total);
+  const now = Math.min(Math.max(0, done), max);
+  const ratio = max > 0 ? now / max : 0;
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`${label ? `${label}, ` : ''}${max}건 중 ${now}건`}
+      accessibilityValue={{ min: 0, max, now }}
+      style={[s.root, style]}
+    >
+      <View style={s.head}>
+        {label ? (
+          <Text
+            numberOfLines={2}
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={s.label}
+          >
+            {label}
+          </Text>
+        ) : null}
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.count}>
+          <Text style={s.strong}>{now}</Text>/{max}
+        </Text>
+      </View>
+      <View style={s.track}>
+        <View style={[s.fill, { width: `${ratio * 100}%` }]} />
+      </View>
+    </View>
+  );
+}

package/src/components/search-field/search-field.tsx

@@ -9,7 +9,6 @@ export type SearchFieldProps = Omit<
 > & {
   value: string;
   onChangeText: (text: string) => void;
-  /** 지우기 버튼의 접근성 라벨. 기본 '검색어 지우기' */
   clearLabel?: string;
 };
 

package/src/components/segmented-tabs/segmented-tabs.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from '../../utils/styles';
 export type SegmentedTabsItem<T extends string> = { value: T; label: string };
 
 export type SegmentedTabsProps<T extends string> = {
-  /** 2~4개 */
   items: readonly SegmentedTabsItem<T>[];
   value: T;
   onValueChange: (value: T) => void;

package/src/components/sheet/sheet.tsx

@@ -18,11 +18,8 @@ export type SheetProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title?: string;
-  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
   bottomInset?: number;
-  /** false면 배경을 눌러도 닫히지 않는다. 기본 true */
   dismissible?: boolean;
-  /** 배경 닫기 버튼의 접근성 라벨. 기본 '닫기' */
   closeLabel?: string;
   children: ReactNode;
   style?: StyleProp<ViewStyle>;

package/src/components/skeleton/skeleton.tsx

@@ -10,16 +10,12 @@ import { useReducedMotion } from '../../internal/use-reduced-motion';
 import { useTheme } from '../../theme/theme-provider';
 
 export type SkeletonProps = {
-  /** 기본 '100%' */
   width?: DimensionValue;
-  /** 기본 16 */
   height?: DimensionValue;
-  /** 기본 radius.sm */
   radius?: number;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 불러오는 중인 자리. '동작 줄이기'가 켜져 있으면 깜빡이지 않는다 */
 export function Skeleton({
   width = '100%',
   height = 16,

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

@@ -3,10 +3,9 @@ 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 = {
-  /** 기본 'neutral' */
   tone?: StatusBadgeTone;
   children: string;
   style?: StyleProp<ViewStyle>;
@@ -38,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/switch/switch.tsx

@@ -13,11 +13,13 @@ export type SwitchProps = Omit<RNSwitchProps, 'value' | 'onValueChange'> & {
 
 export function Switch({ disabled, style, ...rest }: SwitchProps) {
   const t = useTheme();
+  const offThumb =
+    t.scheme === 'dark' ? t.colors.mutedForeground : t.colors.background;
   return (
     <RNSwitch
-      trackColor={{ false: t.colors.border, true: t.colors.primary }}
-      thumbColor={t.colors.background}
-      ios_backgroundColor={t.colors.border}
+      trackColor={{ false: t.colors.input, true: t.colors.primary }}
+      thumbColor={rest.value ? t.colors.primaryForeground : offThumb}
+      ios_backgroundColor={t.colors.input}
       {...rest}
       disabled={disabled}
       style={[disabled && { opacity: t.opacity.disabled }, style]}

package/src/components/text/text.tsx

@@ -4,15 +4,12 @@ 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>>;
-  /** 기본 'body' */
   variant?: TypographyVariant;
-  /** 기본 'default' */
   tone?: TextTone;
-  /** 지정하지 않으면 variant의 굵기 */
   weight?: TextWeight;
 };
 
@@ -26,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,15 +21,12 @@ 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;
-  /** 기본 'neutral' */
   tone?: ToastTone;
-  /** ms. 기본 2500, action이 있으면 4000 */
   duration?: number;
-  /** 메시지 오른쪽 텍스트 버튼 (예: 실행 취소). 누르면 Toast가 닫힌다 */
   action?: ToastAction;
 };
 
@@ -42,7 +39,6 @@ type Current = {
   action?: ToastAction;
 };
 
-/** Provider 하나가 가진 상태. show를 불러도 Provider 아래 화면은 다시 렌더링되지 않는다. */
 function createToastStore() {
   let current: Current | null = null;
   let timer: ReturnType<typeof setTimeout> | undefined;
@@ -66,7 +62,6 @@ function createToastStore() {
       };
     },
     getCurrent: () => current,
-    /** 가장 나중에 붙은 host(가장 위의 Modal)만 그린다 */
     getTopHost: () => hosts[hosts.length - 1],
     addHost(id: string) {
       hosts = [...hosts, id];
@@ -93,7 +88,6 @@ type ToastStore = ReturnType<typeof createToastStore>;
 const StoreContext = createContext<ToastStore | null>(null);
 
 export type ToastProviderProps = {
-  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
   bottomInset?: number;
   children: ReactNode;
 };
@@ -152,10 +146,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/**
- * Toast를 그리는 자리. Provider가 하나 두고, Modal을 쓰는 컴포넌트(Sheet · Dialog)가
- * Modal 안에 하나씩 더 둔다. 가장 위의 host만 그린다.
- */
 export function ToastHost() {
   const store = useContext(StoreContext);
   return store ? <ToastHostInner store={store} /> : null;
@@ -193,9 +183,8 @@ 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];
-  // 어두운 바탕(light) 위에서는 밝은 파랑, 밝은 바탕(dark) 위에서는 진한 파랑
   const actionColor =
     current.tone !== 'neutral'
       ? fg

package/src/components/wizard-steps/wizard-steps.tsx

@@ -3,9 +3,7 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type WizardStepsProps = {
-  /** 단계 이름 */
   steps: readonly string[];
-  /** 지금 단계 (0부터) */
   current: number;
   style?: StyleProp<ViewStyle>;
 };
@@ -28,7 +26,6 @@ const useStyles = makeStyles((t) => ({
   name: { color: t.colors.foreground, fontWeight: '600' },
 }));
 
-/** 여러 단계로 나뉜 입력 흐름의 진행 표시 */
 export function WizardSteps({ steps, current, style }: WizardStepsProps) {
   const t = useTheme();
   const s = useStyles();

package/src/index.tsx

@@ -32,6 +32,7 @@ export * from './components/field';
 export * from './components/list-row';
 export * from './components/photo';
 export * from './components/price';
+export * from './components/progress-bar';
 export * from './components/search-field';
 export * from './components/segmented-tabs';
 export * from './components/sheet';

package/src/internal/glyphs.tsx

@@ -1,8 +1,6 @@
 import { StyleSheet, View } from 'react-native';
 import type { IconRenderProps } from './icon';
 
-// svg 없이 그리는 최소 아이콘. 아이콘 세트는 앱이 슬롯으로 넣는다.
-
 export function SearchGlyph({ color, size }: IconRenderProps) {
   const ring = size * 0.62;
   const stroke = Math.max(1.5, size / 10);
@@ -97,7 +95,6 @@ export function ChevronGlyph({ color, size }: IconRenderProps) {
   );
 }
 
-/** filled면 원을 칠하고 느낌표를 onColor로 그린다 */
 export function AlertGlyph({
   color,
   size,

package/src/internal/icon.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
 
 export type IconRenderProps = { color: string; size: number };
 
-/** 아이콘 자리. 함수로 넘기면 컴포넌트의 글자색과 크기를 받는다. */
 export type IconSlot = ReactNode | ((props: IconRenderProps) => ReactNode);
 
 export function renderIcon(slot: IconSlot, props: IconRenderProps): ReactNode {

package/src/internal/overlay.tsx

@@ -5,10 +5,6 @@ import { useReducedMotion } from './use-reduced-motion';
 
 export const useNativeDriver = Platform.OS !== 'web';
 
-/**
- * Modal 위 패널의 열림 · 닫힘 전환. 닫힘 애니메이션이 끝난 뒤 mounted가 false가 된다.
- * progress는 0(닫힘) → 1(열림).
- */
 export function useOverlayTransition(open: boolean) {
   const t = useTheme();
   const reduced = useReducedMotion();

package/src/internal/pressable-base.tsx

@@ -10,13 +10,10 @@ import { useTheme } from '../theme/theme-provider';
 export type PressableBaseProps = Omit<PressableProps, 'style'> & {
   ref?: Ref<ComponentRef<typeof Pressable>>;
   style?: StyleProp<ViewStyle>;
-  /** 눌렸을 때 추가 스타일. 기본은 opacity.pressed */
   pressedStyle?: StyleProp<ViewStyle>;
-  /** 눈에 보이는 높이. 최소 터치 크기보다 작으면 hitSlop으로 보완한다 */
   touchHeight?: number;
 };
 
-/** 눌림 · 비활성 · 접근성 상태 · 최소 터치 영역을 한곳에서 처리하는 Pressable */
 export function PressableBase({
   style,
   pressedStyle,

package/src/internal/use-reduced-motion.ts

@@ -1,7 +1,6 @@
 import { useSyncExternalStore } from 'react';
 import { AccessibilityInfo } from 'react-native';
 
-// 앱 전체에서 구독 하나를 공유한다.
 let reduced = false;
 let started = false;
 const listeners = new Set<() => void>();
@@ -26,7 +25,6 @@ function subscribe(listener: () => void) {
   };
 }
 
-/** 기기의 '동작 줄이기' 설정 */
 export function useReducedMotion(): boolean {
   return useSyncExternalStore(subscribe, () => reduced);
 }

package/src/sortable/move.ts

@@ -1,4 +1,3 @@
-/** from 위치의 항목을 to 위치로 옮긴 새 배열 */
 export function moveItem<T>(
   items: readonly T[],
   from: number,

package/src/sortable/sortable-grid.tsx

@@ -10,26 +10,15 @@ export type SortableGridProps<T> = {
   data: readonly T[];
   keyExtractor: (item: T) => string;
   renderItem: (info: { item: T; index: number }) => ReactNode;
-  /** 순서가 바뀐 새 배열 */
   onDataChange: (data: T[], change: SortableChange) => void;
-  /** 기본 3 */
   columns?: number;
-  /** 항목 사이 간격. 기본 space[2] */
   gap?: number;
-  /** true면 SortableHandle을 눌러야만 끈다 */
   handle?: boolean;
-  /** false면 끌 수 없다. 기본 true */
   enabled?: boolean;
-  /** 항목의 접근성 라벨. 넘기면 앞으로 · 뒤로 이동 동작을 제공한다 */
   itemLabel?: (item: T) => string;
-  /** 접근성 동작 이름. 기본 ['앞으로 이동', '뒤로 이동'] */
   moveLabels?: [string, string];
 };
 
-/**
- * 길게 눌러 순서를 바꾸는 격자. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다.
- * columns={1}이면 세로 목록이다.
- */
 export function SortableGrid<T>({
   data,
   keyExtractor,
@@ -91,7 +80,6 @@ export function SortableGrid<T>({
   );
 }
 
-/** handle을 켠 SortableGrid · SortableList 안에서 끄는 손잡이 */
 export function SortableHandle({ children }: { children: ReactNode }) {
   return <Sortable.Handle>{children}</Sortable.Handle>;
 }

package/src/sortable/sortable-list.tsx

@@ -2,7 +2,6 @@ import { SortableGrid, type SortableGridProps } from './sortable-grid';
 
 export type SortableListProps<T> = Omit<SortableGridProps<T>, 'columns'>;
 
-/** 길게 눌러 순서를 바꾸는 세로 목록. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
 export function SortableList<T>({
   moveLabels = ['위로 이동', '아래로 이동'],
   ...props