@kushagradhawan/kookie-ui 0.1.116 → 0.1.117
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/image.d.ts +5 -0
- package/dist/cjs/components/image.d.ts.map +1 -1
- package/dist/cjs/components/image.js +1 -1
- package/dist/cjs/components/image.js.map +3 -3
- package/dist/esm/components/image.d.ts +5 -0
- package/dist/esm/components/image.d.ts.map +1 -1
- package/dist/esm/components/image.js +1 -1
- package/dist/esm/components/image.js.map +3 -3
- package/package.json +1 -1
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/image.tsx +12 -4
|
@@ -41,6 +41,11 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
|
|
|
41
41
|
* Image source URL
|
|
42
42
|
*/
|
|
43
43
|
src: string;
|
|
44
|
+
/**
|
|
45
|
+
* When true, the image will fill its parent container (for Next.js Image compatibility).
|
|
46
|
+
* Parent must have `position: relative` and defined dimensions.
|
|
47
|
+
*/
|
|
48
|
+
fill?: boolean;
|
|
44
49
|
};
|
|
45
50
|
interface CommonImageProps extends MarginProps, WidthProps, HeightProps, LayoutProps, ImageOwnProps {
|
|
46
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,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;AAI5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;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,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,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;AAI5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;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,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,UAAU,gBACR,SAAQ,WAAW,EACjB,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;CAAG;AAEpB,KAAK,aAAa,GAAG;IAAE,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC;AACxH,KAAK,mBAAmB,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAClF,KAAK,UAAU,GAAG,gBAAgB,GAAG,CAAC,aAAa,GAAG,mBAAmB,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,KAAK;SAlCiB,KAAK;;QACA,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;yEA2OvD,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Z=Object.create;var l=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var re=(e,o)=>{for(var i in o)l(e,i,{get:o[i],enumerable:!0})},M=(e,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of ee(o))!te.call(e,s)&&s!==i&&l(e,s,{get:()=>o[s],enumerable:!(a=$(o,s))||a.enumerable});return e};var k=(e,o,i)=>(i=e!=null?Z(oe(e)):{},M(o||!e||!e.__esModule?l(i,"default",{value:e,enumerable:!0}):i,e)),ie=e=>M(l({},"__esModule",{value:!0}),e);var se={};re(se,{Image:()=>I});module.exports=ie(se);var t=k(require("react")),P=k(require("classnames")),R=require("./image.props.js"),j=require("../helpers/extract-props.js"),W=require("../props/margin.props.js"),O=require("../props/width.props.js"),z=require("../props/height.props.js"),A=require("../props/layout.props.js"),F=require("./skeleton.js");const I=t.forwardRef((e,o)=>{const i=typeof e.width=="number"?e.width:void 0,a=typeof e.height=="number"?e.height:void 0,s="fill"in e&&e.fill===!0,{as:v="img",asChild:ae,className:E,style:m,loading:G="lazy",alt:
|
|
1
|
+
"use strict";var Z=Object.create;var l=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var re=(e,o)=>{for(var i in o)l(e,i,{get:o[i],enumerable:!0})},M=(e,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of ee(o))!te.call(e,s)&&s!==i&&l(e,s,{get:()=>o[s],enumerable:!(a=$(o,s))||a.enumerable});return e};var k=(e,o,i)=>(i=e!=null?Z(oe(e)):{},M(o||!e||!e.__esModule?l(i,"default",{value:e,enumerable:!0}):i,e)),ie=e=>M(l({},"__esModule",{value:!0}),e);var se={};re(se,{Image:()=>I});module.exports=ie(se);var t=k(require("react")),P=k(require("classnames")),R=require("./image.props.js"),j=require("../helpers/extract-props.js"),W=require("../props/margin.props.js"),O=require("../props/width.props.js"),z=require("../props/height.props.js"),A=require("../props/layout.props.js"),F=require("./skeleton.js");const I=t.forwardRef((e,o)=>{const i=typeof e.width=="number"?e.width:void 0,a=typeof e.height=="number"?e.height:void 0,s="fill"in e&&e.fill===!0,{as:v="img",asChild:ae,fill:ne,className:E,style:m,loading:G="lazy",alt:_,src:p,placeholder:d,showSkeleton:q=!1,fadeIn:n=!0,loadingAriaLabel:B="Loading image...",errorAriaLabel:J="Failed to load image",radius:K,caption:L,onLoad:b,onError:C,...Q}=(0,j.extractProps)(e,R.imagePropDefs,W.marginPropDefs,O.widthPropDefs,z.heightPropDefs,A.layoutPropDefs),U=v!=="img"?{width:i,height:a,...s?{fill:!0}:{}}:{},[c,g]=t.useState("loading"),[V,f]=t.useState(!!d),S=t.useRef(null),X=t.useCallback(r=>{g("loaded"),f(!1),b?.(r)},[b]),Y=t.useCallback(r=>{g("error"),f(!1),C?.(r)},[C]);if(t.useEffect(()=>{const r=S.current;r&&r.complete&&r.naturalWidth>0&&(g("loaded"),f(!1))},[p]),!p)return console.warn("Image component: src prop is required"),null;const h=c==="loading",y=c==="error",w=c==="loaded",u=s?{display:"block",opacity:n?w?1:0:1,transition:n?"opacity 0.3s ease-out":"none"}:{width:"100%",height:"100%",display:"block",opacity:n?w?1:0:1,transition:n?"opacity 0.3s ease-out":"none"},x=t.createElement(v,{ref:r=>{S.current=r,typeof o=="function"?o(r):o&&(o.current=r)},loading:G,style:s?u:{...u,position:"relative",zIndex:1},className:(0,P.default)("rt-reset","rt-Image"),alt:_,src:p,"data-radius":K,onLoad:X,onError:Y,"aria-busy":h,"aria-invalid":y,"aria-describedby":y?"image-error":void 0,...U,...Q}),H=h&&t.createElement("div",{className:"rt-sr-only","aria-live":"polite",role:"status"},B),D=y&&t.createElement("div",{id:"image-error",className:"rt-sr-only","aria-live":"polite",role:"alert"},J),N=q&&h&&t.createElement(F.Skeleton,{width:"100%",height:"100%",style:{position:"absolute",inset:0}}),T=d&&V&&t.createElement("img",{style:{...u,position:"absolute",inset:0,filter:"blur(4px)",opacity:.7,zIndex:0},className:(0,P.default)("rt-reset","rt-Image","rt-Image--placeholder"),alt:"",src:d});if(!L){const r=s?{position:"absolute",inset:0,...m}:{position:"relative",...m};return t.createElement("div",{className:E,style:r},H,D,N,T,x)}return t.createElement("div",{className:E,style:{display:"flex",flexDirection:"column",...m}},t.createElement("div",{style:{position:"relative",flex:"1 1 0%",minHeight:0}},H,D,N,T,x),t.createElement("div",{className:"rt-Image-caption",style:{flex:"0 0 auto"}},L))});I.displayName="Image";
|
|
2
2
|
//# sourceMappingURL=image.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/image.tsx"],
|
|
4
|
-
"sourcesContent": ["import * 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';\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'>;\n\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n /**\n * Native loading behavior for the image\n * @default 'lazy'\n */\n loading?: 'eager' | 'lazy';\n /**\n * Placeholder image URL to show while the main image is loading (LQIP pattern)\n */\n placeholder?: string;\n /**\n * Shows a skeleton placeholder while loading\n */\n showSkeleton?: boolean;\n /**\n * Whether the image should fade in when loaded\n * @default true\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 * Alternative text for the image (required for accessibility)\n */\n alt: string;\n /**\n * Image source URL\n */\n src: string;\n};\n\ninterface CommonImageProps\n extends MarginProps,\n WidthProps,\n HeightProps,\n LayoutProps,\n ImageOwnProps {}\n\ntype ImageImgProps = { as?: 'img' } & ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>;\ntype ImageComponentProps = { as: React.ComponentType<any> } & Record<string, any>;\ntype ImageProps = CommonImageProps & (ImageImgProps | ImageComponentProps);\n\n/**\n * Image component for displaying images with enhanced loading states and accessibility.\n *\n * Supports polymorphic rendering via the `as` prop for Next.js Image compatibility.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Team photo\" />\n *\n * // With Next.js Image\n * import NextImage from 'next/image';\n * <Image as={NextImage} src=\"/photo.jpg\" alt=\"...\" width={400} height={300} />\n *\n * // With placeholder and skeleton\n * <Image\n * src=\"/high-res.jpg\"\n * placeholder=\"/low-res.jpg\"\n * showSkeleton\n * alt=\"Product showcase\"\n * />\n *\n * // With caption\n * <Image\n * src=\"/chart.png\"\n * alt=\"Sales data visualization\"\n * caption=\"Q3 2024 Sales Performance\"\n * />\n * ```\n */\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n // Extract native width/height before extractProps consumes them (for Next.js Image compatibility)\n const nativeWidth = typeof props.width === 'number' ? props.width : undefined;\n const nativeHeight = typeof props.height === 'number' ? props.height : undefined;\n // Check if fill prop is used (for Next.js Image compatibility)\n const hasFill = 'fill' in props && props.fill === true;\n\n const {\n as: Component = 'img',\n asChild: _asChild, // Extract to prevent passing to DOM element\n className,\n style,\n loading = 'lazy',\n alt,\n src,\n placeholder,\n showSkeleton = false,\n fadeIn = true,\n loadingAriaLabel = 'Loading image...',\n errorAriaLabel = 'Failed to load image',\n radius,\n caption,\n onLoad: userOnLoad,\n onError: userOnError,\n ...restProps\n } = extractProps(\n props,\n imagePropDefs,\n marginPropDefs,\n widthPropDefs,\n heightPropDefs,\n layoutPropDefs,\n );\n\n // When using a custom component (like Next.js Image), pass native width/height\n const isCustomComponent = Component !== 'img';\n const componentDimensionProps = isCustomComponent
|
|
5
|
-
"mappings": "kkBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,WAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA8B,4BAC9BC,EAA6B,uCAC7BC,EAA+B,oCAC/BC,EAA8B,mCAC9BC,EAA+B,oCAC/BC,EAA+B,oCAC/BC,EAAyB,
|
|
6
|
-
"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", "props", "forwardedRef", "nativeWidth", "nativeHeight", "hasFill", "Component", "_asChild", "className", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "loadingAriaLabel", "errorAriaLabel", "radius", "caption", "userOnLoad", "userOnError", "restProps", "componentDimensionProps", "loadingState", "setLoadingState", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "isLoading", "isError", "isLoaded", "imgStyle", "imageElement", "node", "classNames", "loadingAnnouncement", "errorAnnouncement", "skeletonElement", "placeholderElement", "wrapperStyle"]
|
|
4
|
+
"sourcesContent": ["import * 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';\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'>;\n\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n /**\n * Native loading behavior for the image\n * @default 'lazy'\n */\n loading?: 'eager' | 'lazy';\n /**\n * Placeholder image URL to show while the main image is loading (LQIP pattern)\n */\n placeholder?: string;\n /**\n * Shows a skeleton placeholder while loading\n */\n showSkeleton?: boolean;\n /**\n * Whether the image should fade in when loaded\n * @default true\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 * Alternative text for the image (required for accessibility)\n */\n alt: string;\n /**\n * Image source URL\n */\n src: string;\n /**\n * When true, the image will fill its parent container (for Next.js Image compatibility).\n * Parent must have `position: relative` and defined dimensions.\n */\n fill?: boolean;\n};\n\ninterface CommonImageProps\n extends MarginProps,\n WidthProps,\n HeightProps,\n LayoutProps,\n ImageOwnProps {}\n\ntype ImageImgProps = { as?: 'img' } & ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>;\ntype ImageComponentProps = { as: React.ComponentType<any> } & Record<string, any>;\ntype ImageProps = CommonImageProps & (ImageImgProps | ImageComponentProps);\n\n/**\n * Image component for displaying images with enhanced loading states and accessibility.\n *\n * Supports polymorphic rendering via the `as` prop for Next.js Image compatibility.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Team photo\" />\n *\n * // With Next.js Image\n * import NextImage from 'next/image';\n * <Image as={NextImage} src=\"/photo.jpg\" alt=\"...\" width={400} height={300} />\n *\n * // With placeholder and skeleton\n * <Image\n * src=\"/high-res.jpg\"\n * placeholder=\"/low-res.jpg\"\n * showSkeleton\n * alt=\"Product showcase\"\n * />\n *\n * // With caption\n * <Image\n * src=\"/chart.png\"\n * alt=\"Sales data visualization\"\n * caption=\"Q3 2024 Sales Performance\"\n * />\n * ```\n */\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n // Extract native width/height before extractProps consumes them (for Next.js Image compatibility)\n const nativeWidth = typeof props.width === 'number' ? props.width : undefined;\n const nativeHeight = typeof props.height === 'number' ? props.height : undefined;\n // Check if fill prop is used (for Next.js Image compatibility)\n const hasFill = 'fill' in props && props.fill === true;\n\n const {\n as: Component = 'img',\n asChild: _asChild, // Extract to prevent passing to DOM element\n fill: _fill, // Extract to prevent passing to native img element (only used for custom components)\n className,\n style,\n loading = 'lazy',\n alt,\n src,\n placeholder,\n showSkeleton = false,\n fadeIn = true,\n loadingAriaLabel = 'Loading image...',\n errorAriaLabel = 'Failed to load image',\n radius,\n caption,\n onLoad: userOnLoad,\n onError: userOnError,\n ...restProps\n } = extractProps(\n props,\n imagePropDefs,\n marginPropDefs,\n widthPropDefs,\n heightPropDefs,\n layoutPropDefs,\n );\n\n // When using a custom component (like Next.js Image), pass native width/height and fill\n const isCustomComponent = Component !== 'img';\n const componentDimensionProps = isCustomComponent\n ? { width: nativeWidth, height: nativeHeight, ...(hasFill ? { fill: true } : {}) }\n : {};\n\n const [loadingState, setLoadingState] = React.useState<'loading' | 'loaded' | 'error'>('loading');\n const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n const imgRef = React.useRef<HTMLImageElement>(null);\n\n const handleLoad = React.useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoadingState('loaded');\n setShowPlaceholder(false);\n userOnLoad?.(event);\n },\n [userOnLoad],\n );\n\n const handleError = React.useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoadingState('error');\n setShowPlaceholder(false);\n userOnError?.(event);\n },\n [userOnError],\n );\n\n // Check if image is already cached\n React.useEffect(() => {\n const img = imgRef.current;\n if (img && img.complete && img.naturalWidth > 0) {\n setLoadingState('loaded');\n setShowPlaceholder(false);\n }\n }, [src]);\n\n if (!src) {\n console.warn('Image component: src prop is required');\n return null;\n }\n\n const isLoading = loadingState === 'loading';\n const isError = loadingState === 'error';\n const isLoaded = loadingState === 'loaded';\n\n // When using fill (Next.js Image), don't add dimension/position styles as Next.js handles them\n const imgStyle: React.CSSProperties = hasFill\n ? {\n display: 'block',\n opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n }\n : {\n width: '100%',\n height: '100%',\n display: 'block',\n opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n };\n\n const mergeRefs = (node: HTMLImageElement | null) => {\n (imgRef as React.RefObject<HTMLImageElement | null>).current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n forwardedRef.current = node;\n }\n };\n\n const imageElement = (\n <Component\n ref={mergeRefs}\n loading={loading}\n style={hasFill ? imgStyle : { ...imgStyle, position: 'relative', zIndex: 1 }}\n className={classNames('rt-reset', 'rt-Image')}\n alt={alt}\n src={src}\n data-radius={radius}\n onLoad={handleLoad}\n onError={handleError}\n aria-busy={isLoading}\n aria-invalid={isError}\n aria-describedby={isError ? 'image-error' : undefined}\n {...componentDimensionProps}\n {...restProps}\n />\n );\n\n const loadingAnnouncement = isLoading && (\n <div className=\"rt-sr-only\" aria-live=\"polite\" role=\"status\">\n {loadingAriaLabel}\n </div>\n );\n\n const errorAnnouncement = isError && (\n <div id=\"image-error\" className=\"rt-sr-only\" aria-live=\"polite\" role=\"alert\">\n {errorAriaLabel}\n </div>\n );\n\n const skeletonElement = showSkeleton && isLoading && (\n <Skeleton width=\"100%\" height=\"100%\" style={{ position: 'absolute', inset: 0 }} />\n );\n\n const placeholderElement = placeholder && showPlaceholder && (\n <img\n style={{\n ...imgStyle,\n position: 'absolute',\n inset: 0,\n filter: 'blur(4px)',\n opacity: 0.7,\n zIndex: 0,\n }}\n className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder')}\n alt=\"\"\n src={placeholder}\n />\n );\n\n // Simple flat structure when no caption\n if (!caption) {\n // When using fill, wrapper uses absolute positioning to fill the nearest positioned ancestor\n const wrapperStyle: React.CSSProperties = hasFill\n ? { position: 'absolute', inset: 0, ...style }\n : { position: 'relative', ...style };\n return (\n <div className={className} style={wrapperStyle}>\n {loadingAnnouncement}\n {errorAnnouncement}\n {skeletonElement}\n {placeholderElement}\n {imageElement}\n </div>\n );\n }\n\n // Flexbox structure when caption is present\n return (\n <div\n className={className}\n style={{\n display: 'flex',\n flexDirection: 'column',\n ...style,\n }}\n >\n <div\n style={{\n position: 'relative',\n flex: '1 1 0%',\n minHeight: 0,\n }}\n >\n {loadingAnnouncement}\n {errorAnnouncement}\n {skeletonElement}\n {placeholderElement}\n {imageElement}\n </div>\n\n <div className=\"rt-Image-caption\" style={{ flex: '0 0 auto' }}>\n {caption}\n </div>\n </div>\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "props", "forwardedRef", "nativeWidth", "nativeHeight", "hasFill", "Component", "_asChild", "_fill", "className", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "loadingAriaLabel", "errorAriaLabel", "radius", "caption", "userOnLoad", "userOnError", "restProps", "componentDimensionProps", "loadingState", "setLoadingState", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "isLoading", "isError", "isLoaded", "imgStyle", "imageElement", "node", "classNames", "loadingAnnouncement", "errorAnnouncement", "skeletonElement", "placeholderElement", "wrapperStyle"]
|
|
7
7
|
}
|
|
@@ -41,6 +41,11 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
|
|
|
41
41
|
* Image source URL
|
|
42
42
|
*/
|
|
43
43
|
src: string;
|
|
44
|
+
/**
|
|
45
|
+
* When true, the image will fill its parent container (for Next.js Image compatibility).
|
|
46
|
+
* Parent must have `position: relative` and defined dimensions.
|
|
47
|
+
*/
|
|
48
|
+
fill?: boolean;
|
|
44
49
|
};
|
|
45
50
|
interface CommonImageProps extends MarginProps, WidthProps, HeightProps, LayoutProps, ImageOwnProps {
|
|
46
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,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;AAI5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;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,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,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;AAI5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;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,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,UAAU,gBACR,SAAQ,WAAW,EACjB,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;CAAG;AAEpB,KAAK,aAAa,GAAG;IAAE,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC;AACxH,KAAK,mBAAmB,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAClF,KAAK,UAAU,GAAG,gBAAgB,GAAG,CAAC,aAAa,GAAG,mBAAmB,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,KAAK;SAlCiB,KAAK;;QACA,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;yEA2OvD,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import x from"classnames";import{imagePropDefs as
|
|
1
|
+
import*as e from"react";import x from"classnames";import{imagePropDefs as _}from"./image.props.js";import{extractProps as q}from"../helpers/extract-props.js";import{marginPropDefs as B}from"../props/margin.props.js";import{widthPropDefs as J}from"../props/width.props.js";import{heightPropDefs as K}from"../props/height.props.js";import{layoutPropDefs as Q}from"../props/layout.props.js";import{Skeleton as U}from"./skeleton.js";const H=e.forwardRef((t,r)=>{const D=typeof t.width=="number"?t.width:void 0,N=typeof t.height=="number"?t.height:void 0,i="fill"in t&&t.fill===!0,{as:h="img",asChild:V,fill:X,className:y,style:a,loading:T="lazy",alt:M,src:n,placeholder:l,showSkeleton:k=!1,fadeIn:s=!0,loadingAriaLabel:R="Loading image...",errorAriaLabel:j="Failed to load image",radius:W,caption:u,onLoad:P,onError:I,...O}=q(t,_,B,J,K,Q),z=h!=="img"?{width:D,height:N,...i?{fill:!0}:{}}:{},[m,p]=e.useState("loading"),[A,d]=e.useState(!!l),v=e.useRef(null),F=e.useCallback(o=>{p("loaded"),d(!1),P?.(o)},[P]),G=e.useCallback(o=>{p("error"),d(!1),I?.(o)},[I]);if(e.useEffect(()=>{const o=v.current;o&&o.complete&&o.naturalWidth>0&&(p("loaded"),d(!1))},[n]),!n)return console.warn("Image component: src prop is required"),null;const c=m==="loading",g=m==="error",E=m==="loaded",f=i?{display:"block",opacity:s?E?1:0:1,transition:s?"opacity 0.3s ease-out":"none"}:{width:"100%",height:"100%",display:"block",opacity:s?E?1:0:1,transition:s?"opacity 0.3s ease-out":"none"},L=e.createElement(h,{ref:o=>{v.current=o,typeof r=="function"?r(o):r&&(r.current=o)},loading:T,style:i?f:{...f,position:"relative",zIndex:1},className:x("rt-reset","rt-Image"),alt:M,src:n,"data-radius":W,onLoad:F,onError:G,"aria-busy":c,"aria-invalid":g,"aria-describedby":g?"image-error":void 0,...z,...O}),b=c&&e.createElement("div",{className:"rt-sr-only","aria-live":"polite",role:"status"},R),C=g&&e.createElement("div",{id:"image-error",className:"rt-sr-only","aria-live":"polite",role:"alert"},j),S=k&&c&&e.createElement(U,{width:"100%",height:"100%",style:{position:"absolute",inset:0}}),w=l&&A&&e.createElement("img",{style:{...f,position:"absolute",inset:0,filter:"blur(4px)",opacity:.7,zIndex:0},className:x("rt-reset","rt-Image","rt-Image--placeholder"),alt:"",src:l});if(!u){const o=i?{position:"absolute",inset:0,...a}:{position:"relative",...a};return e.createElement("div",{className:y,style:o},b,C,S,w,L)}return e.createElement("div",{className:y,style:{display:"flex",flexDirection:"column",...a}},e.createElement("div",{style:{position:"relative",flex:"1 1 0%",minHeight:0}},b,C,S,w,L),e.createElement("div",{className:"rt-Image-caption",style:{flex:"0 0 auto"}},u))});H.displayName="Image";export{H as Image};
|
|
2
2
|
//# sourceMappingURL=image.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/image.tsx"],
|
|
4
|
-
"sourcesContent": ["import * 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';\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'>;\n\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n /**\n * Native loading behavior for the image\n * @default 'lazy'\n */\n loading?: 'eager' | 'lazy';\n /**\n * Placeholder image URL to show while the main image is loading (LQIP pattern)\n */\n placeholder?: string;\n /**\n * Shows a skeleton placeholder while loading\n */\n showSkeleton?: boolean;\n /**\n * Whether the image should fade in when loaded\n * @default true\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 * Alternative text for the image (required for accessibility)\n */\n alt: string;\n /**\n * Image source URL\n */\n src: string;\n};\n\ninterface CommonImageProps\n extends MarginProps,\n WidthProps,\n HeightProps,\n LayoutProps,\n ImageOwnProps {}\n\ntype ImageImgProps = { as?: 'img' } & ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>;\ntype ImageComponentProps = { as: React.ComponentType<any> } & Record<string, any>;\ntype ImageProps = CommonImageProps & (ImageImgProps | ImageComponentProps);\n\n/**\n * Image component for displaying images with enhanced loading states and accessibility.\n *\n * Supports polymorphic rendering via the `as` prop for Next.js Image compatibility.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Team photo\" />\n *\n * // With Next.js Image\n * import NextImage from 'next/image';\n * <Image as={NextImage} src=\"/photo.jpg\" alt=\"...\" width={400} height={300} />\n *\n * // With placeholder and skeleton\n * <Image\n * src=\"/high-res.jpg\"\n * placeholder=\"/low-res.jpg\"\n * showSkeleton\n * alt=\"Product showcase\"\n * />\n *\n * // With caption\n * <Image\n * src=\"/chart.png\"\n * alt=\"Sales data visualization\"\n * caption=\"Q3 2024 Sales Performance\"\n * />\n * ```\n */\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n // Extract native width/height before extractProps consumes them (for Next.js Image compatibility)\n const nativeWidth = typeof props.width === 'number' ? props.width : undefined;\n const nativeHeight = typeof props.height === 'number' ? props.height : undefined;\n // Check if fill prop is used (for Next.js Image compatibility)\n const hasFill = 'fill' in props && props.fill === true;\n\n const {\n as: Component = 'img',\n asChild: _asChild, // Extract to prevent passing to DOM element\n className,\n style,\n loading = 'lazy',\n alt,\n src,\n placeholder,\n showSkeleton = false,\n fadeIn = true,\n loadingAriaLabel = 'Loading image...',\n errorAriaLabel = 'Failed to load image',\n radius,\n caption,\n onLoad: userOnLoad,\n onError: userOnError,\n ...restProps\n } = extractProps(\n props,\n imagePropDefs,\n marginPropDefs,\n widthPropDefs,\n heightPropDefs,\n layoutPropDefs,\n );\n\n // When using a custom component (like Next.js Image), pass native width/height\n const isCustomComponent = Component !== 'img';\n const componentDimensionProps = isCustomComponent
|
|
5
|
-
"mappings": "AAAA,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,2BAC/B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,YAAAC,MAAgB,
|
|
6
|
-
"names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "layoutPropDefs", "Skeleton", "Image", "props", "forwardedRef", "nativeWidth", "nativeHeight", "hasFill", "Component", "_asChild", "className", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "loadingAriaLabel", "errorAriaLabel", "radius", "caption", "userOnLoad", "userOnError", "restProps", "componentDimensionProps", "loadingState", "setLoadingState", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "isLoading", "isError", "isLoaded", "imgStyle", "imageElement", "node", "loadingAnnouncement", "errorAnnouncement", "skeletonElement", "placeholderElement", "wrapperStyle"]
|
|
4
|
+
"sourcesContent": ["import * 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';\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'>;\n\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n /**\n * Native loading behavior for the image\n * @default 'lazy'\n */\n loading?: 'eager' | 'lazy';\n /**\n * Placeholder image URL to show while the main image is loading (LQIP pattern)\n */\n placeholder?: string;\n /**\n * Shows a skeleton placeholder while loading\n */\n showSkeleton?: boolean;\n /**\n * Whether the image should fade in when loaded\n * @default true\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 * Alternative text for the image (required for accessibility)\n */\n alt: string;\n /**\n * Image source URL\n */\n src: string;\n /**\n * When true, the image will fill its parent container (for Next.js Image compatibility).\n * Parent must have `position: relative` and defined dimensions.\n */\n fill?: boolean;\n};\n\ninterface CommonImageProps\n extends MarginProps,\n WidthProps,\n HeightProps,\n LayoutProps,\n ImageOwnProps {}\n\ntype ImageImgProps = { as?: 'img' } & ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>;\ntype ImageComponentProps = { as: React.ComponentType<any> } & Record<string, any>;\ntype ImageProps = CommonImageProps & (ImageImgProps | ImageComponentProps);\n\n/**\n * Image component for displaying images with enhanced loading states and accessibility.\n *\n * Supports polymorphic rendering via the `as` prop for Next.js Image compatibility.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Team photo\" />\n *\n * // With Next.js Image\n * import NextImage from 'next/image';\n * <Image as={NextImage} src=\"/photo.jpg\" alt=\"...\" width={400} height={300} />\n *\n * // With placeholder and skeleton\n * <Image\n * src=\"/high-res.jpg\"\n * placeholder=\"/low-res.jpg\"\n * showSkeleton\n * alt=\"Product showcase\"\n * />\n *\n * // With caption\n * <Image\n * src=\"/chart.png\"\n * alt=\"Sales data visualization\"\n * caption=\"Q3 2024 Sales Performance\"\n * />\n * ```\n */\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n // Extract native width/height before extractProps consumes them (for Next.js Image compatibility)\n const nativeWidth = typeof props.width === 'number' ? props.width : undefined;\n const nativeHeight = typeof props.height === 'number' ? props.height : undefined;\n // Check if fill prop is used (for Next.js Image compatibility)\n const hasFill = 'fill' in props && props.fill === true;\n\n const {\n as: Component = 'img',\n asChild: _asChild, // Extract to prevent passing to DOM element\n fill: _fill, // Extract to prevent passing to native img element (only used for custom components)\n className,\n style,\n loading = 'lazy',\n alt,\n src,\n placeholder,\n showSkeleton = false,\n fadeIn = true,\n loadingAriaLabel = 'Loading image...',\n errorAriaLabel = 'Failed to load image',\n radius,\n caption,\n onLoad: userOnLoad,\n onError: userOnError,\n ...restProps\n } = extractProps(\n props,\n imagePropDefs,\n marginPropDefs,\n widthPropDefs,\n heightPropDefs,\n layoutPropDefs,\n );\n\n // When using a custom component (like Next.js Image), pass native width/height and fill\n const isCustomComponent = Component !== 'img';\n const componentDimensionProps = isCustomComponent\n ? { width: nativeWidth, height: nativeHeight, ...(hasFill ? { fill: true } : {}) }\n : {};\n\n const [loadingState, setLoadingState] = React.useState<'loading' | 'loaded' | 'error'>('loading');\n const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n const imgRef = React.useRef<HTMLImageElement>(null);\n\n const handleLoad = React.useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoadingState('loaded');\n setShowPlaceholder(false);\n userOnLoad?.(event);\n },\n [userOnLoad],\n );\n\n const handleError = React.useCallback(\n (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoadingState('error');\n setShowPlaceholder(false);\n userOnError?.(event);\n },\n [userOnError],\n );\n\n // Check if image is already cached\n React.useEffect(() => {\n const img = imgRef.current;\n if (img && img.complete && img.naturalWidth > 0) {\n setLoadingState('loaded');\n setShowPlaceholder(false);\n }\n }, [src]);\n\n if (!src) {\n console.warn('Image component: src prop is required');\n return null;\n }\n\n const isLoading = loadingState === 'loading';\n const isError = loadingState === 'error';\n const isLoaded = loadingState === 'loaded';\n\n // When using fill (Next.js Image), don't add dimension/position styles as Next.js handles them\n const imgStyle: React.CSSProperties = hasFill\n ? {\n display: 'block',\n opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n }\n : {\n width: '100%',\n height: '100%',\n display: 'block',\n opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n };\n\n const mergeRefs = (node: HTMLImageElement | null) => {\n (imgRef as React.RefObject<HTMLImageElement | null>).current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n forwardedRef.current = node;\n }\n };\n\n const imageElement = (\n <Component\n ref={mergeRefs}\n loading={loading}\n style={hasFill ? imgStyle : { ...imgStyle, position: 'relative', zIndex: 1 }}\n className={classNames('rt-reset', 'rt-Image')}\n alt={alt}\n src={src}\n data-radius={radius}\n onLoad={handleLoad}\n onError={handleError}\n aria-busy={isLoading}\n aria-invalid={isError}\n aria-describedby={isError ? 'image-error' : undefined}\n {...componentDimensionProps}\n {...restProps}\n />\n );\n\n const loadingAnnouncement = isLoading && (\n <div className=\"rt-sr-only\" aria-live=\"polite\" role=\"status\">\n {loadingAriaLabel}\n </div>\n );\n\n const errorAnnouncement = isError && (\n <div id=\"image-error\" className=\"rt-sr-only\" aria-live=\"polite\" role=\"alert\">\n {errorAriaLabel}\n </div>\n );\n\n const skeletonElement = showSkeleton && isLoading && (\n <Skeleton width=\"100%\" height=\"100%\" style={{ position: 'absolute', inset: 0 }} />\n );\n\n const placeholderElement = placeholder && showPlaceholder && (\n <img\n style={{\n ...imgStyle,\n position: 'absolute',\n inset: 0,\n filter: 'blur(4px)',\n opacity: 0.7,\n zIndex: 0,\n }}\n className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder')}\n alt=\"\"\n src={placeholder}\n />\n );\n\n // Simple flat structure when no caption\n if (!caption) {\n // When using fill, wrapper uses absolute positioning to fill the nearest positioned ancestor\n const wrapperStyle: React.CSSProperties = hasFill\n ? { position: 'absolute', inset: 0, ...style }\n : { position: 'relative', ...style };\n return (\n <div className={className} style={wrapperStyle}>\n {loadingAnnouncement}\n {errorAnnouncement}\n {skeletonElement}\n {placeholderElement}\n {imageElement}\n </div>\n );\n }\n\n // Flexbox structure when caption is present\n return (\n <div\n className={className}\n style={{\n display: 'flex',\n flexDirection: 'column',\n ...style,\n }}\n >\n <div\n style={{\n position: 'relative',\n flex: '1 1 0%',\n minHeight: 0,\n }}\n >\n {loadingAnnouncement}\n {errorAnnouncement}\n {skeletonElement}\n {placeholderElement}\n {imageElement}\n </div>\n\n <div className=\"rt-Image-caption\" style={{ flex: '0 0 auto' }}>\n {caption}\n </div>\n </div>\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "layoutPropDefs", "Skeleton", "Image", "props", "forwardedRef", "nativeWidth", "nativeHeight", "hasFill", "Component", "_asChild", "_fill", "className", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "loadingAriaLabel", "errorAriaLabel", "radius", "caption", "userOnLoad", "userOnError", "restProps", "componentDimensionProps", "loadingState", "setLoadingState", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "isLoading", "isError", "isLoaded", "imgStyle", "imageElement", "node", "loadingAnnouncement", "errorAnnouncement", "skeletonElement", "placeholderElement", "wrapperStyle"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2026-01-08T07:
|
|
282
|
+
"generatedAt": "2026-01-08T07:44:05.219Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2026-01-08T07:
|
|
533
|
+
"generatedAt": "2026-01-08T07:44:05.226Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2026-01-08T07:
|
|
316
|
+
"generatedAt": "2026-01-08T07:44:05.227Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2026-01-08T07:
|
|
6
|
+
"generatedAt": "2026-01-08T07:44:05.230Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2026-01-08T07:
|
|
290
|
+
"generatedAt": "2026-01-08T07:44:05.219Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2026-01-08T07:
|
|
825
|
+
"generatedAt": "2026-01-08T07:44:05.226Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2026-01-08T07:
|
|
1143
|
+
"generatedAt": "2026-01-08T07:44:05.227Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2026-01-08T07:
|
|
1686
|
+
"generatedAt": "2026-01-08T07:44:05.228Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2026-01-08T07:
|
|
2012
|
+
"generatedAt": "2026-01-08T07:44:05.229Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2026-01-08T07:
|
|
541
|
+
"generatedAt": "2026-01-08T07:44:05.228Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2026-01-08T07:
|
|
324
|
+
"generatedAt": "2026-01-08T07:44:05.229Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
package/src/components/image.tsx
CHANGED
|
@@ -53,6 +53,11 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
|
|
|
53
53
|
* Image source URL
|
|
54
54
|
*/
|
|
55
55
|
src: string;
|
|
56
|
+
/**
|
|
57
|
+
* When true, the image will fill its parent container (for Next.js Image compatibility).
|
|
58
|
+
* Parent must have `position: relative` and defined dimensions.
|
|
59
|
+
*/
|
|
60
|
+
fill?: boolean;
|
|
56
61
|
};
|
|
57
62
|
|
|
58
63
|
interface CommonImageProps
|
|
@@ -106,6 +111,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
|
|
|
106
111
|
const {
|
|
107
112
|
as: Component = 'img',
|
|
108
113
|
asChild: _asChild, // Extract to prevent passing to DOM element
|
|
114
|
+
fill: _fill, // Extract to prevent passing to native img element (only used for custom components)
|
|
109
115
|
className,
|
|
110
116
|
style,
|
|
111
117
|
loading = 'lazy',
|
|
@@ -130,9 +136,11 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
|
|
|
130
136
|
layoutPropDefs,
|
|
131
137
|
);
|
|
132
138
|
|
|
133
|
-
// When using a custom component (like Next.js Image), pass native width/height
|
|
139
|
+
// When using a custom component (like Next.js Image), pass native width/height and fill
|
|
134
140
|
const isCustomComponent = Component !== 'img';
|
|
135
|
-
const componentDimensionProps = isCustomComponent
|
|
141
|
+
const componentDimensionProps = isCustomComponent
|
|
142
|
+
? { width: nativeWidth, height: nativeHeight, ...(hasFill ? { fill: true } : {}) }
|
|
143
|
+
: {};
|
|
136
144
|
|
|
137
145
|
const [loadingState, setLoadingState] = React.useState<'loading' | 'loaded' | 'error'>('loading');
|
|
138
146
|
const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);
|
|
@@ -251,9 +259,9 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
|
|
|
251
259
|
|
|
252
260
|
// Simple flat structure when no caption
|
|
253
261
|
if (!caption) {
|
|
254
|
-
// When using fill, wrapper
|
|
262
|
+
// When using fill, wrapper uses absolute positioning to fill the nearest positioned ancestor
|
|
255
263
|
const wrapperStyle: React.CSSProperties = hasFill
|
|
256
|
-
? { position: '
|
|
264
|
+
? { position: 'absolute', inset: 0, ...style }
|
|
257
265
|
: { position: 'relative', ...style };
|
|
258
266
|
return (
|
|
259
267
|
<div className={className} style={wrapperStyle}>
|