tinywidgets 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -19,30 +19,30 @@
     "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@types/react": "^19.2.14",
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "cspell": "^10.0.0",
-    "eslint": "^9.30.1",
+    "cspell": "^10.0.1",
+    "eslint": "^10.6.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^17.5.0",
-    "prettier": "^3.8.3",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
+    "prettier": "^3.9.4",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.58.2"
+    "typescript-eslint": "^8.62.1"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.20.1",
-    "lucide-react": "^1.8.0",
-    "tinybase": "^8.2.0"
+    "@vanilla-extract/css": "^1.21.1",
+    "lucide-react": "^1.23.0",
+    "tinybase": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",

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

@@ -1,12 +1,78 @@
-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';
+import {
+  buttonOpen,
+  collapsible,
+  collapsibleOpen,
+  content,
+} from '../Collapsible/index.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,
 });
+
+export const titledCard = style([collapsible, collapsibleOpen]);
+
+const titleButtonBase = style([
+  buttonOpen,
+  {
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: colors.backgroundHover,
+    border: colors.border,
+    borderRadius: dimensions.radius,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    boxShadow: 'none',
+    color: colors.foregroundBright,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    gap: dimensions.padding,
+    justifyContent: 'space-between',
+    lineHeight: 'normal',
+    margin: '-1px',
+    outlineOffset: '-2px',
+    overflow: 'hidden',
+    padding: '0.5rem 1rem',
+    textAlign: 'left',
+    transition: 'background-color 0.1s,border-color 0.1s',
+    whiteSpace: 'nowrap',
+  },
+]);
+
+export const titleButton = styleVariants({
+  closable: [
+    titleButtonBase,
+    {
+      cursor: 'pointer',
+      selectors: {
+        '&:hover': {
+          backgroundColor: colors.backgroundHover,
+          color: colors.foregroundBright,
+        },
+      },
+    },
+  ],
+  static: [titleButtonBase],
+});
+
+export const title = style({
+  flex: '1 1 auto',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const titleRight = style({
+  flex: '0 0 auto',
+  overflow: 'hidden',
+});
+
+export const titledCardContent = style([content]);

package/src/components/Card/index.tsx

@@ -1,9 +1,20 @@
-import type {ReactNode} from 'react';
-import {classNames} from '../../common/functions';
-import {card} from './index.css';
+import {X} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, renderComponentOrNode} from '../../common/functions';
+import {iconSize} from '../../css/dimensions.css';
+import {
+  card,
+  titleButton,
+  titledCard,
+  titledCardContent,
+  title as titleStyle,
+  titleRight as titleStyleRight,
+} from './index.css';
 
 /**
- * The `Card` component displays a simple rectangular container.
+ * The `Card` component displays a simple rectangular container. If a `title `
+ * prop is provided, it is displayed in the same style as a `Collapsible`
+ * component, but without the collapsible behavior.
  *
  * @param props The props for the component.
  * @returns The Card component.
@@ -16,12 +27,55 @@ import {card} from './index.css';
  * </Card>
  * ```
  * This example shows a simple card.
+ * @example
+ * ```tsx
+ * <Card
+ *   title="TinyWidgets"
+ *   icon={Lucide.Grid3x3}
+ * >
+ *   <p>Always open</p>
+ * </Card>
+ * ```
+ * This example shows a titled card.
+ * @example
+ * ```tsx
+ * <Card
+ *   title="TinyWidgets"
+ *   onClose={() => console.log('Closed')}
+ * >
+ *   <p>Close me</p>
+ * </Card>
+ * ```
+ * This example shows a card with a close button.
  * @icon Lucide.Square
  */
 export const Card = ({
+  icon: Icon,
+  title,
+  titleRight,
+  onClose,
   className,
   children,
 }: {
+  /**
+   * An optional component which renders an icon for the top of the card, and
+   * which must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the top of the card.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders a second title
+   * on the right side of the top of the card.
+   */
+  readonly titleRight?: ComponentType | ReactNode;
+  /**
+   * A handler called when the user clicks on the close button.
+   */
+  readonly onClose?: () => void;
   /**
    * An extra CSS class name for the component.
    */
@@ -30,4 +84,31 @@ export const Card = ({
    * The children of the component that go inside the card.
    */
   readonly children: ReactNode;
-}) => <div className={classNames(card, className)}>{children}</div>;
+}) => {
+  const hasHeader =
+    Icon != null || title != null || titleRight != null || onClose != null;
+
+  return hasHeader ? (
+    <div className={classNames(titledCard, className)}>
+      <div
+        className={titleButton[onClose ? 'closable' : 'static']}
+        onClick={onClose}
+        {...(onClose ? {title: 'Close'} : {})}
+      >
+        {Icon ? <Icon className={iconSize} /> : null}
+        {title ? (
+          <span className={titleStyle}>{renderComponentOrNode(title)}</span>
+        ) : null}
+        {titleRight ? (
+          <span className={titleStyleRight}>
+            {renderComponentOrNode(titleRight)}
+          </span>
+        ) : null}
+        {onClose ? <X className={iconSize} /> : null}
+      </div>
+      <div className={titledCardContent}>{children}</div>
+    </div>
+  ) : (
+    <div className={classNames(card, className)}>{children}</div>
+  );
+};

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