@synthaxai/ui 1.0.0

package/dist/utils/accessibility.js

@@ -0,0 +1,202 @@
+/**
+ * Accessibility utilities for healthcare UI components.
+ *
+ * Implements WCAG 2.1 Level AA compliance requirements for
+ * critical healthcare applications.
+ */
+/**
+ * Screen reader only text.
+ * Visually hidden but accessible to assistive technologies.
+ */
+export const srOnlyClass = 'sr-only';
+/**
+ * Announces a message to screen readers.
+ *
+ * @param message - The message to announce
+ * @param priority - 'polite' (default) or 'assertive'
+ *
+ * @example
+ * announce('Form submitted successfully');
+ * announce('Error: Please fix the highlighted fields', 'assertive');
+ */
+export function announce(message, priority = 'polite') {
+    if (typeof document === 'undefined')
+        return;
+    // Find or create the announcer element
+    let announcer = document.getElementById(`ui-announcer-${priority}`);
+    if (!announcer) {
+        announcer = document.createElement('div');
+        announcer.id = `ui-announcer-${priority}`;
+        announcer.setAttribute('aria-live', priority);
+        announcer.setAttribute('aria-atomic', 'true');
+        announcer.setAttribute('role', priority === 'assertive' ? 'alert' : 'status');
+        announcer.className = 'sr-only';
+        announcer.style.cssText = `
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+		`;
+        document.body.appendChild(announcer);
+    }
+    // Clear and set message (triggers announcement)
+    announcer.textContent = '';
+    // Use requestAnimationFrame to ensure the clear is processed
+    requestAnimationFrame(() => {
+        if (announcer) {
+            announcer.textContent = message;
+        }
+    });
+}
+/**
+ * Checks if the user prefers reduced motion.
+ *
+ * @returns true if reduced motion is preferred
+ */
+export function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Returns animation duration based on user preferences.
+ * Returns 0 if user prefers reduced motion, otherwise returns the provided duration.
+ *
+ * @param duration - Normal animation duration in ms
+ * @returns Adjusted duration
+ */
+export function getAnimationDuration(duration) {
+    return prefersReducedMotion() ? 0 : duration;
+}
+/**
+ * Checks if high contrast mode is preferred.
+ *
+ * @returns true if high contrast is preferred
+ */
+export function prefersHighContrast() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-contrast: more)').matches;
+}
+/**
+ * Describes an element for screen readers.
+ * Returns appropriate ARIA attributes for a described element.
+ *
+ * @param description - The description text
+ * @param id - The ID to use for the description element
+ */
+export function createDescription(description, id) {
+    return {
+        describedById: id,
+        descriptionProps: {
+            id,
+            className: srOnlyClass
+        },
+        text: description
+    };
+}
+/**
+ * Formats a value for screen reader announcement.
+ * Useful for live regions that need to announce changes.
+ *
+ * @param value - The value to format
+ * @param label - Label describing the value
+ * @param unit - Optional unit (e.g., 'percent', 'dollars')
+ */
+export function formatForAnnouncement(value, label, unit) {
+    const formattedValue = typeof value === 'number' ? value.toLocaleString() : value;
+    return unit ? `${label}: ${formattedValue} ${unit}` : `${label}: ${formattedValue}`;
+}
+/**
+ * Checks if an element is visible and focusable.
+ */
+export function isElementFocusable(element) {
+    if (!(element instanceof HTMLElement))
+        return false;
+    // Check if hidden
+    if (element.hidden || element.getAttribute('aria-hidden') === 'true') {
+        return false;
+    }
+    // Check computed styles
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden') {
+        return false;
+    }
+    // Check if disabled
+    if (element.disabled) {
+        return false;
+    }
+    // Check tabindex
+    const tabindex = element.getAttribute('tabindex');
+    if (tabindex === '-1') {
+        return false;
+    }
+    return true;
+}
+/**
+ * Gets all focusable elements within a container.
+ */
+export function getFocusableElements(container) {
+    const selector = [
+        'button:not([disabled])',
+        '[href]',
+        'input:not([disabled]):not([type="hidden"])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+        '[contenteditable="true"]'
+    ].join(', ');
+    return Array.from(container.querySelectorAll(selector)).filter(isElementFocusable);
+}
+/**
+ * Creates an accessible label for a form field.
+ * Returns either labelledby or label props based on visibility.
+ */
+export function createFieldLabel(label, fieldId, options = {}) {
+    const { visible = true, required = false } = options;
+    const labelId = `${fieldId}-label`;
+    return {
+        labelId,
+        labelProps: {
+            id: labelId,
+            for: fieldId,
+            ...(required && { 'data-required': true })
+        },
+        fieldProps: visible
+            ? { id: fieldId, 'aria-labelledby': labelId }
+            : { id: fieldId, 'aria-label': label }
+    };
+}
+/**
+ * Creates ARIA props for an error message.
+ */
+export function createErrorProps(fieldId, error) {
+    const errorId = `${fieldId}-error`;
+    return {
+        errorId,
+        errorProps: {
+            id: errorId,
+            role: 'alert',
+            'aria-live': 'polite'
+        },
+        fieldErrorProps: error
+            ? { 'aria-invalid': 'true', 'aria-describedby': errorId }
+            : { 'aria-invalid': 'false' }
+    };
+}
+/**
+ * Role descriptions for healthcare-specific contexts.
+ * Can be used with aria-roledescription for more specific announcements.
+ */
+export const healthcareRoles = {
+    patientCard: 'patient information card',
+    vitalSign: 'vital sign indicator',
+    medicationItem: 'medication entry',
+    alertBanner: 'clinical alert',
+    statusIndicator: 'status indicator'
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Class name utility for conditionally joining class names.
+ *
+ * A lightweight alternative to clsx/classnames that handles:
+ * - Strings
+ * - Objects with boolean values
+ * - Arrays (including nested)
+ * - Falsy values (ignored)
+ *
+ * @example
+ * cn('base', condition && 'conditional', { active: isActive })
+ * // => 'base conditional active' (if both conditions are true)
+ *
+ * @example
+ * cn('btn', {
+ *   'btn-primary': variant === 'primary',
+ *   'btn-disabled': disabled
+ * })
+ */
+export type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, boolean | null | undefined>;
+/**
+ * Merges multiple class values into a single class string.
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string with duplicates removed
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Creates a variant-based class name generator.
+ *
+ * @example
+ * const buttonVariants = createVariants({
+ *   base: 'btn',
+ *   variants: {
+ *     variant: {
+ *       primary: 'btn-primary',
+ *       secondary: 'btn-secondary'
+ *     },
+ *     size: {
+ *       sm: 'btn-sm',
+ *       md: 'btn-md',
+ *       lg: 'btn-lg'
+ *     }
+ *   },
+ *   defaults: { variant: 'primary', size: 'md' }
+ * });
+ *
+ * buttonVariants({ variant: 'secondary' })
+ * // => 'btn btn-secondary btn-md'
+ */
+export interface VariantConfig<T extends Record<string, Record<string, string>>> {
+    /** Base classes always applied */
+    base?: string;
+    /** Variant definitions */
+    variants: T;
+    /** Default values for each variant */
+    defaults?: Partial<{
+        [K in keyof T]: keyof T[K];
+    }>;
+    /** Compound variants for specific combinations */
+    compounds?: Array<{
+        conditions: Partial<{
+            [K in keyof T]: keyof T[K];
+        }>;
+        class: string;
+    }>;
+}
+export declare function createVariants<T extends Record<string, Record<string, string>>>(config: VariantConfig<T>): (props?: Partial<{
+    [K in keyof T]: keyof T[K];
+}>) => string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,UAAU,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAsBlD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9E,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,CAAC;IACZ,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC,CAAC;IACnD,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;aAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;SAAE,CAAC,CAAC;QACpD,KAAK,EAAE,MAAM,CAAC;KACd,CAAC,CAAC;CACH;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAC9E,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GACtB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC,KAAK,MAAM,CAgC7D"}

package/dist/utils/cn.js

@@ -0,0 +1,61 @@
+/**
+ * Merges multiple class values into a single class string.
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string with duplicates removed
+ */
+export function cn(...inputs) {
+    const classes = [];
+    for (const input of inputs) {
+        if (!input)
+            continue;
+        if (typeof input === 'string') {
+            classes.push(input);
+        }
+        else if (typeof input === 'number') {
+            classes.push(String(input));
+        }
+        else if (Array.isArray(input)) {
+            const nested = cn(...input);
+            if (nested)
+                classes.push(nested);
+        }
+        else if (typeof input === 'object') {
+            for (const [key, value] of Object.entries(input)) {
+                if (value)
+                    classes.push(key);
+            }
+        }
+    }
+    // Remove duplicates while preserving order
+    return [...new Set(classes)].join(' ');
+}
+export function createVariants(config) {
+    return (props = {}) => {
+        const classes = [];
+        // Add base classes
+        if (config.base) {
+            classes.push(config.base);
+        }
+        // Add variant classes
+        for (const [variantName, variantOptions] of Object.entries(config.variants)) {
+            const value = props[variantName] ?? config.defaults?.[variantName];
+            if (value && variantOptions[value]) {
+                classes.push(variantOptions[value]);
+            }
+        }
+        // Add compound variant classes
+        if (config.compounds) {
+            for (const compound of config.compounds) {
+                const matches = Object.entries(compound.conditions).every(([key, value]) => {
+                    const propValue = props[key] ?? config.defaults?.[key];
+                    return propValue === value;
+                });
+                if (matches) {
+                    classes.push(compound.class);
+                }
+            }
+        }
+        return cn(...classes);
+    };
+}

package/dist/utils/form-styles.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Shared form component styles.
+ *
+ * Provides consistent styling patterns across all form components.
+ */
+/**
+ * Common form field sizes.
+ */
+export type FormFieldSize = 'sm' | 'md' | 'lg';
+/**
+ * Base label styles for all form fields.
+ */
+export declare const labelBaseClass = "flex items-center gap-1.5 font-medium text-[var(--ui-text-primary)]";
+/**
+ * Label size classes.
+ */
+export declare const labelSizeClasses: Record<FormFieldSize, string>;
+/**
+ * Error message base styles.
+ */
+export declare const errorMessageClass = "text-xs text-[rgb(var(--ui-color-error))]";
+/**
+ * Error message with icon styles.
+ */
+export declare const errorMessageWithIconClass = "text-xs text-[rgb(var(--ui-color-error))] flex items-center gap-1";
+/**
+ * Success message styles.
+ */
+export declare const successMessageClass = "text-xs text-[rgb(var(--ui-color-success))]";
+/**
+ * Hint text styles.
+ */
+export declare const hintTextClass = "text-xs text-[var(--ui-text-tertiary)]";
+/**
+ * Description text styles.
+ */
+export declare const descriptionTextClass = "text-xs text-[var(--ui-text-tertiary)]";
+/**
+ * Required indicator styles.
+ */
+export declare const requiredIndicatorClass = "text-[rgb(var(--ui-color-error))]";
+/**
+ * Input field base styles (shared across text inputs, textareas, selects).
+ */
+export declare const inputBaseClass: string;
+/**
+ * Input size classes.
+ */
+export declare const inputSizeClasses: Record<FormFieldSize, string>;
+/**
+ * Get border classes based on validation state.
+ */
+export declare function getInputBorderClasses(options: {
+    hasError: boolean;
+    isValid: boolean;
+}): string;
+/**
+ * Form field wrapper styles.
+ */
+export declare const fieldWrapperClass = "flex flex-col gap-1.5";
+/**
+ * Disabled field wrapper modifier.
+ */
+export declare const disabledWrapperClass = "opacity-60";
+/**
+ * Checkbox/Radio sizes.
+ */
+export declare const checkboxSizeClasses: Record<FormFieldSize, {
+    box: string;
+    icon: number;
+}>;
+/**
+ * Get aria-describedby value from optional error and hint IDs.
+ */
+export declare function buildAriaDescribedBy(...ids: (string | false | undefined | null)[]): string | undefined;
+//# sourceMappingURL=form-styles.d.ts.map

package/dist/utils/form-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-styles.d.ts","sourceRoot":"","sources":["../../src/utils/form-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,cAAc,wEAAwE,CAAC;AAEpG;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAI1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,8CAA8C,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,yBAAyB,sEAC8B,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,mBAAmB,gDAAgD,CAAC;AAEjF;;GAEG;AACH,eAAO,MAAM,aAAa,2CAA2C,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,oBAAoB,2CAA2C,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,sBAAsB,sCAAsC,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,cAAc,QAMnB,CAAC;AAET;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAI1D,CAAC;AAEF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CACjB,GAAG,MAAM,CAYT;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,oBAAoB,eAAe,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAIpF,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CACnC,GAAG,GAAG,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,GAC3C,MAAM,GAAG,SAAS,CAGpB"}

package/dist/utils/form-styles.js

@@ -0,0 +1,95 @@
+/**
+ * Shared form component styles.
+ *
+ * Provides consistent styling patterns across all form components.
+ */
+/**
+ * Base label styles for all form fields.
+ */
+export const labelBaseClass = 'flex items-center gap-1.5 font-medium text-[var(--ui-text-primary)]';
+/**
+ * Label size classes.
+ */
+export const labelSizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-sm'
+};
+/**
+ * Error message base styles.
+ */
+export const errorMessageClass = 'text-xs text-[rgb(var(--ui-color-error))]';
+/**
+ * Error message with icon styles.
+ */
+export const errorMessageWithIconClass = 'text-xs text-[rgb(var(--ui-color-error))] flex items-center gap-1';
+/**
+ * Success message styles.
+ */
+export const successMessageClass = 'text-xs text-[rgb(var(--ui-color-success))]';
+/**
+ * Hint text styles.
+ */
+export const hintTextClass = 'text-xs text-[var(--ui-text-tertiary)]';
+/**
+ * Description text styles.
+ */
+export const descriptionTextClass = 'text-xs text-[var(--ui-text-tertiary)]';
+/**
+ * Required indicator styles.
+ */
+export const requiredIndicatorClass = 'text-[rgb(var(--ui-color-error))]';
+/**
+ * Input field base styles (shared across text inputs, textareas, selects).
+ */
+export const inputBaseClass = `
+	w-full rounded-lg border-2 transition-all duration-200
+	bg-[var(--ui-bg-secondary)] text-[var(--ui-text-primary)]
+	placeholder:text-[var(--ui-text-tertiary)]
+	focus:outline-none focus:bg-[var(--ui-bg-primary)]
+	disabled:cursor-not-allowed disabled:bg-[var(--ui-bg-tertiary)]
+`.trim();
+/**
+ * Input size classes.
+ */
+export const inputSizeClasses = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-3 text-sm',
+    lg: 'h-12 px-4 text-base'
+};
+/**
+ * Get border classes based on validation state.
+ */
+export function getInputBorderClasses(options) {
+    const { hasError, isValid } = options;
+    if (hasError) {
+        return 'border-[rgb(var(--ui-color-error))] focus:ring-2 focus:ring-[rgb(var(--ui-color-error)/0.2)]';
+    }
+    if (isValid) {
+        return 'border-[rgb(var(--ui-color-success))] focus:ring-2 focus:ring-[rgb(var(--ui-color-success)/0.2)]';
+    }
+    return 'border-[var(--ui-border-default)] focus:border-[rgb(var(--ui-color-primary))] focus:ring-2 focus:ring-[rgb(var(--ui-color-primary)/0.1)]';
+}
+/**
+ * Form field wrapper styles.
+ */
+export const fieldWrapperClass = 'flex flex-col gap-1.5';
+/**
+ * Disabled field wrapper modifier.
+ */
+export const disabledWrapperClass = 'opacity-60';
+/**
+ * Checkbox/Radio sizes.
+ */
+export const checkboxSizeClasses = {
+    sm: { box: 'w-4 h-4', icon: 12 },
+    md: { box: 'w-5 h-5', icon: 14 },
+    lg: { box: 'w-6 h-6', icon: 16 }
+};
+/**
+ * Get aria-describedby value from optional error and hint IDs.
+ */
+export function buildAriaDescribedBy(...ids) {
+    const filtered = ids.filter(Boolean);
+    return filtered.length > 0 ? filtered.join(' ') : undefined;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synthaxai/ui - Utility Functions
+ *
+ * Shared utilities for building accessible, consistent UI components.
+ */
+export { cn, createVariants, type ClassValue, type VariantConfig } from './cn.js';
+export { type FormFieldSize, labelBaseClass, labelSizeClasses, errorMessageClass, errorMessageWithIconClass, successMessageClass, hintTextClass, descriptionTextClass, requiredIndicatorClass, inputBaseClass, inputSizeClasses, getInputBorderClasses, fieldWrapperClass, disabledWrapperClass, checkboxSizeClasses, buildAriaDescribedBy } from './form-styles.js';
+export { Keys, isKey, isActivationKey, isNavigationKey, createListNavigation, createFocusTrap, generateId, type Key, type ListNavigationOptions, type FocusTrap } from './keyboard.js';
+export { announce, prefersReducedMotion, getAnimationDuration, prefersHighContrast, createDescription, formatForAnnouncement, isElementFocusable, getFocusableElements, createFieldLabel, createErrorProps, healthcareRoles, srOnlyClass } from './accessibility.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAGlF,OAAO,EACN,KAAK,aAAa,EAClB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,yBAAyB,EACzB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,EACpB,sBAAsB,EACtB,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACN,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,KAAK,GAAG,EACR,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACd,MAAM,eAAe,CAAC;AAGvB,OAAO,EACN,QAAQ,EACR,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,MAAM,oBAAoB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+/**
+ * @synthaxai/ui - Utility Functions
+ *
+ * Shared utilities for building accessible, consistent UI components.
+ */
+// Class name utilities
+export { cn, createVariants } from './cn.js';
+// Form styling utilities
+export { labelBaseClass, labelSizeClasses, errorMessageClass, errorMessageWithIconClass, successMessageClass, hintTextClass, descriptionTextClass, requiredIndicatorClass, inputBaseClass, inputSizeClasses, getInputBorderClasses, fieldWrapperClass, disabledWrapperClass, checkboxSizeClasses, buildAriaDescribedBy } from './form-styles.js';
+// Keyboard navigation
+export { Keys, isKey, isActivationKey, isNavigationKey, createListNavigation, createFocusTrap, generateId } from './keyboard.js';
+// Accessibility utilities
+export { announce, prefersReducedMotion, getAnimationDuration, prefersHighContrast, createDescription, formatForAnnouncement, isElementFocusable, getFocusableElements, createFieldLabel, createErrorProps, healthcareRoles, srOnlyClass } from './accessibility.js';

package/dist/utils/keyboard.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 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 declare const Keys: {
+    readonly Enter: "Enter";
+    readonly Space: " ";
+    readonly Escape: "Escape";
+    readonly Tab: "Tab";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+    readonly PageUp: "PageUp";
+    readonly PageDown: "PageDown";
+    readonly Backspace: "Backspace";
+    readonly Delete: "Delete";
+};
+export type Key = (typeof Keys)[keyof typeof Keys];
+/**
+ * Checks if a keyboard event matches the specified key.
+ */
+export declare function isKey(event: KeyboardEvent, key: Key): boolean;
+/**
+ * Checks if the event is an activation key (Enter or Space).
+ * Used for button-like elements.
+ */
+export declare function isActivationKey(event: KeyboardEvent): boolean;
+/**
+ * Checks if the event is a navigation key (arrows, home, end).
+ */
+export declare function isNavigationKey(event: KeyboardEvent): boolean;
+/**
+ * Creates a keyboard event handler for list navigation.
+ *
+ * @param options - Navigation options
+ * @returns Event handler function
+ *
+ * @example
+ * const handleKeyDown = createListNavigation({
+ *   items: menuItems,
+ *   currentIndex,
+ *   onNavigate: (index) => { currentIndex = index; },
+ *   onSelect: (index) => { selectItem(items[index]); },
+ *   onCancel: () => { closeMenu(); }
+ * });
+ */
+export interface ListNavigationOptions<T> {
+    /** List of items to navigate */
+    items: T[];
+    /** Currently focused index */
+    currentIndex: number;
+    /** Callback when navigation occurs */
+    onNavigate: (index: number) => void;
+    /** Callback when item is selected (Enter/Space) */
+    onSelect?: (index: number) => void;
+    /** Callback when navigation is cancelled (Escape) */
+    onCancel?: () => void;
+    /** Whether to loop at boundaries */
+    loop?: boolean;
+    /** Navigation orientation */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+}
+export declare function createListNavigation<T>(options: ListNavigationOptions<T>): (event: KeyboardEvent) => void;
+/**
+ * Creates a focus trap for modal-like components.
+ *
+ * @param containerElement - The container element to trap focus within
+ * @returns Object with activate/deactivate methods
+ *
+ * @example
+ * const trap = createFocusTrap(modalElement);
+ * trap.activate();
+ * // ... modal is open
+ * trap.deactivate();
+ */
+export interface FocusTrap {
+    /** Activates the focus trap */
+    activate: () => void;
+    /** Deactivates the focus trap */
+    deactivate: () => void;
+    /** Returns the currently focused element */
+    getFocusedElement: () => Element | null;
+}
+export declare function createFocusTrap(containerElement: HTMLElement): FocusTrap;
+export declare function generateId(prefix?: string): string;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/utils/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;CAeP,CAAC;AAEX,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEnD;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,GAAG,OAAO,CAE7D;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE7D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAS7D;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,gCAAgC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;CACjD;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACrC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC/B,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CA4EhC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CACxC;AAED,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,WAAW,GAAG,SAAS,CAyDxE;AASD,wBAAgB,UAAU,CAAC,MAAM,SAAO,GAAG,MAAM,CAGhD"}