@tulipfarm/sprout 0.2.0 → 0.3.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.
@@ -0,0 +1,406 @@
1
+ @layer components {
2
+ .sprout-sql-viewer {
3
+ --sprout-sql-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
4
+ position: relative;
5
+ display: flex;
6
+ flex: 1 1 0%;
7
+ box-sizing: border-box;
8
+ width: 100%;
9
+ height: 100%;
10
+ min-width: 0;
11
+ min-height: 24rem;
12
+ overflow: hidden;
13
+ border: 1px solid var(--sprout-line);
14
+ border-radius: var(--sprout-radius-panel);
15
+ background: var(--sprout-canvas);
16
+ color: var(--sprout-text);
17
+ font-family: var(--sprout-font);
18
+ }
19
+
20
+ .sprout-sql-flow.light,
21
+ .sprout-sql-flow.dark {
22
+ --sprout-chart-1: inherit;
23
+ --sprout-chart-2: inherit;
24
+ --sprout-chart-3: inherit;
25
+ --sprout-chart-4: inherit;
26
+ --sprout-chart-5: inherit;
27
+ }
28
+
29
+ .sprout-sql-viewer [data-tone] {
30
+ --sprout-sql-tone: var(--sprout-primary);
31
+ }
32
+ .sprout-sql-viewer [data-tone="1"] {
33
+ --sprout-sql-tone: var(--sprout-chart-1);
34
+ }
35
+ .sprout-sql-viewer [data-tone="2"] {
36
+ --sprout-sql-tone: var(--sprout-chart-2);
37
+ }
38
+ .sprout-sql-viewer [data-tone="3"] {
39
+ --sprout-sql-tone: var(--sprout-chart-3);
40
+ }
41
+ .sprout-sql-viewer [data-tone="4"] {
42
+ --sprout-sql-tone: var(--sprout-chart-4);
43
+ }
44
+ .sprout-sql-viewer [data-tone="5"] {
45
+ --sprout-sql-tone: var(--sprout-chart-5);
46
+ }
47
+
48
+ .sprout-sql-flow .react-flow__node-group {
49
+ pointer-events: none;
50
+ }
51
+
52
+ .sprout-sql-handle.react-flow__handle {
53
+ position: absolute;
54
+ top: 50%;
55
+ width: 6px;
56
+ height: 6px;
57
+ min-width: 0;
58
+ min-height: 0;
59
+ border: 0;
60
+ opacity: 0;
61
+ pointer-events: none;
62
+ }
63
+ .sprout-sql-handle.react-flow__handle-left {
64
+ left: 0;
65
+ transform: translate(-50%, -50%);
66
+ }
67
+ .sprout-sql-handle.react-flow__handle-right {
68
+ right: 0;
69
+ transform: translate(50%, -50%);
70
+ }
71
+
72
+ .sprout-sql-group {
73
+ box-sizing: border-box;
74
+ width: 100%;
75
+ height: 100%;
76
+ border: 1px solid
77
+ color-mix(in oklab, var(--sprout-sql-tone) 45%, var(--sprout-line));
78
+ border-radius: 14px;
79
+ background: color-mix(in oklab, var(--sprout-sql-tone) 6%, transparent);
80
+ }
81
+ .sprout-sql-group-label {
82
+ display: inline-flex;
83
+ align-items: center;
84
+ gap: 8px;
85
+ height: 44px;
86
+ padding: 0 20px;
87
+ color: color-mix(in oklab, var(--sprout-sql-tone) 70%, var(--sprout-text));
88
+ font-size: var(--sprout-text-xs);
89
+ font-weight: 600;
90
+ letter-spacing: 0.06em;
91
+ line-height: 1rem;
92
+ text-transform: uppercase;
93
+ pointer-events: all;
94
+ cursor: grab;
95
+ }
96
+ .sprout-sql-group-count {
97
+ min-width: 18px;
98
+ padding: 0 6px;
99
+ border-radius: 999px;
100
+ background: color-mix(in oklab, var(--sprout-sql-tone) 14%, transparent);
101
+ font-variant-numeric: tabular-nums;
102
+ letter-spacing: 0;
103
+ text-align: center;
104
+ }
105
+
106
+ .sprout-sql-table {
107
+ box-sizing: border-box;
108
+ width: 272px;
109
+ overflow: hidden;
110
+ border: 1px solid var(--sprout-line);
111
+ border-top: 3px solid var(--sprout-sql-tone);
112
+ border-radius: 10px;
113
+ background: var(--sprout-surface);
114
+ color: var(--sprout-text);
115
+ box-shadow: var(--sprout-shadow-control);
116
+ transition:
117
+ opacity var(--sprout-motion-normal) var(--sprout-motion-ease),
118
+ box-shadow var(--sprout-motion-fast) var(--sprout-motion-ease),
119
+ border-color var(--sprout-motion-fast) var(--sprout-motion-ease);
120
+ }
121
+ .sprout-sql-table[data-dimmed] {
122
+ opacity: 0.38;
123
+ }
124
+ .sprout-sql-table[data-active],
125
+ .react-flow__node.dragging .sprout-sql-table {
126
+ box-shadow: var(--sprout-shadow-panel);
127
+ }
128
+ .sprout-sql-table[data-active] {
129
+ border-color: color-mix(
130
+ in oklab,
131
+ var(--sprout-sql-tone) 55%,
132
+ var(--sprout-line)
133
+ );
134
+ }
135
+
136
+ .sprout-sql-table-header {
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ box-sizing: border-box;
141
+ height: 40px;
142
+ padding: 0 12px;
143
+ border-bottom: 1px solid var(--sprout-line);
144
+ background: color-mix(
145
+ in oklab,
146
+ var(--sprout-sql-tone) 9%,
147
+ var(--sprout-surface)
148
+ );
149
+ }
150
+ .sprout-sql-table-title {
151
+ min-width: 0;
152
+ margin: 0;
153
+ overflow: hidden;
154
+ color: var(--sprout-text);
155
+ font-size: var(--sprout-text-sm);
156
+ font-weight: 600;
157
+ line-height: 1.25rem;
158
+ text-overflow: ellipsis;
159
+ white-space: nowrap;
160
+ }
161
+
162
+ .sprout-sql-columns,
163
+ .sprout-sql-keys-list {
164
+ margin: 0;
165
+ padding: 0;
166
+ list-style: none;
167
+ }
168
+ .sprout-sql-column {
169
+ position: relative;
170
+ display: flex;
171
+ align-items: center;
172
+ gap: 8px;
173
+ box-sizing: border-box;
174
+ height: 28px;
175
+ padding: 0 12px;
176
+ font-size: 0.8125rem;
177
+ line-height: 1.25rem;
178
+ }
179
+ .sprout-sql-column + .sprout-sql-column {
180
+ box-shadow: inset 0 1px 0
181
+ color-mix(in oklab, var(--sprout-line) 60%, transparent);
182
+ }
183
+ .sprout-sql-column[data-join] {
184
+ cursor: pointer;
185
+ }
186
+ .sprout-sql-column[data-join]:hover,
187
+ .sprout-sql-column[data-active] {
188
+ background: color-mix(in oklab, var(--sprout-primary) 8%, transparent);
189
+ }
190
+ .sprout-sql-column-icon {
191
+ display: flex;
192
+ flex-shrink: 0;
193
+ justify-content: center;
194
+ width: 12px;
195
+ color: var(--sprout-muted);
196
+ }
197
+ .sprout-sql-column[data-key="primary"] .sprout-sql-column-icon {
198
+ color: var(--sprout-warning);
199
+ }
200
+ .sprout-sql-column[data-join] .sprout-sql-column-icon {
201
+ color: var(--sprout-primary);
202
+ }
203
+ .sprout-sql-column-name {
204
+ flex: 1;
205
+ min-width: 0;
206
+ overflow: hidden;
207
+ text-overflow: ellipsis;
208
+ white-space: nowrap;
209
+ }
210
+ .sprout-sql-column[data-key="primary"] .sprout-sql-column-name {
211
+ font-weight: 600;
212
+ }
213
+ .sprout-sql-column-type {
214
+ flex-shrink: 0;
215
+ max-width: 50%;
216
+ overflow: hidden;
217
+ color: var(--sprout-muted);
218
+ font-family: var(--sprout-sql-mono);
219
+ font-size: 0.6875rem;
220
+ text-overflow: ellipsis;
221
+ white-space: nowrap;
222
+ }
223
+
224
+ .sprout-sql-keys {
225
+ border-top: 1px solid var(--sprout-line);
226
+ background: color-mix(
227
+ in oklab,
228
+ var(--sprout-hover) 40%,
229
+ var(--sprout-surface)
230
+ );
231
+ }
232
+ .sprout-sql-keys-title {
233
+ box-sizing: border-box;
234
+ height: 35px;
235
+ margin: 0;
236
+ padding: 12px 12px 0;
237
+ color: var(--sprout-muted);
238
+ font-size: 0.6875rem;
239
+ font-weight: 600;
240
+ letter-spacing: 0.06em;
241
+ line-height: 1rem;
242
+ text-transform: uppercase;
243
+ }
244
+ .sprout-sql-key {
245
+ display: flex;
246
+ align-items: center;
247
+ gap: 8px;
248
+ box-sizing: border-box;
249
+ height: 26px;
250
+ padding: 0 12px;
251
+ color: var(--sprout-muted);
252
+ font-size: var(--sprout-text-xs);
253
+ }
254
+ .sprout-sql-key > span {
255
+ overflow: hidden;
256
+ color: var(--sprout-text);
257
+ text-overflow: ellipsis;
258
+ white-space: nowrap;
259
+ }
260
+
261
+ .sprout-sql-join {
262
+ transition:
263
+ stroke var(--sprout-motion-fast) var(--sprout-motion-ease),
264
+ opacity var(--sprout-motion-normal) var(--sprout-motion-ease);
265
+ }
266
+ .sprout-sql-flow .sprout-sql-join[data-active] {
267
+ stroke: var(--sprout-primary);
268
+ stroke-width: 1.75;
269
+ }
270
+ .sprout-sql-join[data-dimmed] {
271
+ opacity: 0.25;
272
+ }
273
+ .sprout-sql-joins {
274
+ display: flex;
275
+ flex-direction: column;
276
+ gap: 4px;
277
+ box-sizing: border-box;
278
+ max-width: calc(100% - 88px);
279
+ padding: 8px 10px;
280
+ border: 1px solid
281
+ color-mix(in oklab, var(--sprout-primary) 40%, var(--sprout-line));
282
+ border-radius: 8px;
283
+ background: var(--sprout-surface);
284
+ box-shadow: var(--sprout-shadow-control);
285
+ pointer-events: none;
286
+ }
287
+ .sprout-sql-viewer[data-layout="vertical"] .sprout-sql-joins {
288
+ max-width: calc(100% - 24px);
289
+ }
290
+ .sprout-sql-join-text {
291
+ overflow: hidden;
292
+ color: var(--sprout-text);
293
+ font-family: var(--sprout-sql-mono);
294
+ font-size: var(--sprout-text-xs);
295
+ line-height: 1rem;
296
+ text-overflow: ellipsis;
297
+ white-space: nowrap;
298
+ }
299
+ .sprout-sql-joins-more {
300
+ color: var(--sprout-muted);
301
+ font-size: var(--sprout-text-xs);
302
+ line-height: 1rem;
303
+ }
304
+
305
+ .sprout-sql-more {
306
+ position: relative;
307
+ width: 240px;
308
+ height: 132px;
309
+ }
310
+ .sprout-sql-more-sheet {
311
+ position: absolute;
312
+ inset: 0;
313
+ border: 1px solid var(--sprout-line);
314
+ border-radius: 10px;
315
+ background: var(--sprout-surface);
316
+ }
317
+ .sprout-sql-more-sheet:nth-of-type(1) {
318
+ transform: translate(10px, 10px);
319
+ opacity: 0.5;
320
+ }
321
+ .sprout-sql-more-sheet:nth-of-type(2) {
322
+ transform: translate(5px, 5px);
323
+ opacity: 0.8;
324
+ }
325
+ .sprout-sql-more-button {
326
+ position: absolute;
327
+ inset: 0;
328
+ display: flex;
329
+ flex-direction: column;
330
+ align-items: flex-start;
331
+ justify-content: center;
332
+ gap: 4px;
333
+ box-sizing: border-box;
334
+ padding: 16px 18px;
335
+ border: 1px dashed var(--sprout-border-strong);
336
+ border-radius: 10px;
337
+ background: var(--sprout-surface);
338
+ color: var(--sprout-text);
339
+ font: inherit;
340
+ text-align: left;
341
+ cursor: pointer;
342
+ box-shadow: var(--sprout-shadow-control);
343
+ transition:
344
+ transform var(--sprout-motion-fast) var(--sprout-motion-ease),
345
+ border-color var(--sprout-motion-fast) var(--sprout-motion-ease);
346
+ }
347
+ .sprout-sql-more-button:hover {
348
+ border-color: var(--sprout-primary);
349
+ transform: translate(-2px, -2px);
350
+ }
351
+ .sprout-sql-more-button:focus-visible {
352
+ outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
353
+ outline-offset: 2px;
354
+ }
355
+ .sprout-sql-more-count {
356
+ font-size: 1.125rem;
357
+ font-weight: 600;
358
+ line-height: 1.5rem;
359
+ font-variant-numeric: tabular-nums;
360
+ }
361
+ .sprout-sql-more-names {
362
+ display: -webkit-box;
363
+ overflow: hidden;
364
+ color: var(--sprout-muted);
365
+ font-size: var(--sprout-text-xs);
366
+ line-height: 1rem;
367
+ -webkit-box-orient: vertical;
368
+ -webkit-line-clamp: 2;
369
+ }
370
+ .sprout-sql-more-action {
371
+ margin-top: 6px;
372
+ color: var(--sprout-primary);
373
+ font-size: var(--sprout-text-xs);
374
+ font-weight: 600;
375
+ line-height: 1rem;
376
+ }
377
+
378
+ .sprout-sql-empty {
379
+ margin: auto;
380
+ color: var(--sprout-muted);
381
+ font-size: var(--sprout-text-sm);
382
+ }
383
+
384
+ .sprout-sql-sr-only {
385
+ position: absolute;
386
+ width: 1px;
387
+ height: 1px;
388
+ margin: -1px;
389
+ padding: 0;
390
+ overflow: hidden;
391
+ clip-path: inset(50%);
392
+ white-space: nowrap;
393
+ border: 0;
394
+ }
395
+
396
+ @media (prefers-reduced-motion: reduce) {
397
+ .sprout-sql-table,
398
+ .sprout-sql-join,
399
+ .sprout-sql-more-button {
400
+ transition: none;
401
+ }
402
+ .sprout-sql-more-button:hover {
403
+ transform: none;
404
+ }
405
+ }
406
+ }
@@ -42,7 +42,7 @@
42
42
  --sprout-success-subtle: #e9f5ec;
43
43
  --sprout-warning: #8a4b08;
44
44
  --sprout-warning-subtle: #fff4df;
45
- --sprout-primary-subtle: #e9f5ec;
45
+ --sprout-primary-subtle: #edf7f0;
46
46
  --sprout-secondary: #f0f0f2;
47
47
  --sprout-overlay: rgb(32 33 36 / 0.25);
48
48
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tulipfarm/sprout",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Considered React controls. Built with Base UI and Tailwind CSS.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -36,6 +36,10 @@
36
36
  "types": "./dist/components/accordion.d.ts",
37
37
  "import": "./dist/components/accordion.js"
38
38
  },
39
+ "./agent-fanout": {
40
+ "types": "./dist/components/agent-fanout.d.ts",
41
+ "import": "./dist/components/agent-fanout.js"
42
+ },
39
43
  "./alert": {
40
44
  "types": "./dist/components/alert.d.ts",
41
45
  "import": "./dist/components/alert.js"
@@ -252,6 +256,10 @@
252
256
  "types": "./dist/components/popover.d.ts",
253
257
  "import": "./dist/components/popover.js"
254
258
  },
259
+ "./presence-cursor": {
260
+ "types": "./dist/components/presence-cursor.d.ts",
261
+ "import": "./dist/components/presence-cursor.js"
262
+ },
255
263
  "./progress": {
256
264
  "types": "./dist/components/progress.d.ts",
257
265
  "import": "./dist/components/progress.js"
@@ -292,6 +300,10 @@
292
300
  "types": "./dist/components/schema-diagram.d.ts",
293
301
  "import": "./dist/components/schema-diagram.js"
294
302
  },
303
+ "./sql-viewer": {
304
+ "types": "./dist/components/sql-viewer.d.ts",
305
+ "import": "./dist/components/sql-viewer.js"
306
+ },
295
307
  "./scroll-area": {
296
308
  "types": "./dist/components/scroll-area.d.ts",
297
309
  "import": "./dist/components/scroll-area.js"
@@ -421,12 +433,12 @@
421
433
  "@dnd-kit/utilities": "3.2.2",
422
434
  "@tanstack/react-table": "9.3.1",
423
435
  "@tanstack/react-virtual": "3.14.21",
424
- "@tiptap/core": "3.31.4",
425
- "@tiptap/extension-placeholder": "3.31.4",
426
- "@tiptap/pm": "3.31.4",
427
- "@tiptap/react": "3.31.4",
428
- "@tiptap/starter-kit": "3.31.4",
429
- "@tiptap/suggestion": "3.31.4",
436
+ "@tiptap/core": "3.32.0",
437
+ "@tiptap/extension-placeholder": "3.32.0",
438
+ "@tiptap/pm": "3.32.0",
439
+ "@tiptap/react": "3.32.0",
440
+ "@tiptap/starter-kit": "3.32.0",
441
+ "@tiptap/suggestion": "3.32.0",
430
442
  "@xyflow/react": "12.12.0",
431
443
  "clsx": "^2.1.1",
432
444
  "react-day-picker": "10.0.1",