@reopt-ai/opt-ui 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/COMPONENT_CATALOG.md +3000 -0
  3. package/LICENSE +21 -0
  4. package/README.md +244 -0
  5. package/dist/chunk-3GWWZKX7.js +38 -0
  6. package/dist/chunk-AFF2HPE5.cjs +5008 -0
  7. package/dist/chunk-ELWICXYY.js +4745 -0
  8. package/dist/chunk-N4NDU5ET.cjs +4745 -0
  9. package/dist/chunk-ONE3C5RV.cjs +38 -0
  10. package/dist/chunk-QWBHD54V.js +3218 -0
  11. package/dist/chunk-RBM2RNC2.js +5008 -0
  12. package/dist/chunk-X5WCXJAF.cjs +3218 -0
  13. package/dist/core/index.cjs +324 -0
  14. package/dist/core/index.d.cts +5 -0
  15. package/dist/core/index.d.ts +5 -0
  16. package/dist/core/index.js +324 -0
  17. package/dist/docs/01-getting-started.md +129 -0
  18. package/dist/docs/02-components/01-core.md +1841 -0
  19. package/dist/docs/02-components/02-visuals.md +11 -0
  20. package/dist/docs/02-components/03-shells.md +1361 -0
  21. package/dist/docs/02-components/04-surfaces.md +11 -0
  22. package/dist/docs/02-components/index.md +106 -0
  23. package/dist/docs/03-recipes/01-forms.md +471 -0
  24. package/dist/docs/03-recipes/02-dashboards.md +397 -0
  25. package/dist/docs/03-recipes/03-layouts.md +424 -0
  26. package/dist/docs/04-theming.md +232 -0
  27. package/dist/docs/05-migration/01-breaking-changes.md +117 -0
  28. package/dist/docs/05-migration/02-formstore.md +336 -0
  29. package/dist/docs/06-troubleshooting.md +119 -0
  30. package/dist/docs/index.md +71 -0
  31. package/dist/id-registry.cjs +1875 -0
  32. package/dist/id-registry.d.cts +27 -0
  33. package/dist/id-registry.d.ts +27 -0
  34. package/dist/id-registry.js +1875 -0
  35. package/dist/id-registry.json +3799 -0
  36. package/dist/index-BZ_lBlO1.d.ts +474 -0
  37. package/dist/index-BuvxoWHf.d.cts +474 -0
  38. package/dist/index-DlAcuvQp.d.cts +1686 -0
  39. package/dist/index-Slu5hOj1.d.ts +1686 -0
  40. package/dist/index.cjs +9959 -0
  41. package/dist/index.d.cts +2351 -0
  42. package/dist/index.d.ts +2351 -0
  43. package/dist/index.js +9959 -0
  44. package/dist/meta.cjs +6898 -0
  45. package/dist/meta.d.cts +36 -0
  46. package/dist/meta.d.ts +36 -0
  47. package/dist/meta.js +6869 -0
  48. package/dist/shells/index.cjs +65 -0
  49. package/dist/shells/index.d.cts +5 -0
  50. package/dist/shells/index.d.ts +5 -0
  51. package/dist/shells/index.js +65 -0
  52. package/dist/tailwind.css +401 -0
  53. package/dist/theme/presets/default.css +355 -0
  54. package/dist/theme/presets/minimal.css +354 -0
  55. package/dist/theme/presets/mono-dark.css +354 -0
  56. package/dist/theme/presets/natural.css +181 -0
  57. package/dist/theme/presets/pro.css +354 -0
  58. package/dist/types-D4-0lwaE.d.cts +298 -0
  59. package/dist/types-D4-0lwaE.d.ts +298 -0
  60. package/dist/visuals/index.cjs +4 -0
  61. package/dist/visuals/index.d.cts +1 -0
  62. package/dist/visuals/index.d.ts +1 -0
  63. package/dist/visuals/index.js +4 -0
  64. package/package.json +165 -0
package/dist/docs/01-getting-started.md ADDED
@@ -0,0 +1,129 @@
1
+ ---
2
+ title: "Getting Started"
3
+ description: "opt-ui 설치, Next.js App Router 설정, Tailwind CSS v4 연동, OptThemeProvider 구성 가이드"
4
+ related:
5
+ links:
6
+ - 02-components/index.md
7
+ - 03-recipes/01-forms.md
8
+ - 04-theming.md
9
+ ---
10
+
11
+ <!-- AI agent hint: Tailwind CSS v4 필수. v3의 content 배열 대신 @source 디렉티브 사용. @import "@reopt-ai/opt-ui/tailwind.css" 누락 시 모든 컴포넌트 스타일 깨짐. -->
12
+
13
+ # Getting Started
14
+
15
+ ## Prerequisites
16
+
17
+ - React 19+
18
+ - Tailwind CSS v4
19
+
20
+ ## 1. Install
21
+
22
+ ```bash
23
+ bun add @reopt-ai/opt-ui @reopt-ai/opt-ui-primitives
24
+ bun add -d tailwindcss @tailwindcss/postcss postcss
25
+ ```
26
+
27
+ ## 2. Global CSS
28
+
29
+ ### `app/globals.css` (Next.js App Router)
30
+
31
+ ```css
32
+ @import "tailwindcss";
33
+ @import "@reopt-ai/opt-ui/tailwind.css";
34
+
35
+ @source "../node_modules/@reopt-ai/opt-ui/dist";
36
+ ```
37
+
38
+ ### `src/app/globals.css` (src/ 디렉토리 사용 시)
39
+
40
+ ```css
41
+ @import "tailwindcss";
42
+ @import "@reopt-ai/opt-ui/tailwind.css";
43
+
44
+ @source "../../node_modules/@reopt-ai/opt-ui/dist";
45
+ ```
46
+
47
+ > `@source` 경로는 CSS 파일 위치 기준 상대 경로입니다.
48
+ > `@reopt-ai/opt-ui/tailwind.css`에 테마 프리셋, dark variant, 토큰 매핑, 기본값이 포함되어 있습니다.
49
+
50
+ ## 3. PostCSS
51
+
52
+ `postcss.config.mjs`:
53
+
54
+ ```js
55
+ export default {
56
+ plugins: {
57
+ "@tailwindcss/postcss": {},
58
+ },
59
+ };
60
+ ```
61
+
62
+ ## 4. Root Layout (Next.js App Router)
63
+
64
+ ```tsx
65
+ import { OptThemeProvider } from "@reopt-ai/opt-ui";
66
+ import "./globals.css";
67
+
68
+ export default function RootLayout({
69
+ children,
70
+ }: {
71
+ children: React.ReactNode;
72
+ }) {
73
+ return (
74
+ <html lang="en">
75
+ <body>
76
+ <OptThemeProvider defaultPreset="default">{children}</OptThemeProvider>
77
+ </body>
78
+ </html>
79
+ );
80
+ }
81
+ ```
82
+
83
+ ## 5. Optional: next.config.ts
84
+
85
+ Next.js에서 ESM 또는 패키지 트랜스파일 이슈가 발생하면 추가합니다:
86
+
87
+ ```ts
88
+ import type { NextConfig } from "next";
89
+
90
+ const nextConfig: NextConfig = {
91
+ transpilePackages: ["@reopt-ai/opt-ui"],
92
+ };
93
+
94
+ export default nextConfig;
95
+ ```
96
+
97
+ ## 6. Verify
98
+
99
+ 설치 완료 확인 체크리스트:
100
+
101
+ - [ ] `@reopt-ai/opt-ui`가 dependencies에 존재
102
+ - [ ] global CSS에 `@import "@reopt-ai/opt-ui/tailwind.css"` 포함
103
+ - [ ] `@source`가 패키지 `dist` 경로를 가리킴
104
+ - [ ] root layout에 `OptThemeProvider` 적용
105
+
106
+ ## Surface CLI
107
+
108
+ Surface 템플릿을 프로젝트에 복사하려면:
109
+
110
+ ```bash
111
+ npx @reopt-ai/opt-cli surface list # 사용 가능한 Surface 목록
112
+ npx @reopt-ai/opt-cli surface add billing-page # Surface 복사
113
+ ```
114
+
115
+ 복사된 Surface 파일은 로컬 앱 코드가 됩니다.
116
+
117
+ ## Non-Next.js Setup
118
+
119
+ Next.js App Router가 아닌 환경에서도 동일한 CSS 통합과 OptThemeProvider를 사용합니다:
120
+
121
+ ```tsx
122
+ import { OptThemeProvider } from "@reopt-ai/opt-ui";
123
+
124
+ <OptThemeProvider defaultPreset="default">
125
+ <App />
126
+ </OptThemeProvider>;
127
+ ```
128
+
129
+ CSS 통합은 동일하며, `@source` 경로만 CSS 파일 위치에 맞게 조정합니다.