@drawbridge/components 0.0.43 → 0.0.45

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 (8) hide show
  1. package/dist/advertisement.js +28 -13
  2. package/dist/advertisement.mjs +2 -2
  3. package/dist/{chunk-BHQBSNGK.mjs → chunk-EKWIDBFA.mjs} +27 -12
  4. package/dist/input-phone.js +0 -1
  5. package/dist/input-phone.mjs +0 -1
  6. package/dist/product.js +27 -12
  7. package/dist/product.mjs +1 -1
  8. package/package.json +1 -1
package/dist/advertisement.js CHANGED
@@ -943,14 +943,25 @@ var Product = ({
943
943
  style = {},
944
944
  variant
945
945
  }) => {
946
- var _a, _b, _c, _d, _e, _f, _g;
946
+ var _a, _b, _c, _d, _e;
947
+ const resolved = {
948
+ ...style,
949
+ background: {
950
+ ...style == null ? void 0 : style.background,
951
+ color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
952
+ },
953
+ text: {
954
+ ...style == null ? void 0 : style.text,
955
+ color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
956
+ }
957
+ };
947
958
  const available = (0, import_react5.useMemo)(
948
959
  () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
949
960
  [product]
950
961
  );
951
962
  const [activeImage, setActiveImage] = (0, import_react5.useState)(0);
952
963
  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
953
- const selectedVariant = available.find((v) => v.id === variant) || null;
964
+ const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
954
965
  const images = (0, import_react5.useMemo)(
955
966
  () => {
956
967
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
@@ -1005,7 +1016,11 @@ var Product = ({
1005
1016
  "div",
1006
1017
  {
1007
1018
  ...{
1008
- className: "space-y-6 pb-12"
1019
+ className: "space-y-6 pb-12",
1020
+ style: {
1021
+ backgroundColor: resolved.background.color.rgb,
1022
+ color: resolved.text.color.rgb
1023
+ }
1009
1024
  },
1010
1025
  children: [
1011
1026
  header,
@@ -1021,7 +1036,7 @@ var Product = ({
1021
1036
  {
1022
1037
  ...{
1023
1038
  classNameScroll: "flex flex-col w-12 h-48 space-y-3",
1024
- color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
1039
+ color: resolved.background.color.rgb
1025
1040
  },
1026
1041
  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1027
1042
  "button",
@@ -1034,7 +1049,7 @@ var Product = ({
1034
1049
  },
1035
1050
  type: "button",
1036
1051
  ...activeImage === key && {
1037
- style: inputStyle(style)
1052
+ style: inputStyle(resolved)
1038
1053
  }
1039
1054
  },
1040
1055
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1059,7 +1074,7 @@ var Product = ({
1059
1074
  "div",
1060
1075
  {
1061
1076
  ...{
1062
- className: "aspect-square w-48 overflow-hidden rounded-3xl m-auto",
1077
+ className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
1063
1078
  ref: emblaRef
1064
1079
  },
1065
1080
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1128,7 +1143,7 @@ var Product = ({
1128
1143
  {
1129
1144
  ...{
1130
1145
  classNameScroll: "max-h-[4.5em]",
1131
- color: (_g = (_f = style == null ? void 0 : style.background) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
1146
+ color: resolved.background.color.rgb
1132
1147
  },
1133
1148
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: product.description })
1134
1149
  }
@@ -1151,12 +1166,12 @@ var Product = ({
1151
1166
  label: v.title,
1152
1167
  value: v.id
1153
1168
  })),
1154
- style,
1169
+ style: resolved,
1155
1170
  value: variant || ""
1156
1171
  }
1157
1172
  }
1158
1173
  ),
1159
- style
1174
+ style: resolved
1160
1175
  }
1161
1176
  }
1162
1177
  ),
@@ -1179,7 +1194,7 @@ var Product = ({
1179
1194
  className: "button justify-center border",
1180
1195
  disabled: disabled || Boolean(action),
1181
1196
  onClick: onAdd,
1182
- style: inputStyle(style),
1197
+ style: inputStyle(resolved),
1183
1198
  type: "button"
1184
1199
  },
1185
1200
  children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1199,7 +1214,7 @@ var Product = ({
1199
1214
  className: "button justify-center" + (addToCart ? "" : " w-full"),
1200
1215
  disabled: disabled || Boolean(action),
1201
1216
  onClick: onBuy,
1202
- style: buttonStyle(style),
1217
+ style: buttonStyle(resolved),
1203
1218
  type: "button"
1204
1219
  },
1205
1220
  children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1215,7 +1230,7 @@ var Product = ({
1215
1230
  ]
1216
1231
  }
1217
1232
  ),
1218
- style
1233
+ style: resolved
1219
1234
  }
1220
1235
  }
1221
1236
  )
@@ -1273,7 +1288,7 @@ var Advertisement = ({
1273
1288
  onBuy,
1274
1289
  onVariantChange,
1275
1290
  product,
1276
- style,
1291
+ style: (brand == null ? void 0 : brand.style) || style,
1277
1292
  variant
1278
1293
  }
1279
1294
  }
package/dist/advertisement.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  product_default
4
- } from "./chunk-BHQBSNGK.mjs";
4
+ } from "./chunk-EKWIDBFA.mjs";
5
5
  import "./chunk-BD3TDNJE.mjs";
6
6
  import "./chunk-FYA7EAMR.mjs";
7
7
  import "./chunk-2ZYGRSSA.mjs";
@@ -61,7 +61,7 @@ var Advertisement = ({
61
61
  onBuy,
62
62
  onVariantChange,
63
63
  product,
64
- style,
64
+ style: (brand == null ? void 0 : brand.style) || style,
65
65
  variant
66
66
  }
67
67
  }
package/dist/{chunk-BHQBSNGK.mjs → chunk-EKWIDBFA.mjs} RENAMED
@@ -48,14 +48,25 @@ var Product = ({
48
48
  style = {},
49
49
  variant
50
50
  }) => {
51
- var _a, _b, _c, _d, _e, _f, _g;
51
+ var _a, _b, _c, _d, _e;
52
+ const resolved = {
53
+ ...style,
54
+ background: {
55
+ ...style == null ? void 0 : style.background,
56
+ color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
57
+ },
58
+ text: {
59
+ ...style == null ? void 0 : style.text,
60
+ color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
61
+ }
62
+ };
52
63
  const available = useMemo(
53
64
  () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
54
65
  [product]
55
66
  );
56
67
  const [activeImage, setActiveImage] = useState(0);
57
68
  const [emblaRef, emblaApi] = useEmblaCarousel();
58
- const selectedVariant = available.find((v) => v.id === variant) || null;
69
+ const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
59
70
  const images = useMemo(
60
71
  () => {
61
72
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
@@ -110,7 +121,11 @@ var Product = ({
110
121
  "div",
111
122
  {
112
123
  ...{
113
- className: "space-y-6 pb-12"
124
+ className: "space-y-6 pb-12",
125
+ style: {
126
+ backgroundColor: resolved.background.color.rgb,
127
+ color: resolved.text.color.rgb
128
+ }
114
129
  },
115
130
  children: [
116
131
  header,
@@ -126,7 +141,7 @@ var Product = ({
126
141
  {
127
142
  ...{
128
143
  classNameScroll: "flex flex-col w-12 h-48 space-y-3",
129
- color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
144
+ color: resolved.background.color.rgb
130
145
  },
131
146
  children: images.map(({ src }, key) => /* @__PURE__ */ jsx(
132
147
  "button",
@@ -139,7 +154,7 @@ var Product = ({
139
154
  },
140
155
  type: "button",
141
156
  ...activeImage === key && {
142
- style: inputStyle(style)
157
+ style: inputStyle(resolved)
143
158
  }
144
159
  },
145
160
  children: /* @__PURE__ */ jsx(
@@ -164,7 +179,7 @@ var Product = ({
164
179
  "div",
165
180
  {
166
181
  ...{
167
- className: "aspect-square w-48 overflow-hidden rounded-3xl m-auto",
182
+ className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
168
183
  ref: emblaRef
169
184
  },
170
185
  children: /* @__PURE__ */ jsx(
@@ -233,7 +248,7 @@ var Product = ({
233
248
  {
234
249
  ...{
235
250
  classNameScroll: "max-h-[4.5em]",
236
- color: (_g = (_f = style == null ? void 0 : style.background) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
251
+ color: resolved.background.color.rgb
237
252
  },
238
253
  children: /* @__PURE__ */ jsx("p", { children: product.description })
239
254
  }
@@ -256,12 +271,12 @@ var Product = ({
256
271
  label: v.title,
257
272
  value: v.id
258
273
  })),
259
- style,
274
+ style: resolved,
260
275
  value: variant || ""
261
276
  }
262
277
  }
263
278
  ),
264
- style
279
+ style: resolved
265
280
  }
266
281
  }
267
282
  ),
@@ -284,7 +299,7 @@ var Product = ({
284
299
  className: "button justify-center border",
285
300
  disabled: disabled || Boolean(action),
286
301
  onClick: onAdd,
287
- style: inputStyle(style),
302
+ style: inputStyle(resolved),
288
303
  type: "button"
289
304
  },
290
305
  children: action === "add" ? /* @__PURE__ */ jsx(
@@ -304,7 +319,7 @@ var Product = ({
304
319
  className: "button justify-center" + (addToCart ? "" : " w-full"),
305
320
  disabled: disabled || Boolean(action),
306
321
  onClick: onBuy,
307
- style: buttonStyle(style),
322
+ style: buttonStyle(resolved),
308
323
  type: "button"
309
324
  },
310
325
  children: action === "buy" ? /* @__PURE__ */ jsx(
@@ -320,7 +335,7 @@ var Product = ({
320
335
  ]
321
336
  }
322
337
  ),
323
- style
338
+ style: resolved
324
339
  }
325
340
  }
326
341
  )
package/dist/input-phone.js CHANGED
@@ -34,7 +34,6 @@ __export(input_phone_exports, {
34
34
  isValidPhone: () => isValidPhone
35
35
  });
36
36
  module.exports = __toCommonJS(input_phone_exports);
37
- var import_style = require("react-phone-number-input/style.css");
38
37
  var import_react = require("react");
39
38
  var import_input = __toESM(require("react-phone-number-input/input"));
40
39
  var import_phone = require("@drawbridge/drawbridge-utils/phone");
package/dist/input-phone.mjs CHANGED
@@ -4,7 +4,6 @@ import {
4
4
  } from "./chunk-FJXG3REN.mjs";
5
5
 
6
6
  // components/input-phone.js
7
- import "react-phone-number-input/style.css";
8
7
  import { useEffect, useState } from "react";
9
8
  import Input from "react-phone-number-input/input";
10
9
  import { isValid } from "@drawbridge/drawbridge-utils/phone";
package/dist/product.js CHANGED
@@ -586,14 +586,25 @@ var Product = ({
586
586
  style = {},
587
587
  variant
588
588
  }) => {
589
- var _a, _b, _c, _d, _e, _f, _g;
589
+ var _a, _b, _c, _d, _e;
590
+ const resolved = {
591
+ ...style,
592
+ background: {
593
+ ...style == null ? void 0 : style.background,
594
+ color: ((_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) || { hex: "#FFFFFF", rgb: "rgb( 255, 255, 255 )" }
595
+ },
596
+ text: {
597
+ ...style == null ? void 0 : style.text,
598
+ color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
599
+ }
600
+ };
590
601
  const available = (0, import_react4.useMemo)(
591
602
  () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
592
603
  [product]
593
604
  );
594
605
  const [activeImage, setActiveImage] = (0, import_react4.useState)(0);
595
606
  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)();
596
- const selectedVariant = available.find((v) => v.id === variant) || null;
607
+ const selectedVariant = available.find((v) => v.id === variant) || available[0] || null;
597
608
  const images = (0, import_react4.useMemo)(
598
609
  () => {
599
610
  const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
@@ -648,7 +659,11 @@ var Product = ({
648
659
  "div",
649
660
  {
650
661
  ...{
651
- className: "space-y-6 pb-12"
662
+ className: "space-y-6 pb-12",
663
+ style: {
664
+ backgroundColor: resolved.background.color.rgb,
665
+ color: resolved.text.color.rgb
666
+ }
652
667
  },
653
668
  children: [
654
669
  header,
@@ -664,7 +679,7 @@ var Product = ({
664
679
  {
665
680
  ...{
666
681
  classNameScroll: "flex flex-col w-12 h-48 space-y-3",
667
- color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
682
+ color: resolved.background.color.rgb
668
683
  },
669
684
  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
670
685
  "button",
@@ -677,7 +692,7 @@ var Product = ({
677
692
  },
678
693
  type: "button",
679
694
  ...activeImage === key && {
680
- style: inputStyle(style)
695
+ style: inputStyle(resolved)
681
696
  }
682
697
  },
683
698
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -702,7 +717,7 @@ var Product = ({
702
717
  "div",
703
718
  {
704
719
  ...{
705
- className: "aspect-square w-48 overflow-hidden rounded-3xl m-auto",
720
+ className: "w-48 h-48 overflow-hidden rounded-3xl m-auto",
706
721
  ref: emblaRef
707
722
  },
708
723
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -771,7 +786,7 @@ var Product = ({
771
786
  {
772
787
  ...{
773
788
  classNameScroll: "max-h-[4.5em]",
774
- color: (_g = (_f = style == null ? void 0 : style.background) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
789
+ color: resolved.background.color.rgb
775
790
  },
776
791
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: product.description })
777
792
  }
@@ -794,12 +809,12 @@ var Product = ({
794
809
  label: v.title,
795
810
  value: v.id
796
811
  })),
797
- style,
812
+ style: resolved,
798
813
  value: variant || ""
799
814
  }
800
815
  }
801
816
  ),
802
- style
817
+ style: resolved
803
818
  }
804
819
  }
805
820
  ),
@@ -822,7 +837,7 @@ var Product = ({
822
837
  className: "button justify-center border",
823
838
  disabled: disabled || Boolean(action),
824
839
  onClick: onAdd,
825
- style: inputStyle(style),
840
+ style: inputStyle(resolved),
826
841
  type: "button"
827
842
  },
828
843
  children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -842,7 +857,7 @@ var Product = ({
842
857
  className: "button justify-center" + (addToCart ? "" : " w-full"),
843
858
  disabled: disabled || Boolean(action),
844
859
  onClick: onBuy,
845
- style: buttonStyle(style),
860
+ style: buttonStyle(resolved),
846
861
  type: "button"
847
862
  },
848
863
  children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -858,7 +873,7 @@ var Product = ({
858
873
  ]
859
874
  }
860
875
  ),
861
- style
876
+ style: resolved
862
877
  }
863
878
  }
864
879
  )
package/dist/product.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  product_default
4
- } from "./chunk-BHQBSNGK.mjs";
4
+ } from "./chunk-EKWIDBFA.mjs";
5
5
  import "./chunk-BD3TDNJE.mjs";
6
6
  import "./chunk-FYA7EAMR.mjs";
7
7
  import "./chunk-2ZYGRSSA.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.43",
3
+ "version": "0.0.45",
4
4
  "exports": {
5
5
  "./advertisement": {
6
6
  "types": "./types/advertisement.d.ts",