@bexis2/bexis2-core-ui 0.4.88 → 0.4.89

package/README.md

@@ -1,5 +1,7 @@
 # bexis-core-ui
-## 0.4.87/88
+
+
+## 0.4.87
 - Input
   - add show description to all form components
 

package/dist/TableView.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/CodeEditor/CodeEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { ThemeSpec } from 'svelte-codemirror-editor';
 declare const __propDef: {
     props: {
         id: string;
@@ -10,7 +11,7 @@ declare const __propDef: {
         toggle?: boolean;
         actions?: boolean;
         isValid?: boolean;
-        styles?: any;
+        styles?: ThemeSpec;
     };
     events: {
         cancel: CustomEvent<any>;
@@ -23,6 +24,8 @@ declare const __propDef: {
             id: string;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CodeEditorProps = typeof __propDef.props;
 export type CodeEditorEvents = typeof __propDef.events;

package/dist/components/Facets/Facets.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FacetsProps = typeof __propDef.props;
 export type FacetsEvents = typeof __propDef.events;

package/dist/components/Facets/ShowMore.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ShowMoreProps = typeof __propDef.props;
 export type ShowMoreEvents = typeof __propDef.events;

package/dist/components/File/FileIcon.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/File/FileInfo.svelte.d.ts

@@ -23,5 +23,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/File/FileUploader.svelte.d.ts

@@ -19,6 +19,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FileUploaderProps = typeof __propDef.props;
 export type FileUploaderEvents = typeof __propDef.events;

package/dist/components/ListView.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ListViewProps = typeof __propDef.props;
 export type ListViewEvents = typeof __propDef.events;

package/dist/components/Table/ColumnsMenu.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ColumnsMenuProps = typeof __propDef.props;
 export type ColumnsMenuEvents = typeof __propDef.events;

package/dist/components/Table/Table.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;

package/dist/components/Table/TableContent.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableContentProps = typeof __propDef.props;
 export type TableContentEvents = typeof __propDef.events;

package/dist/components/Table/TableFilter.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableFilterProps = typeof __propDef.props;
 export type TableFilterEvents = typeof __propDef.events;

package/dist/components/Table/TableFilterServer.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableFilterServerProps = typeof __propDef.props;
 export type TableFilterServerEvents = typeof __propDef.events;

package/dist/components/Table/TablePagination.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TablePaginationProps = typeof __propDef.props;
 export type TablePaginationEvents = typeof __propDef.events;

package/dist/components/Table/TablePaginationServer.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TablePaginationServerProps = typeof __propDef.props;
 export type TablePaginationServerEvents = typeof __propDef.events;

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

@@ -17,6 +17,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;

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

@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CheckboxKvPListProps = typeof __propDef.props;
 export type CheckboxKvPListEvents = typeof __propDef.events;

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

@@ -13,6 +13,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CheckboxListProps = typeof __propDef.props;
 export type CheckboxListEvents = typeof __propDef.events;

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

@@ -19,6 +19,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type DateInputProps = typeof __propDef.props;
 export type DateInputEvents = typeof __propDef.events;

package/dist/components/form/DatePickerInput.svelte

@@ -0,0 +1,48 @@
+<script>import InputContainer from "./InputContainer.svelte";
+import SveltyPicker from "svelty-picker";
+export let id = "";
+export let label = "";
+export let value = "";
+export let valid = false;
+export let invalid = false;
+export let required = false;
+export let feedback = [""];
+export let placeholder = "";
+export let help = false;
+export let disabled = false;
+export let description = "";
+export let showDescription = false;
+export let mode = "date";
+export let initialDate = "";
+export let format = "yyyy-mm-dd";
+export let displayFormat = "yyyy-mm-dd";
+export let onChangeHandler = () => {
+};
+let width = "w-32";
+if (mode !== "date" && mode !== "time" && mode !== "datetime") {
+  throw new Error(`Invalid mode: ${mode}. Valid modes are 'date', 'time', and 'datetime'.`);
+}
+if (mode === "datetime" && (format === "yyyy-mm-dd" || displayFormat === "yyyy-mm-dd")) {
+  throw new Error(
+    `Invalid format for datetime mode. Please use a format that includes both date and time.`
+  );
+}
+if (mode === "datetime") {
+  width = "w-64";
+}
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+	<SveltyPicker
+		{mode}
+		name={label}
+		{format}
+		{displayFormat}
+		{initialDate}
+		bind:value
+		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
+		on:change={onChangeHandler}
+		{disabled}
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        placeholder?: string;
+        help?: boolean;
+        disabled?: boolean;
+        description?: string;
+        showDescription?: boolean;
+        mode?: "date" | "time" | "datetime";
+        initialDate?: string;
+        format?: string;
+        displayFormat?: string;
+        onChangeHandler?: (event: CustomEvent) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DatePickerInputProps = typeof __propDef.props;
+export type DatePickerInputEvents = typeof __propDef.events;
+export type DatePickerInputSlots = typeof __propDef.slots;
+export default class DatePickerInput extends SvelteComponent<DatePickerInputProps, DatePickerInputEvents, DatePickerInputSlots> {
+}
+export {};

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

@@ -45,5 +45,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -47,5 +47,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -15,6 +15,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InputContainerProps = typeof __propDef.props;
 export type InputContainerEvents = typeof __propDef.events;

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

@@ -79,5 +79,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -23,6 +23,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;

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

@@ -21,6 +21,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;

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

@@ -21,6 +21,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;

package/dist/components/page/Alert.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         default: {};
         actions: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AlertProps = typeof __propDef.props;
 export type AlertEvents = typeof __propDef.events;

package/dist/components/page/BackToTop.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/page/Docs.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type DocsProps = typeof __propDef.props;
 export type DocsEvents = typeof __propDef.events;

package/dist/components/page/ErrorMessage.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ErrorMessageProps = typeof __propDef.props;
 export type ErrorMessageEvents = typeof __propDef.events;

package/dist/components/page/Footer.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FooterProps = typeof __propDef.props;
 export type FooterEvents = typeof __propDef.events;

package/dist/components/page/GoToTop.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/page/Header.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HeaderProps = typeof __propDef.props;
 export type HeaderEvents = typeof __propDef.events;

package/dist/components/page/HelpPopUp.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HelpPopUpProps = typeof __propDef.props;
 export type HelpPopUpEvents = typeof __propDef.events;

package/dist/components/page/Notification.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type NotificationProps = typeof __propDef.props;
 export type NotificationEvents = typeof __propDef.events;

package/dist/components/page/Page.svelte.d.ts

@@ -21,6 +21,8 @@ declare const __propDef: {
         default: {};
         right: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type PageProps = typeof __propDef.props;
 export type PageEvents = typeof __propDef.events;

package/dist/components/page/Spinner.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SpinnerProps = typeof __propDef.props;
 export type SpinnerEvents = typeof __propDef.events;

package/dist/components/page/TablePlaceholder.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TablePlaceholderProps = typeof __propDef.props;
 export type TablePlaceholderEvents = typeof __propDef.events;

package/dist/components/page/breadcrumb/Breadcrumb.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BreadcrumbProps = typeof __propDef.props;
 export type BreadcrumbEvents = typeof __propDef.events;

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

@@ -15,6 +15,7 @@ onMount(async () => {
   const storedFontSize = localStorage.getItem("fontSize");
   if (storedFontSize) {
     document.documentElement.style.fontSize = storedFontSize;
+    document.documentElement.style.setProperty("--font-size", storedFontSize);
   }
 });
 let hamburger = true;
@@ -22,11 +23,13 @@ const theme = writable("light");
 function increaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize + 1 + "px";
+  document.documentElement.style.setProperty("--font-size", document.documentElement.style.fontSize);
   localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function decreaseFontSize() {
   const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
   document.documentElement.style.fontSize = currentFontSize - 1 + "px";
+  document.documentElement.style.setProperty("--font-size", document.documentElement.style.fontSize);
   localStorage.setItem("fontSize", document.documentElement.style.fontSize);
 }
 function toggleDarkMode() {

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;

package/dist/components/page/menu/MenuAccountBar.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MenuAccountBarProps = typeof __propDef.props;
 export type MenuAccountBarEvents = typeof __propDef.events;

package/dist/components/page/menu/MenuBar.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MenuBarProps = typeof __propDef.props;
 export type MenuBarEvents = typeof __propDef.events;

package/dist/components/page/menu/MenuItem.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;

package/dist/components/page/menu/MenuSublist.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MenuSublistProps = typeof __propDef.props;
 export type MenuSublistEvents = typeof __propDef.events;

package/dist/components/page/menu/SettingsBar.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SettingsBarProps = typeof __propDef.props;
 export type SettingsBarEvents = typeof __propDef.events;

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         rounded?: CssClasses | undefined;
     };
     events: {
-        click: MouseEvent;
+        click: PointerEvent;
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
@@ -22,6 +22,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type ToggleProps = typeof __propDef.props;
 export type ToggleEvents = typeof __propDef.events;

package/dist/css/themes/theme-bexis2.css_old

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/dist/services/Api.d.ts

@@ -1,7 +1,7 @@
 export declare const Api: {
-    get: (url: any, request?: string, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    delete: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    post: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    put: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    patch: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
+    get: (url: any, request?: string, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    delete: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    post: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    put: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    patch: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
 };

package/dist/themes/theme-bexis2 copy.d.ts

@@ -0,0 +1,2 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+export declare const bexis2theme: CustomThemeConfig;

package/dist/themes/theme-bexis2 copy.js

@@ -0,0 +1,112 @@
+export const bexis2theme = {
+    name: 'bexis2theme',
+    properties: {
+        // =~= Theme Properties =~=
+        '--theme-font-family-base': `system-ui`,
+        '--theme-font-family-heading': `system-ui`,
+        '--theme-font-color-base': 'var(--color-surface-900)',
+        '--theme-font-color-dark': '#ffffff',
+        '--theme-rounded-base': '4px',
+        '--theme-rounded-container': '4px',
+        '--theme-border-base': '1px',
+        // =~= Theme On-X Colors =~=
+        '--on-primary': '255 255 255',
+        '--on-secondary': '255 255 255',
+        '--on-tertiary': '0 0 0',
+        '--on-success': '255 255 255',
+        '--on-warning': '255 255 255',
+        '--on-error': '255 255 255',
+        '--on-surface': '255 255 255',
+        // =~= Theme Colors  =~=
+        // primary | #45b2a1
+        '--color-primary-50': '#e3f3f1',
+        '--color-primary-100': '#daf0ec',
+        '--color-primary-200': '#d1ece8',
+        '--color-primary-300': '#b5e0d9',
+        '--color-primary-400': '#7dc9bd',
+        '--color-primary-500': '#45b2a1',
+        '--color-primary-600': '#3ea091',
+        '--color-primary-700': '#348679',
+        '--color-primary-800': '#296b61',
+        '--color-primary-900': '#22574f',
+        // secondary | #ff9700
+        '--color-secondary-50': '#ffefd9',
+        '--color-secondary-100': '#ffeacc',
+        '--color-secondary-200': '#ffe5bf',
+        '--color-secondary-300': '#ffd599',
+        '--color-secondary-400': '#ffb64d',
+        '--color-secondary-500': '#ff9700',
+        '--color-secondary-600': '#e68800',
+        '--color-secondary-700': '#bf7100',
+        '--color-secondary-800': '#995b00',
+        '--color-secondary-900': '#7d4a00',
+        // tertiary | #bee1da
+        '--color-tertiary-50': '#f5fbf9',
+        '--color-tertiary-100': '#f2f9f8',
+        '--color-tertiary-200': '#eff8f6',
+        '--color-tertiary-300': '#e5f3f0',
+        '--color-tertiary-400': '#d2eae5',
+        '--color-tertiary-500': '#bee1da',
+        '--color-tertiary-600': '#abcbc4',
+        '--color-tertiary-700': '#8fa9a4',
+        '--color-tertiary-800': '#728783',
+        '--color-tertiary-900': '#5d6e6b',
+        // success | #4BB543
+        '--color-success-50': '#e4f4e3',
+        '--color-success-100': '#dbf0d9',
+        '--color-success-200': '#d2edd0',
+        '--color-success-300': '#b7e1b4',
+        '--color-success-400': '#81cb7b',
+        '--color-success-500': '#4bb543',
+        '--color-success-600': '#44a33c',
+        '--color-success-700': '#388832',
+        '--color-success-800': '#2d6d28',
+        '--color-success-900': '#255921',
+        // warning | #EAB308
+        '--color-warning-50': '#fcf4da',
+        '--color-warning-100': '#fbf0ce',
+        '--color-warning-200': '#faecc1',
+        '--color-warning-300': '#f7e19c',
+        '--color-warning-400': '#f0ca52',
+        '--color-warning-500': '#eab308',
+        '--color-warning-600': '#d3a107',
+        '--color-warning-700': '#b08606',
+        '--color-warning-800': '#8c6b05',
+        '--color-warning-900': '#735804',
+        // error | #FF0000
+        '--color-error-50': '#ffd9d9',
+        '--color-error-100': '#ffcccc',
+        '--color-error-200': '#ffbfbf',
+        '--color-error-300': '#ff9999',
+        '--color-error-400': '#ff4d4d',
+        '--color-error-500': '#ff0000',
+        '--color-error-600': '#e60000',
+        '--color-error-700': '#bf0000',
+        '--color-error-800': '#990000',
+        '--color-error-900': '#7d0000',
+        // surface | #c7c7c7
+        '--color-surface-50': '#f7f7f7',
+        '--color-surface-100': '#f4f4f4',
+        '--color-surface-200': '#f1f1f1',
+        '--color-surface-300': '#e9e9e9',
+        '--color-surface-400': '#d8d8d8',
+        '--color-surface-500': '#c7c7c7',
+        '--color-surface-600': '#b3b3b3',
+        '--color-surface-700': '#959595',
+        '--color-surface-800': '#777777',
+        '--color-surface-900': '#626262'
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '#e0e0e0',
+        '--color-surface-100': '#d5d5d5',
+        '--color-surface-200': '#cbcbcb',
+        '--color-surface-300': '#ababab',
+        '--color-surface-400': '#6d6d6d',
+        '--color-surface-500': '#2e2e2e',
+        '--color-surface-600': '#292929',
+        '--color-surface-700': '#232323',
+        '--color-surface-800': '#1c1c1c',
+        '--color-surface-900': '#171717'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.88",
+  "version": "0.4.89",
   "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": [
@@ -81,6 +81,7 @@
     "svelte-fa": "^4.0.2",
     "svelte-file-dropzone": "^2.0.7",
     "svelte-headless-table": "^0.18.2",
+    "svelty-picker": "^5.2.12",
     "svelte-select": "5.8.3",
     "vest": "^5.4.0"
   },

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+	import SveltyPicker from 'svelty-picker';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+	export let placeholder: string = '';
+	export let help: boolean = false;
+	export let disabled: boolean = false;
+	export let description: string = '';
+	export let showDescription: boolean = false;
+	export let mode: 'date' | 'time' | 'datetime' = 'date';
+	export let initialDate: string = '';
+	export let format: string = 'yyyy-mm-dd';
+	export let displayFormat: string = 'yyyy-mm-dd';
+	export let onChangeHandler: (event: CustomEvent) => void = () => {};
+
+	let width = 'w-32';
+
+	if (mode !== 'date' && mode !== 'time' && mode !== 'datetime') {
+		throw new Error(`Invalid mode: ${mode}. Valid modes are 'date', 'time', and 'datetime'.`);
+	}
+
+	if (mode === 'datetime' && (format === 'yyyy-mm-dd' || displayFormat === 'yyyy-mm-dd')) {
+		throw new Error(
+			`Invalid format for datetime mode. Please use a format that includes both date and time.`
+		);
+	}
+
+	if (mode === 'datetime') {
+		width = 'w-64';
+	}
+</script>
+
+<InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription}>
+	<SveltyPicker
+		{mode}
+		name={label}
+		{format}
+		{displayFormat}
+		{initialDate}
+		bind:value
+		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
+		on:change={onChangeHandler}
+		{disabled}
+		{placeholder}
+	/>
+</InputContainer>

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

@@ -20,6 +20,8 @@
 		const storedFontSize = localStorage.getItem('fontSize');
 		if (storedFontSize) {
 			document.documentElement.style.fontSize = storedFontSize;
+			// set CSS variable --font-size to the new font size
+			document.documentElement.style.setProperty('--font-size', storedFontSize);
 		}
 	});
 
@@ -30,12 +32,16 @@
 	function increaseFontSize() {
 		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		document.documentElement.style.fontSize = currentFontSize + 1 + 'px';
+		// set CSS variable --font-size to the new font size
+		document.documentElement.style.setProperty('--font-size', document.documentElement.style.fontSize);
 		localStorage.setItem('fontSize', document.documentElement.style.fontSize);
 	}
 	// function to decrease the current font size by 1 step
 	function decreaseFontSize() {
 		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
 		document.documentElement.style.fontSize = currentFontSize - 1 + 'px';
+		// set CSS variable --font-size to the new font size
+		document.documentElement.style.setProperty('--font-size', document.documentElement.style.fontSize);
 		localStorage.setItem('fontSize', document.documentElement.style.fontSize);
 	}
 

package/src/lib/css/themes/theme-bexis2.css_old

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/src/lib/themes/theme-bexis2 copy.ts

@@ -0,0 +1,114 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const bexis2theme: CustomThemeConfig = {
+	name: 'bexis2theme',
+	properties: {
+		// =~= Theme Properties =~=
+		'--theme-font-family-base': `system-ui`,
+		'--theme-font-family-heading': `system-ui`,
+		'--theme-font-color-base': 'var(--color-surface-900)',
+		'--theme-font-color-dark': '#ffffff',
+		'--theme-rounded-base': '4px',
+		'--theme-rounded-container': '4px',
+		'--theme-border-base': '1px',
+		// =~= Theme On-X Colors =~=
+		'--on-primary': '255 255 255',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '0 0 0',
+		'--on-success': '255 255 255',
+		'--on-warning': '255 255 255',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #45b2a1
+		'--color-primary-50': '#e3f3f1',
+		'--color-primary-100': '#daf0ec',
+		'--color-primary-200': '#d1ece8',
+		'--color-primary-300': '#b5e0d9',
+		'--color-primary-400': '#7dc9bd',
+		'--color-primary-500': '#45b2a1',
+		'--color-primary-600': '#3ea091',
+		'--color-primary-700': '#348679',
+		'--color-primary-800': '#296b61',
+		'--color-primary-900': '#22574f',
+		// secondary | #ff9700
+		'--color-secondary-50': '#ffefd9',
+		'--color-secondary-100': '#ffeacc',
+		'--color-secondary-200': '#ffe5bf',
+		'--color-secondary-300': '#ffd599',
+		'--color-secondary-400': '#ffb64d',
+		'--color-secondary-500': '#ff9700',
+		'--color-secondary-600': '#e68800',
+		'--color-secondary-700': '#bf7100',
+		'--color-secondary-800': '#995b00',
+		'--color-secondary-900': '#7d4a00',
+		// tertiary | #bee1da
+		'--color-tertiary-50': '#f5fbf9',
+		'--color-tertiary-100': '#f2f9f8',
+		'--color-tertiary-200': '#eff8f6',
+		'--color-tertiary-300': '#e5f3f0',
+		'--color-tertiary-400': '#d2eae5',
+		'--color-tertiary-500': '#bee1da',
+		'--color-tertiary-600': '#abcbc4',
+		'--color-tertiary-700': '#8fa9a4',
+		'--color-tertiary-800': '#728783',
+		'--color-tertiary-900': '#5d6e6b',
+		// success | #4BB543
+		'--color-success-50': '#e4f4e3',
+		'--color-success-100': '#dbf0d9',
+		'--color-success-200': '#d2edd0',
+		'--color-success-300': '#b7e1b4',
+		'--color-success-400': '#81cb7b',
+		'--color-success-500': '#4bb543',
+		'--color-success-600': '#44a33c',
+		'--color-success-700': '#388832',
+		'--color-success-800': '#2d6d28',
+		'--color-success-900': '#255921',
+		// warning | #EAB308
+		'--color-warning-50': '#fcf4da',
+		'--color-warning-100': '#fbf0ce',
+		'--color-warning-200': '#faecc1',
+		'--color-warning-300': '#f7e19c',
+		'--color-warning-400': '#f0ca52',
+		'--color-warning-500': '#eab308',
+		'--color-warning-600': '#d3a107',
+		'--color-warning-700': '#b08606',
+		'--color-warning-800': '#8c6b05',
+		'--color-warning-900': '#735804',
+		// error | #FF0000
+		'--color-error-50': '#ffd9d9',
+		'--color-error-100': '#ffcccc',
+		'--color-error-200': '#ffbfbf',
+		'--color-error-300': '#ff9999',
+		'--color-error-400': '#ff4d4d',
+		'--color-error-500': '#ff0000',
+		'--color-error-600': '#e60000',
+		'--color-error-700': '#bf0000',
+		'--color-error-800': '#990000',
+		'--color-error-900': '#7d0000',
+		// surface | #c7c7c7
+		'--color-surface-50': '#f7f7f7',
+		'--color-surface-100': '#f4f4f4',
+		'--color-surface-200': '#f1f1f1',
+		'--color-surface-300': '#e9e9e9',
+		'--color-surface-400': '#d8d8d8',
+		'--color-surface-500': '#c7c7c7',
+		'--color-surface-600': '#b3b3b3',
+		'--color-surface-700': '#959595',
+		'--color-surface-800': '#777777',
+		'--color-surface-900': '#626262'
+	},
+	properties_dark: {
+		// surface | #2e2e2e
+		'--color-surface-50': '#e0e0e0',
+		'--color-surface-100': '#d5d5d5',
+		'--color-surface-200': '#cbcbcb',
+		'--color-surface-300': '#ababab',
+		'--color-surface-400': '#6d6d6d',
+		'--color-surface-500': '#2e2e2e',
+		'--color-surface-600': '#292929',
+		'--color-surface-700': '#232323',
+		'--color-surface-800': '#1c1c1c',
+		'--color-surface-900': '#171717'
+	}
+};