@kushagradhawan/kookie-ui 0.1.23 → 0.1.24

package/components.css

@@ -7832,11 +7832,9 @@
 }
 .rt-variant-blur {
     position: relative;
+}
+.rt-variant-blur--as-child {
     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;
@@ -7860,18 +7858,6 @@
     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.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;AASjD,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,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;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,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,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA8ST,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;AASjD,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,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;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,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,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA0TT,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 V=Object.create;var b=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var R=(o,e)=>{for(var a in e)b(o,a,{get:e[a],enumerable:!0})},w=(o,e,a,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of Y(e))!_.call(o,l)&&l!==a&&b(o,l,{get:()=>e[l],enumerable:!(c=X(e,l))||c.enumerable});return o};var z=(o,e,a)=>(a=o!=null?V(Z(o)):{},w(e||!o||!o.__esModule?b(a,"default",{value:o,enumerable:!0}):a,o)),ee=o=>w(b({},"__esModule",{value:!0}),o);var te={};R(te,{Image:()=>k});module.exports=ee(te);var r=z(require("react")),n=z(require("classnames")),B=require("./image.props.js"),O=require("../helpers/extract-props.js"),q=require("../props/margin.props.js"),G=require("../props/width.props.js"),$=require("../props/height.props.js"),A=require("../props/layout.props.js"),F=require("./skeleton.js"),P=require("./box.js");const k=r.forwardRef((o,e)=>{const{variant:a="surface",wrapperStyle:c,...l}=o,{asChild:D,className:p,radius:i,style:s,loading:g="lazy",alt:d,src:m,placeholder:f,showSkeleton:C=!1,fadeIn:u=!0,onLoad:H,onError:M,children:T,...y}=(0,O.extractProps)(l,B.imagePropDefs,q.marginPropDefs,G.widthPropDefs,$.heightPropDefs,A.layoutPropDefs),[h,E]=r.useState(!1),[J,v]=r.useState(!1),[K,x]=r.useState(!!f),I=r.useRef(null),L=r.useCallback(t=>{E(!0),v(!1),x(!1),H?.(t)},[H]),N=r.useCallback(t=>{E(!1),v(!0),x(!1),M?.(t)},[M]);if(r.useEffect(()=>{const t=I.current;t&&t.complete&&t.naturalWidth>0&&(E(!0),v(!1),x(!1))},[m]),!m)return console.warn("Image component: src prop is required"),null;!D&&d===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const Q=C&&!h&&!J?r.createElement(F.Skeleton,{width:"100%",height:"100px",style:{...s,borderRadius:i?`var(--radius-${i})`:void 0},className:p}):null,U=f&&K?r.createElement("img",{"data-radius":i,style:{...s,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:(0,n.default)("rt-reset","rt-Image","rt-Image--placeholder",p),alt:"",src:f}):null,j=r.createElement("img",{"data-radius":i,loading:g,style:{...s,opacity:u?h?s?.opacity??1:0:s?.opacity??1,transition:u?"opacity 0.3s ease-out":"none"},className:(0,n.default)("rt-reset","rt-Image",a==="blur"&&"rt-Image--blur",p),alt:d,src:m,onLoad:L,onError:N,...y,ref:t=>{I.current=t,typeof e=="function"?e(t):e&&(e.current=t)}}),W=f||C?r.createElement(P.Box,{position:"relative",display:"inline-block",style:c},Q,U,j):j;if(D&&T){const t=r.Children.only(T);return a==="blur"?r.cloneElement(t,{className:(0,n.default)(t.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...t.props?.style},children:r.createElement(P.Box,{position:"relative",display:"inline-block",style:c},r.createElement("img",{"data-radius":i,loading:g,style:{...s,position:"absolute",top:"8px",left:"0"},className:(0,n.default)("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",p),alt:"",src:m,...y}),r.createElement("img",{"data-radius":i,loading:g,style:{...s,position:"relative",zIndex:1,opacity:u?h?s?.opacity??1:0:s?.opacity??1,transition:u?"opacity 0.3s ease-out":"none"},className:(0,n.default)("rt-reset","rt-Image","rt-Image--blur",p),alt:d,src:m,onLoad:L,onError:N,...y,ref:S=>{I.current=S,typeof e=="function"?e(S):e&&(e.current=S)}}))}):r.cloneElement(t,{className:(0,n.default)(t.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",display:"inline-block",...t.props?.style},children:W})}return a==="blur"?r.createElement(P.Box,{className:"rt-variant-blur",position:"relative",display:"inline-block",style:c},r.createElement("img",{"data-radius":i,loading:g,style:{...s,position:"absolute",top:"8px",left:"0"},className:(0,n.default)("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",p),alt:"",src:m,...y}),r.createElement("img",{"data-radius":i,loading:g,style:{...s,position:"relative",zIndex:1,opacity:u?h?s?.opacity??1:0:s?.opacity??1,transition:u?"opacity 0.3s ease-out":"none"},className:(0,n.default)("rt-reset","rt-Image","rt-Image--blur",p),alt:d,src:m,onLoad:L,onError:N,...y,ref:t=>{I.current=t,typeof e=="function"?e(t):e&&(e.current=t)}})):W});k.displayName="Image";
+"use strict";"use client";var V=Object.create;var b=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var R=(o,e)=>{for(var s in e)b(o,s,{get:e[s],enumerable:!0})},z=(o,e,s,y)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of Y(e))!_.call(o,p)&&p!==s&&b(o,p,{get:()=>e[p],enumerable:!(y=X(e,p))||y.enumerable});return o};var O=(o,e,s)=>(s=o!=null?V(Z(o)):{},z(e||!o||!o.__esModule?b(s,"default",{value:o,enumerable:!0}):s,o)),ee=o=>z(b({},"__esModule",{value:!0}),o);var te={};R(te,{Image:()=>x});module.exports=ee(te);var t=O(require("react")),a=O(require("classnames")),B=require("./image.props.js"),q=require("../helpers/extract-props.js"),A=require("../props/margin.props.js"),G=require("../props/width.props.js"),F=require("../props/height.props.js"),$=require("../props/layout.props.js"),J=require("./skeleton.js"),v=require("./box.js");const x=t.forwardRef((o,e)=>{const{variant:s="surface",wrapperStyle:y,...p}=o,{asChild:D,className:n,radius:l,style:d,loading:c="lazy",alt:u,src:i,placeholder:E,showSkeleton:K=!1,fadeIn:k=!0,onLoad:C,onError:w,children:H,...M}=(0,q.extractProps)(p,B.imagePropDefs,A.marginPropDefs,G.widthPropDefs,F.heightPropDefs,$.layoutPropDefs),[T,S]=t.useState(!1),[Q,L]=t.useState(!1),[U,N]=t.useState(!!E),g=t.useRef(null),f=t.useCallback(r=>{S(!0),L(!1),N(!1),C?.(r)},[C]),I=t.useCallback(r=>{S(!1),L(!0),N(!1),w?.(r)},[w]);if(t.useEffect(()=>{const r=g.current;r&&r.complete&&r.naturalWidth>0&&(S(!0),L(!1),N(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!D&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const h={width:"100%",height:"100%",display:"block",opacity:k?T?1:0:1,transition:k?"opacity 0.3s ease-out":"none",...d},P={position:"relative",display:"block",...y},j=K&&!T&&!Q?t.createElement(J.Skeleton,{width:"100%",height:"100px",style:{borderRadius:l?`var(--radius-${l})`:void 0},className:n}):null,W=E&&U?t.createElement("img",{"data-radius":l,style:{...h,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:(0,a.default)("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:E}):null;if(D&&H){const r=t.Children.only(H);return s==="blur"?t.cloneElement(r,{className:(0,a.default)(r.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...d,...r.props?.style},children:t.createElement(t.Fragment,null,t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))}):t.cloneElement(r,{className:(0,a.default)(r.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...P,...r.props?.style},children:t.createElement(t.Fragment,null,j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:m=>{g.current=m,typeof e=="function"?e(m):e&&(e.current=m)}}))})}return s==="blur"?t.createElement(v.Box,{className:(0,a.default)("rt-variant-blur",n),style:{...d,...P},...M},t.createElement("img",{"data-radius":l,loading:c,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur-bg",n),alt:"",src:i}),t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image","rt-Image--blur",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}})):t.createElement(v.Box,{className:n,style:{...d,...P},...M},j,W,t.createElement("img",{"data-radius":l,loading:c,style:h,className:(0,a.default)("rt-reset","rt-Image",n),alt:u,src:i,onLoad:f,onError:I,ref:r=>{g.current=r,typeof e=="function"?e(r):e&&(e.current=r)}}))});x.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';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Box } from './box.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 { LayoutProps } from '../props/layout.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   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.\n   */\n  wrapperStyle?: React.CSSProperties;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\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. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', wrapperStyle, ...restProps } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...imgProps\n  } = extractProps(\n    restProps,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load - moved to top to avoid conditional hook call\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  // Handle image error - moved to top to avoid conditional hook call\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(false);\n      setImageError(true);\n      setShowPlaceholder(false);\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by style\n        style={{\n          ...style,\n          borderRadius: radius ? `var(--radius-${radius})` : undefined,\n        }}\n        className={className}\n      />\n    ) : null;\n\n  // Create placeholder image element\n  const placeholderElement =\n    placeholder && showPlaceholder ? (\n      <img\n        data-radius={radius}\n        style={{\n          ...style,\n          filter: 'blur(4px)',\n          opacity: 0.7,\n          transition: 'opacity 0.3s ease-out',\n        }}\n        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}\n        alt=\"\"\n        src={placeholder}\n      />\n    ) : null;\n\n  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n      }}\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      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\n      ref={(node) => {\n        imgRef.current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n    />\n  );\n\n  // Wrapper for images with placeholders\n  const imageWithPlaceholder =\n    placeholder || showSkeleton ? (\n      <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n        {skeletonElement}\n        {placeholderElement}\n        {imgElement}\n      </Box>\n    ) : (\n      imgElement\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          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          <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\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={{\n                ...style,\n                position: 'relative',\n                zIndex: 1,\n                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </Box>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\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          display: 'inline-block', // Ensure proper sizing\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <Box\n        className=\"rt-variant-blur\"\n        position=\"relative\"\n        display=\"inline-block\"\n        style={wrapperStyle}\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={{\n            ...style,\n            position: 'relative',\n            zIndex: 1,\n            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </Box>\n    );\n  }\n\n  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "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",
-  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "import_layout_props", "import_skeleton", "import_box", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "imgProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "skeletonElement", "placeholderElement", "classNames", "imgElement", "node", "imageWithPlaceholder", "child"]
+  "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';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Box } from './box.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 { LayoutProps } from '../props/layout.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   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.\n   */\n  wrapperStyle?: React.CSSProperties;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\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. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', wrapperStyle, ...restProps } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...wrapperProps\n  } = extractProps(\n    restProps,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  // Handle image error\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(false);\n      setImageError(true);\n      setShowPlaceholder(false);\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Common image styles that apply to the actual img element\n  const imgStyle: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n    opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n    ...style, // Allow style overrides for the image\n  };\n\n  // Wrapper styles that get all the sizing and positioning\n  const wrapperStyleFinal: React.CSSProperties = {\n    position: 'relative',\n    display: 'block', // Use block instead of inline-block to work better with AspectRatio\n    ...wrapperStyle,\n  };\n\n  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by wrapper\n        style={{\n          borderRadius: radius ? `var(--radius-${radius})` : undefined,\n        }}\n        className={className}\n      />\n    ) : null;\n\n  // Create placeholder image element\n  const placeholderElement =\n    placeholder && showPlaceholder ? (\n      <img\n        data-radius={radius}\n        style={{\n          ...imgStyle,\n          filter: 'blur(4px)',\n          opacity: 0.7,\n          transition: 'opacity 0.3s ease-out',\n        }}\n        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}\n        alt=\"\"\n        src={placeholder}\n      />\n    ) : null;\n\n  // Handle asChild - inject content 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          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...style, // Apply sizing to the child element\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                position: 'absolute',\n                top: '0',\n                left: '0',\n                width: '105%',\n                height: '105%',\n                transform: 'translate(-2.5%, -2.5%)',\n                filter: 'blur(16px) saturate(1.5)',\n                opacity: 0.5,\n                zIndex: -1,\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n              alt=\"\"\n              src={src}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\n        style: {\n          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {skeletonElement}\n            {placeholderElement}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    }\n  }\n\n  // Regular rendering without asChild - both variants use Box wrapper\n  if (variant === 'blur') {\n    return (\n      <Box\n        className={classNames('rt-variant-blur', className)}\n        style={{\n          ...style, // Include the width/height styles from extractProps\n          ...wrapperStyleFinal,\n        }}\n        {...wrapperProps} // Apply other props to wrapper\n      >\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            width: '105%',\n            height: '105%',\n            transform: 'translate(-2.5%, -2.5%)',\n            filter: 'blur(16px) saturate(1.5)',\n            opacity: 0.5,\n            zIndex: -1,\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n          alt=\"\"\n          src={src}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={imgStyle}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </Box>\n    );\n  }\n\n  // Surface variant - also use Box wrapper for consistency\n  return (\n    <Box\n      className={className}\n      style={{\n        ...style, // Include the width/height styles from extractProps\n        ...wrapperStyleFinal,\n      }}\n      {...wrapperProps} // Apply other props to wrapper\n    >\n      {skeletonElement}\n      {placeholderElement}\n      <img\n        data-radius={radius}\n        loading={loading}\n        style={imgStyle}\n        className={classNames('rt-reset', 'rt-Image', className)}\n        alt={alt}\n        src={src}\n        onLoad={handleLoad}\n        onError={handleError}\n        ref={(node) => {\n          imgRef.current = node;\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(node);\n          } else if (forwardedRef) {\n            forwardedRef.current = node;\n          }\n        }}\n      />\n    </Box>\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "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",
+  "names": ["image_exports", "__export", "Image", "__toCommonJS", "React", "import_classnames", "import_image_props", "import_extract_props", "import_margin_props", "import_width_props", "import_height_props", "import_layout_props", "import_skeleton", "import_box", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "wrapperProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "imgStyle", "wrapperStyleFinal", "skeletonElement", "placeholderElement", "classNames", "child", "node"]
 }

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;AASjD,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,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;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,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,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA8ST,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;AASjD,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,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;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,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,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA0TT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/esm/components/image.js

@@ -1,2 +1,2 @@
-"use client";import*as t from"react";import a from"classnames";import{imagePropDefs as O}from"./image.props.js";import{extractProps as q}from"../helpers/extract-props.js";import{marginPropDefs as G}from"../props/margin.props.js";import{widthPropDefs as $}from"../props/width.props.js";import{heightPropDefs as A}from"../props/height.props.js";import{layoutPropDefs as F}from"../props/layout.props.js";import{Skeleton as J}from"./skeleton.js";import{Box as x}from"./box.js";const M=t.forwardRef((T,o)=>{const{variant:d="surface",wrapperStyle:f,...j}=T,{asChild:L,className:n,radius:s,style:r,loading:p="lazy",alt:c,src:i,placeholder:u,showSkeleton:N=!1,fadeIn:l=!0,onLoad:S,onError:k,children:D,...m}=q(j,O,G,$,A,F),[g,h]=t.useState(!1),[W,I]=t.useState(!1),[w,b]=t.useState(!!u),y=t.useRef(null),P=t.useCallback(e=>{h(!0),I(!1),b(!1),S?.(e)},[S]),E=t.useCallback(e=>{h(!1),I(!0),b(!1),k?.(e)},[k]);if(t.useEffect(()=>{const e=y.current;e&&e.complete&&e.naturalWidth>0&&(h(!0),I(!1),b(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!L&&c===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const z=N&&!g&&!W?t.createElement(J,{width:"100%",height:"100px",style:{...r,borderRadius:s?`var(--radius-${s})`:void 0},className:n}):null,B=u&&w?t.createElement("img",{"data-radius":s,style:{...r,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:a("rt-reset","rt-Image","rt-Image--placeholder",n),alt:"",src:u}):null,C=t.createElement("img",{"data-radius":s,loading:p,style:{...r,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image",d==="blur"&&"rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}}),H=u||N?t.createElement(x,{position:"relative",display:"inline-block",style:f},z,B,C):C;if(L&&D){const e=t.Children.only(D);return d==="blur"?t.cloneElement(e,{className:a(e.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:t.createElement(x,{position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:a("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:v=>{y.current=v,typeof o=="function"?o(v):o&&(o.current=v)}}))}):t.cloneElement(e,{className:a(e.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",display:"inline-block",...e.props?.style},children:H})}return d==="blur"?t.createElement(x,{className:"rt-variant-blur",position:"relative",display:"inline-block",style:f},t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"absolute",top:"8px",left:"0"},className:a("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",n),alt:"",src:i,...m}),t.createElement("img",{"data-radius":s,loading:p,style:{...r,position:"relative",zIndex:1,opacity:l?g?r?.opacity??1:0:r?.opacity??1,transition:l?"opacity 0.3s ease-out":"none"},className:a("rt-reset","rt-Image","rt-Image--blur",n),alt:c,src:i,onLoad:P,onError:E,...m,ref:e=>{y.current=e,typeof o=="function"?o(e):o&&(o.current=e)}})):H});M.displayName="Image";export{M as Image};
+"use client";import*as e from"react";import s from"classnames";import{imagePropDefs as B}from"./image.props.js";import{extractProps as q}from"../helpers/extract-props.js";import{marginPropDefs as A}from"../props/margin.props.js";import{widthPropDefs as G}from"../props/width.props.js";import{heightPropDefs as F}from"../props/height.props.js";import{layoutPropDefs as $}from"../props/layout.props.js";import{Skeleton as J}from"./skeleton.js";import{Box as w}from"./box.js";const H=e.forwardRef((M,r)=>{const{variant:b="surface",wrapperStyle:T,...j}=M,{asChild:E,className:o,radius:a,style:u,loading:i="lazy",alt:p,src:n,placeholder:d,showSkeleton:W=!1,fadeIn:S=!0,onLoad:L,onError:N,children:v,...x}=q(j,B,A,G,F,$),[D,f]=e.useState(!1),[z,I]=e.useState(!1),[O,P]=e.useState(!!d),m=e.useRef(null),g=e.useCallback(t=>{f(!0),I(!1),P(!1),L?.(t)},[L]),h=e.useCallback(t=>{f(!1),I(!0),P(!1),N?.(t)},[N]);if(e.useEffect(()=>{const t=m.current;t&&t.complete&&t.naturalWidth>0&&(f(!0),I(!1),P(!1))},[n]),!n)return console.warn("Image component: src prop is required"),null;!E&&p===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const c={width:"100%",height:"100%",display:"block",opacity:S?D?1:0:1,transition:S?"opacity 0.3s ease-out":"none",...u},y={position:"relative",display:"block",...T},k=W&&!D&&!z?e.createElement(J,{width:"100%",height:"100px",style:{borderRadius:a?`var(--radius-${a})`:void 0},className:o}):null,C=d&&O?e.createElement("img",{"data-radius":a,style:{...c,filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:s("rt-reset","rt-Image","rt-Image--placeholder",o),alt:"",src:d}):null;if(E&&v){const t=e.Children.only(v);return b==="blur"?e.cloneElement(t,{className:s(t.props?.className,"rt-variant-blur"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...y,...u,...t.props?.style},children:e.createElement(e.Fragment,null,e.createElement("img",{"data-radius":a,loading:i,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:s("rt-reset","rt-Image","rt-Image--blur-bg",o),alt:"",src:n}),e.createElement("img",{"data-radius":a,loading:i,style:c,className:s("rt-reset","rt-Image","rt-Image--blur",o),alt:p,src:n,onLoad:g,onError:h,ref:l=>{m.current=l,typeof r=="function"?r(l):r&&(r.current=l)}}))}):e.cloneElement(t,{className:s(t.props?.className),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...y,...t.props?.style},children:e.createElement(e.Fragment,null,k,C,e.createElement("img",{"data-radius":a,loading:i,style:c,className:s("rt-reset","rt-Image",o),alt:p,src:n,onLoad:g,onError:h,ref:l=>{m.current=l,typeof r=="function"?r(l):r&&(r.current=l)}}))})}return b==="blur"?e.createElement(w,{className:s("rt-variant-blur",o),style:{...u,...y},...x},e.createElement("img",{"data-radius":a,loading:i,style:{position:"absolute",top:"0",left:"0",width:"105%",height:"105%",transform:"translate(-2.5%, -2.5%)",filter:"blur(16px) saturate(1.5)",opacity:.5,zIndex:-1},className:s("rt-reset","rt-Image","rt-Image--blur-bg",o),alt:"",src:n}),e.createElement("img",{"data-radius":a,loading:i,style:c,className:s("rt-reset","rt-Image","rt-Image--blur",o),alt:p,src:n,onLoad:g,onError:h,ref:t=>{m.current=t,typeof r=="function"?r(t):r&&(r.current=t)}})):e.createElement(w,{className:o,style:{...u,...y},...x},k,C,e.createElement("img",{"data-radius":a,loading:i,style:c,className:s("rt-reset","rt-Image",o),alt:p,src:n,onLoad:g,onError:h,ref:t=>{m.current=t,typeof r=="function"?r(t):r&&(r.current=t)}}))});H.displayName="Image";export{H as Image};
 //# sourceMappingURL=image.js.map

package/dist/esm/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';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Box } from './box.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 { LayoutProps } from '../props/layout.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   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.\n   */\n  wrapperStyle?: React.CSSProperties;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\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. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', wrapperStyle, ...restProps } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...imgProps\n  } = extractProps(\n    restProps,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load - moved to top to avoid conditional hook call\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  // Handle image error - moved to top to avoid conditional hook call\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(false);\n      setImageError(true);\n      setShowPlaceholder(false);\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by style\n        style={{\n          ...style,\n          borderRadius: radius ? `var(--radius-${radius})` : undefined,\n        }}\n        className={className}\n      />\n    ) : null;\n\n  // Create placeholder image element\n  const placeholderElement =\n    placeholder && showPlaceholder ? (\n      <img\n        data-radius={radius}\n        style={{\n          ...style,\n          filter: 'blur(4px)',\n          opacity: 0.7,\n          transition: 'opacity 0.3s ease-out',\n        }}\n        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}\n        alt=\"\"\n        src={placeholder}\n      />\n    ) : null;\n\n  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n      }}\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      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\n      ref={(node) => {\n        imgRef.current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n    />\n  );\n\n  // Wrapper for images with placeholders\n  const imageWithPlaceholder =\n    placeholder || showSkeleton ? (\n      <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\n        {skeletonElement}\n        {placeholderElement}\n        {imgElement}\n      </Box>\n    ) : (\n      imgElement\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          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          <Box position=\"relative\" display=\"inline-block\" style={wrapperStyle}>\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={{\n                ...style,\n                position: 'relative',\n                zIndex: 1,\n                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </Box>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\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          display: 'inline-block', // Ensure proper sizing\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <Box\n        className=\"rt-variant-blur\"\n        position=\"relative\"\n        display=\"inline-block\"\n        style={wrapperStyle}\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={{\n            ...style,\n            position: 'relative',\n            zIndex: 1,\n            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),\n            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </Box>\n    );\n  }\n\n  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "layoutPropDefs", "Skeleton", "Box", "Image", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "imgProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "skeletonElement", "placeholderElement", "imgElement", "node", "imageWithPlaceholder", "child"]
+  "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';\nimport { layoutPropDefs } from '../props/layout.props.js';\nimport { Skeleton } from './skeleton.js';\nimport { Box } from './box.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 { LayoutProps } from '../props/layout.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   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.\n   */\n  wrapperStyle?: React.CSSProperties;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    LayoutProps,\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. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', wrapperStyle, ...restProps } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children,\n    ...wrapperProps\n  } = extractProps(\n    restProps,\n    imagePropDefs,\n    marginPropDefs,\n    widthPropDefs,\n    heightPropDefs,\n    layoutPropDefs,\n  );\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n      userOnLoad?.(event);\n    },\n    [userOnLoad],\n  );\n\n  // Handle image error\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(false);\n      setImageError(true);\n      setShowPlaceholder(false);\n      userOnError?.(event);\n    },\n    [userOnError],\n  );\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Common image styles that apply to the actual img element\n  const imgStyle: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n    opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n    ...style, // Allow style overrides for the image\n  };\n\n  // Wrapper styles that get all the sizing and positioning\n  const wrapperStyleFinal: React.CSSProperties = {\n    position: 'relative',\n    display: 'block', // Use block instead of inline-block to work better with AspectRatio\n    ...wrapperStyle,\n  };\n\n  // Create skeleton placeholder\n  const skeletonElement =\n    showSkeleton && !imageLoaded && !imageError ? (\n      <Skeleton\n        width=\"100%\"\n        height=\"100px\" // Default height, can be overridden by wrapper\n        style={{\n          borderRadius: radius ? `var(--radius-${radius})` : undefined,\n        }}\n        className={className}\n      />\n    ) : null;\n\n  // Create placeholder image element\n  const placeholderElement =\n    placeholder && showPlaceholder ? (\n      <img\n        data-radius={radius}\n        style={{\n          ...imgStyle,\n          filter: 'blur(4px)',\n          opacity: 0.7,\n          transition: 'opacity 0.3s ease-out',\n        }}\n        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}\n        alt=\"\"\n        src={placeholder}\n      />\n    ) : null;\n\n  // Handle asChild - inject content 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          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...style, // Apply sizing to the child element\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                position: 'absolute',\n                top: '0',\n                left: '0',\n                width: '105%',\n                height: '105%',\n                transform: 'translate(-2.5%, -2.5%)',\n                filter: 'blur(16px) saturate(1.5)',\n                opacity: 0.5,\n                zIndex: -1,\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n              alt=\"\"\n              src={src}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className),\n        style: {\n          textDecoration: 'none',\n          color: 'inherit',\n          border: 'none',\n          background: 'none',\n          padding: 0,\n          font: 'inherit',\n          cursor: 'pointer',\n          ...wrapperStyleFinal,\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {skeletonElement}\n            {placeholderElement}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={imgStyle}\n              className={classNames('rt-reset', 'rt-Image', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    }\n  }\n\n  // Regular rendering without asChild - both variants use Box wrapper\n  if (variant === 'blur') {\n    return (\n      <Box\n        className={classNames('rt-variant-blur', className)}\n        style={{\n          ...style, // Include the width/height styles from extractProps\n          ...wrapperStyleFinal,\n        }}\n        {...wrapperProps} // Apply other props to wrapper\n      >\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            width: '105%',\n            height: '105%',\n            transform: 'translate(-2.5%, -2.5%)',\n            filter: 'blur(16px) saturate(1.5)',\n            opacity: 0.5,\n            zIndex: -1,\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}\n          alt=\"\"\n          src={src}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={imgStyle}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </Box>\n    );\n  }\n\n  // Surface variant - also use Box wrapper for consistency\n  return (\n    <Box\n      className={className}\n      style={{\n        ...style, // Include the width/height styles from extractProps\n        ...wrapperStyleFinal,\n      }}\n      {...wrapperProps} // Apply other props to wrapper\n    >\n      {skeletonElement}\n      {placeholderElement}\n      <img\n        data-radius={radius}\n        loading={loading}\n        style={imgStyle}\n        className={classNames('rt-reset', 'rt-Image', className)}\n        alt={alt}\n        src={src}\n        onLoad={handleLoad}\n        onError={handleError}\n        ref={(node) => {\n          imgRef.current = node;\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(node);\n          } else if (forwardedRef) {\n            forwardedRef.current = node;\n          }\n        }}\n      />\n    </Box>\n  );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "layoutPropDefs", "Skeleton", "Box", "Image", "props", "forwardedRef", "variant", "wrapperStyle", "restProps", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "children", "wrapperProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "imgStyle", "wrapperStyleFinal", "skeletonElement", "placeholderElement", "child", "node"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",

package/src/components/image.css

@@ -60,6 +60,10 @@
 /* Blur variant wrapper */
 .rt-variant-blur {
   position: relative;
+}
+
+/* Blur variant when used with asChild - use inline-block for proper sizing */
+.rt-variant-blur--as-child {
   display: inline-block;
 }
 
@@ -93,28 +97,14 @@
   box-shadow: var(--box-shadow) !important;
 }
 
-/* Blur background image */
+/* Blur background image - simplified */
 .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;
-}
-
-/* Blur variant CSS variables */
-.rt-variant-blur {
-  --blur-filter: blur(16px) saturate(1.5);
-  --blur-opacity: 0.5;
-  --blur-offset-y: 8px;
-  --blur-offset-x: 0;
+  /* No additional styles needed - all handled inline */
 }
 
-/* Image inside blur variant gets positioned */
+/* Image inside blur variant - simplified */
 .rt-Image--blur {
-  position: relative;
-  z-index: 1;
+  /* No additional styles needed - all handled inline */
 }
 
 /* Object fit variants */

package/src/components/image.tsx

@@ -79,7 +79,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     onLoad: userOnLoad,
     onError: userOnError,
     children,
-    ...imgProps
+    ...wrapperProps
   } = extractProps(
     restProps,
     imagePropDefs,
@@ -97,7 +97,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   // Ref to check if image is already loaded (for cached images)
   const imgRef = React.useRef<HTMLImageElement>(null);
 
-  // Handle image load - moved to top to avoid conditional hook call
+  // Handle image load
   const handleLoad = React.useCallback(
     (event: React.SyntheticEvent<HTMLImageElement>) => {
       setImageLoaded(true);
@@ -108,7 +108,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     [userOnLoad],
   );
 
-  // Handle image error - moved to top to avoid conditional hook call
+  // Handle image error
   const handleError = React.useCallback(
     (event: React.SyntheticEvent<HTMLImageElement>) => {
       setImageLoaded(false);
@@ -139,14 +139,30 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     console.warn('Image component: alt prop is required for accessibility when not using asChild');
   }
 
+  // Common image styles that apply to the actual img element
+  const imgStyle: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+    transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
+    ...style, // Allow style overrides for the image
+  };
+
+  // Wrapper styles that get all the sizing and positioning
+  const wrapperStyleFinal: React.CSSProperties = {
+    position: 'relative',
+    display: 'block', // Use block instead of inline-block to work better with AspectRatio
+    ...wrapperStyle,
+  };
+
   // Create skeleton placeholder
   const skeletonElement =
     showSkeleton && !imageLoaded && !imageError ? (
       <Skeleton
         width="100%"
-        height="100px" // Default height, can be overridden by style
+        height="100px" // Default height, can be overridden by wrapper
         style={{
-          ...style,
           borderRadius: radius ? `var(--radius-${radius})` : undefined,
         }}
         className={className}
@@ -159,7 +175,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       <img
         data-radius={radius}
         style={{
-          ...style,
+          ...imgStyle,
           filter: 'blur(4px)',
           opacity: 0.7,
           transition: 'opacity 0.3s ease-out',
@@ -170,51 +186,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       />
     ) : null;
 
-  // Create the standard img element
-  const imgElement = (
-    <img
-      data-radius={radius}
-      loading={loading}
-      style={{
-        ...style,
-        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-      }}
-      className={classNames(
-        'rt-reset',
-        'rt-Image',
-        variant === 'blur' && 'rt-Image--blur',
-        className,
-      )}
-      alt={alt}
-      src={src}
-      onLoad={handleLoad}
-      onError={handleError}
-      {...imgProps}
-      ref={(node) => {
-        imgRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      }}
-    />
-  );
-
-  // Wrapper for images with placeholders
-  const imageWithPlaceholder =
-    placeholder || showSkeleton ? (
-      <Box position="relative" display="inline-block" style={wrapperStyle}>
-        {skeletonElement}
-        {placeholderElement}
-        {imgElement}
-      </Box>
-    ) : (
-      imgElement
-    );
-
-  // Handle asChild - inject img into the child element
+  // Handle asChild - inject content into the child element
   if (asChild && children) {
     const child = React.Children.only(children) as React.ReactElement<any>;
 
@@ -223,55 +195,48 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       return React.cloneElement(child, {
         className: classNames(child.props?.className, 'rt-variant-blur'),
         style: {
-          textDecoration: 'none', // Reset link underlines
-          color: 'inherit', // Reset link colors
-          border: 'none', // Reset button borders
-          background: 'none', // Reset button backgrounds
-          padding: 0, // Reset button padding
-          font: 'inherit', // Reset button fonts
-          cursor: 'pointer', // Ensure interactive cursor
+          textDecoration: 'none',
+          color: 'inherit',
+          border: 'none',
+          background: 'none',
+          padding: 0,
+          font: 'inherit',
+          cursor: 'pointer',
+          ...wrapperStyleFinal,
+          ...style, // Apply sizing to the child element
           ...child.props?.style,
         },
         children: (
-          <Box position="relative" display="inline-block" style={wrapperStyle}>
+          <>
             {/* Background blurred image */}
             <img
               data-radius={radius}
               loading={loading}
               style={{
-                ...style,
                 position: 'absolute',
-                top: '8px',
+                top: '0',
                 left: '0',
+                width: '105%',
+                height: '105%',
+                transform: 'translate(-2.5%, -2.5%)',
+                filter: 'blur(16px) saturate(1.5)',
+                opacity: 0.5,
+                zIndex: -1,
               }}
-              className={classNames(
-                'rt-reset',
-                'rt-Image',
-                'rt-Image--blur',
-                'rt-Image--blur-bg',
-                className,
-              )}
+              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}
               alt=""
               src={src}
-              {...imgProps}
             />
             {/* Foreground image */}
             <img
               data-radius={radius}
               loading={loading}
-              style={{
-                ...style,
-                position: 'relative',
-                zIndex: 1,
-                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-              }}
+              style={imgStyle}
               className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
               alt={alt}
               src={src}
               onLoad={handleLoad}
               onError={handleError}
-              {...imgProps}
               ref={(node) => {
                 imgRef.current = node;
                 if (typeof forwardedRef === 'function') {
@@ -281,7 +246,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
                 }
               }}
             />
-          </Box>
+          </>
         ),
       });
     } else {
@@ -289,68 +254,84 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       return React.cloneElement(child, {
         className: classNames(child.props?.className),
         style: {
-          textDecoration: 'none', // Reset link underlines
-          color: 'inherit', // Reset link colors
-          border: 'none', // Reset button borders
-          background: 'none', // Reset button backgrounds
-          padding: 0, // Reset button padding
-          font: 'inherit', // Reset button fonts
-          cursor: 'pointer', // Ensure interactive cursor
-          display: 'inline-block', // Ensure proper sizing
-          ...child.props?.style, // Allow user overrides
+          textDecoration: 'none',
+          color: 'inherit',
+          border: 'none',
+          background: 'none',
+          padding: 0,
+          font: 'inherit',
+          cursor: 'pointer',
+          ...wrapperStyleFinal,
+          ...child.props?.style,
         },
-        children: imageWithPlaceholder,
+        children: (
+          <>
+            {skeletonElement}
+            {placeholderElement}
+            <img
+              data-radius={radius}
+              loading={loading}
+              style={imgStyle}
+              className={classNames('rt-reset', 'rt-Image', className)}
+              alt={alt}
+              src={src}
+              onLoad={handleLoad}
+              onError={handleError}
+              ref={(node) => {
+                imgRef.current = node;
+                if (typeof forwardedRef === 'function') {
+                  forwardedRef(node);
+                } else if (forwardedRef) {
+                  forwardedRef.current = node;
+                }
+              }}
+            />
+          </>
+        ),
       });
     }
   }
 
-  // Regular rendering without asChild
+  // Regular rendering without asChild - both variants use Box wrapper
   if (variant === 'blur') {
     return (
       <Box
-        className="rt-variant-blur"
-        position="relative"
-        display="inline-block"
-        style={wrapperStyle}
+        className={classNames('rt-variant-blur', className)}
+        style={{
+          ...style, // Include the width/height styles from extractProps
+          ...wrapperStyleFinal,
+        }}
+        {...wrapperProps} // Apply other props to wrapper
       >
         {/* Background blurred image */}
         <img
           data-radius={radius}
           loading={loading}
           style={{
-            ...style,
             position: 'absolute',
-            top: '8px',
+            top: '0',
             left: '0',
+            width: '105%',
+            height: '105%',
+            transform: 'translate(-2.5%, -2.5%)',
+            filter: 'blur(16px) saturate(1.5)',
+            opacity: 0.5,
+            zIndex: -1,
           }}
-          className={classNames(
-            'rt-reset',
-            'rt-Image',
-            'rt-Image--blur',
-            'rt-Image--blur-bg',
-            className,
-          )}
+          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur-bg', className)}
           alt=""
           src={src}
-          {...imgProps}
         />
         {/* Foreground image */}
         <img
           data-radius={radius}
           loading={loading}
-          style={{
-            ...style,
-            position: 'relative',
-            zIndex: 1,
-            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
-            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
-          }}
+          style={imgStyle}
           className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
           alt={alt}
           src={src}
           onLoad={handleLoad}
           onError={handleError}
-          {...imgProps}
           ref={(node) => {
             imgRef.current = node;
             if (typeof forwardedRef === 'function') {
@@ -364,7 +345,38 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     );
   }
 
-  return imageWithPlaceholder;
+  // Surface variant - also use Box wrapper for consistency
+  return (
+    <Box
+      className={className}
+      style={{
+        ...style, // Include the width/height styles from extractProps
+        ...wrapperStyleFinal,
+      }}
+      {...wrapperProps} // Apply other props to wrapper
+    >
+      {skeletonElement}
+      {placeholderElement}
+      <img
+        data-radius={radius}
+        loading={loading}
+        style={imgStyle}
+        className={classNames('rt-reset', 'rt-Image', className)}
+        alt={alt}
+        src={src}
+        onLoad={handleLoad}
+        onError={handleError}
+        ref={(node) => {
+          imgRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+      />
+    </Box>
+  );
 });
 
 Image.displayName = 'Image';

package/src/styles/tokens/constants.css

@@ -15,7 +15,7 @@
   /* Panel background opacity constants */
   --panel-opacity-light: 0.75;
   --panel-opacity-heavy: 0.75;
-  --surface-opacity-light: 0.25;
+  --surface-opacity-light: 0.5;
   --surface-opacity-heavy: 0.75;
   --surface-opacity-dark: 0.25;
   

package/styles.css

@@ -3329,7 +3329,7 @@
   --backdrop-blur-dialog: 32px;
   --panel-opacity-light: 0.75;
   --panel-opacity-heavy: 0.75;
-  --surface-opacity-light: 0.25;
+  --surface-opacity-light: 0.5;
   --surface-opacity-heavy: 0.75;
   --surface-opacity-dark: 0.25;
   --dialog-opacity-light: 0.75;
@@ -12730,11 +12730,9 @@
 }
 .rt-variant-blur {
   position: relative;
+}
+.rt-variant-blur--as-child {
   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;
@@ -12758,18 +12756,6 @@
   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/tokens.css

@@ -3313,7 +3313,7 @@
   --backdrop-blur-dialog: 32px;
   --panel-opacity-light: 0.75;
   --panel-opacity-heavy: 0.75;
-  --surface-opacity-light: 0.25;
+  --surface-opacity-light: 0.5;
   --surface-opacity-heavy: 0.75;
   --surface-opacity-dark: 0.25;
   --dialog-opacity-light: 0.75;