@aurora-ds/components 0.18.2 → 0.19.0

package/dist/cjs/interfaces/alert.types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Alert variant types
+ */
+export type AlertVariant = 'default' | 'info' | 'warning' | 'error' | 'success';
+/**
+ * Alert position types
+ */
+export type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

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

@@ -1,3 +1,4 @@
+export * from '@interfaces/alert.types';
 export * from '@interfaces/button.types';
 export * from '@interfaces/text.types';
 export * from '@interfaces/chip.types';

package/dist/cjs/resources/Icons.d.ts

@@ -1,4 +1,7 @@
+import { AlertCircleIcon } from '@resources/icons/AlertCircleIcon.tsx';
+import { AlertTriangleIcon } from '@resources/icons/AlertTriangleIcon.tsx';
 import { CalendarIcon } from '@resources/icons/CalendarIcon.tsx';
+import { CheckCircleIcon } from '@resources/icons/CheckCircleIcon.tsx';
 import { ChevronDownIcon } from '@resources/icons/ChevronDownIcon.tsx';
 import { ChevronLeftIcon } from '@resources/icons/ChevronLeftIcon.tsx';
 import { ChevronRightIcon } from '@resources/icons/ChevronRightIcon.tsx';
@@ -7,4 +10,4 @@ import { EyeIcon } from '@resources/icons/EyeIcon.tsx';
 import { EyeOffIcon } from '@resources/icons/EyeOffIcon.tsx';
 import { InfoIcon } from '@resources/icons/InfoIcon.tsx';
 import { MoreHorizontalIcon } from '@resources/icons/MoreHorizontalIcon.tsx';
-export { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon };
+export { AlertCircleIcon, AlertTriangleIcon, CalendarIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon };

package/dist/cjs/resources/icons/AlertCircleIcon.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare const AlertCircleIcon: () => JSX.Element;

package/dist/cjs/resources/icons/AlertTriangleIcon.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare const AlertTriangleIcon: () => JSX.Element;

package/dist/cjs/resources/icons/CheckCircleIcon.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare const CheckCircleIcon: () => JSX.Element;

package/dist/cjs/utils/ui/components/foundation/text/getTruncateTextStyles.utils.d.ts

@@ -5,6 +5,8 @@ export declare const getTruncateTextStyles: (maxLines: number) => {
     display?: undefined;
     WebkitLineClamp?: undefined;
     WebkitBoxOrient?: undefined;
+    overflowWrap?: undefined;
+    wordBreak?: undefined;
     lineClamp?: undefined;
 } | {
     overflow: string;
@@ -12,6 +14,8 @@ export declare const getTruncateTextStyles: (maxLines: number) => {
     display: string;
     WebkitLineClamp: number;
     WebkitBoxOrient: "vertical";
+    whiteSpace: "normal";
+    overflowWrap: "break-word";
+    wordBreak: "break-word";
     lineClamp: number;
-    whiteSpace?: undefined;
 };

package/dist/cjs/utils/ui/components/overlay/alert/getAlertIcon.utils.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+import { AlertVariant } from '@interfaces/alert.types';
+/**
+ * Get icon component for alert variant
+ * @param variant - Alert variant
+ * @returns JSX Element for the icon
+ */
+export declare const getAlertIcon: (variant: AlertVariant) => JSX.Element;

package/dist/cjs/utils/ui/components/overlay/alert/getAlertPositionStyles.utils.d.ts

@@ -0,0 +1,8 @@
+import { AlertPosition } from '@interfaces/alert.types';
+/**
+ * Get position styles for alert
+ * @param position - Alert position
+ * @param offsetY - Vertical offset for stacking (in pixels)
+ * @returns Object with CSS position styles (top/bottom + left/right)
+ */
+export declare const getAlertPositionStyles: (position: AlertPosition, offsetY: number) => Record<string, string>;

package/dist/cjs/utils/ui/components/overlay/alert/getAlertVariantColors.utils.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@aurora-ds/theme';
+import { AlertVariant } from '@interfaces/alert.types';
+export interface AlertVariantColors {
+    background: string;
+    border: string;
+    iconColor: 'info' | 'warning' | 'error' | 'success' | 'text';
+}
+/**
+ * Get colors for alert variants
+ * @param theme - Aurora theme
+ * @param variant - Alert variant
+ * @returns Colors for the variant
+ */
+export declare const getAlertVariantColors: (theme: Theme, variant: AlertVariant) => AlertVariantColors;

package/dist/esm/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/esm/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/esm/components/index.d.ts

@@ -17,12 +17,14 @@ 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';

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;
+}