tinywidgets 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -22,26 +22,30 @@
     "@eslint/js": "^9.30.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "cspell": "^9.7.0",
+    "cspell": "^10.0.0",
     "eslint": "^9.30.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^17.4.0",
-    "prettier": "^3.8.1",
+    "globals": "^17.5.0",
+    "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1"
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.58.2"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.20.0",
-    "lucide-react": "^0.577.0",
+    "@vanilla-extract/css": "^1.20.1",
+    "lucide-react": "^1.8.0",
+    "tinybase": "^8.2.0"
+  },
+  "peerDependencies": {
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tinybase": "^8.0.2"
+    "react-dom": "^19.2.4"
   }
-}
+}

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

@@ -0,0 +1,84 @@
+import {keyframes, style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+const spin = keyframes({
+  from: {transform: 'rotate(0deg)'},
+  to: {transform: 'rotate(360deg)'},
+});
+
+const shimmer = keyframes({
+  from: {transform: 'translateX(-100%)'},
+  to: {transform: 'translateX(100%)'},
+});
+
+export const loading = style({
+  display: 'grid',
+  gridTemplateRows: 'auto minmax(0, 1fr)',
+  gap: `calc(${dimensions.padding} / 1.5)`,
+  alignContent: 'start',
+});
+
+export const header = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: `calc(${dimensions.padding} / 2)`,
+  color: colors.foregroundDim,
+});
+
+export const spinner = style({
+  width: dimensions.icon,
+  height: dimensions.icon,
+  borderRadius: '999px',
+  border: `2px solid ${colors.backgroundHover}`,
+  borderTopColor: colors.accent,
+  animation: `${spin} .9s linear infinite`,
+  '@media': {
+    '(prefers-reduced-motion: reduce)': {
+      animation: 'none',
+    },
+  },
+});
+
+export const label = style({
+  fontSize: '.95rem',
+});
+
+export const rows = style({
+  position: 'relative',
+  display: 'grid',
+  gap: `calc(${dimensions.padding} / 2)`,
+  minHeight: 0,
+  overflow: 'hidden',
+});
+
+export const row = style({
+  position: 'relative',
+  overflow: 'hidden',
+  height: '.875rem',
+  borderRadius: dimensions.radius,
+  background: colors.background2,
+  selectors: {
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      background: `linear-gradient(
+        90deg,
+        transparent,
+        ${colors.backgroundHover},
+        transparent
+      )`,
+      animation: `${shimmer} 1.6s ease-in-out infinite`,
+    },
+  },
+  '@media': {
+    '(prefers-reduced-motion: reduce)': {
+      selectors: {
+        '&::after': {
+          animation: 'none',
+        },
+      },
+    },
+  },
+});

package/src/components/Loading/index.tsx

@@ -0,0 +1,137 @@
+import {useEffect, useRef, useState} from 'react';
+import {classNames} from '../../common/functions';
+import {
+  header,
+  label,
+  loading,
+  row,
+  rows as rowsClass,
+  spinner,
+} from './index.css';
+
+const WIDTHS = ['100%', '92%', '84%', '96%', '72%', '88%', '67%', '81%'];
+const DEFAULT_ROW_COUNT = 5;
+
+/**
+ * The `Loading` component displays a compact spinner with optional shimmer rows
+ * to reserve space while content is loading.
+ *
+ * @param props The props for the component.
+ * @returns The Loading component.
+ * @example
+ * ```tsx
+ * <Loading labelText="Loading dependencies" />
+ * ```
+ * This example shows the default loading panel. Add a CSS height to the
+ * component to fit more placeholder rows automatically.
+ * @example
+ * ```tsx
+ * <>
+ *   <style>{`
+ *     .tallLoading {
+ *       height: 12rem;
+ *     }
+ *   `}</style>
+ *   <Loading className="tallLoading" labelText="Loading dependencies" />
+ * </>
+ * ```
+ * This example uses CSS to make the loading panel taller, allowing more
+ * placeholder rows to fit automatically.
+ * @icon Lucide.LoaderCircle
+ */
+export const Loading = ({
+  labelText = 'Loading',
+  className,
+}: {
+  /**
+   * The label shown beside the spinner.
+   */
+  readonly labelText?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const rowsRef = useRef<HTMLDivElement>(null);
+  const measureRowRef = useRef<HTMLDivElement>(null);
+
+  const [rowCount, setRowCount] = useState(DEFAULT_ROW_COUNT);
+
+  useEffect(() => {
+    const updateRowCount = () => {
+      const root = rootRef.current;
+      const header = headerRef.current;
+      const rows = rowsRef.current;
+      const measureRow = measureRowRef.current;
+      if (
+        root == null ||
+        header == null ||
+        rows == null ||
+        measureRow == null
+      ) {
+        return;
+      }
+
+      const rootStyles = getComputedStyle(root);
+      const rowsStyles = getComputedStyle(rows);
+      const rootGap =
+        parseFloat(rootStyles.rowGap || rootStyles.gap || '0') || 0;
+      const rowsGap =
+        parseFloat(rowsStyles.rowGap || rowsStyles.gap || '0') || 0;
+      const availableHeight =
+        root.getBoundingClientRect().height -
+        header.getBoundingClientRect().height -
+        rootGap;
+      const rowHeight = measureRow.getBoundingClientRect().height;
+
+      const nextRowCount = Math.max(
+        0,
+        Math.floor((availableHeight + rowsGap) / (rowHeight + rowsGap)),
+      );
+      setRowCount((currentRowCount) =>
+        currentRowCount === nextRowCount ? currentRowCount : nextRowCount,
+      );
+    };
+
+    updateRowCount();
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(updateRowCount);
+    if (rootRef.current != null) {
+      resizeObserver.observe(rootRef.current);
+    }
+    if (headerRef.current != null) {
+      resizeObserver.observe(headerRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return (
+    <div ref={rootRef} className={classNames(loading, className)}>
+      <div ref={headerRef} className={header}>
+        <span className={spinner} />
+        <span className={label}>{labelText}</span>
+      </div>
+      <div ref={rowsRef} className={rowsClass}>
+        <div
+          ref={measureRowRef}
+          className={row}
+          style={{position: 'absolute', width: 0, visibility: 'hidden'}}
+        />
+        {rowCount > 0
+          ? Array.from({length: rowCount}, (_, index) => (
+              <div
+                key={index}
+                className={row}
+                style={{width: WIDTHS[index % WIDTHS.length]}}
+              />
+            ))
+          : null}
+      </div>
+    </div>
+  );
+};

package/src/index.ts

@@ -10,6 +10,7 @@ export {Flyout} from './components/Flyout/index.tsx';
 export {Hr} from './components/Hr/index.tsx';
 export {Image} from './components/Image/index.tsx';
 export {ImageLabel} from './components/ImageLabel/index.tsx';
+export {Loading} from './components/Loading/index.tsx';
 export {Metric} from './components/Metric/index.tsx';
 export {Row} from './components/Row/index.tsx';
 export {Select} from './components/Select/index.tsx';