@reopt-ai/opt-ui 1.4.1 → 1.6.0

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 (89) hide show
  1. package/COMPONENT_CATALOG.md +374 -84
  2. package/README.md +28 -7
  3. package/dist/app.css +146 -0
  4. package/dist/core/index.cjs +164 -324
  5. package/dist/core/index.d.cts +3 -5
  6. package/dist/core/index.d.ts +3 -5
  7. package/dist/core/index.js +3 -323
  8. package/dist/docs/01-getting-started.md +25 -5
  9. package/dist/docs/02-components/01-core.md +192 -46
  10. package/dist/docs/02-components/02-visuals.md +1 -1
  11. package/dist/docs/02-components/03-shells.md +177 -42
  12. package/dist/docs/02-components/04-surfaces.md +1 -1
  13. package/dist/docs/02-components/index.md +1 -1
  14. package/dist/docs/03-recipes/03-layouts.md +20 -12
  15. package/dist/docs/04-theming.md +3 -1
  16. package/dist/docs/05-migration/01-breaking-changes.md +28 -0
  17. package/dist/id-registry.cjs +1899 -1872
  18. package/dist/id-registry.d.cts +13 -10
  19. package/dist/id-registry.d.cts.map +1 -0
  20. package/dist/id-registry.d.ts +13 -10
  21. package/dist/id-registry.d.ts.map +1 -0
  22. package/dist/id-registry.js +1897 -1871
  23. package/dist/id-registry.js.map +1 -0
  24. package/dist/id-registry.json +44 -44
  25. package/dist/index.cjs +8294 -9613
  26. package/dist/index.d.cts +1486 -1438
  27. package/dist/index.d.cts.map +1 -0
  28. package/dist/index.d.ts +1486 -1438
  29. package/dist/index.d.ts.map +1 -0
  30. package/dist/index.js +7933 -9600
  31. package/dist/index.js.map +1 -0
  32. package/dist/meta.cjs +7461 -6765
  33. package/dist/meta.d.cts.map +1 -0
  34. package/dist/meta.d.ts.map +1 -0
  35. package/dist/meta.js +7460 -6736
  36. package/dist/meta.js.map +1 -0
  37. package/dist/pagination-By7Ozv3U.js +3788 -0
  38. package/dist/pagination-By7Ozv3U.js.map +1 -0
  39. package/dist/pagination-Uv3CnGJz.cjs +4677 -0
  40. package/dist/shader-surface-BK1GMt5_.d.cts +1788 -0
  41. package/dist/shader-surface-BK1GMt5_.d.cts.map +1 -0
  42. package/dist/shader-surface-BWhO2xkk.js +3715 -0
  43. package/dist/shader-surface-BWhO2xkk.js.map +1 -0
  44. package/dist/shader-surface-DIVWtpFl.d.ts +1788 -0
  45. package/dist/shader-surface-DIVWtpFl.d.ts.map +1 -0
  46. package/dist/shader-surface-DxLLfrE6.cjs +4108 -0
  47. package/dist/shells/index.cjs +51 -65
  48. package/dist/shells/index.d.cts +4 -5
  49. package/dist/shells/index.d.ts +4 -5
  50. package/dist/shells/index.js +3 -64
  51. package/dist/tailwind.css +54 -5
  52. package/dist/theme/presets/default.css +12 -12
  53. package/dist/theme/server.cjs +310 -0
  54. package/dist/theme/server.d.cts +117 -0
  55. package/dist/theme/server.d.cts.map +1 -0
  56. package/dist/theme/server.d.ts +117 -0
  57. package/dist/theme/server.d.ts.map +1 -0
  58. package/dist/theme/server.js +287 -0
  59. package/dist/theme/server.js.map +1 -0
  60. package/dist/types-D0FlcYnM.d.cts +301 -0
  61. package/dist/types-D0FlcYnM.d.cts.map +1 -0
  62. package/dist/types-D0FlcYnM.d.ts +301 -0
  63. package/dist/types-D0FlcYnM.d.ts.map +1 -0
  64. package/dist/visuals/index.cjs +10 -4
  65. package/dist/visuals/index.d.cts +2 -1
  66. package/dist/visuals/index.d.ts +2 -1
  67. package/dist/visuals/index.js +1 -2
  68. package/dist/workflow-canvas-3Jeevkgy.cjs +2599 -0
  69. package/dist/workflow-canvas-BGBAcjf-.js +2403 -0
  70. package/dist/workflow-canvas-BGBAcjf-.js.map +1 -0
  71. package/dist/workflow-canvas-Bar_O2SQ.d.ts +494 -0
  72. package/dist/workflow-canvas-Bar_O2SQ.d.ts.map +1 -0
  73. package/dist/workflow-canvas-DghDRtHn.d.cts +494 -0
  74. package/dist/workflow-canvas-DghDRtHn.d.cts.map +1 -0
  75. package/package.json +24 -8
  76. package/dist/chunk-3GWWZKX7.js +0 -38
  77. package/dist/chunk-AFF2HPE5.cjs +0 -5008
  78. package/dist/chunk-ELWICXYY.js +0 -4745
  79. package/dist/chunk-N4NDU5ET.cjs +0 -4745
  80. package/dist/chunk-ONE3C5RV.cjs +0 -38
  81. package/dist/chunk-QWBHD54V.js +0 -3218
  82. package/dist/chunk-RBM2RNC2.js +0 -5008
  83. package/dist/chunk-X5WCXJAF.cjs +0 -3218
  84. package/dist/index-BZ_lBlO1.d.ts +0 -474
  85. package/dist/index-BuvxoWHf.d.cts +0 -474
  86. package/dist/index-DlAcuvQp.d.cts +0 -1686
  87. package/dist/index-Slu5hOj1.d.ts +0 -1686
  88. package/dist/types-D4-0lwaE.d.cts +0 -298
  89. package/dist/types-D4-0lwaE.d.ts +0 -298
@@ -1,324 +1,4 @@
1
1
  "use client";
2
- import {
3
- AccordionContent,
4
- AccordionItem,
5
- AccordionRoot,
6
- AccordionTrigger,
7
- Avatar,
8
- AvatarGroup,
9
- BlockLayout,
10
- Breadcrumb,
11
- Card,
12
- CardContent,
13
- CardDescription,
14
- CardFooter,
15
- CardHeader,
16
- CardTitle,
17
- CircularProgress,
18
- ConditionBuilder,
19
- Container,
20
- DrawerClose,
21
- DrawerPanel,
22
- DrawerRoot,
23
- DropdownContent,
24
- DropdownItem,
25
- DropdownMenu,
26
- DropdownSeparator,
27
- DropdownTrigger,
28
- Heading,
29
- Input,
30
- Logo,
31
- Meter,
32
- OtpField,
33
- PageHeader,
34
- Progress,
35
- Radio,
36
- RadioGroup,
37
- ResizableHandle,
38
- ResizablePanel,
39
- ResizablePanelGroup,
40
- SHADER_OVERLAY_PARAM_KEYS,
41
- SHADER_PARAM_FALLBACK,
42
- SHADER_PARAM_KEYS,
43
- SHADER_PRESETS,
44
- SHADER_PRESET_IDS,
45
- ScrollArea,
46
- Section,
47
- Separator,
48
- ShaderSurface,
49
- Skeleton,
50
- SkeletonAvatar,
51
- SkeletonCard,
52
- SkeletonTable,
53
- SkeletonText,
54
- StepBuilder,
55
- Switch,
56
- Text,
57
- Textarea,
58
- Toggle,
59
- ToggleGroup,
60
- VirtualList,
61
- createBlock,
62
- getShaderFragment,
63
- getShaderPreset
64
- } from "../chunk-ELWICXYY.js";
65
- import {
66
- Alert,
67
- AlertDialogPanel,
68
- Badge,
69
- Button,
70
- Checkbox,
71
- CheckboxGroup,
72
- ColorPicker,
73
- ComboboxEmpty,
74
- ComboboxGroup,
75
- ComboboxGroupLabel,
76
- ComboboxInput,
77
- ComboboxItem,
78
- ComboboxPopover,
79
- ComboboxRoot,
80
- Composite,
81
- CompositeItem,
82
- CompositeProvider,
83
- CompositeRow,
84
- CompositeZone,
85
- DEFAULT_PRESETS,
86
- DateRangePicker,
87
- DialogBody,
88
- DialogDescription,
89
- DialogDisclosure,
90
- DialogDismiss,
91
- DialogFooter,
92
- DialogHeader,
93
- DialogHeading,
94
- DialogPanel,
95
- DialogRoot,
96
- DisclosureContent,
97
- DisclosureRoot,
98
- DisclosureTrigger,
99
- EmptyState,
100
- FormCheckbox,
101
- FormControl,
102
- FormDescription,
103
- FormError,
104
- FormField,
105
- FormGroup,
106
- FormGroupLabel,
107
- FormInput,
108
- FormLabel,
109
- FormProvider,
110
- FormPush,
111
- FormRadio,
112
- FormRadioGroup,
113
- FormRemove,
114
- FormReset,
115
- FormRoot,
116
- FormSelect,
117
- FormSelectItem,
118
- FormSelectPopover,
119
- FormSubmit,
120
- FormSwitch,
121
- FormTextarea,
122
- IconPicker,
123
- Kbd,
124
- MenuButtonArrow,
125
- MenuItem,
126
- MenuItemCheckbox,
127
- MenuItemRadio,
128
- MenuPopover,
129
- MenuRoot,
130
- MenuSeparator,
131
- MenuTrigger,
132
- MenubarContainer,
133
- MenubarRoot,
134
- NumberInput,
135
- Pagination,
136
- PopoverClose,
137
- PopoverContent,
138
- PopoverRoot,
139
- PopoverTrigger,
140
- SelectItem,
141
- SelectLabel,
142
- SelectPopover,
143
- SelectRoot,
144
- SelectTrigger,
145
- Slider,
146
- Spinner,
147
- StatCard,
148
- Tab,
149
- TabList,
150
- TabPanel,
151
- TabsRoot,
152
- TagInput,
153
- ToolbarButton,
154
- ToolbarContainer,
155
- ToolbarRoot,
156
- ToolbarSeparator,
157
- Tooltip,
158
- TooltipAnchor,
159
- TooltipProvider,
160
- useFormContext,
161
- useFormStore
162
- } from "../chunk-RBM2RNC2.js";
163
- import "../chunk-3GWWZKX7.js";
164
- export {
165
- AccordionContent,
166
- AccordionItem,
167
- AccordionRoot,
168
- AccordionTrigger,
169
- Alert,
170
- AlertDialogPanel,
171
- Avatar,
172
- AvatarGroup,
173
- Badge,
174
- BlockLayout,
175
- Breadcrumb,
176
- Button,
177
- Card,
178
- CardContent,
179
- CardDescription,
180
- CardFooter,
181
- CardHeader,
182
- CardTitle,
183
- Checkbox,
184
- CheckboxGroup,
185
- CircularProgress,
186
- ColorPicker,
187
- ComboboxEmpty,
188
- ComboboxGroup,
189
- ComboboxGroupLabel,
190
- ComboboxInput,
191
- ComboboxItem,
192
- ComboboxPopover,
193
- ComboboxRoot,
194
- Composite,
195
- CompositeItem,
196
- CompositeProvider,
197
- CompositeRow,
198
- CompositeZone,
199
- ConditionBuilder,
200
- Container,
201
- DEFAULT_PRESETS,
202
- DateRangePicker,
203
- DialogBody,
204
- DialogDescription,
205
- DialogDisclosure,
206
- DialogDismiss,
207
- DialogFooter,
208
- DialogHeader,
209
- DialogHeading,
210
- DialogPanel,
211
- DialogRoot,
212
- DisclosureContent,
213
- DisclosureRoot,
214
- DisclosureTrigger,
215
- DrawerClose,
216
- DrawerPanel,
217
- DrawerRoot,
218
- DropdownContent,
219
- DropdownItem,
220
- DropdownMenu,
221
- DropdownSeparator,
222
- DropdownTrigger,
223
- EmptyState,
224
- FormCheckbox,
225
- FormControl,
226
- FormDescription,
227
- FormError,
228
- FormField,
229
- FormGroup,
230
- FormGroupLabel,
231
- FormInput,
232
- FormLabel,
233
- FormProvider,
234
- FormPush,
235
- FormRadio,
236
- FormRadioGroup,
237
- FormRemove,
238
- FormReset,
239
- FormRoot,
240
- FormSelect,
241
- FormSelectItem,
242
- FormSelectPopover,
243
- FormSubmit,
244
- FormSwitch,
245
- FormTextarea,
246
- Heading,
247
- IconPicker,
248
- Input,
249
- Kbd,
250
- Logo,
251
- MenuButtonArrow,
252
- MenuItem,
253
- MenuItemCheckbox,
254
- MenuItemRadio,
255
- MenuPopover,
256
- MenuRoot,
257
- MenuSeparator,
258
- MenuTrigger,
259
- MenubarContainer,
260
- MenubarRoot,
261
- Meter,
262
- NumberInput,
263
- OtpField,
264
- PageHeader,
265
- Pagination,
266
- PopoverClose,
267
- PopoverContent,
268
- PopoverRoot,
269
- PopoverTrigger,
270
- Progress,
271
- Radio,
272
- RadioGroup,
273
- ResizableHandle,
274
- ResizablePanel,
275
- ResizablePanelGroup,
276
- SHADER_OVERLAY_PARAM_KEYS,
277
- SHADER_PARAM_FALLBACK,
278
- SHADER_PARAM_KEYS,
279
- SHADER_PRESETS,
280
- SHADER_PRESET_IDS,
281
- ScrollArea,
282
- Section,
283
- SelectItem,
284
- SelectLabel,
285
- SelectPopover,
286
- SelectRoot,
287
- SelectTrigger,
288
- Separator,
289
- ShaderSurface,
290
- Skeleton,
291
- SkeletonAvatar,
292
- SkeletonCard,
293
- SkeletonTable,
294
- SkeletonText,
295
- Slider,
296
- Spinner,
297
- StatCard,
298
- StepBuilder,
299
- BlockLayout as SurfaceLayout,
300
- Switch,
301
- Tab,
302
- TabList,
303
- TabPanel,
304
- TabsRoot,
305
- TagInput,
306
- Text,
307
- Textarea,
308
- Toggle,
309
- ToggleGroup,
310
- ToolbarButton,
311
- ToolbarContainer,
312
- ToolbarRoot,
313
- ToolbarSeparator,
314
- Tooltip,
315
- TooltipAnchor,
316
- TooltipProvider,
317
- VirtualList,
318
- createBlock,
319
- createBlock as createSurface,
320
- getShaderFragment,
321
- getShaderPreset,
322
- useFormContext,
323
- useFormStore
324
- };
2
+ import { $ as TooltipAnchor, A as FormSwitch, At as SelectPopover, Bt as Composite, C as FormRoot, Ct as DialogFooter, Dt as DialogRoot, E as FormSelectPopover, Et as DialogPanel, F as useFormStore, Ft as TabPanel, G as PopoverTrigger, H as PopoverClose, Hn as Kbd, Ht as CompositeProvider, I as DEFAULT_PRESETS, It as TabsRoot, J as ToolbarButton, Jt as Spinner, K as Slider, L as DateRangePicker, Lt as DisclosureContent, M as FormTextarea, Mt as SelectTrigger, Nt as Tab, Ot as SelectItem, P as useFormContext, Pt as TabList, Q as Tooltip, R as TagInput, Rt as DisclosureRoot, S as FormReset, St as DialogDismiss, T as FormSelectItem, Tt as DialogHeading, U as PopoverContent, Ut as CompositeRow, V as ColorPicker, Vt as CompositeItem, W as PopoverRoot, Wt as CompositeZone, X as ToolbarRoot, Xt as EmptyState, Y as ToolbarContainer, Yt as Badge, Z as ToolbarSeparator, Zt as Button, _ as FormProvider, _t as ComboboxRoot, at as MenuPopover, b as FormRadioGroup, bt as DialogDescription, c as FormDescription, ct as MenuTrigger, d as FormGroup, dt as ComboboxEmpty, et as TooltipProvider, f as FormGroupLabel, ft as ComboboxGroup, gt as ComboboxPopover, h as FormLabel, ht as ComboboxItem, i as FormCheckbox, it as MenuItemRadio, jt as SelectRoot, k as FormSubmit, kt as SelectLabel, l as FormError, lt as MenubarContainer, m as FormInput, mt as ComboboxInput, n as Checkbox, nt as MenuItem, o as FormControl, ot as MenuRoot, pt as ComboboxGroupLabel, q as NumberInput, qt as Alert, r as CheckboxGroup, rt as MenuItemCheckbox, st as MenuSeparator, t as Pagination, tn as StatCard, tt as MenuButtonArrow, u as FormField, ut as MenubarRoot, v as FormPush, vt as AlertDialogPanel, w as FormSelect, wt as DialogHeader, x as FormRemove, xt as DialogDisclosure, y as FormRadio, yt as DialogBody, z as IconPicker, zt as DisclosureTrigger } from "../pagination-By7Ozv3U.js";
3
+ import { $ as CardFooter, A as DropdownTrigger, B as Avatar, D as DropdownItem, E as DropdownContent, G as SkeletonCard, H as Textarea, I as StepBuilder, J as Switch, K as SkeletonTable, L as Meter, O as DropdownMenu, Q as CardDescription, R as CircularProgress, S as BlockLayout, T as RadioGroup, U as Skeleton, V as AvatarGroup, W as SkeletonAvatar, X as Card, Y as Input, Z as CardContent, _ as Section, a as SHADER_PRESETS, at as AccordionRoot, b as PageHeader, c as getShaderPreset, ct as ToggleGroup, d as DrawerPanel, dt as Heading, et as CardHeader, f as DrawerRoot, ft as Text, g as ResizablePanelGroup, h as ResizablePanel, i as SHADER_PARAM_KEYS, it as AccordionItem, j as ConditionBuilder, k as DropdownSeparator, l as VirtualList, lt as OtpField, m as ResizableHandle, n as SHADER_OVERLAY_PARAM_KEYS, nt as Breadcrumb, o as SHADER_PRESET_IDS, ot as AccordionTrigger, p as Logo, q as SkeletonText, r as SHADER_PARAM_FALLBACK, rt as AccordionContent, s as getShaderFragment, st as Toggle, t as ShaderSurface, tt as CardTitle, u as DrawerClose, ut as Separator, v as Container, w as Radio, x as createBlock, y as ScrollArea, z as Progress } from "../shader-surface-BWhO2xkk.js";
4
+ export { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, Alert, AlertDialogPanel, Avatar, AvatarGroup, Badge, BlockLayout, BlockLayout as SurfaceLayout, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CircularProgress, ColorPicker, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, CompositeZone, ConditionBuilder, Container, DEFAULT_PRESETS, DateRangePicker, DialogBody, DialogDescription, DialogDisclosure, DialogDismiss, DialogFooter, DialogHeader, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, DrawerClose, DrawerPanel, DrawerRoot, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSelectItem, FormSelectPopover, FormSubmit, FormSwitch, FormTextarea, Heading, IconPicker, Input, Kbd, Logo, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, NumberInput, OtpField, PageHeader, Pagination, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, Radio, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, SHADER_OVERLAY_PARAM_KEYS, SHADER_PARAM_FALLBACK, SHADER_PARAM_KEYS, SHADER_PRESETS, SHADER_PRESET_IDS, ScrollArea, Section, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, ShaderSurface, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText, Slider, Spinner, StatCard, StepBuilder, Switch, Tab, TabList, TabPanel, TabsRoot, TagInput, Text, Textarea, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, VirtualList, createBlock, createBlock as createSurface, getShaderFragment, getShaderPreset, useFormContext, useFormStore };
@@ -17,14 +17,34 @@ related:
17
17
  - React 19+
18
18
  - Tailwind CSS v4
19
19
 
20
- ## 1. Install
20
+ ## 1. Agent skill setup (recommended)
21
+
22
+ Run from the consumer project root:
23
+
24
+ ```bash
25
+ npx skills add reopt-ai/reopt-skills/opt-ui-install
26
+ ```
27
+
28
+ Then ask your agent:
29
+
30
+ ```text
31
+ Use the opt-ui-install skill to set up @reopt-ai/opt-ui in this project and verify the result.
32
+ ```
33
+
34
+ The skill auto-detects install versus upgrade, idempotently updates the reopt
35
+ marker block in `AGENTS.md` (or `CLAUDE.md`), follows the docs shipped in this
36
+ `dist/docs/` directory, wires Tailwind v4 and `OptThemeProvider`, and runs
37
+ `opt doctor`. Source:
38
+ [`reopt-ai/reopt-skills`](https://github.com/reopt-ai/reopt-skills/tree/main/skills/opt-ui-install).
39
+
40
+ ## 2. Manual install
21
41
 
22
42
  ```bash
23
43
  bun add @reopt-ai/opt-ui @reopt-ai/opt-ui-primitives
24
44
  bun add -d tailwindcss @tailwindcss/postcss postcss
25
45
  ```
26
46
 
27
- ## 2. Global CSS
47
+ ## 3. Global CSS
28
48
 
29
49
  ### `app/globals.css` (Next.js App Router)
30
50
 
@@ -47,7 +67,7 @@ bun add -d tailwindcss @tailwindcss/postcss postcss
47
67
  > `@source` 경로는 CSS 파일 위치 기준 상대 경로입니다.
48
68
  > `@reopt-ai/opt-ui/tailwind.css`에 테마 프리셋, dark variant, 토큰 매핑, 기본값이 포함되어 있습니다.
49
69
 
50
- ## 3. PostCSS
70
+ ## 4. PostCSS
51
71
 
52
72
  `postcss.config.mjs`:
53
73
 
@@ -59,7 +79,7 @@ export default {
59
79
  };
60
80
  ```
61
81
 
62
- ## 4. Root Layout (Next.js App Router)
82
+ ## 5. Root Layout (Next.js App Router)
63
83
 
64
84
  ```tsx
65
85
  import { OptThemeProvider } from "@reopt-ai/opt-ui";
@@ -80,7 +100,7 @@ export default function RootLayout({
80
100
  }
81
101
  ```
82
102
 
83
- ## 5. Optional: next.config.ts
103
+ ## 6. Optional: next.config.ts
84
104
 
85
105
  Next.js에서 ESM 또는 패키지 트랜스파일 이슈가 발생하면 추가합니다:
86
106