@unikit-bridge/ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 loopy-lim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,100 @@
-# Temporary Holding Version
+# @unikit-bridge/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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).
+- **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.
+
+## How the bridge works
+
+`@unikit-bridge/ui/primitives` resolves through [package export conditions](https://nodejs.org/api/packages.html#conditional-exports):
+
+| Platform | Condition | Implementation |
+|---|---|---|
+| Metro (React Native) | `react-native` | RN `View`/`Text`/`Pressable`/`TextInput` + uniwind |
+| webpack / Turbopack / Vite (web) | `default` | `div`/`span`/`button`/`input` + standard Tailwind CSS |
+
+Components import from that one entry point; each bundler picks its side. RN-specific props (`hitSlop`, …) are ignored on web, and web-idiom props (`disabled`, `onChangeText`, …) are translated on native.
+
+## Installation
+
+```bash
+bun add @unikit-bridge/ui class-variance-authority clsx tailwind-merge
+```
+
+Then add the engine side you need:
+
+- **Native**: `bun add uniwind react-native` (Tailwind v4 comes with uniwind's toolchain) — see the [uniwind setup](https://docs.uniwind.dev) (Metro `withUniwindConfig` + `global.css`).
+- **Web**: `bun add tailwindcss` (v4) and make sure your global CSS scans this package, e.g. `@source '../node_modules/@unikit-bridge/ui/src';`.
+
+### Required CSS (both platforms)
+
+Add the token mapping + values to your global CSS (or install them via the shadcn registry: `bunx shadcn add <registry>/r/theme.json`):
+
+```css
+@import "tailwindcss";
+
+/* web only — uniwind registers these itself */
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant web (&:where(:root, :root *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  /* … full 20-token mapping — see docs/tokens.md */
+}
+
+:root { --background: 0 0% 100%; /* … */ }
+.dark { --background: 240 10% 3.9%; /* … */ }
+```
+
+On web, put this in the app that compiles your Tailwind CSS (e.g. `app/globals.css` in Next.js, added to `transpilePackages: ["@unikit-bridge/ui"]`). On native, put it in the `global.css` referenced by uniwind's `cssEntryFile`.
+
+## Usage
+
+Wrap your app in the theme provider, then use the components — identical JSX on both platforms:
+
+```tsx
+import { UnikitThemeProvider, Button, Card, CardContent } from "@unikit-bridge/ui";
+
+export default function App() {
+  return (
+    <UnikitThemeProvider defaultColorScheme="light">
+      <Card>
+        <CardContent className="gap-2">
+          <Button onPress={() => {}}>Press me</Button>
+        </CardContent>
+      </Card>
+    </UnikitThemeProvider>
+  );
+}
+```
+
+### Theming
+
+```tsx
+import { useUnikitTheme } from "@unikit-bridge/ui";
+
+function ThemeToggle() {
+  const { colorScheme, toggleColorScheme } = useUnikitTheme();
+  return (
+    <Button variant="outline" size="sm" onPress={toggleColorScheme}>
+      {colorScheme === "light" ? "Dark" : "Light"} mode
+    </Button>
+  );
+}
+```
+
+The provider holds the scheme and binds it to each engine: `Uniwind.setTheme()` on native, a `.dark` class on `<html>` on web. Prebuilt token presets (`themePresets`) and raw token access (`getThemeTokens`, `lightTokens`, `darkTokens`) are exported for advanced theming.
+
+## Components
+
+`Button` · `Card` (+ Header / Title / Description / Content / Footer) · `Input` · `Label` · `Badge`
+
+All components accept a `className` and forward variant helpers (`buttonVariants`, `cardVariants`, …) for composition.
+
+## License
+
+MIT

package/docs/tokens.md

@@ -0,0 +1,63 @@
+# UniKit 디자인 토큰 카탈로그
+
+> ⛔ 이 파일은 `bun run generate:design`(packages/unikit)이 생성합니다 — 수동 수정 금지.
+> 값의 출처는 [`src/theme/tokens.ts`](../src/theme/tokens.ts)(기본)와 [`src/theme/presets.ts`](../src/theme/presets.ts)(프리셋 3종)입니다. 값 형식은 CSS `hsl()` 함수 인자로 바로 쓰는 HSL 채널 문자열("H S% L%")입니다.
+
+## 토큰 값 표 (20종 = 색 19 + radius)
+
+| 토큰 | 라이트 | 다크 | 역할 | 대표 사용 |
+|---|---|---|---|---|
+| `--background` | `0 0% 100%` | `240 10% 3.9%` | 화면 전체 기본 배경 | `bg-background (provider 래퍼)` |
+| `--foreground` | `240 10% 3.9%` | `0 0% 98%` | 기본 텍스트·아이콘 전경색 | `text-foreground` |
+| `--card` | `0 0% 100%` | `240 10% 3.9%` | 카드 표면 배경 | `bg-card` |
+| `--card-foreground` | `240 10% 3.9%` | `0 0% 98%` | 카드 위 텍스트 전경색 | `text-card-foreground` |
+| `--popover` | `0 0% 100%` | `240 10% 3.9%` | 팝오버·드롭다운 표면 — v0.1 컴포넌트 미사용, 확장용 | `bg-popover (예약)` |
+| `--popover-foreground` | `240 10% 3.9%` | `0 0% 98%` | 팝오버 위 텍스트 — v0.1 미사용, 확장용 | `text-popover-foreground (예약)` |
+| `--primary` | `240 5.9% 10%` | `0 0% 98%` | 주요 행동 색(기본 버튼 배경) | `bg-primary` |
+| `--primary-foreground` | `0 0% 98%` | `240 5.9% 10%` | 주요 행동 위 텍스트 | `text-primary-foreground` |
+| `--secondary` | `240 4.8% 95.9%` | `240 3.7% 15.9%` | 보조 행동 색(secondary 버튼·배지) | `bg-secondary` |
+| `--secondary-foreground` | `240 5.9% 10%` | `0 0% 98%` | 보조 행동 위 텍스트 | `text-secondary-foreground` |
+| `--muted` | `240 4.8% 95.9%` | `240 3.7% 15.9%` | 강조를 낮춘 영역 배경 | `bg-muted` |
+| `--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 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` |
+| `--ring` | `240 5.9% 10%` | `240 4.9% 83.9%` | 키보드 포커스 링 | `focus-visible:ring-ring` |
+| `--radius` | `0.5rem` | `0.5rem` | 모서리 반경 기준값(스킴 무관 공통) | `rounded-md (scale 파생)` |
+
+## 프리셋 테마 (기본 + 3종)
+
+값 출처는 Tailwind 공식 팔레트 계산 + WCAG 대비 검증(22-design-plan §2.2 규칙). 재적용: 다른 프리셋을 같은 방식으로 add하면 기존 값이 그 자리에서 교체됩니다(같은 프리셋 재add는 값 불변).
+
+| 항목 | 중립 계열 | 라이트 primary | 핵심 대비비¹ | 설치(한 줄) |
+|---|---|---|---|---|
+| `theme` (Zinc (기본)) | zinc | zinc-900 | 16.96:1 | `bunx shadcn add <레지스트리>/r/theme.json -y` |
+| `theme-blue` (Blue) | slate | blue-600 | 5.17:1 | `bunx shadcn add <레지스트리>/r/theme-blue.json -y` |
+| `theme-emerald` (Emerald) | zinc | emerald-700 | 5.49:1 | `bunx shadcn add <레지스트리>/r/theme-emerald.json -y` |
+| `theme-amber` (Amber) | stone | amber-700 | 5.01:1 | `bunx shadcn add <레지스트리>/r/theme-amber.json -y` |
+
+¹ 라이트 primary↔primary-foreground(흰 전경)의 WCAG 대비비 — audit:design가 매 실행 재계산(기준 ≥4.5:1).
+프리셋 전체 값(20종×라이트/다크)은 [`src/theme/presets.ts`](../src/theme/presets.ts)와 각 `/r/theme-<이름>.json`에서 관찰할 수 있습니다.
+
+## 일관성 규칙 (audit:design가 기계 검사)
+
+1. **원색 리터럴 금지** — 컴포넌트 소스에 `#fff`, `rgb(...)`, `oklch(...)` 등 직접 색 값을 쓰지 않는다. 반드시 위 토큰을 참조하는 유틸리티 클래스(`bg-primary` 등)를 쓴다.
+2. **Tailwind 기본 팔레트 금지** — `bg-zinc-500`, `text-white` 류는 테마 전환(라이트↔다크)이 되지 않으므로 금지.
+3. **임의값 클래스 금지** — `h-[37px]`, `bg-[#fff]` 류 대신 스케일 클래스(`h-10`)와 토큰을 쓴다.
+4. **재테마** — 소비자는 아래 한 줄로 토큰을 받고, 값 커스터마이즈는 해당 CSS 변수값만 바꾼다(컴포넌트 수정 불필요). 런타임 스킴 전환은 `UnikitThemeProvider`가 담당한다.
+   ```bash
+   bunx shadcn add <레지스트리>/r/theme.json
+   ```
+
+## 사본이 생성되는 곳
+
+| 사본 | 생성 위치 | 비고 |
+|---|---|---|
+| 웹 전역 CSS | `apps/web/app/globals.css` :root/.dark 블록 | 표준 Tailwind v4 — 기본 테마만 |
+| 네이티브 전역 CSS | `apps/expo/global.css` @variant light/dark 블록 | uniwind(Tailwind v4) — 기본 테마만 |
+| 토큰→유틸리티 매핑 | 두 앱 전역 CSS `@theme inline` 블록 | 토큰 키에서 자동 생성 — 두 플랫폼 동일 바이트 |
+| 레지스트리 theme 항목 4종 | `registry.json` cssVars light/dark | 기본 + 프리셋 3 — 소비자 `shadcn add` 전달 |
+| 이 카탈로그 | `packages/unikit/docs/tokens.md` | 값 드리프트는 audit (f)가 차단 |

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@unikit-bridge/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "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": {
+    "type": "git",
+    "url": "git+https://github.com/loopy-lim/UniKit.git",
+    "directory": "packages/unikit"
+  },
+  "homepage": "https://github.com/loopy-lim/UniKit#readme",
+  "bugs": "https://github.com/loopy-lim/UniKit/issues",
+  "keywords": [
+    "react-native",
+    "expo",
+    "uniwind",
+    "react",
+    "tailwind",
+    "tailwindcss",
+    "design-system",
+    "ui-components",
+    "universal",
+    "cross-platform",
+    "shadcn"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./primitives": {
+      "react-native": "./src/bridge/native.tsx",
+      "default": "./src/bridge/web.tsx"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "docs",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "tsc --noEmit",
+    "generate:design": "bun scripts/generate-design.ts",
+    "audit:design": "bun scripts/audit-design.ts",
+    "check:consumer": "bun scripts/check-consumer-theme.ts"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^3.0.0",
+    "react-native": ">=0.81.0",
+    "uniwind": ">=1.13.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "uniwind": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "~5.9.0",
+    "@types/react": "~19.3.0",
+    "react": "19.3.0",
+    "react-native": "0.88.1",
+    "uniwind": "~1.13.2",
+    "class-variance-authority": "~0.7.1",
+    "clsx": "~2.1.1",
+    "tailwind-merge": "~3.7.0"
+  }
+}

package/src/bridge/native.tsx

@@ -0,0 +1,301 @@
+/**
+ * 네이티브 브리지 — React Native(iOS/Android) + uniwind 소비자용.
+ *
+ * RN 프리미티브를 그대로 재노출한다. className은 uniwind가 빌드 타임에
+ * RN 스타일로 컴파일한다(metro.config.js의 withUniwindConfig — 앱 책임).
+ * RN 관용 프로퍼티(hitSlop 등)는 네이티브 그대로 전달된다.
+ *
+ * 웹 관용 프로퍼티는 RN 관용으로 치환한다:
+ *   disabled(버튼)→ RN 표준 disabled · onChangeText는 RN 표준 그대로
+ * aria-* 프로퍼티는 RN 0.7x+가 네이티브 관용으로 지원한다.
+ */
+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,
+  ViewProps,
+} from "./types";
+
+// 공유 타입 전량 재수출 — 소비자는 @unikit-bridge/ui/primitives에서 타입까지 한 번에 import
+export type * from "./types";
+
+// ---------------------------------------------------------------------------
+// View — RN View 재노출(타입만 브리지 계약으로 좁힌다)
+// ---------------------------------------------------------------------------
+const View = forwardRef<BridgeViewRef, ViewProps>(
+  (
+    {
+      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}
+    </RNView>
+  ),
+);
+View.displayName = "View";
+
+// ---------------------------------------------------------------------------
+// Text — RN Text 재노출
+// ---------------------------------------------------------------------------
+const Text = forwardRef<BridgeTextRef, TextProps>(
+  (
+    {
+      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}
+    </RNText>
+  ),
+);
+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,
+      ...rest
+    },
+    ref,
+  ) => (
+    <RNPressable
+      // 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}
+    </RNPressable>
+  ),
+);
+Pressable.displayName = "Pressable";
+
+// ---------------------------------------------------------------------------
+// TextInput — RN TextInput 재노출. 웹 관용 disabled는 네이티브 표준 속성이
+// 아니므로 여기서는 버린다(입력 차단 치환 editable={false}는 Input이 수행).
+// ---------------------------------------------------------------------------
+const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
+  (
+    {
+      className,
+      style,
+      value,
+      defaultValue,
+      placeholder,
+      editable,
+      disabled: _disabled, // 웹 관용 — 네이티브는 위 editable 치환으로 이미 반영됨
+      onChangeText,
+      nativeID,
+      testID,
+      accessibilityLabelledBy,
+      autoFocus,
+      secureTextEntry,
+      inputMode,
+      multiline,
+      ...rest
+    },
+    ref,
+  ) => (
+    <RNTextInput
+      ref={ref as Ref<TextInputInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      accessibilityLabelledBy={accessibilityLabelledBy}
+      className={className}
+      style={style as TextStyle}
+      value={value}
+      defaultValue={defaultValue}
+      placeholder={placeholder}
+      editable={editable}
+      onChangeText={onChangeText}
+      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";
+
+// ---------------------------------------------------------------------------
+// 테마 바인딩
+// ---------------------------------------------------------------------------
+/** 색 스킴 → uniwind 활성 테마. setTheme은 Appearance.setColorScheme도 호출해
+ *  Alert·Modal 등 시스템 UI가 앱 테마를 따르게 한다.
+ *  정적 import가 안전한 이유: 웹 번들은 exports "default" 조건으로 web.tsx만
+ *  로드하므로 이 파일(와 uniwind 의존)은 네이티브 그래프에만 존재한다. */
+const applyColorScheme: ApplyColorScheme = (colorScheme) => {
+  Uniwind.setTheme(colorScheme);
+};
+
+export { View, Text, Pressable, TextInput, Image, applyColorScheme };