svelte-comp 1.3.3 → 1.3.6

package/dist/lib/__tests__/Select.test.js

@@ -0,0 +1,408 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+// $lib/__tests__/Select.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import Select from "../Select.svelte";
+var baseOptions = [
+    { label: "One", value: "1" },
+    { label: "Two", value: "2" },
+    { label: "Disabled Option", value: "3", disabled: true },
+];
+var renderSelect = function (props) {
+    if (props === void 0) { props = {}; }
+    return render(Select, {
+        props: __assign({ label: "Choose something", placeholder: "Pick a value", options: baseOptions }, props),
+    });
+};
+describe("Select (combobox)", function () {
+    it("renders label and placeholder text", function () {
+        var _a = renderSelect(), getByText = _a.getByText, getByRole = _a.getByRole;
+        expect(getByText("Choose something")).toBeTruthy();
+        expect(getByRole("combobox").textContent).toContain("Pick a value");
+    });
+    it("opens listbox and shows options on click", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, getAllByRole, trigger, listbox;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = renderSelect(), getByRole = _a.getByRole, getAllByRole = _a.getAllByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _b.sent();
+                    listbox = getByRole("listbox");
+                    expect(listbox).toBeTruthy();
+                    expect(getAllByRole("option")).toHaveLength(baseOptions.length);
+                    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("opens listbox via keyboard (Space and Enter)", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole, trigger;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByRole = renderSelect({ id: "kb-open" }).getByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.keyDown(trigger, { key: " " })];
+                case 1:
+                    _a.sent();
+                    expect(getByRole("listbox")).toBeTruthy();
+                    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+                    return [4 /*yield*/, fireEvent.keyDown(getByRole("listbox"), { key: "Escape" })];
+                case 2:
+                    _a.sent();
+                    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+                    return [4 /*yield*/, fireEvent.keyDown(trigger, { key: "Enter" })];
+                case 3:
+                    _a.sent();
+                    expect(getByRole("listbox")).toBeTruthy();
+                    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("updates value, hidden input and calls onChange when selecting an option", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, _a, getByRole, container, listbox, optionButtons, second, hidden;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    handle = vi.fn();
+                    _a = renderSelect({ onChange: handle }), getByRole = _a.getByRole, container = _a.container;
+                    return [4 /*yield*/, fireEvent.click(getByRole("combobox"))];
+                case 1:
+                    _b.sent();
+                    listbox = getByRole("listbox");
+                    optionButtons = Array.from(listbox.querySelectorAll("button"));
+                    second = optionButtons.find(function (btn) { var _a; return (_a = btn.textContent) === null || _a === void 0 ? void 0 : _a.includes("Two"); });
+                    expect(second).toBeTruthy();
+                    return [4 /*yield*/, fireEvent.click(second)];
+                case 2:
+                    _b.sent();
+                    expect(handle).toHaveBeenCalledWith("2");
+                    expect(getByRole("combobox").textContent).toContain("Two");
+                    hidden = container.querySelector('input[type="hidden"]');
+                    expect(hidden === null || hidden === void 0 ? void 0 : hidden.value).toBe("2");
+                    expect(container.querySelector('[role="listbox"]')).toBeNull();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("ignores clicks on disabled option", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, getByRole, listbox, disabled;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handle = vi.fn();
+                    getByRole = renderSelect({ onChange: handle }).getByRole;
+                    return [4 /*yield*/, fireEvent.click(getByRole("combobox"))];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    disabled = Array.from(listbox.querySelectorAll("button")).find(function (btn) { var _a; return (_a = btn.textContent) === null || _a === void 0 ? void 0 : _a.includes("Disabled"); });
+                    expect(disabled === null || disabled === void 0 ? void 0 : disabled.getAttribute("disabled")).not.toBeNull();
+                    return [4 /*yield*/, fireEvent.click(disabled)];
+                case 2:
+                    _a.sent();
+                    expect(handle).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("shows selected label when value prop is set and syncs hidden input", function () {
+        var _a = renderSelect({ value: "2" }), getByRole = _a.getByRole, container = _a.container;
+        var trigger = getByRole("combobox");
+        expect(trigger.textContent).toContain("Two");
+        var hidden = container.querySelector('input[type="hidden"]');
+        expect(hidden === null || hidden === void 0 ? void 0 : hidden.value).toBe("2");
+    });
+    it("updates displayed value when value prop changes externally", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, rerender, trigger;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = renderSelect({ value: "1" }), getByRole = _a.getByRole, rerender = _a.rerender;
+                    trigger = getByRole("combobox");
+                    expect(trigger.textContent).toContain("One");
+                    return [4 /*yield*/, rerender({ value: "2" })];
+                case 1:
+                    _b.sent();
+                    expect(trigger.textContent).toContain("Two");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("forwards describedBy/invalid/required props and renders help", function () {
+        var _a = renderSelect({
+            describedBy: "helper-id",
+            help: "Helper text",
+            invalid: true,
+            required: true,
+        }), getByRole = _a.getByRole, getByText = _a.getByText;
+        var trigger = getByRole("combobox");
+        expect(trigger.getAttribute("aria-describedby")).toBe("helper-id");
+        expect(trigger.getAttribute("aria-invalid")).toBe("true");
+        expect(trigger.getAttribute("aria-required")).toBe("true");
+        var help = getByText("Helper text");
+        expect(help.id).toBe("helper-id");
+    });
+    it("does not open when disabled prop is true", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, queryByRole, trigger;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = renderSelect({ disabled: true }), getByRole = _a.getByRole, queryByRole = _a.queryByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _b.sent();
+                    expect(queryByRole("listbox")).toBeNull();
+                    return [4 /*yield*/, fireEvent.keyDown(trigger, { key: "ArrowDown" })];
+                case 2:
+                    _b.sent();
+                    expect(queryByRole("listbox")).toBeNull();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("closes when clicking overlay backdrop", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, queryByRole, container, trigger, overlay;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = renderSelect(), getByRole = _a.getByRole, queryByRole = _a.queryByRole, container = _a.container;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _b.sent();
+                    overlay = container.querySelector('[role="presentation"]');
+                    expect(overlay).toBeTruthy();
+                    return [4 /*yield*/, fireEvent.click(overlay)];
+                case 2:
+                    _b.sent();
+                    expect(queryByRole("listbox")).toBeNull();
+                    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("supports ArrowDown/ArrowUp from trigger and sets aria-activedescendant", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole, trigger, listbox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByRole = renderSelect({ id: "custom-select" }).getByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.keyDown(trigger, { key: "ArrowDown" })];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("custom-select-opt-0");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "ArrowDown" })];
+                case 2:
+                    _a.sent();
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("custom-select-opt-1");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "ArrowUp" })];
+                case 3:
+                    _a.sent();
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("custom-select-opt-0");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("skips disabled options when navigating with arrows", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var options, getByRole, trigger, listbox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    options = [
+                        { label: "First", value: "1" },
+                        { label: "Cannot pick", value: "2", disabled: true },
+                        { label: "Second", value: "3" },
+                    ];
+                    getByRole = renderSelect({ id: "nav-select", options: options }).getByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "ArrowDown" })];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "ArrowDown" })];
+                case 3:
+                    _a.sent();
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("nav-select-opt-2");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("supports Home/End navigation to first/last enabled option", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var options, getByRole, trigger, listbox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    options = [
+                        { label: "Disabled first", value: "0", disabled: true },
+                        { label: "A", value: "1" },
+                        { label: "B", value: "2" },
+                        { label: "Disabled last", value: "3", disabled: true },
+                    ];
+                    getByRole = renderSelect({ id: "home-end", options: options }).getByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "End" })];
+                case 2:
+                    _a.sent();
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("home-end-opt-2");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "Home" })];
+                case 3:
+                    _a.sent();
+                    expect(listbox.getAttribute("aria-activedescendant")).toBe("home-end-opt-1");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("selects highlighted option via Space or Enter and closes listbox", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, getByRole, listbox, listbox2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handle = vi.fn();
+                    getByRole = renderSelect({ onChange: handle }).getByRole;
+                    return [4 /*yield*/, fireEvent.click(getByRole("combobox"))];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "ArrowDown" })];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: " " })];
+                case 3:
+                    _a.sent();
+                    expect(getByRole("combobox").textContent).toContain("One");
+                    expect(handle).toHaveBeenCalledWith("1");
+                    expect(function () { return getByRole("listbox"); }).toThrow();
+                    return [4 /*yield*/, fireEvent.click(getByRole("combobox"))];
+                case 4:
+                    _a.sent();
+                    listbox2 = getByRole("listbox");
+                    return [4 /*yield*/, fireEvent.keyDown(listbox2, { key: "ArrowDown" })];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.keyDown(listbox2, { key: "Enter" })];
+                case 6:
+                    _a.sent();
+                    expect(getByRole("combobox").textContent).toContain("One");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("respects initial open prop and renders listbox immediately", function () {
+        var getByRole = renderSelect({ open: true }).getByRole;
+        expect(getByRole("listbox")).toBeTruthy();
+        expect(getByRole("combobox").getAttribute("aria-expanded")).toBe("true");
+    });
+    it("keeps Tab handling inside listbox without throwing", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole, trigger, listbox, event, prevent;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByRole = renderSelect().getByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _a.sent();
+                    listbox = getByRole("listbox");
+                    return [4 /*yield*/, Promise.resolve()];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, fireEvent.keyDown(listbox, { key: "End" })];
+                case 3:
+                    _a.sent();
+                    event = new KeyboardEvent("keydown", {
+                        key: "Tab",
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    prevent = vi.fn();
+                    event.preventDefault = prevent;
+                    listbox.dispatchEvent(event);
+                    expect(prevent).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("applies size and variant classes to trigger", function () {
+        var getByRole = renderSelect({ sz: "lg", variant: "filled" }).getByRole;
+        var trigger = getByRole("combobox");
+        expect(trigger.className).toContain("h-9");
+        expect(trigger.className).toContain("bg-[var(--color-bg-muted)]");
+    });
+    it("handles empty options array without crashing", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, queryAllByRole, trigger;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = renderSelect({ options: [] }), getByRole = _a.getByRole, queryAllByRole = _a.queryAllByRole;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _b.sent();
+                    expect(queryAllByRole("option")).toHaveLength(0);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/lib/__tests__/Slider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/__tests__/Slider.test.js

@@ -0,0 +1,213 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+// $lib/__tests__/Slider.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import Slider from "../Slider.svelte";
+describe("Slider", function () {
+    it("renders with default props", function () {
+        var container = render(Slider).container;
+        var slider = container.querySelector('input[type="range"]');
+        expect(slider).toBeDefined();
+        expect(slider.value).toBe("0");
+        expect(slider.min).toBe("0");
+        expect(slider.max).toBe("100");
+        expect(slider.step).toBe("1");
+    });
+    it("respects custom value, min, max and step", function () {
+        var container = render(Slider, {
+            props: {
+                value: 50,
+                min: 0,
+                max: 200,
+                step: 10,
+            },
+        }).container;
+        var slider = container.querySelector('input[type="range"]');
+        expect(slider.value).toBe("50");
+        expect(slider.min).toBe("0");
+        expect(slider.max).toBe("200");
+        expect(slider.step).toBe("10");
+    });
+    it("updates value on input", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnInput, container, slider;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnInput = vi.fn();
+                    container = render(Slider, {
+                        props: { onInput: mockOnInput },
+                    }).container;
+                    slider = container.querySelector('input[type="range"]');
+                    slider.value = "75";
+                    return [4 /*yield*/, fireEvent.input(slider)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(75);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("snaps to step values", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnInput, container, slider;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnInput = vi.fn();
+                    container = render(Slider, {
+                        props: {
+                            value: 0,
+                            min: 0,
+                            max: 100,
+                            step: 10,
+                            onInput: mockOnInput,
+                        },
+                    }).container;
+                    slider = container.querySelector('input[type="range"]');
+                    slider.value = "47";
+                    return [4 /*yield*/, fireEvent.input(slider)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(50);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("handles disabled state", function () {
+        var container = render(Slider, {
+            props: { disabled: true },
+        }).container;
+        var slider = container.querySelector('input[type="range"]');
+        var wrapper = container.querySelector("div");
+        expect(slider.disabled).toBe(true);
+        expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.className).toContain("cursor-not-allowed");
+        expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.className).toContain("opacity-[var(--opacity-disabled)]");
+    });
+    it("shows value when showValue is true", function () {
+        var getByText = render(Slider, {
+            props: { showValue: true, value: 42 },
+        }).getByText;
+        expect(getByText("42")).toBeTruthy();
+    });
+    it("applies correct size classes", function () {
+        var container = render(Slider, {
+            props: { sz: "xl" },
+        }).container;
+        var track = container.querySelector(".absolute.top-1\\/2.-translate-y-1\\/2.w-full");
+        expect(track === null || track === void 0 ? void 0 : track.className).toContain("h-[8px]");
+        var input = container.querySelector('input[type="range"]');
+        expect(input === null || input === void 0 ? void 0 : input.className).toContain("[&::-webkit-slider-thumb]:w-7");
+        expect(input === null || input === void 0 ? void 0 : input.className).toContain("[&::-webkit-slider-thumb]:h-7");
+    });
+    it("applies correct variant classes", function () {
+        var container = render(Slider, {
+            props: { variant: "neutral" },
+        }).container;
+        var wrapper = container.querySelector("div");
+        expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.innerHTML).toContain("bg-[var(--color-bg-secondary)]");
+    });
+    it("handles keyboard navigation", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnInput, container, slider, container2, slider2, container3, slider3, container4, slider4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnInput = vi.fn();
+                    container = render(Slider, {
+                        props: { value: 50, onInput: mockOnInput },
+                    }).container;
+                    slider = container.querySelector('input[type="range"]');
+                    return [4 /*yield*/, fireEvent.keyDown(slider, { key: "ArrowRight" })];
+                case 1:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(51);
+                    mockOnInput.mockClear();
+                    container2 = render(Slider, {
+                        props: { value: 50, onInput: mockOnInput },
+                    }).container;
+                    slider2 = container2.querySelector('input[type="range"]');
+                    return [4 /*yield*/, fireEvent.keyDown(slider2, { key: "ArrowLeft" })];
+                case 2:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(49);
+                    mockOnInput.mockClear();
+                    container3 = render(Slider, {
+                        props: { value: 50, onInput: mockOnInput },
+                    }).container;
+                    slider3 = container3.querySelector('input[type="range"]');
+                    return [4 /*yield*/, fireEvent.keyDown(slider3, { key: "Home" })];
+                case 3:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(0);
+                    mockOnInput.mockClear();
+                    container4 = render(Slider, {
+                        props: { value: 50, onInput: mockOnInput },
+                    }).container;
+                    slider4 = container4.querySelector('input[type="range"]');
+                    return [4 /*yield*/, fireEvent.keyDown(slider4, { key: "End" })];
+                case 4:
+                    _a.sent();
+                    expect(mockOnInput).toHaveBeenCalledWith(100);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("does not respond to track click when disabled", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnInput, container, wrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnInput = vi.fn();
+                    container = render(Slider, {
+                        props: { disabled: true, onInput: mockOnInput },
+                    }).container;
+                    wrapper = container.querySelector("div");
+                    return [4 /*yield*/, fireEvent.click(wrapper)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnInput).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("accepts external class", function () {
+        var container = render(Slider, {
+            props: { class: "custom-slider-class" },
+        }).container;
+        var wrapper = container.querySelector("div");
+        expect(wrapper === null || wrapper === void 0 ? void 0 : wrapper.className).toContain("custom-slider-class");
+    });
+});

package/dist/lib/__tests__/Splitter.test.d.ts

@@ -0,0 +1 @@
+export {};