tinywidgets 1.1.4 → 1.1.5

package/.prettierignore

@@ -0,0 +1 @@
+package.json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -16,7 +16,7 @@
   ],
   "type": "module",
   "scripts": {
-    "prePublishPackage": "prettier -l . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
+    "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
     "@types/react": "^19.0.12",
@@ -25,6 +25,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.8.2"
   },
   "exports": {
@@ -33,7 +34,6 @@
   },
   "dependencies": {
     "@eslint/js": "^9.23.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vanilla-extract/css": "^1.17.1",
     "eslint-plugin-import": "^2.31.0",
     "globals": "^16.0.0",
@@ -43,4 +43,4 @@
     "tinybase": "^6.0.0",
     "typescript-eslint": "^8.28.0"
   }
-}
+}

package/src/common/functions.tsx

@@ -1,6 +1,6 @@
-import {screens} from '../css/screens';
 import type {StyleRule} from '@vanilla-extract/css';
-import React, {type ComponentType, type ReactNode} from 'react';
+import {type ComponentType, type ReactNode} from 'react';
+import {screens} from '../css/screens';
 
 /**
  * The `classNames` function returns a concatenated list of class names,

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

@@ -1,7 +1,7 @@
+import {style} from '@vanilla-extract/css';
 import {large} from '../../common/functions.tsx';
 import {colors} from '../../css/colors.css.ts';
 import {dimensions, dimensionsClass} from '../../css/dimensions.css.ts';
-import {style} from '@vanilla-extract/css';
 
 export const app = style([dimensionsClass, {color: colors.foreground}]);
 

package/src/components/App/index.tsx

@@ -1,3 +1,7 @@
+import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import type {OptionalSchemas} from 'tinybase/with-schemas';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {codeDark, codeLight} from '../../css/code.css.ts';
 import {colorsDark, colorsLight} from '../../css/colors.css.ts';
@@ -28,11 +32,6 @@ import {
   title,
   topNav,
 } from './index.css.ts';
-import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
-import * as UiReact from 'tinybase/ui-react/with-schemas';
-import type {OptionalSchemas} from 'tinybase/with-schemas';
 
 const {Provider} = UiReact as UiReact.WithSchemas<OptionalSchemas>;
 

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const button = style({
   display: 'inline-flex',

package/src/components/Button/index.tsx

@@ -1,3 +1,5 @@
+import type {ComponentType, ReactNode, Ref} from 'react';
+import {forwardRef, useCallback} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {iconSize} from '../../css/dimensions.css.ts';
 import {
@@ -7,8 +9,6 @@ import {
   titleStyle,
   titleStyleRight,
 } from './index.css.ts';
-import type {ComponentType, ReactNode, Ref} from 'react';
-import React, {forwardRef, useCallback} from 'react';
 
 /**
  * The `Button` component displays an button, with a number of common variants.

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const card = style({
   padding: dimensions.padding,

package/src/components/Card/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {card} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Card` component displays a simple rectangular container.

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

@@ -1,7 +1,7 @@
+import {globalStyle, style} from '@vanilla-extract/css';
 import {code} from '../../css/code.css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {globalStyle, style} from '@vanilla-extract/css';
 
 export const pre = style({
   padding: dimensions.padding,

package/src/components/Code/index.tsx

@@ -1,6 +1,5 @@
 import {classNames} from '../../common/functions.tsx';
 import {pre} from './index.css.ts';
-import React from 'react';
 
 /**
  * The `Code` component displays a block of pre-formatted code, and uses PrismJS

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const collapsible = style({
   width: '100%',

package/src/components/Collapsible/index.tsx

@@ -1,3 +1,6 @@
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import {useCallback, useRef, useState} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {
   useCollapsibleIsOpen,
@@ -11,9 +14,6 @@ import {
   collapsibleOpen,
   content,
 } from './index.css.ts';
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
-import React, {useCallback, useRef, useState} from 'react';
 
 /**
  * The `Collapsible` component displays a titled box that can be expanded or

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

@@ -1,5 +1,5 @@
-import {colors} from '../../css/colors.css';
 import {style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
 
 export const detailTable = style({
   width: '100%',

package/src/components/Detail/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {detailCell, detailRow, detailTable} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Detail` component displays a set of key-value pairs in a two-column

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style} from '@vanilla-extract/css';
 
 export const hr = style({
   border: 'none',

package/src/components/Hr/index.tsx

@@ -1,6 +1,5 @@
 import {classNames} from '../../common/functions';
 import {hr} from './index.css';
-import React from 'react';
 
 /**
  * The `Hr` component displays a styled horizontal rule.

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const image = style({
   display: 'inline-block',

package/src/components/Image/index.tsx

@@ -1,6 +1,6 @@
+import {useCallback} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {clickable, image, imageVariants} from './index.css.ts';
-import React, {useCallback} from 'react';
 
 /**
  * The `Image` component displays an image, with a number of common variants.

package/src/components/Metric/index.tsx

@@ -1,8 +1,7 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
 import {iconSize} from '../../css/dimensions.css';
 import {metric, metricLabel, metricNumber} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Metric` component displays a metric as a prominent numerical value with

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

@@ -1,6 +1,6 @@
+import {style, styleVariants} from '@vanilla-extract/css';
 import {notLarge} from '../../common/functions.tsx';
 import {dimensions} from '../../css/dimensions.css.ts';
-import {style, styleVariants} from '@vanilla-extract/css';
 
 export const row = style({
   display: 'grid',

package/src/components/Row/index.tsx

@@ -1,7 +1,6 @@
+import type {ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {row, rowVariants} from './index.css';
-import type {ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Row` component displays a row of 'cell' components, with a number of

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

@@ -1,6 +1,6 @@
+import {style} from '@vanilla-extract/css';
 import {notLarge} from '../../common/functions.tsx';
 import {dimensions} from '../../css/dimensions.css.ts';
-import {style} from '@vanilla-extract/css';
 
 export const summary = style({
   display: 'grid',

package/src/components/Summary/index.tsx

@@ -1,8 +1,7 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames} from '../../common/functions';
 import {Image} from '../Image';
 import {image, summary} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Summary` component displays an image on the left, and other content

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

@@ -1,5 +1,5 @@
-import {colors} from '../../css/colors.css';
 import {style, styleVariants} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
 
 export const tag = style({
   display: 'flex',

package/src/components/Tag/index.tsx

@@ -1,7 +1,6 @@
+import type {ComponentType, ReactNode} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions';
 import {tag, tagIcon, tagVariants} from './index.css';
-import type {ComponentType, ReactNode} from 'react';
-import React from 'react';
 
 /**
  * The `Tag` component displays a small rectangular tag, suitable for minimal

package/src/components/TasksProvider/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ReactNode,
   createContext,
   useCallback,

package/src/css/global.css.ts

@@ -1,5 +1,5 @@
-import {small} from '../common/functions';
 import {globalStyle} from '@vanilla-extract/css';
+import {small} from '../common/functions';
 
 globalStyle('*', {
   margin: 0,

package/src/index.css.ts

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

package/src/index.ts

@@ -15,8 +15,8 @@ export {
   useScheduleTask,
 } from './components/TasksProvider/index.tsx';
 
-export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
-export {useDark} from './stores/LocalStore.tsx';
 export {classNames} from './common/functions.tsx';
+export {useDark} from './stores/LocalStore.tsx';
+export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
 
 export type {ScheduleTask} from './components/TasksProvider/index.tsx';

package/src/stores/LocalStore.tsx

@@ -1,8 +1,8 @@
-import {CHANGE, READY, READY_SCHEMA} from './common';
 import {useCallback, useEffect} from 'react';
 import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
 import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {CHANGE, READY, READY_SCHEMA} from './common';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 

package/src/stores/RouteStore.tsx

@@ -1,7 +1,7 @@
-import {READY, READY_SCHEMA} from './common';
 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 {READY, READY_SCHEMA} from './common';
 
 const ROUTE_STORE = 'tinywidgets/Route';
 const ROUTE = 'route';

package/src/stores/SessionStore.tsx

@@ -1,7 +1,7 @@
-import {READY, READY_SCHEMA} from './common';
 import {createSessionPersister} from 'tinybase/persisters/persister-browser/with-schemas';
 import * as UiReact from 'tinybase/ui-react/with-schemas';
 import {createStore} from 'tinybase/with-schemas';
+import {READY, READY_SCHEMA} from './common';
 
 const SESSION_STORE = 'tinywidgets/Session';
 const COLLAPSIBLE = 'collapsible';

package/tsconfig.json

@@ -10,7 +10,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,