@unikit-bridge/ui 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 One typed component set that **renders React Native views on native and plain DOM on web** — the same `className` strings, the same look, no platform branches in your code.
 
-- **Native (iOS/Android)** — components render React Native primitives styled by [uniwind](https://uniwind.dev) (Tailwind CSS v4 bindings, 2× faster than NativeWind).
+- **Native (iOS/Android)** — components render React Native primitives styled by [uniwind](https://uniwind.dev) (Tailwind CSS v4 bindings).
 - **Web (React DOM)** — the very same components render `div`/`span`/`button`/`input` styled by **standard Tailwind CSS v4**. No react-native-web, no extra styling engine: your Tailwind CSS is the engine.
 - **Design tokens as a single source of truth** — light/dark themes are CSS variables generated from one `tokens.ts`; switching schemes is instant on both platforms (`UnikitThemeProvider`).
 - **shadcn-style variants** — built with `class-variance-authority`; `cn()` (clsx + tailwind-merge) is exported for custom styling.

package/docs/tokens.md

@@ -21,7 +21,7 @@
 | `--muted-foreground` | `240 3.8% 46.1%` | `240 5% 64.9%` | 강조를 낮춘 텍스트(설명문) | `text-muted-foreground` |
 | `--accent` | `240 4.8% 95.9%` | `240 3.7% 15.9%` | 호버·눌림 강조 배경(outline/ghost active) | `active:bg-accent` |
 | `--accent-foreground` | `240 5.9% 10%` | `0 0% 98%` | 강조 배경 위 텍스트 | `active:text-accent-foreground` |
-| `--destructive` | `0 72.2% 50.6%` | `0 62.8% 30.6%` | 위험·삭제 행동 색 | `bg-destructive` |
+| `--destructive` | `0 72.2% 50.6%` | `0 72% 65%` | 위험·삭제 행동 색 | `bg-destructive` |
 | `--destructive-foreground` | `0 0% 98%` | `0 0% 98%` | 위험 행동 위 텍스트 | `text-destructive-foreground` |
 | `--border` | `240 5.9% 90%` | `240 3.7% 15.9%` | 일반 테두리(card outline 등) | `border-border` |
 | `--input` | `240 5.9% 90%` | `240 3.7% 15.9%` | 입력창 테두리 | `border-input` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unikit-bridge/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Bridge UI kit — one component set that renders React Native views on native (uniwind) and plain DOM on web (Tailwind CSS v4). Same className, same look.",
   "license": "MIT",
   "repository": {

package/src/bridge/native.tsx

@@ -11,23 +11,30 @@
  */
 import { forwardRef, type Ref } from "react";
 import {
+  Image as RNImage,
   Pressable as RNPressable,
   Text as RNText,
   TextInput as RNTextInput,
   View as RNView,
+  type ImageInstance,
+  type ImageStyle,
   type PressableInstance,
   type TextInstance,
+  type TextStyle,
   type TextInputInstance,
   type ViewInstance,
+  type ViewStyle,
 } from "react-native";
 import { Uniwind } from "uniwind";
 
 import type {
   ApplyColorScheme,
+  BridgeImageRef,
   BridgePressableRef,
   BridgeTextRef,
   BridgeTextInputRef,
   BridgeViewRef,
+  ImageProps,
   PressableProps,
   TextProps,
   TextInputProps,
@@ -41,12 +48,30 @@ export type * from "./types";
 // View — RN View 재노출(타입만 브리지 계약으로 좁힌다)
 // ---------------------------------------------------------------------------
 const View = forwardRef<BridgeViewRef, ViewProps>(
-  ({ className, children, nativeID, testID, ...rest }, ref) => (
+  (
+    {
+      className,
+      style,
+      children,
+      nativeID,
+      testID,
+      accessibilityRole,
+      accessibilityLabel,
+      "aria-hidden": ariaHidden,
+      ...rest
+    },
+    ref,
+  ) => (
     <RNView
       ref={ref as Ref<ViewInstance>}
       nativeID={nativeID}
       testID={testID}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel}
+      aria-hidden={ariaHidden}
+      accessibilityElementsHidden={ariaHidden}
       className={className}
+      style={style as ViewStyle}
       {...rest}
     >
       {children}
@@ -59,13 +84,29 @@ View.displayName = "View";
 // Text — RN Text 재노출
 // ---------------------------------------------------------------------------
 const Text = forwardRef<BridgeTextRef, TextProps>(
-  ({ className, children, nativeID, testID, onPress, ...rest }, ref) => (
+  (
+    {
+      className,
+      style,
+      children,
+      nativeID,
+      testID,
+      onPress,
+      accessibilityRole,
+      accessibilityLabel,
+      ...rest
+    },
+    ref,
+  ) => (
     <RNText
       ref={ref as Ref<TextInstance>}
       nativeID={nativeID}
       testID={testID}
       onPress={onPress}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel}
       className={className}
+      style={style as TextStyle}
       {...rest}
     >
       {children}
@@ -78,15 +119,47 @@ Text.displayName = "Text";
 // Pressable — RN Pressable 재노출. onPress는 RN 시그니처(이벤트 인자)를
 // 무인자로 좁혀 브리지 계약과 맞춘다(컴포넌트·데모는 무인자 콜백만 쓴다).
 // ---------------------------------------------------------------------------
+// aria-* 상태 프로퍼티는 RN 0.77+ 네이티브 관용 별칭으로 그대로 전달한다.
+// react-native-web(Expo web 등)은 accessibilityState를 0.21부터 폐기하고
+// aria-* 직접 전달만 DOM 속성으로 렌더하므로, 양쪽 모두 aria-* 경로가 정답.
+// 네이티브 실기기에서도 동일 값을 accessibilityState로 명시 전달해 구버전
+// 스크린리더 호환을 유지한다(코어는 aria-* 별칭을 같은 상태로 병합).
+function toAccessibilityState(props: {
+  disabled?: boolean;
+  "aria-checked"?: boolean | "mixed";
+  "aria-selected"?: boolean;
+  "aria-expanded"?: boolean;
+}) {
+  const state: {
+    disabled?: boolean;
+    checked?: boolean | "mixed";
+    selected?: boolean;
+    expanded?: boolean;
+  } = {};
+  if (props.disabled !== undefined) state.disabled = props.disabled;
+  if (props["aria-checked"] !== undefined) state.checked = props["aria-checked"];
+  if (props["aria-selected"] !== undefined) state.selected = props["aria-selected"];
+  if (props["aria-expanded"] !== undefined) state.expanded = props["aria-expanded"];
+  return Object.keys(state).length > 0 ? state : undefined;
+}
+
 const Pressable = forwardRef<BridgePressableRef, PressableProps>(
   (
     {
       className,
+      style,
       children,
       onPress,
       disabled,
       accessibilityLabel,
       accessibilityRole,
+      "aria-disabled": ariaDisabled,
+      "aria-pressed": ariaPressed,
+      "aria-checked": ariaChecked,
+      "aria-selected": ariaSelected,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledBy,
       hitSlop,
       nativeID,
       testID,
@@ -95,15 +168,35 @@ const Pressable = forwardRef<BridgePressableRef, PressableProps>(
     ref,
   ) => (
     <RNPressable
-      ref={ref as Ref<PressableInstance>}
+      // BridgePressableRef(구조적 최소 계약) ↔ RN PressableInstance 불일치를
+      // unknown 경유 이중 단언으로만 해소 — any 사용 금지(M-3).
+      ref={ref as unknown as Ref<PressableInstance>}
       nativeID={nativeID}
       testID={testID}
       onPress={onPress ? () => onPress() : undefined}
       disabled={disabled}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={accessibilityRole}
+      aria-disabled={ariaDisabled}
+      aria-checked={ariaChecked}
+      aria-selected={ariaSelected}
+      aria-expanded={ariaExpanded}
+      aria-labelledby={ariaLabelledBy}
+      accessibilityState={toAccessibilityState({
+        disabled,
+        "aria-checked": ariaChecked,
+        "aria-selected": ariaSelected,
+        "aria-expanded": ariaExpanded,
+      })}
+      // aria-pressed(toggle)·aria-controls(tab↔panel 연결)은 RN 코어 타입에
+      // 없는 RNW 전용 속성 — 무형 스프레드로 전달(네이티브에서는 폐기됨).
+      {...({
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+      } as Record<string, unknown>)}
       hitSlop={hitSlop}
       className={className}
+      style={style as ViewStyle}
       {...rest}
     >
       {children}
@@ -120,6 +213,7 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
   (
     {
       className,
+      style,
       value,
       defaultValue,
       placeholder,
@@ -132,6 +226,7 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
       autoFocus,
       secureTextEntry,
       inputMode,
+      multiline,
       ...rest
     },
     ref,
@@ -142,6 +237,7 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
       testID={testID}
       accessibilityLabelledBy={accessibilityLabelledBy}
       className={className}
+      style={style as TextStyle}
       value={value}
       defaultValue={defaultValue}
       placeholder={placeholder}
@@ -150,12 +246,47 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
       autoFocus={autoFocus}
       secureTextEntry={secureTextEntry}
       inputMode={inputMode}
+      multiline={multiline}
       {...rest}
     />
   ),
 );
 TextInput.displayName = "TextInput";
 
+// ---------------------------------------------------------------------------
+// Image — RN Image 재노출. 원격 {uri} 소스만 브리지 공통 계약으로 한다
+// (require() 정적 소스는 네이티브 전용 기능이므로 타입에서 제외).
+// ---------------------------------------------------------------------------
+const Image = forwardRef<BridgeImageRef, ImageProps>(
+  (
+    {
+      className,
+      style,
+      source,
+      alt: _alt, // 웹 관용 — 네이티브는 accessibilityLabel이 스크린리더 텍스트
+      onError,
+      accessibilityLabel,
+      nativeID,
+      testID,
+      ...rest
+    },
+    ref,
+  ) => (
+    <RNImage
+      ref={ref as Ref<ImageInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      source={source}
+      className={className}
+      style={style as ImageStyle}
+      onError={onError ? () => onError() : undefined}
+      {...rest}
+    />
+  ),
+);
+Image.displayName = "Image";
+
 // ---------------------------------------------------------------------------
 // 테마 바인딩
 // ---------------------------------------------------------------------------
@@ -167,4 +298,4 @@ const applyColorScheme: ApplyColorScheme = (colorScheme) => {
   Uniwind.setTheme(colorScheme);
 };
 
-export { View, Text, Pressable, TextInput, applyColorScheme };
+export { View, Text, Pressable, TextInput, Image, applyColorScheme };

package/src/bridge/types.ts

@@ -15,43 +15,118 @@ import type { ReactNode } from "react";
 
 export type BridgeColorScheme = "light" | "dark";
 
+/**
+ * 플랫폼 공통 인라인 스타일 최소 계약 — className 문자열로 표현할 수 없는
+ * 동적 값(진행률 폭 %, 가로세로 비율 등)용. RN 스타일 객체와 DOM
+ * CSSProperties의 실용 교집합(프로퍼티 이름은 camelCase, 값은 문자열·숫자).
+ * 정적 스타일은 여전히 className이 원칙이고, 여기는 동적 값 전용이다.
+ */
+export type BridgeStyle = Record<string, string | number | undefined>;
+
+/**
+ * 플랫폼 공통 접근성 역할 — RN accessibilityRole과 ARIA role의 교집합(컴포넌트
+ * 카탈로그 확장 시 필요한 역할까지 포함). 웹에서는 그대로 role 속성이 된다.
+ */
+export type BridgeRole =
+  | "button"
+  | "link"
+  | "search"
+  | "image"
+  | "text"
+  | "tab"
+  | "tablist"
+  | "tabpanel"
+  | "switch"
+  | "checkbox"
+  | "radio"
+  | "radiogroup"
+  | "option"
+  | "menuitem"
+  | "separator"
+  | "heading"
+  | "list"
+  | "listitem"
+  | "progressbar"
+  | "alert"
+  | "status"
+  | "combobox";
+
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
 
 export type ViewProps = {
   className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
   children?: ReactNode;
   /** 네이티브 nativeID — 웹에서는 id로 전달된다 */
   nativeID?: string;
   testID?: string;
+  accessibilityRole?: BridgeRole;
+  accessibilityLabel?: string;
+  /** 장식용 요소 표시 — 웹 aria-hidden, 네이티브 accessibilityElementsHidden */
+  "aria-hidden"?: boolean;
 };
 
 export type TextProps = {
   className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
   children?: ReactNode;
   nativeID?: string;
   testID?: string;
   onPress?: () => void;
+  accessibilityRole?: BridgeRole;
+  accessibilityLabel?: string;
 };
 
 export type PressableProps = {
   className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
   children?: ReactNode;
   onPress?: () => void;
   disabled?: boolean;
   accessibilityLabel?: string;
-  accessibilityRole?: "button" | "link" | "search" | "image" | "text";
+  accessibilityRole?: BridgeRole;
   /** RN 0.7x+ 관용 — 웹 DOM에서도 동일 속성으로 전달된다 */
   "aria-disabled"?: boolean;
+  /** 눌림 유지형 컨트롤(toggle) 상태 — 웹 DOM 그대로, 네이티브는 시각 상태로만 반영 */
+  "aria-pressed"?: boolean;
+  /** 체크형 컨트롤(checkbox/radio/switch) 상태 — 네이티브 accessibilityState.checked로 */
+  "aria-checked"?: boolean | "mixed";
+  /** 탭·옵션 등 선택 상태 — 네이티브 accessibilityState.selected로 */
+  "aria-selected"?: boolean;
+  /** 아코디언·콤보박스 등 전개 상태 — 네이티브 accessibilityState.expanded로 */
+  "aria-expanded"?: boolean;
+  "aria-controls"?: string;
+  "aria-labelledby"?: string;
   /** RN 전용 터치 타깃 확장(px) — 웹에서는 무시 */
   hitSlop?: number | { top: number; bottom: number; left: number; right: number };
   nativeID?: string;
   testID?: string;
 };
 
+export type ImageProps = {
+  className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
+  /** 원격 이미지 — 네이티브 RN source, 웹 img src. require() 정적 소스는 네이티브 전용 */
+  source: { uri: string };
+  /** 웹 img alt — 네이티브에서는 accessibilityLabel로 전달된다 */
+  alt?: string;
+  /** 로드 실패 콜백(무인자) — Avatar 등의 폴백 전환용 */
+  onError?: () => void;
+  accessibilityLabel?: string;
+  nativeID?: string;
+  testID?: string;
+};
+
 export type TextInputProps = {
   className?: string;
+  /** 동적 값 전용 인라인 스타일(정적 스타일은 className 원칙) */
+  style?: BridgeStyle;
   value?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -69,6 +144,8 @@ export type TextInputProps = {
   autoFocus?: boolean;
   secureTextEntry?: boolean;
   inputMode?: "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+  /** 여러 줄 입력 — 네이티브 RN multiline, 웹은 <input> 대신 <textarea>로 렌더 */
+  multiline?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -79,6 +156,7 @@ export type TextInputProps = {
 export interface BridgeViewRef {}
 export interface BridgeTextRef {}
 export interface BridgePressableRef {}
+export interface BridgeImageRef {}
 export interface BridgeTextInputRef {
   focus(): void;
   blur(): void;

package/src/bridge/web.tsx

@@ -6,9 +6,11 @@
  * 적용한다(hover/focus-visible/:active 등 웹 전용 변형도 CSS 표준 동작).
  *
  * RN 프리미티브 관용 프로퍼티는 DOM 속성으로 치환된다:
- *   onPress→onClick · accessibilityLabel→aria-label · nativeID→id ·
- *   accessibilityLabelledBy→aria-labelledby · editable→readOnly ·
+ *   onPress→onClick · accessibilityRole→role · accessibilityLabel→aria-label ·
+ *   nativeID→id · accessibilityLabelledBy→aria-labelledby · editable→readOnly ·
  *   secureTextEntry→type="password" · onChangeText→onChange(value 추출)
+ * 치환은 View/Text/Pressable 전 프리미티브에 동일 적용된다(M-1 — React DOM은
+ * camelCase 미지 prop을 렌더에서 제거하므로 치환 없이는 role·라벨이 사라진다).
  * hitSlop은 웹에서 무시된다(포인터 정밀도가 높아 불필요).
  */
 import { forwardRef, type ChangeEvent } from "react";
@@ -16,10 +18,13 @@ import { forwardRef, type ChangeEvent } from "react";
 import { cn } from "../lib/utils";
 import type {
   ApplyColorScheme,
+  BridgeImageRef,
   BridgePressableRef,
+  BridgeStyle,
   BridgeTextRef,
   BridgeTextInputRef,
   BridgeViewRef,
+  ImageProps,
   PressableProps,
   TextProps,
   TextInputProps,
@@ -34,12 +39,18 @@ export type * from "./types";
 // 기본 클래스로 재현한다. 충돌 시 tailwind-merge(cn)이 방향 유틸리티를 정리한다.
 // ---------------------------------------------------------------------------
 const View = forwardRef<BridgeViewRef, ViewProps>(
-  ({ className, children, nativeID, testID, ...rest }, ref) => (
+  (
+    { className, style, children, nativeID, testID, accessibilityLabel, accessibilityRole, ...rest },
+    ref,
+  ) => (
     <div
       ref={ref as React.Ref<HTMLDivElement>}
       id={nativeID}
       data-testid={testID}
+      role={accessibilityRole}
+      aria-label={accessibilityLabel}
       className={cn("flex flex-col", className)}
+      style={style as React.CSSProperties}
       {...rest}
     >
       {children}
@@ -52,12 +63,18 @@ View.displayName = "View";
 // Text → <span>
 // ---------------------------------------------------------------------------
 const Text = forwardRef<BridgeTextRef, TextProps>(
-  ({ className, children, nativeID, testID, onPress, ...rest }, ref) => (
+  (
+    { className, style, children, nativeID, testID, onPress, accessibilityLabel, accessibilityRole, ...rest },
+    ref,
+  ) => (
     <span
       ref={ref as React.Ref<HTMLSpanElement>}
       id={nativeID}
       data-testid={testID}
+      role={accessibilityRole}
+      aria-label={accessibilityLabel}
       className={className}
+      style={style as React.CSSProperties}
       onClick={onPress}
       {...rest}
     >
@@ -76,6 +93,7 @@ const Pressable = forwardRef<BridgePressableRef, PressableProps>(
   (
     {
       className,
+      style,
       children,
       onPress,
       disabled,
@@ -94,6 +112,7 @@ const Pressable = forwardRef<BridgePressableRef, PressableProps>(
       id={nativeID}
       data-testid={testID}
       className={className}
+      style={style as React.CSSProperties}
       onClick={onPress}
       disabled={disabled}
       aria-label={accessibilityLabel}
@@ -113,6 +132,7 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
   (
     {
       className,
+      style,
       value,
       defaultValue,
       placeholder,
@@ -125,13 +145,38 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
       autoFocus,
       secureTextEntry,
       inputMode,
+      multiline,
       ...rest
     },
     ref,
   ) => {
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (
+      event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => {
       onChangeText?.(event.target.value);
     };
+    // multiline → <textarea>(웹 표준 여러 줄 입력). 나머지 계약은 <input>과 동일.
+    if (multiline) {
+      return (
+        <textarea
+          ref={ref as React.Ref<HTMLTextAreaElement>}
+          id={nativeID}
+          data-testid={testID}
+          aria-labelledby={accessibilityLabelledBy}
+          className={className}
+          style={style as React.CSSProperties}
+          value={value}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={editable === false}
+          autoFocus={autoFocus}
+          inputMode={inputMode}
+          onChange={handleChange}
+          {...rest}
+        />
+      );
+    }
     return (
       <input
         ref={ref as React.Ref<HTMLInputElement>}
@@ -139,6 +184,7 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
         data-testid={testID}
         aria-labelledby={accessibilityLabelledBy}
         className={className}
+        style={style as React.CSSProperties}
         value={value}
         defaultValue={defaultValue}
         placeholder={placeholder}
@@ -155,6 +201,41 @@ const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
 );
 TextInput.displayName = "TextInput";
 
+// ---------------------------------------------------------------------------
+// Image → <img> — 원격 {uri} 소스를 src로 푼다. 정적 require() 소스는
+// 네이티브 전용 기능이라 웹 계약에 없다.
+// ---------------------------------------------------------------------------
+const Image = forwardRef<BridgeImageRef, ImageProps>(
+  (
+    {
+      className,
+      style,
+      source,
+      alt = "",
+      onError,
+      accessibilityLabel, // 웹은 alt가 스크린리더 텍스트 표준
+      nativeID,
+      testID,
+      ...rest
+    },
+    ref,
+  ) => (
+    <img
+      ref={ref as React.Ref<HTMLImageElement>}
+      id={nativeID}
+      data-testid={testID}
+      src={source.uri}
+      alt={alt || accessibilityLabel}
+      loading="lazy"
+      className={className}
+      style={style as React.CSSProperties}
+      onError={onError}
+      {...rest}
+    />
+  ),
+);
+Image.displayName = "Image";
+
 // ---------------------------------------------------------------------------
 // 테마 바인딩
 // ---------------------------------------------------------------------------
@@ -163,4 +244,4 @@ const applyColorScheme: ApplyColorScheme = (colorScheme) => {
   document.documentElement.classList.toggle("dark", colorScheme === "dark");
 };
 
-export { View, Text, Pressable, TextInput, applyColorScheme };
+export { View, Text, Pressable, TextInput, Image, applyColorScheme };