@akinon/ui-badge 0.4.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/index.d.ts +13 -1
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +13 -1
  4. package/dist/cjs/types.d.ts +111 -0
  5. package/dist/esm/index.d.ts +13 -1
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +13 -1
  8. package/dist/esm/types.d.ts +111 -0
  9. package/package.json +6 -6
package/dist/cjs/index.d.ts CHANGED
@@ -1,5 +1,17 @@
1
1
  import * as React from 'react';
2
2
  import type { BadgeProps } from './types';
3
- export type { BadgeProps } from './types';
3
+ /**
4
+ * Badge component for Akinon UI.
5
+ *
6
+ * The Badge component is used to display a small status descriptor or numeric indicator
7
+ * for UI elements. It supports various features such as dot indicators, customizable
8
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
9
+ * to multiple use cases, including notifications and status indicators.
10
+ *
11
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
12
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
13
+ * that requires a small, prominent indicator.
14
+ */
4
15
  export declare const Badge: ({ children, ...restBadgeProps }: BadgeProps) => React.JSX.Element;
16
+ export type * from './types';
5
17
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +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,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC"}
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;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -16,6 +16,18 @@ const ui_theme_1 = require("@akinon/ui-theme");
16
16
  const cssinjs_1 = require("@ant-design/cssinjs");
17
17
  const antd_1 = require("antd");
18
18
  const React = require("react");
19
+ /**
20
+ * Badge component for Akinon UI.
21
+ *
22
+ * The Badge component is used to display a small status descriptor or numeric indicator
23
+ * for UI elements. It supports various features such as dot indicators, customizable
24
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
25
+ * to multiple use cases, including notifications and status indicators.
26
+ *
27
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
28
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
29
+ * that requires a small, prominent indicator.
30
+ */
19
31
  const Badge = (_a) => {
20
32
  var { children } = _a, restBadgeProps = __rest(_a, ["children"]);
21
33
  const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
@@ -31,7 +43,7 @@ const Badge = (_a) => {
31
43
  const prefixClsWithoutHash = `.${getPrefixCls()}-badge`;
32
44
  return {
33
45
  [prefixCls]: {},
34
- [`${prefixClsWithoutHash}-count.akinon-scroll-number`]: {
46
+ [`${prefixClsWithoutHash}-count.${getPrefixCls()}-scroll-number`]: {
35
47
  color: badgeToken.colorText
36
48
  }
37
49
  };
package/dist/cjs/types.d.ts ADDED
@@ -0,0 +1,111 @@
1
+ import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
+
3
+ /**
4
+ * Props for the Badge component.
5
+ */
6
+ export interface BadgeProps {
7
+ /**
8
+ * Number to show in badge
9
+ */
10
+ count?: React.ReactNode;
11
+
12
+ /**
13
+ * Whether to show badge when count is zero
14
+ */
15
+ showZero?: boolean;
16
+
17
+ /**
18
+ * Max count to show
19
+ */
20
+ overflowCount?: number;
21
+
22
+ /**
23
+ * Whether to show dot without number
24
+ */
25
+ dot?: boolean;
26
+
27
+ /**
28
+ * Custom CSS styles for the badge component.
29
+ * @ignore
30
+ */
31
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
32
+
33
+ /**
34
+ * Additional CSS class for the badge component.
35
+ */
36
+ className?: string;
37
+
38
+ /**
39
+ * Set Badge as a status dot.
40
+ */
41
+ status?: PresetStatusColorType;
42
+
43
+ /**
44
+ * Additional CSS class for the root element of the badge.
45
+ */
46
+ rootClassName?: string;
47
+
48
+ /**
49
+ * Customize Badge dot color.
50
+ */
51
+ color?: string;
52
+
53
+ /**
54
+ * Text sets the display text of the status dot.
55
+ */
56
+ text?: React.ReactNode;
57
+
58
+ /**
59
+ * If count is set, size sets the size of badge.
60
+ */
61
+ size?: 'default' | 'small';
62
+
63
+ /**
64
+ * Set offset of the badge dot.
65
+ * The first value is the horizontal offset, and the second value is the vertical offset.
66
+ */
67
+ offset?: [number | string, number | string];
68
+
69
+ /**
70
+ * Text to show when hovering over the badge.
71
+ */
72
+ title?: string;
73
+
74
+ /**
75
+ * Content wrapped by the badge component.
76
+ */
77
+ children?: React.ReactNode;
78
+
79
+ /**
80
+ * Additional CSS class names for the root and indicator elements of the badge.
81
+ */
82
+ classNames?: {
83
+ root?: string;
84
+ indicator?: string;
85
+ };
86
+
87
+ /**
88
+ * Custom CSS styles for the root and indicator elements of the badge.
89
+ * @ignore
90
+ */
91
+ styles?: {
92
+ root?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
93
+ indicator?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
94
+ };
95
+ }
96
+
97
+ /**
98
+ * Preset status colors for the Badge component.
99
+ */
100
+ type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
101
+
102
+ /**
103
+ * Predefined status color types for badges.
104
+ */
105
+ declare const PresetStatusColorTypes: readonly [
106
+ 'success',
107
+ 'processing',
108
+ 'error',
109
+ 'default',
110
+ 'warning'
111
+ ];
package/dist/esm/index.d.ts CHANGED
@@ -1,5 +1,17 @@
1
1
  import * as React from 'react';
2
2
  import type { BadgeProps } from './types';
3
- export type { BadgeProps } from './types';
3
+ /**
4
+ * Badge component for Akinon UI.
5
+ *
6
+ * The Badge component is used to display a small status descriptor or numeric indicator
7
+ * for UI elements. It supports various features such as dot indicators, customizable
8
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
9
+ * to multiple use cases, including notifications and status indicators.
10
+ *
11
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
12
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
13
+ * that requires a small, prominent indicator.
14
+ */
4
15
  export declare const Badge: ({ children, ...restBadgeProps }: BadgeProps) => React.JSX.Element;
16
+ export type * from './types';
5
17
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +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,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC"}
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;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js CHANGED
@@ -13,6 +13,18 @@ import { useToken } from '@akinon/ui-theme';
13
13
  import { useStyleRegister } from '@ant-design/cssinjs';
14
14
  import { Badge as AntBadge, ConfigProvider } from 'antd';
15
15
  import * as React from 'react';
16
+ /**
17
+ * Badge component for Akinon UI.
18
+ *
19
+ * The Badge component is used to display a small status descriptor or numeric indicator
20
+ * for UI elements. It supports various features such as dot indicators, customizable
21
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
22
+ * to multiple use cases, including notifications and status indicators.
23
+ *
24
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
25
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
26
+ * that requires a small, prominent indicator.
27
+ */
16
28
  export const Badge = (_a) => {
17
29
  var { children } = _a, restBadgeProps = __rest(_a, ["children"]);
18
30
  const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
@@ -28,7 +40,7 @@ export const Badge = (_a) => {
28
40
  const prefixClsWithoutHash = `.${getPrefixCls()}-badge`;
29
41
  return {
30
42
  [prefixCls]: {},
31
- [`${prefixClsWithoutHash}-count.akinon-scroll-number`]: {
43
+ [`${prefixClsWithoutHash}-count.${getPrefixCls()}-scroll-number`]: {
32
44
  color: badgeToken.colorText
33
45
  }
34
46
  };
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,111 @@
1
+ import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
+
3
+ /**
4
+ * Props for the Badge component.
5
+ */
6
+ export interface BadgeProps {
7
+ /**
8
+ * Number to show in badge
9
+ */
10
+ count?: React.ReactNode;
11
+
12
+ /**
13
+ * Whether to show badge when count is zero
14
+ */
15
+ showZero?: boolean;
16
+
17
+ /**
18
+ * Max count to show
19
+ */
20
+ overflowCount?: number;
21
+
22
+ /**
23
+ * Whether to show dot without number
24
+ */
25
+ dot?: boolean;
26
+
27
+ /**
28
+ * Custom CSS styles for the badge component.
29
+ * @ignore
30
+ */
31
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
32
+
33
+ /**
34
+ * Additional CSS class for the badge component.
35
+ */
36
+ className?: string;
37
+
38
+ /**
39
+ * Set Badge as a status dot.
40
+ */
41
+ status?: PresetStatusColorType;
42
+
43
+ /**
44
+ * Additional CSS class for the root element of the badge.
45
+ */
46
+ rootClassName?: string;
47
+
48
+ /**
49
+ * Customize Badge dot color.
50
+ */
51
+ color?: string;
52
+
53
+ /**
54
+ * Text sets the display text of the status dot.
55
+ */
56
+ text?: React.ReactNode;
57
+
58
+ /**
59
+ * If count is set, size sets the size of badge.
60
+ */
61
+ size?: 'default' | 'small';
62
+
63
+ /**
64
+ * Set offset of the badge dot.
65
+ * The first value is the horizontal offset, and the second value is the vertical offset.
66
+ */
67
+ offset?: [number | string, number | string];
68
+
69
+ /**
70
+ * Text to show when hovering over the badge.
71
+ */
72
+ title?: string;
73
+
74
+ /**
75
+ * Content wrapped by the badge component.
76
+ */
77
+ children?: React.ReactNode;
78
+
79
+ /**
80
+ * Additional CSS class names for the root and indicator elements of the badge.
81
+ */
82
+ classNames?: {
83
+ root?: string;
84
+ indicator?: string;
85
+ };
86
+
87
+ /**
88
+ * Custom CSS styles for the root and indicator elements of the badge.
89
+ * @ignore
90
+ */
91
+ styles?: {
92
+ root?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
93
+ indicator?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
94
+ };
95
+ }
96
+
97
+ /**
98
+ * Preset status colors for the Badge component.
99
+ */
100
+ type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
101
+
102
+ /**
103
+ * Predefined status color types for badges.
104
+ */
105
+ declare const PresetStatusColorTypes: readonly [
106
+ 'success',
107
+ 'processing',
108
+ 'error',
109
+ 'default',
110
+ 'warning'
111
+ ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-badge",
3
- "version": "0.4.0",
3
+ "version": "1.0.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -9,15 +9,15 @@
9
9
  "dist"
10
10
  ],
11
11
  "dependencies": {
12
- "antd": "5.17.0",
13
- "@akinon/ui-theme": "0.6.0"
12
+ "antd": "5.22.6",
13
+ "@akinon/ui-theme": "1.0.0"
14
14
  },
15
15
  "devDependencies": {
16
16
  "clean-package": "2.2.0",
17
17
  "copyfiles": "^2.4.1",
18
18
  "rimraf": "^5.0.5",
19
- "typescript": "^5.2.2",
20
- "@akinon/typescript-config": "0.3.0"
19
+ "typescript": "*",
20
+ "@akinon/typescript-config": "1.0.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=18",
@@ -37,7 +37,7 @@
37
37
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
38
38
  "build:esm": "tsc --outDir dist/esm",
39
39
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
40
- "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
40
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
41
41
  "clean": "rimraf dist/",
42
42
  "typecheck": "tsc --noEmit"
43
43
  }