tinywidgets 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "module": "index.ts",

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,9 +1,15 @@
 /** @jsx createElement */
 
-import React from 'react';
+import type {ComponentType, ReactNode} from 'react';
 import {ChevronDown, ChevronRight} from 'lucide-react';
 import {Button} from '../Button/index.tsx';
-import {classNames} from '../index.ts';
+import {
+  classNames,
+  createElement,
+  useCallback,
+  useRef,
+  useState,
+} from '../index.ts';
 import {
   useCollapsibleOpen,
   useSetCollapsibleOpen,
@@ -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.Timeout>();
 
   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.css.ts

@@ -22,6 +22,6 @@ export const tagVariant = styleVariants({
 });
 
 export const tagIcon = style({
-  width: '0.75rem',
-  height: '0.75rem',
+  width: '0.7rem',
+  height: '0.7rem',
 });

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/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 {createElement} from '../../../../index.ts';
 import {
   useDarkChoice,
   useToggleDarkChoiceCallback,
 } from '../../../LocalStore.tsx';
 
-const {createElement} = React;
 const icons = [Sun, Moon, SunMoon];
 
 export const DarkButton = () => (

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from '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';
@@ -8,8 +9,6 @@ import {SideNavButton} from './SideNavButton/index.tsx';
 import {Title} from './Title/index.tsx';
 import {TopNav} from './TopNav/index.tsx';
 
-const {createElement} = React;
-
 export const Header = ({
   title,
   topNavLeft,

package/src/Ui/Layout/Main/Article/index.tsx

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

package/src/Ui/Layout/Main/Footer/index.tsx

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

package/src/Ui/Layout/Main/index.tsx

@@ -1,13 +1,11 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
-import {classNames} from '../../../index.ts';
+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';
 
-const {createElement} = React;
-
 export const Main = ({
   article,
   footer,

package/src/Ui/Layout/index.tsx

@@ -1,15 +1,13 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import {themeDark, themeLight} from '../../index.css.ts';
-import {classNames} from '../../index.ts';
+import {classNames, createElement} 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,

package/src/Ui/LocalStore.tsx

@@ -1,5 +1,3 @@
-/** @jsx createElement */
-import React from 'react';
 import {createStore} from 'tinybase';
 import {createLocalPersister} from 'tinybase/persisters/persister-browser';
 import {
@@ -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/index.tsx

@@ -1,13 +1,12 @@
 /** @jsx createElement */
 
-import React, {type ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import {Provider} from 'tinybase/ui-react';
+import {createElement} from '../index.ts';
 import {Layout} from './Layout/index.tsx';
 import {LocalStore} from './LocalStore.tsx';
 import {SessionStore} from './SessionStore.tsx';
 
-const {createElement} = React;
-
 export const Ui = (props: {
   title: ReactNode;
   topNavLeft?: ReactNode;

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,