@drawbridge/components 0.0.1 → 0.0.3

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.
Files changed (4) hide show
  1. package/dist/card-advertisement.js +139 -127
  2. package/dist/card-advertisement.mjs +139 -127
  3. package/package.json +7 -3
  4. package/types/card-advertisement.d.ts +45 -0
package/dist/card-advertisement.js CHANGED
@@ -23,7 +23,8 @@ __export(card_advertisement_exports, {
23
23
  });
24
24
  module.exports = __toCommonJS(card_advertisement_exports);
25
25
  var import_react = require("react");
26
- var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
26
+ var import_jsx_runtime = require("react/jsx-runtime");
27
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
27
28
  "img",
28
29
  {
29
30
  ...{
@@ -33,7 +34,7 @@ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElem
33
34
  }
34
35
  }
35
36
  );
36
- var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
37
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
37
38
  "video",
38
39
  {
39
40
  ...{
@@ -53,6 +54,7 @@ var CardAdvertisement = ({
53
54
  onClick = () => {
54
55
  },
55
56
  organization,
57
+ preview = false,
56
58
  product,
57
59
  title,
58
60
  url,
@@ -106,7 +108,7 @@ var CardAdvertisement = ({
106
108
  classes.asset.push("bg-gray-light");
107
109
  }
108
110
  ;
109
- return /* @__PURE__ */ React.createElement(
111
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
110
112
  "div",
111
113
  {
112
114
  ...{
@@ -115,140 +117,150 @@ var CardAdvertisement = ({
115
117
  backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
116
118
  color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
117
119
  }
118
- }
119
- },
120
- /* @__PURE__ */ React.createElement(
121
- "span",
122
- {
123
- ...{
124
- className: classes.asset.join(" ")
125
- }
126
120
  },
127
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
128
- ImageComponent,
129
- {
130
- ...{
131
- alt: asset == null ? void 0 : asset.filename,
132
- className: "w-full h-full object-cover",
133
- fill: true,
134
- key: asset == null ? void 0 : asset.id,
135
- priority: false,
136
- sizes: "100%",
137
- src: [
138
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
139
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
140
- ].filter(Boolean).join("")
141
- }
142
- }
143
- ),
144
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
145
- ImageComponent,
146
- {
147
- ...{
148
- alt: (product == null ? void 0 : product.title) || "Product",
149
- className: "w-full h-full object-cover",
150
- fill: true,
151
- priority: false,
152
- sizes: "100%",
153
- src: product.image,
154
- unoptimized: true
155
- }
156
- }
157
- ),
158
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
159
- "div",
160
- {
161
- ...{
162
- className: "relative h-full w-full aspect-[9/16]"
163
- }
164
- },
165
- /* @__PURE__ */ React.createElement(
166
- VideoComponent,
121
+ children: [
122
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
123
+ "span",
167
124
  {
168
125
  ...{
169
- className: "w-full h-full",
170
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
171
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
172
- poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
173
- }
174
- }
175
- )
176
- ),
177
- hasVariants && /* @__PURE__ */ React.createElement(
178
- "div",
179
- {
180
- ...{
181
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
182
- style: {
183
- backgroundColor: "rgba(0,0,0,0.92)",
184
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
185
- }
126
+ className: classes.asset.join(" ")
127
+ },
128
+ children: [
129
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
130
+ ImageComponent,
131
+ {
132
+ ...{
133
+ alt: asset == null ? void 0 : asset.filename,
134
+ className: "w-full h-full object-cover",
135
+ fill: true,
136
+ key: asset == null ? void 0 : asset.id,
137
+ priority: false,
138
+ sizes: "100%",
139
+ src: [
140
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
141
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
142
+ ].filter(Boolean).join("")
143
+ }
144
+ }
145
+ ),
146
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
147
+ ImageComponent,
148
+ {
149
+ ...{
150
+ alt: (product == null ? void 0 : product.title) || "Product",
151
+ className: "w-full h-full object-cover",
152
+ fill: true,
153
+ priority: false,
154
+ sizes: "100%",
155
+ src: product.image,
156
+ unoptimized: true
157
+ }
158
+ }
159
+ ),
160
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
161
+ "div",
162
+ {
163
+ ...{
164
+ className: "relative h-full w-full aspect-[9/16]"
165
+ },
166
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
167
+ VideoComponent,
168
+ {
169
+ ...{
170
+ className: "w-full h-full",
171
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
172
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
173
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
174
+ }
175
+ }
176
+ )
177
+ }
178
+ ),
179
+ hasVariants && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
180
+ "div",
181
+ {
182
+ ...{
183
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
184
+ style: {
185
+ backgroundColor: "rgba(0,0,0,0.92)",
186
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
187
+ }
188
+ },
189
+ children: [
190
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
191
+ "p",
192
+ {
193
+ ...{
194
+ className: "text-xs text-white/60"
195
+ },
196
+ children: "Select an option"
197
+ }
198
+ ),
199
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
200
+ "div",
201
+ {
202
+ ...{
203
+ className: "flex flex-wrap gap-2"
204
+ },
205
+ children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
206
+ "button",
207
+ {
208
+ ...{
209
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
210
+ onClick: () => {
211
+ if (preview) return;
212
+ const href = variantUrl(variant);
213
+ if (href) window.open(href, "_blank");
214
+ },
215
+ type: "button"
216
+ },
217
+ children: variant.title
218
+ },
219
+ variant.shopifyId
220
+ ))
221
+ }
222
+ )
223
+ ]
224
+ }
225
+ )
226
+ ]
186
227
  }
187
- },
188
- /* @__PURE__ */ React.createElement(
189
- "p",
190
- {
191
- ...{
192
- className: "text-xs text-white/60"
193
- }
194
- },
195
- "Select an option"
196
228
  ),
197
- /* @__PURE__ */ React.createElement(
198
- "div",
229
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
230
+ "span",
199
231
  {
200
232
  ...{
201
- className: "flex flex-wrap gap-2"
202
- }
203
- },
204
- variants.map((variant) => /* @__PURE__ */ React.createElement(
205
- "button",
206
- {
207
- key: variant.shopifyId,
208
- ...{
209
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
210
- onClick: () => {
211
- const href = variantUrl(variant);
212
- if (href) window.open(href, "_blank");
213
- },
214
- type: "button"
233
+ className: classes.content.join(" "),
234
+ style: {
235
+ ...fonts == null ? void 0 : fonts.body,
236
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
237
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
215
238
  }
216
239
  },
217
- variant.title
218
- ))
219
- )
220
- )
221
- ),
222
- /* @__PURE__ */ React.createElement(
223
- "span",
224
- {
225
- ...{
226
- className: classes.content.join(" "),
227
- style: {
228
- ...fonts == null ? void 0 : fonts.body,
229
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
230
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
231
- }
232
- }
233
- },
234
- title && /* @__PURE__ */ React.createElement("p", null, title),
235
- button && /* @__PURE__ */ React.createElement(
236
- "button",
237
- {
238
- ...{
239
- className: classes.button.join(" "),
240
- disabled: !hasVariants && !url,
241
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : onClick,
242
- style: {
243
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
244
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
245
- },
246
- type: "button"
240
+ children: [
241
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
242
+ button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
243
+ "button",
244
+ {
245
+ ...{
246
+ className: classes.button.join(" "),
247
+ disabled: !preview && !hasVariants && !url,
248
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
249
+ } : onClick,
250
+ style: {
251
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
252
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
253
+ },
254
+ type: "button"
255
+ },
256
+ children: variantsOpen ? "Close" : button
257
+ }
258
+ )
259
+ ]
247
260
  }
248
- },
249
- variantsOpen ? "Close" : button
250
- )
251
- )
261
+ )
262
+ ]
263
+ }
252
264
  );
253
265
  };
254
266
  var card_advertisement_default = CardAdvertisement;
package/dist/card-advertisement.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  // components/card-advertisement.js
2
2
  import { useState } from "react";
3
- var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
4
5
  "img",
5
6
  {
6
7
  ...{
@@ -10,7 +11,7 @@ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElem
10
11
  }
11
12
  }
12
13
  );
13
- var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
14
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ jsx(
14
15
  "video",
15
16
  {
16
17
  ...{
@@ -30,6 +31,7 @@ var CardAdvertisement = ({
30
31
  onClick = () => {
31
32
  },
32
33
  organization,
34
+ preview = false,
33
35
  product,
34
36
  title,
35
37
  url,
@@ -83,7 +85,7 @@ var CardAdvertisement = ({
83
85
  classes.asset.push("bg-gray-light");
84
86
  }
85
87
  ;
86
- return /* @__PURE__ */ React.createElement(
88
+ return /* @__PURE__ */ jsxs(
87
89
  "div",
88
90
  {
89
91
  ...{
@@ -92,140 +94,150 @@ var CardAdvertisement = ({
92
94
  backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
93
95
  color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
94
96
  }
95
- }
96
- },
97
- /* @__PURE__ */ React.createElement(
98
- "span",
99
- {
100
- ...{
101
- className: classes.asset.join(" ")
102
- }
103
97
  },
104
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
105
- ImageComponent,
106
- {
107
- ...{
108
- alt: asset == null ? void 0 : asset.filename,
109
- className: "w-full h-full object-cover",
110
- fill: true,
111
- key: asset == null ? void 0 : asset.id,
112
- priority: false,
113
- sizes: "100%",
114
- src: [
115
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
116
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
117
- ].filter(Boolean).join("")
118
- }
119
- }
120
- ),
121
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
122
- ImageComponent,
123
- {
124
- ...{
125
- alt: (product == null ? void 0 : product.title) || "Product",
126
- className: "w-full h-full object-cover",
127
- fill: true,
128
- priority: false,
129
- sizes: "100%",
130
- src: product.image,
131
- unoptimized: true
132
- }
133
- }
134
- ),
135
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
136
- "div",
137
- {
138
- ...{
139
- className: "relative h-full w-full aspect-[9/16]"
140
- }
141
- },
142
- /* @__PURE__ */ React.createElement(
143
- VideoComponent,
98
+ children: [
99
+ /* @__PURE__ */ jsxs(
100
+ "span",
144
101
  {
145
102
  ...{
146
- className: "w-full h-full",
147
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
148
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
149
- poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
150
- }
151
- }
152
- )
153
- ),
154
- hasVariants && /* @__PURE__ */ React.createElement(
155
- "div",
156
- {
157
- ...{
158
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
159
- style: {
160
- backgroundColor: "rgba(0,0,0,0.92)",
161
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
162
- }
103
+ className: classes.asset.join(" ")
104
+ },
105
+ children: [
106
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ jsx(
107
+ ImageComponent,
108
+ {
109
+ ...{
110
+ alt: asset == null ? void 0 : asset.filename,
111
+ className: "w-full h-full object-cover",
112
+ fill: true,
113
+ key: asset == null ? void 0 : asset.id,
114
+ priority: false,
115
+ sizes: "100%",
116
+ src: [
117
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
118
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
119
+ ].filter(Boolean).join("")
120
+ }
121
+ }
122
+ ),
123
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ jsx(
124
+ ImageComponent,
125
+ {
126
+ ...{
127
+ alt: (product == null ? void 0 : product.title) || "Product",
128
+ className: "w-full h-full object-cover",
129
+ fill: true,
130
+ priority: false,
131
+ sizes: "100%",
132
+ src: product.image,
133
+ unoptimized: true
134
+ }
135
+ }
136
+ ),
137
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ jsx(
138
+ "div",
139
+ {
140
+ ...{
141
+ className: "relative h-full w-full aspect-[9/16]"
142
+ },
143
+ children: /* @__PURE__ */ jsx(
144
+ VideoComponent,
145
+ {
146
+ ...{
147
+ className: "w-full h-full",
148
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
149
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
150
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
151
+ }
152
+ }
153
+ )
154
+ }
155
+ ),
156
+ hasVariants && /* @__PURE__ */ jsxs(
157
+ "div",
158
+ {
159
+ ...{
160
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
161
+ style: {
162
+ backgroundColor: "rgba(0,0,0,0.92)",
163
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
164
+ }
165
+ },
166
+ children: [
167
+ /* @__PURE__ */ jsx(
168
+ "p",
169
+ {
170
+ ...{
171
+ className: "text-xs text-white/60"
172
+ },
173
+ children: "Select an option"
174
+ }
175
+ ),
176
+ /* @__PURE__ */ jsx(
177
+ "div",
178
+ {
179
+ ...{
180
+ className: "flex flex-wrap gap-2"
181
+ },
182
+ children: variants.map((variant) => /* @__PURE__ */ jsx(
183
+ "button",
184
+ {
185
+ ...{
186
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
187
+ onClick: () => {
188
+ if (preview) return;
189
+ const href = variantUrl(variant);
190
+ if (href) window.open(href, "_blank");
191
+ },
192
+ type: "button"
193
+ },
194
+ children: variant.title
195
+ },
196
+ variant.shopifyId
197
+ ))
198
+ }
199
+ )
200
+ ]
201
+ }
202
+ )
203
+ ]
163
204
  }
164
- },
165
- /* @__PURE__ */ React.createElement(
166
- "p",
167
- {
168
- ...{
169
- className: "text-xs text-white/60"
170
- }
171
- },
172
- "Select an option"
173
205
  ),
174
- /* @__PURE__ */ React.createElement(
175
- "div",
206
+ /* @__PURE__ */ jsxs(
207
+ "span",
176
208
  {
177
209
  ...{
178
- className: "flex flex-wrap gap-2"
179
- }
180
- },
181
- variants.map((variant) => /* @__PURE__ */ React.createElement(
182
- "button",
183
- {
184
- key: variant.shopifyId,
185
- ...{
186
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
187
- onClick: () => {
188
- const href = variantUrl(variant);
189
- if (href) window.open(href, "_blank");
190
- },
191
- type: "button"
210
+ className: classes.content.join(" "),
211
+ style: {
212
+ ...fonts == null ? void 0 : fonts.body,
213
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
214
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
192
215
  }
193
216
  },
194
- variant.title
195
- ))
196
- )
197
- )
198
- ),
199
- /* @__PURE__ */ React.createElement(
200
- "span",
201
- {
202
- ...{
203
- className: classes.content.join(" "),
204
- style: {
205
- ...fonts == null ? void 0 : fonts.body,
206
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
207
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
208
- }
209
- }
210
- },
211
- title && /* @__PURE__ */ React.createElement("p", null, title),
212
- button && /* @__PURE__ */ React.createElement(
213
- "button",
214
- {
215
- ...{
216
- className: classes.button.join(" "),
217
- disabled: !hasVariants && !url,
218
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : onClick,
219
- style: {
220
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
221
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
222
- },
223
- type: "button"
217
+ children: [
218
+ title && /* @__PURE__ */ jsx("p", { children: title }),
219
+ button && /* @__PURE__ */ jsx(
220
+ "button",
221
+ {
222
+ ...{
223
+ className: classes.button.join(" "),
224
+ disabled: !preview && !hasVariants && !url,
225
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
226
+ } : onClick,
227
+ style: {
228
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
229
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
230
+ },
231
+ type: "button"
232
+ },
233
+ children: variantsOpen ? "Close" : button
234
+ }
235
+ )
236
+ ]
224
237
  }
225
- },
226
- variantsOpen ? "Close" : button
227
- )
228
- )
238
+ )
239
+ ]
240
+ }
229
241
  );
230
242
  };
231
243
  var card_advertisement_default = CardAdvertisement;
package/package.json CHANGED
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "exports": {
5
- "./card-advertisement": "./dist/card-advertisement.js"
5
+ "./card-advertisement": {
6
+ "types": "./types/card-advertisement.d.ts",
7
+ "default": "./dist/card-advertisement.js"
8
+ }
6
9
  },
7
10
  "files": [
8
- "dist"
11
+ "dist",
12
+ "types"
9
13
  ],
10
14
  "author": "",
11
15
  "license": "ISC",
package/types/card-advertisement.d.ts ADDED
@@ -0,0 +1,45 @@
1
+ import { ComponentType } from 'react';
2
+
3
+ export interface CardAdvertisementProps {
4
+ asset?: {
5
+ filename?: string;
6
+ frames?: Record<string, { sizes?: Record<string, string> }>;
7
+ id?: string;
8
+ mimetype?: string;
9
+ poster?: string;
10
+ sizes?: Record<string, string>;
11
+ updatedAt?: string;
12
+ };
13
+ brand?: {
14
+ style?: {
15
+ background?: { color?: { hex?: string; rgb?: string } };
16
+ text?: { color?: { hex?: string; rgb?: string } };
17
+ };
18
+ };
19
+ button?: string;
20
+ campaign?: string;
21
+ fonts?: {
22
+ body?: Record<string, unknown>;
23
+ };
24
+ ImageComponent?: ComponentType<any>;
25
+ onClick?: () => void;
26
+ organization?: string;
27
+ preview?: boolean;
28
+ product?: {
29
+ image?: string;
30
+ title?: string;
31
+ url?: string;
32
+ variants?: Array<{
33
+ availableForSale: boolean;
34
+ shopifyId: string;
35
+ title: string;
36
+ }>;
37
+ };
38
+ title?: string;
39
+ url?: string;
40
+ VideoComponent?: ComponentType<any>;
41
+ }
42
+
43
+ declare const CardAdvertisement: ComponentType<CardAdvertisementProps>;
44
+
45
+ export default CardAdvertisement;