tinywidgets 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",

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

@@ -12,27 +12,29 @@ export const appLayout = style({
 });
 
 export const header = style({
-  justifyContent: 'space-between',
-  gap: dimensions.padding,
-  padding: dimensions.padding,
-  position: 'fixed',
-  boxShadow: colors.shadow,
   backdropFilter: 'blur(8px)',
   backgroundColor: colors.backgroundHaze,
+  borderBottom: colors.border,
+  boxShadow: colors.shadow,
+  gap: dimensions.padding,
+  height: dimensions.topNavHeight,
+  justifyContent: 'space-between',
   left: 0,
+  padding: dimensions.padding,
+  position: 'fixed',
   right: 0,
-  height: dimensions.topNavHeight,
-  borderBottom: colors.border,
   zIndex: 2,
 });
 
 export const topNav = style({
-  justifyContent: 'space-between',
-  gap: dimensions.padding,
   flex: 1,
+  gap: dimensions.padding,
+  justifyContent: 'space-between',
 });
 
-export const sideNavButton = style(large({display: 'none!important'}));
+export const sideNavButtonResponsive = style(
+  large({display: 'none!important'}),
+);
 
 export const title = style({
   ...large({
@@ -41,26 +43,29 @@ export const title = style({
 });
 
 export const sideNav = style({
-  position: 'fixed',
-  padding: dimensions.padding,
   backgroundColor: colors.background2,
-  overflow: 'auto',
   borderRight: colors.border,
-  width: dimensions.sideNavWidth,
   bottom: 0,
-  left: `calc(-1.2 * ${dimensions.sideNavWidth})`,
-  top: dimensions.topNavHeight,
   height: `calc(100dvh - ${dimensions.topNavHeight})`,
+  left: `calc(-1.2 * ${dimensions.sideNavWidth})`,
+  overflow: 'auto',
   overscrollBehavior: 'contain',
+  padding: dimensions.padding,
+  position: 'fixed',
+  top: dimensions.topNavHeight,
   transition: 'left .2s ease-in-out',
-  ...large({left: 0}),
+  width: dimensions.sideNavWidth,
 });
 
 export const sideNavOpen = style({left: 0});
 
+export const sideNavResponsive = style(large({left: 0}));
+
+export const sideNavNever = style({left: 0});
+
 export const main = style({
-  flex: 1,
   backgroundColor: colors.background,
+  flex: 1,
   overflow: 'auto',
   padding: dimensions.padding,
   paddingTop: `calc(${dimensions.topNavHeight} + ${dimensions.padding})`,
@@ -72,22 +77,26 @@ export const mainHasSideNav = style(
   }),
 );
 
+export const mainHasSideNavNever = style({
+  paddingLeft: `calc(${dimensions.sideNavWidth} + ${dimensions.padding})`,
+});
+
 export const mainHasFooter = style({
   paddingBottom: `calc(${dimensions.footerHeight} + ${dimensions.padding})`,
 });
 
 export const footer = style({
-  justifyContent: 'right',
+  backdropFilter: 'blur(8px)',
+  backgroundColor: colors.backgroundHaze,
+  borderTop: colors.border,
+  bottom: 0,
+  boxShadow: colors.shadow,
   gap: dimensions.padding,
+  height: dimensions.footerHeight,
+  justifyContent: 'right',
+  left: 0,
   paddingLeft: dimensions.padding,
   paddingRight: 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

@@ -35,9 +35,12 @@ import {
   main,
   mainHasFooter,
   mainHasSideNav,
+  mainHasSideNavNever,
   sideNav,
-  sideNavButton,
+  sideNavButtonResponsive,
+  sideNavNever,
   sideNavOpen,
+  sideNavResponsive,
   title,
   topNav,
 } from './index.css.ts';
@@ -46,6 +49,7 @@ const {Provider} = UiReact as UiReact.WithSchemas<OptionalSchemas>;
 
 const darkIcons = [Sun, Moon, SunMoon];
 const darkChoices = ['Light always', 'Dark always', 'Auto'];
+type SideNavToggle = 'never' | 'responsive' | 'always';
 
 /**
  * The `App` component is the root component of a TinyWidgets application.
@@ -83,10 +87,17 @@ export const App = (props: {
    */
   readonly topNavRight?: ComponentType | ReactNode;
   /**
-   * An optional component, element, or string which renders the left side bar
-   * of the application.
+   * An optional component, element, or string which renders the left side
+   * navigation of the application.
    */
   readonly sideNav?: ComponentType | ReactNode;
+  /**
+   * Whether the side navigation can toggle. One of:
+   * - `never`: always show the side navigation.
+   * - `responsive`: toggle the side navigation on narrow screens only; default.
+   * - `always`: toggle the side navigation at all screen widths.
+   */
+  readonly sideNavToggle?: SideNavToggle;
   /**
    * An optional component, element, or string which renders the main part of
    * the application.
@@ -122,6 +133,7 @@ const Layout = ({
   topNavLeft: topNavLeftComponentOrNode,
   topNavRight: topNavRightComponentOrNode,
   sideNav: sideNavComponentOrNode,
+  sideNavToggle = 'responsive',
   main: mainComponentOrNode,
   footer: footerComponentOrNode,
   className,
@@ -148,6 +160,8 @@ const Layout = ({
   ].some((componentOrNode) => componentOrNode);
   const hasSideNav = sideNavComponentOrNode != null;
   const hasFooter = footerComponentOrNode != null;
+  const sideNavCanToggle = hasSideNav && sideNavToggle != 'never';
+  const sideNavIsAlwaysVisible = hasSideNav && sideNavToggle == 'never';
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -167,12 +181,16 @@ const Layout = ({
           {sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
             <>
               <Axis as="header" className={header}>
-                {hasSideNav ? (
+                {sideNavCanToggle ? (
                   <Button
                     variant="icon"
                     onClick={toggleSideNavIsOpen}
                     icon={sideNavIsOpen ? X : Menu}
-                    className={sideNavButton}
+                    className={
+                      sideNavToggle == 'responsive'
+                        ? sideNavButtonResponsive
+                        : undefined
+                    }
                   />
                 ) : null}
                 <nav className={title}>
@@ -192,6 +210,8 @@ const Layout = ({
                   <nav
                     className={classNames(
                       sideNav,
+                      sideNavToggle == 'responsive' && sideNavResponsive,
+                      sideNavIsAlwaysVisible && sideNavNever,
                       sideNavIsOpen && sideNavOpen,
                     )}
                   >
@@ -202,7 +222,12 @@ const Layout = ({
               <main
                 className={classNames(
                   main,
-                  hasSideNav && mainHasSideNav,
+                  hasSideNav &&
+                    (sideNavToggle == 'never'
+                      ? mainHasSideNavNever
+                      : sideNavToggle == 'responsive'
+                        ? mainHasSideNav
+                        : false),
                   hasFooter && mainHasFooter,
                 )}
               >

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

@@ -1,8 +1,8 @@
 import {style, styleVariants} from '@vanilla-extract/css';
 
 export const axis = style({
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
 });
 
 export const axisVariants = styleVariants({

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

@@ -1,45 +1,43 @@
-import {style, styleVariants} from '@vanilla-extract/css';
+import {createVar, style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
+const titleFlex = createVar();
+
 export const button = style({
-  display: 'inline-flex',
-  justifyContent: 'space-between',
   alignItems: 'center',
-  gap: dimensions.padding,
+  alignSelf: 'center',
+  background: 'none',
+  border: '1px solid transparent',
   borderRadius: dimensions.radius,
-  textAlign: 'left',
-  cursor: 'pointer',
-  padding: '0.5rem 1rem',
-  outlineOffset: '-2px',
   color: 'inherit',
-  fontWeight: 'inherit',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  flexShrink: 0,
   fontFamily: 'inherit',
+  fontWeight: 'inherit',
+  gap: dimensions.padding,
+  justifyContent: 'space-between',
+  outlineOffset: '-2px',
   overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  transition: 'background-color 0.1s,border-color 0.1s',
-  flexShrink: 0,
-  border: '1px solid transparent',
-  alignSelf: 'center',
-  background: 'none',
+  padding: '0.5rem 1rem',
   selectors: {
     '&:hover': {
       backgroundColor: colors.backgroundHover,
       color: colors.foregroundBright,
     },
   },
+  textAlign: 'left',
+  transition: 'background-color 0.1s,border-color 0.1s',
+  vars: {[titleFlex]: '1 1 auto'},
+  whiteSpace: 'nowrap',
 });
 
 export const buttonVariants = styleVariants({
-  default: {
-    boxShadow: colors.shadow,
-    border: colors.border,
-    backgroundColor: colors.background,
-  },
   accent: {
-    boxShadow: colors.shadow,
     backgroundColor: colors.accent,
     border: colors.border,
+    boxShadow: colors.shadow,
     color: colors.accentContrast,
     selectors: {
       '&:hover': {
@@ -47,9 +45,25 @@ export const buttonVariants = styleVariants({
       },
     },
   },
+  default: {
+    backgroundColor: colors.background,
+    border: colors.border,
+    boxShadow: colors.shadow,
+  },
   ghost: {},
-  item: {width: '100%'},
   icon: {padding: '0.25rem'},
+  item: {width: '100%'},
+  toolbar: {
+    alignItems: 'center',
+    backgroundColor: colors.background,
+    border: colors.border,
+    boxShadow: colors.shadow,
+    flexDirection: 'column',
+    gap: '0.25rem',
+    justifyContent: 'center',
+    textAlign: 'center',
+    vars: {[titleFlex]: '0 1 auto'},
+  },
 });
 
 export const currentStyle = style({
@@ -58,7 +72,7 @@ export const currentStyle = style({
 });
 
 export const titleStyle = style({
-  flex: '1 1 auto',
+  flex: titleFlex,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });

package/src/components/Button/index.tsx

@@ -101,6 +101,16 @@ import {
  * ```
  * This example shows the `item` variant of the Button component, marked as
  * 'current'.
+ * @example
+ * ```tsx
+ * <Button
+ *   variant="toolbar"
+ *   icon={Lucide.Grid3x3}
+ *   title="New Grid"
+ * />
+ * ```
+ * This example shows the `toolbar` variant of the Button component, with the
+ * icon stacked above the title.
  * @icon Lucide.RectangleHorizontal
  */
 export const Button = ({
@@ -148,6 +158,7 @@ export const Button = ({
    * - `accent`
    * - `ghost`
    * - `item`
+   * - `toolbar`
    */
   readonly variant?: keyof typeof buttonVariants;
   /**
@@ -172,6 +183,9 @@ export const Button = ({
    * An name for the component to be used as an anchor for other elements.
    */
   readonly anchorName?: string;
+  /**
+   * A ref to the underlying button element.
+   */
   ref?: React.RefObject<HTMLButtonElement | null>;
 }) => {
   const hrefClick = useCallback(

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

@@ -3,10 +3,10 @@ import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
 
 export const card = style({
-  padding: dimensions.padding,
+  border: colors.border,
   borderRadius: dimensions.radius,
   boxShadow: colors.shadow,
-  border: colors.border,
   height: 'fit-content',
   overflow: 'auto',
+  padding: dimensions.padding,
 });

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

@@ -1,14 +1,33 @@
-import {style} from '@vanilla-extract/css';
+import {globalStyle, style, styleVariants} from '@vanilla-extract/css';
 import {dimensions} from '../../css/dimensions.css';
 import {colors} from '../../index.css';
 
 export const checkbox = style({
-  display: 'inline-block',
-  boxShadow: colors.shadow + ' inset',
-  borderRadius: dimensions.radius,
+  alignItems: 'center',
   border: colors.border,
-  padding: '0.5rem',
-  height: '2rem',
-  width: '2rem',
-  margin: '5px',
+  borderRadius: dimensions.radius,
+  boxSizing: 'border-box',
+  boxShadow: colors.shadow + ' inset',
+  display: 'inline-flex',
+  justifyContent: 'center',
+});
+
+export const checkboxVariants = styleVariants({
+  default: {
+    height: '2.5rem',
+    margin: 0,
+    padding: '0.5rem',
+    width: '2.5rem',
+  },
+  small: {
+    height: '1.5rem',
+    margin: 0,
+    padding: '0.25rem',
+    width: '1.5rem',
+  },
+});
+
+globalStyle(`${checkboxVariants.small} svg`, {
+  height: '0.85rem',
+  width: '0.85rem',
 });

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