@aurora-ds/components 0.18.2 → 0.19.0

package/dist/esm/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/esm/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/esm/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/esm/resources/icons/AlertCircleIcon.d.ts

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

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

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

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

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

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

@@ -171,7 +171,7 @@ 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 */
@@ -196,6 +196,15 @@ declare const Avatar: FC<AvatarProps>;
  */
 declare const AvatarGroup: FC<AvatarGroupProps>;
 
+/**
+ * Alert variant types
+ */
+type AlertVariant = 'default' | 'info' | 'warning' | 'error' | 'success';
+/**
+ * Alert position types
+ */
+type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
 type ButtonVariants = 'contained' | 'outlined' | 'text' | 'destructive' | 'link';
 type IconButtonVariants = Exclude<ButtonVariants, 'link'>;
 type IconButtonSizes = 'small' | 'medium' | 'large';
@@ -736,6 +745,81 @@ type AccordionProps = {
  */
 declare const Accordion: FC<AccordionProps>;
 
+/**
+ * Alert component props
+ */
+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;
+}
+
+/**
+ * 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>;
+
 type AnchorPosition = {
     top: number;
     left: number;
@@ -958,6 +1042,72 @@ type PaginationProps = {
  */
 declare const Pagination: FC<PaginationProps>;
 
+/**
+ * Options for showing an alert
+ */
+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
+ */
+interface AlertContextValue {
+    /**
+     * Show an alert
+     */
+    showAlert: (options: ShowAlertOptions) => void;
+}
+/**
+ * Alert provider props
+ */
+interface AlertProviderProps {
+    children: React.ReactNode;
+}
+
+/**
+ * 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;
+
 type UseAnchorPositionParams = {
     anchor: HTMLElement | null;
     menuRef: RefObject<HTMLDivElement | null>;
@@ -993,5 +1143,5 @@ type UseTransitionRenderReturnType = {
  */
 declare const useTransitionRender: (isOpen: boolean, duration?: number) => UseTransitionRenderReturnType;
 
-export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, _default$1 as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
-export type { AccordionProps, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectProps, SeparatorProps, SkeletonProps, StackProps, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, UseTransitionRenderReturnType };
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, _default$1 as TextArea, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
+export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, UseTransitionRenderReturnType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "type": "module",
   "description": "Aurora DS - React Components Library",
   "main": "dist/cjs/index.js",