@synthaxai/ui 1.0.0

package/dist/utils/keyboard.js

@@ -0,0 +1,179 @@
+/**
+ * Keyboard navigation utilities for accessible components.
+ *
+ * Provides consistent keyboard handling across the component library,
+ * following WCAG 2.1 and WAI-ARIA best practices.
+ */
+/**
+ * Common keyboard keys used in component interactions.
+ */
+export const Keys = {
+    Enter: 'Enter',
+    Space: ' ',
+    Escape: 'Escape',
+    Tab: 'Tab',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+    PageUp: 'PageUp',
+    PageDown: 'PageDown',
+    Backspace: 'Backspace',
+    Delete: 'Delete'
+};
+/**
+ * Checks if a keyboard event matches the specified key.
+ */
+export function isKey(event, key) {
+    return event.key === key;
+}
+/**
+ * Checks if the event is an activation key (Enter or Space).
+ * Used for button-like elements.
+ */
+export function isActivationKey(event) {
+    return isKey(event, Keys.Enter) || isKey(event, Keys.Space);
+}
+/**
+ * Checks if the event is a navigation key (arrows, home, end).
+ */
+export function isNavigationKey(event) {
+    return (isKey(event, Keys.ArrowUp) ||
+        isKey(event, Keys.ArrowDown) ||
+        isKey(event, Keys.ArrowLeft) ||
+        isKey(event, Keys.ArrowRight) ||
+        isKey(event, Keys.Home) ||
+        isKey(event, Keys.End));
+}
+export function createListNavigation(options) {
+    const { items, currentIndex, onNavigate, onSelect, onCancel, loop = true, orientation = 'vertical' } = options;
+    return (event) => {
+        const lastIndex = items.length - 1;
+        const navigatePrev = () => {
+            event.preventDefault();
+            if (currentIndex > 0) {
+                onNavigate(currentIndex - 1);
+            }
+            else if (loop) {
+                onNavigate(lastIndex);
+            }
+        };
+        const navigateNext = () => {
+            event.preventDefault();
+            if (currentIndex < lastIndex) {
+                onNavigate(currentIndex + 1);
+            }
+            else if (loop) {
+                onNavigate(0);
+            }
+        };
+        switch (event.key) {
+            case Keys.ArrowUp:
+                if (orientation === 'vertical' || orientation === 'both') {
+                    navigatePrev();
+                }
+                break;
+            case Keys.ArrowDown:
+                if (orientation === 'vertical' || orientation === 'both') {
+                    navigateNext();
+                }
+                break;
+            case Keys.ArrowLeft:
+                if (orientation === 'horizontal' || orientation === 'both') {
+                    navigatePrev();
+                }
+                break;
+            case Keys.ArrowRight:
+                if (orientation === 'horizontal' || orientation === 'both') {
+                    navigateNext();
+                }
+                break;
+            case Keys.Home:
+                event.preventDefault();
+                onNavigate(0);
+                break;
+            case Keys.End:
+                event.preventDefault();
+                onNavigate(lastIndex);
+                break;
+            case Keys.Enter:
+            case Keys.Space:
+                if (onSelect && currentIndex >= 0) {
+                    event.preventDefault();
+                    onSelect(currentIndex);
+                }
+                break;
+            case Keys.Escape:
+                if (onCancel) {
+                    event.preventDefault();
+                    onCancel();
+                }
+                break;
+        }
+    };
+}
+export function createFocusTrap(containerElement) {
+    let previouslyFocused = null;
+    const focusableSelector = [
+        'button:not([disabled])',
+        '[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])'
+    ].join(', ');
+    const getFocusableElements = () => {
+        return Array.from(containerElement.querySelectorAll(focusableSelector));
+    };
+    const handleKeyDown = (event) => {
+        if (event.key !== Keys.Tab)
+            return;
+        const focusable = getFocusableElements();
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    return {
+        activate: () => {
+            previouslyFocused = document.activeElement;
+            containerElement.addEventListener('keydown', handleKeyDown);
+            // Focus first focusable element
+            const focusable = getFocusableElements();
+            if (focusable.length > 0) {
+                // Use setTimeout to ensure element is rendered
+                setTimeout(() => focusable[0].focus(), 0);
+            }
+        },
+        deactivate: () => {
+            containerElement.removeEventListener('keydown', handleKeyDown);
+            // Restore focus
+            if (previouslyFocused && previouslyFocused instanceof HTMLElement) {
+                previouslyFocused.focus();
+            }
+            previouslyFocused = null;
+        },
+        getFocusedElement: () => document.activeElement
+    };
+}
+/**
+ * Generates a unique ID for accessibility attributes.
+ *
+ * @param prefix - Optional prefix for the ID
+ * @returns Unique ID string
+ */
+let idCounter = 0;
+export function generateId(prefix = 'ui') {
+    idCounter += 1;
+    return `${prefix}-${idCounter}`;
+}

package/package.json

@@ -0,0 +1,119 @@
+{
+	"name": "@synthaxai/ui",
+	"version": "1.0.0",
+	"description": "Production-quality UI component library for Synthax healthcare applications",
+	"type": "module",
+	"license": "UNLICENSED",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "svelte-kit sync && svelte-package -o dist -i src",
+		"build:watch": "svelte-kit sync && svelte-package -o dist -i src --watch",
+		"prepublishOnly": "npm run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"lint": "biome lint src",
+		"lint:fix": "biome lint --write src",
+		"format": "biome format --write src",
+		"format:check": "biome format src",
+		"check:biome": "biome check src",
+		"check:all": "biome check --write src"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles": "./dist/styles/tokens.css",
+		"./primitives": {
+			"types": "./dist/primitives/index.d.ts",
+			"svelte": "./dist/primitives/index.js",
+			"default": "./dist/primitives/index.js"
+		},
+		"./forms": {
+			"types": "./dist/forms/index.d.ts",
+			"svelte": "./dist/forms/index.js",
+			"default": "./dist/forms/index.js"
+		},
+		"./feedback": {
+			"types": "./dist/feedback/index.d.ts",
+			"svelte": "./dist/feedback/index.js",
+			"default": "./dist/feedback/index.js"
+		},
+		"./layout": {
+			"types": "./dist/layout/index.d.ts",
+			"svelte": "./dist/layout/index.js",
+			"default": "./dist/layout/index.js"
+		},
+		"./data-display": {
+			"types": "./dist/data-display/index.d.ts",
+			"svelte": "./dist/data-display/index.js",
+			"default": "./dist/data-display/index.js"
+		},
+		"./navigation": {
+			"types": "./dist/navigation/index.d.ts",
+			"svelte": "./dist/navigation/index.js",
+			"default": "./dist/navigation/index.js"
+		},
+		"./dialogs": {
+			"types": "./dist/dialogs/index.d.ts",
+			"svelte": "./dist/dialogs/index.js",
+			"default": "./dist/dialogs/index.js"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"default": "./dist/utils/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"lucide-svelte": "^0.400.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.49.4",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.3",
+		"@tailwindcss/postcss": "^4.1.18",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@testing-library/svelte": "^5.2.0",
+		"@types/node": "^25.0.8",
+		"@vitest/coverage-v8": "^4.0.0",
+		"jsdom": "^26.1.0",
+		"lucide-svelte": "^0.562.0",
+		"postcss": "^8.4.45",
+		"svelte": "^5.46.1",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.0.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.17"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"ui",
+		"components",
+		"healthcare",
+		"accessibility",
+		"typescript"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/synthaxai/synthax"
+	},
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts"
+}