@keenthemes/ktui 1.0.3

package/src/components/toggle/types.ts

@@ -0,0 +1,18 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTToggleConfigInterface {
+	target?: string;
+	activeClass?: string;
+	class?: string;
+	removeClass?: string;
+	attribute?: string;
+}
+
+export interface KTToggleInterface {
+	toggle(): void;
+	update(): void;
+	isActive(): boolean;
+}

package/src/components/toggle-group/toggle-group.css

@@ -0,0 +1,55 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-toggle-group {
+		@apply inline-flex items-center leading-none bg-background;
+	}
+
+	.kt-toggle-group {
+		.kt-btn {
+			@apply grow border border-border border-e-0 text-accent-foreground bg-transparent;
+
+			&:last-child {
+				@apply border-e border-border;
+			}
+
+			&:not(:first-child) {
+				@apply rounded-ss-none rounded-es-none;
+			}
+
+			&:not(:last-child) {
+				@apply rounded-ee-none rounded-se-none;
+			}
+
+			&:not(:first-child):not(:last-child) {
+				@apply rounded-none;
+			}
+
+			svg,
+			i {
+				@apply text-muted-foreground;
+			}
+
+			input[type='checkbox'],
+			input[type='radio'] {
+				display: none;
+			}
+
+			&:hover,
+			&:focus,
+			&:active,
+			&:has(input:checked),
+			&.active {
+				@apply bg-accent text-accent-foreground;
+
+				svg,
+				i {
+					@apply text-accent-foreground;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,10 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export { KTTogglePassword } from './toggle-password';
+export type {
+	KTTogglePasswordConfigInterface,
+	KTTogglePasswordInterface,
+} from './types';

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

@@ -0,0 +1,13 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@custom-variant kt-toggle-password-active {
+	&[data-kt-toggle-password-initialized].active {
+		@slot;
+	}
+	[data-kt-toggle-password-initialized].active & {
+		@slot;
+	}
+}

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

@@ -0,0 +1,159 @@
+/**
+ * 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 KTComponent from '../component';
+import {
+	KTTogglePasswordConfigInterface,
+	KTTogglePasswordInterface,
+} from './types';
+
+declare global {
+	interface Window {
+		KTTogglePassword: typeof KTTogglePassword;
+	}
+}
+
+export class KTTogglePassword
+	extends KTComponent
+	implements KTTogglePasswordInterface
+{
+	protected override _name: string = 'toggle-password';
+	protected override _defaultConfig: KTTogglePasswordConfigInterface = {
+		permanent: false,
+	};
+	protected override _config: KTTogglePasswordConfigInterface =
+		this._defaultConfig;
+	protected _triggerElement: HTMLElement;
+	protected _inputElement: HTMLInputElement;
+
+	constructor(
+		element: HTMLElement,
+		config: KTTogglePasswordConfigInterface | null = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		this._triggerElement = this._element.querySelector(
+			'[data-kt-toggle-password-trigger]',
+		);
+		this._inputElement = this._element.querySelector('input');
+
+		if (!this._triggerElement || !this._inputElement) {
+			return;
+		}
+
+		this._handlers();
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		this._triggerElement.addEventListener('click', () => {
+			this._toggle();
+		});
+
+		this._inputElement.addEventListener('input', () => {
+			this._update();
+		});
+	}
+
+	protected _toggle(): void {
+		if (!this._element) return;
+		const payload = { cancel: false };
+		this._fireEvent('toggle', payload);
+		this._dispatchEvent('toggle', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (this._isVisible()) {
+			this._element.classList.remove('active');
+			this._setVisible(false);
+		} else {
+			this._element.classList.add('active');
+			this._setVisible(true);
+		}
+
+		this._fireEvent('toggled');
+		this._dispatchEvent('toggled');
+	}
+
+	protected _update(): void {
+		if (!this._element) return;
+
+		if ((this._getOption('permanent') as boolean) === false) {
+			if (this._isVisible()) {
+				this._setVisible(false);
+			}
+		}
+	}
+
+	public _isVisible(): boolean {
+		return this._inputElement.getAttribute('type') === 'text';
+	}
+
+	public _setVisible(flag: boolean) {
+		if (flag) {
+			this._inputElement.setAttribute('type', 'text');
+		} else {
+			this._inputElement.setAttribute('type', 'password');
+		}
+	}
+
+	public toggle(): void {
+		this._toggle();
+	}
+
+	public setVisible(flag: boolean): void {
+		this._setVisible(flag);
+	}
+
+	public isVisible(): boolean {
+		return this._isVisible();
+	}
+
+	public static getInstance(element: HTMLElement): KTTogglePassword {
+		if (!element) return null;
+
+		if (KTData.has(element, 'toggle-password')) {
+			return KTData.get(element, 'toggle-password') as KTTogglePassword;
+		}
+
+		if (element.getAttribute('data-kt-toggle-password')) {
+			return new KTTogglePassword(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTTogglePasswordConfigInterface,
+	): KTTogglePassword {
+		return this.getInstance(element) || new KTTogglePassword(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-toggle-password]');
+
+		elements.forEach((element) => {
+			new KTTogglePassword(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTTogglePassword.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTTogglePassword = KTTogglePassword;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTTogglePasswordConfigInterface {
+	permanent?: boolean;
+}
+
+export interface KTTogglePasswordInterface {
+	toggle(): void;
+	isVisible(): boolean;
+}

package/src/components/tooltip/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 { KTTooltip } from './tooltip';
+export type { KTTooltipConfigInterface, KTTooltipInterface } from './types';

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,18 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-tooltip {
+		@apply rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] dark:border dark:border-border bg-mono text-mono-foreground text-xs p-1.5;
+
+		&:not(.show) {
+			@apply hidden;
+		}
+	}
+
+	.kt-tooltip-light {
+		@apply bg-popover text-popover-foreground border border-border;
+	}
+}

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,361 @@
+/**
+ * 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 KTComponent from '../component';
+import { KTTooltipInterface, KTTooltipConfigInterface } from './types';
+import {
+	createPopper,
+	PositioningStrategy,
+	Instance,
+	Placement,
+} from '@popperjs/core';
+import { KTTooltipTriggerType } from './types';
+
+declare global {
+	interface Window {
+		KT_TOOLTIP_INITIALIZED: boolean;
+		KTTooltip: typeof KTTooltip;
+	}
+}
+
+export class KTTooltip extends KTComponent implements KTTooltipInterface {
+	protected override _name: string = 'tooltip';
+	protected override _defaultConfig: KTTooltipConfigInterface = {
+		target: '',
+		hiddenClass: 'hidden',
+		trigger: 'hover',
+		placement: 'top',
+		placementRtl: 'top',
+		container: '',
+		strategy: 'fixed',
+		offset: '0, 5px',
+		offsetRtl: '0, 5px',
+		delayShow: 0,
+		delayHide: 0,
+		permanent: false,
+		zindex: '100',
+	};
+	protected override _config: KTTooltipConfigInterface = this._defaultConfig;
+	protected _isOpen: boolean = false;
+	protected _targetElement: HTMLElement;
+	protected _popper!: Instance;
+	protected _transitioning: boolean = false;
+	protected _timeout!: ReturnType<typeof setTimeout>;
+
+	constructor(
+		element: HTMLElement,
+		config: KTTooltipConfigInterface | null = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		this._targetElement = this._getTargetElement();
+		if (!this._targetElement) {
+			return;
+		}
+
+		this._handlers();
+	}
+
+	private _getTargetElement(): HTMLElement | null {
+		return (
+			KTDom.getElement(
+				this._element.getAttribute('data-kt-tooltip') as string,
+			) ||
+			this._element.querySelector('[data-kt-tooltip-content]') ||
+			KTDom.getElement(this._getOption('target') as string)
+		);
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		if (this._getOption('trigger') === 'click') {
+			this._element.addEventListener('click', () => this._toggle());
+		}
+
+		if (this._getOption('trigger') === 'focus') {
+			this._element.addEventListener('focus', () => this._toggle());
+			this._element.addEventListener('blur', () => this._hide());
+		}
+
+		if (this._getOption('trigger') === 'hover') {
+			this._element.addEventListener('mouseenter', () => this._show());
+			this._element.addEventListener('mouseleave', () => this._hide());
+		}
+	}
+
+	protected _show(): void {
+		if (this._timeout) {
+			clearTimeout(this._timeout);
+		}
+
+		if (this._isOpen) return;
+
+		this._timeout = setTimeout(
+			() => {
+				const payload = { cancel: false };
+				this._fireEvent('show', payload);
+				this._dispatchEvent('show', payload);
+				if (payload.cancel === true) {
+					return;
+				}
+
+				if (!this._targetElement) {
+					return;
+				}
+				if (!this._element) return;
+
+				this._createPopper();
+				this._handleContainer();
+				this._setZindex();
+
+				this._targetElement.classList.add('show');
+				this._targetElement.classList.remove(
+					this._getOption('hiddenClass') as string,
+				);
+				this._targetElement.style.opacity = '0';
+				KTDom.reflow(this._targetElement);
+				this._targetElement.style.opacity = '1';
+				this._transitioning = true;
+				this._isOpen = true;
+
+				KTDom.transitionEnd(this._targetElement, () => {
+					this._targetElement.style.opacity = '';
+					this._transitioning = false;
+					this._fireEvent('shown');
+					this._dispatchEvent('shown');
+				});
+			},
+			this._getOption('delayShow') as number,
+		);
+	}
+
+	protected _hide(): void {
+		if (this._timeout) {
+			clearTimeout(this._timeout);
+		}
+
+		if (!this._isOpen) return;
+
+		this._timeout = setTimeout(
+			() => {
+				const payload = { cancel: false };
+				this._fireEvent('hide', payload);
+				this._dispatchEvent('hide', payload);
+				if (payload.cancel === true) {
+					return;
+				}
+
+				if (!this._targetElement) {
+					return;
+				}
+
+				this._targetElement.style.opacity = '1';
+				KTDom.reflow(this._targetElement);
+				this._targetElement.style.opacity = '0';
+				this._transitioning = true;
+				this._isOpen = false;
+
+				KTDom.transitionEnd(this._targetElement, () => {
+					this._popper.destroy();
+					this._targetElement.classList.remove('show');
+					this._targetElement.classList.add(
+						this._getOption('hiddenClass') as string,
+					);
+					this._targetElement.style.opacity = '';
+					this._transitioning = false;
+					this._fireEvent('hidden');
+					this._dispatchEvent('hidden');
+				});
+			},
+			this._getOption('delayHide') as number,
+		);
+	}
+
+	protected _toggle(): void {
+		const payload = { cancel: false };
+		this._fireEvent('toggle', payload);
+		this._dispatchEvent('toggle', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (this._isOpen) {
+			this._hide();
+		} else {
+			this._show();
+		}
+	}
+
+	protected _createPopper(): void {
+		if (!this._element) return;
+
+		const isRtl = KTDom.isRTL();
+
+		// Placement
+		let placement = this._getOption('placement') as Placement;
+		if (isRtl && this._getOption('placementRtl')) {
+			placement = this._getOption('placementRtl') as Placement;
+		}
+
+		// Offset
+		let offsetValue = this._getOption('offset');
+		if (isRtl && this._getOption('offsetRtl')) {
+			offsetValue = this._getOption('offsetRtl') as Placement;
+		}
+		const offset = offsetValue
+			? offsetValue
+					.toString()
+					.split(',')
+					.map((value) => parseInt(value.trim(), 10))
+			: [0, 0];
+
+		if (!this._targetElement) {
+			return;
+		}
+
+		this._popper = createPopper(this._element, this._targetElement, {
+			placement: placement,
+			strategy: this._getOption('strategy') as PositioningStrategy,
+			modifiers: [
+				{
+					name: 'offset',
+					options: {
+						offset,
+					},
+				},
+			],
+		});
+	}
+
+	protected _handleContainer(): void {
+		if (this._getOption('container')) {
+			if (this._getOption('container') === 'body') {
+				document.body.appendChild(this._targetElement);
+			} else {
+				document
+					.querySelector(this._getOption('container') as string)
+					?.appendChild(this._targetElement);
+			}
+		}
+	}
+
+	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._targetElement.style.zIndex = String(zindex);
+	}
+
+	public show(): void {
+		this._show();
+	}
+
+	public hide(): void {
+		this._hide();
+	}
+
+	public toggle(): void {
+		this._toggle();
+	}
+
+	public getContentElement(): HTMLElement | null {
+		return this._targetElement;
+	}
+
+	public isOpen(): boolean {
+		return this._isOpen;
+	}
+
+	public getTriggerOption(): KTTooltipTriggerType {
+		return this._getOption('trigger') as KTTooltipTriggerType;
+	}
+
+	public isPermanent(): boolean {
+		return this._getOption('permanent') as boolean;
+	}
+
+	public static initHandlers(): void {
+		document.addEventListener('click', (event: Event) => {
+			document
+				.querySelectorAll('[data-kt-tooltip-initialized]')
+				.forEach((tooltipElement) => {
+					const tooltip = KTTooltip.getInstance(tooltipElement as HTMLElement);
+
+					if (
+						tooltip &&
+						tooltip.isOpen() &&
+						tooltip.getTriggerOption() !== 'hover' &&
+						!tooltip.isPermanent()
+					) {
+						const contentElement = tooltip.getContentElement();
+						if (
+							contentElement &&
+							(contentElement === event.target ||
+								contentElement.contains(event.target as HTMLElement))
+						) {
+							return;
+						} else {
+							tooltip.hide();
+						}
+					}
+				});
+		});
+	}
+
+	public static getInstance(element: HTMLElement): KTTooltip {
+		if (!element) return null;
+
+		if (KTData.has(element, 'tooltip')) {
+			return KTData.get(element, 'tooltip') as KTTooltip;
+		}
+
+		if (element.getAttribute('data-kt-tooltip')) {
+			return new KTTooltip(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTTooltipConfigInterface,
+	): KTTooltip {
+		return this.getInstance(element) || new KTTooltip(element, config);
+	}
+
+	public static createInstances(): void {
+		document.querySelectorAll('[data-kt-tooltip]').forEach((element) => {
+			new KTTooltip(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTTooltip.createInstances();
+
+		if (window.KT_TOOLTIP_INITIALIZED !== true) {
+			KTTooltip.initHandlers();
+			window.KT_TOOLTIP_INITIALIZED = true;
+		}
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTTooltip = KTTooltip;
+}

package/src/components/tooltip/types.ts

@@ -0,0 +1,28 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export declare type KTTooltipTriggerType = 'hover' | 'click' | 'focus';
+
+export interface KTTooltipConfigInterface {
+	hiddenClass: string;
+	target: string;
+	trigger: string;
+	container: string;
+	placement: string;
+	placementRtl: string;
+	strategy: string;
+	permanent: boolean;
+	offset: string;
+	offsetRtl: string;
+	delayShow: number;
+	delayHide: number;
+	zindex: string;
+}
+
+export interface KTTooltipInterface {
+	show(): void;
+	hide(): void;
+	toggle(): void;
+}