@keenthemes/ktui 1.0.3

package/src/components/sticky/sticky.ts

@@ -0,0 +1,381 @@
+/**
+ * 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 KTUtils from '../../helpers/utils';
+import KTComponent from '../component';
+import { KTStickyInterface, KTStickyConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_STICKY_INITIALIZED: boolean;
+		KTSticky: typeof KTSticky;
+	}
+}
+
+export class KTSticky extends KTComponent implements KTStickyInterface {
+	protected override _name: string = 'sticky';
+	protected override _defaultConfig: KTStickyConfigInterface = {
+		target: 'body',
+		name: '',
+		class: '',
+		top: '',
+		start: '',
+		end: '',
+		width: '',
+		zindex: '',
+		offset: 0,
+		reverse: false,
+		release: '',
+		activate: '',
+	};
+	protected override _config: KTStickyConfigInterface = this._defaultConfig;
+	protected _targetElement: HTMLElement | Document | null = null;
+
+	protected _attributeRoot: string;
+	protected _eventTriggerState: boolean;
+	protected _lastScrollTop: number;
+	protected _releaseElement: HTMLElement;
+	protected _activateElement: HTMLElement;
+	protected _wrapperElement: HTMLElement;
+
+	constructor(
+		element: HTMLElement,
+		config: KTStickyConfigInterface | null = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		this._releaseElement = KTDom.getElement(
+			this._getOption('release') as string,
+		);
+		this._activateElement = KTDom.getElement(
+			this._getOption('activate') as string,
+		);
+		this._wrapperElement = this._element.closest('[data-kt-sticky-wrapper]');
+		this._attributeRoot = `data-kt-sticky-${this._getOption('name')}`;
+		this._eventTriggerState = true;
+		this._lastScrollTop = 0;
+
+		const targetElement =
+			this._getTarget() === 'body'
+				? document
+				: KTDom.getElement(this._getTarget());
+		if (!targetElement) return;
+
+		this._targetElement = targetElement;
+
+		this._handlers();
+		this._process();
+		this._update();
+	}
+
+	private _getTarget(): string {
+		return (
+			(this._element.getAttribute('data-kt-sticky-target') as string) ||
+			(this._getOption('target') as string)
+		);
+	}
+
+	protected _handlers(): void {
+		window.addEventListener('resize', () => {
+			let timer;
+
+			KTUtils.throttle(
+				timer,
+				() => {
+					this._update();
+				},
+				200,
+			);
+		});
+
+		this._targetElement.addEventListener('scroll', () => {
+			this._process();
+		});
+	}
+
+	protected _process(): void {
+		const reverse = this._getOption('reverse');
+		const offset = this._getOffset();
+
+		if (offset < 0) {
+			this._disable();
+			return;
+		}
+
+		const st =
+			this._getTarget() === 'body'
+				? KTDom.getScrollTop()
+				: (this._targetElement as HTMLElement).scrollTop;
+		const release =
+			this._releaseElement && KTDom.isPartiallyInViewport(this._releaseElement);
+
+		// Release on reverse scroll mode
+		if (reverse === true) {
+			// Forward scroll mode
+			if (st > offset && !release) {
+				if (document.body.hasAttribute(this._attributeRoot) === false) {
+					if (this._enable() === false) {
+						return;
+					}
+
+					document.body.setAttribute(this._attributeRoot, 'on');
+				}
+
+				if (this._eventTriggerState === true) {
+					const payload = { active: true };
+					this._fireEvent('change', payload);
+					this._dispatchEvent('change', payload);
+					this._eventTriggerState = false;
+				}
+				// Back scroll mode
+			} else {
+				if (document.body.hasAttribute(this._attributeRoot) === true) {
+					this._disable();
+					if (release) {
+						this._element.classList.add('release');
+					}
+					document.body.removeAttribute(this._attributeRoot);
+				}
+
+				if (this._eventTriggerState === false) {
+					const payload = { active: false };
+					this._fireEvent('change', payload);
+					this._dispatchEvent('change', payload);
+					this._eventTriggerState = true;
+				}
+			}
+
+			this._lastScrollTop = st;
+			// Classic scroll mode
+		} else {
+			// Forward scroll mode
+			if (st > offset && !release) {
+				if (document.body.hasAttribute(this._attributeRoot) === false) {
+					if (this._enable() === false) {
+						return;
+					}
+
+					document.body.setAttribute(this._attributeRoot, 'on');
+				}
+
+				if (this._eventTriggerState === true) {
+					const payload = { active: true };
+					this._fireEvent('change', payload);
+					this._dispatchEvent('change', payload);
+					this._eventTriggerState = false;
+				}
+				// Back scroll mode
+			} else {
+				// back scroll mode
+				if (document.body.hasAttribute(this._attributeRoot) === true) {
+					this._disable();
+					if (release) {
+						this._element.classList.add('release');
+					}
+					document.body.removeAttribute(this._attributeRoot);
+				}
+
+				if (this._eventTriggerState === false) {
+					const payload = { active: false };
+					this._fireEvent('change', payload);
+					this._dispatchEvent('change', payload);
+					this._eventTriggerState = true;
+				}
+			}
+		}
+	}
+
+	protected _getOffset(): number {
+		let offset = parseInt(this._getOption('offset') as string);
+		const activateElement = KTDom.getElement(
+			this._getOption('activate') as string,
+		);
+
+		if (activateElement) {
+			offset = Math.abs(offset - activateElement.offsetTop);
+		}
+
+		return offset;
+	}
+
+	protected _enable(): boolean {
+		if (!this._element) return false;
+
+		let width = this._getOption('width') as string;
+		const top = this._getOption('top') as string;
+		const start = this._getOption('start') as string;
+		const end = this._getOption('end') as string;
+		const height = this._calculateHeight();
+		const zindex = this._getOption('zindex') as string;
+		const classList = this._getOption('class') as string;
+
+		if (height + parseInt(top) > KTDom.getViewPort().height) {
+			return false;
+		}
+
+		if (width) {
+			const targetElement = document.querySelector(width) as HTMLElement;
+			if (targetElement) {
+				width = KTDom.getCssProp(targetElement, 'width');
+			} else if (width == 'auto') {
+				width = KTDom.getCssProp(this._element, 'width');
+			}
+
+			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`;
+				}
+			} else {
+				this._element.style.insetInlineStart = `${start}px`;
+			}
+		}
+
+		if (end) {
+			if (end === 'auto') {
+				const offseRight = KTDom.offset(this._element).right;
+				if (offseRight >= 0) {
+					this._element.style.insetInlineEnd = `${offseRight}px`;
+				}
+			} else {
+				this._element.style.insetInlineEnd = `${end}px`;
+			}
+		}
+
+		if (zindex) {
+			this._element.style.zIndex = zindex;
+			this._element.style.position = 'fixed';
+		}
+
+		if (classList) {
+			KTDom.addClass(this._element, classList);
+		}
+
+		if (this._wrapperElement) {
+			this._wrapperElement.style.height = `${height}px`;
+		}
+
+		this._element.classList.add('active');
+		this._element.classList.remove('release');
+
+		return true;
+	}
+
+	protected _disable(): void {
+		if (!this._element) return;
+
+		this._element.style.top = '';
+		this._element.style.width = '';
+		this._element.style.left = '';
+		this._element.style.right = '';
+		this._element.style.zIndex = '';
+		this._element.style.position = '';
+
+		const classList = this._getOption('class') as string;
+
+		if (this._wrapperElement) {
+			this._wrapperElement.style.height = '';
+		}
+
+		if (classList) {
+			KTDom.removeClass(this._element, classList);
+		}
+
+		this._element.classList.remove('active');
+	}
+
+	protected _update(): void {
+		if (this._isActive()) {
+			this._disable();
+			this._enable();
+		} else {
+			this._disable();
+		}
+	}
+
+	protected _calculateHeight(): number {
+		if (!this._element) return 0;
+
+		let height = parseFloat(KTDom.getCssProp(this._element, 'height'));
+		height += parseFloat(KTDom.getCssProp(this._element, 'margin-top'));
+		height += parseFloat(KTDom.getCssProp(this._element, 'margin-bottom'));
+
+		if (KTDom.getCssProp(this._element, 'border-top')) {
+			height =
+				height + parseFloat(KTDom.getCssProp(this._element, 'border-top'));
+		}
+
+		if (KTDom.getCssProp(this._element, 'border-bottom')) {
+			height =
+				height + parseFloat(KTDom.getCssProp(this._element, 'border-bottom'));
+		}
+
+		return height;
+	}
+
+	protected _isActive(): boolean {
+		return this._element.classList.contains('active');
+	}
+
+	public update(): void {
+		this._update();
+	}
+
+	public isActive(): boolean {
+		return this._isActive();
+	}
+
+	public static getInstance(element: HTMLElement): KTSticky {
+		if (!element) return null;
+
+		if (KTData.has(element, 'sticky')) {
+			return KTData.get(element, 'sticky') as KTSticky;
+		}
+
+		if (element.getAttribute('data-kt-sticky')) {
+			return new KTSticky(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTStickyConfigInterface,
+	): KTSticky {
+		return this.getInstance(element) || new KTSticky(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-sticky]');
+
+		elements.forEach((element) => {
+			new KTSticky(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTSticky.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTSticky = KTSticky;
+}

package/src/components/sticky/types.ts

@@ -0,0 +1,23 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTStickyConfigInterface {
+	target: string;
+	name: string;
+	class: string;
+	zindex: string;
+	top: string;
+	start: string;
+	end: string;
+	width: string | number | object;
+	offset: number;
+	reverse: boolean;
+	release: string;
+	activate: string;
+}
+
+export interface KTStickyInterface {
+	update(): void;
+}

package/src/components/switch/switch.css

@@ -0,0 +1,110 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* Base Styles */
+@layer components {
+	.kt-switch {
+		@apply cursor-pointer inline-flex appearance-none bg-input relative shrink-0;
+		@apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		@apply aria-invalid:border aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
+
+		&:before {
+			@apply block shadow-xs pointer-events-none ring-0 absolute rounded-full bg-white top-1/2 start-0 -translate-y-1/2 transition-transform content-[""] translate-x-1;
+		}
+
+		&:checked,
+		&[aria-checked='true'] {
+			@apply bg-primary;
+		}
+	}
+
+	/* Sizes */
+	.kt-switch {
+		@apply h-5 w-7.5 rounded-full;
+
+		&:before {
+			@apply size-3;
+		}
+
+		&:checked,
+		&[aria-checked='true'] {
+			&:before {
+				@apply translate-x-3.5;
+			}
+		}
+	}
+
+	.kt-switch-sm {
+		@apply h-4.5 w-6.5 rounded-full;
+
+		&:before {
+			@apply size-2.5;
+		}
+
+		&:checked,
+		&[aria-checked='true'] {
+			&:before {
+				@apply translate-x-3;
+			}
+		}
+	}
+
+	.kt-switch-lg {
+		@apply h-5.5 w-8.5 rounded-full;
+
+		&:before {
+			@apply size-3.5;
+		}
+
+		&:checked,
+		&[aria-checked='true'] {
+			&:before {
+				@apply translate-x-4;
+			}
+		}
+	}
+}
+
+/* RTL Styles */
+@layer components {
+	[dir='rtl'] .kt-switch {
+		&:before {
+			@apply -translate-x-1;
+		}
+
+		&:checked,
+		&[aria-checked='true'] {
+			&:before {
+				@apply -translate-x-3.5;
+			}
+		}
+
+		&.kt-switch-sm {
+			&:checked,
+			&[aria-checked='true'] {
+				&:before {
+					@apply -translate-x-3;
+				}
+			}
+		}
+
+		&.kt-switch-lg {
+			&:checked,
+			&[aria-checked='true'] {
+				&:before {
+					@apply -translate-x-4;
+				}
+			}
+		}
+	}
+}
+
+/* Dark Mode Styles */
+@layer components {
+	.dark .kt-switch {
+		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
+	}
+}

package/src/components/table/table.css

@@ -0,0 +1,168 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-table-wrapper {
+		@apply relative w-full overflow-auto;
+	}
+
+	.kt-table {
+		@apply w-full text-foreground text-sm border-collapse text-left align-bottom;
+		caption-side: bottom;
+
+		tr {
+			@apply border-b border-border transition-colors;
+		}
+
+		caption {
+			@apply mt-4 text-sm text-muted-foreground;
+		}
+
+		thead {
+			@apply [&_tr]:border-b;
+
+			th {
+				@apply h-10 px-4 text-left rtl:text-right align-middle font-normal bg-muted/40 text-secondary-foreground [&:has([role=checkbox])]:pe-0;
+			}
+		}
+
+		tbody {
+			@apply [&_tr:last-child]:border-0;
+
+			td {
+				@apply px-4 py-3 align-middle [&:has([role=checkbox])]:pe-0;
+			}
+		}
+
+		tfoot {
+			@apply border-t bg-muted/50 font-medium last:[&>tr]:border-b-0;
+
+			th {
+				@apply h-10 px-4 text-left rtl:text-right align-middle font-normal text-secondary-foreground [&:has([role=checkbox])]:pe-0;
+			}
+		}
+
+		td,
+		th {
+			input[type='checkbox'] {
+				vertical-align: inherit;
+			}
+		}
+	}
+
+	[data-kt-datatable-table],
+	.kt-table-highlight {
+		tr {
+			@apply [&:has(td):hover]:bg-muted/50 [&.checked]:bg-muted;
+		}
+	}
+
+	.kt-table-col {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		cursor: pointer;
+	}
+
+	.kt-table-col-label {
+		display: inline-flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+		gap: 0.35rem;
+	}
+
+	.kt-table-col-sort {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 0.975rem;
+		width: 0.975rem;
+		gap: 0.125rem;
+		line-height: 1;
+
+		&:before {
+			display: inline-block;
+			content: '';
+			height: 0.25rem;
+			width: 0.438rem;
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: cover;
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3E%3C/svg%3E");
+		}
+
+		&:after {
+			display: inline-block;
+			content: '';
+			height: 0.25rem;
+			width: 0.438rem;
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: cover;
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3E%3C/svg%3E");
+		}
+
+		[aria-sort='asc'] & {
+			&:before {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3E%3C/svg%3E");
+			}
+
+			&:after {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
+			}
+		}
+
+		[aria-sort='desc'] & {
+			&:before {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
+			}
+
+			&:after {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3E%3C/svg%3E");
+			}
+		}
+	}
+}
+
+/* Table border styles */
+@layer components {
+	.kt-table-border {
+		@apply border border-border;
+
+		& td,
+		& th {
+			@apply border-e border-border;
+
+			&:last-child {
+				@apply border-e-0;
+			}
+		}
+	}
+
+	.kt-table-border-s {
+		@apply border-s border-border;
+	}
+
+	.kt-table-border-e {
+		@apply border-e border-border;
+	}
+
+	.kt-table-border-t {
+		@apply border-t border-border;
+	}
+
+	.kt-table-border-b {
+		@apply border-b border-border;
+	}
+}
+
+/* RTL Styles */
+@layer components {
+	[dir='rtl'] .kt-table {
+		@apply text-right;
+	}
+}

package/src/components/tabs/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 { KTTabs } from './tabs';
+export type { KTTabsConfigInterface, KTTabsInterface } from './types';