@alkimi.org/ui-kit 0.1.8 → 0.1.9

package/README.github.md

@@ -140,10 +140,59 @@ Or if you prefer, add the CSS variables to your own CSS file:
 
 ## Usage
 
+You can import components in two ways:
+
+### Option 1: Import from Main Package (All Components)
+
+```tsx
+import { Button, Card } from "@alkimi.org/ui-kit"
+```
+
+### Option 2: Import Individual Components (Tree-Shakeable)
+
+For better tree-shaking and smaller bundle sizes, import components individually:
+
+```tsx
+// Import only the Button component
+import { Button } from "@alkimi.org/ui-kit/button"
+
+// Import only the Card components
+import { Card, CardHeader, CardTitle } from "@alkimi.org/ui-kit/card"
+
+// Import utilities
+import { cn } from "@alkimi.org/ui-kit/utils"
+```
+
+### Available Component Paths
+
+- `@alkimi.org/ui-kit/button` - Button component
+- `@alkimi.org/ui-kit/card` - Card components
+- `@alkimi.org/ui-kit/text-decoder` - TextDecoder component
+- `@alkimi.org/ui-kit/glitch-link` - GlitchLink component (requires Next.js)
+- `@alkimi.org/ui-kit/pixel-load` - PixelLoad component (requires Next.js)
+- `@alkimi.org/ui-kit/utils` - Utility functions
+
+### Next.js Components
+
+Some components require Next.js to be installed:
+
+```bash
+npm install next
+```
+
+Then you can use:
+
+```tsx
+import GlitchLink from "@alkimi.org/ui-kit/glitch-link"
+import { PixelLoad } from "@alkimi.org/ui-kit/pixel-load"
+```
+
+> **Note:** If you're not using Next.js, you can still use all other components. Next.js is marked as an optional peer dependency.
+
 ### Button Component
 
 ```tsx
-import { Button } from "@alkimi/ui-kit"
+import { Button } from "@alkimi.org/ui-kit/button"
 
 function App() {
   return (
@@ -171,8 +220,8 @@ import {
   CardDescription,
   CardContent,
   CardFooter,
-  Button,
-} from "@alkimi/ui-kit"
+} from "@alkimi.org/ui-kit/card"
+import { Button } from "@alkimi.org/ui-kit/button"
 
 function App() {
   return (
@@ -212,8 +261,8 @@ To add more shadcn/ui components to this library:
 
    ```tsx
    // stories/ComponentName.stories.tsx
-   import type { Meta, StoryObj } from "@storybook/react";
-   import { ComponentName } from "../src/components/component-name";
+   import type { Meta, StoryObj } from "@storybook/react"
+   import { ComponentName } from "../src/components/component-name"
 
    const meta = {
      title: "Components/ComponentName",
@@ -222,24 +271,26 @@ To add more shadcn/ui components to this library:
        layout: "centered",
      },
      tags: ["autodocs"],
-   } satisfies Meta<typeof ComponentName>;
+   } satisfies Meta<typeof ComponentName>
 
-   export default meta;
-   type Story = StoryObj<typeof meta>;
+   export default meta
+   type Story = StoryObj<typeof meta>
 
    export const Default: Story = {
      args: {
        // your component props
      },
-   };
+   }
    ```
 
 4. Test locally with Storybook:
+
    ```bash
    npm run storybook
    ```
 
 5. Commit and push to main:
+
    ```bash
    git add .
    git commit -m "feat: add ComponentName"
@@ -247,6 +298,7 @@ To add more shadcn/ui components to this library:
    ```
 
 6. Update the Storybook deployment:
+
    ```bash
    git checkout storybook
    git merge main
@@ -275,7 +327,7 @@ npm install
 npm run dev
 ```
 
-Then open [http://localhost:5173](http://localhost:5173) in your browser.
+Then open [http://localhost:3000](http://localhost:3000) in your browser.
 
 The demo showcases all available components with interactive examples, including:
 

package/dist/components/GlitchLink.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RefAttributes, ReactNode } from 'react';
+
+type GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {
+    href: string;
+    children: ReactNode;
+    symbols?: string[];
+    className?: string;
+};
+declare const GlitchLink: ({ href, children, symbols, className, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { GlitchLink as default };

package/dist/components/GlitchLink.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RefAttributes, ReactNode } from 'react';
+
+type GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {
+    href: string;
+    children: ReactNode;
+    symbols?: string[];
+    className?: string;
+};
+declare const GlitchLink: ({ href, children, symbols, className, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
+
+export { GlitchLink as default };

package/dist/components/GlitchLink.js

@@ -0,0 +1,74 @@
+"use client"
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/GlitchLink.tsx
+var GlitchLink_exports = {};
+__export(GlitchLink_exports, {
+  default: () => GlitchLink_default
+});
+module.exports = __toCommonJS(GlitchLink_exports);
+var import_link = __toESM(require("next/link"));
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_SYMBOLS = ["/", "#", "*"];
+var GlitchLink = ({
+  href,
+  children,
+  symbols = DEFAULT_SYMBOLS,
+  className = "underline",
+  ...props
+}) => {
+  const [isHovering, setIsHovering] = (0, import_react.useState)(false);
+  const text = typeof children === "string" ? children : "";
+  const getRandomGlitch = () => {
+    if (!isHovering || !text) return children;
+    return text.split(" ").map((word) => {
+      const randomLetterIndex = Math.floor(Math.random() * word.length);
+      return word.replace(
+        word[randomLetterIndex],
+        symbols[Math.floor(Math.random() * symbols.length)]
+      );
+    }).join(" ");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_link.default,
+    {
+      href,
+      className,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      ...props,
+      children: text ? isHovering ? getRandomGlitch() : children : children
+    }
+  );
+};
+var GlitchLink_default = GlitchLink;
+//# sourceMappingURL=GlitchLink.js.map

package/dist/components/GlitchLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport { RefAttributes, useState, ReactNode } from \"react\"\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n}\n\nconst DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className = \"underline\",\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  const text = typeof children === \"string\" ? children : \"\"\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return children\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  return (\n    <Link\n      href={href}\n      className={className}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      {...props}\n    >\n      {text ? (isHovering ? getRandomGlitch() : children) : children}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AACjB,mBAAmD;AAwC/C;AA/BJ,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAEtC,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,SACE;AAAA,IAAC,YAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,MAAM,cAAc,IAAI;AAAA,MACtC,cAAc,MAAM,cAAc,KAAK;AAAA,MACtC,GAAG;AAAA,MAEH,iBAAQ,aAAa,gBAAgB,IAAI,WAAY;AAAA;AAAA,EACxD;AAEJ;AAEA,IAAO,qBAAQ;","names":["Link"]}

package/dist/components/GlitchLink.mjs

@@ -0,0 +1,44 @@
+"use client"
+"use client";
+
+// src/components/GlitchLink.tsx
+import Link from "next/link";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_SYMBOLS = ["/", "#", "*"];
+var GlitchLink = ({
+  href,
+  children,
+  symbols = DEFAULT_SYMBOLS,
+  className = "underline",
+  ...props
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  const text = typeof children === "string" ? children : "";
+  const getRandomGlitch = () => {
+    if (!isHovering || !text) return children;
+    return text.split(" ").map((word) => {
+      const randomLetterIndex = Math.floor(Math.random() * word.length);
+      return word.replace(
+        word[randomLetterIndex],
+        symbols[Math.floor(Math.random() * symbols.length)]
+      );
+    }).join(" ");
+  };
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      className,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      ...props,
+      children: text ? isHovering ? getRandomGlitch() : children : children
+    }
+  );
+};
+var GlitchLink_default = GlitchLink;
+export {
+  GlitchLink_default as default
+};
+//# sourceMappingURL=GlitchLink.mjs.map

package/dist/components/GlitchLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport { RefAttributes, useState, ReactNode } from \"react\"\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n}\n\nconst DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className = \"underline\",\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  const text = typeof children === \"string\" ? children : \"\"\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return children\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  return (\n    <Link\n      href={href}\n      className={className}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      {...props}\n    >\n      {text ? (isHovering ? getRandomGlitch() : children) : children}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;AACA,OAAO,UAAU;AACjB,SAAwB,gBAA2B;AAwC/C;AA/BJ,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAEtC,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,MAAM,cAAc,IAAI;AAAA,MACtC,cAAc,MAAM,cAAc,KAAK;AAAA,MACtC,GAAG;AAAA,MAEH,iBAAQ,aAAa,gBAAgB,IAAI,WAAY;AAAA;AAAA,EACxD;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/PixelLoad.d.mts

@@ -0,0 +1,20 @@
+import { StaticImageData } from 'next/image';
+import { JSX } from 'react';
+
+type ImageSrc = string | StaticImageData;
+interface PixelLoadProps {
+    src: ImageSrc;
+    alt: string;
+    duration?: number;
+    steps?: number;
+    className?: string;
+    onAnimationComplete?: () => void;
+    priority?: boolean;
+    quality?: number;
+    placeholder?: "blur" | "empty";
+    blurDataURL?: string;
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+}
+declare function PixelLoad({ src, alt, duration, steps, className, onAnimationComplete, priority, quality, placeholder, blurDataURL, objectFit, }: PixelLoadProps): JSX.Element;
+
+export { PixelLoad, type PixelLoadProps };

package/dist/components/PixelLoad.d.ts

@@ -0,0 +1,20 @@
+import { StaticImageData } from 'next/image';
+import { JSX } from 'react';
+
+type ImageSrc = string | StaticImageData;
+interface PixelLoadProps {
+    src: ImageSrc;
+    alt: string;
+    duration?: number;
+    steps?: number;
+    className?: string;
+    onAnimationComplete?: () => void;
+    priority?: boolean;
+    quality?: number;
+    placeholder?: "blur" | "empty";
+    blurDataURL?: string;
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+}
+declare function PixelLoad({ src, alt, duration, steps, className, onAnimationComplete, priority, quality, placeholder, blurDataURL, objectFit, }: PixelLoadProps): JSX.Element;
+
+export { PixelLoad, type PixelLoadProps };

package/dist/components/PixelLoad.js

@@ -0,0 +1,182 @@
+"use client"
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PixelLoad.tsx
+var PixelLoad_exports = {};
+__export(PixelLoad_exports, {
+  PixelLoad: () => PixelLoad
+});
+module.exports = __toCommonJS(PixelLoad_exports);
+var import_image = __toESM(require("next/image"));
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function isStaticImageData(src) {
+  return typeof src === "object" && "src" in src;
+}
+function getImageSrc(src) {
+  return isStaticImageData(src) ? src.src : src;
+}
+function PixelLoad({
+  src,
+  alt,
+  duration = 600,
+  steps = 15,
+  className,
+  onAnimationComplete,
+  priority,
+  quality,
+  placeholder = "empty",
+  blurDataURL,
+  objectFit = "cover"
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const canvasRef = (0, import_react.useRef)(null);
+  const [status, setStatus] = (0, import_react.useState)("loading");
+  const [dimensions, setDimensions] = (0, import_react.useState)(null);
+  const imageSrc = getImageSrc(src);
+  const drawPixelated = (0, import_react.useCallback)(
+    (ctx, img, pixelSize, w, h) => {
+      ctx.imageSmoothingEnabled = false;
+      const sw = Math.max(1, Math.floor(w / pixelSize));
+      const sh = Math.max(1, Math.floor(h / pixelSize));
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(img, 0, 0, sw, sh);
+      ctx.drawImage(canvasRef.current, 0, 0, sw, sh, 0, 0, w, h);
+    },
+    []
+  );
+  const runAnimation = (0, import_react.useCallback)(
+    (ctx, img, w, h) => {
+      const minPixelSize = Math.max(w, h) / 4;
+      const intervalMs = duration / steps;
+      let currentStep = 0;
+      setStatus("animating");
+      const animate = () => {
+        const progress = currentStep / steps;
+        const pixelSize = Math.max(1, Math.floor(minPixelSize * (1 - progress)));
+        drawPixelated(ctx, img, pixelSize, w, h);
+        currentStep++;
+        if (currentStep <= steps) {
+          window.setTimeout(animate, intervalMs);
+        } else {
+          setStatus("complete");
+          onAnimationComplete?.();
+        }
+      };
+      animate();
+    },
+    [duration, steps, drawPixelated, onAnimationComplete]
+  );
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateDimensions = () => {
+      const { width, height } = container.getBoundingClientRect();
+      setDimensions({ width: Math.floor(width), height: Math.floor(height) });
+    };
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(container);
+    updateDimensions();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!dimensions) return;
+    if (dimensions.width <= 0 || dimensions.height <= 0) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = dimensions.width;
+    canvas.height = dimensions.height;
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const minPixelSize = Math.max(dimensions.width, dimensions.height) / 4;
+      drawPixelated(ctx, img, minPixelSize, dimensions.width, dimensions.height);
+      runAnimation(ctx, img, dimensions.width, dimensions.height);
+    };
+    img.onerror = () => {
+      console.error("PixelLoad: Failed to load image");
+    };
+    img.src = imageSrc;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [imageSrc, dimensions, runAnimation, drawPixelated]);
+  const isComplete = status === "complete";
+  const isAnimating = status === "animating" || status === "loading";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative w-full h-full ${className || ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute top-0 left-0 w-full h-full",
+            style: {
+              objectFit,
+              opacity: isComplete ? 0 : 1,
+              zIndex: isAnimating ? 2 : 1
+            },
+            "aria-hidden": isComplete
+          }
+        ),
+        isComplete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            src,
+            alt,
+            fill: true,
+            priority,
+            quality,
+            placeholder,
+            blurDataURL,
+            className: "opacity-100 transition-opacity duration-150 ease-out z-[1]",
+            style: {
+              objectFit
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PixelLoad
+});
+//# sourceMappingURL=PixelLoad.js.map

package/dist/components/PixelLoad.js.map

@@ -0,0 +1 @@
+{"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"]}

package/dist/components/PixelLoad.mjs

@@ -0,0 +1,148 @@
+"use client"
+"use client";
+
+// src/components/PixelLoad.tsx
+import Image from "next/image";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isStaticImageData(src) {
+  return typeof src === "object" && "src" in src;
+}
+function getImageSrc(src) {
+  return isStaticImageData(src) ? src.src : src;
+}
+function PixelLoad({
+  src,
+  alt,
+  duration = 600,
+  steps = 15,
+  className,
+  onAnimationComplete,
+  priority,
+  quality,
+  placeholder = "empty",
+  blurDataURL,
+  objectFit = "cover"
+}) {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [status, setStatus] = useState("loading");
+  const [dimensions, setDimensions] = useState(null);
+  const imageSrc = getImageSrc(src);
+  const drawPixelated = useCallback(
+    (ctx, img, pixelSize, w, h) => {
+      ctx.imageSmoothingEnabled = false;
+      const sw = Math.max(1, Math.floor(w / pixelSize));
+      const sh = Math.max(1, Math.floor(h / pixelSize));
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(img, 0, 0, sw, sh);
+      ctx.drawImage(canvasRef.current, 0, 0, sw, sh, 0, 0, w, h);
+    },
+    []
+  );
+  const runAnimation = useCallback(
+    (ctx, img, w, h) => {
+      const minPixelSize = Math.max(w, h) / 4;
+      const intervalMs = duration / steps;
+      let currentStep = 0;
+      setStatus("animating");
+      const animate = () => {
+        const progress = currentStep / steps;
+        const pixelSize = Math.max(1, Math.floor(minPixelSize * (1 - progress)));
+        drawPixelated(ctx, img, pixelSize, w, h);
+        currentStep++;
+        if (currentStep <= steps) {
+          window.setTimeout(animate, intervalMs);
+        } else {
+          setStatus("complete");
+          onAnimationComplete?.();
+        }
+      };
+      animate();
+    },
+    [duration, steps, drawPixelated, onAnimationComplete]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateDimensions = () => {
+      const { width, height } = container.getBoundingClientRect();
+      setDimensions({ width: Math.floor(width), height: Math.floor(height) });
+    };
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(container);
+    updateDimensions();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!dimensions) return;
+    if (dimensions.width <= 0 || dimensions.height <= 0) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = dimensions.width;
+    canvas.height = dimensions.height;
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const minPixelSize = Math.max(dimensions.width, dimensions.height) / 4;
+      drawPixelated(ctx, img, minPixelSize, dimensions.width, dimensions.height);
+      runAnimation(ctx, img, dimensions.width, dimensions.height);
+    };
+    img.onerror = () => {
+      console.error("PixelLoad: Failed to load image");
+    };
+    img.src = imageSrc;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [imageSrc, dimensions, runAnimation, drawPixelated]);
+  const isComplete = status === "complete";
+  const isAnimating = status === "animating" || status === "loading";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative w-full h-full ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute top-0 left-0 w-full h-full",
+            style: {
+              objectFit,
+              opacity: isComplete ? 0 : 1,
+              zIndex: isAnimating ? 2 : 1
+            },
+            "aria-hidden": isComplete
+          }
+        ),
+        isComplete && /* @__PURE__ */ jsx(
+          Image,
+          {
+            src,
+            alt,
+            fill: true,
+            priority,
+            quality,
+            placeholder,
+            blurDataURL,
+            className: "opacity-100 transition-opacity duration-150 ease-out z-[1]",
+            style: {
+              objectFit
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PixelLoad
+};
+//# sourceMappingURL=PixelLoad.mjs.map