@botiverse/raft-ui 0.0.0-stage → 0.7.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 (41) hide show
  1. package/CHANGELOG.md +576 -0
  2. package/LICENSE +21 -0
  3. package/README.md +103 -2
  4. package/codemods/package-name.mjs +168 -0
  5. package/codemods/token-names.mjs +150 -0
  6. package/dist/cn.d.mts +5 -0
  7. package/dist/cn.mjs +48 -0
  8. package/dist/components/combobox-select/combobox-select.css +286 -0
  9. package/dist/components/float-button/float-button.css +316 -0
  10. package/dist/components/steps/otter-indicator.css +141 -0
  11. package/dist/components/steps/steps.css +370 -0
  12. package/dist/components/timeline/timeline.css +255 -0
  13. package/dist/dialog-CY6S-Xqf.mjs +505 -0
  14. package/dist/fonts.css +13 -0
  15. package/dist/foundation.css +623 -0
  16. package/dist/index-B3_j9XYd.d.mts +329 -0
  17. package/dist/index.d.mts +5114 -0
  18. package/dist/index.mjs +16442 -0
  19. package/dist/style.css +1315 -0
  20. package/dist/styles.css +444 -0
  21. package/dist/tokens.json +3811 -0
  22. package/dist/wip.d.mts +92 -0
  23. package/dist/wip.mjs +517 -0
  24. package/package.json +92 -3
  25. package/skills/raft-ui-critique/SKILL.md +167 -0
  26. package/skills/raft-ui-critique/agents/openai.yaml +4 -0
  27. package/skills/raft-ui-critique/references/theme-lenses.md +69 -0
  28. package/skills/raft-ui-guide/SKILL.md +96 -0
  29. package/skills/raft-ui-guide/agents/openai.yaml +4 -0
  30. package/skills/raft-ui-guide/rules/adoption.md +55 -0
  31. package/skills/raft-ui-guide/rules/composition.md +14 -0
  32. package/skills/raft-ui-guide/rules/conversation.md +15 -0
  33. package/skills/raft-ui-guide/rules/display.md +14 -0
  34. package/skills/raft-ui-guide/rules/feedback.md +13 -0
  35. package/skills/raft-ui-guide/rules/forms.md +13 -0
  36. package/skills/raft-ui-guide/rules/layout.md +15 -0
  37. package/skills/raft-ui-guide/rules/lookup.md +78 -0
  38. package/skills/raft-ui-guide/rules/overlays.md +13 -0
  39. package/skills/raft-ui-guide/rules/overview.md +30 -0
  40. package/skills/raft-ui-guide/rules/styling.md +17 -0
  41. package/skills/raft-ui-guide/rules/technical-overview.md +80 -0
@@ -0,0 +1,329 @@
1
+ import { Dialog } from "@base-ui/react/dialog";
2
+ import { VariantProps } from "tailwind-variants/lite";
3
+ import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
4
+ import { Button } from "@base-ui/react/button";
5
+ import { useRender } from "@base-ui/react/use-render";
6
+ //#region src/lib/styled-props.d.ts
7
+ /**
8
+ * Base UI components type `className` as `string | ((state) => string)`, but our
9
+ * tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
10
+ * component's props to a string `className` so they can flow into a recipe.
11
+ *
12
+ * The state-callback form is intentionally dropped: our components express every
13
+ * state through `data-*` variants in the recipe, so a caller never needs it.
14
+ */
15
+ type StyledProps<P> = Omit<P, "className" | "style"> & {
16
+ className?: string;
17
+ style?: CSSProperties;
18
+ };
19
+ //#endregion
20
+ //#region src/lib/data-attributes.d.ts
21
+ type DataAttributes = Record<`data-${string}`, string | undefined>;
22
+ //#endregion
23
+ //#region src/components/button/button.d.ts
24
+ declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
25
+ variant: {
26
+ primary: {
27
+ root: string[];
28
+ };
29
+ accent: {
30
+ root: string[];
31
+ };
32
+ warning: {
33
+ root: string[];
34
+ };
35
+ danger: {
36
+ root: string[];
37
+ };
38
+ default: {
39
+ root: string[];
40
+ };
41
+ outline: {
42
+ root: string[];
43
+ };
44
+ information: {
45
+ root: string[];
46
+ };
47
+ muted: {
48
+ root: string[];
49
+ };
50
+ success: {
51
+ root: string[];
52
+ };
53
+ "danger-secondary": {
54
+ root: string[];
55
+ };
56
+ "danger-outline": {
57
+ root: string[];
58
+ };
59
+ ghost: {
60
+ root: string[];
61
+ };
62
+ "on-frame": {
63
+ root: string[];
64
+ };
65
+ link: {
66
+ root: string[];
67
+ };
68
+ };
69
+ size: {
70
+ xs: {
71
+ root: string[];
72
+ };
73
+ sm: {
74
+ root: string[];
75
+ };
76
+ md: {
77
+ root: string[];
78
+ };
79
+ lg: {
80
+ root: string[];
81
+ };
82
+ xl: {
83
+ root: string[];
84
+ };
85
+ inline: {
86
+ root: string[];
87
+ };
88
+ "icon-xs": {
89
+ root: string[];
90
+ };
91
+ "icon-sm": {
92
+ root: string[];
93
+ };
94
+ "icon-md": {
95
+ root: string[];
96
+ };
97
+ "icon-lg": {
98
+ root: string;
99
+ };
100
+ };
101
+ }, {
102
+ root: string[];
103
+ content: string;
104
+ loadingIndicator: string;
105
+ }, undefined, {
106
+ variant: {
107
+ primary: {
108
+ root: string[];
109
+ };
110
+ accent: {
111
+ root: string[];
112
+ };
113
+ warning: {
114
+ root: string[];
115
+ };
116
+ danger: {
117
+ root: string[];
118
+ };
119
+ default: {
120
+ root: string[];
121
+ };
122
+ outline: {
123
+ root: string[];
124
+ };
125
+ information: {
126
+ root: string[];
127
+ };
128
+ muted: {
129
+ root: string[];
130
+ };
131
+ success: {
132
+ root: string[];
133
+ };
134
+ "danger-secondary": {
135
+ root: string[];
136
+ };
137
+ "danger-outline": {
138
+ root: string[];
139
+ };
140
+ ghost: {
141
+ root: string[];
142
+ };
143
+ "on-frame": {
144
+ root: string[];
145
+ };
146
+ link: {
147
+ root: string[];
148
+ };
149
+ };
150
+ size: {
151
+ xs: {
152
+ root: string[];
153
+ };
154
+ sm: {
155
+ root: string[];
156
+ };
157
+ md: {
158
+ root: string[];
159
+ };
160
+ lg: {
161
+ root: string[];
162
+ };
163
+ xl: {
164
+ root: string[];
165
+ };
166
+ inline: {
167
+ root: string[];
168
+ };
169
+ "icon-xs": {
170
+ root: string[];
171
+ };
172
+ "icon-sm": {
173
+ root: string[];
174
+ };
175
+ "icon-md": {
176
+ root: string[];
177
+ };
178
+ "icon-lg": {
179
+ root: string;
180
+ };
181
+ };
182
+ }, {
183
+ root: string[];
184
+ content: string;
185
+ loadingIndicator: string;
186
+ }, import("tailwind-variants/lite").TVReturnTypeLike<{
187
+ variant: {
188
+ primary: {
189
+ root: string[];
190
+ };
191
+ accent: {
192
+ root: string[];
193
+ };
194
+ warning: {
195
+ root: string[];
196
+ };
197
+ danger: {
198
+ root: string[];
199
+ };
200
+ default: {
201
+ root: string[];
202
+ };
203
+ outline: {
204
+ root: string[];
205
+ };
206
+ information: {
207
+ root: string[];
208
+ };
209
+ muted: {
210
+ root: string[];
211
+ };
212
+ success: {
213
+ root: string[];
214
+ };
215
+ "danger-secondary": {
216
+ root: string[];
217
+ };
218
+ "danger-outline": {
219
+ root: string[];
220
+ };
221
+ ghost: {
222
+ root: string[];
223
+ };
224
+ "on-frame": {
225
+ root: string[];
226
+ };
227
+ link: {
228
+ root: string[];
229
+ };
230
+ };
231
+ size: {
232
+ xs: {
233
+ root: string[];
234
+ };
235
+ sm: {
236
+ root: string[];
237
+ };
238
+ md: {
239
+ root: string[];
240
+ };
241
+ lg: {
242
+ root: string[];
243
+ };
244
+ xl: {
245
+ root: string[];
246
+ };
247
+ inline: {
248
+ root: string[];
249
+ };
250
+ "icon-xs": {
251
+ root: string[];
252
+ };
253
+ "icon-sm": {
254
+ root: string[];
255
+ };
256
+ "icon-md": {
257
+ root: string[];
258
+ };
259
+ "icon-lg": {
260
+ root: string;
261
+ };
262
+ };
263
+ }, {
264
+ root: string[];
265
+ content: string;
266
+ loadingIndicator: string;
267
+ }>>;
268
+ type ButtonProps = StyledProps<Button.Props> & VariantProps<typeof buttonVariants> & DataAttributes & {
269
+ loading?: boolean;
270
+ loadingLabel?: string;
271
+ };
272
+ declare function Button$1({ variant, size, loading, loadingLabel, disabled, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
273
+ //#endregion
274
+ //#region src/components/dialog/dialog.d.ts
275
+ type DialogProps = Dialog.Root.Props;
276
+ declare function Dialog$1(props: DialogProps): import("react").JSX.Element;
277
+ type DialogTriggerProps = Dialog.Trigger.Props;
278
+ declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
279
+ type DialogPortalProps = Dialog.Portal.Props;
280
+ declare function DialogPortal(props: DialogPortalProps): import("react").JSX.Element;
281
+ type DialogOverlayProps = StyledProps<Dialog.Backdrop.Props> & {
282
+ layer?: 0 | 1;
283
+ };
284
+ declare function DialogOverlay({ className, layer, ...props }: DialogOverlayProps): import("react").JSX.Element;
285
+ type DialogContentProps = StyledProps<Dialog.Popup.Props> & {
286
+ portalProps?: DialogPortalProps;
287
+ overlay?: false | DialogOverlayProps;
288
+ size?: "sm" | "md" | "lg" | "wide";
289
+ layer?: 0 | 1;
290
+ };
291
+ declare function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }: DialogContentProps): import("react").JSX.Element;
292
+ type DialogCloseProps = Dialog.Close.Props & Pick<ButtonProps, "variant" | "size"> & {
293
+ className?: string;
294
+ children?: ReactNode;
295
+ };
296
+ declare function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DialogCloseProps): import("react").JSX.Element;
297
+ type DialogHeaderProps = ComponentPropsWithRef<"div"> & {
298
+ /** A pinned bar of a scrolling (`size="wide"`) dialog. */
299
+ bar?: boolean;
300
+ };
301
+ declare function DialogHeader({ className, bar, ...props }: DialogHeaderProps): import("react").JSX.Element;
302
+ type DialogBodyProps = ComponentPropsWithRef<"div"> & {
303
+ /** A pinned bar of a scrolling (`size="wide"`) dialog. */
304
+ bar?: boolean;
305
+ };
306
+ declare function DialogBody({ className, bar, ...props }: DialogBodyProps): import("react").JSX.Element;
307
+ type DialogFooterProps = ComponentPropsWithRef<"div"> & {
308
+ /** A pinned bar of a scrolling (`size="wide"`) dialog. */
309
+ bar?: boolean;
310
+ };
311
+ declare function DialogFooter({ className, bar, ...props }: DialogFooterProps): import("react").JSX.Element;
312
+ type DialogTitleProps = StyledProps<Dialog.Title.Props>;
313
+ declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
314
+ type DialogDescriptionProps = StyledProps<Dialog.Description.Props>;
315
+ declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
316
+ type DialogSurfaceProps = useRender.ComponentProps<"div">;
317
+ /**
318
+ * The dialog's frame — the popover layer, the dialog radius, the seam ring
319
+ * and the float shadow — for a centred modal whose lifecycle the app owns
320
+ * (its own backdrop, Escape and focus handling). It neither positions nor
321
+ * animates itself: the host centres it, and a centred modal has no motion.
322
+ * DialogContent draws the same frame for a Base UI dialog.
323
+ */
324
+ declare function DialogSurface({ className, render, ...props }: DialogSurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
325
+ type DialogNavProps = useRender.ComponentProps<"nav">;
326
+ /** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
327
+ declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
328
+ //#endregion
329
+ export { VariantProps as A, DialogTitle as C, Button$1 as D, DialogTriggerProps as E, StyledProps as M, ButtonProps as O, DialogSurfaceProps as S, DialogTrigger as T, DialogOverlayProps as _, DialogCloseProps as a, DialogProps as b, DialogDescription as c, DialogFooterProps as d, DialogHeader as f, DialogOverlay as g, DialogNavProps as h, DialogClose as i, DataAttributes as j, buttonVariants as k, DialogDescriptionProps as l, DialogNav as m, DialogBody as n, DialogContent as o, DialogHeaderProps as p, DialogBodyProps as r, DialogContentProps as s, Dialog$1 as t, DialogFooter as u, DialogPortal as v, DialogTitleProps as w, DialogSurface as x, DialogPortalProps as y };