tinywidgets 0.0.3 → 0.0.5

package/index.ts

@@ -1,11 +1,12 @@
-export {Avatar} from './src/Avatar/index.tsx';
-export {Axis} from './src/Axis/index.tsx';
-export {Button} from './src/Button/index.tsx';
-export {Card} from './src/Card/index.tsx';
-export {Collapsible} from './src/Collapsible/index.tsx';
-export {Detail} from './src/Detail/index.tsx';
-export {Hr} from './src/Hr/index.tsx';
-export {Metric} from './src/Metric/index.tsx';
-export {Summary} from './src/Summary/index.tsx';
-export {Tag} from './src/Tag/index.tsx';
-export {Ui} from './src/Ui/index.tsx';
+export { App } from './src/App/index.tsx';
+export { Avatar } from './src/Avatar/index.tsx';
+export { Axis } from './src/Axis/index.tsx';
+export { Button } from './src/Button/index.tsx';
+export { Card } from './src/Card/index.tsx';
+export { Collapsible } from './src/Collapsible/index.tsx';
+export { Detail } from './src/Detail/index.tsx';
+export { Hr } from './src/Hr/index.tsx';
+export { Metric } from './src/Metric/index.tsx';
+export { Summary } from './src/Summary/index.tsx';
+export { Tag } from './src/Tag/index.tsx';
+export { Ui } from './src/Ui/index.tsx';

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "module": "index.ts",
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "@vanilla-extract/css": "^1.15.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.1.0"
+    "tinybase": "^5.3.0-beta.1"
   },
   "exports": {
     ".": "./index.ts",
@@ -28,6 +28,6 @@
   "description": "reserved",
   "license": "MIT",
   "dependencies": {
-    "lucide-react": "^0.438.0"
+    "lucide-react": "^0.439.0"
   }
 }

package/src/App/index.tsx

@@ -0,0 +1,18 @@
+/** @jsx createElement */
+
+import type { ReactNode } from 'react';
+import { Provider } from 'tinybase/ui-react';
+import { createElement } from '../index.ts';
+import { LocalStore } from '../stores/LocalStore.tsx';
+import { SessionStore } from '../stores/SessionStore.tsx';
+
+export const App = ({ui, stores}: {ui: ReactNode; stores?: ReactNode}) => {
+  return (
+    <Provider>
+      {ui}
+      {stores}
+      <SessionStore />
+      <LocalStore />
+    </Provider>
+  );
+};

package/src/Avatar/index.tsx

@@ -1,11 +1,8 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../index.ts';
+import {classNames, createElement} from '../index.ts';
 import {avatar} from './index.css.ts';
 
-const {createElement} = React;
-
 export const Avatar = ({
   src,
   title,

package/src/Axis/index.tsx

@@ -1,11 +1,9 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {axis, gapStyle, justifyStyle, verticalStyle} from './index.css';
 
-const {createElement} = React;
-
 export const Axis = ({
   justify = true,
   gap = true,
@@ -17,7 +15,7 @@ export const Axis = ({
   justify?: boolean;
   gap?: boolean;
   vertical?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
   title?: string;
 }) => {

package/src/Button/index.tsx

@@ -1,13 +1,11 @@
 /** @jsx createElement */
 /** @jsxFrag Fragment */
 
-import React from 'react';
+import type {ComponentType, ReactNode, Ref} from 'react';
 import {iconSize} from '../index.css.ts';
-import {classNames} from '../index.ts';
+import {classNames, createElement, forwardRef, useCallback} from '../index.ts';
 import {button, buttonVariant, highlight, labelStyle} from './index.css.ts';
 
-const {createElement, useCallback, forwardRef} = React;
-
 export const Button = forwardRef(
   (
     {
@@ -22,10 +20,10 @@ export const Button = forwardRef(
       title,
       current,
     }: {
-      icon?: React.ComponentType<{className?: string}>;
-      label?: React.ReactNode;
-      labelRight?: React.ReactNode;
-      iconRight?: React.ComponentType<{className?: string}>;
+      icon?: ComponentType<{className?: string}>;
+      label?: ReactNode;
+      labelRight?: ReactNode;
+      iconRight?: ComponentType<{className?: string}>;
       onClick?: () => void;
       variant?: keyof typeof buttonVariant;
       className?: string;
@@ -33,7 +31,7 @@ export const Button = forwardRef(
       title?: string;
       current?: boolean;
     },
-    ref: React.Ref<HTMLButtonElement>,
+    ref: Ref<HTMLButtonElement>,
   ) => {
     const icon = Icon ? <Icon className={iconSize} /> : null;
     const iconRight = IconRight ? <IconRight className={iconSize} /> : null;

package/src/Card/index.tsx

@@ -1,15 +1,13 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {card} from './index.css';
 
-const {createElement} = React;
-
 export const Card = ({
   children,
   className,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
 }) => <div className={classNames(card, className)}>{children}</div>;

package/src/Collapsible/index.tsx

@@ -1,13 +1,19 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import {Button} from '../Button/index.tsx';
-import {classNames} from '../index.ts';
+import type { ComponentType, ReactNode } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { Button } from '../Button/index.tsx';
+import {
+  classNames,
+  createElement,
+  useCallback,
+  useRef,
+  useState,
+} from '../index.ts';
 import {
   useCollapsibleOpen,
   useSetCollapsibleOpen,
-} from '../Ui/SessionStore.tsx';
+} from '../stores/SessionStore.tsx';
 import {
   button,
   buttonOpen,
@@ -16,8 +22,6 @@ import {
   content,
 } from './index.css.ts';
 
-const {createElement, useState, useCallback, useRef} = React;
-
 export const Collapsible = ({
   id = '',
   icon: Icon,
@@ -27,11 +31,11 @@ export const Collapsible = ({
   children,
 }: {
   id?: string;
-  icon?: React.ComponentType<{className?: string}>;
-  label?: React.ReactNode;
-  labelRight?: React.ReactNode;
+  icon?: ComponentType<{className?: string}>;
+  label?: ReactNode;
+  labelRight?: ReactNode;
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   // State is in session Store if id is present, otherwise here in component.
   const storedIsOpen = useCollapsibleOpen(id) ?? false;
@@ -42,7 +46,7 @@ export const Collapsible = ({
   const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
 
   const [render, setRender] = useState(isOpen);
-  const timer = useRef<Timer>();
+  const timer = useRef<NodeJS.Timer>();
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);

package/src/Detail/index.tsx

@@ -1,16 +1,14 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {detailCell, detailRow, detailTable} from './index.css';
 
-const {createElement} = React;
-
 export const Detail = ({
   data,
   className,
 }: {
-  data: Record<string, React.ReactNode>;
+  data: Record<string, ReactNode>;
   className?: string;
 }) => {
   return (

package/src/Hr/index.tsx

@@ -1,10 +1,8 @@
 /** @jsx createElement */
 
-import React from 'react';
+import {createElement} from '../';
 import {hr} from './index.css';
 
-const {createElement} = React;
-
 export const Hr = () => {
   return <hr className={hr} />;
 };

package/src/Metric/index.tsx

@@ -1,21 +1,19 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {iconSize} from '../index.css';
 import {metric, metricLabel, metricNumber} from './index.css';
 
-const {createElement} = React;
-
 export const Metric = ({
   icon: Icon,
   label,
   number,
   className,
 }: {
-  icon?: React.ComponentType<{className?: string}>;
-  label: React.ReactNode;
-  number: React.ReactNode;
+  icon?: ComponentType<{className?: string}>;
+  label: ReactNode;
+  number: ReactNode;
   className?: string;
 }) => (
   <div className={classNames(metric, className)}>

package/src/Summary/index.tsx

@@ -1,12 +1,10 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {Avatar} from '../Avatar';
 import {summary, summaryContent, summaryImage} from './index.css';
 
-const {createElement} = React;
-
 export const Summary = ({
   icon: Icon,
   src,
@@ -14,10 +12,10 @@ export const Summary = ({
   children,
   className,
 }: {
-  icon?: React.ComponentType<{className?: string}>;
+  icon?: ComponentType<{className?: string}>;
   src?: string;
-  label: React.ReactNode;
-  children: React.ReactNode;
+  label: ReactNode;
+  children: ReactNode;
   className?: string;
 }) => (
   <div className={classNames(summary, className)}>

package/src/Tag/index.tsx

@@ -1,20 +1,18 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {classNames} from '../';
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, createElement} from '../';
 import {Axis} from '../Axis';
 import {tag, tagIcon, tagVariant} from './index.css';
 
-const {createElement} = React;
-
 export const Tag = ({
   icon: Icon,
   label,
   title,
   variant = 'default',
 }: {
-  icon?: React.ComponentType<{className?: string}>;
-  label?: React.ReactNode;
+  icon?: ComponentType<{className?: string}>;
+  label?: ReactNode;
   title?: string;
   variant?: keyof typeof tagVariant;
 }) => {

package/src/Ui/{Layout/Header → Header}/DarkButton/index.tsx

@@ -1,14 +1,13 @@
 /** @jsx createElement */
 
-import React from 'react';
-import {Moon, Sun, SunMoon} from 'lucide-react';
-import {Button} from '../../../../Button/index.tsx';
+import { Moon, Sun, SunMoon } from 'lucide-react';
+import { Button } from '../../../Button/index.tsx';
+import { createElement } from '../../../index.ts';
 import {
   useDarkChoice,
   useToggleDarkChoiceCallback,
-} from '../../../LocalStore.tsx';
+} from '../../../stores/LocalStore.tsx';
 
-const {createElement} = React;
 const icons = [Sun, Moon, SunMoon];
 
 export const DarkButton = () => (

package/src/Ui/{Layout/Header → 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,

package/src/Ui/{Layout/Header → Header}/SideNav/index.tsx

@@ -1,11 +1,9 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {classNames} from '../../../../index.ts';
-import {useSideNavOpen} from '../../../SessionStore.tsx';
-import {open, sideNav} from './index.css.ts';
-
-const {createElement} = React;
+import { type ReactNode } from 'react';
+import { classNames, createElement } from '../../../index.ts';
+import { useSideNavOpen } from '../../../stores/SessionStore.tsx';
+import { open, sideNav } from './index.css.ts';
 
 export const SideNav = ({sideNav: sideNavComponents}: {sideNav: ReactNode}) => {
   return (

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

@@ -0,0 +1,4 @@
+import { style } from '@vanilla-extract/css';
+import { large } from '../../../index.ts';
+
+export const sideNavButton = style(large({display: 'none'}));

package/src/Ui/Header/SideNavButton/index.tsx

@@ -0,0 +1,19 @@
+/** @jsx createElement */
+
+import { Menu, X } from 'lucide-react';
+import { Button } from '../../../Button/index.tsx';
+import { createElement } from '../../../index.ts';
+import {
+  useSideNavOpen,
+  useToggleSideNavOpen,
+} from '../../../stores/SessionStore.tsx';
+import { sideNavButton } from './index.css.ts';
+
+export const SideNavButton = () => (
+  <Button
+    variant="icon"
+    onClick={useToggleSideNavOpen()}
+    icon={useSideNavOpen() ? X : Menu}
+    className={sideNavButton}
+  />
+);

package/src/Ui/{Layout/Header → Header}/Title/index.css.ts

@@ -1,6 +1,6 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions} from '../../../../index.css';
-import {large} from '../../../../index.ts';
+import { style } from '@vanilla-extract/css';
+import { dimensions } from '../../../index.css.ts';
+import { large } from '../../../index.ts';
 
 export const title = style({
   display: 'flex',

package/src/Ui/{Layout/Header → Header}/Title/index.tsx

@@ -1,9 +1,8 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {title} from './index.css.ts';
-
-const {createElement} = React;
+import { type ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { title } from './index.css.ts';
 
 export const Title = ({title: titleComponents}: {title: ReactNode}) => {
   return <nav className={title}>{titleComponents}</nav>;

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

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { axisLike } from '../../../index.css';
+
+export const topNav = style([
+  {
+    ...axisLike,
+    flex: 1,
+  },
+]);

package/src/Ui/{Layout/Header → Header}/TopNav/index.tsx

@@ -1,9 +1,8 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {topNav} from './index.css.ts';
-
-const {createElement} = React;
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { topNav } from './index.css.ts';
 
 export const TopNav = ({
   topNavLeft = <div />,

package/src/Ui/{Layout/Header → Header}/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike, dimensions, paddingLike, theme} from '../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { axisLike, dimensions, paddingLike, theme } from '../../index.css';
 
 export const header = style([
   paddingLike,

package/src/Ui/{Layout/Header → Header}/index.tsx

@@ -1,14 +1,13 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {DarkButton} from './DarkButton/index.tsx';
-import {header} from './index.css.ts';
-import {SideNav} from './SideNav/index.tsx';
-import {SideNavButton} from './SideNavButton/index.tsx';
-import {Title} from './Title/index.tsx';
-import {TopNav} from './TopNav/index.tsx';
-
-const {createElement} = React;
+import type { ReactNode } from 'react';
+import { createElement } from '../../index.ts';
+import { DarkButton } from './DarkButton/index.tsx';
+import { header } from './index.css.ts';
+import { SideNav } from './SideNav/index.tsx';
+import { SideNavButton } from './SideNavButton/index.tsx';
+import { Title } from './Title/index.tsx';
+import { TopNav } from './TopNav/index.tsx';
 
 export const Header = ({
   title,

package/src/Ui/{Layout/Main → Main}/Article/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, paddingLike} from '../../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { dimensions, paddingLike } from '../../../index.css';
 
 export const article = style([
   paddingLike,

package/src/Ui/{Layout/Main → Main}/Article/index.tsx

@@ -1,9 +1,8 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {article} from './index.css.ts';
-
-const {createElement} = React;
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { article } from './index.css.ts';
 
 export const Article = ({article: articleComponents}: {article: ReactNode}) => {
   return <article className={article}>{articleComponents}</article>;

package/src/Ui/{Layout/Main → Main}/Footer/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike, dimensions, paddingLike, theme} from '../../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { axisLike, dimensions, paddingLike, theme } from '../../../index.css';
 
 export const footer = style([
   {

package/src/Ui/{Layout/Main → Main}/Footer/index.tsx

@@ -1,9 +1,8 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {footer} from './index.css.ts';
-
-const {createElement} = React;
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { footer } from './index.css.ts';
 
 export const Footer = ({footer: footerComponents}: {footer: ReactNode}) => {
   return <footer className={footer}>{footerComponents}</footer>;

package/src/Ui/{Layout/Main → Main}/index.css.ts

@@ -1,6 +1,6 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, theme} from '../../../index.css';
-import {large} from '../../../index.ts';
+import { style } from '@vanilla-extract/css';
+import { dimensions, theme } from '../../index.css.ts';
+import { large } from '../../index.ts';
 
 export const main = style({
   display: 'flex',

package/src/Ui/{Layout/Main → Main}/index.tsx

@@ -1,12 +1,10 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {classNames} from '../../../index.ts';
-import {Article} from './Article/index.tsx';
-import {Footer} from './Footer/index.tsx';
-import {main, mainHasSideNav} from './index.css.ts';
-
-const {createElement} = React;
+import type { ReactNode } from 'react';
+import { classNames, createElement } from '../../index.ts';
+import { Article } from './Article/index.tsx';
+import { Footer } from './Footer/index.tsx';
+import { main, mainHasSideNav } from './index.css.ts';
 
 export const Main = ({
   article,

package/src/Ui/index.css.ts

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

package/src/Ui/index.tsx

@@ -1,14 +1,21 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {Provider} from 'tinybase/ui-react';
-import {Layout} from './Layout/index.tsx';
-import {LocalStore} from './LocalStore.tsx';
-import {SessionStore} from './SessionStore.tsx';
+import type { ReactNode } from 'react';
+import { themeDark, themeLight } from '../index.css.ts';
+import { classNames, createElement } from '../index.ts';
+import { useDarkChoice, useDarkPreference } from '../stores/LocalStore.tsx';
+import { Header } from './Header/index.tsx';
+import { ui } from './index.css.ts';
+import { Main } from './Main/index.tsx';
 
-const {createElement} = React;
-
-export const Ui = (props: {
+export const Ui = ({
+  title,
+  topNavLeft,
+  topNavRight,
+  sideNav,
+  article,
+  footer,
+}: {
   title: ReactNode;
   topNavLeft?: ReactNode;
   topNavRight?: ReactNode;
@@ -16,11 +23,28 @@ export const Ui = (props: {
   article?: ReactNode;
   footer?: ReactNode;
 }) => {
+  const darkPreference = useDarkPreference();
+  const darkChoice = useDarkChoice();
   return (
-    <Provider>
-      <Layout {...props} />
-      <SessionStore />
-      <LocalStore />
-    </Provider>
+    <div
+      className={classNames(
+        ui,
+        darkChoice == 1 || (darkChoice == 2 && darkPreference)
+          ? themeDark
+          : themeLight,
+      )}
+    >
+      <Header
+        title={title}
+        topNavLeft={topNavLeft}
+        topNavRight={topNavRight}
+        sideNav={sideNav}
+      />
+      <Main
+        article={article}
+        footer={footer}
+        hasSideNav={sideNav ? true : false}
+      />
+    </div>
   );
 };

package/src/index.ts

@@ -1,7 +1,18 @@
+import React from 'react';
 import type {StyleRule} from '@vanilla-extract/css';
 
 const LARGE = 'screen and (min-width: 1000px)';
 
+export const {
+  createElement,
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  forwardRef,
+} = React;
+
 export const large = (style: StyleRule) => ({
   '@media': {
     [LARGE]: style,

package/src/{Ui → stores}/LocalStore.tsx

@@ -1,7 +1,5 @@
-/** @jsx createElement */
-import React from 'react';
-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,
@@ -9,8 +7,7 @@ import {
   useSetValueCallback,
   useValue,
 } from 'tinybase/ui-react';
-
-const {useEffect} = React;
+import { useEffect } from '../';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 

package/src/Ui/Layout/Header/SideNavButton/index.css.ts

@@ -1,4 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {large} from '../../../../index.ts';
-
-export const sideNavButton = style(large({display: 'none'}));

package/src/Ui/Layout/Header/SideNavButton/index.tsx

@@ -1,17 +0,0 @@
-/** @jsx createElement */
-import React from 'react';
-import {Menu, X} from 'lucide-react';
-import {Button} from '../../../../Button/index.tsx';
-import {useSideNavOpen, useToggleSideNavOpen} from '../../../SessionStore.tsx';
-import {sideNavButton} from './index.css';
-
-const {createElement} = React;
-
-export const SideNavButton = () => (
-  <Button
-    variant="icon"
-    onClick={useToggleSideNavOpen()}
-    icon={useSideNavOpen() ? X : Menu}
-    className={sideNavButton}
-  />
-);

package/src/Ui/Layout/Header/TopNav/index.css.ts

@@ -1,9 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike} from '../../../../index.css';
-
-export const topNav = style([
-  {
-    ...axisLike,
-    flex: 1,
-  },
-]);

package/src/Ui/Layout/index.css.ts

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

package/src/Ui/Layout/index.tsx

@@ -1,52 +0,0 @@
-/** @jsx createElement */
-
-import React, {type ReactNode} from 'react';
-import {themeDark, themeLight} from '../../index.css.ts';
-import {classNames} from '../../index.ts';
-import {useDarkChoice, useDarkPreference} from '../LocalStore.tsx';
-import {Header} from './Header/index.tsx';
-import {layout} from './index.css.ts';
-import {Main} from './Main/index.tsx';
-
-const {createElement} = React;
-
-export const Layout = ({
-  title,
-  topNavLeft,
-  topNavRight,
-  sideNav,
-  article,
-  footer,
-}: {
-  title: ReactNode;
-  topNavLeft?: ReactNode;
-  topNavRight?: ReactNode;
-  sideNav?: ReactNode;
-  article?: ReactNode;
-  footer?: ReactNode;
-}) => {
-  const darkPreference = useDarkPreference();
-  const darkChoice = useDarkChoice();
-  return (
-    <div
-      className={classNames(
-        layout,
-        darkChoice == 1 || (darkChoice == 2 && darkPreference)
-          ? themeDark
-          : themeLight,
-      )}
-    >
-      <Header
-        title={title}
-        topNavLeft={topNavLeft}
-        topNavRight={topNavRight}
-        sideNav={sideNav}
-      />
-      <Main
-        article={article}
-        footer={footer}
-        hasSideNav={sideNav ? true : false}
-      />
-    </div>
-  );
-};