@rpcbase/ui 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {

package/src/Checkbox/index.tsx

@@ -15,6 +15,7 @@ export const Checkbox = ({
   defaultChecked,
   checked,
   onChange,
+  color = "gray",
   ...props
 }: CheckboxProps) => {
   return (
@@ -29,7 +30,7 @@ export const Checkbox = ({
           defaultChecked={defaultChecked}
           checked={checked}
           onChange={onChange}
-          className="col-start-1 row-start-1 appearance-none cursor-pointer rounded-sm border border-gray-300 bg-white checked:border-sky-600 checked:bg-sky-600 indeterminate:border-sky-600 indeterminate:bg-sky-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+          className={`col-start-1 row-start-1 appearance-none cursor-pointer rounded-sm border border-gray-300 bg-white checked:border-${color}-600 checked:bg-${color}-600 indeterminate:border-${color}-600 indeterminate:bg-${color}-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto`}
         />
         <svg
           fill="none"

package/src/Image/index.tsx

@@ -0,0 +1,106 @@
+import React, { useRef, useEffect, useState } from "react"
+import { decode } from "blurhash"
+
+// Set to true to enable mouseover debugging (this will show the blurhash image unless hovered)
+const DEBUG = false
+
+export const Image = ({
+  src,
+  hash,
+  alt = "",
+  className,
+}: {
+  src: string
+  hash: [number, number, string]
+  alt?: string
+  className?: string
+}) => {
+  const [imageLoaded, setImageLoaded] = useState(false)
+  const [blurhashUrl, setBlurhashUrl] = useState<string | null>(null)
+
+  const imgRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!hash) return
+
+    const [width, height, buffer] = hash
+    const pixels = decode(buffer, width, height)
+
+    const canvas = document.createElement("canvas")
+    const ctx = canvas.getContext("2d")
+
+    if (ctx) {
+      canvas.width = width
+      canvas.height = height
+
+      const imageData = new ImageData(
+        new Uint8ClampedArray(pixels),
+        width,
+        height
+      )
+      ctx.putImageData(imageData, 0, 0)
+
+      setBlurhashUrl(canvas.toDataURL())
+    }
+  }, [hash])
+
+  // Handle Cached Images
+  useEffect(() => {
+    if (imgRef.current && imgRef.current.complete) {
+      setImageLoaded(true)
+    }
+  }, [src])
+
+  const onMouseEnter = () => {
+    if (DEBUG) {
+      setImageLoaded(true)
+    }
+  }
+
+  const onMouseLeave = () => {
+    if (DEBUG) {
+      setImageLoaded(false)
+    }
+  }
+
+  return (
+    <div
+      style={{ position: "relative", overflow: "hidden" }}
+      className={className}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {blurhashUrl && !imageLoaded && (
+        <img
+          src={blurhashUrl}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
+      )}
+      <img
+        ref={imgRef}
+        src={src}
+        alt={alt}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: imageLoaded ? "block" : "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
+        onLoad={() => {
+          setImageLoaded(true)
+        }}
+        onError={(e) => console.error("Image failed to load:", src, e)}
+      />
+    </div>
+  )
+}