@bexis2/bexis2-core-ui 0.4.66 → 0.4.68

package/README.md

@@ -1,4 +1,12 @@
 # bexis-core-ui
+## 0.4.68
+- form
+  - add description to input container, only visible if description added to the component
+
+## 0.4.67
+- dropdown
+  - export dropdown 
+
 ## 0.4.66
 - dropdown
   - add dropdown with simple list and value

package/dist/__package_types_tmp__/components/form/Checkbox.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         invalid: boolean;
         required: boolean;
         feedback: [];
+        description?: string;
     };
     events: {
         input: Event;

package/dist/__package_types_tmp__/components/form/CheckboxKvPList.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         description?: string;
         key: any;
         help?: boolean;
+        feedback: [];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/__package_types_tmp__/components/form/CheckboxList.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         title: any;
         description?: string;
         key: any;
+        required?: boolean;
+        feedback: [];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         feedback?: string[];
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

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

@@ -6,6 +6,7 @@ export default class Dropdown extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

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

@@ -6,6 +6,7 @@ export default class DropdownKvP extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -29,6 +30,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         required: boolean;
         feedback: string[];
         help?: boolean;
+        description?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -6,6 +6,7 @@ export default class MultiSelect extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -45,6 +46,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

package/dist/__package_types_tmp__/index.d.ts

@@ -11,6 +11,7 @@ import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
+import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
@@ -25,7 +26,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, MultiSelect, NumberInput, TextArea, TextInput };
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, Dropdown, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';

package/dist/components/form/Checkbox.svelte

@@ -6,9 +6,10 @@ export let valid;
 export let invalid;
 export let required;
 export let feedback;
+export let description = "";
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {label} {feedback} {required} {description}>
 	<input
 		{id}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         invalid: boolean;
         required: boolean;
         feedback: [];
+        description?: string;
     };
     events: {
         input: Event;

package/dist/components/form/CheckboxKvPList.svelte

@@ -7,10 +7,10 @@ export let description = "";
 export let key;
 export let help = false;
 let required = false;
-let feedback;
+export let feedback;
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={item.key}>
 			<input

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         description?: string;
         key: any;
         help?: boolean;
+        feedback: [];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/CheckboxList.svelte

@@ -4,11 +4,11 @@ export let target;
 export let title;
 export let description = "";
 export let key;
-let required = false;
-let feedback;
+export let required = false;
+export let feedback;
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer label={title} {feedback} {required} {description}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={item}>
 			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         title: any;
         description?: string;
         key: any;
+        required?: boolean;
+        feedback: [];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/DateInput.svelte

@@ -8,9 +8,10 @@ export let required = false;
 export let feedback = [""];
 export let help = false;
 export let disabled = false;
+export let description = "";
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} {description}>
 	<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

@@ -10,6 +10,7 @@ declare const __propDef: {
         feedback?: string[];
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

package/dist/components/form/Dropdown.svelte

@@ -10,6 +10,7 @@
 	export let feedback = [''];
 	export let required = false;
 	export let help = false;
+	export	let description = '';
 
 	$: selected = null;
 
@@ -27,7 +28,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<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

@@ -6,6 +6,7 @@ export default class Dropdown extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

package/dist/components/form/DropdownKvP.svelte

@@ -11,6 +11,7 @@
 	export let required = false;
 	export let complexTarget = false;
 	export let help = false;
+	export	let description = '';
 
 	$: selected = null;
 
@@ -36,7 +37,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<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

@@ -6,6 +6,7 @@ export default class DropdownKvP extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -29,6 +30,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

package/dist/components/form/InputContainer.svelte

@@ -1,9 +1,13 @@
 <script>import { helpStore } from "../../stores/pageStores";
+import Fa from "svelte-fa";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 export let id = "";
 export let label = "";
 export let required;
 export let feedback;
 export let help = false;
+export let description = "";
+let showDescription = false;
 function onMouseOver() {
   if (help) {
     helpStore.show(id);
@@ -15,25 +19,34 @@ function onMouseOut() {
 
 <div
 	id="{id}-container"
+	role="region"
 	on:mouseover={onMouseOver}
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
 >
-	<label class="label">
-		<span
+	<label class="label w-full flex" for="{id}">
+		<span class="grow"
 			>{label}
 			{#if required} <span class="text-sm text-red-600">*</span> {/if}
 		</span>
-		<slot />
-		{#if feedback}
-			<span class="text-sm text-error-600">
-				<ul>
-					{#each feedback as message}
-						<li>{message}</li>
-					{/each}
-				</ul>
-			</span>
+		{#if description}
+				<button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
 		{/if}
 	</label>
+
+	{#if feedback}
+		<span class="text-sm text-error-600">
+			<ul>
+				{#each feedback as message}
+					<li>{message}</li>
+				{/each}
+			</ul>
+		</span>
+	{/if}
+	{#if description && showDescription}
+		<div	class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
+	{/if}
+	<slot />
+
 </div>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         required: boolean;
         feedback: string[];
         help?: boolean;
+        description?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/MultiSelect.svelte

@@ -24,6 +24,7 @@
 	export let clearable = true;
 	export let disabled = false;
 	export let searchable = true;
+	export let description = '';
 
 	let isLoaded = false;
 
@@ -298,9 +299,10 @@
 		dispatch('clear', e)
 
 	}
+	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<Select
 		{id}
 		items={source}

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

@@ -6,6 +6,7 @@ export default class MultiSelect extends SvelteComponent<{
     target: any;
     title: any;
     source: any;
+    description?: string | undefined;
     invalid?: boolean | undefined;
     feedback?: string[] | undefined;
     required?: boolean | undefined;
@@ -45,6 +46,7 @@ declare const __propDef: {
         target: any;
         title: any;
         source: any;
+        description?: string | undefined;
         invalid?: boolean | undefined;
         feedback?: string[] | undefined;
         required?: boolean | undefined;

package/dist/components/form/NumberInput.svelte

@@ -10,9 +10,10 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = false;
+export let description = "";
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
 	<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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

package/dist/components/form/TextArea.svelte

@@ -9,9 +9,10 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = false;
+export let description = "";
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
 	<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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

package/dist/components/form/TextInput.svelte

@@ -9,9 +9,10 @@ export let feedback = [""];
 export let placeholder = "";
 export let help = false;
 export let disabled = false;
+export let description = "";
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
 	<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

@@ -11,6 +11,7 @@ declare const __propDef: {
         placeholder?: string;
         help?: boolean;
         disabled?: boolean;
+        description?: string;
     };
     events: {
         input: Event;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
+import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
@@ -25,7 +26,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, MultiSelect, NumberInput, TextArea, TextInput };
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, 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

@@ -16,6 +16,7 @@ import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
+import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
@@ -35,7 +36,7 @@ import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 // theme
 import { bexis2theme } from './themes/theme-bexis2';
 //Form
-export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
+export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, 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.66",
+  "version": "0.4.68",
   "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/Checkbox.svelte

@@ -9,9 +9,10 @@
 	export let invalid: boolean;
 	export let required: boolean;
 	export let feedback: [];
+	export	let description: string = '';
 </script>
 
-<InputContainer {label} {feedback} {required}>
+<InputContainer {label} {feedback} {required} {description}>
 	<input
 		{id}
 		class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"

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

@@ -10,10 +10,11 @@
 	export let help = false;
 
 	let required = false;
-	let feedback: [];
+	export let feedback: [];
+
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={item.key}>
 			<input

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

@@ -7,11 +7,11 @@
 	export let description = '';
 	export let key;
 
-	let required = false;
-	let feedback: [];
+	export let required = false;
+	export let feedback: [];
 </script>
 
-<InputContainer label={title} {feedback} {required}>
+<InputContainer label={title} {feedback} {required} {description}>
 	{#each source as item}
 		<label class="flex items-center space-x-2" for={item}>
 			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>

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

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

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

@@ -10,6 +10,7 @@
 	export let feedback = [''];
 	export let required = false;
 	export let help = false;
+	export	let description = '';
 
 	$: selected = null;
 
@@ -27,7 +28,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<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

@@ -11,6 +11,7 @@
 	export let required = false;
 	export let complexTarget = false;
 	export let help = false;
+	export	let description = '';
 
 	$: selected = null;
 
@@ -36,7 +37,7 @@
 	}
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<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,11 +1,16 @@
 <script lang="ts">
 	import { helpStore } from '$store/pageStores';
+	import Fa from 'svelte-fa';
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 
 	export let id: string = '';
 	export let label: string = '';
 	export let required: boolean;
 	export let feedback: string[];
 	export let help: boolean = false;
+	export let description : string = '';
+
+let showDescription: boolean = false;
 
 	function onMouseOver() {
 		if (help) {
@@ -18,25 +23,34 @@
 
 <div
 	id="{id}-container"
+	role="region"
 	on:mouseover={onMouseOver}
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
 >
-	<label class="label">
-		<span
+	<label class="label w-full flex" for="{id}">
+		<span class="grow"
 			>{label}
 			{#if required} <span class="text-sm text-red-600">*</span> {/if}
 		</span>
-		<slot />
-		{#if feedback}
-			<span class="text-sm text-error-600">
-				<ul>
-					{#each feedback as message}
-						<li>{message}</li>
-					{/each}
-				</ul>
-			</span>
+		{#if description}
+				<button class="badge p-2" on:click={()=>showDescription = !showDescription}><Fa icon={faQuestion} /></button>
 		{/if}
 	</label>
+
+	{#if feedback}
+		<span class="text-sm text-error-600">
+			<ul>
+				{#each feedback as message}
+					<li>{message}</li>
+				{/each}
+			</ul>
+		</span>
+	{/if}
+	{#if description && showDescription}
+		<div	class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
+	{/if}
+	<slot />
+
 </div>

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

@@ -24,6 +24,7 @@
 	export let clearable = true;
 	export let disabled = false;
 	export let searchable = true;
+	export let description = '';
 
 	let isLoaded = false;
 
@@ -298,9 +299,10 @@
 		dispatch('clear', e)
 
 	}
+	
 </script>
 
-<InputContainer {id} label={title} {feedback} {required} {help}>
+<InputContainer {id} label={title} {feedback} {required} {help} {description}>
 	<Select
 		{id}
 		items={source}

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

@@ -13,9 +13,10 @@
 	export let placeholder: string = '';
 	export let help: boolean = false;
 	export let disabled: boolean = false;
+	export let description	: string = '';
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
 	<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

@@ -12,9 +12,10 @@
 	export let placeholder: string = '';
 	export let help: boolean = false;
 	export let disabled: boolean = false;
+	export let description	: string = '';
 </script>
 
-<InputContainer {id} {label} {feedback} {required} {help}>
+<InputContainer {id} {label} {feedback} {required} {help} 	{description}>
 	<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

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

package/src/lib/index.ts

@@ -19,6 +19,7 @@ import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
 import DateInput from './components/form/DateInput.svelte';
 import DropdownKVP from './components/form/DropdownKvP.svelte';
+import Dropdown from './components/form/Dropdown.svelte';
 import MultiSelect from './components/form/MultiSelect.svelte';
 import NumberInput from './components/form/NumberInput.svelte';
 import TextInput from './components/form/TextInput.svelte';
@@ -53,6 +54,7 @@ export {
 	CheckboxList,
 	DateInput,
 	DropdownKVP,
+	Dropdown,
 	MultiSelect,
 	NumberInput,
 	TextArea,