@kushagradhawan/kookie-ui 0.1.8 → 0.1.9

package/components.css

@@ -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"}

package/dist/esm/components/image.js

@@ -1,2 +1,2 @@
-"use client";import*as o from"react";import f from"classnames";import{imagePropDefs as n}from"./image.props.js";import{extractProps as P}from"../helpers/extract-props.js";import{marginPropDefs as l}from"../props/margin.props.js";import{widthPropDefs as d}from"../props/width.props.js";import{heightPropDefs as h}from"../props/height.props.js";const r=o.forwardRef((e,p)=>{const{className:t,radius:s,style:m,loading:a="lazy",alt:i,...g}=P(e,n,l,d,h);return o.createElement("img",{"data-radius":s,loading:a,style:m,className:f("rt-Image",t),alt:i,...g,ref:p})});r.displayName="Image";export{r as Image};
+"use client";import*as e from"react";import r from"classnames";import{imagePropDefs as h}from"./image.props.js";import{extractProps as I}from"../helpers/extract-props.js";import{marginPropDefs as P}from"../props/margin.props.js";import{widthPropDefs as b}from"../props/width.props.js";import{heightPropDefs as N}from"../props/height.props.js";const u=e.forwardRef((d,n)=>{const{variant:m="surface",fit:v="cover",children:c}=d,{asChild:y,className:o,radius:s,style:a,loading:i="lazy",alt:g,src:p,children:x,...l}=I(d,h,P,b,N),f=e.createElement("img",{"data-radius":s,loading:i,style:a,className:r("rt-reset","rt-Image",m==="blur"&&"rt-Image--blur",o),alt:g,src:p,...l,ref:n});if(y&&c){const t=e.Children.only(c);return m==="blur"?e.cloneElement(t,{className:r(t.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",...t.props?.style},children:e.createElement(e.Fragment,null,e.createElement("img",{"data-radius":s,loading:i,style:{...a,position:"absolute",top:"8px",left:"0"},className:r("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",o),alt:"",src:p,...l}),e.createElement("img",{"data-radius":s,loading:i,style:{...a,position:"relative",zIndex:1},className:r("rt-reset","rt-Image","rt-Image--blur",o),alt:g,src:p,...l,ref:n}))}):e.cloneElement(t,{className:r(t.props?.className,"rt-Image"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...t.props?.style},children:f})}return m==="blur"?e.createElement("div",{className:"rt-variant-blur",style:{position:"relative",display:"inline-block"}},e.createElement("img",{"data-radius":s,loading:i,style:{...a,position:"absolute",top:"8px",left:"0"},className:r("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",o),alt:"",src:p,...l}),e.createElement("img",{"data-radius":s,loading:i,style:{...a,position:"relative",zIndex:1},className:r("rt-reset","rt-Image","rt-Image--blur",o),alt:g,src:p,...l,ref:n})):f});u.displayName="Image";export{u 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';\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": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,kBAAAC,MAAsB,2BA0B/B,MAAMC,EAAQP,EAAM,WAAqC,CAACQ,EAAOC,IAAiB,CAChF,KAAM,CACJ,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EACA,GAAGC,CACL,EAAIZ,EAAaK,EAAON,EAAeE,EAAgBC,EAAeC,CAAc,EAEpF,OACEN,EAAA,cAAC,OACC,cAAaW,EACb,QAASE,EACT,MAAOD,EACP,UAAWX,EAAW,WAAYS,CAAS,EAC3C,IAAKI,EACJ,GAAGC,EACJ,IAAKN,EACP,CAEJ,CAAC,EAEDF,EAAM,YAAc",
-  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "Image", "props", "forwardedRef", "className", "radius", "style", "loading", "alt", "imgProps"]
+  "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": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,kBAAAC,MAAsB,2BA0B/B,MAAMC,EAAQP,EAAM,WAAqC,CAACQ,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,EAAIlB,EAAaK,EAAON,EAAeE,EAAgBC,EAAeC,CAAc,EAG9EgB,EACJtB,EAAA,cAAC,OACC,cAAae,EACb,QAASE,EACT,MAAOD,EACP,UAAWf,EACT,WACA,WACAS,IAAY,QAAU,iBACtBI,CACF,EACA,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,EAIF,GAAII,GAAWD,EAAU,CACvB,MAAMW,EAAQvB,EAAM,SAAS,KAAKY,CAAQ,EAE1C,OAAIF,IAAY,OAEPV,EAAM,aAAauB,EAAO,CAC/B,UAAWtB,EAAWsB,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,cAAae,EACb,QAASE,EACT,MAAO,CACL,GAAGD,EACH,SAAU,WACV,IAAK,MACL,KAAM,GACR,EACA,UAAWf,EACT,WACA,WACA,iBACA,oBACAa,CACF,EACA,IAAI,GACJ,IAAKK,EACJ,GAAGE,EACN,EAEArB,EAAA,cAAC,OACC,cAAae,EACb,QAASE,EACT,MAAO,CAAE,GAAGD,EAAO,SAAU,WAAY,OAAQ,CAAE,EACnD,UAAWf,EAAW,WAAY,WAAY,iBAAkBa,CAAS,EACzE,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,CACF,CAEJ,CAAC,EAGMT,EAAM,aAAauB,EAAO,CAC/B,UAAWtB,EAAWsB,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,SAAUD,CACZ,CAAC,CAEL,CAGA,OAAIZ,IAAY,OAEZV,EAAA,cAAC,OAAI,UAAU,kBAAkB,MAAO,CAAE,SAAU,WAAY,QAAS,cAAe,GAEtFA,EAAA,cAAC,OACC,cAAae,EACb,QAASE,EACT,MAAO,CACL,GAAGD,EACH,SAAU,WACV,IAAK,MACL,KAAM,GACR,EACA,UAAWf,EACT,WACA,WACA,iBACA,oBACAa,CACF,EACA,IAAI,GACJ,IAAKK,EACJ,GAAGE,EACN,EAEArB,EAAA,cAAC,OACC,cAAae,EACb,QAASE,EACT,MAAO,CAAE,GAAGD,EAAO,SAAU,WAAY,OAAQ,CAAE,EACnD,UAAWf,EAAW,WAAY,WAAY,iBAAkBa,CAAS,EACzE,IAAKI,EACL,IAAKC,EACJ,GAAGE,EACJ,IAAKZ,EACP,CACF,EAIGa,CACT,CAAC,EAEDf,EAAM,YAAc",
+  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "Image", "props", "forwardedRef", "variant", "fit", "children", "asChild", "className", "radius", "style", "loading", "alt", "src", "_children", "imgProps", "imgElement", "child"]
 }

package/dist/esm/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/esm/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/esm/components/image.props.js

@@ -1,2 +1,2 @@
-import{radiusPropDef as e}from"../props/radius.prop.js";import{shadowPropDefs as o}from"../props/shadow.props.js";const r=["cover","contain","fill","scale-down","none"],t={fit:{type:"enum",className:"rt-r-fit",values:r,default:"cover",responsive:!0},...e,...o};export{t as imagePropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop.js";import{radiusPropDef as r}from"../props/radius.prop.js";import{shadowPropDefs as o}from"../props/shadow.props.js";const t=["cover","contain","fill","scale-down","none"],s=["surface","blur"],a={...e,fit:{type:"enum",className:"rt-r-fit",values:t,default:"cover",responsive:!0},variant:{type:"enum",className:"rt-variant",values:s,default:"surface"},...r,...o};export{a as imagePropDefs};
 //# sourceMappingURL=image.props.js.map

package/dist/esm/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": "AAAA,OAAS,iBAAAA,MAAqB,0BAC9B,OAAS,kBAAAC,MAAsB,2BAI/B,MAAMC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EAEnEC,EAAgB,CAYpB,IAAK,CACH,KAAM,OACN,UAAW,WACX,OAAQD,EACR,QAAS,QACT,WAAY,EACd,EACA,GAAGF,EACH,GAAGC,CACL",
-  "names": ["radiusPropDef", "shadowPropDefs", "objectFitValues", "imagePropDefs"]
+  "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": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,kBAAAC,MAAsB,2BAI/B,MAAMC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EACnEC,EAAW,CAAC,UAAW,MAAM,EAE7BC,EAAgB,CACpB,GAAGL,EAYH,IAAK,CACH,KAAM,OACN,UAAW,WACX,OAAQG,EACR,QAAS,QACT,WAAY,EACd,EAQA,QAAS,CACP,KAAM,OACN,UAAW,aACX,OAAQC,EACR,QAAS,SACX,EACA,GAAGH,EACH,GAAGC,CACL",
+  "names": ["asChildPropDef", "radiusPropDef", "shadowPropDefs", "objectFitValues", "variants", "imagePropDefs"]
 }

package/package.json

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

package/src/components/image.css

@@ -1,8 +1,96 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target `button` and `a` tags. */
+/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
+
 .rt-Image {
   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);
+}
+
+/* Interactive states - follows Card pattern */
+.rt-Image:where(:any-link, button, label) {
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      transform: scale(1.02);
+      box-shadow:
+        var(--box-shadow, var(--shadow-2)),
+        0 0 0 1px var(--gray-a4);
+    }
+  }
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+
+  &:where(:active) {
+    transform: scale(0.98);
+  }
+}
+
+/* Blur variant wrapper */
+.rt-variant-blur {
+  position: relative;
+  display: inline-block;
+}
+
+/* Interactive states for blur variant - follows Card pattern */
+.rt-variant-blur:where(:any-link, button, label) {
+  cursor: pointer;
+  transition: var(--transition-button);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      transform: scale(1.02);
+    }
+  }
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+
+  &:where(:active) {
+    transform: scale(0.98);
+  }
+}
+
+/* Disable individual image interactions when inside blur variant */
+/* stylelint-disable-next-line selector-max-specificity */
+.rt-variant-blur:where(:any-link, button, label) .rt-Image {
+  cursor: inherit;
+  transform: none !important;
+  outline: none !important;
+  box-shadow: var(--box-shadow) !important;
+}
+
+/* Blur background image */
+.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;
+}
+
+/* Image inside blur variant gets positioned */
+.rt-Image--blur {
+  position: relative;
+  z-index: 1;
 }
 
 /* Object fit variants */

package/src/components/image.props.ts

@@ -1,11 +1,14 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 import { shadowPropDefs } from '../props/shadow.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
+const variants = ['surface', 'blur'] as const;
 
 const imagePropDefs = {
+  ...asChildPropDef,
   /**
    * Sets the CSS **object-fit** property.
    * Controls how the image should be resized to fit its container.
@@ -24,10 +27,24 @@ const imagePropDefs = {
     default: 'cover',
     responsive: true,
   },
+  /**
+   * Sets the visual variant of the image.
+   *
+   * @example
+   * variant="surface"
+   * variant="blur"
+   */
+  variant: {
+    type: 'enum',
+    className: 'rt-variant',
+    values: variants,
+    default: 'surface',
+  },
   ...radiusPropDef,
   ...shadowPropDefs,
 } satisfies {
   fit: PropDef<(typeof objectFitValues)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
 };
 
 export { imagePropDefs };

package/src/components/image.tsx

@@ -28,32 +28,161 @@ interface ImageProps
     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;
 }
 
 const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
+  const { variant = 'surface', fit = 'cover', children } = props;
   const {
+    asChild,
     className,
     radius,
     style,
     loading = 'lazy',
     alt,
+    src,
+    children: _children, // Extract children to exclude from imgProps
     ...imgProps
   } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);
 
-  return (
+  // Create the standard img element
+  const imgElement = (
     <img
       data-radius={radius}
       loading={loading}
       style={style}
-      className={classNames('rt-Image', className)}
+      className={classNames(
+        'rt-reset',
+        'rt-Image',
+        variant === 'blur' && 'rt-Image--blur',
+        className,
+      )}
       alt={alt}
+      src={src}
       {...imgProps}
       ref={forwardedRef}
     />
   );
+
+  // Handle asChild - inject img into the child element
+  if (asChild && children) {
+    const child = React.Children.only(children) as React.ReactElement<any>;
+
+    if (variant === 'blur') {
+      // For blur variant with asChild
+      return React.cloneElement(child, {
+        className: classNames(child.props?.className, 'rt-variant-blur'),
+        style: {
+          position: 'relative',
+          display: 'inline-block',
+          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
+          ...child.props?.style,
+        },
+        children: (
+          <>
+            {/* Background blurred image */}
+            <img
+              data-radius={radius}
+              loading={loading}
+              style={{
+                ...style,
+                position: 'absolute',
+                top: '8px',
+                left: '0',
+              }}
+              className={classNames(
+                'rt-reset',
+                'rt-Image',
+                'rt-Image--blur',
+                'rt-Image--blur-bg',
+                className,
+              )}
+              alt=""
+              src={src}
+              {...imgProps}
+            />
+            {/* Foreground image */}
+            <img
+              data-radius={radius}
+              loading={loading}
+              style={{ ...style, position: 'relative', zIndex: 1 }}
+              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
+              alt={alt}
+              src={src}
+              {...imgProps}
+              ref={forwardedRef}
+            />
+          </>
+        ),
+      });
+    } else {
+      // For surface variant with asChild
+      return React.cloneElement(child, {
+        className: classNames(child.props?.className, 'rt-Image'),
+        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
+          ...child.props?.style, // Allow user overrides
+        },
+        children: imgElement,
+      });
+    }
+  }
+
+  // Regular rendering without asChild
+  if (variant === 'blur') {
+    return (
+      <div className="rt-variant-blur" style={{ position: 'relative', display: 'inline-block' }}>
+        {/* Background blurred image */}
+        <img
+          data-radius={radius}
+          loading={loading}
+          style={{
+            ...style,
+            position: 'absolute',
+            top: '8px',
+            left: '0',
+          }}
+          className={classNames(
+            'rt-reset',
+            'rt-Image',
+            'rt-Image--blur',
+            'rt-Image--blur-bg',
+            className,
+          )}
+          alt=""
+          src={src}
+          {...imgProps}
+        />
+        {/* Foreground image */}
+        <img
+          data-radius={radius}
+          loading={loading}
+          style={{ ...style, position: 'relative', zIndex: 1 }}
+          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
+          alt={alt}
+          src={src}
+          {...imgProps}
+          ref={forwardedRef}
+        />
+      </div>
+    );
+  }
+
+  return imgElement;
 });
 
 Image.displayName = 'Image';

package/styles.css

@@ -10702,7 +10702,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;