@keenthemes/ktui 1.2.0 → 1.2.2

package/src/components/toast/toast.ts

@@ -10,6 +10,7 @@ import {
 	KTToastConfig,
 	KTToastInstance,
 	KTToastPosition,
+	KTToastClassNames,
 } from './types';
 
 const DEFAULT_CONFIG: KTToastConfig = {
@@ -60,9 +61,9 @@ export class KTToast extends KTComponent implements KTToastInterface {
 	 * @returns The toast's HTML markup as a string.
 	 */
 	static getContent(options?: KTToastOptions) {
-		const classNames = {
-			...((this.globalConfig.classNames as any) || {}),
-			...((options?.classNames as any) || {}),
+		const classNames: Partial<KTToastClassNames> = {
+			...(this.globalConfig.classNames || {}),
+			...(options?.classNames || {}),
 		};
 
 		if (options?.content) {
@@ -237,18 +238,18 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		const position =
 			options.position || this.globalConfig.position || 'top-end';
 
-		const classNames = {
-			...((this.globalConfig.classNames as any) || {}),
-			...((options.classNames as any) || {}),
+		const classNames: Partial<KTToastClassNames> = {
+			...(this.globalConfig.classNames || {}),
+			...(options.classNames || {}),
 		};
 
 		let container = this.containerMap.get(position);
 
 		if (!container) {
 			container = document.createElement('div');
-			const classNames = {
-				...((this.globalConfig.classNames as any) || {}),
-				...((options.classNames as any) || {}),
+			const classNames: Partial<KTToastClassNames> = {
+				...(this.globalConfig.classNames || {}),
+				...(options.classNames || {}),
 			};
 			// Fallback to default hardcoded classes if not provided in options or globalConfig
 			container.className =
@@ -260,7 +261,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		// Enforce maxToasts
 		if (
 			container.children.length >=
-			(this.globalConfig.maxToasts || DEFAULT_CONFIG.maxToasts)
+			(this.globalConfig.maxToasts ?? DEFAULT_CONFIG.maxToasts ?? 5)
 		) {
 			const firstToast = container.firstElementChild;
 			if (firstToast) {
@@ -296,7 +297,10 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		};
 
 		const toast = document.createElement('div');
-		toast.className = `kt-toast kt-alert ${variantMap[options.variant] || ''} ${appearanceMap[options.appearance] || ''} ${sizeMap[options.size] || ''} ${options.className || ''} ${classNames.toast || ''}`;
+		const variantClass = variantMap[options.variant ?? 'info'] || '';
+		const appearanceClass = appearanceMap[options.appearance ?? 'solid'] || '';
+		const sizeClass = sizeMap[options.size ?? 'md'] || '';
+		toast.className = `kt-toast kt-alert ${variantClass} ${appearanceClass} ${sizeClass} ${options.className || ''} ${classNames.toast || ''}`;
 		// ARIA support
 		toast.setAttribute('role', options.role || 'status');
 		toast.setAttribute('aria-live', 'polite');
@@ -392,10 +396,11 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		toast.classList.add(dirClass);
 
 		// Enforce maxToasts: remove oldest if needed
-		const maxToasts =
+		const maxToasts: number =
 			options.maxToasts ??
 			this.globalConfig.maxToasts ??
-			DEFAULT_CONFIG.maxToasts;
+			DEFAULT_CONFIG.maxToasts ??
+			5;
 		const currentToasts = Array.from(container.children) as HTMLElement[];
 		if (currentToasts.length >= maxToasts && currentToasts.length > 0) {
 			const oldestToast = currentToasts[currentToasts.length - 1];
@@ -415,9 +420,17 @@ export class KTToast extends KTComponent implements KTToastInterface {
 		if (options.beep) {
 			try {
 				// Use Web Audio API for a short beep
-				const ctx = new (
-					window.AudioContext || (window as any).webkitAudioContext
-				)();
+				const Ctx =
+					window.AudioContext ||
+					(
+						window as Window & {
+							webkitAudioContext?: typeof AudioContext;
+						}
+					).webkitAudioContext;
+				if (!Ctx) {
+					throw new Error('Web Audio API unavailable');
+				}
+				const ctx = new Ctx();
 				const o = ctx.createOscillator();
 				const g = ctx.createGain();
 				o.type = 'sine';
@@ -430,7 +443,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 					o.stop();
 					ctx.close();
 				}, 120);
-			} catch (e) {
+			} catch {
 				/* ignore */
 			}
 		}
@@ -442,7 +455,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 
 		// Auto-dismiss
 		let timeoutId: number | undefined = undefined;
-		let remaining = duration;
+		let remaining = duration ?? 0;
 		let startTime: number | undefined;
 		let paused = false;
 		let progressEl: HTMLElement | null = null;
@@ -493,7 +506,7 @@ export class KTToast extends KTComponent implements KTToastInterface {
 						if (progressEl) {
 							progressEl.style.transition = 'transform 0ms';
 							progressEl.style.transform = `scaleX(${progressPausedAt})`;
-							progressEl.offsetHeight; // force reflow
+							void progressEl.offsetHeight; // force reflow
 							progressEl.style.transition = `transform ${remaining}ms linear`;
 							progressEl.style.transform = 'scaleX(0)';
 						}
@@ -566,8 +579,8 @@ export class KTToast extends KTComponent implements KTToastInterface {
 			inst?.element.remove();
 			KTToast.toasts.delete(id!);
 			// Try to call onDismiss if available in the toast instance (if stored)
-			if (typeof (inst as any).options?.onDismiss === 'function') {
-				(inst as any).options.onDismiss(id);
+			if (typeof inst.options?.onDismiss === 'function') {
+				inst.options.onDismiss(id);
 			}
 			KTToast._fireEventOnElement(inst.element, 'hidden', { id });
 			KTToast._dispatchEventOnElement(inst.element, 'hidden', { id });

package/src/components/toast/types.ts

@@ -60,6 +60,7 @@ export interface KTToastClassNames {
 	message?: string; // Message
 	toolbar?: string; // Toolbar
 	actions?: string; // Actions
+	progress?: string; // Progress indicator
 }
 
 /**
@@ -93,7 +94,9 @@ export interface KTToastConfigInterface {
 	progress?: boolean;
 }
 
-export interface KTToastInterface {}
+export interface KTToastInterface {
+	dispose(): void;
+}
 
 export interface KTToastOptions {
 	/** Custom content for the toast. HTMLElement, function returning HTMLElement, or string (DOM id). If set, replaces all default markup. */
@@ -169,4 +172,5 @@ export interface KTToastInstance {
 	id: string; // Toast unique ID
 	element: HTMLElement; // Toast DOM element
 	timeoutId: number; // Timer ID for auto-dismiss
+	options?: KTToastOptions; // Resolved options used to create this toast
 }

package/src/components/toggle-password/toggle-password.ts

@@ -4,7 +4,6 @@
  */
 
 import KTData from '../../helpers/data';
-import KTDom from '../../helpers/dom';
 import KTComponent from '../component';
 import {
 	KTTogglePasswordConfigInterface,

package/src/helpers/dom.ts

@@ -16,21 +16,17 @@ const KTDom = {
 		return dir === 'rtl';
 	},
 
-	isElement(element: HTMLElement): boolean {
-		if (element && element instanceof HTMLElement) {
-			return true;
-		} else {
-			return false;
-		}
+	isElement(element: unknown): element is HTMLElement {
+		return element instanceof HTMLElement;
 	},
 
-	getElement(element: HTMLElement | string): HTMLElement {
+	getElement(element: HTMLElement | string | null): HTMLElement | null {
 		if (this.isElement(element)) {
-			return element as HTMLElement;
+			return element;
 		}
 
-		if (element && (element as string).length > 0) {
-			return document.querySelector(KTUtils.parseSelector(element as string));
+		if (typeof element === 'string' && element.length > 0) {
+			return document.querySelector(KTUtils.parseSelector(element));
 		}
 
 		return null;
@@ -151,7 +147,7 @@ const KTDom = {
 
 	children(element: HTMLElement, selector: string): Array<HTMLElement> {
 		if (!element || !element.childNodes) {
-			return null;
+			return [];
 		}
 
 		const result: Array<HTMLElement> = [];
@@ -170,7 +166,7 @@ const KTDom = {
 		return result;
 	},
 
-	child(element: HTMLElement, selector: string): HTMLElement {
+	child(element: HTMLElement, selector: string): HTMLElement | null {
 		const children = KTDom.children(element, selector);
 
 		return children ? children[0] : null;
@@ -236,7 +232,7 @@ const KTDom = {
 	},
 
 	reflow(element: HTMLElement): void {
-		element.offsetHeight;
+		void element.offsetHeight;
 	},
 
 	insertAfter(element: HTMLElement, referenceNode: HTMLElement) {
@@ -277,7 +273,7 @@ const KTDom = {
 		return 1;
 	},
 
-	isParentOrElementHidden(element: HTMLElement): boolean {
+	isParentOrElementHidden(element: HTMLElement | null): boolean {
 		if (!element) {
 			return false;
 		}
@@ -380,9 +376,10 @@ const KTDom = {
 		for (const key of keys) {
 			let normalizedKey = key.replace(prefix, '');
 			normalizedKey = KTUtils.uncapitalize(normalizedKey);
-			attributes[normalizedKey] = KTUtils.parseDataAttribute(
-				element.dataset[key],
-			);
+			const datasetValue = element.dataset[key];
+			if (typeof datasetValue === 'string') {
+				attributes[normalizedKey] = KTUtils.parseDataAttribute(datasetValue);
+			}
 		}
 
 		return attributes;

package/src/helpers/event-handler.ts

@@ -14,23 +14,22 @@ const KTDelegatedEventHandlers: KTDelegatedEventHandlersInterface = {};
 
 const KTEventHandler = {
 	on: function (
-		element: HTMLElement,
+		element: HTMLElement | null,
 		selector: string,
 		eventName: string,
 		handler: KTCallableType,
 	): string {
 		if (element === null) {
-			return null;
+			return '';
 		}
 
 		const eventId = KTUtils.geUID('event');
 
-		KTDelegatedEventHandlers[eventId] = (
-			event: Event & { target: HTMLElement },
-		) => {
+		KTDelegatedEventHandlers[eventId] = (event?: Event) => {
+			if (!event) return;
 			// Fix: Check selector dynamically instead of pre-computing targets
 			// This allows event delegation to work with dynamically added elements
-			let target = event.target as HTMLElement;
+			let target = event.target as HTMLElement | null;
 
 			while (target && target !== element) {
 				// Check if current target matches the selector

package/src/helpers/utils.ts

@@ -50,7 +50,7 @@ const KTUtils = {
 		}
 	},
 
-	parseJson(value: string): JSON {
+	parseJson(value: string): unknown | null {
 		return value && value.length > 0
 			? JSON.parse(decodeURIComponent(value))
 			: null;
@@ -134,13 +134,16 @@ const KTUtils = {
 	},
 
 	stringToObject: <T>(value: KTOptionType): T | null => {
+		if (value === null) {
+			return null;
+		}
 		try {
 			const parsed = JSON.parse(value.toString() as string);
 			if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
 				return parsed as T;
 			}
 			return null;
-		} catch (error) {
+		} catch {
 			return null;
 		}
 	},

package/src/index.ts

@@ -30,6 +30,10 @@ import { KTSelect } from './components/select';
 import { KTToast } from './components/toast';
 import { KTRating } from './components/rating';
 import { KTRepeater } from './components/repeater';
+import { KTClipboard } from './components/clipboard';
+import { KTRangeSlider } from './components/range-slider';
+import { KTPinInput } from './components/pin-input';
+import { KTCarousel } from './components/carousel';
 
 export { KTDropdown } from './components/dropdown';
 export { KTModal } from './components/modal';
@@ -54,6 +58,10 @@ export { KTSelect } from './components/select';
 export { KTToast } from './components/toast';
 export { KTRating } from './components/rating';
 export { KTRepeater } from './components/repeater';
+export { KTClipboard } from './components/clipboard';
+export { KTRangeSlider } from './components/range-slider';
+export { KTPinInput } from './components/pin-input';
+export { KTCarousel } from './components/carousel';
 
 export type {
 	KTAccordionConfigInterface,
@@ -109,6 +117,25 @@ export type {
 	KTRepeaterConfigInterface,
 	KTRepeaterInterface,
 } from './components/repeater';
+export type {
+	KTClipboardConfigInterface,
+	KTClipboardInterface,
+} from './components/clipboard';
+export type {
+	KTRangeSliderConfigInterface,
+	KTRangeSliderEventPayloadInterface,
+	KTRangeSliderInterface,
+} from './components/range-slider';
+export type {
+	KTPinInputConfigInterface,
+	KTPinInputEventPayloadInterface,
+	KTPinInputInterface,
+} from './components/pin-input';
+export type {
+	KTCarouselConfigInterface,
+	KTCarouselChangePayloadInterface,
+	KTCarouselInterface,
+} from './components/carousel';
 export type {
 	KTScrollableConfigInterface,
 	KTScrollableInterface,
@@ -180,6 +207,10 @@ const KTComponents = {
 		KTToast.init();
 		KTRating.init();
 		KTRepeater.init();
+		KTClipboard.init();
+		KTRangeSlider.init();
+		KTPinInput.init();
+		KTCarousel.init();
 	},
 };
 
@@ -212,6 +243,10 @@ declare global {
 		KTToast: typeof KTToast;
 		KTRating: typeof KTRating;
 		KTRepeater: typeof KTRepeater;
+		KTClipboard: typeof KTClipboard;
+		KTRangeSlider: typeof KTRangeSlider;
+		KTPinInput: typeof KTPinInput;
+		KTCarousel: typeof KTCarousel;
 		KTComponents: typeof KTComponents;
 	}
 }

package/src/types.ts

@@ -20,4 +20,4 @@ export declare type KTOffsetType = {
 	bottom: number;
 };
 
-export declare type KTOptionType = string | number | boolean | object;
+export declare type KTOptionType = string | number | boolean | object | null;

package/styles.css

@@ -9,6 +9,7 @@
 @import './src/components/btn/btn.css';
 @import './src/components/label/label.css';
 @import './src/components/card/card.css';
+@import './src/components/carousel/carousel.css';
 @import './src/components/checkbox/checkbox.css';
 @import './src/components/collapse/collapse.css';
 @import './src/components/datatable/datatable.css';