@geneui/components 3.0.0-next-b9961e0-15012025 → 3.0.0-next-4a5f662-06022025

package/Avatar.js

@@ -37,7 +37,7 @@ const AvatarWrapper = ({ onClick, children, parentClass, isDisabled }) => {
 /**
  * An avatar is a graphical representation of a user, typically displayed as a small image or icon. It can be a photo, illustration, or initials, and is used to personalize the user experience by visually identifying the user in interfaces such as profiles, comment sections, and messaging apps.
  */
-const Avatar = ({ size = "medium", color = "magenta", fullName = "", src, onClick, isDisabled, isLoading, Icon = SvgSquare, // todo need to change to User icon after releasing icons
+const Avatar = ({ size = "medium", color = "magenta", fullName = "", src, onClick, isDisabled, isLoading, Icon = SvgSquare, // todo need to change to User icon after releasing new icons
 className }) => {
     const [proceedFullName, setProceedFullName] = useState(fullName);
     useEffect(() => {

package/Badge.js

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = ".badge{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.badge__content{align-items:center;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}.badge__content_position_absolute{position:absolute;z-index:1}.badge__content_position_absolute.badge__content_size_small,.badge__content_position_absolute.badge__content_size_smallNudge{inset-block-start:-.6rem;inset-inline-end:-.6rem}.badge__content_position_absolute.badge__content_size_xSmall{inset-block-start:-.4rem;inset-inline-end:-.4rem}.badge__content_position_absolute.badge__content_size_3xSmall{inset-block-start:-.2rem;inset-inline-end:-.2rem}.badge__content_size_small{border-radius:var(--guit-ref-radius-medium);height:var(--guit-sem-dimension-height-small);min-width:var(--guit-sem-dimension-width-small)}.badge__content_size_smallNudge{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-small-nudge);width:var(--guit-sem-dimension-width-small-nudge)}.badge__content_size_xSmall{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-xsmall);width:var(--guit-sem-dimension-width-xsmall)}.badge__content_size_3xSmall{border-radius:var(--guit-ref-radius-full);height:var(--guit-sem-dimension-height-3xsmall);width:var(--guit-sem-dimension-width-3xsmall)}.badge__content_color_brand{background-color:var(--guit-sem-color-background-brand-2);color:var(--guit-sem-color-foreground-inverse)}.badge__content_color_brand.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_neutral{background-color:var(--guit-sem-color-background-neutral-4);color:var(--guit-sem-color-foreground-neutral-2)}.badge__content_color_neutral.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_red{background-color:var(--guit-sem-color-background-accent-red-2);color:var(--guit-sem-color-foreground-inverse)}.badge__content_color_red.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-1)}.badge__content_color_inverse{background-color:var(--guit-sem-color-foreground-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.badge__content_color_inverse.badge__content_bordered{border-color:var(--guit-sem-color-border-neutral-2)}.badge__content:has(.badge__num){padding:var(--guit-ref-spacing-4xsmall) var(--guit-ref-spacing-2xsmall)}.badge__content_bordered{border:var(--guit-sem-border-default-width) var(--guit-sem-border-default-style)}.badge__num{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}";
+styleInject(css_248z);
+
+const MAX_VALUE = 99;
+const getValue = (value, maxValue, size) => {
+    if (!Number(value) || size !== "small" || !value)
+        return null;
+    if (!maxValue)
+        return value;
+    const calculatedMaxValue = maxValue > 0 && maxValue < MAX_VALUE ? maxValue : MAX_VALUE;
+    return value > calculatedMaxValue ? `${calculatedMaxValue}+` : value;
+};
+const getSize = (withChildren, size) => {
+    if (!withChildren || size === "xSmall")
+        return size;
+    return "3xSmall";
+};
+/**
+ * Numeric Badge component is a small, circular indicator that displays numerical information, often used to highlight counts or statuses. It is typically positioned adjacent to icons or labels, providing users with a quick visual cue about the number of notifications, messages, or items requiring attention.
+ */
+const Badge = ({ className, appearance = "brand", withBorder, size = "small", value, maxValue = 99, children }) => {
+    const badgeSize = getSize(!!children, size);
+    const badgeValue = getValue(value, maxValue, badgeSize);
+    return (React__default.createElement("div", { className: classNames("badge", className) },
+        React__default.createElement("div", { className: classNames(`badge__content badge__content_color_${appearance} badge__content_size_${badgeSize}`, {
+                badge__content_bordered: withBorder,
+                badge__content_position_absolute: children
+            }) }, !!badgeValue && React__default.createElement("p", { className: "badge__num" }, badgeValue)),
+        children));
+};
+
+export { Badge as default };

package/Button.js

@@ -1,7 +1,7 @@
 import React__default, { forwardRef } from 'react';
 import { c as classNames } from './index-ce02421b.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
 import Loader from './Loader.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
 var css_248z = ".button{align-items:center;border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);cursor:pointer;display:inline-flex;justify-content:center;min-width:-webkit-max-content;min-width:max-content;position:relative;-webkit-user-select:none;user-select:none}.button:not(.button_type_outline){border-color:var(--guit-ref-color-transparent-neutral-0-0)}.button_icon_before{flex-direction:row}.button_icon_after{flex-direction:row-reverse}.button_color_primary.button_type_fill{background-color:var(--guit-sem-color-background-brand-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_primary.button_type_fill:hover{background-color:var(--guit-sem-color-background-brand-2-hover)}.button_color_primary.button_type_fill:active{background-color:var(--guit-sem-color-background-brand-2-pressed)}.button_color_primary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_primary.button_type_outline{border-color:var(--guit-sem-color-border-brand);color:var(--guit-sem-color-foreground-brand)}.button_color_primary.button_type_outline:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}.button_color_primary.button_type_outline:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_primary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_primary.button_type_text{color:var(--guit-sem-color-foreground-brand)}.button_color_primary.button_type_text:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}.button_color_primary.button_type_text:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_secondary.button_type_fill{background-color:var(--guit-sem-color-background-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_fill:hover{background-color:var(--guit-sem-color-background-neutral-2-hover)}.button_color_secondary.button_type_fill:active{background-color:var(--guit-sem-color-background-neutral-2-pressed)}.button_color_secondary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_secondary.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_secondary.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_secondary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_secondary.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_secondary.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_danger.button_type_fill{background-color:var(--guit-sem-color-background-error-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_danger.button_type_fill:hover{background-color:var(--guit-sem-color-background-error-2-hover)}.button_color_danger.button_type_fill:active{background-color:var(--guit-sem-color-background-error-2-pressed)}.button_color_danger.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_danger.button_type_outline{border-color:var(--guit-sem-color-border-error);color:var(--guit-sem-color-foreground-error)}.button_color_danger.button_type_outline:hover{background-color:var(--guit-sem-color-background-error-1-hover)}.button_color_danger.button_type_outline:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_danger.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_danger.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-error)}.button_color_danger.button_type_text:hover{background-color:var(--guit-sem-color-background-error-1-hover)}.button_color_danger.button_type_text:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_success.button_type_fill{background-color:var(--guit-sem-color-background-success-2);color:var(--guit-sem-color-foreground-neutral-2-notheme)}.button_color_success.button_type_fill:hover{background-color:var(--guit-sem-color-background-success-2-hover)}.button_color_success.button_type_fill:active{background-color:var(--guit-sem-color-background-success-2-pressed)}.button_color_success.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_success.button_type_outline{border-color:var(--guit-sem-color-border-success);color:var(--guit-sem-color-foreground-success)}.button_color_success.button_type_outline:hover{background-color:var(--guit-sem-color-background-success-1-hover)}.button_color_success.button_type_outline:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_success.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_success.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-success)}.button_color_success.button_type_text:hover{background-color:var(--guit-sem-color-background-success-1-hover)}.button_color_success.button_type_text:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_inverse.button_type_fill{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_inverse.button_type_fill:hover{background-color:var(--guit-sem-color-background-inverse-hover)}.button_color_inverse.button_type_fill:active{background-color:var(--guit-sem-color-background-inverse-pressed)}.button_color_inverse.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_inverse.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}.button_color_inverse.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_inverse.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_inverse.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-inverse)}.button_color_inverse.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_inverse.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_text:disabled{color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_transparent.button_type_fill{background-color:var(--guit-sem-color-background-transparent-inverse-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_fill:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_fill:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_transparent.button_type_outline{border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-disabled)}.button_color_transparent.button_type_text{background-color:var(--guit-sem-color-background-transparent-inverse-1);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_text:disabled{color:var(--guit-sem-color-foreground-disabled)}.button_size_large{border-radius:var(--guit-ref-radius-2xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-large)}.button_size_large:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-small);padding-top:var(--guit-ref-spacing-small)}.button_size_large:not(.button_icon_before,.button_size_large.button_icon_after,.button_icon_only){-webkit-padding-start:var(--guit-ref-spacing-large);-webkit-padding-end:var(--guit-ref-spacing-large);min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_after,.button_size_large.button_icon_before{min-width:var(--guit-sem-dimension-width-5xlarge)}.button_size_large.button_icon_before{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-large);padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_large.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-large);-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_only{min-width:var(--guit-sem-dimension-width-large);padding:var(--guit-ref-spacing-small)}.button_size_medium{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-medium)}.button_size_medium:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.button_size_medium:not(.button_icon_before,.button_size_medium.button_icon_after,.button_icon_only){-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-medium);min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_after,.button_size_medium.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_medium.button_icon_before{-webkit-padding-start:var(--guit-ref-spacing-xsmall);-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_medium.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-xsmall);padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_only{min-width:var(--guit-sem-dimension-width-medium);padding:var(--guit-ref-spacing-2xsmall)}.button_size_small{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-2xsmall);height:var(--guit-sem-dimension-height-small)}.button_size_small:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.button_size_small:not(.button_icon_before,.button_size_small.button_icon_after,.button_icon_only){-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-medium);min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_after,.button_size_small.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_small.button_icon_before{-webkit-padding-start:var(--guit-ref-spacing-xsmall);-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_small.button_icon_after{-webkit-padding-start:var(--guit-ref-spacing-medium);-webkit-padding-end:var(--guit-ref-spacing-xsmall);padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_only{min-width:var(--guit-sem-dimension-width-small);padding:var(--guit-ref-spacing-4xsmall)}.button_size_XSmall{border-radius:var(--guit-ref-radius-4xsmall);height:var(--guit-sem-dimension-height-small-nudge)}.button_size_XSmall.button_icon_only{min-width:var(--guit-sem-dimension-width-small-nudge);padding:var(--guit-ref-spacing-4xsmall)}.button_fullWidth{width:100%}.button_loading .button__loader{visibility:visible}.button_loading .button__icon,.button_loading .button__text{visibility:hidden}.button.disabled,.button:disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.button__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height);white-space:nowrap}.button__icon{flex:0 0 auto}.button__loader{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;visibility:hidden;width:100%}";
 styleInject(css_248z);

package/GeneUIProvider.js

@@ -1111,24 +1111,24 @@ var typings = "index.d.ts";
 var scripts = {
 	start: "npm run test && storybook dev -p 6006",
 	dev: "concurrently --kill-others -g \"npm:test:watch\" \"npm:start\"",
-	test: "jest --config ./configs/jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
+	test: "jest --config ./jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
 	"test:watch": "npm run test -- --watchAll --json",
-	"test-report": "babel-node --config-file ./configs/.babelrc ./scripts/testReport.js",
-	build: "babel-node --config-file ./configs/.babelrc ./scripts/build.js",
-	"copy-build-statics-files": "babel-node --config-file ./configs/.babelrc ./scripts/copyFiles.js",
-	"bump-up-commit": "babel-node --config-file ./configs/.babelrc ./scripts/postPublish.js",
+	"test-report": "babel-node --config-file ./.babelrc ./scripts/testReport.js",
+	build: "babel-node --config-file ./.babelrc ./scripts/build.js",
+	"copy-build-statics-files": "babel-node --config-file ./.babelrc ./scripts/copyFiles.js",
+	"bump-up-commit": "babel-node --config-file ./.babelrc ./scripts/postPublish.js",
 	"build:watch": "watch 'npm run build' ./src",
 	commit: "cross-env DISABLE_SCOPE_LOWERCASE=true git-cz",
 	changelog: "conventional-changelog -i CHANGELOG.md -s",
 	"build-storybook": "npm run test && storybook build",
-	"semantic-release": "semantic-release --extends ./configs/.releaserc.json --no-ci",
-	"create-component": "babel-node --config-file ./configs/.babelrc ./scripts/createComponent.js",
-	"find-component-usage": "babel-node --config-file ./configs/.babelrc ./scripts/findComponentUsage.js",
-	"format-code": "prettier --config ./configs/.prettierrc --write . --ignore-path ./configs/.prettierignore",
-	"lint-styles": "stylelint **/*.{css,scss,sass} --config ./configs/.stylelintrc.json --fix",
-	"lint-scripts": "eslint --config ./configs/.eslintrc.json src --ignore-path ./configs/.eslintignore --fix",
+	"semantic-release": "semantic-release --extends ./.releaserc.json --no-ci",
+	"create-component": "babel-node --config-file ./.babelrc ./scripts/createComponent.js",
+	"find-component-usage": "babel-node --config-file ./.babelrc ./scripts/findComponentUsage.js",
+	"format-code": "prettier --config ./.prettierrc --write . --ignore-path ./.prettierignore",
+	"lint-styles": "stylelint **/*.{css,scss,sass} --config ./.stylelintrc.json --fix",
+	"lint-scripts": "eslint --config ./.eslintrc.json src --ignore-path ./.eslintignore --fix",
 	"fix-code-style": "npm run format-code && npm run lint-styles && npm run lint-scripts",
-	"analyze-bundle-size": "babel-node --config-file ./configs/.babelrc ./scripts/analyzeBundleSize.js"
+	"analyze-bundle-size": "babel-node --config-file ./.babelrc ./scripts/analyzeBundleSize.js"
 };
 var peerDependencies = {
 	"prop-types": "^15.8.1",
@@ -1151,6 +1151,7 @@ var devDependencies = {
 	"@commitlint/cli": "^17.1.2",
 	"@commitlint/config-conventional": "^17.1.0",
 	"@faker-js/faker": "^7.6.0",
+	"@rollup/plugin-alias": "^5.1.1",
 	"@rollup/plugin-commonjs": "^23.0.0",
 	"@rollup/plugin-image": "^3.0.1",
 	"@rollup/plugin-json": "^6.0.0",
@@ -1182,6 +1183,7 @@ var devDependencies = {
 	autoprefixer: "^10.4.13",
 	"babel-jest": "^29.7.0",
 	"babel-loader": "^8.2.5",
+	"babel-plugin-module-resolver": "^5.0.2",
 	chalk: "^4.1.2",
 	chromatic: "^11.5.5",
 	commitizen: "^4.2.5",
@@ -1203,6 +1205,7 @@ var devDependencies = {
 	"eslint-plugin-prettier": "^5.2.1",
 	"eslint-plugin-react": "^7.37.1",
 	"eslint-plugin-react-hooks": "^4.6.2",
+	"eslint-plugin-simple-import-sort": "^12.1.1",
 	figlet: "^1.5.2",
 	"file-loader": "^6.2.0",
 	"git-cz": "^4.9.0",
@@ -1262,8 +1265,8 @@ var dependencies = {
 };
 var husky = {
 	hooks: {
-		"pre-commit": "lint-staged --concurrent false --config ./configs/.lintstagedrc.json",
-		"commit-msg": "commitlint --config ./configs/commitlint.config.js -E HUSKY_GIT_PARAMS"
+		"pre-commit": "lint-staged --concurrent false --config ./.lintstagedrc.json",
+		"commit-msg": "commitlint --config ./commitlint.config.js -E HUSKY_GIT_PARAMS"
 	}
 };
 var browserslist = [

package/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,48 @@
+import { FC, JSX } from "react";
+import "./Badge.scss";
+interface IBadgeProps {
+    /**
+     * Determines whether the badge component should display a border around it.
+     * When set to `true`, the `badge` will render with a visible `border`.
+     */
+    withBorder?: boolean;
+    /**
+     * Size <br>
+     * Possible values: `small | smallNudge | xSmall | 3xSmall`
+     */
+    size?: "small" | "smallNudge" | "xSmall" | "3xSmall";
+    /**
+     * Determines the visual appearance of the `badge`. <br>
+     * Possible values: `brand | neutral | red | inverse`
+     */
+    appearance?: "brand" | "neutral" | "red" | "inverse";
+    /**
+     * The value will shown as content of the `badge`.
+     */
+    value?: number;
+    /**
+     *  Specifies the maximum value to display inside the `badge`.
+     *  If the badge's `value` exceeds this maximum, it will display as `{maxValue}+`.
+     *  The maximum allowable value for `maxValue` is capped at `99`.
+     */
+    maxValue?: number;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using `BEM` conventions.
+     */
+    className?: string;
+    /**
+     * Specifies the element or component on which the `badge` will be displayed.
+     * The `badge` is positioned `relative` to this child `element`, allowing it to overlay or attach to the `element`.
+     *
+     * **Note**: When using the `children` prop, only `xSmall` and `3xSmall` sizes are supported for the `badge`.
+     *
+     * The default size for the badge when `children` is provided is `3xSmall`.
+     */
+    children?: JSX.Element;
+}
+/**
+ * Numeric Badge component is a small, circular indicator that displays numerical information, often used to highlight counts or statuses. It is typically positioned adjacent to icons or labels, providing users with a quick visual cue about the number of notifications, messages, or items requiring attention.
+ */
+declare const Badge: FC<IBadgeProps>;
+export { IBadgeProps, Badge as default };

package/components/atoms/Badge/index.d.ts

@@ -0,0 +1 @@
+export { IBadgeProps, default } from "./Badge";

package/index.d.ts

@@ -6,10 +6,11 @@ export { default as Pill, IPillProps } from "./components/atoms/Pill";
 export { default as Divider, IDividerProps } from "./components/atoms/Divider";
 export { default as Info, IInfoProps } from "./components/atoms/Info";
 export { default as Button, IButtonProps } from "./components/atoms/Button";
-export { default as Scrollbar } from "./components/atoms/Scrollbar";
-export { default as Tooltip } from "./components/molecules/Tooltip";
-export { default as ProgressBar } from "./components/molecules/ProgressBar";
-export { default as Tag } from "./components/molecules/Tag";
+export { default as Badge, IBadgeProps } from "./components/atoms/Badge";
+export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
+export { default as Tooltip, ITooltipProps } from "./components/molecules/Tooltip";
+export { default as ProgressBar, IProgressBarProps } from "./components/molecules/ProgressBar";
+export { default as Tag, ITagProps } from "./components/molecules/Tag";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";

package/index.js

@@ -6,6 +6,7 @@ export { default as Pill } from './Pill.js';
 export { default as Divider } from './Divider.js';
 export { default as Info } from './Info.js';
 export { default as Button } from './Button.js';
+export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as ProgressBar } from './ProgressBar.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-b9961e0-15012025",
+    "version": "3.0.0-next-4a5f662-06022025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {
@@ -22,24 +22,24 @@
     "scripts": {
         "start": "npm run test && storybook dev -p 6006",
         "dev": "concurrently --kill-others -g \"npm:test:watch\" \"npm:start\"",
-        "test": "jest --config ./configs/jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
+        "test": "jest --config ./jest.config.js --rootDir ./ --coverage --json --outputFile=./coverage/.jest-test-results.json",
         "test:watch": "npm run test -- --watchAll --json",
-        "test-report": "babel-node --config-file ./configs/.babelrc ./scripts/testReport.js",
-        "build": "babel-node --config-file ./configs/.babelrc ./scripts/build.js",
-        "copy-build-statics-files": "babel-node --config-file ./configs/.babelrc ./scripts/copyFiles.js",
-        "bump-up-commit": "babel-node --config-file ./configs/.babelrc ./scripts/postPublish.js",
+        "test-report": "babel-node --config-file ./.babelrc ./scripts/testReport.js",
+        "build": "babel-node --config-file ./.babelrc ./scripts/build.js",
+        "copy-build-statics-files": "babel-node --config-file ./.babelrc ./scripts/copyFiles.js",
+        "bump-up-commit": "babel-node --config-file ./.babelrc ./scripts/postPublish.js",
         "build:watch": "watch 'npm run build' ./src",
         "commit": "cross-env DISABLE_SCOPE_LOWERCASE=true git-cz",
         "changelog": "conventional-changelog -i CHANGELOG.md -s",
         "build-storybook": "npm run test && storybook build",
-        "semantic-release": "semantic-release --extends ./configs/.releaserc.json --no-ci",
-        "create-component": "babel-node --config-file ./configs/.babelrc ./scripts/createComponent.js",
-        "find-component-usage": "babel-node --config-file ./configs/.babelrc ./scripts/findComponentUsage.js",
-        "format-code": "prettier --config ./configs/.prettierrc --write . --ignore-path ./configs/.prettierignore",
-        "lint-styles": "stylelint **/*.{css,scss,sass} --config ./configs/.stylelintrc.json --fix",
-        "lint-scripts": "eslint --config ./configs/.eslintrc.json src --ignore-path ./configs/.eslintignore --fix",
+        "semantic-release": "semantic-release --extends ./.releaserc.json --no-ci",
+        "create-component": "babel-node --config-file ./.babelrc ./scripts/createComponent.js",
+        "find-component-usage": "babel-node --config-file ./.babelrc ./scripts/findComponentUsage.js",
+        "format-code": "prettier --config ./.prettierrc --write . --ignore-path ./.prettierignore",
+        "lint-styles": "stylelint **/*.{css,scss,sass} --config ./.stylelintrc.json --fix",
+        "lint-scripts": "eslint --config ./.eslintrc.json src --ignore-path ./.eslintignore --fix",
         "fix-code-style": "npm run format-code && npm run lint-styles && npm run lint-scripts",
-        "analyze-bundle-size": "babel-node --config-file ./configs/.babelrc ./scripts/analyzeBundleSize.js"
+        "analyze-bundle-size": "babel-node --config-file ./.babelrc ./scripts/analyzeBundleSize.js"
     },
     "peerDependencies": {
         "prop-types": "^15.8.1",
@@ -62,6 +62,7 @@
         "@commitlint/cli": "^17.1.2",
         "@commitlint/config-conventional": "^17.1.0",
         "@faker-js/faker": "^7.6.0",
+        "@rollup/plugin-alias": "^5.1.1",
         "@rollup/plugin-commonjs": "^23.0.0",
         "@rollup/plugin-image": "^3.0.1",
         "@rollup/plugin-json": "^6.0.0",
@@ -93,6 +94,7 @@
         "autoprefixer": "^10.4.13",
         "babel-jest": "^29.7.0",
         "babel-loader": "^8.2.5",
+        "babel-plugin-module-resolver": "^5.0.2",
         "chalk": "^4.1.2",
         "chromatic": "^11.5.5",
         "commitizen": "^4.2.5",
@@ -114,6 +116,7 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "figlet": "^1.5.2",
         "file-loader": "^6.2.0",
         "git-cz": "^4.9.0",
@@ -173,8 +176,8 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "lint-staged --concurrent false --config ./configs/.lintstagedrc.json",
-            "commit-msg": "commitlint --config ./configs/commitlint.config.js -E HUSKY_GIT_PARAMS"
+            "pre-commit": "lint-staged --concurrent false --config ./.lintstagedrc.json",
+            "commit-msg": "commitlint --config ./commitlint.config.js -E HUSKY_GIT_PARAMS"
         }
     },
     "browserslist": [