@a11ypros/a11y-ui-components 1.0.0

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.css

@@ -0,0 +1,46 @@
+.form-checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-checkbox-input-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--color-primary-500, #0ea5e9);
+  flex-shrink: 0;
+}
+
+.form-checkbox:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.form-checkbox-label {
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  color: var(--color-text-primary, #171717);
+  cursor: pointer;
+  user-select: none;
+}
+
+.form-checkbox--error {
+  accent-color: var(--color-error-500, #ef4444);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-checkbox:focus-visible {
+    outline-width: 3px;
+  }
+}
+

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.css

@@ -0,0 +1,43 @@
+.form-fieldset {
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  padding: var(--spacing-4, 1rem);
+  margin: 0;
+}
+
+.fieldset__required {
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: var(--font-weight-normal, 400);
+  color: var(--color-text-secondary, #6b7280);
+  margin-block-end: var(--spacing-3, 0.75rem);
+}
+
+.fieldset__required-indicator {
+  color: var(--color-error-500, #ef4444);
+}
+.form-legend {
+  font-size: var(--font-size-base, 1rem);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text-primary, #171717);
+  padding: 0 var(--spacing-2, 0.5rem);
+}
+
+.form-legend--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-fieldset {
+    border-width: 2px;
+  }
+}
+

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.css

@@ -0,0 +1,76 @@
+.form-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+  margin-block-end: var(--spacing-3, 0.75rem);
+}
+
+.form-input {
+  width: 100%;
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  color: var(--color-text-primary, #171717);
+  background-color: var(--color-background-default, #ffffff);
+  border: 1px solid var(--color-border-default, #bbbbbb);
+  border-radius: 0.375rem;
+  transition: border-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) {
+  .form-input {
+    transition: none;
+  }
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus, #0ea5e9);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.form-input:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+}
+
+.form-input--error {
+  border-color: var(--color-error-500, #ef4444);
+}
+
+.form-input--error:focus {
+  border-color: var(--color-error-500, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  box-shadow: 0 0 0 2px var(--color-background-default, #ffffff), 0 0 0 4px var(--color-error-500, #ef4444);
+  outline: none;
+}
+
+.form-input--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--color-background-secondary, #fafafa);
+}
+
+.form-helper-text {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-secondary, #525252);
+}
+
+.form-error-text {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-error-600, #dc2626);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-input {
+    border-width: 2px;
+  }
+  
+  .form-input:focus-visible {
+    outline-width: 3px;
+  }
+}
+

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.css

@@ -0,0 +1,13 @@
+.form-label {
+  display: block;
+  font-size: var(--font-size-base, 1rem);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #171717);
+  margin-bottom: var(--spacing-2, 0.5rem);
+  line-height: var(--line-height-normal, 1.5);
+}
+
+.form-label__required {
+  color: var(--color-error-500, #ef4444);
+}
+

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.css

@@ -0,0 +1,81 @@
+.form-radio-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+
+.form-radio-option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+.form-radio {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--color-primary-500, #0ea5e9);
+  flex-shrink: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 2px solid var(--color-border-default, #d4d4d4);
+  border-radius: 50%;
+  background-color: var(--color-background, #ffffff);
+  position: relative;
+  transition: border-color 0.2s ease;
+}
+
+.form-radio:checked {
+  border-color: var(--color-primary-500, #0ea5e9);
+  background-color: var(--color-background, #ffffff);
+}
+
+.form-radio:checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-primary-500, #0ea5e9);
+}
+
+.form-radio:hover:not(:disabled) {
+  border-color: var(--color-primary-600, #0284c7);
+}
+
+.form-radio:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-radio:focus-visible {
+  outline: 2px solid var(--color-border-focus, #0ea5e9);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+.form-radio-label {
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-normal, 1.5);
+  color: var(--color-text-primary, #171717);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .form-radio:focus-visible {
+    outline-width: 3px;
+  }
+}
+

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';