@drawbridge/components 0.0.49 → 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 +12 -2
  5. package/dist/input-number.mjs +12 -2
  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
  }
@@ -219,7 +219,17 @@ var InputNumber = ({
219
219
  {
220
220
  ...{
221
221
  className: classes.join(" "),
222
- 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
+ }
223
233
  },
224
234
  children: [
225
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
  }
@@ -131,7 +131,17 @@ var InputNumber = ({
131
131
  {
132
132
  ...{
133
133
  className: classes.join(" "),
134
- 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
+ }
135
145
  },
136
146
  children: [
137
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.49",
3
+ "version": "0.0.50",
4
4
  "exports": {
5
5
  "./advertisement": {
6
6
  "types": "./types/advertisement.d.ts",