@geneui/components 3.0.0-next-b9961e0-15012025 → 3.0.0-next-ff984eb-15012025

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/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-ff984eb-15012025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {