tinywidgets 1.5.0 → 1.6.1

package/src/components/Checkbox/index.tsx

@@ -2,7 +2,7 @@ import {LucideCheck} from 'lucide-react';
 import {useCallback, useState} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {Button} from '../Button/index.tsx';
-import {checkbox} from './index.css.ts';
+import {checkbox, checkboxVariants} from './index.css.ts';
 
 /**
  * The `Checkbox` component displays a managed checkbox with an optional default
@@ -23,6 +23,11 @@ import {checkbox} from './index.css.ts';
  * />
  * ```
  * This example shows the Checkbox component with a default checked state.
+ * @example
+ * ```tsx
+ * <Checkbox variant="small" />
+ * ```
+ * This example shows the `small` variant of the Checkbox component.
  * @icon Lucide.LucideCheckSquare
  */
 export const Checkbox = ({
@@ -30,6 +35,7 @@ export const Checkbox = ({
   onChange,
   alt,
   className,
+  variant = 'default',
   ref,
 }: {
   /**
@@ -48,6 +54,15 @@ export const Checkbox = ({
    * An extra CSS class name for the component.
    */
   readonly className?: string;
+  /**
+   * A variant of the checkbox, one of:
+   * - `default`
+   * - `small`
+   */
+  readonly variant?: keyof typeof checkboxVariants;
+  /**
+   * A ref to the underlying button element.
+   */
   ref?: React.RefObject<HTMLButtonElement | null>;
 }) => {
   const [checked, setChecked] = useState(initialChecked ?? false);
@@ -57,7 +72,7 @@ export const Checkbox = ({
   }, [checked, onChange]);
   return (
     <Button
-      className={classNames(checkbox, className)}
+      className={classNames(checkbox, checkboxVariants[variant], className)}
       onClick={handleClick}
       alt={alt}
       ref={ref}

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

@@ -4,12 +4,12 @@ import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
 export const pre = style({
-  padding: dimensions.padding,
-  borderRadius: dimensions.radius,
   background: colors.background2,
   border: colors.border,
+  borderRadius: dimensions.radius,
   lineHeight: '1.25rem',
   overflowX: 'auto',
+  padding: dimensions.padding,
 });
 
 globalStyle('.token.comment, .token.prolog, .token.cdata', {

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

@@ -3,21 +3,21 @@ import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
 export const collapsible = style({
-  width: '100%',
   alignSelf: 'start',
+  border: colors.border,
   borderRadius: dimensions.radius,
   boxShadow: colors.shadow,
-  border: colors.border,
   display: 'grid',
   gridTemplateRows: 'max-content minmax(0, 0fr)',
-  transition: '.2s grid-template-rows ease-in-out',
-  overflow: 'hidden',
   marginBottom: dimensions.padding,
+  overflow: 'hidden',
   selectors: {
     '&:last-child': {
       marginBottom: 0,
     },
   },
+  transition: '.2s grid-template-rows ease-in-out',
+  width: '100%',
 });
 
 export const collapsibleOpen = style({
@@ -25,8 +25,8 @@ export const collapsibleOpen = style({
 });
 
 export const button = style({
-  margin: '-1px',
   boxShadow: 'none',
+  margin: '-1px',
 });
 
 export const buttonOpen = style({
@@ -34,4 +34,4 @@ export const buttonOpen = style({
   borderBottomRightRadius: 0,
 });
 
-export const content = style({padding: dimensions.padding, overflow: 'hidden'});
+export const content = style({overflow: 'hidden', padding: dimensions.padding});

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

@@ -2,9 +2,9 @@ import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 
 export const detailTable = style({
-  width: '100%',
   borderCollapse: 'collapse',
   margin: '-.5rem 0',
+  width: '100%',
 });
 
 export const detailRow = style({
@@ -14,6 +14,6 @@ export const detailRow = style({
 
 export const detailCell = style({
   padding: '0.5rem 1rem',
-  verticalAlign: 'top',
   selectors: {'&:is(th)': {textAlign: 'right', width: '30%'}},
+  verticalAlign: 'top',
 });

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

@@ -7,19 +7,19 @@ export const wrapper = style({
 });
 
 export const flyout = style({
-  padding: dimensions.padding,
+  backgroundColor: colors.background,
+  border: colors.border,
   borderRadius: dimensions.radius,
   boxShadow: colors.shadow,
-  border: colors.border,
   height: 'fit-content',
+  left: 0,
   overflow: 'auto',
-  backgroundColor: colors.background,
+  padding: dimensions.padding,
   position: 'absolute',
   top: 'calc(2rem + 2px)',
-  left: 0,
 });
 
 export const anchoredFlyout = style({
-  top: 'anchor(bottom)',
   left: 'anchor(left)',
+  top: 'anchor(bottom)',
 });

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

@@ -5,7 +5,7 @@ import {dimensions} from '../../css/dimensions.css';
 export const hr = style({
   border: 'none',
   borderBottom: colors.border,
-  margin: `${dimensions.padding} 0`,
   height: '1px',
+  margin: `${dimensions.padding} 0`,
   width: '100%',
 });

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

@@ -5,8 +5,8 @@ import {dimensions} from '../../css/dimensions.css';
 export const image = style({
   display: 'inline-block',
   flexShrink: 0,
-  width: '100%',
   maxHeight: 'inherit',
+  width: '100%',
 });
 
 export const clickable = style({
@@ -19,24 +19,24 @@ export const clickable = style({
 });
 
 export const imageVariants = styleVariants({
-  default: {
-    borderRadius: dimensions.radius,
-    boxShadow: colors.shadow,
-  },
-  logo: {
-    width: dimensions.logo,
-    height: dimensions.logo,
-  },
   avatar: {
-    borderRadius: '50%',
     border: colors.border,
-    width: dimensions.avatar,
+    borderRadius: '50%',
+    boxShadow: colors.shadow,
     height: dimensions.avatar,
+    width: dimensions.avatar,
+  },
+  default: {
+    borderRadius: dimensions.radius,
     boxShadow: colors.shadow,
   },
   icon: {
     border: colors.border,
-    width: dimensions.icon,
     height: dimensions.icon,
+    width: dimensions.icon,
+  },
+  logo: {
+    height: dimensions.logo,
+    width: dimensions.logo,
   },
 });

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',
+  },
 });