@bexis2/bexis2-core-ui 0.4.89 → 0.4.91

package/README.md

@@ -1,6 +1,12 @@
 # bexis-core-ui
 
 
+## 0.4.91
+- Input
+  - Add DataPickerInput based on Svelty Picker
+  - reorder font size in menu (less layout shift with old header)
+  - trigger description event on mouse over / out
+
 ## 0.4.87
 - Input
   - add show description to all form components

package/dist/components/form/DateInput.svelte

@@ -9,9 +9,11 @@ export let feedback = [""];
 export let help = false;
 export let disabled = false;
 export let description = "";
+export let showDescription = false;
+export let showIcon = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"

package/dist/components/form/DateInput.svelte.d.ts

@@ -11,8 +11,12 @@ declare const __propDef: {
         help?: boolean;
         disabled?: boolean;
         description?: string;
+        showDescription?: boolean;
+        showIcon?: boolean;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         input: Event;
         change: Event;
     } & {

package/dist/components/form/DatePickerInput.svelte

@@ -12,6 +12,7 @@ export let help = false;
 export let disabled = false;
 export let description = "";
 export let showDescription = false;
+export let showIcon = false;
 export let mode = "date";
 export let initialDate = "";
 export let format = "yyyy-mm-dd";
@@ -32,7 +33,7 @@ if (mode === "datetime") {
 }
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<SveltyPicker
 		{mode}
 		name={label}

package/dist/components/form/DatePickerInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         disabled?: boolean;
         description?: string;
         showDescription?: boolean;
+        showIcon?: boolean;
         mode?: "date" | "time" | "datetime";
         initialDate?: string;
         format?: string;
@@ -20,6 +21,9 @@ declare const __propDef: {
         onChangeHandler?: (event: CustomEvent) => void;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/form/Dropdown.svelte

@@ -12,7 +12,7 @@
 	export let help = false;
 	export let description = '';
 	export let showDescription = false;
-
+	export let showIcon = false;
 	$: selected = null;
 
 	$: updatedSelectedValue(target);
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/Dropdown.svelte.d.ts

@@ -7,13 +7,16 @@ export default class Dropdown extends SvelteComponent<{
     title: any;
     source: any;
     description?: string | undefined;
+    showDescription?: boolean | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
     help?: boolean | undefined;
+    showIcon?: boolean | undefined;
     valid?: boolean | undefined;
-    showDescription?: boolean | undefined;
 }, {
+    showDescription: CustomEvent<any>;
+    hideDescription: CustomEvent<any>;
     change: Event;
     select: Event;
 } & {
@@ -31,14 +34,17 @@ declare const __propDef: {
         title: any;
         source: any;
         description?: string | undefined;
+        showDescription?: boolean | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;
         help?: boolean | undefined;
+        showIcon?: boolean | undefined;
         valid?: boolean | undefined;
-        showDescription?: boolean | undefined;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         change: Event;
         select: Event;
     } & {

package/dist/components/form/DropdownKvP.svelte

@@ -13,7 +13,7 @@
 	export let help = false;
 	export	let description = '';
 	export let showDescription = false;
-
+	export let showIcon = false;
 	$: selected = null;
 
 	$: updatedSelectedValue(target);
@@ -38,7 +38,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/DropdownKvP.svelte.d.ts

@@ -7,14 +7,17 @@ export default class DropdownKvP extends SvelteComponent<{
     title: any;
     source: any;
     description?: string | undefined;
+    showDescription?: boolean | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
     help?: boolean | undefined;
+    showIcon?: boolean | undefined;
     valid?: boolean | undefined;
     complexTarget?: boolean | undefined;
-    showDescription?: boolean | undefined;
 }, {
+    showDescription: CustomEvent<any>;
+    hideDescription: CustomEvent<any>;
     change: Event;
     select: Event;
 } & {
@@ -32,15 +35,18 @@ declare const __propDef: {
         title: any;
         source: any;
         description?: string | undefined;
+        showDescription?: boolean | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;
         help?: boolean | undefined;
+        showIcon?: boolean | undefined;
         valid?: boolean | undefined;
         complexTarget?: boolean | undefined;
-        showDescription?: boolean | undefined;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         change: Event;
         select: Event;
     } & {

package/dist/components/form/InputContainer.svelte

@@ -1,4 +1,5 @@
-<script>import { helpStore } from "../../stores/pageStores";
+<script>import { createEventDispatcher } from "svelte";
+import { helpStore } from "../../stores/pageStores";
 import Fa from "svelte-fa";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 export let id = "";
@@ -8,12 +9,23 @@ export let feedback;
 export let help = false;
 export let description = "";
 export let showDescription = false;
+export let showIcon = false;
+const dispatch = createEventDispatcher();
 function onMouseOver() {
   if (help) {
     helpStore.show(id);
   }
+  if (description.length > 0) {
+    dispatch("showDescription", { id, description });
+  }
 }
 function onMouseOut() {
+  if (help) {
+    helpStore.hide(id);
+  }
+  if (description.length > 0) {
+    dispatch("hideDescription", { id });
+  }
 }
 </script>
 
@@ -30,7 +42,7 @@ function onMouseOut() {
 			>{label}
 			{#if required} <span class="text-xs text-red-600">*</span> {/if}
 		</span>
-		{#if description}
+		{#if description && showIcon}
 				<button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
 		{/if}
 	</label>

package/dist/components/form/InputContainer.svelte.d.ts

@@ -8,8 +8,12 @@ declare const __propDef: {
         help?: boolean;
         description?: string;
         showDescription?: boolean;
+        showIcon?: boolean;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/form/MultiSelect.svelte

@@ -26,6 +26,7 @@
 	export let searchable = true;
 	export let description = '';
 	export let showDescription = false;
+	export let showIcon = false;
 
 	let isLoaded = false;
 
@@ -309,7 +310,7 @@
 	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<Select
 		{id}
 		items={source}

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -7,23 +7,26 @@ export default class MultiSelect extends SvelteComponent<{
     title: any;
     source: any;
     description?: string | undefined;
+    showDescription?: boolean | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
     help?: boolean | undefined;
+    showIcon?: boolean | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
     complexTarget?: boolean | undefined;
-    showDescription?: boolean | undefined;
     itemId?: string | undefined;
     itemLabel?: string | undefined;
     itemGroup?: string | undefined;
     isMulti?: boolean | undefined;
     complexSource?: boolean | undefined;
-    placeholder?: string | undefined;
     loading?: boolean | undefined;
     clearable?: boolean | undefined;
-    disabled?: boolean | undefined;
     searchable?: boolean | undefined;
 }, {
+    showDescription: CustomEvent<any>;
+    hideDescription: CustomEvent<any>;
     change: CustomEvent<any>;
     input: CustomEvent<any>;
     focus: CustomEvent<any>;
@@ -48,24 +51,27 @@ declare const __propDef: {
         title: any;
         source: any;
         description?: string | undefined;
+        showDescription?: boolean | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;
         help?: boolean | undefined;
+        showIcon?: boolean | undefined;
+        disabled?: boolean | undefined;
+        placeholder?: string | undefined;
         complexTarget?: boolean | undefined;
-        showDescription?: boolean | undefined;
         itemId?: string | undefined;
         itemLabel?: string | undefined;
         itemGroup?: string | undefined;
         isMulti?: boolean | undefined;
         complexSource?: boolean | undefined;
-        placeholder?: string | undefined;
         loading?: boolean | undefined;
         clearable?: boolean | undefined;
-        disabled?: boolean | undefined;
         searchable?: boolean | undefined;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         change: CustomEvent<any>;
         input: CustomEvent<any>;
         focus: CustomEvent<any>;

package/dist/components/form/NumberInput.svelte

@@ -13,6 +13,7 @@ export let help = false;
 export let disabled = false;
 export let description = "";
 export let showDescription = false;
+export let showIcon = false;
 export let min = void 0;
 export let max = void 0;
 $: if (max != void 0 && parseInt(value) > max) {
@@ -23,7 +24,7 @@ $: if (min != void 0 && parseInt(value) < min) {
 }
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/NumberInput.svelte.d.ts

@@ -13,10 +13,13 @@ declare const __propDef: {
         disabled?: boolean;
         description?: string;
         showDescription?: boolean;
+        showIcon?: boolean;
         min?: number | undefined;
         max?: number | undefined;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         input: Event;
         change: Event;
     } & {

package/dist/components/form/TextArea.svelte

@@ -11,9 +11,10 @@ export let help = false;
 export let disabled = false;
 export let description = "";
 export let showDescription = false;
+export let showIcon = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<textarea
 		{id}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/TextArea.svelte.d.ts

@@ -13,8 +13,11 @@ declare const __propDef: {
         disabled?: boolean;
         description?: string;
         showDescription?: boolean;
+        showIcon?: boolean;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         input: Event;
         change: Event;
     } & {

package/dist/components/form/TextInput.svelte

@@ -11,9 +11,10 @@ export let help = false;
 export let disabled = false;
 export let description = "";
 export let showDescription = false;
+export let showIcon = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/dist/components/form/TextInput.svelte.d.ts

@@ -13,8 +13,11 @@ declare const __propDef: {
         disabled?: boolean;
         description?: string;
         showDescription?: boolean;
+        showIcon?: boolean;
     };
     events: {
+        showDescription: CustomEvent<any>;
+        hideDescription: CustomEvent<any>;
         input: Event;
         change: Event;
     } & {

package/dist/components/page/menu/Menu.svelte

@@ -74,8 +74,7 @@ if (import.meta.env.DEV) {
 				<Accordion>
 					<div class="sm:flex w-full justify-between">
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-start gap-2 py-0"> -->
-						<MenuBar menuBar={$menuStore.MenuBar} />
-						<MenuBar menuBar={$menuStore.Extended} />
+						
 						<!-- </div> -->
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
@@ -146,6 +145,8 @@ if (import.meta.env.DEV) {
 									{/if}
 								{/if}
 							</button>
+								<MenuBar menuBar={$menuStore.MenuBar} />
+								<MenuBar menuBar={$menuStore.Extended} />
 								<SettingsBar menuBar={$menuStore.Settings} />
 								<!-- </div> -->
 							

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
+import DatePickerInput from './components/form/DatePickerInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
 import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
@@ -26,7 +27,7 @@ import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 import { bexis2theme } from './themes/theme-bexis2';
-export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, Dropdown, MultiSelect, NumberInput, TextArea, TextInput };
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DatePickerInput, DropdownKVP, Dropdown, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';

package/dist/index.js

@@ -15,6 +15,7 @@ import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
+import DatePickerInput from './components/form/DatePickerInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
 import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
@@ -36,7 +37,7 @@ import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 // theme
 import { bexis2theme } from './themes/theme-bexis2';
 //Form
-export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, Dropdown, MultiSelect, NumberInput, TextArea, TextInput };
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DatePickerInput, DropdownKVP, Dropdown, MultiSelect, NumberInput, TextArea, TextInput };
 //File
 export { FileInfo, FileIcon, FileUploader };
 //others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.89",
+  "version": "0.4.91",
   "private": false,
   "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
   "keywords": [

package/src/lib/components/form/DateInput.svelte

@@ -11,9 +11,11 @@
 	export let help = false;
 	export let disabled: boolean = false;
 	export let description	: string = '';
+	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400"

package/src/lib/components/form/DatePickerInput.svelte

@@ -14,6 +14,7 @@
 	export let disabled: boolean = false;
 	export let description: string = '';
 	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
 	export let mode: 'date' | 'time' | 'datetime' = 'date';
 	export let initialDate: string = '';
 	export let format: string = 'yyyy-mm-dd';
@@ -37,7 +38,7 @@
 	}
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<SveltyPicker
 		{mode}
 		name={label}

package/src/lib/components/form/Dropdown.svelte

@@ -12,7 +12,7 @@
 	export let help = false;
 	export let description = '';
 	export let showDescription = false;
-
+	export let showIcon = false;
 	$: selected = null;
 
 	$: updatedSelectedValue(target);
@@ -29,7 +29,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/DropdownKvP.svelte

@@ -13,7 +13,7 @@
 	export let help = false;
 	export	let description = '';
 	export let showDescription = false;
-
+	export let showIcon = false;
 	$: selected = null;
 
 	$: updatedSelectedValue(target);
@@ -38,7 +38,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<select
 		{id}
 		class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/InputContainer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { helpStore } from '$store/pageStores';
 	import Fa from 'svelte-fa';
 	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
@@ -10,14 +11,30 @@
 	export let help: boolean = false;
 	export let description : string = '';
 	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
+
+	const dispatch = createEventDispatcher();
 
 	function onMouseOver() {
 		if (help) {
 			helpStore.show(id);
 		}
+		if (description.length > 0) {
+			// dispatch an event to show the description
+			dispatch('showDescription', { id, description });
+		}
+
 	}
 
-	function onMouseOut() {}
+	function onMouseOut() {
+		if (help) {
+			helpStore.hide(id);
+		}
+		if (description.length > 0) {
+			// dispatch an event to hide the description
+			dispatch('hideDescription', { id });
+		}
+	}
 </script>
 
 <div
@@ -33,7 +50,7 @@
 			>{label}
 			{#if required} <span class="text-xs text-red-600">*</span> {/if}
 		</span>
-		{#if description}
+		{#if description && showIcon}
 				<button class="badge " on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
 		{/if}
 	</label>

package/src/lib/components/form/MultiSelect.svelte

@@ -26,6 +26,7 @@
 	export let searchable = true;
 	export let description = '';
 	export let showDescription = false;
+	export let showIcon = false;
 
 	let isLoaded = false;
 
@@ -309,7 +310,7 @@
 	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<Select
 		{id}
 		items={source}

package/src/lib/components/form/NumberInput.svelte

@@ -16,6 +16,7 @@
 	export let disabled: boolean = false;
 	export let description	: string = '';
 	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
 	export let min	: number | undefined = undefined;
 	export let max	: number | undefined = undefined;
 
@@ -31,7 +32,7 @@
 
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/TextArea.svelte

@@ -14,9 +14,10 @@
 	export let disabled: boolean = false;
 	export let description	: string = '';
 	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<textarea
 		{id}
 		class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/form/TextInput.svelte

@@ -13,9 +13,10 @@
 	export let disabled: boolean = false;
 	export let description	: string = '';
 	export let showDescription: boolean = false;
+	export let showIcon: boolean = false;
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
 	<input
 		{id}
 		class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"

package/src/lib/components/page/menu/Menu.svelte

@@ -90,8 +90,7 @@
 				<Accordion>
 					<div class="sm:flex w-full justify-between">
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-start gap-2 py-0"> -->
-						<MenuBar menuBar={$menuStore.MenuBar} />
-						<MenuBar menuBar={$menuStore.Extended} />
+						
 						<!-- </div> -->
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
@@ -162,6 +161,8 @@
 									{/if}
 								{/if}
 							</button>
+								<MenuBar menuBar={$menuStore.MenuBar} />
+								<MenuBar menuBar={$menuStore.Extended} />
 								<SettingsBar menuBar={$menuStore.Settings} />
 								<!-- </div> -->
 							

package/src/lib/index.ts

@@ -18,6 +18,7 @@ import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
+import DatePickerInput from './components/form/DatePickerInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
 import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
@@ -25,6 +26,7 @@ import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
 import TextArea from './components/form/TextArea.svelte';
 
+
 //table
 import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
@@ -53,6 +55,7 @@ export {
 	CheckboxKVPList,
 	CheckboxList,
 	DateInput,
+	DatePickerInput,
 	DropdownKVP,
 	Dropdown,
 	MultiSelect,