tinywidgets 1.1.4 → 1.2.0

package/eslint.config.js

@@ -138,47 +138,6 @@ export default tsLint.config(
     },
   },
 
-  {
-    files: ['src/@types/**/*.js'],
-    settings: {jsdoc: {mode: 'typescript', contexts: ['any']}},
-    rules: {
-      'jsdoc/check-tag-names': [
-        2,
-        {definedTags: ['category', 'packageDocumentation']},
-      ],
-      'jsdoc/no-restricted-syntax': [
-        2,
-        {
-          contexts: [
-            {
-              comment:
-                // eslint-disable-next-line max-len
-                'JsdocBlock:not(:has(JsdocTag[tag=/category|packageDocumentation/]))',
-              message: 'Every non-module block requires a @category tag',
-            },
-            {
-              comment: 'JsdocBlock:not(:has(JsdocTag[tag=since]))',
-              message: 'Every block requires a @since tag',
-            },
-            {
-              comment:
-                'JsdocBlock:has(JsdocTag[tag=since] ~ JsdocTag[tag=since])',
-              message: 'Every block must have only one @since tag',
-            },
-          ],
-        },
-      ],
-      'jsdoc/require-jsdoc': 2,
-      'jsdoc/require-description': 2,
-      'jsdoc/require-description-complete-sentence': 2,
-      'jsdoc/require-returns-description': 2,
-      'jsdoc/no-blank-blocks': 2,
-      'jsdoc/require-param-type': 0,
-      'jsdoc/require-returns-type': 0,
-      'jsdoc/check-param-names': 0,
-    },
-  },
-
   {
     files: ['eslint.config.js'],
     extends: [tsLint.configs.disableTypeChecked],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -16,31 +16,31 @@
   ],
   "type": "module",
   "scripts": {
-    "prePublishPackage": "prettier -l . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
+    "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@types/react": "^19.0.12",
-    "cspell": "^8.18.1",
-    "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.4",
+    "@eslint/js": "^9.25.1",
+    "@types/react": "^19.1.2",
+    "cspell": "^8.19.3",
+    "eslint": "^9.25.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
     "prettier": "^3.5.3",
-    "typescript": "^5.8.2"
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.0"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@eslint/js": "^9.23.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vanilla-extract/css": "^1.17.1",
-    "eslint-plugin-import": "^2.31.0",
-    "globals": "^16.0.0",
-    "lucide-react": "^0.485.0",
+    "lucide-react": "^0.503.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tinybase": "^6.0.0",
-    "typescript-eslint": "^8.28.0"
+    "tinybase": "^6.0.4"
   }
 }

package/src/common/functions.tsx

@@ -1,6 +1,6 @@
-import {screens} from '../css/screens';
 import type {StyleRule} from '@vanilla-extract/css';
-import React, {type ComponentType, type ReactNode} from 'react';
+import {type ComponentType, type ReactNode} from 'react';
+import {screens} from '../css/screens';
 
 /**
  * The `classNames` function returns a concatenated list of class names,

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

@@ -1,7 +1,7 @@
+import {style} from '@vanilla-extract/css';
 import {large} from '../../common/functions.tsx';
 import {colors} from '../../css/colors.css.ts';
 import {dimensions, dimensionsClass} from '../../css/dimensions.css.ts';
-import {style} from '@vanilla-extract/css';
 
 export const app = style([dimensionsClass, {color: colors.foreground}]);
 
@@ -78,3 +78,24 @@ export const mainHasSideNav = style(
     paddingLeft: `calc(${dimensions.sideNavWidth} + ${dimensions.padding})`,
   }),
 );
+
+export const mainHasFooter = style({
+  paddingBottom: `calc(${dimensions.footerHeight} + ${dimensions.padding})`,
+});
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'right',
+  alignItems: 'center',
+  gap: dimensions.padding,
+  padding: dimensions.padding,
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: dimensions.footerHeight,
+  backgroundColor: colors.backgroundHaze,
+  borderTop: colors.border,
+  boxShadow: colors.shadow,
+  backdropFilter: 'blur(8px)',
+});

package/src/components/App/index.tsx

@@ -1,3 +1,7 @@
+import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import type {OptionalSchemas} from 'tinybase/with-schemas';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {codeDark, codeLight} from '../../css/code.css.ts';
 import {colorsDark, colorsLight} from '../../css/colors.css.ts';
@@ -19,8 +23,10 @@ import {Button} from '../Button/index.tsx';
 import {
   app,
   appLayout,
+  footer,
   header,
   main,
+  mainHasFooter,
   mainHasSideNav,
   sideNav,
   sideNavButton,
@@ -28,11 +34,6 @@ import {
   title,
   topNav,
 } from './index.css.ts';
-import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
-import * as UiReact from 'tinybase/ui-react/with-schemas';
-import type {OptionalSchemas} from 'tinybase/with-schemas';
 
 const {Provider} = UiReact as UiReact.WithSchemas<OptionalSchemas>;
 
@@ -84,6 +85,11 @@ export const App = (props: {
    * the application.
    */
   readonly main?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders the footer of
+   * the application.
+   */
+  readonly footer?: ComponentType | ReactNode;
   /**
    * An extra CSS class name for the component.
    */
@@ -105,6 +111,7 @@ const Layout = ({
   topNavRight: topNavRightComponentOrNode,
   sideNav: sideNavComponentOrNode,
   main: mainComponentOrNode,
+  footer: footerComponentOrNode,
   className,
 }: Parameters<typeof App>[0]) => {
   const sessionStoreIsReady = useSessionStoreIsReady();
@@ -125,8 +132,10 @@ const Layout = ({
     topNavRightComponentOrNode,
     sideNavComponentOrNode,
     mainComponentOrNode,
+    footerComponentOrNode,
   ].some((componentOrNode) => componentOrNode);
   const hasSideNav = sideNavComponentOrNode != null;
+  const hasFooter = footerComponentOrNode != null;
 
   return sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
     <div
@@ -170,9 +179,20 @@ const Layout = ({
               </nav>
             ) : null}
           </header>
-          <main className={classNames(main, hasSideNav && mainHasSideNav)}>
+          <main
+            className={classNames(
+              main,
+              hasSideNav && mainHasSideNav,
+              hasFooter && mainHasFooter,
+            )}
+          >
             {renderComponentOrNode(mainComponentOrNode)}
           </main>
+          {hasFooter ? (
+            <footer className={footer}>
+              {renderComponentOrNode(footerComponentOrNode)}
+            </footer>
+          ) : null}
         </>
       ) : null}
     </div>

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const button = style({
   display: 'inline-flex',

package/src/components/Button/index.tsx

@@ -1,3 +1,5 @@
+import type {ComponentType, ReactNode} from 'react';
+import {useCallback} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {iconSize} from '../../css/dimensions.css.ts';
 import {
@@ -7,8 +9,6 @@ import {
   titleStyle,
   titleStyleRight,
 } from './index.css.ts';
-import type {ComponentType, ReactNode, Ref} from 'react';
-import React, {forwardRef, useCallback} from 'react';
 
 /**
  * The `Button` component displays an button, with a number of common variants.
@@ -103,104 +103,101 @@ import React, {forwardRef, useCallback} from 'react';
  * 'current'.
  * @icon Lucide.RectangleHorizontal
  */
-export const Button = forwardRef(
-  (
-    {
-      icon: Icon,
-      title: titleComponentOrNode,
-      titleRight: titleRightComponentOrNode,
-      iconRight: IconRight,
-      onClick,
-      variant = 'default',
-      current,
-      href,
-      alt,
-      className,
-    }: {
-      /**
-       * An optional component which renders an icon for the button, and which
-       * must accept a className prop.
-       */
-      readonly icon?: ComponentType<{className?: string}>;
-      /**
-       * An optional component, element, or string which renders the title of
-       * the button.
-       */
-      readonly title?: ComponentType | ReactNode;
-      /**
-       * An optional component, element, or string which renders a second title
-       * on the right side of the button.
-       */
-      readonly titleRight?: ComponentType | ReactNode;
-      /**
-       * An optional component which renders a second icon for the button, and
-       * which must accept a className prop.
-       */
-      readonly iconRight?: ComponentType<{className?: string}>;
-      /**
-       * A handler called when the user clicks on the button.
-       */
-      readonly onClick?: () => void;
-      /**
-       * A variant of the button, one of:
-       * - `default`
-       * - `icon`
-       * - `accent`
-       * - `ghost`
-       * - `item`
-       */
-      readonly variant?: keyof typeof buttonVariants;
-      /**
-       * A flag that indicates that an `item` button is 'current' and therefore
-       * highlighted.
-       */
-      readonly current?: boolean;
-      /**
-       * 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 button.
-       */
-      readonly alt?: string;
-      /**
-       * An extra CSS class name for the component.
-       */
-      readonly className?: string;
-    },
-    ref: Ref<HTMLButtonElement>,
-  ) => {
-    const hrefClick = useCallback(
-      () => (href ? open(href, '_blank', 'noreferrer') : null),
-      [href],
-    );
+export const Button = ({
+  icon: Icon,
+  title: titleComponentOrNode,
+  titleRight: titleRightComponentOrNode,
+  iconRight: IconRight,
+  onClick,
+  variant = 'default',
+  current,
+  href,
+  alt,
+  className,
+  ref,
+}: {
+  /**
+   * An optional component which renders an icon for the button, and which
+   * must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the button.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders a second title
+   * on the right side of the button.
+   */
+  readonly titleRight?: ComponentType | ReactNode;
+  /**
+   * An optional component which renders a second icon for the button, and
+   * which must accept a className prop.
+   */
+  readonly iconRight?: ComponentType<{className?: string}>;
+  /**
+   * A handler called when the user clicks on the button.
+   */
+  readonly onClick?: () => void;
+  /**
+   * A variant of the button, one of:
+   * - `default`
+   * - `icon`
+   * - `accent`
+   * - `ghost`
+   * - `item`
+   */
+  readonly variant?: keyof typeof buttonVariants;
+  /**
+   * A flag that indicates that an `item` button is 'current' and therefore
+   * highlighted.
+   */
+  readonly current?: boolean;
+  /**
+   * 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 button.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const hrefClick = useCallback(
+    () => (href ? open(href, '_blank', 'noreferrer') : null),
+    [href],
+  );
 
-    return (
-      <button
-        className={classNames(
-          button,
-          buttonVariants[variant],
-          current && currentStyle,
-          className,
-        )}
-        onClick={onClick ?? hrefClick}
-        title={alt}
-        ref={ref}
-      >
-        {Icon ? <Icon className={iconSize} /> : null}
-        {titleComponentOrNode ? (
-          <span className={titleStyle}>
-            {renderComponentOrNode(titleComponentOrNode)}
-          </span>
-        ) : null}
-        {titleRightComponentOrNode ? (
-          <span className={titleStyleRight}>
-            {renderComponentOrNode(titleRightComponentOrNode)}
-          </span>
-        ) : null}
-        {IconRight ? <IconRight className={iconSize} /> : null}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      className={classNames(
+        button,
+        buttonVariants[variant],
+        current && currentStyle,
+        className,
+      )}
+      onClick={onClick ?? hrefClick}
+      title={alt}
+      ref={ref}
+    >
+      {Icon ? <Icon className={iconSize} /> : null}
+      {titleComponentOrNode ? (
+        <span className={titleStyle}>
+          {renderComponentOrNode(titleComponentOrNode)}
+        </span>
+      ) : null}
+      {titleRightComponentOrNode ? (
+        <span className={titleStyleRight}>
+          {renderComponentOrNode(titleRightComponentOrNode)}
+        </span>
+      ) : null}
+      {IconRight ? <IconRight className={iconSize} /> : null}
+    </button>
+  );
+};

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const card = style({
   padding: dimensions.padding,

package/src/components/Card/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {card} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Card` component displays a simple rectangular container.

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

@@ -1,7 +1,7 @@
+import {globalStyle, style} from '@vanilla-extract/css';
 import {code} from '../../css/code.css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {globalStyle, style} from '@vanilla-extract/css';
 
 export const pre = style({
   padding: dimensions.padding,

package/src/components/Code/index.tsx

@@ -1,6 +1,5 @@
 import {classNames} from '../../common/functions.tsx';
 import {pre} from './index.css.ts';
-import React from 'react';
 
 /**
  * The `Code` component displays a block of pre-formatted code, and uses PrismJS

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const collapsible = style({
   width: '100%',

package/src/components/Collapsible/index.tsx

@@ -1,3 +1,6 @@
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import {useCallback, useRef, useState} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {
   useCollapsibleIsOpen,
@@ -11,9 +14,6 @@ import {
   collapsibleOpen,
   content,
 } from './index.css.ts';
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
-import React, {useCallback, useRef, useState} from 'react';
 
 /**
  * The `Collapsible` component displays a titled box that can be expanded or

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

@@ -1,5 +1,5 @@
-import {colors} from '../../css/colors.css';
 import {style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
 
 export const detailTable = style({
   width: '100%',

package/src/components/Detail/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {detailCell, detailRow, detailTable} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Detail` component displays a set of key-value pairs in a two-column

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const hr = style({
   border: 'none',

package/src/components/Hr/index.tsx

@@ -1,6 +1,5 @@
 import {classNames} from '../../common/functions';
 import {hr} from './index.css';
-import React from 'react';
 
 /**
  * The `Hr` component displays a styled horizontal rule.

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const image = style({
   display: 'inline-block',

package/src/components/Image/index.tsx

@@ -1,6 +1,6 @@
+import {useCallback} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {clickable, image, imageVariants} from './index.css.ts';
-import React, {useCallback} from 'react';
 
 /**
  * The `Image` component displays an image, with a number of common variants.

package/src/components/Metric/index.tsx

@@ -1,8 +1,7 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
 import {iconSize} from '../../css/dimensions.css';
 import {metric, metricLabel, metricNumber} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Metric` component displays a metric as a prominent numerical value with

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {notLarge} from '../../common/functions.tsx';
 import {dimensions} from '../../css/dimensions.css.ts';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const row = style({
   display: 'grid',

package/src/components/Row/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {row, rowVariants} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Row` component displays a row of 'cell' components, with a number of

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {notLarge} from '../../common/functions.tsx';
 import {dimensions} from '../../css/dimensions.css.ts';
-import {style} from '@vanilla-extract/css';
 
 export const summary = style({
   display: 'grid',

package/src/components/Summary/index.tsx

@@ -1,8 +1,7 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {Image} from '../Image';
 import {image, summary} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Summary` component displays an image on the left, and other content

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

@@ -1,5 +1,5 @@
-import {colors} from '../../css/colors.css';
 import {style, styleVariants} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
 
 export const tag = style({
   display: 'flex',

package/src/components/Tag/index.tsx

@@ -1,7 +1,6 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
 import {tag, tagIcon, tagVariants} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Tag` component displays a small rectangular tag, suitable for minimal

package/src/css/dimensions.css.ts

@@ -8,6 +8,7 @@ const classAndObject = createTheme({
   radius: fallbackVar('var(--tinyWidgets-radius)', '0.5rem'),
   sideNavWidth: fallbackVar('var(--tinyWidgets-sideNavWidth)', '20rem'),
   topNavHeight: fallbackVar('var(--tinyWidgets-topNavHeight)', '4rem'),
+  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
 });
 export const dimensionsClass = classAndObject[0];
 
@@ -24,6 +25,7 @@ export const dimensionsClass = classAndObject[0];
  * - `radius`
  * - `sideNavWidth`
  * - `topNavHeight`
+ * - `footerHeight`
  *
  * You can use these variables directly in React components that take style
  * attributes, like this: