@aurora-ds/components 0.18.2 → 0.19.1

package/README.md

@@ -47,6 +47,7 @@ function App() {
 | Component | Description |
 |-----------|-------------|
 | **Accordion** | Collapsible container to show/hide content |
+| **Alert** | Notification component with variants (default, info, warning, error, success) and auto-dismiss |
 | **Avatar** | User avatar display component with image or initials |
 | **AvatarGroup** | Group of avatars with overlapping display |
 | **Breadcrumb** | Navigation component for hierarchical page structures |

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -6,7 +6,7 @@ export type AvatarProps = {
     /** Fallback text to display when no image */
     label?: string;
     /** Click handler */
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     /** Size of the avatar */
     size?: AvatarSize;
     /** Text color for the label */

package/dist/cjs/components/forms/date-picker/calendar/Calendar.props.d.ts

@@ -5,9 +5,9 @@ export type CalendarProps = {
     /** Callback when a date is selected */
     onDateSelect: (date: Date) => void;
     /** Minimum selectable date */
-    minDate?: Date;
+    minDate?: Date | null;
     /** Maximum selectable date */
-    maxDate?: Date;
+    maxDate?: Date | null;
     /** Locale for month/year display */
     locale?: string;
 };

package/dist/cjs/components/forms/select/Select.props.d.ts

@@ -5,13 +5,21 @@ export type SelectProps = {
      */
     options: SelectOption[];
     /**
-     * The currently selected value
+     * The currently selected value (null to show placeholder)
      */
-    value?: string | number;
+    value: string | number | null;
     /**
      * Callback when selection changes
      */
-    onChange?: (value: string | number) => void;
+    onChange: (value: string | number) => void;
+    /**
+     * Label displayed above the select
+     */
+    label?: string;
+    /**
+     * Whether the field is mandatory (displays an asterisk next to the label)
+     */
+    mandatory?: boolean;
     /**
      * Placeholder text when no option is selected
      */

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

@@ -17,12 +17,15 @@ export * from '@components/layout/separator';
 export * from '@components/layout/page-construction/page-section';
 export * from '@components/layout/page-construction/page';
 export * from '@components/overlay/accordion';
+export * from '@components/overlay/alert';
 export * from '@components/overlay/menu';
 export * from '@components/overlay/modal';
 export * from '@components/navigation/drawer-item';
 export * from '@components/navigation/breadcrumb';
 export * from '@components/navigation/tabs';
 export * from '@components/navigation/pagination';
+export type { AlertVariant, AlertPosition } from '@interfaces/alert.types';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';
+export type { SelectOption } from '@interfaces/select.types';

package/dist/cjs/components/overlay/alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { AlertProps } from '@components/overlay/alert/Alert.props';
+/**
+ * Alert component - Display notifications with different variants
+ *
+ * **Variants:**
+ * - `default`: Standard alert with neutral styling
+ * - `info`: Informational alert with blue styling
+ * - `warning`: Warning alert with yellow/orange styling
+ * - `error`: Error alert with red styling
+ * - `success`: Success alert with green styling
+ *
+ * **Features:**
+ * - Auto-dismisses after 3 seconds
+ * - Positioned at screen corners
+ * - Supports stacking with offsetY
+ * - Icon based on variant
+ * - Smooth animations
+ * - Dynamic height calculation for proper stacking
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   text="Operation completed successfully"
+ *   variant="success"
+ *   position="top-right"
+ *   isVisible={true}
+ * />
+ * ```
+ */
+declare const Alert: FC<AlertProps>;
+export { Alert };

package/dist/cjs/components/overlay/alert/Alert.props.d.ts

@@ -0,0 +1,56 @@
+import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
+/**
+ * Alert component props
+ */
+export interface AlertProps {
+    /**
+     * Text content of the alert
+     */
+    text: string;
+    /**
+     * Variant of the alert determining its color and icon
+     * @default 'default'
+     */
+    variant?: AlertVariant;
+    /**
+     * Position of the alert on screen
+     * @default 'top-right'
+     */
+    position?: AlertPosition;
+    /**
+     * Whether the alert is visible
+     * @default false
+     */
+    isVisible?: boolean;
+    /**
+     * Vertical offset for stacking alerts (in pixels)
+     * @default 0
+     */
+    offsetY?: number;
+    /**
+     * Maximum width of the alert in pixels
+     * @default 300
+     */
+    maxWidth?: number;
+    /**
+     * Unique identifier for the alert
+     * @internal
+     */
+    alertId?: string;
+    /**
+     * Callback when alert height changes
+     * @internal
+     */
+    onHeightChange?: (alertId: string, height: number) => void;
+}
+/**
+ * Internal style parameters for Alert component
+ * @internal
+ */
+export interface AlertStyleParams {
+    variant: AlertVariant;
+    position: AlertPosition;
+    isVisible: boolean;
+    offsetY: number;
+    maxWidth: number;
+}

package/dist/cjs/components/overlay/alert/Alert.styles.d.ts

@@ -0,0 +1,4 @@
+import { AlertStyleParams } from '@components/overlay/alert/Alert.props';
+export declare const ALERT_STYLES: {
+    root: (args_0: AlertStyleParams) => string;
+};

package/dist/cjs/components/overlay/alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@components/overlay/alert/Alert';
+export type { AlertProps } from '@components/overlay/alert/Alert.props';

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,4 +1,5 @@
 export declare const BUTTON_SIZE = 36;
+export declare const ALERT_MAX_WIDTH = 320;
 export declare const MENU_ITEM_SIZE = 32;
 export declare const DRAWER_ITEM_HEIGHT = 32;
 export declare const DEFAULT_TRANSITION_DURATION_MS = 150;

package/dist/cjs/hooks/index.d.ts

@@ -1,3 +1,5 @@
+export { useAlert, AlertProvider } from '@hooks/useAlert.tsx';
+export type { ShowAlertOptions, AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
 export { useAnchorPosition } from '@hooks/useAnchorPosition';
 export type { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
 export { useClickOutside } from '@hooks/useClickOutside';

package/dist/cjs/hooks/useAlert.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
+/**
+ * Alert Provider Component
+ * Manages alert queue and renders alerts in a portal
+ */
+declare const AlertProvider: FC<AlertProviderProps>;
+/**
+ * Hook to access alert functionality
+ *
+ * @example
+ * ```tsx
+ * const { showAlert } = useAlert()
+ *
+ * showAlert({
+ *   text: 'Operation completed',
+ *   variant: 'success',
+ *   position: 'top-right'
+ * })
+ * ```
+ */
+declare const useAlert: () => AlertContextValue;
+export { AlertProvider, useAlert };

package/dist/cjs/hooks/useAlert.types.d.ts

@@ -0,0 +1,56 @@
+import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
+/**
+ * Alert item in the queue
+ */
+export interface AlertItem {
+    id: string;
+    text: string;
+    variant: AlertVariant;
+    position: AlertPosition;
+    timestamp: number;
+    maxWidth: number;
+}
+/**
+ * Options for showing an alert
+ */
+export interface ShowAlertOptions {
+    /**
+     * Text content of the alert
+     */
+    text: string;
+    /**
+     * Variant of the alert
+     * @default 'default'
+     */
+    variant?: AlertVariant;
+    /**
+     * Position of the alert on screen
+     * @default 'top-right'
+     */
+    position?: AlertPosition;
+    /**
+     * Duration before auto-dismiss in milliseconds
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * Maximum width of the alert in pixels
+     * @default 300
+     */
+    maxWidth?: number;
+}
+/**
+ * Alert context value
+ */
+export interface AlertContextValue {
+    /**
+     * Show an alert
+     */
+    showAlert: (options: ShowAlertOptions) => void;
+}
+/**
+ * Alert provider props
+ */
+export interface AlertProviderProps {
+    children: React.ReactNode;
+}