@a11ypros/a11y-ui-components 1.0.1 → 1.0.3

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));
+                    }) })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/DataTable/index.js

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import './Checkbox.css';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Label for the checkbox
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+}
+/**
+ * Accessible Checkbox component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="agree"
+ *   label="I agree to the terms"
+ *   checked={checked}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

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

package/dist/components/Form/Checkbox.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Checkbox.css';
+/**
+ * Accessible Checkbox component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="agree"
+ *   label="I agree to the terms"
+ *   checked={checked}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export const Checkbox = React.forwardRef(({ id, label, error, helperText, className = '', 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const checkboxId = React.useId();
+    const finalId = id || `checkbox-${checkboxId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId);
+    const classes = [
+        'form-checkbox',
+        error && 'form-checkbox--error',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-checkbox-wrapper", children: [_jsxs("div", { className: "form-checkbox-input-wrapper", children: [_jsx("input", { ref: ref, id: finalId, type: "checkbox", className: classes, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: props.required ? true : undefined, ...props }), label && (_jsxs("label", { htmlFor: finalId, className: "form-checkbox-label", children: [label, props.required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", 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 }))] }));
+});
+Checkbox.displayName = 'Checkbox';

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Fieldset.css';
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /**
+     * Legend text for the fieldset
+     */
+    legend?: string;
+    /**
+     * Whether the legend is visually hidden (but still accessible)
+     */
+    legendHidden?: boolean;
+    /**
+     * Whether to show a required field explanation. Use this if the fieldset contains required fields.
+     */
+    required?: boolean;
+}
+/**
+ * Accessible Fieldset component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper fieldset/legend structure
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Fieldset legend="Shipping Address">
+ *   <Input label="Street" />
+ *   <Input label="City" />
+ * </Fieldset>
+ * ```
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=Fieldset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,2FAgCpB,CAAA"}

package/dist/components/Form/Fieldset.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './Fieldset.css';
+/**
+ * Accessible Fieldset component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper fieldset/legend structure
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Fieldset legend="Shipping Address">
+ *   <Input label="Street" />
+ *   <Input label="City" />
+ * </Fieldset>
+ * ```
+ */
+export const Fieldset = React.forwardRef(({ legend, legendHidden = false, required = false, className = '', children, ...props }, ref) => {
+    const classes = [
+        'form-fieldset',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const legendClasses = [
+        'form-legend',
+        legendHidden && 'form-legend--hidden',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("fieldset", { ref: ref, className: classes, ...props, children: [legend && (_jsx("legend", { className: legendClasses, children: legend })), required && (_jsxs("p", { className: "fieldset__required", children: [' ', _jsx("span", { className: 'fieldset__required-indicator', children: "*" }), " indicates a required field."] })), children] }));
+});
+Fieldset.displayName = 'Fieldset';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import './Input.css';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: string;
+    /**
+     * Label for the input (creates associated label)
+     */
+    label?: string;
+}
+/**
+ * Accessible Input component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   id="email"
+ *   type="email"
+ *   label="Email address"
+ *   error="Please enter a valid email"
+ * />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,qFAmEjB,CAAA"}

package/dist/components/Form/Input.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Input.css';
+/**
+ * Accessible Input component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ * - 4.1.3 Status Messages: Error messages announced
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   id="email"
+ *   type="email"
+ *   label="Email address"
+ *   error="Please enter a valid email"
+ * />
+ * ```
+ */
+export const Input = React.forwardRef(({ id, error, helperText, label, className = '', 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const inputId = React.useId();
+    const finalId = id || `input-${inputId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId);
+    const classes = [
+        'form-input',
+        error && 'form-input--error',
+        props.disabled && 'form-input--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-input-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("input", { ref: ref, id: finalId, className: classes, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, required: props.required ? true : undefined, ...props }), 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 }))] }));
+});
+Input.displayName = 'Input';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Label.css';
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Whether this label is required (shows asterisk)
+     */
+    required?: boolean;
+    /**
+     * ID of the input this label is associated with
+     */
+    htmlFor?: string;
+}
+/**
+ * Accessible Label component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" required>
+ *   Email address
+ * </Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,KAAK,qFAqBjB,CAAA"}

package/dist/components/Form/Label.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './Label.css';
+/**
+ * Accessible Label component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-input association
+ * - 2.5.3 Label in Name: Label text matches accessible name
+ * - 4.1.2 Name, Role, Value: Proper semantic HTML
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" required>
+ *   Email address
+ * </Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
+export const Label = React.forwardRef(({ required = false, className = '', children, ...props }, ref) => {
+    const classes = [
+        'form-label',
+        required && 'form-label--required',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("label", { ref: ref, className: classes, ...props, children: [children, required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] }));
+});
+Label.displayName = 'Label';

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import './Radio.css';
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Options for the radio group
+     */
+    options: RadioOption[];
+    /**
+     * Name attribute for the radio group (required)
+     */
+    name: string;
+    /**
+     * Label for the radio group
+     */
+    label?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display
+     */
+    helperText?: string;
+}
+/**
+ * Accessible Radio component (radio group)
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper fieldset/legend structure
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="size"
+ *   label="Size"
+ *   options={[
+ *     { value: 's', label: 'Small' },
+ *     { value: 'm', label: 'Medium' },
+ *   ]}
+ *   value={selected}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F;;OAEG;IACH,OAAO,EAAE,WAAW,EAAE,CAAA;IAEtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,qFAkFjB,CAAA"}

package/dist/components/Form/Radio.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Radio.css';
+/**
+ * Accessible Radio component (radio group)
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper fieldset/legend structure
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="size"
+ *   label="Size"
+ *   options={[
+ *     { value: 's', label: 'Small' },
+ *     { value: 'm', label: 'Medium' },
+ *   ]}
+ *   value={selected}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+export const Radio = React.forwardRef(({ name, options, label, error, helperText, className = '', value, onChange, disabled, required, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const groupId = React.useId();
+    const errorId = error ? `radio-${groupId}-error` : undefined;
+    const helperId = helperText ? `radio-${groupId}-helper` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId);
+    return (_jsxs("div", { className: "form-radio-wrapper", children: [label && (_jsx("div", { className: "form-radio-label", role: "group", "aria-labelledby": label ? `radio-label-${groupId}` : undefined, children: _jsxs("span", { id: `radio-label-${groupId}`, className: "form-label", children: [label, required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] }) })), _jsx("div", { className: "form-radio-group", role: "radiogroup", "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, children: options.map((option, index) => {
+                    const optionId = `radio-${groupId}-${index}`;
+                    const isChecked = value === option.value;
+                    return (_jsxs("div", { className: "form-radio-option", children: [_jsx("input", { ref: index === 0 ? ref : undefined, id: optionId, type: "radio", name: name, value: option.value, checked: isChecked, onChange: onChange, disabled: option.disabled || disabled, required: required, className: "form-radio", ...props }), _jsx("label", { htmlFor: optionId, className: "form-radio-label", children: option.label })] }, option.value));
+                }) }), 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 }))] }));
+});
+Radio.displayName = 'Radio';

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import './Select.css';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+    /**
+     * Options for the select
+     */
+    options: SelectOption[];
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Helper text to display below the select
+     */
+    helperText?: string;
+    /**
+     * Label for the select
+     */
+    label?: string;
+    /**
+     * Placeholder option text
+     */
+    placeholder?: string;
+}
+/**
+ * Accessible Select component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-select association
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="country"
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAClG;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAA;IAEvB;;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,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,uFAgGlB,CAAA"}

package/dist/components/Form/Select.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { combineAriaDescribedBy } from '../../utils/aria';
+import './Select.css';
+/**
+ * Accessible Select component
+ *
+ * WCAG Compliance:
+ * - 1.3.1 Info and Relationships: Proper label-select association
+ * - 2.1.1 Keyboard: Full keyboard navigation
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="country"
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *   ]}
+ * />
+ * ```
+ */
+export const Select = React.forwardRef(({ id, options, error, helperText, label, placeholder, className = '', 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const selectId = React.useId();
+    const finalId = id || `select-${selectId}`;
+    const errorId = error ? `${finalId}-error` : undefined;
+    const helperId = helperText ? `${finalId}-helper` : undefined;
+    const describedBy = combineAriaDescribedBy(ariaDescribedBy, errorId, helperId);
+    const handleKeyDown = React.useCallback((event) => {
+        // Arrow keys are handled natively by select
+        // But we can add custom handling if needed
+        if (props.onKeyDown) {
+            props.onKeyDown(event);
+        }
+    }, [props.onKeyDown]);
+    const classes = [
+        'form-select',
+        error && 'form-select--error',
+        props.disabled && 'form-select--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: "form-select-wrapper", children: [label && (_jsxs("label", { htmlFor: finalId, className: "form-label", children: [label, props.required && (_jsxs("span", { className: "form-label__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsxs("select", { ref: ref, id: finalId, className: classes, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, onKeyDown: handleKeyDown, required: props.required ? true : undefined, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), 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 }))] }));
+});
+Select.displayName = 'Select';