@kushagradhawan/kookie-ui 0.1.8 → 0.1.10

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.10",
   "description": "A modern React component library with beautiful design tokens and flexible theming",
   "keywords": [
     "react",

package/src/components/button.css

@@ -31,8 +31,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -53,8 +53,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -75,8 +75,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -97,8 +97,8 @@
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
       }
 
       &:where(:not(.rt-variant-ghost)) {

package/src/components/icon-button.css

@@ -16,29 +16,29 @@
     &:where(.rt-r-size-1) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 13px;
-        height: 13px;
+        width: 16px;
+        height: 16px;
       }
     }
     &:where(.rt-r-size-2) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
       }
     }
     &:where(.rt-r-size-3) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 17px;
-        height: 17px;
+        width: 20px;
+        height: 20px;
       }
     }
     &:where(.rt-r-size-4) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: 19px;
-        height: 19px;
+        width: 22px;
+        height: 22px;
       }
     }
   }

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';