mainstack-design-system 1.3.3 → 1.3.4
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),c=require("./mainstack-design-system588.cjs");require("./mainstack-design-system355.cjs");const R=require("./mainstack-design-system53.cjs"),M=require("./mainstack-design-system223.cjs"),S=require("./mainstack-design-system239.cjs"),B=require("./mainstack-design-system284.cjs"),A=require("./mainstack-design-system24.cjs"),F=require("./mainstack-design-system594.cjs"),u=require("./index-4R9KShCu.cjs"),d=require("./mainstack-design-system383.cjs"),C=require("./mainstack-design-system384.cjs"),m=require("./mainstack-design-system385.cjs");require("./mainstack-design-system386.cjs");const q=({className:j,children:b,previewImgSrc:p,previewId:o,isPlaceholder:y,onClick:z,...N})=>{const{values:r,maxFiles:h,accept:k,maxSize:U,onValuesChange:l,onError:v,setMainPreviewFile:n,mainPreviewFile:s}=A.useImageUploaderContext(),[D,I]=_.useState(!1),x=s?.id===o,P=_.useCallback(()=>{const t=[...r],a=t.findIndex(i=>i.id===o),f=s?.id===o;a>-1&&(t.splice(a,1),l(t),f&&n(t[0]||null))},[l,o,n,r,s]),O=_.useCallback(async t=>{const a=h||0,f=Math.max(0,a-r.length),i=t.slice(0,f);if(!(i.length===0||i.length>=a))try{const g=await c.generateImageFilePreview(i),w=[...r,...g];l(w),s||n(w[0]||null)}catch(g){v&&v(g)}},[s,h,l,n,r,v]);return b||(y?e.jsx(F.DropzoneUploadArea,{"data-slot":"image-uploader-preview-item-placeholder",className:"w-fit",noDrag:!0,accept:k,maxFiles:h,maxSize:U,onDrop:O,children:e.jsx("button",{className:c.cn("border border-dashed border-border-interactive-neutral rounded-16 h-88 shrink-0 w-117 flex justify-center items-center cursor-pointer hover:bg-interactive-secondary",j),onClick:z,...N,children:e.jsx(R,{variant:"filled"})})}):e.jsxs("div",{"data-slot":"image-uploader-preview-item","data-active-preview":x,className:c.cn("relative h-88 rounded-16 shrink-0 w-117 overflow-hidden cursor-pointer data-[active-preview=true]:outline-2 data-[active-preview=true]:outline-offset-2 data-[active-preview=true]:outline-border-interactive-neutral-active"),children:[e.jsx("img",{className:c.cn("object-cover h-full w-full ",j),src:p,alt:`Image uploaded with id ${o}`,onClick:()=>{x||n({id:o,previewSrc:p})}}),x?e.jsx(m.ButtonRoot,{className:"absolute top-4 right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>{t.stopPropagation(),P()},children:e.jsx(d.ButtonIcon,{children:e.jsx(B,{className:"size-16 text-interactive-error"})})}):e.jsxs(u.Popover,{open:D,onOpenChange:I,children:[e.jsx(u.PopoverTrigger,{asChild:!0,children:e.jsx(m.ButtonRoot,{className:"absolute top-4 right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>t.stopPropagation(),children:e.jsx(d.ButtonIcon,{children:e.jsx(M,{className:"size-16"})})})}),e.jsx(u.PopoverPortal,{children:e.jsxs(u.PopoverContent,{side:"bottom",sideOffset:2,align:"end",className:c.cn("flex flex-col p-8 bg-surface-neutral-l1 rounded-18 will-change-transform data-[state=open]:animate-content-fade-in animate-content-fade-out "),children:[e.jsxs(m.ButtonRoot,{onClick:()=>{n({id:o,previewSrc:p}),I(!1)},size:"xs",variant:"ghost",children:[e.jsx(d.ButtonIcon,{children:e.jsx(S,{className:"size-20"})}),e.jsx(C.ButtonLabel,{children:"Set as cover image"})]}),e.jsxs(m.ButtonRoot,{className:"justify-start ",size:"xs",variant:"ghost",onClick:P,children:[e.jsx(d.ButtonIcon,{children:e.jsx(B,{className:"size-20 text-interactive-error"})}),e.jsx(C.ButtonLabel,{className:" text-interactive-error",children:"Delete"})]})]})})]})]}))};q.displayName="ImageUploaderPreviewItem";exports.ImageUploaderPreviewItem=q;
|
|
@@ -1,71 +1,68 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { generateImageFilePreview as
|
|
1
|
+
import { jsx as e, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { useState as M, useCallback as N } from "react";
|
|
3
|
+
import { generateImageFilePreview as U, cn as d } from "./mainstack-design-system588.js";
|
|
4
4
|
import "./mainstack-design-system355.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { useImageUploaderContext as
|
|
10
|
-
import { DropzoneUploadArea as
|
|
11
|
-
import { P as
|
|
5
|
+
import A from "./mainstack-design-system53.js";
|
|
6
|
+
import H from "./mainstack-design-system223.js";
|
|
7
|
+
import S from "./mainstack-design-system239.js";
|
|
8
|
+
import y from "./mainstack-design-system284.js";
|
|
9
|
+
import { useImageUploaderContext as T } from "./mainstack-design-system24.js";
|
|
10
|
+
import { DropzoneUploadArea as E } from "./mainstack-design-system594.js";
|
|
11
|
+
import { P as L, a as R, b as V, c as $ } from "./index-RoCFhqzC.js";
|
|
12
12
|
import { ButtonIcon as m } from "./mainstack-design-system383.js";
|
|
13
13
|
import { ButtonLabel as k } from "./mainstack-design-system384.js";
|
|
14
14
|
import { ButtonRoot as p } from "./mainstack-design-system385.js";
|
|
15
15
|
import "./mainstack-design-system386.js";
|
|
16
16
|
const q = ({
|
|
17
|
-
className:
|
|
17
|
+
className: P,
|
|
18
18
|
children: b,
|
|
19
19
|
previewImgSrc: u,
|
|
20
20
|
previewId: t,
|
|
21
21
|
isPlaceholder: _,
|
|
22
|
-
onClick:
|
|
23
|
-
...
|
|
22
|
+
onClick: D,
|
|
23
|
+
...I
|
|
24
24
|
}) => {
|
|
25
25
|
const {
|
|
26
|
-
values:
|
|
26
|
+
values: i,
|
|
27
27
|
maxFiles: f,
|
|
28
|
-
accept:
|
|
28
|
+
accept: O,
|
|
29
29
|
maxSize: j,
|
|
30
30
|
onValuesChange: c,
|
|
31
31
|
onError: h,
|
|
32
32
|
setMainPreviewFile: o,
|
|
33
|
-
mainPreviewFile:
|
|
34
|
-
} =
|
|
35
|
-
const r = [...
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
r.splice(i, 1), c(r), n && o(r[0] || null), URL.revokeObjectURL(l);
|
|
39
|
-
}
|
|
40
|
-
}, [n, c, t, o, a]), F = y(
|
|
33
|
+
mainPreviewFile: a
|
|
34
|
+
} = T(), [B, w] = M(!1), v = a?.id === t, C = N(() => {
|
|
35
|
+
const r = [...i], n = r.findIndex((s) => s.id === t), g = a?.id === t;
|
|
36
|
+
n > -1 && (r.splice(n, 1), c(r), g && o(r[0] || null));
|
|
37
|
+
}, [c, t, o, i, a]), F = N(
|
|
41
38
|
async (r) => {
|
|
42
|
-
const
|
|
43
|
-
if (!(
|
|
39
|
+
const n = f || 0, g = Math.max(0, n - i.length), s = r.slice(0, g);
|
|
40
|
+
if (!(s.length === 0 || s.length >= n))
|
|
44
41
|
try {
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
),
|
|
48
|
-
c(
|
|
49
|
-
} catch (
|
|
50
|
-
h && h(
|
|
42
|
+
const x = await U(
|
|
43
|
+
s
|
|
44
|
+
), z = [...i, ...x];
|
|
45
|
+
c(z), a || o(z[0] || null);
|
|
46
|
+
} catch (x) {
|
|
47
|
+
h && h(x);
|
|
51
48
|
}
|
|
52
49
|
},
|
|
53
50
|
[
|
|
54
|
-
|
|
51
|
+
a,
|
|
55
52
|
f,
|
|
56
53
|
c,
|
|
57
54
|
o,
|
|
58
|
-
|
|
55
|
+
i,
|
|
59
56
|
h
|
|
60
57
|
]
|
|
61
58
|
);
|
|
62
59
|
return b || (_ ? /* @__PURE__ */ e(
|
|
63
|
-
|
|
60
|
+
E,
|
|
64
61
|
{
|
|
65
62
|
"data-slot": "image-uploader-preview-item-placeholder",
|
|
66
63
|
className: "w-fit",
|
|
67
64
|
noDrag: !0,
|
|
68
|
-
accept:
|
|
65
|
+
accept: O,
|
|
69
66
|
maxFiles: f,
|
|
70
67
|
maxSize: j,
|
|
71
68
|
onDrop: F,
|
|
@@ -74,35 +71,35 @@ const q = ({
|
|
|
74
71
|
{
|
|
75
72
|
className: d(
|
|
76
73
|
"border border-dashed border-border-interactive-neutral rounded-16 h-88 shrink-0 w-117 flex justify-center items-center cursor-pointer hover:bg-interactive-secondary",
|
|
77
|
-
|
|
74
|
+
P
|
|
78
75
|
),
|
|
79
|
-
onClick:
|
|
80
|
-
...
|
|
81
|
-
children: /* @__PURE__ */ e(
|
|
76
|
+
onClick: D,
|
|
77
|
+
...I,
|
|
78
|
+
children: /* @__PURE__ */ e(A, { variant: "filled" })
|
|
82
79
|
}
|
|
83
80
|
)
|
|
84
81
|
}
|
|
85
|
-
) : /* @__PURE__ */
|
|
82
|
+
) : /* @__PURE__ */ l(
|
|
86
83
|
"div",
|
|
87
84
|
{
|
|
88
85
|
"data-slot": "image-uploader-preview-item",
|
|
89
|
-
"data-active-preview":
|
|
86
|
+
"data-active-preview": v,
|
|
90
87
|
className: d(
|
|
91
88
|
"relative h-88 rounded-16 shrink-0 w-117 overflow-hidden cursor-pointer data-[active-preview=true]:outline-2 data-[active-preview=true]:outline-offset-2 data-[active-preview=true]:outline-border-interactive-neutral-active"
|
|
92
89
|
),
|
|
93
|
-
onClick: () => {
|
|
94
|
-
n || o({ id: t, previewSrc: u });
|
|
95
|
-
},
|
|
96
90
|
children: [
|
|
97
91
|
/* @__PURE__ */ e(
|
|
98
92
|
"img",
|
|
99
93
|
{
|
|
100
|
-
className: d("object-cover h-full w-full ",
|
|
94
|
+
className: d("object-cover h-full w-full ", P),
|
|
101
95
|
src: u,
|
|
102
|
-
alt: `Image uploaded with id ${t}
|
|
96
|
+
alt: `Image uploaded with id ${t}`,
|
|
97
|
+
onClick: () => {
|
|
98
|
+
v || o({ id: t, previewSrc: u });
|
|
99
|
+
}
|
|
103
100
|
}
|
|
104
101
|
),
|
|
105
|
-
|
|
102
|
+
v ? /* @__PURE__ */ e(
|
|
106
103
|
p,
|
|
107
104
|
{
|
|
108
105
|
className: "absolute top-4 right-4",
|
|
@@ -111,17 +108,17 @@ const q = ({
|
|
|
111
108
|
rounded: "sm",
|
|
112
109
|
iconOnly: !0,
|
|
113
110
|
onClick: (r) => {
|
|
114
|
-
r.stopPropagation(),
|
|
111
|
+
r.stopPropagation(), C();
|
|
115
112
|
},
|
|
116
|
-
children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
|
|
113
|
+
children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(y, { className: "size-16 text-interactive-error" }) })
|
|
117
114
|
}
|
|
118
|
-
) : /* @__PURE__ */
|
|
119
|
-
|
|
115
|
+
) : /* @__PURE__ */ l(
|
|
116
|
+
L,
|
|
120
117
|
{
|
|
121
|
-
open:
|
|
122
|
-
onOpenChange:
|
|
118
|
+
open: B,
|
|
119
|
+
onOpenChange: w,
|
|
123
120
|
children: [
|
|
124
|
-
/* @__PURE__ */ e(
|
|
121
|
+
/* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
|
|
125
122
|
p,
|
|
126
123
|
{
|
|
127
124
|
className: "absolute top-4 right-4",
|
|
@@ -130,10 +127,10 @@ const q = ({
|
|
|
130
127
|
rounded: "sm",
|
|
131
128
|
iconOnly: !0,
|
|
132
129
|
onClick: (r) => r.stopPropagation(),
|
|
133
|
-
children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
|
|
130
|
+
children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(H, { className: "size-16" }) })
|
|
134
131
|
}
|
|
135
132
|
) }),
|
|
136
|
-
/* @__PURE__ */ e(V, { children: /* @__PURE__ */
|
|
133
|
+
/* @__PURE__ */ e(V, { children: /* @__PURE__ */ l(
|
|
137
134
|
$,
|
|
138
135
|
{
|
|
139
136
|
side: "bottom",
|
|
@@ -143,32 +140,32 @@ const q = ({
|
|
|
143
140
|
"flex flex-col p-8 bg-surface-neutral-l1 rounded-18 will-change-transform data-[state=open]:animate-content-fade-in animate-content-fade-out "
|
|
144
141
|
),
|
|
145
142
|
children: [
|
|
146
|
-
/* @__PURE__ */
|
|
143
|
+
/* @__PURE__ */ l(
|
|
147
144
|
p,
|
|
148
145
|
{
|
|
149
146
|
onClick: () => {
|
|
150
147
|
o({
|
|
151
148
|
id: t,
|
|
152
149
|
previewSrc: u
|
|
153
|
-
}),
|
|
150
|
+
}), w(!1);
|
|
154
151
|
},
|
|
155
152
|
size: "xs",
|
|
156
153
|
variant: "ghost",
|
|
157
154
|
children: [
|
|
158
|
-
/* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
|
|
155
|
+
/* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(S, { className: "size-20" }) }),
|
|
159
156
|
/* @__PURE__ */ e(k, { children: "Set as cover image" })
|
|
160
157
|
]
|
|
161
158
|
}
|
|
162
159
|
),
|
|
163
|
-
/* @__PURE__ */
|
|
160
|
+
/* @__PURE__ */ l(
|
|
164
161
|
p,
|
|
165
162
|
{
|
|
166
163
|
className: "justify-start ",
|
|
167
164
|
size: "xs",
|
|
168
165
|
variant: "ghost",
|
|
169
|
-
onClick:
|
|
166
|
+
onClick: C,
|
|
170
167
|
children: [
|
|
171
|
-
/* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
|
|
168
|
+
/* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(y, { className: "size-20 text-interactive-error" }) }),
|
|
172
169
|
/* @__PURE__ */ e(k, { className: " text-interactive-error", children: "Delete" })
|
|
173
170
|
]
|
|
174
171
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("./mainstack-design-system383.cjs");require("./mainstack-design-system384.cjs");const m=require("./mainstack-design-system385.cjs");require("./mainstack-design-system386.cjs");require("./mainstack-design-system355.cjs");const p=require("./mainstack-design-system284.cjs"),g=require("./mainstack-design-system588.cjs"),b=require("./mainstack-design-system24.cjs"),n=({className:a,children:i,...s})=>{const{mainPreviewFile:r,onValuesChange:l,values:d,setMainPreviewFile:c}=b.useImageUploaderContext();return e.jsx("div",{role:"region","data-slot":"image-uploader-dropzone","data-active-preview":!!r?.id,className:g.cn("relative border border-dashed border-border-interactive-neutral rounded-20 bg-surface-neutral-l1 w-504 data-[active-preview=true]:overflow-hidden h-378 cursor-pointer hover:bg-interactive-secondary data-dragging:border-border-interactive-neutral active:ring-2 active:ring-border-interactive-neutral-pressed ",a),...s,children:r?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:r.previewSrc,alt:"Image Uploader Main Preview image ",className:"absolute top-0 left-0 w-full h-full object-cover"}),e.jsx(m.ButtonRoot,{rounded:"sm",size:"tiny",status:"default",variant:"secondary",iconOnly:!0,className:"absolute right-20 top-20 z-10",onClick:()=>{const t=[...d],o=t.findIndex(u=>u.id===r.id);o>-1&&(t.splice(o,1),l(t),c(t[0]))},children:e.jsx(v.ButtonIcon,{children:e.jsx(p,{variant:"outlined",className:"h-16 w-16 text-error"})})})]}):i})};n.displayName="ImageUploaderMainPreview";exports.ImageUploaderMainPreview=n;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("./mainstack-design-system383.cjs");require("./mainstack-design-system384.cjs");const m=require("./mainstack-design-system385.cjs");require("./mainstack-design-system386.cjs");require("./mainstack-design-system355.cjs");const p=require("./mainstack-design-system284.cjs"),g=require("./mainstack-design-system588.cjs"),b=require("./mainstack-design-system24.cjs"),n=({className:a,children:i,...s})=>{const{mainPreviewFile:r,onValuesChange:l,values:d,setMainPreviewFile:c}=b.useImageUploaderContext();return e.jsx("div",{role:"region","data-slot":"image-uploader-dropzone","data-active-preview":!!r?.id,className:g.cn("relative border border-dashed border-border-interactive-neutral rounded-20 bg-surface-neutral-l1 w-504 data-[active-preview=true]:overflow-hidden h-378 cursor-pointer hover:bg-interactive-secondary data-dragging:border-border-interactive-neutral active:ring-2 active:ring-border-interactive-neutral-pressed ",a),...s,children:r?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:r.previewSrc,alt:"Image Uploader Main Preview image ",className:"absolute top-0 left-0 w-full h-full object-cover"}),e.jsx(m.ButtonRoot,{rounded:"sm",size:"tiny",status:"default",variant:"secondary",iconOnly:!0,className:"absolute right-20 top-20 z-10",onClick:()=>{const t=[...d],o=t.findIndex(u=>u.id===r.id);o>-1&&(t.splice(o,1),l(t),c(t[0]||null))},children:e.jsx(v.ButtonIcon,{children:e.jsx(p,{variant:"outlined",className:"h-16 w-16 text-error"})})})]}):i})};n.displayName="ImageUploaderMainPreview";exports.ImageUploaderMainPreview=n;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as e, jsxs as m, Fragment as
|
|
2
|
-
import { ButtonIcon as
|
|
1
|
+
import { jsx as e, jsxs as m, Fragment as u } from "react/jsx-runtime";
|
|
2
|
+
import { ButtonIcon as p } from "./mainstack-design-system383.js";
|
|
3
3
|
import "./mainstack-design-system384.js";
|
|
4
4
|
import { ButtonRoot as v } from "./mainstack-design-system385.js";
|
|
5
5
|
import "./mainstack-design-system386.js";
|
|
@@ -12,7 +12,7 @@ const w = ({
|
|
|
12
12
|
children: o,
|
|
13
13
|
...n
|
|
14
14
|
}) => {
|
|
15
|
-
const { mainPreviewFile: r, onValuesChange:
|
|
15
|
+
const { mainPreviewFile: r, onValuesChange: l, values: d, setMainPreviewFile: s } = h();
|
|
16
16
|
return /* @__PURE__ */ e(
|
|
17
17
|
"div",
|
|
18
18
|
{
|
|
@@ -24,7 +24,7 @@ const w = ({
|
|
|
24
24
|
t
|
|
25
25
|
),
|
|
26
26
|
...n,
|
|
27
|
-
children: r ? /* @__PURE__ */ m(
|
|
27
|
+
children: r ? /* @__PURE__ */ m(u, { children: [
|
|
28
28
|
/* @__PURE__ */ e(
|
|
29
29
|
"img",
|
|
30
30
|
{
|
|
@@ -43,12 +43,12 @@ const w = ({
|
|
|
43
43
|
iconOnly: !0,
|
|
44
44
|
className: "absolute right-20 top-20 z-10",
|
|
45
45
|
onClick: () => {
|
|
46
|
-
const a = [...
|
|
46
|
+
const a = [...d], i = a.findIndex(
|
|
47
47
|
(c) => c.id === r.id
|
|
48
48
|
);
|
|
49
|
-
i > -1 && (a.splice(i, 1),
|
|
49
|
+
i > -1 && (a.splice(i, 1), l(a), s(a[0] || null));
|
|
50
50
|
},
|
|
51
|
-
children: /* @__PURE__ */ e(
|
|
51
|
+
children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
|
|
52
52
|
g,
|
|
53
53
|
{
|
|
54
54
|
variant: "outlined",
|