@customafk/lunas-ui 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {

package/dist/image-Cm4vJeHx.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-Cm4vJeHx.cjs","names":["Image: React.FC<Props>","AlertCircleIcon","Skeleton"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { AlertCircleIcon } from 'lucide-react'\n\nimport { Skeleton } from './skeleton'\n\ntype Props = {\n  src?: string\n  alt?: string\n  width?: number | string\n  height?: number | string\n  maxRetries?: number\n  retryDelay?: number\n  className?: string\n  onClick?: () => void\n}\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null)\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src)\n  const [retryCount, setRetryCount] = useState<number>(0)\n  const [isLoaded, setIsLoaded] = useState<boolean>(false)\n  const [hasError, setHasError] = useState<boolean>(false)\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true)\n  }, [])\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false)\n      const newRetryCount = retryCount + 1\n      setRetryCount(newRetryCount)\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`\n        setCurrentSrc(src + cacheBuster)\n      }, retryDelay * newRetryCount)\n      return\n    }\n\n    setHasError(true)\n    setIsLoaded(true)\n    setCurrentSrc(src)\n  }, [maxRetries, retryCount, retryDelay, src])\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"bg-danger-muted shadow-card flex size-full flex-col items-center justify-center gap-y-2 rounded-md\">\n          <AlertCircleIcon className=\"text-danger size-8 @max-[52px]:size-6\" />\n          <span className=\"text-danger-weak y ml-2 text-sm @max-[96px]:sr-only\">Image failed to load</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative inline-block', className)} onClick={onClick}>\n      {!isLoaded && (\n        <Skeleton className=\"absolute inset-0 flex size-full items-center justify-center\">\n          <div className=\"loader\" />\n        </Skeleton>\n      )}\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'shadow-card size-full rounded-md object-cover transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  )\n}\n"],"mappings":"iPAiBaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,aAAc,CAC3H,IAAM,GAAA,EAAA,EAAA,QAAoC,MACpC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA8C,GAC3D,CAAC,EAAY,IAAA,EAAA,EAAA,UAAkC,GAC/C,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,IAC5C,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,IAE5C,GAAA,EAAA,EAAA,iBAA+B,CACnC,EAAY,KACX,IAEG,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,IACZ,IAAM,EAAgB,EAAa,EACnC,EAAc,GAGd,eAAiB,CACf,IAAM,EAAc,UAAU,KAAK,MAAM,WAAW,IACpD,EAAc,EAAM,IACnB,EAAa,GAChB,OAGF,EAAY,IACZ,EAAY,IACZ,EAAc,IACb,CAAC,EAAY,EAAY,EAAY,IAaxC,OAXI,GAEA,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAO,UAAU,WAAA,EAAA,EAAA,IAAc,mCAAoC,aAC/E,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gHACb,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,2CAC3B,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,+DAAsD,+BAO5E,EAAA,EAAA,MAAC,MAAA,CAAI,MAAO,CAAE,QAAO,UAAU,WAAA,EAAA,EAAA,IAAc,wBAAyB,GAAqB,oBACxF,CAAC,IACA,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,UAAU,wEAClB,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,cAGnB,EAAA,EAAA,KAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,IACE,gFACA,GAAY,cACZ,CAAC,GAAY,iCAEf,OAAQ,EACR,QAAS"}