@rpcbase/ui 0.44.0 → 0.45.0

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib/index"

package/package.json

@@ -1,22 +1,50 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
+  "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "main": "./src/index.ts",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./header": "./src/header/index.tsx"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   },
   "scripts": {
+    "dev": "wireit",
+    "build": "vite build && tsc --project tsconfig.build.json",
+    "test": "tsc --noEmit && playwright test",
     "release": "wireit"
   },
   "wireit": {
+    "dev": {
+      "command": "vite",
+      "service": {
+        "readyWhen": {
+          "lineMatches": ".*PKG/UI READY.*"
+        }
+      },
+      "dependencies": []
+    },
     "release": {
       "command": "../../scripts/publish.js",
       "dependencies": [],
       "files": [
         "package.json",
-        "src/**/*"
+        "lib/**/*",
+        "src/**/*",
+        "index.d.ts",
+        "playwright.config.ts",
+        "tsconfig.json",
+        "tsconfig.build.json",
+        "vite.config.ts"
       ],
       "output": [],
       "env": {
@@ -26,9 +54,22 @@
       }
     }
   },
+  "peerDependencies": {
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-router": "^7.0.0"
+  },
   "dependencies": {
+    "@radix-ui/react-dialog": "1.1.15",
     "blurhash": "2.0.5",
-    "clsx": "2.1.1"
+    "clsx": "2.1.1",
+    "lucide-react": "0.547.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@playwright/test": "1.56.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-router": "7.9.4",
+    "vite": "7.1.12"
+  }
 }

package/src/ApplePayButton/index.tsx

@@ -1,17 +0,0 @@
-import clsx from "clsx"
-
-
-export const ApplePayButton = ({ onClick, className = "" }) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={clsx("flex w-full items-center justify-center rounded-md border border-transparent bg-black py-2 text-white hover:bg-gray-800 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:outline-hidden")}
-    >
-      <span className="sr-only">Pay with Apple Pay</span>
-      <svg fill="currentColor" viewBox="0 0 50 20" className="h-5 w-auto">
-        <path d="M9.536 2.579c-.571.675-1.485 1.208-2.4 1.132-.113-.914.334-1.884.858-2.484C8.565.533 9.564.038 10.374 0c.095.951-.276 1.884-.838 2.579zm.829 1.313c-1.324-.077-2.457.751-3.085.751-.638 0-1.6-.713-2.647-.694-1.362.019-2.628.79-3.323 2.017-1.429 2.455-.372 6.09 1.009 8.087.676.99 1.485 2.075 2.552 2.036 1.009-.038 1.409-.656 2.628-.656 1.228 0 1.58.656 2.647.637 1.104-.019 1.8-.99 2.475-1.979.771-1.122 1.086-2.217 1.105-2.274-.02-.019-2.133-.828-2.152-3.263-.02-2.036 1.666-3.007 1.742-3.064-.952-1.408-2.437-1.56-2.951-1.598zm7.645-2.76v14.834h2.305v-5.072h3.19c2.913 0 4.96-1.998 4.96-4.89 0-2.893-2.01-4.872-4.885-4.872h-5.57zm2.305 1.941h2.656c2 0 3.142 1.066 3.142 2.94 0 1.875-1.142 2.95-3.151 2.95h-2.647v-5.89zM32.673 16.08c1.448 0 2.79-.733 3.4-1.893h.047v1.779h2.133V8.582c0-2.14-1.714-3.52-4.351-3.52-2.447 0-4.256 1.399-4.323 3.32h2.076c.171-.913 1.018-1.512 2.18-1.512 1.41 0 2.2.656 2.2 1.865v.818l-2.876.171c-2.675.162-4.123 1.256-4.123 3.159 0 1.922 1.495 3.197 3.637 3.197zm.62-1.76c-1.229 0-2.01-.59-2.01-1.494 0-.933.752-1.475 2.19-1.56l2.562-.162v.837c0 1.39-1.181 2.379-2.743 2.379zM41.1 20c2.247 0 3.304-.856 4.227-3.454l4.047-11.341h-2.342l-2.714 8.763h-.047l-2.714-8.763h-2.409l3.904 10.799-.21.656c-.352 1.114-.923 1.542-1.942 1.542-.18 0-.533-.02-.676-.038v1.779c.133.038.705.057.876.057z" />
-      </svg>
-    </button>
-  )
-}

package/src/Checkbox/index.tsx

@@ -1,68 +0,0 @@
-import React from "react"
-
-
-const colorVariants = {
-  red: "checked:border-red-700 checked:bg-red-700 indeterminate:border-red-700 indeterminate:bg-red-700 focus-visible:outline-red-700",
-  sky: "checked:border-sky-600 checked:bg-sky-600 indeterminate:border-sky-600 indeterminate:bg-sky-600 focus-visible:outline-sky-600"
-}
-
-interface CheckboxProps
-  extends Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">> {
-  id: string;
-  name: string;
-  checked: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  color: keyof typeof colorVariants;
-};
-
-export const Checkbox = ({
-  id,
-  name,
-  defaultValue,
-  defaultChecked,
-  checked,
-  onChange,
-  color = "sky",
-  ...props
-}: CheckboxProps) => {
-
-  const colorClasses = colorVariants[color]
-
-  return (
-    <div className="flex h-6 shrink-0 items-center">
-      <div className="group grid size-4 grid-cols-1">
-        <input
-          {...props}
-          id={id}
-          name={name}
-          type="checkbox"
-          defaultValue={defaultValue}
-          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 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ${colorClasses}`}
-        />
-        <svg
-          fill="none"
-          viewBox="0 0 14 14"
-          className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
-        >
-          <path
-            d="M3 8L6 11L11 3.5"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="opacity-0 group-has-checked:opacity-100"
-          />
-          <path
-            d="M3 7H11"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="opacity-0 group-has-indeterminate:opacity-100"
-          />
-        </svg>
-      </div>
-    </div>
-  )
-}

package/src/Image/index.tsx

@@ -1,106 +0,0 @@
-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>
-  )
-}

package/src/header/MenuPopover/index.tsx

@@ -1,86 +0,0 @@
-import clsx from "clsx"
-import { ReactNode, useState, useRef, useEffect } from "react"
-import { Link } from "react-router"
-
-
-export const MenuPopover = ({
-  href,
-  labelClassName,
-  labelActiveClassName,
-  labelElement,
-  isActive,
-  children,
-}: {
-  href: string;
-  labelClassName: string;
-  labelActiveClassName: string;
-  labelElement: ReactNode;
-  isActive: boolean;
-  children: (props: { setIsOpen: (isOpen: boolean) => void }) => ReactNode
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const popoverRef = useRef(null)
-
-  const handleMouseEnter = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-    setIsOpen(true)
-  }
-
-  const handleMouseLeave = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsOpen(false)
-    }, 120)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [])
-
-  return (
-    <div
-      className="flex"
-      ref={popoverRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className="relative flex">
-        <Link
-          to={href}
-          onClick={() => {
-            setIsOpen(false)
-          }}
-          className={clsx(
-            "relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium text-gray-700 cursor-pointer transition-colors duration-200 ease-out hover:text-gray-800",
-            labelClassName,
-            isOpen || isActive ? labelActiveClassName : "border-transparent",
-          )}
-        >
-          {labelElement}
-        </Link>
-      </div>
-
-      {isOpen && (
-        <div
-          className="absolute left-0 right-0 top-full z-20 text-gray-500 sm:text-sm"
-          style={{ width: "100vw", left: "50%", transform: "translateX(-50%)" }}
-        >
-          <div
-            aria-hidden="true"
-            className="absolute inset-0 top-1/2 bg-white shadow-sm"
-          />
-
-          <div className="relative bg-white">
-            {children({ setIsOpen })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/header/index.tsx

@@ -1,6 +0,0 @@
-import { MenuPopover } from "./MenuPopover"
-
-
-export const Header = {
-  MenuPopover
-}

package/src/helpers/index.ts

@@ -1 +0,0 @@
-export * from "./isMobileDevice"

package/src/helpers/isMobileDevice.ts

@@ -1,4 +0,0 @@
-export const isMobileDevice = () => {
-  if (typeof navigator === "undefined") return false
-  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./helpers"
-//
-export * from "./Checkbox"
-export * from "./Image"
-export * from "./ApplePayButton"