tinywidgets 1.0.1 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinywidgets",
   "description": "A collection of tiny, reusable, React components",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "scripts": {
     "prePublishPackage": "eslint . && cspell --quiet . && tsc"
   },

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

@@ -33,11 +33,10 @@ export const topNav = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   gap: dimensions.padding,
-
   flex: 1,
 });
 
-export const sideNavButton = style(large({display: 'none'}));
+export const sideNavButton = style(large({display: 'none!important'}));
 
 export const title = style({
   display: 'flex',

package/src/components/Code/index.tsx

@@ -3,7 +3,7 @@ import 'prismjs';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-tsx';
-import * as Prism from 'prismjs';
+import Prism from 'prismjs';
 import React from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {pre} from './index.css.ts';

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

@@ -20,7 +20,6 @@ export const tagVariants = styleVariants({
   accent: {
     backgroundColor: colors.accent,
     color: colors.accentContrast,
-    boxShadow: colors.shadow,
   },
 });
 

package/src/stores/LocalStore.tsx

@@ -1,8 +1,8 @@
 import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {CHANGE, READY, READY_SCHEMA} from './common';
 import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {useCallback, useEffect} from 'react';
 import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
-import {useEffect} from 'react';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 
@@ -62,6 +62,12 @@ export const LocalStore = () => {
   const localStore = useCreateStore(() =>
     createStore().setValuesSchema(VALUES_SCHEMA),
   );
+
+  const preferenceListener = useCallback(
+    () => localStore.setValue(DARK_PREFERENCE, PREFERS_DARK.matches),
+    [localStore],
+  );
+
   useCreatePersister(
     localStore,
     (localStore) => createLocalPersister(localStore, LOCAL_STORE),
@@ -69,16 +75,17 @@ export const LocalStore = () => {
     async (persister) => {
       await persister.startAutoLoad();
       await persister.startAutoSave();
+      preferenceListener();
       persister.getStore().setValue(READY, true);
     },
+    [preferenceListener],
   );
+
   useEffect(() => {
-    const preferenceListener = () =>
-      localStore.setValue(DARK_PREFERENCE, PREFERS_DARK.matches);
     PREFERS_DARK.addEventListener(CHANGE, preferenceListener);
     preferenceListener();
     return () => PREFERS_DARK.removeEventListener(CHANGE, preferenceListener);
-  }, [localStore]);
+  }, [localStore, preferenceListener]);
 
   useProvideStore(LOCAL_STORE, localStore);
   return null;