tinywidgets 1.4.0 → 1.6.0

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

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/components/Row/index.css.ts

@@ -4,27 +4,27 @@ import {dimensions} from '../../css/dimensions.css.ts';
 
 export const row = style({
   display: 'grid',
-  width: '100%',
   gap: dimensions.padding,
+  width: '100%',
   ...notLarge({gridTemplateColumns: '1fr'}),
 });
 
 export const rowVariants = styleVariants({
   '1|1': {gridTemplateColumns: `calc((100% - ${dimensions.padding})/2) 1fr`},
-  '1|2': {
-    gridTemplateColumns: `calc((100% - ${dimensions.padding}*2)/3) 1fr`,
-  },
-  '2|1': {
-    gridTemplateColumns: `1fr calc((100% - ${dimensions.padding}*2)/3)`,
-  },
   '1|1|1': {
     gridTemplateColumns: `1fr 1fr 1fr`,
   },
+  '1|1|1|1': {gridTemplateColumns: '1fr 1fr 1fr 1fr'},
+  '1|2': {
+    gridTemplateColumns: `calc((100% - ${dimensions.padding}*2)/3) 1fr`,
+  },
   '1|3': {
     gridTemplateColumns: `calc((100% - ${dimensions.padding}*3)/4) 1fr`,
   },
+  '2|1': {
+    gridTemplateColumns: `1fr calc((100% - ${dimensions.padding}*2)/3)`,
+  },
   '3|1': {
     gridTemplateColumns: `1fr calc((100% - ${dimensions.padding}*3)/4)`,
   },
-  '1|1|1|1': {gridTemplateColumns: '1fr 1fr 1fr 1fr'},
 });

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

@@ -1,17 +1,28 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
 export const select = style({
+  backgroundColor: colors.background,
+  border: colors.border,
   borderRadius: dimensions.radius,
-  padding: '0.5rem',
-  outlineOffset: '2px',
+  boxSizing: 'border-box',
+  boxShadow: colors.shadow,
   color: 'inherit',
-  fontWeight: 'inherit',
   fontFamily: 'inherit',
-  boxShadow: colors.shadow,
-  border: colors.border,
-  backgroundColor: colors.background,
-  boxSizing: 'content-box',
-  height: '1.5rem',
+  fontWeight: 'inherit',
+  outlineOffset: '2px',
+});
+
+export const selectVariants = styleVariants({
+  default: {
+    height: '2.5rem',
+    padding: '0.5rem',
+  },
+  small: {
+    fontSize: '0.75rem',
+    height: '1.5rem',
+    lineHeight: '0.875rem',
+    padding: '0.1875rem 0.375rem',
+  },
 });

package/src/components/Select/index.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useState} from 'react';
 import {classNames} from '../../common/functions.tsx';
-import {select} from './index.css.ts';
+import {select, selectVariants} from './index.css.ts';
 
 /**
  * The `Select` component displays a managed select input with an existing
@@ -16,6 +16,15 @@ import {select} from './index.css.ts';
  *   onChange={(option) => console.log(option)}
  * />
  * ```
+ * @example
+ * ```tsx
+ * <Select
+ *   initialOption="CA"
+ *   options={{AL: 'Albania', BE: 'Belgium', CA: 'Canada'}}
+ *   variant="small"
+ * />
+ * ```
+ * This example shows the `small` variant of the Select component.
  * @icon Lucide.Combine
  */
 export const Select = ({
@@ -24,6 +33,7 @@ export const Select = ({
   onChange,
   alt,
   className,
+  variant = 'default',
   ref,
 }: {
   /**
@@ -46,6 +56,15 @@ export const Select = ({
    * An extra CSS class name for the component.
    */
   readonly className?: string;
+  /**
+   * A variant of the select, one of:
+   * - `default`
+   * - `small`
+   */
+  readonly variant?: keyof typeof selectVariants;
+  /**
+   * A ref to the underlying select element.
+   */
   ref?: React.RefObject<HTMLSelectElement | null>;
 }) => {
   const [option, setOption] = useState(initialOption ?? '');
@@ -63,12 +82,12 @@ export const Select = ({
     [change],
   );
 
-  useEffect(() => change(initialOption ?? ''), [change, initialOption]);
+  useEffect(() => setOption(initialOption ?? ''), [initialOption]);
 
   return (
     <select
       value={option}
-      className={classNames(select, className)}
+      className={classNames(select, selectVariants[variant], className)}
       onChange={handleChange}
       title={alt}
       ref={ref}

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

@@ -4,9 +4,9 @@ import {dimensions} from '../../css/dimensions.css.ts';
 
 export const summary = style({
   display: 'grid',
-  width: '100%',
   gap: dimensions.padding,
   gridTemplateColumns: `6rem 1fr`,
+  width: '100%',
   ...notLarge({gridTemplateColumns: '1fr'}),
 });
 

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

@@ -2,25 +2,25 @@ import {globalStyle, style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 
 export const table = style({
-  width: '100%',
+  borderCollapse: 'collapse',
   height: '100%',
   padding: 0,
-  borderCollapse: 'collapse',
   tableLayout: 'fixed',
+  width: '100%',
 });
 
 globalStyle(`${table} th, ${table} td`, {
+  borderColor: colors.borderColor,
+  borderStyle: 'solid',
+  borderWidth: '1px 0',
   overflow: 'hidden',
   padding: '0.25rem 1rem',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  borderWidth: '1px 0',
-  borderStyle: 'solid',
-  borderColor: colors.borderColor,
   textAlign: 'left',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 
 globalStyle(`${table} th`, {
-  fontWeight: 'inherit',
   backgroundColor: colors.backgroundHover,
+  fontWeight: 'inherit',
 });

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

@@ -2,26 +2,26 @@ import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 
 export const tag = style({
+  borderRadius: '0.25rem',
+  flexShrink: 0,
   fontSize: '0.625rem',
+  gap: '0.25rem',
   lineHeight: '0.625rem',
   padding: '0.1rem 0.25rem',
-  borderRadius: '0.25rem',
-  gap: '0.25rem',
-  flexShrink: 0,
 });
 
 export const tagVariants = styleVariants({
-  default: {
-    backgroundColor: colors.backgroundHover,
-    color: colors.foregroundDim,
-  },
   accent: {
     backgroundColor: colors.accent,
     color: colors.accentContrast,
   },
+  default: {
+    backgroundColor: colors.backgroundHover,
+    color: colors.foregroundDim,
+  },
 });
 
 export const tagIcon = style({
-  width: '0.7rem',
   height: '0.7rem',
+  width: '0.7rem',
 });

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

@@ -1,37 +1,68 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
 export const wrapper = style({
-  flexShrink: 0,
-  alignSelf: 'center',
+  alignSelf: 'stretch',
+  display: 'block',
+  flex: '1 1 auto',
+  minWidth: 0,
   position: 'relative',
-  display: 'inline-block',
 });
 
 export const input = style({
+  backgroundColor: colors.background,
+  border: colors.border,
   borderRadius: dimensions.radius,
-  padding: '0.5rem',
-  outlineOffset: '2px',
+  boxSizing: 'border-box',
+  boxShadow: colors.shadow + ' inset',
   color: 'inherit',
-  fontWeight: 'inherit',
   fontFamily: 'inherit',
-  boxShadow: colors.shadow + ' inset',
-  border: colors.border,
-  backgroundColor: colors.background,
-  lineHeight: '1.5rem',
+  fontWeight: 'inherit',
+  outlineOffset: '2px',
+  width: '100%',
+});
+
+export const inputVariants = styleVariants({
+  default: {
+    height: '2.5rem',
+    lineHeight: '1.5rem',
+    padding: '0.5rem',
+  },
+  small: {
+    fontSize: '0.75rem',
+    height: '1.5rem',
+    lineHeight: '0.875rem',
+    padding: '0.1875rem 0.375rem',
+  },
 });
 
-export const inputWithIcon = style({
-  textIndent: `calc(${dimensions.icon} * 1.3)`,
+export const inputWithIconVariants = styleVariants({
+  default: {
+    textIndent: `calc(${dimensions.icon} * 1.3)`,
+  },
+  small: {
+    textIndent: '1rem',
+  },
 });
 
 export const icon = style({
-  position: 'absolute',
-  left: `calc(${dimensions.icon} * .5)`,
-  top: `calc(${dimensions.icon} * .8)`,
-  color: colors.foregroundDim,
   backgroundColor: colors.background,
   borderRight: `calc(${dimensions.icon} * .25) solid ${colors.background}`,
   boxSizing: 'content-box',
+  color: colors.foregroundDim,
+  left: `calc(${dimensions.icon} * .5)`,
+  position: 'absolute',
+  top: `calc(${dimensions.icon} * .8)`,
+});
+
+export const iconVariants = styleVariants({
+  default: {},
+  small: {
+    borderRight: `calc(${dimensions.icon} * .2) solid ${colors.background}`,
+    height: '0.75rem',
+    left: '0.375rem',
+    top: '0.4375rem',
+    width: '0.75rem',
+  },
 });

package/src/components/TextInput/index.tsx

@@ -1,7 +1,14 @@
 import {useCallback, useEffect, useState, type ComponentType} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {iconSize} from '../../css/dimensions.css.ts';
-import {icon, input, inputWithIcon, wrapper} from './index.css.ts';
+import {
+  icon,
+  iconVariants,
+  input,
+  inputVariants,
+  inputWithIconVariants,
+  wrapper,
+} from './index.css.ts';
 
 /**
  * The `TextInput` component displays a managed text input with an existing
@@ -23,6 +30,17 @@ import {icon, input, inputWithIcon, wrapper} from './index.css.ts';
  * ```
  * This example shows the TextInput component with an inset icon and
  * placeholder.
+ * @example
+ * ```tsx
+ * <TextInput initialText="42" variant="small" />
+ * ```
+ * This example shows the `small` variant of the TextInput component.
+ * @example
+ * ```tsx
+ * <TextInput icon={Lucide.Search} placeholder="Search..." variant="small" />
+ * ```
+ * This example shows the `small` variant of the TextInput component with an
+ * inset icon and placeholder.
  * @icon Lucide.TextCursorInput
  */
 export const TextInput = ({
@@ -32,6 +50,7 @@ export const TextInput = ({
   icon: Icon,
   alt,
   className,
+  variant = 'default',
   ref,
 }: {
   /**
@@ -59,6 +78,15 @@ export const TextInput = ({
    * An extra CSS class name for the component.
    */
   readonly className?: string;
+  /**
+   * A variant of the input, one of:
+   * - `default`
+   * - `small`
+   */
+  readonly variant?: keyof typeof inputVariants;
+  /**
+   * A ref to the underlying input element.
+   */
   ref?: React.RefObject<HTMLInputElement | null>;
 }) => {
   const [text, setText] = useState(initialText ?? '');
@@ -76,15 +104,21 @@ export const TextInput = ({
     [change],
   );
 
-  useEffect(() => change(initialText ?? ''), [change, initialText]);
+  useEffect(() => setText(initialText ?? ''), [initialText]);
 
   return (
-    <div className={wrapper}>
-      {Icon ? <Icon className={classNames(iconSize, icon)} /> : null}
+    <div className={classNames(wrapper, className)}>
+      {Icon ? (
+        <Icon className={classNames(iconSize, icon, iconVariants[variant])} />
+      ) : null}
       <input
         value={text}
         placeholder={placeholder}
-        className={classNames(input, Icon && inputWithIcon, className)}
+        className={classNames(
+          input,
+          inputVariants[variant],
+          Icon && inputWithIconVariants[variant],
+        )}
         onChange={handleChange}
         title={alt}
         ref={ref}

package/src/css/classes.css.ts

@@ -0,0 +1,42 @@
+import {table} from '../components/Table/index.css.ts';
+
+/**
+ * The `classes` object exposes reusable TinyWidgets CSS classes so they can be
+ * applied to markup rendered by other libraries.
+ *
+ * The current members are:
+ * - `table`
+ *
+ * @example
+ * ```tsx
+ * <table className={classes.table}>
+ *   <thead>
+ *     <tr>
+ *       <th>Name</th>
+ *       <th>Species</th>
+ *       <th>Color</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Fido</td>
+ *       <td>Dog</td>
+ *       <td>Brown</td>
+ *     </tr>
+ *     <tr>
+ *       <td>Felix</td>
+ *       <td>Cat</td>
+ *       <td>Black</td>
+ *     </tr>
+ *     <tr>
+ *       <td>Cujo</td>
+ *       <td>Wolf</td>
+ *       <td>Gray</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * ```
+ * This example applies the TinyWidgets table style to existing table markup.
+ * @icon Lucide.Shapes
+ */
+export const classes = {table};