@keenthemes/ktui 1.0.3

package/src/components/btn/btn.css

@@ -0,0 +1,227 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base btn Styles */
+	.kt-btn {
+		@apply cursor-pointer whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50;
+		@apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+		@apply shrink-0 shadow-xs shadow-[rgba(0,0,0,0.05)];
+
+		svg {
+			@apply shrink-0;
+		}
+	}
+
+	/* Variants */
+	.kt-btn {
+		@apply bg-primary text-primary-foreground hover:bg-primary/90 [&.active]:bg-primary/90;
+	}
+
+	.kt-btn-mono {
+		@apply bg-mono text-mono-foreground hover:bg-mono/90 [&.active]:bg-mono/90;
+	}
+
+	.kt-btn-destructive {
+		@apply bg-destructive text-destructive-foreground hover:bg-destructive/90 [&.active]:bg-destructive/90;
+	}
+
+	.kt-btn-secondary {
+		@apply bg-secondary text-secondary-foreground hover:text-foreground hover:bg-secondary [&.active]:bg-secondary [&.active]:text-foreground;
+
+		i {
+			@apply text-muted-foreground;
+		}
+
+		svg {
+			@apply text-muted-foreground;
+		}
+
+		&:hover,
+		&.active {
+			i {
+				@apply text-muted-foreground;
+			}
+
+			svg {
+				@apply text-muted-foreground;
+			}
+		}
+	}
+
+	.kt-btn-outline {
+		@apply bg-background text-secondary-foreground border border-input hover:bg-accent [&.active]:bg-accent hover:text-accent-foreground [&.active]:text-accent-foreground;
+
+		i {
+			@apply text-muted-foreground;
+		}
+
+		svg {
+			@apply text-muted-foreground;
+		}
+
+		&:hover,
+		&.active {
+			i {
+				@apply text-secondary-foreground;
+			}
+
+			svg {
+				@apply text-secondary-foreground;
+			}
+		}
+
+		&.kt-btn-primary {
+			@apply border-primary/10 bg-primary/10 text-primary hover:text-primary-foreground hover:bg-primary [&.active]:text-primary-foreground [&.active]:bg-primary [&.active]:border-primary;
+
+			i {
+				@apply text-primary;
+			}
+
+			svg {
+				@apply text-primary;
+			}
+
+			&:hover,
+			&.active {
+				i {
+					@apply text-primary-foreground;
+				}
+
+				svg {
+					@apply text-primary-foreground;
+				}
+			}
+		}
+
+		&.kt-btn-destructive {
+			@apply border-destructive/10 bg-destructive/10 text-destructive hover:text-destructive-foreground hover:bg-destructive [&.active]:text-destructive-foreground [&.active]:bg-destructive [&.active]:border-destructive;
+
+			i {
+				@apply text-destructive;
+			}
+
+			svg {
+				@apply text-destructive;
+			}
+
+			&:hover,
+			&.active {
+				i {
+					@apply text-destructive-foreground;
+				}
+
+				svg {
+					@apply text-destructive-foreground;
+				}
+			}
+		}
+	}
+
+	.kt-btn-ghost {
+		@apply bg-transparent shadow-none text-accent-foreground hover:bg-accent hover:text-accent-foreground [&.active]:bg-accent [&.active]:text-accent-foreground;
+
+		&:not(.kt-btn-primary):not(.kt-btn-destructive) {
+			i {
+				@apply text-muted-foreground;
+			}
+
+			svg {
+				@apply text-muted-foreground;
+			}
+
+			&:hover,
+			&.active {
+				i {
+					@apply text-secondary-foreground;
+				}
+
+				svg {
+					@apply text-secondary-foreground;
+				}
+			}
+		}
+
+		&.kt-btn-primary {
+			@apply text-primary hover:text-primary-foreground hover:bg-primary [&.active]:text-primary-foreground [&.active]:bg-primary;
+		}
+
+		&.kt-btn-destructive {
+			@apply text-destructive hover:text-destructive-foreground hover:bg-destructive [&.active]:text-destructive-foreground [&.active]:bg-destructive;
+		}
+	}
+
+	.kt-btn-dim {
+		@apply bg-transparent shadow-none text-muted-foreground hover:text-foreground hover:bg-transparent [&.active]:text-foreground [&.active]:bg-transparent;
+
+		i {
+			@apply text-muted-foreground;
+		}
+
+		svg {
+			@apply text-muted-foreground;
+		}
+
+		&:hover,
+		&.active {
+			i {
+				@apply text-secondary-foreground;
+			}
+
+			svg {
+				@apply text-secondary-foreground;
+			}
+		}
+	}
+
+	/* Size */
+	.kt-btn {
+		@apply h-8.5 rounded-md px-3 gap-1 text-[0.8125rem] leading-(--text-sm--line-height);
+
+		svg {
+			@apply size-4;
+		}
+
+		i {
+			@apply text-base;
+		}
+
+		&.kt-btn-icon {
+			@apply size-8.5 p-0;
+		}
+	}
+
+	.kt-btn-lg {
+		@apply h-10 rounded-md px-4 gap-1.5 text-sm;
+
+		svg {
+			@apply size-4;
+		}
+
+		i {
+			@apply text-base;
+		}
+
+		&.kt-btn-icon {
+			@apply size-10 p-0;
+		}
+	}
+
+	.kt-btn-sm {
+		@apply h-7 rounded-md px-2.5 gap-1 text-xs;
+
+		svg {
+			@apply size-3.5;
+		}
+
+		i {
+			@apply text-sm;
+		}
+
+		&.kt-btn-icon {
+			@apply size-7 p-0;
+		}
+	}
+}

package/src/components/card/card.css

@@ -0,0 +1,158 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base Card Styles */
+	.kt-card {
+		@apply flex flex-col items-stretch text-card-foreground rounded-xl;
+	}
+
+	/* Card Variants */
+	.kt-card {
+		@apply bg-card border border-border shadow-xs shadow-[rgba(0,0,0,0.05)];
+	}
+
+	/* Card Header */
+	.kt-card-header {
+		@apply flex items-center justify-between flex-wrap px-5 min-h-14 gap-2.5 border-b border-border;
+	}
+
+	/* Card Footer */
+	.kt-card-footer {
+		@apply flex items-center px-5 py-4 border-t border-border;
+	}
+
+	/* Card Content */
+	.kt-card-content {
+		@apply grow py-5 px-5;
+	}
+
+	/* Card Table */
+	.kt-card-table {
+		@apply grid grow;
+
+		.kt-table-border {
+			@apply border-0;
+		}
+
+		.kt-table {
+			th,
+			td {
+				&:first-child {
+					@apply ps-5;
+				}
+
+				&:last-child {
+					@apply pe-5;
+				}
+			}
+		}
+	}
+
+	/* Card Grid */
+	.kt-card-grid {
+		& .kt-card-header,
+		& .kt-card-footer {
+			@apply px-5;
+		}
+
+		.kt-card-content {
+			padding: 0;
+
+			.kt-table {
+				border: 0;
+
+				th:first-child,
+				td:first-child {
+					@apply ps-5;
+
+					&.kt-table-cell-center {
+						@apply pe-5;
+					}
+				}
+
+				th:last-child,
+				td:last-child {
+					@apply pe-5;
+
+					&.table-cell-center {
+						@apply ps-5;
+					}
+				}
+			}
+		}
+	}
+
+	/* Additional Card Components */
+	.kt-card-heading {
+		@apply space-y-1;
+	}
+
+	.kt-card-toolbar {
+		@apply flex items-center gap-2.5;
+	}
+
+	.kt-card-title {
+		@apply text-base font-semibold leading-none tracking-tight;
+	}
+
+	.kt-card-description {
+		@apply text-sm text-muted-foreground;
+	}
+
+	.kt-card-group {
+		@apply grow py-5 px-5 border-b border-border;
+
+		&:last-child {
+			@apply border-b-0;
+		}
+
+		& + .kt-card-footer {
+			@apply border-t-0;
+		}
+	}
+
+	/* Accent */
+	.kt-card-accent {
+		@apply bg-muted shadow-xs shadow-[rgba(0,0,0,0.05)] p-1;
+
+		.kt-card-header {
+			@apply border-b-0;
+		}
+
+		.kt-card-content {
+			@apply bg-card rounded-t-xl;
+
+			&:last-child {
+				@apply rounded-b-xl;
+			}
+		}
+
+		.kt-card-table {
+			@apply bg-card rounded-xl;
+
+			&:last-child {
+				@apply rounded-b-xl;
+			}
+		}
+
+		.kt-card-footer {
+			@apply bg-card rounded-b-xl border-t-0 mt-[2px];
+		}
+	}
+
+	/* Utilities */
+	.kt-card-border {
+		@apply border border-border;
+	}
+
+	.kt-card-rounded-t {
+		@apply rounded-t-xl;
+	}
+
+	.kt-card-rounded-b {
+		@apply rounded-b-xl;
+	}
+}

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,74 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* Base Styles */
+@layer components {
+	.kt-checkbox {
+		@apply cursor-pointer appearance-none bg-no-repeat bg-center;
+		@apply bg-background shrink-0 rounded-sm 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;
+	}
+
+	.kt-checkbox {
+		@apply [&:checked]:bg-primary [&:checked]:border-primary [&:checked]:text-primary-foreground [&:indeterminate]:bg-primary [&:indeterminate]:border-primary [&:indeterminate]:text-primary-foreground;
+	}
+
+	.kt-checkbox-mono {
+		@apply [&:checked]:bg-mono [&:checked]:border-mono [&:checked]:text-mono-foreground [&:indeterminate]:bg-mono [&:indeterminate]:border-mono [&:indeterminate]:text-mono-foreground;
+	}
+
+	/* Sizes */
+	.kt-checkbox {
+		@apply size-4.5;
+
+		&:checked,
+		&[aria-checked='true'] {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z' fill='white'/%3E%3C/svg%3E");
+		}
+
+		&:indeterminate {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
+		}
+	}
+
+	/* Sizes */
+	.kt-checkbox {
+		@apply size-5;
+	}
+
+	.kt-checkbox-sm {
+		@apply size-4.5;
+
+		&:checked,
+		&[aria-checked='true'] {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M8.4932 0.233321L4.03986 4.68665L1.4532 2.09999C1.32829 1.97582 1.15932 1.90613 0.983198 1.90613C0.807074 1.90613 0.638106 1.97582 0.513198 2.09999C0.38903 2.2249 0.319336 2.39386 0.319336 2.56999C0.319336 2.74611 0.38903 2.91508 0.513198 3.03999L3.5732 6.09999C3.69811 6.22415 3.86707 6.29385 4.0432 6.29385C4.21932 6.29385 4.38829 6.22415 4.5132 6.09999L9.4332 1.17999C9.49568 1.11801 9.54528 1.04428 9.57912 0.963038C9.61297 0.881799 9.6304 0.794662 9.6304 0.706655C9.6304 0.618647 9.61297 0.53151 9.57912 0.45027C9.54528 0.369031 9.49568 0.295296 9.4332 0.233321C9.30829 0.109154 9.13932 0.0394592 8.9632 0.0394592C8.78707 0.0394592 8.61811 0.109154 8.4932 0.233321Z' fill='white'/%3E%3C/svg%3E");
+		}
+
+		&:indeterminate {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
+		}
+	}
+
+	.kt-checkbox-lg {
+		@apply size-5.5;
+
+		&:checked,
+		&[aria-checked='true'] {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M11.8035 1.19582L5.68018 7.31915L2.12351 3.76249C1.95176 3.59176 1.71943 3.49593 1.47726 3.49593C1.23509 3.49593 1.00276 3.59176 0.831013 3.76249C0.660283 3.93424 0.564453 4.16657 0.564453 4.40874C0.564453 4.65091 0.660283 4.88324 0.831013 5.05499L5.03851 9.26249C5.21026 9.43322 5.44259 9.52905 5.68476 9.52905C5.92693 9.52905 6.15926 9.43322 6.33101 9.26249L13.096 2.49749C13.1819 2.41227 13.2501 2.31089 13.2967 2.19918C13.3432 2.08748 13.3672 1.96766 13.3672 1.84665C13.3672 1.72564 13.3432 1.60583 13.2967 1.49413C13.2501 1.38242 13.1819 1.28104 13.096 1.19582C12.9243 1.02509 12.6919 0.92926 12.4498 0.92926C12.2076 0.92926 11.9753 1.02509 11.8035 1.19582Z' fill='white'/%3E%3C/svg%3E");
+		}
+
+		&:indeterminate {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
+		}
+	}
+}
+
+/* Dark Mode Styles */
+@layer components {
+	.dark .kt-checkbox {
+		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
+	}
+}

package/src/components/collapse/collapse.css

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

package/src/components/collapse/collapse.ts

@@ -0,0 +1,200 @@
+/**
+ * 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 KTDom from '../../helpers/dom';
+import KTComponent from '../component';
+import { KTCollapseInterface, KTCollapseConfigInterface } from './types';
+
+export class KTCollapse extends KTComponent implements KTCollapseInterface {
+	protected override _name: string = 'collapse';
+	protected override _defaultConfig: KTCollapseConfigInterface = {
+		hiddenClass: 'hidden',
+		activeClass: 'active',
+		target: '',
+	};
+	protected override _config: KTCollapseConfigInterface = this._defaultConfig;
+	protected _isAnimating: boolean = false;
+	protected _targetElement: HTMLElement;
+
+	constructor(element: HTMLElement, config?: KTCollapseConfigInterface) {
+		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-collapse') as string,
+			) || KTDom.getElement(this._getOption('target') as string)
+		);
+	}
+
+	protected _isOpen(): boolean {
+		return this._targetElement.classList.contains(
+			this._getOption('activeClass') as string,
+		);
+	}
+
+	protected _handlers(): void {
+		this._element.addEventListener('click', (event: Event) => {
+			event.preventDefault();
+
+			this._toggle();
+		});
+	}
+
+	protected _expand(): void {
+		if (this._isAnimating || this._isOpen()) {
+			return;
+		}
+
+		const payload = { cancel: false };
+		this._fireEvent('expand', payload);
+		this._dispatchEvent('expand', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (this._element) {
+			this._element.setAttribute('aria-expanded', 'true');
+			this._element.classList.add(this._getOption('activeClass') as string);
+		}
+		this._targetElement.classList.remove(
+			this._getOption('hiddenClass') as string,
+		);
+		this._targetElement.classList.add(this._getOption('activeClass') as string);
+
+		this._targetElement.style.height = '0px';
+		this._targetElement.style.overflow = 'hidden';
+		KTDom.reflow(this._targetElement);
+		this._targetElement.style.height = `${this._targetElement.scrollHeight}px`;
+		this._isAnimating = true;
+
+		KTDom.transitionEnd(this._targetElement, () => {
+			this._isAnimating = false;
+			this._targetElement.style.height = '';
+			this._targetElement.style.overflow = '';
+
+			this._fireEvent('expanded');
+			this._dispatchEvent('expanded');
+		});
+	}
+
+	protected _collapse(): void {
+		if (this._isAnimating || !this._isOpen()) {
+			return;
+		}
+
+		const payload = { cancel: false };
+		this._fireEvent('collapse', payload);
+		this._dispatchEvent('collapse', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (!this._element) return;
+		this._element.setAttribute('aria-expanded', 'false');
+		this._element.classList.remove(this._getOption('activeClass') as string);
+		this._targetElement.classList.remove(
+			this._getOption('activeClass') as string,
+		);
+
+		this._targetElement.style.height = `${this._targetElement.scrollHeight}px`;
+		KTDom.reflow(this._targetElement);
+		this._targetElement.style.height = `0px`;
+		this._targetElement.style.overflow = 'hidden';
+		this._isAnimating = true;
+
+		KTDom.transitionEnd(this._targetElement, () => {
+			this._isAnimating = false;
+			this._targetElement.classList.add(
+				this._getOption('hiddenClass') as string,
+			);
+			this._targetElement.style.overflow = '';
+
+			this._fireEvent('collapsed');
+			this._dispatchEvent('collapsed');
+		});
+	}
+
+	protected _toggle(): void {
+		const payload = { cancel: false };
+		this._fireEvent('toggle', payload);
+		this._dispatchEvent('toggle', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		if (this._isOpen()) {
+			this._collapse();
+		} else {
+			this._expand();
+		}
+	}
+
+	public expand(): void {
+		return this._expand();
+	}
+
+	public collapse(): void {
+		return this._collapse();
+	}
+
+	public isOpen(): boolean {
+		return this._isOpen();
+	}
+
+	public static getInstance(element: HTMLElement): KTCollapse {
+		if (!element) return null;
+
+		if (KTData.has(element, 'collapse')) {
+			return KTData.get(element, 'collapse') as KTCollapse;
+		}
+
+		if (element.getAttribute('data-kt-collapse')) {
+			return new KTCollapse(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTCollapseConfigInterface,
+	): KTCollapse {
+		return this.getInstance(element) || new KTCollapse(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-collapse]');
+
+		elements.forEach((element) => {
+			new KTCollapse(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTCollapse.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTCollapse = KTCollapse;
+}

package/src/components/collapse/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 { KTCollapse } from './collapse';
+export type { KTCollapseConfigInterface, KTCollapseInterface } from './types';

package/src/components/collapse/types.ts

@@ -0,0 +1,16 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTCollapseConfigInterface {
+	hiddenClass: string;
+	activeClass: string;
+	target: string;
+}
+
+export interface KTCollapseInterface {
+	collapse(): void;
+	expand(): void;
+	isOpen(): boolean;
+}