@drawbridge/components 0.0.7 → 0.0.8

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 (3) hide show
  1. package/dist/card-advertisement.js +62 -105
  2. package/dist/card-advertisement.mjs +62 -95
  3. package/package.json +33 -29
package/dist/card-advertisement.js CHANGED
@@ -1,8 +1,6 @@
1
- var __create = Object.create;
2
1
  var __defProp = Object.defineProperty;
3
2
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
5
  var __export = (target, all) => {
8
6
  for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
16
14
  }
17
15
  return to;
18
16
  };
19
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
- // If the importer is in node compatibility mode or this is not an ESM
21
- // file that has been converted to a CommonJS file using a Babel-
22
- // compatible transform (i.e. "__esModule" has not been set), then set
23
- // "default" to the CommonJS "module.exports" for node compatibility.
24
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
- mod
26
- ));
27
17
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
18
 
29
19
  // components/card-advertisement.js
@@ -32,7 +22,8 @@ __export(card_advertisement_exports, {
32
22
  default: () => card_advertisement_default
33
23
  });
34
24
  module.exports = __toCommonJS(card_advertisement_exports);
35
- var import_react = __toESM(require("react"));
25
+ var import_react = require("react");
26
+ var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
36
27
  var import_jsx_runtime = require("react/jsx-runtime");
37
28
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
38
29
  "img",
@@ -66,6 +57,8 @@ var CardAdvertisement = ({
66
57
  lead,
67
58
  onClick = () => {
68
59
  },
60
+ onVariantSelect = () => {
61
+ },
69
62
  organization,
70
63
  page,
71
64
  preview = false,
@@ -74,27 +67,10 @@ var CardAdvertisement = ({
74
67
  url,
75
68
  VideoComponent = DefaultVideo
76
69
  }) => {
77
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
70
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
78
71
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
79
- const hasVariants = variants.length > 1;
80
- const [variantsOpen, setVariantsOpen] = (0, import_react.useState)(false);
81
- const variantUrl = (variant) => {
82
- var _a2;
83
- const variantShopifyId = (variant.shopifyId || "").split("/").pop();
84
- const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
85
- if (!domain || !variantShopifyId) return null;
86
- const params = [
87
- ...campaign ? ["attributes[drwbrdg_ca]=" + campaign] : [],
88
- ...organization ? ["attributes[drwbrdg_or]=" + organization] : [],
89
- ...advertisement ? ["attributes[drwbrdg_ad]=" + advertisement] : [],
90
- ...affiliate ? ["attributes[drwbrdg_af]=" + affiliate] : [],
91
- ...page ? ["attributes[drwbrdg_pg]=" + page] : [],
92
- ...(lead == null ? void 0 : lead.email) ? ["checkout[email]=" + encodeURIComponent(lead.email)] : [],
93
- ...(lead == null ? void 0 : lead.name) ? ["checkout[shipping_address][first_name]=" + encodeURIComponent(lead.name)] : [],
94
- ...((_a2 = lead == null ? void 0 : lead.phone) == null ? void 0 : _a2.number) ? ["checkout[shipping_address][phone]=" + encodeURIComponent(lead.phone.number)] : []
95
- ].join("&");
96
- return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
97
- };
72
+ const hasVariants = variants.length > 0;
73
+ const [selectedVariant, setSelectedVariant] = (0, import_react.useState)(variants[0] || null);
98
74
  const style = {
99
75
  background: {
100
76
  color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
@@ -125,7 +101,8 @@ var CardAdvertisement = ({
125
101
  "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
126
102
  ]
127
103
  };
128
- if (!(asset == null ? void 0 : asset.sizes) && !(product == null ? void 0 : product.image)) {
104
+ const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
105
+ if (!(asset == null ? void 0 : asset.sizes) && !productImage) {
129
106
  classes.asset.push("bg-gray-light");
130
107
  }
131
108
  ;
@@ -157,23 +134,21 @@ var CardAdvertisement = ({
157
134
  key: asset == null ? void 0 : asset.id,
158
135
  priority: false,
159
136
  sizes: "100%",
160
- src: [
161
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
162
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
163
- ].filter(Boolean).join("")
137
+ src: (0, import_cdn.cdnSrc)(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
164
138
  }
165
139
  }
166
140
  ),
167
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
141
+ !(asset == null ? void 0 : asset.sizes) && productImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
168
142
  ImageComponent,
169
143
  {
170
144
  ...{
171
145
  alt: (product == null ? void 0 : product.title) || "Product",
172
146
  className: "w-full h-full object-cover",
173
147
  fill: true,
148
+ key: productImage,
174
149
  priority: false,
175
150
  sizes: "100%",
176
- src: product.image,
151
+ src: productImage,
177
152
  unoptimized: true
178
153
  }
179
154
  }
@@ -189,70 +164,13 @@ var CardAdvertisement = ({
189
164
  {
190
165
  ...{
191
166
  className: "w-full h-full",
192
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
193
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
194
- 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)
167
+ hsl: (0, import_cdn.cdnSrc)(asset, "hsl", asset == null ? void 0 : asset.updatedAt),
168
+ mp4: (0, import_cdn.cdnSrc)(asset, "original", asset == null ? void 0 : asset.updatedAt),
169
+ poster: (0, import_cdn.cdnSrc)((_i = asset == null ? void 0 : asset.frames) == null ? void 0 : _i[asset == null ? void 0 : asset.poster], "500x500", asset == null ? void 0 : asset.updatedAt) || (0, import_cdn.cdnSrc)((_j = asset == null ? void 0 : asset.frames) == null ? void 0 : _j[asset == null ? void 0 : asset.poster], "1080x1920", asset == null ? void 0 : asset.updatedAt)
195
170
  }
196
171
  }
197
172
  )
198
173
  }
199
- ),
200
- hasVariants && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
201
- "div",
202
- {
203
- ...{
204
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
205
- style: {
206
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.rgb.replace(")", ", 0.92)"),
207
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
208
- }
209
- },
210
- children: [
211
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
212
- "p",
213
- {
214
- ...{
215
- className: "text-xs",
216
- style: {
217
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.rgb.replace(")", ", 0.6)")
218
- }
219
- },
220
- children: "Select an option"
221
- }
222
- ),
223
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
224
- "div",
225
- {
226
- ...{
227
- className: "flex flex-wrap gap-2"
228
- },
229
- children: variants.map((variant) => {
230
- var _a2, _b2, _c2, _d2;
231
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
232
- "button",
233
- {
234
- ...{
235
- className: "text-xs px-3 py-1.5 rounded border transition-colors",
236
- onClick: () => {
237
- if (preview) return;
238
- const href = variantUrl(variant);
239
- if (href) window.open(href, "_blank");
240
- },
241
- style: {
242
- borderColor: (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb.replace(")", ", 0.3)"),
243
- color: (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.hex
244
- },
245
- type: "button"
246
- },
247
- children: variant.title
248
- },
249
- variant.shopifyId
250
- );
251
- })
252
- }
253
- )
254
- ]
255
- }
256
174
  )
257
175
  ]
258
176
  }
@@ -264,27 +182,66 @@ var CardAdvertisement = ({
264
182
  className: classes.content.join(" "),
265
183
  style: {
266
184
  ...fonts == null ? void 0 : fonts.body,
267
- backgroundColor: (_w = (_v = style == null ? void 0 : style.text) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
268
- color: (_y = (_x = style == null ? void 0 : style.background) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
185
+ backgroundColor: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
186
+ color: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.hex
269
187
  }
270
188
  },
271
189
  children: [
272
- title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
190
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
191
+ "div",
192
+ {
193
+ ...{
194
+ className: "flex-1 min-w-0 space-y-2"
195
+ },
196
+ children: [
197
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
198
+ variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
199
+ "select",
200
+ {
201
+ ...{
202
+ className: "w-full text-xs rounded border px-2 py-1 bg-transparent",
203
+ onChange: (e) => {
204
+ const variant = variants.find((v) => v.providerId === e.target.value);
205
+ if (variant) setSelectedVariant(variant);
206
+ },
207
+ style: {
208
+ borderColor: (_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb.replace(")", ", 0.3)"),
209
+ color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
210
+ },
211
+ value: (selectedVariant == null ? void 0 : selectedVariant.providerId) || ""
212
+ },
213
+ children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
214
+ "option",
215
+ {
216
+ ...{
217
+ value: variant.providerId
218
+ },
219
+ children: variant.title
220
+ },
221
+ variant.providerId
222
+ ))
223
+ }
224
+ )
225
+ ]
226
+ }
227
+ ),
273
228
  button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
274
229
  "button",
275
230
  {
276
231
  ...{
277
232
  className: classes.button.join(" "),
278
233
  disabled: !preview && !hasVariants && !url,
279
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
234
+ onClick: hasVariants ? () => {
235
+ if (!preview) onVariantSelect(selectedVariant);
236
+ } : preview ? () => {
280
237
  } : onClick,
281
238
  style: {
282
- backgroundColor: (_A = (_z = style == null ? void 0 : style.background) == null ? void 0 : _z.color) == null ? void 0 : _A.hex,
283
- color: (_C = (_B = style == null ? void 0 : style.text) == null ? void 0 : _B.color) == null ? void 0 : _C.hex
239
+ backgroundColor: (_t = (_s = style == null ? void 0 : style.background) == null ? void 0 : _s.color) == null ? void 0 : _t.hex,
240
+ color: (_v = (_u = style == null ? void 0 : style.text) == null ? void 0 : _u.color) == null ? void 0 : _v.hex
284
241
  },
285
242
  type: "button"
286
243
  },
287
- children: variantsOpen ? "Close" : button
244
+ children: button
288
245
  }
289
246
  )
290
247
  ]
package/dist/card-advertisement.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  // components/card-advertisement.js
2
- import React, { useState } from "react";
2
+ import { useState } from "react";
3
+ import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
3
4
  import { jsx, jsxs } from "react/jsx-runtime";
4
5
  var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
5
6
  "img",
@@ -33,6 +34,8 @@ var CardAdvertisement = ({
33
34
  lead,
34
35
  onClick = () => {
35
36
  },
37
+ onVariantSelect = () => {
38
+ },
36
39
  organization,
37
40
  page,
38
41
  preview = false,
@@ -41,27 +44,10 @@ var CardAdvertisement = ({
41
44
  url,
42
45
  VideoComponent = DefaultVideo
43
46
  }) => {
44
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
47
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
45
48
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
46
- const hasVariants = variants.length > 1;
47
- const [variantsOpen, setVariantsOpen] = useState(false);
48
- const variantUrl = (variant) => {
49
- var _a2;
50
- const variantShopifyId = (variant.shopifyId || "").split("/").pop();
51
- const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
52
- if (!domain || !variantShopifyId) return null;
53
- const params = [
54
- ...campaign ? ["attributes[drwbrdg_ca]=" + campaign] : [],
55
- ...organization ? ["attributes[drwbrdg_or]=" + organization] : [],
56
- ...advertisement ? ["attributes[drwbrdg_ad]=" + advertisement] : [],
57
- ...affiliate ? ["attributes[drwbrdg_af]=" + affiliate] : [],
58
- ...page ? ["attributes[drwbrdg_pg]=" + page] : [],
59
- ...(lead == null ? void 0 : lead.email) ? ["checkout[email]=" + encodeURIComponent(lead.email)] : [],
60
- ...(lead == null ? void 0 : lead.name) ? ["checkout[shipping_address][first_name]=" + encodeURIComponent(lead.name)] : [],
61
- ...((_a2 = lead == null ? void 0 : lead.phone) == null ? void 0 : _a2.number) ? ["checkout[shipping_address][phone]=" + encodeURIComponent(lead.phone.number)] : []
62
- ].join("&");
63
- return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
64
- };
49
+ const hasVariants = variants.length > 0;
50
+ const [selectedVariant, setSelectedVariant] = useState(variants[0] || null);
65
51
  const style = {
66
52
  background: {
67
53
  color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
@@ -92,7 +78,8 @@ var CardAdvertisement = ({
92
78
  "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
93
79
  ]
94
80
  };
95
- if (!(asset == null ? void 0 : asset.sizes) && !(product == null ? void 0 : product.image)) {
81
+ const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
82
+ if (!(asset == null ? void 0 : asset.sizes) && !productImage) {
96
83
  classes.asset.push("bg-gray-light");
97
84
  }
98
85
  ;
@@ -124,23 +111,21 @@ var CardAdvertisement = ({
124
111
  key: asset == null ? void 0 : asset.id,
125
112
  priority: false,
126
113
  sizes: "100%",
127
- src: [
128
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
129
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
130
- ].filter(Boolean).join("")
114
+ src: cdnSrc(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
131
115
  }
132
116
  }
133
117
  ),
134
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ jsx(
118
+ !(asset == null ? void 0 : asset.sizes) && productImage && /* @__PURE__ */ jsx(
135
119
  ImageComponent,
136
120
  {
137
121
  ...{
138
122
  alt: (product == null ? void 0 : product.title) || "Product",
139
123
  className: "w-full h-full object-cover",
140
124
  fill: true,
125
+ key: productImage,
141
126
  priority: false,
142
127
  sizes: "100%",
143
- src: product.image,
128
+ src: productImage,
144
129
  unoptimized: true
145
130
  }
146
131
  }
@@ -156,70 +141,13 @@ var CardAdvertisement = ({
156
141
  {
157
142
  ...{
158
143
  className: "w-full h-full",
159
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
160
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
161
- 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)
144
+ hsl: cdnSrc(asset, "hsl", asset == null ? void 0 : asset.updatedAt),
145
+ mp4: cdnSrc(asset, "original", asset == null ? void 0 : asset.updatedAt),
146
+ poster: cdnSrc((_i = asset == null ? void 0 : asset.frames) == null ? void 0 : _i[asset == null ? void 0 : asset.poster], "500x500", asset == null ? void 0 : asset.updatedAt) || cdnSrc((_j = asset == null ? void 0 : asset.frames) == null ? void 0 : _j[asset == null ? void 0 : asset.poster], "1080x1920", asset == null ? void 0 : asset.updatedAt)
162
147
  }
163
148
  }
164
149
  )
165
150
  }
166
- ),
167
- hasVariants && /* @__PURE__ */ jsxs(
168
- "div",
169
- {
170
- ...{
171
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
172
- style: {
173
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.rgb.replace(")", ", 0.92)"),
174
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
175
- }
176
- },
177
- children: [
178
- /* @__PURE__ */ jsx(
179
- "p",
180
- {
181
- ...{
182
- className: "text-xs",
183
- style: {
184
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.rgb.replace(")", ", 0.6)")
185
- }
186
- },
187
- children: "Select an option"
188
- }
189
- ),
190
- /* @__PURE__ */ jsx(
191
- "div",
192
- {
193
- ...{
194
- className: "flex flex-wrap gap-2"
195
- },
196
- children: variants.map((variant) => {
197
- var _a2, _b2, _c2, _d2;
198
- return /* @__PURE__ */ jsx(
199
- "button",
200
- {
201
- ...{
202
- className: "text-xs px-3 py-1.5 rounded border transition-colors",
203
- onClick: () => {
204
- if (preview) return;
205
- const href = variantUrl(variant);
206
- if (href) window.open(href, "_blank");
207
- },
208
- style: {
209
- borderColor: (_b2 = (_a2 = style == null ? void 0 : style.background) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb.replace(")", ", 0.3)"),
210
- color: (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.hex
211
- },
212
- type: "button"
213
- },
214
- children: variant.title
215
- },
216
- variant.shopifyId
217
- );
218
- })
219
- }
220
- )
221
- ]
222
- }
223
151
  )
224
152
  ]
225
153
  }
@@ -231,27 +159,66 @@ var CardAdvertisement = ({
231
159
  className: classes.content.join(" "),
232
160
  style: {
233
161
  ...fonts == null ? void 0 : fonts.body,
234
- backgroundColor: (_w = (_v = style == null ? void 0 : style.text) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
235
- color: (_y = (_x = style == null ? void 0 : style.background) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
162
+ backgroundColor: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
163
+ color: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.hex
236
164
  }
237
165
  },
238
166
  children: [
239
- title && /* @__PURE__ */ jsx("p", { children: title }),
167
+ /* @__PURE__ */ jsxs(
168
+ "div",
169
+ {
170
+ ...{
171
+ className: "flex-1 min-w-0 space-y-2"
172
+ },
173
+ children: [
174
+ title && /* @__PURE__ */ jsx("p", { children: title }),
175
+ variants.length > 1 && /* @__PURE__ */ jsx(
176
+ "select",
177
+ {
178
+ ...{
179
+ className: "w-full text-xs rounded border px-2 py-1 bg-transparent",
180
+ onChange: (e) => {
181
+ const variant = variants.find((v) => v.providerId === e.target.value);
182
+ if (variant) setSelectedVariant(variant);
183
+ },
184
+ style: {
185
+ borderColor: (_p = (_o = style == null ? void 0 : style.background) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb.replace(")", ", 0.3)"),
186
+ color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
187
+ },
188
+ value: (selectedVariant == null ? void 0 : selectedVariant.providerId) || ""
189
+ },
190
+ children: variants.map((variant) => /* @__PURE__ */ jsx(
191
+ "option",
192
+ {
193
+ ...{
194
+ value: variant.providerId
195
+ },
196
+ children: variant.title
197
+ },
198
+ variant.providerId
199
+ ))
200
+ }
201
+ )
202
+ ]
203
+ }
204
+ ),
240
205
  button && /* @__PURE__ */ jsx(
241
206
  "button",
242
207
  {
243
208
  ...{
244
209
  className: classes.button.join(" "),
245
210
  disabled: !preview && !hasVariants && !url,
246
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
211
+ onClick: hasVariants ? () => {
212
+ if (!preview) onVariantSelect(selectedVariant);
213
+ } : preview ? () => {
247
214
  } : onClick,
248
215
  style: {
249
- backgroundColor: (_A = (_z = style == null ? void 0 : style.background) == null ? void 0 : _z.color) == null ? void 0 : _A.hex,
250
- color: (_C = (_B = style == null ? void 0 : style.text) == null ? void 0 : _B.color) == null ? void 0 : _C.hex
216
+ backgroundColor: (_t = (_s = style == null ? void 0 : style.background) == null ? void 0 : _s.color) == null ? void 0 : _t.hex,
217
+ color: (_v = (_u = style == null ? void 0 : style.text) == null ? void 0 : _u.color) == null ? void 0 : _v.hex
251
218
  },
252
219
  type: "button"
253
220
  },
254
- children: variantsOpen ? "Close" : button
221
+ children: button
255
222
  }
256
223
  )
257
224
  ]
package/package.json CHANGED
@@ -1,31 +1,35 @@
1
1
  {
2
- "name": "@drawbridge/components",
3
- "version": "0.0.7",
4
- "exports": {
5
- "./card-advertisement": {
6
- "types": "./types/card-advertisement.d.ts",
7
- "default": "./dist/card-advertisement.js"
8
- }
9
- },
10
- "files": [
11
- "dist",
12
- "types"
13
- ],
14
- "author": "",
15
- "license": "ISC",
16
- "description": "",
17
- "publishConfig": {
18
- "access": "public"
19
- },
20
- "scripts": {
21
- "build": "tsup && npm publish"
22
- },
23
- "peerDependencies": {
24
- "next": ">=14",
25
- "react": ">=18"
26
- },
27
- "devDependencies": {
28
- "@types/react": "^18.0.0",
29
- "tsup": "^8.5.1"
30
- }
2
+ "name": "@drawbridge/components",
3
+ "version": "0.0.8",
4
+ "overrides": {
5
+ "postcss": "8.5.15"
6
+ },
7
+ "exports": {
8
+ "./card-advertisement": {
9
+ "types": "./types/card-advertisement.d.ts",
10
+ "default": "./dist/card-advertisement.js"
11
+ }
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "types"
16
+ ],
17
+ "author": "",
18
+ "license": "ISC",
19
+ "description": "",
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "scripts": {
24
+ "build": "tsup && npm publish"
25
+ },
26
+ "peerDependencies": {
27
+ "@drawbridge/drawbridge-utils": "0.0.13",
28
+ "next": ">=14",
29
+ "react": ">=18"
30
+ },
31
+ "devDependencies": {
32
+ "@types/react": "18.0.0",
33
+ "tsup": "8.5.1"
34
+ }
31
35
  }