twico-ui 1.37.0 → 1.37.1

package/dist/index.d.cts

@@ -122,7 +122,9 @@ interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "al
   src?: string;
   /** Alternative text (required for accessibility; pass "" for decorative images). */
   alt: string;
-  /** object-fit value. */
+  /** object-fit value. When set, the image fills its container by default (`width`/`height: 100%`); pass an
+   *  explicit `width`/`height` (or size the container / `style`) to give it a fixed box that `fit` crops within
+   *  — an explicit `width`/`height` now wins over the fill (#378). */
   fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
   /** Border radius token (e.g. "md", "lg", "full"). */
   radius?: string;

package/dist/index.d.ts

@@ -122,7 +122,9 @@ interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "al
   src?: string;
   /** Alternative text (required for accessibility; pass "" for decorative images). */
   alt: string;
-  /** object-fit value. */
+  /** object-fit value. When set, the image fills its container by default (`width`/`height: 100%`); pass an
+   *  explicit `width`/`height` (or size the container / `style`) to give it a fixed box that `fit` crops within
+   *  — an explicit `width`/`height` now wins over the fill (#378). */
   fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
   /** Border radius token (e.g. "md", "lg", "full"). */
   radius?: string;

package/dist/index.mjs

@@ -304,6 +304,8 @@ var Image = React51__default.forwardRef(function Image2({
   className = "",
   style,
   onError,
+  width,
+  height,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
@@ -313,6 +315,14 @@ var Image = React51__default.forwardRef(function Image2({
     objectFit: fit,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     aspectRatio,
+    // #378: only when `fit` is set, also emit explicit width/height as inline style — that's the sole case
+    // where the `[data-fit] { width/height: 100% }` rule overrides the width/height ATTRIBUTES (a
+    // presentational attr loses to a real CSS rule), silently sizing `<Image width height fit>` to the
+    // container/intrinsic size. Inline style beats that rule so the props mean what they say (object-fit
+    // still crops within the box), placed before `...style` so a caller's own `style` still wins. Gated on
+    // `fit` so the no-fit path stays attribute-only — a consumer's own CSS/className can still override it.
+    ...fit && width != null ? { width } : null,
+    ...fit && height != null ? { height } : null,
     ...style
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -326,6 +336,8 @@ var Image = React51__default.forwardRef(function Image2({
         loading,
         className: `twc-image ${className}`.trim(),
         "data-fit": fit || void 0,
+        width,
+        height,
         style: s,
         onError: (e) => {
           onError?.(e);