dystopia-linear-lib 1.0.0

package/dist/utils/id.js

@@ -0,0 +1,17 @@
+/**
+ * Derives a stable set of related DOM ids from one `$props.id()` call, so a
+ * component needs only one call site to hand out `aria-labelledby`,
+ * `aria-controls`, etc. targets without risking an SSR/hydration mismatch
+ * from a module-level counter.
+ */
+export function createIds(base, ...parts) {
+    const ids = {};
+    for (const part of parts) {
+        ids[part] = `${base}-${part}`;
+    }
+    return ids;
+}
+/** Composes an id from a base and dynamic segments, e.g. a tab's index. */
+export function idFor(base, ...segments) {
+    return [base, ...segments].join('-');
+}

package/dist/utils/pagination-range.d.ts

@@ -0,0 +1,18 @@
+export interface PaginationRangeOptions {
+    currentPage: number;
+    totalPages: number;
+    /** Pages kept on each side of the current page. */
+    siblingCount?: number;
+    /** Pages kept at the very start and very end. */
+    boundaryCount?: number;
+}
+export type PaginationRangeItem = number | 'ellipsis';
+/**
+ * Computes which page numbers to show, collapsing the rest into `'ellipsis'`
+ * markers — e.g. `1 2 3 … 10` or `1 … 6 7 8 … 25`. Builds the wanted page set
+ * (boundary pages + pages around the current page) first, then walks 1..N
+ * once inserting an ellipsis wherever there's a gap, rather than juggling
+ * boundary math with conditional expressions — easier to verify correct at
+ * the edges (small totalPages, current page at either end).
+ */
+export declare function getPaginationRange({ currentPage, totalPages, siblingCount, boundaryCount }: PaginationRangeOptions): PaginationRangeItem[];

package/dist/utils/pagination-range.js

@@ -0,0 +1,34 @@
+/**
+ * Computes which page numbers to show, collapsing the rest into `'ellipsis'`
+ * markers — e.g. `1 2 3 … 10` or `1 … 6 7 8 … 25`. Builds the wanted page set
+ * (boundary pages + pages around the current page) first, then walks 1..N
+ * once inserting an ellipsis wherever there's a gap, rather than juggling
+ * boundary math with conditional expressions — easier to verify correct at
+ * the edges (small totalPages, current page at either end).
+ */
+export function getPaginationRange({ currentPage, totalPages, siblingCount = 1, boundaryCount = 1 }) {
+    if (totalPages <= 0)
+        return [];
+    const current = Math.min(Math.max(1, currentPage), totalPages);
+    const wanted = new Set();
+    for (let page = 1; page <= Math.min(boundaryCount, totalPages); page++) {
+        wanted.add(page);
+    }
+    for (let page = Math.max(1, totalPages - boundaryCount + 1); page <= totalPages; page++) {
+        wanted.add(page);
+    }
+    for (let page = Math.max(1, current - siblingCount); page <= Math.min(totalPages, current + siblingCount); page++) {
+        wanted.add(page);
+    }
+    const items = [];
+    let previous = 0;
+    for (let page = 1; page <= totalPages; page++) {
+        if (!wanted.has(page))
+            continue;
+        if (page - previous > 1)
+            items.push('ellipsis');
+        items.push(page);
+        previous = page;
+    }
+    return items;
+}

package/dist/utils/portal.d.ts

@@ -0,0 +1,5 @@
+import type { Action } from 'svelte/action';
+export interface PortalOptions {
+    target?: HTMLElement | string;
+}
+export declare const portal: Action<HTMLElement, PortalOptions | undefined>;

package/dist/utils/portal.js

@@ -0,0 +1,23 @@
+export const portal = (node, options) => {
+    function resolveTarget(opts) {
+        if (!opts?.target)
+            return document.body;
+        if (typeof opts.target === 'string') {
+            const el = document.querySelector(opts.target);
+            if (!el)
+                throw new Error(`portal target not found: ${opts.target}`);
+            return el;
+        }
+        return opts.target;
+    }
+    function mount(opts) {
+        resolveTarget(opts).appendChild(node);
+    }
+    mount(options);
+    return {
+        update: mount,
+        destroy() {
+            node.remove();
+        }
+    };
+};

package/dist/utils/presence.svelte.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Keeps a portalled overlay (Popover/Dropdown/Tooltip content) mounted past
+ * `open` flipping to `false` until any exit animation the consumer styled
+ * onto `data-state="closed"` finishes — unmounting immediately when there
+ * isn't one, rather than waiting for an `animationend` that will never fire.
+ */
+export declare function createPresence(getOpen: () => boolean, getNode: () => HTMLElement | null): {
+    readonly current: boolean;
+};

package/dist/utils/presence.svelte.js

@@ -0,0 +1,38 @@
+/**
+ * Keeps a portalled overlay (Popover/Dropdown/Tooltip content) mounted past
+ * `open` flipping to `false` until any exit animation the consumer styled
+ * onto `data-state="closed"` finishes — unmounting immediately when there
+ * isn't one, rather than waiting for an `animationend` that will never fire.
+ */
+export function createPresence(getOpen, getNode) {
+    let present = $state(getOpen());
+    $effect(() => {
+        if (getOpen()) {
+            present = true;
+            return;
+        }
+        const node = getNode();
+        if (!node) {
+            present = false;
+            return;
+        }
+        const exiting = node.getAnimations().filter((animation) => animation.playState !== 'finished');
+        if (exiting.length === 0) {
+            present = false;
+            return;
+        }
+        let cancelled = false;
+        Promise.allSettled(exiting.map((animation) => animation.finished)).then(() => {
+            if (!cancelled)
+                present = false;
+        });
+        return () => {
+            cancelled = true;
+        };
+    });
+    return {
+        get current() {
+            return present;
+        }
+    };
+}

package/dist/utils/roving-focus.d.ts

@@ -0,0 +1,20 @@
+export interface RovingFocusOptions {
+    getContainer: () => HTMLElement | null;
+    /** Selector matching the navigable items within the container, e.g. `'[role="menuitem"]:not(:disabled)'`. */
+    selector: string;
+}
+/**
+ * Arrow-key/typeahead navigation among a live-queried set of items inside a
+ * container — the composite-widget half of the WAI-ARIA menu/listbox/tablist
+ * pattern. Doesn't manage `tabindex`: a menu keeps its items permanently out
+ * of the tab order (focus only ever arrives here programmatically), while a
+ * tablist needs exactly one item tabbable at a time — that bookkeeping is
+ * context-specific, so it stays with the caller.
+ */
+export declare function createRovingFocus({ getContainer, selector }: RovingFocusOptions): {
+    getItems: () => HTMLElement[];
+    focusFirst: () => void;
+    focusLast: () => void;
+    focusAdjacent: (delta: 1 | -1) => void;
+    typeahead: (char: string) => void;
+};

package/dist/utils/roving-focus.js

@@ -0,0 +1,44 @@
+/**
+ * Arrow-key/typeahead navigation among a live-queried set of items inside a
+ * container — the composite-widget half of the WAI-ARIA menu/listbox/tablist
+ * pattern. Doesn't manage `tabindex`: a menu keeps its items permanently out
+ * of the tab order (focus only ever arrives here programmatically), while a
+ * tablist needs exactly one item tabbable at a time — that bookkeeping is
+ * context-specific, so it stays with the caller.
+ */
+export function createRovingFocus({ getContainer, selector }) {
+    function getItems() {
+        const container = getContainer();
+        return container ? Array.from(container.querySelectorAll(selector)) : [];
+    }
+    function focusFirst() {
+        getItems()[0]?.focus();
+    }
+    function focusLast() {
+        const items = getItems();
+        items[items.length - 1]?.focus();
+    }
+    function focusAdjacent(delta) {
+        const items = getItems();
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        const nextIndex = currentIndex === -1 ? 0 : (currentIndex + delta + items.length) % items.length;
+        items[nextIndex]?.focus();
+    }
+    let typeaheadBuffer = '';
+    let typeaheadTimer;
+    function typeahead(char) {
+        clearTimeout(typeaheadTimer);
+        typeaheadBuffer += char.toLowerCase();
+        typeaheadTimer = setTimeout(() => (typeaheadBuffer = ''), 500);
+        const items = getItems();
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        const ordered = [...items.slice(currentIndex + 1), ...items.slice(0, currentIndex + 1)];
+        const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(typeaheadBuffer));
+        match?.focus();
+    }
+    return { getItems, focusFirst, focusLast, focusAdjacent, typeahead };
+}

package/dist/utils/scroll-lock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Locks page scroll for as long as any caller holds it open — ref-counted so
+ * a dialog opened from inside another dialog doesn't have the inner one's
+ * cleanup re-enable scrolling behind the outer one still on screen. Also
+ * compensates for the scrollbar's width so hiding it doesn't shift layout.
+ */
+export declare function lockScroll(): () => void;

package/dist/utils/scroll-lock.js

@@ -0,0 +1,33 @@
+let lockCount = 0;
+let originalOverflow = '';
+let originalPaddingRight = '';
+/**
+ * Locks page scroll for as long as any caller holds it open — ref-counted so
+ * a dialog opened from inside another dialog doesn't have the inner one's
+ * cleanup re-enable scrolling behind the outer one still on screen. Also
+ * compensates for the scrollbar's width so hiding it doesn't shift layout.
+ */
+export function lockScroll() {
+    if (lockCount === 0) {
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        originalOverflow = document.body.style.overflow;
+        originalPaddingRight = document.body.style.paddingRight;
+        document.body.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            const currentPadding = parseFloat(getComputedStyle(document.body).paddingRight) || 0;
+            document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+        }
+    }
+    lockCount++;
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        lockCount--;
+        if (lockCount === 0) {
+            document.body.style.overflow = originalOverflow;
+            document.body.style.paddingRight = originalPaddingRight;
+        }
+    };
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+	"name": "dystopia-linear-lib",
+	"version": "1.0.0",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/bagusyanuar/svelte-dystopia-soft.git"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright install && playwright test",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/*.stories.*",
+		"!dist/vitest-examples"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"type": "module",
+	"exports": {
+		"./components/*": {
+			"types": "./dist/components/*/index.d.ts",
+			"svelte": "./dist/components/*/index.js"
+		},
+		"./utils/*": {
+			"types": "./dist/utils/*.d.ts",
+			"svelte": "./dist/utils/*.js"
+		},
+		"./index.css": "./dist/index.css"
+	},
+	"peerDependencies": {
+		"@tanstack/svelte-table": "^9.0.0",
+		"svelte": "^5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@tanstack/svelte-table": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "latest",
+		"@eslint/js": "^10.0.1",
+		"@playwright/test": "^1.60.0",
+		"@storybook/addon-a11y": "^10.5.10",
+		"@storybook/addon-docs": "^10.5.10",
+		"@storybook/addon-svelte-csf": "latest",
+		"@storybook/addon-vitest": "^10.5.10",
+		"@storybook/sveltekit": "^10.5.10",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.3.0",
+		"@tanstack/svelte-table": "^9.1.2",
+		"@types/node": "^22",
+		"@vitest/browser-playwright": "^4.1.8",
+		"@vitest/coverage-v8": "^4.1.8",
+		"eslint": "^10.4.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-storybook": "^10.5.10",
+		"eslint-plugin-svelte": "^3.19.0",
+		"globals": "^17.6.0",
+		"playwright": "^1.60.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"publint": "^0.3.21",
+		"storybook": "^10.5.10",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.6.0",
+		"tailwindcss": "^4.3.0",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.60.1",
+		"vite": "^8.0.16",
+		"vitest": "^4.1.8",
+		"vitest-browser-svelte": "^2.1.1"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"@floating-ui/dom": "^1.8.0",
+		"@internationalized/date": "^3.12.3",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.6.0"
+	}
+}