@a11ypros/a11y-ui-components 1.0.0

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import './Toast.css';
+export interface ToastProps {
+    /**
+     * Unique ID for the toast
+     */
+    id: string;
+    /**
+     * Toast message
+     */
+    message: string;
+    /**
+     * Toast type
+     */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Whether toast can be dismissed
+     */
+    dismissible?: boolean;
+    /**
+     * Auto-dismiss duration in milliseconds (0 = no auto-dismiss). For WCAG compliance, this should be 6 seconds.
+     */
+    duration?: number;
+    /**
+     * Callback when toast is dismissed
+     */
+    onDismiss: (id: string) => void;
+    /**
+     * Pause auto-dismiss on hover
+     */
+    pauseOnHover?: boolean;
+}
+/**
+ * Accessible Toast component
+ *
+ * WCAG Compliance:
+ * - 4.1.3 Status Messages: ARIA live region announcements
+ * - 2.1.1 Keyboard: ESC key support, Tab navigation support
+ * - 2.4.3 Focus Order: Consistent focus order - toasts always appear in same position
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * Focus Order:
+ * - Toasts are focusable with tabIndex={0} (not positive tabindex)
+ * - Toast container is always rendered in the same DOM position (via portal to body)
+ * - Toasts appear in consistent order (order added) for predictable tab navigation
+ * - Container itself is not focusable, only individual toasts are focusable
+ *
+ * @example
+ * ```tsx
+ * <Toast
+ *   id="toast-1"
+ *   message="Successfully saved!"
+ *   type="success"
+ *   onDismiss={handleDismiss}
+ * />
+ * ```
+ */
+export declare const Toast: React.FC<ToastProps>;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAE/C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqGtC,CAAA"}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { useAriaLive } from '../../hooks/useAriaLive';
+import { isEscapeKey } from '../../utils/keyboard';
+import { Button } from '../Button/Button';
+import './Toast.css';
+/**
+ * Accessible Toast component
+ *
+ * WCAG Compliance:
+ * - 4.1.3 Status Messages: ARIA live region announcements
+ * - 2.1.1 Keyboard: ESC key support, Tab navigation support
+ * - 2.4.3 Focus Order: Consistent focus order - toasts always appear in same position
+ * - 4.1.2 Name, Role, Value: Proper ARIA attributes
+ *
+ * Focus Order:
+ * - Toasts are focusable with tabIndex={0} (not positive tabindex)
+ * - Toast container is always rendered in the same DOM position (via portal to body)
+ * - Toasts appear in consistent order (order added) for predictable tab navigation
+ * - Container itself is not focusable, only individual toasts are focusable
+ *
+ * @example
+ * ```tsx
+ * <Toast
+ *   id="toast-1"
+ *   message="Successfully saved!"
+ *   type="success"
+ *   onDismiss={handleDismiss}
+ * />
+ * ```
+ */
+export const Toast = ({ id, message, type = 'info', dismissible = true, duration = 6000, onDismiss, pauseOnHover = true, }) => {
+    const [isPaused, setIsPaused] = useState(false);
+    const timeoutRef = React.useRef(null);
+    // Announce toast via ARIA live region
+    useAriaLive(message, type === 'error' ? 'assertive' : 'polite');
+    // Auto-dismiss
+    useEffect(() => {
+        if (duration === 0 || isPaused) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+            return;
+        }
+        timeoutRef.current = setTimeout(() => {
+            onDismiss(id);
+        }, duration);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [duration, id, onDismiss, isPaused]);
+    // Handle ESC key
+    useEffect(() => {
+        if (!dismissible)
+            return;
+        const handleKeyDown = (event) => {
+            if (isEscapeKey(event.key)) {
+                onDismiss(id);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [dismissible, id, onDismiss]);
+    const handleMouseEnter = () => {
+        if (pauseOnHover) {
+            setIsPaused(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (pauseOnHover) {
+            setIsPaused(false);
+        }
+    };
+    const handleDismiss = () => {
+        onDismiss(id);
+    };
+    const classes = [
+        'toast',
+        `toast--${type}`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, role: "alert", "aria-live": type === 'error' ? 'assertive' : 'polite', "aria-atomic": "true", tabIndex: 0, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { className: "toast-content", children: _jsx("span", { className: "toast-message", children: message }) }), dismissible && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleDismiss, "aria-label": "Dismiss notification", className: "toast-dismiss", children: "\u00D7" }))] }));
+};
+Toast.displayName = 'Toast';

package/dist/components/Toast/ToastProvider.css

@@ -0,0 +1,48 @@
+.toast-container {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-4, 1rem);
+  pointer-events: none;
+  /* Container is not focusable - only children (toasts) are focusable */
+  /* This ensures consistent focus order without interfering with tab navigation */
+}
+
+.toast-container > * {
+  pointer-events: auto;
+}
+
+.toast-container--top-right {
+  top: 0;
+  right: 0;
+}
+
+.toast-container--top-left {
+  top: 0;
+  left: 0;
+}
+
+.toast-container--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast-container--bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.toast-container--bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.toast-container--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ToastProps } from './Toast';
+import './ToastProvider.css';
+export interface ToastItem extends Omit<ToastProps, 'onDismiss'> {
+    id: string;
+}
+interface ToastContextValue {
+    addToast: (toast: Omit<ToastItem, 'id'>) => void;
+    removeToast: (id: string) => void;
+}
+export declare const useToast: () => ToastContextValue;
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+/**
+ * Toast Provider component
+ * Manages toast stack and positioning
+ */
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export {};
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/components/Toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;IAC9D,EAAE,EAAE,MAAM,CAAA;CACX;AAED,UAAU,iBAAiB;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;IAChD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAID,eAAO,MAAM,QAAQ,yBAMpB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,eAAe,CAAA;CACtG;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoCtD,CAAA"}

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Toast } from './Toast';
+import './ToastProvider.css';
+const ToastContext = createContext(undefined);
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within ToastProvider');
+    }
+    return context;
+};
+/**
+ * Toast Provider component
+ * Manages toast stack and positioning
+ */
+export const ToastProvider = ({ children, position = 'top-right', }) => {
+    const [toasts, setToasts] = useState([]);
+    const addToast = useCallback((toast) => {
+        const id = `toast-${Date.now()}-${Math.random()}`;
+        setToasts((prev) => [...prev, { ...toast, id }]);
+    }, []);
+    const removeToast = useCallback((id) => {
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    }, []);
+    // Always render container to maintain consistent DOM position for focus order
+    // Toasts appear in order they were added (newest last), maintaining consistent tab order
+    const toastContainer = (_jsx("div", { className: `toast-container toast-container--${position}`, role: "region", "aria-label": "Notifications", children: toasts.map((toast) => (_jsx(Toast, { ...toast, onDismiss: removeToast }, toast.id))) }));
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, typeof document !== 'undefined' &&
+                createPortal(toastContainer, document.body)] }));
+};

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

@@ -0,0 +1,5 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';
+export type { ToastProps } from './Toast';
+export type { ToastItem, ToastProviderProps } from './ToastProvider';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';

package/dist/hooks/useAriaLive.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to manage ARIA live regions for screen reader announcements
+ *
+ * @param message - Message to announce
+ * @param priority - 'polite' (default) or 'assertive'
+ * @param clearOnUnmount - Whether to clear the message on unmount
+ */
+export declare function useAriaLive(message: string | undefined, priority?: 'polite' | 'assertive', clearOnUnmount?: boolean): void;
+//# sourceMappingURL=useAriaLive.d.ts.map

package/dist/hooks/useAriaLive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaLive.d.ts","sourceRoot":"","sources":["../../src/hooks/useAriaLive.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,QAAQ,GAAE,QAAQ,GAAG,WAAsB,EAC3C,cAAc,GAAE,OAAc,GAC7B,IAAI,CAkCN"}

package/dist/hooks/useAriaLive.js

@@ -0,0 +1,39 @@
+'use client';
+import { useEffect, useRef } from 'react';
+/**
+ * Hook to manage ARIA live regions for screen reader announcements
+ *
+ * @param message - Message to announce
+ * @param priority - 'polite' (default) or 'assertive'
+ * @param clearOnUnmount - Whether to clear the message on unmount
+ */
+export function useAriaLive(message, priority = 'polite', clearOnUnmount = true) {
+    const liveRegionRef = useRef(null);
+    useEffect(() => {
+        // Create or get the live region element
+        let liveRegion = document.getElementById(`aria-live-${priority}`);
+        if (!liveRegion) {
+            liveRegion = document.createElement('div');
+            liveRegion.id = `aria-live-${priority}`;
+            liveRegion.setAttribute('role', 'status');
+            liveRegion.setAttribute('aria-live', priority);
+            liveRegion.setAttribute('aria-atomic', 'true');
+            liveRegion.style.position = 'absolute';
+            liveRegion.style.left = '-10000px';
+            liveRegion.style.width = '1px';
+            liveRegion.style.height = '1px';
+            liveRegion.style.overflow = 'hidden';
+            document.body.appendChild(liveRegion);
+        }
+        liveRegionRef.current = liveRegion;
+        // Update the message
+        if (message) {
+            liveRegion.textContent = message;
+        }
+        return () => {
+            if (clearOnUnmount && liveRegionRef.current) {
+                liveRegionRef.current.textContent = '';
+            }
+        };
+    }, [message, priority, clearOnUnmount]);
+}

package/dist/hooks/useFocusReturn.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to return focus to a previously focused element when component unmounts
+ * Useful for modals, dropdowns, and other temporary UI elements
+ *
+ * @param returnOnUnmount - Whether to return focus on unmount
+ * @param returnElement - Optional specific element to return focus to
+ */
+export declare function useFocusReturn(returnOnUnmount?: boolean, returnElement?: HTMLElement | null): void;
+//# sourceMappingURL=useFocusReturn.d.ts.map

package/dist/hooks/useFocusReturn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusReturn.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusReturn.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,eAAe,GAAE,OAAc,EAC/B,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,GACjC,IAAI,CAwBN"}

package/dist/hooks/useFocusReturn.js

@@ -0,0 +1,33 @@
+'use client';
+import { useEffect, useRef } from 'react';
+/**
+ * Hook to return focus to a previously focused element when component unmounts
+ * Useful for modals, dropdowns, and other temporary UI elements
+ *
+ * @param returnOnUnmount - Whether to return focus on unmount
+ * @param returnElement - Optional specific element to return focus to
+ */
+export function useFocusReturn(returnOnUnmount = true, returnElement) {
+    const savedElementRef = useRef(null);
+    useEffect(() => {
+        if (!returnOnUnmount)
+            return;
+        // Save the currently focused element
+        if (document.activeElement instanceof HTMLElement) {
+            savedElementRef.current = document.activeElement;
+        }
+        return () => {
+            // Restore focus on unmount
+            const elementToFocus = returnElement || savedElementRef.current;
+            if (elementToFocus && typeof elementToFocus.focus === 'function') {
+                try {
+                    elementToFocus.focus();
+                }
+                catch (error) {
+                    // Silently fail if focus fails
+                    console.warn('Failed to return focus:', error);
+                }
+            }
+        };
+    }, [returnOnUnmount, returnElement]);
+}

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to trap focus within a container element
+ * Implements WCAG 2.1.2 Keyboard (No Keyboard Trap)
+ *
+ * @param enabled - Whether the focus trap is active
+ * @param containerRef - Ref to the container element
+ */
+export declare function useFocusTrap(enabled: boolean, containerRef: React.RefObject<HTMLElement>): void;
+//# sourceMappingURL=useFocusTrap.d.ts.map

package/dist/hooks/useFocusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GACzC,IAAI,CAiEN"}

package/dist/hooks/useFocusTrap.js

@@ -0,0 +1,68 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { getFirstFocusable, getLastFocusable } from '../utils/focus';
+/**
+ * Hook to trap focus within a container element
+ * Implements WCAG 2.1.2 Keyboard (No Keyboard Trap)
+ *
+ * @param enabled - Whether the focus trap is active
+ * @param containerRef - Ref to the container element
+ */
+export function useFocusTrap(enabled, containerRef) {
+    const previousActiveElement = useRef(null);
+    useEffect(() => {
+        if (!enabled || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        // Save the previously focused element
+        if (document.activeElement instanceof HTMLElement) {
+            previousActiveElement.current = document.activeElement;
+        }
+        // Focus the first focusable element in the container
+        const firstFocusable = getFirstFocusable(container);
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+        else {
+            // If no focusable elements, focus the container itself
+            container.focus();
+        }
+        // Handle Tab key to trap focus
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            const focusableElements = [
+                getFirstFocusable(container),
+                getLastFocusable(container),
+            ].filter(Boolean);
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (event.shiftKey) {
+                // Shift + Tab
+                if (document.activeElement === firstElement) {
+                    event.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                // Tab
+                if (document.activeElement === lastElement) {
+                    event.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        return () => {
+            container.removeEventListener('keydown', handleKeyDown);
+            // Restore focus to the previously focused element
+            if (previousActiveElement.current) {
+                previousActiveElement.current.focus();
+            }
+        };
+    }, [enabled, containerRef]);
+}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export * from './tokens';
+export * from './components/Button/Button';
+export * from './components/Link/Link';
+export * from './components/Modal/Modal';
+export * from './components/DataTable/DataTable';
+export * from './components/Toast/Toast';
+export * from './components/Toast/ToastProvider';
+export * from './components/Tabs/Tabs';
+export * from './components/Form/Input';
+export * from './components/Form/Textarea';
+export * from './components/Form/Select';
+export * from './components/Form/Checkbox';
+export * from './components/Form/Radio';
+export * from './components/Form/Fieldset';
+export * from './components/Form/Label';
+export * from './hooks/useFocusTrap';
+export * from './hooks/useFocusReturn';
+export * from './hooks/useAriaLive';
+export * from './utils/aria';
+export * from './utils/keyboard';
+export * from './utils/focus';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,25 @@
+// Design tokens
+export * from './tokens';
+// Components
+export * from './components/Button/Button';
+export * from './components/Link/Link';
+export * from './components/Modal/Modal';
+export * from './components/DataTable/DataTable';
+export * from './components/Toast/Toast';
+export * from './components/Toast/ToastProvider';
+export * from './components/Tabs/Tabs';
+export * from './components/Form/Input';
+export * from './components/Form/Textarea';
+export * from './components/Form/Select';
+export * from './components/Form/Checkbox';
+export * from './components/Form/Radio';
+export * from './components/Form/Fieldset';
+export * from './components/Form/Label';
+// Hooks
+export * from './hooks/useFocusTrap';
+export * from './hooks/useFocusReturn';
+export * from './hooks/useAriaLive';
+// Utils
+export * from './utils/aria';
+export * from './utils/keyboard';
+export * from './utils/focus';

package/dist/styles/components.css

@@ -0,0 +1,33 @@
+/**
+ * Import all component styles
+ * Import this file to get all component styles
+ */
+
+/* Button */
+@import '../components/Button/Button.css';
+
+/* Link */
+@import '../components/Link/Link.css';
+
+/* Modal */
+@import '../components/Modal/Modal.css';
+
+/* DataTable */
+@import '../components/DataTable/DataTable.css';
+
+/* Toast */
+@import '../components/Toast/Toast.css';
+@import '../components/Toast/ToastProvider.css';
+
+/* Tabs */
+@import '../components/Tabs/Tabs.css';
+
+/* Form components */
+@import '../components/Form/Label.css';
+@import '../components/Form/Input.css';
+@import '../components/Form/Textarea.css';
+@import '../components/Form/Select.css';
+@import '../components/Form/Checkbox.css';
+@import '../components/Form/Radio.css';
+@import '../components/Form/Fieldset.css';
+