@keenthemes/ktui 1.2.2 → 1.2.4

package/lib/esm/init-all.js

@@ -0,0 +1,13 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+import KTDom from './helpers/dom';
+import { KTComponents } from './index';
+export var initAllComponents = function () {
+    KTDom.ready(function () {
+        KTComponents.init();
+    });
+};
+initAllComponents();
+//# sourceMappingURL=init-all.js.map

package/lib/esm/init-all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"init-all.js","sourceRoot":"","sources":["../../src/init-all.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,CAAC,IAAM,iBAAiB,GAAG;IAChC,KAAK,CAAC,KAAK,CAAC;QACX,YAAY,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,EAAE,CAAC"}

package/lib/esm/legacy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+export * from './index';
+export { default } from './index';
+import './init-all';
+//# sourceMappingURL=legacy.d.ts.map

package/lib/esm/legacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.d.ts","sourceRoot":"","sources":["../../src/legacy.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,YAAY,CAAC"}

package/lib/esm/legacy.js

@@ -0,0 +1,8 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+export * from './index';
+export { default } from './index';
+import './init-all';
+//# sourceMappingURL=legacy.js.map

package/lib/esm/legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.js","sourceRoot":"","sources":["../../src/legacy.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenthemes/ktui",
-	"version": "1.2.2",
+	"version": "1.2.4",
 	"description": "Free & Open-Source Tailwind UI Components by Keenthemes",
 	"homepage": "https://ktui.io",
 	"repository": {
@@ -52,9 +52,36 @@
 		"tailwind clipboard"
 	],
 	"author": "@keenthemes",
-	"types": "lib/esm/index.d.ts",
-	"main": "lib/cjs/index.js",
-	"module": "lib/esm/index.js",
+	"types": "lib/esm/legacy.d.ts",
+	"main": "lib/cjs/legacy.js",
+	"module": "lib/esm/legacy.js",
+	"exports": {
+		".": {
+			"types": "./lib/esm/legacy.d.ts",
+			"import": "./lib/esm/legacy.js",
+			"require": "./lib/cjs/legacy.js"
+		},
+		"./core": {
+			"types": "./lib/esm/index.d.ts",
+			"import": "./lib/esm/index.js",
+			"require": "./lib/cjs/index.js"
+		},
+		"./init-all": {
+			"types": "./lib/esm/init-all.d.ts",
+			"import": "./lib/esm/init-all.js",
+			"require": "./lib/cjs/init-all.js"
+		},
+		"./components/*": {
+			"types": "./lib/esm/components/*/index.d.ts",
+			"import": "./lib/esm/components/*/index.js",
+			"require": "./lib/cjs/components/*/index.js"
+		},
+		"./src/*": "./src/*",
+		"./lib/*": "./lib/*",
+		"./styles.css": "./styles.css",
+		"./dist/*": "./dist/*",
+		"./package.json": "./package.json"
+	},
 	"license": "MIT",
 	"files": [
 		"dist",
@@ -127,5 +154,8 @@
 		"rollup": "^4.59.0",
 		"serialize-javascript": "^7.0.3",
 		"terser-webpack-plugin": "^5.3.17"
+	},
+	"publishConfig": {
+		"registry": "https://npm.pkg.github.com"
 	}
 }

package/src/__tests__/entrypoints.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+describe('KTUI entrypoints', () => {
+	beforeEach(() => {
+		vi.restoreAllMocks();
+		vi.resetModules();
+	});
+
+	it('component-level import does not initialize unrelated components', async () => {
+		const { KTModal } = await import('../components/modal');
+		const modalInitSpy = vi.spyOn(KTModal, 'init');
+		const coreModule = await import('../index');
+		const componentsInitSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		await import('../components/toggle-password');
+
+		expect(modalInitSpy).not.toHaveBeenCalled();
+		expect(componentsInitSpy).not.toHaveBeenCalled();
+	});
+
+	it('core entrypoint import is side-effect-free', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi.spyOn(domModule.default, 'ready');
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		expect(readySpy).not.toHaveBeenCalled();
+		expect(initSpy).not.toHaveBeenCalled();
+	});
+
+	it('init-all entrypoint initializes components explicitly', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi
+			.spyOn(domModule.default, 'ready')
+			.mockImplementation((callback) => {
+				callback();
+			});
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		const initAllModule = await import('../init-all');
+
+		expect(readySpy).toHaveBeenCalledTimes(1);
+		expect(initSpy).toHaveBeenCalledTimes(1);
+
+		initAllModule.initAllComponents();
+		expect(readySpy).toHaveBeenCalledTimes(2);
+		expect(initSpy).toHaveBeenCalledTimes(2);
+	});
+
+	it('legacy root entrypoint preserves auto-init behavior', async () => {
+		const domModule = await import('../helpers/dom');
+		const readySpy = vi
+			.spyOn(domModule.default, 'ready')
+			.mockImplementation((callback) => {
+				callback();
+			});
+
+		const coreModule = await import('../index');
+		const initSpy = vi.spyOn(coreModule.KTComponents, 'init');
+
+		const legacyModule = await import('../legacy');
+
+		expect(initSpy).toHaveBeenCalled();
+		expect(readySpy).toHaveBeenCalled();
+		expect(legacyModule.default).toBe(coreModule.default);
+		expect(legacyModule.KTComponents).toBe(coreModule.KTComponents);
+	});
+});

package/src/components/context-menu/__tests__/context-menu.test.ts

@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { KTContextMenu } from '../context-menu';
+
+const mockDestroy = vi.fn();
+const mockForceUpdate = vi.fn();
+
+vi.mock('@popperjs/core', () => ({
+	createPopper: vi.fn(() => ({
+		destroy: mockDestroy,
+		forceUpdate: mockForceUpdate,
+	})),
+}));
+
+function waitForTransitions() {
+	return new Promise<void>((resolve) => {
+		setTimeout(() => resolve(), 5);
+	});
+}
+
+function createFixture() {
+	document.body.innerHTML = `
+		<div id="root" data-kt-context-menu="true">
+			<div id="trigger" data-kt-context-menu-trigger="true">target</div>
+			<div id="menu" data-kt-context-menu-menu="true" class="kt-context-menu hidden">
+				<button id="dismiss" data-kt-context-menu-dismiss="true">dismiss</button>
+			</div>
+		</div>
+	`;
+
+	return {
+		root: document.getElementById('root') as HTMLElement,
+		trigger: document.getElementById('trigger') as HTMLElement,
+		menu: document.getElementById('menu') as HTMLElement,
+		dismiss: document.getElementById('dismiss') as HTMLElement,
+	};
+}
+
+describe('KTContextMenu', () => {
+	beforeEach(() => {
+		document.body.innerHTML = '';
+		mockDestroy.mockClear();
+		mockForceUpdate.mockClear();
+	});
+
+	afterEach(() => {
+		document.body.innerHTML = '';
+	});
+
+	it('creates and retrieves an instance', () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+		expect(instance.getElement()).toBe(root);
+		expect(KTContextMenu.getInstance(root)).toBe(instance);
+	});
+
+	it('opens from showAtEvent and prevents native menu by default', () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+		const event = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			clientX: 100,
+			clientY: 120,
+		});
+		const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+		instance.showAtEvent(event);
+
+		expect(instance.isOpen()).toBe(true);
+		expect(preventDefaultSpy).toHaveBeenCalled();
+	});
+
+	it('hide closes an open menu', async () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+
+		instance.showAt(60, 60);
+		expect(instance.isOpen()).toBe(true);
+		(instance as unknown as { _shownAt: number })._shownAt = Date.now() - 300;
+		(instance as unknown as { _isOpen: boolean })._isOpen = true;
+
+		instance.hide();
+		await waitForTransitions();
+		expect(instance.isOpen()).toBe(false);
+	});
+
+	it('toggleAtEvent toggles menu state', async () => {
+		const { root } = createFixture();
+		const instance = new KTContextMenu(root);
+
+		const openEvent = new MouseEvent('contextmenu', {
+			bubbles: true,
+			cancelable: true,
+			clientX: 30,
+			clientY: 30,
+		});
+		instance.toggleAtEvent(openEvent);
+		expect(instance.isOpen()).toBe(true);
+		(instance as unknown as { _shownAt: number })._shownAt = Date.now() - 300;
+		(instance as unknown as { _isOpen: boolean })._isOpen = true;
+
+		instance.toggleAtEvent(openEvent);
+		await waitForTransitions();
+		expect(instance.isOpen()).toBe(false);
+	});
+
+	it('reinit rebuilds instances for existing roots', () => {
+		const { root } = createFixture();
+		new KTContextMenu(root);
+		const first = KTContextMenu.getInstance(root);
+		expect(first).not.toBeNull();
+
+		KTContextMenu.reinit();
+		const second = KTContextMenu.getInstance(root);
+		expect(second).not.toBeNull();
+		expect(second).not.toBe(first);
+	});
+});

package/src/components/context-menu/context-menu.css

@@ -0,0 +1,32 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+@layer components {
+	.kt-context-menu {
+		@apply p-1.5 space-y-0.5 rounded-md shadow-md shadow-[rgba(0,0,0,0.05)] border border-border bg-popover text-popover-foreground;
+
+		&:not(.open) {
+			@apply hidden;
+		}
+	}
+
+	.kt-context-menu-sub {
+		@apply space-y-1 w-full;
+	}
+
+	.kt-context-menu-toggle {
+		@apply w-full flex items-center gap-x-2 py-1.5 px-2 rounded-md font-medium text-sm text-start cursor-pointer disabled:opacity-50 disabled:pointer-events-none;
+		@apply text-foreground hover:bg-accent hover:text-accent-foreground;
+	}
+
+	.kt-context-menu-link {
+		@apply w-full flex items-center gap-x-2 py-1.5 px-2 rounded-md font-medium text-sm text-start cursor-pointer disabled:opacity-50 disabled:pointer-events-none;
+		@apply text-foreground hover:bg-accent hover:text-accent-foreground;
+	}
+
+	.kt-context-menu-separator {
+		@apply h-px bg-border my-2.5 -mx-2 rtl:transform rtl:rotate-180;
+	}
+}