@keenthemes/ktui 1.0.3

package/src/components/modal/modal.css

@@ -0,0 +1,73 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-modal {
+		@apply fixed inset-0 overflow-auto p-4;
+
+		&:not(.open) {
+			@apply hidden;
+		}
+	}
+
+	.kt-modal-backdrop {
+		@apply transition-all duration-300 fixed inset-0 bg-black/30 [backdrop-filter:blur(4px)];
+	}
+
+	/* Alert Close */
+	.kt-modal-close {
+		@apply shrink-0 size-6 cursor-pointer -me-2.5;
+
+		> svg {
+			@apply size-3.5 opacity-70;
+		}
+
+		&:focus,
+		&:hover {
+			> svg {
+				@apply opacity-100;
+			}
+		}
+	}
+
+	.kt-modal-dialog {
+		@apply hidden fixed overflow-auto top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 p-4;
+	}
+
+	.kt-modal-content {
+		@apply relative flex flex-col mx-auto rounded-lg shadow-md bg-popover text-popover-foreground;
+	}
+
+	.kt-modal-header {
+		@apply flex items-center justify-between gap-2 px-5 py-4 border-b border-border;
+	}
+
+	.kt-modal-title {
+		@apply text-base font-semibold text-mono;
+	}
+
+	.kt-modal-body {
+		@apply overflow-y-auto px-5 py-4;
+	}
+
+	.kt-modal-footer {
+		@apply flex items-center justify-between gap-2 px-5 py-4 border-t border-border;
+	}
+
+	.kt-modal-center {
+		.kt-modal-content {
+			@apply top-1/2 -translate-y-1/2;
+		}
+	}
+}
+
+@custom-variant kt-modal-open {
+	&[data-kt-modal-initialized].open {
+		@slot;
+	}
+	[data-kt-modal-initialized].open & {
+		@slot;
+	}
+}

package/src/components/modal/modal.ts

@@ -0,0 +1,382 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+import KTData from '../../helpers/data';
+import KTDom from '../../helpers/dom';
+import KTEventHandler from '../../helpers/event-handler';
+import KTUtils from '../../helpers/utils';
+import KTComponent from '../component';
+import { KTModalInterface, KTModalConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_MODAL_INITIALIZED: boolean;
+		KTModal: typeof KTModal;
+	}
+}
+
+export class KTModal extends KTComponent implements KTModalInterface {
+	protected override _name: string = 'modal';
+	protected override _defaultConfig: KTModalConfigInterface = {
+		zindex: '90',
+		backdrop: true,
+		backdropClass: 'kt-modal-backdrop',
+		backdropStatic: false,
+		keyboard: true,
+		disableScroll: true,
+		persistent: false,
+		focus: true,
+		hiddenClass: 'hidden',
+	};
+	protected override _config: KTModalConfigInterface = this._defaultConfig;
+	protected _isOpen: boolean = false;
+	protected _isTransitioning: boolean = false;
+	protected _backdropElement: HTMLElement | null = null;
+	protected _targetElement: HTMLElement | null = null;
+
+	constructor(element: HTMLElement, config?: KTModalConfigInterface) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+		this._handlers();
+	}
+
+	protected _handlers() {
+		this._element.addEventListener('click', (event: Event) => {
+			if (this._element !== event.target) return;
+
+			if (this._getOption('backdropStatic') === false) {
+				this._hide();
+			}
+		});
+	}
+
+	protected _toggle(targetElement?: HTMLElement): void {
+		const payload = { cancel: false };
+		this._fireEvent('toggle', payload);
+		this._dispatchEvent('toggle', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (this._isOpen === true) {
+			this._hide();
+		} else {
+			this._show(targetElement);
+		}
+	}
+
+	protected _show(targetElement?: HTMLElement): void {
+		if (this._isOpen || this._isTransitioning) {
+			return;
+		}
+
+		//const beforeScroll = this.fireEvent('beforeScroll', this.el);
+		//this.dispatch('beforeScroll.hs.scrollspy', this.el, this.el);
+		//if (beforeScroll instanceof Promise) beforeScroll.then(() => scrollFn());
+		//else scrollFn();
+
+		if (targetElement) this._targetElement = targetElement;
+
+		const payload = { cancel: false };
+		this._fireEvent('show', payload);
+		this._dispatchEvent('show', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		KTModal.hide();
+
+		if (!this._element) return;
+		this._isTransitioning = true;
+		this._element.setAttribute('role', 'dialog');
+		this._element.setAttribute('aria-modal', 'true');
+		this._element.setAttribute('tabindex', '-1');
+
+		this._setZindex();
+		if (this._getOption('backdrop') === true) this._createBackdrop();
+
+		if (this._getOption('disableScroll')) {
+			document.body.style.overflow = 'hidden';
+		}
+
+		this._element.style.display = 'block';
+		KTDom.reflow(this._element);
+		this._element.classList.add('open');
+		this._element.classList.remove(this._getOption('hiddenClass') as string);
+
+		KTDom.transitionEnd(this._element, () => {
+			this._isTransitioning = false;
+			this._isOpen = true;
+
+			if (this._getOption('focus') === true) {
+				this._autoFocus();
+			}
+
+			this._fireEvent('shown');
+			this._dispatchEvent('shown');
+		});
+	}
+
+	protected _hide(): void {
+		if (!this._element) return;
+		if (this._isOpen === false || this._isTransitioning) {
+			return;
+		}
+
+		const payload = { cancel: false };
+		this._fireEvent('hide', payload);
+		this._dispatchEvent('hide', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		this._isTransitioning = true;
+		this._element.removeAttribute('role');
+		this._element.removeAttribute('aria-modal');
+		this._element.removeAttribute('tabindex');
+		if (this._getOption('disableScroll')) {
+			document.body.style.overflow = '';
+		}
+
+		KTDom.reflow(this._element);
+		this._element.classList.remove('open');
+
+		if (this._getOption('backdrop') === true) {
+			this._deleteBackdrop();
+		}
+
+		KTDom.transitionEnd(this._element, () => {
+			if (!this._element) return;
+
+			this._isTransitioning = false;
+			this._isOpen = false;
+			this._element.style.display = '';
+			this._element.classList.add(this._getOption('hiddenClass') as string);
+
+			this._fireEvent('hidden');
+			this._dispatchEvent('hidden');
+		});
+	}
+
+	protected _setZindex(): void {
+		let zindex: number = parseInt(this._getOption('zindex') as string);
+
+		if (parseInt(KTDom.getCssProp(this._element, 'z-index')) > zindex) {
+			zindex = parseInt(KTDom.getCssProp(this._element, 'z-index'));
+		}
+
+		if (KTDom.getHighestZindex(this._element) > zindex) {
+			zindex = KTDom.getHighestZindex(this._element) + 1;
+		}
+
+		this._element.style.zIndex = String(zindex);
+	}
+
+	protected _autoFocus(): void {
+		if (!this._element) return;
+		const input: HTMLInputElement | null = this._element.querySelector(
+			'[data-kt-modal-input-focus]',
+		);
+		if (!input) return;
+		else input.focus();
+	}
+
+	protected _createBackdrop(): void {
+		if (!this._element) return;
+		const zindex: number = parseInt(KTDom.getCssProp(this._element, 'z-index'));
+		this._backdropElement = document.createElement('DIV');
+		this._backdropElement.setAttribute('data-kt-modal-backdrop', 'true');
+		this._backdropElement.style.zIndex = (zindex - 1).toString();
+		document.body.append(this._backdropElement);
+		KTDom.reflow(this._backdropElement);
+		KTDom.addClass(
+			this._backdropElement,
+			this._getOption('backdropClass') as string,
+		);
+	}
+
+	protected _deleteBackdrop(): void {
+		if (!this._backdropElement) return;
+
+		KTDom.reflow(this._backdropElement);
+		this._backdropElement.style.opacity = '0';
+
+		KTDom.transitionEnd(this._backdropElement, () => {
+			if (!this._backdropElement) return;
+			KTDom.remove(this._backdropElement);
+		});
+	}
+
+	public toggle(targetElement?: HTMLElement): void {
+		return this._toggle(targetElement);
+	}
+
+	public show(targetElement?: HTMLElement): void {
+		return this._show(targetElement);
+	}
+
+	public hide(): void {
+		return this._hide();
+	}
+
+	public getTargetElement(): HTMLElement | null {
+		return this._targetElement;
+	}
+
+	public isOpen(): boolean {
+		return this._isOpen;
+	}
+
+	public static getInstance(element: HTMLElement): KTModal {
+		if (!element) return null;
+
+		if (KTData.has(element, 'modal')) {
+			return KTData.get(element, 'modal') as KTModal;
+		}
+
+		if (element.getAttribute('data-kt-modal')) {
+			return new KTModal(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTModalConfigInterface,
+	): KTModal {
+		return this.getInstance(element) || new KTModal(element, config);
+	}
+
+	public static hide(): void {
+		const elements = document.querySelectorAll('[data-kt-modal-initialized]');
+
+		elements.forEach((element) => {
+			const modal = KTModal.getInstance(element as HTMLElement);
+
+			if (modal && modal.isOpen()) {
+				modal.hide();
+			}
+		});
+	}
+
+	public static handleToggle(): void {
+		KTEventHandler.on(
+			document.body,
+			'[data-kt-modal-toggle]',
+			'click',
+			(event: Event, target: HTMLElement) => {
+				event.stopPropagation();
+
+				const selector = target.getAttribute('data-kt-modal-toggle');
+				if (!selector) return;
+
+				const modalElement = document.querySelector(selector);
+				const modal = KTModal.getInstance(modalElement as HTMLElement);
+				if (modal) {
+					modal.toggle(target);
+				}
+			},
+		);
+	}
+
+	public static handleDismiss(): void {
+		KTEventHandler.on(
+			document.body,
+			'[data-kt-modal-dismiss]',
+			'click',
+			(event: Event, target: HTMLElement) => {
+				event.stopPropagation();
+
+				const modalElement = target.closest(
+					'[data-kt-modal-initialized]',
+				) as HTMLElement;
+				if (modalElement) {
+					const modal = KTModal.getInstance(modalElement);
+					if (modal) {
+						modal.hide();
+					}
+				}
+			},
+		);
+	}
+
+	public static handleClickAway() {
+		document.addEventListener('click', (event: Event) => {
+			const modalElement = document.querySelector(
+				'.open[data-kt-modal-initialized]',
+			);
+			if (!modalElement) return;
+
+			const modal = KTModal.getInstance(modalElement as HTMLElement);
+			if (!modal) return;
+
+			if (KTUtils.stringToBoolean(modal.getOption('persistent')) === true)
+				return;
+
+			if (KTUtils.stringToBoolean(modal.getOption('backdrop')) === true) return;
+
+			if (
+				modalElement !== event.target &&
+				modal.getTargetElement() !== event.target &&
+				modalElement.contains(event.target as HTMLElement) === false
+			) {
+				modal.hide();
+			}
+		});
+	}
+
+	public static handleKeyword() {
+		document.addEventListener('keydown', (event: KeyboardEvent) => {
+			const modalElement = document.querySelector(
+				'.open[data-kt-modal-initialized]',
+			);
+			const modal = KTModal.getInstance(modalElement as HTMLElement);
+			if (!modal) {
+				return;
+			}
+
+			// if esc key was not pressed in combination with ctrl or alt or shift
+			if (
+				event.key === 'Escape' &&
+				!(event.ctrlKey || event.altKey || event.shiftKey)
+			) {
+				modal.hide();
+			}
+
+			if (event.code === 'Tab' && !event.metaKey) {
+				return;
+			}
+		});
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-modal]');
+
+		elements.forEach((element) => {
+			new KTModal(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTModal.createInstances();
+
+		if (window.KT_MODAL_INITIALIZED !== true) {
+			KTModal.handleToggle();
+			KTModal.handleDismiss();
+			KTModal.handleClickAway();
+			KTModal.handleKeyword();
+			window.KT_MODAL_INITIALIZED = true;
+		}
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTModal = KTModal;
+}

package/src/components/modal/types.ts

@@ -0,0 +1,21 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTModalConfigInterface {
+	zindex?: string;
+	backdrop: boolean;
+	backdropClass: string;
+	backdropStatic: boolean;
+	keyboard: boolean;
+	disableScroll: boolean;
+	persistent: boolean;
+	focus: boolean;
+	hiddenClass: string;
+}
+export interface KTModalInterface {
+	show(): void;
+	hide(): void;
+	toggle(): void;
+}

package/src/components/pagination/pagination.css

@@ -0,0 +1,26 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-pagination {
+		@apply flex items-center gap-1;
+	}
+
+	.kt-pagination-item {
+		@apply flex flex-row items-center gap-1 shrink-0;
+
+		svg {
+			@apply text-muted-foreground size-4;
+		}
+	}
+
+	.kt-pagination-ellipsis {
+		@apply flex h-9 w-9 items-center justify-center;
+
+		svg {
+			@apply text-muted-foreground size-4;
+		}
+	}
+}

package/src/components/popover/popover.css

@@ -0,0 +1,22 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-popover {
+		@apply rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] bg-popover text-popover-foreground border border-border text-sm;
+
+		&:not(.show) {
+			@apply hidden;
+		}
+	}
+
+	.kt-popover-header {
+		@apply text-mono font-semibold px-2.5 py-2 border-b border-border;
+	}
+
+	.kt-popover-content {
+		@apply px-2.5 py-2;
+	}
+}

package/src/components/progress/progress.css

@@ -0,0 +1,51 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-progress {
+		@apply relative h-1 w-full overflow-hidden rounded-full bg-secondary;
+	}
+
+	.kt-progress-indicator {
+		@apply h-full w-full flex-1 bg-primary rounded-full transition-all transform-[translateX:(calc(100-var(--progress-value)))];
+	}
+
+	/* Variants */
+	.kt-progress-primary {
+		.kt-progress-indicator {
+			@apply bg-primary;
+		}
+	}
+
+	.kt-progress-success {
+		.kt-progress-indicator {
+			@apply bg-green-500;
+		}
+	}
+
+	.kt-progress-warning {
+		.kt-progress-indicator {
+			@apply bg-yellow-500;
+		}
+	}
+
+	.kt-progress-info {
+		.kt-progress-indicator {
+			@apply bg-violet-500;
+		}
+	}
+
+	.kt-progress-destructive {
+		.kt-progress-indicator {
+			@apply bg-destructive;
+		}
+	}
+
+	.kt-progress-mono {
+		.kt-progress-indicator {
+			@apply bg-mono;
+		}
+	}
+}

package/src/components/radio/radio.css

@@ -0,0 +1,51 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* Base Styles */
+@layer components {
+	/* Base */
+	.kt-radio {
+		@apply cursor-pointer appearance-none bg-no-repeat bg-center;
+		@apply rounded-full bg-background shrink-0 border border-input ring-offset-background focus-visible:outline-none;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20;
+	}
+
+	.kt-radio {
+		@apply [&:checked]:bg-primary [&:checked]:border-primary [&:checked]:text-primary-foreground [&:indeterminate]:bg-primary [&:indeterminate]:border-primary [&:indeterminate]:text-primary-foreground;
+	}
+
+	.kt-radio {
+		&:checked,
+		&[aria-checked='true'] {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='10.9995' cy='11' r='5.86667' fill='white'/%3E%3C/svg%3E");
+		}
+	}
+
+	/* Size */
+	.kt-radio {
+		@apply size-5;
+	}
+
+	.kt-radio-sm {
+		@apply size-4.5;
+	}
+
+	.kt-radio-lg {
+		@apply size-5.5;
+	}
+
+	/* Mono */
+	.kt-radio-mono {
+		@apply [&:checked]:bg-mono [&:checked]:border-mono [&:checked]:text-mono-foreground [&:indeterminate]:bg-mono [&:indeterminate]:border-mono [&:indeterminate]:text-mono-foreground;
+	}
+}
+
+/* Dark Mode Styles */
+@layer components {
+	.dark .kt-radio {
+		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
+	}
+}

package/src/components/reparent/index.ts

@@ -0,0 +1,7 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export { KTReparent } from './reparent';
+export type { KTReparentConfigInterface, KTReparentInterface } from './types';