@akinon/ui-avatar 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,6 +1,28 @@
 import * as React from 'react';
 import type { AvatarGroupProps, AvatarProps } from './types';
+/**
+ * Avatar component for Akinon UI.
+ *
+ * The Avatar component is used to represent individuals or entities with customizable
+ * shapes, sizes, and content. It supports images, text, or icons as its content,
+ * and offers responsive size configurations for flexible design.
+ *
+ * The Avatar component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for user profiles, lists, and other contexts
+ * where visual representation is needed.
+ */
 export declare const Avatar: ({ shape, ...restAvatarProps }: AvatarProps) => React.JSX.Element;
-export declare const AvatarGroup: ({ maxPopoverPlacement, maxPopoverTrigger, shape, children, ...restAvatarProps }: AvatarGroupProps) => React.JSX.Element;
+/**
+ * AvatarGroup component for Akinon UI.
+ *
+ * The AvatarGroup component is used to display a collection of avatars as a group,
+ * with options for size, shape, and maximum visible avatars. It supports a popover
+ * for collapsed avatars when the count exceeds the maximum limit.
+ *
+ * The AvatarGroup component adheres to the Akinon design system, providing consistent
+ * styling and functionality. It is ideal for representing teams, participants, or
+ * groups in a compact and visually appealing way.
+ */
+export declare const AvatarGroup: ({ children, ...restAvatarProps }: AvatarGroupProps) => React.JSX.Element;
 export type { AvatarGroupProps, AvatarProps };
 //# 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,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF,eAAO,MAAM,WAAW,oFAMrB,gBAAgB,sBAkClB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
+{"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,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,WAAW,qCAGrB,gBAAgB,sBA2BlB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/cjs/index.js

@@ -16,6 +16,17 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Avatar component for Akinon UI.
+ *
+ * The Avatar component is used to represent individuals or entities with customizable
+ * shapes, sizes, and content. It supports images, text, or icons as its content,
+ * and offers responsive size configurations for flexible design.
+ *
+ * The Avatar component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for user profiles, lists, and other contexts
+ * where visual representation is needed.
+ */
 const Avatar = (_a) => {
     var { shape = 'circle' } = _a, restAvatarProps = __rest(_a, ["shape"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
@@ -37,8 +48,19 @@ const Avatar = (_a) => {
     return useStyle(React.createElement(antd_1.Avatar, Object.assign({ shape: shape }, restAvatarProps)));
 };
 exports.Avatar = Avatar;
+/**
+ * AvatarGroup component for Akinon UI.
+ *
+ * The AvatarGroup component is used to display a collection of avatars as a group,
+ * with options for size, shape, and maximum visible avatars. It supports a popover
+ * for collapsed avatars when the count exceeds the maximum limit.
+ *
+ * The AvatarGroup component adheres to the Akinon design system, providing consistent
+ * styling and functionality. It is ideal for representing teams, participants, or
+ * groups in a compact and visually appealing way.
+ */
 const AvatarGroup = (_a) => {
-    var { maxPopoverPlacement = 'top', maxPopoverTrigger = 'hover', shape = 'circle', children } = _a, restAvatarProps = __rest(_a, ["maxPopoverPlacement", "maxPopoverTrigger", "shape", "children"]);
+    var { children } = _a, restAvatarProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
     const useStyle = (0, cssinjs_1.useStyleRegister)({
@@ -54,6 +76,6 @@ const AvatarGroup = (_a) => {
             [prefixClsWithoutHash]: {}
         };
     });
-    return useStyle(React.createElement(antd_1.Avatar.Group, Object.assign({ maxPopoverPlacement: maxPopoverPlacement, maxPopoverTrigger: maxPopoverTrigger, shape: shape }, restAvatarProps), children));
+    return useStyle(React.createElement(antd_1.Avatar.Group, Object.assign({}, restAvatarProps), children));
 };
 exports.AvatarGroup = AvatarGroup;

package/dist/cjs/types.d.ts

@@ -1,55 +1,131 @@
+/**
+ * Breakpoint type for screen size mappings.
+ */
 type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+/**
+ * Mapping of screen sizes to numbers, used for responsive configurations.
+ */
 type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
+/**
+ * Avatar size configuration, supporting predefined sizes, numeric values, or responsive mappings.
+ */
 type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
+/**
+ * Props for the Avatar component.
+ */
 export interface AvatarProps {
-  /** The shape of avatar	*/
+  /**
+   * The shape of the avatar.
+   */
   shape?: 'circle' | 'square';
-  /** The size of the avatar	*/
+
+  /**
+   * The size of the avatar.
+   */
   size?: AvatarSize;
-  /** Letter type unit distance between left and right sides */
+
+  /**
+   * Letter type unit distance between left and right sides
+   */
   gap?: number;
-  /** The address of the image for an image avatar or image element */
+
+  /**
+   * The address of the image for an image avatar or image element
+   */
   src?: React.ReactNode | string;
-  /** A list of sources to use for different screen resolutions */
+
+  /**
+   * A list of sources to use for different screen resolutions
+   */
   srcSet?: string;
-  /** Whether the picture is allowed to be dragged */
+
+  /**
+   * Whether the picture is allowed to be dragged
+   */
   draggable?: boolean | 'true' | 'false';
-  /** Custom icon type for an icon avatar	*/
+
+  /**
+   * Custom icon type for an icon avatar
+   */
   icon?: React.ReactNode;
-  /** Additional CSS class name */
+
+  /**
+   * Additional CSS class name
+   */
   className?: string;
-  /** Additional CSS class name for the root element */
+
+  /**
+   * Additional CSS class name for the root element
+   */
   rootClassName?: string;
-  /** The content of the avatar */
+
+  /**
+   *  The content of the avatar
+   */
   children?: React.ReactNode;
-  /** This attribute defines the alternative text describing the image */
+
+  /**
+   * This attribute defines the alternative text describing the image
+   */
   alt?: string;
-  /** CORS settings attributes	 */
+
+  /**
+   * CORS settings attributes
+   */
   crossOrigin?: 'anonymous' | 'use-credentials';
+
+  /**
+   * Click event handler for the avatar.
+   */
   onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
-  /** Handler when img load error, return false to prevent default fallback behavior */
+
+  /**
+   * Handler when img load error, return false to prevent default fallback behavior
+   */
   onError?: () => boolean;
 }
 
+/**
+ * Props for the AvatarGroup component.
+ */
 export interface AvatarGroupProps {
-  /** Additional CSS class name */
+  /**
+   * Additional CSS class name
+   */
   className?: string;
-  /** Additional CSS class name for the root element */
+
+  /**
+   * Additional CSS class name for the root element
+   */
   rootClassName?: string;
-  /** The content of the avatar group */
+
+  /**
+   * The content of the avatar group
+   */
   children?: React.ReactNode;
-  /** Maximum number of avatars to display before collapsing */
-  maxCount?: number;
-  /** Additional CSS styles for the maximum number of avatars */
-  maxStyle?: React.CSSProperties;
-  /** Placement of the popover for the maximum number of avatars */
-  maxPopoverPlacement?: 'top' | 'bottom';
-  /** Trigger type for the popover of the maximum number of avatars */
-  maxPopoverTrigger?: 'hover' | 'focus' | 'click';
-  /** Size of the avatars in the group */
+
+  /**
+   * Maximum number of avatars to display before collapsing settings
+   * @default { popover: { placement: 'top', trigger: 'hover' } }
+   */
+  max?: {
+    popover?: {
+      placement?: 'top' | 'bottom';
+      trigger?: 'hover' | 'focus' | 'click';
+    };
+    count?: number;
+  };
+
+  /**
+   * Size of the avatars in the group
+   */
   size?: AvatarSize;
-  /** Shape of the avatars in the group */
+
+  /**
+   * Shape of the avatars in the group
+   */
   shape?: 'circle' | 'square';
 }

package/dist/esm/index.d.ts

@@ -1,6 +1,28 @@
 import * as React from 'react';
 import type { AvatarGroupProps, AvatarProps } from './types';
+/**
+ * Avatar component for Akinon UI.
+ *
+ * The Avatar component is used to represent individuals or entities with customizable
+ * shapes, sizes, and content. It supports images, text, or icons as its content,
+ * and offers responsive size configurations for flexible design.
+ *
+ * The Avatar component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for user profiles, lists, and other contexts
+ * where visual representation is needed.
+ */
 export declare const Avatar: ({ shape, ...restAvatarProps }: AvatarProps) => React.JSX.Element;
-export declare const AvatarGroup: ({ maxPopoverPlacement, maxPopoverTrigger, shape, children, ...restAvatarProps }: AvatarGroupProps) => React.JSX.Element;
+/**
+ * AvatarGroup component for Akinon UI.
+ *
+ * The AvatarGroup component is used to display a collection of avatars as a group,
+ * with options for size, shape, and maximum visible avatars. It supports a popover
+ * for collapsed avatars when the count exceeds the maximum limit.
+ *
+ * The AvatarGroup component adheres to the Akinon design system, providing consistent
+ * styling and functionality. It is ideal for representing teams, participants, or
+ * groups in a compact and visually appealing way.
+ */
+export declare const AvatarGroup: ({ children, ...restAvatarProps }: AvatarGroupProps) => React.JSX.Element;
 export type { AvatarGroupProps, AvatarProps };
 //# 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,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF,eAAO,MAAM,WAAW,oFAMrB,gBAAgB,sBAkClB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
+{"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,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,WAAW,qCAGrB,gBAAgB,sBA2BlB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/esm/index.js

@@ -13,6 +13,17 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { Avatar as AntAvatar, ConfigProvider } from 'antd';
 import * as React from 'react';
+/**
+ * Avatar component for Akinon UI.
+ *
+ * The Avatar component is used to represent individuals or entities with customizable
+ * shapes, sizes, and content. It supports images, text, or icons as its content,
+ * and offers responsive size configurations for flexible design.
+ *
+ * The Avatar component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for user profiles, lists, and other contexts
+ * where visual representation is needed.
+ */
 export const Avatar = (_a) => {
     var { shape = 'circle' } = _a, restAvatarProps = __rest(_a, ["shape"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
@@ -33,8 +44,19 @@ export const Avatar = (_a) => {
     });
     return useStyle(React.createElement(AntAvatar, Object.assign({ shape: shape }, restAvatarProps)));
 };
+/**
+ * AvatarGroup component for Akinon UI.
+ *
+ * The AvatarGroup component is used to display a collection of avatars as a group,
+ * with options for size, shape, and maximum visible avatars. It supports a popover
+ * for collapsed avatars when the count exceeds the maximum limit.
+ *
+ * The AvatarGroup component adheres to the Akinon design system, providing consistent
+ * styling and functionality. It is ideal for representing teams, participants, or
+ * groups in a compact and visually appealing way.
+ */
 export const AvatarGroup = (_a) => {
-    var { maxPopoverPlacement = 'top', maxPopoverTrigger = 'hover', shape = 'circle', children } = _a, restAvatarProps = __rest(_a, ["maxPopoverPlacement", "maxPopoverTrigger", "shape", "children"]);
+    var { children } = _a, restAvatarProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const useStyle = useStyleRegister({
@@ -50,5 +72,5 @@ export const AvatarGroup = (_a) => {
             [prefixClsWithoutHash]: {}
         };
     });
-    return useStyle(React.createElement(AntAvatar.Group, Object.assign({ maxPopoverPlacement: maxPopoverPlacement, maxPopoverTrigger: maxPopoverTrigger, shape: shape }, restAvatarProps), children));
+    return useStyle(React.createElement(AntAvatar.Group, Object.assign({}, restAvatarProps), children));
 };

package/dist/esm/types.d.ts

@@ -1,55 +1,131 @@
+/**
+ * Breakpoint type for screen size mappings.
+ */
 type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+/**
+ * Mapping of screen sizes to numbers, used for responsive configurations.
+ */
 type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
+/**
+ * Avatar size configuration, supporting predefined sizes, numeric values, or responsive mappings.
+ */
 type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
+/**
+ * Props for the Avatar component.
+ */
 export interface AvatarProps {
-  /** The shape of avatar	*/
+  /**
+   * The shape of the avatar.
+   */
   shape?: 'circle' | 'square';
-  /** The size of the avatar	*/
+
+  /**
+   * The size of the avatar.
+   */
   size?: AvatarSize;
-  /** Letter type unit distance between left and right sides */
+
+  /**
+   * Letter type unit distance between left and right sides
+   */
   gap?: number;
-  /** The address of the image for an image avatar or image element */
+
+  /**
+   * The address of the image for an image avatar or image element
+   */
   src?: React.ReactNode | string;
-  /** A list of sources to use for different screen resolutions */
+
+  /**
+   * A list of sources to use for different screen resolutions
+   */
   srcSet?: string;
-  /** Whether the picture is allowed to be dragged */
+
+  /**
+   * Whether the picture is allowed to be dragged
+   */
   draggable?: boolean | 'true' | 'false';
-  /** Custom icon type for an icon avatar	*/
+
+  /**
+   * Custom icon type for an icon avatar
+   */
   icon?: React.ReactNode;
-  /** Additional CSS class name */
+
+  /**
+   * Additional CSS class name
+   */
   className?: string;
-  /** Additional CSS class name for the root element */
+
+  /**
+   * Additional CSS class name for the root element
+   */
   rootClassName?: string;
-  /** The content of the avatar */
+
+  /**
+   *  The content of the avatar
+   */
   children?: React.ReactNode;
-  /** This attribute defines the alternative text describing the image */
+
+  /**
+   * This attribute defines the alternative text describing the image
+   */
   alt?: string;
-  /** CORS settings attributes	 */
+
+  /**
+   * CORS settings attributes
+   */
   crossOrigin?: 'anonymous' | 'use-credentials';
+
+  /**
+   * Click event handler for the avatar.
+   */
   onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
-  /** Handler when img load error, return false to prevent default fallback behavior */
+
+  /**
+   * Handler when img load error, return false to prevent default fallback behavior
+   */
   onError?: () => boolean;
 }
 
+/**
+ * Props for the AvatarGroup component.
+ */
 export interface AvatarGroupProps {
-  /** Additional CSS class name */
+  /**
+   * Additional CSS class name
+   */
   className?: string;
-  /** Additional CSS class name for the root element */
+
+  /**
+   * Additional CSS class name for the root element
+   */
   rootClassName?: string;
-  /** The content of the avatar group */
+
+  /**
+   * The content of the avatar group
+   */
   children?: React.ReactNode;
-  /** Maximum number of avatars to display before collapsing */
-  maxCount?: number;
-  /** Additional CSS styles for the maximum number of avatars */
-  maxStyle?: React.CSSProperties;
-  /** Placement of the popover for the maximum number of avatars */
-  maxPopoverPlacement?: 'top' | 'bottom';
-  /** Trigger type for the popover of the maximum number of avatars */
-  maxPopoverTrigger?: 'hover' | 'focus' | 'click';
-  /** Size of the avatars in the group */
+
+  /**
+   * Maximum number of avatars to display before collapsing settings
+   * @default { popover: { placement: 'top', trigger: 'hover' } }
+   */
+  max?: {
+    popover?: {
+      placement?: 'top' | 'bottom';
+      trigger?: 'hover' | 'focus' | 'click';
+    };
+    count?: number;
+  };
+
+  /**
+   * Size of the avatars in the group
+   */
   size?: AvatarSize;
-  /** Shape of the avatars in the group */
+
+  /**
+   * Shape of the avatars in the group
+   */
   shape?: 'circle' | 'square';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-avatar",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,15 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/ui-theme": "0.7.0"
+    "antd": "5.22.6",
+    "@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",