@unikit-bridge/ui 0.0.0-stage → 0.1.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, 2× faster than NativeWind).
+- **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 62.8% 30.6%` | 위험·삭제 행동 색 | `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.1.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,170 @@
+/**
+ * 네이티브 브리지 — 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 {
+  Pressable as RNPressable,
+  Text as RNText,
+  TextInput as RNTextInput,
+  View as RNView,
+  type PressableInstance,
+  type TextInstance,
+  type TextInputInstance,
+  type ViewInstance,
+} from "react-native";
+import { Uniwind } from "uniwind";
+
+import type {
+  ApplyColorScheme,
+  BridgePressableRef,
+  BridgeTextRef,
+  BridgeTextInputRef,
+  BridgeViewRef,
+  PressableProps,
+  TextProps,
+  TextInputProps,
+  ViewProps,
+} from "./types";
+
+// 공유 타입 전량 재수출 — 소비자는 @unikit-bridge/ui/primitives에서 타입까지 한 번에 import
+export type * from "./types";
+
+// ---------------------------------------------------------------------------
+// View — RN View 재노출(타입만 브리지 계약으로 좁힌다)
+// ---------------------------------------------------------------------------
+const View = forwardRef<BridgeViewRef, ViewProps>(
+  ({ className, children, nativeID, testID, ...rest }, ref) => (
+    <RNView
+      ref={ref as Ref<ViewInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </RNView>
+  ),
+);
+View.displayName = "View";
+
+// ---------------------------------------------------------------------------
+// Text — RN Text 재노출
+// ---------------------------------------------------------------------------
+const Text = forwardRef<BridgeTextRef, TextProps>(
+  ({ className, children, nativeID, testID, onPress, ...rest }, ref) => (
+    <RNText
+      ref={ref as Ref<TextInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      onPress={onPress}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </RNText>
+  ),
+);
+Text.displayName = "Text";
+
+// ---------------------------------------------------------------------------
+// Pressable — RN Pressable 재노출. onPress는 RN 시그니처(이벤트 인자)를
+// 무인자로 좁혀 브리지 계약과 맞춘다(컴포넌트·데모는 무인자 콜백만 쓴다).
+// ---------------------------------------------------------------------------
+const Pressable = forwardRef<BridgePressableRef, PressableProps>(
+  (
+    {
+      className,
+      children,
+      onPress,
+      disabled,
+      accessibilityLabel,
+      accessibilityRole,
+      hitSlop,
+      nativeID,
+      testID,
+      ...rest
+    },
+    ref,
+  ) => (
+    <RNPressable
+      ref={ref as Ref<PressableInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      onPress={onPress ? () => onPress() : undefined}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      hitSlop={hitSlop}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </RNPressable>
+  ),
+);
+Pressable.displayName = "Pressable";
+
+// ---------------------------------------------------------------------------
+// TextInput — RN TextInput 재노출. 웹 관용 disabled는 네이티브 표준 속성이
+// 아니므로 여기서는 버린다(입력 차단 치환 editable={false}는 Input이 수행).
+// ---------------------------------------------------------------------------
+const TextInput = forwardRef<BridgeTextInputRef, TextInputProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      placeholder,
+      editable,
+      disabled: _disabled, // 웹 관용 — 네이티브는 위 editable 치환으로 이미 반영됨
+      onChangeText,
+      nativeID,
+      testID,
+      accessibilityLabelledBy,
+      autoFocus,
+      secureTextEntry,
+      inputMode,
+      ...rest
+    },
+    ref,
+  ) => (
+    <RNTextInput
+      ref={ref as Ref<TextInputInstance>}
+      nativeID={nativeID}
+      testID={testID}
+      accessibilityLabelledBy={accessibilityLabelledBy}
+      className={className}
+      value={value}
+      defaultValue={defaultValue}
+      placeholder={placeholder}
+      editable={editable}
+      onChangeText={onChangeText}
+      autoFocus={autoFocus}
+      secureTextEntry={secureTextEntry}
+      inputMode={inputMode}
+      {...rest}
+    />
+  ),
+);
+TextInput.displayName = "TextInput";
+
+// ---------------------------------------------------------------------------
+// 테마 바인딩
+// ---------------------------------------------------------------------------
+/** 색 스킴 → 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, applyColorScheme };

package/src/bridge/types.ts

@@ -0,0 +1,96 @@
+/**
+ * 브리지 프리미티브의 공개 타입 — 플랫폼 공통 부분집합.
+ *
+ * `@unikit-bridge/ui/primitives`는 package.json exports의 조건분기로 해석된다:
+ * - 네이티브(Metro, "react-native" 조건) → native.tsx — RN View/Text/Pressable/TextInput
+ *   + uniwind(className을 RN 스타일로 컴파일)
+ * - 웹(Next/Vite 등, "default" 조건) → web.tsx — div/span/button/input에 className을
+ *   그대로 싣고 표준 Tailwind CSS v4가 스타일링한다
+ *
+ * 두 구현 모두 이 파일의 타입을 충족해야 한다(컴포넌트 소스는 플랫폼 무관하게
+ * 한 벌로 컴파일된다). 프로퍼티는 v0.1 컴포넌트·데모가 실제 쓰는 공통 부분집합이며,
+ * 플랫폼 고유 프로퍼티(hitSlop 등)는 웹에서 무시된다.
+ */
+import type { ReactNode } from "react";
+
+export type BridgeColorScheme = "light" | "dark";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export type ViewProps = {
+  className?: string;
+  children?: ReactNode;
+  /** 네이티브 nativeID — 웹에서는 id로 전달된다 */
+  nativeID?: string;
+  testID?: string;
+};
+
+export type TextProps = {
+  className?: string;
+  children?: ReactNode;
+  nativeID?: string;
+  testID?: string;
+  onPress?: () => void;
+};
+
+export type PressableProps = {
+  className?: string;
+  children?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  accessibilityRole?: "button" | "link" | "search" | "image" | "text";
+  /** RN 0.7x+ 관용 — 웹 DOM에서도 동일 속성으로 전달된다 */
+  "aria-disabled"?: boolean;
+  /** RN 전용 터치 타깃 확장(px) — 웹에서는 무시 */
+  hitSlop?: number | { top: number; bottom: number; left: number; right: number };
+  nativeID?: string;
+  testID?: string;
+};
+
+export type TextInputProps = {
+  className?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  /** RN 관용 — 웹에서는 readOnly로 치환 */
+  editable?: boolean;
+  /** 웹 관용 disabled — 네이티브에서는 editable={false}로 치환된다(Input이 처리) */
+  disabled?: boolean;
+  onChangeText?: (text: string) => void;
+  nativeID?: string;
+  testID?: string;
+  /** 웹 DOM에서 aria-labelledby로 전달 — 입력창↔라벨 연결 */
+  accessibilityLabelledBy?: string;
+  /** RN 0.7x+ 관용 — 웹 DOM에서도 동일 속성으로 전달된다 */
+  "aria-disabled"?: boolean;
+  autoFocus?: boolean;
+  secureTextEntry?: boolean;
+  inputMode?: "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+};
+
+// ---------------------------------------------------------------------------
+// Refs — 컴포넌트가 실제로 호출하는 메서드만 계약으로 선언(구조적 타이핑).
+// 네이티브 인스턴스(RN)와 DOM 요소(웹) 모두 이 인터페이스를 충족한다.
+// ---------------------------------------------------------------------------
+
+export interface BridgeViewRef {}
+export interface BridgeTextRef {}
+export interface BridgePressableRef {}
+export interface BridgeTextInputRef {
+  focus(): void;
+  blur(): void;
+}
+
+// ---------------------------------------------------------------------------
+// 테마 엔진 바인딩
+// ---------------------------------------------------------------------------
+
+/**
+ * 색 스킴을 스타일링 엔진에 반영한다(UnikitThemeProvider가 호출).
+ * - native.tsx → uniwind `Uniwind.setTheme()`(native 표준 다이얼로그까지 동기)
+ * - web.tsx → document.documentElement의 `.dark` 클래스 토글(표준 Tailwind dark 변형)
+ */
+export type ApplyColorScheme = (colorScheme: BridgeColorScheme) => void;

package/src/bridge/uniwind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="uniwind/types" />