@keenthemes/ktui 1.0.19 → 1.0.21

package/src/components/select/tags.ts

@@ -39,7 +39,9 @@ export class KTSelectTags {
 		if (!wrapper) return;
 
 		// Remove all previous tags
-		Array.from(wrapper.querySelectorAll('[data-kt-select-tag]')).forEach(tag => tag.remove());
+		Array.from(wrapper.querySelectorAll('[data-kt-select-tag]')).forEach(
+			(tag) => tag.remove(),
+		);
 
 		// If no options selected, do nothing (let display show placeholder)
 		if (selectedOptions.length === 0) {
@@ -58,7 +60,9 @@ export class KTSelectTags {
 				}
 			}
 			if (!optionElement) {
-				const originalOptions = this._select.getElement().querySelectorAll('option');
+				const originalOptions = this._select
+					.getElement()
+					.querySelectorAll('option');
 				for (const opt of Array.from(originalOptions)) {
 					if ((opt as HTMLOptionElement).value === optionValue) {
 						optionElement = opt as HTMLOptionElement;
@@ -70,7 +74,9 @@ export class KTSelectTags {
 			const tag = defaultTemplates.tag(optionElement, this._config);
 
 			// Add event listener to the close button
-			const closeButton = tag.querySelector('[data-kt-select-remove-button]') as HTMLElement;
+			const closeButton = tag.querySelector(
+				'[data-kt-select-remove-button]',
+			) as HTMLElement;
 			if (closeButton) {
 				this._eventManager.addListener(closeButton, 'click', (event: Event) => {
 					event.stopPropagation();

package/src/components/select/templates.ts

@@ -43,6 +43,7 @@ export const coreTemplateStrings = {
 	loading: `<li class="kt-select-loading {{class}}" role="status" aria-live="polite"></li>`,
 	tag: `<div data-kt-select-tag="true" class="kt-select-tag {{class}}"></div>`,
 	loadMore: `<li class="kt-select-load-more {{class}}" data-kt-select-load-more="true"></li>`,
+	selectAll: `<div data-kt-select-select-all class="kt-select-select-all"><button type="button" class="kt-select-select-all-button">{{text}}</button></div>`,
 	tagRemoveButton: `<button type="button" data-kt-select-remove-button class="kt-select-tag-remove" aria-label="Remove tag" tabindex="0"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="3" x2="9" y2="9"/><line x1="9" y1="3" x2="3" y2="9"/></svg></button>`,
 };
 
@@ -99,6 +100,7 @@ export interface KTSelectTemplateInterface {
 	) => HTMLElement;
 
 	placeholder: (config: KTSelectConfigInterface) => HTMLElement;
+	selectAll: (config: KTSelectConfigInterface) => HTMLElement;
 }
 
 /**
@@ -462,4 +464,12 @@ export const defaultTemplates: KTSelectTemplateInterface = {
 			return element;
 		}
 	},
+
+	selectAll: (config: KTSelectConfigInterface): HTMLElement => {
+		const template = getTemplateStrings(config).selectAll;
+		const element = stringToElement(
+			template.replace('{{text}}', config.selectAllText || 'Select All'),
+		);
+		return element;
+	},
 };

package/src/components/select/utils.ts

@@ -53,14 +53,17 @@ export function filterOptions(
 
 	for (const option of options) {
 		// Use data-text for matching if available, otherwise fall back to textContent
-		const optionText = (option.dataset.text || option.textContent || '').toLowerCase();
+		const optionText = (
+			option.dataset.text ||
+			option.textContent ||
+			''
+		).toLowerCase();
 		const isMatch = optionText.includes(queryLower);
 
 		if (isMatch) {
 			option.classList.remove('hidden');
 			if (option.style.display === 'none') option.style.display = ''; // Ensure visible
 			visibleOptionsCount++;
-
 		} else {
 			option.classList.add('hidden');
 		}
@@ -89,7 +92,9 @@ export class FocusManager {
 	private _focusClass: string;
 	private _hoverClass: string;
 	private _eventManager: EventManager;
-	private _onFocusChange: ((option: HTMLElement | null, index: number | null) => void) | null = null;
+	private _onFocusChange:
+		| ((option: HTMLElement | null, index: number | null) => void)
+		| null = null;
 
 	constructor(
 		element: HTMLElement,
@@ -149,7 +154,10 @@ export class FocusManager {
 		if (options.length === 0) return null;
 		for (let i = 0; i < options.length; i++) {
 			const option = options[i];
-			if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+			if (
+				!option.classList.contains('disabled') &&
+				option.getAttribute('aria-disabled') !== 'true'
+			) {
 				this.resetFocus();
 				this._focusedOptionIndex = i;
 				this.applyFocus(option);
@@ -168,7 +176,10 @@ export class FocusManager {
 		if (options.length === 0) return null;
 		for (let i = options.length - 1; i >= 0; i--) {
 			const option = options[i];
-			if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+			if (
+				!option.classList.contains('disabled') &&
+				option.getAttribute('aria-disabled') !== 'true'
+			) {
 				this.resetFocus();
 				this._focusedOptionIndex = i;
 				this.applyFocus(option);
@@ -193,7 +204,8 @@ export class FocusManager {
 			if (
 				!option.classList.contains('disabled') &&
 				option.getAttribute('aria-disabled') !== 'true' &&
-				(option.textContent?.toLowerCase().startsWith(lowerStr) || option.dataset.value?.toLowerCase().startsWith(lowerStr))
+				(option.textContent?.toLowerCase().startsWith(lowerStr) ||
+					option.dataset.value?.toLowerCase().startsWith(lowerStr))
 			) {
 				this.resetFocus();
 				this._focusedOptionIndex = idx;
@@ -211,11 +223,17 @@ export class FocusManager {
 	public focusNext(): HTMLElement | null {
 		const options = this.getVisibleOptions();
 		if (options.length === 0) return null;
-		let idx = this._focusedOptionIndex === null ? 0 : (this._focusedOptionIndex + 1) % options.length;
+		let idx =
+			this._focusedOptionIndex === null
+				? 0
+				: (this._focusedOptionIndex + 1) % options.length;
 		let startIdx = idx;
 		do {
 			const option = options[idx];
-			if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+			if (
+				!option.classList.contains('disabled') &&
+				option.getAttribute('aria-disabled') !== 'true'
+			) {
 				this.resetFocus();
 				this._focusedOptionIndex = idx;
 				this.applyFocus(option);
@@ -233,11 +251,17 @@ export class FocusManager {
 	public focusPrevious(): HTMLElement | null {
 		const options = this.getVisibleOptions();
 		if (options.length === 0) return null;
-		let idx = this._focusedOptionIndex === null ? options.length - 1 : (this._focusedOptionIndex - 1 + options.length) % options.length;
+		let idx =
+			this._focusedOptionIndex === null
+				? options.length - 1
+				: (this._focusedOptionIndex - 1 + options.length) % options.length;
 		let startIdx = idx;
 		do {
 			const option = options[idx];
-			if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+			if (
+				!option.classList.contains('disabled') &&
+				option.getAttribute('aria-disabled') !== 'true'
+			) {
 				this.resetFocus();
 				this._focusedOptionIndex = idx;
 				this.applyFocus(option);
@@ -255,7 +279,10 @@ export class FocusManager {
 	public applyFocus(option: HTMLElement): void {
 		if (!option) return;
 		// Ensure it's not disabled
-		if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
+		if (
+			option.classList.contains('disabled') ||
+			option.getAttribute('aria-disabled') === 'true'
+		) {
 			return;
 		}
 		// DO NOT CALL resetFocus() here. Caller's responsibility.
@@ -269,7 +296,9 @@ export class FocusManager {
 	 * Reset focus on all options
 	 */
 	public resetFocus(): void {
-		const focusedElements = this._element.querySelectorAll(`.${this._focusClass}, .${this._hoverClass}`);
+		const focusedElements = this._element.querySelectorAll(
+			`.${this._focusClass}, .${this._hoverClass}`,
+		);
 
 		// Remove focus and hover classes from all options
 		focusedElements.forEach((element) => {
@@ -285,9 +314,7 @@ export class FocusManager {
 	public scrollIntoView(option: HTMLElement): void {
 		if (!option) return;
 
-		const container = this._element.querySelector(
-			'[data-kt-select-options]',
-		);
+		const container = this._element.querySelector('[data-kt-select-options]');
 		if (!container) return;
 
 		const optionRect = option.getBoundingClientRect();
@@ -312,7 +339,10 @@ export class FocusManager {
 
 		if (index >= 0) {
 			const optionToFocus = options[index];
-			if (!optionToFocus.classList.contains('disabled') && optionToFocus.getAttribute('aria-disabled') !== 'true'){
+			if (
+				!optionToFocus.classList.contains('disabled') &&
+				optionToFocus.getAttribute('aria-disabled') !== 'true'
+			) {
 				this.resetFocus();
 				this._focusedOptionIndex = index;
 				this.applyFocus(optionToFocus);
@@ -357,7 +387,9 @@ export class FocusManager {
 	/**
 	 * Set a callback to be called when focus changes
 	 */
-	public setOnFocusChange(cb: (option: HTMLElement | null, index: number | null) => void) {
+	public setOnFocusChange(
+		cb: (option: HTMLElement | null, index: number | null) => void,
+	) {
 		this._onFocusChange = cb;
 	}
 
@@ -480,9 +512,12 @@ export function debounce(
  * Replaces all {{key}} in the template with the corresponding value from the data object.
  * If a key is missing in data, replaces with an empty string.
  */
-export function renderTemplateString(template: string, data: Record<string, any>): string {
+export function renderTemplateString(
+	template: string,
+	data: Record<string, any>,
+): string {
 	return template.replace(/{{(\w+)}}/g, (_, key) =>
-		data[key] !== undefined && data[key] !== null ? String(data[key]) : ''
+		data[key] !== undefined && data[key] !== null ? String(data[key]) : '',
 	);
 }
 
@@ -518,4 +553,4 @@ export function stringToElement(html: string): HTMLElement {
 	const template = document.createElement('template');
 	template.innerHTML = html.trim();
 	return template.content.firstElementChild as HTMLElement;
-}
+}

package/src/components/select/variants.css

@@ -2,4 +2,3 @@
  * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
  * Copyright 2025 by Keenthemes Inc
  */
-

package/src/components/stepper/stepper.ts

@@ -131,12 +131,12 @@ export class KTStepper extends KTComponent implements KTStepperInterface {
 		return elements;
 	}
 
-	protected _go(step: number): void {
+	protected async _go(step: number): Promise<void> {
 		if (step === this._activeStep || step > this._getTotalSteps() || step < 0)
 			return;
 
 		const payload = { step: step, cancel: false };
-		this._fireEvent('change', payload);
+		await this._fireEvent('change', payload);
 		this._dispatchEvent('change', payload);
 		if (payload.cancel === true) {
 			return;

package/src/components/sticky/sticky.ts

@@ -23,7 +23,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		name: '',
 		class: '',
 		top: '',
+		middle: false,
+		bottom: '',
 		start: '',
+		center: false,
 		end: '',
 		width: '',
 		zindex: '',
@@ -212,7 +215,10 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 
 		let width = this._getOption('width') as string;
 		const top = this._getOption('top') as string;
+		const middle = this._getOption('middle') as boolean;
+		const bottom = this._getOption('bottom') as string;
 		const start = this._getOption('start') as string;
+		const center = this._getOption('center') as boolean;
 		const end = this._getOption('end') as string;
 		const height = this._calculateHeight();
 		const zindex = this._getOption('zindex') as string;
@@ -233,29 +239,49 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 			this._element.style.width = `${Math.round(parseFloat(width))}px`;
 		}
 
-		if (top) {
-			this._element.style.top = `${top}px`;
-		}
-
-		if (start) {
-			if (start === 'auto') {
-				const offsetLeft = KTDom.offset(this._element).left;
-				if (offsetLeft >= 0) {
-					this._element.style.insetInlineStart = `${offsetLeft}px`;
+		if (middle === true) {
+			this._element.style.insetBlockStart = `50%`;
+		} else {
+			if (top) {
+				if (top === 'auto') {
+					this._element.style.insetBlockStart = `0px`;
+				} else {
+					this._element.style.insetBlockStart = `${top}px`;
 				}
 			} else {
-				this._element.style.insetInlineStart = `${start}px`;
+				if (bottom) {
+					if (bottom === 'auto') {
+						this._element.style.insetBlockEnd = `0px`;
+					} else {
+						this._element.style.insetBlockEnd = `${bottom}px`;
+					}
+				}
 			}
 		}
 
-		if (end) {
-			if (end === 'auto') {
-				const offseRight = KTDom.offset(this._element).right;
-				if (offseRight >= 0) {
-					this._element.style.insetInlineEnd = `${offseRight}px`;
+		if (center === true) {
+			this._element.style.insetInlineStart = `50%`;
+		} else {
+			if (start) {
+				if (start === 'auto') {
+					const offsetLeft = KTDom.offset(this._element).left;
+					if (offsetLeft >= 0) {
+						this._element.style.insetInlineStart = `${offsetLeft}px`;
+					}
+				} else {
+					this._element.style.insetInlineStart = `${start}px`;
 				}
 			} else {
-				this._element.style.insetInlineEnd = `${end}px`;
+				if (end) {
+					if (end === 'auto') {
+						const offsetRight = KTDom.offset(this._element).right;
+						if (offsetRight >= 0) {
+							this._element.style.insetInlineEnd = `${offsetRight}px`;
+						}
+					} else {
+						this._element.style.insetInlineEnd = `${end}px`;
+					}
+				}
 			}
 		}
 
@@ -282,6 +308,11 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
 		if (!this._element) return;
 
 		this._element.style.top = '';
+		this._element.style.bottom = '';
+		this._element.style.insetInlineStart = '';
+		this._element.style.insetInlineEnd = '';
+		this._element.style.insetBlockStart = '';
+		this._element.style.insetBlockEnd = '';
 		this._element.style.width = '';
 		this._element.style.left = '';
 		this._element.style.right = '';

package/src/components/sticky/types.ts

@@ -9,7 +9,10 @@ export interface KTStickyConfigInterface {
 	class: string;
 	zindex: string;
 	top: string;
+	middle: boolean;
+	bottom: string;
 	start: string;
+	center: boolean;
 	end: string;
 	width: string | number | object;
 	offset: number;

package/src/components/table/table.css

@@ -46,7 +46,7 @@
 
 		td,
 		th {
-			input[type=checkbox] {
+			input[type='checkbox'] {
 				vertical-align: inherit;
 			}
 		}

package/src/components/textarea/textarea.css

@@ -9,7 +9,7 @@
 	.kt-textarea {
 		@apply w-full bg-background border border-input text-foreground shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] placeholder:text-muted-foreground/80;
 		@apply focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/30;
-		@apply disabled:cursor-not-allowed disabled:opacity-60; 
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
 		@apply [&[readonly]]:bg-muted/80 [&[readonly]]:cursor-not-allowed;
 		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
 	}

package/src/components/toast/toast.css

@@ -3,58 +3,95 @@
  * Copyright 2025 by Keenthemes Inc
  */
 
- /* Base Styles */
- @layer components {
-  /* Container */
-  .kt-toast-container {
-    @apply fixed z-9999;
-  }
-
-  /* Toast */
-  .kt-toast {
-    @apply fixed z-9999 max-w-[95%] w-76 shadow-sm pointer-events-auto overflow-hidden;
-
-    opacity: 0;
-    animation: kt-toast-in 0.28s cubic-bezier(.4,0,.2,1) forwards;
-    transition: top 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s cubic-bezier(.4,0,.2,1);
-
-    &.kt-toast-top-end { @apply bottom-auto top-0 end-0; }
-    &.kt-toast-top-center { @apply bottom-auto top-0 start-1/2 -translate-x-1/2; }
-    &.kt-toast-top-start { @apply bottom-auto top-0 start-0; }
-    &.kt-toast-bottom-end { @apply top-auto bottom-0 end-0; }
-    &.kt-toast-bottom-center { @apply top-auto bottom-0 start-1/2 -translate-x-1/2; } 
-    &.kt-toast-bottom-start { @apply top-auto bottom-0 start-0; }
-  }
-
-  /* Progress */
-  .kt-toast-progress {
-    @apply fixed start-0 bottom-0 w-full h-[3px] bg-primary;
-    transform-origin: left;
-    animation: kt-toast-progress-line linear forwards;
-  }
- }
+/* Base Styles */
+@layer components {
+	/* Container */
+	.kt-toast-container {
+		@apply fixed z-9999;
+	}
+
+	/* Toast */
+	.kt-toast {
+		@apply fixed z-9999 max-w-[95%] w-76 shadow-sm pointer-events-auto overflow-hidden;
+
+		opacity: 0;
+		animation: kt-toast-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+		transition:
+			top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+			opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+		&.kt-toast-top-end {
+			@apply bottom-auto top-0 end-0;
+		}
+		&.kt-toast-top-center {
+			@apply bottom-auto top-0 left-1/2 -translate-x-1/2;
+		}
+		&.kt-toast-top-start {
+			@apply bottom-auto top-0 start-0;
+		}
+		&.kt-toast-middle-end {
+			@apply top-1/2 -translate-y-1/2 end-0;
+		}
+		&.kt-toast-middle-center {
+			@apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+		}
+		&.kt-toast-middle-start {
+			@apply top-1/2 -translate-y-1/2 start-0;
+		}
+		&.kt-toast-bottom-end {
+			@apply top-auto bottom-0 end-0;
+		}
+		&.kt-toast-bottom-center {
+			@apply top-auto bottom-0 left-1/2 -translate-x-1/2;
+		}
+		&.kt-toast-bottom-start {
+			@apply top-auto bottom-0 start-0;
+		}
+	}
+
+	/* Progress */
+	.kt-toast-progress {
+		@apply fixed start-0 bottom-0 w-full h-[3px] bg-primary;
+		transform-origin: left;
+		animation: kt-toast-progress-line linear forwards;
+	}
+}
 
 /* RTL Styles */
 @layer components {
 	[dir='rtl'] .kt-toast-progress {
-    transform-origin: right;
-  }
+		transform-origin: right;
+	}
 }
 
 /* Animations */
 @layer components {
-  @keyframes kt-toast-in {
-    from { opacity: 0; transform: translateY(-24px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes kt-toast-out {
-    from { opacity: 1;  }
-    to { opacity: 0;  }
-  }
-
-  @keyframes kt-toast-progress-line {
-    from { transform: scaleX(1); }
-    to { transform: scaleX(0); }
-  }
-}
+	@keyframes kt-toast-in {
+		from {
+			opacity: 0;
+			transform: translateY(-24px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes kt-toast-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	@keyframes kt-toast-progress-line {
+		from {
+			transform: scaleX(1);
+		}
+		to {
+			transform: scaleX(0);
+		}
+	}
+}

package/src/components/toast/types.ts

@@ -33,6 +33,9 @@ export type KTToastPosition =
 	| 'top-end'
 	| 'top-center'
 	| 'top-start'
+	| 'middle-end'
+	| 'middle-center'
+	| 'middle-start'
 	| 'bottom-end'
 	| 'bottom-center'
 	| 'bottom-start';