@a11ypros/a11y-ui-components 1.0.1 → 1.0.2

package/dist/components/Form/Textarea.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import './Textarea.css';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the textarea
+     */
+    helperText?: string;
+    /**
+     * Label for the textarea
+     */
+    label?: string;
+    /**
+     * Maximum character count (shows counter)
+     */
+    maxLength?: number;
+    /**
+     * Whether to show character count
+     */
+    showCount?: boolean;
+}
+/**
+ * Accessible Textarea component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-textarea association
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   id="message"
+ *   label="Message"
+ *   maxLength={500}
+ *   showCount
+ * />
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Form/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,2FA0FpB,CAAA"}

package/dist/components/Form/Textarea.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Textarea.css';
+/**
+ * Accessible Textarea component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-textarea association
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   id="message"
+ *   label="Message"
+ *   maxLength={500}
+ *   showCount
+ * />
+ * ```
+ */
+export const Textarea = React.forwardRef(({ id, error, helperText, label, maxLength, showCount = false, className = '', value, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const textareaId = React.useId();
+    const finalId = id || `textarea-${textareaId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const countId = showCount ? `${finalId}-count` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId, countId);
+    const currentLength = typeof value === 'string' ? value.length : 0;
+    const remainingChars = maxLength ? maxLength - currentLength : undefined;
+    const classes = [
+        'form-textarea',
+        error && 'form-textarea--error',
+        props.disabled && 'form-textarea--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-textarea-wrapper", children: [label && (_jsxs("label", { htmlFor: finalId, className: "form-label", children: [label, props.required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsx("textarea", { ref: ref, id: finalId, className: classes, maxLength: maxLength, value: value, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: props.required ? true : undefined, ...props }), (showCount || helperText) && (_jsxs("div", { className: "form-textarea-footer", children: [helperText && !error && (_jsx("span", { id: helperId, className: "form-helper-text", children: helperText })), error && (_jsx("span", { id: errorId, className: "form-error-text", role: "alert", children: error })), showCount && maxLength && (_jsxs("span", { id: countId, className: "form-character-count", "aria-live": "polite", children: [currentLength, " / ", maxLength] }))] }))] }));
+});
+Textarea.displayName = 'Textarea';

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

@@ -0,0 +1,8 @@
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Fieldset';
+export * from './Label';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/components/Form/index.js

@@ -0,0 +1,7 @@
+export * from './Input';
+export * from './Textarea';
+export * from './Select';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Fieldset';
+export * from './Label';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Link.css';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Whether this is an external link
+     * Automatically adds rel="noopener noreferrer" for security
+     */
+    external?: boolean;
+    /**
+     * Whether this is a skip link (for keyboard navigation)
+     */
+    skip?: boolean;
+    /**
+     * ARIA label for the link (required if no visible text)
+     */
+    'aria-label'?: string;
+}
+/**
+ * Accessible Link component
+ *
+ * WCAG Compliance:
+ * - 2.4.4 Link Purpose: Clear link text or aria-label
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about" external>
+ *   Learn more
+ * </Link>
+ * ```
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=Link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,qFA2EhB,CAAA"}

package/dist/components/Link/Link.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './Link.css';
+/**
+ * Accessible Link component
+ *
+ * WCAG Compliance:
+ * - 2.4.4 Link Purpose: Clear link text or aria-label
+ * - 2.4.7 Focus Visible: Clear focus indicators
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about" external>
+ *   Learn more
+ * </Link>
+ * ```
+ */
+export const Link = React.forwardRef(({ external = false, skip = false, href, rel, target, className = '', children, 'aria-label': ariaLabel, ...props }, ref) => {
+    // Determine if link is external based on href or explicit prop
+    const isExternal = external ||
+        (href && (href.startsWith('http') || href.startsWith('//')));
+    // Build rel attribute
+    const relAttributes = React.useMemo(() => {
+        const attrs = new Set(rel?.split(' ') || []);
+        if (isExternal) {
+            attrs.add('noopener');
+            attrs.add('noreferrer');
+        }
+        return Array.from(attrs).join(' ');
+    }, [isExternal, rel]);
+    // Set target for external links
+    const linkTarget = isExternal && !target ? '_blank' : target;
+    const classes = [
+        'link',
+        skip && 'link--skip',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Skip links should use button semantics if no href
+    if (skip && !href) {
+        return (_jsx("button", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: children }));
+    }
+    return (_jsxs("a", { ref: ref, href: href, rel: relAttributes || undefined, target: linkTarget, className: classes, "aria-label": ariaLabel, ...props, children: [children, isExternal && (_jsxs("span", { className: "link__external-icon", "aria-hidden": "true", children: [' ', _jsx("span", { "aria-label": "(opens in new tab)", children: "\u2197" })] }))] }));
+});
+Link.displayName = 'Link';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/Link/index.js

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

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import './Modal.css';
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Title of the modal (required for accessibility)
+     */
+    title: string;
+    /**
+     * Content of the modal
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to close on backdrop click
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether to close on ESC key press
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Size of the modal
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Element to return focus to when modal closes
+     */
+    returnFocusTo?: HTMLElement | null;
+}
+/**
+ * Accessible Modal component using HTML5 dialog element
+ *
+ * Uses the native `<dialog>` element which provides:
+ * - Built-in focus management and focus trapping
+ * - Automatic body scroll prevention
+ * - Native backdrop overlay
+ * - ESC key handling (configurable)
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: ESC key support, built-in focus trap
+ * - 2.1.2 No Keyboard Trap: Focus returns to trigger
+ * - 2.4.3 Focus Order: Focus trapped within modal (native behavior)
+ * - 4.1.2 Name, Role, Value: ARIA modal pattern
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ * >
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export declare const Modal: React.FC<ModalProps>;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAA;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IAElC;;OAEG;IACH,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2HtC,CAAA"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { useFocusReturn } from '../../hooks/useFocusReturn';
+import { Button } from '../Button/Button';
+import './Modal.css';
+/**
+ * Accessible Modal component using HTML5 dialog element
+ *
+ * Uses the native `<dialog>` element which provides:
+ * - Built-in focus management and focus trapping
+ * - Automatic body scroll prevention
+ * - Native backdrop overlay
+ * - ESC key handling (configurable)
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: ESC key support, built-in focus trap
+ * - 2.1.2 No Keyboard Trap: Focus returns to trigger
+ * - 2.4.3 Focus Order: Focus trapped within modal (native behavior)
+ * - 4.1.2 Name, Role, Value: ARIA modal pattern
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ * >
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export const Modal = ({ isOpen, onClose, title, children, closeOnBackdropClick = true, closeOnEscape = true, size = 'md', returnFocusTo, }) => {
+    const dialogRef = useRef(null);
+    const contentRef = useRef(null);
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    // Return focus on close
+    useFocusReturn(isOpen, returnFocusTo);
+    // Handle dialog open/close
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (isOpen) {
+            // Show modal dialog
+            dialog.showModal();
+        }
+        else {
+            // Close dialog
+            dialog.close();
+        }
+        return () => {
+            // Cleanup: ensure dialog is closed when component unmounts
+            if (dialog.open) {
+                dialog.close();
+            }
+        };
+    }, [isOpen]);
+    // Handle backdrop clicks
+    // The ::backdrop pseudo-element doesn't bubble events to the dialog element,
+    // so we need to listen for clicks on the document and check if they're outside
+    // the dialog content area.
+    useEffect(() => {
+        if (!isOpen || !closeOnBackdropClick)
+            return;
+        const handleDocumentClick = (event) => {
+            const dialog = dialogRef.current;
+            const content = contentRef.current;
+            if (!dialog || !content)
+                return;
+            // Check if click target is outside the dialog content area
+            const target = event.target;
+            // If the click is not inside the content wrapper, it's a backdrop click
+            if (!content.contains(target)) {
+                // Verify click coordinates are outside content bounds for extra safety
+                const rect = content.getBoundingClientRect();
+                const clickX = event.clientX;
+                const clickY = event.clientY;
+                const isOutsideContent = clickX < rect.left ||
+                    clickX > rect.right ||
+                    clickY < rect.top ||
+                    clickY > rect.bottom;
+                if (isOutsideContent) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onClose();
+                }
+            }
+        };
+        // Use capture phase to catch events before they bubble
+        document.addEventListener('mousedown', handleDocumentClick, true);
+        return () => {
+            document.removeEventListener('mousedown', handleDocumentClick, true);
+        };
+    }, [isOpen, closeOnBackdropClick, onClose]);
+    // Handle cancel event (fires when ESC key is pressed)
+    const handleCancel = (event) => {
+        // Prevent default close behavior
+        event.preventDefault();
+        // Only close if closeOnEscape is enabled
+        if (closeOnEscape) {
+            onClose();
+        }
+    };
+    return (_jsx("dialog", { ref: dialogRef, className: `modal modal--${size} ${isOpen ? 'modal--open' : ''}`, "aria-labelledby": titleId, "aria-describedby": descriptionId, onCancel: handleCancel, children: _jsxs("div", { ref: contentRef, className: "modal-content-wrapper", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h2", { id: titleId, className: "modal-title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", className: "modal-close", children: "\u00D7" })] }), _jsx("div", { id: descriptionId, className: "modal-content", children: children })] }) }));
+};
+Modal.displayName = 'Modal';

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

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

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

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

package/dist/components/Modal/index.js

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import './Tabs.css';
+export interface TabItem {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /**
+     * Tab items
+     */
+    items: TabItem[];
+    /**
+     * Default selected tab ID
+     */
+    defaultSelectedId?: string;
+    /**
+     * Controlled selected tab ID
+     */
+    selectedId?: string;
+    /**
+     * Callback when tab selection changes
+     */
+    onSelectionChange?: (id: string) => void;
+    /**
+     * Orientation of tabs
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Activation mode for tabs
+     * - 'automatic': Arrow keys both move focus and activate tabs immediately
+     * - 'manual': Arrow keys move focus only, Enter/Space activates the focused tab
+     * @default 'automatic'
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * Label for the tab list (required for accessibility)
+     */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Accessible Tabs component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Arrow key navigation, Home/End support
+ * - 4.1.2 Name, Role, Value: ARIA tabs pattern
+ * - 2.4.3 Focus Order: Proper focus management
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   items={[
+ *     { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+ *     { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+ *   ]}
+ *   aria-label="Settings tabs"
+ * />
+ * ```
+ */
+export declare const Tabs: React.FC<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAG5D,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAA;IAEhB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IAEvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA0KpC,CAAA"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef } from 'react';
+import { isNavigationKey, isArrowKey } from '../../utils/keyboard';
+import { getCurrentAttributes } from '../../utils/aria';
+import './Tabs.css';
+/**
+ * Accessible Tabs component
+ *
+ * WCAG Compliance:
+ * - 2.1.1 Keyboard: Arrow key navigation, Home/End support
+ * - 4.1.2 Name, Role, Value: ARIA tabs pattern
+ * - 2.4.3 Focus Order: Proper focus management
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   items={[
+ *     { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+ *     { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+ *   ]}
+ *   aria-label="Settings tabs"
+ * />
+ * ```
+ */
+export const Tabs = ({ items, defaultSelectedId, selectedId: controlledSelectedId, onSelectionChange, orientation = 'horizontal', activationMode = 'automatic', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
+    const initialSelectedId = defaultSelectedId || items[0]?.id;
+    const [internalSelectedId, setInternalSelectedId] = useState(initialSelectedId);
+    const [focusedId, setFocusedId] = useState(initialSelectedId);
+    const tabRefs = useRef(new Map());
+    const selectedId = controlledSelectedId ?? internalSelectedId;
+    const selectedIndex = items.findIndex((item) => item.id === selectedId);
+    // In automatic mode, focused tab is always the selected tab
+    // In manual mode, focused tab can be different from selected tab
+    const effectiveFocusedId = activationMode === 'automatic' ? selectedId : (focusedId || selectedId);
+    const handleSelect = useCallback((id) => {
+        if (onSelectionChange) {
+            onSelectionChange(id);
+        }
+        else {
+            setInternalSelectedId(id);
+        }
+        // In manual mode, update focused tab when selecting
+        if (activationMode === 'manual') {
+            setFocusedId(id);
+        }
+    }, [onSelectionChange, activationMode]);
+    const handleKeyDown = useCallback((event, currentIndex) => {
+        const isHorizontal = orientation === 'horizontal';
+        let newIndex = currentIndex;
+        // Handle Enter/Space for manual activation
+        if (activationMode === 'manual' && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            const currentTab = items[currentIndex];
+            if (currentTab && !currentTab.disabled) {
+                handleSelect(currentTab.id);
+            }
+            return;
+        }
+        // Handle arrow keys and Home/End
+        if (isNavigationKey(event.key) || isArrowKey(event.key)) {
+            event.preventDefault();
+            switch (event.key) {
+                case 'Home':
+                    newIndex = 0;
+                    break;
+                case 'End':
+                    newIndex = items.length - 1;
+                    break;
+                case 'ArrowRight':
+                    if (isHorizontal) {
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (isHorizontal) {
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (!isHorizontal) {
+                        newIndex = (currentIndex + 1) % items.length;
+                    }
+                    break;
+                case 'ArrowUp':
+                    if (!isHorizontal) {
+                        newIndex = (currentIndex - 1 + items.length) % items.length;
+                    }
+                    break;
+            }
+            // Skip disabled tabs
+            while (items[newIndex]?.disabled && newIndex !== currentIndex) {
+                if (event.key === 'Home' || event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                    newIndex = (newIndex + 1) % items.length;
+                }
+                else {
+                    newIndex = (newIndex - 1 + items.length) % items.length;
+                }
+            }
+            const newTab = items[newIndex];
+            if (newTab && !newTab.disabled) {
+                if (activationMode === 'automatic') {
+                    // Automatic: move focus and activate
+                    handleSelect(newTab.id);
+                    tabRefs.current.get(newTab.id)?.focus();
+                }
+                else {
+                    // Manual: move focus only
+                    setFocusedId(newTab.id);
+                    tabRefs.current.get(newTab.id)?.focus();
+                }
+            }
+        }
+    }, [items, orientation, activationMode, handleSelect]);
+    const selectedTab = items.find((item) => item.id === selectedId);
+    return (_jsxs("div", { className: `tabs tabs--${orientation}`, children: [_jsx("div", { className: "tabs-list", role: "tablist", "aria-orientation": orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items.map((item, index) => {
+                    const isSelected = item.id === selectedId;
+                    const isFocused = item.id === effectiveFocusedId;
+                    // In manual mode, focused tab should be focusable even if not selected
+                    // In automatic mode, only selected tab is focusable
+                    const tabIndex = activationMode === 'manual'
+                        ? (isFocused ? 0 : -1)
+                        : (isSelected ? 0 : -1);
+                    return (_jsx("button", { ref: (el) => {
+                            if (el) {
+                                tabRefs.current.set(item.id, el);
+                            }
+                            else {
+                                tabRefs.current.delete(item.id);
+                            }
+                        }, id: `tab-${item.id}`, role: "tab", "aria-controls": `tabpanel-${item.id}`, "aria-selected": isSelected, tabIndex: tabIndex, disabled: item.disabled, className: `tabs-tab ${isSelected ? 'tabs-tab--selected' : ''} ${item.disabled ? 'tabs-tab--disabled' : ''}`, onClick: () => !item.disabled && handleSelect(item.id), onKeyDown: (e) => handleKeyDown(e, index), onFocus: () => setFocusedId(item.id), ...getCurrentAttributes(isSelected ? 'page' : undefined), children: item.label }, item.id));
+                }) }), selectedTab && (_jsx("div", { id: `tabpanel-${selectedTab.id}`, role: "tabpanel", "aria-labelledby": `tab-${selectedTab.id}`, className: "tabs-panel", children: selectedTab.content }))] }));
+};
+Tabs.displayName = 'Tabs';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/Tabs/index.js

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