@synerise/ds-badge 1.0.56 → 1.0.58

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.57...@synerise/ds-badge@1.0.58) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-badge
+
+## [1.0.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.56...@synerise/ds-badge@1.0.57) (2026-06-17)
+
+**Note:** Version bump only for package @synerise/ds-badge
+
 ## [1.0.56](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.55...@synerise/ds-badge@1.0.56) (2026-06-11)
 
 **Note:** Version bump only for package @synerise/ds-badge

package/CLAUDE.md

@@ -0,0 +1,138 @@
+# Badge (`@synerise/ds-badge`)
+
+> DS-native badge (status dot, flag/pulsing dot, count badge). **antd-free** — exposes `ds-badge*`
+> DOM/class hooks so downstream styled-overrides (e.g. ds-avatar) keep working. The legacy
+> `ant-badge*` hooks have been dropped (so a parent app on the old antd-based badge can't leak its
+> global `.ant-badge*` styles onto this one). Colour is driven by `status` (or `customColor`); there
+> is no antd dependency.
+
+## Package structure
+
+```
+src/
+  Badge.tsx                — public entry: `text` → BadgeWithLabel, otherwise BadgeCore
+  BadgeCore.tsx            — dot/count renderer (derives dot/count mode, renders the styled-components tree)
+  Badge.styles.tsx         — styled-components (Wrapper, CountSup, ScrollNumberOnly, Current, DotSup, CustomCountSup) + colour helpers
+  Badge.types.ts           — BadgeProps, Color, ColorHue, Status
+  BadgeWithLabel.tsx       — status dot aligned next to a text label (powers the `text` prop; also exported)
+  BadgeWithLabel.styles.ts — inline-flex alignment for dot↔label
+  Badge.figma.tsx          — Code Connect mappings (status-driven)
+  index.ts                 — public exports
+```
+
+> No `style/` LESS folder — the antd badge LESS base was inlined into `Badge.styles.tsx`. Styling uses
+> first-class styled-components with transient `$`-props; the elements carry `ds-badge-*` class names
+> (for DS consumers / ui-tests / external CSS) but they are not used as styling selectors.
+
+## Public exports
+
+### `Badge` (default)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `status` | `BadgeStatus` | `undefined` | DS status — drives the dot/count colour: `active`→green-600, `inactive`→grey-400, `blocked`→red-600, `processing`→blue-600, `warning`→yellow-600. Auto-enables dot mode. |
+| `flag` | `boolean` | `undefined` | Renders the dot with `::before`/`::after` halos. Requires dot/status. |
+| `pulsing` | `boolean` | `undefined` | Pulse animation on the halos. Only visible when `flag` or `status` is set. |
+| `outlined` | `boolean` | `undefined` | White `box-shadow` ring around the count badge. |
+| `customColor` | `LiteralStringUnion<BadgeColor \| DefaultColor>` | `undefined` | Overrides the badge colour. Palette token → resolved via `theme.palette` (`'blue'` → `blue-600`, or full key `'blue-600'`); any other value is used as a **raw CSS colour** (`'#FF0000'`, `'rgb(…)'`, …), so colours outside the palette work. |
+| `count` | `ReactNode` | `undefined` | Number/node in the count badge. Hidden when `0`. |
+| `dot` | `boolean` | `undefined` | Forces dot mode (auto-enabled by `status`). |
+| `overflowCount` | `number` | `99` | Max number before `N+`. |
+| `offset` | `[number\|string, number\|string]` | `undefined` | `[x, y]` offset of the badge relative to its children. |
+| `children` | `ReactNode` | `undefined` | When omitted, the badge renders inline (standalone). |
+| `text` | `ReactNode` | `undefined` | When set, renders a status/dot badge next to this label (delegates to `BadgeWithLabel`) — the legacy antd `status` + `text` API. Takes precedence over `count`/`children`; only `status`/`customColor`/`flag`/`pulsing`/`dot`/`className`/`style` apply in this mode. |
+| `className`, `style` | — | — | Applied to the outer wrapper. |
+| `data-*`, `aria-*` | — | — | Forwarded to the outermost wrapper (`PassthroughAttributes` from `@synerise/ds-utils`). |
+
+### `BadgeWithLabel` (named export)
+
+A status/dot `Badge` aligned next to a text label. Owns the dot↔label alignment (inline-flex, 8px
+gap) so consumers don't carry that CSS. It powers the `Badge` `text` prop and is also exported for
+direct use.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `status` / `customColor` / `flag` / `pulsing` / `dot` | — | Forwarded to the inner `Badge`. |
+| `children` | `ReactNode` | The label rendered next to the dot. |
+| `className`, `style` | — | Applied to the wrapper. |
+
+```tsx
+import { BadgeWithLabel } from '@synerise/ds-badge';
+<BadgeWithLabel status="warning">Needs review</BadgeWithLabel>
+```
+
+### Types
+
+| Export | Description |
+|--------|-------------|
+| `BadgeProps` | Full props type (`BadgeOwnProps & PassthroughAttributes`) |
+| `BadgeWithLabelProps` | Props for `BadgeWithLabel` |
+| `BadgeStatus` | `'active' \| 'inactive' \| 'blocked' \| 'processing' \| 'warning' \| undefined` |
+| `BadgeColor` | `'red' \| 'green' \| 'grey' \| 'yellow' \| 'blue' \| 'pink' \| 'mars' \| 'orange' \| 'fern' \| 'cyan' \| 'purple' \| 'violet' \| 'white' \| 'transparent'` |
+| `BadgeColorHue` | `'900' \| '800' \| '700' \| '600' \| '500' \| '400' \| '300' \| '200' \| '100' \| '050'` |
+
+## Usage patterns
+
+```tsx
+import Badge from '@synerise/ds-badge';
+
+// Count badge (red by default; colour with status/customColor, or override via `style`)
+<Badge count={5}><Avatar /></Badge>
+<Badge count={3} status="blocked" />
+<Badge count={3} customColor="blue" />
+
+// Status dot (dot auto-enabled by status).
+<Badge status="active" />
+
+// Status dot + label — pass `text` (legacy API) or use BadgeWithLabel directly.
+<Badge status="active" text="Online" />
+
+// Flag dot with pulse
+<Badge status="processing" flag pulsing><Avatar /></Badge>
+
+// Custom dot colour (arbitrary, non-status colour)
+<Badge status="active" customColor="purple-700" />
+
+// data-* passthrough on the wrapper
+<Badge status="active" data-testid="presence" />
+```
+
+## Styling
+
+`Badge.styles.tsx` is `styled(BadgeBase)`. It **inlines the base badge CSS** that antd's LESS used to
+provide (wrapper positioning, count pill, dot, `.ds-badge-not-a-wrapper` standalone layout) and adds
+the DS overrides. DS-only styling props (`flag`, `pulsing`, `outlined`, `customColor`) are stripped in
+the wrapper before reaching `BadgeBase`'s DOM; they are still read by the CSS interpolations.
+
+Colours come from `@synerise/ds-core` theme palette tokens (`resolveColor`): `customColor` → `status`
+colour → **red** default (count text is white). Consumers wanting a different look (e.g. a neutral
+count chip) override it with an inline `style`/`styled(Badge)` — and, matching antd, the consumer's
+`style` is applied to the **indicator element** (count/dot), not the wrapper, so
+`style={{ backgroundColor: 'transparent', color: ... }}` recolours the count (e.g. the Tabs counter).
+A custom-node `count` (e.g. an icon) renders bare via `.ds-badge-scroll-number-custom-component` — no pill
+background. Count badge is 16px tall; count text uses `macro.h200` from `@synerise/ds-typography`. The
+theme type is `ThemeProps` from `@synerise/ds-core` (not styled-components' `DefaultTheme`, unaugmented here).
+
+## Key dependencies
+
+- `@synerise/ds-core` — theme palette tokens, `ThemeProps`, `DefaultColor`
+- `@synerise/ds-typography` — `macro.h200` for count text
+- `@synerise/ds-utils` — `PassthroughAttributes` (data-*/aria-* type)
+
+## Implementation notes
+
+- **No antd.** `BadgeBase` renders the DOM with `ds-badge` / `ds-badge-count` / `ds-badge-dot` /
+  `ds-badge-status-dot` / `ds-badge-status-<status>` class hooks, which the DS consumers' selectors
+  target (e.g. ds-avatar's `& ~ .ds-badge-dot`). The dot `sup` carries `ds-badge-dot` **and**
+  `ds-badge-status-dot ds-badge-status-<status>` when `status` is set. The legacy `ant-badge-*` /
+  `ant-scroll-number-*` hooks were removed so a parent app still on the old antd-based badge can't
+  leak its global `.ant-badge*` styles onto the new one.
+- **Colour is status-driven.** The old `backgroundColor` / `backgroundColorHue` / `textColor` /
+  `textColorHue` props and the antd-passthrough `color` / `text` props were **removed**; `showZero` /
+  `size` / `title` / `id` and the antd `Omit<AntBadgeProps>` inheritance are gone too. `customColor`
+  is kept for arbitrary per-item colours (segment lists, status-label table cells).
+- **`dot` is auto-derived from `status`** — set `status` and you get a dot without `dot={true}`.
+- **Standalone vs wrapping** — with no `children` the wrapper gets `ds-badge-not-a-wrapper` and the
+  badge renders inline (no absolute positioning / offset).
+- **`text` restored** — when `text` is set, `Badge` delegates to `BadgeWithLabel` (status dot + label), so the legacy `status` + `text` API keeps working without switching components; `BadgeWithLabel` is still exported for direct use. To avoid a `Badge ↔ BadgeWithLabel` import cycle, the dot/count renderer lives in `BadgeCore.tsx` — both `Badge` (text mode) and `BadgeWithLabel` render `BadgeCore`.
+- Tests: Vitest (`src/__specs__/Badge.spec.tsx`).

package/README.md

@@ -42,7 +42,7 @@ import Badge from '@synerise/ds-badge'
 <Badge
   count={10}
   overflowCount={11}
-  showZero={false}
+  status="processing"
 />
 
 ```
@@ -71,22 +71,28 @@ import Badge from '@synerise/ds-badge'
 
 | Property           | Description                                                        | Type                                                                                                 | Default |
 | ------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------- |
-| backgroundColor    | Customize the badge color                                          | Color                                                                                                | -       |
-| backgroundColorHue | Customize brightness of color                                      | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | -       |
-| customColor        | Customize the badge dot color                                      | `BadgeColor` or `DefaultColor` (e.g. `'blue-600'`)                                                   | -       |
-| count              | Number to show in the badge counter                                | ReactNode                                                                                            |         |
-| dot                | Display a red dot instead of a counter                             | boolean                                                                                              | `false` |
-| flag               | Show the badge as a flag                                           | boolean                                                                                              | `false` |
-| offset             | The offset of the badge dot in [x, y] format                       | [number, number]                                                                                     | -       |
-| outlined           | Add outline to the badge counter                                   | boolean                                                                                              | `false` |
+| status             | Status that drives the dot/count colour                            | `active` / `inactive` / `blocked` / `processing` / `warning`                                         | -       |
+| customColor        | Override the badge colour — palette token or any raw CSS colour    | `BadgeColor` / `DefaultColor` / CSS colour (e.g. `'blue-600'`, `'#FF0000'`)                          | -       |
+| count              | Number to show in the badge counter (hidden when `0`)              | ReactNode                                                                                            | -       |
+| dot                | Display a dot instead of a counter (auto-enabled by `status`)      | boolean                                                                                              | `false` |
+| flag               | Show the badge as a flag (halo rings)                              | boolean                                                                                              | `false` |
+| offset             | The offset of the badge in [x, y] format                           | [number, number]                                                                                     | -       |
+| outlined           | Add a white outline to the badge counter                           | boolean                                                                                              | `false` |
 | overflowCount      | Maximum number to show in the counter                              | number                                                                                               | 99      |
 | pulsing            | Enable pulsing animation                                           | boolean                                                                                              | `false` |
-| showZero           | Show the badge when the counter is zero                            | boolean                                                                                              | `false` |
-| status             | Set badge as a status dot                                          | `active` / `inactive` / `blocked` / `processing` / `warning`                                         | -       |
-| text               | If `status` is set, `text` sets the display text of the status dot | string                                                                                               | ''      |
-| textColor          | Customize text color in badge                                      | `red` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` / `white` / `transparent` | -       |
-| textColorHue       | Customize brightness of color                                      | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | -       |
-| title              | Text shown when a cursor is hovered over the badge                 | string                                                                                               | count   |
+| data-\* / aria-\*  | Forwarded to the outermost wrapper element                         | string / number / boolean                                                                            | -       |
+
+> **Removed in the antd-free version:** `backgroundColor`, `backgroundColorHue`, `textColor`, `textColorHue` (count colour is now driven by `status`), `text` (use the `BadgeWithLabel` export instead), `showZero`, `title`. The component no longer extends antd's Badge props.
+
+### `BadgeWithLabel`
+
+A status dot aligned next to a text label — the replacement for the old `text` prop. Owns the dot↔label alignment so consumers don't.
+
+```
+import { BadgeWithLabel } from '@synerise/ds-badge'
+
+<BadgeWithLabel status="warning">Needs review</BadgeWithLabel>
+```
 
 ### Color
 

package/dist/Badge.d.ts

@@ -1,4 +1,12 @@
 import { default as React } from 'react';
 import { BadgeProps } from './Badge.types';
-declare const Badge: ({ dot, ...props }: BadgeProps) => React.JSX.Element;
+/**
+ * Public Badge.
+ *
+ * When `text` is provided the badge renders as a status/dot badge aligned next to that label —
+ * delegating to `BadgeWithLabel` (this restores the legacy antd `status` + `text` API so consumers
+ * don't have to switch to `BadgeWithLabel` by hand). Otherwise it renders the dot/count badge
+ * (`BadgeCore`).
+ */
+declare const Badge: ({ text, ...props }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/dist/Badge.js

@@ -1,15 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import StyledBadge from "./Badge.styles.js";
-import "./style/index.css";
+import BadgeCore from "./BadgeCore.js";
+import BadgeWithLabel from "./BadgeWithLabel.js";
 const Badge = ({
-  dot,
+  text,
   ...props
 }) => {
-  const {
-    status
-  } = props;
-  const isDot = dot !== void 0 ? dot : status !== void 0;
-  return /* @__PURE__ */ jsx(StyledBadge, { ...props, dot: isDot });
+  const hasText = text !== void 0 && text !== null && text !== false && text !== "";
+  if (hasText) {
+    return /* @__PURE__ */ jsx(BadgeWithLabel, { status: props.status, customColor: props.customColor, flag: props.flag, pulsing: props.pulsing, dot: props.dot, className: props.className, style: props.style, children: text });
+  }
+  return /* @__PURE__ */ jsx(BadgeCore, { ...props });
 };
 export {
   Badge as default

package/dist/Badge.styles.d.ts

@@ -1,5 +1,22 @@
-import { default as React } from 'react';
+import { Status } from './Badge.types';
+type ColorProps = {
+    $status?: Status;
+    $customColor?: string;
+};
+type PositionProps = {
+    $standalone?: boolean;
+};
 export declare const afterElementAnimation: import('styled-components').Keyframes;
 export declare const beforeElementAnimation: import('styled-components').Keyframes;
-declare const _default: import('styled-components').StyledComponent<({ flag, outlined, backgroundColor, textColor, backgroundColorHue, textColorHue, pulsing, customColor, ...rest }: any) => React.JSX.Element, any, {}, never>;
-export default _default;
+export declare const Wrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CountSup: import('styled-components').StyledComponent<"sup", any, ColorProps & PositionProps & {
+    $outlined?: boolean;
+}, never>;
+export declare const ScrollNumberOnly: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Current: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CustomCountSup: import('styled-components').StyledComponent<"sup", any, PositionProps, never>;
+export declare const DotSup: import('styled-components').StyledComponent<"sup", any, ColorProps & PositionProps & {
+    $flag?: boolean;
+    $pulsing?: boolean;
+}, never>;
+export {};

package/dist/Badge.styles.js

@@ -1,34 +1,64 @@
-import { jsx } from "react/jsx-runtime";
-import { Badge } from "antd";
 import styled, { css, keyframes } from "styled-components";
 import { macro } from "@synerise/ds-typography";
-const getBackgroundColor = (props) => {
-  if (props.backgroundColor === "transparent") {
-    return "transparent";
+const STATUS_COLOR_TOKEN = {
+  active: "green-600",
+  inactive: "grey-400",
+  blocked: "red-600",
+  processing: "blue-600",
+  warning: "yellow-600"
+};
+const resolveCustomColor = (theme, customColor) => {
+  const paletteColor = customColor.indexOf("-") >= 0 ? theme.palette[customColor] : theme.palette[`${customColor}-600`];
+  return paletteColor ?? customColor;
+};
+const resolveColor = (props) => {
+  const {
+    theme,
+    $customColor,
+    $status
+  } = props;
+  if ($customColor) {
+    return resolveCustomColor(theme, $customColor);
   }
-  if (props.backgroundColor === "white") {
-    return props.theme.palette.white;
+  if ($status) {
+    return theme.palette[STATUS_COLOR_TOKEN[$status]];
   }
-  return props.theme.palette[`${props.backgroundColor}-${props.backgroundColorHue}`];
+  return theme.palette["red-600"];
 };
+const indicatorPosition = (standalone) => standalone ? css(["position:relative;top:auto;right:auto;display:inline-block;vertical-align:middle;transform:none;"]) : css(["position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0%;"]);
 const afterElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-5px,-5px,0) scale(0.3);opacity:0.9;}100%{transform:translate3d(-5px,-5px,0) scale(1.5);opacity:0;}"]);
 const beforeElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-2px,-2px,0) scale(0.5);opacity:0.9;}100%{transform:translate3d(-2px,-2px,0) scale(1.5);opacity:0;}"]);
-const StyledBadge = styled(({
-  flag,
-  outlined,
-  backgroundColor,
-  textColor,
-  backgroundColorHue,
-  textColorHue,
-  pulsing,
-  customColor,
-  ...rest
-}) => /* @__PURE__ */ jsx(Badge, { ...rest })).withConfig({
-  displayName: "Badgestyles",
+const Wrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__Wrapper",
   componentId: "sc-1ci72bj-0"
-})(["&&{.ant-scroll-number-only{height:16px;&:last-of-type:not(:first-of-type) > p{padding-right:1px;}& > p{", ";color:inherit;line-height:16px;height:16px;font-weight:400;}}.ant-badge-count{box-shadow:none;height:16px;padding:0 3px;line-height:16px;min-width:16px;font-size:13px;background-color:", ";color:", ";}", ""], macro.h200, (props) => getBackgroundColor(props), (props) => props.theme.palette[`${props.textColor}-${props.textColorHue}`], (props) => css(["", " ", " ", " ", " ", " ", " ", ";"], props.customColor && css([".ant-badge-dot,.ant-badge-status-dot{background-color:", ";}"], props.customColor.indexOf("-") >= 0 ? props.theme.palette[props.customColor] : props.theme.palette[`${props.customColor}-600`]), props.status === "active" && !props.customColor && css([".ant-badge-status-active{background-color:", ";}"], props.theme.palette["green-600"]), props.status === "inactive" && !props.customColor && css([".ant-badge-status-inactive{background-color:", ";}"], props.theme.palette["grey-400"]), props.status === "blocked" && !props.customColor && css([".ant-badge-status-blocked{background-color:", ";}"], props.theme.palette["red-600"]), props.status === "processing" && !props.customColor && css([".ant-badge-status-processing{background-color:", ";}"], props.theme.palette["blue-600"]), props.outlined && css([".ant-badge-count{box-shadow:0 0 0 1px ", ";}"], props.theme.palette.white), (!!props.flag || !!props.status) && css([".ant-badge-dot{box-shadow:none;&.ant-badge-status-processing{display:inline-block;position:absolute;}}.ant-badge-dot,.ant-badge-status-dot{overflow:visible;border:2px solid ", ";width:10px;height:10px;&::before{display:flex;content:", ";transform:translate3d(-2px,-2px,0);", " transform-origin:center;}&::after{display:flex;content:", ";transform:translate3d(-5px,-5px,0);", " transform-origin:center;}}"], props.theme.palette.white, props.flag ? '""' : "none", props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:10px;height:10px;background-color:inherit;border-radius:50%;"], beforeElementAnimation), props.flag ? '""' : "none", props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:16px;height:16px;background-color:inherit;border-radius:50%;"], afterElementAnimation))));
+})(["position:relative;display:inline-block;line-height:1;"]);
+const CountSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__CountSup",
+  componentId: "sc-1ci72bj-1"
+})(["z-index:auto;", ";min-width:16px;height:16px;padding:0 3px;white-space:nowrap;text-align:center;border-radius:8px;background-color:", ";color:", ";box-shadow:", ";"], (props) => indicatorPosition(props.$standalone), (props) => resolveColor(props), (props) => props.theme.palette.white, (props) => props.$outlined ? `0 0 0 1px ${props.theme.palette.white}` : "none");
+const ScrollNumberOnly = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__ScrollNumberOnly",
+  componentId: "sc-1ci72bj-2"
+})(["display:inline-block;height:16px;"]);
+const Current = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__Current",
+  componentId: "sc-1ci72bj-3"
+})(["", ";height:16px;line-height:16px;font-weight:400;color:inherit;"], macro.h200);
+const CustomCountSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__CustomCountSup",
+  componentId: "sc-1ci72bj-4"
+})(["z-index:auto;", ";"], (props) => indicatorPosition(props.$standalone));
+const DotSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__DotSup",
+  componentId: "sc-1ci72bj-5"
+})(["z-index:auto;", ";width:6px;height:6px;border-radius:50%;background-color:", ";", ""], (props) => indicatorPosition(props.$standalone), (props) => resolveColor(props), (props) => (!!props.$flag || !!props.$status) && css(["box-sizing:border-box;width:10px;height:10px;overflow:visible;border:2px solid ", ";box-shadow:none;&::before{display:", ";content:", ";transform:translate3d(-2px,-2px,0);transform-origin:center;", "}&::after{display:", ";content:", ";transform:translate3d(-5px,-5px,0);transform-origin:center;", "}"], props.theme.palette.white, props.$flag ? "flex" : "none", props.$flag ? "''" : "none", props.$pulsing && css(["position:absolute;top:0;left:0;width:10px;height:10px;background-color:inherit;border-radius:50%;animation:", " 2s infinite;"], beforeElementAnimation), props.$flag ? "flex" : "none", props.$flag ? "''" : "none", props.$pulsing && css(["position:absolute;top:0;left:0;width:16px;height:16px;background-color:inherit;border-radius:50%;animation:", " 2s infinite;"], afterElementAnimation)));
 export {
+  CountSup,
+  Current,
+  CustomCountSup,
+  DotSup,
+  ScrollNumberOnly,
+  Wrapper,
   afterElementAnimation,
-  beforeElementAnimation,
-  StyledBadge as default
+  beforeElementAnimation
 };

package/dist/Badge.types.d.ts

@@ -1,17 +1,60 @@
-import { BadgeProps as AntBadgeProps } from 'antd';
+import { CSSProperties, ReactNode } from 'react';
 import { DefaultColor } from '@synerise/ds-core';
+import { LiteralStringUnion, PassthroughAttributes } from '@synerise/ds-utils';
 export declare const color: readonly ["red", "green", "grey", "yellow", "blue", "pink", "mars", "orange", "fern", "cyan", "purple", "violet", "white", "transparent"];
 export type Color = (typeof color)[number];
 export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
 export type Status = 'active' | 'inactive' | 'blocked' | 'processing' | 'warning' | undefined;
-export type BadgeProps = Omit<AntBadgeProps, 'status'> & {
-    flag?: boolean;
+export type BadgeOwnProps = {
+    /**
+     * Content the badge is positioned over. When omitted, the badge renders inline (standalone).
+     */
+    children?: ReactNode;
+    /**
+     * When set, the badge renders as a status/dot badge aligned next to this label (delegating to
+     * `BadgeWithLabel`). Restores the legacy antd `status` + `text` API. Takes precedence over
+     * `count` / `children` — only `status`, `customColor`, `flag`, `pulsing`, `dot`, `className` and
+     * `style` apply in this mode.
+     */
+    text?: ReactNode;
+    /**
+     * DS status — drives the dot / count colour.
+     */
     status?: Status;
-    outlined?: boolean;
-    backgroundColor?: Color;
-    textColor?: Color;
-    backgroundColorHue?: ColorHue;
-    textColorHue?: ColorHue;
+    /**
+     * Renders the dot with `::before`/`::after` halo rings. Requires dot/status to be active.
+     */
+    flag?: boolean;
+    /**
+     * Adds a repeating pulse animation to the halo rings. Only visible when `flag` or `status` is set.
+     */
     pulsing?: boolean;
-    customColor?: Color | DefaultColor;
+    /**
+     * Adds a white outline ring around the count badge.
+     */
+    outlined?: boolean;
+    /**
+     * Overrides the badge colour. Accepts a palette token (`'blue'` → `blue-600`, or a full key like
+     * `'blue-600'`), or any raw CSS colour (`'#FF0000'`, `'rgb(…)'`, …) for colours outside the palette.
+     */
+    customColor?: LiteralStringUnion<Color | DefaultColor>;
+    /**
+     * Number (or node) shown inside the count badge.
+     */
+    count?: ReactNode;
+    /**
+     * Forces dot mode. Auto-enabled when `status` is provided.
+     */
+    dot?: boolean;
+    /**
+     * Maximum number before the count is shown as `N+`.
+     */
+    overflowCount?: number;
+    /**
+     * `[x, y]` pixel offset of the badge relative to its children.
+     */
+    offset?: [number | string, number | string];
+    className?: string;
+    style?: CSSProperties;
 };
+export type BadgeProps = BadgeOwnProps & PassthroughAttributes;

package/dist/BadgeCore.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BadgeProps } from './Badge.types';
+/**
+ * DS-native, antd-free badge core (status dot / count). Renders DS styled-components (no styling via
+ * class selectors). Each element carries `ds-badge-*` class hooks for DS consumers (avatar, tabs,
+ * tag, …), external CSS and ui-tests. The legacy `ant-badge-*` / `ant-scroll-number-*` hooks have
+ * been dropped so a parent app still on the old antd-based badge can no longer leak its global
+ * `.ant-badge*` styles onto this one.
+ *
+ * Public entry is `./Badge` — it delegates here, or to `BadgeWithLabel` when `text` is set.
+ */
+declare const BadgeCore: ({ children, status, count, dot, flag, pulsing, outlined, customColor, overflowCount, offset, className, style, ...passthrough }: BadgeProps) => React.JSX.Element;
+export default BadgeCore;

package/dist/BadgeCore.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Wrapper, CustomCountSup, CountSup, ScrollNumberOnly, Current, DotSup } from "./Badge.styles.js";
+const DEFAULT_OVERFLOW_COUNT = 99;
+const toOffsetUnit = (value) => typeof value === "number" ? `${value}px` : value;
+const renderCount = (count, overflowCount) => {
+  if (typeof count === "number" && count > overflowCount) {
+    return `${overflowCount}+`;
+  }
+  return count;
+};
+const BadgeCore = ({
+  children,
+  status,
+  count,
+  dot,
+  flag,
+  pulsing,
+  outlined,
+  customColor,
+  overflowCount = DEFAULT_OVERFLOW_COUNT,
+  offset,
+  className,
+  style,
+  ...passthrough
+}) => {
+  const hasCount = count !== void 0 && count !== null && count !== false && count !== 0 && count !== "0";
+  const isDot = dot !== void 0 ? dot : status !== void 0 && !hasCount;
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const standalone = !hasChildren;
+  const showCount = !isDot && hasCount;
+  const isCustomCount = React.isValidElement(count);
+  const wrapperClassName = ["ds-badge", standalone && "ds-badge-not-a-wrapper", className].filter(Boolean).join(" ");
+  const indicatorStyle = offset && hasChildren ? {
+    transform: `translate(calc(50% + ${toOffsetUnit(offset[0])}), calc(-50% + ${toOffsetUnit(offset[1])}))`,
+    ...style
+  } : style;
+  const statusClassName = status ? ` ds-badge-status-dot ds-badge-status-${status}` : "";
+  return /* @__PURE__ */ jsxs(Wrapper, { className: wrapperClassName, ...passthrough, children: [
+    children,
+    showCount && (isCustomCount ? /* @__PURE__ */ jsx(CustomCountSup, { className: "ds-badge-scroll-number-custom-component", $standalone: standalone, style: indicatorStyle, children: count }) : /* @__PURE__ */ jsx(CountSup, { className: "ds-badge-scroll-number ds-badge-count", $standalone: standalone, $status: status, $customColor: customColor, $outlined: outlined, title: typeof count === "string" || typeof count === "number" ? String(count) : void 0, style: indicatorStyle, children: /* @__PURE__ */ jsx(ScrollNumberOnly, { className: "ds-badge-scroll-number-only", children: /* @__PURE__ */ jsx(Current, { className: "current", children: renderCount(count, overflowCount) }) }) })),
+    isDot && /* @__PURE__ */ jsx(DotSup, { className: `ds-badge-dot${statusClassName}`, $standalone: standalone, $status: status, $customColor: customColor, $flag: flag, $pulsing: pulsing, style: indicatorStyle })
+  ] });
+};
+export {
+  BadgeCore as default
+};

package/dist/BadgeWithLabel.d.ts

@@ -0,0 +1,14 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { BadgeProps } from './Badge.types';
+export type BadgeWithLabelProps = Pick<BadgeProps, 'status' | 'customColor' | 'flag' | 'pulsing' | 'dot'> & {
+    /** Label rendered next to the badge dot. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * A status/dot `Badge` aligned next to a text label — the antd-free replacement for the old
+ * `Badge` `text` prop. Owns the dot↔label alignment so consumers don't have to.
+ */
+declare const BadgeWithLabel: ({ children, className, style, ...badgeProps }: BadgeWithLabelProps) => React.JSX.Element;
+export default BadgeWithLabel;

package/dist/BadgeWithLabel.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import BadgeCore from "./BadgeCore.js";
+import { Wrapper, Label } from "./BadgeWithLabel.styles.js";
+const BadgeWithLabel = ({
+  children,
+  className,
+  style,
+  ...badgeProps
+}) => /* @__PURE__ */ jsxs(Wrapper, { className, style, children: [
+  /* @__PURE__ */ jsx(BadgeCore, { ...badgeProps }),
+  /* @__PURE__ */ jsx(Label, { children })
+] });
+export {
+  BadgeWithLabel as default
+};

package/dist/BadgeWithLabel.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Wrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/BadgeWithLabel.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const Wrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "BadgeWithLabelstyles__Wrapper",
+  componentId: "sc-14o8m20-0"
+})(["display:inline-flex;align-items:center;gap:8px;"]);
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "BadgeWithLabelstyles__Label",
+  componentId: "sc-14o8m20-1"
+})(["line-height:1;color:", ";"], (props) => props.theme.palette["grey-600"]);
+export {
+  Label,
+  Wrapper
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Badge';
+export { default as BadgeWithLabel, type BadgeWithLabelProps, } from './BadgeWithLabel';
 export type { Status as BadgeStatus, BadgeProps, Color as BadgeColor, ColorHue as BadgeColorHue, } from './Badge.types';

package/dist/index.js

@@ -1,4 +1,6 @@
 import { default as default2 } from "./Badge.js";
+import { default as default3 } from "./BadgeWithLabel.js";
 export {
+  default3 as BadgeWithLabel,
   default2 as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-badge",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "description": "Badge UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -41,15 +42,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.18.3",
-    "@synerise/ds-typography": "^1.1.25"
+    "@synerise/ds-icon": "^1.18.5",
+    "@synerise/ds-typography": "^1.1.27",
+    "@synerise/ds-utils": "^1.10.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-badge{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;line-height:1}.ant-badge-count{z-index:auto;min-width:20px;height:20px;padding:0 6px;color:#fff;font-weight:400;font-size:11px;line-height:20px;white-space:nowrap;text-align:center;background:#ff4d4f;border-radius:10px;box-shadow:0 0 0 1px #fff}.ant-badge-count a,.ant-badge-count a:hover{color:#fff}.ant-badge-count-sm{min-width:14px;height:14px;padding:0;font-size:11px;line-height:14px;border-radius:7px}.ant-badge-multiple-words{padding:0 8px}.ant-badge-dot{z-index:auto;width:6px;min-width:6px;height:6px;background:#ff4d4f;border-radius:100%;box-shadow:0 0 0 1px #fff}.ant-badge-dot.ant-scroll-number{transition:background 1.5s}.ant-badge .ant-scroll-number-custom-component,.ant-badge-count,.ant-badge-dot{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0%}.ant-badge .ant-scroll-number-custom-component.anticon-spin,.ant-badge-count.anticon-spin,.ant-badge-dot.anticon-spin{animation:antBadgeLoadingCircle 1s infinite linear}.ant-badge-status{line-height:inherit;vertical-align:baseline}.ant-badge-status-dot{position:relative;top:-1px;display:inline-block;width:6px;height:6px;vertical-align:middle;border-radius:50%}.ant-badge-status-success{background-color:#54cb0b}.ant-badge-status-processing{position:relative;background-color:#1890ff}.ant-badge-status-processing::after{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #1890ff;border-radius:50%;animation:antStatusProcessing 1.2s infinite ease-in-out;content:''}.ant-badge-status-default{background-color:#d9d9d9}.ant-badge-status-error{background-color:#f52922}.ant-badge-status-warning{background-color:#fab700}.ant-badge-status-pink{background:#eb2f96}.ant-badge-status-magenta{background:#eb2f96}.ant-badge-status-red{background:#f5222d}.ant-badge-status-volcano{background:#fa541c}.ant-badge-status-orange{background:#fa8c16}.ant-badge-status-yellow{background:#fadb14}.ant-badge-status-gold{background:#faad14}.ant-badge-status-cyan{background:#13c2c2}.ant-badge-status-lime{background:#a0d911}.ant-badge-status-green{background:#52c41a}.ant-badge-status-blue{background:#1890ff}.ant-badge-status-geekblue{background:#2f54eb}.ant-badge-status-purple{background:#722ed1}.ant-badge-status-text{margin-left:8px;color:#6a7580;font-size:13px}.ant-badge-zoom-appear,.ant-badge-zoom-enter{animation:antZoomBadgeIn .3s cubic-bezier(.12,.4,.29,1.46);animation-fill-mode:both}.ant-badge-zoom-leave{animation:antZoomBadgeOut .3s cubic-bezier(.71,-.46,.88,.6);animation-fill-mode:both}.ant-badge-not-a-wrapper .ant-badge-zoom-appear,.ant-badge-not-a-wrapper .ant-badge-zoom-enter{animation:antNoWrapperZoomBadgeIn .3s cubic-bezier(.12,.4,.29,1.46)}.ant-badge-not-a-wrapper .ant-badge-zoom-leave{animation:antNoWrapperZoomBadgeOut .3s cubic-bezier(.71,-.46,.88,.6)}.ant-badge-not-a-wrapper:not(.ant-badge-status){vertical-align:middle}.ant-badge-not-a-wrapper .ant-badge-count,.ant-badge-not-a-wrapper .ant-scroll-number-custom-component{transform:none}.ant-badge-not-a-wrapper .ant-scroll-number,.ant-badge-not-a-wrapper .ant-scroll-number-custom-component{position:relative;top:auto;display:block;transform-origin:50% 50%}@keyframes antStatusProcessing{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}.ant-scroll-number{overflow:hidden;direction:ltr}.ant-scroll-number-only{position:relative;display:inline-block;height:20px;transition:all .3s cubic-bezier(.645, .045, .355, 1);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}.ant-scroll-number-only>p.ant-scroll-number-only-unit{height:20px;margin:0;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}.ant-scroll-number-symbol{vertical-align:top}@keyframes antZoomBadgeIn{0%{transform:scale(0) translate(50%,-50%);opacity:0}100%{transform:scale(1) translate(50%,-50%)}}@keyframes antZoomBadgeOut{0%{transform:scale(1) translate(50%,-50%)}100%{transform:scale(0) translate(50%,-50%);opacity:0}}@keyframes antNoWrapperZoomBadgeIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1)}}@keyframes antNoWrapperZoomBadgeOut{0%{transform:scale(1)}100%{transform:scale(0);opacity:0}}@keyframes antBadgeLoadingCircle{0%{transform-origin:50%}100%{transform:translate(50%,-50%) rotate(360deg);transform-origin:50%}}.ant-ribbon-wrapper{position:relative}.ant-ribbon{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:8px;height:22px;padding:0 8px;color:#fff;line-height:22px;white-space:nowrap;background-color:#0b68ff;border-radius:3px}.ant-ribbon-text{color:#fff}.ant-ribbon-corner{position:absolute;top:100%;width:8px;height:8px;color:currentcolor;border:4px solid;transform:scaleY(.75);transform-origin:top}.ant-ribbon-corner::after{position:absolute;top:-4px;left:-4px;width:inherit;height:inherit;color:rgba(0,0,0,.25);border:inherit;content:''}.ant-ribbon-color-pink{color:#eb2f96;background:#eb2f96}.ant-ribbon-color-magenta{color:#eb2f96;background:#eb2f96}.ant-ribbon-color-red{color:#f5222d;background:#f5222d}.ant-ribbon-color-volcano{color:#fa541c;background:#fa541c}.ant-ribbon-color-orange{color:#fa8c16;background:#fa8c16}.ant-ribbon-color-yellow{color:#fadb14;background:#fadb14}.ant-ribbon-color-gold{color:#faad14;background:#faad14}.ant-ribbon-color-cyan{color:#13c2c2;background:#13c2c2}.ant-ribbon-color-lime{color:#a0d911;background:#a0d911}.ant-ribbon-color-green{color:#52c41a;background:#52c41a}.ant-ribbon-color-blue{color:#1890ff;background:#1890ff}.ant-ribbon-color-geekblue{color:#2f54eb;background:#2f54eb}.ant-ribbon-color-purple{color:#722ed1;background:#722ed1}.ant-ribbon.ant-ribbon-placement-end{right:-8px;border-bottom-right-radius:0}.ant-ribbon.ant-ribbon-placement-end .ant-ribbon-corner{right:0;border-color:currentcolor transparent transparent currentcolor}.ant-ribbon.ant-ribbon-placement-start{left:-8px;border-bottom-left-radius:0}.ant-ribbon.ant-ribbon-placement-start .ant-ribbon-corner{left:0;border-color:currentcolor currentcolor transparent transparent}.ant-badge-rtl{direction:rtl}.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-badge-count,.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-badge-dot,.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-scroll-number-custom-component{right:auto;left:0;direction:ltr;transform:translate(-50%,-50%);transform-origin:0% 0%}.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-scroll-number-custom-component{right:auto;left:0;transform:translate(-50%,-50%);transform-origin:0% 0%}.ant-badge-rtl .ant-badge-status-text{margin-right:8px;margin-left:0}.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-appear,.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-enter{animation-name:antZoomBadgeInRtl}.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-leave{animation-name:antZoomBadgeOutRtl}.ant-ribbon-rtl{direction:rtl}.ant-ribbon-rtl.ant-ribbon-placement-end{right:unset;left:-8px;border-bottom-right-radius:3px;border-bottom-left-radius:0}.ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner{right:unset;left:0;border-color:currentcolor currentcolor transparent transparent}.ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner::after{border-color:currentcolor currentcolor transparent transparent}.ant-ribbon-rtl.ant-ribbon-placement-start{right:-8px;left:unset;border-bottom-right-radius:0;border-bottom-left-radius:3px}.ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner{right:0;left:unset;border-color:currentcolor transparent transparent currentcolor}.ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner::after{border-color:currentcolor transparent transparent currentcolor}@keyframes antZoomBadgeInRtl{0%{transform:scale(0) translate(-50%,-50%);opacity:0}100%{transform:scale(1) translate(-50%,-50%)}}@keyframes antZoomBadgeOutRtl{0%{transform:scale(1) translate(-50%,-50%)}100%{transform:scale(0) translate(-50%,-50%);opacity:0}}