npm - @keenthemes/ktui - Versions diffs - 1.0.28 → 1.1.0 - Mend

@keenthemes/ktui 1.0.28 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/examples/select/dynamic-methods.html DELETED Viewed

@@ -1,273 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KTSelect Dynamic Methods Example</title>
-    <link href="../../dist/styles.css" rel="stylesheet">
-    <script src="../../dist/ktui.js"></script>
-</head>
-<body class="p-8">
-    <div class="max-w-4xl mx-auto space-y-8">
-        <div>
-            <h1 class="text-3xl font-bold mb-4">KTSelect Dynamic Control Methods</h1>
-            <p class="text-gray-600 mb-6">
-                This example demonstrates the four dynamic control methods:
-                <code class="bg-gray-100 px-2 py-1 rounded">enable()</code>,
-                <code class="bg-gray-100 px-2 py-1 rounded">disable()</code>,
-                <code class="bg-gray-100 px-2 py-1 rounded">update()</code>, and
-                <code class="bg-gray-100 px-2 py-1 rounded">refresh()</code>
-            </p>
-        </div>
-        <!-- Example 1: Enable/Disable Methods -->
-        <div class="border border-gray-200 rounded-lg p-6 space-y-4">
-            <h2 class="text-xl font-semibold">1. Enable / Disable Methods</h2>
-            <p class="text-sm text-gray-600">
-                Programmatically enable or disable the select after initialization.
-            </p>
-            <div>
-                <label class="block text-sm font-medium mb-2">Fruit Selection</label>
-                <select class="kt-select" id="select1">
-                    <option value="">Select a fruit</option>
-                    <option value="apple">Apple</option>
-                    <option value="banana">Banana</option>
-                    <option value="cherry">Cherry</option>
-                    <option value="date">Date</option>
-                    <option value="elderberry">Elderberry</option>
-                </select>
-            </div>
-            <div class="flex gap-2">
-                <button id="enableBtn" class="kt-btn">
-                    Enable Select
-                </button>
-                <button id="disableBtn" class="kt-btn kt-btn-secondary">
-                    Disable Select
-                </button>
-            </div>
-            <div id="enableDisableStatus" class="text-sm text-gray-600"></div>
-        </div>
-        <!-- Example 2: Update Method -->
-        <div class="border border-gray-200 rounded-lg p-6 space-y-4">
-            <h2 class="text-xl font-semibold">2. Update Method</h2>
-            <p class="text-sm text-gray-600">
-                Sync the dropdown when native select options are modified programmatically.
-            </p>
-            <div>
-                <label class="block text-sm font-medium mb-2">Programming Languages</label>
-                <select class="kt-select" id="select2">
-                    <option value="">Select a language</option>
-                    <option value="javascript">JavaScript</option>
-                    <option value="python">Python</option>
-                    <option value="java">Java</option>
-                </select>
-            </div>
-            <div class="flex gap-2">
-                <button id="addOptionBtn" class="kt-btn">
-                    Add Option
-                </button>
-                <button id="removeOptionBtn" class="kt-btn kt-btn-destructive">
-                    Remove Last Option
-                </button>
-                <button id="replaceOptionsBtn" class="kt-btn kt-btn-outline">
-                    Replace All Options
-                </button>
-            </div>
-            <div id="updateStatus" class="text-sm text-gray-600"></div>
-        </div>
-        <!-- Example 3: Refresh Method -->
-        <div class="border border-gray-200 rounded-lg p-6 space-y-4">
-            <h2 class="text-xl font-semibold">3. Refresh Method</h2>
-            <p class="text-sm text-gray-600">
-                Refresh the visual display after programmatic selection changes.
-            </p>
-            <div>
-                <label class="block text-sm font-medium mb-2">Countries (Multiple)</label>
-                <select class="kt-select" id="select3" multiple>
-                    <option value="us">United States</option>
-                    <option value="uk">United Kingdom</option>
-                    <option value="ca">Canada</option>
-                    <option value="au">Australia</option>
-                    <option value="de">Germany</option>
-                </select>
-            </div>
-            <div class="flex gap-2">
-                <button id="selectRandomBtn" class="kt-btn">
-                    Select Random Options
-                </button>
-                <button id="clearSelectionBtn" class="kt-btn kt-btn-secondary">
-                    Clear Selection
-                </button>
-                <button id="refreshBtn" class="kt-btn kt-btn-outline">
-                    Refresh Display
-                </button>
-            </div>
-            <div id="refreshStatus" class="text-sm text-gray-600"></div>
-        </div>
-        <!-- Example 4: Event Listeners -->
-        <div class="border border-gray-200 rounded-lg p-6 space-y-4">
-            <h2 class="text-xl font-semibold">4. Event Listeners</h2>
-            <p class="text-sm text-gray-600">
-                All dynamic methods dispatch custom events that you can listen to.
-            </p>
-            <div class="bg-gray-50 p-4 rounded">
-                <h3 class="font-medium mb-2">Event Log:</h3>
-                <div id="eventLog" class="text-sm font-mono space-y-1 max-h-48 overflow-y-auto"></div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Initialize all selects
-        const select1 = new KTSelect(document.getElementById('select1'));
-        const select2 = new KTSelect(document.getElementById('select2'));
-        const select3 = new KTSelect(document.getElementById('select3'), {
-            multiple: true,
-            enableSelectAll: true
-        });
-        // Helper to log events
-        const eventLog = document.getElementById('eventLog');
-        function logEvent(selectId, eventType) {
-            const timestamp = new Date().toLocaleTimeString();
-            const entry = document.createElement('div');
-            entry.className = 'text-gray-700';
-            entry.textContent = `[${timestamp}] ${selectId}: ${eventType}`;
-            eventLog.prepend(entry);
-            // Keep only last 10 events
-            while (eventLog.children.length > 10) {
-                eventLog.removeChild(eventLog.lastChild);
-            }
-        }
-        // Example 1: Enable/Disable Methods
-        const enableDisableStatus = document.getElementById('enableDisableStatus');
-        document.getElementById('enableBtn').addEventListener('click', () => {
-            select1.enable();
-            enableDisableStatus.textContent = '✅ Select enabled';
-        });
-        document.getElementById('disableBtn').addEventListener('click', () => {
-            select1.disable();
-            enableDisableStatus.textContent = '🚫 Select disabled';
-        });
-        // Listen to enabled/disabled events
-        document.getElementById('select1').addEventListener('enabled', () => {
-            logEvent('select1', 'enabled');
-        });
-        document.getElementById('select1').addEventListener('disabled', () => {
-            logEvent('select1', 'disabled');
-        });
-        // Example 2: Update Method
-        const updateStatus = document.getElementById('updateStatus');
-        let optionCounter = 1;
-        document.getElementById('addOptionBtn').addEventListener('click', () => {
-            const nativeSelect = document.getElementById('select2');
-            const newOption = document.createElement('option');
-            newOption.value = `lang${optionCounter}`;
-            newOption.textContent = `New Language ${optionCounter}`;
-            nativeSelect.appendChild(newOption);
-            // Call update to sync the dropdown
-            select2.update();
-            updateStatus.textContent = `✅ Added "New Language ${optionCounter}" - dropdown synced`;
-            optionCounter++;
-        });
-        document.getElementById('removeOptionBtn').addEventListener('click', () => {
-            const nativeSelect = document.getElementById('select2');
-            const options = nativeSelect.querySelectorAll('option:not([value=""])');
-            if (options.length > 0) {
-                options[options.length - 1].remove();
-                select2.update();
-                updateStatus.textContent = '✅ Removed last option - dropdown synced';
-            } else {
-                updateStatus.textContent = '⚠️ No options to remove';
-            }
-        });
-        document.getElementById('replaceOptionsBtn').addEventListener('click', () => {
-            // Use update() with newOptions parameter
-            select2.update([
-                { value: 'rust', text: 'Rust' },
-                { value: 'go', text: 'Go' },
-                { value: 'typescript', text: 'TypeScript' },
-                { value: 'kotlin', text: 'Kotlin' }
-            ]);
-            updateStatus.textContent = '✅ Replaced all options with new set';
-        });
-        // Listen to updated event
-        document.getElementById('select2').addEventListener('updated', () => {
-            logEvent('select2', 'updated');
-        });
-        // Example 3: Refresh Method
-        const refreshStatus = document.getElementById('refreshStatus');
-        document.getElementById('selectRandomBtn').addEventListener('click', () => {
-            const nativeSelect = document.getElementById('select3');
-            const options = Array.from(nativeSelect.options);
-            // Randomly select 2-3 options
-            const numToSelect = Math.floor(Math.random() * 2) + 2;
-            const shuffled = options.sort(() => 0.5 - Math.random());
-            // Clear all selections first
-            options.forEach(opt => opt.selected = false);
-            // Select random options
-            shuffled.slice(0, numToSelect).forEach(opt => opt.selected = true);
-            // Refresh to update the display
-            select3.refresh();
-            refreshStatus.textContent = `✅ Selected ${numToSelect} random options - display refreshed`;
-        });
-        document.getElementById('clearSelectionBtn').addEventListener('click', () => {
-            const nativeSelect = document.getElementById('select3');
-            Array.from(nativeSelect.options).forEach(opt => opt.selected = false);
-            select3.refresh();
-            refreshStatus.textContent = '✅ Cleared all selections - display refreshed';
-        });
-        document.getElementById('refreshBtn').addEventListener('click', () => {
-            select3.refresh();
-            refreshStatus.textContent = '✅ Display refreshed';
-        });
-        // Listen to refreshed event
-        document.getElementById('select3').addEventListener('refreshed', () => {
-            logEvent('select3', 'refreshed');
-        });
-        // Initial log message
-        logEvent('page', 'Examples initialized');
-    </script>
-</body>
-</html>

package/examples/select/formdata-remote.html DELETED Viewed

@@ -1,161 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Remote Select FormData Test</title>
-		<link rel="stylesheet" href="../../dist/styles.css" />
-	</head>
-	<body class="bg-gray-50 min-h-screen">
-		<div class="bg-white rounded-lg shadow p-8 w-full max-w-2xl mt-10 mx-auto">
-			<h1 class="text-xl font-semibold text-gray-900 mb-2">
-				Remote Select FormData Test
-			</h1>
-			<p class="text-sm text-gray-600 mb-6">
-				Verifies that remote KTSelect fields are included in FormData.
-			</p>
-			<form id="testForm" class="flex flex-col gap-6">
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">
-						Regular Input (Control)
-					</label>
-					<input
-						type="text"
-						name="regularField"
-						value="test value"
-						class="w-full px-3 py-2 border border-gray-300 rounded"
-						placeholder="Regular input field" />
-				</div>
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">
-						Local KTSelect (Control)
-					</label>
-					<select
-						name="localSelect"
-						data-kt-select="true"
-						class="kt-select">
-						<option value="">Select an option...</option>
-						<option value="option1">Option 1</option>
-						<option value="option2" selected>Option 2</option>
-						<option value="option3">Option 3</option>
-					</select>
-				</div>
-				<div>
-					<label class="block mb-2 font-medium text-gray-700">
-						Remote KTSelect (Test Subject)
-					</label>
-					<select
-						name="remoteSelect"
-						data-kt-select="true"
-						data-kt-select-remote="true"
-						data-kt-select-data-url="https://jsonplaceholder.typicode.com/users"
-						data-kt-select-data-value-field="id"
-						data-kt-select-data-field-text="name"
-						data-kt-select-placeholder="Select a user..."
-						class="kt-select">
-						<option value="">Select a user...</option>
-					</select>
-				</div>
-				<div class="flex gap-3">
-					<button
-						type="submit"
-						class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded hover:bg-gray-800">
-						Test FormData
-					</button>
-					<button
-						type="button"
-						id="checkNativeValue"
-						class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50">
-						Check Native Value
-					</button>
-				</div>
-			</form>
-			<div id="results" class="mt-6 space-y-3 text-sm"></div>
-			<div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded text-sm">
-				<div class="font-medium text-gray-900 mb-2">Test Steps:</div>
-				<ol class="list-decimal list-inside space-y-1 text-gray-700">
-					<li>Wait for remote data to load</li>
-					<li>Select a user from the remote dropdown</li>
-					<li>Click "Test FormData"</li>
-					<li>Verify remoteSelect field is included</li>
-				</ol>
-			</div>
-		</div>
-		<script src="../../dist/ktui.js"></script>
-		<script>
-			document.addEventListener('DOMContentLoaded', function () {
-				// Initialize KTSelect components
-				if (typeof KTSelect !== 'undefined') {
-					KTSelect.init();
-				}
-				const form = document.getElementById('testForm');
-				const resultsDiv = document.getElementById('results');
-				const remoteSelectEl = document.querySelector(
-					'select[name="remoteSelect"]',
-				);
-				const checkNativeBtn = document.getElementById('checkNativeValue');
-				checkNativeBtn.addEventListener('click', function () {
-					resultsDiv.innerHTML = '';
-					const div = document.createElement('div');
-					div.className = 'p-3 bg-white border border-gray-200 rounded';
-					const nativeValue = remoteSelectEl.value;
-					const selectedOption = remoteSelectEl.querySelector(
-						'option[selected]',
-					);
-					div.innerHTML = `
-						<div class="font-medium text-gray-900 mb-2">Native Select State</div>
-						<div class="space-y-1 text-gray-700">
-							<div>Value: <code class="bg-gray-100 px-1 rounded text-xs">"${nativeValue}"</code></div>
-							<div>Selected Option: ${selectedOption ? `"${selectedOption.value}"` : 'None'}</div>
-						</div>
-					`;
-					resultsDiv.appendChild(div);
-				});
-				form.addEventListener('submit', function (e) {
-					e.preventDefault();
-					resultsDiv.innerHTML = '';
-					const formData = new FormData(form);
-					const entries = Array.from(formData.entries());
-					const resultDiv = document.createElement('div');
-					resultDiv.className = 'p-3 bg-white border border-gray-200 rounded';
-					resultDiv.innerHTML = `
-						<div class="font-medium text-gray-900 mb-2">FormData Entries (${entries.length})</div>
-						<ul class="space-y-1">
-							${entries.map(([key, value]) => `<li class="text-xs font-mono text-gray-700"><span class="font-medium">${key}:</span> "${value}"</li>`).join('')}
-						</ul>
-					`;
-					resultsDiv.appendChild(resultDiv);
-					const remoteSelectValue = formData.get('remoteSelect');
-					const verdict = document.createElement('div');
-					verdict.className = `p-3 mt-3 rounded border ${
-						remoteSelectValue
-							? 'bg-white border-gray-900'
-							: 'bg-gray-100 border-gray-400'
-					}`;
-					verdict.innerHTML = `
-						<div class="font-medium ${remoteSelectValue ? 'text-gray-900' : 'text-gray-700'}">
-							${remoteSelectValue ? 'PASS' : 'FAIL'}: Remote Select Field
-						</div>
-					`;
-					resultsDiv.appendChild(verdict);
-				});
-			});
-		</script>
-	</body>
-</html>

package/examples/select/global-config.html DELETED Viewed

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KTSelect Global Config Test</title>
-    <link href="../../dist/styles.css" rel="stylesheet">
-    <script src="../../dist/ktui.js"></script>
-</head>
-<body class="p-8">
-    <div class="max-w-2xl mx-auto space-y-8">
-        <div>
-            <h1 class="text-3xl font-bold mb-4">KTSelect.config() Test</h1>
-            <p class="text-gray-600 mb-6">
-                This page demonstrates the <code class="bg-gray-100 px-2 py-1 rounded">KTSelect.config()</code>
-                static method for setting global defaults.
-            </p>
-        </div>
-        <div class="space-y-4">
-            <h2 class="text-xl font-semibold">Test 1: Global Config Applied</h2>
-            <p class="text-sm text-gray-600">
-                All selects below should have search enabled and custom placeholder from global config.
-            </p>
-            <div>
-                <label class="block text-sm font-medium mb-2">Select 1 (inherits global config)</label>
-                <select class="kt-select" id="select1">
-                    <option value="">Select an option</option>
-                    <option value="1">Option 1</option>
-                    <option value="2">Option 2</option>
-                    <option value="3">Option 3</option>
-                    <option value="4">Option 4</option>
-                    <option value="5">Option 5</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-sm font-medium mb-2">Select 2 (inherits global config)</label>
-                <select class="kt-select" id="select2">
-                    <option value="">Select an option</option>
-                    <option value="apple">Apple</option>
-                    <option value="banana">Banana</option>
-                    <option value="cherry">Cherry</option>
-                    <option value="date">Date</option>
-                    <option value="elderberry">Elderberry</option>
-                </select>
-            </div>
-            <div>
-                <label class="block text-sm font-medium mb-2">Select 3 (overrides global config - no search)</label>
-                <select class="kt-select" id="select3">
-                    <option value="">Select an option</option>
-                    <option value="red">Red</option>
-                    <option value="green">Green</option>
-                    <option value="blue">Blue</option>
-                </select>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Set global defaults once
-        KTSelect.config({
-            enableSearch: true,
-            searchPlaceholder: 'Type to search...',
-            dropdownZindex: 9999,
-        });
-        // These selects inherit the global config
-        const select1 = new KTSelect(document.getElementById('select1'));
-        const select2 = new KTSelect(document.getElementById('select2'));
-        // This select overrides the global config
-        const select3 = new KTSelect(document.getElementById('select3'), {
-            enableSearch: false
-        });
-    </script>
-</body>
-</html>

package/examples/select/icon-multiple.html DELETED Viewed

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Icon Multiple</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Icon Multiple</label>
-				<select
-					class="kt-select kt-select-lg"
-					data-kt-select="true"
-					data-kt-select-multiple="true"
-					data-kt-select-placeholder="Select an option"
-					data-kt-select-config='{
-						"displaySeparator": ", ",
-						"displayTemplate": "<div class=\"flex items-center gap-2 [&>svg]:size-3.5\">{{icon}}<span class=\"text-foreground\">{{text}}</span></div>",
-						"optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}} <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
-					}'>
-					<option value="hardwere" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"19\" cy=\"6\" r=\"3\"/><path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/><path d=\"M12 17v4\/><path d=\"M8 21h8\"/></svg>"}'>
-						Hardwere
-					</option>
-					<option value="software" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><path d=\"M10 10.5 8 13l2 2.5\/><path d=\"m14 10.5 2 2.5-2 2.5\/><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/></svg>"}'>
-						Software
-					</option>
-					<option value="network" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/><path d=\"M12 12V8\/></svg>"}'>
-						Network
-					</option>
-					<option value="storage" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5V19A9 3 0 0 0 21 19V5\/><path d=\"M3 12A9 3 0 0 0 21 12\"/></svg>"}'>
-						Storage
-					</option>
-					<option value="security" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"12\" cy=\"16\" r=\"1\"/><rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/></svg>"}'>
-						Security
-					</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/icon.html DELETED Viewed

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Icon</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Icon</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-placeholder="Select an option..."
-					data-kt-select-config='{
-						"displayTemplate": "<div class=\"flex items-center gap-2\">{{icon}}<span class=\"text-foreground\">{{text}}</span></div>",
-						"optionTemplate": "<div class=\"flex items-center gap-2\">{{icon}} <span class=\"text-foreground\">{{text}}</span></div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg></div>"
-					}'>
-					<option value="hardwere" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"19\" cy=\"6\" r=\"3\"/><path d=\"M22 12v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9\/><path d=\"M12 17v4\/><path d=\"M8 21h8\"/></svg>"}'>
-						Hardwere
-					</option>
-					<option value="software" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><path d=\"M10 10.5 8 13l2 2.5\/><path d=\"m14 10.5 2 2.5-2 2.5\/><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z\"/></svg>"}'>
-						Software
-					</option>
-					<option value="network" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\/><path d=\"M12 12V8\/></svg>"}'>
-						Network
-					</option>
-					<option value="storage" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5V19A9 3 0 0 0 21 19V5\/><path d=\"M3 12A9 3 0 0 0 21 12\"/></svg>"}'>
-						Storage
-					</option>
-					<option value="security" data-kt-select-option='{"icon": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4 text-muted-foreground\"><circle cx=\"12\" cy=\"16\" r=\"1\"/><rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\"/><path d=\"M7 10V7a5 5 0 0 1 10 0v3\"/></svg>"}'>
-						Storage
-					</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>

package/examples/select/max-selection.html DELETED Viewed

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Max Selection</title>
-	<link rel="stylesheet" href="../../dist/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-	<div class="bg-white rounded-lg shadow p-8 w-full max-w-sm mt-10 mx-auto">
-		<form class="flex flex-col gap-6">
-			<div>
-				<label class="block mb-2 font-medium text-gray-700" for="select-basic">Max Selection</label>
-				<select
-					class="kt-select"
-					data-kt-select="true"
-					data-kt-select-multiple="true"
-					data-kt-select-max-selections="3"
-					data-kt-select-placeholder="Select up to 3 options">
-					<option value="react">React</option>
-					<option value="nextjs">Next.js</option>
-					<option value="angular">Angular</option>
-					<option value="vue">Vue</option>
-					<option value="svelte">Svelte</option>
-					<option value="ember">Ember</option>
-					<option value="nuxt">Nuxt.js</option>
-				</select>
-			</div>
-		</form>
-	</div>
-	<script src="../../dist/ktui.js"></script>
-</body>
-</html>