@drawbridge/components 0.0.49 → 0.0.51
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.
- package/dist/advertisement.js +18 -18
- package/dist/advertisement.mjs +1 -1
- package/dist/{chunk-FFZY3FQL.mjs → chunk-NFF5ANXM.mjs} +18 -18
- package/dist/input-number.js +20 -4
- package/dist/input-number.mjs +20 -4
- package/dist/product.js +18 -18
- package/dist/product.mjs +1 -1
- package/package.json +1 -1
package/dist/advertisement.js
CHANGED
|
@@ -702,22 +702,13 @@ var Product = ({
|
|
|
702
702
|
"button",
|
|
703
703
|
{
|
|
704
704
|
...{
|
|
705
|
-
// Active state
|
|
706
|
-
|
|
707
|
-
// border color is set inline — never a full inputStyle, whose
|
|
708
|
-
// borderRadius would override the `rounded` class and square
|
|
709
|
-
// off the active thumb.
|
|
710
|
-
className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
|
|
705
|
+
// Active state is conveyed purely by a dimmed image (no border).
|
|
706
|
+
className: "relative w-12 h-12 overflow-hidden rounded-xl shrink-0",
|
|
711
707
|
onClick: () => {
|
|
712
708
|
setActiveImage(key);
|
|
713
709
|
emblaApi == null ? void 0 : emblaApi.scrollTo(key);
|
|
714
710
|
},
|
|
715
|
-
type: "button"
|
|
716
|
-
...activeImage === key && {
|
|
717
|
-
style: {
|
|
718
|
-
borderColor: buttonStyle(resolved).backgroundColor
|
|
719
|
-
}
|
|
720
|
-
}
|
|
711
|
+
type: "button"
|
|
721
712
|
},
|
|
722
713
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
723
714
|
ImageComponent,
|
|
@@ -728,10 +719,11 @@ var Product = ({
|
|
|
728
719
|
fill: true,
|
|
729
720
|
sizes: "48px",
|
|
730
721
|
src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
722
|
+
// Always set opacity + transition so switching the active
|
|
723
|
+
// thumbnail animates the fade in both directions.
|
|
724
|
+
style: {
|
|
725
|
+
opacity: activeImage === key ? 0.6 : 1,
|
|
726
|
+
transition: "opacity 300ms ease"
|
|
735
727
|
},
|
|
736
728
|
unoptimized: true
|
|
737
729
|
}
|
|
@@ -832,7 +824,15 @@ var Product = ({
|
|
|
832
824
|
classNameScroll: "max-h-[4.5em]",
|
|
833
825
|
color: resolved.background.color.rgb
|
|
834
826
|
},
|
|
835
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
827
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
828
|
+
"p",
|
|
829
|
+
{
|
|
830
|
+
...{
|
|
831
|
+
className: "text-sm"
|
|
832
|
+
},
|
|
833
|
+
children: product.description
|
|
834
|
+
}
|
|
835
|
+
)
|
|
836
836
|
}
|
|
837
837
|
)
|
|
838
838
|
]
|
|
@@ -871,7 +871,7 @@ var Product = ({
|
|
|
871
871
|
"div",
|
|
872
872
|
{
|
|
873
873
|
...{
|
|
874
|
-
className: addToCart ? "grid grid-cols-2 gap-
|
|
874
|
+
className: addToCart ? "grid grid-cols-2 gap-4" : ""
|
|
875
875
|
},
|
|
876
876
|
children: [
|
|
877
877
|
addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
package/dist/advertisement.mjs
CHANGED
|
@@ -151,22 +151,13 @@ var Product = ({
|
|
|
151
151
|
"button",
|
|
152
152
|
{
|
|
153
153
|
...{
|
|
154
|
-
// Active state
|
|
155
|
-
|
|
156
|
-
// border color is set inline — never a full inputStyle, whose
|
|
157
|
-
// borderRadius would override the `rounded` class and square
|
|
158
|
-
// off the active thumb.
|
|
159
|
-
className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
|
|
154
|
+
// Active state is conveyed purely by a dimmed image (no border).
|
|
155
|
+
className: "relative w-12 h-12 overflow-hidden rounded-xl shrink-0",
|
|
160
156
|
onClick: () => {
|
|
161
157
|
setActiveImage(key);
|
|
162
158
|
emblaApi == null ? void 0 : emblaApi.scrollTo(key);
|
|
163
159
|
},
|
|
164
|
-
type: "button"
|
|
165
|
-
...activeImage === key && {
|
|
166
|
-
style: {
|
|
167
|
-
borderColor: buttonStyle(resolved).backgroundColor
|
|
168
|
-
}
|
|
169
|
-
}
|
|
160
|
+
type: "button"
|
|
170
161
|
},
|
|
171
162
|
children: /* @__PURE__ */ jsx(
|
|
172
163
|
ImageComponent,
|
|
@@ -177,10 +168,11 @@ var Product = ({
|
|
|
177
168
|
fill: true,
|
|
178
169
|
sizes: "48px",
|
|
179
170
|
src: cdnShopify(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
171
|
+
// Always set opacity + transition so switching the active
|
|
172
|
+
// thumbnail animates the fade in both directions.
|
|
173
|
+
style: {
|
|
174
|
+
opacity: activeImage === key ? 0.6 : 1,
|
|
175
|
+
transition: "opacity 300ms ease"
|
|
184
176
|
},
|
|
185
177
|
unoptimized: true
|
|
186
178
|
}
|
|
@@ -281,7 +273,15 @@ var Product = ({
|
|
|
281
273
|
classNameScroll: "max-h-[4.5em]",
|
|
282
274
|
color: resolved.background.color.rgb
|
|
283
275
|
},
|
|
284
|
-
children: /* @__PURE__ */ jsx(
|
|
276
|
+
children: /* @__PURE__ */ jsx(
|
|
277
|
+
"p",
|
|
278
|
+
{
|
|
279
|
+
...{
|
|
280
|
+
className: "text-sm"
|
|
281
|
+
},
|
|
282
|
+
children: product.description
|
|
283
|
+
}
|
|
284
|
+
)
|
|
285
285
|
}
|
|
286
286
|
)
|
|
287
287
|
]
|
|
@@ -320,7 +320,7 @@ var Product = ({
|
|
|
320
320
|
"div",
|
|
321
321
|
{
|
|
322
322
|
...{
|
|
323
|
-
className: addToCart ? "grid grid-cols-2 gap-
|
|
323
|
+
className: addToCart ? "grid grid-cols-2 gap-4" : ""
|
|
324
324
|
},
|
|
325
325
|
children: [
|
|
326
326
|
addToCart && /* @__PURE__ */ jsx(
|
package/dist/input-number.js
CHANGED
|
@@ -111,11 +111,12 @@ var InputNumber = ({
|
|
|
111
111
|
value,
|
|
112
112
|
...rest
|
|
113
113
|
}) => {
|
|
114
|
-
const classes = [(inline ? "inline-flex items-center
|
|
114
|
+
const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " overflow-hidden"];
|
|
115
115
|
if (className) {
|
|
116
116
|
classes.push(className);
|
|
117
117
|
}
|
|
118
118
|
;
|
|
119
|
+
const dividerBorder = "1px solid " + inputStyle(style).borderColor;
|
|
119
120
|
const increment = (0, import_react.useCallback)(
|
|
120
121
|
() => {
|
|
121
122
|
const newValue = Number(value || 0) + 1;
|
|
@@ -139,7 +140,10 @@ var InputNumber = ({
|
|
|
139
140
|
"aria-label": "decrement",
|
|
140
141
|
type: "button",
|
|
141
142
|
onClick: decrement,
|
|
142
|
-
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
|
|
143
|
+
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
|
|
144
|
+
// split: decrement is leftmost, so its divider is on the right (before
|
|
145
|
+
// the input); after: it follows the input, so the divider is on its left.
|
|
146
|
+
style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
|
|
143
147
|
},
|
|
144
148
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
145
149
|
"span",
|
|
@@ -166,7 +170,9 @@ var InputNumber = ({
|
|
|
166
170
|
"aria-label": "increment",
|
|
167
171
|
type: "button",
|
|
168
172
|
onClick: increment,
|
|
169
|
-
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
|
|
173
|
+
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
|
|
174
|
+
// increment is always rightmost, so its divider is always on its left.
|
|
175
|
+
style: { borderLeft: dividerBorder }
|
|
170
176
|
},
|
|
171
177
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
172
178
|
"span",
|
|
@@ -219,7 +225,17 @@ var InputNumber = ({
|
|
|
219
225
|
{
|
|
220
226
|
...{
|
|
221
227
|
className: classes.join(" "),
|
|
222
|
-
|
|
228
|
+
// Inline gets its border explicitly (width + style) rather than via
|
|
229
|
+
// the `border` utility: v4 gates border-style behind a --tw-border-style
|
|
230
|
+
// var that isn't reliably set for a class used only in this dist, so
|
|
231
|
+
// the utility could render zero-width. inputStyle supplies the color.
|
|
232
|
+
style: {
|
|
233
|
+
...inputStyle(style),
|
|
234
|
+
...inline && {
|
|
235
|
+
borderStyle: "solid",
|
|
236
|
+
borderWidth: 1
|
|
237
|
+
}
|
|
238
|
+
}
|
|
223
239
|
},
|
|
224
240
|
children: [
|
|
225
241
|
layout === "split" && decrementButton,
|
package/dist/input-number.mjs
CHANGED
|
@@ -23,11 +23,12 @@ var InputNumber = ({
|
|
|
23
23
|
value,
|
|
24
24
|
...rest
|
|
25
25
|
}) => {
|
|
26
|
-
const classes = [(inline ? "inline-flex items-center
|
|
26
|
+
const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " overflow-hidden"];
|
|
27
27
|
if (className) {
|
|
28
28
|
classes.push(className);
|
|
29
29
|
}
|
|
30
30
|
;
|
|
31
|
+
const dividerBorder = "1px solid " + inputStyle(style).borderColor;
|
|
31
32
|
const increment = useCallback(
|
|
32
33
|
() => {
|
|
33
34
|
const newValue = Number(value || 0) + 1;
|
|
@@ -51,7 +52,10 @@ var InputNumber = ({
|
|
|
51
52
|
"aria-label": "decrement",
|
|
52
53
|
type: "button",
|
|
53
54
|
onClick: decrement,
|
|
54
|
-
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
|
|
55
|
+
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
|
|
56
|
+
// split: decrement is leftmost, so its divider is on the right (before
|
|
57
|
+
// the input); after: it follows the input, so the divider is on its left.
|
|
58
|
+
style: layout === "split" ? { borderRight: dividerBorder } : { borderLeft: dividerBorder }
|
|
55
59
|
},
|
|
56
60
|
children: /* @__PURE__ */ jsx(
|
|
57
61
|
"span",
|
|
@@ -78,7 +82,9 @@ var InputNumber = ({
|
|
|
78
82
|
"aria-label": "increment",
|
|
79
83
|
type: "button",
|
|
80
84
|
onClick: increment,
|
|
81
|
-
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
|
|
85
|
+
className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0",
|
|
86
|
+
// increment is always rightmost, so its divider is always on its left.
|
|
87
|
+
style: { borderLeft: dividerBorder }
|
|
82
88
|
},
|
|
83
89
|
children: /* @__PURE__ */ jsx(
|
|
84
90
|
"span",
|
|
@@ -131,7 +137,17 @@ var InputNumber = ({
|
|
|
131
137
|
{
|
|
132
138
|
...{
|
|
133
139
|
className: classes.join(" "),
|
|
134
|
-
|
|
140
|
+
// Inline gets its border explicitly (width + style) rather than via
|
|
141
|
+
// the `border` utility: v4 gates border-style behind a --tw-border-style
|
|
142
|
+
// var that isn't reliably set for a class used only in this dist, so
|
|
143
|
+
// the utility could render zero-width. inputStyle supplies the color.
|
|
144
|
+
style: {
|
|
145
|
+
...inputStyle(style),
|
|
146
|
+
...inline && {
|
|
147
|
+
borderStyle: "solid",
|
|
148
|
+
borderWidth: 1
|
|
149
|
+
}
|
|
150
|
+
}
|
|
135
151
|
},
|
|
136
152
|
children: [
|
|
137
153
|
layout === "split" && decrementButton,
|
package/dist/product.js
CHANGED
|
@@ -699,22 +699,13 @@ var Product = ({
|
|
|
699
699
|
"button",
|
|
700
700
|
{
|
|
701
701
|
...{
|
|
702
|
-
// Active state
|
|
703
|
-
|
|
704
|
-
// border color is set inline — never a full inputStyle, whose
|
|
705
|
-
// borderRadius would override the `rounded` class and square
|
|
706
|
-
// off the active thumb.
|
|
707
|
-
className: "relative w-12 h-12 overflow-hidden rounded shrink-0 border-2 border-transparent",
|
|
702
|
+
// Active state is conveyed purely by a dimmed image (no border).
|
|
703
|
+
className: "relative w-12 h-12 overflow-hidden rounded-xl shrink-0",
|
|
708
704
|
onClick: () => {
|
|
709
705
|
setActiveImage(key);
|
|
710
706
|
emblaApi == null ? void 0 : emblaApi.scrollTo(key);
|
|
711
707
|
},
|
|
712
|
-
type: "button"
|
|
713
|
-
...activeImage === key && {
|
|
714
|
-
style: {
|
|
715
|
-
borderColor: buttonStyle(resolved).backgroundColor
|
|
716
|
-
}
|
|
717
|
-
}
|
|
708
|
+
type: "button"
|
|
718
709
|
},
|
|
719
710
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
720
711
|
ImageComponent,
|
|
@@ -725,10 +716,11 @@ var Product = ({
|
|
|
725
716
|
fill: true,
|
|
726
717
|
sizes: "48px",
|
|
727
718
|
src: (0, import_cdn.cdnShopify)(src, "100x100", product == null ? void 0 : product.updatedAt) || src,
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
719
|
+
// Always set opacity + transition so switching the active
|
|
720
|
+
// thumbnail animates the fade in both directions.
|
|
721
|
+
style: {
|
|
722
|
+
opacity: activeImage === key ? 0.6 : 1,
|
|
723
|
+
transition: "opacity 300ms ease"
|
|
732
724
|
},
|
|
733
725
|
unoptimized: true
|
|
734
726
|
}
|
|
@@ -829,7 +821,15 @@ var Product = ({
|
|
|
829
821
|
classNameScroll: "max-h-[4.5em]",
|
|
830
822
|
color: resolved.background.color.rgb
|
|
831
823
|
},
|
|
832
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
824
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
825
|
+
"p",
|
|
826
|
+
{
|
|
827
|
+
...{
|
|
828
|
+
className: "text-sm"
|
|
829
|
+
},
|
|
830
|
+
children: product.description
|
|
831
|
+
}
|
|
832
|
+
)
|
|
833
833
|
}
|
|
834
834
|
)
|
|
835
835
|
]
|
|
@@ -868,7 +868,7 @@ var Product = ({
|
|
|
868
868
|
"div",
|
|
869
869
|
{
|
|
870
870
|
...{
|
|
871
|
-
className: addToCart ? "grid grid-cols-2 gap-
|
|
871
|
+
className: addToCart ? "grid grid-cols-2 gap-4" : ""
|
|
872
872
|
},
|
|
873
873
|
children: [
|
|
874
874
|
addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
package/dist/product.mjs
CHANGED