@alkimi.org/ui-kit 0.9.4 → 0.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkimi.org/ui-kit",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "packageManager": "pnpm@10.26.0",
   "description": "A React component library built with shadcn/ui and Tailwind CSS",
   "main": "./dist/index.js",

package/dist/chunk-R74QDO2Z.js

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
-var _image = require('next/image'); var _image2 = _interopRequireDefault(_image);var _react = require('react');var _jsxruntime = require('react/jsx-runtime');function J(o){return typeof o=="object"&&"src"in o}function U(o){return J(o)?o.src:o}function $({src:o,alt:P,duration:h=600,steps:l=15,className:R,onAnimationComplete:f,priority:C,quality:E,placeholder:z="empty",blurDataURL:T,objectFit:p="cover"}){let v=_react.useRef.call(void 0, null),u=_react.useRef.call(void 0, null),[d,b]=_react.useState.call(void 0, "loading"),[n,H]=_react.useState.call(void 0, null),S=U(o),c=_react.useCallback.call(void 0, (t,a,e,i,r)=>{t.imageSmoothingEnabled=!1;let m=Math.max(1,Math.floor(i/e)),s=Math.max(1,Math.floor(r/e));t.clearRect(0,0,i,r),t.drawImage(a,0,0,m,s),t.drawImage(u.current,0,0,m,s,0,0,i,r)},[]),w=_react.useCallback.call(void 0, (t,a,e,i)=>{let r=Math.max(e,i)/4,m=h/l,s=0;b("animating");let x=()=>{let O=s/l,q=Math.max(1,Math.floor(r*(1-O)));c(t,a,q,e,i),s++,s<=l?window.setTimeout(x,m):(b("complete"),_optionalChain([f, 'optionalCall', _ => _()]))};x()},[h,l,c,f]);_react.useEffect.call(void 0, ()=>{let t=v.current;if(!t)return;let a=()=>{let{width:i,height:r}=t.getBoundingClientRect();H({width:Math.floor(i),height:Math.floor(r)})},e=new ResizeObserver(a);return e.observe(t),a(),()=>{e.disconnect()}},[]),_react.useEffect.call(void 0, ()=>{if(!n||n.width<=0||n.height<=0)return;let t=u.current;if(!t)return;let a=t.getContext("2d");if(!a)return;t.width=n.width,t.height=n.height;let e=new window.Image;return e.crossOrigin="anonymous",e.onload=()=>{let i=Math.max(n.width,n.height)/4;c(a,e,i,n.width,n.height),w(a,e,n.width,n.height)},e.onerror=()=>{console.error("PixelLoad: Failed to load image")},e.src=S,()=>{e.onload=null,e.onerror=null}},[S,n,w,c]);let g=d==="complete",N=d==="animating"||d==="loading";return _jsxruntime.jsxs.call(void 0, "div",{ref:v,className:`relative w-full h-full ${R||""}`,children:[_jsxruntime.jsx.call(void 0, "canvas",{ref:u,className:"absolute top-0 left-0 w-full h-full",style:{objectFit:p,opacity:g?0:1,zIndex:N?2:1},"aria-hidden":g}),g&&_jsxruntime.jsx.call(void 0, _image2.default,{src:o,alt:P,fill:!0,priority:C,quality:E,placeholder:z,blurDataURL:T,className:"opacity-100 transition-opacity duration-150 ease-out z-[1]",style:{objectFit:p}})]})}exports.a = $;
-//# sourceMappingURL=chunk-R74QDO2Z.js.map

package/dist/chunk-R74QDO2Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-R74QDO2Z.js","../src/components/PixelLoad.tsx"],"names":["isStaticImageData","src","getImageSrc","PixelLoad","alt","duration","steps","className","onAnimationComplete","priority","quality","placeholder","blurDataURL","objectFit","containerRef","useRef","canvasRef","status","setStatus","useState","dimensions","setDimensions","imageSrc","drawPixelated","useCallback","ctx","img","pixelSize","w","h","sw","sh","runAnimation","minPixelSize","intervalMs","currentStep","animate","progress","useEffect","container","updateDimensions","width","height","resizeObserver","canvas","isComplete","isAnimating","jsxs"],"mappings":"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","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-R74QDO2Z.js","sourcesContent":[null,"\"use client\"\n\nimport Image, { type StaticImageData } from \"next/image\"\nimport { JSX, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype PixelLoadStatus = \"loading\" | \"animating\" | \"complete\"\n\ntype ImageSrc = string | StaticImageData\n\nexport interface PixelLoadProps {\n  src: ImageSrc\n  alt: string\n  duration?: number\n  steps?: number\n  className?: string\n  onAnimationComplete?: () => void\n  priority?: boolean\n  quality?: number\n  placeholder?: \"blur\" | \"empty\"\n  blurDataURL?: string\n  objectFit?: \"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"\n}\n\nfunction isStaticImageData(src: ImageSrc): src is StaticImageData {\n  return typeof src === \"object\" && \"src\" in src\n}\n\nfunction getImageSrc(src: ImageSrc): string {\n  return isStaticImageData(src) ? src.src : src\n}\n\nexport function PixelLoad({\n  src,\n  alt,\n  duration = 600,\n  steps = 15,\n  className,\n  onAnimationComplete,\n  priority,\n  quality,\n  placeholder = \"empty\",\n  blurDataURL,\n  objectFit = \"cover\",\n}: PixelLoadProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const [status, setStatus] = useState<PixelLoadStatus>(\"loading\")\n  const [dimensions, setDimensions] = useState<{\n    width: number\n    height: number\n  } | null>(null)\n\n  const imageSrc = getImageSrc(src)\n\n  const drawPixelated = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      img: HTMLImageElement,\n      pixelSize: number,\n      w: number,\n      h: number\n    ): void => {\n      ctx.imageSmoothingEnabled = false\n\n      const sw = Math.max(1, Math.floor(w / pixelSize))\n      const sh = Math.max(1, Math.floor(h / pixelSize))\n\n      ctx.clearRect(0, 0, w, h)\n      ctx.drawImage(img, 0, 0, sw, sh)\n      ctx.drawImage(canvasRef.current!, 0, 0, sw, sh, 0, 0, w, h)\n    },\n    []\n  )\n\n  const runAnimation = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      img: HTMLImageElement,\n      w: number,\n      h: number\n    ): void => {\n      const minPixelSize = Math.max(w, h) / 4\n      const intervalMs = duration / steps\n      let currentStep = 0\n\n      setStatus(\"animating\")\n\n      const animate = (): void => {\n        const progress = currentStep / steps\n        const pixelSize = Math.max(1, Math.floor(minPixelSize * (1 - progress)))\n\n        drawPixelated(ctx, img, pixelSize, w, h)\n\n        currentStep++\n\n        if (currentStep <= steps) {\n          window.setTimeout(animate, intervalMs)\n        } else {\n          setStatus(\"complete\")\n          onAnimationComplete?.()\n        }\n      }\n\n      animate()\n    },\n    [duration, steps, drawPixelated, onAnimationComplete]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const updateDimensions = (): void => {\n      const { width, height } = container.getBoundingClientRect()\n      setDimensions({ width: Math.floor(width), height: Math.floor(height) })\n    }\n\n    const resizeObserver = new ResizeObserver(updateDimensions)\n    resizeObserver.observe(container)\n    updateDimensions()\n\n    return (): void => {\n      resizeObserver.disconnect()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!dimensions) return\n\n    // Guard against invalid dimensions\n    if (dimensions.width <= 0 || dimensions.height <= 0) return\n\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n\n    // Set canvas dimensions immediately to ensure it covers the area\n    canvas.width = dimensions.width\n    canvas.height = dimensions.height\n\n    const img = new window.Image()\n    img.crossOrigin = \"anonymous\"\n\n    img.onload = (): void => {\n      // Draw first frame immediately to prevent original image from showing\n      const minPixelSize = Math.max(dimensions.width, dimensions.height) / 4\n      drawPixelated(ctx, img, minPixelSize, dimensions.width, dimensions.height)\n      // Then start animation\n      runAnimation(ctx, img, dimensions.width, dimensions.height)\n    }\n\n    img.onerror = (): void => {\n      console.error(\"PixelLoad: Failed to load image\")\n    }\n\n    img.src = imageSrc\n\n    return (): void => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [imageSrc, dimensions, runAnimation, drawPixelated])\n\n  const isComplete = status === \"complete\"\n  const isAnimating = status === \"animating\" || status === \"loading\"\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative w-full h-full ${className || \"\"}`}\n    >\n      <canvas\n        ref={canvasRef}\n        className=\"absolute top-0 left-0 w-full h-full\"\n        style={{\n          objectFit,\n          opacity: isComplete ? 0 : 1,\n          zIndex: isAnimating ? 2 : 1,\n        }}\n        aria-hidden={isComplete}\n      />\n      {isComplete && (\n        <Image\n          src={src}\n          alt={alt}\n          fill\n          priority={priority}\n          quality={quality}\n          placeholder={placeholder}\n          blurDataURL={blurDataURL}\n          className=\"opacity-100 transition-opacity duration-150 ease-out z-[1]\"\n          style={{\n            objectFit,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n"]}

package/dist/chunk-WF73K6X2.mjs

@@ -1,3 +0,0 @@
-"use client";
-import A from"next/image";import{useCallback as y,useEffect as I,useRef as M,useState as L}from"react";import{jsx as D,jsxs as X}from"react/jsx-runtime";function J(o){return typeof o=="object"&&"src"in o}function U(o){return J(o)?o.src:o}function $({src:o,alt:P,duration:h=600,steps:l=15,className:R,onAnimationComplete:f,priority:C,quality:E,placeholder:z="empty",blurDataURL:T,objectFit:p="cover"}){let v=M(null),u=M(null),[d,b]=L("loading"),[n,H]=L(null),S=U(o),c=y((t,a,e,i,r)=>{t.imageSmoothingEnabled=!1;let m=Math.max(1,Math.floor(i/e)),s=Math.max(1,Math.floor(r/e));t.clearRect(0,0,i,r),t.drawImage(a,0,0,m,s),t.drawImage(u.current,0,0,m,s,0,0,i,r)},[]),w=y((t,a,e,i)=>{let r=Math.max(e,i)/4,m=h/l,s=0;b("animating");let x=()=>{let O=s/l,q=Math.max(1,Math.floor(r*(1-O)));c(t,a,q,e,i),s++,s<=l?window.setTimeout(x,m):(b("complete"),f?.())};x()},[h,l,c,f]);I(()=>{let t=v.current;if(!t)return;let a=()=>{let{width:i,height:r}=t.getBoundingClientRect();H({width:Math.floor(i),height:Math.floor(r)})},e=new ResizeObserver(a);return e.observe(t),a(),()=>{e.disconnect()}},[]),I(()=>{if(!n||n.width<=0||n.height<=0)return;let t=u.current;if(!t)return;let a=t.getContext("2d");if(!a)return;t.width=n.width,t.height=n.height;let e=new window.Image;return e.crossOrigin="anonymous",e.onload=()=>{let i=Math.max(n.width,n.height)/4;c(a,e,i,n.width,n.height),w(a,e,n.width,n.height)},e.onerror=()=>{console.error("PixelLoad: Failed to load image")},e.src=S,()=>{e.onload=null,e.onerror=null}},[S,n,w,c]);let g=d==="complete",N=d==="animating"||d==="loading";return X("div",{ref:v,className:`relative w-full h-full ${R||""}`,children:[D("canvas",{ref:u,className:"absolute top-0 left-0 w-full h-full",style:{objectFit:p,opacity:g?0:1,zIndex:N?2:1},"aria-hidden":g}),g&&D(A,{src:o,alt:P,fill:!0,priority:C,quality:E,placeholder:z,blurDataURL:T,className:"opacity-100 transition-opacity duration-150 ease-out z-[1]",style:{objectFit:p}})]})}export{$ as a};
-//# sourceMappingURL=chunk-WF73K6X2.mjs.map

package/dist/chunk-WF73K6X2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/PixelLoad.tsx"],"sourcesContent":["\"use client\"\n\nimport Image, { type StaticImageData } from \"next/image\"\nimport { JSX, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype PixelLoadStatus = \"loading\" | \"animating\" | \"complete\"\n\ntype ImageSrc = string | StaticImageData\n\nexport interface PixelLoadProps {\n  src: ImageSrc\n  alt: string\n  duration?: number\n  steps?: number\n  className?: string\n  onAnimationComplete?: () => void\n  priority?: boolean\n  quality?: number\n  placeholder?: \"blur\" | \"empty\"\n  blurDataURL?: string\n  objectFit?: \"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"\n}\n\nfunction isStaticImageData(src: ImageSrc): src is StaticImageData {\n  return typeof src === \"object\" && \"src\" in src\n}\n\nfunction getImageSrc(src: ImageSrc): string {\n  return isStaticImageData(src) ? src.src : src\n}\n\nexport function PixelLoad({\n  src,\n  alt,\n  duration = 600,\n  steps = 15,\n  className,\n  onAnimationComplete,\n  priority,\n  quality,\n  placeholder = \"empty\",\n  blurDataURL,\n  objectFit = \"cover\",\n}: PixelLoadProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const [status, setStatus] = useState<PixelLoadStatus>(\"loading\")\n  const [dimensions, setDimensions] = useState<{\n    width: number\n    height: number\n  } | null>(null)\n\n  const imageSrc = getImageSrc(src)\n\n  const drawPixelated = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      img: HTMLImageElement,\n      pixelSize: number,\n      w: number,\n      h: number\n    ): void => {\n      ctx.imageSmoothingEnabled = false\n\n      const sw = Math.max(1, Math.floor(w / pixelSize))\n      const sh = Math.max(1, Math.floor(h / pixelSize))\n\n      ctx.clearRect(0, 0, w, h)\n      ctx.drawImage(img, 0, 0, sw, sh)\n      ctx.drawImage(canvasRef.current!, 0, 0, sw, sh, 0, 0, w, h)\n    },\n    []\n  )\n\n  const runAnimation = useCallback(\n    (\n      ctx: CanvasRenderingContext2D,\n      img: HTMLImageElement,\n      w: number,\n      h: number\n    ): void => {\n      const minPixelSize = Math.max(w, h) / 4\n      const intervalMs = duration / steps\n      let currentStep = 0\n\n      setStatus(\"animating\")\n\n      const animate = (): void => {\n        const progress = currentStep / steps\n        const pixelSize = Math.max(1, Math.floor(minPixelSize * (1 - progress)))\n\n        drawPixelated(ctx, img, pixelSize, w, h)\n\n        currentStep++\n\n        if (currentStep <= steps) {\n          window.setTimeout(animate, intervalMs)\n        } else {\n          setStatus(\"complete\")\n          onAnimationComplete?.()\n        }\n      }\n\n      animate()\n    },\n    [duration, steps, drawPixelated, onAnimationComplete]\n  )\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const updateDimensions = (): void => {\n      const { width, height } = container.getBoundingClientRect()\n      setDimensions({ width: Math.floor(width), height: Math.floor(height) })\n    }\n\n    const resizeObserver = new ResizeObserver(updateDimensions)\n    resizeObserver.observe(container)\n    updateDimensions()\n\n    return (): void => {\n      resizeObserver.disconnect()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!dimensions) return\n\n    // Guard against invalid dimensions\n    if (dimensions.width <= 0 || dimensions.height <= 0) return\n\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n\n    // Set canvas dimensions immediately to ensure it covers the area\n    canvas.width = dimensions.width\n    canvas.height = dimensions.height\n\n    const img = new window.Image()\n    img.crossOrigin = \"anonymous\"\n\n    img.onload = (): void => {\n      // Draw first frame immediately to prevent original image from showing\n      const minPixelSize = Math.max(dimensions.width, dimensions.height) / 4\n      drawPixelated(ctx, img, minPixelSize, dimensions.width, dimensions.height)\n      // Then start animation\n      runAnimation(ctx, img, dimensions.width, dimensions.height)\n    }\n\n    img.onerror = (): void => {\n      console.error(\"PixelLoad: Failed to load image\")\n    }\n\n    img.src = imageSrc\n\n    return (): void => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [imageSrc, dimensions, runAnimation, drawPixelated])\n\n  const isComplete = status === \"complete\"\n  const isAnimating = status === \"animating\" || status === \"loading\"\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative w-full h-full ${className || \"\"}`}\n    >\n      <canvas\n        ref={canvasRef}\n        className=\"absolute top-0 left-0 w-full h-full\"\n        style={{\n          objectFit,\n          opacity: isComplete ? 0 : 1,\n          zIndex: isAnimating ? 2 : 1,\n        }}\n        aria-hidden={isComplete}\n      />\n      {isComplete && (\n        <Image\n          src={src}\n          alt={alt}\n          fill\n          priority={priority}\n          quality={quality}\n          placeholder={placeholder}\n          blurDataURL={blurDataURL}\n          className=\"opacity-100 transition-opacity duration-150 ease-out z-[1]\"\n          style={{\n            objectFit,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":["Image","useCallback","useEffect","useRef","useState","jsx","jsxs","isStaticImageData","src","getImageSrc","PixelLoad","alt","duration","steps","className","onAnimationComplete","priority","quality","placeholder","blurDataURL","objectFit","containerRef","canvasRef","status","setStatus","dimensions","setDimensions","imageSrc","drawPixelated","ctx","img","pixelSize","w","h","sw","sh","runAnimation","minPixelSize","intervalMs","currentStep","animate","progress","container","updateDimensions","width","height","resizeObserver","canvas","isComplete","isAnimating"]}