tinywidgets 1.5.0 → 1.6.0

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

@@ -13,31 +13,31 @@ const shimmer = keyframes({
 });
 
 export const loading = style({
+  alignContent: 'start',
   display: 'grid',
-  gridTemplateRows: 'auto minmax(0, 1fr)',
   gap: `calc(${dimensions.padding} / 1.5)`,
-  alignContent: 'start',
+  gridTemplateRows: 'auto minmax(0, 1fr)',
 });
 
 export const header = style({
-  display: 'flex',
   alignItems: 'center',
-  gap: `calc(${dimensions.padding} / 2)`,
   color: colors.foregroundDim,
+  display: 'flex',
+  gap: `calc(${dimensions.padding} / 2)`,
 });
 
 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',
     },
   },
+  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({
@@ -45,40 +45,40 @@ export const label = style({
 });
 
 export const rows = style({
-  position: 'relative',
   display: 'grid',
   gap: `calc(${dimensions.padding} / 2)`,
   minHeight: 0,
   overflow: 'hidden',
+  position: 'relative',
 });
 
 export const row = style({
-  position: 'relative',
-  overflow: 'hidden',
-  height: '.875rem',
-  borderRadius: dimensions.radius,
+  '@media': {
+    '(prefers-reduced-motion: reduce)': {
+      selectors: {
+        '&::after': {
+          animation: 'none',
+        },
+      },
+    },
+  },
   background: colors.background2,
+  borderRadius: dimensions.radius,
+  height: '.875rem',
+  overflow: 'hidden',
+  position: 'relative',
   selectors: {
     '&::after': {
-      content: '""',
-      position: 'absolute',
-      inset: 0,
+      animation: `${shimmer} 1.6s ease-in-out infinite`,
       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',
-        },
-      },
+      content: '""',
+      inset: 0,
+      position: 'absolute',
     },
   },
 });

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};

package/src/css/code.css.ts

@@ -54,9 +54,6 @@ import {createTheme, createThemeContract} from '@vanilla-extract/css';
  * @icon Lucide.Palette
  */
 export const code = createThemeContract({
-  'mono-1': null,
-  'mono-2': null,
-  'mono-3': null,
   'hue-1': null,
   'hue-2': null,
   'hue-3': null,
@@ -65,17 +62,17 @@ export const code = createThemeContract({
   'hue-5-2': null,
   'hue-6': null,
   'hue-6-2': null,
-  'syntax-fg': null,
+  'mono-1': null,
+  'mono-2': null,
+  'mono-3': null,
+  'syntax-accent': null,
   'syntax-bg': null,
-  'syntax-gutter': null,
+  'syntax-fg': null,
   'syntax-guide': null,
-  'syntax-accent': null,
+  'syntax-gutter': null,
 });
 
 export const codeLight = createTheme(code, {
-  'mono-1': `hsl(230, 8%, 24%)`,
-  'mono-2': `hsl(230, 6%, 44%)`,
-  'mono-3': `hsl(230, 4%, 64%)`,
   'hue-1': `hsl(198, 99%, 37%)`,
   'hue-2': `hsl(221, 87%, 60%)`,
   'hue-3': `hsl(301, 63%, 40%)`,
@@ -84,17 +81,17 @@ export const codeLight = createTheme(code, {
   'hue-5-2': `hsl(344, 84%, 43%)`,
   'hue-6': `hsl(35, 99%, 36%)`,
   'hue-6-2': `hsl(35, 99%, 40%)`,
-  'syntax-fg': `hsl(230, 8%, 24%)`,
+  'mono-1': `hsl(230, 8%, 24%)`,
+  'mono-2': `hsl(230, 6%, 44%)`,
+  'mono-3': `hsl(230, 4%, 64%)`,
+  'syntax-accent': `hsl(230, 100%, 66%)`,
   'syntax-bg': `hsl(230, 1%, 98%)`,
-  'syntax-gutter': `hsl(230, 1%, 62%)`,
+  'syntax-fg': `hsl(230, 8%, 24%)`,
   'syntax-guide': `hsla(230, 8%, 24%, 0.2)`,
-  'syntax-accent': `hsl(230, 100%, 66%)`,
+  'syntax-gutter': `hsl(230, 1%, 62%)`,
 });
 
 export const codeDark = createTheme(code, {
-  'mono-1': `hsl(220, 14%, 71%)`,
-  'mono-2': `hsl(220, 9%, 55%)`,
-  'mono-3': `hsl(220, 10%, 40%)`,
   'hue-1': `hsl(187, 47%, 55%)`,
   'hue-2': `hsl(207, 82%, 66%)`,
   'hue-3': `hsl(286, 60%, 67%)`,
@@ -103,9 +100,12 @@ export const codeDark = createTheme(code, {
   'hue-5-2': `hsl(5, 48%, 51%)`,
   'hue-6': `hsl(29, 54%, 61%)`,
   'hue-6-2': `hsl(39, 67%, 69%)`,
-  'syntax-fg': `hsl(220, 14%, 71%)`,
+  'mono-1': `hsl(220, 14%, 71%)`,
+  'mono-2': `hsl(220, 9%, 55%)`,
+  'mono-3': `hsl(220, 10%, 40%)`,
+  'syntax-accent': `hsl(220, 100%, 66%)`,
   'syntax-bg': `hsl(220, 13%, 18%)`,
-  'syntax-gutter': `hsl(220, 14%, 45%)`,
+  'syntax-fg': `hsl(220, 14%, 71%)`,
   'syntax-guide': `hsla(220, 14%, 71%, 0.15)`,
-  'syntax-accent': `hsl(220, 100%, 66%)`,
+  'syntax-gutter': `hsl(220, 14%, 45%)`,
 });

package/src/css/colors.css.ts

@@ -66,53 +66,53 @@ import {
  * @icon Lucide.Palette
  */
 export const colors = createThemeContract({
-  accentHue: null,
-  backgroundHue: null,
   accent: null,
-  accentLight: null,
-  accentHover: null,
-  accentContrast: null,
   accentBright: null,
+  accentContrast: null,
+  accentHover: null,
+  accentHue: null,
+  accentLight: null,
   background: null,
   background2: null,
+  backgroundExtreme: null,
   backgroundHaze: null,
   backgroundHover: null,
-  backgroundExtreme: null,
+  backgroundHue: null,
+  border: null,
+  borderColor: null,
   foreground: null,
   foregroundBright: null,
   foregroundDim: null,
   foregroundExtreme: null,
-  borderColor: null,
-  border: null,
   shadow: null,
 });
 
 const common = {
+  accent: `oklch(50% .11 ${colors.accentHue})`,
+  accentBright: `oklch(57.37% 0.2178 ${colors.accentHue})`,
+  accentContrast: '#fff',
+  accentHover: `oklch(45% .1 ${colors.accentHue})`,
   accentHue: fallbackVar('var(--tinyWidgets-accentHue)', '8'),
+  accentLight: `oklch(71% .16 ${colors.accentHue})`,
   backgroundHue: fallbackVar(
     'var(--tinyWidgets-backgroundHue)',
     `calc(${colors.accentHue} + 180)`,
   ),
   border: `1px solid ${colors.borderColor}`,
-  accent: `oklch(50% .11 ${colors.accentHue})`,
-  accentLight: `oklch(71% .16 ${colors.accentHue})`,
-  accentHover: `oklch(45% .1 ${colors.accentHue})`,
-  accentBright: `oklch(57.37% 0.2178 ${colors.accentHue})`,
-  accentContrast: '#fff',
 };
 
 export const colorsLight = createTheme(colors, {
   ...common,
   background: `oklch(99% .01 ${colors.backgroundHue})`,
   background2: `oklch(95% .01 ${colors.backgroundHue})`,
+  backgroundExtreme: '#fff',
   backgroundHaze: `oklch(99% .01 ${colors.backgroundHue} / .5)`,
   backgroundHover: `oklch(90% .01 ${colors.backgroundHue})`,
-  backgroundExtreme: '#fff',
+  borderColor: `oklch(90% .01 ${colors.backgroundHue})`,
   foreground: `oklch(50% .01 ${colors.accentHue})`,
   foregroundBright: `oklch(10% .01 ${colors.accentHue})`,
   foregroundDim: `oklch(60% .01 ${colors.accentHue})`,
   foregroundExtreme: '#000',
-  borderColor: `oklch(90% .01 ${colors.backgroundHue})`,
   shadow: '0 1px 4px 0 hsl(0 0 20 / .1)',
 });
 globalStyle(`html:has(${colorsLight})`, {
@@ -123,14 +123,14 @@ export const colorsDark = createTheme(colors, {
   ...common,
   background: `oklch(20% .01 ${colors.backgroundHue})`,
   background2: `oklch(15% .01 ${colors.backgroundHue})`,
+  backgroundExtreme: '#000',
   backgroundHaze: `oklch(21% 0% ${colors.backgroundHue} / .5)`,
   backgroundHover: `oklch(25% .01 ${colors.backgroundHue})`,
-  backgroundExtreme: '#000',
+  borderColor: `oklch(30% .01 ${colors.backgroundHue})`,
   foreground: `oklch(85% .01 ${colors.accentHue})`,
   foregroundBright: `oklch(95% .01 ${colors.accentHue})`,
   foregroundDim: `oklch(60% .01 ${colors.accentHue})`,
   foregroundExtreme: '#fff',
-  borderColor: `oklch(30% .01 ${colors.backgroundHue})`,
   shadow: '0 1px 4px 0 #000',
 });
 globalStyle(`html:has(${colorsDark})`, {