@akinon/ui-avatar 0.3.0 → 0.5.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,6 @@
-import type { AvatarProps as AntAvatarProps } from 'antd';
 import * as React from 'react';
-export type AvatarProps = AntAvatarProps;
-export declare const Avatar: ({ ...restAvatarProps }: AvatarProps) => React.JSX.Element;
+import type { AvatarGroupProps, AvatarProps } from './types';
+export declare const Avatar: ({ shape, ...restAvatarProps }: AvatarProps) => React.JSX.Element;
+export declare const AvatarGroup: ({ maxPopoverPlacement, maxPopoverTrigger, shape, 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":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAEzD,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,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF,eAAO,MAAM,WAAW,oFAMrB,gBAAgB,sBAkClB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/cjs/index.js

@@ -11,11 +11,49 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
+exports.AvatarGroup = exports.Avatar = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const Avatar = (_a) => {
-    var restAvatarProps = __rest(_a, []);
-    return React.createElement(antd_1.Avatar, Object.assign({}, restAvatarProps));
+    var { shape = 'circle' } = _a, restAvatarProps = __rest(_a, ["shape"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    //const avatarToken = (token as GlobalToken).Avatar;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Avatar'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-avatar`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-avatar`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(antd_1.Avatar, Object.assign({ shape: shape }, restAvatarProps)));
 };
 exports.Avatar = Avatar;
+const AvatarGroup = (_a) => {
+    var { maxPopoverPlacement = 'top', maxPopoverTrigger = 'hover', shape = 'circle', children } = _a, restAvatarProps = __rest(_a, ["maxPopoverPlacement", "maxPopoverTrigger", "shape", "children"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['AvatarGroup'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-avatarGroup`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-avatarGroup`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(antd_1.Avatar.Group, Object.assign({ maxPopoverPlacement: maxPopoverPlacement, maxPopoverTrigger: maxPopoverTrigger, shape: shape }, restAvatarProps), children));
+};
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/types.d.ts

@@ -0,0 +1,55 @@
+type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
+
+type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+
+export interface AvatarProps {
+  /** The shape of avatar	*/
+  shape?: 'circle' | 'square';
+  /** The size of the avatar	*/
+  size?: AvatarSize;
+  /** Letter type unit distance between left and right sides */
+  gap?: number;
+  /** 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 */
+  srcSet?: string;
+  /** Whether the picture is allowed to be dragged */
+  draggable?: boolean | 'true' | 'false';
+  /** Custom icon type for an icon avatar	*/
+  icon?: React.ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional CSS class name for the root element */
+  rootClassName?: string;
+  /** The content of the avatar */
+  children?: React.ReactNode;
+  /** This attribute defines the alternative text describing the image */
+  alt?: string;
+  /** CORS settings attributes	 */
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+  /** Handler when img load error, return false to prevent default fallback behavior */
+  onError?: () => boolean;
+}
+
+export interface AvatarGroupProps {
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional CSS class name for the root element */
+  rootClassName?: string;
+  /** 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 */
+  size?: AvatarSize;
+  /** Shape of the avatars in the group */
+  shape?: 'circle' | 'square';
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
-import type { AvatarProps as AntAvatarProps } from 'antd';
 import * as React from 'react';
-export type AvatarProps = AntAvatarProps;
-export declare const Avatar: ({ ...restAvatarProps }: AvatarProps) => React.JSX.Element;
+import type { AvatarGroupProps, AvatarProps } from './types';
+export declare const Avatar: ({ shape, ...restAvatarProps }: AvatarProps) => React.JSX.Element;
+export declare const AvatarGroup: ({ maxPopoverPlacement, maxPopoverTrigger, shape, 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":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,MAAM,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAEzD,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,eAAO,MAAM,MAAM,kCAGhB,WAAW,sBA2Bb,CAAC;AAEF,eAAO,MAAM,WAAW,oFAMrB,gBAAgB,sBAkClB,CAAC;AAEF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/esm/index.js

@@ -9,9 +9,46 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Avatar as AntAvatar } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { Avatar as AntAvatar, ConfigProvider } from 'antd';
 import * as React from 'react';
 export const Avatar = (_a) => {
-    var restAvatarProps = __rest(_a, []);
-    return React.createElement(AntAvatar, Object.assign({}, restAvatarProps));
+    var { shape = 'circle' } = _a, restAvatarProps = __rest(_a, ["shape"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const avatarToken = (token as GlobalToken).Avatar;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Avatar'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-avatar`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-avatar`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntAvatar, Object.assign({ shape: shape }, restAvatarProps)));
+};
+export const AvatarGroup = (_a) => {
+    var { maxPopoverPlacement = 'top', maxPopoverTrigger = 'hover', shape = 'circle', children } = _a, restAvatarProps = __rest(_a, ["maxPopoverPlacement", "maxPopoverTrigger", "shape", "children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['AvatarGroup'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-avatarGroup`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-avatarGroup`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntAvatar.Group, Object.assign({ maxPopoverPlacement: maxPopoverPlacement, maxPopoverTrigger: maxPopoverTrigger, shape: shape }, restAvatarProps), children));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,55 @@
+type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
+
+type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+
+export interface AvatarProps {
+  /** The shape of avatar	*/
+  shape?: 'circle' | 'square';
+  /** The size of the avatar	*/
+  size?: AvatarSize;
+  /** Letter type unit distance between left and right sides */
+  gap?: number;
+  /** 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 */
+  srcSet?: string;
+  /** Whether the picture is allowed to be dragged */
+  draggable?: boolean | 'true' | 'false';
+  /** Custom icon type for an icon avatar	*/
+  icon?: React.ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional CSS class name for the root element */
+  rootClassName?: string;
+  /** The content of the avatar */
+  children?: React.ReactNode;
+  /** This attribute defines the alternative text describing the image */
+  alt?: string;
+  /** CORS settings attributes	 */
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
+  /** Handler when img load error, return false to prevent default fallback behavior */
+  onError?: () => boolean;
+}
+
+export interface AvatarGroupProps {
+  /** Additional CSS class name */
+  className?: string;
+  /** Additional CSS class name for the root element */
+  rootClassName?: string;
+  /** 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 */
+  size?: AvatarSize;
+  /** Shape of the avatars in the group */
+  shape?: 'circle' | 'square';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-avatar",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.17.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,12 +37,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }