@keenthemes/ktui 1.1.6 → 1.2.0

package/README.md

@@ -223,6 +223,30 @@ For specific cases, you can use the `rtl:*` Tailwind modifier to easily control
 
 ---
 
+## Agent skills
+
+KTUI ships [Agent Skills](https://agentskills.io) so that agentic coding tools (e.g. Cursor, Claude Code) can use KtUI correctly—imports, init pattern, and docs. You can install skills in two ways; both use the same content from this package.
+
+### Install from npm (recommended)
+
+After installing the package, copy or symlink the skills you need from the package into your project or your agent’s skills directory:
+
+- **Location:** `node_modules/@keenthemes/ktui/skills/`
+- **Example (Cursor):** Copy or symlink a skill into `.cursor/skills/`, e.g.  
+  `cp -r node_modules/@keenthemes/ktui/skills/ktui-components .cursor/skills/`
+
+### Install via CLI (skills CLI)
+
+You can also install from the GitHub repo using the [skills CLI](https://skills.sh/docs) (no separate registration required). The repo must contain a top-level `skills/` directory with skill subfolders, each having a valid `SKILL.md`; once that is on the default branch, run:
+
+```bash
+npx skills add keenthemes/ktui
+```
+
+Choose the **Symlink** option when prompted to keep one copy and simplify updates. Both this method and the npm copy above provide the same skill content. Skills appear on the [skills.sh](https://skills.sh) leaderboard automatically as users install them (anonymous telemetry).
+
+---
+
 ## License
 
 KTUI is distributed under the MIT license. See [LICENSE.md](https://github.com/keenthemes/ktui/blob/main/LICENSE.md) for full details.

package/dist/ktui.js

@@ -6645,6 +6645,267 @@ if (typeof window !== 'undefined') {
 }
 
 
+/***/ }),
+
+/***/ 4191:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTRating = void 0;
+var rating_1 = __webpack_require__(3298);
+Object.defineProperty(exports, "KTRating", ({ enumerable: true, get: function () { return rating_1.KTRating; } }));
+
+
+/***/ }),
+
+/***/ 3298:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTRating = void 0;
+var data_1 = __webpack_require__(8716);
+var component_1 = __webpack_require__(2658);
+var STAR_SVG = '<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>';
+var HEART_SVG = '<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>';
+var KTRating = /** @class */ (function (_super) {
+    __extends(KTRating, _super);
+    function KTRating(element, config) {
+        if (config === void 0) { config = null; }
+        var _this = _super.call(this) || this;
+        _this._name = 'rating';
+        _this._defaultConfig = {
+            value: 0,
+            max: 5,
+            readonly: false,
+            name: 'rating',
+            symbol: 'star',
+            lazy: false,
+        };
+        _this._config = _this._defaultConfig;
+        _this._container = null;
+        _this._changeListener = null;
+        if (data_1.default.has(element, _this._name))
+            return _this;
+        _this._init(element);
+        _this._buildConfig(config);
+        _this._render();
+        if (!_this._config.readonly) {
+            _this._handlers();
+        }
+        return _this;
+    }
+    KTRating.prototype._getMax = function () {
+        var max = Number(this._getOption('max'));
+        return Number.isFinite(max) && max >= 1 ? Math.floor(max) : 5;
+    };
+    KTRating.prototype._getValue = function () {
+        var v = Number(this._getOption('value'));
+        var max = this._getMax();
+        return Number.isFinite(v) && v >= 0 && v <= max ? Math.floor(v) : 0;
+    };
+    KTRating.prototype._render = function () {
+        if (!this._element)
+            return;
+        var max = this._getMax();
+        var value = this._getValue();
+        var readonly = this._config.readonly === true;
+        var symbol = this._config.symbol || 'star';
+        var name = this._config.name || 'rating';
+        var isStar = symbol !== 'heart';
+        var filledClass = isStar
+            ? 'text-yellow-400 dark:text-yellow-600'
+            : 'text-red-500 dark:text-red-500';
+        var unfilledClass = 'text-muted-foreground/50 dark:text-muted-foreground/50';
+        var path = isStar ? STAR_SVG : HEART_SVG;
+        var svg = "<svg class=\"shrink-0 size-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">".concat(path, "</svg>");
+        var container = document.createElement('div');
+        container.className = 'kt-rating flex flex-row-reverse justify-end items-center gap-0';
+        container.setAttribute('role', readonly ? 'img' : 'group');
+        container.setAttribute('aria-label', "Rating: ".concat(value, " of ").concat(max));
+        if (readonly) {
+            container.setAttribute('aria-valuenow', String(value));
+            container.setAttribute('aria-valuemin', '0');
+            container.setAttribute('aria-valuemax', String(max));
+        }
+        if (readonly) {
+            for (var i = max; i >= 1; i--) {
+                var filled = i <= value;
+                var span = document.createElement('span');
+                span.className = filled ? filledClass : unfilledClass;
+                span.innerHTML = svg;
+                container.appendChild(span);
+            }
+        }
+        else {
+            container.setAttribute('aria-valuenow', String(value));
+            container.setAttribute('aria-valuemin', '1');
+            container.setAttribute('aria-valuemax', String(max));
+            for (var i = max; i >= 1; i--) {
+                var id = "kt-rating-".concat(this._uid, "-").concat(i);
+                var radio = document.createElement('input');
+                radio.type = 'radio';
+                radio.name = name;
+                radio.value = String(i);
+                radio.id = id;
+                radio.className =
+                    'peer -ms-5 size-5 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0';
+                radio.setAttribute('aria-label', "Rate ".concat(i, " of ").concat(max));
+                if (i === value)
+                    radio.checked = true;
+                var label = document.createElement('label');
+                label.htmlFor = id;
+                label.setAttribute('data-kt-rating-value', String(i));
+                label.className = "cursor-pointer kt-rating-label ".concat(i <= value ? filledClass : unfilledClass);
+                label.innerHTML = svg;
+                container.appendChild(radio);
+                container.appendChild(label);
+            }
+            this._updateInteractiveDisplay();
+        }
+        this._element.innerHTML = '';
+        this._element.appendChild(container);
+        this._container = container;
+    };
+    KTRating.prototype._updateInteractiveDisplay = function () {
+        if (!this._container || this._config.readonly)
+            return;
+        var val = this.getValue();
+        var max = this._getMax();
+        var isStar = this._config.symbol !== 'heart';
+        var filledClass = isStar
+            ? 'text-yellow-400 dark:text-yellow-600'
+            : 'text-red-500 dark:text-red-500';
+        var unfilledClass = 'text-muted-foreground/50 dark:text-muted-foreground/50';
+        var filledTokens = filledClass.split(' ');
+        var unfilledTokens = unfilledClass.split(' ');
+        this._container.querySelectorAll('.kt-rating-label').forEach(function (label) {
+            var _a, _b;
+            var v = parseInt(label.getAttribute('data-kt-rating-value') || '0', 10);
+            var filled = v <= (val !== null && val !== void 0 ? val : 0);
+            (_a = label.classList).remove.apply(_a, __spreadArray(__spreadArray([], filledTokens, false), unfilledTokens, false));
+            (_b = label.classList).add.apply(_b, (filled ? filledTokens : unfilledTokens));
+        });
+        this._container.setAttribute('aria-valuenow', val != null ? String(val) : '0');
+        this._container.setAttribute('aria-label', "Rating: ".concat(val !== null && val !== void 0 ? val : 0, " of ").concat(max));
+    };
+    KTRating.prototype._handlers = function () {
+        var _this = this;
+        if (!this._container)
+            return;
+        this._changeListener = function () {
+            _this._updateInteractiveDisplay();
+            var val = _this.getValue();
+            _this._fireEvent('change', { value: val });
+            _this._dispatchEvent('kt.rating.change', { value: val });
+        };
+        this._container.addEventListener('change', this._changeListener);
+    };
+    KTRating.prototype.getValue = function () {
+        var _a;
+        if (!this._element)
+            return null;
+        if (this._config.readonly) {
+            var v = this._getValue();
+            return v > 0 ? v : null;
+        }
+        var radio = (_a = this._container) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="radio"]:checked');
+        if (!radio)
+            return null;
+        var n = parseInt(radio.value, 10);
+        return Number.isFinite(n) ? n : null;
+    };
+    KTRating.prototype.setValue = function (value) {
+        if (!this._container)
+            return;
+        var max = this._getMax();
+        if (this._config.readonly)
+            return;
+        if (value !== null && value >= 1 && value <= max) {
+            var radio = this._container.querySelector("input[type=\"radio\"][value=\"".concat(value, "\"]"));
+            if (radio) {
+                radio.checked = true;
+                this._updateInteractiveDisplay();
+            }
+        }
+        else {
+            this._container.querySelectorAll('input[type="radio"]').forEach(function (r) {
+                r.checked = false;
+            });
+            this._updateInteractiveDisplay();
+        }
+    };
+    KTRating.prototype.dispose = function () {
+        if (this._container && this._changeListener) {
+            this._container.removeEventListener('change', this._changeListener);
+            this._changeListener = null;
+        }
+        this._container = null;
+        _super.prototype.dispose.call(this);
+    };
+    KTRating.getInstance = function (element) {
+        if (!element)
+            return null;
+        if (data_1.default.has(element, 'rating')) {
+            return data_1.default.get(element, 'rating');
+        }
+        if (element.getAttribute('data-kt-rating') !== null) {
+            return new KTRating(element);
+        }
+        return null;
+    };
+    KTRating.createInstances = function () {
+        var elements = document.querySelectorAll('[data-kt-rating]');
+        elements.forEach(function (el) {
+            if (el.getAttribute('data-kt-rating-lazy') === 'true')
+                return;
+            new KTRating(el);
+        });
+    };
+    KTRating.init = function () {
+        KTRating.createInstances();
+    };
+    return KTRating;
+}(component_1.default));
+exports.KTRating = KTRating;
+if (typeof window !== 'undefined') {
+    window.KTRating = KTRating;
+}
+
+
 /***/ }),
 
 /***/ 4139:
@@ -6768,6 +7029,201 @@ if (typeof window !== 'undefined') {
 }
 
 
+/***/ }),
+
+/***/ 4714:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTRepeater = void 0;
+var repeater_1 = __webpack_require__(2924);
+Object.defineProperty(exports, "KTRepeater", ({ enumerable: true, get: function () { return repeater_1.KTRepeater; } }));
+
+
+/***/ }),
+
+/***/ 2924:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTRepeater = void 0;
+var data_1 = __webpack_require__(8716);
+var dom_1 = __webpack_require__(9010);
+var component_1 = __webpack_require__(2658);
+var DELETE_SELECTOR = '[data-kt-repeater-delete]';
+var KTRepeater = /** @class */ (function (_super) {
+    __extends(KTRepeater, _super);
+    function KTRepeater(element, config) {
+        if (config === void 0) { config = null; }
+        var _this = _super.call(this) || this;
+        _this._name = 'repeater';
+        _this._defaultConfig = {
+            target: '',
+            wrapper: '',
+            limit: 0,
+        };
+        _this._config = _this._defaultConfig;
+        _this._wrapperElement = null;
+        if (data_1.default.has(element, _this._name))
+            return _this;
+        _this._init(element);
+        _this._buildConfig(config);
+        if (!_this._element)
+            return _this;
+        _this._wrapperElement = dom_1.default.getElement(_this._getOption('wrapper'));
+        if (!_this._wrapperElement)
+            return _this;
+        _this._deleteHandler = _this._handleDeleteClick.bind(_this);
+        _this._handlers();
+        _this._syncTriggerDisabled();
+        _this._syncDeleteButtonsDisabled();
+        return _this;
+    }
+    KTRepeater.prototype._getTargetElement = function () {
+        return dom_1.default.getElement(this._getOption('target'));
+    };
+    KTRepeater.prototype._getCloneCount = function () {
+        return this._wrapperElement ? this._wrapperElement.children.length : 0;
+    };
+    KTRepeater.prototype._syncTriggerDisabled = function () {
+        if (!this._element || !this._wrapperElement)
+            return;
+        var limit = Number(this._getOption('limit')) || 0;
+        if (limit <= 0)
+            return;
+        var atLimit = this._getCloneCount() >= limit;
+        if (this._element.hasAttribute('disabled') !== atLimit) {
+            if (atLimit) {
+                this._element.setAttribute('disabled', '');
+            }
+            else {
+                this._element.removeAttribute('disabled');
+            }
+        }
+    };
+    KTRepeater.prototype._syncDeleteButtonsDisabled = function () {
+        if (!this._wrapperElement)
+            return;
+        var count = this._wrapperElement.children.length;
+        var isOnlyOne = count <= 1;
+        Array.from(this._wrapperElement.children).forEach(function (row) {
+            var deleteBtn = row.querySelector(DELETE_SELECTOR);
+            if (!deleteBtn)
+                return;
+            if (isOnlyOne) {
+                deleteBtn.setAttribute('disabled', '');
+                deleteBtn.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                deleteBtn.removeAttribute('disabled');
+                deleteBtn.removeAttribute('aria-disabled');
+            }
+        });
+    };
+    KTRepeater.prototype._handlers = function () {
+        var _this = this;
+        var _a;
+        if (!this._element)
+            return;
+        this._element.addEventListener('click', function (event) {
+            event.preventDefault();
+            _this._add();
+        });
+        (_a = this._wrapperElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this._deleteHandler);
+    };
+    KTRepeater.prototype._handleDeleteClick = function (event) {
+        var target = event.target;
+        var deleteEl = target.closest(DELETE_SELECTOR);
+        if (!deleteEl || !this._wrapperElement)
+            return;
+        // Keep at least one row so the template remains for cloning
+        if (this._wrapperElement.children.length <= 1)
+            return;
+        var cloneContainer = Array.from(this._wrapperElement.children).find(function (child) { return child.contains(deleteEl); });
+        if (!cloneContainer)
+            return;
+        dom_1.default.remove(cloneContainer);
+        this._syncTriggerDisabled();
+        this._syncDeleteButtonsDisabled();
+    };
+    KTRepeater.prototype._add = function () {
+        if (!this._wrapperElement)
+            return;
+        var targetEl = this._getTargetElement();
+        if (!targetEl)
+            return;
+        var limit = Number(this._getOption('limit')) || 0;
+        var count = this._getCloneCount();
+        if (limit > 0 && count >= limit)
+            return;
+        var clone = targetEl.cloneNode(true);
+        this._wrapperElement.appendChild(clone);
+        var payload = { element: clone };
+        this._fireEvent('add', payload);
+        this._dispatchEvent('add', payload);
+        this._syncTriggerDisabled();
+        this._syncDeleteButtonsDisabled();
+    };
+    KTRepeater.prototype.add = function () {
+        this._add();
+    };
+    KTRepeater.getInstance = function (element) {
+        if (!element)
+            return null;
+        if (data_1.default.has(element, 'repeater')) {
+            return data_1.default.get(element, 'repeater');
+        }
+        return null;
+    };
+    KTRepeater.getOrCreateInstance = function (element, config) {
+        return this.getInstance(element) || new KTRepeater(element, config !== null && config !== void 0 ? config : undefined);
+    };
+    KTRepeater.createInstances = function () {
+        document.querySelectorAll('[data-kt-repeater]').forEach(function (el) {
+            new KTRepeater(el);
+        });
+    };
+    KTRepeater.init = function () {
+        KTRepeater.createInstances();
+    };
+    KTRepeater.prototype.dispose = function () {
+        var _a;
+        (_a = this._wrapperElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._deleteHandler);
+        _super.prototype.dispose.call(this);
+    };
+    return KTRepeater;
+}(component_1.default));
+exports.KTRepeater = KTRepeater;
+if (typeof window !== 'undefined') {
+    window.KTRepeater = KTRepeater;
+}
+
+
 /***/ }),
 
 /***/ 1851:
@@ -11465,6 +11921,9 @@ var KTSelect = /** @class */ (function (_super) {
     return KTSelect;
 }(component_1.default));
 exports.KTSelect = KTSelect;
+if (typeof window !== 'undefined') {
+    window.KTSelect = KTSelect;
+}
 
 
 /***/ }),
@@ -15340,7 +15799,7 @@ exports["default"] = KTUtils;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
+exports.KTRepeater = exports.KTRating = exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
 var dom_1 = __webpack_require__(9010);
 var dropdown_1 = __webpack_require__(5071);
 var modal_1 = __webpack_require__(3395);
@@ -15363,6 +15822,8 @@ var toggle_password_1 = __webpack_require__(2232);
 var datatable_1 = __webpack_require__(2626);
 var select_1 = __webpack_require__(494);
 var toast_1 = __webpack_require__(6265);
+var rating_1 = __webpack_require__(4191);
+var repeater_1 = __webpack_require__(4714);
 var dropdown_2 = __webpack_require__(5071);
 Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_2.KTDropdown; } }));
 var modal_2 = __webpack_require__(3395);
@@ -15405,6 +15866,10 @@ var select_2 = __webpack_require__(494);
 Object.defineProperty(exports, "KTSelect", ({ enumerable: true, get: function () { return select_2.KTSelect; } }));
 var toast_2 = __webpack_require__(6265);
 Object.defineProperty(exports, "KTToast", ({ enumerable: true, get: function () { return toast_2.KTToast; } }));
+var rating_2 = __webpack_require__(4191);
+Object.defineProperty(exports, "KTRating", ({ enumerable: true, get: function () { return rating_2.KTRating; } }));
+var repeater_2 = __webpack_require__(4714);
+Object.defineProperty(exports, "KTRepeater", ({ enumerable: true, get: function () { return repeater_2.KTRepeater; } }));
 var KTComponents = {
     init: function () {
         dropdown_1.KTDropdown.init();
@@ -15428,6 +15893,8 @@ var KTComponents = {
         datatable_1.KTDataTable.init();
         select_1.KTSelect.init();
         toast_1.KTToast.init();
+        rating_1.KTRating.init();
+        repeater_1.KTRepeater.init();
     },
 };
 exports["default"] = KTComponents;