@keenthemes/ktui 1.0.3

package/src/components/accordion/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 { KTAccordion } from './accordion';
+export type { KTAccordionConfigInterface, KTAccordionInterface } from './types';

package/src/components/accordion/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 KTAccordionConfigInterface {
+	hiddenClass: string;
+	activeClass: string;
+	expandAll: boolean;
+}
+
+export interface KTAccordionInterface {
+	show(accordionElement: HTMLElement): void;
+	hide(accordionElement: HTMLElement): void;
+	toggle(accordionElement: HTMLElement): void;
+}

package/src/components/alert/alert.css

@@ -0,0 +1,282 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base Alert Container */
+	.kt-alert {
+		@apply flex items-stretch w-full;
+	}
+
+	/* Alert Title */
+	.kt-alert-title {
+		@apply grow tracking-tight;
+	}
+
+	/* Alert Toolbar */
+	.kt-alert-toolbar {
+		@apply flex items-center gap-2.5;
+	}
+
+	/* Alert Descriptopn */
+	.kt-alert-description {
+		@apply text-sm [&_p]:leading-relaxed [&_p]:mb-2;
+	}
+
+	/* Alert Content */
+	.kt-alert-content {
+		@apply w-full grow space-y-1.5;
+
+		.kt-alert-title {
+			@apply font-semibold;
+		}
+	}
+
+	.kt-alert-icon {
+		@apply shrink-0;
+	}
+
+	/* Alert Close */
+	.kt-alert-close {
+		@apply shrink-0 size-4 cursor-pointer;
+
+		> svg {
+			@apply size-4 text-muted-foreground;
+		}
+
+		&:focus,
+		&:hover {
+			> svg {
+				@apply text-foreground;
+			}
+		}
+	}
+
+	/* Size */
+	.kt-alert {
+		@apply rounded-lg p-3.5 gap-2.5 text-sm;
+
+		.kt-alert-icon svg {
+			@apply size-5;
+		}
+	}
+
+	.kt-alert-sm {
+		@apply rounded-md py-2 px-2.5 gap-1.5 text-xs;
+
+		.kt-alert-close {
+			@apply size-3.5;
+
+			> svg {
+				@apply size-3.5 text-muted-foreground;
+			}
+		}
+
+		.kt-alert-icon svg {
+			@apply size-4;
+		}
+	}
+
+	.kt-alert-lg {
+		@apply rounded-md p-4 gap-2.5 text-base;
+
+		.kt-alert-icon svg {
+			@apply size-6;
+		}
+	}
+
+	/* Solid */
+	.kt-alert {
+		@apply bg-muted text-foreground;
+	}
+
+	.kt-alert-primary {
+		@apply bg-primary text-primary-foreground;
+
+		.kt-alert-close > svg {
+			@apply text-primary-foreground;
+		}
+	}
+
+	.kt-alert-destructive {
+		@apply bg-destructive text-destructive-foreground;
+
+		.kt-alert-close > svg {
+			@apply text-destructive-foreground;
+		}
+	}
+
+	.kt-alert-success {
+		@apply bg-green-500 text-white;
+
+		.kt-alert-close > svg {
+			@apply text-white;
+		}
+	}
+
+	.kt-alert-info {
+		@apply bg-violet-600 text-white;
+
+		.kt-alert-close > svg {
+			@apply text-white;
+		}
+	}
+
+	.kt-alert-warning {
+		@apply bg-yellow-500 text-white;
+
+		.kt-alert-close > svg {
+			@apply text-white;
+		}
+	}
+
+	.kt-alert-mono {
+		@apply bg-mono text-mono-foreground;
+
+		.kt-alert-close > svg {
+			@apply text-mono-foreground;
+		}
+	}
+
+	/* Mono */
+	.kt-alert-mono {
+		&.kt-alert-primary {
+			.kt-alert-icon {
+				@apply text-primary;
+			}
+		}
+
+		&.kt-alert-success {
+			.kt-alert-icon {
+				@apply text-green-500;
+			}
+		}
+
+		&.kt-alert-destructive {
+			.kt-alert-icon {
+				@apply text-destructive;
+			}
+		}
+
+		&.kt-alert-warning {
+			.kt-alert-icon {
+				@apply text-yellow-500;
+			}
+		}
+
+		&.kt-alert-info {
+			.kt-alert-icon {
+				@apply text-violet-600;
+			}
+		}
+	}
+
+	/* Outline */
+	.kt-alert-outline {
+		.kt-alert-close {
+			@apply shrink-0 size-4 cursor-pointer;
+
+			> svg {
+				@apply size-4 text-muted-foreground;
+			}
+
+			&:focus,
+			&:hover {
+				> svg {
+					@apply text-foreground;
+				}
+			}
+		}
+
+		@apply border border-border bg-background text-foreground;
+
+		&.kt-alert-primary {
+			@apply border border-border bg-background text-primary;
+		}
+
+		&.kt-alert-destructive {
+			@apply border border-border bg-background text-destructive;
+		}
+
+		&.kt-alert-success {
+			@apply border border-border bg-background text-green-500;
+		}
+
+		&.kt-alert-info {
+			@apply border border-border bg-background text-violet-600;
+		}
+
+		&.kt-alert-warning {
+			@apply border border-border bg-background text-yellow-500;
+		}
+
+		&.kt-alert-mono {
+			@apply border border-border bg-background text-mono;
+		}
+	}
+
+	/* Light */
+	.kt-alert-light {
+		@apply bg-muted border border-border text-foreground;
+
+		.kt-alert-icon > svg {
+			@apply text-muted-foreground;
+		}
+
+		.kt-alert-close {
+			@apply shrink-0 size-4 cursor-pointer;
+
+			> svg {
+				@apply size-4 text-muted-foreground;
+			}
+
+			&:focus,
+			&:hover {
+				> svg {
+					@apply text-foreground;
+				}
+			}
+		}
+
+		&.kt-alert-primary {
+			@apply bg-primary/5 border border-primary/10 text-foreground;
+
+			.kt-alert-icon > svg {
+				@apply text-primary;
+			}
+		}
+
+		&.kt-alert-destructive {
+			@apply bg-destructive/5 border border-destructive/10 text-foreground;
+
+			.kt-alert-icon > svg {
+				@apply text-destructive;
+			}
+		}
+
+		&.kt-alert-success {
+			@apply bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-950/50 text-foreground;
+
+			.kt-alert-icon > svg {
+				@apply text-green-500;
+			}
+		}
+
+		&.kt-alert-info {
+			@apply bg-violet-50 dark:bg-violet-950/30 border border-violet-200 dark:border-violet-950/50 text-foreground;
+
+			.kt-alert-icon > svg {
+				@apply text-violet-500;
+			}
+		}
+
+		&.kt-alert-warning {
+			@apply bg-yellow-50 dark:bg-yellow-950/30 border border-yellow-200 dark:border-yellow-950/50 text-foreground;
+
+			.kt-alert-icon > svg {
+				@apply text-yellow-500;
+			}
+		}
+	}
+}

package/src/components/avatar/avatar.css

@@ -0,0 +1,46 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-avatar {
+		@apply relative flex shrink-0 size-10;
+	}
+
+	.kt-avatar-image {
+		@apply overflow-hidden rounded-full;
+
+		img {
+			@apply aspect-square h-full w-full;
+		}
+	}
+
+	.kt-avatar-fallback {
+		@apply flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-sm;
+	}
+
+	.kt-avatar-indicator {
+		@apply absolute flex size-6 items-center justify-center;
+	}
+
+	.kt-avatar-status {
+		@apply flex items-center rounded-full size-2 border-2 border-background;
+
+		&.kt-avatar-status-online {
+			@apply bg-green-600;
+		}
+
+		&.kt-avatar-status-offline {
+			@apply bg-mono/50;
+		}
+
+		&.kt-avatar-status-busy {
+			@apply bg-yellow-600;
+		}
+
+		&.kt-avatar-status-away {
+			@apply bg-blue-600;
+		}
+	}
+}

package/src/components/badge/badge.css

@@ -0,0 +1,176 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	/* Base */
+	.kt-badge {
+		@apply whitespace-nowrap bg-secondary text-accent-foreground inline-flex items-center justify-center font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0;
+	}
+
+	/* Variants */
+	.kt-badge-primary {
+		@apply bg-primary text-primary-foreground;
+	}
+	.kt-badge-secondary {
+		@apply bg-secondary text-accent-foreground;
+	}
+	.kt-badge-success {
+		@apply bg-green-500 text-white;
+	}
+	.kt-badge-warning {
+		@apply bg-yellow-400 text-white;
+	}
+	.kt-badge-info {
+		@apply bg-violet-500 text-white;
+	}
+	.kt-badge-mono {
+		@apply bg-mono text-mono-foreground;
+	}
+	.kt-badge-destructive {
+		@apply bg-destructive text-destructive-foreground;
+	}
+
+	/* Appearance */
+	.kt-badge-stroke {
+		@apply bg-background border border-border text-secondary-foreground;
+	}
+
+	/* Disabled */
+	.kt-badge-disabled {
+		@apply opacity-50 pointer-events-none;
+	}
+
+	/* Size */
+	.kt-badge-lg {
+		@apply rounded-md px-[0.5rem] h-7 min-w-7 gap-1.5 text-xs [&_svg]:size-3.5;
+	}
+	.kt-badge {
+		@apply rounded-md px-[0.45rem] h-6 min-w-6 gap-1.5 text-xs [&_svg]:size-3.5;
+	}
+	.kt-badge-sm {
+		@apply rounded-sm px-[0.325rem] h-5 min-w-5 gap-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3;
+	}
+	.kt-badge-xs {
+		@apply rounded-sm px-[0.25rem] h-4 min-w-4 gap-1 text-[0.625rem] leading-[0.5rem] [&_svg]:size-3;
+	}
+
+	/* Outline */
+	.kt-badge-outline {
+		@apply border border-border bg-muted text-secondary-foreground;
+
+		&.kt-badge-primary {
+			@apply border bg-blue-50 text-blue-700 border-blue-100 dark:text-blue-600 dark:bg-blue-950/50 dark:border-blue-950;
+		}
+
+		&.kt-badge-secondary {
+			@apply bg-secondary dark:bg-secondary/50 border-border text-foreground;
+		}
+
+		&.kt-badge-success {
+			@apply border bg-green-50 text-green-700 border-green-200 dark:text-green-600 dark:bg-green-950/50 dark:border-green-950;
+		}
+
+		&.kt-badge-warning.kt-badge-outline {
+			@apply border bg-yellow-50 text-yellow-700 border-yellow-100 dark:text-yellow-600 dark:bg-yellow-950/50 dark:border-yellow-950;
+		}
+
+		&.kt-badge-info.kt-badge-outline {
+			@apply border bg-violet-50 text-violet-700 border-violet-100 dark:text-violet-600 dark:bg-violet-950/50 dark:border-violet-950;
+		}
+
+		&.kt-badge-mono.kt-badge-outline {
+			@apply bg-mono/10 border-mono/10 text-mono;
+		}
+
+		&.kt-badge-destructive.kt-badge-outline {
+			@apply border bg-red-50 text-red-700 border-red-100 dark:text-red-600 dark:bg-red-950/50 dark:border-red-950;
+		}
+	}
+
+	/* Light */
+	.kt-badge-light {
+		&.kt-badge-primary {
+			@apply bg-blue-100 text-blue-800 dark:text-blue-600 dark:bg-blue-950/50;
+		}
+
+		&.kt-badge-secondary {
+			@apply bg-secondary dark:bg-secondary/50 text-secondary-foreground;
+		}
+
+		&.kt-badge-success {
+			@apply bg-green-100 text-green-800 dark:text-green-600 dark:bg-green-950/50;
+		}
+
+		&.kt-badge-warning {
+			@apply bg-yellow-100 text-yellow-800 dark:text-yellow-600 dark:bg-yellow-950/50;
+		}
+
+		&.kt-badge-info {
+			@apply bg-violet-100 text-violet-800 dark:text-violet-600 dark:bg-violet-950/50;
+		}
+
+		&.kt-badge-mono {
+			@apply bg-mono/10 text-mono;
+		}
+
+		&.kt-badge-destructive {
+			@apply bg-red-100 text-red-800 dark:text-red-600 dark:bg-red-950/50;
+		}
+	}
+
+	/* Ghost */
+	.kt-badge-ghost {
+		@apply bg-transparent px-0;
+
+		&.kt-badge-primary {
+			@apply text-primary;
+		}
+
+		&.kt-badge-secondary {
+			@apply text-secondary-foreground;
+		}
+
+		&.kt-badge-destructive {
+			@apply text-destructive;
+		}
+
+		&.kt-badge-success {
+			@apply text-green-500;
+		}
+
+		&.kt-badge-warning {
+			@apply text-yellow-500;
+		}
+
+		&.kt-badge-info {
+			@apply text-violet-500;
+		}
+
+		&.kt-badge-mono {
+			@apply text-mono;
+		}
+	}
+
+	/* Badge Button */
+	.kt-badge-btn {
+		@apply cursor-pointer inline-flex items-center justify-center leading-none size-3.5 p-0 rounded-md -me-0.5;
+
+		> svg {
+			@apply transition-[opacity] size-3.5 opacity-70;
+		}
+
+		&:focus,
+		&:hover {
+			> svg {
+				@apply opacity-100;
+			}
+		}
+	}
+
+	/* Badge Dot */
+	.kt-badge-dot {
+		@apply size-1.5 rounded-full bg-current opacity-75;
+	}
+}

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,38 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-breadcrumb {
+		@apply flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground;
+	}
+
+	.kt-breadcrumb-item {
+		@apply inline-flex items-center gap-1.5;
+	}
+
+	.kt-breadcrumb-link {
+		@apply transition-colors hover:text-foreground;
+
+		svg {
+			@apply size-4;
+		}
+	}
+
+	.kt-breadcrumb-page {
+		@apply font-normal text-foreground;
+	}
+
+	.kt-breadcrumb-separator {
+		svg {
+			@apply size-3.5;
+		}
+	}
+
+	.kt-breadcrumb-ellipsis {
+		svg {
+			@apply size-4;
+		}
+	}
+}