@moldable-ai/ui 0.2.24 → 0.2.26
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/catalog/core-foundation-stories.d.ts.map +1 -1
- package/dist/catalog/core-foundation-stories.js +2 -2
- package/dist/components/chat/chat-input.d.ts.map +1 -1
- package/dist/components/chat/chat-input.js +1 -1
- package/dist/components/chat/chat-message.js +1 -1
- package/dist/components/chat/index.d.ts +1 -0
- package/dist/components/chat/index.d.ts.map +1 -1
- package/dist/components/chat/index.js +1 -0
- package/dist/components/chat/orb-materials.d.ts +14 -0
- package/dist/components/chat/orb-materials.d.ts.map +1 -0
- package/dist/components/chat/orb-materials.js +340 -0
- package/dist/components/chat/voice-orb-shaders.d.ts +1 -1
- package/dist/components/chat/voice-orb-shaders.d.ts.map +1 -1
- package/dist/components/chat/voice-orb-shaders.js +11 -162
- package/dist/components/chat/voice-orb.d.ts.map +1 -1
- package/dist/components/chat/voice-orb.js +2 -1
- package/dist/components/native-capabilities/shortcut-recorder.js +1 -1
- package/dist/components/rich-media-player.js +1 -1
- package/dist/components/ui/app-frame.d.ts +1 -1
- package/dist/components/ui/app-frame.d.ts.map +1 -1
- package/dist/components/ui/app-frame.js +7 -39
- package/dist/components/ui/button-group.d.ts +1 -1
- package/dist/components/ui/button-group.js +1 -1
- package/dist/components/ui/button.d.ts +2 -2
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/checkbox.js +1 -1
- package/dist/components/ui/collapsible.js +1 -1
- package/dist/components/ui/combobox.js +1 -1
- package/dist/components/ui/command.d.ts.map +1 -1
- package/dist/components/ui/command.js +10 -2
- package/dist/components/ui/date-field.d.ts +1 -1
- package/dist/components/ui/date-field.js +1 -1
- package/dist/components/ui/dialog.d.ts.map +1 -1
- package/dist/components/ui/dialog.js +3 -1
- package/dist/components/ui/input-group.d.ts +2 -2
- package/dist/components/ui/input-group.d.ts.map +1 -1
- package/dist/components/ui/input-otp.js +1 -1
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/inspector.js +3 -3
- package/dist/components/ui/menubar.js +1 -1
- package/dist/components/ui/number-input.js +1 -1
- package/dist/components/ui/panel.d.ts +2 -2
- package/dist/components/ui/panel.js +2 -2
- package/dist/components/ui/radio-group.js +1 -1
- package/dist/components/ui/select.js +1 -1
- package/dist/components/ui/switch.js +1 -1
- package/dist/components/ui/toolbar.d.ts +15 -4
- package/dist/components/ui/toolbar.d.ts.map +1 -1
- package/dist/components/ui/toolbar.js +16 -5
- package/dist/components/ui/window-titlebar.d.ts +8 -0
- package/dist/components/ui/window-titlebar.d.ts.map +1 -0
- package/dist/components/ui/window-titlebar.js +40 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/lib/commands.d.ts +29 -0
- package/dist/lib/commands.d.ts.map +1 -1
- package/dist/lib/commands.js +28 -0
- package/docs/app-anatomy.md +9 -7
- package/docs/standalone-app-windows.md +12 -8
- package/package.json +2 -2
- package/src/components/ui/app-frame.md +6 -8
- package/src/components/ui/toolbar.md +14 -1
- package/src/styles/index.css +28 -0
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { defaultOrbMaterialGlsl } from './orb-materials.js';
|
|
1
2
|
export const voiceOrbVertexShader = `
|
|
2
3
|
attribute vec2 a_position;
|
|
3
4
|
varying vec2 v_uv;
|
|
@@ -7,7 +8,12 @@ void main() {
|
|
|
7
8
|
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
8
9
|
}
|
|
9
10
|
`;
|
|
10
|
-
|
|
11
|
+
// The fragment shader is COMPOSED: prelude (uniforms + helpers) + the
|
|
12
|
+
// DEFAULT material chunk from orb-materials.ts + the shape main. The
|
|
13
|
+
// material lives in the registry so the live orb and the desktop's
|
|
14
|
+
// spawn bodies are the same function by construction — they can never
|
|
15
|
+
// drift apart (Rob, 2026-07-27).
|
|
16
|
+
const voiceOrbFragmentPrelude = `
|
|
11
17
|
precision highp float;
|
|
12
18
|
|
|
13
19
|
varying vec2 v_uv;
|
|
@@ -147,7 +153,8 @@ float cnoise(vec3 point) {
|
|
|
147
153
|
vec2 noiseYZ = mix(noiseZ.xy, noiseZ.zw, fadePoint.y);
|
|
148
154
|
return 2.2 * mix(noiseYZ.x, noiseYZ.y, fadePoint.x);
|
|
149
155
|
}
|
|
150
|
-
|
|
156
|
+
`;
|
|
157
|
+
const voiceOrbFragmentMain = `
|
|
151
158
|
void main() {
|
|
152
159
|
vec2 st = v_uv - 0.5;
|
|
153
160
|
st.x *= u_resolution.x / u_resolution.y;
|
|
@@ -188,168 +195,10 @@ void main() {
|
|
|
188
195
|
float edge = 1.0 - smoothstep(-edgeWidth, edgeWidth, distanceToEdge);
|
|
189
196
|
|
|
190
197
|
vec2 uv = lifted / (2.0 * radius) + 0.5;
|
|
191
|
-
|
|
192
|
-
float time = animatedTime * 0.34;
|
|
193
|
-
float noiseX = cnoise(vec3(
|
|
194
|
-
uv + vec2(0.0, 74.8572),
|
|
195
|
-
(time + u_cumulativeAudio.x * 0.05 * soundScale) * 0.3
|
|
196
|
-
));
|
|
197
|
-
float noiseY = cnoise(vec3(
|
|
198
|
-
uv + vec2(203.91282, 10.0),
|
|
199
|
-
(time + u_cumulativeAudio.z * 0.05 * soundScale) * 0.3
|
|
200
|
-
));
|
|
201
|
-
uv += vec2(noiseX * 2.0, noiseY) * 0.19;
|
|
202
|
-
|
|
203
|
-
float voiceWarpX = cnoise(vec3(
|
|
204
|
-
uv * 3.1 + vec2(0.0, 17.3),
|
|
205
|
-
u_cumulativeAudio.x * 0.085 + u_cumulativeAudio.z * 0.035
|
|
206
|
-
));
|
|
207
|
-
float voiceWarpY = cnoise(vec3(
|
|
208
|
-
uv * 3.4 + vec2(31.7, 0.0),
|
|
209
|
-
u_cumulativeAudio.y * 0.075 + u_cumulativeAudio.w * 0.045
|
|
210
|
-
));
|
|
211
|
-
uv += vec2(voiceWarpX, voiceWarpY) * audioEnergy * 0.04;
|
|
212
|
-
uv.y +=
|
|
213
|
-
sin(uv.x * 5.4 + u_cumulativeAudio.w * 0.19) *
|
|
214
|
-
audioEnergy *
|
|
215
|
-
0.016;
|
|
216
|
-
|
|
217
|
-
float watercolor =
|
|
218
|
-
cnoise(vec3(uv * 18.0 + vec2(344.91282, 0.0), time * 0.3)) +
|
|
219
|
-
cnoise(vec3(uv * 39.6 + vec2(723.937, 0.0), time * 0.4)) * 0.5;
|
|
220
|
-
uv += watercolor * 0.006;
|
|
221
|
-
|
|
222
|
-
float textureA = noise(
|
|
223
|
-
uv * 22.0 + vec2(time * 0.08, u_cumulativeAudio.x * 0.025)
|
|
224
|
-
);
|
|
225
|
-
float textureB = noise(
|
|
226
|
-
vec2(1.0 - uv.x, uv.y) * 41.0 +
|
|
227
|
-
vec2(u_cumulativeAudio.z * 0.018, -time * 0.11)
|
|
228
|
-
);
|
|
229
|
-
float texture = mix(
|
|
230
|
-
textureA,
|
|
231
|
-
textureB,
|
|
232
|
-
sin(time + u_cumulativeAudio.w * 0.12) * 0.5 + 0.5
|
|
233
|
-
) - 0.5;
|
|
234
|
-
uv += texture * (0.012 + audioEnergy * 0.004);
|
|
235
|
-
|
|
236
|
-
uv.y = 1.0 - uv.y;
|
|
237
|
-
vec2 centeredUv = uv - 0.5;
|
|
238
|
-
float angle = -0.16;
|
|
239
|
-
uv = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * centeredUv + 0.5;
|
|
240
|
-
uv.y -= 0.03;
|
|
241
|
-
|
|
242
|
-
vec2 stNoise = uv * 1.25;
|
|
243
|
-
vec2 q = vec2(
|
|
244
|
-
fbm(
|
|
245
|
-
stNoise * 0.5 +
|
|
246
|
-
0.075 * (time + u_cumulativeAudio.w * 0.175 * soundScale)
|
|
247
|
-
),
|
|
248
|
-
fbm(
|
|
249
|
-
stNoise * 0.5 +
|
|
250
|
-
0.075 * (time + u_cumulativeAudio.x * 0.136 * soundScale)
|
|
251
|
-
)
|
|
252
|
-
);
|
|
253
|
-
vec2 r = vec2(
|
|
254
|
-
fbm(
|
|
255
|
-
stNoise + q + vec2(0.3, 9.2) +
|
|
256
|
-
0.15 * (time + u_cumulativeAudio.y * 0.234 * soundScale)
|
|
257
|
-
),
|
|
258
|
-
fbm(
|
|
259
|
-
stNoise + q + vec2(8.3, 0.8) +
|
|
260
|
-
0.126 * (time + u_cumulativeAudio.z * 0.165 * soundScale)
|
|
261
|
-
)
|
|
262
|
-
);
|
|
263
|
-
float field = fbm(stNoise + r - q);
|
|
264
|
-
float fullField = pow(
|
|
265
|
-
((field + 0.6 * field * field + 0.7 * field) + 0.5) * 0.5,
|
|
266
|
-
0.55
|
|
267
|
-
);
|
|
268
|
-
|
|
269
|
-
vec3 mainColor = mix(
|
|
270
|
-
vec3(0.94, 0.965, 1.0),
|
|
271
|
-
vec3(1.0, 0.99, 0.96),
|
|
272
|
-
u_micLevel
|
|
273
|
-
);
|
|
274
|
-
vec3 lowColor = vec3(0.36, 0.34, 0.96);
|
|
275
|
-
vec3 midColor = mix(
|
|
276
|
-
vec3(0.57, 0.64, 1.0),
|
|
277
|
-
vec3(0.96, 0.92, 1.0),
|
|
278
|
-
u_micLevel
|
|
279
|
-
);
|
|
280
|
-
vec3 highColor = vec3(1.0, 0.99, 0.97);
|
|
281
|
-
|
|
282
|
-
vec3 offsets = vec3(
|
|
283
|
-
u_cumulativeAudio.x * 0.15 * soundScale,
|
|
284
|
-
-u_cumulativeAudio.y * 0.5 * soundScale,
|
|
285
|
-
u_cumulativeAudio.z * 1.5 * soundScale
|
|
286
|
-
);
|
|
287
|
-
|
|
288
|
-
vec2 lowUv = uv + vec2((fullField - 0.5) * 1.2, 0.025);
|
|
289
|
-
float lowNoise = noise(
|
|
290
|
-
lowUv * 2.0 + vec2(sin(offsets.x * 0.25), time * 0.5 + offsets.x)
|
|
291
|
-
) * 2.0;
|
|
292
|
-
float lowMask = smoothstep(
|
|
293
|
-
lowNoise - 1.8,
|
|
294
|
-
lowNoise + 1.8,
|
|
295
|
-
((lowUv.y - 0.5) * (5.0 - u_audio.x * 0.05 * soundScale)) + 0.5
|
|
296
|
-
);
|
|
297
|
-
|
|
298
|
-
vec2 midUv = uv + vec2((fullField - 0.5) * 0.85, 0.025);
|
|
299
|
-
float midNoise = noise(
|
|
300
|
-
midUv * 4.0 +
|
|
301
|
-
vec2(sin(offsets.y * 0.15) * 2.4 + 293.0, time + offsets.y * 0.5)
|
|
302
|
-
) * 2.0;
|
|
303
|
-
float midMask = smoothstep(
|
|
304
|
-
midNoise - ((0.9 + u_audio.y * 0.4) * 1.5),
|
|
305
|
-
midNoise + ((0.9 + u_audio.y * 0.8) * 1.5),
|
|
306
|
-
((midUv.y - 0.6) * (5.0 - u_audio.y * 0.75)) + 0.5
|
|
307
|
-
);
|
|
308
|
-
|
|
309
|
-
vec2 highUv = uv + vec2((fullField - 0.5) * 1.1);
|
|
310
|
-
float highNoise = noise(
|
|
311
|
-
highUv * 6.0 +
|
|
312
|
-
vec2(sin(offsets.z * 0.1) * 2.4 + 153.0, time * 1.2 + offsets.z * 0.8)
|
|
313
|
-
) * 2.0;
|
|
314
|
-
float highMask = smoothstep(
|
|
315
|
-
highNoise - 1.05,
|
|
316
|
-
highNoise + 1.05,
|
|
317
|
-
((highUv.y - 0.9) * 6.0) + 0.5
|
|
318
|
-
);
|
|
319
|
-
|
|
320
|
-
lowMask = pow(lowMask, 0.8);
|
|
321
|
-
midMask = pow(midMask, 0.9);
|
|
322
|
-
vec3 color = blendLinearBurn(mainColor, lowColor, 1.0 - lowMask);
|
|
323
|
-
color = blendLinearBurn(
|
|
324
|
-
color,
|
|
325
|
-
mix(mainColor, midColor, 1.0 - midMask),
|
|
326
|
-
lowMask
|
|
327
|
-
);
|
|
328
|
-
color = mix(
|
|
329
|
-
color,
|
|
330
|
-
mix(mainColor, highColor, 1.0 - highMask),
|
|
331
|
-
lowMask * midMask
|
|
332
|
-
);
|
|
333
|
-
|
|
334
|
-
float fineNoise = fbm(
|
|
335
|
-
uv * 12.0 + vec2(time * 0.13, -time * 0.09) + r * 0.4
|
|
336
|
-
);
|
|
337
|
-
color = mix(
|
|
338
|
-
color,
|
|
339
|
-
highColor,
|
|
340
|
-
smoothstep(0.58, 0.9, fineNoise) * (0.035 + audioEnergy * 0.025)
|
|
341
|
-
);
|
|
342
|
-
color = mix(
|
|
343
|
-
color,
|
|
344
|
-
lowColor,
|
|
345
|
-
smoothstep(0.42, 0.12, fineNoise) * 0.018
|
|
346
|
-
);
|
|
347
|
-
|
|
348
|
-
float luminance = dot(color, vec3(0.299, 0.587, 0.114));
|
|
349
|
-
color = mix(color, vec3(luminance), u_stateMuted * 0.72);
|
|
350
|
-
color = mix(color, vec3(1.0, 0.35, 0.31), u_stateError * 0.58);
|
|
198
|
+
vec3 color = orbMaterial(uv);
|
|
351
199
|
|
|
352
200
|
float alpha = edge * smoothstep(0.0, 0.18, stateAmount + 0.3);
|
|
353
201
|
gl_FragColor = vec4(color, alpha);
|
|
354
202
|
}
|
|
355
203
|
`;
|
|
204
|
+
export const voiceOrbFragmentShader = voiceOrbFragmentPrelude + defaultOrbMaterialGlsl + voiceOrbFragmentMain;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"voice-orb.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"voice-orb.d.ts","sourceRoot":"","sources":["../../../src/components/chat/voice-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAGnB,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,aAAa,CAAA;IACpB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,iEAAiE;IACjE,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACrD,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAa,EACb,WAAW,EACX,aAAa,EACb,iBAAqB,EACrB,aAAa,EACb,aAAa,EACb,IAAU,EACV,IAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAkFf"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useRef } from 'react';
|
|
4
4
|
import { cn } from '../../lib/utils.js';
|
|
5
|
+
import { defaultOrbMaterialGlow } from './orb-materials.js';
|
|
5
6
|
import { VoiceOrbStreamAnalyser } from './voice-orb-audio.js';
|
|
6
7
|
import { VoiceOrbRenderer } from './voice-orb-renderer.js';
|
|
7
8
|
import { getVoiceOrbStateLabel, normalizeVoiceOrbAudioLevels, } from './voice-orb-types.js';
|
|
@@ -61,7 +62,7 @@ export function VoiceOrb({ state, stream = null, audioLevels, onAudioLevels, pre
|
|
|
61
62
|
}, [reducedMotion]);
|
|
62
63
|
return (_jsx("div", { role: "img", "aria-label": label ?? getVoiceOrbStateLabel(state), "data-slot": "voice-orb", "data-state": state, className: cn('relative shrink-0', className), style: { width: size, height: size, ...style }, ...props, children: _jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className: "pointer-events-none absolute -inset-5 size-[calc(100%+2.5rem)] max-w-none", style: {
|
|
63
64
|
filter: glow
|
|
64
|
-
?
|
|
65
|
+
? `drop-shadow(0 0 4px ${defaultOrbMaterialGlow})`
|
|
65
66
|
: undefined,
|
|
66
67
|
} }) }));
|
|
67
68
|
}
|
|
@@ -212,6 +212,6 @@ function ShortcutRecorder({ value, defaultValue = null, onChange, onTrigger, dis
|
|
|
212
212
|
? 'Recording shortcut, press keys'
|
|
213
213
|
: shortcut
|
|
214
214
|
? `Shortcut ${shortcut}, click to re-record`
|
|
215
|
-
: 'Record shortcut', onClick: () => setRecording(true), onBlur: () => setRecording(false), className: cn('border-input dark:bg-input/30 shadow-xs rounded-control text-ui-body
|
|
215
|
+
: 'Record shortcut', onClick: () => setRecording(true), onBlur: () => setRecording(false), className: cn('border-input dark:bg-input/30 shadow-xs rounded-control text-ui-body h-control-md gap-control-gap px-control-inline flex w-full min-w-0 items-center border bg-transparent text-left outline-none transition-[color,box-shadow]', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', recording && 'border-ring ring-ring ring-2', disabled && 'pointer-events-none cursor-not-allowed opacity-50', shortcut && !recording && 'pr-9'), children: recording ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-1.5 shrink-0", children: [_jsx("span", { className: "bg-destructive rounded-pill absolute inline-flex h-full w-full animate-ping opacity-75 motion-reduce:animate-none" }), _jsx("span", { className: "bg-destructive rounded-pill relative inline-flex size-1.5" })] }), _jsx("span", { className: "text-muted-foreground", children: "Press keys\u2026" })] })) : keys.length > 0 ? (_jsx(KbdGroup, { "data-state": pulse ? 'triggered' : 'idle', className: "origin-left transition-transform duration-150 data-[state=triggered]:scale-110 motion-reduce:transition-none", children: keys.map((key, index) => (_jsx(Kbd, { children: key }, `${index}-${key}`))) })) : (_jsx("span", { className: "text-muted-foreground", children: "Click to record" })) }), shortcut && !recording ? (_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": "Clear shortcut", disabled: disabled, className: "absolute right-1.5", onClick: () => commit(null), children: _jsx(X, {}) })) : null] }), error ? (_jsx("p", { "data-slot": "shortcut-recorder-error", className: "text-status-error text-ui-caption mt-1.5", children: error.message })) : null] }));
|
|
216
216
|
}
|
|
217
217
|
export { ShortcutRecorder };
|
|
@@ -96,7 +96,7 @@ export function RichMediaPlayer({ className, kind, src, title, }) {
|
|
|
96
96
|
};
|
|
97
97
|
const controls = (_jsxs("div", { className: cn('flex flex-col gap-2 text-white', isAudio
|
|
98
98
|
? 'p-3'
|
|
99
|
-
: 'bg-gradient-to-b from-transparent via-black/65 to-neutral-950 px-3 pb-3 pt-10'), children: [_jsx("input", { "aria-label": "Seek", className: "h-2 w-full cursor-pointer accent-white disabled:cursor-default disabled:opacity-50", disabled: !canSeek, max: durationValue, min: 0, onChange: (event) => seekTo(Number(event.currentTarget.value)), step: 0.1, type: "range", value: Math.min(currentTime, durationValue) }), _jsxs("div", { className: "
|
|
99
|
+
: 'bg-gradient-to-b from-transparent via-black/65 to-neutral-950 px-3 pb-3 pt-10'), children: [_jsx("input", { "aria-label": "Seek", className: "h-2 w-full cursor-pointer accent-white disabled:cursor-default disabled:opacity-50", disabled: !canSeek, max: durationValue, min: 0, onChange: (event) => seekTo(Number(event.currentTarget.value)), step: 0.1, type: "range", value: Math.min(currentTime, durationValue) }), _jsxs("div", { className: "h-toolbar gap-control-gap flex items-center px-1", children: [_jsx("button", { "aria-label": isPlaying ? 'Pause' : 'Play', className: "hover:text-primary focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white transition-colors focus-visible:outline-none focus-visible:ring-1", onClick: togglePlayback, type: "button", children: isPlaying ? (_jsx(Pause, { className: "size-6" })) : (_jsx(Play, { className: "size-6" })) }), _jsx("button", { "aria-label": "Rewind 10 seconds", className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: () => seekBy(-10), type: "button", children: _jsx(Rewind, { className: "size-5" }) }), _jsx("button", { "aria-label": "Forward 10 seconds", className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: () => seekBy(10), type: "button", children: _jsx(FastForward, { className: "size-5" }) }), _jsxs("div", { className: "group/volume flex items-center gap-2", children: [_jsx("button", { "aria-label": isMuted ? 'Unmute' : 'Mute', className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: toggleMuted, type: "button", children: isMuted || volume === 0 ? (_jsx(VolumeX, { className: "size-5" })) : (_jsx(Volume2, { className: "size-5" })) }), _jsx("input", { "aria-label": "Volume", className: "h-2 w-0 cursor-pointer accent-white opacity-0 transition-all focus:w-20 focus:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100", max: 1, min: 0, onChange: (event) => changeVolume(Number(event.currentTarget.value)), step: 0.05, type: "range", value: isMuted ? 0 : volume })] }), _jsxs("span", { className: "text-ui-caption ml-auto min-w-28 text-right font-mono text-white/80", children: [formatTime(currentTime), " / ", formatTime(durationValue)] }), _jsxs("button", { "aria-label": "Change playback speed", className: "text-ui-caption focus-visible:ring-terminal-foreground/70 rounded-control cursor-pointer px-2 py-1 font-mono text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: cyclePlaybackRate, type: "button", children: [playbackRate, "x"] })] })] }));
|
|
100
100
|
return (_jsx("div", { className: cn('not-prose rounded-container overflow-hidden border border-black/5 bg-neutral-950 text-white shadow-sm dark:border-white/10', className), ref: containerRef, children: _jsxs("div", { className: cn('group/mediaplayer relative w-full overflow-hidden', !isAudio && 'bg-black'), children: [isAudio ? (_jsx("audio", { "aria-label": mediaTitle, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), preload: "metadata", ref: setMediaElement, src: src })) : (_jsx("video", { className: "h-auto max-h-[600px] min-h-[225px] w-full bg-black object-contain", onClick: togglePlayback, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), playsInline: true, preload: "metadata", ref: setMediaElement, src: src })), _jsx("div", { className: cn(isAudio
|
|
101
101
|
? 'bg-neutral-950'
|
|
102
102
|
: 'absolute bottom-0 left-0 right-0 transition-transform duration-300', !isAudio &&
|
|
@@ -19,7 +19,7 @@ declare function AppFrame({ mode, className, style, ...props }: AppFrameProps):
|
|
|
19
19
|
export interface AppFrameTitlebarProps extends React.ComponentPropsWithoutRef<'header'> {
|
|
20
20
|
material?: MaterialVariant | 'none';
|
|
21
21
|
}
|
|
22
|
-
declare function AppFrameTitlebar({ className, material, onDoubleClick,
|
|
22
|
+
declare function AppFrameTitlebar({ className, material, onDoubleClick, onMouseDown, style, ...props }: AppFrameTitlebarProps): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
declare function AppFrameToolbar({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
24
24
|
export interface AppFrameContentProps extends React.ComponentPropsWithoutRef<'main'> {
|
|
25
25
|
scrollable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AAsBD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAoEf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { MOLDABLE_MATERIAL_REGION_CHANGE_EVENT } from '../../lib/frame-lifecycle.js';
|
|
5
5
|
import { cn } from '../../lib/utils.js';
|
|
6
|
+
import { handleWindowTitlebarDoubleClick, handleWindowTitlebarMouseDown, } from './window-titlebar.js';
|
|
6
7
|
function resolveAppFrameMode(mode) {
|
|
7
8
|
if (mode !== 'auto')
|
|
8
9
|
return mode;
|
|
@@ -64,55 +65,22 @@ function AppFrame({ mode = 'auto', className, style, ...props }) {
|
|
|
64
65
|
: {}),
|
|
65
66
|
}, ...props }) }));
|
|
66
67
|
}
|
|
67
|
-
|
|
68
|
-
'a',
|
|
69
|
-
'button',
|
|
70
|
-
'input',
|
|
71
|
-
'select',
|
|
72
|
-
'textarea',
|
|
73
|
-
'[contenteditable]:not([contenteditable="false"])',
|
|
74
|
-
'[role="button"]',
|
|
75
|
-
'[role="link"]',
|
|
76
|
-
'[data-moldable-no-window-drag]',
|
|
77
|
-
].join(',');
|
|
78
|
-
function isAppOwnedWindowTitlebar() {
|
|
79
|
-
return (document.documentElement.dataset.moldableDisplayMode === 'window' &&
|
|
80
|
-
document.documentElement.dataset.moldableWindowTitlebar === 'app');
|
|
81
|
-
}
|
|
82
|
-
function isInteractiveTitlebarTarget(target) {
|
|
83
|
-
return (target instanceof Element &&
|
|
84
|
-
target.closest(WINDOW_TITLEBAR_INTERACTIVE_SELECTOR) !== null);
|
|
85
|
-
}
|
|
86
|
-
function postWindowTitlebarMessage(type) {
|
|
87
|
-
if (!isAppOwnedWindowTitlebar())
|
|
88
|
-
return;
|
|
89
|
-
window.parent.postMessage({ type }, '*');
|
|
90
|
-
}
|
|
91
|
-
function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onPointerDown, style, ...props }) {
|
|
68
|
+
function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onMouseDown, style, ...props }) {
|
|
92
69
|
return (_jsx("header", { "data-slot": "app-frame-titlebar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 flex shrink-0 items-center gap-2 border-b', material !== 'none' && 'moldable-material', className), style: {
|
|
93
70
|
minHeight: 'max(var(--density-toolbar-height, 2.375rem), var(--window-titlebar-height, 0px))',
|
|
94
71
|
paddingInlineStart: 'max(var(--density-pane-padding, 0.625rem), var(--window-control-inset-inline-start, 0px))',
|
|
95
72
|
paddingInlineEnd: 'max(var(--density-pane-padding, 0.625rem), var(--window-control-inset-inline-end, 0px))',
|
|
96
73
|
...style,
|
|
97
|
-
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
event.button !== 0 ||
|
|
101
|
-
isInteractiveTitlebarTarget(event.target)) {
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
postWindowTitlebarMessage('startWindowDrag');
|
|
74
|
+
}, onMouseDown: (event) => {
|
|
75
|
+
onMouseDown?.(event);
|
|
76
|
+
handleWindowTitlebarMouseDown(event);
|
|
105
77
|
}, onDoubleClick: (event) => {
|
|
106
78
|
onDoubleClick?.(event);
|
|
107
|
-
|
|
108
|
-
isInteractiveTitlebarTarget(event.target)) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
postWindowTitlebarMessage('titlebarDoubleClick');
|
|
79
|
+
handleWindowTitlebarDoubleClick(event);
|
|
112
80
|
}, ...props }));
|
|
113
81
|
}
|
|
114
82
|
function AppFrameToolbar({ className, ...props }) {
|
|
115
|
-
return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('
|
|
83
|
+
return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('min-h-row gap-control-gap px-control-inline flex min-w-0 flex-1 items-center py-1', className), ...props }));
|
|
116
84
|
}
|
|
117
85
|
function AppFrameContent({ scrollable = true, chatSafe = true, className, style, ...props }) {
|
|
118
86
|
return (_jsx("main", { "data-slot": "app-frame-content", "data-scrollable": scrollable, "data-chat-safe": chatSafe, className: cn('min-h-0 min-w-0 flex-1', scrollable ? 'overflow-auto' : 'overflow-hidden', className), style: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Separator } from './separator.js';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonGroupVariants: (props?: ({
|
|
4
|
-
orientation?: "
|
|
4
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<'div'> & {
|
|
@@ -20,7 +20,7 @@ function ButtonGroup({ className, orientation, ...props }) {
|
|
|
20
20
|
}
|
|
21
21
|
function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
22
22
|
const Comp = asChild ? Slot : 'div';
|
|
23
|
-
return (_jsx(Comp, { className: cn("bg-muted shadow-xs rounded-control text-ui-body
|
|
23
|
+
return (_jsx(Comp, { className: cn("bg-muted shadow-xs rounded-control text-ui-body gap-control-gap px-control-inline flex items-center border font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
|
|
24
24
|
}
|
|
25
25
|
function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
|
|
26
26
|
return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className), ...props }));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "default" | "
|
|
5
|
-
size?: "default" | "
|
|
4
|
+
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
5
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
8
8
|
asChild?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAkCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -4,6 +4,6 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
|
4
4
|
import { CheckIcon } from 'lucide-react';
|
|
5
5
|
import { cn } from '../../lib/utils.js';
|
|
6
6
|
function Checkbox({ className, ...props }) {
|
|
7
|
-
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('group/checkbox text-primary-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:before:border-destructive rounded-checkbox
|
|
7
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('group/checkbox text-primary-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:before:border-destructive rounded-checkbox size-control-xs before:rounded-checkbox before:border-input before:shadow-xs data-[state=checked]:before:border-primary data-[state=checked]:before:bg-primary dark:before:bg-input/30 dark:data-[state=checked]:before:bg-primary peer relative shrink-0 cursor-pointer border border-transparent bg-transparent p-1 outline-none transition-shadow before:pointer-events-none before:absolute before:left-1/2 before:top-1/2 before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:border before:bg-transparent focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { forceMount: true, "data-slot": "checkbox-indicator", className: "pointer-events-none absolute left-1/2 top-1/2 z-10 grid size-4 -translate-x-1/2 -translate-y-1/2 place-content-center text-current transition-none group-data-[state=unchecked]/checkbox:opacity-0", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
|
|
8
8
|
}
|
|
9
9
|
export { Checkbox };
|
|
@@ -16,7 +16,7 @@ function CollapsibleSection({ className, ...props }) {
|
|
|
16
16
|
return (_jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible-section", className: cn('border-border/60 rounded-container overflow-hidden border', className), ...props }));
|
|
17
17
|
}
|
|
18
18
|
function CollapsibleSectionTrigger({ className, children, ...props }) {
|
|
19
|
-
return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-section-trigger", className: cn('hover:bg-control-hover focus-visible:ring-ring text-ui-body
|
|
19
|
+
return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-section-trigger", className: cn('hover:bg-control-hover focus-visible:ring-ring text-ui-body min-h-row gap-control-gap px-control-inline flex w-full cursor-pointer items-center py-1 text-left font-medium outline-none transition-[background-color,color] focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-90', className), ...props, children: [_jsx(ChevronRightIcon, { "aria-hidden": "true", className: "text-muted-foreground duration-(--motion-duration-normal) ease-(--motion-ease-standard) size-3.5 shrink-0 transition-transform" }), _jsx("span", { className: "min-w-0 flex-1", children: children })] }));
|
|
20
20
|
}
|
|
21
21
|
function CollapsibleSectionContent({ className, contentClassName, children, motion = 'default', ...props }) {
|
|
22
22
|
return (_jsx(CollapsiblePrimitive.Content, { "data-slot": "collapsible-section-content", "data-motion": motion, className: cn('data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1 text-ui-body overflow-hidden data-[motion=none]:animate-none', className), ...props, children: _jsx("div", { "data-slot": "collapsible-section-content-inner", className: cn('border-border/60 border-t px-3 py-2.5', contentClassName), children: children }) }));
|
|
@@ -44,7 +44,7 @@ function ComboboxSeparator({ className, ...props }) {
|
|
|
44
44
|
return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
|
|
45
45
|
}
|
|
46
46
|
function ComboboxChips({ className, ...props }) {
|
|
47
|
-
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('dark:bg-input/30 border-input has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 shadow-xs has-data-[slot=combobox-chip]:px-1.5 rounded-control text-ui-body
|
|
47
|
+
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('dark:bg-input/30 border-input has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 shadow-xs has-data-[slot=combobox-chip]:px-1.5 rounded-control text-ui-body min-h-control-md gap-control-gap px-control-inline flex flex-wrap items-center border bg-transparent bg-clip-padding py-1 transition-[color,box-shadow] has-[:focus-visible]:ring-1', className), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
50
50
|
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 rounded-control text-ui-caption flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 whitespace-nowrap px-1.5 font-medium', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/ui/command.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EAKP,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/ui/command.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EAKP,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAWlD,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAA;CACjE,2CAwBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAiBrD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,aAAa,EAAE,UAAiB,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,CAAA"}
|
|
@@ -4,14 +4,22 @@ import { SearchIcon } from 'lucide-react';
|
|
|
4
4
|
import { cn } from '../../lib/utils.js';
|
|
5
5
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
|
|
6
6
|
import { Command as CommandPrimitive } from 'cmdk';
|
|
7
|
+
function focusCommandInputOnOpen(event) {
|
|
8
|
+
event.preventDefault();
|
|
9
|
+
if (!(event.currentTarget instanceof HTMLElement))
|
|
10
|
+
return;
|
|
11
|
+
event.currentTarget
|
|
12
|
+
.querySelector('[data-slot="command-input"]')
|
|
13
|
+
?.focus({ preventScroll: true });
|
|
14
|
+
}
|
|
7
15
|
function Command({ className, ...props }) {
|
|
8
16
|
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground rounded-control flex h-full w-full flex-col overflow-hidden', className), ...props }));
|
|
9
17
|
}
|
|
10
18
|
function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = true, filter, ...props }) {
|
|
11
|
-
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('overflow-hidden p-0', className), showCloseButton: showCloseButton, children: _jsx(Command, { filter: filter, className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
|
|
19
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('overflow-hidden p-0 [&>[data-slot=dialog-close]]:top-2.5', className), onOpenAutoFocus: focusCommandInputOnOpen, showCloseButton: showCloseButton, children: _jsx(Command, { filter: filter, className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
|
|
12
20
|
}
|
|
13
21
|
function CommandInput({ className, ...props }) {
|
|
14
|
-
return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "
|
|
22
|
+
return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "h-control-md gap-control-gap px-control-inline flex items-center border-b", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground outline-hidden rounded-control text-ui-body h-control-md flex w-full bg-transparent disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
|
|
15
23
|
}
|
|
16
24
|
function CommandList({ className, ...props }) {
|
|
17
25
|
return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden', className), ...props }));
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const dateFieldVariants: (props?: ({
|
|
4
4
|
variant?: "default" | "filled" | null | undefined;
|
|
5
|
-
density?: "
|
|
5
|
+
density?: "default" | "compact" | "comfortable" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
interface DateFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof dateFieldVariants> {
|
|
8
8
|
/** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */
|
|
@@ -46,7 +46,7 @@ function DateField({ className, inputClassName, value, defaultValue = '', onChan
|
|
|
46
46
|
onClear?.();
|
|
47
47
|
inputRef.current?.focus();
|
|
48
48
|
}, [commitValue, currentValue, onClear]);
|
|
49
|
-
return (_jsxs("div", { "data-slot": "date-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(dateFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("input", { ref: setRefs, "data-slot": "date-field-input", type: "date", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('text-ui-body min-w-0 flex-1 bg-transparent
|
|
49
|
+
return (_jsxs("div", { "data-slot": "date-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(dateFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("input", { ref: setRefs, "data-slot": "date-field-input", type: "date", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('text-ui-body px-control-inline min-w-0 flex-1 bg-transparent outline-none dark:[color-scheme:dark] [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100', density === 'compact' && 'text-ui-caption', inputClassName), onChange: (event) => {
|
|
50
50
|
onChange?.(event);
|
|
51
51
|
commitValue(event.currentTarget.value);
|
|
52
52
|
}, ...props }), clearable && currentValue && !readOnly ? (_jsx(IconButton, { label: clearLabel, size: "xs", variant: "ghost", disabled: disabled, className: "mr-0.5 shrink-0", onClick: clear, children: _jsx(XIcon, {}) })) : null] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AASD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,IAAgB,EAChB,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAA;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AASD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,IAAgB,EAChB,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAA;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CA8CA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,2CAkBA;AAED,iBAAS,YAAY,CAAC,EACpB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAQA;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}
|
|
@@ -27,7 +27,9 @@ function focusDialogContentOnOpen(event) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
function DialogContent({ className, children, onKeyDown, onOpenAutoFocus, size = 'default', showCloseButton = true, ...props }) {
|
|
30
|
-
return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsx("div", { "data-slot": "dialog-positioner", className:
|
|
30
|
+
return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsx("div", { "data-slot": "dialog-positioner", className: cn('pointer-events-none fixed z-50 grid place-items-center', size === 'full'
|
|
31
|
+
? 'inset-1'
|
|
32
|
+
: 'bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding),1rem)] left-[max(var(--window-content-inset-inline-start),1rem)] right-[max(var(--window-content-inset-inline-end),1rem)] top-[max(var(--window-content-inset-top),1rem)]'), children: _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", "data-size": size, tabIndex: -1, className: cn('bg-background border-separator shadow-dialog rounded-dialog pointer-events-auto relative grid max-h-full min-h-0 w-full gap-4 overflow-hidden border p-6 outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'duration-[var(--motion-duration-normal)]', 'data-[size=default]:max-w-lg data-[size=lg]:max-w-2xl data-[size=sm]:max-w-sm', 'data-[size=full]:size-full data-[size=full]:max-w-none', className), onKeyDown: (event) => {
|
|
31
33
|
onKeyDown?.(event);
|
|
32
34
|
handleDialogPrimaryActionKeyDown(event);
|
|
33
35
|
}, onOpenAutoFocus: onOpenAutoFocus ?? focusDialogContentOnOpen, ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": "Close", className: "ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-control focus-visible:ring-ring absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center opacity-70 transition-opacity duration-[var(--motion-duration-fast)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:cursor-not-allowed [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", children: _jsx(XIcon, { "aria-hidden": "true" }) }))] }) })] }));
|
|
@@ -3,11 +3,11 @@ import { Button } from './button.js';
|
|
|
3
3
|
import { type VariantProps } from 'class-variance-authority';
|
|
4
4
|
declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
-
align?: "inline-
|
|
6
|
+
align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
-
size?: "
|
|
10
|
+
size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
12
|
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0BvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;
|
|
1
|
+
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA0BvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAe7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAClD,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAU9C;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW/B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}
|
|
@@ -13,7 +13,7 @@ function InputOTPGroup({ className, ...props }) {
|
|
|
13
13
|
function InputOTPSlot({ index, className, ...props }) {
|
|
14
14
|
const inputOTPContext = React.useContext(OTPInputContext);
|
|
15
15
|
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
16
|
-
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('data-[active=true]:border-ring data-[active=true]:bg-control-hover data-[active=true]:ring-ring group-has-[:focus-visible]/input-otp:ring-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input shadow-xs text-ui-body first:rounded-l-control last:rounded-r-control
|
|
16
|
+
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('data-[active=true]:border-ring data-[active=true]:bg-control-hover data-[active=true]:ring-ring group-has-[:focus-visible]/input-otp:ring-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input shadow-xs text-ui-body first:rounded-l-control last:rounded-r-control size-control-md relative flex items-center justify-center border-y border-r outline-none transition-all first:border-l group-has-[:focus-visible]/input-otp:ring-1 data-[active=true]:z-10 data-[active=true]:ring-1', className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) }))] }));
|
|
17
17
|
}
|
|
18
18
|
function InputOTPSeparator({ ...props }) {
|
|
19
19
|
return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from '../../lib/utils.js';
|
|
4
4
|
function Input({ className, type, ...props }) {
|
|
5
|
-
return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs rounded-control text-16 file:text-ui-body md:text-ui-body h-control-md w-full min-w-0 border bg-transparent
|
|
5
|
+
return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs rounded-control text-16 file:text-ui-body md:text-ui-body h-control-md px-control-inline file:h-control-xs w-full min-w-0 border bg-transparent py-1 outline-none transition-[color,box-shadow] file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', 'aria-invalid:border-destructive', className), ...props }));
|
|
6
6
|
}
|
|
7
7
|
export { Input };
|