@clicktap/ui 0.21.2 → 0.22.1

package/components/Image/Image.d.ts

@@ -1,3 +1,11 @@
 import { ImageProps } from 'next/image';
-export declare function Image({ src, className, style, ...rest }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export type ExtendedImageProps = ImageProps & {
+    /** Reduce opacity to 50% (e.g., while waiting for data) */
+    dimmed?: boolean;
+    /** Hide image completely — opacity 0 (e.g., before grid rearrange) */
+    hidden?: boolean;
+    /** Fires when a new image has loaded after a src change */
+    onReady?: () => void;
+};
+export declare function Image({ src, className, style, dimmed, hidden, onReady, onLoad: externalOnLoad, ...rest }: ExtendedImageProps): import("react/jsx-runtime").JSX.Element;
 export default Image;

package/components/Image/Image.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as g,Component as u}from"react";import y from"next/image";import{cn as S}from"../../utils/cn.js";import w from"../../hooks/useIsClient.js";const c=new Set;function m(i){return typeof i=="string"?i:JSON.stringify(i)}class E extends u{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){if(this.state.hasError){c.add(m(this.props.src));const{src:r,alt:o,className:t,style:n,width:a,height:s}=this.props,h=typeof r=="string"?r:typeof r=="object"&&"src"in r?r.src:"";return e("img",{src:h,alt:o??"",className:t,style:n,width:a,height:s,loading:"lazy"})}return this.props.children}}function C({src:i,className:r,style:o,...t}){const[n,a]=g(!0),[s,h]=g(null),f=w(),d="width"in t&&"height"in t&&!("fill"in t)?{height:"auto",...o}:o,l=m(i);if(s===i||c.has(l)){const p=typeof i=="string"?i:typeof i=="object"&&"src"in i?i.src:"";return e("img",{src:p,alt:t.alt??"",className:r,style:d,width:"width"in t?t.width:void 0,height:"height"in t?t.height:void 0,loading:"lazy"})}return e(E,{src:i,alt:t.alt,className:r,style:d,width:"width"in t?t.width:void 0,height:"height"in t?t.height:void 0,children:e(y,{src:i,className:S("transition-[filter] ease-linear duration-200",f&&n&&"blur-md",r),style:d,onError:()=>h(i),onLoad:()=>a(!1),...t})},l)}export{C as Image,C as default};
+import{jsx as u}from"react/jsx-runtime";import{useState as w,useRef as l,Component as j}from"react";import C from"next/image";import{cn as T}from"../../utils/cn.js";import x from"../../hooks/useIsClient.js";const v=new Set;function d(t){return typeof t=="string"?t:JSON.stringify(t)}class L extends j{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){if(this.state.hasError){v.add(d(this.props.src));const{src:r,alt:n,className:a,style:s,width:o,height:c}=this.props,i=typeof r=="string"?r:typeof r=="object"&&"src"in r?r.src:"";return u("img",{src:i,alt:n??"",className:a,style:s,width:o,height:c,loading:"lazy"})}return this.props.children}}function N({src:t,className:r,style:n,dimmed:a,hidden:s,onReady:o,onLoad:c,...i}){const[f,m]=w(!0),[E,I]=w(null),p=l(),y=l(t),S=l(o);S.current=o;const z=x(),h=a!==void 0||s!==void 0||o!==void 0;if(h){const e=d(t),b=d(y.current);e!==b&&(y.current=t,m(!0))}const g="width"in i&&"height"in i&&!("fill"in i)?{height:"auto",...n}:n,K=d(t);if(E===t||v.has(K)){const e=typeof t=="string"?t:typeof t=="object"&&"src"in t?t.src:"";return u("img",{src:e,alt:i.alt??"",className:r,style:g,width:"width"in i?i.width:void 0,height:"height"in i?i.height:void 0,loading:"lazy"})}return u(L,{src:t,alt:i.alt,className:r,style:g,width:"width"in i?i.width:void 0,height:"height"in i?i.height:void 0,children:u(C,{src:t,className:T(h?"transition-opacity duration-200 ease-in-out":"transition-[filter] ease-linear duration-200",!h&&z&&f&&"blur-md",r),style:{...g,...h?{opacity:s?0:f||a?.5:1}:{}},onError:()=>{p.current=setTimeout(()=>I(t),2e3)},onLoad:e=>{clearTimeout(p.current),m(!1),S.current?.(),typeof c=="function"&&c(e)},...i})})}export{N as Image,N as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.21.2",
+  "version": "0.22.1",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",