svelte-comp 1.3.3 → 1.3.6

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

@@ -0,0 +1,92 @@
+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__/PrimaryColorSelect.test.ts
+import "./setupLangContext";
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect } from "vitest";
+import PrimaryColorSelect from "../PrimaryColorSelect.svelte";
+describe("PrimaryColorSelect", function () {
+    it("renders default label and sets data-primary", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByRole;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    localStorage.clear();
+                    getByRole = render(PrimaryColorSelect).getByRole;
+                    return [4 /*yield*/, Promise.resolve()];
+                case 1:
+                    _a.sent();
+                    expect(getByRole("combobox")).toBeTruthy();
+                    expect(document.documentElement.getAttribute("data-primary")).toBe("default");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("loads saved primary color from localStorage", function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    localStorage.setItem("primary", "cyan");
+                    render(PrimaryColorSelect);
+                    return [4 /*yield*/, Promise.resolve()];
+                case 1:
+                    _a.sent();
+                    expect(document.documentElement.getAttribute("data-primary")).toBe("cyan");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("updates localStorage and html attribute on change", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByRole, getByText, trigger;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = render(PrimaryColorSelect), getByRole = _a.getByRole, getByText = _a.getByText;
+                    trigger = getByRole("combobox");
+                    return [4 /*yield*/, fireEvent.click(trigger)];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, fireEvent.click(getByText("Red"))];
+                case 2:
+                    _b.sent();
+                    expect(localStorage.getItem("primary")).toBe("red");
+                    expect(document.documentElement.getAttribute("data-primary")).toBe("red");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

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

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

@@ -0,0 +1,69 @@
+// $lib/__tests__/ProgressBar.test.ts
+import { render } from "@testing-library/svelte";
+import { describe, it, expect } from "vitest";
+import ProgressBar from "../ProgressBar.svelte";
+describe("ProgressBar", function () {
+    it("renders with default props", function () {
+        var container = render(ProgressBar).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        expect(progressBar).toBeDefined();
+        expect(progressBar.getAttribute("aria-valuenow")).toBe("0");
+    });
+    it("shows correct progress value", function () {
+        var container = render(ProgressBar, {
+            props: { value: 75 },
+        }).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        var progressFill = container.querySelector(".transition-\\[width\\]");
+        expect(progressBar.getAttribute("aria-valuenow")).toBe("75");
+        expect(progressFill.style.width).toBe("75%");
+    });
+    it("clamps value between 0 and 100", function () {
+        var container = render(ProgressBar, {
+            props: { value: 150 },
+        }).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        var progressFill = container.querySelector(".transition-\\[width\\]");
+        expect(progressBar.getAttribute("aria-valuenow")).toBe("100");
+        expect(progressFill.style.width).toBe("100%");
+    });
+    it("handles negative values", function () {
+        var container = render(ProgressBar, {
+            props: { value: -10 },
+        }).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        var progressFill = container.querySelector(".transition-\\[width\\]");
+        expect(progressBar.getAttribute("aria-valuenow")).toBe("0");
+        expect(progressFill.style.width).toBe("0%");
+    });
+    it("shows indeterminate state", function () {
+        var container = render(ProgressBar, {
+            props: { indeterminate: true },
+        }).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        var indeterminateElement = container.querySelector(".pb-indet");
+        expect(progressBar.getAttribute("aria-valuenow")).toBeNull();
+        expect(indeterminateElement).toBeDefined();
+    });
+    it("applies correct size classes", function () {
+        var container = render(ProgressBar, {
+            props: { sz: "lg" },
+        }).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-[7px]");
+    });
+    it("applies correct variant classes", function () {
+        var container = render(ProgressBar, {
+            props: { variant: "neutral" },
+        }).container;
+        var progressFill = container.querySelector(".transition-\\[width\\]");
+        expect(progressFill === null || progressFill === void 0 ? void 0 : progressFill.className).toContain("bg-[var(--color-bg-secondary)]");
+    });
+    it("accepts external class", function () {
+        var container = render(ProgressBar, {
+            props: { class: "custom-class" },
+        }).container;
+        var progressBar = container.querySelector('[role="progressbar"]');
+        expect(progressBar === null || progressBar === void 0 ? void 0 : progressBar.className).toContain("custom-class");
+    });
+});

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

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

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

@@ -0,0 +1,71 @@
+// $lib/__tests__/ProgressCircle.test.ts
+import { render } from "@testing-library/svelte";
+import { describe, it, expect } from "vitest";
+import ProgressCircle from "../ProgressCircle.svelte";
+describe("ProgressCircle", function () {
+    it("renders with default props", function () {
+        var container = render(ProgressCircle).container;
+        var progress = container.querySelector('[role="progressbar"]');
+        var text = container.textContent;
+        expect(progress).toBeTruthy();
+        expect(progress === null || progress === void 0 ? void 0 : progress.getAttribute("aria-valuenow")).toBe("0");
+        expect(text).toContain("0%");
+    });
+    it("shows correct progress value", function () {
+        var _a, _b;
+        var container = render(ProgressCircle, { props: { value: 75 } }).container;
+        var progress = container.querySelector('[role="progressbar"]');
+        var bar = container.querySelector(".pc-bar");
+        var circAttr = Number((_b = (_a = bar === null || bar === void 0 ? void 0 : bar.getAttribute("stroke-dasharray")) === null || _a === void 0 ? void 0 : _a.split(" ")[0]) !== null && _b !== void 0 ? _b : 0);
+        var expectedOffset = ((100 - 75) / 100) * circAttr;
+        expect(progress === null || progress === void 0 ? void 0 : progress.getAttribute("aria-valuenow")).toBe("75");
+        expect(Number(bar === null || bar === void 0 ? void 0 : bar.getAttribute("stroke-dashoffset"))).toBeCloseTo(expectedOffset, 4);
+    });
+    it("clamps values above 100", function () {
+        var container = render(ProgressCircle, { props: { value: 150 } }).container;
+        var progress = container.querySelector('[role="progressbar"]');
+        var bar = container.querySelector(".pc-bar");
+        var offset = Number(bar === null || bar === void 0 ? void 0 : bar.getAttribute("stroke-dashoffset"));
+        expect(progress === null || progress === void 0 ? void 0 : progress.getAttribute("aria-valuenow")).toBe("100");
+        expect(offset).toBeCloseTo(0, 4);
+    });
+    it("clamps negative values to 0", function () {
+        var _a, _b;
+        var container = render(ProgressCircle, { props: { value: -25 } }).container;
+        var progress = container.querySelector('[role="progressbar"]');
+        var bar = container.querySelector(".pc-bar");
+        var circAttr = Number((_b = (_a = bar === null || bar === void 0 ? void 0 : bar.getAttribute("stroke-dasharray")) === null || _a === void 0 ? void 0 : _a.split(" ")[0]) !== null && _b !== void 0 ? _b : 0);
+        expect(progress === null || progress === void 0 ? void 0 : progress.getAttribute("aria-valuenow")).toBe("0");
+        expect(Number(bar === null || bar === void 0 ? void 0 : bar.getAttribute("stroke-dashoffset"))).toBeCloseTo(circAttr, 4);
+    });
+    it("shows indeterminate state", function () {
+        var container = render(ProgressCircle, {
+            props: { indeterminate: true },
+        }).container;
+        var progress = container.querySelector('[role="progressbar"]');
+        var indet = container.querySelector(".pc-indet");
+        expect(progress === null || progress === void 0 ? void 0 : progress.getAttribute("aria-valuenow")).toBeNull();
+        expect(indet).toBeTruthy();
+    });
+    it("applies size styles", function () {
+        var _a, _b;
+        var _c = render(ProgressCircle, {
+            props: { sz: "md" },
+        }), container = _c.container, rerender = _c.rerender;
+        var ringWrapper = function () {
+            return container.querySelector(".relative.inline-flex.items-center.justify-center");
+        };
+        var mdWidth = (_a = ringWrapper()) === null || _a === void 0 ? void 0 : _a.style.width;
+        rerender({ sz: "lg" });
+        var lgWidth = (_b = ringWrapper()) === null || _b === void 0 ? void 0 : _b.style.width;
+        expect(mdWidth).not.toBe("");
+        expect(lgWidth).not.toBe(mdWidth);
+    });
+    it("applies neutral variant stroke", function () {
+        var container = render(ProgressCircle, {
+            props: { variant: "neutral" },
+        }).container;
+        var bar = container.querySelector(".pc-bar");
+        expect(bar === null || bar === void 0 ? void 0 : bar.classList.contains("stroke-[var(--color-bg-secondary)]")).toBe(true);
+    });
+});

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

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

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

@@ -0,0 +1,127 @@
+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__/Radio.test.ts
+import { render, fireEvent } from "@testing-library/svelte";
+import { describe, it, expect, vi } from "vitest";
+import Radio from "../Radio.svelte";
+describe("Radio", function () {
+    it("renders with label", function () {
+        var getByLabelText = render(Radio, { props: { label: "Choice" } }).getByLabelText;
+        expect(getByLabelText("Choice")).toBeTruthy();
+    });
+    it("sets checked state when clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getByLabelText, radio;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getByLabelText = render(Radio, { props: { label: "Choice" } }).getByLabelText;
+                    radio = getByLabelText("Choice");
+                    expect(radio.checked).toBe(false);
+                    return [4 /*yield*/, fireEvent.click(radio)];
+                case 1:
+                    _a.sent();
+                    expect(radio.checked).toBe(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("calls onChange with updated checked value", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handleChange, getByLabelText, radio;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handleChange = vi.fn();
+                    getByLabelText = render(Radio, {
+                        props: { label: "Choice", onChange: handleChange },
+                    }).getByLabelText;
+                    radio = getByLabelText("Choice");
+                    return [4 /*yield*/, fireEvent.click(radio)];
+                case 1:
+                    _a.sent();
+                    expect(handleChange).toHaveBeenCalledWith(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("applies size classes correctly", function () {
+        var container = render(Radio, {
+            props: { label: "Test", sz: "lg" },
+        }).container;
+        var circle = container.querySelector("span[data-state]");
+        expect(circle === null || circle === void 0 ? void 0 : circle.className).toContain("w-[18px]");
+    });
+    it("shows inner dot when checked", function () {
+        var container = render(Radio, {
+            props: { label: "Active", checked: true },
+        }).container;
+        var dot = container.querySelector("span[data-state] span");
+        expect(dot === null || dot === void 0 ? void 0 : dot.className).toContain("opacity-100");
+    });
+    it("applies neutral variant classes", function () {
+        var container = render(Radio, {
+            props: { label: "Neutral", variant: "neutral" },
+        }).container;
+        var circle = container.querySelector("span[data-state]");
+        expect(circle === null || circle === void 0 ? void 0 : circle.className).toContain("bg-transparent");
+    });
+    it("respects disabled attribute", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handleChange, getByLabelText, radio;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handleChange = vi.fn();
+                    getByLabelText = render(Radio, {
+                        props: { label: "Disabled", disabled: true, onChange: handleChange },
+                    }).getByLabelText;
+                    radio = getByLabelText("Disabled");
+                    expect(radio.disabled).toBe(true);
+                    return [4 /*yield*/, fireEvent.click(radio)];
+                case 1:
+                    _a.sent();
+                    expect(handleChange).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("passes custom class to root wrapper", function () {
+        var container = render(Radio, {
+            props: { label: "Styled", class: "custom-radio" },
+        }).container;
+        var root = container.querySelector("label");
+        expect(root === null || root === void 0 ? void 0 : root.className).toContain("custom-radio");
+    });
+});

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

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

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

@@ -0,0 +1,80 @@
+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 };
+    }
+};
+import { describe, expect, it } from "vitest";
+import { fireEvent, render } from "@testing-library/svelte";
+import SearchInput from "../SearchInput.svelte";
+describe("SearchInput", function () {
+    it("renders a search input with the default placeholder", function () {
+        expect.assertions(3);
+        var container = render(SearchInput).container;
+        var input = container.querySelector('input[type="search"]');
+        expect(input).not.toBeNull();
+        if (!input)
+            return;
+        expect(input.getAttribute("type")).toBe("search");
+        expect(input.getAttribute("placeholder")).toBe("Search");
+    });
+    it("renders a custom label and placeholder", function () {
+        expect.assertions(2);
+        var _a = render(SearchInput, {
+            props: { label: "Find", placeholder: "Search profiles" },
+        }), getByText = _a.getByText, container = _a.container;
+        expect(getByText("Find")).toBeTruthy();
+        var input = container.querySelector("input");
+        expect(input === null || input === void 0 ? void 0 : input.getAttribute("placeholder")).toBe("Search profiles");
+    });
+    it("updates the input value on user typing", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var container, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    expect.assertions(1);
+                    container = render(SearchInput, {
+                        props: { value: "", placeholder: "Search" },
+                    }).container;
+                    input = container.querySelector("input");
+                    if (!input)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, fireEvent.input(input, { target: { value: "bolt" } })];
+                case 1:
+                    _a.sent();
+                    expect(input.value).toBe("bolt");
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

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