tinywidgets 1.5.0 → 1.6.1

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})`, {

package/src/css/dimensions.css.ts

@@ -1,14 +1,14 @@
 import {createTheme, fallbackVar, style} from '@vanilla-extract/css';
 
 const classAndObject = createTheme({
-  logo: fallbackVar('var(--tinyWidgets-logo)', '2rem'),
   avatar: fallbackVar('var(--tinyWidgets-avatar)', '2rem'),
+  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
   icon: fallbackVar('var(--tinyWidgets-icon)', '1rem'),
+  logo: fallbackVar('var(--tinyWidgets-logo)', '2rem'),
   padding: fallbackVar('var(--tinyWidgets-padding)', '1rem'),
   radius: fallbackVar('var(--tinyWidgets-radius)', '0.5rem'),
   sideNavWidth: fallbackVar('var(--tinyWidgets-sideNavWidth)', '20rem'),
   topNavHeight: fallbackVar('var(--tinyWidgets-topNavHeight)', '4rem'),
-  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
 });
 export const dimensionsClass = classAndObject[0];
 

package/src/css/global.css.ts

@@ -2,10 +2,10 @@ import {globalStyle} from '@vanilla-extract/css';
 import {small} from '../common/functions';
 
 globalStyle('*', {
-  margin: 0,
-  padding: 0,
   boxSizing: 'border-box',
   color: 'inherit',
   fontSize: 'inherit',
+  margin: 0,
+  padding: 0,
   ...small({fontSize: '0.9rem'}),
 });

package/src/index.css.ts

@@ -1,5 +1,6 @@
 import './css/global.css.ts';
 
+export {classes} from './css/classes.css.ts';
 export {code} from './css/code.css.ts';
 export {colors} from './css/colors.css.ts';
 export {dimensions} from './css/dimensions.css.ts';

package/src/index.ts

@@ -21,4 +21,8 @@ export {TextInput} from './components/TextInput/index.tsx';
 
 export {classNames} from './common/functions.tsx';
 export {useDark} from './stores/LocalStore.tsx';
-export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
+export {
+  useRoute,
+  useRouteParts,
+  useSetRouteCallback,
+} from './stores/RouteStore.tsx';

package/src/stores/RouteStore.tsx

@@ -1,25 +1,43 @@
 import {createCustomPersister} from 'tinybase/persisters/with-schemas';
 import * as UiReact from 'tinybase/ui-react/with-schemas';
-import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {createStore, type Store} from 'tinybase/with-schemas';
 import {READY, READY_SCHEMA} from './common';
 
 const ROUTE_STORE = 'tinywidgets/Route';
-const ROUTE = 'route';
+const ROUTE_PARTS = 'routeParts';
+const PARTS = 'parts';
 
+const TABLES_SCHEMA = {
+  [ROUTE_PARTS]: {[PARTS]: {type: 'string', default: ''}},
+} as const;
 const VALUES_SCHEMA = {
   ...READY_SCHEMA,
-  [ROUTE]: {type: 'string', default: ''},
 } as const;
-type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+type Schemas = [typeof TABLES_SCHEMA, typeof VALUES_SCHEMA];
+type RouteStore = Store<Schemas>;
 
 const {
+  useCell,
   useCreateStore,
-  useProvideStore,
   useCreatePersister,
+  useSetTablesCallback,
+  useProvideStore,
   useValue,
-  useSetValueCallback,
 } = UiReact as UiReact.WithSchemas<Schemas>;
 
+const getRouteTables = (route: string) => {
+  const parts = route.split('/');
+  return {
+    [ROUTE_PARTS]: Object.fromEntries([
+      ['0', {[PARTS]: route}],
+      ...parts.map((_, index) => [
+        index + 1 + '',
+        {[PARTS]: parts.slice(0, index + 1).join('/')},
+      ]),
+    ]),
+  };
+};
+
 /**
  * The useRoute hook returns the current route, assuming the app is using the
  * basic TinyWidgets routing system.
@@ -37,7 +55,30 @@ const {
  * ```
  * This example shows the hook returning the current route.
  */
-export const useRoute = () => useValue(ROUTE, ROUTE_STORE);
+export const useRoute = () => useRouteParts(0).join('/');
+
+/**
+ * The useRouteParts hook returns the current route truncated to a number of
+ * slash-separated parts.
+ *
+ * This hook will only cause a rerender when the relevant part of the route
+ * changes. For example, if the route is `a/b/c/d`, then `useRouteParts(2)` will
+ * return `['a', 'b']` and will only cause a rerender when the first or second
+ * part of the route changes, but not when the third or fourth part changes.
+ *
+ * @param length The number of route parts to include. Use 0 for the full route.
+ * @returns The route path, or an empty string if it does not exist.
+ * @example
+ * ```tsx
+ * <ul>
+ *   <li>{useRouteParts(1).join(' » ')}</li>
+ *   <li>{useRouteParts(2).join(' » ')}</li>
+ *   <li>{useRouteParts(0).join(' » ')}</li>
+ * </ul>
+ * ```
+ */
+export const useRouteParts = (length: number) =>
+  useCell(ROUTE_PARTS, length + '', PARTS, ROUTE_STORE)?.split('/') ?? [];
 
 /**
  * The useSetRouteCallback hook a callback for setting the current route,
@@ -60,14 +101,14 @@ export const useRoute = () => useValue(ROUTE, ROUTE_STORE);
  * route when called as a click handler.
  */
 export const useSetRouteCallback = () =>
-  useSetValueCallback(ROUTE, (route: string) => route, [], ROUTE_STORE);
+  useSetTablesCallback(getRouteTables, [], ROUTE_STORE);
 
 export const useRouteStoreIsReady = () =>
   useValue(READY, ROUTE_STORE) as boolean;
 
 export const RouteStore = () => {
   const routeStore = useCreateStore(() =>
-    createStore().setValuesSchema(VALUES_SCHEMA),
+    createStore().setSchema(TABLES_SCHEMA, VALUES_SCHEMA),
   );
   useProvideStore(ROUTE_STORE, routeStore);
 
@@ -76,12 +117,9 @@ export const RouteStore = () => {
     (routeStore) =>
       createCustomPersister(
         routeStore,
-        async () => [{}, {route: location.hash.slice(1), ready: true}],
+        async () => [getRouteTables(location.hash.slice(1)), {ready: true}],
         async (getContent) => {
-          const route = getContent()[1].route;
-          if (route) {
-            location.hash = route;
-          }
+          location.hash = getContent()[0][ROUTE_PARTS]?.['0']?.[PARTS] ?? '';
         },
         (listener) => {
           const hashListener = () => listener();