@kushagradhawan/kookie-ui 0.1.8 → 0.1.10

package/components.css

@@ -2337,8 +2337,8 @@
     letter-spacing: var(--letter-spacing-1);
 }
 .rt-Button:where(.rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
 }
 .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -2356,8 +2356,8 @@
     letter-spacing: var(--letter-spacing-2);
 }
 .rt-Button:where(.rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
 }
 .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-3);
@@ -2375,8 +2375,8 @@
     letter-spacing: var(--letter-spacing-3);
 }
 .rt-Button:where(.rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
 }
 .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-4);
@@ -2394,8 +2394,8 @@
     letter-spacing: var(--letter-spacing-4);
 }
 .rt-Button:where(.rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
 }
 .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-5);
@@ -2414,8 +2414,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2433,8 +2433,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2452,8 +2452,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2471,8 +2471,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2492,8 +2492,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2511,8 +2511,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2530,8 +2530,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2549,8 +2549,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2570,8 +2570,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2589,8 +2589,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2608,8 +2608,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2627,8 +2627,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2648,8 +2648,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2667,8 +2667,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2686,8 +2686,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2705,8 +2705,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -2726,8 +2726,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2745,8 +2745,8 @@
         letter-spacing: var(--letter-spacing-2);
     }
     .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -2764,8 +2764,8 @@
         letter-spacing: var(--letter-spacing-3);
     }
     .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -2783,8 +2783,8 @@
         letter-spacing: var(--letter-spacing-4);
     }
     .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-5);
@@ -5794,20 +5794,20 @@
     width: var(--base-button-height);
 }
 .rt-IconButton:where(.rt-r-size-1) :where(svg) {
-    width: 13px;
-    height: 13px;
+    width: 16px;
+    height: 16px;
 }
 .rt-IconButton:where(.rt-r-size-2) :where(svg) {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
 }
 .rt-IconButton:where(.rt-r-size-3) :where(svg) {
-    width: 17px;
-    height: 17px;
+    width: 20px;
+    height: 20px;
 }
 .rt-IconButton:where(.rt-r-size-4) :where(svg) {
-    width: 19px;
-    height: 19px;
+    width: 22px;
+    height: 22px;
 }
 .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
     --icon-button-ghost-padding: var(--space-1);
@@ -5823,20 +5823,20 @@
 }
 @media (min-width: 520px) {
     .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5853,20 +5853,20 @@
 }
 @media (min-width: 768px) {
     .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5883,20 +5883,20 @@
 }
 @media (min-width: 1024px) {
     .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5913,20 +5913,20 @@
 }
 @media (min-width: 1280px) {
     .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5943,20 +5943,20 @@
 }
 @media (min-width: 1640px) {
     .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
     }
     .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
     }
     .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
         --icon-button-ghost-padding: var(--space-1);
@@ -5975,7 +5975,66 @@
     display: block;
     object-fit: var(--object-fit);
     box-shadow: var(--box-shadow);
-    border-radius: max(var(--radius-3), var(--radius-full));
+    border-radius: max(var(--radius-4), var(--radius-full));
+    transition: var(--transition-button);
+}
+.rt-Image:where(:any-link, button, label) {
+    cursor: pointer;
+}
+@media (hover: hover) {
+    .rt-Image:where(:any-link, button, label):where(:hover) {
+        transform: scale(1.02);
+        box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
+    }
+}
+.rt-Image:where(:any-link, button, label):where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.rt-Image:where(:any-link, button, label):where(:active) {
+    transform: scale(0.98);
+}
+.rt-variant-blur {
+    position: relative;
+    display: inline-block;
+    --blur-filter: blur(16px) saturate(1.5);
+    --blur-opacity: 0.5;
+    --blur-offset-y: 8px;
+    --blur-offset-x: 0;
+}
+.rt-variant-blur:where(:any-link, button, label) {
+    cursor: pointer;
+    transition: var(--transition-button);
+}
+@media (hover: hover) {
+    .rt-variant-blur:where(:any-link, button, label):where(:hover) {
+        transform: scale(1.02);
+    }
+}
+.rt-variant-blur:where(:any-link, button, label):where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.rt-variant-blur:where(:any-link, button, label):where(:active) {
+    transform: scale(0.98);
+}
+.rt-variant-blur:where(:any-link, button, label) .rt-Image {
+    cursor: inherit;
+    transform: none !important;
+    outline: none !important;
+    box-shadow: var(--box-shadow) !important;
+}
+.rt-Image--blur-bg {
+    position: absolute;
+    top: var(--blur-offset-y, 8px);
+    left: var(--blur-offset-x, 0);
+    filter: var(--blur-filter);
+    opacity: var(--blur-opacity);
+    z-index: -1;
+}
+.rt-Image--blur {
+    position: relative;
+    z-index: 1;
 }
 .rt-r-fit-cover {
     --object-fit: cover;

package/dist/cjs/components/image.d.ts

@@ -11,9 +11,9 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
 interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>, MarginProps, WidthProps, HeightProps, ImageOwnProps {
     /**
      * The alt attribute provides alternative information for an image if a user for some reason cannot view it.
-     * Required for accessibility.
+     * Required for accessibility when not using asChild.
      */
-    alt: string;
+    alt?: string;
 }
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export { Image };

package/dist/cjs/components/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFAqBT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,KAAK,qFAsJT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/cjs/components/image.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var D=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var x=(o,r)=>{for(var e in r)s(o,e,{get:r[e],enumerable:!0})},a=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of w(r))!R.call(o,p)&&p!==e&&s(o,p,{get:()=>r[p],enumerable:!(t=u(r,p))||t.enumerable});return o};var i=(o,r,e)=>(e=o!=null?D(j(o)):{},a(r||!o||!o.__esModule?s(e,"default",{value:o,enumerable:!0}):e,o)),N=o=>a(s({},"__esModule",{value:!0}),o);var W={};x(W,{Image:()=>m});module.exports=N(W);var g=i(require("react")),f=i(require("classnames")),n=require("./image.props.js"),P=require("../helpers/extract-props.js"),l=require("../props/margin.props.js"),d=require("../props/width.props.js"),h=require("../props/height.props.js");const m=g.forwardRef((o,r)=>{const{className:e,radius:t,style:p,loading:y="lazy",alt:c,...I}=(0,P.extractProps)(o,n.imagePropDefs,l.marginPropDefs,d.widthPropDefs,h.heightPropDefs);return g.createElement("img",{"data-radius":t,loading:y,style:p,className:(0,f.default)("rt-Image",e),alt:c,...I,ref:r})});m.displayName="Image";
+"use strict";"use client";var j=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var W=(e,r)=>{for(var t in r)c(e,t,{get:r[t],enumerable:!0})},I=(e,r,t,f)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of w(r))!C.call(e,s)&&s!==t&&c(e,s,{get:()=>r[s],enumerable:!(f=k(r,s))||f.enumerable});return e};var P=(e,r,t)=>(t=e!=null?j(z(e)):{},I(r||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),G=e=>I(c({},"__esModule",{value:!0}),e);var H={};W(H,{Image:()=>y});module.exports=G(H);var o=P(require("react")),a=P(require("classnames")),b=require("./image.props.js"),N=require("../helpers/extract-props.js"),v=require("../props/margin.props.js"),x=require("../props/width.props.js"),D=require("../props/height.props.js");const y=o.forwardRef((e,r)=>{const{variant:t="surface",fit:f="cover",children:s}=e,{asChild:E,className:p,radius:l,style:n,loading:m="lazy",alt:u,src:g,children:M,...d}=(0,N.extractProps)(e,b.imagePropDefs,v.marginPropDefs,x.widthPropDefs,D.heightPropDefs),h=o.createElement("img",{"data-radius":l,loading:m,style:n,className:(0,a.default)("rt-reset","rt-Image",t==="blur"&&"rt-Image--blur",p),alt:u,src:g,...d,ref:r});if(E&&s){const i=o.Children.only(s);return t==="blur"?o.cloneElement(i,{className:(0,a.default)(i.props?.className,"rt-variant-blur"),style:{position:"relative",display:"inline-block",textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...i.props?.style},children:o.createElement(o.Fragment,null,o.createElement("img",{"data-radius":l,loading:m,style:{...n,position:"absolute",top:"8px",left:"0"},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",p),alt:"",src:g,...d}),o.createElement("img",{"data-radius":l,loading:m,style:{...n,position:"relative",zIndex:1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",p),alt:u,src:g,...d,ref:r}))}):o.cloneElement(i,{className:(0,a.default)(i.props?.className,"rt-Image"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...i.props?.style},children:h})}return t==="blur"?o.createElement("div",{className:"rt-variant-blur",style:{position:"relative",display:"inline-block"}},o.createElement("img",{"data-radius":l,loading:m,style:{...n,position:"absolute",top:"8px",left:"0"},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",p),alt:"",src:g,...d}),o.createElement("img",{"data-radius":l,loading:m,style:{...n,position:"relative",zIndex:1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",p),alt:u,src:g,...d,ref:r})):h});y.displayName="Image";
 //# sourceMappingURL=image.js.map

package/dist/cjs/components/image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  loading?: 'eager' | 'lazy';\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    ImageOwnProps {\n  /**\n   * The alt attribute provides alternative information for an image if a user for some reason cannot view it.\n   * Required for accessibility.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const {\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    ...imgProps\n  } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);\n\n  return (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={style}\n      className={classNames('rt-Image', className)}\n      alt={alt}\n      {...imgProps}\n      ref={forwardedRef}\n    />\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA8B,4BAC9BC,EAA6B,uCAC7BC,EAA+B,oCAC/BC,EAA8B,mCAC9BC,EAA+B,oCA0B/B,MAAMR,EAAQE,EAAM,WAAqC,CAACO,EAAOC,IAAiB,CAChF,KAAM,CACJ,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EACA,GAAGC,CACL,KAAI,gBAAaP,EAAO,gBAAe,iBAAgB,gBAAe,gBAAc,EAEpF,OACEP,EAAA,cAAC,OACC,cAAaU,EACb,QAASE,EACT,MAAOD,EACP,aAAW,EAAAI,SAAW,WAAYN,CAAS,EAC3C,IAAKI,EACJ,GAAGC,EACJ,IAAKN,EACP,CAEJ,CAAC,EAEDV,EAAM,YAAc",
-  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "props", "forwardedRef", "className", "radius", "style", "loading", "alt", "imgProps", "classNames"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  loading?: 'eager' | 'lazy';\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    ImageOwnProps {\n  /**\n   * The alt attribute provides alternative information for an image if a user for some reason cannot view it.\n   * Required for accessibility when not using asChild.\n   */\n  alt?: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', fit = 'cover', children } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    children: _children, // Extract children to exclude from imgProps\n    ...imgProps\n  } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);\n\n  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={style}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        variant === 'blur' && 'rt-Image--blur',\n        className,\n      )}\n      alt={alt}\n      src={src}\n      {...imgProps}\n      ref={forwardedRef}\n    />\n  );\n\n  // Handle asChild - inject img into the child element\n  if (asChild && children) {\n    const child = React.Children.only(children) as React.ReactElement<any>;\n\n    if (variant === 'blur') {\n      // For blur variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-variant-blur'),\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'absolute',\n                top: '8px',\n                left: '0',\n              }}\n              className={classNames(\n                'rt-reset',\n                'rt-Image',\n                'rt-Image--blur',\n                'rt-Image--blur-bg',\n                className,\n              )}\n              alt=\"\"\n              src={src}\n              {...imgProps}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{ ...style, position: 'relative', zIndex: 1 }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              {...imgProps}\n              ref={forwardedRef}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-Image'),\n        style: {\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imgElement,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <div className=\"rt-variant-blur\" style={{ position: 'relative', display: 'inline-block' }}>\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'absolute',\n            top: '8px',\n            left: '0',\n          }}\n          className={classNames(\n            'rt-reset',\n            'rt-Image',\n            'rt-Image--blur',\n            'rt-Image--blur-bg',\n            className,\n          )}\n          alt=\"\"\n          src={src}\n          {...imgProps}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{ ...style, position: 'relative', zIndex: 1 }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          {...imgProps}\n          ref={forwardedRef}\n        />\n      </div>\n    );\n  }\n\n  return imgElement;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA8B,4BAC9BC,EAA6B,uCAC7BC,EAA+B,oCAC/BC,EAA8B,mCAC9BC,EAA+B,oCA0B/B,MAAMR,EAAQE,EAAM,WAAqC,CAACO,EAAOC,IAAiB,CAChF,KAAM,CAAE,QAAAC,EAAU,UAAW,IAAAC,EAAM,QAAS,SAAAC,CAAS,EAAIJ,EACnD,CACJ,QAAAK,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EACA,IAAAC,EACA,SAAUC,EACV,GAAGC,CACL,KAAI,gBAAab,EAAO,gBAAe,iBAAgB,gBAAe,gBAAc,EAG9Ec,EACJrB,EAAA,cAAC,OACC,cAAac,EACb,QAASE,EACT,MAAOD,EACP,aAAW,EAAAO,SACT,WACA,WACAb,IAAY,QAAU,iBACtBI,CACF,EACA,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,EAIF,GAAII,GAAWD,EAAU,CACvB,MAAMY,EAAQvB,EAAM,SAAS,KAAKW,CAAQ,EAE1C,OAAIF,IAAY,OAEPT,EAAM,aAAauB,EAAO,CAC/B,aAAW,EAAAD,SAAWC,EAAM,OAAO,UAAW,iBAAiB,EAC/D,MAAO,CACL,SAAU,WACV,QAAS,eACT,eAAgB,OAChB,MAAO,UACP,OAAQ,OACR,WAAY,OACZ,QAAS,EACT,KAAM,UACN,OAAQ,UACR,GAAGA,EAAM,OAAO,KAClB,EACA,SACEvB,EAAA,cAAAA,EAAA,cAEEA,EAAA,cAAC,OACC,cAAac,EACb,QAASE,EACT,MAAO,CACL,GAAGD,EACH,SAAU,WACV,IAAK,MACL,KAAM,GACR,EACA,aAAW,EAAAO,SACT,WACA,WACA,iBACA,oBACAT,CACF,EACA,IAAI,GACJ,IAAKK,EACJ,GAAGE,EACN,EAEApB,EAAA,cAAC,OACC,cAAac,EACb,QAASE,EACT,MAAO,CAAE,GAAGD,EAAO,SAAU,WAAY,OAAQ,CAAE,EACnD,aAAW,EAAAO,SAAW,WAAY,WAAY,iBAAkBT,CAAS,EACzE,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,CACF,CAEJ,CAAC,EAGMR,EAAM,aAAauB,EAAO,CAC/B,aAAW,EAAAD,SAAWC,EAAM,OAAO,UAAW,UAAU,EACxD,MAAO,CACL,eAAgB,OAChB,MAAO,UACP,OAAQ,OACR,WAAY,OACZ,QAAS,EACT,KAAM,UACN,OAAQ,UACR,GAAGA,EAAM,OAAO,KAClB,EACA,SAAUF,CACZ,CAAC,CAEL,CAGA,OAAIZ,IAAY,OAEZT,EAAA,cAAC,OAAI,UAAU,kBAAkB,MAAO,CAAE,SAAU,WAAY,QAAS,cAAe,GAEtFA,EAAA,cAAC,OACC,cAAac,EACb,QAASE,EACT,MAAO,CACL,GAAGD,EACH,SAAU,WACV,IAAK,MACL,KAAM,GACR,EACA,aAAW,EAAAO,SACT,WACA,WACA,iBACA,oBACAT,CACF,EACA,IAAI,GACJ,IAAKK,EACJ,GAAGE,EACN,EAEApB,EAAA,cAAC,OACC,cAAac,EACb,QAASE,EACT,MAAO,CAAE,GAAGD,EAAO,SAAU,WAAY,OAAQ,CAAE,EACnD,aAAW,EAAAO,SAAW,WAAY,WAAY,iBAAkBT,CAAS,EACzE,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,CACF,EAIGa,CACT,CAAC,EAEDvB,EAAM,YAAc",
+  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "props", "forwardedRef", "variant", "fit", "children", "asChild", "className", "radius", "style", "loading", "alt", "src", "_children", "imgProps", "imgElement", "classNames", "child"]
 }

package/dist/cjs/components/image.props.d.ts

@@ -28,6 +28,22 @@ declare const imagePropDefs: {
         default: "cover";
         responsive: true;
     };
+    /**
+     * Sets the visual variant of the image.
+     *
+     * @example
+     * variant="surface"
+     * variant="blur"
+     */
+    variant: {
+        type: "enum";
+        className: string;
+        values: readonly ["surface", "blur"];
+        default: "surface";
+    };
+    asChild: {
+        type: "boolean";
+    };
 };
 export { imagePropDefs };
 //# sourceMappingURL=image.props.d.ts.map

package/dist/cjs/components/image.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.props.d.ts","sourceRoot":"","sources":["../../../src/components/image.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,aAAa;;;;;;;;;;;;IACjB;;;;;;;;;;OAUG;;;;;;;;CAYJ,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"image.props.d.ts","sourceRoot":"","sources":["../../../src/components/image.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,aAAa;;;;;;;;;;;;IAEjB;;;;;;;;;;OAUG;;;;;;;;IAQH;;;;;;OAMG;;;;;;;;;;CAYJ,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/cjs/components/image.props.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},u=(o,e,t,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of c(e))!m.call(o,r)&&r!==t&&s(o,r,{get:()=>e[r],enumerable:!(p=n(e,r))||p.enumerable});return o};var d=o=>u(s({},"__esModule",{value:!0}),o);var P={};l(P,{imagePropDefs:()=>a});module.exports=d(P);var f=require("../props/radius.prop.js"),i=require("../props/shadow.props.js");const D=["cover","contain","fill","scale-down","none"],a={fit:{type:"enum",className:"rt-r-fit",values:D,default:"cover",responsive:!0},...f.radiusPropDef,...i.shadowPropDefs};
+"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var l=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},v=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!u.call(r,o)&&o!==t&&s(r,o,{get:()=>e[o],enumerable:!(a=c(e,o))||a.enumerable});return r};var d=r=>v(s({},"__esModule",{value:!0}),r);var b={};l(b,{imagePropDefs:()=>n});module.exports=d(b);var f=require("../props/as-child.prop.js"),i=require("../props/radius.prop.js"),p=require("../props/shadow.props.js");const D=["cover","contain","fill","scale-down","none"],P=["surface","blur"],n={...f.asChildPropDef,fit:{type:"enum",className:"rt-r-fit",values:D,default:"cover",responsive:!0},variant:{type:"enum",className:"rt-variant",values:P,default:"surface"},...i.radiusPropDef,...p.shadowPropDefs};
 //# sourceMappingURL=image.props.js.map

package/dist/cjs/components/image.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image.props.ts"],
-  "sourcesContent": ["import { radiusPropDef } from '../props/radius.prop.js';\nimport { shadowPropDefs } from '../props/shadow.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;\n\nconst imagePropDefs = {\n  /**\n   * Sets the CSS **object-fit** property.\n   * Controls how the image should be resized to fit its container.\n   *\n   * @example\n   * fit=\"cover\"\n   * fit=\"contain\"\n   *\n   * @link\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n   */\n  fit: {\n    type: 'enum',\n    className: 'rt-r-fit',\n    values: objectFitValues,\n    default: 'cover',\n    responsive: true,\n  },\n  ...radiusPropDef,\n  ...shadowPropDefs,\n} satisfies {\n  fit: PropDef<(typeof objectFitValues)[number]>;\n};\n\nexport { imagePropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA8B,mCAC9BC,EAA+B,oCAI/B,MAAMC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EAEnEJ,EAAgB,CAYpB,IAAK,CACH,KAAM,OACN,UAAW,WACX,OAAQI,EACR,QAAS,QACT,WAAY,EACd,EACA,GAAG,gBACH,GAAG,gBACL",
-  "names": ["image_props_exports", "__export", "imagePropDefs", "__toCommonJS", "import_radius_prop", "import_shadow_props", "objectFitValues"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { shadowPropDefs } from '../props/shadow.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;\nconst variants = ['surface', 'blur'] as const;\n\nconst imagePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Sets the CSS **object-fit** property.\n   * Controls how the image should be resized to fit its container.\n   *\n   * @example\n   * fit=\"cover\"\n   * fit=\"contain\"\n   *\n   * @link\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n   */\n  fit: {\n    type: 'enum',\n    className: 'rt-r-fit',\n    values: objectFitValues,\n    default: 'cover',\n    responsive: true,\n  },\n  /**\n   * Sets the visual variant of the image.\n   *\n   * @example\n   * variant=\"surface\"\n   * variant=\"blur\"\n   */\n  variant: {\n    type: 'enum',\n    className: 'rt-variant',\n    values: variants,\n    default: 'surface',\n  },\n  ...radiusPropDef,\n  ...shadowPropDefs,\n} satisfies {\n  fit: PropDef<(typeof objectFitValues)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { imagePropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAC/BC,EAA8B,mCAC9BC,EAA+B,oCAI/B,MAAMC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EACnEC,EAAW,CAAC,UAAW,MAAM,EAE7BN,EAAgB,CACpB,GAAG,iBAYH,IAAK,CACH,KAAM,OACN,UAAW,WACX,OAAQK,EACR,QAAS,QACT,WAAY,EACd,EAQA,QAAS,CACP,KAAM,OACN,UAAW,aACX,OAAQC,EACR,QAAS,SACX,EACA,GAAG,gBACH,GAAG,gBACL",
+  "names": ["image_props_exports", "__export", "imagePropDefs", "__toCommonJS", "import_as_child_prop", "import_radius_prop", "import_shadow_props", "objectFitValues", "variants"]
 }

package/dist/esm/components/image.d.ts

@@ -11,9 +11,9 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
 interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>, MarginProps, WidthProps, HeightProps, ImageOwnProps {
     /**
      * The alt attribute provides alternative information for an image if a user for some reason cannot view it.
-     * Required for accessibility.
+     * Required for accessibility when not using asChild.
      */
-    alt: string;
+    alt?: string;
 }
 declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export { Image };

package/dist/esm/components/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFAqBT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,KAAK,qFAsJT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}