@drawbridge/components 0.0.48 → 0.0.50

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 +17 -17
  2. package/dist/advertisement.mjs +1 -1
  3. package/dist/{chunk-FFZY3FQL.mjs → chunk-5W23JUIM.mjs} +17 -17
  4. package/dist/input-number.js +20 -5
  5. package/dist/input-number.mjs +20 -5
  6. package/dist/product.js +17 -17
  7. package/dist/product.mjs +1 -1
  8. 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: a 2px border in the button (accent) color so
706
- // the selected thumbnail reads as uniquely selected. Only the
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
- ...activeImage === key && {
732
- style: {
733
- opacity: 0.6
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)("p", { children: product.description })
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
  ]
package/dist/advertisement.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  product_default
4
- } from "./chunk-FFZY3FQL.mjs";
4
+ } from "./chunk-5W23JUIM.mjs";
5
5
  import "./chunk-2ZYGRSSA.mjs";
6
6
  import "./chunk-XWELEL6Z.mjs";
7
7
  import "./chunk-3SAKIKZP.mjs";
package/dist/{chunk-FFZY3FQL.mjs → chunk-5W23JUIM.mjs} RENAMED
@@ -151,22 +151,13 @@ var Product = ({
151
151
  "button",
152
152
  {
153
153
  ...{
154
- // Active state: a 2px border in the button (accent) color so
155
- // the selected thumbnail reads as uniquely selected. Only the
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
- ...activeImage === key && {
181
- style: {
182
- opacity: 0.6
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("p", { children: product.description })
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
  ]
package/dist/input-number.js CHANGED
@@ -111,7 +111,7 @@ var InputNumber = ({
111
111
  value,
112
112
  ...rest
113
113
  }) => {
114
- const classes = [(inline ? "inline-flex items-center border border-inherit rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
114
+ const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
115
115
  if (className) {
116
116
  classes.push(className);
117
117
  }
@@ -200,9 +200,14 @@ var InputNumber = ({
200
200
  inputMode: "numeric",
201
201
  onChange: ({ target }) => onChange(Number(target.value)),
202
202
  step: 1,
203
- style: inline ? void 0 : {
204
- flex: "1 1 0%",
205
- minWidth: 0
203
+ // The bordered container is the single visible border; strip the
204
+ // native number-input border so it doesn't double up.
205
+ style: {
206
+ border: 0,
207
+ ...inline ? {} : {
208
+ flex: "1 1 0%",
209
+ minWidth: 0
210
+ }
206
211
  },
207
212
  type: "number",
208
213
  value
@@ -214,7 +219,17 @@ var InputNumber = ({
214
219
  {
215
220
  ...{
216
221
  className: classes.join(" "),
217
- style: inputStyle(style)
222
+ // Inline gets its border explicitly (width + style) rather than via
223
+ // the `border` utility: v4 gates border-style behind a --tw-border-style
224
+ // var that isn't reliably set for a class used only in this dist, so
225
+ // the utility could render zero-width. inputStyle supplies the color.
226
+ style: {
227
+ ...inputStyle(style),
228
+ ...inline && {
229
+ borderStyle: "solid",
230
+ borderWidth: 1
231
+ }
232
+ }
218
233
  },
219
234
  children: [
220
235
  layout === "split" && decrementButton,
package/dist/input-number.mjs CHANGED
@@ -23,7 +23,7 @@ var InputNumber = ({
23
23
  value,
24
24
  ...rest
25
25
  }) => {
26
- const classes = [(inline ? "inline-flex items-center border border-inherit rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
26
+ const classes = [(inline ? "inline-flex items-center rounded-sm" : "input p-0 flex items-center") + " divide-x divide-inherit overflow-hidden"];
27
27
  if (className) {
28
28
  classes.push(className);
29
29
  }
@@ -112,9 +112,14 @@ var InputNumber = ({
112
112
  inputMode: "numeric",
113
113
  onChange: ({ target }) => onChange(Number(target.value)),
114
114
  step: 1,
115
- style: inline ? void 0 : {
116
- flex: "1 1 0%",
117
- minWidth: 0
115
+ // The bordered container is the single visible border; strip the
116
+ // native number-input border so it doesn't double up.
117
+ style: {
118
+ border: 0,
119
+ ...inline ? {} : {
120
+ flex: "1 1 0%",
121
+ minWidth: 0
122
+ }
118
123
  },
119
124
  type: "number",
120
125
  value
@@ -126,7 +131,17 @@ var InputNumber = ({
126
131
  {
127
132
  ...{
128
133
  className: classes.join(" "),
129
- style: inputStyle(style)
134
+ // Inline gets its border explicitly (width + style) rather than via
135
+ // the `border` utility: v4 gates border-style behind a --tw-border-style
136
+ // var that isn't reliably set for a class used only in this dist, so
137
+ // the utility could render zero-width. inputStyle supplies the color.
138
+ style: {
139
+ ...inputStyle(style),
140
+ ...inline && {
141
+ borderStyle: "solid",
142
+ borderWidth: 1
143
+ }
144
+ }
130
145
  },
131
146
  children: [
132
147
  layout === "split" && decrementButton,
package/dist/product.js CHANGED
@@ -699,22 +699,13 @@ var Product = ({
699
699
  "button",
700
700
  {
701
701
  ...{
702
- // Active state: a 2px border in the button (accent) color so
703
- // the selected thumbnail reads as uniquely selected. Only the
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
- ...activeImage === key && {
729
- style: {
730
- opacity: 0.6
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)("p", { children: product.description })
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
  ]
package/dist/product.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  product_default
4
- } from "./chunk-FFZY3FQL.mjs";
4
+ } from "./chunk-5W23JUIM.mjs";
5
5
  import "./chunk-2ZYGRSSA.mjs";
6
6
  import "./chunk-XWELEL6Z.mjs";
7
7
  import "./chunk-3SAKIKZP.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.48",
3
+ "version": "0.0.50",
4
4
  "exports": {
5
5
  "./advertisement": {
6
6
  "types": "./types/advertisement.d.ts",