tinywidgets 0.0.5 → 0.0.7

package/index.css.ts

@@ -1 +1 @@
-export {accent, accentContrast, theme} from './src/index.css.ts';
+export {accentHue, theme} from './src/index.css.ts';

package/media.ts

@@ -1 +1 @@
-export {large} from './src/index.ts';
+export {large, small} from './src/index.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "module": "index.ts",
@@ -18,7 +18,7 @@
     "@vanilla-extract/css": "^1.15.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.3.0-beta.1"
+    "tinybase": "^5.3.0-beta.2"
   },
   "exports": {
     ".": "./index.ts",

package/src/Collapsible/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import type { ComponentType, ReactNode } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { Button } from '../Button/index.tsx';
+import type {ComponentType, ReactNode} from 'react';
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import {Button} from '../Button/index.tsx';
 import {
   classNames,
   createElement,
@@ -27,6 +27,7 @@ export const Collapsible = ({
   icon: Icon,
   label = <div />,
   labelRight = <div />,
+  startOpen = false,
   className,
   children,
 }: {
@@ -34,19 +35,20 @@ export const Collapsible = ({
   icon?: ComponentType<{className?: string}>;
   label?: ReactNode;
   labelRight?: ReactNode;
+  startOpen?: boolean;
   className?: string;
   children: ReactNode;
 }) => {
   // State is in session Store if id is present, otherwise here in component.
-  const storedIsOpen = useCollapsibleOpen(id) ?? false;
+  const storedIsOpen = useCollapsibleOpen(id) ?? startOpen;
   const setStoredIsOpen = useSetCollapsibleOpen(id);
-  const [stateIsOpen, setStateIsOpen] = useState(false);
+  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
 
   const isOpen = id ? storedIsOpen : stateIsOpen;
   const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
 
   const [render, setRender] = useState(isOpen);
-  const timer = useRef<NodeJS.Timer>();
+  const timer = useRef<Timer>();
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);

package/src/Ui/Header/SideNav/index.css.ts

@@ -1,6 +1,6 @@
-import { style } from '@vanilla-extract/css';
-import { dimensions, paddingLike, theme } from '../../../index.css.ts';
-import { large } from '../../../index.ts';
+import {style} from '@vanilla-extract/css';
+import {dimensions, paddingLike, theme} from '../../../index.css.ts';
+import {large} from '../../../index.ts';
 
 export const sideNav = style([
   paddingLike,
@@ -11,9 +11,9 @@ export const sideNav = style([
     borderRight: `1px solid ${theme.border}`,
     width: dimensions.sideNavWidth,
     bottom: 0,
-    left: '-' + dimensions.sideNavWidth,
+    left: dimensions.sideNavWidthHidden,
     top: dimensions.topNavHeight,
-    height: `calc(100vh - ${dimensions.topNavHeight})`,
+    height: `calc(100dvh - ${dimensions.topNavHeight})`,
     overscrollBehavior: 'contain',
     transition: 'left .2s ease-in-out',
   },

package/src/Ui/index.css.ts

@@ -1,9 +1,9 @@
-import { style } from '@vanilla-extract/css';
-import { theme } from '../index.css.ts';
+import {style} from '@vanilla-extract/css';
+import {theme} from '../index.css.ts';
 
 export const ui = style({
   display: 'flex',
-  height: '100vh',
-  width: '100vw',
+  height: '100dvh',
+  width: '100dvw',
   color: theme.foreground,
 });

package/src/index.css.ts

@@ -6,12 +6,16 @@ import {
   globalStyle,
   style,
 } from '@vanilla-extract/css';
+import {small} from './';
 
-export const accent = createVar();
-export const accentContrast = createVar();
+export const accentHue = createVar();
 
 export const theme = createThemeContract({
+  accentHue: null,
+  backgroundHue: null,
   accent: null,
+  accentLight: null,
+  accentHover: null,
   accentContrast: null,
   underneath: null,
   background: null,
@@ -22,37 +26,41 @@ export const theme = createThemeContract({
   foreground2: null,
   border: null,
   shadow: null,
-  accentHover: null,
 });
 
+const themeCommon = {
+  accentHue: fallbackVar(accentHue, '8'),
+  backgroundHue: `calc(${theme.accentHue} + 180)`,
+  accent: `oklch(50% .11 ${theme.accentHue})`,
+  accentLight: `oklch(71% .16 ${theme.accentHue})`,
+  accentHover: `oklch(45% .1 ${theme.accentHue})`,
+  accentContrast: '#fff',
+};
+
 const light = {
-  accent: fallbackVar(accent, '#d81b60'),
-  accentContrast: fallbackVar(accentContrast, `#fff`),
+  ...themeCommon,
   underneath: '#fff',
-  background: `oklch(from ${theme.accent} 98% 1% calc(h + 180))`,
-  background2: `oklch(from ${theme.accent} 95% 1% calc(h + 180))`,
-  backgroundHaze: `oklch(from ${theme.background} l c h / .5)`,
-  backgroundHover: `oklch(from ${theme.accent} 90% 1% calc(h + 180))`,
-  foreground: `oklch(from ${theme.accent} 30% 1% h)`,
-  foreground2: `oklch(from ${theme.accent} 50% 1% h)`,
-  border: `oklch(from ${theme.accent} 90% 1% calc(h + 180))`,
+  background: `oklch(99% .01 ${theme.backgroundHue})`,
+  background2: `oklch(95% .01 ${theme.backgroundHue})`,
+  backgroundHaze: `oklch(99% .01 ${theme.backgroundHue} / .5)`,
+  backgroundHover: `oklch(90% .01 ${theme.backgroundHue})`,
+  foreground: `oklch(30% .01 ${theme.accentHue})`,
+  foreground2: `oklch(50% .01 ${theme.accentHue})`,
+  border: `oklch(90% .01 ${theme.backgroundHue})`,
   shadow: '0 1px 4px 0 hsl(0 0 20 / .1)',
-  accentHover: `oklch(from ${theme.accent} calc(l * 90%) c h)`,
 };
 
 const dark = {
-  accent: fallbackVar(accent, '#d81b60'),
-  accentContrast: fallbackVar(accentContrast, `#fff`),
+  ...themeCommon,
   underneath: '#000',
-  background: `oklch(from ${theme.accent} 20% 1% calc(h + 180))`,
-  background2: `oklch(from ${theme.accent} 15% 1% calc(h + 180))`,
-  backgroundHaze: `oklch(from ${theme.background} 21% 0% h / .5)`,
-  backgroundHover: `oklch(from ${theme.accent} 25% 1% calc(h + 180))`,
-  foreground: `oklch(from ${theme.accent} 90% 1% h)`,
-  foreground2: `oklch(from ${theme.accent} 50% 1% h)`,
-  border: `oklch(from ${theme.accent} 30% 1% calc(h + 180))`,
+  background: `oklch(20% .01 ${theme.backgroundHue})`,
+  background2: `oklch(15% .01 ${theme.backgroundHue})`,
+  backgroundHaze: `oklch(21% 0% ${theme.backgroundHue} / .5)`,
+  backgroundHover: `oklch(25% .01 ${theme.backgroundHue})`,
+  foreground: `oklch(90% .01 ${theme.accentHue})`,
+  foreground2: `oklch(50% .01 ${theme.accentHue})`,
+  border: `oklch(30% .01 ${theme.backgroundHue})`,
   shadow: '0 1px 4px 0 #000',
-  accentHover: `oklch(from ${theme.accent} calc(l * 90%) c h)`,
 };
 
 export const dimensions = {
@@ -60,6 +68,7 @@ export const dimensions = {
   radius: '0.5rem',
   titleWidth: '18rem',
   sideNavWidth: '20rem',
+  sideNavWidthHidden: '-30rem',
   topNavHeight: '4rem',
   articleWidth: '60rem',
   footerHeight: '10rem',
@@ -103,6 +112,9 @@ globalStyle('html', {
   lineHeight: '1.5em',
   textRendering: 'optimizeLegibility',
   fontWeight: 400,
+  ...small({
+    fontSize: '11px',
+  }),
 });
 
 globalStyle('h1', {fontSize: '1.5rem'});

package/src/index.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type {StyleRule} from '@vanilla-extract/css';
 
-const LARGE = 'screen and (min-width: 1000px)';
+const LARGE = 'screen and (min-width: 768px)';
+const SMALL = 'screen and (max-width: 450px)';
 
 export const {
   createElement,
@@ -14,9 +15,11 @@ export const {
 } = React;
 
 export const large = (style: StyleRule) => ({
-  '@media': {
-    [LARGE]: style,
-  },
+  '@media': {[LARGE]: style},
+});
+
+export const small = (style: StyleRule) => ({
+  '@media': {[SMALL]: style},
 });
 
 export const classNames = (...classes: (string | boolean | undefined)[]) =>

package/src/stores/LocalStore.tsx

@@ -1,5 +1,5 @@
-import { createStore } from 'tinybase';
-import { createLocalPersister } from 'tinybase/persisters/persister-browser';
+import {createStore} from 'tinybase';
+import {createLocalPersister} from 'tinybase/persisters/persister-browser';
 import {
   useCreatePersister,
   useCreateStore,
@@ -7,11 +7,11 @@ import {
   useSetValueCallback,
   useValue,
 } from 'tinybase/ui-react';
-import { useEffect } from '../';
+import {useEffect} from '../';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 
-const LOCAL_STORE = 'uiLocal';
+const LOCAL_STORE = 'tinywidgets/Local';
 const DARK_PREFERENCE_VALUE = 'darkPreference';
 const DARK_CHOICE_VALUE = 'darkChoice';
 

package/src/stores/SessionStore.tsx

@@ -10,7 +10,7 @@ import {
   useValue,
 } from 'tinybase/ui-react';
 
-const SESSION_STORE = 'uiSession';
+const SESSION_STORE = 'tinywidgets/Session';
 
 const COLLAPSIBLE_TABLE = 'collapsible';
 const COLLAPSIBLE_OPEN_CELL = 'open';