@akinon/ui-badge 0.5.0 → 1.0.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,17 @@
 import * as React from 'react';
 import type { BadgeProps } from './types';
-export type { BadgeProps } from './types';
+/**
+ * Badge component for Akinon UI.
+ *
+ * The Badge component is used to display a small status descriptor or numeric indicator
+ * for UI elements. It supports various features such as dot indicators, customizable
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
+ * to multiple use cases, including notifications and status indicators.
+ *
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
+ * that requires a small, prominent indicator.
+ */
 export declare const Badge: ({ children, ...restBadgeProps }: BadgeProps) => 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,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,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,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -16,6 +16,18 @@ const ui_theme_1 = require("@akinon/ui-theme");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Badge component for Akinon UI.
+ *
+ * The Badge component is used to display a small status descriptor or numeric indicator
+ * for UI elements. It supports various features such as dot indicators, customizable
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
+ * to multiple use cases, including notifications and status indicators.
+ *
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
+ * that requires a small, prominent indicator.
+ */
 const Badge = (_a) => {
     var { children } = _a, restBadgeProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
@@ -31,7 +43,7 @@ const Badge = (_a) => {
         const prefixClsWithoutHash = `.${getPrefixCls()}-badge`;
         return {
             [prefixCls]: {},
-            [`${prefixClsWithoutHash}-count.akinon-scroll-number`]: {
+            [`${prefixClsWithoutHash}-count.${getPrefixCls()}-scroll-number`]: {
                 color: badgeToken.colorText
             }
         };

package/dist/cjs/types.d.ts

@@ -1,61 +1,107 @@
-export type BadgeProps = Omit<
-  AntBadgeProps,
-  'prefixCls' | 'style' | 'styles' | 'status'
->;
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
 
-export interface AntBadgeProps {
-  /** Number to show in badge */
+/**
+ * Props for the Badge component.
+ */
+export interface BadgeProps {
+  /**
+   * Number to show in badge
+   */
   count?: React.ReactNode;
+
   /**
    * Whether to show badge when count is zero
    */
   showZero?: boolean;
-  /** Max count to show */
+
+  /**
+   * Max count to show
+   */
   overflowCount?: number;
-  /** Whether to show red dot without number */
+
+  /**
+   * Whether to show dot without number
+   */
   dot?: boolean;
-  style?: React.CSSProperties;
-  prefixCls?: string;
-  scrollNumberPrefixCls?: string;
+
+  /**
+   * Custom CSS styles for the badge component.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * Additional CSS class for the badge component.
+   */
   className?: string;
+
   /**
-   * Set Badge as a status dot
+   * Set Badge as a status dot.
    */
   status?: PresetStatusColorType;
+
+  /**
+   * Additional CSS class for the root element of the badge.
+   */
   rootClassName?: string;
+
   /**
-   * Customize Badge dot color
+   * Customize Badge dot color.
    */
   color?: string;
+
   /**
-   * Text sets the display text of the status dot
+   * Text sets the display text of the status dot.
    */
   text?: React.ReactNode;
+
   /**
-   * If count is set, size sets the size of badge
+   * If count is set, size sets the size of badge.
    */
   size?: 'default' | 'small';
+
   /**
-   * Set offset of the badge dot
+   * Set offset of the badge dot.
+   * The first value is the horizontal offset, and the second value is the vertical offset.
    */
   offset?: [number | string, number | string];
+
   /**
-   * Text to show when hovering over the badge
+   * Text to show when hovering over the badge.
    */
   title?: string;
+
+  /**
+   * Content wrapped by the badge component.
+   */
   children?: React.ReactNode;
+
+  /**
+   * Additional CSS class names for the root and indicator elements of the badge.
+   */
   classNames?: {
     root?: string;
     indicator?: string;
   };
+
+  /**
+   * Custom CSS styles for the root and indicator elements of the badge.
+   * @ignore
+   */
   styles?: {
-    root?: React.CSSProperties;
-    indicator?: React.CSSProperties;
+    root?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+    indicator?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
   };
 }
 
+/**
+ * Preset status colors for the Badge component.
+ */
 type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
 
+/**
+ * Predefined status color types for badges.
+ */
 declare const PresetStatusColorTypes: readonly [
   'success',
   'processing',

package/dist/esm/index.d.ts

@@ -1,5 +1,17 @@
 import * as React from 'react';
 import type { BadgeProps } from './types';
-export type { BadgeProps } from './types';
+/**
+ * Badge component for Akinon UI.
+ *
+ * The Badge component is used to display a small status descriptor or numeric indicator
+ * for UI elements. It supports various features such as dot indicators, customizable
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
+ * to multiple use cases, including notifications and status indicators.
+ *
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
+ * that requires a small, prominent indicator.
+ */
 export declare const Badge: ({ children, ...restBadgeProps }: BadgeProps) => 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,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,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,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,oCAAqC,UAAU,sBA8BhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -13,6 +13,18 @@ import { useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { Badge as AntBadge, ConfigProvider } from 'antd';
 import * as React from 'react';
+/**
+ * Badge component for Akinon UI.
+ *
+ * The Badge component is used to display a small status descriptor or numeric indicator
+ * for UI elements. It supports various features such as dot indicators, customizable
+ * colors, offsets, and additional labels. The component is flexible enough to adapt
+ * to multiple use cases, including notifications and status indicators.
+ *
+ * The Badge component adheres to the Akinon design system, ensuring consistent styling
+ * and accessibility. It is suitable for use in navigation bars, lists, or any element
+ * that requires a small, prominent indicator.
+ */
 export const Badge = (_a) => {
     var { children } = _a, restBadgeProps = __rest(_a, ["children"]);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
@@ -28,7 +40,7 @@ export const Badge = (_a) => {
         const prefixClsWithoutHash = `.${getPrefixCls()}-badge`;
         return {
             [prefixCls]: {},
-            [`${prefixClsWithoutHash}-count.akinon-scroll-number`]: {
+            [`${prefixClsWithoutHash}-count.${getPrefixCls()}-scroll-number`]: {
                 color: badgeToken.colorText
             }
         };

package/dist/esm/types.d.ts

@@ -1,61 +1,107 @@
-export type BadgeProps = Omit<
-  AntBadgeProps,
-  'prefixCls' | 'style' | 'styles' | 'status'
->;
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
 
-export interface AntBadgeProps {
-  /** Number to show in badge */
+/**
+ * Props for the Badge component.
+ */
+export interface BadgeProps {
+  /**
+   * Number to show in badge
+   */
   count?: React.ReactNode;
+
   /**
    * Whether to show badge when count is zero
    */
   showZero?: boolean;
-  /** Max count to show */
+
+  /**
+   * Max count to show
+   */
   overflowCount?: number;
-  /** Whether to show red dot without number */
+
+  /**
+   * Whether to show dot without number
+   */
   dot?: boolean;
-  style?: React.CSSProperties;
-  prefixCls?: string;
-  scrollNumberPrefixCls?: string;
+
+  /**
+   * Custom CSS styles for the badge component.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+
+  /**
+   * Additional CSS class for the badge component.
+   */
   className?: string;
+
   /**
-   * Set Badge as a status dot
+   * Set Badge as a status dot.
    */
   status?: PresetStatusColorType;
+
+  /**
+   * Additional CSS class for the root element of the badge.
+   */
   rootClassName?: string;
+
   /**
-   * Customize Badge dot color
+   * Customize Badge dot color.
    */
   color?: string;
+
   /**
-   * Text sets the display text of the status dot
+   * Text sets the display text of the status dot.
    */
   text?: React.ReactNode;
+
   /**
-   * If count is set, size sets the size of badge
+   * If count is set, size sets the size of badge.
    */
   size?: 'default' | 'small';
+
   /**
-   * Set offset of the badge dot
+   * Set offset of the badge dot.
+   * The first value is the horizontal offset, and the second value is the vertical offset.
    */
   offset?: [number | string, number | string];
+
   /**
-   * Text to show when hovering over the badge
+   * Text to show when hovering over the badge.
    */
   title?: string;
+
+  /**
+   * Content wrapped by the badge component.
+   */
   children?: React.ReactNode;
+
+  /**
+   * Additional CSS class names for the root and indicator elements of the badge.
+   */
   classNames?: {
     root?: string;
     indicator?: string;
   };
+
+  /**
+   * Custom CSS styles for the root and indicator elements of the badge.
+   * @ignore
+   */
   styles?: {
-    root?: React.CSSProperties;
-    indicator?: React.CSSProperties;
+    root?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+    indicator?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
   };
 }
 
+/**
+ * Preset status colors for the Badge component.
+ */
 type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
 
+/**
+ * Predefined status color types for badges.
+ */
 declare const PresetStatusColorTypes: readonly [
   'success',
   'processing',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-badge",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "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.0"
   },
   "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.0"
   },
   "peerDependencies": {
     "react": ">=18",