@onehat/ui 0.4.3 → 0.4.6

package/src/Components/Grid/GridRow.js

@@ -5,7 +5,7 @@ import {
 	HStackNative,
 	Icon,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	UI_MODE_WEB,
 } from '../../Constants/UiModes.js';

package/src/Components/Grid/HeaderColumnSelectorHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	Pressable,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Gear from '../Icons/Gear.js';
 import _ from 'lodash';
 

package/src/Components/Grid/HeaderReorderHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripVertical from '../Icons/GripVertical.js';

package/src/Components/Grid/HeaderResizeHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import withDraggable from '../Hoc/withDraggable.js';
 import GripLinesVertical from '../Icons/GripLinesVertical.js';

package/src/Components/Grid/NoRecordsFound.js

@@ -2,7 +2,7 @@ import {
 	HStack,
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import IconButton from '../Buttons/IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 

package/src/Components/Grid/RowDragHandle.js

@@ -1,7 +1,7 @@
 import {
 	Icon,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -1,6 +1,6 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
-} from '../../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../../Constants/Editor.js';

package/src/Components/Hoc/withAlert.js

@@ -4,7 +4,7 @@ import {
 	HStack,
 	Icon,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import withModal from './withModal.js';
 import CircleInfo from '../Icons/CircleInfo.js';
 import CircleQuestion from '../Icons/CircleQuestion.js';

package/src/Components/Hoc/withContextMenu.js

@@ -2,7 +2,7 @@ import { forwardRef, useRef, useState, useEffect, } from 'react';
 import {
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Hoc/withFilters.js

@@ -3,7 +3,7 @@ import {
 	HStack,
 	// ScrollView,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	ScrollView,
 } from 'react-native'

package/src/Components/Hoc/withModal.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
 import Footer from '../Layout/Footer.js';

package/src/Components/Hoc/withWindowedEditor.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';

package/src/Components/Layout/Footer.js

@@ -1,6 +1,6 @@
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {

package/src/Components/Messages/ConfirmationMessage.js

@@ -1,7 +1,7 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 import emptyFn from '../../Functions/emptyFn.js';
 

package/src/Components/Messages/ErrorMessage.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 import testProps from '../../Functions/testProps.js';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';

package/src/Components/Messages/Loading.js

@@ -3,7 +3,7 @@ import {
 	HStackNative,
 	Spinner,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import ScreenContainer from '../Container/ScreenContainer.js';
 
 export default function Loading(props) {

package/src/Components/Messages/OkMessage.js

@@ -1,7 +1,7 @@
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {

package/src/Components/Messages/Unauthorized.js

@@ -1,7 +1,7 @@
 import {
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 
 export default function Unauthorized(props) {
 	const 

package/src/Components/Messages/WaitMessage.js

@@ -3,7 +3,7 @@ import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Spinner,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import testProps from '../../Functions/testProps.js';
 
 export default function WaitMessage(props) {

package/src/Components/Panel/AccordionGridPanel.js

@@ -2,7 +2,7 @@ import { useState, } from 'react';
 import {
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Accordion from 'react-native-collapsible/Accordion'; // https://www.npmjs.com/package/react-native-collapsible
 import testProps from '../../Functions/testProps';
 import Footer from '../Layout/Footer.js';

package/src/Components/Panel/FormPanel.js

@@ -1,6 +1,6 @@
 import {
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Panel from './Panel.js';
 import Form, { FormEditor } from '../Form/Form.js';
 import withData from '../Hoc/withData.js';

package/src/Components/Panel/Header.js

@@ -4,7 +4,7 @@ import {
 	Pressable,
 	TextNative,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -41,7 +41,7 @@ export default function Header(props) {
 		collapseBtn = null;
 	if (onClose) {
 		let closeClassName = `
-			closeBtn
+			Header-closeBtn
 			self-center
 			border
 			border-grey-400
@@ -54,7 +54,7 @@ export default function Header(props) {
 						onPress={onClose}
 						icon={Xmark}
 						_icon={{
-							size: styles.PANEL_HEADER_ICON_SIZE,
+							// size: styles.PANEL_HEADER_ICON_SIZE,
 							className: styles.PANEL_HEADER_ICON_COLOR,
 						}}
 						className={closeClassName}
@@ -62,7 +62,7 @@ export default function Header(props) {
 	}
 	if (isCollapsible) {
 		let collapseClassName = `
-			collapseBtn
+			Header-collapseBtn
 			self-center
 			border
 			border-grey-400
@@ -88,7 +88,8 @@ export default function Header(props) {
 	}
 
 	let panelClassName = `
-		header
+		Header
+		bg-grey-300
 		items-center
 		justify-start
 		py-1
@@ -127,8 +128,9 @@ export default function Header(props) {
 										numberOfLines={1}
 										ellipsizeMode="head"
 										className={`
-											TextNative
+											Header-TextNative1
 											flex-1
+											font-bold
 											${styles.PANEL_HEADER_TEXT_COLOR}
 											${styles.PANEL_HEADER_TEXT_FONTSIZE}
 										`}>{title}</TextNative>
@@ -164,8 +166,9 @@ export default function Header(props) {
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
-								TextNative
+								Header-TextNative2
 								flex-1
+								font-bold
 								${styles.PANEL_HEADER_TEXT_COLOR}
 								${styles.PANEL_HEADER_TEXT_FONTSIZE}
 							`}
@@ -204,6 +207,8 @@ export default function Header(props) {
 										ellipsizeMode="head"
 										style={{ transform: [{ rotate: '-90deg'}] }}
 										className={`
+											Header-TextNative3
+											font-bold
 											w-[200px]
 											text-right
 											${styles.PANEL_HEADER_TEXT_COLOR}
@@ -237,7 +242,13 @@ export default function Header(props) {
 						<TextNative
 							numberOfLines={1}
 							ellipsizeMode="head"
-							className={` ${styles.PANEL_HEADER_TEXT_COLOR} ${styles.PANEL_HEADER_TEXT_FONTSIZE} flex-1 `}>{title}</TextNative>
+							className={`
+								Header-TextNative4
+								font-bold
+								flex-1
+								${styles.PANEL_HEADER_TEXT_COLOR}
+								${styles.PANEL_HEADER_TEXT_FONTSIZE}
+							`}>{title}</TextNative>
 						{collapseBtn}
 					</HStack>
 				</Pressable>;

package/src/Components/Panel/Mask.js

@@ -1,6 +1,6 @@
 import {
 	Box,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,

package/src/Components/Panel/Panel.js

@@ -3,7 +3,7 @@ import {
 	ScrollView,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Picker/Picker.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Select, SelectItem,
 	Tooltip,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import CaretDown from '../Icons/CaretDown.js';
 import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';

package/src/Components/Report/Report.js

@@ -4,7 +4,7 @@ import {
 	Icon,
 	Text,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import { EDITOR_TYPE__PLAIN } from '../../Constants/Editor';
 import {
 	UI_MODE_WEB,

package/src/Components/Screens/Manager.js

@@ -2,7 +2,7 @@ import {
 	HStack,
 	Text,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import React, { useState, useEffect, } from 'react';
 import withComponent from '../Hoc/withComponent.js';
 import testProps from '../../Functions/testProps.js';

package/src/Components/Tab/TabBar.js

@@ -1,9 +1,11 @@
 import { cloneElement, useState, useEffect, } from 'react';
 import {
 	HStack,
+	HStackNative,
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+	VStackNative,
+} from '@project-components/Gluestack';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -488,7 +490,7 @@ function TabBar(props) {
 
 	let tabBar = null;
 	if (direction === VERTICAL) {
-		tabBar = <VStack
+		tabBar = <VStackNative
 					{...testProps('TabBar')}
 					{...propsToPass}
 					className={`
@@ -500,22 +502,22 @@ function TabBar(props) {
 						py-2
 					`}
 				>
-						{renderedTabs}
-						<VStack className="flex-1 w-full justify-end">
-							{renderedToggleButton}
-						</VStack>
-					</VStack>;
+					{renderedTabs}
+					<VStack className="flex-1 w-full justify-end">
+						{renderedToggleButton}
+					</VStack>
+				</VStackNative>;
 		if (renderedCurrentTabContent) {
-			tabBar = <HStack {...propsToPass} className="flex-1 w-full">
+			tabBar = <HStackNative {...propsToPass} className="flex-1 w-full">
 						{tabBar}
 						<VStack className="items-center justify-start flex-1">
 							{renderedCurrentTabContent}
 						</VStack>
-					</HStack>;
+					</HStackNative>;
 		}
 	}
 	if (direction === HORIZONTAL) {
-		tabBar = <HStack
+		tabBar = <HStackNative
 					{...testProps('TabBar')}
 					className={`
 						${isCollapsed ? 'h-[38px]' : 'h-[' + tabHeight + 'px]'}
@@ -537,14 +539,14 @@ function TabBar(props) {
 							{renderedToggleButton}
 						</HStack>
 					</HStack>
-				</HStack>;
+				</HStackNative>;
 		if (renderedCurrentTabContent) {
-			tabBar = <VStack {...propsToPass} className="flex-1 w-full">
+			tabBar = <VStackNative {...propsToPass} className="flex-1 w-full">
 						{tabBar}
 						<VStack className="items-center justify-start flex-1">
 							{renderedCurrentTabContent}
 						</VStack>
-					</VStack>;
+					</VStackNative>;
 		}
 	}
 	return tabBar;

package/src/Components/Toolbar/FilterToolbar.js

@@ -1,6 +1,6 @@
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 

package/src/Components/Toolbar/Pagination.js

@@ -3,7 +3,7 @@ import {
 	HStack,
 	HStackNative,
 	Text,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import testProps from '../../Functions/testProps.js';
 import Button from '../Buttons/Button.js';

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import {
 	HStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';

package/src/Components/Toolbar/Toolbar.js

@@ -1,6 +1,6 @@
 import {
 	HStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Toolbar(props) {

package/src/Components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { forwardRef, cloneElement } from 'react';
-import { Tooltip, TooltipContent, TooltipText } from "../Gluestack/tooltip";
+import { Tooltip, TooltipContent, TooltipText } from '@project-components/Gluestack';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {

package/src/Components/Tree/Tree.js

@@ -4,7 +4,7 @@ import {
 	Pressable,
 	ScrollView,
 	VStack,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,

package/src/Components/Tree/TreeNode.js

@@ -5,7 +5,7 @@ import {
 	Icon,
 	Spinner,
 	TextNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import UiGlobals from '../../UiGlobals.js';
 import withDraggable from '../Hoc/withDraggable.js';

package/src/Components/Viewer/Viewer.js

@@ -5,7 +5,7 @@ import {
 	Text,
 	VStack,
 	VStackNative,
-} from '../Gluestack';
+} from '@project-components/Gluestack';
 import {
 	EDIT,
 } from '../../Constants/Commands.js';

package/src/Components/index.js

@@ -1,7 +1,7 @@
 import {
 	HStackNative,
 	VStackNative,
-} from './Gluestack';
+} from '@project-components/Gluestack';
 import AddressBook from './Icons/AddressBook.js';
 import Alt from './Icons/Alt.js';
 import AngleLeft from './Icons/AngleLeft.js';

package/src/Functions/buildAdditionalButtons.js

@@ -1,6 +1,6 @@
 import {
 	Icon,
-} from '../Components/Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../Components/Buttons/Button.js';
 import testProps from './testProps.js';
 import _ from 'lodash';

package/src/Functions/gsToHex.js

@@ -1,8 +1,10 @@
-import tailwindConfig from '../../tailwind.config';
+import UiGlobals from '../UiGlobals';
 import gluestackConfig from '../Components/Gluestack/gluestack-ui-provider/config';
 import { hslToRgb, rgbToHsl, rgbToHex, rgbaToHex, hslToHex, hslaToHex, } from './colorConversions';
 import _ from 'lodash';
 
+const tailwindConfig = UiGlobals.tailwindConfig;
+
 
 function getHexFromNamedColor(color) {
 	const 

package/src/PlatformImports/Web/Attachments.js

@@ -6,7 +6,7 @@ import {
 	Spinner,
 	Text,
 	VStack,
-} from '../../Components/Gluestack';
+} from '@project-components/Gluestack';
 import Button from '../../Components/Buttons/Button';
 import {
 	CURRENT_MODE,

package/src/PlatformImports/Web/File.js

@@ -2,7 +2,7 @@ import { useEffect, } from 'react';
 import {
 	HStack,
 	Text,
-} from '../../Components/Gluestack';
+} from '@project-components/Gluestack';
 import {
 	CURRENT_MODE,
 	UI_MODE_WEB,