@katlux/toolkit 0.1.0-beta.39 → 0.1.0-beta.40

package/dist/compiled/composables/usePresetComponent.mjs

@@ -1,8 +1,9 @@
 import { computed, defineAsyncComponent } from "vue";
 import { useAppConfig } from "#app";
-const componentCache = /* @__PURE__ */ new Map();
-const modernComponents = import.meta.glob("../../../../katlux-preset-modern/src/runtime/components/**/*.vue");
-const toolkitPresets = import.meta.glob("../presets/**/*.vue");
+export const presetLoadersRegistry = /* @__PURE__ */ new Map();
+export function registerPresetComponents(presetName, loaders) {
+  presetLoadersRegistry.set(presetName, loaders);
+}
 export function usePresetComponent(componentBaseName, defaultComponent) {
   const appConfig = useAppConfig();
   const activePreset = computed(() => appConfig.katluxToolkit?.activePreset || "default");
@@ -10,27 +11,31 @@ export function usePresetComponent(componentBaseName, defaultComponent) {
     if (activePreset.value === "default") {
       return defaultComponent;
     }
-    const cacheKey = `${activePreset.value}:${componentBaseName}`;
-    if (componentCache.has(cacheKey)) {
-      return componentCache.get(cacheKey);
-    }
     let loader;
-    if (activePreset.value === "modern") {
-      const path = `../../../../katlux-preset-modern/src/runtime/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = modernComponents[path];
-    } else {
-      const path = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = toolkitPresets[path];
+    const externalLoaders = presetLoadersRegistry.get(activePreset.value);
+    if (externalLoaders) {
+      const key = `./components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = externalLoaders[key];
+    }
+    if (!loader) {
+      const internalLoaders = import.meta.glob([
+        "../presets/**/*.vue",
+        "../../runtime/presets/**/*.vue"
+      ]);
+      const internalKey = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = internalLoaders[internalKey];
+      if (!loader) {
+        const altKey = `../../runtime/presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+        loader = internalLoaders[altKey];
+      }
     }
     if (!loader) {
       console.warn(`[${componentBaseName}] Preset "${activePreset.value}" not found, falling back to default`);
       return defaultComponent;
     }
-    const asyncComp = defineAsyncComponent({
+    return defineAsyncComponent({
       loader,
       errorComponent: defaultComponent
     });
-    componentCache.set(cacheKey, asyncComp);
-    return asyncComp;
   });
 }

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.39",
+  "version": "0.1.0-beta.40",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/KButton/KButton.logic.d.ts

@@ -22,7 +22,7 @@ export interface KButtonEmits {
 export declare function useKButtonLogic(props: KButtonProps, emit: KButtonEmits): {
     isLink: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    buttonClasses: import("vue").ComputedRef<("info" | "default" | "small" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "large" | "medium" | {
+    buttonClasses: import("vue").ComputedRef<("info" | "default" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "small" | "large" | "medium" | {
         disabled: boolean | undefined;
     })[]>;
     onClick: () => void;

package/dist/runtime/components/KCombobox/KCombobox.logic.d.ts

@@ -0,0 +1,72 @@
+import type { ADataProvider } from '@katlux/providers';
+import { type TDataRow } from '@katlux/providers';
+export type ComboboxItem = TDataRow;
+export interface KComboboxProps {
+    dataProvider: ADataProvider;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+    multiSelect?: boolean;
+    maxSelectedDisplay?: number | string | false;
+    placeholder?: string;
+    searchbox?: boolean;
+    visibleFields?: Array<String> | null;
+    labelField: string;
+    modelValue?: ComboboxItem | ComboboxItem[] | null;
+}
+export interface KComboboxEmits {
+    (e: 'update:modelValue', value: ComboboxItem | ComboboxItem[] | null): void;
+}
+export declare const KComboboxDefaultProps: {
+    dataProvider: {
+        type: PropType<ADataProvider>;
+        required: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxSelectedDisplay: {
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visibleFields: {
+        type: PropType<Array<String>>;
+        default: null;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    modelValue: {
+        type: PropType<ComboboxItem | ComboboxItem[] | null>;
+        default: null;
+    };
+};
+export declare function useKComboboxLogic(props: KComboboxProps, emit: KComboboxEmits): {
+    selectedItems: import("vue").Ref<TDataRow[] | null, TDataRow[] | null>;
+    isOptionsOpen: import("vue").Ref<boolean, boolean>;
+    searchtext: import("vue").Ref<string, string>;
+    selectItem: (option: ComboboxItem) => void;
+    isSelected: (option: ComboboxItem) => boolean | undefined;
+    getSelectedContent: () => TDataRow[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    filteredOptions: import("vue").ComputedRef<TDataRow[]>;
+    loading: import("vue").Ref<Boolean, Boolean>;
+};

package/dist/runtime/components/KDatatable/KDataIterator.logic.d.ts

@@ -0,0 +1,20 @@
+import { ADataProvider } from '@katlux/providers';
+export interface KDataIteratorProps {
+    dataProvider: ADataProvider;
+    visibleFields?: Array<string> | null;
+    loading?: boolean;
+    search?: string;
+    itemsPerPage?: number;
+    page?: number;
+}
+export declare const KDataIteratorDefaultProps: {
+    visibleFields: null;
+    loading: boolean;
+    search: string;
+    itemsPerPage: number;
+    page: number;
+};
+export declare function useKDataIteratorLogic(props: KDataIteratorProps): {
+    selectedRows: import("vue").Ref<any[], any[]>;
+    selectAll: import("vue").Ref<boolean, boolean>;
+};

package/dist/runtime/components/KDatatable/KDatatable.logic.d.ts

@@ -0,0 +1,12 @@
+import { ADataProvider } from '@katlux/providers';
+export interface KDatatableProps {
+    dataProvider: ADataProvider;
+    visibleFields?: Array<string> | null;
+}
+export declare const KDatatableDefaultProps: {
+    visibleFields: null;
+};
+export declare function useKDatatableLogic(props: KDatatableProps): {
+    selectedRows: import("vue").Ref<any[], any[]>;
+    selectAll: import("vue").Ref<boolean, boolean>;
+};

package/dist/runtime/components/KPanel/KPanel.global.d.vue.ts

@@ -1,8 +1,10 @@
 import { type KPanelProps } from './KPanel.logic.js';
 declare const __VLS_export: import("vue").DefineComponent<KPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KPanelProps> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     title: string;
     noGap: boolean;
     flexContent: boolean;
+    scrollable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KPanel/KPanel.global.vue

@@ -6,12 +6,17 @@ import KPanelDefault from "../../presets/default/components/KPanel/KPanel.vue";
 const props = defineProps({
   title: { type: String, required: false, default: "" },
   noGap: { type: Boolean, required: false, default: true },
-  flexContent: { type: Boolean, required: false, default: false }
+  flexContent: { type: Boolean, required: false, default: false },
+  scrollable: { type: Boolean, required: false, default: false },
+  type: { type: String, required: false, default: "default" }
 });
 const presetComponent = usePresetComponent("KPanel", KPanelDefault);
 const templateProps = computed(() => ({
+  title: props.title,
   noGap: props.noGap,
-  flexContent: props.flexContent
+  flexContent: props.flexContent,
+  scrollable: props.scrollable,
+  type: props.type
 }));
 </script>
 

package/dist/runtime/components/KPanel/KPanel.global.vue.d.ts

@@ -1,8 +1,10 @@
 import { type KPanelProps } from './KPanel.logic.js';
 declare const __VLS_export: import("vue").DefineComponent<KPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KPanelProps> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     title: string;
     noGap: boolean;
     flexContent: boolean;
+    scrollable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KPanel/KPanel.logic.d.ts

@@ -2,6 +2,8 @@ export interface KPanelProps {
     title?: string;
     noGap?: boolean;
     flexContent?: boolean;
+    scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
 }
 export declare const KPanelDefaultProps: {
     title: {
@@ -16,5 +18,13 @@ export declare const KPanelDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
 };
 export declare function useKPanelLogic(props: KPanelProps): {};

package/dist/runtime/components/KPanel/KPanel.logic.js

@@ -10,6 +10,14 @@ export const KPanelDefaultProps = {
   flexContent: {
     type: Boolean,
     default: false
+  },
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: "default"
   }
 };
 export function useKPanelLogic(props) {

package/dist/runtime/components/KTextbox/KTextbox.global.d.vue.ts

@@ -1,3 +1,4 @@
+import { type KTextboxProps } from './KTextbox.logic.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
@@ -11,6 +12,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -26,9 +32,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    type: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
     placeholder: string;
     showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/KTextbox/KTextbox.global.vue.d.ts

@@ -1,3 +1,4 @@
+import { type KTextboxProps } from './KTextbox.logic.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
@@ -11,6 +12,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -26,9 +32,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    type: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
     placeholder: string;
     showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/KTextbox/KTextbox.logic.d.ts

@@ -2,6 +2,7 @@ export interface KTextboxProps {
     modelValue: string;
     placeholder: string;
     showClear?: boolean;
+    type?: 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'number';
 }
 export interface KTextboxEmits {
     (e: 'update:modelValue', value: string): void;
@@ -30,4 +31,9 @@ export declare const KTextboxDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 };

package/dist/runtime/components/KTextbox/KTextbox.logic.js

@@ -28,5 +28,12 @@ export const KTextboxDefaultProps = {
   showClear: {
     type: Boolean,
     default: false
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) => {
+      return ["text", "password", "email", "url", "tel", "search", "number"].includes(value);
+    }
   }
 };

package/dist/runtime/components/KTreePicker/KTreePicker.global.d.vue.ts

@@ -103,6 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    parentKey: string;
+    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -112,8 +114,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
-    idKey: string;
-    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreePicker/KTreePicker.global.vue.d.ts

@@ -103,6 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    parentKey: string;
+    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -112,8 +114,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
-    idKey: string;
-    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreePicker/KTreePicker.logic.d.ts

@@ -0,0 +1,77 @@
+import type { ADataProvider } from '@katlux/providers';
+export interface KTreePickerProps {
+    modelValue?: any;
+    dataProvider: ADataProvider;
+    labelField: string;
+    placeholder?: string;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    idKey?: string;
+    parentKey?: string;
+    iconField?: string;
+    loading?: boolean;
+    multiSelect?: boolean;
+    searchbox?: boolean;
+}
+export declare const KTreePickerDefaultProps: {
+    modelValue: {
+        type: PropType<any>;
+        default: null;
+    };
+    dataProvider: {
+        type: PropType<ADataProvider>;
+        required: boolean;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    idKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    parentKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconField: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare function useKTreePickerLogic(props: KTreePickerProps, emit: any): {
+    selectedItems: import("vue").Ref<import("@katlux/providers").TDataRow[] | null, import("@katlux/providers").TDataRow[] | null>;
+    isOptionsOpen: import("vue").Ref<boolean, boolean>;
+    searchtext: import("vue").Ref<string, string>;
+    selectItem: (option: import("../KCombobox/KCombobox.logic.js").ComboboxItem) => void;
+    isSelected: (option: import("../KCombobox/KCombobox.logic.js").ComboboxItem) => boolean | undefined;
+    getSelectedContent: () => import("@katlux/providers").TDataRow[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    filteredOptions: import("vue").ComputedRef<import("@katlux/providers").TDataRow[]>;
+    loading: import("vue").Ref<Boolean, Boolean>;
+};

package/dist/runtime/components/KTreeView/KTreeView.global.d.vue.ts

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
+    parentKey: string;
+    idKey: string;
+    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
-    idKey: string;
-    parentKey: string;
-    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KTreeView/KTreeView.global.vue.d.ts

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
+    parentKey: string;
+    idKey: string;
+    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
-    idKey: string;
-    parentKey: string;
-    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/usePresetComponent.d.ts

@@ -1,2 +1,18 @@
 import { type Component } from 'vue';
+/**
+ * Registry mapping preset names to their respective module loaders (via import.meta.glob).
+ * Preset modules must inject their components here via a Nuxt Plugin.
+ */
+export declare const presetLoadersRegistry: Map<string, Record<string, () => Promise<any>>>;
+/**
+ * API for Nuxt modules to dynamically map their generated components
+ */
+export declare function registerPresetComponents(presetName: string, loaders: Record<string, () => Promise<any>>): void;
+/**
+ * Composable for dynamically loading preset components
+ *
+ * @param componentBaseName - Base name of the component (e.g., 'KButton')
+ * @param defaultComponent - The default preset component to fall back to
+ * @returns The resolved Async Component
+ */
 export declare function usePresetComponent(componentBaseName: string, defaultComponent: Component): import("vue").ComputedRef<any>;

package/dist/runtime/composables/usePresetComponent.js

@@ -1,8 +1,9 @@
 import { computed, defineAsyncComponent } from "vue";
 import { useAppConfig } from "#app";
-const componentCache = /* @__PURE__ */ new Map();
-const modernComponents = import.meta.glob("../../../../katlux-preset-modern/src/runtime/components/**/*.vue");
-const toolkitPresets = import.meta.glob("../presets/**/*.vue");
+export const presetLoadersRegistry = /* @__PURE__ */ new Map();
+export function registerPresetComponents(presetName, loaders) {
+  presetLoadersRegistry.set(presetName, loaders);
+}
 export function usePresetComponent(componentBaseName, defaultComponent) {
   const appConfig = useAppConfig();
   const activePreset = computed(() => appConfig.katluxToolkit?.activePreset || "default");
@@ -10,27 +11,31 @@ export function usePresetComponent(componentBaseName, defaultComponent) {
     if (activePreset.value === "default") {
       return defaultComponent;
     }
-    const cacheKey = `${activePreset.value}:${componentBaseName}`;
-    if (componentCache.has(cacheKey)) {
-      return componentCache.get(cacheKey);
-    }
     let loader;
-    if (activePreset.value === "modern") {
-      const path = `../../../../katlux-preset-modern/src/runtime/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = modernComponents[path];
-    } else {
-      const path = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = toolkitPresets[path];
+    const externalLoaders = presetLoadersRegistry.get(activePreset.value);
+    if (externalLoaders) {
+      const key = `./components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = externalLoaders[key];
+    }
+    if (!loader) {
+      const internalLoaders = import.meta.glob([
+        "../presets/**/*.vue",
+        "../../runtime/presets/**/*.vue"
+      ]);
+      const internalKey = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = internalLoaders[internalKey];
+      if (!loader) {
+        const altKey = `../../runtime/presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+        loader = internalLoaders[altKey];
+      }
     }
     if (!loader) {
       console.warn(`[${componentBaseName}] Preset "${activePreset.value}" not found, falling back to default`);
       return defaultComponent;
     }
-    const asyncComp = defineAsyncComponent({
+    return defineAsyncComponent({
       loader,
       errorComponent: defaultComponent
     });
-    componentCache.set(cacheKey, asyncComp);
-    return asyncComp;
   });
 }

package/dist/runtime/presets/default/assets/scss/css-variables.css

@@ -20,14 +20,44 @@
   --neutral-700: #616161;
   --neutral-800: #424242;
   --neutral-900: #212121;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-500: #eab308;
+  --yellow-700: #a16207;
+  --yellow-900: #713f12;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-500: #ef4444;
+  --red-700: #b91c1c;
+  --red-900: #7f1d1d;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-500: #3b82f6;
+  --blue-700: #1d4ed8;
+  --blue-900: #1e3a8a;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-500: #ec4899;
+  --pink-700: #be185d;
+  --pink-900: #831843;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-500: #06b6d4;
+  --cyan-700: #0e7490;
+  --cyan-900: #164e63;
+  --green-100: #dcfce7;
+  --green-300: #86efac;
+  --green-500: #22c55e;
+  --green-700: #15803d;
+  --green-900: #14532d;
   --success-color: var(--accent-500);
   --success-color-light: var(--accent-100);
-  --warning-color: #ffc107;
-  --warning-color-light: #fff3e0;
-  --error-color: #f44336;
-  --error-color-light: #fbe9e7;
-  --info-color: var(--primary-500);
-  --info-color-light: var(--primary-100);
+  --warning-color: var(--yellow-500);
+  --warning-color-light: var(--yellow-100);
+  --error-color: var(--red-500);
+  --error-color-light: var(--red-100);
+  --info-color: var(--cyan-500);
+  --info-color-light: var(--cyan-100);
   --font-color-primary: var(--neutral-800);
   --font-color-secondary: var(--neutral-600);
   --font-color-heading: var(--neutral-900);
@@ -81,19 +111,37 @@
   --button-hover-bg-success: var(--accent-700);
   --button-bg-warning: var(--warning-color);
   --button-text-warning: var(--neutral-900);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-bg-danger: var(--error-color);
   --button-text-danger: var(--font-color-light);
-  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-danger: var(--red-700);
   --button-bg-info: var(--info-color);
   --button-text-info: var(--font-color-light);
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-info: var(--cyan-700);
   --button-bg-light: var(--neutral-50);
   --button-text-light: var(--neutral-900);
   --button-hover-bg-light: var(--neutral-200);
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
+  --panel-bg-default: var(--yellow-300);
+  --panel-header-bg-default: var(--yellow-500);
+  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-primary: var(--blue-300);
+  --panel-header-bg-primary: var(--blue-500);
+  --panel-footer-bg-primary: var(--blue-100);
+  --panel-bg-success: var(--green-300);
+  --panel-header-bg-success: var(--green-500);
+  --panel-footer-bg-success: var(--green-100);
+  --panel-bg-warning: var(--yellow-300);
+  --panel-header-bg-warning: var(--yellow-500);
+  --panel-footer-bg-warning: var(--yellow-100);
+  --panel-bg-danger: var(--red-300);
+  --panel-header-bg-danger: var(--red-500);
+  --panel-footer-bg-danger: var(--red-100);
+  --panel-bg-info: var(--cyan-300);
+  --panel-header-bg-info: var(--cyan-500);
+  --panel-footer-bg-info: var(--cyan-100);
   --input-border-radius: var(--border-radius-sm);
   --input-border-color: var(--border-color-medium);
   --input-focus-border-color: var(--primary-500);
@@ -102,7 +150,7 @@
   --table-header-color: var(--neutral-700);
   --table-border-color: var(--neutral-300);
   --table-row-hover: var(--neutral-100);
-  --table-row-selected: #e3f2fd;
+  --table-row-selected: var(--blue-100);
   --checkbox-bg: var(--neutral-50);
   --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--border-color-medium);
@@ -127,12 +175,12 @@
   --input-button-hover-bg: var(--neutral-400);
   --input-button-font-color: var(--font-color-primary);
   --input-focus-border-color: var(--primary-500);
-  --button-hover-bg-danger: #d32f2f;
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-danger: var(--red-700);
+  --button-hover-bg-info: var(--cyan-700);
   --button-hover-bg-light: var(--neutral-200);
   --button-hover-bg-primary: var(--primary-700);
   --button-hover-bg-success: var(--accent-700);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-hover-bg-dark: var(--neutral-700);
   --button-text-danger: var(--font-color-light);
   --button-text-primary: var(--font-color-light);

package/dist/runtime/presets/default/assets/scss/css-variables.scss

@@ -30,15 +30,52 @@
 	--neutral-800: #424242;
 	--neutral-900: #212121;
 
+	// New Color Palettes
+	--yellow-100: #fef9c3;
+	--yellow-300: #fde047;
+	--yellow-500: #eab308;
+	--yellow-700: #a16207;
+	--yellow-900: #713f12;
+
+	--red-100: #fee2e2;
+	--red-300: #fca5a5;
+	--red-500: #ef4444;
+	--red-700: #b91c1c;
+	--red-900: #7f1d1d;
+
+	--blue-100: #dbeafe;
+	--blue-300: #93c5fd;
+	--blue-500: #3b82f6;
+	--blue-700: #1d4ed8;
+	--blue-900: #1e3a8a;
+
+	--pink-100: #fce7f3;
+	--pink-300: #f9a8d4;
+	--pink-500: #ec4899;
+	--pink-700: #be185d;
+	--pink-900: #831843;
+
+	--cyan-100: #cffafe;
+	--cyan-300: #67e8f9;
+	--cyan-500: #06b6d4;
+	--cyan-700: #0e7490;
+	--cyan-900: #164e63;
+
+	--green-100: #dcfce7;
+	--green-300: #86efac;
+	--green-500: #22c55e;
+	--green-700: #15803d;
+	--green-900: #14532d;
+
 	// Semantic Colors
 	--success-color: var(--accent-500);
 	--success-color-light: var(--accent-100);
-	--warning-color: #ffc107;
-	--warning-color-light: #fff3e0;
-	--error-color: #f44336;
-	--error-color-light: #fbe9e7;
-	--info-color: var(--primary-500);
-	--info-color-light: var(--primary-100);
+	--warning-color: var(--yellow-500);
+	--warning-color-light: var(--yellow-100);
+	--error-color: var(--red-500);
+	--error-color-light: var(--red-100);
+	--info-color: var(--cyan-500);
+	--info-color-light: var(--cyan-100);
 
 	// Font Colors
 	--font-color-primary: var(--neutral-800);
@@ -118,17 +155,17 @@
 	// Button Colors - Warning
 	--button-bg-warning: var(--warning-color);
 	--button-text-warning: var(--neutral-900);
-	--button-hover-bg-warning: #e6ac00;
+	--button-hover-bg-warning: var(--yellow-700);
 
 	// Button Colors - Danger/Error
 	--button-bg-danger: var(--error-color);
 	--button-text-danger: var(--font-color-light);
-	--button-hover-bg-danger: #d32f2f;
+	--button-hover-bg-danger: var(--red-700);
 
 	// Button Colors - Info
 	--button-bg-info: var(--info-color);
 	--button-text-info: var(--font-color-light);
-	--button-hover-bg-info: var(--primary-300);
+	--button-hover-bg-info: var(--cyan-700);
 
 	// Button Colors - Light
 	--button-bg-light: var(--neutral-50);
@@ -140,6 +177,36 @@
 	--button-text-dark: var(--font-color-light);
 	--button-hover-bg-dark: var(--neutral-700);
 
+	// Panel Colors - Default
+	--panel-bg-default: var(--yellow-300);
+	--panel-header-bg-default: var(--yellow-500);
+	--panel-footer-bg-default: var(--blue-100);
+
+	// Panel Colors - Primary
+	--panel-bg-primary: var(--blue-300);
+	--panel-header-bg-primary: var(--blue-500);
+	--panel-footer-bg-primary: var(--blue-100);
+
+	// Panel Colors - Success
+	--panel-bg-success: var(--green-300);
+	--panel-header-bg-success: var(--green-500);
+	--panel-footer-bg-success: var(--green-100);
+
+	// Panel Colors - Warning
+	--panel-bg-warning: var(--yellow-300);
+	--panel-header-bg-warning: var(--yellow-500);
+	--panel-footer-bg-warning: var(--yellow-100);
+
+	// Panel Colors - Danger/Error
+	--panel-bg-danger: var(--red-300);
+	--panel-header-bg-danger: var(--red-500);
+	--panel-footer-bg-danger: var(--red-100);
+
+	// Panel Colors - Info
+	--panel-bg-info: var(--cyan-300);
+	--panel-header-bg-info: var(--cyan-500);
+	--panel-footer-bg-info: var(--cyan-100);
+
 	// Input
 	--input-border-radius: var(--border-radius-sm);
 	--input-border-color: var(--border-color-medium);
@@ -151,7 +218,7 @@
 	--table-header-color: var(--neutral-700);
 	--table-border-color: var(--neutral-300);
 	--table-row-hover: var(--neutral-100);
-	--table-row-selected: #e3f2fd;
+	--table-row-selected: var(--blue-100);
 
 	// Checkbox
 	--checkbox-bg: var(--neutral-50);
@@ -190,12 +257,12 @@
 	--input-focus-border-color: var(--primary-500);
 
 	// Button Hover Specifics
-	--button-hover-bg-danger: #d32f2f;
-	--button-hover-bg-info: var(--primary-300);
+	--button-hover-bg-danger: var(--red-700);
+	--button-hover-bg-info: var(--cyan-700);
 	--button-hover-bg-light: var(--neutral-200);
 	--button-hover-bg-primary: var(--primary-700);
 	--button-hover-bg-success: var(--accent-700);
-	--button-hover-bg-warning: #e6ac00;
+	--button-hover-bg-warning: var(--yellow-700);
 	--button-hover-bg-dark: var(--neutral-700);
 
 	--button-text-danger: var(--font-color-light);

package/dist/runtime/presets/default/assets/scss/index.css

@@ -37,14 +37,44 @@ li {
   --neutral-700: #616161;
   --neutral-800: #424242;
   --neutral-900: #212121;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-500: #eab308;
+  --yellow-700: #a16207;
+  --yellow-900: #713f12;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-500: #ef4444;
+  --red-700: #b91c1c;
+  --red-900: #7f1d1d;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-500: #3b82f6;
+  --blue-700: #1d4ed8;
+  --blue-900: #1e3a8a;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-500: #ec4899;
+  --pink-700: #be185d;
+  --pink-900: #831843;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-500: #06b6d4;
+  --cyan-700: #0e7490;
+  --cyan-900: #164e63;
+  --green-100: #dcfce7;
+  --green-300: #86efac;
+  --green-500: #22c55e;
+  --green-700: #15803d;
+  --green-900: #14532d;
   --success-color: var(--accent-500);
   --success-color-light: var(--accent-100);
-  --warning-color: #ffc107;
-  --warning-color-light: #fff3e0;
-  --error-color: #f44336;
-  --error-color-light: #fbe9e7;
-  --info-color: var(--primary-500);
-  --info-color-light: var(--primary-100);
+  --warning-color: var(--yellow-500);
+  --warning-color-light: var(--yellow-100);
+  --error-color: var(--red-500);
+  --error-color-light: var(--red-100);
+  --info-color: var(--cyan-500);
+  --info-color-light: var(--cyan-100);
   --font-color-primary: var(--neutral-800);
   --font-color-secondary: var(--neutral-600);
   --font-color-heading: var(--neutral-900);
@@ -98,19 +128,37 @@ li {
   --button-hover-bg-success: var(--accent-700);
   --button-bg-warning: var(--warning-color);
   --button-text-warning: var(--neutral-900);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-bg-danger: var(--error-color);
   --button-text-danger: var(--font-color-light);
-  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-danger: var(--red-700);
   --button-bg-info: var(--info-color);
   --button-text-info: var(--font-color-light);
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-info: var(--cyan-700);
   --button-bg-light: var(--neutral-50);
   --button-text-light: var(--neutral-900);
   --button-hover-bg-light: var(--neutral-200);
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
+  --panel-bg-default: var(--yellow-300);
+  --panel-header-bg-default: var(--yellow-500);
+  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-primary: var(--blue-300);
+  --panel-header-bg-primary: var(--blue-500);
+  --panel-footer-bg-primary: var(--blue-100);
+  --panel-bg-success: var(--green-300);
+  --panel-header-bg-success: var(--green-500);
+  --panel-footer-bg-success: var(--green-100);
+  --panel-bg-warning: var(--yellow-300);
+  --panel-header-bg-warning: var(--yellow-500);
+  --panel-footer-bg-warning: var(--yellow-100);
+  --panel-bg-danger: var(--red-300);
+  --panel-header-bg-danger: var(--red-500);
+  --panel-footer-bg-danger: var(--red-100);
+  --panel-bg-info: var(--cyan-300);
+  --panel-header-bg-info: var(--cyan-500);
+  --panel-footer-bg-info: var(--cyan-100);
   --input-border-radius: var(--border-radius-sm);
   --input-border-color: var(--border-color-medium);
   --input-focus-border-color: var(--primary-500);
@@ -119,7 +167,7 @@ li {
   --table-header-color: var(--neutral-700);
   --table-border-color: var(--neutral-300);
   --table-row-hover: var(--neutral-100);
-  --table-row-selected: #e3f2fd;
+  --table-row-selected: var(--blue-100);
   --checkbox-bg: var(--neutral-50);
   --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--border-color-medium);
@@ -144,12 +192,12 @@ li {
   --input-button-hover-bg: var(--neutral-400);
   --input-button-font-color: var(--font-color-primary);
   --input-focus-border-color: var(--primary-500);
-  --button-hover-bg-danger: #d32f2f;
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-danger: var(--red-700);
+  --button-hover-bg-info: var(--cyan-700);
   --button-hover-bg-light: var(--neutral-200);
   --button-hover-bg-primary: var(--primary-700);
   --button-hover-bg-success: var(--accent-700);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-hover-bg-dark: var(--neutral-700);
   --button-text-danger: var(--font-color-light);
   --button-text-primary: var(--font-color-light);

package/dist/runtime/presets/default/components/KButton/KButton.vue

@@ -29,7 +29,7 @@ defineProps<{
 	cursor: pointer;
 	transition: all 0.3s ease;
 	border: 1px solid;
-	display: flex;
+	display: inline-flex;
 	gap: 10px;
 	align-items: center;
 	text-decoration: none;

package/dist/runtime/presets/default/components/KCombobox/KCombobox.vue

@@ -56,7 +56,6 @@ const searchtextModel = computed({
 <style lang="scss" scoped>
 .KCombobox {
 	box-sizing: border-box;
-	width: 200px;
 	border: var(--input-border);
 	border-radius: var(--input-border-radius);
 	padding: 0px var(--component-gap);

package/dist/runtime/presets/default/components/KCombobox/KComboboxList.vue

@@ -10,7 +10,7 @@
 			@click.stop="selectItem(option)"
 		)
 			KGrid(align="center" justify="space-between" wrap="nowrap")
-				span {{ option[labelField] }}
+				span.KCombobox__options-list-item__text {{ option[labelField] }}
 				KIcon(iconname="check" width="12" height="12" :class="{'visible': isSelected(option)}")
 </template>
 
@@ -59,6 +59,11 @@ const searchtextModel = computed({
 			&:last-child {
 				border-bottom: none;
 			}
+			&__text {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;	
+			}
 		}
 
 		.KIcon {

package/dist/runtime/presets/default/components/KDatatable/KDatatable.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .k-datatable(:style="{ '--page-size': props.dataProvider?.pageSize?.value || 10 }")
-	KGrid(:flex-child="true")
+	KGrid(:flex-child="true" align="stretch" direction="column")
 		.datatable-container
 			KLoader(:loading="isLoading" overlay)
 			table
@@ -106,6 +106,7 @@ const isLoading = computed(() => {
 		border: 1px solid #cccccc;
 		thead {
 			tr {
+				background-color: color-mix(in srgb, var(--yellow-500), transparent 92%);
 				height: var(--page-height);
 				th {
 					border-bottom: 1px solid #cccccc;

package/dist/runtime/presets/default/components/KPanel/KPanel.d.vue.ts

@@ -2,8 +2,11 @@ type __VLS_Props = {
     noGap?: boolean;
     flexContent?: boolean;
     scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
+    title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     noGap: boolean;
     flexContent: boolean;
     scrollable: boolean;

package/dist/runtime/presets/default/components/KPanel/KPanel.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-.KPanel
+.KPanel(:class="[`type-${type}`]")
 	KGrid(direction="column" align="strech" :no-gap="noGap" wrap="nowrap").full-height
-		.KPanel--header(v-if="$slots.header")
-			slot(name="header")
+		.KPanel--header(v-if="$slots.header || title")
+			slot(name="header") {{ title }}
 		.KPanel--content(:class="{'flex-content': flexContent, 'scrollable': scrollable}")
 			slot
 		.KPanel--footer(v-if="$slots.footer")
@@ -14,42 +14,95 @@ const props = withDefaults(defineProps<{
 	noGap?: boolean
 	flexContent?: boolean
 	scrollable?: boolean
+	type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info'
+	title?: string
 }>(), {
 	scrollable: false,
-	noGap: false,
-	flexContent: false
+	noGap: true,
+	flexContent: false,
+	type: 'default'
 })
 </script>
 
 <style lang="scss" scoped>
 .KPanel {
-	border-radius: var(--box-border-radius);
-	border: var(--box-border);
-	box-shadow: var(--box-shadow);
-	background-color: var(--background-color-light);
+	--current-panel-bg: var(--panel-bg-default);
+	--current-panel-header-bg: var(--panel-header-bg-default);
+	--current-panel-footer-bg: var(--panel-footer-bg-default);
+
+	border-radius: var(--border-radius-lg);
+	border: 1px solid var(--neutral-200);
+	box-shadow: var(--shadow-md);
+	background-color: color-mix(in srgb, var(--current-panel-bg), transparent 99%);
+	backdrop-filter: blur(8px);
 	width: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+
+	&.type-primary {
+		--current-panel-bg: var(--panel-bg-primary);
+		--current-panel-header-bg: var(--panel-header-bg-primary);
+		--current-panel-footer-bg: var(--panel-footer-bg-primary);
+	}
+	&.type-success {
+		--current-panel-bg: var(--panel-bg-success);
+		--current-panel-header-bg: var(--panel-header-bg-success);
+		--current-panel-footer-bg: var(--panel-footer-bg-success);
+	}
+	&.type-warning {
+		--current-panel-bg: var(--panel-bg-warning);
+		--current-panel-header-bg: var(--panel-header-bg-warning);
+		--current-panel-footer-bg: var(--panel-footer-bg-warning);
+	}
+	&.type-danger {
+		--current-panel-bg: var(--panel-bg-danger);
+		--current-panel-header-bg: var(--panel-header-bg-danger);
+		--current-panel-footer-bg: var(--panel-footer-bg-danger);
+	}
+	&.type-info {
+		--current-panel-bg: var(--panel-bg-info);
+		--current-panel-header-bg: var(--panel-header-bg-info);
+		--current-panel-footer-bg: var(--panel-footer-bg-info);
+	}
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow: var(--shadow-lg);
+	}
 
 	.full-height {
 		height: 100%;
 	}
+
 	&--header {
-		padding: var(--component-gap);
-		background-color: var(--background-color-medium);
+		padding: var(--gap-md);
+		background-color: color-mix(in srgb, var(--current-panel-header-bg), transparent 92%);
+		border-bottom: 1px solid var(--neutral-200);
+		font-weight: var(--font-weight-semibold);
+		color: var(--font-color-heading);
+		font-size: var(--font-size-lg);
 	}
+
 	&--content {
-		padding: var(--box-padding);
-		// overflow-y: auto; // removed default scrolling to allow visible overflow
+		padding: var(--gap-md);
+		flex: 1;
 		
 		&.scrollable {
 			overflow-y: auto;
 		}
 
 		&.flex-content {
-			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
 		}
 	}
+
 	&--footer {
-		padding: var(--box-padding);
+		padding: var(--gap-md);
+		background-color: color-mix(in srgb, var(--current-panel-footer-bg), transparent 92%);
+		border-top: 1px solid var(--neutral-200);
 	}
 }
 </style>

package/dist/runtime/presets/default/components/KPanel/KPanel.vue.d.ts

@@ -2,8 +2,11 @@ type __VLS_Props = {
     noGap?: boolean;
     flexContent?: boolean;
     scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
+    title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     noGap: boolean;
     flexContent: boolean;
     scrollable: boolean;

package/dist/runtime/presets/default/components/KTextbox/KTextbox.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     showClearIcon: boolean;
     clear: () => void;
     placeholder: string;
+    type: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:text": (value: string) => any;

package/dist/runtime/presets/default/components/KTextbox/KTextbox.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 KGrid(align="center" noGap).KTextbox
-	input(type="text" v-model="text" :placeholder="placeholder")
+	input(:type="props.type" v-model="text" :placeholder="placeholder")
 	KIcon(v-if="showClearIcon" @click="clear" iconname="close" width="12" height="12").closeIcon
 </template>
 
@@ -12,6 +12,7 @@ const props = defineProps<{
 	showClearIcon: boolean
 	clear: () => void
 	placeholder: string
+	type: string
 }>()
 
 const emit = defineEmits<{

package/dist/runtime/presets/default/components/KTextbox/KTextbox.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     showClearIcon: boolean;
     clear: () => void;
     placeholder: string;
+    type: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:text": (value: string) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/toolkit",
-	"version": "0.1.0-beta.39",
+	"version": "0.1.0-beta.40",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",