@katlux/preset-modern 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@katlux/preset-modern",
+  "configKey": "katluxTemplateModern",
+  "version": "0.1.0-beta.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,35 @@
+import { defineNuxtModule, createResolver, installModule, addComponentsDir } from '@nuxt/kit';
+import { createRequire } from 'node:module';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@katlux/preset-modern",
+    configKey: "katluxTemplateModern"
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const _require = createRequire(import.meta.url);
+    await installModule("@katlux/toolkit");
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      pathPrefix: false,
+      extensions: ["vue"],
+      global: true
+    });
+    nuxt.options.vite.css = nuxt.options.vite.css || {};
+    nuxt.options.vite.css.preprocessorOptions = nuxt.options.vite.css.preprocessorOptions || {};
+    nuxt.options.vite.css.preprocessorOptions.scss = nuxt.options.vite.css.preprocessorOptions.scss || {};
+    const currentAdditionalData = nuxt.options.vite.css.preprocessorOptions.scss.additionalData || "";
+    const toolkitPkgJson = _require.resolve("@katlux/toolkit/package.json");
+    const toolkitPkgDir = toolkitPkgJson.replace(/[\\/]package\.json$/, "");
+    const toolkitScssPath = nuxt.options.dev ? `${toolkitPkgDir}/src/runtime/presets/default/assets/scss/index.scss` : `${toolkitPkgDir}/dist/runtime/presets/default/assets/scss/index.css`;
+    const presetScssPath = nuxt.options.dev ? resolve("./runtime/assets/scss/index.scss") : resolve("../dist/runtime/assets/scss/index.css");
+    const toolkitScss = `@use "${toolkitScssPath}" as *;`;
+    const presetScssImport = `@use "${presetScssPath}" as *;`;
+    nuxt.options.vite.css.preprocessorOptions.scss.additionalData = `${toolkitScss}
+${presetScssImport}
+${currentAdditionalData}`;
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,125 @@
+[data-template=modern] {
+  --primary-100: #ede9fe;
+  --primary-300: #c4b5fd;
+  --primary-500: #8b5cf6;
+  --primary-700: #7c3aed;
+  --primary-900: #5b21b6;
+  --accent-100: #cffafe;
+  --accent-300: #67e8f9;
+  --accent-500: #06b6d4;
+  --accent-700: #0891b2;
+  --accent-900: #155e75;
+  --neutral-50: #f8fafc;
+  --neutral-100: #f1f5f9;
+  --neutral-200: #e2e8f0;
+  --neutral-300: #cbd5e1;
+  --neutral-400: #94a3b8;
+  --neutral-500: #64748b;
+  --neutral-600: #475569;
+  --neutral-700: #334155;
+  --neutral-800: #1e293b;
+  --neutral-900: #0f172a;
+  --success-color: #10b981;
+  --success-color-light: #ecfdf5;
+  --warning-color: #f59e0b;
+  --warning-color-light: #fffbeb;
+  --error-color: #ef4444;
+  --error-color-light: #fef2f2;
+  --info-color: #3b82f6;
+  --info-color-light: #eff6ff;
+  --font-color-primary: var(--neutral-700);
+  --font-color-secondary: var(--neutral-500);
+  --font-color-heading: var(--neutral-900);
+  --font-color-light: #ffffff;
+  --background-color: #ffffff;
+  --background-color-light: var(--neutral-50);
+  --background-color-medium: var(--neutral-100);
+  --background-color-dark: var(--neutral-800);
+  --border-color-light: var(--neutral-200);
+  --border-color-medium: var(--neutral-300);
+  --border-color-dark: var(--neutral-500);
+  --gap-sm: 8px;
+  --gap-md: 16px;
+  --gap-lg: 24px;
+  --gap-xl: 32px;
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 16px;
+  --border-radius-xl: 24px;
+  --border-radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glow-primary: 0 10px 15px -3px rgba(102, 126, 234, 0.4), 0 4px 6px -2px rgba(102, 126, 234, 0.2);
+  --shadow-glow-danger: 0 10px 15px -3px rgba(245, 87, 108, 0.4), 0 4px 6px -2px rgba(245, 87, 108, 0.2);
+  --shadow-glow-success: 0 10px 15px -3px rgba(79, 172, 254, 0.4), 0 4px 6px -2px rgba(79, 172, 254, 0.2);
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono: 'Fira Code', 'Roboto Mono', monospace;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --button-border-radius: var(--border-radius-md);
+  --button-font-size-sm: var(--font-size-sm);
+  --button-font-size-md: var(--font-size-md);
+  --button-font-size-lg: var(--font-size-lg);
+  --button-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --button-gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --button-gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --button-gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  --button-gradient-info: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+  --button-gradient-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+  --button-gradient-dark: linear-gradient(135deg, #434343 0%, #000000 100%);
+  --button-bg-default: var(--button-gradient-primary);
+  --button-text-default: var(--font-color-light);
+  --button-hover-bg-default: var(--button-gradient-primary);
+  --button-bg-primary: var(--button-gradient-primary);
+  --button-text-primary: var(--font-color-light);
+  --button-hover-bg-primary: var(--button-gradient-primary);
+  --button-bg-success: var(--button-gradient-success);
+  --button-text-success: var(--font-color-light);
+  --button-hover-bg-success: var(--button-gradient-success);
+  --button-bg-warning: var(--button-gradient-warning);
+  --button-text-warning: var(--neutral-800);
+  --button-hover-bg-warning: var(--button-gradient-warning);
+  --button-bg-danger: var(--button-gradient-danger);
+  --button-text-danger: var(--font-color-light);
+  --button-hover-bg-danger: var(--button-gradient-danger);
+  --button-bg-info: var(--button-gradient-info);
+  --button-text-info: var(--font-color-light);
+  --button-hover-bg-info: var(--button-gradient-info);
+  --button-bg-light: var(--button-gradient-light);
+  --button-text-light: var(--neutral-800);
+  --button-hover-bg-light: var(--button-gradient-light);
+  --button-bg-dark: var(--button-gradient-dark);
+  --button-text-dark: var(--font-color-light);
+  --button-hover-bg-dark: var(--button-gradient-dark);
+  --input-border-radius: var(--border-radius-sm);
+  --input-border-color: var(--border-color-medium);
+  --input-focus-border-color: var(--primary-500);
+  --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+  --table-header-bg: var(--neutral-100);
+  --table-header-color: var(--neutral-600);
+  --table-border-color: var(--neutral-200);
+  --table-row-hover: var(--neutral-100);
+  --table-row-selected: #eff6ff;
+  --checkbox-bg: var(--background-color);
+  --checkbox-checked-bg: var(--button-gradient-primary);
+  --checkbox-border-color: var(--neutral-400);
+  --modal-overlay-bg: rgba(15, 23, 42, 0.6);
+  --layout-header-height: 70px;
+  --layout-header-bg: var(--background-color);
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-bg: var(--neutral-50);
+  --layout-content-bg: #ffffff;
+}

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

@@ -0,0 +1,125 @@
+[data-template=modern] {
+  --primary-100: #ede9fe;
+  --primary-300: #c4b5fd;
+  --primary-500: #8b5cf6;
+  --primary-700: #7c3aed;
+  --primary-900: #5b21b6;
+  --accent-100: #cffafe;
+  --accent-300: #67e8f9;
+  --accent-500: #06b6d4;
+  --accent-700: #0891b2;
+  --accent-900: #155e75;
+  --neutral-50: #f8fafc;
+  --neutral-100: #f1f5f9;
+  --neutral-200: #e2e8f0;
+  --neutral-300: #cbd5e1;
+  --neutral-400: #94a3b8;
+  --neutral-500: #64748b;
+  --neutral-600: #475569;
+  --neutral-700: #334155;
+  --neutral-800: #1e293b;
+  --neutral-900: #0f172a;
+  --success-color: #10b981;
+  --success-color-light: #ecfdf5;
+  --warning-color: #f59e0b;
+  --warning-color-light: #fffbeb;
+  --error-color: #ef4444;
+  --error-color-light: #fef2f2;
+  --info-color: #3b82f6;
+  --info-color-light: #eff6ff;
+  --font-color-primary: var(--neutral-700);
+  --font-color-secondary: var(--neutral-500);
+  --font-color-heading: var(--neutral-900);
+  --font-color-light: #ffffff;
+  --background-color: #ffffff;
+  --background-color-light: var(--neutral-50);
+  --background-color-medium: var(--neutral-100);
+  --background-color-dark: var(--neutral-800);
+  --border-color-light: var(--neutral-200);
+  --border-color-medium: var(--neutral-300);
+  --border-color-dark: var(--neutral-500);
+  --gap-sm: 8px;
+  --gap-md: 16px;
+  --gap-lg: 24px;
+  --gap-xl: 32px;
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 16px;
+  --border-radius-xl: 24px;
+  --border-radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-glow-primary: 0 10px 15px -3px rgba(102, 126, 234, 0.4), 0 4px 6px -2px rgba(102, 126, 234, 0.2);
+  --shadow-glow-danger: 0 10px 15px -3px rgba(245, 87, 108, 0.4), 0 4px 6px -2px rgba(245, 87, 108, 0.2);
+  --shadow-glow-success: 0 10px 15px -3px rgba(79, 172, 254, 0.4), 0 4px 6px -2px rgba(79, 172, 254, 0.2);
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono: 'Fira Code', 'Roboto Mono', monospace;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --button-border-radius: var(--border-radius-md);
+  --button-font-size-sm: var(--font-size-sm);
+  --button-font-size-md: var(--font-size-md);
+  --button-font-size-lg: var(--font-size-lg);
+  --button-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --button-gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --button-gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --button-gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  --button-gradient-info: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+  --button-gradient-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+  --button-gradient-dark: linear-gradient(135deg, #434343 0%, #000000 100%);
+  --button-bg-default: var(--button-gradient-primary);
+  --button-text-default: var(--font-color-light);
+  --button-hover-bg-default: var(--button-gradient-primary);
+  --button-bg-primary: var(--button-gradient-primary);
+  --button-text-primary: var(--font-color-light);
+  --button-hover-bg-primary: var(--button-gradient-primary);
+  --button-bg-success: var(--button-gradient-success);
+  --button-text-success: var(--font-color-light);
+  --button-hover-bg-success: var(--button-gradient-success);
+  --button-bg-warning: var(--button-gradient-warning);
+  --button-text-warning: var(--neutral-800);
+  --button-hover-bg-warning: var(--button-gradient-warning);
+  --button-bg-danger: var(--button-gradient-danger);
+  --button-text-danger: var(--font-color-light);
+  --button-hover-bg-danger: var(--button-gradient-danger);
+  --button-bg-info: var(--button-gradient-info);
+  --button-text-info: var(--font-color-light);
+  --button-hover-bg-info: var(--button-gradient-info);
+  --button-bg-light: var(--button-gradient-light);
+  --button-text-light: var(--neutral-800);
+  --button-hover-bg-light: var(--button-gradient-light);
+  --button-bg-dark: var(--button-gradient-dark);
+  --button-text-dark: var(--font-color-light);
+  --button-hover-bg-dark: var(--button-gradient-dark);
+  --input-border-radius: var(--border-radius-sm);
+  --input-border-color: var(--border-color-medium);
+  --input-focus-border-color: var(--primary-500);
+  --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+  --table-header-bg: var(--neutral-100);
+  --table-header-color: var(--neutral-600);
+  --table-border-color: var(--neutral-200);
+  --table-row-hover: var(--neutral-100);
+  --table-row-selected: #eff6ff;
+  --checkbox-bg: var(--background-color);
+  --checkbox-checked-bg: var(--button-gradient-primary);
+  --checkbox-border-color: var(--neutral-400);
+  --modal-overlay-bg: rgba(15, 23, 42, 0.6);
+  --layout-header-height: 70px;
+  --layout-header-bg: var(--background-color);
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-bg: var(--neutral-50);
+  --layout-content-bg: #ffffff;
+}

package/dist/runtime/components/KBulkActions/KBulkActions.d.vue.ts

@@ -0,0 +1,20 @@
+import { CFlatClientDataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    bulkActions: IKDatatableAction[];
+    selectedRows: any[];
+    selectAll: boolean;
+    dp: CFlatClientDataProvider;
+    doAction: (action: any) => void;
+};
+type __VLS_ModelProps = {
+    'selected'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KBulkActions/KBulkActions.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+.k-bulk-actions-modern
+	.actions-wrapper
+		//- Display actions as buttons if few, or dropdown if many
+		template(v-if="bulkActions.length > 3")
+			KCombobox(
+				:dataProvider="dp" 
+				v-model="selected" 
+				labelField="label" 
+				closeOnSelect 
+				:disabled="selectedRows.length === 0" 
+				placeholder="Select Action"
+				class="action-select"
+			)
+			KButton(
+				@click="doAction(selected)" 
+				size="small" 
+				:disabled="selectedRows.length === 0 || selected == undefined"
+				class="execute-btn"
+			) Go
+			
+		template(v-else v-for="action in bulkActions" :key="action.label")
+			KButton(
+				@click="doAction(action)" 
+				size="small" 
+				variant="outline"
+				class="action-btn"
+			) {{ action.label }}
+</template>
+
+<script setup>
+import { CFlatClientDataProvider } from "@katlux/providers";
+const selected = defineModel("selected", { type: null });
+defineProps({
+  bulkActions: { type: Array, required: true },
+  selectedRows: { type: Array, required: true },
+  selectAll: { type: Boolean, required: true },
+  dp: { type: Object, required: true },
+  doAction: { type: Function, required: true }
+});
+</script>
+
+<style scoped>
+.k-bulk-actions-modern {
+  display: flex;
+  align-items: center;
+}
+.k-bulk-actions-modern .actions-wrapper {
+  display: flex;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+.k-bulk-actions-modern .action-btn {
+  border-radius: var(--border-radius-sm);
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-fast);
+}
+.k-bulk-actions-modern .action-btn:hover {
+  transform: translateY(-1px);
+}
+.k-bulk-actions-modern .execute-btn {
+  border-radius: var(--border-radius-sm);
+}
+</style>

package/dist/runtime/components/KBulkActions/KBulkActions.vue.d.ts

@@ -0,0 +1,20 @@
+import { CFlatClientDataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    bulkActions: IKDatatableAction[];
+    selectedRows: any[];
+    selectAll: boolean;
+    dp: CFlatClientDataProvider;
+    doAction: (action: any) => void;
+};
+type __VLS_ModelProps = {
+    'selected'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    isLink: boolean;
+    isDisabled: boolean;
+    buttonClasses: any;
+    onClick: () => void;
+    href?: string;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,193 @@
+<template lang="pug">
+NuxtLink.KButton.modern-button(v-if="isLink" :to="href" @click.prevent="onClick" :class="buttonClasses")
+	.button-content
+		.button-icon(v-if="$slots.icon")
+			slot(name="icon")
+		.button-text
+			slot
+		.button-loader(v-if="loading")
+			.spinner
+button.KButton.modern-button(v-else @click="onClick" :class="buttonClasses" :disabled="isDisabled")
+	.button-content
+		.button-icon(v-if="$slots.icon")
+			slot(name="icon")
+		.button-text
+			slot
+		.button-loader(v-if="loading")
+			.spinner
+</template>
+
+<script setup>
+defineProps({
+  isLink: { type: Boolean, required: true },
+  isDisabled: { type: Boolean, required: true },
+  buttonClasses: { type: null, required: true },
+  onClick: { type: Function, required: true },
+  href: { type: String, required: false },
+  loading: { type: Boolean, required: false }
+});
+</script>
+
+<style scoped>
+.KButton.modern-button {
+  border-radius: var(--button-border-radius);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all var(--transition-bounce);
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  box-shadow: var(--shadow-md);
+}
+.KButton.modern-button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+  position: relative;
+  z-index: 1;
+}
+.KButton.modern-button .button-icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+}
+.KButton.modern-button .button-text {
+  display: flex;
+  align-items: center;
+}
+.KButton.modern-button .button-loader {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.KButton.modern-button .button-loader .spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+.KButton.modern-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+}
+.KButton.modern-button:hover::before {
+  opacity: 1;
+}
+.KButton.modern-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+.KButton.modern-button.default, .KButton.modern-button.primary {
+  background: var(--button-bg-primary);
+  color: var(--button-text-primary);
+}
+.KButton.modern-button.default:hover, .KButton.modern-button.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-primary, var(--shadow-lg));
+}
+.KButton.modern-button.danger {
+  background: var(--button-bg-danger);
+  color: var(--button-text-danger);
+}
+.KButton.modern-button.danger:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-danger, var(--shadow-lg));
+}
+.KButton.modern-button.success {
+  background: var(--button-bg-success);
+  color: var(--button-text-success);
+}
+.KButton.modern-button.success:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-success, var(--shadow-lg));
+}
+.KButton.modern-button.warning {
+  background: var(--button-bg-warning);
+  color: var(--button-text-warning);
+}
+.KButton.modern-button.warning:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.warning .spinner {
+  border-color: rgba(51, 51, 51, 0.3);
+  border-top-color: #333;
+}
+.KButton.modern-button.info {
+  background: var(--button-bg-info);
+  color: var(--button-text-info);
+}
+.KButton.modern-button.info:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.light {
+  background: var(--button-bg-light);
+  color: var(--button-text-light);
+  border-color: var(--border-color-medium);
+}
+.KButton.modern-button.light:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.light .spinner {
+  border-color: rgba(51, 51, 51, 0.3);
+  border-top-color: #333;
+}
+.KButton.modern-button.dark {
+  background: var(--button-bg-dark);
+  color: var(--button-text-dark);
+}
+.KButton.modern-button.dark:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.large {
+  font-size: var(--font-size-lg);
+  padding: var(--gap-md) var(--gap-xl);
+  border-radius: var(--border-radius-lg);
+}
+.KButton.modern-button.large .button-icon {
+  font-size: 1.3em;
+}
+.KButton.modern-button.medium {
+  font-size: var(--font-size-md);
+  padding: var(--gap-sm) var(--gap-lg);
+  border-radius: var(--button-border-radius);
+}
+.KButton.modern-button.small {
+  font-size: var(--font-size-sm);
+  padding: var(--gap-sm) var(--gap-md);
+  border-radius: var(--border-radius-sm);
+}
+.KButton.modern-button.small .button-icon {
+  font-size: 1.1em;
+}
+.KButton.modern-button.small .spinner {
+  width: 12px;
+  height: 12px;
+}
+.KButton.modern-button:active {
+  transform: translateY(0);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    isLink: boolean;
+    isDisabled: boolean;
+    buttonClasses: any;
+    onClick: () => void;
+    href?: string;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KCheckbox/KCheckbox.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    model: any;
+    checkboxValue: any;
+    isDisabled: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;