@akinon/ui-alert 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import type { AlertProps } from './types';
-export type { AlertProps } from './types';
-export declare enum AlertStatus {
-    Success = "success",
-    Info1 = "info-1",
-    Info2 = "info-2",
-    Info3 = "info-3",
-    Error = "error"
-}
-export declare const Alert: ({ status, ...restAlertProps }: AlertProps) => React.JSX.Element;
+import { type IAlertProps } from './types.d';
+/**
+ * Alert component for Akinon UI.
+ *
+ * The Alert component is designed to display important messages to users with varying styles and configurations.
+ * It supports multiple types such as success, info, warning, and error, providing flexibility for different scenarios.
+ *
+ * The component allows customization of its content, icons, actions, and interaction handlers, ensuring it meets
+ * diverse requirements. It integrates seamlessly with the Akinon design system for a consistent user experience.
+ */
+export declare const Alert: ({ ...restAlertProps }: IAlertProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,KAAK,kCAAmC,UAAU,sBAwE9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAE5D;;;;;;;;GAQG;AAEH,eAAO,MAAM,KAAK,0BAA2B,WAAW,sBA4EvD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -11,21 +11,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = exports.AlertStatus = void 0;
+exports.Alert = void 0;
+const icons_1 = require("@akinon/icons");
 const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
-var AlertStatus;
-(function (AlertStatus) {
-    AlertStatus["Success"] = "success";
-    AlertStatus["Info1"] = "info-1";
-    AlertStatus["Info2"] = "info-2";
-    AlertStatus["Info3"] = "info-3";
-    AlertStatus["Error"] = "error";
-})(AlertStatus || (exports.AlertStatus = AlertStatus = {}));
+const types_d_1 = require("./types.d");
+/**
+ * Alert component for Akinon UI.
+ *
+ * The Alert component is designed to display important messages to users with varying styles and configurations.
+ * It supports multiple types such as success, info, warning, and error, providing flexibility for different scenarios.
+ *
+ * The component allows customization of its content, icons, actions, and interaction handlers, ensuring it meets
+ * diverse requirements. It integrates seamlessly with the Akinon design system for a consistent user experience.
+ */
 const Alert = (_a) => {
-    var { status } = _a, restAlertProps = __rest(_a, ["status"]);
+    var _b;
+    var restAlertProps = __rest(_a, []);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
     const alertToken = token.Alert;
@@ -38,49 +42,45 @@ const Alert = (_a) => {
         const prefixCls = `:where(.${hashId}).${getPrefixCls()}-alert`;
         const prefixClsWithoutHash = `.${getPrefixCls()}-alert`;
         return {
-            [`${prefixCls}-${AlertStatus.Success}`]: {
-                color: alertToken.defaultColorSuccess,
-                borderColor: alertToken.defaultBorderColorSuccess,
-                backgroundColor: alertToken.defaultBgSuccess,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorSuccess
+            [prefixCls]: {
+                [`&${prefixCls}-${types_d_1.AlertTypeKeys.success}`]: {
+                    color: alertToken.defaultColorSuccess,
+                    borderColor: alertToken.defaultBorderColorSuccess,
+                    backgroundColor: alertToken.defaultBgSuccess
+                },
+                [`&${prefixCls}-${types_d_1.AlertTypeKeys.infoOne}`]: {
+                    color: alertToken.defaultColorWaiting1,
+                    borderColor: alertToken.defaultBorderColorWaiting1,
+                    backgroundColor: alertToken.defaultBgWaiting1
+                },
+                [`&${prefixCls}-${types_d_1.AlertTypeKeys.infoTwo}`]: {
+                    color: alertToken.defaultColorWaiting2,
+                    borderColor: alertToken.defaultBorderColorWaiting2,
+                    backgroundColor: alertToken.defaultBgWaiting2
+                },
+                [`&${prefixCls}-${types_d_1.AlertTypeKeys.infoThree}`]: {
+                    color: alertToken.defaultColorWaiting3,
+                    borderColor: alertToken.defaultBorderColorWaiting3,
+                    backgroundColor: alertToken.defaultBgWaiting3
+                },
+                [`&${prefixCls}-${types_d_1.AlertTypeKeys.error}`]: {
+                    color: alertToken.defaultColorFailed,
+                    borderColor: alertToken.defaultBorderColorFailed,
+                    backgroundColor: alertToken.defaultBgFailed
                 }
             },
-            [`${prefixCls}-${AlertStatus.Info1}`]: {
-                color: alertToken.defaultColorWaiting1,
-                borderColor: alertToken.defaultBorderColorWaiting1,
-                backgroundColor: alertToken.defaultBgWaiting1,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting1
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Info2}`]: {
-                color: alertToken.defaultColorWaiting2,
-                borderColor: alertToken.defaultBorderColorWaiting2,
-                backgroundColor: alertToken.defaultBgWaiting2,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting2
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Info3}`]: {
-                color: alertToken.defaultColorWaiting3,
-                borderColor: alertToken.defaultBorderColorWaiting3,
-                backgroundColor: alertToken.defaultBgWaiting3,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting3
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Error}`]: {
-                color: alertToken.defaultColorFailed,
-                borderColor: alertToken.defaultBorderColorFailed,
-                backgroundColor: alertToken.defaultBgFailed,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorFailed
-                }
-            },
-            [prefixClsWithoutHash]: {}
+            [`${prefixClsWithoutHash}`]: {}
         };
     });
-    return useStyle(React.createElement(antd_1.Alert, Object.assign({ className: status && `akinon-alert-${status}` }, restAlertProps)));
+    const iconNameMap = {
+        [types_d_1.AlertTypeKeys.success]: 'yes',
+        [types_d_1.AlertTypeKeys.infoOne]: 'info',
+        [types_d_1.AlertTypeKeys.infoTwo]: 'info',
+        [types_d_1.AlertTypeKeys.infoThree]: 'info',
+        [types_d_1.AlertTypeKeys.error]: 'no',
+        info: 'info'
+    };
+    const iconName = React.useMemo(() => { var _a; return iconNameMap[(_a = restAlertProps.type) !== null && _a !== void 0 ? _a : 'success']; }, [restAlertProps.type]);
+    return useStyle(React.createElement(antd_1.Alert, Object.assign({ type: types_d_1.AlertTypeKeys.success }, restAlertProps, { icon: React.createElement(icons_1.Icon, { size: 14, icon: ((_b = restAlertProps.icon) !== null && _b !== void 0 ? _b : iconName) }) })));
 };
 exports.Alert = Alert;

package/dist/cjs/types.d.ts

@@ -1,88 +1,144 @@
-import { AlertStatus } from './';
-
-export type AlertProps = Omit<
-  AntAlertProps,
-  | 'prefixCls'
-  | 'style'
-  | 'styles'
-  | 'closeIcon'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onClick'
-  | 'id'
-  | 'role'
-> & {
-  /**
-   * The status of the alert.
-   */
-  status?: AlertStatus;
-};
+import { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { AriaRole } from 'react';
+
+export const AlertTypeKeys = {
+  success: 'success',
+  infoOne: 'info-one',
+  infoTwo: 'info-two',
+  infoThree: 'info-three',
+  error: 'error'
+} as const;
+
+export type IAlertProps = {
+  /**
+   * Type of Alert styles
+   * @default success
+   */
+  type?: (typeof AlertTypeKeys)[keyof typeof AlertTypeKeys];
 
-interface AntAlertProps {
-  /** Type of Alert styles */
-  type?: 'success' | 'info' | 'warning' | 'error';
-  /** Whether Alert can be closed */
+  /**
+   * Whether Alert can be closed
+   */
   closable?: ClosableType;
-  /** Content of Alert */
+
+  /**
+   * Content of Alert
+   */
   message?: React.ReactNode;
-  /** Additional content of Alert */
+
+  /**
+   * Additional content of Alert
+   */
   description?: React.ReactNode;
-  /** Callback when close Alert */
+
+  /**
+   * Callback when close Alert
+   */
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Trigger when animation ending of Alert */
+
+  /**
+   * Trigger when animation ending of Alert
+   */
   afterClose?: () => void;
-  /** Whether to show icon */
+
+  /**
+   * Whether to show icon
+   */
   showIcon?: boolean;
-  /** https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute */
-  role?: string;
-  style?: React.CSSProperties;
-  prefixCls?: string;
+
   /**
-   * The additional css class
+   * https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute
    */
-  className?: string;
+  role?: AriaRole;
+
   /**
-   * ClassName on the root element
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
    */
-  rootClassName?: string;
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
   /**
    * Whether to show as banner
    */
   banner?: boolean;
+
   /**
-   * Custom icon, effective when showIcon is true
-   */
-  icon?: React.ReactNode;
-  /**
-   * Custom close icon
+   * The icon name of the button. Only icons from `akinon/icons` are supported.
+   * If there is no icon which you want to use, please open an issue.
    */
-  closeIcon?: React.ReactNode;
+  icon?: IconName;
+
   /**
    * The action of Alert
    */
   action?: React.ReactNode;
+
+  /**
+   * Mouse enter event handler
+   */
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Mouse leave event handler
+   */
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Click event handler
+   */
   onClick?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * ID for the alert container
+   */
   id?: string;
-}
+};
 
 type BaseClosableType = {
+  /**
+   * Custom close icon for the alert.
+   */
   closeIcon?: React.ReactNode;
 } & React.AriaAttributes;
 
 type ClosableType = boolean | BaseClosableType;
 
 interface ErrorBoundaryProps {
+  /**
+   * Error message to display.
+   */
   message?: React.ReactNode;
+
+  /**
+   * Additional description for the error.
+   */
   description?: React.ReactNode;
+
+  /**
+   * Child components to render.
+   */
   children?: React.ReactNode;
+
+  /**
+   * ID for the error boundary.
+   */
   id?: string;
 }
 
 interface ErrorBoundaryStates {
+  /**
+   * Captured error information.
+   */
   error?: Error | null;
+
+  /**
+   * Additional info about the error.
+   */
   info?: {
+    /**
+     * Component stack trace.
+     */
     componentStack?: string;
   };
 }
@@ -91,13 +147,24 @@ declare class ErrorBoundary extends React.Component<
   ErrorBoundaryProps,
   ErrorBoundaryStates
 > {
+  /**
+   * Component state.
+   */
   state: {
     error: undefined;
     info: {
       componentStack: string;
     };
   };
+
+  /**
+   * Lifecycle method to capture errors.
+   */
   componentDidCatch(error: Error | null, info: object): void;
+
+  /**
+   * Render method for the component.
+   */
   render():
     | string
     | number

package/dist/esm/index.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import type { AlertProps } from './types';
-export type { AlertProps } from './types';
-export declare enum AlertStatus {
-    Success = "success",
-    Info1 = "info-1",
-    Info2 = "info-2",
-    Info3 = "info-3",
-    Error = "error"
-}
-export declare const Alert: ({ status, ...restAlertProps }: AlertProps) => React.JSX.Element;
+import { type IAlertProps } from './types.d';
+/**
+ * Alert component for Akinon UI.
+ *
+ * The Alert component is designed to display important messages to users with varying styles and configurations.
+ * It supports multiple types such as success, info, warning, and error, providing flexibility for different scenarios.
+ *
+ * The component allows customization of its content, icons, actions, and interaction handlers, ensuring it meets
+ * diverse requirements. It integrates seamlessly with the Akinon design system for a consistent user experience.
+ */
+export declare const Alert: ({ ...restAlertProps }: IAlertProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,KAAK,kCAAmC,UAAU,sBAwE9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAE5D;;;;;;;;GAQG;AAEH,eAAO,MAAM,KAAK,0BAA2B,WAAW,sBA4EvD,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -9,20 +9,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { Icon } from '@akinon/icons';
 import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { Alert as AntAlert, ConfigProvider } from 'antd';
 import * as React from 'react';
-export var AlertStatus;
-(function (AlertStatus) {
-    AlertStatus["Success"] = "success";
-    AlertStatus["Info1"] = "info-1";
-    AlertStatus["Info2"] = "info-2";
-    AlertStatus["Info3"] = "info-3";
-    AlertStatus["Error"] = "error";
-})(AlertStatus || (AlertStatus = {}));
+import { AlertTypeKeys } from './types.d';
+/**
+ * Alert component for Akinon UI.
+ *
+ * The Alert component is designed to display important messages to users with varying styles and configurations.
+ * It supports multiple types such as success, info, warning, and error, providing flexibility for different scenarios.
+ *
+ * The component allows customization of its content, icons, actions, and interaction handlers, ensuring it meets
+ * diverse requirements. It integrates seamlessly with the Akinon design system for a consistent user experience.
+ */
 export const Alert = (_a) => {
-    var { status } = _a, restAlertProps = __rest(_a, ["status"]);
+    var _b;
+    var restAlertProps = __rest(_a, []);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const alertToken = token.Alert;
@@ -35,48 +39,44 @@ export const Alert = (_a) => {
         const prefixCls = `:where(.${hashId}).${getPrefixCls()}-alert`;
         const prefixClsWithoutHash = `.${getPrefixCls()}-alert`;
         return {
-            [`${prefixCls}-${AlertStatus.Success}`]: {
-                color: alertToken.defaultColorSuccess,
-                borderColor: alertToken.defaultBorderColorSuccess,
-                backgroundColor: alertToken.defaultBgSuccess,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorSuccess
+            [prefixCls]: {
+                [`&${prefixCls}-${AlertTypeKeys.success}`]: {
+                    color: alertToken.defaultColorSuccess,
+                    borderColor: alertToken.defaultBorderColorSuccess,
+                    backgroundColor: alertToken.defaultBgSuccess
+                },
+                [`&${prefixCls}-${AlertTypeKeys.infoOne}`]: {
+                    color: alertToken.defaultColorWaiting1,
+                    borderColor: alertToken.defaultBorderColorWaiting1,
+                    backgroundColor: alertToken.defaultBgWaiting1
+                },
+                [`&${prefixCls}-${AlertTypeKeys.infoTwo}`]: {
+                    color: alertToken.defaultColorWaiting2,
+                    borderColor: alertToken.defaultBorderColorWaiting2,
+                    backgroundColor: alertToken.defaultBgWaiting2
+                },
+                [`&${prefixCls}-${AlertTypeKeys.infoThree}`]: {
+                    color: alertToken.defaultColorWaiting3,
+                    borderColor: alertToken.defaultBorderColorWaiting3,
+                    backgroundColor: alertToken.defaultBgWaiting3
+                },
+                [`&${prefixCls}-${AlertTypeKeys.error}`]: {
+                    color: alertToken.defaultColorFailed,
+                    borderColor: alertToken.defaultBorderColorFailed,
+                    backgroundColor: alertToken.defaultBgFailed
                 }
             },
-            [`${prefixCls}-${AlertStatus.Info1}`]: {
-                color: alertToken.defaultColorWaiting1,
-                borderColor: alertToken.defaultBorderColorWaiting1,
-                backgroundColor: alertToken.defaultBgWaiting1,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting1
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Info2}`]: {
-                color: alertToken.defaultColorWaiting2,
-                borderColor: alertToken.defaultBorderColorWaiting2,
-                backgroundColor: alertToken.defaultBgWaiting2,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting2
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Info3}`]: {
-                color: alertToken.defaultColorWaiting3,
-                borderColor: alertToken.defaultBorderColorWaiting3,
-                backgroundColor: alertToken.defaultBgWaiting3,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorWaiting3
-                }
-            },
-            [`${prefixCls}-${AlertStatus.Error}`]: {
-                color: alertToken.defaultColorFailed,
-                borderColor: alertToken.defaultBorderColorFailed,
-                backgroundColor: alertToken.defaultBgFailed,
-                ['.anticon.anticon-close']: {
-                    color: alertToken.defaultBorderColorFailed
-                }
-            },
-            [prefixClsWithoutHash]: {}
+            [`${prefixClsWithoutHash}`]: {}
         };
     });
-    return useStyle(React.createElement(AntAlert, Object.assign({ className: status && `akinon-alert-${status}` }, restAlertProps)));
+    const iconNameMap = {
+        [AlertTypeKeys.success]: 'yes',
+        [AlertTypeKeys.infoOne]: 'info',
+        [AlertTypeKeys.infoTwo]: 'info',
+        [AlertTypeKeys.infoThree]: 'info',
+        [AlertTypeKeys.error]: 'no',
+        info: 'info'
+    };
+    const iconName = React.useMemo(() => { var _a; return iconNameMap[(_a = restAlertProps.type) !== null && _a !== void 0 ? _a : 'success']; }, [restAlertProps.type]);
+    return useStyle(React.createElement(AntAlert, Object.assign({ type: AlertTypeKeys.success }, restAlertProps, { icon: React.createElement(Icon, { size: 14, icon: ((_b = restAlertProps.icon) !== null && _b !== void 0 ? _b : iconName) }) })));
 };

package/dist/esm/types.d.ts

@@ -1,88 +1,144 @@
-import { AlertStatus } from './';
-
-export type AlertProps = Omit<
-  AntAlertProps,
-  | 'prefixCls'
-  | 'style'
-  | 'styles'
-  | 'closeIcon'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onClick'
-  | 'id'
-  | 'role'
-> & {
-  /**
-   * The status of the alert.
-   */
-  status?: AlertStatus;
-};
+import { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { AriaRole } from 'react';
+
+export const AlertTypeKeys = {
+  success: 'success',
+  infoOne: 'info-one',
+  infoTwo: 'info-two',
+  infoThree: 'info-three',
+  error: 'error'
+} as const;
+
+export type IAlertProps = {
+  /**
+   * Type of Alert styles
+   * @default success
+   */
+  type?: (typeof AlertTypeKeys)[keyof typeof AlertTypeKeys];
 
-interface AntAlertProps {
-  /** Type of Alert styles */
-  type?: 'success' | 'info' | 'warning' | 'error';
-  /** Whether Alert can be closed */
+  /**
+   * Whether Alert can be closed
+   */
   closable?: ClosableType;
-  /** Content of Alert */
+
+  /**
+   * Content of Alert
+   */
   message?: React.ReactNode;
-  /** Additional content of Alert */
+
+  /**
+   * Additional content of Alert
+   */
   description?: React.ReactNode;
-  /** Callback when close Alert */
+
+  /**
+   * Callback when close Alert
+   */
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Trigger when animation ending of Alert */
+
+  /**
+   * Trigger when animation ending of Alert
+   */
   afterClose?: () => void;
-  /** Whether to show icon */
+
+  /**
+   * Whether to show icon
+   */
   showIcon?: boolean;
-  /** https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute */
-  role?: string;
-  style?: React.CSSProperties;
-  prefixCls?: string;
+
   /**
-   * The additional css class
+   * https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute
    */
-  className?: string;
+  role?: AriaRole;
+
   /**
-   * ClassName on the root element
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
    */
-  rootClassName?: string;
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
   /**
    * Whether to show as banner
    */
   banner?: boolean;
+
   /**
-   * Custom icon, effective when showIcon is true
-   */
-  icon?: React.ReactNode;
-  /**
-   * Custom close icon
+   * The icon name of the button. Only icons from `akinon/icons` are supported.
+   * If there is no icon which you want to use, please open an issue.
    */
-  closeIcon?: React.ReactNode;
+  icon?: IconName;
+
   /**
    * The action of Alert
    */
   action?: React.ReactNode;
+
+  /**
+   * Mouse enter event handler
+   */
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Mouse leave event handler
+   */
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Click event handler
+   */
   onClick?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * ID for the alert container
+   */
   id?: string;
-}
+};
 
 type BaseClosableType = {
+  /**
+   * Custom close icon for the alert.
+   */
   closeIcon?: React.ReactNode;
 } & React.AriaAttributes;
 
 type ClosableType = boolean | BaseClosableType;
 
 interface ErrorBoundaryProps {
+  /**
+   * Error message to display.
+   */
   message?: React.ReactNode;
+
+  /**
+   * Additional description for the error.
+   */
   description?: React.ReactNode;
+
+  /**
+   * Child components to render.
+   */
   children?: React.ReactNode;
+
+  /**
+   * ID for the error boundary.
+   */
   id?: string;
 }
 
 interface ErrorBoundaryStates {
+  /**
+   * Captured error information.
+   */
   error?: Error | null;
+
+  /**
+   * Additional info about the error.
+   */
   info?: {
+    /**
+     * Component stack trace.
+     */
     componentStack?: string;
   };
 }
@@ -91,13 +147,24 @@ declare class ErrorBoundary extends React.Component<
   ErrorBoundaryProps,
   ErrorBoundaryStates
 > {
+  /**
+   * Component state.
+   */
   state: {
     error: undefined;
     info: {
       componentStack: string;
     };
   };
+
+  /**
+   * Lifecycle method to capture errors.
+   */
   componentDidCatch(error: Error | null, info: object): void;
+
+  /**
+   * Render method for the component.
+   */
   render():
     | string
     | number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-alert",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,15 +9,16 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/ui-theme": "0.7.0"
+    "antd": "5.22.6",
+    "@akinon/icons": "1.0.1",
+    "@akinon/ui-theme": "1.0.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",