svelte-comp 1.3.3 → 1.3.6

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

@@ -0,0 +1,262 @@
+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__/Tabs.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import Tabs from "../Tabs.svelte";
+describe("Tabs", function () {
+    var mockTabs = [
+        { id: "tab1", label: "Tab 1" },
+        { id: "tab2", label: "Tab 2" },
+        { id: "tab3", label: "Tab 3", disabled: true },
+    ];
+    it("renders with default props", function () {
+        var container = render(Tabs, {
+            props: {
+                tabs: mockTabs,
+                sz: "lg",
+            },
+        }).container;
+        var tablist = container.querySelector('[role="tablist"]');
+        expect(tablist).toBeDefined();
+    });
+    it("displays tabs when provided", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBe(3);
+        expect(tabs[0].textContent).toBe("Tab 1");
+        expect(tabs[1].textContent).toBe("Tab 2");
+        expect(tabs[2].textContent).toBe("Tab 3");
+    });
+    it("shows active tab correctly", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, activeTab: "tab2" },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(0);
+        expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+        expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+        expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    });
+    it("calls onChange when tab is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnChange, container, tabs, secondTab;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnChange = vi.fn();
+                    container = render(Tabs, {
+                        props: { tabs: mockTabs, onChange: mockOnChange },
+                    }).container;
+                    tabs = container.querySelectorAll('[role="tab"]');
+                    expect(tabs.length).toBeGreaterThan(1);
+                    secondTab = tabs[1];
+                    return [4 /*yield*/, fireEvent.click(secondTab)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnChange).toHaveBeenCalledWith("tab2");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("does not call onChange when disabled tab is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnChange, container, tabs, disabledTab;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnChange = vi.fn();
+                    container = render(Tabs, {
+                        props: { tabs: mockTabs, onChange: mockOnChange },
+                    }).container;
+                    tabs = container.querySelectorAll('[role="tab"]');
+                    expect(tabs.length).toBeGreaterThan(2);
+                    disabledTab = tabs[2];
+                    return [4 /*yield*/, fireEvent.click(disabledTab)];
+                case 1:
+                    _a.sent();
+                    expect(mockOnChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("handles keyboard navigation with Enter key", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnChange, container, tabs, firstTab;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnChange = vi.fn();
+                    container = render(Tabs, {
+                        props: { tabs: mockTabs, onChange: mockOnChange },
+                    }).container;
+                    tabs = container.querySelectorAll('[role="tab"]');
+                    expect(tabs.length).toBeGreaterThan(0);
+                    firstTab = tabs[0];
+                    return [4 /*yield*/, fireEvent.keyDown(firstTab, { key: "Enter" })];
+                case 1:
+                    _a.sent();
+                    expect(mockOnChange).toHaveBeenCalledWith("tab1");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("handles keyboard navigation with Space key", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mockOnChange, container, tabs, firstTab;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockOnChange = vi.fn();
+                    container = render(Tabs, {
+                        props: { tabs: mockTabs, onChange: mockOnChange },
+                    }).container;
+                    tabs = container.querySelectorAll('[role="tab"]');
+                    expect(tabs.length).toBeGreaterThan(0);
+                    firstTab = tabs[0];
+                    return [4 /*yield*/, fireEvent.keyDown(firstTab, { key: " " })];
+                case 1:
+                    _a.sent();
+                    expect(mockOnChange).toHaveBeenCalledWith("tab1");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("applies correct size classes", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, sz: "lg" },
+        }).container;
+        var tablist = container.querySelector('[role="tablist"]');
+        expect(tablist).toBeDefined();
+        if (tablist) {
+            expect(tablist.className).toContain("text-lg");
+        }
+    });
+    it("applies default variant classes", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, variant: "default" },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(0);
+        if (tabs[0]) {
+            expect(tabs[0].className).toContain("border-b-2");
+            expect(tabs[0].className).toContain("border-transparent");
+        }
+    });
+    it("applies pills variant classes", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, variant: "pills" },
+        }).container;
+        var tablist = container.querySelector('[role="tablist"]');
+        expect(tablist).toBeDefined();
+        if (tablist) {
+            expect(tablist.className).toContain("gap-1");
+        }
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(0);
+        if (tabs[0]) {
+            expect(tabs[0].className).toContain("border");
+            expect(tabs[0].className).toContain("border-transparent");
+        }
+    });
+    it("applies underline variant classes", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, variant: "underline" },
+        }).container;
+        var tablist = container.querySelector('[role="tablist"]');
+        expect(tablist).toBeDefined();
+        if (tablist) {
+            expect(tablist.className).toContain("gap-6");
+        }
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(0);
+        if (tabs[0]) {
+            expect(tabs[0].className).toContain("border-b-2");
+            expect(tabs[0].className).toContain("border-transparent");
+        }
+    });
+    it("applies fitted layout when fitted is true", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, fitted: true },
+        }).container;
+        var tablist = container.querySelector('[role="tablist"]');
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tablist).toBeDefined();
+        expect(tabs.length).toBeGreaterThan(0);
+        if (tablist) {
+            expect(tablist.className).toContain("w-full");
+        }
+        if (tabs[0]) {
+            expect(tabs[0].className).toContain("flex-1");
+            expect(tabs[0].className).toContain("text-center");
+        }
+    });
+    it("sets correct tabindex for active tab", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, activeTab: "tab2" },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(2);
+        expect(tabs[0].getAttribute("tabindex")).toBe("-1");
+        expect(tabs[1].getAttribute("tabindex")).toBe("0");
+        expect(tabs[2].getAttribute("tabindex")).toBe("-1");
+    });
+    it("marks disabled tabs correctly", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBeGreaterThan(2);
+        expect(tabs[2].getAttribute("aria-disabled")).toBe("true");
+        expect(tabs[2].className).toContain("disabled");
+    });
+    it("accepts external class on root", function () {
+        var container = render(Tabs, {
+            props: { tabs: mockTabs, class: "custom-tabs" },
+        }).container;
+        var root = container.firstElementChild;
+        expect(root).toBeDefined();
+        if (root) {
+            expect(root.className).toContain("custom-tabs");
+        }
+    });
+    it("handles empty tabs array", function () {
+        var container = render(Tabs, {
+            props: { tabs: [] },
+        }).container;
+        var tabs = container.querySelectorAll('[role="tab"]');
+        expect(tabs.length).toBe(0);
+    });
+});

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

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

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

@@ -0,0 +1,84 @@
+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__/ThemeToggle.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import ThemeToggle from "../ThemeToggle.svelte";
+var STORAGE_KEY = "theme-toggle:dark";
+beforeEach(function () {
+    localStorage.clear();
+    document.documentElement.classList.remove("dark");
+});
+afterEach(function () {
+    document.documentElement.classList.remove("dark");
+});
+describe("ThemeToggle", function () {
+    it("uses stored preference on mount", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    localStorage.setItem(STORAGE_KEY, "true");
+                    getByRole = render(ThemeToggle).getByRole;
+                    return [4 /*yield*/, Promise.resolve()];
+                case 1:
+                    _a.sent();
+                    button = getByRole("button");
+                    expect(document.documentElement.classList.contains("dark")).toBe(true);
+                    expect(button.getAttribute("aria-label")).toBe("Switch to light mode");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("toggles mode on click and persists", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByRole = render(ThemeToggle).getByRole;
+                    button = getByRole("button");
+                    return [4 /*yield*/, fireEvent.click(button)];
+                case 1:
+                    _a.sent();
+                    expect(document.documentElement.classList.contains("dark")).toBe(true);
+                    expect(localStorage.getItem(STORAGE_KEY)).toBe("true");
+                    expect(button.getAttribute("aria-label")).toBe("Switch to light mode");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1 @@
+import "./setupLangContext";

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

@@ -0,0 +1,146 @@
+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 };
+    }
+};
+// src/lib/__tests__/TimePicker.test.ts
+import "./setupLangContext";
+import { render, fireEvent, within } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import TimePicker from "../TimePicker.svelte";
+var sampleTime = "10:30";
+describe("TimePicker", function () {
+    it("shows placeholder when value is null", function () {
+        var getByText = render(TimePicker, {
+            props: { placeholder: "Select a time" },
+        }).getByText;
+        expect(getByText("Select a time")).toBeTruthy();
+    });
+    it("renders initial hour and minute based on the value prop", function () {
+        var getAllByRole = render(TimePicker, {
+            props: { value: sampleTime },
+        }).getAllByRole;
+        var combos = getAllByRole("combobox");
+        var hour = combos[0];
+        var minute = combos[1];
+        expect(hour.textContent).toContain("10");
+        expect(minute.textContent).toContain("30");
+    });
+    it("emits onChange when hour changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, _a, getAllByRole, getByRole, combos, hourSelect, listbox, tenOption;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    handle = vi.fn();
+                    _a = render(TimePicker, {
+                        props: { value: "09:00", onChange: handle },
+                    }), getAllByRole = _a.getAllByRole, getByRole = _a.getByRole;
+                    combos = getAllByRole("combobox");
+                    hourSelect = combos[0];
+                    return [4 /*yield*/, fireEvent.click(hourSelect)];
+                case 1:
+                    _b.sent();
+                    listbox = getByRole("listbox");
+                    tenOption = within(listbox).getByRole("button", { name: "10" });
+                    return [4 /*yield*/, fireEvent.click(tenOption)];
+                case 2:
+                    _b.sent();
+                    expect(handle).toHaveBeenCalledTimes(1);
+                    expect(handle).toHaveBeenCalledWith("10:00");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("emits onChange when minute changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, _a, getAllByRole, getByRole, combos, minuteSelect, listbox, minuteOption;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    handle = vi.fn();
+                    _a = render(TimePicker, {
+                        props: { value: "10:00", onChange: handle },
+                    }), getAllByRole = _a.getAllByRole, getByRole = _a.getByRole;
+                    combos = getAllByRole("combobox");
+                    minuteSelect = combos[1];
+                    return [4 /*yield*/, fireEvent.click(minuteSelect)];
+                case 1:
+                    _b.sent();
+                    listbox = getByRole("listbox");
+                    minuteOption = within(listbox).getByRole("button", { name: "30" });
+                    return [4 /*yield*/, fireEvent.click(minuteOption)];
+                case 2:
+                    _b.sent();
+                    expect(handle).toHaveBeenCalledTimes(1);
+                    expect(handle).toHaveBeenCalledWith("10:30");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("clears value using Clear button", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handle, getByText, btn;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handle = vi.fn();
+                    getByText = render(TimePicker, {
+                        props: { value: sampleTime, onChange: handle },
+                    }).getByText;
+                    btn = getByText("Clear");
+                    return [4 /*yield*/, fireEvent.click(btn)];
+                case 1:
+                    _a.sent();
+                    expect(handle).toHaveBeenCalledTimes(1);
+                    expect(handle).toHaveBeenCalledWith(null);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("switches between 24h and 12h modes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByText, toggle;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByText = render(TimePicker).getByText;
+                    toggle = getByText("12h");
+                    return [4 /*yield*/, fireEvent.click(toggle)];
+                case 1:
+                    _a.sent();
+                    // Period select exists now
+                    getByText("Period");
+                    expect(getByText("24h")).toBeTruthy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -0,0 +1 @@
+import "./setupLangContext";