@a11ypros/a11y-ui-components 1.0.0

package/dist/components/Button/Button.css

@@ -0,0 +1,259 @@
+/* Button component styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2, 0.5rem);
+  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-normal, 1.5);
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+
+/* Focus styles - WCAG 2.4.7 Focus Visible */
+.btn:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+.btn:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .btn {
+    border-width: 2px;
+  }
+  
+  .btn:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Disabled state */
+.btn:disabled:not(.btn--loading),
+.btn[aria-disabled="true"]:not(.btn--loading) {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 1; /* Reset opacity so we can use explicit colors */
+}
+
+/* Disabled state colors for each variant (but not when loading) */
+.btn--primary:disabled:not(.btn--loading),
+.btn--primary[aria-disabled="true"]:not(.btn--loading) {
+  background-color: var(--color-neutral-300, #d4d4d4);
+  color: var(--color-neutral-500, #737373);
+}
+
+.btn--secondary:disabled:not(.btn--loading),
+.btn--secondary[aria-disabled="true"]:not(.btn--loading) {
+  background-color: var(--color-neutral-100, #f5f5f5);
+  color: var(--color-neutral-400, #a3a3a3);
+  border-color: var(--color-neutral-200, #e5e5e5);
+}
+
+.btn--ghost:disabled:not(.btn--loading),
+.btn--ghost[aria-disabled="true"]:not(.btn--loading) {
+  background-color: transparent;
+  color: var(--color-neutral-400, #a3a3a3);
+}
+
+.btn--danger:disabled:not(.btn--loading),
+.btn--danger[aria-disabled="true"]:not(.btn--loading) {
+  background-color: var(--color-neutral-300, #d4d4d4);
+  color: var(--color-neutral-500, #737373);
+}
+
+/* Sizes */
+.btn--sm {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+.btn--md {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  font-size: var(--font-size-base, 1rem);
+}
+
+.btn--lg {
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  font-size: var(--font-size-lg, 1.125rem);
+}
+
+/* Variants */
+.btn--primary {
+  background-color: var(--color-primary-700, #0369a1);
+  color: var(--color-text-inverse, #ffffff);
+}
+
+.btn--primary:hover:not(:disabled) {
+  background-color: var(--color-primary-800, #075985);
+}
+
+.btn--primary:active:not(:disabled) {
+  background-color: var(--color-primary-900, #0c4a6e);
+}
+
+.btn--secondary {
+  background-color: var(--color-neutral-100, #f5f5f5);
+  color: var(--color-text-primary, #171717);
+  border-color: var(--color-border-default, #bbbbbb);
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background-color: var(--color-neutral-200, #e5e5e5);
+}
+
+.btn--secondary:active:not(:disabled) {
+  background-color: var(--color-neutral-300, #d4d4d4);
+}
+
+.btn--ghost {
+  background-color: transparent;
+  color: var(--color-text-primary, #171717);
+}
+
+.btn--ghost:hover:not(:disabled) {
+  background-color: var(--color-neutral-100, #f5f5f5);
+}
+
+.btn--ghost:active:not(:disabled) {
+  background-color: var(--color-neutral-200, #e5e5e5);
+}
+
+.btn--danger {
+  background-color: var(--color-error-600, #dc2626);
+  color: var(--color-text-inverse, #ffffff);
+}
+
+.btn--danger:hover:not(:disabled) {
+  background-color: var(--color-error-700, #b91c1c);
+}
+
+.btn--danger:active:not(:disabled) {
+  background-color: var(--color-error-700, #b91c1c);
+}
+
+/* Loading state */
+.btn--loading {
+  position: relative;
+  cursor: wait;
+  pointer-events: none;
+}
+
+.btn--loading .btn__content {
+  color: transparent;
+}
+
+/* Loading state colors - use slightly different shade of variant color */
+.btn--loading.btn--primary {
+  background-color: var(--color-primary-600, #0284c7);
+}
+
+.btn--loading.btn--secondary {
+  background-color: var(--color-neutral-50, #fafafa);
+}
+
+.btn--loading.btn--ghost {
+  background-color: var(--color-neutral-50, #fafafa);
+}
+
+.btn--loading.btn--danger {
+  background-color: var(--color-error-500, #ef4444);
+}
+
+.btn__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Set spinner color based on button variant */
+.btn--primary .btn__spinner,
+.btn--danger .btn__spinner {
+  color: var(--color-text-inverse, #ffffff);
+}
+
+.btn--secondary .btn__spinner,
+.btn--ghost .btn__spinner {
+  color: var(--color-text-primary, #171717);
+}
+
+.btn__spinner-icon {
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  animation: btn-spin 0.8s linear infinite;
+}
+
+.btn__spinner-circle {
+  opacity: 1;
+  stroke-width: 2.5;
+}
+
+.btn__spinner-circle {
+  animation: btn-spinner-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes btn-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes btn-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 31.416;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 18.85, 31.416;
+    stroke-dashoffset: -9.425;
+  }
+  100% {
+    stroke-dasharray: 1, 31.416;
+    stroke-dashoffset: -31.416;
+  }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .btn__spinner-icon,
+  .btn__spinner-circle {
+    animation: none;
+  }
+  
+  .btn__spinner-circle {
+    stroke-dasharray: 31.416;
+    stroke-dashoffset: 0;
+    opacity: 0.5;
+  }
+}
+
+.btn__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+}
+

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './Button.css';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual variant of the button
+     */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /**
+     * Size of the button
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * ARIA label for the button (required if no visible text)
+     */
+    'aria-label'?: string;
+}
+/**
+ * Accessible Button component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard support (Enter/Space)
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;IAEtD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,uFA2FlB,CAAA"}

package/dist/components/Button/Button.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createActivationHandler } from '../../utils/keyboard';
+import { getAriaLabel, getBusyAttributes } from '../../utils/aria';
+import './Button.css';
+/**
+ * Accessible Button component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Full keyboard support (Enter/Space)
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ * ```
+ */
+export const Button = React.forwardRef(({ variant = 'primary', size = 'md', loading = false, disabled, children, className = '', onClick, onKeyDown, 'aria-label': ariaLabel, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    const handleKeyDown = React.useCallback((event) => {
+        // Handle activation keys
+        const activationHandler = createActivationHandler((e) => {
+            if (!isDisabled && onClick) {
+                onClick(e);
+            }
+        });
+        activationHandler(event);
+        // Call user's onKeyDown if provided
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [isDisabled, onClick, onKeyDown]);
+    const ariaProps = {
+        ...getAriaLabel(ariaLabel),
+        ...getBusyAttributes(loading),
+        ...props,
+    };
+    const classes = [
+        'btn',
+        `btn--${variant}`,
+        `btn--${size}`,
+        loading && 'btn--loading',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("button", { ref: ref, type: "button", className: classes, disabled: isDisabled, onClick: onClick, onKeyDown: handleKeyDown, "aria-disabled": isDisabled, ...ariaProps, children: [loading && (_jsx("span", { className: "btn__spinner", "aria-hidden": "true", children: _jsx("svg", { className: "btn__spinner-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("circle", { className: "btn__spinner-circle", cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "31.416" }) }) })), _jsx("span", { className: "btn__content", children: children })] }));
+});
+Button.displayName = 'Button';

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/components/DataTable/DataTable.css

@@ -0,0 +1,132 @@
+.data-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-base, 1rem);
+}
+
+.data-table-caption {
+  padding: var(--spacing-4, 1rem);
+  font-weight: var(--font-weight-semibold, 600);
+  text-align: left;
+  caption-side: top;
+}
+
+.data-table-header {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  text-align: left;
+  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-secondary, #525252);
+  background-color: var(--color-background-secondary, #fafafa);
+  border-bottom: 2px solid var(--color-border-default, #bbbbbb);
+}
+
+.data-table-header--sortable {
+  padding: 0;
+}
+
+.data-table-sort-button {
+  width: 100%;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  text-align: left;
+  background: none;
+  border: none;
+  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-secondary, #525252);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .data-table-sort-button {
+    transition: none;
+  }
+}
+
+.data-table-sort-button:hover {
+  background-color: var(--color-neutral-100, #f5f5f5);
+}
+
+.data-table-sort-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: -2px;
+}
+
+.data-table-sort-indicator {
+  margin-left: var(--spacing-1, 0.25rem);
+}
+
+.data-table-row {
+  border-bottom: 1px solid var(--color-border-default, #bbbbbb);
+  transition: background-color var(--motion-duration-normal, 200ms) var(--motion-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .data-table-row {
+    transition: none;
+  }
+}
+
+.data-table-row:hover {
+  background-color: var(--color-background-secondary, #fafafa);
+}
+
+.data-table-row--selected {
+  background-color: rgba(14, 165, 233, 0.1);
+}
+
+.data-table-row--focused {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: -2px;
+}
+
+.data-table-row:focus {
+  outline: none;
+}
+
+.data-table-row:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: -2px;
+}
+
+.data-table-cell {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  color: var(--color-text-primary, #171717);
+}
+
+.data-table-cell--checkbox {
+  width: 3rem;
+  text-align: center;
+}
+
+.data-table-header--checkbox {
+  width: 3rem;
+  text-align: center;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .data-table-wrapper {
+    border-width: 2px;
+  }
+  
+  .data-table-header {
+    border-bottom-width: 3px;
+  }
+  
+  .data-table-row--focused,
+  .data-table-row:focus-visible {
+    outline-width: 3px;
+  }
+}
+

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import './DataTable.css';
+export interface DataTableColumn<T> {
+    key: string;
+    header: string;
+    render?: (row: T, index: number) => React.ReactNode;
+    sortable?: boolean;
+    width?: string;
+}
+export interface DataTableProps<T> {
+    /**
+     * Data rows
+     */
+    data: T[];
+    /**
+     * Column definitions
+     */
+    columns: DataTableColumn<T>[];
+    /**
+     * Key function to get unique ID for each row
+     */
+    getRowId: (row: T) => string;
+    /**
+     * Whether rows are selectable
+     */
+    selectable?: boolean;
+    /**
+     * Selected row IDs
+     */
+    selectedRows?: string[];
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /**
+     * Sort configuration
+     */
+    sortConfig?: {
+        column: string;
+        direction: 'asc' | 'desc';
+    };
+    /**
+     * Callback when sort changes
+     */
+    onSortChange?: (column: string, direction: 'asc' | 'desc') => void;
+    /**
+     * Caption for the table (required for accessibility)
+     */
+    caption?: string;
+}
+/**
+ * Accessible DataTable component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Semantic table structure
+ * - 2.1.1 Keyboard: Arrow keys, Home/End navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Sort announcements
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   getRowId={(user) => user.id}
+ *   caption="User list"
+ * />
+ * ```
+ */
+export declare function DataTable<T extends Record<string, any>>({ data, columns, getRowId, selectable, selectedRows, onSelectionChange, sortConfig, onSortChange, caption, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAI5D,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAE7B;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAA;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAC1B,CAAA;IAED;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAElE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACvD,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,YAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,OAAO,GACR,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoMnB"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from 'react';
+import { useAriaLive } from '../../hooks/useAriaLive';
+import { isNavigationKey } from '../../utils/keyboard';
+import { Checkbox } from '../Form/Checkbox';
+import './DataTable.css';
+/**
+ * Accessible DataTable component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Semantic table structure
+ * - 2.1.1 Keyboard: Arrow keys, Home/End navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Sort announcements
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   getRowId={(user) => user.id}
+ *   caption="User list"
+ * />
+ * ```
+ */
+export function DataTable({ data, columns, getRowId, selectable = false, selectedRows = [], onSelectionChange, sortConfig, onSortChange, caption, }) {
+    const [focusedRow, setFocusedRow] = useState(null);
+    const tableRef = useRef(null);
+    const rowRefs = useRef(new Map());
+    // Announce sort changes
+    const sortAnnouncement = sortConfig
+        ? `Sorted by ${columns.find((c) => c.key === sortConfig.column)?.header || sortConfig.column}, ${sortConfig.direction === 'asc' ? 'ascending' : 'descending'}`
+        : undefined;
+    useAriaLive(sortAnnouncement, 'polite');
+    const handleSelectAll = useCallback(() => {
+        if (!onSelectionChange)
+            return;
+        const allSelected = selectedRows.length === data.length;
+        if (allSelected) {
+            onSelectionChange([]);
+        }
+        else {
+            onSelectionChange(data.map(getRowId));
+        }
+    }, [data, selectedRows, onSelectionChange, getRowId]);
+    const handleSelectRow = useCallback((rowId) => {
+        if (!onSelectionChange)
+            return;
+        const isSelected = selectedRows.includes(rowId);
+        if (isSelected) {
+            onSelectionChange(selectedRows.filter((id) => id !== rowId));
+        }
+        else {
+            onSelectionChange([...selectedRows, rowId]);
+        }
+    }, [selectedRows, onSelectionChange]);
+    const handleSort = useCallback((columnKey) => {
+        if (!onSortChange || !columns.find((c) => c.key === columnKey)?.sortable) {
+            return;
+        }
+        const newDirection = sortConfig?.column === columnKey && sortConfig.direction === 'asc'
+            ? 'desc'
+            : 'asc';
+        onSortChange(columnKey, newDirection);
+    }, [onSortChange, sortConfig, columns]);
+    const handleKeyDown = useCallback((event, rowId, index) => {
+        const row = rowRefs.current.get(rowId);
+        if (!row)
+            return;
+        if (isNavigationKey(event.key)) {
+            event.preventDefault();
+            let newIndex = index;
+            switch (event.key) {
+                case 'ArrowDown':
+                    newIndex = Math.min(index + 1, data.length - 1);
+                    break;
+                case 'ArrowUp':
+                    newIndex = Math.max(index - 1, 0);
+                    break;
+                case 'Home':
+                    newIndex = 0;
+                    break;
+                case 'End':
+                    newIndex = data.length - 1;
+                    break;
+            }
+            const newRowId = getRowId(data[newIndex]);
+            setFocusedRow(newRowId);
+            rowRefs.current.get(newRowId)?.focus();
+        }
+        else if (event.key === ' ' && selectable) {
+            event.preventDefault();
+            handleSelectRow(rowId);
+        }
+    }, [data, selectable, handleSelectRow, getRowId]);
+    const allSelected = data.length > 0 && selectedRows.length === data.length;
+    const someSelected = selectedRows.length > 0 && selectedRows.length < data.length;
+    return (_jsx("div", { className: "data-table-wrapper", children: _jsxs("table", { ref: tableRef, className: "data-table", "aria-label": caption, children: [caption && _jsx("caption", { className: "data-table-caption", children: caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "data-table-header data-table-header--checkbox", children: _jsx(Checkbox, { checked: allSelected, "aria-label": "Select all rows", onChange: handleSelectAll, "aria-checked": allSelected ? 'true' : someSelected ? 'mixed' : 'false' }) })), columns.map((column) => (_jsx("th", { scope: "col", className: `data-table-header ${column.sortable ? 'data-table-header--sortable' : ''}`, style: column.width ? { width: column.width } : undefined, "aria-sort": sortConfig?.column === column.key
+                                    ? sortConfig.direction === 'asc'
+                                        ? 'ascending'
+                                        : 'descending'
+                                    : 'none', children: column.sortable ? (_jsxs("button", { type: "button", className: "data-table-sort-button", "aria-label": sortConfig?.column === column.key
+                                        ? `${column.header}, sorted ${sortConfig.direction === 'asc' ? 'ascending' : 'descending'}, activate to sort ${sortConfig.direction === 'asc' ? 'descending' : 'ascending'}`
+                                        : `Sort by ${column.header}`, onClick: () => handleSort(column.key), children: [column.header, sortConfig?.column === column.key && (_jsx("span", { className: "data-table-sort-indicator", "aria-hidden": "true", children: sortConfig.direction === 'asc' ? ' ↑' : ' ↓' }))] })) : (column.header) }, column.key)))] }) }), _jsx("tbody", { children: data.map((row, index) => {
+                        const rowId = getRowId(row);
+                        const isSelected = selectedRows.includes(rowId);
+                        const isFocused = focusedRow === rowId;
+                        return (_jsxs("tr", { ref: (el) => {
+                                if (el) {
+                                    rowRefs.current.set(rowId, el);
+                                }
+                                else {
+                                    rowRefs.current.delete(rowId);
+                                }
+                            }, className: `data-table-row ${isSelected ? 'data-table-row--selected' : ''} ${isFocused ? 'data-table-row--focused' : ''}`, tabIndex: 0, "aria-selected": selectable ? isSelected : undefined, onKeyDown: (e) => handleKeyDown(e, rowId, index), onClick: () => {
+                                if (selectable) {
+                                    handleSelectRow(rowId);
+                                }
+                            }, children: [selectable && (_jsx("td", { className: "data-table-cell data-table-cell--checkbox", children: _jsx(Checkbox, { checked: isSelected, "aria-label": `Select row ${index + 1}`, onChange: () => handleSelectRow(rowId), onClick: (e) => e.stopPropagation() }) })), columns.map((column) => (_jsx("td", { className: "data-table-cell", children: column.render ? column.render(row, index) : row[column.key] }, column.key)))] }, rowId));
+                    }) })] }) }));
+}