@keenthemes/ktui 1.0.3

package/src/components/tabs/tabs.css

@@ -0,0 +1,40 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-tabs.kt-tabs-line {
+		@apply flex items-center gap-7 border-b border-border;
+	}
+
+	.kt-tabs.kt-tabs-line .kt-tab-toggle {
+		@apply inline-flex items-center gap-2 py-2 font-medium border-b-2 border-b-transparent text-secondary-foreground hover:text-primary kt-tab-active:text-primary kt-tab-active:border-primary text-sm cursor-pointer;
+
+		svg {
+			@apply shrink-0 size-3.5 text-muted-foreground kt-tab-active:text-primary;
+		}
+
+		&:hover {
+			svg {
+				@apply text-primary;
+			}
+		}
+	}
+}
+
+@custom-variant kt-tab-active {
+	&[data-kt-tab-toggle].active {
+		@slot;
+	}
+
+	[data-kt-tab-toggle].active & {
+		@slot;
+	}
+
+	[data-kt-tabs-initialized]
+		[data-kt-dropdown-initialized]:has([data-kt-tab-toggle].active)
+		& {
+		@slot;
+	}
+}

package/src/components/tabs/tabs.ts

@@ -0,0 +1,190 @@
+/**
+ * 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 KTComponent from '../component';
+import { KTTabsInterface, KTTabsConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_TABS_INITIALIZED: boolean;
+		KTTabs: typeof KTTabs;
+	}
+}
+
+export class KTTabs extends KTComponent implements KTTabsInterface {
+	protected override _name: string = 'tabs';
+	protected override _defaultConfig: KTTabsConfigInterface = {
+		hiddenClass: 'hidden',
+	};
+	protected override _config: KTTabsConfigInterface = this._defaultConfig;
+	protected _currentTabElement: HTMLElement | null = null;
+	protected _currentContentElement: HTMLElement | null = null;
+	protected _lastTabElement: HTMLElement | null = null;
+	protected _lastContentElement: HTMLElement | null = null;
+	protected _tabElements: NodeListOf<HTMLElement> | null = null;
+	protected _isTransitioning: boolean = false;
+
+	constructor(element: HTMLElement, config?: KTTabsConfigInterface) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		if (!this._element) return;
+		this._tabElements = this._element.querySelectorAll('[data-kt-tab-toggle]');
+		this._currentTabElement = this._element.querySelector(
+			'.active[data-kt-tab-toggle]',
+		);
+		this._currentContentElement =
+			(this._currentTabElement &&
+				(KTDom.getElement(
+					this._currentTabElement.getAttribute('data-kt-tab-toggle'),
+				) ||
+					KTDom.getElement(this._currentTabElement.getAttribute('href')))) ||
+			null;
+
+		this._handlers();
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		KTEventHandler.on(
+			this._element,
+			'[data-kt-tab-toggle]',
+			'click',
+			(event: Event, target: HTMLElement) => {
+				event.preventDefault();
+				this._show(target);
+			},
+		);
+	}
+
+	protected _show(tabElement: HTMLElement): void {
+		if (this._isShown(tabElement) || this._isTransitioning) return;
+
+		const payload = { cancel: false };
+		this._fireEvent('show', payload);
+		this._dispatchEvent('show', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		this._currentTabElement?.classList.remove('active');
+		this._currentTabElement?.classList.remove('selected');
+		this._currentContentElement?.classList.add(
+			this._getOption('hiddenClass') as string,
+		);
+		this._lastTabElement = this._currentTabElement;
+		this._getDropdownToggleElement(this._lastTabElement)?.classList.remove(
+			'active',
+		);
+
+		this._lastContentElement = this._currentContentElement;
+		this._currentTabElement = tabElement;
+		this._currentContentElement =
+			KTDom.getElement(tabElement.getAttribute('data-kt-tab-toggle')) ||
+			KTDom.getElement(tabElement.getAttribute('href'));
+		this._currentTabElement?.classList.add('active');
+		this._currentTabElement?.classList.add('selected');
+		this._currentContentElement?.classList.remove(
+			this._getOption('hiddenClass') as string,
+		);
+		this._getDropdownToggleElement(this._currentTabElement)?.classList.add(
+			'active',
+		);
+
+		this._currentContentElement.style.opacity = '0';
+		KTDom.reflow(this._currentContentElement);
+		this._currentContentElement.style.opacity = '1';
+
+		KTDom.transitionEnd(this._currentContentElement, () => {
+			this._isTransitioning = false;
+			this._currentContentElement.style.opacity = '';
+
+			this._fireEvent('shown');
+			this._dispatchEvent('shown');
+		});
+	}
+
+	protected _getDropdownToggleElement(element: HTMLElement): HTMLElement {
+		const containerElement = element.closest(
+			'[data-kt-dropdown-initialized],[data-kt-menu-initialized]',
+		) as HTMLElement;
+
+		if (containerElement) {
+			return containerElement.querySelector(
+				'[data-kt-dropdown-toggle], [data-kt-menu-toggle]',
+			);
+		} else {
+			return null;
+		}
+	}
+
+	protected _isShown(tabElement: HTMLElement): boolean {
+		return tabElement.classList.contains('active');
+	}
+
+	public isShown(tabElement: HTMLElement): boolean {
+		return this._isShown(tabElement);
+	}
+
+	public show(tabElement: HTMLElement): void {
+		return this._show(tabElement);
+	}
+
+	public static keyboardArrow(): void {}
+
+	public static keyboardJump(): void {}
+
+	public static handleAccessibility(): void {}
+
+	public static getInstance(element: HTMLElement): KTTabs {
+		if (!element) return null;
+
+		if (KTData.has(element, 'tabs')) {
+			return KTData.get(element, 'tabs') as KTTabs;
+		}
+
+		if (element.getAttribute('data-kt-tabs')) {
+			return new KTTabs(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTTabsConfigInterface,
+	): KTTabs {
+		return this.getInstance(element) || new KTTabs(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-tabs]');
+
+		elements.forEach((element) => {
+			new KTTabs(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTTabs.createInstances();
+
+		if (window.KT_TABS_INITIALIZED !== true) {
+			KTTabs.handleAccessibility();
+			window.KT_TABS_INITIALIZED = true;
+		}
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTTabs = KTTabs;
+}

package/src/components/tabs/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 KTTabsConfigInterface {
+	hiddenClass: string;
+}
+
+export interface KTTabsInterface {
+	show(tabElement: HTMLElement): void;
+	isShown(tabElement: HTMLElement): boolean;
+}

package/src/components/textarea/textarea.css

@@ -0,0 +1,35 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* Base Styles */
+@layer components {
+	/* Base */
+	.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-50 [&[readonly]]:opacity-70 aria-invalid:border-destructive/60;
+		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
+	}
+
+	/* Size */
+	.kt-textarea {
+		@apply p-3 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md;
+	}
+
+	.kt-textarea-lg {
+		@apply p-4 text-sm rounded-md;
+	}
+
+	.kt-textarea-sm {
+		@apply p-2.5 text-xs rounded-md;
+	}
+}
+
+/* Dark Mode Styles */
+@layer components {
+	.dark .kt-textarea {
+		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
+	}
+}

package/src/components/theme-switch/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 { KTThemeSwitch } from './theme-switch';
+export type {
+	KTThemeSwitchConfigInterface,
+	KTThemeSwitchInterface,
+} from './types';

package/src/components/theme-switch/theme-switch.css

@@ -0,0 +1,22 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@custom-variant kt-theme-switch-light {
+	[data-kt-theme-switch-mode='light'] & {
+		@slot;
+	}
+}
+
+@custom-variant kt-theme-switch-dark {
+	[data-kt-theme-switch-mode='dark'] & {
+		@slot;
+	}
+}
+
+@custom-variant kt-theme-switch-system {
+	[data-kt-theme-switch-mode='system'] & {
+		@slot;
+	}
+}

package/src/components/theme-switch/theme-switch.ts

@@ -0,0 +1,176 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* eslint-disable max-len */
+/* eslint-disable require-jsdoc */
+
+import KTData from '../../helpers/data';
+import KTEventHandler from '../../helpers/event-handler';
+import KTComponent from '../component';
+import { KTThemeSwitchInterface, KTThemeSwitchConfigInterface } from './types';
+import { KTThemeSwitchModeType } from './types';
+
+declare global {
+	interface Window {
+		KT_STICKY_INITIALIZED: boolean;
+		KTThemeSwitch: typeof KTThemeSwitch;
+	}
+}
+
+export class KTThemeSwitch
+	extends KTComponent
+	implements KTThemeSwitchInterface
+{
+	protected override _name: string = 'theme-swtich';
+	protected override _defaultConfig: KTThemeSwitchConfigInterface = {
+		mode: 'light',
+	};
+	protected _mode: KTThemeSwitchModeType | null = null;
+	protected _currentMode: KTThemeSwitchModeType | null = null;
+
+	constructor(
+		element: HTMLElement | HTMLHtmlElement,
+		config: KTThemeSwitchConfigInterface | null = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement | HTMLHtmlElement, this._name))
+			return;
+
+		this._init(element);
+		this._buildConfig(config);
+		this._setMode(
+			(localStorage.getItem('kt-theme') ||
+				this._getOption('mode')) as KTThemeSwitchModeType,
+		);
+		this._handlers();
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		KTEventHandler.on(
+			document.body,
+			'[data-kt-theme-switch-toggle]',
+			'click',
+			() => {
+				this._toggle();
+			},
+		);
+
+		KTEventHandler.on(
+			document.body,
+			'[data-kt-theme-switch-set]',
+			'click',
+			(event: Event, target: HTMLElement) => {
+				event.preventDefault();
+				const mode = target.getAttribute(
+					'data-kt-theme-switch-set',
+				) as KTThemeSwitchModeType;
+				this._setMode(mode);
+			},
+		);
+	}
+
+	protected _toggle() {
+		const mode = this._currentMode === 'light' ? 'dark' : 'light';
+
+		this._setMode(mode);
+	}
+
+	protected _setMode(mode: KTThemeSwitchModeType): void {
+		if (!this._element) return;
+		const payload = { cancel: false };
+		this._fireEvent('change', payload);
+		this._dispatchEvent('change', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		let currentMode: KTThemeSwitchModeType = mode;
+		if (mode === 'system') {
+			currentMode = this._getSystemMode();
+		}
+
+		this._mode = mode;
+		this._currentMode = currentMode;
+		this._bindMode();
+		this._updateState();
+		localStorage.setItem('kt-theme', this._mode);
+		this._element.setAttribute('data-kt-theme-switch-mode', mode);
+
+		this._fireEvent('changed', {});
+		this._dispatchEvent('changed', {});
+	}
+
+	protected _getMode(): KTThemeSwitchModeType {
+		return (
+			(localStorage.getItem('kt-theme') as KTThemeSwitchModeType) || this._mode
+		);
+	}
+
+	protected _getSystemMode(): KTThemeSwitchModeType {
+		return window.matchMedia('(prefers-color-scheme: dark)').matches
+			? 'dark'
+			: 'light';
+	}
+
+	protected _bindMode(): void {
+		if (!this._currentMode || !this._element) {
+			return;
+		}
+
+		this._element.classList.remove('dark');
+		this._element.classList.remove('light');
+		this._element.removeAttribute(this._getOption('attribute') as string);
+		this._element.classList.add(this._currentMode);
+	}
+
+	protected _updateState() {
+		const elements = document.querySelectorAll<HTMLInputElement>(
+			'input[type="checkbox"][data-kt-theme-switch-state]',
+		);
+		elements.forEach((element) => {
+			if (element.getAttribute('data-kt-theme-switch-state') === this._mode) {
+				element.checked = true;
+			}
+		});
+	}
+
+	public getMode(): KTThemeSwitchModeType {
+		return this._getMode();
+	}
+
+	public setMode(mode: KTThemeSwitchModeType) {
+		this.setMode(mode);
+	}
+
+	public static getInstance(): KTThemeSwitch {
+		const root = document.documentElement;
+
+		if (KTData.has(root, 'theme-switch')) {
+			return KTData.get(root, 'theme-switch') as KTThemeSwitch;
+		}
+
+		if (root) {
+			return new KTThemeSwitch(root);
+		}
+
+		return null;
+	}
+
+	public static createInstances(): void {
+		const root = document.documentElement;
+		if (root) new KTThemeSwitch(root);
+	}
+
+	public static init(): void {
+		KTThemeSwitch.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTThemeSwitch = KTThemeSwitch;
+}

package/src/components/theme-switch/types.ts

@@ -0,0 +1,15 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export declare type KTThemeSwitchModeType = 'light' | 'dark' | 'system';
+
+export interface KTThemeSwitchConfigInterface {
+	mode: KTThemeSwitchModeType;
+}
+
+export interface KTThemeSwitchInterface {
+	setMode(mode: KTThemeSwitchModeType): void;
+	getMode(): KTThemeSwitchModeType;
+}

package/src/components/toggle/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 { KTToggle } from './toggle';
+export type { KTToggleConfigInterface, KTToggleInterface } from './types';

package/src/components/toggle/toggle.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-active {
+	&[data-kt-toggle].active {
+		@slot;
+	}
+	[data-kt-toggle].active & {
+		@slot;
+	}
+}

package/src/components/toggle/toggle.ts

@@ -0,0 +1,173 @@
+/**
+ * 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 { KTToggleConfigInterface, KTToggleInterface } from './types';
+
+declare global {
+	interface Window {
+		KTToggle: typeof KTToggle;
+	}
+}
+
+export class KTToggle extends KTComponent implements KTToggleInterface {
+	protected override _name: string = 'toggle';
+	protected override _defaultConfig: KTToggleConfigInterface = {
+		target: '',
+		activeClass: 'active',
+		class: '',
+		removeClass: '',
+		attribute: '',
+	};
+	protected override _config: KTToggleConfigInterface = this._defaultConfig;
+	protected _targetElement: HTMLElement;
+
+	constructor(
+		element: HTMLElement,
+		config: KTToggleConfigInterface | 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();
+	}
+
+	protected _handlers(): void {
+		if (!this._element) return;
+
+		this._element.addEventListener('click', () => {
+			this._toggle();
+		});
+	}
+
+	private _getTargetElement(): HTMLElement | null {
+		return (
+			KTDom.getElement(
+				this._element.getAttribute('data-kt-toggle') as string,
+			) || KTDom.getElement(this._getOption('target') as string)
+		);
+	}
+
+	protected _toggle(): void {
+		if (!this._element) return;
+		const payload = { cancel: false };
+		this._fireEvent('toggle', payload);
+		this._dispatchEvent('toggle', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		this._element.classList.toggle(this._getOption('activeClass') as string);
+		this._update();
+
+		this._fireEvent('toggled');
+		this._dispatchEvent('toggled');
+	}
+
+	protected _update(): void {
+		if (!this._targetElement) return;
+
+		if (this._getOption('removeClass')) {
+			KTDom.removeClass(
+				this._targetElement,
+				this._getOption('removeClass') as string,
+			);
+		}
+
+		if (!this._isActive()) {
+			if (this._getOption('class')) {
+				KTDom.addClass(this._targetElement, this._getOption('class') as string);
+			}
+
+			if (this._getOption('attribute')) {
+				this._targetElement.setAttribute(
+					this._getOption('attribute') as string,
+					'true',
+				);
+			}
+		} else {
+			if (this._getOption('class')) {
+				KTDom.removeClass(
+					this._targetElement,
+					this._getOption('class') as string,
+				);
+			}
+
+			if (this._getOption('attribute')) {
+				this._targetElement.removeAttribute(
+					this._getOption('attribute') as string,
+				);
+			}
+		}
+	}
+
+	public _isActive(): boolean {
+		if (!this._element) return false;
+
+		return (
+			KTDom.hasClass(this._targetElement, this._getOption('class') as string) ||
+			this._targetElement.hasAttribute(this._getOption('attribute') as string)
+		);
+	}
+
+	public toggle(): void {
+		this._toggle();
+	}
+
+	public update(): void {
+		this._update();
+	}
+
+	public isActive(): boolean {
+		return this._isActive();
+	}
+
+	public static getInstance(element: HTMLElement): KTToggle {
+		if (!element) return null;
+
+		if (KTData.has(element, 'toggle')) {
+			return KTData.get(element, 'toggle') as KTToggle;
+		}
+
+		if (element.getAttribute('data-kt-toggle')) {
+			return new KTToggle(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTToggleConfigInterface,
+	): KTToggle {
+		return this.getInstance(element) || new KTToggle(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-toggle]');
+		elements.forEach((element) => {
+			new KTToggle(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTToggle.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTToggle = KTToggle;
+}