tinywidgets 1.0.14 → 1.0.15

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "tinywidgets",
-  "description": "A collection of tiny, reusable, React components",
-  "version": "1.0.14",
-  "scripts": {
-    "prePublishPackage": "eslint . && cspell --quiet . && tsc"
-  },
+  "version": "1.0.15",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
+  "license": "MIT",
+  "homepage": "https://tinywidgets.org",
+  "description": "A collection of tiny, reusable, UI components - wrapped in a helpful app layout with header, side bar, dark mode, and more.",
+  "keywords": [
+    "tiny",
+    "local-first",
+    "ui",
+    "components",
+    "styling",
+    "react"
+  ],
   "type": "module",
+  "scripts": {
+    "prePublishPackage": "eslint . && cspell --quiet . && tsc"
+  },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
@@ -26,7 +36,6 @@
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
-  "license": "MIT",
   "dependencies": {
     "@vanilla-extract/css": "^1.16.0",
     "lucide-react": "^0.447.0",

package/src/components/Image/index.css.ts

@@ -7,6 +7,10 @@ export const image = style({
   flexShrink: 0,
   width: '100%',
   maxHeight: 'inherit',
+});
+
+export const clickable = style({
+  cursor: 'pointer',
   selectors: {
     '&:hover': {
       backgroundColor: colors.backgroundHover,

package/src/components/Image/index.tsx

@@ -1,5 +1,5 @@
-import {image, imageVariants} from './index.css.ts';
-import React from 'react';
+import React, {useCallback} from 'react';
+import {clickable, image, imageVariants} from './index.css.ts';
 import {classNames} from '../../common/functions.tsx';
 
 /**
@@ -46,6 +46,7 @@ export const Image = ({
   src,
   onClick,
   variant = 'default',
+  href,
   alt,
   className,
 }: {
@@ -65,6 +66,11 @@ export const Image = ({
    * - `icon`
    */
   readonly variant?: keyof typeof imageVariants;
+  /**
+   * A URL that can be used instead of an `onClick` to launch a new web
+   * page, much like a link.
+   */
+  readonly href?: string;
   /**
    * Alternative text shown when the user hovers over the image.
    */
@@ -74,12 +80,22 @@ export const Image = ({
    */
   readonly className?: string;
 }) => {
+  const hrefClick = useCallback(
+    () => (href ? open(href, '_blank', 'noreferrer') : null),
+    [href],
+  );
+
   return (
     <img
       src={src}
-      onClick={onClick}
+      onClick={onClick ?? hrefClick}
       title={alt}
-      className={classNames(image, imageVariants[variant], className)}
+      className={classNames(
+        image,
+        imageVariants[variant],
+        (onClick || href) && clickable,
+        className,
+      )}
     />
   );
 };

package/src/css/global.css.ts

@@ -7,5 +7,5 @@ globalStyle('*', {
   boxSizing: 'border-box',
   color: 'inherit',
   fontSize: 'inherit',
-  ...small({fontSize: '0.85rem'}),
+  ...small({fontSize: '0.9rem'}),
 });