@epicbagel/saas-kit 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/dist/chunk-2TKLS73N.js +121 -0
- package/dist/chunk-4UUTKR3V.cjs +53 -0
- package/dist/chunk-BTHYGHOH.cjs +143 -0
- package/dist/chunk-GRY77463.cjs +121 -0
- package/dist/chunk-HHV4G77I.js +55 -0
- package/dist/chunk-JTI4244T.js +143 -0
- package/dist/chunk-QEJ2STIV.js +53 -0
- package/dist/chunk-VLXPLKFR.cjs +55 -0
- package/dist/primitives/chat.cjs +46 -19
- package/dist/primitives/chat.d.cts +24 -5
- package/dist/primitives/chat.d.ts +24 -5
- package/dist/primitives/chat.js +42 -15
- package/dist/primitives/code-block.cjs +4 -49
- package/dist/primitives/code-block.js +4 -49
- package/dist/primitives/document-preview.cjs +54 -0
- package/dist/primitives/document-preview.d.cts +30 -0
- package/dist/primitives/document-preview.d.ts +30 -0
- package/dist/primitives/document-preview.js +54 -0
- package/dist/primitives/file-preview-internals.cjs +20 -0
- package/dist/primitives/file-preview-internals.d.cts +44 -0
- package/dist/primitives/file-preview-internals.d.ts +44 -0
- package/dist/primitives/file-preview-internals.js +20 -0
- package/dist/primitives/file-preview.cjs +327 -0
- package/dist/primitives/file-preview.d.cts +92 -0
- package/dist/primitives/file-preview.d.ts +92 -0
- package/dist/primitives/file-preview.js +327 -0
- package/dist/primitives/image.cjs +4 -48
- package/dist/primitives/image.js +3 -47
- package/dist/primitives/responsive-dialog.cjs +26 -142
- package/dist/primitives/responsive-dialog.js +13 -129
- package/package.json +21 -1
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
import {
|
|
4
|
+
Image
|
|
5
|
+
} from "../chunk-QEJ2STIV.js";
|
|
6
|
+
import {
|
|
7
|
+
PreviewDialog,
|
|
8
|
+
PreviewLoading,
|
|
9
|
+
PreviewNotice,
|
|
10
|
+
PreviewStage
|
|
11
|
+
} from "../chunk-2TKLS73N.js";
|
|
12
|
+
import "../chunk-JTI4244T.js";
|
|
13
|
+
import "../chunk-4HWCNRK4.js";
|
|
14
|
+
import "../chunk-3QT5VYZ3.js";
|
|
15
|
+
import {
|
|
16
|
+
CodeBlock
|
|
17
|
+
} from "../chunk-HHV4G77I.js";
|
|
18
|
+
import "../chunk-NW3OWKBN.js";
|
|
19
|
+
import {
|
|
20
|
+
LazyMarkdown
|
|
21
|
+
} from "../chunk-VY5U4VGV.js";
|
|
22
|
+
import "../chunk-INNGGLMZ.js";
|
|
23
|
+
import {
|
|
24
|
+
Text
|
|
25
|
+
} from "../chunk-EIY5LLSP.js";
|
|
26
|
+
import {
|
|
27
|
+
Icon
|
|
28
|
+
} from "../chunk-KN4RPX35.js";
|
|
29
|
+
import {
|
|
30
|
+
Button
|
|
31
|
+
} from "../chunk-HQRWRRZJ.js";
|
|
32
|
+
import "../chunk-ZWZAAGQF.js";
|
|
33
|
+
import "../chunk-G6SRSWXB.js";
|
|
34
|
+
|
|
35
|
+
// src/primitives/file-preview.tsx
|
|
36
|
+
import { Download, FileQuestion, FileWarning, Loader2 } from "lucide-react";
|
|
37
|
+
import { useEffect, useLayoutEffect, useState } from "react";
|
|
38
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
39
|
+
var UNTYPED = /* @__PURE__ */ new Set([
|
|
40
|
+
"",
|
|
41
|
+
"application/octet-stream",
|
|
42
|
+
"binary/octet-stream",
|
|
43
|
+
"application/binary",
|
|
44
|
+
"application/unknown",
|
|
45
|
+
"application/x-download",
|
|
46
|
+
"application/force-download"
|
|
47
|
+
]);
|
|
48
|
+
var TYPE_KINDS = {
|
|
49
|
+
"application/pdf": "pdf",
|
|
50
|
+
"application/x-pdf": "pdf",
|
|
51
|
+
"image/apng": "image",
|
|
52
|
+
"image/avif": "image",
|
|
53
|
+
"image/bmp": "image",
|
|
54
|
+
"image/gif": "image",
|
|
55
|
+
"image/jpeg": "image",
|
|
56
|
+
"image/jpg": "image",
|
|
57
|
+
"image/pjpeg": "image",
|
|
58
|
+
"image/png": "image",
|
|
59
|
+
"image/svg+xml": "image",
|
|
60
|
+
"image/vnd.microsoft.icon": "image",
|
|
61
|
+
"image/webp": "image",
|
|
62
|
+
"image/x-icon": "image",
|
|
63
|
+
"text/markdown": "markdown",
|
|
64
|
+
"text/x-markdown": "markdown",
|
|
65
|
+
// RTF is text/*, but its source is control words, not the document.
|
|
66
|
+
"text/rtf": "none",
|
|
67
|
+
"application/ecmascript": "text",
|
|
68
|
+
"application/graphql": "text",
|
|
69
|
+
"application/javascript": "text",
|
|
70
|
+
"application/json": "text",
|
|
71
|
+
"application/sql": "text",
|
|
72
|
+
"application/toml": "text",
|
|
73
|
+
"application/typescript": "text",
|
|
74
|
+
"application/x-httpd-php": "text",
|
|
75
|
+
"application/x-javascript": "text",
|
|
76
|
+
"application/x-ndjson": "text",
|
|
77
|
+
"application/x-sh": "text",
|
|
78
|
+
"application/x-typescript": "text",
|
|
79
|
+
"application/x-yaml": "text",
|
|
80
|
+
"application/xml": "text",
|
|
81
|
+
"application/yaml": "text",
|
|
82
|
+
"audio/aac": "audio",
|
|
83
|
+
"audio/flac": "audio",
|
|
84
|
+
"audio/mp3": "audio",
|
|
85
|
+
"audio/mp4": "audio",
|
|
86
|
+
"audio/mpeg": "audio",
|
|
87
|
+
"audio/ogg": "audio",
|
|
88
|
+
"audio/opus": "audio",
|
|
89
|
+
"audio/wav": "audio",
|
|
90
|
+
"audio/wave": "audio",
|
|
91
|
+
"audio/webm": "audio",
|
|
92
|
+
"audio/x-flac": "audio",
|
|
93
|
+
"audio/x-m4a": "audio",
|
|
94
|
+
"audio/x-wav": "audio",
|
|
95
|
+
"video/mp4": "video",
|
|
96
|
+
"video/ogg": "video",
|
|
97
|
+
"video/quicktime": "video",
|
|
98
|
+
"video/webm": "video",
|
|
99
|
+
"video/x-m4v": "video"
|
|
100
|
+
};
|
|
101
|
+
var EXTENSION_KINDS = new Map(
|
|
102
|
+
[
|
|
103
|
+
["pdf", "pdf"],
|
|
104
|
+
["image", "apng avif bmp gif ico jfif jpeg jpg png svg webp"],
|
|
105
|
+
["markdown", "markdown md mdown mkd"],
|
|
106
|
+
["audio", "aac flac m4a mp3 oga ogg opus wav weba"],
|
|
107
|
+
["video", "m4v mov mp4 ogv webm"],
|
|
108
|
+
[
|
|
109
|
+
"text",
|
|
110
|
+
"adoc bash bat c cc cfg cjs clj conf cpp cs css csv cts cxx dart diff env erl ex exs fish go gql graphql h hpp hs htm html ini java js json jsonc jsonl jsx kt kts less log lua mjs mts ndjson patch php pl properties ps1 py r rb rs rst sass scala scss sh sql srt svelte swift tex text toml ts tsv tsx txt vtt vue xml yaml yml zsh"
|
|
111
|
+
]
|
|
112
|
+
].flatMap(
|
|
113
|
+
([kind, extensions]) => extensions.split(" ").map((extension) => [extension, kind])
|
|
114
|
+
)
|
|
115
|
+
);
|
|
116
|
+
function kindOfName(name) {
|
|
117
|
+
const base = (name ?? "").trim().toLowerCase().split(/[\\/]/).pop() ?? "";
|
|
118
|
+
const dot = base.lastIndexOf(".");
|
|
119
|
+
return dot >= 0 ? EXTENSION_KINDS.get(base.slice(dot + 1)) : void 0;
|
|
120
|
+
}
|
|
121
|
+
function kindOfType(type) {
|
|
122
|
+
const known = TYPE_KINDS[type];
|
|
123
|
+
if (known) return known;
|
|
124
|
+
if (type.startsWith("text/")) return "text";
|
|
125
|
+
if (/^application\/[\w.-]+\+(?:json|xml)$/.test(type)) return "text";
|
|
126
|
+
return void 0;
|
|
127
|
+
}
|
|
128
|
+
function filePreviewKind({ name, mediaType }) {
|
|
129
|
+
const type = (mediaType ?? "").split(";", 1)[0].trim().toLowerCase();
|
|
130
|
+
const byName = kindOfName(name);
|
|
131
|
+
if (UNTYPED.has(type)) return byName ?? "none";
|
|
132
|
+
const byType = kindOfType(type);
|
|
133
|
+
if (byType === "text" && byName === "markdown") return "markdown";
|
|
134
|
+
if (byType) return byType;
|
|
135
|
+
return byName === "text" || byName === "markdown" ? byName : "none";
|
|
136
|
+
}
|
|
137
|
+
function FilePreview({
|
|
138
|
+
open,
|
|
139
|
+
onOpenChange,
|
|
140
|
+
title,
|
|
141
|
+
mediaType,
|
|
142
|
+
kind,
|
|
143
|
+
file,
|
|
144
|
+
src,
|
|
145
|
+
loading = false,
|
|
146
|
+
error,
|
|
147
|
+
onDownload,
|
|
148
|
+
downloading = false,
|
|
149
|
+
downloadLabel = "Download file",
|
|
150
|
+
fallback,
|
|
151
|
+
markdownComponents,
|
|
152
|
+
loadingLabel = "Loading preview\u2026",
|
|
153
|
+
unavailableLabel = "No preview for this file.",
|
|
154
|
+
failedLabel = "This file couldn't be shown here.",
|
|
155
|
+
truncatedLabel = "Showing the start of this file. Download it to see the rest."
|
|
156
|
+
}) {
|
|
157
|
+
return /* @__PURE__ */ jsx(
|
|
158
|
+
PreviewDialog,
|
|
159
|
+
{
|
|
160
|
+
open,
|
|
161
|
+
onOpenChange,
|
|
162
|
+
title,
|
|
163
|
+
onDownload,
|
|
164
|
+
downloading,
|
|
165
|
+
downloadLabel,
|
|
166
|
+
children: /* @__PURE__ */ jsx(
|
|
167
|
+
FilePreviewBody,
|
|
168
|
+
{
|
|
169
|
+
kind: kind ?? filePreviewKind({ name: title, mediaType: mediaType ?? file?.type }),
|
|
170
|
+
title,
|
|
171
|
+
file: file ?? null,
|
|
172
|
+
src: src ?? null,
|
|
173
|
+
loading,
|
|
174
|
+
error: error ?? null,
|
|
175
|
+
fallback,
|
|
176
|
+
download: onDownload ? (
|
|
177
|
+
// Under a muted message: the action keeps the foreground colour.
|
|
178
|
+
/* @__PURE__ */ jsxs(
|
|
179
|
+
Button,
|
|
180
|
+
{
|
|
181
|
+
type: "button",
|
|
182
|
+
variant: "outline",
|
|
183
|
+
size: "sm",
|
|
184
|
+
className: "text-foreground",
|
|
185
|
+
onClick: onDownload,
|
|
186
|
+
disabled: downloading,
|
|
187
|
+
children: [
|
|
188
|
+
/* @__PURE__ */ jsx(Icon, { icon: downloading ? Loader2 : Download, size: "sm", spin: downloading }),
|
|
189
|
+
downloadLabel
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
) : null,
|
|
194
|
+
markdownComponents,
|
|
195
|
+
loadingLabel,
|
|
196
|
+
unavailableLabel,
|
|
197
|
+
failedLabel,
|
|
198
|
+
truncatedLabel
|
|
199
|
+
}
|
|
200
|
+
)
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
var TEXT_PREVIEW_LIMIT = 5e5;
|
|
205
|
+
function NewTabLink({ node: _node, ...props }) {
|
|
206
|
+
return /* @__PURE__ */ jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer" });
|
|
207
|
+
}
|
|
208
|
+
function startOf(text) {
|
|
209
|
+
if (text.length <= TEXT_PREVIEW_LIMIT) return { text, truncated: false };
|
|
210
|
+
const end = text.lastIndexOf("\n", TEXT_PREVIEW_LIMIT);
|
|
211
|
+
return { text: text.slice(0, end > 0 ? end : TEXT_PREVIEW_LIMIT), truncated: true };
|
|
212
|
+
}
|
|
213
|
+
function useFileText(file, src) {
|
|
214
|
+
const source = file ?? src;
|
|
215
|
+
const [read, setRead] = useState(null);
|
|
216
|
+
useEffect(() => {
|
|
217
|
+
if (!source) return void 0;
|
|
218
|
+
let current = true;
|
|
219
|
+
const controller = new AbortController();
|
|
220
|
+
const text = typeof source === "string" ? fetch(source, { signal: controller.signal }).then((response) => {
|
|
221
|
+
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
222
|
+
return response.text();
|
|
223
|
+
}) : source.text();
|
|
224
|
+
text.then(
|
|
225
|
+
(value) => {
|
|
226
|
+
if (current) setRead({ source, result: { status: "read", ...startOf(value) } });
|
|
227
|
+
},
|
|
228
|
+
() => {
|
|
229
|
+
if (current) setRead({ source, result: { status: "failed" } });
|
|
230
|
+
}
|
|
231
|
+
);
|
|
232
|
+
return () => {
|
|
233
|
+
current = false;
|
|
234
|
+
controller.abort();
|
|
235
|
+
};
|
|
236
|
+
}, [source]);
|
|
237
|
+
if (!source) return null;
|
|
238
|
+
return read?.source === source ? read.result : { status: "reading" };
|
|
239
|
+
}
|
|
240
|
+
function useObjectUrl(file, type) {
|
|
241
|
+
const [made, setMade] = useState(null);
|
|
242
|
+
useLayoutEffect(() => {
|
|
243
|
+
if (!file) return void 0;
|
|
244
|
+
const url = URL.createObjectURL(type && file.type !== type ? new Blob([file], { type }) : file);
|
|
245
|
+
setMade({ file, type, url });
|
|
246
|
+
return () => URL.revokeObjectURL(url);
|
|
247
|
+
}, [file, type]);
|
|
248
|
+
return file && made?.file === file && made.type === type ? made.url : null;
|
|
249
|
+
}
|
|
250
|
+
function FilePreviewBody({
|
|
251
|
+
kind,
|
|
252
|
+
title,
|
|
253
|
+
file,
|
|
254
|
+
src,
|
|
255
|
+
loading,
|
|
256
|
+
error,
|
|
257
|
+
fallback,
|
|
258
|
+
download,
|
|
259
|
+
markdownComponents,
|
|
260
|
+
loadingLabel,
|
|
261
|
+
unavailableLabel,
|
|
262
|
+
failedLabel,
|
|
263
|
+
truncatedLabel
|
|
264
|
+
}) {
|
|
265
|
+
const ready = !loading && !error && kind !== "none";
|
|
266
|
+
const reads = kind === "text" || kind === "markdown";
|
|
267
|
+
const text = useFileText(ready && reads ? file : null, ready && reads ? src : null);
|
|
268
|
+
const objectUrl = useObjectUrl(ready && !reads ? file : null, kind === "pdf" ? "application/pdf" : void 0);
|
|
269
|
+
const pending = /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx(PreviewLoading, { label: loadingLabel }) });
|
|
270
|
+
const failed = (message) => /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx(PreviewNotice, { icon: FileWarning, alert: true, message, children: fallback ?? download }) });
|
|
271
|
+
if (loading) return pending;
|
|
272
|
+
if (error) return failed(error);
|
|
273
|
+
if (kind === "none" || !file && !src) {
|
|
274
|
+
return /* @__PURE__ */ jsx(PreviewStage, { children: fallback ?? /* @__PURE__ */ jsx(PreviewNotice, { icon: FileQuestion, message: unavailableLabel, children: download }) });
|
|
275
|
+
}
|
|
276
|
+
if (reads) {
|
|
277
|
+
if (!text || text.status === "reading") return pending;
|
|
278
|
+
if (text.status === "failed") return failed(failedLabel);
|
|
279
|
+
return /* @__PURE__ */ jsxs(PreviewStage, { layout: "scroll", label: `Preview of ${title}`, children: [
|
|
280
|
+
text.truncated && /* @__PURE__ */ jsx(Text, { variant: "caption", marginBottom: "sm", children: truncatedLabel }),
|
|
281
|
+
kind === "markdown" ? /* @__PURE__ */ jsx(LazyMarkdown, { components: { a: NewTabLink, ...markdownComponents }, children: text.text }) : (
|
|
282
|
+
// The theme's relaxed leading is a fixed 1.8rem, which spaces a
|
|
283
|
+
// file's small monospace lines apart; read it at 20px lines.
|
|
284
|
+
/* @__PURE__ */ jsx(CodeBlock, { wrap: true, className: "[&>pre]:leading-5", children: text.text })
|
|
285
|
+
)
|
|
286
|
+
] });
|
|
287
|
+
}
|
|
288
|
+
const url = file ? objectUrl : src;
|
|
289
|
+
if (!url) return pending;
|
|
290
|
+
return /* @__PURE__ */ jsx(ShownFile, { kind, url, title, failed: failed(failedLabel) }, url);
|
|
291
|
+
}
|
|
292
|
+
function ShownFile({
|
|
293
|
+
kind,
|
|
294
|
+
url,
|
|
295
|
+
title,
|
|
296
|
+
failed
|
|
297
|
+
}) {
|
|
298
|
+
const [broken, setBroken] = useState(false);
|
|
299
|
+
if (broken) return failed;
|
|
300
|
+
const fail = () => setBroken(true);
|
|
301
|
+
const label = `Preview of ${title}`;
|
|
302
|
+
if (kind === "image") {
|
|
303
|
+
return /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(Image, { src: url, alt: title, fit: "contain", radius: "sm", className: "max-h-full max-w-full", onError: fail }) }) });
|
|
304
|
+
}
|
|
305
|
+
if (kind === "audio") {
|
|
306
|
+
return /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md p-6", children: /* @__PURE__ */ jsx("audio", { src: url, controls: true, preload: "metadata", "aria-label": label, className: "w-full", onError: fail }) }) });
|
|
307
|
+
}
|
|
308
|
+
if (kind === "video") {
|
|
309
|
+
return /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(
|
|
310
|
+
"video",
|
|
311
|
+
{
|
|
312
|
+
src: url,
|
|
313
|
+
controls: true,
|
|
314
|
+
playsInline: true,
|
|
315
|
+
preload: "metadata",
|
|
316
|
+
"aria-label": label,
|
|
317
|
+
className: "max-h-full max-w-full rounded-sm",
|
|
318
|
+
onError: fail
|
|
319
|
+
}
|
|
320
|
+
) }) });
|
|
321
|
+
}
|
|
322
|
+
return /* @__PURE__ */ jsx(PreviewStage, { children: /* @__PURE__ */ jsx("iframe", { src: url, title: label, referrerPolicy: "no-referrer", className: "h-full w-full border-0 bg-background" }) });
|
|
323
|
+
}
|
|
324
|
+
export {
|
|
325
|
+
FilePreview,
|
|
326
|
+
filePreviewKind
|
|
327
|
+
};
|
|
@@ -1,52 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk4UUTKR3Vcjs = require('../chunk-4UUTKR3V.cjs');
|
|
5
|
+
require('../chunk-KWLSBTB2.cjs');
|
|
5
6
|
|
|
6
|
-
// src/primitives/image.tsx
|
|
7
|
-
var _react = require('react');
|
|
8
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
9
|
-
var fitStyles = { cover: "object-cover", contain: "object-contain" };
|
|
10
|
-
var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
|
|
11
|
-
var Image = _react.forwardRef.call(void 0, function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
|
|
12
|
-
const [loaded, setLoaded] = _react.useState.call(void 0, loadingIndicator === "none" || !src);
|
|
13
|
-
_react.useEffect.call(void 0, () => {
|
|
14
|
-
setLoaded(loadingIndicator === "none" || !src);
|
|
15
|
-
}, [loadingIndicator, src]);
|
|
16
|
-
const loading = loadingIndicator === "pulse" && !loaded;
|
|
17
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
18
|
-
"img",
|
|
19
|
-
{
|
|
20
|
-
ref,
|
|
21
|
-
className: _chunkKWLSBTB2cjs.cn.call(void 0,
|
|
22
|
-
fitStyles[fit],
|
|
23
|
-
radiusStyles[radius],
|
|
24
|
-
frameHeight === "sm" && "h-16",
|
|
25
|
-
frameHeight === "md" && "h-28",
|
|
26
|
-
width === "full" && "w-full",
|
|
27
|
-
width === "preview" && "w-full max-w-[380px]",
|
|
28
|
-
width === "preview-lg" && "w-full max-w-[440px]",
|
|
29
|
-
align === "center" && "mx-auto",
|
|
30
|
-
border && "border",
|
|
31
|
-
shadow === "subtle" && "shadow-xs",
|
|
32
|
-
loading && "animate-pulse bg-muted",
|
|
33
|
-
emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
|
|
34
|
-
className
|
|
35
|
-
),
|
|
36
|
-
src,
|
|
37
|
-
...props,
|
|
38
|
-
"aria-busy": loading || void 0,
|
|
39
|
-
onLoad: (event) => {
|
|
40
|
-
setLoaded(true);
|
|
41
|
-
_optionalChain([onLoad, 'optionalCall', _ => _(event)]);
|
|
42
|
-
},
|
|
43
|
-
onError: (event) => {
|
|
44
|
-
setLoaded(true);
|
|
45
|
-
_optionalChain([onError, 'optionalCall', _2 => _2(event)]);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
});
|
|
50
7
|
|
|
51
|
-
|
|
52
|
-
exports.Image = Image;
|
|
8
|
+
exports.Image = _chunk4UUTKR3Vcjs.Image;
|
package/dist/primitives/image.js
CHANGED
|
@@ -1,52 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
|
|
6
|
-
// src/primitives/image.tsx
|
|
7
|
-
import { forwardRef, useEffect, useState } from "react";
|
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
var fitStyles = { cover: "object-cover", contain: "object-contain" };
|
|
10
|
-
var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
|
|
11
|
-
var Image = forwardRef(function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
|
|
12
|
-
const [loaded, setLoaded] = useState(loadingIndicator === "none" || !src);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
setLoaded(loadingIndicator === "none" || !src);
|
|
15
|
-
}, [loadingIndicator, src]);
|
|
16
|
-
const loading = loadingIndicator === "pulse" && !loaded;
|
|
17
|
-
return /* @__PURE__ */ jsx(
|
|
18
|
-
"img",
|
|
19
|
-
{
|
|
20
|
-
ref,
|
|
21
|
-
className: cn(
|
|
22
|
-
fitStyles[fit],
|
|
23
|
-
radiusStyles[radius],
|
|
24
|
-
frameHeight === "sm" && "h-16",
|
|
25
|
-
frameHeight === "md" && "h-28",
|
|
26
|
-
width === "full" && "w-full",
|
|
27
|
-
width === "preview" && "w-full max-w-[380px]",
|
|
28
|
-
width === "preview-lg" && "w-full max-w-[440px]",
|
|
29
|
-
align === "center" && "mx-auto",
|
|
30
|
-
border && "border",
|
|
31
|
-
shadow === "subtle" && "shadow-xs",
|
|
32
|
-
loading && "animate-pulse bg-muted",
|
|
33
|
-
emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
|
|
34
|
-
className
|
|
35
|
-
),
|
|
36
|
-
src,
|
|
37
|
-
...props,
|
|
38
|
-
"aria-busy": loading || void 0,
|
|
39
|
-
onLoad: (event) => {
|
|
40
|
-
setLoaded(true);
|
|
41
|
-
onLoad?.(event);
|
|
42
|
-
},
|
|
43
|
-
onError: (event) => {
|
|
44
|
-
setLoaded(true);
|
|
45
|
-
onError?.(event);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
});
|
|
3
|
+
Image
|
|
4
|
+
} from "../chunk-QEJ2STIV.js";
|
|
5
|
+
import "../chunk-G6SRSWXB.js";
|
|
50
6
|
export {
|
|
51
7
|
Image
|
|
52
8
|
};
|
|
@@ -1,142 +1,26 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
var _react = require('react'); var React = _interopRequireWildcard(_react);
|
|
28
|
-
var _reactresponsive = require('react-responsive');
|
|
29
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
30
|
-
var DesktopContext = React.createContext(false);
|
|
31
|
-
var useIsDesktop = () => React.useContext(DesktopContext);
|
|
32
|
-
var DESKTOP_QUERY = { minWidth: 1024 };
|
|
33
|
-
var ResponsiveDialog = ({ children, ...props }) => {
|
|
34
|
-
const isDesktop = _reactresponsive.useMediaQuery.call(void 0, DESKTOP_QUERY);
|
|
35
|
-
const Root = isDesktop ? _chunkWDXEJDMOcjs.Dialog : _chunk2BHI5ZWJcjs.Drawer;
|
|
36
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ...props, children }) });
|
|
37
|
-
};
|
|
38
|
-
ResponsiveDialog.displayName = "ResponsiveDialog";
|
|
39
|
-
var ResponsiveDialogTrigger = ({
|
|
40
|
-
children,
|
|
41
|
-
...props
|
|
42
|
-
}) => {
|
|
43
|
-
const Trigger = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTrigger : _chunk2BHI5ZWJcjs.DrawerTrigger;
|
|
44
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trigger, { ...props, children });
|
|
45
|
-
};
|
|
46
|
-
ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
|
|
47
|
-
var ResponsiveDialogClose = ({
|
|
48
|
-
children,
|
|
49
|
-
...props
|
|
50
|
-
}) => {
|
|
51
|
-
const Close = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogClose : _chunk2BHI5ZWJcjs.DrawerClose;
|
|
52
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Close, { ...props, children });
|
|
53
|
-
};
|
|
54
|
-
ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
|
|
55
|
-
var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
|
|
56
|
-
if (useIsDesktop()) {
|
|
57
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
58
|
-
_chunkWDXEJDMOcjs.DialogContent,
|
|
59
|
-
{
|
|
60
|
-
ref,
|
|
61
|
-
className: _chunkKWLSBTB2cjs.cn.call(void 0,
|
|
62
|
-
"flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
|
|
63
|
-
presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
|
|
64
|
-
className
|
|
65
|
-
),
|
|
66
|
-
...props,
|
|
67
|
-
children
|
|
68
|
-
}
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
72
|
-
_chunk2BHI5ZWJcjs.DrawerContent,
|
|
73
|
-
{
|
|
74
|
-
ref,
|
|
75
|
-
className: _chunkKWLSBTB2cjs.cn.call(void 0, "max-h-[92vh]", className),
|
|
76
|
-
...props,
|
|
77
|
-
children
|
|
78
|
-
}
|
|
79
|
-
);
|
|
80
|
-
});
|
|
81
|
-
ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
|
|
82
|
-
var ResponsiveDialogHeader = ({
|
|
83
|
-
className,
|
|
84
|
-
visibility = "visible",
|
|
85
|
-
...props
|
|
86
|
-
}) => {
|
|
87
|
-
const Header = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogHeader : _chunk2BHI5ZWJcjs.DrawerHeader;
|
|
88
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
89
|
-
Header,
|
|
90
|
-
{
|
|
91
|
-
className: _chunkKWLSBTB2cjs.cn.call(void 0, useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
|
|
92
|
-
...props
|
|
93
|
-
}
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
|
|
97
|
-
var ResponsiveDialogBody = ({
|
|
98
|
-
className,
|
|
99
|
-
...props
|
|
100
|
-
}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
|
|
101
|
-
ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
|
|
102
|
-
var ResponsiveDialogFooter = ({
|
|
103
|
-
className,
|
|
104
|
-
layout = "auto",
|
|
105
|
-
...props
|
|
106
|
-
}) => {
|
|
107
|
-
const isDesktop = useIsDesktop();
|
|
108
|
-
const Footer = isDesktop ? _chunkWDXEJDMOcjs.DialogFooter : _chunk2BHI5ZWJcjs.DrawerFooter;
|
|
109
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
110
|
-
Footer,
|
|
111
|
-
{
|
|
112
|
-
className: _chunkKWLSBTB2cjs.cn.call(void 0,
|
|
113
|
-
"mt-0 shrink-0 gap-2 border-t bg-background p-4",
|
|
114
|
-
layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
|
|
115
|
-
className
|
|
116
|
-
),
|
|
117
|
-
...props
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
};
|
|
121
|
-
ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
|
|
122
|
-
var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
|
|
123
|
-
const Title = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTitle : _chunk2BHI5ZWJcjs.DrawerTitle;
|
|
124
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
|
|
125
|
-
});
|
|
126
|
-
ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
|
|
127
|
-
var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
|
|
128
|
-
const Description = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogDescription : _chunk2BHI5ZWJcjs.DrawerDescription;
|
|
129
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
|
|
130
|
-
});
|
|
131
|
-
ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
exports.ResponsiveDialog = ResponsiveDialog; exports.ResponsiveDialogBody = ResponsiveDialogBody; exports.ResponsiveDialogClose = ResponsiveDialogClose; exports.ResponsiveDialogContent = ResponsiveDialogContent; exports.ResponsiveDialogDescription = ResponsiveDialogDescription; exports.ResponsiveDialogFooter = ResponsiveDialogFooter; exports.ResponsiveDialogHeader = ResponsiveDialogHeader; exports.ResponsiveDialogTitle = ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger;
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
var _chunkBTHYGHOHcjs = require('../chunk-BTHYGHOH.cjs');
|
|
13
|
+
require('../chunk-2BHI5ZWJ.cjs');
|
|
14
|
+
require('../chunk-WDXEJDMO.cjs');
|
|
15
|
+
require('../chunk-KWLSBTB2.cjs');
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
exports.ResponsiveDialog = _chunkBTHYGHOHcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkBTHYGHOHcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkBTHYGHOHcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkBTHYGHOHcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkBTHYGHOHcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkBTHYGHOHcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkBTHYGHOHcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkBTHYGHOHcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkBTHYGHOHcjs.ResponsiveDialogTrigger;
|