@shapesos/clay 0.13.1 → 0.15.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.
- package/dist/ai-elements.cjs +982 -0
- package/dist/ai-elements.cjs.map +1 -0
- package/dist/ai-elements.d.cts +164 -0
- package/dist/ai-elements.d.ts +164 -0
- package/dist/ai-elements.js +31 -0
- package/dist/ai-elements.js.map +1 -0
- package/dist/artifacts.cjs +56 -11
- package/dist/artifacts.cjs.map +1 -1
- package/dist/artifacts.js +6 -6
- package/dist/blocks.cjs +83 -28
- package/dist/blocks.cjs.map +1 -1
- package/dist/blocks.css +1 -1
- package/dist/blocks.js +7 -7
- package/dist/button.cjs +27 -17
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +3 -2
- package/dist/chart.js +3 -3
- package/dist/chat.cjs +83 -28
- package/dist/chat.cjs.map +1 -1
- package/dist/chat.js +8 -8
- package/dist/{chunk-YSSLTXZG.js → chunk-3THOTQO3.js} +7 -7
- package/dist/chunk-4VE6ZXXW.js +276 -0
- package/dist/chunk-4VE6ZXXW.js.map +1 -0
- package/dist/{chunk-WPQQVKWY.js → chunk-7OYIDM42.js} +2 -2
- package/dist/{chunk-EDICS62G.js → chunk-B4U37WIH.js} +9 -11
- package/dist/chunk-B4U37WIH.js.map +1 -0
- package/dist/chunk-CYC2YUKU.js +1 -0
- package/dist/chunk-CYC2YUKU.js.map +1 -0
- package/dist/chunk-L75JPWGS.js +1 -0
- package/dist/chunk-L75JPWGS.js.map +1 -0
- package/dist/{chunk-QAK7NM5F.js → chunk-MDAWYZBI.js} +3 -3
- package/dist/{chunk-L6DUGB2E.js → chunk-PGR2MDDU.js} +16 -5
- package/dist/chunk-PGR2MDDU.js.map +1 -0
- package/dist/{chunk-OBOXCBDL.js → chunk-PYDVANWI.js} +58 -13
- package/dist/chunk-PYDVANWI.js.map +1 -0
- package/dist/{chunk-SV24ONND.js → chunk-UXT2H3FM.js} +28 -18
- package/dist/chunk-UXT2H3FM.js.map +1 -0
- package/dist/{chunk-DT44KNCV.js → chunk-XFJ6XMJZ.js} +5 -5
- package/dist/{chunk-QXGYMDIA.js → chunk-YZB6YXKK.js} +4 -4
- package/dist/icon.cjs +56 -11
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.d.cts +11 -2
- package/dist/icon.d.ts +11 -2
- package/dist/icon.js +1 -1
- package/dist/index.cjs +757 -421
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +50 -28
- package/dist/keyboard-shortcut.cjs +15 -4
- package/dist/keyboard-shortcut.cjs.map +1 -1
- package/dist/keyboard-shortcut.d.cts +10 -3
- package/dist/keyboard-shortcut.d.ts +10 -3
- package/dist/keyboard-shortcut.js +1 -1
- package/dist/text-area.cjs +27 -17
- package/dist/text-area.cjs.map +1 -1
- package/dist/text-area.d.cts +2 -24
- package/dist/text-area.d.ts +2 -24
- package/dist/text-area.js +3 -2
- package/dist/tokens.cjs +27 -17
- package/dist/tokens.cjs.map +1 -1
- package/dist/tokens.d.cts +6 -5
- package/dist/tokens.d.ts +6 -5
- package/dist/tokens.js +1 -1
- package/dist/types-CMzZsL_J.d.cts +25 -0
- package/dist/types-CMzZsL_J.d.ts +25 -0
- package/dist/utils.js +3 -3
- package/package.json +6 -1
- package/dist/chunk-EDICS62G.js.map +0 -1
- package/dist/chunk-L6DUGB2E.js.map +0 -1
- package/dist/chunk-OBOXCBDL.js.map +0 -1
- package/dist/chunk-SV24ONND.js.map +0 -1
- /package/dist/{chunk-YSSLTXZG.js.map → chunk-3THOTQO3.js.map} +0 -0
- /package/dist/{chunk-WPQQVKWY.js.map → chunk-7OYIDM42.js.map} +0 -0
- /package/dist/{chunk-QAK7NM5F.js.map → chunk-MDAWYZBI.js.map} +0 -0
- /package/dist/{chunk-DT44KNCV.js.map → chunk-XFJ6XMJZ.js.map} +0 -0
- /package/dist/{chunk-QXGYMDIA.js.map → chunk-YZB6YXKK.js.map} +0 -0
package/dist/chat.js
CHANGED
|
@@ -5,19 +5,19 @@ import {
|
|
|
5
5
|
copyMessageText,
|
|
6
6
|
useChatContext,
|
|
7
7
|
useCopyToClipboard
|
|
8
|
-
} from "./chunk-
|
|
9
|
-
import "./chunk-
|
|
8
|
+
} from "./chunk-3THOTQO3.js";
|
|
9
|
+
import "./chunk-MDAWYZBI.js";
|
|
10
10
|
import "./chunk-NMKKU2UG.js";
|
|
11
|
-
import "./chunk-
|
|
11
|
+
import "./chunk-XFJ6XMJZ.js";
|
|
12
|
+
import "./chunk-PYDVANWI.js";
|
|
12
13
|
import "./chunk-LXYCT4YO.js";
|
|
13
|
-
import "./chunk-
|
|
14
|
+
import "./chunk-OLJIJYB5.js";
|
|
15
|
+
import "./chunk-YZB6YXKK.js";
|
|
14
16
|
import "./chunk-C77QMQNT.js";
|
|
15
|
-
import "./chunk-
|
|
17
|
+
import "./chunk-UXT2H3FM.js";
|
|
18
|
+
import "./chunk-JF3P66JF.js";
|
|
16
19
|
import "./chunk-4MZZH3WX.js";
|
|
17
20
|
import "./chunk-P6GUNIAE.js";
|
|
18
|
-
import "./chunk-OBOXCBDL.js";
|
|
19
|
-
import "./chunk-OLJIJYB5.js";
|
|
20
|
-
import "./chunk-JF3P66JF.js";
|
|
21
21
|
import "./chunk-5WRI5ZAA.js";
|
|
22
22
|
export {
|
|
23
23
|
ChatContext,
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Block,
|
|
3
3
|
BlockServices
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-MDAWYZBI.js";
|
|
5
5
|
import {
|
|
6
6
|
IconCheck,
|
|
7
7
|
IconCopy,
|
|
8
8
|
IconThumbDown,
|
|
9
9
|
IconThumbUp
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-XFJ6XMJZ.js";
|
|
11
|
+
import {
|
|
12
|
+
IconButton
|
|
13
|
+
} from "./chunk-PYDVANWI.js";
|
|
11
14
|
import {
|
|
12
15
|
typographyMixin,
|
|
13
16
|
typographyTypes
|
|
14
|
-
} from "./chunk-
|
|
15
|
-
import {
|
|
16
|
-
IconButton
|
|
17
|
-
} from "./chunk-OBOXCBDL.js";
|
|
17
|
+
} from "./chunk-UXT2H3FM.js";
|
|
18
18
|
import {
|
|
19
19
|
colors
|
|
20
20
|
} from "./chunk-JF3P66JF.js";
|
|
@@ -220,4 +220,4 @@ export {
|
|
|
220
220
|
MESSAGE_ROLE,
|
|
221
221
|
ChatMessage
|
|
222
222
|
};
|
|
223
|
-
//# sourceMappingURL=chunk-
|
|
223
|
+
//# sourceMappingURL=chunk-3THOTQO3.js.map
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
import {
|
|
2
|
+
TextArea
|
|
3
|
+
} from "./chunk-7OYIDM42.js";
|
|
4
|
+
import {
|
|
5
|
+
BUTTON_INTENT,
|
|
6
|
+
BUTTON_SIZE,
|
|
7
|
+
Button
|
|
8
|
+
} from "./chunk-B4U37WIH.js";
|
|
9
|
+
import {
|
|
10
|
+
cn
|
|
11
|
+
} from "./chunk-P6GUNIAE.js";
|
|
12
|
+
|
|
13
|
+
// src/components/ai-elements/prompt-input/prompt-input.tsx
|
|
14
|
+
import { forwardRef, useCallback } from "react";
|
|
15
|
+
|
|
16
|
+
// src/components/ai-elements/prompt-input/types.ts
|
|
17
|
+
var CHAT_STATUS = {
|
|
18
|
+
/** Idle / ready to submit. */
|
|
19
|
+
READY: "ready",
|
|
20
|
+
/** The last submission errored — the button shows a retry affordance. */
|
|
21
|
+
ERROR: "error"
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// src/components/ai-elements/prompt-input/prompt-input.tsx
|
|
25
|
+
import { jsx } from "react/jsx-runtime";
|
|
26
|
+
var PromptInput = ({ className, onSubmit, disabled, children, ...props }) => {
|
|
27
|
+
const handleSubmit = useCallback(
|
|
28
|
+
(event) => {
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
if (disabled) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const textarea = event.currentTarget.querySelector("textarea");
|
|
34
|
+
const text = textarea?.value ?? "";
|
|
35
|
+
if (!text.trim()) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
onSubmit({ text }, event);
|
|
39
|
+
},
|
|
40
|
+
[disabled, onSubmit]
|
|
41
|
+
);
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
"form",
|
|
44
|
+
{
|
|
45
|
+
className: cn(
|
|
46
|
+
"flex w-full flex-col overflow-hidden rounded-xl border bg-background shadow-lg shadow-foreground/5",
|
|
47
|
+
className
|
|
48
|
+
),
|
|
49
|
+
onSubmit: handleSubmit,
|
|
50
|
+
...props,
|
|
51
|
+
children
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
};
|
|
55
|
+
var PromptInputTextarea = forwardRef(
|
|
56
|
+
function PromptInputTextarea2({ className, onKeyDown, placeholder = "What would you like to know?", ...props }, ref) {
|
|
57
|
+
const handleKeyDown = useCallback(
|
|
58
|
+
(event) => {
|
|
59
|
+
onKeyDown?.(event);
|
|
60
|
+
if (event.defaultPrevented) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
event.currentTarget.form?.requestSubmit();
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
[onKeyDown]
|
|
69
|
+
);
|
|
70
|
+
return /* @__PURE__ */ jsx("div", { className: cn("py-3", className), children: /* @__PURE__ */ jsx(TextArea, { ref, className: "px-4", onKeyDown: handleKeyDown, placeholder, ...props }) });
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
var PromptInputFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-1 px-4 pb-3", className), ...props });
|
|
74
|
+
var PromptInputTools = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-1", className), ...props });
|
|
75
|
+
var PromptInputSubmit = ({
|
|
76
|
+
label = "Submit",
|
|
77
|
+
status = CHAT_STATUS.READY,
|
|
78
|
+
disabled,
|
|
79
|
+
className
|
|
80
|
+
}) => {
|
|
81
|
+
const handleClick = useCallback((event) => {
|
|
82
|
+
event.currentTarget.form?.requestSubmit();
|
|
83
|
+
}, []);
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
Button,
|
|
86
|
+
{
|
|
87
|
+
intent: status === CHAT_STATUS.ERROR ? BUTTON_INTENT.ERROR : BUTTON_INTENT.PRIMARY,
|
|
88
|
+
size: BUTTON_SIZE.XS,
|
|
89
|
+
className,
|
|
90
|
+
disabled,
|
|
91
|
+
onClick: handleClick,
|
|
92
|
+
children: label
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
98
|
+
import { useEffect, useRef } from "react";
|
|
99
|
+
|
|
100
|
+
// src/utils/prefers-reduced-motion.ts
|
|
101
|
+
function prefersReducedMotion() {
|
|
102
|
+
return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// src/components/ai-elements/mouse-grid/mouse-grid.tsx
|
|
106
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
107
|
+
function MouseGrid({ glowColor, colorCycleMs = 4e3, autoDrift = false } = {}) {
|
|
108
|
+
const layerRef = useRef(null);
|
|
109
|
+
const glowRef = useRef(null);
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
const driftEnabled = autoDrift && !prefersReducedMotion();
|
|
112
|
+
let raf = 0;
|
|
113
|
+
let driftRaf = 0;
|
|
114
|
+
let lastDriftTime = 0;
|
|
115
|
+
let clientX = 0;
|
|
116
|
+
let clientY = 0;
|
|
117
|
+
let pointerInside = false;
|
|
118
|
+
let centerX = 0;
|
|
119
|
+
let centerY = 0;
|
|
120
|
+
let hasCenter = false;
|
|
121
|
+
function setCenter(x, y) {
|
|
122
|
+
const layer = layerRef.current;
|
|
123
|
+
if (!layer) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
centerX = x;
|
|
127
|
+
centerY = y;
|
|
128
|
+
hasCenter = true;
|
|
129
|
+
layer.style.setProperty("--vibe-mx", `${x}px`);
|
|
130
|
+
layer.style.setProperty("--vibe-my", `${y}px`);
|
|
131
|
+
}
|
|
132
|
+
function flush() {
|
|
133
|
+
raf = 0;
|
|
134
|
+
const layer = layerRef.current;
|
|
135
|
+
if (!layer) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (driftEnabled && !pointerInside) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
const rect = layer.getBoundingClientRect();
|
|
142
|
+
setCenter(clientX - rect.left, clientY - rect.top);
|
|
143
|
+
}
|
|
144
|
+
function onMove(event) {
|
|
145
|
+
clientX = event.clientX;
|
|
146
|
+
clientY = event.clientY;
|
|
147
|
+
const layer = layerRef.current;
|
|
148
|
+
if (layer) {
|
|
149
|
+
const rect = layer.getBoundingClientRect();
|
|
150
|
+
pointerInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
|
|
151
|
+
}
|
|
152
|
+
if (pointerInside) {
|
|
153
|
+
stopDrift();
|
|
154
|
+
} else {
|
|
155
|
+
startDrift();
|
|
156
|
+
}
|
|
157
|
+
if (raf) {
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
raf = requestAnimationFrame(flush);
|
|
161
|
+
}
|
|
162
|
+
function onPointerLeave() {
|
|
163
|
+
pointerInside = false;
|
|
164
|
+
startDrift();
|
|
165
|
+
}
|
|
166
|
+
function drift(time) {
|
|
167
|
+
const delta = lastDriftTime ? time - lastDriftTime : 16.67;
|
|
168
|
+
lastDriftTime = time;
|
|
169
|
+
driftRaf = requestAnimationFrame(drift);
|
|
170
|
+
const layer = layerRef.current;
|
|
171
|
+
if (!layer) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
const { width, height } = layer.getBoundingClientRect();
|
|
175
|
+
if (!hasCenter) {
|
|
176
|
+
centerX = width / 2;
|
|
177
|
+
centerY = height / 2;
|
|
178
|
+
}
|
|
179
|
+
const targetX = width * (0.5 + 0.32 * Math.sin(time * 37e-5) + 0.12 * Math.sin(time * 91e-5));
|
|
180
|
+
const targetY = height * (0.5 + 0.32 * Math.cos(time * 41e-5) + 0.12 * Math.sin(time * 11e-4));
|
|
181
|
+
const alpha = 1 - Math.exp(-25e-4 * delta);
|
|
182
|
+
setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);
|
|
183
|
+
}
|
|
184
|
+
function startDrift() {
|
|
185
|
+
if (!driftEnabled || driftRaf) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
lastDriftTime = 0;
|
|
189
|
+
driftRaf = requestAnimationFrame(drift);
|
|
190
|
+
}
|
|
191
|
+
function stopDrift() {
|
|
192
|
+
if (driftRaf) {
|
|
193
|
+
cancelAnimationFrame(driftRaf);
|
|
194
|
+
driftRaf = 0;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
window.addEventListener("mousemove", onMove, { passive: true });
|
|
198
|
+
document.documentElement.addEventListener("mouseleave", onPointerLeave);
|
|
199
|
+
startDrift();
|
|
200
|
+
return () => {
|
|
201
|
+
window.removeEventListener("mousemove", onMove);
|
|
202
|
+
document.documentElement.removeEventListener("mouseleave", onPointerLeave);
|
|
203
|
+
if (raf) {
|
|
204
|
+
cancelAnimationFrame(raf);
|
|
205
|
+
}
|
|
206
|
+
stopDrift();
|
|
207
|
+
};
|
|
208
|
+
}, [autoDrift]);
|
|
209
|
+
const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];
|
|
210
|
+
const glowColorsKey = JSON.stringify(colorList);
|
|
211
|
+
useEffect(() => {
|
|
212
|
+
const glow = glowRef.current;
|
|
213
|
+
if (!glow) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
const colors = JSON.parse(glowColorsKey).filter(Boolean);
|
|
217
|
+
const staticColor = colors[0];
|
|
218
|
+
if (staticColor) {
|
|
219
|
+
glow.style.setProperty("--vibe-glow-color", staticColor);
|
|
220
|
+
}
|
|
221
|
+
const clearColor = () => glow.style.removeProperty("--vibe-glow-color");
|
|
222
|
+
if (colors.length < 2 || prefersReducedMotion()) {
|
|
223
|
+
return staticColor ? clearColor : void 0;
|
|
224
|
+
}
|
|
225
|
+
let index = 0;
|
|
226
|
+
const raf = requestAnimationFrame(() => glow.style.setProperty("--vibe-glow-cycle", `${colorCycleMs}ms`));
|
|
227
|
+
const timer = setInterval(() => {
|
|
228
|
+
index = (index + 1) % colors.length;
|
|
229
|
+
glow.style.setProperty("--vibe-glow-color", colors[index]);
|
|
230
|
+
}, colorCycleMs);
|
|
231
|
+
return () => {
|
|
232
|
+
cancelAnimationFrame(raf);
|
|
233
|
+
clearInterval(timer);
|
|
234
|
+
glow.style.removeProperty("--vibe-glow-cycle");
|
|
235
|
+
clearColor();
|
|
236
|
+
};
|
|
237
|
+
}, [glowColorsKey, colorCycleMs]);
|
|
238
|
+
return /* @__PURE__ */ jsxs("div", { ref: layerRef, "aria-hidden": "true", className: "vibe-mouse-grid-layer", children: [
|
|
239
|
+
/* @__PURE__ */ jsx2("div", { className: "vibe-mouse-grid" }),
|
|
240
|
+
/* @__PURE__ */ jsx2("div", { ref: glowRef, className: "vibe-mouse-glow" })
|
|
241
|
+
] });
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// src/components/ai-elements/suggestion/suggestion.tsx
|
|
245
|
+
import { useCallback as useCallback2 } from "react";
|
|
246
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
247
|
+
var Suggestions = ({ className, ...props }) => /* @__PURE__ */ jsx3("div", { className: cn("flex flex-wrap items-center justify-center gap-3", className), ...props });
|
|
248
|
+
var Suggestion = ({ suggestion, onClick, className, children, ...props }) => {
|
|
249
|
+
const handleClick = useCallback2(() => onClick?.(suggestion), [onClick, suggestion]);
|
|
250
|
+
return /* @__PURE__ */ jsx3(
|
|
251
|
+
"button",
|
|
252
|
+
{
|
|
253
|
+
type: "button",
|
|
254
|
+
onClick: handleClick,
|
|
255
|
+
className: cn(
|
|
256
|
+
"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
|
|
257
|
+
className
|
|
258
|
+
),
|
|
259
|
+
...props,
|
|
260
|
+
children: children ?? suggestion
|
|
261
|
+
}
|
|
262
|
+
);
|
|
263
|
+
};
|
|
264
|
+
|
|
265
|
+
export {
|
|
266
|
+
CHAT_STATUS,
|
|
267
|
+
PromptInput,
|
|
268
|
+
PromptInputTextarea,
|
|
269
|
+
PromptInputFooter,
|
|
270
|
+
PromptInputTools,
|
|
271
|
+
PromptInputSubmit,
|
|
272
|
+
MouseGrid,
|
|
273
|
+
Suggestions,
|
|
274
|
+
Suggestion
|
|
275
|
+
};
|
|
276
|
+
//# sourceMappingURL=chunk-4VE6ZXXW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ai-elements/prompt-input/prompt-input.tsx","../src/components/ai-elements/prompt-input/types.ts","../src/components/ai-elements/mouse-grid/mouse-grid.tsx","../src/utils/prefers-reduced-motion.ts","../src/components/ai-elements/suggestion/suggestion.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport type { FormEventHandler, KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/button/button\";\nimport { BUTTON_INTENT, BUTTON_SIZE } from \"@/components/button/constants\";\nimport { TextArea } from \"@/components/text-area/text-area\";\nimport { CHAT_STATUS } from \"./types\";\nimport type {\n PromptInputFooterProps,\n PromptInputProps,\n PromptInputSubmitProps,\n PromptInputTextareaProps,\n PromptInputToolsProps,\n} from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Originally vendored from `@vercel/ai-elements`'s `prompt-input` registry entry. Slimmed hard to\n * the creation-surface essentials a consumer composes into a prompt-launcher hero: `PromptInput`\n * (form wrapper), `PromptInputTextarea`, `PromptInputFooter`, `PromptInputTools`, `PromptInputSubmit`.\n *\n * Everything else from the upstream entry is intentionally dropped: the action menu\n * (`PromptInputActionMenu*`), attachment / screenshot actions, the attachments strip, the\n * provider/controller contexts, and the `Select` / `HoverCard` / `Command` / `Tab` families. That\n * also sheds the upstream `nanoid` (id-per-attachment) dependency.\n *\n * Rewiring to clay's single-sourced primitives let this primitive ship with ZERO new runtime\n * dependencies — diverging from the original shared spec, which assumed the kept set would still\n * lean on `@base-ui/react`, `ai`, and `lucide-react`:\n * - upstream `InputGroupButton` (submit) → clay `Button` (filled, `type=\"button\"`, consumer label).\n * - upstream `InputGroupTextarea` → clay `TextArea` (auto-resize, transparent chrome).\n * - `lucide-react` icons → clay's already-bundled `@tabler/icons-react`.\n * - `ai`'s `ChatStatus` → a local ready/error status (see `./types`).\n *\n * Because clay's `Button` always renders `type=\"button\"`, native form submit isn't available;\n * both the Enter-key handler and the submit button trigger `form.requestSubmit()` explicitly. And\n * because clay's `TextArea` doesn't forward a `name` attribute, `PromptInput` reads the textarea's\n * value straight off the DOM at submit time rather than via `FormData` — keeping the form wrapper\n * decoupled from whoever controls the textarea's value.\n *\n * Types live in `./types`.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * Form wrapper for a prompt composer. Renders a bordered, rounded surface; stacks its children\n * (textarea + footer) vertically. Reads the nested textarea's value on submit and forwards it to\n * `onSubmit`. Empty / whitespace-only submissions, and all submissions while `disabled`, are\n * ignored.\n */\nexport const PromptInput = ({ className, onSubmit, disabled, children, ...props }: PromptInputProps) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(\n (event) => {\n event.preventDefault();\n if (disabled) {\n return;\n }\n const textarea = event.currentTarget.querySelector(\"textarea\");\n const text = textarea?.value ?? \"\";\n if (!text.trim()) {\n return;\n }\n onSubmit({ text }, event);\n },\n [disabled, onSubmit]\n );\n\n return (\n <form\n className={cn(\n \"flex w-full flex-col overflow-hidden rounded-xl border bg-background shadow-lg shadow-foreground/5\",\n className\n )}\n onSubmit={handleSubmit}\n {...props}\n >\n {children}\n </form>\n );\n};\n\n/**\n * Auto-resizing textarea for the prompt composer. Wraps clay's `TextArea` and adds Enter-to-submit\n * (Shift+Enter inserts a newline; submission is suppressed while an IME composition is active). The\n * consumer's `onKeyDown` runs first and can `preventDefault()` to opt out of the built-in Enter\n * handling.\n *\n * Horizontal padding lives on the textarea itself (not the wrapper) so its overflow scrollbar sits\n * flush against the wrapper's right edge; the wrapper only owns the vertical padding.\n */\nexport const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(\n function PromptInputTextarea({ className, onKeyDown, placeholder = \"What would you like to know?\", ...props }, ref) {\n const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) {\n return;\n }\n if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) {\n event.preventDefault();\n event.currentTarget.form?.requestSubmit();\n }\n },\n [onKeyDown]\n );\n\n return (\n <div className={cn(\"py-3\", className)}>\n <TextArea ref={ref} className=\"px-4\" onKeyDown={handleKeyDown} placeholder={placeholder} {...props} />\n </div>\n );\n }\n);\n\n/**\n * Footer row beneath the textarea — left tools and the right-aligned submit button. Horizontal\n * padding matches {@link PromptInputTextarea}'s (`px-4`) so the tools/submit align with the\n * textarea's text edges.\n */\nexport const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => (\n <div className={cn(\"flex items-center justify-between gap-1 px-4 pb-3\", className)} {...props} />\n);\n\n/** Left-aligned cluster inside {@link PromptInputFooter} (e.g. the submit hint). */\nexport const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (\n <div className={cn(\"flex min-w-0 items-center gap-1\", className)} {...props} />\n);\n\n/**\n * Submit button for the prompt composer — a filled clay `Button` whose text is the consumer's\n * `label` (pass a localized string for i18n). Always submits the form via `form.requestSubmit()` on\n * click (clay buttons render `type=\"button\"`); the consumer disables it while a generation is in\n * flight. `status` drives the color: `error` renders the error (red) intent, otherwise primary.\n */\nexport const PromptInputSubmit = ({\n label = \"Submit\",\n status = CHAT_STATUS.READY,\n disabled,\n className,\n}: PromptInputSubmitProps) => {\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>((event) => {\n event.currentTarget.form?.requestSubmit();\n }, []);\n\n return (\n <Button\n intent={status === CHAT_STATUS.ERROR ? BUTTON_INTENT.ERROR : BUTTON_INTENT.PRIMARY}\n size={BUTTON_SIZE.XS}\n className={className}\n disabled={disabled}\n onClick={handleClick}\n >\n {label}\n </Button>\n );\n};\n","import type { FormEvent, HTMLAttributes } from \"react\";\n\nimport type { TextAreaProps } from \"@/components/text-area/types\";\n\n/**\n * Submission status the submit button reflects. The composer has no cancellation and no\n * intermediate \"generating\" state of its own — the consumer disables the button while busy — so\n * only the idle and error states are modeled here.\n */\nexport const CHAT_STATUS = {\n /** Idle / ready to submit. */\n READY: \"ready\",\n /** The last submission errored — the button shows a retry affordance. */\n ERROR: \"error\",\n} as const;\n\n/** Submission status the submit button reflects. */\nexport type ChatStatus = (typeof CHAT_STATUS)[keyof typeof CHAT_STATUS];\n\n/** Payload emitted by {@link PromptInput} on submit. v1 carries only text (attachments are cut). */\nexport interface PromptInputMessage {\n /** The current textarea value at submit time. */\n text: string;\n}\n\n/** Props for the {@link PromptInput} form wrapper. */\nexport type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> & {\n /**\n * Fired when the form is submitted (Enter key or the submit button) with non-empty text.\n * Receives the captured message and the underlying form event.\n */\n onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void;\n /**\n * Blocks submission across every trigger (Enter key, submit button, programmatic) when `true` —\n * e.g. while a generation is in flight. The single gate that keeps the Enter path in sync with a\n * disabled submit button. @default false\n */\n disabled?: boolean;\n};\n\n/** Props for {@link PromptInputTextarea} — clay `TextArea` props; `className` styles the wrapper. */\nexport type PromptInputTextareaProps = TextAreaProps;\n\n/** Props for {@link PromptInputFooter}. */\nexport type PromptInputFooterProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputTools}. */\nexport type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputSubmit}. */\nexport interface PromptInputSubmitProps {\n /** Button label — pass a localized string (i18n) from the consumer. @default \"Submit\" */\n label?: string;\n /** Drives the button color: `error` renders the red error intent, otherwise primary. @default \"ready\" */\n status?: ChatStatus;\n /** Whether the button is non-interactive (e.g. empty input or a generation in flight). */\n disabled?: boolean;\n /** Additional CSS class name. */\n className?: string;\n}\n","import { useEffect, useRef } from \"react\";\n\nimport { prefersReducedMotion } from \"@/utils/prefers-reduced-motion\";\n\nimport type { MouseGridProps } from \"./types\";\n\n/**\n * Absolutely-positioned grid backdrop, confined to its nearest positioned ancestor (give the\n * parent `position: relative` + `overflow: hidden` to clip it). The grid is revealed only near the\n * cursor via a radial mask whose center is driven by the `--vibe-mx` / `--vibe-my` CSS vars,\n * updated by a rAF-throttled `mousemove` listener. Renders behind all content (`z-0`) and never\n * blocks pointer events.\n *\n * Cursor coordinates are translated from viewport space (`clientX` / `clientY`) into layer-local\n * space (minus the layer's `getBoundingClientRect()` origin) and written onto the layer element\n * itself — not the document root — so the glow tracks correctly even though the layer no longer\n * fills the viewport. The rect read happens inside the rAF so it batches with paint.\n *\n * Pure `useEffect` + `requestAnimationFrame`, no animation library. The `.vibe-mouse-grid-layer` /\n * `.vibe-mouse-grid` / `.vibe-mouse-glow` styles ship in `@shapesos/clay/blocks/styles.css`.\n *\n * With `autoDrift`, a second rAF loop wanders the glow center along a slow sum-of-sines path\n * whenever the cursor is outside the layer; it yields the moment the cursor re-enters (the\n * mousemove handler owns the vars then) and resumes on exit. Suppressed under `prefers-reduced-motion`.\n *\n * When `glowColor` is an array of 2+ colors, a `setInterval` cycles the `--vibe-glow-color` var\n * through the list every `colorCycleMs`; the `.vibe-mouse-glow` `background-color` transition\n * (duration = `--vibe-glow-cycle`) crossfades between them. Also suppressed under\n * `prefers-reduced-motion` (first color applied flat).\n */\nexport function MouseGrid({ glowColor, colorCycleMs = 4000, autoDrift = false }: MouseGridProps = {}) {\n const layerRef = useRef<HTMLDivElement>(null);\n const glowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n // Drift only runs when `autoDrift` is on AND motion isn't reduced. When it's off, the cursor is\n // tracked normally even outside the layer — so reduced-motion users don't get a frozen glow.\n const driftEnabled = autoDrift && !prefersReducedMotion();\n\n let raf = 0;\n let driftRaf = 0;\n let lastDriftTime = 0;\n let clientX = 0;\n let clientY = 0;\n let pointerInside = false;\n // Last applied glow center (layer-local px). Tracked across both modes so drift can resume from\n // wherever the cursor left off instead of snapping to the wander path's current value.\n let centerX = 0;\n let centerY = 0;\n let hasCenter = false;\n\n function setCenter(x: number, y: number) {\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n centerX = x;\n centerY = y;\n hasCenter = true;\n layer.style.setProperty(\"--vibe-mx\", `${x}px`);\n layer.style.setProperty(\"--vibe-my\", `${y}px`);\n }\n function flush() {\n raf = 0;\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n // While drift is active and the cursor is outside the layer, the drift loop owns the center —\n // don't let the (out-of-bounds) cursor position fight it. Otherwise always track the cursor.\n if (driftEnabled && !pointerInside) {\n return;\n }\n const rect = layer.getBoundingClientRect();\n setCenter(clientX - rect.left, clientY - rect.top);\n }\n function onMove(event: MouseEvent) {\n clientX = event.clientX;\n clientY = event.clientY;\n const layer = layerRef.current;\n if (layer) {\n const rect = layer.getBoundingClientRect();\n pointerInside =\n clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;\n }\n // Run the drift loop only when it has work to do (cursor outside) — pause it while inside.\n if (pointerInside) {\n stopDrift();\n } else {\n startDrift();\n }\n if (raf) {\n return;\n }\n raf = requestAnimationFrame(flush);\n }\n // The cursor can leave the layer without another `mousemove` ever firing — e.g. when the layer\n // fills the viewport (or Storybook's preview iframe) and the pointer exits it entirely. Reset\n // the flag on document exit so drift resumes instead of freezing at the last in-bounds frame.\n function onPointerLeave() {\n pointerInside = false;\n startDrift();\n }\n function drift(time: number) {\n // Frame-rate-independent ease: convert elapsed ms into a per-frame factor so the glow reaches\n // the wander target in the same wall-clock time at 60 Hz and 120 Hz (a fixed factor would be\n // ~2× snappier on high-refresh displays). First frame falls back to a ~60 Hz delta.\n const delta = lastDriftTime ? time - lastDriftTime : 16.67;\n lastDriftTime = time;\n driftRaf = requestAnimationFrame(drift);\n const layer = layerRef.current;\n if (!layer) {\n return;\n }\n const { width, height } = layer.getBoundingClientRect();\n if (!hasCenter) {\n centerX = width / 2;\n centerY = height / 2;\n }\n // Organic wander: two sines per axis, slow + offset, kept inside ~[6%, 94%] of the bounds.\n const targetX = width * (0.5 + 0.32 * Math.sin(time * 0.00037) + 0.12 * Math.sin(time * 0.00091));\n const targetY = height * (0.5 + 0.32 * Math.cos(time * 0.00041) + 0.12 * Math.sin(time * 0.0011));\n // ~0.04 per frame at 60 Hz, but resolution-stable. Lets drift resume continuously from the\n // cursor's exit point with no jump; the target moves far slower, so amplitude is intact.\n const alpha = 1 - Math.exp(-0.0025 * delta);\n setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);\n }\n function startDrift() {\n if (!driftEnabled || driftRaf) {\n return;\n }\n lastDriftTime = 0;\n driftRaf = requestAnimationFrame(drift);\n }\n function stopDrift() {\n if (driftRaf) {\n cancelAnimationFrame(driftRaf);\n driftRaf = 0;\n }\n }\n\n window.addEventListener(\"mousemove\", onMove, { passive: true });\n document.documentElement.addEventListener(\"mouseleave\", onPointerLeave);\n // No pointer has been seen yet → idle, so start drifting immediately when enabled.\n startDrift();\n return () => {\n window.removeEventListener(\"mousemove\", onMove);\n document.documentElement.removeEventListener(\"mouseleave\", onPointerLeave);\n if (raf) {\n cancelAnimationFrame(raf);\n }\n stopDrift();\n };\n }, [autoDrift]);\n\n // Normalize the single `glowColor` prop (a CSS color, a list of colors, or nothing) to an array,\n // then serialize it: an inline array literal is a fresh ref each render, so keying the effect on\n // the serialized content means only an actual color change re-runs it — not unrelated re-renders.\n const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];\n const glowColorsKey = JSON.stringify(colorList);\n\n // Single owner of `--vibe-glow-color`: applies the first/only color flat, and crossfades through\n // the list when there are 2+. Driving it from one effect (rather than a cycle vs. a React inline\n // style) lets teardown reliably remove the var so a stale cycled color can't stick when cycling\n // stops — it reverts to the CSS default instead.\n useEffect(() => {\n const glow = glowRef.current;\n if (!glow) {\n return;\n }\n const colors = (JSON.parse(glowColorsKey) as string[]).filter(Boolean);\n const staticColor = colors[0];\n if (staticColor) {\n // Apply the first/static color flat (cycle duration still 0ms) so it doesn't fade in.\n glow.style.setProperty(\"--vibe-glow-color\", staticColor);\n }\n const clearColor = () => glow.style.removeProperty(\"--vibe-glow-color\");\n if (colors.length < 2 || prefersReducedMotion()) {\n return staticColor ? clearColor : undefined;\n }\n // Enable the crossfade next frame, then advance the color on each interval. The transition\n // duration equals the interval, so the blob is always smoothly in transit between colors.\n let index = 0;\n const raf = requestAnimationFrame(() => glow.style.setProperty(\"--vibe-glow-cycle\", `${colorCycleMs}ms`));\n const timer = setInterval(() => {\n index = (index + 1) % colors.length;\n glow.style.setProperty(\"--vibe-glow-color\", colors[index]);\n }, colorCycleMs);\n return () => {\n cancelAnimationFrame(raf);\n clearInterval(timer);\n glow.style.removeProperty(\"--vibe-glow-cycle\");\n clearColor();\n };\n }, [glowColorsKey, colorCycleMs]);\n\n return (\n <div ref={layerRef} aria-hidden=\"true\" className=\"vibe-mouse-grid-layer\">\n <div className=\"vibe-mouse-grid\" />\n <div ref={glowRef} className=\"vibe-mouse-glow\" />\n </div>\n );\n}\n","/**\n * Whether the user has requested reduced motion via the OS / browser\n * (`(prefers-reduced-motion: reduce)`). SSR-safe — use it to gate any optional animation so it\n * doesn't run for users who've opted out.\n *\n * @returns `true` when reduced motion is requested; `false` otherwise (including non-browser /\n * `matchMedia`-less environments, where there's no preference to honor).\n */\nexport function prefersReducedMotion(): boolean {\n return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n : false;\n}\n","import { useCallback } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { SuggestionProps, SuggestionsProps } from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Vendored + slimmed from `@vercel/ai-elements`'s `suggestion` registry entry. Upstream wraps the\n * pills in a shadcn `ScrollArea` and renders each as a shadcn `Button variant=\"outline\"`; clay has\n * neither, so this ships a dependency-free row (`flex flex-wrap`) of Tailwind-styled pills using\n * clay's named color tokens. Engine note: this is vendored ai-elements chrome, so it's Tailwind —\n * clay's `Button` is styled-components with fixed radii and can't produce this 12px pill.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * A centered, wrapping row of {@link Suggestion} pills — e.g. starter prompts beneath a composer.\n * Compose `Suggestion` children inside.\n */\nexport const Suggestions = ({ className, ...props }: SuggestionsProps) => (\n <div className={cn(\"flex flex-wrap items-center justify-center gap-3\", className)} {...props} />\n);\n\n/**\n * A single tappable suggestion pill. Renders `children` if provided, otherwise the `suggestion`\n * text, and calls `onClick(suggestion)` when clicked.\n */\nexport const Suggestion = ({ suggestion, onClick, className, children, ...props }: SuggestionProps) => {\n const handleClick = useCallback(() => onClick?.(suggestion), [onClick, suggestion]);\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n className={cn(\n \"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40\",\n className\n )}\n {...props}\n >\n {children ?? suggestion}\n </button>\n );\n};\n"],"mappings":"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","names":["PromptInputTextarea","jsx","useCallback","jsx","useCallback"]}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
typographyMixin,
|
|
6
6
|
typographyTypes
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-UXT2H3FM.js";
|
|
8
8
|
import {
|
|
9
9
|
colors
|
|
10
10
|
} from "./chunk-JF3P66JF.js";
|
|
@@ -73,4 +73,4 @@ var TextArea = forwardRef(function TextArea2({ value, onChange, placeholder, max
|
|
|
73
73
|
export {
|
|
74
74
|
TextArea
|
|
75
75
|
};
|
|
76
|
-
//# sourceMappingURL=chunk-
|
|
76
|
+
//# sourceMappingURL=chunk-7OYIDM42.js.map
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
typographyMixin,
|
|
3
|
-
typographyTypes
|
|
4
|
-
} from "./chunk-SV24ONND.js";
|
|
5
1
|
import {
|
|
6
2
|
Icon
|
|
7
3
|
} from "./chunk-OLJIJYB5.js";
|
|
4
|
+
import {
|
|
5
|
+
typographyMixin,
|
|
6
|
+
typographyTypes
|
|
7
|
+
} from "./chunk-UXT2H3FM.js";
|
|
8
8
|
import {
|
|
9
9
|
colors
|
|
10
10
|
} from "./chunk-JF3P66JF.js";
|
|
11
11
|
|
|
12
|
-
// src/components/button/button.tsx
|
|
13
|
-
import { forwardRef } from "react";
|
|
14
|
-
|
|
15
|
-
// src/components/button/button-styles.ts
|
|
16
|
-
import styled, { css } from "styled-components";
|
|
17
|
-
|
|
18
12
|
// src/components/button/constants.ts
|
|
19
13
|
var BUTTON_VARIANT = {
|
|
20
14
|
SOLID: "solid",
|
|
@@ -35,7 +29,11 @@ var ICON_POSITION = {
|
|
|
35
29
|
TRAILING: "trailing"
|
|
36
30
|
};
|
|
37
31
|
|
|
32
|
+
// src/components/button/button.tsx
|
|
33
|
+
import { forwardRef } from "react";
|
|
34
|
+
|
|
38
35
|
// src/components/button/button-styles.ts
|
|
36
|
+
import styled, { css } from "styled-components";
|
|
39
37
|
var intentColors = {
|
|
40
38
|
[BUTTON_INTENT.PRIMARY]: {
|
|
41
39
|
base: colors["brown-100"],
|
|
@@ -174,4 +172,4 @@ export {
|
|
|
174
172
|
ICON_POSITION,
|
|
175
173
|
Button
|
|
176
174
|
};
|
|
177
|
-
//# sourceMappingURL=chunk-
|
|
175
|
+
//# sourceMappingURL=chunk-B4U37WIH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button/constants.ts","../src/components/button/button.tsx","../src/components/button/button-styles.ts"],"sourcesContent":["/** Available visual style variants for the Button component. */\nexport const BUTTON_VARIANT = {\n SOLID: \"solid\",\n OUTLINE: \"outline\",\n GHOST: \"ghost\",\n} as const;\n\n/** Available size presets for the Button component. */\nexport const BUTTON_SIZE = {\n XS: \"xs\",\n S: \"s\",\n M: \"m\",\n} as const;\n\n/** Available semantic intents for the Button component. */\nexport const BUTTON_INTENT = {\n PRIMARY: \"primary\",\n ERROR: \"error\",\n} as const;\n\n/** Available icon positions relative to the label text. */\nexport const ICON_POSITION = {\n LEADING: \"leading\",\n TRAILING: \"trailing\",\n} as const;\n","import { forwardRef } from \"react\";\nimport { Icon } from \"../icon/icon\";\nimport { StyledButton } from \"./button-styles\";\nimport { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT, ICON_POSITION } from \"./constants\";\nimport type { ButtonProps } from \"./types\";\n\n/** A versatile button component with multiple variants and sizes. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n variant = BUTTON_VARIANT.SOLID,\n intent = BUTTON_INTENT.PRIMARY,\n size = BUTTON_SIZE.M,\n icon,\n iconPosition = ICON_POSITION.LEADING,\n disabled = false,\n onClick,\n className,\n \"aria-label\": ariaLabel,\n },\n ref\n) {\n const iconElement = icon ? <Icon icon={icon} size={16} /> : null;\n\n return (\n <StyledButton\n ref={ref}\n type=\"button\"\n $variant={variant}\n $intent={intent}\n $size={size}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n className={className}\n aria-label={ariaLabel}\n >\n {iconPosition === ICON_POSITION.LEADING && iconElement}\n <span>{children}</span>\n {iconPosition === ICON_POSITION.TRAILING && iconElement}\n </StyledButton>\n );\n});\n","import styled, { css } from \"styled-components\";\nimport { colors } from \"../../tokens/colors\";\nimport { typographyMixin, typographyTypes } from \"../../tokens/typography\";\nimport { BUTTON_INTENT, BUTTON_SIZE, BUTTON_VARIANT } from \"./constants\";\nimport type { ButtonIntent, ButtonSize, ButtonVariant } from \"./types\";\n\ninterface IntentColors {\n /** Primary fill / text color. */\n base: string;\n /** Hover fill for solid variant. */\n hover: string;\n /** Muted fill for disabled solid variant. */\n disabledBg: string;\n /** Muted text for disabled state. */\n disabledText: string;\n /** Subtle hover background for outline/ghost variants. */\n subtleHover: string;\n /** Border color for outline variant. */\n border: string;\n /** Muted border for disabled outline variant. */\n disabledBorder: string;\n}\n\nconst intentColors: Record<ButtonIntent, IntentColors> = {\n [BUTTON_INTENT.PRIMARY]: {\n base: colors[\"brown-100\"],\n hover: colors[\"brown-90\"],\n disabledBg: colors[\"brown-20\"],\n disabledText: colors[\"brown-50\"],\n subtleHover: colors[\"brown-20\"],\n border: colors[\"brown-40\"],\n disabledBorder: colors[\"brown-20\"],\n },\n [BUTTON_INTENT.ERROR]: {\n base: colors[\"red-500\"],\n hover: colors[\"red-600\"],\n disabledBg: colors[\"red-100\"],\n disabledText: colors[\"red-200\"],\n subtleHover: colors[\"red-50\"],\n border: colors[\"red-200\"],\n disabledBorder: colors[\"red-100\"],\n },\n};\n\ninterface SizeValues {\n padding: string;\n borderRadius: string;\n gap: string;\n}\n\nconst sizeValues: Record<ButtonSize, SizeValues> = {\n [BUTTON_SIZE.XS]: { padding: \"6px 10px\", borderRadius: \"8px\", gap: \"4px\" },\n [BUTTON_SIZE.S]: { padding: \"8px 12px\", borderRadius: \"10px\", gap: \"6px\" },\n [BUTTON_SIZE.M]: { padding: \"10px 14px\", borderRadius: \"10px\", gap: \"6px\" },\n};\n\nfunction sizeMixin({ $size }: { $size: ButtonSize }): ReturnType<typeof css> {\n const s = sizeValues[$size];\n return css`\n padding: ${s.padding};\n border-radius: ${s.borderRadius};\n gap: ${s.gap};\n `;\n}\n\ninterface VariantColorMap {\n background: string;\n color: string;\n border: string;\n hoverBg: string;\n disabledBg?: string;\n disabledColor: string;\n disabledBorder?: string;\n}\n\nconst variantColorMap: Record<ButtonVariant, (c: IntentColors) => VariantColorMap> = {\n [BUTTON_VARIANT.SOLID]: (c) => ({\n background: c.base,\n color: colors.white,\n border: \"none\",\n hoverBg: c.hover,\n disabledBg: c.disabledBg,\n disabledColor: c.disabledText,\n }),\n [BUTTON_VARIANT.OUTLINE]: (c) => ({\n background: colors.white,\n color: c.base,\n border: `1px solid ${c.border}`,\n hoverBg: c.subtleHover,\n disabledColor: c.disabledText,\n disabledBorder: c.disabledBorder,\n }),\n [BUTTON_VARIANT.GHOST]: (c) => ({\n background: \"transparent\",\n color: c.base,\n border: \"none\",\n hoverBg: c.subtleHover,\n disabledColor: c.disabledText,\n }),\n};\n\nfunction variantMixin({\n $variant,\n $intent,\n}: {\n $variant: ButtonVariant;\n $intent: ButtonIntent;\n}): ReturnType<typeof css> {\n const v = variantColorMap[$variant](intentColors[$intent]);\n\n return css`\n background: ${v.background};\n color: ${v.color};\n border: ${v.border};\n\n &:hover:not(:disabled) {\n background: ${v.hoverBg};\n }\n\n &:disabled {\n color: ${v.disabledColor};\n ${v.disabledBg ? `background: ${v.disabledBg};` : \"\"}\n ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : \"\"}\n }\n `;\n}\n\n/** Styled button element with variant, intent, and size transient props. */\nexport const StyledButton = styled.button<{\n $variant: ButtonVariant;\n $intent: ButtonIntent;\n $size: ButtonSize;\n}>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n ${typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM)};\n transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ${sizeMixin}\n ${variantMixin}\n`;\n"],"mappings":"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","names":["Button"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-CYC2YUKU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-L75JPWGS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -4,11 +4,11 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
ArtifactServices,
|
|
6
6
|
artifactToClipboardText
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-XFJ6XMJZ.js";
|
|
8
8
|
import {
|
|
9
9
|
typographyMixin,
|
|
10
10
|
typographyTypes
|
|
11
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-UXT2H3FM.js";
|
|
12
12
|
import {
|
|
13
13
|
colors
|
|
14
14
|
} from "./chunk-JF3P66JF.js";
|
|
@@ -247,4 +247,4 @@ export {
|
|
|
247
247
|
BlockServices,
|
|
248
248
|
Block
|
|
249
249
|
};
|
|
250
|
-
//# sourceMappingURL=chunk-
|
|
250
|
+
//# sourceMappingURL=chunk-MDAWYZBI.js.map
|
|
@@ -10,9 +10,9 @@ import styled, { css } from "styled-components";
|
|
|
10
10
|
|
|
11
11
|
// src/components/keyboard-shortcut/types.ts
|
|
12
12
|
var KEYBOARD_SHORTCUT_VARIANTS = {
|
|
13
|
-
/** Outlined keys with a subtle border —
|
|
13
|
+
/** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */
|
|
14
14
|
OUTLINED: "outlined",
|
|
15
|
-
/** Filled keys with a solid background —
|
|
15
|
+
/** Filled keys with a solid background — for emphasis. */
|
|
16
16
|
FILLED: "filled"
|
|
17
17
|
};
|
|
18
18
|
|
|
@@ -27,6 +27,16 @@ var variantStyles = {
|
|
|
27
27
|
color: ${colors["brown-10"]};
|
|
28
28
|
`
|
|
29
29
|
};
|
|
30
|
+
var adaptiveStyles = {
|
|
31
|
+
[KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`
|
|
32
|
+
border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
|
|
33
|
+
color: currentColor;
|
|
34
|
+
`,
|
|
35
|
+
[KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`
|
|
36
|
+
background: color-mix(in oklch, currentColor 12%, transparent);
|
|
37
|
+
color: currentColor;
|
|
38
|
+
`
|
|
39
|
+
};
|
|
30
40
|
var Wrapper = styled.div`
|
|
31
41
|
display: inline-flex;
|
|
32
42
|
align-items: center;
|
|
@@ -38,7 +48,7 @@ var Key = styled.kbd`
|
|
|
38
48
|
justify-content: center;
|
|
39
49
|
padding: 2px;
|
|
40
50
|
border-radius: 6px;
|
|
41
|
-
${({ $variant }) => variantStyles[$variant]};
|
|
51
|
+
${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};
|
|
42
52
|
`;
|
|
43
53
|
|
|
44
54
|
// src/components/keyboard-shortcut/keyboard-shortcut.tsx
|
|
@@ -46,9 +56,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
46
56
|
function KeyboardShortcut({
|
|
47
57
|
keys,
|
|
48
58
|
variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
|
|
59
|
+
adaptive = false,
|
|
49
60
|
className
|
|
50
61
|
}) {
|
|
51
|
-
return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ jsx(Key, { $variant: variant, children: /* @__PURE__ */ jsx(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
|
|
62
|
+
return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ jsx(Key, { $variant: variant, $adaptive: adaptive, children: /* @__PURE__ */ jsx(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
|
|
52
63
|
}
|
|
53
64
|
|
|
54
65
|
// src/components/keyboard-shortcut/icons/icon-ctrl.tsx
|
|
@@ -76,4 +87,4 @@ export {
|
|
|
76
87
|
KeyboardShortcut,
|
|
77
88
|
IconCtrl
|
|
78
89
|
};
|
|
79
|
-
//# sourceMappingURL=chunk-
|
|
90
|
+
//# sourceMappingURL=chunk-PGR2MDDU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/keyboard-shortcut/keyboard-shortcut-styles.ts","../src/components/keyboard-shortcut/types.ts","../src/components/keyboard-shortcut/keyboard-shortcut.tsx","../src/components/keyboard-shortcut/icons/icon-ctrl.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { colors } from \"../../tokens/colors\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutVariant } from \"./types\";\n\n// Fixed-color treatments (default) — tuned for dark surfaces / app chrome.\nconst variantStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n border: 1px solid ${colors[\"white-alpha-40\"]};\n color: ${colors[\"brown-10\"]};\n `,\n [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n background: ${colors[\"brown-80\"]};\n color: ${colors[\"brown-10\"]};\n `,\n};\n\n// `adaptive` treatments — border/fill + glyph follow the surrounding text color (currentColor) so\n// the chip reads on any surface (light or dark). Selected when the `adaptive` prop is set.\nconst adaptiveStyles: Record<KeyboardShortcutVariant, ReturnType<typeof css>> = {\n [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`\n border: 1px solid color-mix(in oklch, currentColor 40%, transparent);\n color: currentColor;\n `,\n [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`\n background: color-mix(in oklch, currentColor 12%, transparent);\n color: currentColor;\n `,\n};\n\nexport const Wrapper = styled.div`\n display: inline-flex;\n align-items: center;\n gap: 2px;\n`;\n\nexport const Key = styled.kbd<{ $variant: KeyboardShortcutVariant; $adaptive: boolean }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n border-radius: 6px;\n ${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};\n`;\n","import type { ComponentType, SVGProps } from \"react\";\n\n/** An SVG icon component representing a single keyboard key (e.g., Cmd, Shift, a letter). */\nexport type KeyIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\n/** Available visual variants for the keyboard shortcut display. */\nexport const KEYBOARD_SHORTCUT_VARIANTS = {\n /** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */\n OUTLINED: \"outlined\",\n /** Filled keys with a solid background — for emphasis. */\n FILLED: \"filled\",\n} as const;\n\n/** Visual variant for the KeyboardShortcut component. */\nexport type KeyboardShortcutVariant = (typeof KEYBOARD_SHORTCUT_VARIANTS)[keyof typeof KEYBOARD_SHORTCUT_VARIANTS];\n\n/** Props for the KeyboardShortcut display component. */\nexport interface KeyboardShortcutProps {\n /** Ordered array of key icon components representing the shortcut (e.g., `[IconCommand, IconLetterK]` for ⌘K). */\n keys: KeyIcon[];\n /** Visual style variant. @default \"outlined\" */\n variant?: KeyboardShortcutVariant;\n /**\n * When true, the border + glyph (outlined) or fill + glyph (filled) follow the surrounding text\n * color (`currentColor`) instead of fixed tokens, so the chip reads on any surface — light or\n * dark. Use on surfaces where the fixed-color variants wouldn't read (e.g. a prompt-launcher hero\n * on a light backdrop). @default false\n */\n adaptive?: boolean;\n /** Additional CSS class name. */\n className?: string;\n}\n","import type { ReactElement } from \"react\";\n\nimport { Icon } from \"../icon/icon\";\nimport { Key, Wrapper } from \"./keyboard-shortcut-styles\";\nimport { KEYBOARD_SHORTCUT_VARIANTS } from \"./types\";\nimport type { KeyboardShortcutProps } from \"./types\";\n\nexport function KeyboardShortcut({\n keys,\n variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,\n adaptive = false,\n className,\n}: KeyboardShortcutProps): ReactElement {\n return (\n <Wrapper className={className}>\n {keys.map((KeyComponent, index) => (\n <Key key={index} $variant={variant} $adaptive={adaptive}>\n <Icon icon={KeyComponent} size={12} />\n </Key>\n ))}\n </Wrapper>\n );\n}\n","import type { ReactElement, SVGProps } from \"react\";\n\nexport function IconCtrl(props: SVGProps<SVGSVGElement>): ReactElement {\n const { width = 24, height = 24, ...rest } = props;\n\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={width} height={height} fill=\"none\" {...rest}>\n <text\n x=\"50%\"\n y=\"50%\"\n dominantBaseline=\"central\"\n textAnchor=\"middle\"\n fill=\"currentColor\"\n fontFamily=\"Geist, sans-serif\"\n fontWeight={300}\n fontSize={14}\n >\n Ctrl\n </text>\n </svg>\n );\n}\n"],"mappings":";;;;;;;;AAAA,OAAO,UAAU,WAAW;;;ACMrB,IAAM,6BAA6B;AAAA;AAAA,EAExC,UAAU;AAAA;AAAA,EAEV,QAAQ;AACV;;;ADJA,IAAM,gBAAyE;AAAA,EAC7E,CAAC,2BAA2B,QAAQ,GAAG;AAAA,wBACjB,OAAO,gBAAgB,CAAC;AAAA,aACnC,OAAO,UAAU,CAAC;AAAA;AAAA,EAE7B,CAAC,2BAA2B,MAAM,GAAG;AAAA,kBACrB,OAAO,UAAU,CAAC;AAAA,aACvB,OAAO,UAAU,CAAC;AAAA;AAE/B;AAIA,IAAM,iBAA0E;AAAA,EAC9E,CAAC,2BAA2B,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,EAIvC,CAAC,2BAA2B,MAAM,GAAG;AAAA;AAAA;AAAA;AAIvC;AAEO,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtB,CAAC,EAAE,UAAU,UAAU,OAAO,YAAY,iBAAiB,eAAe,QAAQ,CAAC;AAAA;;;AE1B7E;AAVH,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,UAAU,2BAA2B;AAAA,EACrC,WAAW;AAAA,EACX;AACF,GAAwC;AACtC,SACE,oBAAC,WAAQ,WACN,eAAK,IAAI,CAAC,cAAc,UACvB,oBAAC,OAAgB,UAAU,SAAS,WAAW,UAC7C,8BAAC,QAAK,MAAM,cAAc,MAAM,IAAI,KAD5B,KAEV,CACD,GACH;AAEJ;;;ACfM,gBAAAA,YAAA;AALC,SAAS,SAAS,OAA8C;AACrE,QAAM,EAAE,QAAQ,IAAI,SAAS,IAAI,GAAG,KAAK,IAAI;AAE7C,SACE,gBAAAA,KAAC,SAAI,OAAM,8BAA6B,SAAQ,aAAY,OAAc,QAAgB,MAAK,QAAQ,GAAG,MACxG,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,GAAE;AAAA,MACF,kBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,MAAK;AAAA,MACL,YAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MACX;AAAA;AAAA,EAED,GACF;AAEJ;","names":["jsx"]}
|