@akinon/ui-tag 0.6.0 → 1.0.0

package/dist/cjs/index.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import type { TagProps } from './types';
-export type { TagProps } from './types';
-export declare enum TagStatus {
-    Success = "success",
-    Info1 = "info-1",
-    Info2 = "info-2",
-    Info3 = "info-3",
-    Error = "error"
-}
-export declare const Tag: ({ children, status, className, ...restTagProps }: TagProps) => React.JSX.Element;
+import { type TagProps } from './types.d';
+export * from './types.d';
+/**
+ * Tag component for Akinon UI.
+ *
+ * The Tag component is used to represent categorized or labeled content.
+ * It supports customizable colors, closable functionality, and icons,
+ * allowing for enhanced flexibility and design consistency.
+ *
+ * This component adheres to the Akinon design system, ensuring uniformity
+ * and accessibility. It is ideal for use cases such as categorization,
+ * filtering, or highlighting content within an application.
+ */
+export declare const Tag: ({ children, status, className, color, ...restTagProps }: TagProps) => React.JSX.Element;
 //# 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":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,GAAG,qDAKb,QAAQ,sBAwFV,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}

package/dist/cjs/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,22 +25,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.TagStatus = void 0;
+exports.Tag = void 0;
 const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const clsx_1 = require("clsx");
+const color_1 = require("color");
 const React = require("react");
-var TagStatus;
-(function (TagStatus) {
-    TagStatus["Success"] = "success";
-    TagStatus["Info1"] = "info-1";
-    TagStatus["Info2"] = "info-2";
-    TagStatus["Info3"] = "info-3";
-    TagStatus["Error"] = "error";
-})(TagStatus || (exports.TagStatus = TagStatus = {}));
+const types_d_1 = require("./types.d");
+__exportStar(require("./types.d"), exports);
+/**
+ * Tag component for Akinon UI.
+ *
+ * The Tag component is used to represent categorized or labeled content.
+ * It supports customizable colors, closable functionality, and icons,
+ * allowing for enhanced flexibility and design consistency.
+ *
+ * This component adheres to the Akinon design system, ensuring uniformity
+ * and accessibility. It is ideal for use cases such as categorization,
+ * filtering, or highlighting content within an application.
+ */
 const Tag = (_a) => {
-    var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
+    var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
     const tagToken = token.Tag;
@@ -38,64 +58,69 @@ const Tag = (_a) => {
     }, () => {
         const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
         const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
-        return {
-            [prefixCls]: {
+        return Object.assign({ [prefixCls]: {
                 borderRadius: tagToken.borderRadius,
                 fontSize: tagToken.fontSize,
                 fontWeight: tagToken.fontWeight,
                 paddingLeft: tagToken.paddingLeft,
                 paddingRight: tagToken.paddingRight
-            },
-            [prefixClsWithoutHash]: {
+            }, [prefixClsWithoutHash]: {
                 svg: {
                     fontSize: tagToken.fontSizeClose
                 }
-            },
-            [`${prefixClsWithoutHash}-borderless`]: {
+            }, [`${prefixClsWithoutHash}-borderless`]: {
                 border: 'none'
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Success}`]: {
                 color: tagToken.defaultColorSuccess,
                 borderColor: tagToken.defaultBorderColorSuccess,
                 backgroundColor: tagToken.defaultBgSuccess,
                 svg: {
                     color: tagToken.defaultColorSuccess
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info1}`]: {
                 color: tagToken.defaultColorWaiting1,
                 borderColor: tagToken.defaultBorderColorWaiting1,
                 backgroundColor: tagToken.defaultBgWaiting1,
                 svg: {
                     color: tagToken.defaultColorWaiting1
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info2}`]: {
                 color: tagToken.defaultColorWaiting2,
                 borderColor: tagToken.defaultBorderColorWaiting2,
                 backgroundColor: tagToken.defaultBgWaiting2,
                 svg: {
                     color: tagToken.defaultColorWaiting2
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info3}`]: {
                 color: tagToken.defaultColorWaiting3,
                 borderColor: tagToken.defaultBorderColorWaiting3,
                 backgroundColor: tagToken.defaultBgWaiting3,
                 svg: {
                     color: tagToken.defaultColorWaiting3
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Error}`]: {
                 color: tagToken.defaultColorFailed,
                 borderColor: tagToken.defaultBorderColorFailed,
                 backgroundColor: tagToken.defaultBgFailed,
                 svg: {
                     color: tagToken.defaultColorFailed
                 }
+            }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Empty}`]: {
+                color: tagToken.defaultColorEmpty,
+                borderColor: tagToken.defaultBorderColorEmpty,
+                backgroundColor: tagToken.defaultBgEmpty
+            } }, (color && {
+            [`${prefixClsWithoutHash}-${status}`]: {
+                color,
+                backgroundColor: (0, color_1.default)(color)
+                    .lighten(0.4)
+                    .whiten(0.4)
+                    .hsl()
+                    .toString(),
+                borderColor: (0, color_1.default)(color).lighten(0.2).whiten(0.2).hsl().toString()
             }
-        };
+        }));
     });
-    return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `akinon-tag-${status}`, className) }, restTagProps), children));
+    return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
 };
 exports.Tag = Tag;

package/dist/cjs/types.d.ts

@@ -1,5 +1,41 @@
-import { TagStatus } from './';
+/**
+ * Enum representing the predefined statuses for the Tag component.
+ */
+export enum TagStatus {
+  /**
+   * Represents a successful status.
+   */
+  Success = 'success',
+
+  /**
+   * Represents the first informational status.
+   */
+  Info1 = 'info-1',
+
+  /**
+   * Represents the second informational status.
+   */
+  Info2 = 'info-2',
 
+  /**
+   * Represents the third informational status.
+   */
+  Info3 = 'info-3',
+
+  /**
+   * Represents an error status.
+   */
+  Error = 'error',
+
+  /**
+   * Represents an empty status.
+   */
+  Empty = 'empty'
+}
+
+/**
+ * Props for the Tag component, extending AntTagProps and adding status support.
+ */
 export type TagProps = Omit<
   AntTagProps,
   'prefixCls' | 'style' | 'styles' | 'visible'
@@ -10,41 +46,62 @@ export type TagProps = Omit<
   status?: TagStatus;
 };
 
+/**
+ * Props for the AntTag component.
+ */
 export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Prefix class for the tag component.
+   */
   prefixCls?: string;
+
   /**
    * The additional css class
    */
   className?: string;
+
   /**
    * ClassName on the root element
    */
   rootClassName?: string;
+
   /**
    * Color of the Tag
    */
   color?: string;
+
   /**
    * Closable Tag supports onClose event
    */
   closable?:
     | boolean
     | ({
+        /**
+         * Custom close icon for the tag.
+         */
         closeIcon?: React.ReactNode;
       } & React.AriaAttributes);
+
   /**
    * Custom close icon
    */
   closeIcon?: React.ReactNode;
+
   /**
    * Callback executed when tag is closed
    */
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Inline styles for the tag component.
+   */
   style?: React.CSSProperties;
+
   /**
    * Set the icon of tag
    */
   icon?: React.ReactNode;
+
   /**
    * Whether has border style
    */

package/dist/esm/index.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import type { TagProps } from './types';
-export type { TagProps } from './types';
-export declare enum TagStatus {
-    Success = "success",
-    Info1 = "info-1",
-    Info2 = "info-2",
-    Info3 = "info-3",
-    Error = "error"
-}
-export declare const Tag: ({ children, status, className, ...restTagProps }: TagProps) => React.JSX.Element;
+import { type TagProps } from './types.d';
+export * from './types.d';
+/**
+ * Tag component for Akinon UI.
+ *
+ * The Tag component is used to represent categorized or labeled content.
+ * It supports customizable colors, closable functionality, and icons,
+ * allowing for enhanced flexibility and design consistency.
+ *
+ * This component adheres to the Akinon design system, ensuring uniformity
+ * and accessibility. It is ideal for use cases such as categorization,
+ * filtering, or highlighting content within an application.
+ */
+export declare const Tag: ({ children, status, className, color, ...restTagProps }: TagProps) => React.JSX.Element;
 //# 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":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,GAAG,qDAKb,QAAQ,sBAwFV,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}

package/dist/esm/index.js

@@ -13,17 +13,23 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider, Tag as AntTag } from 'antd';
 import clsx from 'clsx';
+import Color from 'color';
 import * as React from 'react';
-export var TagStatus;
-(function (TagStatus) {
-    TagStatus["Success"] = "success";
-    TagStatus["Info1"] = "info-1";
-    TagStatus["Info2"] = "info-2";
-    TagStatus["Info3"] = "info-3";
-    TagStatus["Error"] = "error";
-})(TagStatus || (TagStatus = {}));
+import { TagStatus } from './types.d';
+export * from './types.d';
+/**
+ * Tag component for Akinon UI.
+ *
+ * The Tag component is used to represent categorized or labeled content.
+ * It supports customizable colors, closable functionality, and icons,
+ * allowing for enhanced flexibility and design consistency.
+ *
+ * This component adheres to the Akinon design system, ensuring uniformity
+ * and accessibility. It is ideal for use cases such as categorization,
+ * filtering, or highlighting content within an application.
+ */
 export const Tag = (_a) => {
-    var { children, status, className } = _a, restTagProps = __rest(_a, ["children", "status", "className"]);
+    var { children, status, className, color } = _a, restTagProps = __rest(_a, ["children", "status", "className", "color"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const tagToken = token.Tag;
@@ -35,63 +41,68 @@ export const Tag = (_a) => {
     }, () => {
         const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
         const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
-        return {
-            [prefixCls]: {
+        return Object.assign({ [prefixCls]: {
                 borderRadius: tagToken.borderRadius,
                 fontSize: tagToken.fontSize,
                 fontWeight: tagToken.fontWeight,
                 paddingLeft: tagToken.paddingLeft,
                 paddingRight: tagToken.paddingRight
-            },
-            [prefixClsWithoutHash]: {
+            }, [prefixClsWithoutHash]: {
                 svg: {
                     fontSize: tagToken.fontSizeClose
                 }
-            },
-            [`${prefixClsWithoutHash}-borderless`]: {
+            }, [`${prefixClsWithoutHash}-borderless`]: {
                 border: 'none'
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
+            }, [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
                 color: tagToken.defaultColorSuccess,
                 borderColor: tagToken.defaultBorderColorSuccess,
                 backgroundColor: tagToken.defaultBgSuccess,
                 svg: {
                     color: tagToken.defaultColorSuccess
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
+            }, [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
                 color: tagToken.defaultColorWaiting1,
                 borderColor: tagToken.defaultBorderColorWaiting1,
                 backgroundColor: tagToken.defaultBgWaiting1,
                 svg: {
                     color: tagToken.defaultColorWaiting1
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
+            }, [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
                 color: tagToken.defaultColorWaiting2,
                 borderColor: tagToken.defaultBorderColorWaiting2,
                 backgroundColor: tagToken.defaultBgWaiting2,
                 svg: {
                     color: tagToken.defaultColorWaiting2
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
+            }, [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
                 color: tagToken.defaultColorWaiting3,
                 borderColor: tagToken.defaultBorderColorWaiting3,
                 backgroundColor: tagToken.defaultBgWaiting3,
                 svg: {
                     color: tagToken.defaultColorWaiting3
                 }
-            },
-            [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
+            }, [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
                 color: tagToken.defaultColorFailed,
                 borderColor: tagToken.defaultBorderColorFailed,
                 backgroundColor: tagToken.defaultBgFailed,
                 svg: {
                     color: tagToken.defaultColorFailed
                 }
+            }, [`${prefixClsWithoutHash}-${TagStatus.Empty}`]: {
+                color: tagToken.defaultColorEmpty,
+                borderColor: tagToken.defaultBorderColorEmpty,
+                backgroundColor: tagToken.defaultBgEmpty
+            } }, (color && {
+            [`${prefixClsWithoutHash}-${status}`]: {
+                color,
+                backgroundColor: Color(color)
+                    .lighten(0.4)
+                    .whiten(0.4)
+                    .hsl()
+                    .toString(),
+                borderColor: Color(color).lighten(0.2).whiten(0.2).hsl().toString()
             }
-        };
+        }));
     });
-    return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `akinon-tag-${status}`, className) }, restTagProps), children));
+    return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
 };

package/dist/esm/types.d.ts

@@ -1,5 +1,41 @@
-import { TagStatus } from './';
+/**
+ * Enum representing the predefined statuses for the Tag component.
+ */
+export enum TagStatus {
+  /**
+   * Represents a successful status.
+   */
+  Success = 'success',
+
+  /**
+   * Represents the first informational status.
+   */
+  Info1 = 'info-1',
+
+  /**
+   * Represents the second informational status.
+   */
+  Info2 = 'info-2',
 
+  /**
+   * Represents the third informational status.
+   */
+  Info3 = 'info-3',
+
+  /**
+   * Represents an error status.
+   */
+  Error = 'error',
+
+  /**
+   * Represents an empty status.
+   */
+  Empty = 'empty'
+}
+
+/**
+ * Props for the Tag component, extending AntTagProps and adding status support.
+ */
 export type TagProps = Omit<
   AntTagProps,
   'prefixCls' | 'style' | 'styles' | 'visible'
@@ -10,41 +46,62 @@ export type TagProps = Omit<
   status?: TagStatus;
 };
 
+/**
+ * Props for the AntTag component.
+ */
 export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Prefix class for the tag component.
+   */
   prefixCls?: string;
+
   /**
    * The additional css class
    */
   className?: string;
+
   /**
    * ClassName on the root element
    */
   rootClassName?: string;
+
   /**
    * Color of the Tag
    */
   color?: string;
+
   /**
    * Closable Tag supports onClose event
    */
   closable?:
     | boolean
     | ({
+        /**
+         * Custom close icon for the tag.
+         */
         closeIcon?: React.ReactNode;
       } & React.AriaAttributes);
+
   /**
    * Custom close icon
    */
   closeIcon?: React.ReactNode;
+
   /**
    * Callback executed when tag is closed
    */
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Inline styles for the tag component.
+   */
   style?: React.CSSProperties;
+
   /**
    * Set the icon of tag
    */
   icon?: React.ReactNode;
+
   /**
    * Whether has border style
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-tag",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,18 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "clsx": "^2.0.0"
+    "antd": "5.22.6",
+    "clsx": "^2.0.0",
+    "color": "4.2.3"
   },
   "devDependencies": {
+    "@types/color": "4.2.0",
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0",
-    "@akinon/ui-theme": "0.7.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.0",
+    "@akinon/ui-theme": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",