@drawbridge/components 0.0.36 → 0.0.39

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 +104 -31
  2. package/dist/card-advertisement.mjs +105 -32
  3. package/package.json +2 -2
package/dist/card-advertisement.js CHANGED
@@ -69,10 +69,23 @@ var CardAdvertisement = ({
69
69
  url,
70
70
  VideoComponent = DefaultVideo
71
71
  }) => {
72
- 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, _D, _E, _F, _G, _H, _I, _J, _K, _L;
72
+ 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, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
73
73
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
74
74
  const hasVariants = variants.length > 0;
75
75
  const [selectedVariant, setSelectedVariant] = (0, import_react.useState)(variants[0] || null);
76
+ const [keyboard, setKeyboard] = (0, import_react.useState)(false);
77
+ (0, import_react.useEffect)(() => {
78
+ const down = (e) => {
79
+ if (e.key === "Tab") setKeyboard(true);
80
+ };
81
+ const click = () => setKeyboard(false);
82
+ window.addEventListener("keydown", down);
83
+ window.addEventListener("mousedown", click);
84
+ return () => {
85
+ window.removeEventListener("keydown", down);
86
+ window.removeEventListener("mousedown", click);
87
+ };
88
+ }, []);
76
89
  const style = {
77
90
  background: {
78
91
  color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
@@ -100,7 +113,7 @@ var CardAdvertisement = ({
100
113
  "block w-full space-y-2 border border-gray rounded p-6"
101
114
  ],
102
115
  content: [
103
- "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
116
+ "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded"
104
117
  ]
105
118
  };
106
119
  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
@@ -186,7 +199,8 @@ var CardAdvertisement = ({
186
199
  style: {
187
200
  ...fonts == null ? void 0 : fonts.body,
188
201
  color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
189
- gap: "10px"
202
+ gap: "10px",
203
+ marginTop: "10px"
190
204
  }
191
205
  },
192
206
  children: [
@@ -213,7 +227,8 @@ var CardAdvertisement = ({
213
227
  {
214
228
  ...{
215
229
  style: {
216
- fontSize: "14px"
230
+ fontSize: "14px",
231
+ marginBottom: "10px"
217
232
  }
218
233
  },
219
234
  children: [
@@ -242,32 +257,90 @@ var CardAdvertisement = ({
242
257
  ]
243
258
  }
244
259
  ),
245
- variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
246
- "select",
260
+ variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
261
+ "div",
247
262
  {
248
263
  ...{
249
- className: "w-full text-xs border px-2 py-1 bg-transparent",
250
- onChange: (e) => {
251
- const variant = variants.find((v) => v.id === e.target.value);
252
- if (variant) setSelectedVariant(variant);
253
- },
254
- style: {
255
- borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
256
- borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
257
- color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
258
- },
259
- value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
264
+ className: "relative w-full"
260
265
  },
261
- children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
262
- "option",
263
- {
264
- ...{
265
- value: variant.id
266
- },
267
- children: variant.title
268
- },
269
- variant.id
270
- ))
266
+ children: [
267
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
268
+ "select",
269
+ {
270
+ ...{
271
+ className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
272
+ onChange: (e) => {
273
+ const variant = variants.find((v) => v.id === e.target.value);
274
+ if (variant) setSelectedVariant(variant);
275
+ },
276
+ style: {
277
+ appearance: "none",
278
+ backgroundColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb,
279
+ backgroundImage: "none",
280
+ borderColor: (_p = (_o = style == null ? void 0 : style.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb,
281
+ borderRadius: ((_r = (_q = brand == null ? void 0 : brand.style) == null ? void 0 : _q.button) == null ? void 0 : _r.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
282
+ color: (_t = (_s = style == null ? void 0 : style.text) == null ? void 0 : _s.color) == null ? void 0 : _t.rgb,
283
+ WebkitAppearance: "none"
284
+ },
285
+ value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
286
+ },
287
+ children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
288
+ "option",
289
+ {
290
+ ...{
291
+ value: variant.id
292
+ },
293
+ children: variant.title
294
+ },
295
+ variant.id
296
+ ))
297
+ }
298
+ ),
299
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
300
+ "div",
301
+ {
302
+ ...{
303
+ "aria-hidden": true,
304
+ style: {
305
+ alignItems: "center",
306
+ bottom: 0,
307
+ display: "flex",
308
+ paddingRight: "0.625rem",
309
+ pointerEvents: "none",
310
+ position: "absolute",
311
+ right: 0,
312
+ top: 0
313
+ }
314
+ },
315
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
316
+ "svg",
317
+ {
318
+ ...{
319
+ style: {
320
+ height: "1.25rem",
321
+ width: "1.25rem"
322
+ },
323
+ fill: "none",
324
+ stroke: "currentColor",
325
+ strokeWidth: 1.5,
326
+ viewBox: "0 0 24 24",
327
+ xmlns: "http://www.w3.org/2000/svg"
328
+ },
329
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
330
+ "path",
331
+ {
332
+ ...{
333
+ d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
334
+ strokeLinecap: "round",
335
+ strokeLinejoin: "round"
336
+ }
337
+ }
338
+ )
339
+ }
340
+ )
341
+ }
342
+ )
343
+ ]
271
344
  }
272
345
  )
273
346
  ]
@@ -284,10 +357,10 @@ var CardAdvertisement = ({
284
357
  } : preview ? () => {
285
358
  } : onClick,
286
359
  style: {
287
- backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
288
- borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
289
- borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
290
- color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
360
+ backgroundColor: ((_x = (_w = (_v = (_u = brand == null ? void 0 : brand.style) == null ? void 0 : _u.button) == null ? void 0 : _v.background) == null ? void 0 : _w.color) == null ? void 0 : _x.hex) || ((_z = (_y = style == null ? void 0 : style.text) == null ? void 0 : _y.color) == null ? void 0 : _z.hex),
361
+ borderColor: ((_D = (_C = (_B = (_A = brand == null ? void 0 : brand.style) == null ? void 0 : _A.button) == null ? void 0 : _B.background) == null ? void 0 : _C.color) == null ? void 0 : _D.hex) || ((_F = (_E = style == null ? void 0 : style.text) == null ? void 0 : _E.color) == null ? void 0 : _F.hex),
362
+ borderRadius: ((_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
363
+ color: ((_L = (_K = (_J = (_I = brand == null ? void 0 : brand.style) == null ? void 0 : _I.button) == null ? void 0 : _J.text) == null ? void 0 : _K.color) == null ? void 0 : _L.hex) || ((_N = (_M = style == null ? void 0 : style.background) == null ? void 0 : _M.color) == null ? void 0 : _N.hex)
291
364
  },
292
365
  type: "button"
293
366
  },
package/dist/card-advertisement.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // components/card-advertisement.js
2
- import { useState } from "react";
2
+ import { useEffect, useState } from "react";
3
3
  import { cdnShopify } from "@drawbridge/shopify/cdn";
4
4
  import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
5
5
  import { formatCurrency } from "@drawbridge/drawbridge-utils";
@@ -46,10 +46,23 @@ var CardAdvertisement = ({
46
46
  url,
47
47
  VideoComponent = DefaultVideo
48
48
  }) => {
49
- 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, _D, _E, _F, _G, _H, _I, _J, _K, _L;
49
+ 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, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
50
50
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
51
51
  const hasVariants = variants.length > 0;
52
52
  const [selectedVariant, setSelectedVariant] = useState(variants[0] || null);
53
+ const [keyboard, setKeyboard] = useState(false);
54
+ useEffect(() => {
55
+ const down = (e) => {
56
+ if (e.key === "Tab") setKeyboard(true);
57
+ };
58
+ const click = () => setKeyboard(false);
59
+ window.addEventListener("keydown", down);
60
+ window.addEventListener("mousedown", click);
61
+ return () => {
62
+ window.removeEventListener("keydown", down);
63
+ window.removeEventListener("mousedown", click);
64
+ };
65
+ }, []);
53
66
  const style = {
54
67
  background: {
55
68
  color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
@@ -77,7 +90,7 @@ var CardAdvertisement = ({
77
90
  "block w-full space-y-2 border border-gray rounded p-6"
78
91
  ],
79
92
  content: [
80
- "flex flex-col items-center justify-between space-x-4 text-left text-sm rounded"
93
+ "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded"
81
94
  ]
82
95
  };
83
96
  const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
@@ -163,7 +176,8 @@ var CardAdvertisement = ({
163
176
  style: {
164
177
  ...fonts == null ? void 0 : fonts.body,
165
178
  color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
166
- gap: "10px"
179
+ gap: "10px",
180
+ marginTop: "10px"
167
181
  }
168
182
  },
169
183
  children: [
@@ -190,7 +204,8 @@ var CardAdvertisement = ({
190
204
  {
191
205
  ...{
192
206
  style: {
193
- fontSize: "14px"
207
+ fontSize: "14px",
208
+ marginBottom: "10px"
194
209
  }
195
210
  },
196
211
  children: [
@@ -219,32 +234,90 @@ var CardAdvertisement = ({
219
234
  ]
220
235
  }
221
236
  ),
222
- variants.length > 1 && /* @__PURE__ */ jsx(
223
- "select",
237
+ variants.length > 1 && /* @__PURE__ */ jsxs(
238
+ "div",
224
239
  {
225
240
  ...{
226
- className: "w-full text-xs border px-2 py-1 bg-transparent",
227
- onChange: (e) => {
228
- const variant = variants.find((v) => v.id === e.target.value);
229
- if (variant) setSelectedVariant(variant);
230
- },
231
- style: {
232
- borderColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb.replace(")", ", 0.3)"),
233
- borderRadius: ((_p = (_o = brand == null ? void 0 : brand.style) == null ? void 0 : _o.button) == null ? void 0 : _p.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
234
- color: (_r = (_q = style == null ? void 0 : style.background) == null ? void 0 : _q.color) == null ? void 0 : _r.hex
235
- },
236
- value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
241
+ className: "relative w-full"
237
242
  },
238
- children: variants.map((variant) => /* @__PURE__ */ jsx(
239
- "option",
240
- {
241
- ...{
242
- value: variant.id
243
- },
244
- children: variant.title
245
- },
246
- variant.id
247
- ))
243
+ children: [
244
+ /* @__PURE__ */ jsx(
245
+ "select",
246
+ {
247
+ ...{
248
+ className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
249
+ onChange: (e) => {
250
+ const variant = variants.find((v) => v.id === e.target.value);
251
+ if (variant) setSelectedVariant(variant);
252
+ },
253
+ style: {
254
+ appearance: "none",
255
+ backgroundColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb,
256
+ backgroundImage: "none",
257
+ borderColor: (_p = (_o = style == null ? void 0 : style.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb,
258
+ borderRadius: ((_r = (_q = brand == null ? void 0 : brand.style) == null ? void 0 : _q.button) == null ? void 0 : _r.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
259
+ color: (_t = (_s = style == null ? void 0 : style.text) == null ? void 0 : _s.color) == null ? void 0 : _t.rgb,
260
+ WebkitAppearance: "none"
261
+ },
262
+ value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
263
+ },
264
+ children: variants.map((variant) => /* @__PURE__ */ jsx(
265
+ "option",
266
+ {
267
+ ...{
268
+ value: variant.id
269
+ },
270
+ children: variant.title
271
+ },
272
+ variant.id
273
+ ))
274
+ }
275
+ ),
276
+ /* @__PURE__ */ jsx(
277
+ "div",
278
+ {
279
+ ...{
280
+ "aria-hidden": true,
281
+ style: {
282
+ alignItems: "center",
283
+ bottom: 0,
284
+ display: "flex",
285
+ paddingRight: "0.625rem",
286
+ pointerEvents: "none",
287
+ position: "absolute",
288
+ right: 0,
289
+ top: 0
290
+ }
291
+ },
292
+ children: /* @__PURE__ */ jsx(
293
+ "svg",
294
+ {
295
+ ...{
296
+ style: {
297
+ height: "1.25rem",
298
+ width: "1.25rem"
299
+ },
300
+ fill: "none",
301
+ stroke: "currentColor",
302
+ strokeWidth: 1.5,
303
+ viewBox: "0 0 24 24",
304
+ xmlns: "http://www.w3.org/2000/svg"
305
+ },
306
+ children: /* @__PURE__ */ jsx(
307
+ "path",
308
+ {
309
+ ...{
310
+ d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
311
+ strokeLinecap: "round",
312
+ strokeLinejoin: "round"
313
+ }
314
+ }
315
+ )
316
+ }
317
+ )
318
+ }
319
+ )
320
+ ]
248
321
  }
249
322
  )
250
323
  ]
@@ -261,10 +334,10 @@ var CardAdvertisement = ({
261
334
  } : preview ? () => {
262
335
  } : onClick,
263
336
  style: {
264
- backgroundColor: ((_v = (_u = (_t = (_s = brand == null ? void 0 : brand.style) == null ? void 0 : _s.button) == null ? void 0 : _t.background) == null ? void 0 : _u.color) == null ? void 0 : _v.hex) || ((_x = (_w = style == null ? void 0 : style.text) == null ? void 0 : _w.color) == null ? void 0 : _x.hex),
265
- borderColor: ((_B = (_A = (_z = (_y = brand == null ? void 0 : brand.style) == null ? void 0 : _y.button) == null ? void 0 : _z.background) == null ? void 0 : _A.color) == null ? void 0 : _B.hex) || ((_D = (_C = style == null ? void 0 : style.text) == null ? void 0 : _C.color) == null ? void 0 : _D.hex),
266
- borderRadius: ((_F = (_E = brand == null ? void 0 : brand.style) == null ? void 0 : _E.button) == null ? void 0 : _F.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
267
- color: ((_J = (_I = (_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.text) == null ? void 0 : _I.color) == null ? void 0 : _J.hex) || ((_L = (_K = style == null ? void 0 : style.background) == null ? void 0 : _K.color) == null ? void 0 : _L.hex)
337
+ backgroundColor: ((_x = (_w = (_v = (_u = brand == null ? void 0 : brand.style) == null ? void 0 : _u.button) == null ? void 0 : _v.background) == null ? void 0 : _w.color) == null ? void 0 : _x.hex) || ((_z = (_y = style == null ? void 0 : style.text) == null ? void 0 : _y.color) == null ? void 0 : _z.hex),
338
+ borderColor: ((_D = (_C = (_B = (_A = brand == null ? void 0 : brand.style) == null ? void 0 : _A.button) == null ? void 0 : _B.background) == null ? void 0 : _C.color) == null ? void 0 : _D.hex) || ((_F = (_E = style == null ? void 0 : style.text) == null ? void 0 : _E.color) == null ? void 0 : _F.hex),
339
+ borderRadius: ((_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
340
+ color: ((_L = (_K = (_J = (_I = brand == null ? void 0 : brand.style) == null ? void 0 : _I.button) == null ? void 0 : _J.text) == null ? void 0 : _K.color) == null ? void 0 : _L.hex) || ((_N = (_M = style == null ? void 0 : style.background) == null ? void 0 : _M.color) == null ? void 0 : _N.hex)
268
341
  },
269
342
  type: "button"
270
343
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.36",
3
+ "version": "0.0.39",
4
4
  "exports": {
5
5
  "./card-advertisement": {
6
6
  "types": "./types/card-advertisement.d.ts",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@drawbridge/drawbridge-utils": ">=0.0.61",
26
- "@drawbridge/shopify": "0.0.8",
26
+ "@drawbridge/shopify": ">=0.0.8",
27
27
  "next": ">=14",
28
28
  "react": ">=18"
29
29
  },