@metamask-previews/design-system-react 0.0.0-preview.c0b5e45 → 0.0.0-preview.da25f99

package/dist/components/BadgeNetwork/BadgeNetwork.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/BadgeNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC3E;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/components/BadgeNetwork/BadgeNetwork.types.d.mts

@@ -0,0 +1,18 @@
+import type { AvatarNetworkProps } from "../AvatarNetwork/index.mjs";
+export type BadgeNetworkProps = Omit<AvatarNetworkProps, 'size' | 'shape'> & {
+    /**
+     * Optional name of the network
+     * Used as alt text for image and first letter is used as fallback if no fallbackText provided
+     */
+    name?: string;
+    /**
+     * Optional URL for the network image
+     * When provided, displays the image instead of fallback text
+     */
+    src?: string;
+    /**
+     * Optional text to display when the image fails to load
+     */
+    fallbackText?: string;
+};
+//# sourceMappingURL=BadgeNetwork.types.d.mts.map

package/dist/components/BadgeNetwork/BadgeNetwork.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/BadgeNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC3E;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/components/BadgeNetwork/BadgeNetwork.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BadgeNetwork.types.mjs.map

package/dist/components/BadgeNetwork/BadgeNetwork.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/BadgeNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkProps } from '../AvatarNetwork';\n\nexport type BadgeNetworkProps = Omit<AvatarNetworkProps, 'size' | 'shape'> & {\n  /**\n   * Optional name of the network\n   * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n   */\n  name?: string;\n  /**\n   * Optional URL for the network image\n   * When provided, displays the image instead of fallback text\n   */\n  src?: string;\n  /**\n   * Optional text to display when the image fails to load\n   */\n  fallbackText?: string;\n};\n"]}

package/dist/components/BadgeNetwork/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeNetwork = void 0;
+var BadgeNetwork_1 = require("./BadgeNetwork.cjs");
+Object.defineProperty(exports, "BadgeNetwork", { enumerable: true, get: function () { return BadgeNetwork_1.BadgeNetwork; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/BadgeNetwork/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/index.ts"],"names":[],"mappings":";;;AAAA,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export { BadgeNetwork } from './BadgeNetwork';\nexport type { BadgeNetworkProps } from './BadgeNetwork.types';\n"]}

package/dist/components/BadgeNetwork/index.d.cts

@@ -0,0 +1,3 @@
+export { BadgeNetwork } from "./BadgeNetwork.cjs";
+export type { BadgeNetworkProps } from "./BadgeNetwork.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/BadgeNetwork/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/BadgeNetwork/index.d.mts

@@ -0,0 +1,3 @@
+export { BadgeNetwork } from "./BadgeNetwork.mjs";
+export type { BadgeNetworkProps } from "./BadgeNetwork.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/BadgeNetwork/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/BadgeNetwork/index.mjs

@@ -0,0 +1,2 @@
+export { BadgeNetwork } from "./BadgeNetwork.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/BadgeNetwork/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeNetwork/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export { BadgeNetwork } from './BadgeNetwork';\nexport type { BadgeNetworkProps } from './BadgeNetwork.types';\n"]}

package/dist/components/BadgeStatus/BadgeStatus.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeStatus = void 0;
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../types/index.cjs");
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const BadgeStatus_constants_1 = require("./BadgeStatus.constants.cjs");
+exports.BadgeStatus = (0, react_1.forwardRef)(({ status, size = types_1.BadgeStatusSize.Md, hasBorder = true, className, style, ...props }, ref) => {
+    const mergedClassName = (0, tw_merge_1.twMerge)(
+    // Base styles
+    'inline-flex rounded-full', 
+    // hasBorder style
+    hasBorder ? 'border-2 border-background-default' : '', 
+    // Custom classes
+    className);
+    const mergedCircleClassName = (0, tw_merge_1.twMerge)(
+    // Base styles
+    'z-10 rounded-full border-2', 
+    // Size styles
+    BadgeStatus_constants_1.CLASSMAP_BADGESTATUS_SIZE[size], 
+    // Circle with semantics style
+    BadgeStatus_constants_1.CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]);
+    return (react_1.default.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
+        react_1.default.createElement("div", { className: mergedCircleClassName })));
+});
+exports.BadgeStatus.displayName = 'BadgeStatus';
+//# sourceMappingURL=BadgeStatus.cjs.map

package/dist/components/BadgeStatus/BadgeStatus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA8C;AAC9C,uDAA+C;AAE/C,uEAGiC;AAGpB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EACE,MAAM,EACN,IAAI,GAAG,uBAAe,CAAC,EAAE,EACzB,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,0BAA0B;IAC1B,kBAAkB;IAClB,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;IACrD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,MAAM,qBAAqB,GAAG,IAAA,kBAAO;IACnC,cAAc;IACd,4BAA4B;IAC5B,cAAc;IACd,iDAAyB,CAAC,IAAI,CAAC;IAC/B,8BAA8B;IAC9B,0DAAkC,CAAC,MAAM,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,uCAAK,SAAS,EAAE,qBAAqB,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeStatusSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n  CLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n  CLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\n\nexport const BadgeStatus = forwardRef<HTMLDivElement, BadgeStatusProps>(\n  (\n    {\n      status,\n      size = BadgeStatusSize.Md,\n      hasBorder = true,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex rounded-full',\n      // hasBorder style\n      hasBorder ? 'border-2 border-background-default' : '',\n      // Custom classes\n      className,\n    );\n\n    const mergedCircleClassName = twMerge(\n      // Base styles\n      'z-10 rounded-full border-2',\n      // Size styles\n      CLASSMAP_BADGESTATUS_SIZE[size],\n      // Circle with semantics style\n      CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status],\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <div className={mergedCircleClassName} />\n      </div>\n    );\n  },\n);\n\nBadgeStatus.displayName = 'BadgeStatus';\n"]}

package/dist/components/BadgeStatus/BadgeStatus.constants.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLASSMAP_BADGESTATUS_SIZE = exports.CLASSMAP_BADGESTATUS_STATUS_CIRCLE = void 0;
+const types_1 = require("../../types/index.cjs");
+// Mappings
+exports.CLASSMAP_BADGESTATUS_STATUS_CIRCLE = {
+    [types_1.BadgeStatusStatus.Active]: 'bg-success-default border-success-default',
+    [types_1.BadgeStatusStatus.Inactive]: 'bg-background-default border-success-default',
+    [types_1.BadgeStatusStatus.Disconnected]: 'bg-icon-muted border-icon-muted',
+    [types_1.BadgeStatusStatus.New]: 'bg-primary-default border-primary-default',
+    [types_1.BadgeStatusStatus.Attention]: 'bg-error-default border-error-default',
+};
+exports.CLASSMAP_BADGESTATUS_SIZE = {
+    [types_1.BadgeStatusSize.Md]: 'h-2 w-2',
+    [types_1.BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height
+};
+//# sourceMappingURL=BadgeStatus.constants.cjs.map

package/dist/components/BadgeStatus/BadgeStatus.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.constants.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAiE;AAEjE,WAAW;AACE,QAAA,kCAAkC,GAG3C;IACF,CAAC,yBAAiB,CAAC,MAAM,CAAC,EAAE,2CAA2C;IACvE,CAAC,yBAAiB,CAAC,QAAQ,CAAC,EAAE,8CAA8C;IAC5E,CAAC,yBAAiB,CAAC,YAAY,CAAC,EAAE,iCAAiC;IACnE,CAAC,yBAAiB,CAAC,GAAG,CAAC,EAAE,2CAA2C;IACpE,CAAC,yBAAiB,CAAC,SAAS,CAAC,EAAE,uCAAuC;CACvE,CAAC;AAEW,QAAA,yBAAyB,GAAoC;IACxE,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,SAAS;IAC/B,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,wBAAwB;CAC9D,CAAC","sourcesContent":["import { BadgeStatusSize, BadgeStatusStatus } from '../../types';\n\n// Mappings\nexport const CLASSMAP_BADGESTATUS_STATUS_CIRCLE: Record<\n  BadgeStatusStatus,\n  string\n> = {\n  [BadgeStatusStatus.Active]: 'bg-success-default border-success-default',\n  [BadgeStatusStatus.Inactive]: 'bg-background-default border-success-default',\n  [BadgeStatusStatus.Disconnected]: 'bg-icon-muted border-icon-muted',\n  [BadgeStatusStatus.New]: 'bg-primary-default border-primary-default',\n  [BadgeStatusStatus.Attention]: 'bg-error-default border-error-default',\n};\n\nexport const CLASSMAP_BADGESTATUS_SIZE: Record<BadgeStatusSize, string> = {\n  [BadgeStatusSize.Md]: 'h-2 w-2', // 8px width and height\n  [BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height\n};\n"]}

package/dist/components/BadgeStatus/BadgeStatus.constants.d.cts

@@ -0,0 +1,4 @@
+import { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.cjs";
+export declare const CLASSMAP_BADGESTATUS_STATUS_CIRCLE: Record<BadgeStatusStatus, string>;
+export declare const CLASSMAP_BADGESTATUS_SIZE: Record<BadgeStatusSize, string>;
+//# sourceMappingURL=BadgeStatus.constants.d.cts.map

package/dist/components/BadgeStatus/BadgeStatus.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAGjE,eAAO,MAAM,kCAAkC,EAAE,MAAM,CACrD,iBAAiB,EACjB,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAGrE,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.constants.d.mts

@@ -0,0 +1,4 @@
+import { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+export declare const CLASSMAP_BADGESTATUS_STATUS_CIRCLE: Record<BadgeStatusStatus, string>;
+export declare const CLASSMAP_BADGESTATUS_SIZE: Record<BadgeStatusSize, string>;
+//# sourceMappingURL=BadgeStatus.constants.d.mts.map

package/dist/components/BadgeStatus/BadgeStatus.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAGjE,eAAO,MAAM,kCAAkC,EAAE,MAAM,CACrD,iBAAiB,EACjB,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAGrE,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.constants.mjs

@@ -0,0 +1,14 @@
+import { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+// Mappings
+export const CLASSMAP_BADGESTATUS_STATUS_CIRCLE = {
+    [BadgeStatusStatus.Active]: 'bg-success-default border-success-default',
+    [BadgeStatusStatus.Inactive]: 'bg-background-default border-success-default',
+    [BadgeStatusStatus.Disconnected]: 'bg-icon-muted border-icon-muted',
+    [BadgeStatusStatus.New]: 'bg-primary-default border-primary-default',
+    [BadgeStatusStatus.Attention]: 'bg-error-default border-error-default',
+};
+export const CLASSMAP_BADGESTATUS_SIZE = {
+    [BadgeStatusSize.Md]: 'h-2 w-2',
+    [BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height
+};
+//# sourceMappingURL=BadgeStatus.constants.mjs.map

package/dist/components/BadgeStatus/BadgeStatus.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.constants.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAEjE,WAAW;AACX,MAAM,CAAC,MAAM,kCAAkC,GAG3C;IACF,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,2CAA2C;IACvE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,8CAA8C;IAC5E,CAAC,iBAAiB,CAAC,YAAY,CAAC,EAAE,iCAAiC;IACnE,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,2CAA2C;IACpE,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,uCAAuC;CACvE,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAoC;IACxE,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,SAAS;IAC/B,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,wBAAwB;CAC9D,CAAC","sourcesContent":["import { BadgeStatusSize, BadgeStatusStatus } from '../../types';\n\n// Mappings\nexport const CLASSMAP_BADGESTATUS_STATUS_CIRCLE: Record<\n  BadgeStatusStatus,\n  string\n> = {\n  [BadgeStatusStatus.Active]: 'bg-success-default border-success-default',\n  [BadgeStatusStatus.Inactive]: 'bg-background-default border-success-default',\n  [BadgeStatusStatus.Disconnected]: 'bg-icon-muted border-icon-muted',\n  [BadgeStatusStatus.New]: 'bg-primary-default border-primary-default',\n  [BadgeStatusStatus.Attention]: 'bg-error-default border-error-default',\n};\n\nexport const CLASSMAP_BADGESTATUS_SIZE: Record<BadgeStatusSize, string> = {\n  [BadgeStatusSize.Md]: 'h-2 w-2', // 8px width and height\n  [BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height\n};\n"]}

package/dist/components/BadgeStatus/BadgeStatus.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGAoCvB,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAS1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGAoCvB,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.mjs

@@ -0,0 +1,31 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React, { forwardRef } from "react";
+const React = $importDefault($React);
+import { BadgeStatusSize } from "../../types/index.mjs";
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { CLASSMAP_BADGESTATUS_STATUS_CIRCLE, CLASSMAP_BADGESTATUS_SIZE } from "./BadgeStatus.constants.mjs";
+export const BadgeStatus = forwardRef(({ status, size = BadgeStatusSize.Md, hasBorder = true, className, style, ...props }, ref) => {
+    const mergedClassName = twMerge(
+    // Base styles
+    'inline-flex rounded-full', 
+    // hasBorder style
+    hasBorder ? 'border-2 border-background-default' : '', 
+    // Custom classes
+    className);
+    const mergedCircleClassName = twMerge(
+    // Base styles
+    'z-10 rounded-full border-2', 
+    // Size styles
+    CLASSMAP_BADGESTATUS_SIZE[size], 
+    // Circle with semantics style
+    CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]);
+    return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
+        React.createElement("div", { className: mergedCircleClassName })));
+});
+BadgeStatus.displayName = 'BadgeStatus';
+//# sourceMappingURL=BadgeStatus.mjs.map

package/dist/components/BadgeStatus/BadgeStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EAC1B,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,MAAM,EACN,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,0BAA0B;IAC1B,kBAAkB;IAClB,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;IACrD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO;IACnC,cAAc;IACd,4BAA4B;IAC5B,cAAc;IACd,yBAAyB,CAAC,IAAI,CAAC;IAC/B,8BAA8B;IAC9B,kCAAkC,CAAC,MAAM,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,6BAAK,SAAS,EAAE,qBAAqB,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { BadgeStatusSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n  CLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n  CLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\n\nexport const BadgeStatus = forwardRef<HTMLDivElement, BadgeStatusProps>(\n  (\n    {\n      status,\n      size = BadgeStatusSize.Md,\n      hasBorder = true,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex rounded-full',\n      // hasBorder style\n      hasBorder ? 'border-2 border-background-default' : '',\n      // Custom classes\n      className,\n    );\n\n    const mergedCircleClassName = twMerge(\n      // Base styles\n      'z-10 rounded-full border-2',\n      // Size styles\n      CLASSMAP_BADGESTATUS_SIZE[size],\n      // Circle with semantics style\n      CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status],\n    );\n\n    return (\n      <div ref={ref} className={mergedClassName} style={style} {...props}>\n        <div className={mergedCircleClassName} />\n      </div>\n    );\n  },\n);\n\nBadgeStatus.displayName = 'BadgeStatus';\n"]}

package/dist/components/BadgeStatus/BadgeStatus.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=BadgeStatus.types.cjs.map

package/dist/components/BadgeStatus/BadgeStatus.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { BadgeStatusSize, BadgeStatusStatus } from '../../types';\n\n/**\n * BadgeStatus component props.\n */\nexport type BadgeStatusProps = ComponentProps<'div'> & {\n  /**\n   * Optional prop to control the status of the badge\n   * Possible values:\n   * - BadgeStatusStatus.Active. (Connected)\n   * - BadgeStatusStatus.Inactive. (Connected)\n   * - BadgeStatusStatus.Disconnected.\n   * - BadgeStatusStatus.New.\n   * - BadgeStatusStatus.Attention.\n   */\n  status: BadgeStatusStatus;\n  /**\n   * Optional prop to determine whether the badge should display a border\n   *\n   * @default true\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to control the size of the BadgeStatus\n   * Possible values:\n   * - BadgeStatusSize.Md (8px),\n   * - BadgeStatusSize.Lg (10px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: BadgeStatusSize;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/BadgeStatus/BadgeStatus.types.d.cts

@@ -0,0 +1,43 @@
+import type { ComponentProps } from "react";
+import type { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.cjs";
+/**
+ * BadgeStatus component props.
+ */
+export type BadgeStatusProps = ComponentProps<'div'> & {
+    /**
+     * Optional prop to control the status of the badge
+     * Possible values:
+     * - BadgeStatusStatus.Active. (Connected)
+     * - BadgeStatusStatus.Inactive. (Connected)
+     * - BadgeStatusStatus.Disconnected.
+     * - BadgeStatusStatus.New.
+     * - BadgeStatusStatus.Attention.
+     */
+    status: BadgeStatusStatus;
+    /**
+     * Optional prop to determine whether the badge should display a border
+     *
+     * @default true
+     */
+    hasBorder?: boolean;
+    /**
+     * Optional prop to control the size of the BadgeStatus
+     * Possible values:
+     * - BadgeStatusSize.Md (8px),
+     * - BadgeStatusSize.Lg (10px),
+     *
+     * @default AvatarBaseSize.Md
+     */
+    size?: BadgeStatusSize;
+    /**
+     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=BadgeStatus.types.d.cts.map

package/dist/components/BadgeStatus/BadgeStatus.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAEtE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD;;;;;;;;OAQG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.types.d.mts

@@ -0,0 +1,43 @@
+import type { ComponentProps } from "react";
+import type { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+/**
+ * BadgeStatus component props.
+ */
+export type BadgeStatusProps = ComponentProps<'div'> & {
+    /**
+     * Optional prop to control the status of the badge
+     * Possible values:
+     * - BadgeStatusStatus.Active. (Connected)
+     * - BadgeStatusStatus.Inactive. (Connected)
+     * - BadgeStatusStatus.Disconnected.
+     * - BadgeStatusStatus.New.
+     * - BadgeStatusStatus.Attention.
+     */
+    status: BadgeStatusStatus;
+    /**
+     * Optional prop to determine whether the badge should display a border
+     *
+     * @default true
+     */
+    hasBorder?: boolean;
+    /**
+     * Optional prop to control the size of the BadgeStatus
+     * Possible values:
+     * - BadgeStatusSize.Md (8px),
+     * - BadgeStatusSize.Lg (10px),
+     *
+     * @default AvatarBaseSize.Md
+     */
+    size?: BadgeStatusSize;
+    /**
+     * Optional prop for additional CSS classes to be applied to the BadgeStatus component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=BadgeStatus.types.d.mts.map

package/dist/components/BadgeStatus/BadgeStatus.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AAEtE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD;;;;;;;;OAQG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/components/BadgeStatus/BadgeStatus.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BadgeStatus.types.mjs.map

package/dist/components/BadgeStatus/BadgeStatus.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { BadgeStatusSize, BadgeStatusStatus } from '../../types';\n\n/**\n * BadgeStatus component props.\n */\nexport type BadgeStatusProps = ComponentProps<'div'> & {\n  /**\n   * Optional prop to control the status of the badge\n   * Possible values:\n   * - BadgeStatusStatus.Active. (Connected)\n   * - BadgeStatusStatus.Inactive. (Connected)\n   * - BadgeStatusStatus.Disconnected.\n   * - BadgeStatusStatus.New.\n   * - BadgeStatusStatus.Attention.\n   */\n  status: BadgeStatusStatus;\n  /**\n   * Optional prop to determine whether the badge should display a border\n   *\n   * @default true\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to control the size of the BadgeStatus\n   * Possible values:\n   * - BadgeStatusSize.Md (8px),\n   * - BadgeStatusSize.Lg (10px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: BadgeStatusSize;\n  /**\n   * Optional prop for additional CSS classes to be applied to the BadgeStatus component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n};\n"]}

package/dist/components/BadgeStatus/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeStatus = exports.BadgeStatusStatus = exports.BadgeStatusSize = void 0;
+var types_1 = require("../../types/index.cjs");
+Object.defineProperty(exports, "BadgeStatusSize", { enumerable: true, get: function () { return types_1.BadgeStatusSize; } });
+Object.defineProperty(exports, "BadgeStatusStatus", { enumerable: true, get: function () { return types_1.BadgeStatusStatus; } });
+var BadgeStatus_1 = require("./BadgeStatus.cjs");
+Object.defineProperty(exports, "BadgeStatus", { enumerable: true, get: function () { return BadgeStatus_1.BadgeStatus; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/BadgeStatus/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":";;;AAAA,+CAAiE;AAAxD,wGAAA,eAAe,OAAA;AAAE,0GAAA,iBAAiB,OAAA;AAC3C,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { BadgeStatusSize, BadgeStatusStatus } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

package/dist/components/BadgeStatus/index.d.cts

@@ -0,0 +1,4 @@
+export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.cjs";
+export { BadgeStatus } from "./BadgeStatus.cjs";
+export type { BadgeStatusProps } from "./BadgeStatus.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/BadgeStatus/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BadgeStatus/index.d.mts

@@ -0,0 +1,4 @@
+export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+export { BadgeStatus } from "./BadgeStatus.mjs";
+export type { BadgeStatusProps } from "./BadgeStatus.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/BadgeStatus/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BadgeStatus/index.mjs

@@ -0,0 +1,3 @@
+export { BadgeStatusSize, BadgeStatusStatus } from "../../types/index.mjs";
+export { BadgeStatus } from "./BadgeStatus.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/BadgeStatus/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { BadgeStatusSize, BadgeStatusStatus } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../types/index.cjs");
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = types_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = types_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
+    const [anchorWidth, setAnchorWidth] = (0, react_1.useState)(0);
+    const [anchorHeight, setAnchorHeight] = (0, react_1.useState)(0);
+    const [badgeWidth, setBadgeWidth] = (0, react_1.useState)(0);
+    const [badgeHeight, setBadgeHeight] = (0, react_1.useState)(0);
+    const anchorRef = (0, react_1.useRef)(null);
+    const badgeRef = (0, react_1.useRef)(null);
+    // Measure both elements once on mount
+    (0, react_1.useLayoutEffect)(() => {
+        if (anchorRef.current) {
+            const { width, height } = anchorRef.current.getBoundingClientRect();
+            setAnchorWidth(width);
+            setAnchorHeight(height);
+        }
+        if (badgeRef.current) {
+            const { width, height } = badgeRef.current.getBoundingClientRect();
+            setBadgeWidth(width);
+            setBadgeHeight(height);
+        }
+    }, []); // empty deps → run only after first render
+    const finalPositions = (0, react_1.useMemo)(() => {
+        if (customPosition) {
+            return customPosition;
+        }
+        const anchorShapeXOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+            ? 0
+            : anchorWidth * 0.1464;
+        const anchorShapeYOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+            ? 0
+            : anchorHeight * 0.1464;
+        const badgeCenteringXOffset = badgeWidth / 2;
+        const badgeCenteringYOffset = badgeHeight / 2;
+        const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
+        const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
+        switch (position) {
+            case types_1.BadgeWrapperPosition.TopRight:
+                return { top: finalYOffset, right: finalXOffset };
+            case types_1.BadgeWrapperPosition.TopLeft:
+                return { top: finalYOffset, left: finalXOffset };
+            case types_1.BadgeWrapperPosition.BottomLeft:
+                return { bottom: finalYOffset, left: finalXOffset };
+            case types_1.BadgeWrapperPosition.BottomRight:
+            default:
+                return { bottom: finalYOffset, right: finalXOffset };
+        }
+    }, [
+        position,
+        positionAnchorShape,
+        anchorWidth,
+        anchorHeight,
+        badgeWidth,
+        badgeHeight,
+        positionXOffset,
+        positionYOffset,
+        customPosition,
+    ]);
+    const containerClassName = (0, tw_merge_1.twMerge)('relative inline-flex self-start', className);
+    return (react_1.default.createElement("div", { ref: ref, className: containerClassName, style: style, ...props },
+        react_1.default.createElement("div", { className: "inline-flex", ref: anchorRef, ...childrenContainerProps }, children),
+        react_1.default.createElement("div", { ref: badgeRef, className: "absolute", style: finalPositions, ...badgeContainerProps }, badge)));
+});
+exports.BadgeWrapper.displayName = 'BadgeWrapper';
+//# sourceMappingURL=BadgeWrapper.cjs.map

package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport React, {\n  forwardRef,\n  useState,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\n      children,\n      childrenContainerProps,\n      badge,\n      badgeContainerProps,\n      position = BadgeWrapperPosition.BottomRight,\n      positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n      positionXOffset = 0,\n      positionYOffset = 0,\n      customPosition,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const [anchorWidth, setAnchorWidth] = useState(0);\n    const [anchorHeight, setAnchorHeight] = useState(0);\n    const [badgeWidth, setBadgeWidth] = useState(0);\n    const [badgeHeight, setBadgeHeight] = useState(0);\n\n    const anchorRef = useRef<HTMLDivElement | null>(null);\n    const badgeRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure both elements once on mount\n    useLayoutEffect(() => {\n      if (anchorRef.current) {\n        const { width, height } = anchorRef.current.getBoundingClientRect();\n        setAnchorWidth(width);\n        setAnchorHeight(height);\n      }\n      if (badgeRef.current) {\n        const { width, height } = badgeRef.current.getBoundingClientRect();\n        setBadgeWidth(width);\n        setBadgeHeight(height);\n      }\n    }, []); // empty deps → run only after first render\n\n    const finalPositions = useMemo<React.CSSProperties>(() => {\n      if (customPosition) {\n        return customPosition as CSSProperties;\n      }\n\n      const anchorShapeXOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorWidth * 0.1464;\n      const anchorShapeYOffset =\n        positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n          ? 0\n          : anchorHeight * 0.1464;\n\n      const badgeCenteringXOffset = badgeWidth / 2;\n      const badgeCenteringYOffset = badgeHeight / 2;\n\n      const finalXOffset =\n        anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n      const finalYOffset =\n        anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n\n      switch (position) {\n        case BadgeWrapperPosition.TopRight:\n          return { top: finalYOffset, right: finalXOffset };\n        case BadgeWrapperPosition.TopLeft:\n          return { top: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomLeft:\n          return { bottom: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomRight:\n        default:\n          return { bottom: finalYOffset, right: finalXOffset };\n      }\n    }, [\n      position,\n      positionAnchorShape,\n      anchorWidth,\n      anchorHeight,\n      badgeWidth,\n      badgeHeight,\n      positionXOffset,\n      positionYOffset,\n      customPosition,\n    ]);\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div\n          className=\"inline-flex\"\n          ref={anchorRef}\n          {...childrenContainerProps}\n        >\n          {children}\n        </div>\n\n        <div\n          ref={badgeRef}\n          className=\"absolute\"\n          style={finalPositions}\n          {...badgeContainerProps}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BadgeWrapperProps } from "./BadgeWrapper.types.cjs";
+export declare const BadgeWrapper: React.ForwardRefExoticComponent<Omit<BadgeWrapperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BadgeWrapper.d.cts.map

package/dist/components/BadgeWrapper/BadgeWrapper.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BadgeWrapperProps } from "./BadgeWrapper.types.mjs";
+export declare const BadgeWrapper: React.ForwardRefExoticComponent<Omit<BadgeWrapperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BadgeWrapper.d.mts.map

package/dist/components/BadgeWrapper/BadgeWrapper.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.mjs

@@ -0,0 +1,73 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React, { forwardRef, useState, useLayoutEffect, useMemo, useRef } from "react";
+const React = $importDefault($React);
+import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
+import { twMerge } from "../../utils/tw-merge.mjs";
+export const BadgeWrapper = forwardRef(({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
+    const [anchorWidth, setAnchorWidth] = useState(0);
+    const [anchorHeight, setAnchorHeight] = useState(0);
+    const [badgeWidth, setBadgeWidth] = useState(0);
+    const [badgeHeight, setBadgeHeight] = useState(0);
+    const anchorRef = useRef(null);
+    const badgeRef = useRef(null);
+    // Measure both elements once on mount
+    useLayoutEffect(() => {
+        if (anchorRef.current) {
+            const { width, height } = anchorRef.current.getBoundingClientRect();
+            setAnchorWidth(width);
+            setAnchorHeight(height);
+        }
+        if (badgeRef.current) {
+            const { width, height } = badgeRef.current.getBoundingClientRect();
+            setBadgeWidth(width);
+            setBadgeHeight(height);
+        }
+    }, []); // empty deps → run only after first render
+    const finalPositions = useMemo(() => {
+        if (customPosition) {
+            return customPosition;
+        }
+        const anchorShapeXOffset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular
+            ? 0
+            : anchorWidth * 0.1464;
+        const anchorShapeYOffset = positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular
+            ? 0
+            : anchorHeight * 0.1464;
+        const badgeCenteringXOffset = badgeWidth / 2;
+        const badgeCenteringYOffset = badgeHeight / 2;
+        const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
+        const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
+        switch (position) {
+            case BadgeWrapperPosition.TopRight:
+                return { top: finalYOffset, right: finalXOffset };
+            case BadgeWrapperPosition.TopLeft:
+                return { top: finalYOffset, left: finalXOffset };
+            case BadgeWrapperPosition.BottomLeft:
+                return { bottom: finalYOffset, left: finalXOffset };
+            case BadgeWrapperPosition.BottomRight:
+            default:
+                return { bottom: finalYOffset, right: finalXOffset };
+        }
+    }, [
+        position,
+        positionAnchorShape,
+        anchorWidth,
+        anchorHeight,
+        badgeWidth,
+        badgeHeight,
+        positionXOffset,
+        positionYOffset,
+        customPosition,
+    ]);
+    const containerClassName = twMerge('relative inline-flex self-start', className);
+    return (React.createElement("div", { ref: ref, className: containerClassName, style: style, ...props },
+        React.createElement("div", { className: "inline-flex", ref: anchorRef, ...childrenContainerProps }, children),
+        React.createElement("div", { ref: badgeRef, className: "absolute", style: finalPositions, ...badgeContainerProps }, badge)));
+});
+BadgeWrapper.displayName = 'BadgeWrapper';
+//# sourceMappingURL=BadgeWrapper.mjs.map