@keenthemes/ktui 1.0.3

package/src/components/form/form.css

@@ -0,0 +1,54 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-form {
+		@apply space-y-6;
+	}
+
+	.kt-form-item {
+		@apply flex flex-col gap-2.5;
+	}
+
+	.kt-form-control {
+		@apply space-y-2.5;
+	}
+
+	.kt-form-control-inline {
+		@apply flex items-center space-y-0 gap-2.5;
+	}
+
+	.kt-form-label {
+		@apply flex items-center gap-2 w-full text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50;
+
+		.kt-switch:disabled + &,
+		.kt-checkbox:disabled + &,
+		.kt-radio:disabled + & {
+			@apply cursor-not-allowed opacity-50;
+		}
+	}
+
+	.kt-form-description {
+		@apply text-xs text-secondary-foreground font-normal -mt-1;
+	}
+
+	.kt-form-message {
+		@apply hidden text-xs text-destructive font-normal -mt-1;
+	}
+
+	.kt-form-actions {
+		@apply flex items-center justify-end gap-2.5;
+	}
+
+	.kt-form-item:has([aria-invalid='true']) {
+		.kt-form-message {
+			@apply block;
+		}
+
+		.kt-form-description {
+			@apply hidden;
+		}
+	}
+}

package/src/components/image-input/image-input.css

@@ -0,0 +1,56 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-image-input {
+		@apply relative inline-flex items-center justify-center size-20 cursor-pointer;
+
+		input[type='file'] {
+			@apply appearance-none absolute size-0 opacity-0;
+		}
+	}
+
+	.kt-image-input-remove {
+		@apply cursor-pointer absolute z-[1] size-5 top-0.25 end-0.25 rounded-full bg-background flex items-center justify-center border border-border shadow-sm;
+
+		i {
+			@apply text-muted-foreground text-[11px];
+		}
+
+		svg {
+			@apply text-muted-foreground size-3.25;
+		}
+
+		&:hover {
+			i {
+				@apply text-foreground;
+			}
+
+			svg {
+				@apply text-foreground;
+			}
+		}
+	}
+
+	.kt-image-input-placeholder {
+		@apply relative overflow-hidden size-full bg-cover bg-no-repeat rounded-full border border-border kt-image-input-empty:border-border;
+	}
+
+	.kt-image-input-preview {
+		@apply relative overflow-hidden size-full bg-cover bg-no-repeat rounded-full;
+	}
+}
+
+@custom-variant kt-image-input-empty {
+	[data-kt-image-input-initialized].empty & {
+		@slot;
+	}
+}
+
+@custom-variant image-input-changed {
+	[data-kt-image-input-initialized].changed & {
+		@slot;
+	}
+}

package/src/components/image-input/image-input.ts

@@ -0,0 +1,249 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+import KTData from '../../helpers/data';
+import KTEventHandler from '../../helpers/event-handler';
+import KTComponent from '../component';
+import { KTImageInputInterface, KTImageInputConfigInterface } from './types';
+
+declare global {
+	interface Window {
+		KT_IMAGE_INPUT_INITIALIZED: boolean;
+		KTImageInput: typeof KTImageInput;
+	}
+}
+
+export class KTImageInput extends KTComponent implements KTImageInputInterface {
+	protected override _name: string = 'image-input';
+	protected override _defaultConfig: KTImageInputConfigInterface = {
+		hiddenClass: 'hidden',
+	};
+	protected _inputElement: HTMLInputElement;
+	protected _hiddenElement: HTMLInputElement;
+	protected _removeElement: HTMLElement;
+	protected _previewElement: HTMLElement;
+	protected _previewUrl: string = '';
+	protected _lastMode: string;
+
+	constructor(
+		element: HTMLElement,
+		config: KTImageInputConfigInterface = null,
+	) {
+		super();
+
+		if (KTData.has(element as HTMLElement, this._name)) return;
+
+		this._init(element);
+		this._buildConfig(config);
+
+		this._inputElement = this._element.querySelector('input[type="file"]');
+		this._hiddenElement = this._element.querySelector('input[type="hidden"]');
+		this._removeElement = this._element.querySelector(
+			'[data-kt-image-input-remove]',
+		);
+		this._previewElement = this._element.querySelector(
+			'[data-kt-image-input-preview]',
+		);
+
+		this._update();
+		this._handlers();
+	}
+
+	protected _handlers(): void {
+		KTEventHandler.on(
+			this._element,
+			'[data-kt-image-input-placeholder]',
+			'click',
+			(event: Event) => {
+				event.preventDefault();
+
+				this._inputElement.click();
+			},
+		);
+
+		this._inputElement.addEventListener('change', () => {
+			this._change();
+		});
+
+		this._removeElement.addEventListener('click', () => {
+			this._remove();
+		});
+	}
+
+	protected _change(): void {
+		const payload = { cancel: false };
+		this._fireEvent('change', payload);
+		this._dispatchEvent('change', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		const reader = new FileReader();
+
+		reader.onload = () => {
+			this._previewElement.style.backgroundImage = `url(${reader.result})`;
+		};
+
+		reader.readAsDataURL(this._inputElement.files[0]);
+		this._inputElement.value = '';
+		this._hiddenElement.value = '';
+		this._lastMode = 'new';
+
+		this._element.classList.add('changed');
+		this._removeElement.classList.remove('hidden');
+		this._element.classList.remove('empty');
+
+		this._fireEvent('changed');
+		this._dispatchEvent('changed');
+	}
+
+	protected _remove(): void {
+		const payload = { cancel: false };
+		this._fireEvent('remove', payload);
+		this._dispatchEvent('remove', payload);
+		if (payload.cancel === true) {
+			return;
+		}
+
+		this._element.classList.remove('empty');
+		this._element.classList.remove('changed');
+
+		if (this._lastMode == 'new') {
+			if (this._previewUrl == '')
+				this._removeElement.classList.add(
+					this._getOption('hiddenClass') as string,
+				);
+
+			if (this._previewUrl) {
+				this._previewElement.style.backgroundImage = `url(${this._previewUrl})`;
+			} else {
+				this._previewElement.style.backgroundImage = 'none';
+				this._element.classList.add('empty');
+			}
+
+			this._inputElement.value = '';
+			this._hiddenElement.value = '';
+
+			this._lastMode = 'saved';
+		} else if (this._lastMode == 'saved') {
+			if (this._previewUrl == '')
+				this._removeElement.classList.add(
+					this._getOption('hiddenClass') as string,
+				);
+
+			this._previewElement.style.backgroundImage = 'none';
+			this._element.classList.add('empty');
+
+			this._hiddenElement.value = '1';
+			this._inputElement.value = '';
+
+			this._lastMode = 'placeholder';
+		} else if (this._lastMode == 'placeholder') {
+			if (this._previewUrl == '')
+				this._removeElement.classList.add(
+					this._getOption('hiddenClass') as string,
+				);
+
+			if (this._previewUrl) {
+				this._previewElement.style.backgroundImage = `url(${this._previewUrl})`;
+			} else {
+				this._element.classList.add('empty');
+			}
+
+			this._inputElement.value = '';
+			this._hiddenElement.value = '';
+
+			this._lastMode = 'saved';
+		}
+
+		this._fireEvent('remove');
+		this._dispatchEvent('remove');
+	}
+
+	protected _update() {
+		if (this._previewElement.style.backgroundImage) {
+			this._setPreviewUrl(this._previewElement.style.backgroundImage);
+			this._removeElement.classList.remove(
+				this._getOption('hiddenClass') as string,
+			);
+			this._lastMode = 'saved';
+		} else {
+			this._removeElement.classList.add(
+				this._getOption('hiddenClass') as string,
+			);
+			this._element.classList.add('empty');
+			this._lastMode = 'placeholder';
+		}
+	}
+
+	protected _getPreviewUrl(): string {
+		return this._previewUrl;
+	}
+
+	protected _setPreviewUrl(url: string): void {
+		this._previewUrl = url.replace(/(url\(|\)|")/g, '');
+	}
+
+	public isEmpty(): boolean {
+		return this._inputElement.value.length === 0;
+	}
+
+	public isChanged(): boolean {
+		return this._inputElement.value.length > 0;
+	}
+
+	public remove(): void {
+		this._remove();
+	}
+
+	public update(): void {
+		this._update();
+	}
+
+	public setPreviewUrl(url: string): void {
+		this._setPreviewUrl(url);
+	}
+
+	public getPreviewUrl(): string {
+		return this._getPreviewUrl();
+	}
+
+	public static getInstance(element: HTMLElement): KTImageInput {
+		if (!element) return null;
+
+		if (KTData.has(element, 'image-input')) {
+			return KTData.get(element, 'image-input') as KTImageInput;
+		}
+
+		if (element.getAttribute('data-kt-image-input')) {
+			return new KTImageInput(element);
+		}
+
+		return null;
+	}
+
+	public static getOrCreateInstance(
+		element: HTMLElement,
+		config?: KTImageInputConfigInterface,
+	): KTImageInput {
+		return this.getInstance(element) || new KTImageInput(element, config);
+	}
+
+	public static createInstances(): void {
+		const elements = document.querySelectorAll('[data-kt-image-input]');
+
+		elements.forEach((element) => {
+			new KTImageInput(element as HTMLElement);
+		});
+	}
+
+	public static init(): void {
+		KTImageInput.createInstances();
+	}
+}
+
+if (typeof window !== 'undefined') {
+	window.KTImageInput = KTImageInput;
+}

package/src/components/image-input/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 { KTImageInput } from './image-input';
+export type {
+	KTImageInputConfigInterface,
+	KTImageInputInterface,
+} from './types';

package/src/components/image-input/types.ts

@@ -0,0 +1,12 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export interface KTImageInputConfigInterface {
+	hiddenClass: string;
+}
+
+export interface KTImageInputInterface {
+	remove(): void;
+}

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

@@ -0,0 +1,42 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base input group styles */
+	.kt-input-group {
+		display: flex;
+		align-items: stretch;
+
+		.kt-input {
+			flex-grow: 1;
+		}
+
+		.kt-input-addon:has(+ .kt-input) {
+			@apply rounded-e-none! border-e-0!;
+		}
+
+		.kt-input + .kt-input-addon {
+			@apply rounded-s-none! border-s-0!;
+		}
+
+		.kt-input-addon:has(+ .kt-btn) {
+			@apply rounded-e-none!;
+		}
+
+		.kt-input + .kt-btn {
+			@apply rounded-s-none!;
+		}
+
+		.kt-btn + .kt-input,
+		.kt-input-addon + .kt-input {
+			@apply rounded-s-none!;
+		}
+
+		.kt-input:has(+ .kt-btn),
+		.kt-input:has(+ .kt-input-addon) {
+			@apply rounded-e-none!;
+		}
+	}
+}

package/src/components/input/input.css

@@ -0,0 +1,136 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* Base Styles */
+@layer components {
+	/* Base */
+	.kt-input {
+		@apply outline-0 block w-full bg-background border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground;
+		@apply focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px];
+		@apply disabled:cursor-not-allowed disabled:opacity-50 [&[readonly]]:opacity-70 file:h-full [&[type=file]]:py-0;
+		@apply file:border-solid file:border-input file:bg-transparent file:font-medium file:not-italic file:text-foreground file:p-0 file:border-0 file:border-e;
+		@apply aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10;
+	}
+
+	/* Size */
+	.kt-input {
+		@apply h-8.5 px-3 text-[0.8125rem] leading-(--text-sm--line-height) rounded-md file:pe-3 file:me-3;
+	}
+
+	.kt-input-lg {
+		@apply h-10 px-4 text-sm rounded-md file:pe-4 file:me-4;
+	}
+
+	.kt-input-sm {
+		@apply h-7 px-2.5 text-xs rounded-md file:pe-2.5 file:me-2.5;
+	}
+}
+
+/* Stacked */
+@layer components {
+	.kt-input:not(input) {
+		@apply flex items-center gap-1.5;
+
+		&:has(input:focus-visible) {
+			@apply ring-ring/30 border-ring outline-none ring-[3px];
+		}
+
+		input {
+			@apply flex w-full outline-none transition-[color] text-foreground placeholder:text-muted-foreground border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 h-auto disabled:cursor-not-allowed disabled:opacity-50;
+			font-size: inherit;
+			list-style: inherit;
+		}
+
+		i {
+			@apply text-base text-muted-foreground;
+		}
+
+		svg {
+			@apply text-muted-foreground size-4;
+		}
+
+		&.kt-input-sm {
+			@apply gap-1.25;
+
+			i {
+				@apply text-sm;
+			}
+
+			svg {
+				@apply text-muted-foreground size-3.5;
+			}
+		}
+
+		&.kt-input-lg {
+			@apply gap-1.5;
+
+			i {
+				@apply text-lg;
+			}
+
+			svg {
+				@apply text-muted-foreground size-4;
+			}
+		}
+	}
+}
+
+/* Addon  */
+@layer components {
+	.kt-input-addon {
+		@apply flex items-center shrink-0 justify-center bg-muted border border-input text-secondary-foreground shadow-xs shadow-[rgba(0,0,0,0.05)];
+		@apply rounded-md h-8.5 min-w-8.5 px-3 text-[0.8125rem] leading-(--text-sm--line-height);
+
+		i {
+			@apply text-lg;
+		}
+
+		svg {
+			@apply size-4.5;
+		}
+
+		&.kt-input-addon-sm {
+			@apply rounded-md h-7 min-w-7 text-xs px-2.5;
+
+			i {
+				@apply text-base;
+			}
+
+			svg {
+				@apply size-3.5;
+			}
+		}
+
+		&.kt-input-addon-lg {
+			@apply rounded-md h-10 min-w-10 px-4 text-sm;
+
+			i {
+				@apply text-lg;
+			}
+
+			svg {
+				@apply size-4.5;
+			}
+		}
+
+		&.kt-input-addon-icon {
+			@apply px-0;
+		}
+	}
+}
+
+/* Utilities */
+@layer components {
+	.kt-input-ghost {
+		@apply p-0 border-0 shadow-none bg-background focus-visible:ring-0 focus-visible:border-0;
+	}
+}
+
+/* Dark Mode Styles */
+@layer components {
+	.dark .kt-input {
+		@apply aria-invalid:border-destructive aria-invalid:ring-destructive/20;
+	}
+}

package/src/components/kbd/kbd.css

@@ -0,0 +1,30 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-kbd {
+		@apply inline-flex items-center justify-center font-mono rounded-md;
+	}
+
+	.kt-kbd {
+		@apply bg-accent border border-border text-accent-foreground;
+	}
+
+	.kt-kbd-outline {
+		@apply bg-transparent text-accent-foreground border border-input;
+	}
+
+	.kt-kbd {
+		@apply h-7 min-w-7 px-1.5 text-xs [&_svg]:size-3.5;
+	}
+
+	.kt-kbd-xs {
+		@apply h-5 min-w-5 px-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3;
+	}
+
+	.kt-kbd-sm {
+		@apply h-6 min-w-6 px-1 text-[0.75rem] leading-[0.75rem] [&_svg]:size-3;
+	}
+}

package/src/components/label/label.css

@@ -0,0 +1,20 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-label {
+		@apply text-sm font-medium leading-none text-foreground inline-flex items-center gap-2;
+
+		.kt-switch:disabled + &,
+		.kt-checkbox:disabled + &,
+		.kt-radio:disabled + & {
+			@apply cursor-not-allowed opacity-50;
+		}
+	}
+
+	.kt-label-secondary {
+		@apply font-normal;
+	}
+}

package/src/components/link/link.css

@@ -0,0 +1,81 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base Link Styles */
+	.kt-link {
+		@apply cursor-pointer inline-flex items-center rounded-md font-medium focus:outline-none transition focus-visible:ring-2 focus-visible:ring-neutral-200 dark:focus-visible:ring-neutral-700 focus-visible:ring-offset-2;
+	}
+
+	/* Variants */
+	.kt-link {
+		@apply text-primary;
+	}
+
+	.kt-link-inverse {
+		@apply text-background;
+	}
+
+	.kt-link-mono {
+		@apply text-mono;
+	}
+
+	/* Sizes */
+	.kt-link {
+		@apply text-[0.8125rem] leading-(--text-sm--line-height) gap-1;
+
+		svg {
+			@apply size-4;
+		}
+
+		i {
+			@apply text-base;
+		}
+	}
+
+	.kt-link-sm {
+		@apply text-xs gap-1;
+
+		svg {
+			@apply size-3.5;
+		}
+
+		i {
+			@apply text-sm;
+		}
+	}
+
+	.kt-link-lg {
+		@apply text-sm gap-1.5;
+
+		svg {
+			@apply size-4;
+		}
+
+		i {
+			@apply text-base;
+		}
+	}
+
+	/* Styles */
+	/* When you want a hover underline (non-permanent) */
+	.kt-link-underline {
+		@apply hover:underline hover:underline-offset-4 decoration-solid;
+	}
+
+	/* When the text should always be underlined */
+	.kt-link-underlined {
+		@apply underline underline-offset-4 decoration-solid;
+	}
+
+	.kt-link-dashed {
+		@apply decoration-1 decoration-dashed;
+	}
+
+	/* Disabled State */
+	.kt-link-disabled {
+		@apply opacity-50 pointer-events-none;
+	}
+}

package/src/components/modal/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 { KTModal } from './modal';
+export type { KTModalConfigInterface, KTModalInterface } from './types';