@katlux/preset-modern 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present, The Katlux Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# Modern Template - Component Summary
+
+The modern template provides a fresh, contemporary design for KatluxToolkit components with gradients, smooth animations, and enhanced visual feedback.
+
+## Supported Components
+
+### ✅ KButton
+- Gradient backgrounds for all button types
+- Smooth hover lift animation
+- Enhanced shadows for depth
+- Icon slot support
+- Custom animated loading spinner
+
+### ✅ KCheckbox
+- Gradient-filled checkmark on selection
+- Smooth check animation with pop effect
+- Hover glow effect
+- Rounded corners
+- Disabled state styling
+
+### ✅ KTextbox
+- Clean, minimal design
+- Focus ring with brand color
+- Animated clear button
+- Smooth transitions
+- Enhanced placeholder styling
+
+### ✅ KTextarea
+- Consistent styling with KTextbox
+- Focus ring animation
+- Smooth border transitions
+- Comfortable padding
+- Disabled state support
+
+## Design Features
+
+### Color Palette
+- Primary: `#667eea` → `#764ba2` (gradient)
+- Focus ring: `rgba(102, 126, 234, 0.1)`
+- Borders: `#e5e7eb` (default), `#667eea` (focus)
+- Text: `#1f2937` (primary), `#9ca3af` (placeholder)
+
+### Animations
+- Cubic-bezier easing: `cubic-bezier(0.4, 0, 0.2, 1)`
+- Transition duration: `0.3s` (standard), `0.2s` (quick)
+- Transform effects: lift, scale, pop
+
+### Spacing
+- Border radius: `10-14px` (depending on component)
+- Padding: `12-16px`
+- Focus ring: `3px` offset
+- Gaps: `8-12px`
+
+## Usage Examples
+
+### KButton with Icon
+```vue
+<KButton type="primary">
+  <template #icon>
+    <Icon name="mdi:check" />
+  </template>
+  Save Changes
+</KButton>
+```
+
+### KCheckbox
+```vue
+<KCheckbox v-model="accepted">
+  I accept the terms and conditions
+</KCheckbox>
+```
+
+### KTextbox with Clear
+```vue
+<KTextbox 
+  v-model="searchQuery" 
+  placeholder="Search..." 
+  :showClear="true"
+/>
+```
+
+### KTextarea
+```vue
+<KTextarea 
+  v-model="description" 
+  placeholder="Enter description..." 
+  :rows="6"
+/>
+```
+
+## Installation
+
+Katlux is a zero-configuration Nuxt module. When you install this preset, the core `@katlux/toolkit` is automatically provisioned for you.
+
+### Option 1: Using Nuxt CLI (Recommended)
+```bash
+npx nuxi module add @katlux/preset-modern
+```
+This single command installs the package and adds it to your `nuxt.config.ts`.
+
+### Option 2: Manual Installation
+1. Install via NPM:
+```bash
+npm install @katlux/preset-modern
+```
+
+2. Register the module in `nuxt.config.ts`:
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@katlux/preset-modern'
+  ]
+})
+```
+
+That's all! Start using Katlux components like `<KButton>` in your Vue files immediately. No imports required.
+
+## Next Components
+
+Coming soon:
+- KRadiobox
+- KCombobox
+- KDatatable
+- KModal
+- KPanel
+- And more...
+
+## Trademark Policy
+
+The code in this repository is completely free and open-source under the MIT License. 
+However, **Katlux™** and the Katlux logo are unregistered trademarks of the Katlux project. 
+
+To protect our users from fraud, you may not use the "Katlux" name or logo to brand your own modified forks, derivative works, or malicious distributions without explicit permission. You are, however, completely free to state "Built with Katlux" in your projects!

package/build.config.ts

@@ -0,0 +1,3 @@
+export default {
+	failOnWarn: false
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "@katlux/preset-modern",
+	"version": "0.1.0-beta.0",
+	"description": "Modern default design preset and styling variables for Katlux components",
+	"author": "Katlux",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"main": "./dist/module.mjs",
+	"scripts": {
+		"build": "nuxt-module-build build",
+		"dev": "nuxt-module-build build --stub"
+	},
+	"exports": {
+		".": {
+			"import": "./dist/module.mjs"
+		},
+		"./dist/runtime/assets/*": "./dist/runtime/assets/*"
+	},
+	"dependencies": {
+		"@katlux/toolkit": "*",
+		"@nuxt/kit": "^3.20.1"
+	}
+}

package/src/module.ts

@@ -0,0 +1,48 @@
+import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit'
+import { createRequire } from 'node:module'
+
+export default defineNuxtModule({
+	meta: {
+		name: '@katlux/preset-modern',
+		configKey: 'katluxTemplateModern'
+	},
+	async setup(options, nuxt) {
+		const { resolve } = createResolver(import.meta.url)
+		const _require = createRequire(import.meta.url)
+
+		// 0. Auto-install the base toolkit dependency!
+		await installModule('@katlux/toolkit')
+
+		// 1. Auto-import components
+		addComponentsDir({
+			path: resolve('./runtime/components'),
+			pathPrefix: false,
+			extensions: ['vue'],
+			global: true
+		})
+
+		// 2. Inject SCSS variables globally via Vite
+		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 || ''
+
+		// Resolve toolkit SCSS: find package root via package.json (exposed in exports)
+		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}\n${presetScssImport}\n${currentAdditionalData}`
+	}
+})

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

@@ -0,0 +1,175 @@
+// Modern Template - CSS Custom Properties
+// Vibrant gradients and modern aesthetics
+// Applied when data-template="modern" is set on the root element
+
+[data-template="modern"] {
+	// Primary Colors - Purple-blue gradient palette
+	--primary-100: #ede9fe;
+	--primary-300: #c4b5fd;
+	--primary-500: #8b5cf6;
+	--primary-700: #7c3aed;
+	--primary-900: #5b21b6;
+
+	// Accent Colors - Cyan/teal
+	--accent-100: #cffafe;
+	--accent-300: #67e8f9;
+	--accent-500: #06b6d4;
+	--accent-700: #0891b2;
+	--accent-900: #155e75;
+
+	// Neutral Colors - Slate tones
+	--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;
+
+	// Semantic Colors
+	--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 Colors
+	--font-color-primary: var(--neutral-700);
+	--font-color-secondary: var(--neutral-500);
+	--font-color-heading: var(--neutral-900);
+	--font-color-light: #ffffff;
+
+	// Background Colors
+	--background-color: #ffffff;
+	--background-color-light: var(--neutral-50);
+	--background-color-medium: var(--neutral-100);
+	--background-color-dark: var(--neutral-800);
+
+	// Border Colors
+	--border-color-light: var(--neutral-200);
+	--border-color-medium: var(--neutral-300);
+	--border-color-dark: var(--neutral-500);
+
+	// Spacing
+	--gap-sm: 8px;
+	--gap-md: 16px;
+	--gap-lg: 24px;
+	--gap-xl: 32px;
+
+	// Border Radius - More rounded for modern look
+	--border-radius-sm: 8px;
+	--border-radius-md: 12px;
+	--border-radius-lg: 16px;
+	--border-radius-xl: 24px;
+	--border-radius-full: 9999px;
+
+	// Shadows - Modern elevated shadows
+	--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);
+
+	// Glow shadows for buttons
+	--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);
+
+	// Typography
+	--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;
+
+	// Transitions
+	--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-specific
+	--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 Gradients
+	--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 Colors (using gradients as backgrounds)
+	--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
+	--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
+	--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
+	--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 Variables
+	--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/src/runtime/assets/scss/index.scss

@@ -0,0 +1,3 @@
+@use "css-variables";
+// Documentation styles are globally included via default template for now
+// but using common theme variables

package/src/runtime/components/KBulkActions/KBulkActions.vue

@@ -0,0 +1,72 @@
+<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 lang="ts">
+import { CFlatClientDataProvider } from '@katlux/providers'
+import type { IKDatatableAction } from '@katlux/providers'
+
+// Use defineModel for simpler two-way binding
+const selected = defineModel<any>('selected')
+
+defineProps<{
+	bulkActions: IKDatatableAction[]
+	selectedRows: any[]
+	selectAll: boolean
+	dp: CFlatClientDataProvider
+	doAction: (action: any) => void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.k-bulk-actions-modern {
+	display: flex;
+	align-items: center;
+
+	.actions-wrapper {
+		display: flex;
+		gap: var(--gap-sm);
+		align-items: center;
+	}
+
+	.action-btn {
+		border-radius: var(--border-radius-sm);
+		font-weight: var(--font-weight-medium);
+		transition: all var(--transition-fast);
+		
+		&:hover {
+			transform: translateY(-1px);
+		}
+	}
+	
+	.execute-btn {
+		border-radius: var(--border-radius-sm);
+	}
+}
+</style>

package/src/runtime/components/KButton/KButton.vue

@@ -0,0 +1,227 @@
+<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 lang="ts" setup>
+// Modern template for KButton
+defineProps<{
+	isLink: boolean
+	isDisabled: boolean
+	buttonClasses: any
+	onClick: () => void
+	href?: string
+	loading?: boolean
+}>()
+</script>
+
+<style lang="scss" 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);
+
+	.button-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--gap-sm);
+		position: relative;
+		z-index: 1;
+	}
+
+	.button-icon {
+		display: flex;
+		align-items: center;
+		font-size: 1.2em;
+	}
+
+	.button-text {
+		display: flex;
+		align-items: center;
+	}
+
+	.button-loader {
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+
+		.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;
+		}
+	}
+
+	&::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);
+	}
+
+	&:hover::before {
+		opacity: 1;
+	}
+
+	&:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		pointer-events: none;
+		box-shadow: none;
+	}
+
+	// Color variants
+	&.default, &.primary {
+		background: var(--button-bg-primary);
+		color: var(--button-text-primary);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-glow-primary, var(--shadow-lg));
+		}
+	}
+
+	&.danger {
+		background: var(--button-bg-danger);
+		color: var(--button-text-danger);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-glow-danger, var(--shadow-lg));
+		}
+	}
+
+	&.success {
+		background: var(--button-bg-success);
+		color: var(--button-text-success);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-glow-success, var(--shadow-lg));
+		}
+	}
+
+	&.warning {
+		background: var(--button-bg-warning);
+		color: var(--button-text-warning);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-lg);
+		}
+
+		.spinner {
+			border-color: rgba(51, 51, 51, 0.3);
+			border-top-color: #333;
+		}
+	}
+
+	&.info {
+		background: var(--button-bg-info);
+		color: var(--button-text-info);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-lg);
+		}
+	}
+
+	&.light {
+		background: var(--button-bg-light);
+		color: var(--button-text-light);
+		border-color: var(--border-color-medium);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-lg);
+		}
+
+		.spinner {
+			border-color: rgba(51, 51, 51, 0.3);
+			border-top-color: #333;
+		}
+	}
+
+	&.dark {
+		background: var(--button-bg-dark);
+		color: var(--button-text-dark);
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: var(--shadow-lg);
+		}
+	}
+
+	// Size variants
+	&.large {
+		font-size: var(--font-size-lg);
+		padding: var(--gap-md) var(--gap-xl);
+		border-radius: var(--border-radius-lg);
+
+		.button-icon {
+			font-size: 1.3em;
+		}
+	}
+
+	&.medium {
+		font-size: var(--font-size-md);
+		padding: var(--gap-sm) var(--gap-lg);
+		border-radius: var(--button-border-radius);
+	}
+
+	&.small {
+		font-size: var(--font-size-sm);
+		padding: var(--gap-sm) var(--gap-md);
+		border-radius: var(--border-radius-sm);
+
+		.button-icon {
+			font-size: 1.1em;
+		}
+
+		.spinner {
+			width: 12px;
+			height: 12px;
+		}
+	}
+
+	&:active {
+		transform: translateY(0);
+	}
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>