feat(react-native): add Expo-first native component package scaffold

AGENTS.md

@@ -28,7 +28,9 @@
 - `packages/`: Shared, publishable packages consumed across apps and external projects.
   - `packages/react/`: `@cocso-ui/react` — React component library.
   - `packages/css/`: `@cocso-ui/css` — design tokens and CSS.
+  - `packages/react-native/`: `@cocso-ui/react-native` — React Native + Expo component package.
   - `packages/react-icons/`: `@cocso-ui/react-icons` — icon set.
+  - `packages/react-native-icons/`: `@cocso-ui/react-native-icons` — React Native icon package.
   - `packages/baseframe/`: `@cocso-ui/baseframe-sources` — YAML component source definitions.
   - `packages/figma/`: `@cocso-ui/figma` — Figma plugin for syncing design tokens to Figma Variables.
 - `ecosystem/`: Tooling that wraps or consumes packages for developer workflows.

docs/project-react-native-icons.md

@@ -0,0 +1,88 @@
+# project-react-native-icons
+
+## Goal
+
+Provide a React Native icon package with full parity to `@cocso-ui/react-icons`, so Expo and React Native apps can consume the same icon names without web SVG runtime dependencies.
+
+## Path
+
+```text
+packages/react-native-icons/
+```
+
+## Runtime and Language
+
+React Native + TypeScript (`react-native-svg`).
+
+## Users
+
+- Mobile engineers consuming `@cocso-ui/react-native`.
+- Teams that need icon-name parity between web (`@cocso-ui/react-icons`) and native.
+
+## In Scope
+
+- Full icon parity for all semantic and brand icons from `@cocso-ui/react-icons`.
+- RN icon rendering through generated `react-native-svg` component trees.
+- Grouped exports by `semantic` and `brand`, plus top-level barrel export.
+- Automated source sync script from `packages/react-icons/src/components/**/*.tsx`.
+- Test-level generation contracts for source parity and barrel export parity.
+
+## Out of Scope
+
+- Replacing `@cocso-ui/react-icons` as the source package.
+- Introducing a new global SVG truth source in this PR.
+- Web icon runtime behavior changes.
+
+## Architecture
+
+```text
+packages/react-native-icons/
+├── scripts/
+│   └── generate-icons.mjs
+├── src/
+│   ├── components/
+│   │   ├── semantic/
+│   │   └── brand/
+│   ├── icon.tsx
+│   ├── types.ts
+│   └── index.ts
+└── package.json
+```
+
+## Interfaces
+
+- Package name: `@cocso-ui/react-native-icons`
+- Public icon props: `size`, `width`, `height`, `color` plus `SvgProps`
+- Export parity contract: all icon component names from `@cocso-ui/react-icons` must exist with the same export names.
+
+## Storage
+
+- Generated TSX icon files committed in repository.
+- No runtime storage.
+
+## Security
+
+- No network calls.
+- No secret handling.
+
+## Logging
+
+- Script-level console output for generated file counts and sync status.
+
+## Build and Test
+
+```sh
+pnpm --filter @cocso-ui/react-native-icons lint
+pnpm --filter @cocso-ui/react-native-icons check-types
+pnpm --filter @cocso-ui/react-native-icons test
+pnpm --filter @cocso-ui/react-native-icons build
+```
+
+## Roadmap
+
+- Evaluate a shared raw-SVG source of truth for web/native generation.
+- Add visual snapshot checks for high-risk brand icons.
+
+## Open Questions
+
+- Whether to move all icon generation to an `ecosystem/` pipeline in a dedicated follow-up.

docs/project-react-native.md

@@ -0,0 +1,132 @@
+# project-react-native
+
+## Goal
+
+Provide a React Native-first component package for Expo environments that reuses cocso design tokens and interaction patterns, so mobile apps can ship a consistent design system without depending on web CSS runtime features.
+
+## Path
+
+```text
+packages/react-native/
+```
+
+## Runtime and Language
+
+React Native + Expo (TypeScript).
+
+## Users
+
+- Mobile engineers building Expo apps that need cocso design-system components.
+- Teams sharing design language across `@cocso-ui/react` (web) and React Native.
+
+## In Scope
+
+- Token-driven React Native exports (`colors`, `spacing`, `radius`, `typography`, `shadow`, `zIndex`) derived from cocso token source.
+- Foundational primitives for RN design systems: `Box`, `Text`, `Stack`.
+- Core interactive components implemented in this scope: `Button`, `Modal`, `GlassView`, `Input`.
+- Feedback component implemented in this scope: `Badge`.
+- React Native `Modal`-compatible presentation controls with explicit component-level semantics.
+- Translucent glass surface with optional blur-component injection for apps that provide native blur.
+
+## Out of Scope
+
+- Porting every existing web component in `@cocso-ui/react` one-to-one.
+- Web-only CSS module behavior and browser-specific styling patterns.
+- App-level navigation logic and screen composition.
+
+## Architecture
+
+```text
+packages/react-native/src/
+├── components/
+│   ├── badge/
+│   ├── box/
+│   ├── button/
+│   ├── glass-view/
+│   ├── input/
+│   ├── modal/
+│   ├── stack/
+│   └── text/
+├── theme/
+│   ├── tokens.generated.ts
+│   ├── tokens.ts
+│   └── index.ts
+└── index.ts
+```
+
+Token architecture contract:
+
+- Source of truth remains `@cocso-ui/css` (`token.css`).
+- RN package consumes generated JS/TS token values (not CSS `var(...)` references).
+- Token keys keep stable enum-like identifiers where possible (`neutral500`, `s8`, `r4`).
+
+## Interfaces
+
+Public package name: `@cocso-ui/react-native`
+
+Public exports:
+
+- `theme` tokens: `colors`, `spacing`, `radius`, `fontSize`, `fontWeight`, `lineHeight`, `shadows`, `zIndex`
+- Components: `Badge`, `Box`, `Button`, `GlassView`, `Input`, `Modal`, `Stack`, `Text`
+
+Modal interfaces:
+
+- `RN_MODAL_PRESENTATION`: `"fullScreen" | "pageSheet" | "formSheet" | "overFullScreen"`
+- `GLASS_INTENSITY`: `"low" | "medium" | "high"`
+
+## Storage
+
+- No runtime persistence.
+- Build artifacts generated into `dist/`.
+- Generated token file committed for deterministic package builds.
+
+## Security
+
+- No network calls.
+- No secret handling.
+- Styling and UI utilities only.
+
+## Logging
+
+- No runtime logging by default.
+- Development-only invariant errors for invalid token keys or unsupported presentation values.
+
+## Build and Test
+
+```sh
+# Build package
+pnpm --filter @cocso-ui/react-native build
+
+# Lint package
+pnpm --filter @cocso-ui/react-native lint
+
+# Type check package
+pnpm --filter @cocso-ui/react-native check-types
+
+# Package tests (token behavior + export contracts)
+pnpm --filter @cocso-ui/react-native test
+```
+
+Repository validation should include:
+
+```sh
+pnpm check
+pnpm build
+```
+
+## Roadmap
+
+- Add higher-level RN components mapped from proven web component semantics.
+- Planned component groups for follow-up migration:
+  - Form controls: `Select`, `Dropdown`, `Checkbox`, `Switch`, `RadioGroup`, `Field`
+  - Feedback and overlays: `Popover`, `Tooltip`, `Toast`, `Dialog`, `Spinner`
+  - Navigation and structure: `Tab`, `Accordion`, `Link`, `Pagination`
+  - Domain components: `OneTimePasswordField`, `StockQuantityStatus`
+  - Date-related components: `DayPicker`, `MonthPicker`
+- Add dark-mode semantic token aliases.
+- Add visual regression examples in Storybook or Expo preview integration.
+
+## Open Questions
+
+- Whether to standardize on `expo-blur` as a hard dependency or keep it as optional peer dependency.
+- Whether to add dedicated Expo Router integration helpers in a separate package layer.

packages/react-native-icons/README.md

@@ -0,0 +1,23 @@
+## `@cocso-ui/react-native-icons`
+
+React Native icon components for Cocso UI.
+
+### Installation
+
+```bash
+pnpm add @cocso-ui/react-native-icons react-native-svg
+```
+
+### Usage
+
+```tsx
+import { SearchIcon } from "@cocso-ui/react-native-icons";
+
+export function Example() {
+  return <SearchIcon color="#1f2937" size={20} />;
+}
+```
+
+### Source of truth
+
+The icon paths are generated from `@cocso-ui/react-icons` source components.

packages/react-native-icons/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cocso-ui/react-native-icons",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cocso/cocso-ui.git",
+    "directory": "packages/react-native-icons"
+  },
+  "type": "module",
+  "scripts": {
+    "prebuild": "node ./scripts/generate-icons.mjs && biome check . --write",
+    "build": "tsc -p tsconfig.build.json",
+    "check-types": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-native-svg": "^15.15.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "react-native-svg": "^15.15.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}