@a11ypros/a11y-ui-components 1.0.0 → 1.0.1

package/packages/design-system/src/utils/keyboard.ts

@@ -0,0 +1,77 @@
+/**
+ * Keyboard event utilities
+ * Helpers for handling keyboard interactions
+ */
+
+export type KeyboardHandler = (event: React.KeyboardEvent) => void
+
+/**
+ * Check if a key is an activation key (Enter or Space)
+ */
+export function isActivationKey(key: string): boolean {
+  return key === 'Enter' || key === ' '
+}
+
+/**
+ * Check if a key is an arrow key
+ */
+export function isArrowKey(key: string): boolean {
+  return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)
+}
+
+/**
+ * Check if a key is a navigation key (Home, End, PageUp, PageDown)
+ */
+export function isNavigationKey(key: string): boolean {
+  return ['Home', 'End', 'PageUp', 'PageDown'].includes(key)
+}
+
+/**
+ * Check if a key is an escape key
+ */
+export function isEscapeKey(key: string): boolean {
+  return key === 'Escape'
+}
+
+/**
+ * Check if modifier keys are pressed
+ */
+export function hasModifierKey(event: React.KeyboardEvent): boolean {
+  return event.ctrlKey || event.metaKey || event.altKey || event.shiftKey
+}
+
+/**
+ * Create a keyboard handler that only fires on specific keys
+ */
+export function createKeyHandler(
+  keys: string[],
+  handler: KeyboardHandler
+): KeyboardHandler {
+  return (event: React.KeyboardEvent) => {
+    if (keys.includes(event.key)) {
+      handler(event)
+    }
+  }
+}
+
+/**
+ * Create a keyboard handler for activation keys (Enter/Space)
+ */
+export function createActivationHandler(
+  handler: KeyboardHandler
+): KeyboardHandler {
+  return createKeyHandler(['Enter', ' '], (event) => {
+    event.preventDefault()
+    handler(event)
+  })
+}
+
+/**
+ * Create a keyboard handler for arrow keys
+ */
+export function createArrowKeyHandler(
+  handler: KeyboardHandler
+): KeyboardHandler {
+  return createKeyHandler(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'], handler)
+}
+

package/packages/design-system/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "noEmit": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx"]
+}
+

package/scripts/fix-storybook-paths.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+
+const storybookDir = path.join(__dirname, '../apps/web/public/storybook-static')
+const indexHtmlPath = path.join(storybookDir, 'index.html')
+const iframeHtmlPath = path.join(storybookDir, 'iframe.html')
+
+function fixHtmlPaths(html) {
+  // Replace relative paths with absolute paths
+  // ./sb-manager/runtime.js -> /storybook-static/sb-manager/runtime.js
+  html = html.replace(/href="\.\//g, 'href="/storybook-static/')
+  html = html.replace(/src="\.\//g, 'src="/storybook-static/')
+  html = html.replace(/import '\.\//g, "import '/storybook-static/")
+  html = html.replace(/import "\.\//g, 'import "/storybook-static/')
+  html = html.replace(/url\('\.\//g, "url('/storybook-static/")
+  html = html.replace(/url\("\.\//g, 'url("/storybook-static/')
+  
+  // Fix JSON file references (Storybook loads index.json, project.json, etc.)
+  html = html.replace(/(["'])(\.\/)?([^"']+\.json)(["'])/g, '$1/storybook-static/$3$4')
+  
+  // Fix logo path if it's using /logo.png
+  html = html.replace(/\/logo\.png/g, '/storybook-static/logo.png')
+  
+  // Remove ALL CSP meta tags - we'll handle CSP via HTTP headers only
+  // This prevents any conflicts between meta tags and HTTP headers
+  html = html.replace(/<meta[^>]*http-equiv=["']Content-Security-Policy["'][^>]*>/gi, '')
+  
+  return html
+}
+
+// Fix index.html
+if (!fs.existsSync(indexHtmlPath)) {
+  console.error('Storybook index.html not found at:', indexHtmlPath)
+  process.exit(1)
+}
+
+let indexHtml = fs.readFileSync(indexHtmlPath, 'utf8')
+indexHtml = fixHtmlPaths(indexHtml)
+fs.writeFileSync(indexHtmlPath, indexHtml, 'utf8')
+console.log('✅ Fixed Storybook paths in index.html')
+
+// Fix iframe.html (where components actually render)
+if (fs.existsSync(iframeHtmlPath)) {
+  let iframeHtml = fs.readFileSync(iframeHtmlPath, 'utf8')
+  iframeHtml = fixHtmlPaths(iframeHtml)
+  fs.writeFileSync(iframeHtmlPath, iframeHtml, 'utf8')
+  console.log('✅ Fixed Storybook paths in iframe.html')
+} else {
+  console.warn('⚠️  iframe.html not found - components may not load correctly')
+}
+

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "incremental": true
+  },
+  "exclude": ["node_modules", "dist", ".next", "storybook-static"]
+}
+

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

@@ -1,37 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,71 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,122 +0,0 @@
-'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

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

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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,36 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,39 +0,0 @@
-'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

@@ -1,33 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,34 +0,0 @@
-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';